Only show NamespacePicker on certain pages (#2522)

* Only show NamespacePicker on certain pages

* Update integration tests

Author: laurakwhit

Diff for: src/lib/components/bottom-nav.svelte

@@ -22,6 +22,7 @@
   export let namespaceList: NamespaceListItem[] | undefined = [];
   export let linkList: NavLinkListItem[];
   export let isCloud = false;
+  export let showNamespacePicker = true;
 
   let viewLinks = false;
   let viewNamespaces = writable(false);
@@ -120,24 +121,26 @@
       <Logo height={32} width={32} />
     {/if}
   </button>
-  <div class="namespace-wrapper">
-    <Button
-      variant="ghost"
-      data-testid="namespace-switcher"
-      leadingIcon="namespace-switcher"
-      size="xs"
-      class="grow text-white"
-      on:click={onNamespaceClick}>{truncateNamespace(namespace)}</Button
-    >
-    <div class="ml-1 h-full w-1 border-l border-subtle" />
-    <Button
-      variant="ghost"
-      size="xs"
-      href={routeForNamespace({ namespace })}
-      disabled={!namespaceExists}
-      ><Icon class="text-white" name="external-link" /></Button
-    >
-  </div>
+  {#if showNamespacePicker}
+    <div class="namespace-wrapper">
+      <Button
+        variant="ghost"
+        data-testid="namespace-switcher"
+        leadingIcon="namespace-switcher"
+        size="xs"
+        class="grow text-white"
+        on:click={onNamespaceClick}>{truncateNamespace(namespace)}</Button
+      >
+      <div class="ml-1 h-full w-1 border-l border-subtle" />
+      <Button
+        variant="ghost"
+        size="xs"
+        href={routeForNamespace({ namespace })}
+        disabled={!namespaceExists}
+        ><Icon class="text-white" name="external-link" /></Button
+      >
+    </div>
+  {/if}
   <button
     class="nav-button"
     data-testid="nav-profile-button"

Diff for: src/routes/(app)/+layout.svelte

@@ -54,20 +54,50 @@
     };
   });
 
-  $: linkList = getLinkList(activeNamespaceName, !!$inProgressBatchOperation);
+  $: routes = getRoutes(activeNamespaceName);
+  $: linkList = getLinkList(routes, !!$inProgressBatchOperation);
+
+  const getRoutes = (namespace: string) => {
+    return {
+      workflowsRoute: routeForWorkflows({ namespace }),
+      schedulesRoute: routeForSchedules({ namespace }),
+      batchOperationsRoute: routeForBatchOperations({ namespace }),
+      archivalRoute: routeForArchivalWorkfows({ namespace }),
+      namespacesRoute: routeForNamespaces(),
+      nexusRoute: routeForNexus(),
+      historyImportRoute: routeForEventHistoryImport(),
+    };
+  };
+
+  $: ({ workflowsRoute, schedulesRoute, batchOperationsRoute, archivalRoute } =
+    routes);
+  $: showNamespacePicker = [
+    workflowsRoute,
+    schedulesRoute,
+    batchOperationsRoute,
+    archivalRoute,
+  ].some((route) => $page.url.href.includes(route));
 
   const getLinkList = (
-    namespace: string,
+    {
+      workflowsRoute,
+      schedulesRoute,
+      batchOperationsRoute,
+      archivalRoute,
+      namespacesRoute,
+      nexusRoute,
+      historyImportRoute,
+    }: {
+      workflowsRoute: string;
+      schedulesRoute: string;
+      batchOperationsRoute: string;
+      archivalRoute: string;
+      namespacesRoute: string;
+      nexusRoute: string;
+      historyImportRoute: string;
+    },
     inProgressBatch: boolean,
   ): NavLinkListItem[] => {
-    const workflowsRoute = routeForWorkflows({ namespace });
-    const schedulesRoute = routeForSchedules({ namespace });
-    const batchOperationsRoute = routeForBatchOperations({ namespace });
-    const archivalRoute = routeForArchivalWorkfows({ namespace });
-    const namespacesRoute = routeForNamespaces();
-    const nexusRoute = routeForNexus();
-    const historyImportRoute = routeForEventHistoryImport();
-
     return [
       {
         href: workflowsRoute,
@@ -190,7 +220,11 @@
   <MainContentContainer>
     <DataEncoderSettings class="hidden md:flex" />
     <TopNavigation>
-      <NamespacePicker {namespaceList} slot="left" />
+      <svelte:fragment slot="left">
+        {#if showNamespacePicker}
+          <NamespacePicker {namespaceList} />
+        {/if}
+      </svelte:fragment>
       <UserMenu {logout} />
     </TopNavigation>
     <CodecServerErrorBanner>
@@ -210,7 +244,13 @@
         <slot />
       </ErrorBoundary>
     </div>
-    <BottomNavigation slot="footer" {linkList} {namespaceList} {isCloud}>
+    <BottomNavigation
+      slot="footer"
+      {linkList}
+      {namespaceList}
+      {isCloud}
+      {showNamespacePicker}
+    >
       <UserMenuMobile {logout} />
     </BottomNavigation>
   </MainContentContainer>

Diff for: tests/integration/workflow-navigation.desktop.spec.ts

@@ -67,7 +67,7 @@ test('Top Navigation current namespace is present and has other namespaces to se
   ).toBeHidden();
 });
 
-test('Top Navigation current namespace is present on non-namespace specific pages', async ({
+test('Top Navigation current namespace is NOT present on non-namespace specific pages', async ({
   page,
 }) => {
   const switcher = page
@@ -76,6 +76,7 @@ test('Top Navigation current namespace is present on non-namespace specific page
 
   await expect(switcher).toBeVisible();
   await page.getByRole('link', { name: 'Namespaces' }).click();
+  await expect(switcher).toBeHidden();
   await page.getByRole('link', { name: 'Workflows' }).first().click();
   await expect(switcher).toBeVisible();
 });

Diff for: tests/integration/workflow-navigation.mobile.spec.ts

@@ -94,7 +94,7 @@ test('Top Navigation current namespace is present and has other namespaces to se
   ).toBeHidden();
 });
 
-test('Top Navigation current namespace is present on non-namespace specific pages', async ({
+test('Top Navigation current namespace is NOT present on non-namespace specific pages', async ({
   page,
 }) => {
   const switcher = page
@@ -103,7 +103,7 @@ test('Top Navigation current namespace is present on non-namespace specific page
   await expect(switcher).toBeVisible();
   await page.getByTestId('nav-menu-button').click();
   await page.getByRole('link', { name: 'Namespaces' }).click();
-  await expect(switcher).toBeVisible();
+  await expect(switcher).toBeHidden();
   await page.getByTestId('nav-menu-button').click();
   await page.getByRole('link', { name: 'Workflows' }).click();
   await expect(switcher).toBeVisible();