Small UI fixes (#2345)

* Remove unnecessary coerced Boolean * Pluralize Namespaces badge for Nexus endpoints * Fix action slot on Accordion component * Ignore a11y test on Accordion with action
temporalio · Sep 24, 2024 · a9487eb · a9487eb
1 parent 24c74ab
commit a9487eb
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 19 deletions.
diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
@@ -1,11 +1,16 @@
 import type { TestRunnerConfig } from '@storybook/test-runner';
+import { getStoryContext } from '@storybook/test-runner';
 import { injectAxe, checkA11y } from 'axe-playwright';
 
 const config: TestRunnerConfig = {
   async preVisit(page) {
     await injectAxe(page);
   },
-  async postVisit(page) {
+  async postVisit(page, context) {
+    const storyContext = await getStoryContext(page, context);
+    if (storyContext.parameters?.a11y?.disable) {
+      return;
+    }
     await checkA11y(page, '#storybook-root', {
       detailedReport: true,
       detailedReportOptions: {

diff --git a/src/lib/holocene/accordion/accordion.stories.svelte b/src/lib/holocene/accordion/accordion.stories.svelte
@@ -34,6 +34,8 @@
   import { action } from '@storybook/addon-actions';
   import { Story, Template } from '@storybook/addon-svelte-csf';
 
+  import Link from '../link.svelte';
+
   import AccordionGroup from './accordion-group.svelte';
 </script>
 
@@ -63,3 +65,20 @@
 <Story name="With Error" args={{ error: 'Error' }} />
 
 <Story name="With Icon" args={{ icon: 'workflow' }} />
+
+<Story
+  name="With Action"
+  let:args
+  parameters={{
+    a11y: {
+      disable: true,
+    },
+  }}
+>
+  <Accordion {...args} onToggle={action('onToggle')}>
+    <p>Accordion Content</p>
+    <Link href="https://docs.temporal.io/" newTab slot="action" icon="book">
+      <span class="sr-only">docs</span>
+    </Link>
+  </Accordion>
+</Story>
diff --git a/src/lib/holocene/accordion/accordion.svelte b/src/lib/holocene/accordion/accordion.svelte
@@ -69,11 +69,11 @@
           role="none"
         >
           <slot name="action" />
+          <Icon
+            class="m-2 shrink-0"
+            name={open ? 'chevron-up' : 'chevron-down'}
+          />
         </div>
-        <Icon
-          class="m-2 shrink-0"
-          name={open ? 'chevron-up' : 'chevron-down'}
-        />
       </div>
       <p class="flex items-center">
         {#if error}

diff --git a/src/lib/pages/nexus-endpoints.svelte b/src/lib/pages/nexus-endpoints.svelte
@@ -13,6 +13,7 @@
   import { timeFormat } from '$lib/stores/time-format';
   import type { NexusEndpoint } from '$lib/types/nexus';
   import { formatDate } from '$lib/utilities/format-date';
+  import { pluralize } from '$lib/utilities/pluralize';
   import {
     routeForNexusEndpoint,
     routeForNexusEndpointCreate,
@@ -90,7 +91,11 @@
               {/if}
               {#if endpoint.spec?.allowedCallerNamespaces}
                 <Badge type="primary" class="px-2 py-1"
-                  >{endpoint.spec?.allowedCallerNamespaces.length} Namespaces</Badge
+                  >{endpoint.spec?.allowedCallerNamespaces.length}
+                  {pluralize(
+                    translate('namespaces.namespace'),
+                    endpoint.spec?.allowedCallerNamespaces.length,
+                  )}</Badge
                 >
               {/if}
             </div>

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
@@ -69,54 +69,52 @@
         href: workflowsRoute,
         icon: 'workflow',
         label: translate('common.workflows'),
-        isActive: (path) => Boolean(path.includes(workflowsRoute)),
+        isActive: (path) => path.includes(workflowsRoute),
       },
       {
         href: schedulesRoute,
         icon: 'schedules',
         label: translate('common.schedules'),
-        isActive: (path) => Boolean(path.includes(schedulesRoute)),
+        isActive: (path) => path.includes(schedulesRoute),
       },
       {
         href: batchOperationsRoute,
         icon: 'batch-operation',
         label: translate('batch.nav-title'),
         tooltip: translate('batch.list-page-title'),
         animate: inProgressBatch,
-        isActive: (path) => Boolean(path.includes(batchOperationsRoute)),
+        isActive: (path) => path.includes(batchOperationsRoute),
       },
       {
         href: archivalRoute,
         icon: 'archives',
         label: translate('common.archive'),
-        isActive: (path) => Boolean(path.includes(archivalRoute)),
+        isActive: (path) => path.includes(archivalRoute),
       },
       {
         href: namespacesRoute,
         icon: 'namespace',
         label: translate('common.namespaces'),
         divider: true,
         isActive: (path) =>
-          Boolean(
-            path.includes(namespacesRoute) &&
-              !path.includes(workflowsRoute) &&
-              !path.includes(schedulesRoute) &&
-              !path.includes(batchOperationsRoute) &&
-              !path.includes(archivalRoute),
-          ),
+          path.includes(namespacesRoute) &&
+          !path.includes(workflowsRoute) &&
+          !path.includes(schedulesRoute) &&
+          !path.includes(batchOperationsRoute) &&
+          !path.includes(archivalRoute),
       },
       {
         href: nexusRoute,
         icon: 'nexus',
         label: translate('nexus.nexus'),
         hidden: !$page.data?.systemInfo?.capabilities?.nexus,
-        isActive: (path) => Boolean(path.includes(nexusRoute)),
+        isActive: (path) => path.includes(nexusRoute),
       },
       {
         href: historyImportRoute,
         icon: 'import',
         label: translate('common.import'),
-        isActive: (path) => Boolean(path.includes(historyImportRoute)),
+        isActive: (path) => path.includes(historyImportRoute),
       },
       {
         href: 'http://docs.temporal.io',