Schedule Frequency as JSON (#1598)

* WIP: testing things out

* WIP

* Use CodeBlock for frequency in all cases, change layout of schedule view

* Consistent classes, remove w classes

* Reorder imports

* Remove frequency from tests

* Add empty line

* Use Schedule Spec for title, change to just Delete

* Remove top border of frequency table row

cypress/integration/schedules.spec.js

@@ -46,10 +46,6 @@ describe('Schedules View', () => {
 
     cy.get('[data-testid="schedule-name"]').should('exist');
     cy.get('[data-testid="schedule-name"]').contains(scheduleId);
-
-    cy.get('[data-testid="schedule-interval-frequency"]').contains(
-      'Every 30sec',
-    );
   });
 });
 
@@ -74,10 +70,6 @@ describe('Schedules Edit', () => {
     cy.get('[data-testid="schedule-name"]').should('exist');
     cy.get('[data-testid="schedule-name"]').contains(scheduleId);
 
-    cy.get('[data-testid="schedule-interval-frequency"]').contains(
-      'Every 30sec',
-    );
-
     cy.get('#schedule-actions-menu-button').click();
     cy.get('#schedule-actions-menu > [data-testid="edit-schedule"]').click();
     cy.url().should('contain', `/schedules/${scheduleId}/edit`);

src/lib/components/schedule/schedule-advanced-settings.svelte

@@ -1,44 +1,50 @@
 <script lang="ts">
   import Icon from '$lib/holocene/icon/icon.svelte';
   import { translate } from '$lib/i18n/translate';
-  
+
+  import ScheduleNotes from './schedule-notes.svelte';
+
   import type { SchedulePolicies, ScheduleSpec, ScheduleState } from '$types';
 
   export let spec: ScheduleSpec;
   export let state: ScheduleState;
   export let policies: SchedulePolicies;
+  export let notes = '';
 
   let show = false;
 </script>
 
-<button on:click={() => (show = !show)} class="settings">
-  {translate('schedules', 'advanced-settings')}
-  <Icon class="inline" name={show ? 'chevron-up' : 'chevron-down'} />
-</button>
-{#if show}
-  <p>
-    {translate('schedules', 'start-time')}
-    {spec?.startTime ?? translate('none')}
-  </p>
-  <p>
-    {translate('schedules', 'end-time')}{spec?.endTime ?? translate('none')}
-  </p>
-  <p>{translate('schedules', 'jitter')}{spec?.jitter ?? translate('none')}</p>
-  <p>
-    {translate('schedules', 'exclusion-calendar')}{spec?.excludeCalendar?.[0] ??
-      translate('none')}
-  </p>
-  {#if state?.limitedActions}
+<ScheduleNotes {notes} />
+<div>
+  <button on:click={() => (show = !show)} class="settings">
+    {translate('schedules', 'advanced-settings')}
+    <Icon class="inline" name={show ? 'chevron-up' : 'chevron-down'} />
+  </button>
+  {#if show}
+    <p>
+      {translate('schedules', 'start-time')}
+      {spec?.startTime ?? translate('none')}
+    </p>
+    <p>
+      {translate('schedules', 'end-time')}{spec?.endTime ?? translate('none')}
+    </p>
+    <p>{translate('schedules', 'jitter')}{spec?.jitter ?? translate('none')}</p>
+    <p>
+      {translate('schedules', 'exclusion-calendar')}{spec
+        ?.excludeCalendar?.[0] ?? translate('none')}
+    </p>
+    {#if state?.limitedActions}
+      <p>
+        {translate('schedules', 'remaining-actions')}{state?.remainingActions ??
+          translate('none')}
+      </p>
+    {/if}
     <p>
-      {translate('schedules', 'remaining-actions')}{state?.remainingActions ??
+      {translate('schedules', 'overlap-policy')}{policies?.overlapPolicy ??
         translate('none')}
     </p>
   {/if}
-  <p>
-    {translate('schedules', 'overlap-policy')}{policies?.overlapPolicy ??
-      translate('none')}
-  </p>
-{/if}
+</div>
 
 <style lang="postcss">
   .settings {

src/lib/components/schedule/schedule-frequency-panel.svelte

@@ -2,18 +2,17 @@
   import Panel from '$lib/components/panel.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { StructuredCalendar } from '$lib/types/schedule';
-  
+
   import ScheduleFrequency from './schedule-frequency.svelte';
-  
-  
+
   import type { IntervalSpec } from '$types';
 
   export let calendar: StructuredCalendar | undefined = undefined;
   export let interval: IntervalSpec | undefined = undefined;
 </script>
 
 <Panel>
-  <h2 class="mb-4 text-2xl">{translate('schedules', 'frequency')}</h2>
+  <h2 class="mb-4 text-2xl">{translate('schedules', 'schedule-spec')}</h2>
   <div class="pr-2">
     <ScheduleFrequency {calendar} {interval} class="text-base" />
   </div>

src/lib/components/schedule/schedule-frequency.svelte

@@ -1,28 +1,20 @@
 <script lang="ts">
+  import CodeBlock from '$lib/holocene/code-block.svelte';
   import type { StructuredCalendar } from '$lib/types/schedule';
-  import { intervalToComment } from '$lib/utilities/schedule-comment-formatting';
-  import { commentOrCalendarToFrequency } from '$lib/utilities/schedule-frequency-formatting';
-  
+
   import type { IntervalSpec } from '$types';
 
   export let calendar: StructuredCalendar | undefined = undefined;
   export let interval: IntervalSpec | undefined = undefined;
-
-  const intervalSecs = interval?.interval as string;
-  const phaseSecs = interval?.phase as string;
+  export let inline = false;
 </script>
 
 <div class="flex flex-col {$$props.class}">
-  {#if calendar}
-    <p data-testid="schedule-calendar-frequency">
-      {commentOrCalendarToFrequency(calendar)}
-    </p>
-  {:else}
-    <p data-testid="schedule-interval-frequency">
-      {intervalToComment(intervalSecs)}
-    </p>
-    <p data-testid="schedule-phase-frequency">
-      {intervalToComment(phaseSecs, true)}
-    </p>
-  {/if}
+  <CodeBlock
+    copyable
+    {inline}
+    testId="schedule-calendar"
+    language="json"
+    content={JSON.stringify(calendar || interval, null, 2)}
+  />
 </div>

src/lib/components/schedule/schedule-memo.svelte → src/lib/components/schedule/schedule-notes.svelte

@@ -4,5 +4,7 @@
   export let notes = '';
 </script>
 
-<h2 class="mb-4 text-2xl">{translate('memo')}</h2>
-<p>{notes}</p>
+<div>
+  <h2 class="mb-4 text-2xl">{translate('notes')}</h2>
+  <p>{notes}</p>
+</div>

src/lib/components/schedule/schedule-recent-runs.svelte

@@ -8,9 +8,9 @@
   import { decodeURIForSvelte } from '$lib/utilities/encode-uri';
   import { formatDate } from '$lib/utilities/format-date';
   import { routeForEventHistory } from '$lib/utilities/route-for';
-  
+
   import WorkflowStatus from '../workflow-status.svelte';
-  
+
   import type { ScheduleActionResult } from '$types';
 
   export let recentRuns: ScheduleActionResult[] = [];
@@ -29,7 +29,7 @@
   };
 </script>
 
-<Panel>
+<Panel class="w-full">
   <h2 class="mb-4 text-2xl">{translate('schedules', 'recent-runs')}</h2>
   {#each sortRecentRuns(recentRuns) as run (run?.startWorkflowResult?.workflowId)}
     {#await fetchWorkflowForSchedule({ namespace, workflowId: decodeURIForSvelte(run.startWorkflowResult.workflowId), runId: run.startWorkflowResult.runId }, fetch) then workflow}

src/lib/components/schedule/schedules-calendar-view.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  
+
   import Input from '$lib/holocene/input/input.svelte';
   import TabList from '$lib/holocene/tab/tab-list.svelte';
   import TabPanel from '$lib/holocene/tab/tab-panel.svelte';
   import Tab from '$lib/holocene/tab/tab.svelte';
   import Tabs from '$lib/holocene/tab/tabs.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { FullSchedule, SchedulePreset } from '$lib/types/schedule';
-  
+
   import ScheduleDayOfMonthView from './schedule-day-of-month-view.svelte';
   import ScheduleDayOfWeekView from './schedule-day-of-week-view.svelte';
   import ScheduleFrequency from './schedule-frequency.svelte';
@@ -45,7 +45,7 @@
 </script>
 
 <Tabs class="mt-8 w-full">
-  <h2 class="mb-4 text-2xl">{translate('schedules', 'frequency')}</h2>
+  <h2 class="mb-4 text-2xl">{translate('schedules', 'schedule-spec')}</h2>
   <TabList label="Schedule Tabs" class="flex flex-wrap gap-6">
     {#if schedule}
       <Tab
@@ -82,11 +82,10 @@
   </TabList>
   <div class="mt-4 flex w-full flex-wrap gap-6">
     {#if schedule}
-      <TabPanel id="existing-panel" tabId="existing-tab">
+      <TabPanel id="existing-panel" tabId="existing-tab" class="w-full">
         <ScheduleFrequency
           calendar={schedule?.spec?.structuredCalendar?.[0]}
           interval={schedule?.spec?.interval?.[0]}
-          class="text-base"
         />
       </TabPanel>
     {/if}

src/lib/components/schedule/schedules-table-row.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  
+
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import Link from '$lib/holocene/link.svelte';
   import TableRow from '$lib/holocene/table/table-row.svelte';
@@ -15,10 +15,9 @@
     routeForEventHistory,
     routeForSchedule,
   } from '$lib/utilities/route-for';
-  
+
   import ScheduleFrequency from './schedule-frequency.svelte';
-  
-  
+
   import type { ScheduleActionResult, ScheduleListEntry } from '$types';
 
   let { namespace } = $page.params;
@@ -53,9 +52,6 @@
   </td>
   <td class="cell whitespace-pre-line break-words">
     <p class="text-base">{schedule.scheduleId}</p>
-    <p>
-      <ScheduleFrequency {calendar} {interval} class="text-sm" />
-    </p>
   </td>
   <td class="cell whitespace-pre-line break-words max-md:hidden">
     {schedule?.info?.workflowType?.name ?? ''}
@@ -87,9 +83,24 @@
     {/each}
   </td>
 </TableRow>
+<TableRow class="row">
+  <td colspan="5" class="hidden xl:table-cell !p-0">
+    <ScheduleFrequency {calendar} {interval} inline class="text-sm w-auto" />
+  </td>
+  <td colspan="3" class="hidden md:table-cell xl:hidden !p-0">
+    <ScheduleFrequency {calendar} {interval} inline class="text-sm w-auto" />
+  </td>
+  <td colspan="2" class="md:hidden !p-0">
+    <ScheduleFrequency {calendar} {interval} inline class="text-sm w-auto" />
+  </td>
+</TableRow>
 
 <style lang="postcss">
   .cell {
     @apply p-2 text-left;
   }
+
+  :global(.row td) {
+    @apply !border-t-0;
+  }
 </style>

src/lib/components/schedule/schedules-table.svelte

@@ -4,7 +4,7 @@
   import { translate } from '$lib/i18n/translate';
 </script>
 
-<Table class="table-fixed">
+<Table class="table-fixed w-full">
   <caption class="sr-only" slot="caption">{translate('schedules')}</caption>
   <TableHeaderRow slot="headers">
     <th class="w-28">{translate('status')}</th>

src/lib/holocene/code-block.svelte

@@ -15,8 +15,8 @@
     async?: boolean;
     testId?: string;
     copyable?: boolean;
-    copyIconTitle: string;
-    copySuccessIconTitle: string;
+    copyIconTitle?: string;
+    copySuccessIconTitle?: string;
   };
 
   type CopyableProps = Omit<

src/lib/holocene/menu/menu.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
   import { fly } from 'svelte/transition';
-  
+
   import { getContext } from 'svelte';
-  
+
   import { MENU_CONTEXT, type MenuContext } from './menu-container.svelte';
 
   interface $$Props extends HTMLAttributes<HTMLUListElement> {

src/lib/i18n/locales/en/common.ts

@@ -65,6 +65,7 @@ export const Strings = {
   edit: 'Edit',
   delete: 'Delete',
   memo: 'Memo',
+  notes: 'Notes',
   add: 'Add',
   'from-now': 'from now',
   'hours-abbreviated': 'hrs.',

src/lib/i18n/locales/en/schedules.ts

@@ -10,14 +10,14 @@ export const Strings = {
   name: 'Schedule Name',
   schedule: 'Schedule',
   frequency: 'Frequency',
+  'schedule-spec': 'Schedule Spec',
   'empty-state-title': 'No Schedules Found',
   'empty-state-description': 'Try a different search',
   'recent-runs': 'Recent Runs',
   'recent-runs-empty-state-title': 'No Recent Runs',
   'upcoming-runs': 'Upcoming Runs',
   loading: 'Loading Schedule...',
   deleting: 'Deleting Schedule...',
-  delete: 'Delete Schedule',
   'delete-schedule-error': 'Cannot delete schedule. {{error}}',
   pause: 'Pause',
   unpause: 'Unpause',