Create unified alert detail page

[linear]

https://www.figma.com/design/rdBPNzn7Klk6RG1LHUCE5B/Screen-Designs?node-id=18001-627030&t=ZctFJPux8gI2YgxE-0

[linear]

HIG-4748 Create unified alert detail page

[greptile-apps]

To create a unified alert detail page, follow these steps:

1. Create a new component: Create a new file UnifiedAlertPage.tsx in the /frontend/src/pages/Alerts directory.

2. Import necessary components and hooks:

import { Button } from '@components/Button';
import Select from '@components/Select/Select';
import { toast } from '@components/Toaster';
import { useCreateLogAlertMutation, useDeleteLogAlertMutation, useUpdateLogAlertMutation, useCreateErrorAlertMutation, useDeleteErrorAlertMutation, useUpdateErrorAlertMutation, useCreateSessionAlertMutation, useDeleteSessionAlertMutation, useUpdateSessionAlertMutation } from '@graph/hooks';
import { Box, Container, Form, Stack, Text } from '@highlight-run/ui/components';
import { useParams } from '@util/react-router/useParams';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import LoadingBox from '@/components/LoadingBox';
import { namedOperations } from '@/graph/generated/operations';
import { useSearchTime } from '@/hooks/useSearchTime';
import AlertTitleField from '@/pages/Alerts/components/AlertTitleField/AlertTitleField';
import AlertNotifyForm from '@/pages/Alerts/components/AlertNotifyForm/AlertNotifyForm';
import { DEFAULT_FREQUENCY } from '@/pages/Alerts/AlertConfigurationCard/AlertConfigurationConstants';
import { findAlert, getFrequencyOption } from '@/pages/Alerts/utils/AlertsUtils';
import * as styles from './styles.css';

3. Define the component:

const UnifiedAlertPage = () => {
  const { alert_id, alert_type } = useParams<{ alert_id: string, alert_type: string }>();
  const isCreate = alert_id === undefined;
  const createStr = isCreate ? 'create' : 'update';
  const [initialQuery, setInitialQuery] = useState('');
  const [formValues, setFormValues] = useState({
    name: '',
    belowThreshold: false,
    slackChannels: [],
    discordChannels: [],
    microsoftTeamsChannels: [],
    webhookDestinations: [],
    emails: [],
    threshold: undefined,
    frequency: Number(DEFAULT_FREQUENCY),
    threshold_window: Number(DEFAULT_FREQUENCY),
    loaded: false,
  });
  const navigate = useNavigate();

  useEffect(() => {
    // Fetch alert data based on alert_type and alert_id
    // Set initial form values
  }, [alert_id, alert_type]);

  const handleSave = () => {
    // Handle save logic based on alert_type
  };

  const handleDelete = () => {
    // Handle delete logic based on alert_type
  };

  return (
    <Box width="full" background="raised" p="8">
      <Box border="dividerWeak" borderRadius="6" width="full" shadow="medium" background="default" display="flex" flexDirection="column" height="full">
        {formValues.loaded ? (
          <>
            <Box display="flex" justifyContent="flex-end" alignItems="center" borderBottom="dividerWeak" px="8" py="6" cssClass={styles.header}>
              <Box display="flex" alignItems="center" gap="4">
                <Button kind="secondary" size="small" emphasis="low" onClick={() => navigate(-1)}>Cancel</Button>
                {!isCreate && <Button kind="danger" size="small" emphasis="low" onClick={handleDelete}>Delete Alert</Button>}
                <Button kind="primary" size="small" emphasis="high" onClick={handleSave}>{capitalize(createStr)} alert</Button>
              </Box>
            </Box>
            <Container display="flex" flexDirection="column" py="24" gap="40">
              <Form>
                <Stack gap="40">
                  <AlertTitleField />
                  {/* Add other form fields based on alert_type */}
                  <AlertNotifyForm />
                </Stack>
              </Form>
            </Container>
          </>
        ) : <LoadingBox />}
      </Box>
    </Box>
  );
};

export default UnifiedAlertPage;

4. Update the router: Modify AlertsRouter.tsx to include the new unified alert page route.

import UnifiedAlertPage from '@/pages/Alerts/UnifiedAlertPage';

// Add new routes
<Route path="unified/:alert_type/new" element={<UnifiedAlertPage />} />
<Route path="unified/:alert_type/:alert_id" element={<UnifiedAlertPage />} />

5. Handle form fields and mutations: Implement logic to handle form fields and mutations based on alert_type in UnifiedAlertPage.tsx.

References

/frontend/src/pages/Alerts/LogAlert/LogAlertPage.tsx
/frontend/src/pages/Alerts/ErrorAlert/ErrorAlertPage.tsx
/frontend/src/pages/Alerts/SessionAlert/SessionAlertPage.tsx
/frontend/src/pages/Alerts/AlertsRouter.tsx
/frontend/src/pages/Alerts
/frontend/src/pages/Alerts/components
/frontend/src/pages/Alerts/utils

Ask Greptile