Event Type multiselect dropdown with All/None options (#2339)

* Move event type filters into a multiselect dropdown * Set smaller width on mobile * Add some padding to json view and don't include status filter * Update snapshots * Remove unused code * Remove camelcase * Fix typo
temporalio · Sep 24, 2024 · 755e0c1 · 755e0c1
1 parent ad81582
commit 755e0c1
Show file tree

Hide file tree

Showing 9 changed files with 165 additions and 97 deletions.
diff --git a/src/lib/components/event/event-summary.svelte b/src/lib/components/event/event-summary.svelte
@@ -79,8 +79,10 @@
   };
 </script>
 
-<div class="flex flex-col items-center gap-4 md:items-start">
-  <div class="flex flex-col items-center gap-2 px-4 md:flex-row md:items-start">
+<div
+  class="flex flex-col items-center justify-between gap-4 py-4 lg:flex-row lg:py-8"
+>
+  <div class="flex flex-col items-center gap-2 px-4 md:flex-row">
     <div class="flex items-center gap-2 px-4">
       <ToggleButtons>
         <ToggleButton
@@ -135,14 +137,14 @@
       </ToggleButtons>
     </div>
   </div>
-  {#if $eventViewType !== 'json'}
-    <div
-      class="flex w-full flex-col justify-between gap-2 px-4 pb-2 lg:flex-row"
-    >
+  <div
+    class="flex w-full flex-col items-center justify-end gap-4 px-4 lg:flex-row"
+  >
+    {#if $eventViewType !== 'json'}
       <EventStatusFilter />
-      <EventTypeFilter {compact} />
-    </div>
-  {/if}
+    {/if}
+    <EventTypeFilter {compact} />
+  </div>
 </div>
 {#if $eventViewType === 'json'}
   <div class="px-4">

diff --git a/src/lib/components/lines-and-dots/event-type-filter.svelte b/src/lib/components/lines-and-dots/event-type-filter.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
+  import { writable } from 'svelte/store';
+
   import { page } from '$app/stores';
 
   import Checkbox from '$lib/holocene/checkbox.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
-  import Tooltip from '$lib/holocene/tooltip.svelte';
+  import MenuButton from '$lib/holocene/menu/menu-button.svelte';
+  import MenuContainer from '$lib/holocene/menu/menu-container.svelte';
+  import MenuDivider from '$lib/holocene/menu/menu-divider.svelte';
+  import MenuItem from '$lib/holocene/menu/menu-item.svelte';
+  import Menu from '$lib/holocene/menu/menu.svelte';
   import { translate } from '$lib/i18n/translate';
   import {
     allEventTypeOptions,
@@ -18,15 +24,20 @@
   import { CategoryIcon } from './constants';
 
   export let compact = false;
+  let open = writable(false);
+
+  $: defaultOptions = compact
+    ? compactEventTypeOptions.map((o) => o.value)
+    : allEventTypeOptions.map((o) => o.value);
 
-  $: options = (compact ? compactEventTypeOptions : allEventTypeOptions).map(
-    (o) => ({
+  $: options = [
+    ...(compact ? compactEventTypeOptions : allEventTypeOptions).map((o) => ({
       ...o,
       label: translate(o.label),
       icon: CategoryIcon[o.value],
-      tooltip: translate(o.tooltip),
-    }),
-  );
+      description: translate(o.description),
+    })),
+  ];
 
   $: {
     if (isVersionNewer('1.21.0', $temporalVersion)) {
@@ -46,32 +57,79 @@
       ? $eventTypeFilter.filter((type) => type !== value)
       : [...$eventTypeFilter, value];
   };
+
+  $: filterActive = $eventTypeFilter.length < defaultOptions.length;
 </script>
 
-<div class="flex flex-wrap items-center items-center justify-center gap-4">
-  {#each options as option}
-    <Tooltip width={200} text={option.tooltip} topRight>
-      <div class="flex items-center">
+<MenuContainer {open}>
+  <MenuButton controls="status-menu">
+    <div
+      slot="leading"
+      class="flex h-6 w-6 flex-col items-center justify-center rounded-full transition-colors duration-200"
+      class:bg-interactive={filterActive}
+    >
+      <Icon name="filter" class={filterActive && 'pt-0.5 text-white'} />
+    </div>
+    {translate('events.event-types')}
+  </MenuButton>
+  <Menu
+    id="event-type-menu"
+    keepOpen
+    position="top-right"
+    class="w-[240px] md:w-[400px]"
+  >
+    <MenuItem
+      data-testid={translate('common.all')}
+      on:click={() => {
+        $eventTypeFilter = defaultOptions;
+      }}
+    >
+      <Checkbox
+        on:change={() => {
+          $eventTypeFilter = defaultOptions;
+        }}
+        slot="leading"
+        checked={$eventTypeFilter.length === defaultOptions.length}
+        label={translate('common.all')}
+        labelHidden
+      />
+      {translate('common.all')}
+    </MenuItem>
+    <MenuItem
+      data-testid={translate('common.none')}
+      on:click={() => {
+        $eventTypeFilter = [];
+      }}
+    >
+      <Checkbox
+        on:change={() => {
+          $eventTypeFilter = [];
+        }}
+        slot="leading"
+        checked={!$eventTypeFilter.length}
+        label={translate('common.none')}
+        labelHidden
+      />
+      {translate('common.none')}
+    </MenuItem>
+    <MenuDivider />
+    {#each options as option}
+      <MenuItem
+        data-testid={option.label}
+        description={option.description}
+        on:click={() => {
+          onOptionClick(option);
+        }}
+      >
         <Checkbox
-          type="checkbox"
           on:click={() => onOptionClick(option)}
+          slot="leading"
           checked={$eventTypeFilter.some((type) => type === option.value)}
+          label={option.label}
+          labelHidden
         />
-        <div
-          role="button"
-          tabindex="0"
-          class="flex cursor-pointer select-none items-center text-sm"
-          on:click={() => onOptionClick(option)}
-          on:keydown={(e) => e.key === 'Enter' && onOptionClick(option)}
-        >
-          {#if option.icon}
-            <span class="lg:hidden"
-              ><Icon slot="trailing" name={option.icon} /></span
-            >
-          {/if}
-          <span class="hidden lg:block">{option.label}</span>
-        </div>
-      </div>
-    </Tooltip>
-  {/each}
-</div>
+        {option.label}
+      </MenuItem>
+    {/each}
+  </Menu>
+</MenuContainer>
diff --git a/src/lib/components/workflow/workflow-json-navigator.svelte b/src/lib/components/workflow/workflow-json-navigator.svelte
@@ -79,34 +79,36 @@
   </div>
   <slot name="decode" />
 </div>
-{#if $decodeEventHistory}
-  {#key [index, $decodeEventHistory]}
-    <PayloadDecoder
-      value={fromEventToRawEvent(events[index - 1])}
-      let:decodedValue
-    >
+<div class="py-4">
+  {#if $decodeEventHistory}
+    {#key [index, $decodeEventHistory]}
+      <PayloadDecoder
+        value={fromEventToRawEvent(events[index - 1])}
+        let:decodedValue
+      >
+        <CodeBlock
+          content={decodedValue}
+          testId="event-history-json"
+          copyIconTitle={translate('common.copy-icon-title')}
+          copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        />
+      </PayloadDecoder>
+    {/key}
+  {:else}
+    {#key index}
       <CodeBlock
-        content={decodedValue}
+        content={stringifyWithBigInt(
+          fromEventToRawEvent(events[index - 1]),
+          undefined,
+          2,
+        )}
         testId="event-history-json"
         copyIconTitle={translate('common.copy-icon-title')}
         copySuccessIconTitle={translate('common.copy-success-icon-title')}
       />
-    </PayloadDecoder>
-  {/key}
-{:else}
-  {#key index}
-    <CodeBlock
-      content={stringifyWithBigInt(
-        fromEventToRawEvent(events[index - 1]),
-        undefined,
-        2,
-      )}
-      testId="event-history-json"
-      copyIconTitle={translate('common.copy-icon-title')}
-      copySuccessIconTitle={translate('common.copy-success-icon-title')}
-    />
-  {/key}
-{/if}
+    {/key}
+  {/if}
+</div>
 
 <style lang="postcss">
   .caret {

diff --git a/src/lib/holocene/menu/menu.svelte b/src/lib/holocene/menu/menu.svelte
@@ -12,15 +12,16 @@
   interface $$Props extends HTMLAttributes<HTMLUListElement> {
     id: string;
     keepOpen?: boolean;
-    position?: 'left' | 'right';
+    position?: 'left' | 'right' | 'top-left' | 'top-right';
     menuElement?: HTMLUListElement;
   }
 
   let className = '';
+  let height = 0;
   export { className as class };
   export let id: string;
   export let keepOpen = false;
-  export let position: 'left' | 'right' = 'left';
+  export let position: 'left' | 'right' | 'top-left' | 'top-right' = 'left';
   export let menuElement: HTMLUListElement = null;
 
   const {
@@ -47,8 +48,12 @@
   class:hidden={!$open}
   aria-labelledby={id}
   tabindex={-1}
+  style={position === 'top-right' || position === 'top-left'
+    ? `top: -${height + 16}px;`
+    : ''}
   {id}
   bind:this={menuElement}
+  bind:clientHeight={height}
   on:focusout={handleFocusOut}
   on:click|stopPropagation
   {...$$restProps}
@@ -60,11 +65,13 @@
   .menu {
     @apply surface-primary absolute z-20 mt-1 min-w-fit list-none overflow-auto rounded-lg border-2 border-subtle text-primary shadow;
 
-    &.left {
+    &.left,
+    &.top-left {
       @apply left-0 origin-top-left;
     }
 
-    &.right {
+    &.right,
+    &.top-right {
       @apply right-0 origin-top-right;
     }
   }

diff --git a/src/lib/i18n/locales/en/events.ts b/src/lib/i18n/locales/en/events.ts
@@ -89,4 +89,5 @@ export const Strings = {
   'decoded-description': 'Codec Server decoded and base64 encoded',
   readable: 'Human Readable',
   'readable-description': 'Codec Server decoded and base64 decoded',
+  'event-types': 'Event Types',
 } as const;
diff --git a/src/lib/layouts/workflow-history-layout.svelte b/src/lib/layouts/workflow-history-layout.svelte
@@ -83,9 +83,7 @@
   </div>
 </div>
 <div class="px-8 pb-24">
-  <div
-    class="flex w-full flex-col gap-4 overflow-auto rounded-xl border-2 border-subtle"
-  >
+  <div class="flex w-full flex-col rounded-sm border-2 border-subtle">
     <TimelineGraph
       {workflow}
       {groups}