-
Notifications
You must be signed in to change notification settings - Fork 365
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: [M3-6492, M3-6315] - React Query - Linode Detail - Backups (#…
…9079) - React Query for Linode Backups 🚀 - Modernizes the Linode Backups section of the Linodes Details page - Breaks up Backup related code into more components with more understandable names - Adds `available` to the LinodeBackup type because it was missing - Resolves Sentry errors caused by this section of the app (M3-6315) - Makes some minor UI and UX improvements 🎨 --------- Co-authored-by: Banks Nussman <banks@nussman.us>
- Loading branch information
1 parent
2e53946
commit 741a11d
Showing
26 changed files
with
1,148 additions
and
1,232 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
74 changes: 74 additions & 0 deletions
74
packages/manager/src/features/linodes/LinodesDetail/LinodeBackup/CancelBackupsDialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import * as React from 'react'; | ||
| import { useSnackbar } from 'notistack'; | ||
| import { resetEventsPolling } from 'src/eventsPolling'; | ||
| import { useLinodeBackupsCancelMutation } from 'src/queries/linodes/backups'; | ||
| import { sendBackupsDisabledEvent } from 'src/utilities/ga'; | ||
| import Typography from 'src/components/core/Typography'; | ||
| import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; | ||
| import ActionsPanel from 'src/components/ActionsPanel/ActionsPanel'; | ||
| import Button from 'src/components/Button/Button'; | ||
|
|
||
| interface Props { | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| linodeId: number; | ||
| } | ||
|
|
||
| export const CancelBackupsDialog = (props: Props) => { | ||
| const { isOpen, onClose, linodeId } = props; | ||
| const { enqueueSnackbar } = useSnackbar(); | ||
|
|
||
| const { | ||
| mutateAsync: cancelBackups, | ||
| error, | ||
| isLoading, | ||
| } = useLinodeBackupsCancelMutation(linodeId); | ||
|
|
||
| const onCancelBackups = async () => { | ||
| await cancelBackups(); | ||
| enqueueSnackbar('Backups are being canceled for this Linode', { | ||
| variant: 'info', | ||
| }); | ||
| onClose(); | ||
| resetEventsPolling(); | ||
| sendBackupsDisabledEvent(); | ||
| }; | ||
|
|
||
| return ( | ||
| <ConfirmationDialog | ||
| open={isOpen} | ||
| onClose={onClose} | ||
| title="Confirm Cancellation" | ||
| error={error?.[0].reason} | ||
| actions={ | ||
| <ActionsPanel style={{ padding: 0 }}> | ||
| <Button | ||
| buttonType="secondary" | ||
| onClick={onClose} | ||
| data-qa-cancel-cancel | ||
| > | ||
| Close | ||
| </Button> | ||
| <Button | ||
| buttonType="primary" | ||
| onClick={onCancelBackups} | ||
| loading={isLoading} | ||
| data-qa-confirm-cancel | ||
| > | ||
| Cancel Backups | ||
| </Button> | ||
| </ActionsPanel> | ||
| } | ||
| > | ||
| <Typography> | ||
| Canceling backups associated with this Linode will delete all existing | ||
| backups. Are you sure? | ||
| </Typography> | ||
| <Typography style={{ marginTop: 12 }}> | ||
| <strong>Note: </strong> | ||
| Once backups for this Linode have been canceled, you cannot re-enable | ||
| them for 24 hours. | ||
| </Typography> | ||
| </ConfirmationDialog> | ||
| ); | ||
| }; |
50 changes: 50 additions & 0 deletions
50
packages/manager/src/features/linodes/LinodesDetail/LinodeBackup/CaptureSnapshot.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import * as React from 'react'; | ||
| import { renderWithTheme } from 'src/utilities/testHelpers'; | ||
| import { rest, server } from 'src/mocks/testServer'; | ||
| import { linodeFactory } from 'src/factories/linodes'; | ||
| import { CaptureSnapshot } from './CaptureSnapshot'; | ||
| import userEvent from '@testing-library/user-event'; | ||
|
|
||
| describe('CaptureSnapshot', () => { | ||
| it('renders heading and copy', async () => { | ||
| server.use( | ||
| rest.get('*/linode/instances/1', (req, res, ctx) => { | ||
| return res( | ||
| ctx.json(linodeFactory.build({ id: 1, backups: { enabled: true } })) | ||
| ); | ||
| }) | ||
| ); | ||
|
|
||
| const { getByText } = renderWithTheme( | ||
| <CaptureSnapshot linodeId={1} isReadOnly={false} /> | ||
| ); | ||
|
|
||
| getByText('Manual Snapshot'); | ||
| getByText( | ||
| /You can make a manual backup of your Linode by taking a snapshot./ | ||
| ); | ||
| }); | ||
| it('a confirmation dialog should open when you attempt to take a snapshot', async () => { | ||
| server.use( | ||
| rest.get('*/linode/instances/1', (req, res, ctx) => { | ||
| return res( | ||
| ctx.json(linodeFactory.build({ id: 1, backups: { enabled: true } })) | ||
| ); | ||
| }) | ||
| ); | ||
|
|
||
| const { getByLabelText, getByText } = renderWithTheme( | ||
| <CaptureSnapshot linodeId={1} isReadOnly={false} /> | ||
| ); | ||
|
|
||
| userEvent.type(getByLabelText('Name Snapshot'), 'my-linode-snapshot'); | ||
|
|
||
| userEvent.click(getByText('Take Snapshot')); | ||
|
|
||
| expect( | ||
| getByText( | ||
| /Taking a snapshot will back up your Linode in its current state, overriding your previous snapshot. Are you sure?/ | ||
| ) | ||
| ).toBeVisible(); | ||
| }); | ||
| }); |
Oops, something went wrong.