-
Notifications
You must be signed in to change notification settings - Fork 42
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(operators): Add Migrate Organization Tool (#6748)
* feat(operators): Add Migrate Organization Tool * fix: Update SHA * fix: Code review feedback * fix: pocket lint * fix: Use correct label component
- Loading branch information
1 parent
99db872
commit 7cc762b
Showing
11 changed files
with
481 additions
and
5 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import { | ||
| AlignItems, | ||
| Button, | ||
| ButtonType, | ||
| ComponentColor, | ||
| ComponentSize, | ||
| ComponentStatus, | ||
| FlexBox, | ||
| FlexDirection, | ||
| Form, | ||
| Input, | ||
| } from '@influxdata/clockface' | ||
| import React, {ChangeEvent, FC, useContext, useState} from 'react' | ||
| import {OverlayContext} from 'src/operator/context/overlay' | ||
| import {OperatorAccount, getOperatorAccount} from 'src/client/unityRoutes' | ||
| import {MigrateOrgOverlay} from './MigrateOrgOverlay' | ||
| import {useDispatch} from 'react-redux' | ||
| import {notify} from 'src/shared/actions/notifications' | ||
| import {getAccountError} from 'src/shared/copy/notifications' | ||
|
|
||
| export const MigrateOrg: FC = () => { | ||
| const {organization, setMigrateOverlayVisible} = useContext(OverlayContext) | ||
| const [toAccountId, setToAccountId] = useState('') | ||
| const [toAccount, setToAccount] = useState<OperatorAccount>(null) | ||
| const dispatch = useDispatch() | ||
|
|
||
| const changeToAccountId = (event: ChangeEvent<HTMLInputElement>) => { | ||
| setToAccountId(event.target.value) | ||
| } | ||
|
|
||
| const submit = async () => { | ||
| if (toAccountId === '') { | ||
| return | ||
| } | ||
|
|
||
| try { | ||
| const resp = await getOperatorAccount({accountId: toAccountId}) | ||
| if (resp.status !== 200) { | ||
| dispatch(notify(getAccountError(toAccountId))) | ||
| return | ||
| } | ||
| setToAccount(resp.data) | ||
| setMigrateOverlayVisible(true) | ||
| } catch (error) { | ||
| console.error(error) | ||
| } | ||
| } | ||
|
|
||
| const canSubmit = toAccountId !== '' | ||
|
|
||
| return organization?.state !== 'provisioned' ? ( | ||
| <></> | ||
| ) : ( | ||
| <> | ||
| <MigrateOrgOverlay toAccount={toAccount} /> | ||
| <h4 data-testid="migrate-org--title">Migrate Org to another Account</h4> | ||
| <Form onSubmit={submit}> | ||
| <FlexBox | ||
| direction={FlexDirection.Row} | ||
| alignItems={AlignItems.FlexStart} | ||
| margin={ComponentSize.Large} | ||
| > | ||
| <Input | ||
| placeholder="Account ID to migrate resources to" | ||
| inputStyle={{width: '400px'}} | ||
| style={{width: 'auto'}} | ||
| value={toAccountId} | ||
| onChange={changeToAccountId} | ||
| testID="accounts-migrate--account-id" | ||
| /> | ||
| <Button | ||
| text="migrate" | ||
| color={ComponentColor.Primary} | ||
| type={ButtonType.Submit} | ||
| testID="accounts-migrate--button" | ||
| className="accounts-migrate--button" | ||
| active={canSubmit} | ||
| status={ | ||
| canSubmit ? ComponentStatus.Default : ComponentStatus.Disabled | ||
| } | ||
| /> | ||
| </FlexBox> | ||
| </Form> | ||
| </> | ||
| ) | ||
| } |
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,92 @@ | ||
| import React, {FC, useContext} from 'react' | ||
| import { | ||
| Alert, | ||
| ButtonBase, | ||
| ButtonShape, | ||
| ComponentColor, | ||
| ComponentStatus, | ||
| Gradients, | ||
| IconFont, | ||
| Overlay, | ||
| RemoteDataState, | ||
| } from '@influxdata/clockface' | ||
| import {OperatorAccount} from 'src/client/unityRoutes' | ||
| import {OverlayContext} from './context/overlay' | ||
|
|
||
| interface Props { | ||
| toAccount: OperatorAccount | ||
| } | ||
|
|
||
| const MigrateOrgOverlay: FC<Props> = ({toAccount}) => { | ||
| const { | ||
| handleMigrateOrg, | ||
| migrateOverlayVisible, | ||
| migrateStatus, | ||
| organization, | ||
| setMigrateOverlayVisible, | ||
| } = useContext(OverlayContext) | ||
|
|
||
| const migrateOrg = () => { | ||
| try { | ||
| handleMigrateOrg(organization.idpeId, toAccount.id.toString()) | ||
| } catch (e) { | ||
| setMigrateOverlayVisible(false) | ||
| } | ||
| } | ||
|
|
||
| const message = ` | ||
| This action will migrate the following organization and users | ||
| from ${organization.account.id ?? 'N/A'} to | ||
| ${toAccount?.name} (${toAccount?.id})` | ||
|
|
||
| const active = migrateStatus === RemoteDataState.NotStarted | ||
|
|
||
| return ( | ||
| <Overlay | ||
| visible={migrateOverlayVisible} | ||
| renderMaskElement={() => ( | ||
| <Overlay.Mask gradient={Gradients.DangerDark} style={{opacity: 0.5}} /> | ||
| )} | ||
| testID="migrate-overlay" | ||
| transitionDuration={0} | ||
| > | ||
| <Overlay.Container maxWidth={600}> | ||
| <Overlay.Header | ||
| title="Migrate Organization" | ||
| style={{color: '#FFFFFF'}} | ||
| onDismiss={() => setMigrateOverlayVisible(false)} | ||
| /> | ||
| <Overlay.Body> | ||
| <Alert color={ComponentColor.Danger} icon={IconFont.AlertTriangle}> | ||
| This action cannot be undone | ||
| </Alert> | ||
| <h4 style={{color: '#FFFFFF'}}> | ||
| <strong>Warning</strong> | ||
| </h4> | ||
| {message} | ||
| <br /> | ||
| <strong>Organizations:</strong> | ||
| <ul> | ||
| <li> | ||
| {organization.name ?? 'N/A'} ({organization.idpeId}) | ||
| </li> | ||
| </ul> | ||
| </Overlay.Body> | ||
| <Overlay.Footer> | ||
| <ButtonBase | ||
| color={ComponentColor.Primary} | ||
| shape={ButtonShape.Default} | ||
| onClick={migrateOrg} | ||
| testID="migrate-organization--confirmation-button" | ||
| active={active} | ||
| status={active ? ComponentStatus.Default : ComponentStatus.Disabled} | ||
| > | ||
| I understand, migrate the organization | ||
| </ButtonBase> | ||
| </Overlay.Footer> | ||
| </Overlay.Container> | ||
| </Overlay> | ||
| ) | ||
| } | ||
|
|
||
| export {MigrateOrgOverlay} |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import { | ||
| AlignItems, | ||
| Button, | ||
| ButtonType, | ||
| ComponentColor, | ||
| ComponentSize, | ||
| ComponentStatus, | ||
| FlexBox, | ||
| FlexDirection, | ||
| Form, | ||
| Input, | ||
| } from '@influxdata/clockface' | ||
| import React, {ChangeEvent, FC, useContext, useState} from 'react' | ||
| import {AccountContext} from '../context/account' | ||
| import {MigrateOrgsOverlay} from './MigrateOrgsOverlay' | ||
| import {OperatorAccount, getOperatorAccount} from 'src/client/unityRoutes' | ||
| import {useDispatch} from 'react-redux' | ||
| import {notify} from 'src/shared/actions/notifications' | ||
| import {getAccountError} from 'src/shared/copy/notifications' | ||
|
|
||
| export const MigrateOrgsTool: FC = () => { | ||
| const {account, setMigrateOverlayVisible} = useContext(AccountContext) | ||
| const [toAccountId, setToAccountId] = useState('') | ||
| const [toAccount, setToAccount] = useState<OperatorAccount>(null) | ||
| const dispatch = useDispatch() | ||
|
|
||
| const changeToAccountId = (event: ChangeEvent<HTMLInputElement>) => { | ||
| setToAccountId(event.target.value) | ||
| } | ||
|
|
||
| const submit = async () => { | ||
| if (toAccountId === '') { | ||
| return | ||
| } | ||
|
|
||
| try { | ||
| const resp = await getOperatorAccount({accountId: toAccountId}) | ||
| if (resp.status !== 200) { | ||
| dispatch(notify(getAccountError(toAccountId))) | ||
| return | ||
| } | ||
| setToAccount(resp.data) | ||
| setMigrateOverlayVisible(true) | ||
| } catch (error) { | ||
| console.error(error) | ||
| } | ||
| } | ||
|
|
||
| const canSubmit = toAccountId !== '' | ||
|
|
||
| return account.type === 'cancelled' ? ( | ||
| <></> | ||
| ) : ( | ||
| <> | ||
| <MigrateOrgsOverlay toAccount={toAccount} /> | ||
| <h2 data-testid="migrate-resources--title"> | ||
| Migrate Organizations and Users | ||
| </h2> | ||
| <Form onSubmit={submit}> | ||
| <Form.Label | ||
| id="accounts-migrate--account-id-label" | ||
| label="Please enter an Account ID to migrate to:" | ||
| /> | ||
| <FlexBox | ||
| direction={FlexDirection.Row} | ||
| alignItems={AlignItems.FlexStart} | ||
| margin={ComponentSize.Large} | ||
| > | ||
| <Input | ||
| placeholder="Account ID to migrate resources to" | ||
| inputStyle={{width: '400px'}} | ||
| style={{width: 'auto'}} | ||
| value={toAccountId} | ||
| onChange={changeToAccountId} | ||
| testID="accounts-migrate--account-id" | ||
| /> | ||
| <Button | ||
| text="migrate" | ||
| color={ComponentColor.Primary} | ||
| type={ButtonType.Submit} | ||
| testID="accounts-migrate--button" | ||
| className="accounts-migrate--button" | ||
| active={canSubmit} | ||
| status={ | ||
| canSubmit ? ComponentStatus.Default : ComponentStatus.Disabled | ||
| } | ||
| /> | ||
| </FlexBox> | ||
| </Form> | ||
| </> | ||
| ) | ||
| } |
Oops, something went wrong.