Standardize resource empty states and expand SDK links

server/go.sum

@@ -18,8 +18,6 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/frankban/quicktest v1.14.6 h1:7Xjx+VpznH+oBnejlPUj8oUpdxnVs4f8XU8WnHkI4W8=
 github.com/frankban/quicktest v1.14.6/go.mod h1:4ptaffx2x8+WTWXmUCuVU6aPUX1/Mz7zb5vbUoiM6w0=
-github.com/go-jose/go-jose/v4 v4.1.4 h1:moDMcTHmvE6Groj34emNPLs/qtYXRVcd6S7NHbHz3kA=
-github.com/go-jose/go-jose/v4 v4.1.4/go.mod h1:x4oUasVrzR7071A4TnHLGSPpNOm2a21K9Kf04k1rs08=
 github.com/go-jose/go-jose/v4 v4.1.6 h1:sNRkftxFJxwsILiQukqp5z83QBSmntVwmgRY7AqBDO4=
 github.com/go-jose/go-jose/v4 v4.1.6/go.mod h1:x4oUasVrzR7071A4TnHLGSPpNOm2a21K9Kf04k1rs08=
 github.com/go-logr/logr v1.4.4 h1:tG4xh9yMsRCAiodLVTxyrkzSZ9+o0L1Kg/+cPVcbP/8=

src/lib/components/batch-operations/empty-state.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import ResourceEmptyState from '$lib/components/empty-states/resource-empty-state.svelte';
+  import Link from '$lib/holocene/link.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { IconBatchOperation } from '$lib/io/icon';
+</script>
+
+<ResourceEmptyState
+  title={translate('batch.empty-state-title')}
+  Icon={IconBatchOperation}
+  testId="batch-operations-empty-state"
+  placeholder
+>
+  {#snippet description()}
+    <p>{translate('batch.empty-state-description')}</p>
+    <p>
+      {translate('batch.empty-state-read-docs-prefix')}
+      <Link href="https://docs.temporal.io/cli/command-reference/batch" newTab>
+        {translate('batch.empty-state-docs-link')}
+      </Link>
+      {translate('batch.empty-state-read-docs-suffix')}
+    </p>
+  {/snippet}
+</ResourceEmptyState>

src/lib/components/batch-operations/table.svelte

@@ -2,7 +2,6 @@
   import BatchOperationStatusBadge from '$lib/components/batch-operations/batch-operation-status-badge.svelte';
   import OperationType from '$lib/components/batch-operations/operation-type.svelte';
   import Timestamp from '$lib/components/timestamp.svelte';
-  import EmptyState from '$lib/holocene/empty-state.svelte';
   import Link from '$lib/holocene/link.svelte';
   import TableHeaderRow from '$lib/holocene/table/table-header-row.svelte';
   import TableRow from '$lib/holocene/table/table-row.svelte';
@@ -51,11 +50,5 @@
       <Timestamp as="td" class="max-sm:hidden" dateTime={startTime} />
       <Timestamp as="td" class="max-sm:hidden" dateTime={closeTime} />
     </TableRow>
-  {:else}
-    <TableRow>
-      <td class="max-sm:hidden" colspan="5">
-        <EmptyState title={translate('batch.empty-state-title')}></EmptyState>
-      </td>
-    </TableRow>
   {/each}
 </Table>

src/lib/components/deployments/deployments-empty-state.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
-  import Alert from '$lib/holocene/alert.svelte';
+  import ResourceEmptyState from '$lib/components/empty-states/resource-empty-state.svelte';
   import Button from '$lib/holocene/button.svelte';
   import { translate } from '$lib/i18n/translate';
-  import {
-    IconExternalLinkOptical,
-    IconTemporalWorker,
-    IconWarning,
-  } from '$lib/io/icon';
+  import { IconExternalLinkOptical, IconTemporalWorker } from '$lib/io/icon';
 
   interface Props {
     createHref: string;
@@ -21,17 +17,15 @@
   }: Props = $props();
 </script>
 
-<div class="flex flex-col items-center gap-4 py-16">
-  <IconTemporalWorker class="h-20 w-20 text-indigo-6" />
-  <div class="flex flex-col items-center gap-2">
-    <p class="text-base font-medium">
-      {translate('deployments.empty-state-title')}
-    </p>
-    <p class="max-w-[500px] text-center text-sm text-secondary">
-      {translate('deployments.empty-state-description')}
-    </p>
-  </div>
-  <div class="flex flex-wrap items-center justify-center gap-4">
+<ResourceEmptyState
+  title={translate('deployments.empty-state-title')}
+  content={translate('deployments.empty-state-description')}
+  Icon={IconTemporalWorker}
+  {error}
+  testId="deployments-empty-state"
+  placeholder
+>
+  {#snippet actions()}
     {#if canCreateServerlessDeployment}
       <Button variant="secondary" href={createHref}>
         {translate('deployments.create-serverless-deployment')}
@@ -45,10 +39,5 @@
     >
       {translate('deployments.self-managed-deployment')}
     </Button>
-  </div>
-  {#if error}
-    <Alert intent="warning" Icon={IconWarning} class="max-w-lg">
-      {error}
-    </Alert>
-  {/if}
-</div>
+  {/snippet}
+</ResourceEmptyState>

src/lib/components/empty-states/empty-state-transition.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { prefersReducedMotion } from 'svelte/motion';
+  import { fade } from 'svelte/transition';
+
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    empty: boolean;
+    emptyState: Snippet;
+    children: Snippet;
+  }
+
+  let { empty, emptyState, children }: Props = $props();
+
+  const fadeOut = $derived({
+    duration: prefersReducedMotion.current ? 0 : 200,
+  });
+</script>
+
+<div
+  class="grid grow grid-cols-1 grid-rows-[minmax(0,1fr)]"
+  class:min-h-0={!empty}
+>
+  {#if empty}
+    <div class="col-start-1 row-start-1">
+      {@render emptyState()}
+    </div>
+  {:else}
+    <div
+      class="col-start-1 row-start-1 flex min-h-0 flex-col"
+      out:fade={fadeOut}
+    >
+      {@render children()}
+    </div>
+  {/if}
+</div>