DT-3411: Make tables full height with pagination at top

package.json

@@ -130,7 +130,7 @@
     "@storybook/addon-essentials": "^8.6.11",
     "@storybook/addon-interactions": "^8.6.11",
     "@storybook/addon-links": "^8.6.11",
-    "@storybook/addon-svelte-csf": "^5.0.0-next.23",
+    "@storybook/addon-svelte-csf": "^5.0.10",
     "@storybook/addon-themes": "^8.6.11",
     "@storybook/blocks": "^8.6.11",
     "@storybook/icons": "^1.4.0",

server/go.mod

@@ -11,7 +11,7 @@ require (
 	github.com/labstack/echo/v4 v4.13.4
 	github.com/stretchr/testify v1.10.0
 	github.com/urfave/cli/v2 v2.3.0
-	go.temporal.io/api v1.57.0
+	go.temporal.io/api v1.62.0
 	golang.org/x/net v0.47.0
 	golang.org/x/oauth2 v0.30.0
 	google.golang.org/grpc v1.66.1

server/go.sum

@@ -68,8 +68,8 @@ github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6Kllzaw
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQD0Loo=
 github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
-go.temporal.io/api v1.57.0 h1:vJGbU6RqMqCAXP03Jq4KEL61sCxAdJx4Yj7PxtbsrF0=
-go.temporal.io/api v1.57.0/go.mod h1:iaxoP/9OXMJcQkETTECfwYq4cw/bj4nwov8b3ZLVnXM=
+go.temporal.io/api v1.62.0 h1:rh7LqqV+pxaLNwPLsFRZgYoDJ/NvCNDv0EnWe6oS7A4=
+go.temporal.io/api v1.62.0/go.mod h1:iaxoP/9OXMJcQkETTECfwYq4cw/bj4nwov8b3ZLVnXM=
 golang.org/x/crypto v0.45.0 h1:jMBrvKuj23MTlT0bQEOBcAE0mjg8mK9RXFhRH6nyF3Q=
 golang.org/x/crypto v0.45.0/go.mod h1:XTGrrkGJve7CYK7J8PEww4aY7gM3qMCElcJQ8n8JdX4=
 golang.org/x/net v0.47.0 h1:Mx+4dIFzqraBXUugkia1OOvlD6LemFo1ALMHjrXDOhY=

src/lib/components/detail-list/detail-list-label.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { type ClassNameValue, twMerge } from 'tailwind-merge';
 
   import Link from '$lib/holocene/link.svelte';
 
   interface Props {
     children: Snippet;
+    class?: ClassNameValue;
     href?: string;
   }
 
-  const { children, href }: Props = $props();
+  const { children, href, class: className = '' }: Props = $props();
 </script>
 
-<dd class="col-[1]">
+<dd class={twMerge('col-[1]', className)}>
   {#if href}
     <Link {href} newTab>{@render children()}</Link>
   {:else}

src/lib/components/detail-list/detail-list-text-value.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Badge, { type BadgeType } from '$lib/holocene/badge.svelte';
   import type { IconName } from '$lib/holocene/icon';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Tooltip from '$lib/holocene/tooltip.svelte';
@@ -11,23 +12,34 @@
     text: string;
     tooltipText?: string;
     isBadge?: boolean;
+    badgeType?: BadgeType;
     iconName?: IconName | undefined;
   }
 
-  let { copyable, copyableText, text, tooltipText, isBadge, iconName }: Props =
-    $props();
+  let {
+    copyable,
+    copyableText,
+    text,
+    tooltipText,
+    iconName,
+    isBadge = false,
+    badgeType = 'default',
+  }: Props = $props();
 </script>
 
 {#snippet content()}
-  <div
-    class="flex select-all items-center gap-1 truncate rounded-sm"
-    class:surface-subtle={isBadge}
-  >
-    {#if iconName}
-      <Icon name={iconName} class="shrink-0" />
-    {/if}
-    <span class="truncate">{text}</span>
-  </div>
+  {#if isBadge}
+    <Badge type={badgeType}>
+      {text}
+    </Badge>
+  {:else}
+    <div class="flex select-all items-center gap-1 truncate rounded-sm">
+      {#if iconName}
+        <Icon name={iconName} class="shrink-0" />
+      {/if}
+      <span class="truncate">{text}</span>
+    </div>
+  {/if}
 {/snippet}
 
 <DetailListValue {copyable} {copyableText}>

src/lib/components/detail-list/detail-list-timestamp-value.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  import Tooltip from '$lib/holocene/tooltip.svelte';
+  import { relativeTime } from '$lib/stores/time-format';
+  import type { ValidTime } from '$lib/utilities/format-time';
+
+  import { timestamp } from '../timestamp.svelte';
+
+  import DetailListValue from './detail-list-value.svelte';
+
+  interface Props {
+    timestamp: ValidTime | undefined | null;
+    children?: Snippet;
+    fallback?: string;
+  }
+
+  let { timestamp: t, children, fallback }: Props = $props();
+
+  let formattedTimestamp = $derived(
+    t ? $timestamp(t) : fallback ? fallback : '',
+  );
+  let relativeTimestamp = $derived(
+    t ? $timestamp(t, { relative: true }) : fallback ? fallback : '',
+  );
+</script>
+
+{#snippet content()}
+  <div class="flex select-all items-center gap-1 truncate rounded-sm">
+    {$relativeTime ? relativeTimestamp : formattedTimestamp}
+  </div>
+{/snippet}
+
+<DetailListValue>
+  <Tooltip
+    hide={!t}
+    text={$relativeTime ? formattedTimestamp : relativeTimestamp}
+    top
+    class="min-w-0"
+  >
+    {@render content()}
+    {@render children?.()}
+  </Tooltip>
+</DetailListValue>

src/lib/components/detail-list/index.ts

@@ -4,3 +4,4 @@ export { default as DetailListValue } from './detail-list-value.svelte';
 export { default as DetailListTextValue } from './detail-list-text-value.svelte';
 export { default as DetailListLinkValue } from './detail-list-link-value.svelte';
 export { default as DetailListColumn } from './detail-list-column.svelte';
+export { default as DetailListTimestampValue } from './detail-list-timestamp-value.svelte';

src/lib/components/payload-input-with-encoding.svelte

@@ -1,19 +1,12 @@
-<script context="module" lang="ts">
-  const encoding = ['json/plain', 'json/protobuf'] as const;
-  export type PayloadInputEncoding = (typeof encoding)[number];
-  export const isPayloadInputEncodingType = (
-    x: unknown,
-  ): x is PayloadInputEncoding => encoding.includes(x as PayloadInputEncoding);
-</script>
-
 <script lang="ts">
-  import { type Writable } from 'svelte/store';
+  import type { Writable } from 'svelte/store';
 
   import Card from '$lib/holocene/card.svelte';
   import Input from '$lib/holocene/input/input.svelte';
   import RadioGroup from '$lib/holocene/radio-input/radio-group.svelte';
   import RadioInput from '$lib/holocene/radio-input/radio-input.svelte';
   import { translate } from '$lib/i18n/translate';
+  import type { PayloadInputEncoding } from '$lib/models/payload-encoding';
 
   import PayloadInput from './payload-input.svelte';
 
@@ -44,7 +37,7 @@
         <div class="flex w-full flex-col gap-2">
           <RadioGroup
             description={translate('workflows.encoding')}
-            bind:group={encoding}
+            group={encoding}
             name="encoding"
           >
             <RadioInput id="json/plain" value="json/plain" label="json/plain" />

src/lib/components/retry-policy-input.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import DurationInput from '$lib/holocene/duration-input/duration-input.svelte';
+  import Input from '$lib/holocene/input/input.svelte';
+
+  interface Props {
+    initialInterval: string;
+    backoffCoefficient: string;
+    maximumInterval: string;
+    maximumAttempts: string;
+  }
+
+  let {
+    initialInterval = $bindable(),
+    backoffCoefficient = $bindable(),
+    maximumAttempts = $bindable(),
+    maximumInterval = $bindable(),
+  }: Props = $props();
+</script>
+
+<div class="space-y-2">
+  <DurationInput
+    label="Initial Interval"
+    id="initial-interval-input"
+    bind:value={initialInterval}
+  />
+  <Input
+    type="number"
+    label="Backoff Coefficient"
+    id="backoff-coefficient-input"
+    bind:value={backoffCoefficient}
+  />
+  <DurationInput
+    label="Maximum Interval"
+    id="maximum-interval-input"
+    bind:value={maximumInterval}
+  />
+  <Input
+    type="number"
+    label="Maximum Attempts"
+    id="maximum-attempts-input"
+    bind:value={maximumAttempts}
+  />
+</div>

src/lib/components/schedule/schedule-form-view.svelte

@@ -14,6 +14,7 @@
   import Link from '$lib/holocene/link.svelte';
   import Loading from '$lib/holocene/loading.svelte';
   import { translate } from '$lib/i18n/translate';
+  import type { PayloadInputEncoding } from '$lib/models/payload-encoding';
   import { error, loading } from '$lib/stores/schedules';
   import {
     customSearchAttributes,
@@ -31,8 +32,6 @@
   } from '$lib/utilities/route-for';
   import { writeActionsAreAllowed } from '$lib/utilities/write-actions-are-allowed';
 
-  import type { PayloadInputEncoding } from '../payload-input-with-encoding.svelte';
-
   import ScheduleInputPayload from './schedule-input-payload.svelte';
   import SchedulesSearchAttributesInputs from './schedules-search-attributes-inputs.svelte';
 

src/lib/components/schedule/schedule-input-payload.svelte

@@ -3,15 +3,16 @@
 
   import Button from '$lib/holocene/button.svelte';
   import { translate } from '$lib/i18n/translate';
+  import {
+    isPayloadInputEncodingType,
+    type PayloadInputEncoding,
+  } from '$lib/models/payload-encoding';
   import type { Payloads } from '$lib/types';
   import { atob } from '$lib/utilities/atob';
   import { getSinglePayload } from '$lib/utilities/encode-payload';
 
   import PayloadDecoder from '../event/payload-decoder.svelte';
-  import PayloadInputWithEncoding, {
-    isPayloadInputEncodingType,
-    type PayloadInputEncoding,
-  } from '../payload-input-with-encoding.svelte';
+  import PayloadInputWithEncoding from '../payload-input-with-encoding.svelte';
 
   export let input: string;
   export let editInput: boolean;

src/lib/components/standalone-activities/activities-summary-configurable-table.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import Button from '$lib/holocene/button.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import PaginatedTable from '$lib/holocene/table/paginated-table/api-paginated.svelte';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { fetchPaginatedActivities } from '$lib/services/standalone-activities';
+  import { activityCount, activityRefresh } from '$lib/stores/activities';
+  import { configurableTableColumns } from '$lib/stores/configurable-table-columns';
+
+  import TableBodyCell from './activities-summary-configurable-table/table-body-cell.svelte';
+  import TableEmptyState from './activities-summary-configurable-table/table-empty-state.svelte';
+  import TableHeaderCell from './activities-summary-configurable-table/table-header-cell.svelte';
+  import TableHeaderRow from './activities-summary-configurable-table/table-header-row.svelte';
+  import TableRow from './activities-summary-configurable-table/table-row.svelte';
+
+  interface Props {
+    onClickConfigure: () => void;
+  }
+
+  let { onClickConfigure }: Props = $props();
+
+  const namespace = $derived(page.params.namespace);
+  const columns = $derived(
+    $configurableTableColumns?.[namespace]?.activities ?? [],
+  );
+  const query = $derived(page.url.searchParams.get('query') ?? '');
+
+  const onFetch = $derived(() => fetchPaginatedActivities(namespace, query));
+</script>
+
+{#key [namespace, query, $activityRefresh]}
+  <PaginatedTable
+    total={$activityCount.count}
+    {onFetch}
+    let:visibleItems
+    aria-label={translate('standalone-activities.standalone-activities')}
+    pageSizeSelectLabel={translate('common.per-page')}
+    nextButtonLabel={translate('common.next')}
+    previousButtonLabel={translate('common.previous')}
+    emptyStateMessage={translate('standalone-activities.empty-state-title')}
+  >
+    <caption class="sr-only" slot="caption">
+      {translate('standalone-activities.standalone-activities')}
+    </caption>
+    <TableHeaderRow slot="headers">
+      <th></th>
+      {#each columns as column}
+        <TableHeaderCell {column} />
+      {/each}
+    </TableHeaderRow>
+    {#each visibleItems as activity}
+      <TableRow {activity}>
+        {#each columns as column}
+          <TableBodyCell {activity} {column} />
+        {/each}
+      </TableRow>
+    {/each}
+    <svelte:fragment slot="empty">
+      <TableEmptyState />
+    </svelte:fragment>
+    <svelte:fragment slot="actions-end-additional">
+      <Tooltip text="Configure Columns" top>
+        <Button
+          on:click={onClickConfigure}
+          data-testid="activities-summary-table-configuration-button"
+          size="xs"
+          variant="ghost"
+        >
+          <Icon name="settings" />
+        </Button>
+      </Tooltip>
+    </svelte:fragment>
+  </PaginatedTable>
+{/key}