Nexus Bug Bash UI updates (#2207)

* Add nexus typed errors, add separate lists of target and caller namespaces, add editDisabled check * Fix divider order in SideNav
temporalio · Jul 15, 2024 · a976552 · a976552
1 parent f418976
commit a976552
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 25 deletions.
diff --git a/src/lib/components/side-nav.svelte b/src/lib/components/side-nav.svelte
@@ -23,6 +23,9 @@
 <Navigation {isCloud} aria-label={translate('common.primary')}>
   {#each linkList as item}
     {#if !item?.hidden}
+      {#if item.divider}
+        <hr class="-mx-4 my-8 border-subtle" />
+      {/if}
       <NavigationItem
         link={item.href}
         label={item.label}
@@ -31,9 +34,6 @@
         external={item?.external}
         animate={item?.animate}
       />
-      {#if item.divider}
-        <hr class="-mx-4 my-8 border-subtle" />
-      {/if}
     {/if}
   {/each}
   <svelte.fragment slot="bottom">

diff --git a/src/lib/i18n/locales/en/typed-errors.ts b/src/lib/i18n/locales/en/typed-errors.ts
@@ -170,4 +170,24 @@ export const Strings = {
     description:
       'A Workflow Update was received by the Temporal Server while a Workflow Task was being processed on a Worker.',
   },
+  BadScheduleNexusOperationAttributes: {
+    title: 'Bad Schedule Nexus Operation Attributes',
+    description:
+      'A workflow task completed with an invalid ScheduleNexusOperation command.',
+  },
+  PendingNexusOperationsLimitExceeded: {
+    title: 'Pending Nexus Operations Limit Exceeded',
+    description:
+      'A workflow task completed requesting to schedule a Nexus Operation exceeding the server configured limit.',
+  },
+  BadRequestCancelNexusOperationAttributes: {
+    title: 'Bad Request Cancel Nexus Operation Attributes',
+    description:
+      'A workflow task completed with an invalid RequestCancelNexusOperation command.',
+  },
+  FeatureDisabled: {
+    title: 'Feature Disabled',
+    description:
+      "A workflow task completed requesting a feature that's disabled on the server (either system wide or - typically - for the workflow's namespace). Check the workflow task failure message for more information.",
+  },
 } as const;
diff --git a/src/lib/pages/nexus-create-endpoint.svelte b/src/lib/pages/nexus-create-endpoint.svelte
@@ -9,7 +9,8 @@
   import { routeForNexus } from '$lib/utilities/route-for';
 
   export let onCreate: () => void;
-  export let namespaceList: { namespace: string }[] = [];
+  export let targetNamespaceList: { namespace: string }[] = [];
+  export let callerNamespaceList: { namespace: string }[] = [];
   export let error: NetworkError | undefined = undefined;
   export let loading = false;
   export let isCloud = false;
@@ -29,7 +30,7 @@
   <h1 data-testid="namespace-selector-title" class="text-2xl">
     {translate('nexus.create-endpoint')}
   </h1>
-  <NexusForm {error} {namespaceList} {isCloud} />
+  <NexusForm {error} {targetNamespaceList} {callerNamespaceList} {isCloud} />
   <div class="flex items-center gap-4">
     <Button
       variant="primary"

diff --git a/src/lib/pages/nexus-edit-endpoint.svelte b/src/lib/pages/nexus-edit-endpoint.svelte
@@ -13,7 +13,8 @@
   import { routeForNexusEndpoint } from '$lib/utilities/route-for';
 
   export let endpoint: NexusEndpoint;
-  export let namespaceList: { namespace: string }[] = [];
+  export let targetNamespaceList: { namespace: string }[] = [];
+  export let callerNamespaceList: { namespace: string }[] = [];
   export let onUpdate: () => void;
   export let onDelete: () => void;
   export let error: NetworkError | undefined = undefined;
@@ -46,7 +47,14 @@
       </div>
     </div>
   </div>
-  <NexusForm {endpoint} {namespaceList} {error} {isCloud} nameDisabled />
+  <NexusForm
+    {endpoint}
+    {targetNamespaceList}
+    {callerNamespaceList}
+    {error}
+    {isCloud}
+    nameDisabled
+  />
   <div class="flex items-center gap-4">
     <Button on:click={onUpdate} {loading}>{translate('common.save')}</Button>
     <Button

diff --git a/src/lib/pages/nexus-endpoint.svelte b/src/lib/pages/nexus-endpoint.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import Button from '$lib/holocene/button.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { NexusEndpoint } from '$lib/types/nexus';
@@ -10,6 +11,7 @@
   } from '$lib/utilities/route-for';
 
   export let endpoint: NexusEndpoint;
+  export let editDisabled = false;
 </script>
 
 <div class="flex flex-col gap-8">
@@ -23,22 +25,37 @@
       <h1 data-testid="namespace-selector-title" class="text-2xl">
         {endpoint.spec.name}
       </h1>
-      <Button href={routeForNexusEndpointEdit(endpoint.id)}
-        >{translate('common.edit')}</Button
+      <Button
+        href={routeForNexusEndpointEdit(endpoint.id)}
+        disabled={editDisabled}>{translate('common.edit')}</Button
       >
     </div>
     <p>UUID: {endpoint.id}</p>
   </div>
   <div
     class="surface-primary max-w-fit rounded-lg border-2 border-secondary p-4"
   >
-    <h4>Target</h4>
+    <p class="text-lg">Target</p>
     <div class="flex flex-col gap-4 lg:flex-row">
-      <div class="flex gap-1">
-        Namespace <i>{endpoint.spec.target.worker.namespace}</i>
+      <div class="flex items-center gap-2">
+        <span class="font-medium">Namespace</span>
+        <Link
+          href={routeForNamespace({
+            namespace: endpoint.spec.target.worker.namespace,
+          })}
+        >
+          <i>{endpoint.spec.target.worker.namespace}</i>
+        </Link>
       </div>
-      <div class="flex gap-1">
-        Task Queue <i>{endpoint.spec.target.worker.taskQueue}</i>
+      <div class="flex items-center gap-2">
+        <span class="font-medium">Task Queue</span>
+        <Copyable
+          copyIconTitle={translate('common.copy-icon-title')}
+          copySuccessIconTitle={translate('common.copy-success-icon-title')}
+          content={endpoint.spec.target.worker.taskQueue}
+        >
+          <i>{endpoint.spec.target.worker.taskQueue}</i>
+        </Copyable>
       </div>
     </div>
   </div>

diff --git a/src/lib/pages/nexus-endpoints.svelte b/src/lib/pages/nexus-endpoints.svelte
@@ -55,6 +55,7 @@
         bind:value={search}
         label={translate('common.search')}
         labelHidden
+        autoFocus
         type="search"
         placeholder={translate('common.search')}
         class="w-full lg:w-1/2"
@@ -75,9 +76,11 @@
               <p class="text-xs text-secondary">
                 Last update {formatDate(endpoint.lastModifiedTime, $timeFormat)}
               </p>
-              <p class="text-xs text-secondary">
-                Created on {formatDate(endpoint.createdTime, $timeFormat)}
-              </p>
+              {#if endpoint.createdTime}
+                <p class="text-xs text-secondary">
+                  Created on {formatDate(endpoint.createdTime, $timeFormat)}
+                </p>
+              {/if}
               {#if endpoint.spec?.allowedCallerNamespaces}
                 <Badge type="primary" class="px-2 py-1"
                   >{endpoint.spec?.allowedCallerNamespaces.length} Namespaces</Badge
@@ -89,7 +92,9 @@
       </div>
     {:else}
       <div class="flex w-full justify-center">
-        <EmptyState title="No Endpoints found, try a new search" />
+        <EmptyState
+          title="No Endpoints found, try a new search. Exact matches only."
+        />
       </div>
     {/if}
   </div>

diff --git a/src/lib/pages/nexus-form.svelte b/src/lib/pages/nexus-form.svelte
@@ -31,7 +31,8 @@
   import type { NexusEndpoint } from '$lib/types/nexus';
 
   export let endpoint: NexusEndpoint | undefined = undefined;
-  export let namespaceList: { namespace: string }[] = [];
+  export let targetNamespaceList: { namespace: string }[] = [];
+  export let callerNamespaceList: { namespace: string }[] = [];
   export let error: NetworkError | undefined = undefined;
   export let nameDisabled = false;
   export let isCloud = true;
@@ -72,7 +73,7 @@
     allowedCallerNamespaces,
   );
 
-  $: callerNamespaces = namespaceList.map((n) => ({
+  $: callerNamespaces = callerNamespaceList.map((n) => ({
     value: n.namespace,
     label: n.namespace,
   }));
@@ -124,7 +125,7 @@
     id="target-namespace"
     placeholder={translate('nexus.select-namespace')}
     leadingIcon="namespace-switcher"
-    options={namespaceList}
+    options={targetNamespaceList}
     optionValueKey="namespace"
     minSize={32}
   />

diff --git a/src/routes/(app)/nexus/[id]/edit/+page.svelte b/src/routes/(app)/nexus/[id]/edit/+page.svelte
@@ -67,7 +67,7 @@
     }
   };
 
-  $: namespaceList = $namespaces.map((namespace) => ({
+  $: targetNamespaceList = $namespaces.map((namespace) => ({
     namespace: namespace.namespaceInfo.name,
   }));
 </script>
@@ -79,7 +79,7 @@
 <NexusEditEndpoint
   {endpoint}
   {loading}
-  {namespaceList}
+  {targetNamespaceList}
   {onUpdate}
   {onDelete}
   {error}

diff --git a/src/routes/(app)/nexus/create/+page.svelte b/src/routes/(app)/nexus/create/+page.svelte
@@ -37,10 +37,10 @@
     }
   };
 
-  $: namespaceList = $namespaces.map((namespace) => ({
+  $: targetNamespaceList = $namespaces.map((namespace) => ({
     namespace: namespace.namespaceInfo.name,
   }));
 </script>
 
 <PageTitle title={translate('nexus.create-endpoint')} url={$page.url.href} />
-<NexusCreateEndpoint {onCreate} {namespaceList} {error} {loading} />
+<NexusCreateEndpoint {onCreate} {targetNamespaceList} {error} {loading} />