From 47a7e45e8cf2124f191f77fd38b618304a164272 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Tue, 7 Jan 2025 09:39:30 -0700
Subject: [PATCH] Detail view responsive improvements (#2483)

* Remove unnecessary WorkflowCountStatus component

* Improve responsiveness of WorkflowHeader

* Improve responsiveness of Schedule details header

* Update tests
---
 .../workflow/workflow-count-status.svelte     |  16 --
 .../workflow/workflow-counts.svelte           |   3 +-
 src/lib/layouts/workflow-header.svelte        |  27 ++-
 src/lib/pages/schedule-view.svelte            |  20 +--
 .../integration/disable-write-actions.spec.ts |  12 +-
 tests/integration/workflow-actions.spec.ts    | 161 ++++++++++++++----
 6 files changed, 168 insertions(+), 71 deletions(-)
 delete mode 100644 src/lib/components/workflow/workflow-count-status.svelte

diff --git a/src/lib/components/workflow/workflow-count-status.svelte b/src/lib/components/workflow/workflow-count-status.svelte
deleted file mode 100644
index 9485f5065..000000000
--- a/src/lib/components/workflow/workflow-count-status.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-  import type { WorkflowStatus as Status } from '$lib/types/workflows';
-
-  import WorkflowStatus from '../workflow-status.svelte';
-
-  export let status: Status;
-  export let count = 0;
-  export let newCount = 0;
-</script>
-
-<WorkflowStatus
-  {count}
-  {newCount}
-  {status}
-  test-id="workflow-status-{status}"
-/>
diff --git a/src/lib/components/workflow/workflow-counts.svelte b/src/lib/components/workflow/workflow-counts.svelte
index c59926b09..ba8f42179 100644
--- a/src/lib/components/workflow/workflow-counts.svelte
+++ b/src/lib/components/workflow/workflow-counts.svelte
@@ -24,7 +24,7 @@
   import { getExponentialBackoffSeconds } from '$lib/utilities/refresh-rate';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
 
-  import WorkflowCountStatus from './workflow-count-status.svelte';
+  import WorkflowCountStatus from '../workflow-status.svelte';
 
   export let staticQuery = '';
   $: namespace = $page.params.namespace;
@@ -167,6 +167,7 @@
           newCount={newStatusGroups.find((g) => g.status === status)
             ? newStatusGroups.find((g) => g.status === status).count - count
             : 0}
+          test-id="workflow-status-{status}"
         />
       </button>
     {:else}
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
index d98e09a22..c06873da3 100644
--- a/src/lib/layouts/workflow-header.svelte
+++ b/src/lib/layouts/workflow-header.svelte
@@ -99,17 +99,34 @@
 </div>
 <header class="flex flex-col gap-2">
   <div class="flex flex-col items-center justify-between gap-4 lg:flex-row">
-    <div class="flex flex-col items-center gap-4 lg:flex-row">
-      <WorkflowStatus status={workflow?.status} big />
+    <div
+      class="flex w-full flex-col items-start gap-4 lg:flex-row lg:items-center"
+    >
+      <div
+        class="flex flex-wrap items-center justify-between gap-4 max-lg:w-full"
+      >
+        <WorkflowStatus status={workflow?.status} big />
+        <div class="lg:hidden">
+          <WorkflowActions
+            {isRunning}
+            {cancelInProgress}
+            {workflow}
+            {namespace}
+          />
+        </div>
+      </div>
       <div class="flex flex-col flex-wrap gap-0">
-        <h1 data-testid="workflow-id-heading" class="gap-0 overflow-hidden">
+        <h1
+          data-testid="workflow-id-heading"
+          class="gap-0 overflow-hidden max-sm:text-xl sm:max-md:text-2xl"
+        >
           <Copyable
             copyIconTitle={translate('common.copy-icon-title')}
             copySuccessIconTitle={translate('common.copy-success-icon-title')}
             content={workflow?.id}
             clickAllToCopy
             container-class="w-full"
-            class="overflow-hidden text-ellipsis"
+            class="overflow-hidden text-ellipsis text-left"
           />
         </h1>
         {#if workflowUsesVersioning}
@@ -117,7 +134,7 @@
         {/if}
       </div>
     </div>
-    <div class="px-2">
+    <div class="max-lg:hidden">
       <WorkflowActions {isRunning} {cancelInProgress} {workflow} {namespace} />
     </div>
   </div>
diff --git a/src/lib/pages/schedule-view.svelte b/src/lib/pages/schedule-view.svelte
index 6dec760a1..d656eddca 100644
--- a/src/lib/pages/schedule-view.svelte
+++ b/src/lib/pages/schedule-view.svelte
@@ -266,7 +266,7 @@
   {#if $loading}
     <Loading title={translate('schedules.deleting')} class="my-2" />
   {:else}
-    <header class="mb-8 flex flex-row justify-between gap-4">
+    <header class="mb-8 flex flex-row flex-wrap justify-between gap-4">
       <div class="relative flex flex-col gap-4">
         <Link href={routeForSchedules({ namespace })} icon="chevron-left">
           {translate('schedules.back-to-schedules')}
@@ -276,7 +276,7 @@
             {scheduleId}
           </span>
         </h1>
-        <div class="flex items-center gap-2 text-lg">
+        <div class="flex flex-wrap items-center gap-2 text-lg">
           <WorkflowStatus
             status={schedule?.schedule.state.paused ? 'Paused' : 'Running'}
           />
@@ -284,15 +284,13 @@
             {schedule?.schedule?.action?.startWorkflow?.workflowType?.name}
           </p>
         </div>
-        <div class="flex items-center gap-2 text-sm">
-          <p>
-            {translate('common.created', {
-              created: formatDate(schedule?.info?.createTime, $timeFormat, {
-                relative: $relativeTime,
-              }),
-            })}
-          </p>
-        </div>
+        <p class="flex items-center gap-2 text-sm">
+          {translate('common.created', {
+            created: formatDate(schedule?.info?.createTime, $timeFormat, {
+              relative: $relativeTime,
+            }),
+          })}
+        </p>
         {#if schedule?.info?.updateTime}
           <div class="flex items-center gap-2 text-sm">
             <p>
diff --git a/tests/integration/disable-write-actions.spec.ts b/tests/integration/disable-write-actions.spec.ts
index 4799d285b..8303d36c5 100644
--- a/tests/integration/disable-write-actions.spec.ts
+++ b/tests/integration/disable-write-actions.spec.ts
@@ -14,9 +14,9 @@ test.describe('Enable write actions by default', () => {
   });
 
   test('Cancel workflow button enabled', async ({ page }) => {
-    const workflowActionButton = page.locator(
-      '#workflow-actions-primary-button',
-    );
+    const workflowActionButton = page
+      .locator('#workflow-actions-primary-button')
+      .locator('visible=true');
     await expect(workflowActionButton).toBeEnabled();
   });
 });
@@ -29,9 +29,9 @@ test.describe('Disable write actions on workflow actions', () => {
   });
 
   test('Cancel workflow button disabled', async ({ page }) => {
-    const workflowActionButton = page.locator(
-      '#workflow-actions-primary-button',
-    );
+    const workflowActionButton = page
+      .locator('#workflow-actions-primary-button')
+      .locator('visible=true');
     await expect(workflowActionButton).toBeDisabled();
   });
 });
