E2C: Remove ModalController from MigrationTokenPage (#86709)

* Remove ModalController from MigrationTokenPage

* Dont show modal or toast for error response

* better
This commit is contained in:
Josh Hunt 2024-04-23 11:23:06 +01:00 committed by GitHub
parent c849b6beaa
commit 467d4231f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 47 additions and 44 deletions

View File

@ -6,6 +6,9 @@ import { generatedAPI } from './endpoints.gen';
export const cloudMigrationAPI = generatedAPI.enhanceEndpoints({
addTagTypes: ['cloud-migration-config', 'cloud-migration-run', 'cloud-migration-run-list'],
endpoints: {
// Cloud-side - create token
createCloudMigrationToken: suppressErrorsOnQuery,
// List Cloud Configs
getMigrationList: {
providesTags: ['cloud-migration-config'] /* should this be a -list? */,
@ -39,9 +42,7 @@ export const cloudMigrationAPI = generatedAPI.enhanceEndpoints({
invalidatesTags: ['cloud-migration-run-list'],
},
getDashboardByUid(endpoint) {
suppressErrorsOnQuery(endpoint);
},
getDashboardByUid: suppressErrorsOnQuery,
},
});

View File

@ -6,14 +6,15 @@ import { Trans, t } from 'app/core/internationalization';
import { TokenErrorAlert } from '../TokenErrorAlert';
interface Props {
isOpen: boolean;
hideModal: () => void;
migrationToken?: string;
}
export const MigrationTokenModal = ({ hideModal, migrationToken }: Props) => {
export const MigrationTokenModal = ({ isOpen, hideModal, migrationToken }: Props) => {
return (
<Modal
isOpen
isOpen={isOpen}
title={t('migrate-to-cloud.migration-token.modal-title', 'Migration token created')}
onDismiss={hideModal}
>

View File

@ -1,6 +1,6 @@
import React from 'react';
import React, { useCallback, useState } from 'react';
import { Box, Button, ModalsController, Text } from '@grafana/ui';
import { Box, Button, Text } from '@grafana/ui';
import { t, Trans } from 'app/core/internationalization';
import { useCreateCloudMigrationTokenMutation } from '../../api';
@ -11,52 +11,53 @@ import { MigrationTokenModal } from './MigrationTokenModal';
import { TokenStatus } from './TokenStatus';
export const MigrationTokenPane = () => {
const [showModal, setShowModal] = useState(false);
const isFetchingStatus = false; // TODO: No API for this yet
const [createToken, createTokenResponse] = useCreateCloudMigrationTokenMutation();
const [createTokenMutation, createTokenResponse] = useCreateCloudMigrationTokenMutation();
const hasToken = Boolean(createTokenResponse.data?.token);
const isLoading = isFetchingStatus || createTokenResponse.isLoading; /* || deleteTokenResponse.isLoading */
const handleGenerateToken = useCallback(async () => {
const resp = await createTokenMutation();
if (!('error' in resp)) {
setShowModal(true);
}
}, [createTokenMutation]);
return (
<ModalsController>
{({ showModal, hideModal }) => (
<Box display="flex" alignItems="flex-start" padding={2} gap={2} direction="column" backgroundColor="secondary">
<InfoItem title={t('migrate-to-cloud.migration-token.title', 'Migration token')}>
<Trans i18nKey="migrate-to-cloud.migration-token.body">
Your self-managed Grafana instance will require a special authentication token to securely connect to this
cloud stack.
<>
<Box display="flex" alignItems="flex-start" padding={2} gap={2} direction="column" backgroundColor="secondary">
<InfoItem title={t('migrate-to-cloud.migration-token.title', 'Migration token')}>
<Trans i18nKey="migrate-to-cloud.migration-token.body">
Your self-managed Grafana instance will require a special authentication token to securely connect to this
cloud stack.
</Trans>
</InfoItem>
{createTokenResponse?.isError ? (
<TokenErrorAlert />
) : (
<Text color="secondary">
<Trans i18nKey="migrate-to-cloud.migration-token.status">
Current status: <TokenStatus hasToken={hasToken} isFetching={isLoading} />
</Trans>
</InfoItem>
</Text>
)}
{createTokenResponse?.isError ? (
<TokenErrorAlert />
) : (
<Text color="secondary">
<Trans i18nKey="migrate-to-cloud.migration-token.status">
Current status: <TokenStatus hasToken={hasToken} isFetching={isLoading} />
</Trans>
</Text>
)}
<Button disabled={isLoading || hasToken} onClick={handleGenerateToken}>
{createTokenResponse.isLoading
? t('migrate-to-cloud.migration-token.generate-button-loading', 'Generating a migration token...')
: t('migrate-to-cloud.migration-token.generate-button', 'Generate a migration token')}
</Button>
</Box>
<Button
disabled={isLoading || hasToken}
onClick={async () => {
const response = await createToken();
if ('data' in response) {
showModal(MigrationTokenModal, {
hideModal,
migrationToken: response.data.token,
});
}
}}
>
{createTokenResponse.isLoading
? t('migrate-to-cloud.migration-token.generate-button-loading', 'Generating a migration token...')
: t('migrate-to-cloud.migration-token.generate-button', 'Generate a migration token')}
</Button>
</Box>
)}
</ModalsController>
<MigrationTokenModal
isOpen={showModal}
hideModal={() => setShowModal(false)}
migrationToken={createTokenResponse.data?.token}
/>
</>
);
};