Add EventHistoryViewTypeToggle and nest in Pagination when in table view

temporalio · Jun 26, 2024 · 0695f03 · 0695f03
1 parent 6ffe354
commit 0695f03
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 88 deletions.
diff --git a/src/lib/components/event/event-summary.svelte b/src/lib/components/event/event-summary.svelte
@@ -65,6 +65,10 @@
   previousButtonLabel={translate('common.previous')}
   nextButtonLabel={translate('common.next')}
 >
+  <svelte:fragment slot="action-top-left">
+    <slot name="action-top-left" />
+  </svelte:fragment>
+
   <svelte:fragment slot="action-top-center">
     <slot name="action-top-center" />
   </svelte:fragment>

diff --git a/src/lib/components/lines-and-dots/event-history-view-type-toggle.svelte b/src/lib/components/lines-and-dots/event-history-view-type-toggle.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
+  import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { eventViewType } from '$lib/stores/event-view';
+</script>
+
+<div class="flex flex-col items-center gap-2 md:flex-row md:gap-4">
+  <h2 class="text-2xl font-medium">
+    {translate('workflows.event-history')}
+  </h2>
+  <ToggleButtons>
+    <ToggleButton
+      active={$eventViewType === 'compact'}
+      data-testid="compact"
+      on:click={() => ($eventViewType = 'compact')}
+      >{translate('workflows.compact')}</ToggleButton
+    >
+    <ToggleButton
+      active={$eventViewType === 'timeline'}
+      data-testid="timeline"
+      on:click={() => ($eventViewType = 'timeline')}
+      >{translate('common.timeline')}</ToggleButton
+    >
+    <ToggleButton
+      active={$eventViewType === 'feed'}
+      data-testid="feed"
+      on:click={() => ($eventViewType = 'feed')}
+      >{translate('workflows.full-history')}</ToggleButton
+    >
+    <ToggleButton
+      active={$eventViewType === 'table'}
+      data-testid="table"
+      on:click={() => ($eventViewType = 'table')}
+      >{translate('workflows.table')}</ToggleButton
+    >
+  </ToggleButtons>
+</div>
diff --git a/src/lib/holocene/pagination.svelte b/src/lib/holocene/pagination.svelte
@@ -134,64 +134,70 @@
 
 <div class="pagination relative mb-8 flex flex-col gap-4">
   <div class="flex flex-col items-end justify-end gap-4 lg:justify-start">
-    <div class="w-full">
+    <div
+      class="flex w-full flex-col items-center gap-4 lg:flex-row {$$slots[
+        'action-top-left'
+      ]
+        ? 'justify-between'
+        : 'justify-end'}"
+    >
       <slot name="action-top-left" />
