feat(app): tuck alert scheduling under advanced settings

packages/app/src/components/AlertScheduleFields.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import {
   Control,
   Controller,
@@ -9,11 +9,14 @@ import {
   useWatch,
 } from 'react-hook-form';
 import { NumberInput } from 'react-hook-form-mantine';
-import { Group, Text } from '@mantine/core';
+import { Anchor, Button, Group, Stack, Text, Tooltip } from '@mantine/core';
 import { DateTimePicker } from '@mantine/dates';
+import { IconHelpCircle, IconSettings } from '@tabler/icons-react';
 
 import { parseScheduleStartAtValue } from '@/utils/alerts';
 
+const DATE_TIME_INPUT_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+
 type AlertScheduleFieldsProps<T extends FieldValues> = {
   control: Control<T>;
   setValue: UseFormSetValue<T>;
@@ -39,6 +42,11 @@ export function AlertScheduleFields<T extends FieldValues>({
     name: scheduleStartAtName,
   }) as string | null | undefined;
   const hasScheduleStartAtAnchor = scheduleStartAtValue != null;
+  const hasAdvancedScheduleValues =
+    (scheduleOffsetMinutes ?? 0) > 0 || hasScheduleStartAtAnchor;
+  const [showAdvancedSettings, setShowAdvancedSettings] = useState(
+    hasAdvancedScheduleValues,
+  );
 
   useEffect(() => {
     const normalizedOffset = scheduleOffsetMinutes ?? 0;
@@ -62,61 +70,114 @@ export function AlertScheduleFields<T extends FieldValues>({
   ]);
 
   return (
-    <>
-      {showScheduleOffsetInput && (
-        <>
-          <Group gap="xs" mt="xs">
-            <Text size="sm" opacity={0.7}>
-              Start offset (min)
-            </Text>
-            <NumberInput
-              min={0}
-              max={maxScheduleOffsetMinutes}
-              step={1}
-              size="xs"
-              w={100}
-              control={control}
-              name={scheduleOffsetName}
-              disabled={hasScheduleStartAtAnchor}
-            />
-            <Text size="sm" opacity={0.7}>
-              {offsetWindowLabel}
-            </Text>
+    <Stack gap="xs" mt="xs">
+      {!showAdvancedSettings ? (
+        <Anchor
+          underline="always"
+          size="xs"
+          onClick={() => setShowAdvancedSettings(true)}
+          data-testid="alert-advanced-settings-toggle"
+        >
+          <Group gap="xs">
+            <IconSettings size={14} />
+            Advanced Settings
           </Group>
-          {hasScheduleStartAtAnchor && (
-            <Text size="xs" opacity={0.6} mt={4}>
-              Start offset is ignored while an anchor start time is set.
-            </Text>
-          )}
-        </>
+        </Anchor>
+      ) : (
+        <Button
+          size="xs"
+          variant="subtle"
+          w="fit-content"
+          onClick={() => setShowAdvancedSettings(false)}
+          data-testid="alert-advanced-settings-toggle"
+        >
+          Hide Advanced Settings
+        </Button>
       )}
-      <Group gap="xs" mt="xs" align="start">
-        <Text size="sm" opacity={0.7} mt={6}>
-          Anchor start time
-        </Text>
-        <Controller
-          control={control}
-          name={scheduleStartAtName}
-          render={({ field, fieldState: { error } }) => (
-            <DateTimePicker
-              size="xs"
-              w={260}
-              placeholder="Pick date and time"
-              clearable
-              dropdownType="popover"
-              popoverProps={{ withinPortal: true, zIndex: 10050 }}
-              value={parseScheduleStartAtValue(
-                field.value as string | null | undefined,
+      {showAdvancedSettings && (
+        <Stack gap="sm" data-testid="alert-advanced-settings-panel">
+          {showScheduleOffsetInput && (
+            <Stack gap={4}>
+              <Group gap="xs">
+                <Text size="sm" opacity={0.7}>
+                  Start offset (min)
+                </Text>
+                <Tooltip
+                  label="Shifts each alert window forward by a fixed number of minutes inside the selected interval. For example, a 15 minute alert with offset 5 runs on windows starting at :05, :20, :35, and :50."
+                  multiline
+                  maw={360}
+                >
+                  <IconHelpCircle size={16} />
+                </Tooltip>
+              </Group>
+              <Text size="xs" opacity={0.6}>
+                Use this to align recurring windows to a fixed offset{' '}
+                {offsetWindowLabel}.
+              </Text>
+              <Group gap="xs">
+                <NumberInput
+                  min={0}
+                  max={maxScheduleOffsetMinutes}
+                  step={1}
+                  size="xs"
+                  w={100}
+                  control={control}
+                  name={scheduleOffsetName}
+                  disabled={hasScheduleStartAtAnchor}
+                />
+                <Text size="sm" opacity={0.7}>
+                  {offsetWindowLabel}
+                </Text>
+              </Group>
+              {hasScheduleStartAtAnchor && (
+                <Text size="xs" opacity={0.6}>
+                  Start offset is ignored while an anchor start time is set.
+                </Text>
               )}
-              onChange={value => field.onChange(value?.toISOString() ?? null)}
-              error={error?.message}
-            />
+            </Stack>
           )}
-        />
-        <Text size="xs" opacity={0.6} mt={6}>
-          Displayed in local time, stored as UTC
-        </Text>
-      </Group>
-    </>
+          <Stack gap={4}>
+            <Group gap="xs">
+              <Text size="sm" opacity={0.7}>
+                Anchor start time
+              </Text>
+              <Tooltip
+                label="Anchors the recurring alert schedule to an exact date and time. Future checks repeat on the alert interval from this anchor, which helps match external systems with fixed schedules."
+                multiline
+                maw={360}
+              >
+                <IconHelpCircle size={16} />
+              </Tooltip>
+            </Group>
+            <Text size="xs" opacity={0.6}>
+              Use an exact start time to repeat isolated windows on the selected
+              interval. Displayed in local time, stored as UTC.
+            </Text>
+            <Controller
+              control={control}
+              name={scheduleStartAtName}
+              render={({ field, fieldState: { error } }) => (
+                <DateTimePicker
+                  size="xs"
+                  w={260}
+                  placeholder={DATE_TIME_INPUT_FORMAT}
+                  valueFormat={DATE_TIME_INPUT_FORMAT}
+                  clearable
+                  dropdownType="popover"
+                  popoverProps={{ withinPortal: true, zIndex: 10050 }}
+                  value={parseScheduleStartAtValue(
+                    field.value as string | null | undefined,
+                  )}
+                  onChange={value =>
+                    field.onChange(value?.toISOString() ?? null)
+                  }
+                  error={error?.message}
+                />
+              )}
+            />
+          </Stack>
+        </Stack>
+      )}
+    </Stack>
   );
 }

packages/app/src/components/__tests__/DBEditTimeChartForm.test.tsx

@@ -473,4 +473,24 @@ describe('DBEditTimeChartForm - Add/delete alerts for display type Number', () =
     // Verify that onSave was not called
     expect(onSave).not.toHaveBeenCalled();
   });
+
+  it('shows alert scheduling fields inside advanced settings', async () => {
+    renderComponent();
+
+    await userEvent.click(screen.getByTestId('alert-button'));
+
+    expect(
+      screen.queryByTestId('alert-advanced-settings-panel'),
+    ).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByTestId('alert-advanced-settings-toggle'));
+
+    expect(
+      screen.getByTestId('alert-advanced-settings-panel'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Anchor start time')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('alert-advanced-settings-toggle'),
+    ).toHaveTextContent('Hide Advanced Settings');
+  });
 });