From 16ad2ec3dd4f7b37d9c9ef3c6e2754274ae117d4 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Mon, 21 Oct 2024 15:56:33 -0600
Subject: [PATCH] Create CodecServerErrorBanner component

---
 .../codec-server-error-banner.svelte          | 29 +++++++++++++++++++
 src/routes/(app)/+layout.svelte               | 23 +++------------
 2 files changed, 33 insertions(+), 19 deletions(-)
 create mode 100644 src/lib/components/codec-server-error-banner.svelte

diff --git a/src/lib/components/codec-server-error-banner.svelte b/src/lib/components/codec-server-error-banner.svelte
new file mode 100644
index 000000000..4d29e495f
--- /dev/null
+++ b/src/lib/components/codec-server-error-banner.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+
+  import Banner from '$lib/holocene/banner/banner.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { dataEncoder } from '$lib/stores/data-encoder';
+  import { lastUsedNamespace } from '$lib/stores/namespaces';
+
+  $: namespace = $page.params?.namespace ?? $lastUsedNamespace;
+  $: pathNameSplit = $page.url.pathname.split('/');
+  $: showNamespaceSpecificNav =
+    namespace &&
+    (pathNameSplit.includes('workflows') ||
+      pathNameSplit.includes('schedules') ||
+      pathNameSplit.includes('batch-operations') ||
+      pathNameSplit.includes('task-queues') ||
+      pathNameSplit.includes('import'));
+</script>
+
+{#if $dataEncoder.hasError && showNamespaceSpecificNav}
+  <Banner
+    message={translate('data-encoder.codec-server-error')}
+    id="transcoder-error"
+    icon="transcoder-error"
+    type="danger"
+  />
+{:else}
+  <slot name="fallback" />
+{/if}
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index f9bc7096b..f01db9a1c 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -3,6 +3,7 @@
   import { page, updated } from '$app/stores';
 
   import BottomNavigation from '$lib/components/bottom-nav.svelte';
+  import CodecServerErrorBanner from '$lib/components/codec-server-error-banner.svelte';
   import DataEncoderSettings from '$lib/components/data-encoder-settings.svelte';
   import SideNavigation from '$lib/components/side-nav.svelte';
   import SkipNavigation from '$lib/components/skip-nav.svelte';
@@ -16,7 +17,6 @@
   import { translate } from '$lib/i18n/translate';
   import { clearAuthUser } from '$lib/stores/auth-user';
   import { inProgressBatchOperation } from '$lib/stores/batch-operations';
-  import { dataEncoder } from '$lib/stores/data-encoder';
   import { lastUsedNamespace, namespaces } from '$lib/stores/namespaces';
   import { toaster } from '$lib/stores/toaster';
   import type { NamespaceListItem, NavLinkListItem } from '$lib/types/global';
@@ -53,15 +53,6 @@
     };
   });
 
-  $: pathNameSplit = $page.url.pathname.split('/');
-  $: showNamespaceSpecificNav =
-    activeNamespaceName &&
-    (pathNameSplit.includes('workflows') ||
-      pathNameSplit.includes('schedules') ||
-      pathNameSplit.includes('batch-operations') ||
-      pathNameSplit.includes('task-queues') ||
-      pathNameSplit.includes('import'));
-
   $: linkList = getLinkList(activeNamespaceName, !!$inProgressBatchOperation);
 
   const getLinkList = (
@@ -200,21 +191,15 @@
     <TopNavigation {namespaceList}>
       <UserMenu {logout} />
     </TopNavigation>
-    {#if $dataEncoder.hasError && showNamespaceSpecificNav}
-      <Banner
-        message={translate('data-encoder.codec-server-error')}
-        id="transcoder-error"
-        icon="transcoder-error"
-        type="danger"
-      />
-    {:else}
+    <CodecServerErrorBanner>
       <Banner
         id="settings-banner-text"
         message={$page.data.settings?.bannerText}
         dismissable
         dismissLabel={translate('common.close')}
+        slot="fallback"
       />
-    {/if}
+    </CodecServerErrorBanner>
     <div
       slot="main"
       class="flex h-[calc(100%-2.5rem)] w-full flex-col gap-4 p-4 md:p-8"