+      <nav
+        style={floatStyle}
+        bind:clientHeight={height}
+        class="flex min-w-fit flex-col items-center gap-4 md:flex-row"
+        aria-label="{$$restProps['aria-label']} 1"
+      >
+        <slot name="action-top-center" />
+        <div class="flex gap-4">
+          {#if !itemsPerPage}
+            <FilterSelect
+              label={pageSizeSelectLabel}
+              parameter={perPageKey}
+              value={perPage}
+              {options}
+              position="top"
+            />
+          {/if}
+          <slot name="pagination-top">
+            <div class="flex items-center justify-center gap-3">
+              <button
+                class="caret"
+                disabled={!$store.hasPrevious}
+                on:click={() => {
+                  store.previous();
+                  handlePageChange();
+                }}
+                aria-label={previousButtonLabel}
+              >
+                <span class="arrow arrow-left" />
+              </button>
+              <p>
+                {#if updating}
+                  <Skeleton class="block h-5 w-24" />
+                {:else}
+                  {$store.length
+                    ? $store.startingIndex + 1
+                    : 0}–{$store.endingIndex + 1} of {$store.length}
+                {/if}
+              </p>
+              <button
+                class="caret"
+                disabled={!$store.hasNext}
+                on:click={() => {
+                  store.next();
+                  handlePageChange();
+                }}
+                aria-label={nextButtonLabel}
+              >
+                <span class="arrow arrow-right" />
+              </button>
+            </div>
+          </slot>
+        </div>
+        <slot name="action-top-right" />
+      </nav>
     </div>
-    <nav
-      style={floatStyle}
-      bind:clientHeight={height}
-      class="flex min-w-fit flex-col items-end gap-4 md:flex-row"
-      aria-label="{$$restProps['aria-label']} 1"
-    >
-      <slot name="action-top-center" />
-      <div class="flex gap-4">
-        {#if !itemsPerPage}
-          <FilterSelect
-            label={pageSizeSelectLabel}
-            parameter={perPageKey}
-            value={perPage}
-            {options}
-            position="top"
-          />
-        {/if}
-        <slot name="pagination-top">
-          <div class="flex items-center justify-center gap-3">
-            <button
-              class="caret"
-              disabled={!$store.hasPrevious}
-              on:click={() => {
-                store.previous();
-                handlePageChange();
-              }}
-              aria-label={previousButtonLabel}
-            >
-              <span class="arrow arrow-left" />
-            </button>
-            <p>
-              {#if updating}
-                <Skeleton class="block h-5 w-24" />
-              {:else}
-                {$store.length
-                  ? $store.startingIndex + 1
-                  : 0}–{$store.endingIndex + 1} of {$store.length}
-              {/if}
-            </p>
-            <button
-              class="caret"
-              disabled={!$store.hasNext}
-              on:click={() => {
-                store.next();
-                handlePageChange();
-              }}
-              aria-label={nextButtonLabel}
-            >
-              <span class="arrow arrow-right" />
-            </button>
-          </div>
-        </slot>
-      </div>
-      <slot name="action-top-right" />
-    </nav>
   </div>
   <slot
     visibleItems={$store.items}

diff --git a/src/lib/layouts/workflow-history-layout-v2.svelte b/src/lib/layouts/workflow-history-layout-v2.svelte
@@ -3,6 +3,7 @@
   import { page } from '$app/stores';
 
   import EventSummary from '$lib/components/event/event-summary.svelte';
+  import EventHistoryViewTypeToggle from '$lib/components/lines-and-dots/event-history-view-type-toggle.svelte';
   import EventTypeFilter from '$lib/components/lines-and-dots/event-type-filter.svelte';
   import InputAndResults from '$lib/components/lines-and-dots/input-and-results.svelte';
   import CompactGraph from '$lib/components/lines-and-dots/svg/compact-graph.svelte';
@@ -14,7 +15,6 @@
   import WorkflowCallStackError from '$lib/components/workflow/workflow-call-stack-error.svelte';
   import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
   import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
-  import { translate } from '$lib/i18n/translate';
   import { groupEvents } from '$lib/models/event-groups';
   import {
     activeEvents,
@@ -74,38 +74,8 @@
     <div
       class="flex flex-col items-center justify-between gap-2 py-2 md:flex-row"
     >
-      <div class="flex flex-col items-center gap-2 md:flex-row md:gap-4">
-        <h2 class="text-2xl font-medium">
-          {translate('workflows.event-history')}
-        </h2>
-        <ToggleButtons>
-          <ToggleButton
-            active={$eventViewType === 'compact'}
-            data-testid="compact"
-            on:click={() => ($eventViewType = 'compact')}
-            >{translate('workflows.compact')}</ToggleButton
-          >
-          <ToggleButton
-            active={$eventViewType === 'timeline'}
-            data-testid="timeline"
-            on:click={() => ($eventViewType = 'timeline')}
-            >{translate('common.timeline')}</ToggleButton
-          >
-          <ToggleButton
-            active={$eventViewType === 'feed'}
-            data-testid="feed"
-            on:click={() => ($eventViewType = 'feed')}
-            >{translate('workflows.full-history')}</ToggleButton
-          >
-          <ToggleButton
-            active={$eventViewType === 'table'}
-            data-testid="table"
-            on:click={() => ($eventViewType = 'table')}
-            >{translate('workflows.table')}</ToggleButton
-          >
-        </ToggleButtons>
-      </div>
       {#if $eventViewType !== 'table'}
+        <EventHistoryViewTypeToggle />
         <div class="flex items-center gap-2">
           <span class="font-mono text-sm">{(100 / zoomLevel).toFixed(0)}%</span>
           <ToggleButtons>
@@ -143,6 +113,9 @@
 {#if $eventViewType === 'table'}
   <div class="px-4 md:px-8">
     <EventSummary>
+      <svelte:fragment slot="action-top-left">
+        <EventHistoryViewTypeToggle />
+      </svelte:fragment>
       <svelte:fragment slot="action-top-center">
         <ToggleButton
           data-testid="download"