Skip to content

feat(aci): add edit monitors drawer and link monitor creation page #91761

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 16, 2025
Merged

feat(aci): add edit monitors drawer and link monitor creation page #91761

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8067ca9
feat(aci): add edit monitors drawer and link monitor creation page
ameliahsu May 15, 2025
c56114d
add drawerKey and update ariaLabel
ameliahsu May 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 37 additions & 3 deletions static/app/views/automations/components/automationForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,33 @@ import {flattie} from 'flattie';

import {Flex} from 'sentry/components/container/flex';
import {Button} from 'sentry/components/core/button';
import {LinkButton} from 'sentry/components/core/button/linkButton';
import SelectField from 'sentry/components/forms/fields/selectField';
import Form from 'sentry/components/forms/form';
import FormModel from 'sentry/components/forms/model';
import useDrawer from 'sentry/components/globalDrawer';
import {DrawerBody, DrawerHeader} from 'sentry/components/globalDrawer/components';
import {useDocumentTitle} from 'sentry/components/sentryDocumentTitle';
import {DebugForm} from 'sentry/components/workflowEngine/form/debug';
import {Card} from 'sentry/components/workflowEngine/ui/card';
import {IconAdd, IconEdit} from 'sentry/icons';
import {t} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import type {Detector} from 'sentry/types/workflowEngine/detectors';
import useOrganization from 'sentry/utils/useOrganization';
import AutomationBuilder from 'sentry/views/automations/components/automationBuilder';
import {
AutomationBuilderContext,
initialAutomationBuilderState,
useAutomationBuilderReducer,
} from 'sentry/views/automations/components/automationBuilderContext';
import ConnectedMonitorsList from 'sentry/views/automations/components/connectedMonitorsList';
import EditConnectedMonitors from 'sentry/views/automations/components/editConnectedMonitors';
import {
NEW_AUTOMATION_CONNECTED_IDS_KEY,
useConnectedIds,
} from 'sentry/views/automations/hooks/utils';
import {makeMonitorBasePathname} from 'sentry/views/detectors/pathnames';

const FREQUENCY_OPTIONS = [
{value: '5', label: t('5 minutes')},
Expand All @@ -39,6 +45,7 @@ const FREQUENCY_OPTIONS = [
];

export default function AutomationForm() {
const organization = useOrganization();
const title = useDocumentTitle();
const {state, actions} = useAutomationBuilderReducer();
const [model] = useState(() => new FormModel());
Expand All @@ -48,11 +55,31 @@ export default function AutomationForm() {
}, [title, model]);

const monitors: Detector[] = []; // TODO: Fetch monitors from API
const storageKey = NEW_AUTOMATION_CONNECTED_IDS_KEY; // TODO: use automation id for storage key when editing an existing automation
const {connectedIds, toggleConnected} = useConnectedIds({
storageKey: NEW_AUTOMATION_CONNECTED_IDS_KEY,
storageKey,
});
const connectedMonitors = monitors.filter(monitor => connectedIds.has(monitor.id));

const {openDrawer: openEditMonitorsDrawer, isDrawerOpen: isEditMonitorsDrawerOpen} =
useDrawer();

const showEditMonitorsDrawer = () => {
if (!isEditMonitorsDrawerOpen) {
openEditMonitorsDrawer(
() => (
<div>
<DrawerHeader />
<DrawerBody>
<EditConnectedMonitors storageKey={storageKey} />
</DrawerBody>
</div>
Comment on lines +71 to +76
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i'd pull this into its own component as soon as we need to add more things

),
{ariaLabel: 'Details'}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

non obvious but this needs a drawerKey for resizing

);
}
};

return (
<Form
hideFooter
Expand All @@ -69,8 +96,15 @@ export default function AutomationForm() {
toggleConnected={toggleConnected}
/>
<ButtonWrapper justify="space-between">
<Button icon={<IconAdd />}>{t('Create New Monitor')}</Button>
<Button icon={<IconEdit />}>{t('Edit Monitors')}</Button>
<LinkButton
icon={<IconAdd />}
to={`${makeMonitorBasePathname(organization.slug)}new/`}
>
{t('Create New Monitor')}
</LinkButton>
<Button icon={<IconEdit />} onClick={showEditMonitorsDrawer}>
{t('Edit Monitors')}
</Button>
</ButtonWrapper>
</Card>
<Card>
Expand Down
Loading