Schedules redesign 5/5: view page, list, and action modals

src/lib/components/schedule/schedule-action-modals/backfill-schedule-modal.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+
+  import { addHours, isBefore, startOfDay } from 'date-fns';
+  import { utcToZonedTime } from 'date-fns-tz';
+
+  import DatePicker from '$lib/holocene/date-picker.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Modal from '$lib/holocene/modal.svelte';
+  import RadioCard from '$lib/holocene/radio-input/radio-card.svelte';
+  import RadioGroup from '$lib/holocene/radio-input/radio-group.svelte';
+  import TimePicker from '$lib/holocene/time-picker.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import {
+    actionPending,
+    clearConfirmationModalActionTimeout,
+    closeConfirmationModal,
+    confirmationModal,
+    serverError,
+    submitBackfillSchedule,
+  } from '$lib/stores/schedules';
+  import type { OverlapPolicy } from '$lib/types/schedule';
+  import { getIdentity } from '$lib/utilities/core-context';
+
+  import { getOverlapPolicyContent } from '../constants';
+  import { dateAndTimeToTimestamp } from '../utilities/date';
+
+  interface Props {
+    scheduleOverlapPolicy?: OverlapPolicy;
+    scheduleId: string;
+    namespace: string;
+    timezoneName?: string;
+  }
+
+  const overlapPolicyContent = getOverlapPolicyContent();
+  const identity = getIdentity();
+
+  let { scheduleOverlapPolicy, scheduleId, namespace, timezoneName }: Props =
+    $props();
+
+  // svelte-ignore state_referenced_locally
+  const timezone = timezoneName || 'UTC';
+
+  // svelte-ignore state_referenced_locally
+  let selectedOverlapPolicy = writable<OverlapPolicy>(
+    scheduleOverlapPolicy ?? 'Skip',
+  );
+
+  const zonedNow = utcToZonedTime(new Date(), timezone);
+  const anHourAhead = addHours(zonedNow, 1);
+
+  let startDate = $state(startOfDay(zonedNow));
+  let startHour = $state(zonedNow.getHours().toString());
+  let startMinute = $state(zonedNow.getMinutes().toString());
+  let startSecond = $state(zonedNow.getSeconds().toString());
+
+  let endDate = $state(startOfDay(anHourAhead));
+  let endHour = $state(anHourAhead.getHours().toString());
+  let endMinute = $state(anHourAhead.getMinutes().toString());
+  let endSecond = $state(anHourAhead.getSeconds().toString());
+
+  const startTimestamp = $derived(
+    dateAndTimeToTimestamp(
+      startDate,
+      startHour,
+      startMinute,
+      startSecond,
+      timezone,
+    ),
+  );
+  const endTimestamp = $derived(
+    dateAndTimeToTimestamp(endDate, endHour, endMinute, endSecond, timezone),
+  );
+  const invalidEndTime = $derived(endTimestamp <= startTimestamp);
+
+  $effect(() => {
+    return () => clearConfirmationModalActionTimeout('backfill');
+  });
+</script>
+
+<Modal
+  id="backfill-schedule-modal"
+  large
+  open={$confirmationModal === 'backfill'}
+  confirmType="primary"
+  confirmText={translate('schedules.schedule')}
+  cancelText={translate('common.cancel')}
+  loading={$actionPending}
+  error={$serverError}
+  confirmDisabled={invalidEndTime}
+  on:confirmModal={() =>
+    submitBackfillSchedule(
+      {
+        startTime: startTimestamp,
+        endTime: endTimestamp,
+        overlapPolicy: $selectedOverlapPolicy,
+      },
+      {
+        identity,
+        scheduleId,
+        namespace,
+      },
+    )}
+  on:cancelModal={() => {
+    closeConfirmationModal('backfill');
+  }}
+>
+  <h3 slot="title">
+    {translate('schedules.schedule')}
+    {translate('schedules.backfill')}
+  </h3>
+  <div slot="content">
+    <div class="flex flex-col gap-2 p-2">
+      <DatePicker
+        id="backfill-start-date"
+        label={translate('common.start')}
+        onDateChange={(d) => (startDate = startOfDay(d))}
+        selected={startDate}
+        todayLabel={translate('common.today')}
+        closeLabel={translate('common.close')}
+        clearLabel={translate('common.clear-input-button-label')}
+      />
+      <TimePicker
+        idPrefix="backfill-start-"
+        bind:hour={startHour}
+        bind:minute={startMinute}
+        bind:second={startSecond}
+        twelveHourClock={false}
+      />
+      <DatePicker
+        id="backfill-end-date"
+        label={translate('common.end')}
+        onDateChange={(d) => (endDate = startOfDay(d))}
+        selected={endDate}
+        todayLabel={translate('common.today')}
+        closeLabel={translate('common.close')}
+        clearLabel={translate('common.clear-input-button-label')}
+        isAllowed={(d) => !isBefore(d, startDate)}
+      />
+      <TimePicker
+        idPrefix="backfill-end-"
+        bind:hour={endHour}
+        bind:minute={endMinute}
+        bind:second={endSecond}
+        twelveHourClock={false}
+        error={invalidEndTime}
+      />
+      {#if invalidEndTime}
+        <span class="text-xs text-danger" role="alert">
+          {translate('schedules.backfill-end-before-start')}
+        </span>
+      {/if}
+      <div class="flex w-full flex-row items-center gap-2">
+        <Icon name="clock" aria-hidden="true" />
+        <span class="text-xs font-normal text-slate-500"
+          >{translate('common.based-on-time-preface')}
+          {timezone === 'UTC'
+            ? translate('common.universal-standard-time')
+            : timezone}
+        </span>
+      </div>
+    </div>
+
+    <hr tabindex="-1" aria-hidden="true" class="my-4 w-full border-subtle" />
+
+    <RadioGroup name="overlap-policy" group={selectedOverlapPolicy}>
+      {#each Object.entries(overlapPolicyContent) as [value, content] (value)}
+        <RadioCard
+          id="overlap-policy-{value}"
+          value={value as OverlapPolicy}
+          label={[
+            content.label,
+            value === scheduleOverlapPolicy &&
+              translate('schedules.overlap-schedule-policy-suffix'),
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          description={content.description}
+          labelContainerClass="border-transparent p-0"
+        />
+      {/each}
+    </RadioGroup>
+  </div>
+</Modal>

src/lib/components/schedule/schedule-action-modals/pause-schedule-modal.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import Input from '$lib/holocene/input/input.svelte';
+  import Modal from '$lib/holocene/modal.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import {
+    actionPending,
+    clearConfirmationModalActionTimeout,
+    closeConfirmationModal,
+    confirmationModal,
+    serverError,
+    submitPauseSchedule,
+  } from '$lib/stores/schedules';
+  import { getIdentity } from '$lib/utilities/core-context';
+
+  interface Props {
+    isSchedulePaused?: boolean;
+    scheduleId: string;
+    namespace: string;
+  }
+
+  const identity = getIdentity();
+
+  let { isSchedulePaused, scheduleId, namespace }: Props = $props();
+
+  let reason = $state('');
+
+  $effect(() => {
+    return () => clearConfirmationModalActionTimeout('pause');
+  });
+</script>
+
+<Modal
+  id="pause-schedule-modal"
+  open={$confirmationModal === 'pause'}
+  confirmType="primary"
+  confirmText={isSchedulePaused
+    ? translate('schedules.unpause')
+    : translate('schedules.pause')}
+  cancelText={translate('common.cancel')}
+  confirmDisabled={!reason}
+  loading={$actionPending}
+  error={$serverError}
+  on:cancelModal={() => closeConfirmationModal('pause')}
+  on:confirmModal={() =>
+    submitPauseSchedule(reason, {
+      identity,
+      scheduleId,
+      namespace,
+      isPaused: isSchedulePaused,
+    })}
+>
+  <h3 slot="title">
+    {isSchedulePaused
+      ? translate('schedules.unpause-modal-title')
+      : translate('schedules.pause-modal-title')}
+  </h3>
+  <div slot="content">
+    <p>
+      {isSchedulePaused
+        ? translate('schedules.unpause-modal-confirmation', {
+            schedule: scheduleId,
+          })
+        : translate('schedules.pause-modal-confirmation', {
+            schedule: scheduleId,
+          })}
+    </p>
+    <p class="my-4">
+      {isSchedulePaused
+        ? translate('schedules.unpause-reason')
+        : translate('schedules.pause-reason')}
+    </p>
+    <Input
+      id="pause-reason"
+      bind:value={reason}
+      placeholder={translate('common.reason')}
+      label={translate('common.reason')}
+      labelHidden
+    />
+  </div>
+</Modal>

src/lib/components/schedule/schedule-action-modals/schedule-action-modals.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { confirmationModal } from '$lib/stores/schedules';
+  import type { DescribeFullSchedule } from '$lib/types/schedule';
+
+  import { parseOverlapPolicy } from '../utilities/get-form-schedule-defaults';
+
+  import BackfillScheduleModal from './backfill-schedule-modal.svelte';
+  import DeleteScheduleModal from './delete-schedule-modal.svelte';
+  import PauseScheduleModal from './pause-schedule-modal.svelte';
+  import TriggerScheduleModal from './trigger-schedule-modal.svelte';
+
+  interface Props {
+    schedule: DescribeFullSchedule;
+    namespace: string;
+    scheduleId: string;
+  }
+
+  let { schedule, namespace, scheduleId }: Props = $props();
+
+  // We are conditionally remndering each modal in order to reset modal state on open/close
+  const scheduleOverlapPolicy = $derived(
+    parseOverlapPolicy(schedule?.schedule?.policies?.overlapPolicy),
+  );
+</script>
+
+{#if $confirmationModal === 'pause'}
+  <PauseScheduleModal
+    {scheduleId}
+    {namespace}
+    isSchedulePaused={schedule?.schedule?.state?.paused}
+  />
+{:else if $confirmationModal === 'trigger'}
+  <TriggerScheduleModal {scheduleId} {namespace} {scheduleOverlapPolicy} />
+{:else if $confirmationModal === 'backfill'}
+  <BackfillScheduleModal
+    {scheduleId}
+    {namespace}
+    {scheduleOverlapPolicy}
+    timezoneName={schedule?.schedule?.spec?.timezoneName}
+  />
+{:else if $confirmationModal === 'delete'}
+  <DeleteScheduleModal {scheduleId} {namespace} />
+{/if}

src/lib/components/schedule/schedule-action-modals/trigger-schedule-modal.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+
+  import Modal from '$lib/holocene/modal.svelte';
+  import RadioCard from '$lib/holocene/radio-input/radio-card.svelte';
+  import RadioGroup from '$lib/holocene/radio-input/radio-group.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import {
+    actionPending,
+    clearConfirmationModalActionTimeout,
+    closeConfirmationModal,
+    confirmationModal,
+    serverError,
+    submitTriggerImmediatelySchedule,
+  } from '$lib/stores/schedules';
+  import type { OverlapPolicy } from '$lib/types/schedule';
+  import { getIdentity } from '$lib/utilities/core-context';
+
+  import { getOverlapPolicyContent } from '../constants';
+
+  interface Props {
+    scheduleId: string;
+    namespace: string;
+    scheduleOverlapPolicy: OverlapPolicy;
+  }
+
+  const overlapPolicyContent = getOverlapPolicyContent();
+  const identity = getIdentity();
+
+  let { scheduleId, namespace, scheduleOverlapPolicy }: Props = $props();
+
+  let selectedOverlapPolicy = writable<OverlapPolicy>('AllowAll');
+
+  $effect(() => {
+    return () => clearConfirmationModalActionTimeout('trigger');
+  });
+</script>
+
+<Modal
+  id="trigger-schedule-modal"
+  large
+  open={$confirmationModal === 'trigger'}
+  confirmType="primary"
+  confirmText={translate('schedules.trigger')}
+  cancelText={translate('common.cancel')}
+  loading={$actionPending}
+  error={$serverError}
+  on:confirmModal={() =>
+    submitTriggerImmediatelySchedule($selectedOverlapPolicy, {
+      identity,
+      scheduleId,
+      namespace,
+    })}
+  on:cancelModal={() => {
+    closeConfirmationModal('trigger');
+  }}
+>
+  <h3 slot="title">
+    {translate('schedules.trigger-modal-title')}
+  </h3>
+  <div slot="content">
+    <RadioGroup name="overlap-policy" group={selectedOverlapPolicy}>
+      {#each Object.entries(overlapPolicyContent) as [value, content] (value)}
+        <RadioCard
+          id="overlap-policy-{value}"
+          value={value as OverlapPolicy}
+          label={[
+            content.label,
+            value === scheduleOverlapPolicy &&
+              translate('schedules.overlap-schedule-policy-suffix'),
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          description={content.description}
+          labelContainerClass="border-transparent p-0"
+        />
+      {/each}
+    </RadioGroup>
+  </div>
+</Modal>