artin/sourcegraph
1
0
Fork 0
mirror of https://github.com/sourcegraph/sourcegraph.git synced 2026-02-06 18:51:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

code monitors: action cancel button doesn't undo changes (#32227)

Browse Source
This commit is contained in:
Juliana Peña 2022-03-09 13:23:38 -08:00 committed by GitHub
parent c1f40062f0
commit 23ac4d1798
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 141 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/web/src/enterprise/code-monitoring/components/actions/ActionEditor.test.tsx
View File

@ -96,7 +96,7 @@ describe('ActionEditor', () => {
expect(getByTestId('enable-action-toggle-collapsed-email')).toBeChecked()
userEvent.click(getByTestId('enable-action-toggle-collapsed-email'))
sinon.assert.calledWithExactly(toggleActionEnabledSpy, false)
sinon.assert.calledWithExactly(toggleActionEnabledSpy, false, true)
})
test('toggle disable when expanded', () => {
@ -113,6 +113,6 @@ describe('ActionEditor', () => {
expect(getByTestId('enable-action-toggle-expanded-email')).not.toBeChecked()
userEvent.click(getByTestId('enable-action-toggle-expanded-email'))
sinon.assert.calledWithExactly(toggleActionEnabledSpy, true)
sinon.assert.calledWithExactly(toggleActionEnabledSpy, true, false)
})
})

6
client/web/src/enterprise/code-monitoring/components/actions/ActionEditor.tsx
View File