diff --git a/tests/integration/workflow-actions.spec.ts b/tests/integration/workflow-actions.spec.ts
index 88797c3e3..821ec9f2a 100644
--- a/tests/integration/workflow-actions.spec.ts
+++ b/tests/integration/workflow-actions.spec.ts
@@ -35,7 +35,9 @@ test.describe('Workflow Actions for a Completed Workflow', () => {
     }) => {
       await mockSettingsApi(page, { DisableWriteActions: true });
 
-      await expect(page.getByTestId('workflow-reset-button')).toBeDisabled();
+      await expect(
+        page.getByTestId('workflow-reset-button').locator('visible=true'),
+      ).toBeDisabled();
     });
 
     test('is disabled when reset is disabled via Settings API', async ({
@@ -43,7 +45,9 @@ test.describe('Workflow Actions for a Completed Workflow', () => {
     }) => {
       await mockSettingsApi(page, { WorkflowResetDisabled: true });
 
-      await expect(page.getByTestId('workflow-reset-button')).toBeDisabled();
+      await expect(
+        page.getByTestId('workflow-reset-button').locator('visible=true'),
+      ).toBeDisabled();
     });
 
     test('allows reapplying signals after the reset point', async ({
@@ -51,16 +55,24 @@ test.describe('Workflow Actions for a Completed Workflow', () => {
     }) => {
       const requestPromise = page.waitForRequest(WORKFLOW_RESET_API);
 
-      await page.getByTestId('workflow-reset-button').click();
-      await page.getByTestId('workflow-reset-event-id-select-button').click();
+      await page
+        .getByTestId('workflow-reset-button')
+        .locator('visible=true')
+        .click();
+      await page
+        .getByTestId('workflow-reset-event-id-select-button')
+        .locator('visible=true')
+        .click();
       await page
         .locator('#reset-event-id-select')
         .locator('[role="option"]')
+        .locator('visible=true')
         .first()
         .click();
 
       await page
         .getByTestId('reset-confirmation-modal')
+        .locator('visible=true')
         .getByTestId('confirm-modal-button')
         .click();
 
@@ -77,19 +89,30 @@ test.describe('Workflow Actions for a Completed Workflow', () => {
     }) => {
       const requestPromise = page.waitForRequest(WORKFLOW_RESET_API);
 
-      await page.getByTestId('workflow-reset-button').click();
-      await page.getByTestId('workflow-reset-event-id-select-button').click();
+      await page
+        .getByTestId('workflow-reset-button')
+        .locator('visible=true')
+        .click();
+      await page
+        .getByTestId('workflow-reset-event-id-select-button')
+        .locator('visible=true')
+        .click();
       await page
         .locator('#reset-event-id-select')
         .locator('[role="option"]')
+        .locator('visible=true')
         .first()
         .click();
 
       // this checkbox is defaulted to checked, so click it to uncheck it
-      await page.getByTestId('reset-include-signals-checkbox').click();
+      await page
+        .getByTestId('reset-include-signals-checkbox')
+        .locator('visible=true')
+        .click();
 
       await page
         .getByTestId('reset-confirmation-modal')
+        .locator('visible=true')
         .getByTestId('confirm-modal-button')
         .click();
 
@@ -115,16 +138,24 @@ test.describe('Workflow Actions for a Completed Workflow', () => {
     }) => {
       const requestPromise = page.waitForRequest(WORKFLOW_RESET_API);
 
-      await page.getByTestId('workflow-reset-button').click();
-      await page.getByTestId('workflow-reset-event-id-select-button').click();
+      await page
+        .getByTestId('workflow-reset-button')
+        .locator('visible=true')
+        .click();
+      await page
+        .getByTestId('workflow-reset-event-id-select-button')
+        .locator('visible=true')
+        .click();
       await page
         .locator('#reset-event-id-select')
         .locator('[role="option"]')
+        .locator('visible=true')
         .first()
         .click();
 
       await page
         .getByTestId('reset-confirmation-modal')
+        .locator('visible=true')
         .getByTestId('confirm-modal-button')
         .click();
 
@@ -141,18 +172,29 @@ test.describe('Workflow Actions for a Completed Workflow', () => {
     test('Allows excluding Signals after the reset point', async ({ page }) => {
       const requestPromise = page.waitForRequest(WORKFLOW_RESET_API);
 
-      await page.getByTestId('workflow-reset-button').click();
-      await page.getByTestId('workflow-reset-event-id-select-button').click();
+      await page
+        .getByTestId('workflow-reset-button')
+        .locator('visible=true')
+        .click();
+      await page
+        .getByTestId('workflow-reset-event-id-select-button')
+        .locator('visible=true')
+        .click();
       await page
         .locator('#reset-event-id-select')
         .locator('[role="option"]')
+        .locator('visible=true')
         .first()
         .click();
 
-      await page.getByTestId('reset-exclude-signals-checkbox').click();
+      await page
+        .getByTestId('reset-exclude-signals-checkbox')
+        .locator('visible=true')
+        .click();
 
       await page
         .getByTestId('reset-confirmation-modal')
+        .locator('visible=true')
         .getByTestId('confirm-modal-button')
         .click();
 
@@ -169,18 +211,29 @@ test.describe('Workflow Actions for a Completed Workflow', () => {
     test('Allows excluding Updates after the reset point', async ({ page }) => {
       const requestPromise = page.waitForRequest(WORKFLOW_RESET_API);
 
-      await page.getByTestId('workflow-reset-button').click();
-      await page.getByTestId('workflow-reset-event-id-select-button').click();
+      await page
+        .getByTestId('workflow-reset-button')
+        .locator('visible=true')
+        .click();
+      await page
+        .getByTestId('workflow-reset-event-id-select-button')
+        .locator('visible=true')
+        .click();
       await page
         .locator('#reset-event-id-select')
         .locator('[role="option"]')
+        .locator('visible=true')
         .first()
         .click();
 
-      await page.getByTestId('reset-exclude-updates-checkbox').click();
+      await page
+        .getByTestId('reset-exclude-updates-checkbox')
+        .locator('visible=true')
+        .click();
 
       await page
         .getByTestId('reset-confirmation-modal')
+        .locator('visible=true')
         .getByTestId('confirm-modal-button')
         .click();
 
@@ -216,10 +269,12 @@ test.describe('Workflow actions for a Running Workflow', () => {
   }) => {
     await mockSettingsApi(page, { DisableWriteActions: true });
 
-    await expect(page.locator('#workflow-actions-menu-button')).toBeDisabled();
+    await expect(
+      page.locator('#workflow-actions-menu-button').locator('visible=true'),
+    ).toBeDisabled();
 
     await expect(
-      page.locator('#workflow-actions-primary-button'),
+      page.locator('#workflow-actions-primary-button').locator('visible=true'),
     ).toBeDisabled();
   });
 
@@ -230,21 +285,35 @@ test.describe('Workflow actions for a Running Workflow', () => {
       await mockSettingsApi(page, { WorkflowCancelDisabled: true });
 
       await expect(
-        page.locator('#workflow-actions-primary-button'),
+        page
+          .locator('#workflow-actions-primary-button')
+          .locator('visible=true'),
       ).toBeDisabled();
 
-      await page.locator('#workflow-actions-menu-button').click();
+      await page
+        .locator('#workflow-actions-menu-button')
+        .locator('visible=true')
+        .click();
 
       await expect(
-        page.locator('#workflow-actions-menu').getByText('Send a Signal'),
+        page
+          .locator('#workflow-actions-menu')
+          .locator('visible=true')
+          .getByText('Send a Signal'),
       ).toBeEnabled();
 
       await expect(
-        page.locator('#workflow-actions-menu').getByText('Terminate'),
+        page
+          .locator('#workflow-actions-menu')
+          .locator('visible=true')
+          .getByText('Terminate'),
       ).toBeEnabled();
 
       await expect(
-        page.locator('#workflow-actions-menu').getByText('Reset'),
+        page
+          .locator('#workflow-actions-menu')
+          .locator('visible=true')
+          .getByText('Reset'),
       ).toBeEnabled();
     });
   });
@@ -256,21 +325,35 @@ test.describe('Workflow actions for a Running Workflow', () => {
       await mockSettingsApi(page, { WorkflowTerminateDisabled: true });
 
       await expect(
-        page.locator('#workflow-actions-primary-button'),
+        page
+          .locator('#workflow-actions-primary-button')
+          .locator('visible=true'),
       ).toBeEnabled();
 
-      await page.locator('#workflow-actions-menu-button').click();
+      await page
+        .locator('#workflow-actions-menu-button')
+        .locator('visible=true')
+        .click();
 
       await expect(
-        page.locator('#workflow-actions-menu').getByText('Send a Signal'),
+        page
+          .locator('#workflow-actions-menu')
+          .locator('visible=true')
+          .getByText('Send a Signal'),
       ).toBeEnabled();
 
       await expect(
-        page.locator('#workflow-actions-menu').getByText('Terminate'),
+        page
+          .locator('#workflow-actions-menu')
+          .locator('visible=true')
+          .getByText('Terminate'),
       ).toBeDisabled();
 
       await expect(
-        page.locator('#workflow-actions-menu').getByText('Reset'),
+        page
+          .locator('#workflow-actions-menu')
+          .locator('visible=true')
+          .getByText('Reset'),
       ).toBeEnabled();
     });
   });
@@ -282,21 +365,35 @@ test.describe('Workflow actions for a Running Workflow', () => {
       await mockSettingsApi(page, { WorkflowSignalDisabled: true });
 
       await expect(
-        page.locator('#workflow-actions-primary-button'),
+        page
+          .locator('#workflow-actions-primary-button')
+          .locator('visible=true'),
       ).toBeEnabled();
 
-      await page.locator('#workflow-actions-menu-button').click();
+      await page
+        .locator('#workflow-actions-menu-button')
+        .locator('visible=true')
+        .click();
 
       await expect(
-        page.locator('#workflow-actions-menu').getByText('Send a Signal'),
+        page
+          .locator('#workflow-actions-menu')
+          .locator('visible=true')
+          .getByText('Send a Signal'),
       ).toBeDisabled();
 
       await expect(
-        page.locator('#workflow-actions-menu').getByText('Terminate'),
+        page
+          .locator('#workflow-actions-menu')
+          .locator('visible=true')
+          .getByText('Terminate'),
       ).toBeEnabled();
 
       await expect(
-        page.locator('#workflow-actions-menu').getByText('Reset'),
+        page
+          .locator('#workflow-actions-menu')
+          .locator('visible=true')
+          .getByText('Reset'),
       ).toBeEnabled();
     });
   });