feat: adding breadcrumbs (#697)

* feat: adding breadcrumbs Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> * feat: prettier Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> * test: fixing existing tests Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> * fix: model tests Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> * fix: playground tests Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com> --------- Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>
containers · Mar 26, 2024 · 593dd88 · 593dd88
1 parent 878e944
commit 593dd88
Show file tree

Hide file tree

Showing 14 changed files with 63 additions and 33 deletions.
diff --git a/packages/frontend/src/App.svelte b/packages/frontend/src/App.svelte
@@ -32,31 +32,31 @@ onMount(() => {
 });
 </script>
 
-<Route path="/*" breadcrumb="Home" isAppMounted="{isMounted}" let:meta>
+<Route path="/*" isAppMounted="{isMounted}" let:meta>
   <main class="flex flex-col w-screen h-screen overflow-hidden bg-charcoal-700">
     <div class="flex flex-row w-full h-full overflow-hidden">
       <Navigation meta="{meta}" />
 
       <!-- Dashboard -->
-      <Route path="/" breadcrumb="IA Studio Dashboard Page">
+      <Route path="/">
         <Dashboard />
       </Route>
 
       <!-- Recipes Catalog -->
-      <Route path="/recipes" breadcrumb="Recipes Catalog">
+      <Route path="/recipes">
         <Recipes />
       </Route>
 
       <!-- Applications -->
-      <Route path="/applications" breadcrumb="AI Apps">
+      <Route path="/applications">
         <Applications />
       </Route>
 
       <!-- Playgrounds -->
-      <Route path="/playgrounds" breadcrumb="Playgrounds environments">
+      <Route path="/playgrounds">
         <Playgrounds />
       </Route>
-      <Route path="/playground/:id/*" breadcrumb="Playground environment" let:meta>
+      <Route path="/playground/:id/*" let:meta>
         {#if meta.params.id === 'create'}
           <PlaygroundCreate />
         {:else}
@@ -65,27 +65,27 @@ onMount(() => {
       </Route>
 
       <!-- Preferences -->
-      <Route path="/preferences" breadcrumb="Preferences">
+      <Route path="/preferences">
         <Preferences />
       </Route>
 
-      <Route path="/recipe/:id/*" breadcrumb="Recipe Details" let:meta>
+      <Route path="/recipe/:id/*" let:meta>
         <Recipe recipeId="{meta.params.id}" />
       </Route>
 
-      <Route path="/models/*" breadcrumb="Models">
+      <Route path="/models/*">
         <Models />
       </Route>
 
-      <Route path="/model/:id/*" breadcrumb="Model Details" let:meta>
+      <Route path="/model/:id/*" let:meta>
         <Model modelId="{meta.params.id}" />
       </Route>
 
-      <Route path="/services/*" breadcrumb="Services">
+      <Route path="/services/*">
         <Services />
       </Route>
 
-      <Route path="/service/:id/*" breadcrumb="Service Details" let:meta>
+      <Route path="/service/:id/*" let:meta>
         {#if meta.params.id === 'create'}
           <CreateService />
         {:else}

diff --git a/packages/frontend/src/Route.svelte b/packages/frontend/src/Route.svelte
@@ -7,7 +7,6 @@ export let path = '/*';
 export let fallback = false;
 export let redirect = false;
 export let firstmatch = false;
-export let breadcrumb: string | undefined = undefined;
 
 export let isAppMounted: boolean = false;
 
@@ -37,7 +36,6 @@ $: route.update({
   path,
   redirect,
   firstmatch,
-  breadcrumb,
 });
 </script>
 

diff --git a/packages/frontend/src/lib/NavPage.svelte b/packages/frontend/src/lib/NavPage.svelte
@@ -2,19 +2,30 @@
 import Fa from 'svelte-fa';
 import type { IconDefinition } from '@fortawesome/free-regular-svg-icons';
 import LinearProgress from '/@/lib/progress/LinearProgress.svelte';
+import type { TinroBreadcrumb } from 'tinro';
 
 export let title: string;
 export let searchTerm = '';
 export let searchEnabled = true;
 export let loading = false;
 export let icon: IconDefinition | undefined = undefined;
 export let contentBackground = '';
+export let lastPage: TinroBreadcrumb | undefined = undefined;
 </script>
 
 <div class="flex flex-col w-full h-full shadow-pageheader bg-charcoal-600">
   <div class="flex flex-col w-full h-full pt-4" role="region" aria-label="{title}">
     <div class="flex pb-2 px-5" role="region" aria-label="header">
       <div class="flex flex-col w-full">
+        {#if lastPage !== undefined}
+          <div class="flex flew-row items-center text-sm text-gray-700 pb-1">
+            <a
+              class="text-purple-400 hover:bg-white hover:bg-opacity-10 transition-all rounded-[4px] p-0.5 no-underline cursor-pointer"
+              href="{lastPage.path}">{lastPage.name}</a>
+            <div class="mx-2">&gt;</div>
+            <div class="grow font-extralight" aria-label="name">{title}</div>
+          </div>
+        {/if}
         <div class="flex flex-row w-full">
           {#if icon}
             <div class="bg-charcoal-800 rounded-full w-8 h-8 flex items-center justify-center mr-3">

diff --git a/packages/frontend/src/pages/CreateService.svelte b/packages/frontend/src/pages/CreateService.svelte
@@ -108,7 +108,12 @@ onMount(async () => {
 });
 </script>
 
-<NavPage icon="{faPlus}" title="Creating Model service" searchEnabled="{false}" loading="{containerPort === undefined}">
+<NavPage
+  lastPage="{{ name: 'Model Services', path: '/services' }}"
+  icon="{faPlus}"
+  title="Creating Model service"
+  searchEnabled="{false}"
+  loading="{containerPort === undefined}">
   <svelte:fragment slot="content">
     <div class="flex flex-col w-full">
       <!-- tasks tracked -->

diff --git a/packages/frontend/src/pages/InferenceServerDetails.svelte b/packages/frontend/src/pages/InferenceServerDetails.svelte
@@ -72,7 +72,7 @@ onMount(() => {
 });
 </script>
 
-<NavPage title="Service Details" searchEnabled="{false}">
+<NavPage lastPage="{{ name: 'Model Services', path: '/services' }}" title="Service Details" searchEnabled="{false}">
   <svelte:fragment slot="content">
     <div slot="content" class="flex flex-col min-w-full min-h-full">
       <div class="min-w-full min-h-full flex-1">

diff --git a/packages/frontend/src/pages/Model.spec.ts b/packages/frontend/src/pages/Model.spec.ts
@@ -52,6 +52,6 @@ test('should display model information', async () => {
   });
   await new Promise(resolve => setTimeout(resolve, 200));
 
-  screen.getByText(model!.name);
+  expect(screen.getAllByText(model!.name).length).toBeGreaterThan(0);
   screen.getByText(model!.description);
 });
diff --git a/packages/frontend/src/pages/Model.svelte b/packages/frontend/src/pages/Model.svelte
@@ -9,7 +9,11 @@ export let modelId: string;
 $: model = $catalog.models.find(m => m.id === modelId);
 </script>
 
-<NavPage title="{model?.name || ''}" searchEnabled="{false}" loading="{model === undefined}">
+<NavPage
+  lastPage="{{ name: 'Models', path: '/models' }}"
+  title="{model?.name || ''}"
+  searchEnabled="{false}"
+  loading="{model === undefined}">
   <svelte:fragment slot="content">
     <div class="flex flex-row w-full">
       <div class="flex-grow p-5">

diff --git a/packages/frontend/src/pages/Models.svelte b/packages/frontend/src/pages/Models.svelte
@@ -111,7 +111,7 @@ onMount(() => {
             {/if}
 
             <!-- All models -->
-            <Route path="/" breadcrumb="All">
+            <Route path="/">
               {#if filteredModels.length > 0}
                 <Table kind="model" data="{filteredModels}" columns="{columns}" row="{row}"></Table>
               {:else}
@@ -120,7 +120,7 @@ onMount(() => {
             </Route>
 
             <!-- Downloaded models -->
-            <Route path="/downloaded" breadcrumb="Downloaded">
+            <Route path="/downloaded">
               {#if localModels.length > 0}
                 <Table kind="model" data="{localModels}" columns="{columns}" row="{row}"></Table>
               {:else}
@@ -129,7 +129,7 @@ onMount(() => {
             </Route>
 
             <!-- Available models (from catalogs)-->
-            <Route path="/available" breadcrumb="Available">
+            <Route path="/available">
               {#if remoteModels.length > 0}
                 <Table kind="model" data="{remoteModels}" columns="{columns}" row="{row}"></Table>
               {:else}

diff --git a/packages/frontend/src/pages/Playground.spec.ts b/packages/frontend/src/pages/Playground.spec.ts
@@ -84,9 +84,9 @@ test('should display playground and model names in header', async () => {
   await waitFor(() => {
     const header = screen.getByRole('region', { name: 'header' });
     expect(header).toBeInTheDocument();
-    const title = within(header).getByText('Playground 1');
+    const title = within(header).getAllByText('Playground 1')[0];
     expect(title).toBeInTheDocument();
-    const subtitle = within(header).getByText('Model 1');
+    const subtitle = within(header).getAllByText('Model 1')[0];
     expect(subtitle).toBeInTheDocument();
   });
 });

diff --git a/packages/frontend/src/pages/Playground.svelte b/packages/frontend/src/pages/Playground.svelte
@@ -72,7 +72,11 @@ async function scrollToBottom(element: Element) {
 </script>
 
 {#if playground}
-  <NavPage title="{playground?.name}" searchEnabled="{false}" contentBackground="bg-charcoal-500">
+  <NavPage
+    lastPage="{{ name: 'Playgrounds', path: '/playgrounds' }}"
+    title="{playground?.name}"
+    searchEnabled="{false}"
+    contentBackground="bg-charcoal-500">
     <svelte:fragment slot="subtitle">{model?.name}</svelte:fragment>
     <svelte:fragment slot="content">
       <div class="flex flex-col w-full h-full">

diff --git a/packages/frontend/src/pages/PlaygroundCreate.svelte b/packages/frontend/src/pages/PlaygroundCreate.svelte
@@ -100,7 +100,11 @@ onDestroy(() => {
 });
 </script>
 
-<NavPage icon="{faPlus}" title="New Playground environment" searchEnabled="{false}">
+<NavPage
+  lastPage="{{ name: 'Playgrounds', path: '/playgrounds' }}"
+  icon="{faPlus}"
+  title="New Playground environment"
+  searchEnabled="{false}">
   <svelte:fragment slot="content">
     <div class="flex flex-col w-full">
       <!-- tasks tracked -->

diff --git a/packages/frontend/src/pages/Playgrounds.svelte b/packages/frontend/src/pages/Playgrounds.svelte
@@ -22,7 +22,10 @@ function createNewPlayground() {
 }
 </script>
 
-<NavPage title="Playgrounds environments" searchEnabled="{false}">
+<NavPage
+  lastPage="{{ name: 'Playgrounds', path: '/playgrounds' }}"
+  title="Playgrounds environments"
+  searchEnabled="{false}">
   <svelte:fragment slot="additional-actions">
     <Button on:click="{() => createNewPlayground()}">New Playground</Button>
   </svelte:fragment>

diff --git a/packages/frontend/src/pages/Recipe.spec.ts b/packages/frontend/src/pages/Recipe.spec.ts
@@ -183,8 +183,8 @@ test('should display recipe information', async () => {
     recipeId: 'recipe 1',
   });
 
-  screen.getByText('Recipe 1');
-  screen.getByText('readme 1');
+  expect(screen.queryAllByText('Recipe 1').length).greaterThan(0);
+  expect(screen.queryAllByText('readme 1').length).greaterThan(0);
 });
 
 test('should display updated recipe information', async () => {
@@ -196,12 +196,12 @@ test('should display updated recipe information', async () => {
     recipeId: 'recipe 1',
   });
 
-  screen.getByText('Recipe 1');
-  screen.getByText('readme 1');
+  expect(screen.queryAllByText('Recipe 1').length).greaterThan(0);
+  expect(screen.queryAllByText('readme 1').length).greaterThan(0);
 
   customCatalog.set(updatedCatalog);
   await new Promise(resolve => setTimeout(resolve, 10));
-  screen.getByText('New Recipe Name');
+  expect(screen.queryAllByText('New Recipe Name').length).greaterThan(0);
 });
 
 test('should send telemetry data', async () => {

diff --git a/packages/frontend/src/pages/Recipe.svelte b/packages/frontend/src/pages/Recipe.svelte
@@ -32,6 +32,7 @@ function setSelectedModel(modelId: string) {
 </script>
 
 <NavPage
+  lastPage="{{ name: 'Recipes', path: '/recipes' }}"
   title="{recipe?.name || ''}"
   icon="{getIcon(recipe?.icon)}"
   searchEnabled="{false}"
@@ -43,10 +44,10 @@ function setSelectedModel(modelId: string) {
   <svelte:fragment slot="content">
     <ContentDetailsLayout detailsTitle="AI App Details" detailsLabel="application details">
       <svelte:fragment slot="content">
-        <Route path="/" breadcrumb="Summary">
+        <Route path="/">
           <MarkdownRenderer source="{recipe?.readme}" />
         </Route>
-        <Route path="/models" breadcrumb="History">
+        <Route path="/models">
           <RecipeModels
             modelsIds="{recipe?.models}"
             selectedModelId="{selectedModelId}"