From 467d4231f1191c4a7d0ec8ba3b99b2ef31521ddc Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Tue, 23 Apr 2024 11:23:06 +0100
Subject: [PATCH] E2C: Remove ModalController from MigrationTokenPage (#86709)

* Remove ModalController from MigrationTokenPage

* Dont show modal or toast for error response

* better
---
 .../features/migrate-to-cloud/api/index.ts    |  7 +-
 .../MigrationTokenModal.tsx                   |  5 +-
 .../MigrationTokenPane/MigrationTokenPane.tsx | 79 ++++++++++---------
 3 files changed, 47 insertions(+), 44 deletions(-)

diff --git a/public/app/features/migrate-to-cloud/api/index.ts b/public/app/features/migrate-to-cloud/api/index.ts
index ac7a0b07d78..6ec39eaae3b 100644
--- a/public/app/features/migrate-to-cloud/api/index.ts
+++ b/public/app/features/migrate-to-cloud/api/index.ts
@@ -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,
   },
 });
 
diff --git a/public/app/features/migrate-to-cloud/cloud/MigrationTokenPane/MigrationTokenModal.tsx b/public/app/features/migrate-to-cloud/cloud/MigrationTokenPane/MigrationTokenModal.tsx
index d0b17c6a29d..c52cd7dcfcf 100644
--- a/public/app/features/migrate-to-cloud/cloud/MigrationTokenPane/MigrationTokenModal.tsx
+++ b/public/app/features/migrate-to-cloud/cloud/MigrationTokenPane/MigrationTokenModal.tsx
@@ -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}
     >
diff --git a/public/app/features/migrate-to-cloud/cloud/MigrationTokenPane/MigrationTokenPane.tsx b/public/app/features/migrate-to-cloud/cloud/MigrationTokenPane/MigrationTokenPane.tsx
index e580b40ec50..59b8123dced 100644
--- a/public/app/features/migrate-to-cloud/cloud/MigrationTokenPane/MigrationTokenPane.tsx
+++ b/public/app/features/migrate-to-cloud/cloud/MigrationTokenPane/MigrationTokenPane.tsx
@@ -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}
+      />
+    </>
   );
 };