feat(schedule-actions): wire actions popover on schedule page (#1427)

## Summary

Mounts the schedule-actions popover and confirmation modal on the
schedule page tab bar. Completes the stacked schedule-actions UI started
in #1419 and #1426.

Author: Assem-Uber

src/views/schedule-actions/__tests__/schedule-actions.test.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+
+import { HttpResponse } from 'msw';
+
+import { render, screen, userEvent, waitFor } from '@/test-utils/rtl';
+
+import { mockDescribeScheduleResponse } from '@/route-handlers/describe-schedule/__fixtures__/mock-describe-schedule-response';
+
+import { mockScheduleActionsConfig } from '../__fixtures__/schedule-actions-config';
+import ScheduleActions from '../schedule-actions';
+
+const mockScheduleParams = {
+  domain: 'mock-domain',
+  cluster: 'mock-cluster',
+  scheduleId: 'mock-schedule-id',
+};
+
+jest.mock('next/navigation', () => ({
+  ...jest.requireActual('next/navigation'),
+  useParams: () => mockScheduleParams,
+}));
+
+jest.mock('../schedule-actions-modal/schedule-actions-modal', () =>
+  jest.fn((props) => {
+    return props.action ? (
+      <div data-testid="actions-modal">Actions Modal</div>
+    ) : null;
+  })
+);
+
+jest.mock('../schedule-actions-menu/schedule-actions-menu', () =>
+  jest.fn((props) => {
+    const areAllActionsDisabled = props.actionsEnabledConfig
+      ? Object.entries(props.actionsEnabledConfig).every(
+          ([_, value]) => value !== 'ENABLED'
+        )
+      : true;
+
+    return (
+      <div
+        onClick={() => props.onActionSelect(mockScheduleActionsConfig[0])}
+        data-testid="actions-menu"
+      >
+        Actions Menu{areAllActionsDisabled ? ' (disabled)' : ''}
+      </div>
+    );
+  })
+);
+
+describe(ScheduleActions.name, () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the button with the correct text', async () => {
+    setup({});
+
+    const actionsButton = await screen.findByRole('button');
+    expect(actionsButton).toHaveAttribute(
+      'aria-label',
+      expect.stringContaining('loading')
+    );
+
+    await waitFor(() => {
+      expect(actionsButton).not.toHaveAttribute(
+        'aria-label',
+        expect.stringContaining('loading')
+      );
+    });
+
+    expect(actionsButton).toHaveTextContent('Schedule Actions');
+  });
+
+  it('renders the menu when the button is clicked', async () => {
+    const { user } = setup({});
+
+    const actionsButton = await screen.findByRole('button');
+    await user.click(actionsButton);
+
+    expect(await screen.findByTestId('actions-menu')).toBeInTheDocument();
+  });
+
+  it('renders the button with disabled configs if config fetching fails', async () => {
+    const { user } = setup({ isConfigError: true });
+
+    const actionsButton = await screen.findByRole('button');
+    await user.click(actionsButton);
+
+    const actionsMenu = await screen.findByTestId('actions-menu');
+    expect(actionsMenu).toBeInTheDocument();
+    expect(actionsMenu).toHaveTextContent('Actions Menu (disabled)');
+  });
+
+  it('shows the modal when a menu option is clicked', async () => {
+    const { user } = setup({});
+
+    const actionsButton = await screen.findByRole('button');
+    await user.click(actionsButton);
+    await user.click(await screen.findByTestId('actions-menu'));
+
+    expect(await screen.findByTestId('actions-modal')).toBeInTheDocument();
+  });
+
+  it('renders nothing if describeSchedule fails', async () => {
+    setup({ isError: true });
+
+    await waitFor(() => {
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+  });
+});
+
+function setup({
+  isError = false,
+  isConfigError = false,
+}: {
+  isError?: boolean;
+  isConfigError?: boolean;
+}) {
+  const user = userEvent.setup();
+
+  render(<ScheduleActions />, {
+    endpointsMocks: [
+      {
+        path: '/api/domains/:domain/:cluster/schedules/:scheduleId',
+        httpMethod: 'GET',
+        mockOnce: false,
+        httpResolver: () => {
+          if (isError) {
+            return HttpResponse.json(
+              { message: 'Schedule not found' },
+              { status: 404 }
+            );
+          }
+
+          return HttpResponse.json(mockDescribeScheduleResponse);
+        },
+      },
+      {
+        path: '/api/config',
+        httpMethod: 'GET',
+        mockOnce: false,
+        httpResolver: () => {
+          if (isConfigError) {
+            return HttpResponse.json(
+              { message: 'Failed to fetch config' },
+              { status: 500 }
+            );
+          }
+
+          return HttpResponse.json(
+            {
+              pause: 'ENABLED',
+              resume: 'ENABLED',
+            },
+            { status: 200 }
+          );
+        },
+      },
+    ],
+  });
+
+  return { user };
+}

src/views/schedule-actions/config/schedule-actions.config.ts

@@ -61,6 +61,9 @@ const resumeScheduleActionConfig: ScheduleAction<UnpauseScheduleResponse> = {
 const scheduleActionsConfig = [
   pauseScheduleActionConfig,
   resumeScheduleActionConfig,
-] as const satisfies ScheduleAction<any, any, any>[];
+] as const;
+
+/** Discriminated union of configured actions; use at menu/selection boundaries. */
+export type SelectableScheduleAction = (typeof scheduleActionsConfig)[number];
 
 export default scheduleActionsConfig;

src/views/schedule-actions/schedule-actions-menu/schedule-actions-menu.types.ts