@ -16,7 +16,7 @@ export interface ActionEditorProps {
idName: string // Name used for generating IDs, including form control IDs and test IDs
actionEnabled: boolean
toggleActionEnabled: (enabled: boolean) => void
toggleActionEnabled: (enabled: boolean, saveImmediately: boolean) => void
canSubmit?: boolean
onSubmit: React.FormEventHandler
@ -94,7 +94,7 @@ export const ActionEditor: React.FunctionComponent<ActionEditorProps> = ({
<Toggle
title="Enabled"
value={actionEnabled}
onToggle={toggleActionEnabled}
onToggle={enabled => toggleActionEnabled(enabled, !expanded)}
className="mr-2"
aria-labelledby={`code-monitoring-${idName}-form-actions-enable-toggle`}
data-testid={`enable-action-toggle-expanded-${idName}`}
@ -172,7 +172,7 @@ export const ActionEditor: React.FunctionComponent<ActionEditorProps> = ({
<Toggle
title="Enabled"
value={actionEnabled}
onToggle={toggleActionEnabled}
onToggle={enabled => toggleActionEnabled(enabled, !expanded)}
className="mr-3"
data-testid={`enable-action-toggle-collapsed-${idName}`}
/>

31
client/web/src/enterprise/code-monitoring/components/actions/EmailAction.test.tsx
View File

@ -108,6 +108,37 @@ describe('EmailAction', () => {
})
})
test('open, edit, cancel, open again', () => {
const setActionSpy = sinon.spy()
const { getByTestId } = render(
<MockedTestProvider>
<EmailAction
{...props}
setAction={setActionSpy}
action={{
__typename: 'MonitorEmail',
enabled: true,
includeResults: false,
id: '1',
recipients: { nodes: [{ id: 'userID' }] },
}}
/>
</MockedTestProvider>
)
userEvent.click(getByTestId('form-action-toggle-email'))
expect(getByTestId('enable-action-toggle-expanded-email')).toBeChecked()
userEvent.click(getByTestId('enable-action-toggle-expanded-email'))
expect(getByTestId('enable-action-toggle-expanded-email')).not.toBeChecked()
userEvent.click(getByTestId('cancel-action-email'))
userEvent.click(getByTestId('form-action-toggle-email'))
expect(getByTestId('enable-action-toggle-expanded-email')).toBeChecked()
sinon.assert.notCalled(setActionSpy)
})
describe('Send test email', () => {
const mockedVars: SendTestEmailVariables = {
namespace: props.authenticatedUser.id,

29
client/web/src/enterprise/code-monitoring/components/actions/EmailAction.tsx
View File

@ -29,18 +29,14 @@ export const EmailAction: React.FunctionComponent<ActionProps> = ({
}) => {
const [emailNotificationEnabled, setEmailNotificationEnabled] = useState(action ? action.enabled : true)
const toggleEmailNotificationEnabled: (enabled: boolean) => void = useCallback(
enabled => {
const toggleEmailNotificationEnabled: (enabled: boolean, saveImmediately: boolean) => void = useCallback(
(enabled, saveImmediately) => {
setEmailNotificationEnabled(enabled)
setAction({
__typename: 'MonitorEmail',
id: action?.id ?? '',
recipients: { nodes: [{ id: authenticatedUser.id }] },
enabled,
includeResults: false,
})
if (action && saveImmediately) {
setAction({ ...action, enabled })
}
},
[action?.id, authenticatedUser.id, setAction]
[action, setAction]
)
const onSubmit: React.FormEventHandler = useCallback(
@ -53,14 +49,18 @@ export const EmailAction: React.FunctionComponent<ActionProps> = ({
__typename: 'MonitorEmail',
id: '',
recipients: { nodes: [{ id: authenticatedUser.id }] },
enabled: true,
enabled: emailNotificationEnabled,
includeResults: false,
})
}
},
[action, authenticatedUser.id, setAction]
[action, authenticatedUser.id, emailNotificationEnabled, setAction]
)
const onCancel: React.FormEventHandler = useCallback(() => {
setEmailNotificationEnabled(action ? action.enabled : true)
}, [action])
const onDelete: React.FormEventHandler = useCallback(() => {
setAction(undefined)
}, [setAction])
@ -76,7 +76,7 @@ export const EmailAction: React.FunctionComponent<ActionProps> = ({
namespace: authenticatedUser.id,
description: monitorName,
email: {
enabled: true,
enabled: emailNotificationEnabled,
includeResults: false,
priority: MonitorEmailPriority.NORMAL,
recipients: [authenticatedUser.id],
@ -84,7 +84,7 @@ export const EmailAction: React.FunctionComponent<ActionProps> = ({
},
},
}).catch(noop) // Ignore errors, they will be handled with the error state from useMutation
}, [authenticatedUser.id, monitorName, sendTestEmail])
}, [authenticatedUser.id, emailNotificationEnabled, monitorName, sendTestEmail])
const sendTestEmailButtonText = loading
? 'Sending email...'
@ -104,6 +104,7 @@ export const EmailAction: React.FunctionComponent<ActionProps> = ({
actionEnabled={emailNotificationEnabled}
toggleActionEnabled={toggleEmailNotificationEnabled}
onSubmit={onSubmit}
onCancel={onCancel}
canDelete={!!action}
onDelete={onDelete}
_testStartOpen={_testStartOpen}

35
client/web/src/enterprise/code-monitoring/components/actions/SlackWebhookAction.test.tsx
View File

@ -154,6 +154,41 @@ describe('SlackWebhookAction', () => {
})
})
test('open, edit, cancel, open again', () => {
const setActionSpy = sinon.spy()
const { getByTestId } = render(
<MockedTestProvider>
<SlackWebhookAction
{...props}
action={{
__typename: 'MonitorSlackWebhook',
enabled: true,
includeResults: false,
id: '5',
url: 'https://example.com',
}}
setAction={setActionSpy}
/>
</MockedTestProvider>
)
userEvent.click(getByTestId('form-action-toggle-slack-webhook'))
expect(getByTestId('enable-action-toggle-expanded-slack-webhook')).toBeChecked()
userEvent.click(getByTestId('enable-action-toggle-expanded-slack-webhook'))
expect(getByTestId('enable-action-toggle-expanded-slack-webhook')).not.toBeChecked()
userEvent.type(getByTestId('slack-webhook-url'), 'https://example2.com')
userEvent.click(getByTestId('cancel-action-slack-webhook'))
userEvent.click(getByTestId('form-action-toggle-slack-webhook'))
expect(getByTestId('slack-webhook-url')).toHaveValue('https://example.com')
expect(getByTestId('enable-action-toggle-expanded-slack-webhook')).toBeChecked()
sinon.assert.notCalled(setActionSpy)
})
describe('Send test message', () => {
const mockAction: MonitorAction = {
__typename: 'MonitorSlackWebhook',

18
client/web/src/enterprise/code-monitoring/components/actions/SlackWebhookAction.tsx
View File

@ -29,11 +29,10 @@ export const SlackWebhookAction: React.FunctionComponent<ActionProps> = ({
}) => {
const [webhookEnabled, setWebhookEnabled] = useState(action ? action.enabled : true)
const toggleWebhookEnabled: (enabled: boolean) => void = useCallback(
enabled => {
const toggleWebhookEnabled: (enabled: boolean, saveImmediately: boolean) => void = useCallback(
(enabled, saveImmediately) => {
setWebhookEnabled(enabled)
if (action) {
if (action && saveImmediately) {
setAction({ ...action, enabled })
}
},
@ -50,13 +49,18 @@ export const SlackWebhookAction: React.FunctionComponent<ActionProps> = ({
__typename: 'MonitorSlackWebhook',
id: action ? action.id : '',
url,
enabled: webhookEnabled,
enabled: true,
includeResults: false,
})
},
[action, setAction, url, webhookEnabled]
[action, setAction, url]
)
const onCancel: React.FormEventHandler = useCallback(() => {
setWebhookEnabled(action ? action.enabled : true)
setUrl(action && action.__typename === 'MonitorSlackWebhook' ? action.url : '')
}, [action])
const onDelete: React.FormEventHandler = useCallback(() => {
setAction(undefined)
}, [setAction])
@ -100,7 +104,7 @@ export const SlackWebhookAction: React.FunctionComponent<ActionProps> = ({
toggleActionEnabled={toggleWebhookEnabled}
canSubmit={urlIsValid}
onSubmit={onSubmit}
onCancel={() => {}}
onCancel={onCancel}
canDelete={!!action}
onDelete={onDelete}
_testStartOpen={_testStartOpen}

35
client/web/src/enterprise/code-monitoring/components/actions/WebhookAction.test.tsx
View File

@ -152,6 +152,41 @@ describe('WebhookAction', () => {
})
})
test('open, edit, cancel, open again', () => {
const setActionSpy = sinon.spy()
const { getByTestId } = render(
<MockedTestProvider>
<WebhookAction
{...props}
action={{
__typename: 'MonitorWebhook',
enabled: true,
includeResults: false,
id: '5',
url: 'https://example.com',
}}
setAction={setActionSpy}
/>
</MockedTestProvider>
)
userEvent.click(getByTestId('form-action-toggle-webhook'))
expect(getByTestId('enable-action-toggle-expanded-webhook')).toBeChecked()
userEvent.click(getByTestId('enable-action-toggle-expanded-webhook'))
expect(getByTestId('enable-action-toggle-expanded-webhook')).not.toBeChecked()
userEvent.type(getByTestId('webhook-url'), 'https://example2.com')
userEvent.click(getByTestId('cancel-action-webhook'))
userEvent.click(getByTestId('form-action-toggle-webhook'))
expect(getByTestId('webhook-url')).toHaveValue('https://example.com')
expect(getByTestId('enable-action-toggle-expanded-webhook')).toBeChecked()
sinon.assert.notCalled(setActionSpy)
})
describe('Send test message', () => {
const mockAction: MonitorAction = {
__typename: 'MonitorWebhook',

14
client/web/src/enterprise/code-monitoring/components/actions/WebhookAction.tsx
View File

@ -29,11 +29,10 @@ export const WebhookAction: React.FunctionComponent<ActionProps> = ({
}) => {
const [webhookEnabled, setWebhookEnabled] = useState(action ? action.enabled : true)
const toggleWebhookEnabled: (enabled: boolean) => void = useCallback(
enabled => {
const toggleWebhookEnabled: (enabled: boolean, saveImmediately: boolean) => void = useCallback(
(enabled, saveImmediately) => {
setWebhookEnabled(enabled)
if (action) {
if (action && saveImmediately) {
setAction({ ...action, enabled })
}
},
@ -57,6 +56,11 @@ export const WebhookAction: React.FunctionComponent<ActionProps> = ({
[action, setAction, url, webhookEnabled]
)
const onCancel: React.FormEventHandler = useCallback(() => {
setWebhookEnabled(action ? action.enabled : true)
setUrl(action && action.__typename === 'MonitorWebhook' ? action.url : '')
}, [action])
const onDelete: React.FormEventHandler = useCallback(() => {
setAction(undefined)
}, [setAction])
@ -99,7 +103,7 @@ export const WebhookAction: React.FunctionComponent<ActionProps> = ({
toggleActionEnabled={toggleWebhookEnabled}
canSubmit={!!urlIsValid}
onSubmit={onSubmit}
onCancel={() => {}}
onCancel={onCancel}
canDelete={!!action}
onDelete={onDelete}
_testStartOpen={_testStartOpen}