Add 'import project' button to project settings, and extend app+page …

…to allow multiple buttons, and mobile safe layout
Kiln-AI · Nov 15, 2024 · 1b59b4d · 1b59b4d
1 parent dec3fff
commit 1b59b4d
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 24 deletions.
diff --git a/app/web_ui/src/routes/(app)/app_page.svelte b/app/web_ui/src/routes/(app)/app_page.svelte
@@ -5,15 +5,19 @@
   export let subtitle: string = ""
   export let sub_subtitle: string = ""
 
-  export let action_button: string | null = null
-  export let action_button_href: string | null = null
-  export let action_button_action: (() => void) | null = null
+  type ActionButton = {
+    label: string
+    handler?: () => void
+    href?: string
+  }
+
+  export let action_buttons: ActionButton[] = []
 
-  function run_action_button() {
-    if (action_button_action) {
-      action_button_action()
-    } else if (action_button_href) {
-      goto(action_button_href)
+  function run_action_button(action_button: ActionButton) {
+    if (action_button.handler) {
+      action_button.handler()
+    } else if (action_button.href) {
+      goto(action_button.href)
     }
   }
 </script>
@@ -28,13 +32,18 @@
       <p class="text-sm text-gray-500 mt-1">{sub_subtitle}</p>
     {/if}
   </div>
-  {#if action_button}
-    <div>
-      <button on:click={run_action_button} class="btn px-6">
-        {action_button}
-      </button>
-    </div>
-  {/if}
+  <div class="flex flex-col md:flex-row gap-2">
+    {#each action_buttons as action_button}
+      <div>
+        <button
+          on:click={() => run_action_button(action_button)}
+          class="btn btn-xs md:btn-md md:px-6"
+        >
+          {action_button.label}
+        </button>
+      </div>
+    {/each}
+  </div>
 </div>
 
 <div class="mt-8 mb-12">

diff --git a/app/web_ui/src/routes/(app)/dataset/[project_id]/[task_id]/+page.svelte b/app/web_ui/src/routes/(app)/dataset/[project_id]/[task_id]/+page.svelte
@@ -190,8 +190,7 @@
 <AppPage
   title="Dataset"
   subtitle="Explore your runs, sample data, and ratings for this task."
-  action_button="Add Data"
-  action_button_href="/run"
+  action_buttons={[{ label: "Add Data", href: "/run" }]}
 >
   {#if loading}
     <div class="w-full min-h-[50vh] flex justify-center items-center">

diff --git a/app/web_ui/src/routes/(app)/dataset/[project_id]/[task_id]/[run_id]/run/+page.svelte b/app/web_ui/src/routes/(app)/dataset/[project_id]/[task_id]/[run_id]/run/+page.svelte
@@ -98,8 +98,9 @@
   <AppPage
     title="Dataset Run"
     subtitle={run?.id ? `Run ID: ${run.id}` : undefined}
-    action_button={deleted ? null : "Delete Run"}
-    action_button_action={deleteRun}
+    action_buttons={deleted
+      ? []
+      : [{ label: "Delete Run", handler: deleteRun }]}
   >
     {#if loading}
       <div class="w-full min-h-[50vh] flex justify-center items-center">

diff --git a/app/web_ui/src/routes/(app)/run/+page.svelte b/app/web_ui/src/routes/(app)/run/+page.svelte
@@ -95,8 +95,7 @@
   <AppPage
     title="Run"
     bind:subtitle
-    action_button="Clear All"
-    action_button_action={clear_all}
+    action_buttons={[{ label: "Clear All", handler: clear_all }]}
   >
     <div class="flex flex-col xl:flex-row gap-8 xl:gap-16">
       <div class="grow">

diff --git a/app/web_ui/src/routes/(app)/settings/manage_projects/+page.svelte b/app/web_ui/src/routes/(app)/settings/manage_projects/+page.svelte
@@ -37,8 +37,13 @@
 <AppPage
   title="Manage Projects"
   subtitle="Add or remove projects"
-  action_button="Create Project"
-  action_button_href="/settings/create_project"
+  action_buttons={[
+    { label: "Create Project", href: "/settings/create_project" },
+    {
+      label: "Import Project",
+      href: "/settings/create_project?import=true",
+    },
+  ]}
 >
   {#if $projects == null}
     <div class=" mx-auto py-8 px-24">

diff --git a/app/web_ui/src/routes/(fullscreen)/setup/(setup)/create_project/edit_project.svelte b/app/web_ui/src/routes/(fullscreen)/setup/(setup)/create_project/edit_project.svelte
@@ -1,11 +1,18 @@
 <script lang="ts">
   import { goto } from "$app/navigation"
+  import { page } from "$app/stores"
   import { load_projects } from "$lib/stores"
   import FormContainer from "$lib/utils/form_container.svelte"
   import FormElement from "$lib/utils/form_element.svelte"
   import { KilnError, createKilnError } from "$lib/utils/error_handlers"
   import { client } from "$lib/api_client"
   import type { Project } from "$lib/types"
+  import { onMount } from "svelte"
+
+  let importing = false
+  onMount(() => {
+    importing = $page.url.searchParams.get("import") === "true"
+  })
 
   export let created = false
   // Prevents flash of complete UI if we're going to redirect
@@ -95,7 +102,6 @@
     }
   }
 
-  let importing = false
   let import_project_path = ""
 
   const import_project = async () => {