@@ -1,10 +1,10 @@
 import { type ScheduleActionsEnabledConfig } from '@/config/dynamic/resolvers/schedule-actions-enabled.types';
 import { type DescribeScheduleResponse } from '@/route-handlers/describe-schedule/describe-schedule.types';
 
-import { type ScheduleAction } from '../schedule-actions.types';
+import { type SelectableScheduleAction } from '../config/schedule-actions.config';
 
 export type Props = {
   schedule: DescribeScheduleResponse | undefined;
   actionsEnabledConfig?: ScheduleActionsEnabledConfig;
-  onActionSelect: (action: ScheduleAction<any, any, any>) => void;
+  onActionSelect: (action: SelectableScheduleAction) => void;
 };

src/views/schedule-actions/schedule-actions.styles.ts

@@ -0,0 +1,13 @@
+import { type Theme } from 'baseui';
+import { type PopoverOverrides } from 'baseui/popover';
+import { type StyleObject } from 'styletron-react';
+
+export const overrides = {
+  popover: {
+    Inner: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        backgroundColor: $theme.colors.backgroundPrimary,
+      }),
+    },
+  } satisfies PopoverOverrides,
+};

src/views/schedule-actions/schedule-actions.tsx

@@ -0,0 +1,85 @@
+'use client';
+import React, { useState } from 'react';
+
+import {
+  StatefulPopover,
+  PLACEMENT as POPOVER_PLACEMENT,
+} from 'baseui/popover';
+import pick from 'lodash/pick';
+import { useParams } from 'next/navigation';
+import { MdArrowDropDown } from 'react-icons/md';
+
+import Button from '@/components/button/button';
+import useConfigValue from '@/hooks/use-config-value/use-config-value';
+import { type SchedulePageLayoutParams } from '@/views/schedule-page/schedule-page.types';
+import useDescribeSchedule from '@/views/shared/hooks/use-describe-schedule/use-describe-schedule';
+
+import { type SelectableScheduleAction } from './config/schedule-actions.config';
+import ScheduleActionsMenu from './schedule-actions-menu/schedule-actions-menu';
+import ScheduleActionsModal from './schedule-actions-modal/schedule-actions-modal';
+import { overrides } from './schedule-actions.styles';
+import { type ErasedScheduleAction } from './schedule-actions.types';
+
+export default function ScheduleActions() {
+  const params = useParams<SchedulePageLayoutParams>();
+  const scheduleDetailsParams = pick(params, 'cluster', 'scheduleId', 'domain');
+
+  const {
+    data: schedule,
+    isLoading: isScheduleLoading,
+    error: scheduleError,
+  } = useDescribeSchedule({
+    ...scheduleDetailsParams,
+  });
+
+  const { data: actionsEnabledConfig, isLoading: isActionsEnabledLoading } =
+    useConfigValue('SCHEDULE_ACTIONS_ENABLED', {
+      domain: params.domain,
+      cluster: params.cluster,
+    });
+
+  const [selectedAction, setSelectedAction] = useState<
+    SelectableScheduleAction | undefined
+  >(undefined);
+
+  if (scheduleError) {
+    return null;
+  }
+
+  return (
+    <>
+      <StatefulPopover
+        placement={POPOVER_PLACEMENT.bottomRight}
+        overrides={overrides.popover}
+        content={({ close }) => (
+          <ScheduleActionsMenu
+            schedule={schedule}
+            actionsEnabledConfig={actionsEnabledConfig}
+            onActionSelect={(action) => {
+              setSelectedAction(action);
+              close();
+            }}
+          />
+        )}
+        returnFocus
+        autoFocus
+      >
+        <Button
+          size="compact"
+          kind="secondary"
+          endEnhancer={<MdArrowDropDown size={20} />}
+          loadingIndicatorType="skeleton"
+          isLoading={isScheduleLoading || isActionsEnabledLoading}
+        >
+          Schedule Actions
+        </Button>
+      </StatefulPopover>
+      <ScheduleActionsModal
+        {...scheduleDetailsParams}
+        schedule={schedule}
+        action={selectedAction as ErasedScheduleAction | undefined}
+        onClose={() => setSelectedAction(undefined)}
+      />
+    </>
+  );
+}

src/views/schedule-actions/schedule-actions.types.ts

@@ -112,3 +112,6 @@ export type ScheduleAction<
     router: AppRouterInstance;
   }) => void;
 };
+
+/** Erases per-action generics for the generic modal boundary. */
+export type ErasedScheduleAction = ScheduleAction<any, any, any>;

src/views/schedule-page/schedule-page-tabs/schedule-page-tabs.tsx

@@ -6,8 +6,10 @@ import Link from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
 import { MdChevronLeft } from 'react-icons/md';
 
+import ErrorBoundary from '@/components/error-boundary/error-boundary';
 import PageTabs from '@/components/page-tabs/page-tabs';
 import decodeUrlParams from '@/utils/decode-url-params';
+import ScheduleActions from '@/views/schedule-actions/schedule-actions';
 
 import schedulePageTabsConfig from '../config/schedule-page-tabs.config';
 
@@ -55,6 +57,11 @@ export default function SchedulePageTabs() {
             setSelectedTab={(newTab) => {
               router.push(encodeURIComponent(newTab.toString()));
             }}
+            endEnhancer={
+              <ErrorBoundary fallbackRender={() => null}>
+                <ScheduleActions />
+              </ErrorBoundary>
+            }
           />
         </styled.TabsSlot>
       </styled.TabsRow>