polish delete database modal (#28077)

frontend/src/metabase/admin/databases/components/DeleteDatabaseModel/DeleteDatabaseModal.styled.tsx

@@ -17,9 +17,19 @@ export const DeleteDatabaseModalFooter = styled.div`
   }
 `;
 
-export const DeleteDatabaseModalSection = styled.div`
+interface DeleteDatabaseModalSectionProps {
+  isHidden?: boolean;
+}
+
+export const DeleteDatabaseModalSection = styled.div<DeleteDatabaseModalSectionProps>`
+  height: ${props => (props.isHidden ? 0 : "unset")};
+  opacity: ${props => (props.isHidden ? 0 : 1)};
+  padding: 0.125rem;
+  transition: all 350ms, opacity 200ms;
+  overflow: hidden;
+
   & + & {
-    margin-top: 1.5rem;
+    margin-top: 1.25rem;
   }
 `;
 
@@ -29,5 +39,6 @@ export const ErrorMessage = styled.div`
 `;
 
 export const DatabaseNameInputContainer = styled.div`
+  padding: 0.125rem 0;
   width: 300px;
 `;

frontend/src/metabase/admin/databases/components/DeleteDatabaseModel/DeleteDatabaseModal.tsx

@@ -7,6 +7,7 @@ import type { DatabaseUsageInfo } from "metabase-types/api";
 import useFetch from "metabase/hooks/use-fetch";
 import Alert from "metabase/core/components/Alert";
 import Input from "metabase/core/components/Input";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 import type Database from "metabase-lib/metadata/Database";
 import ContentRemovalConfirmation from "../ContentRemovalConfirmation";
 import {
@@ -57,6 +58,7 @@ const DeleteDatabaseModal = ({
 
   const [isContentRemovalConfirmed, setIsContentRemovalConfirmed] =
     useState(false);
+
   const [databaseNameConfirmation, setDatabaseNameConfirmation] = useState("");
   const [error, setError] = useState<any>(null);
 
@@ -82,12 +84,8 @@ const DeleteDatabaseModal = ({
   const isDatabaseNameConfirmed =
     databaseNameConfirmation.trim().toLowerCase() ===
     database.name.trim().toLowerCase();
-  const shouldShowDbNameInputConfirmation =
-    isContentRemovalConfirmed || !hasContent;
   const canDelete =
-    !isLoading &&
-    (isContentRemovalConfirmed || !hasContent) &&
-    isDatabaseNameConfirmed;
+    (isContentRemovalConfirmed || !hasContent) && isDatabaseNameConfirmed;
 
   const deleteButtonLabel = hasContent
     ? t`Delete this content and the DB connection`
@@ -101,69 +99,73 @@ const DeleteDatabaseModal = ({
       title={t`Delete the ${database.name} database?`}
       onClose={onClose}
     >
-      <DeleteDatabaseModalRoot onSubmit={canDelete ? handleSubmit : undefined}>
-        {!shouldShowDbNameInputConfirmation && (
-          <DeleteDatabaseModalSection>
-            <Alert icon="info">
-              {jt`If you’re trying to migrate from a development DB to a production one, you don’t need to do this. You can just ${(
-                <Button
-                  onlyText
-                  onClick={handleEditConnectionDetailsClick}
-                >{t`edit your connection details.`}</Button>
-              )}`}
-            </Alert>
-          </DeleteDatabaseModalSection>
-        )}
-        {hasContent && (
-          <>
-            <DeleteDatabaseModalSection>
-              {hasMoreThanOneEntityType
-                ? t`Deleting this database will also delete everything based on it. If you’re really trying to do this, please check each of these boxes:`
-                : t`Deleting this database will also delete everything based on it. If you’re really trying to do this, please check the box below:`}
-            </DeleteDatabaseModalSection>
-
-            <DeleteDatabaseModalSection>
-              <ContentRemovalConfirmation
-                usageInfo={usageInfo}
-                onChange={setIsContentRemovalConfirmed}
-              />
-            </DeleteDatabaseModalSection>
-          </>
-        )}
-        {shouldShowDbNameInputConfirmation && (
-          <>
-            <DeleteDatabaseModalSection>
-              <Alert icon="warning" variant="error">
-                {t`This will delete every saved question, model, metric, and segment you’ve made that uses this data, and can’t be undone!`}
+      <LoadingAndErrorWrapper loading={isLoading}>
+        <DeleteDatabaseModalRoot
+          onSubmit={canDelete ? handleSubmit : undefined}
+        >
+          {hasContent && (
+            <DeleteDatabaseModalSection isHidden={isContentRemovalConfirmed}>
+              <Alert icon="info">
+                {jt`If you’re trying to migrate from a development DB to a production one, you don’t need to do this. You can just ${(
+                  <Button
+                    onlyText
+                    onClick={handleEditConnectionDetailsClick}
+                  >{t`edit your connection details.`}</Button>
+                )}`}
               </Alert>
             </DeleteDatabaseModalSection>
-            <DeleteDatabaseModalSection>
-              <p>
-                {jt`If you’re sure, please type ${(
-                  <strong>{database.name}</strong>
-                )} in this box:`}
-              </p>
-              <DatabaseNameInputContainer>
-                <Input
-                  fullWidth
-                  data-testid="database-name-confirmation-input"
-                  autoFocus
-                  placeholder={t`Are you completely sure?`}
-                  value={databaseNameConfirmation}
-                  onChange={e => setDatabaseNameConfirmation(e.target.value)}
+          )}
+          {hasContent && (
+            <>
+              <DeleteDatabaseModalSection>
+                {hasMoreThanOneEntityType
+                  ? t`Deleting this database will also delete everything based on it. If you’re really trying to do this, please check each of these boxes:`
+                  : t`Deleting this database will also delete everything based on it. If you’re really trying to do this, please check the box below:`}
+              </DeleteDatabaseModalSection>
+
+              <DeleteDatabaseModalSection>
+                <ContentRemovalConfirmation
+                  usageInfo={usageInfo}
+                  onChange={setIsContentRemovalConfirmed}
                 />
-              </DatabaseNameInputContainer>
-            </DeleteDatabaseModalSection>
-          </>
-        )}
-        <DeleteDatabaseModalFooter>
-          {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
-          <Button type="button" onClick={onClose}>{t`Cancel`}</Button>
-          <Button danger type="submit" disabled={!canDelete}>
-            {deleteButtonLabel}
-          </Button>
-        </DeleteDatabaseModalFooter>
-      </DeleteDatabaseModalRoot>
+              </DeleteDatabaseModalSection>
+            </>
+          )}
+          <DeleteDatabaseModalSection
+            isHidden={!isContentRemovalConfirmed && hasContent}
+          >
+            <Alert icon="warning" variant="error">
+              {t`This will delete every saved question, model, metric, and segment you’ve made that uses this data, and can’t be undone!`}
+            </Alert>
+          </DeleteDatabaseModalSection>
+          <DeleteDatabaseModalSection
+            isHidden={!isContentRemovalConfirmed && hasContent}
+          >
+            <p>
+              {jt`If you’re sure, please type ${(
+                <strong>{database.name}</strong>
+              )} in this box:`}
+            </p>
+            <DatabaseNameInputContainer>
+              <Input
+                fullWidth
+                data-testid="database-name-confirmation-input"
+                autoFocus
+                placeholder={t`Are you completely sure?`}
+                value={databaseNameConfirmation}
+                onChange={e => setDatabaseNameConfirmation(e.target.value)}
+              />
+            </DatabaseNameInputContainer>
+          </DeleteDatabaseModalSection>
+          <DeleteDatabaseModalFooter>
+            {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
+            <Button type="button" onClick={onClose}>{t`Cancel`}</Button>
+            <Button danger type="submit" disabled={!canDelete}>
+              {deleteButtonLabel}
+            </Button>
+          </DeleteDatabaseModalFooter>
+        </DeleteDatabaseModalRoot>
+      </LoadingAndErrorWrapper>
     </ModalContent>
   );
 };

frontend/src/metabase/admin/databases/components/DeleteDatabaseModel/DeleteDatabaseModal.unit.spec.tsx

@@ -130,4 +130,15 @@ describe("DeleteDatabaseModal", () => {
 
     expect(screen.getByText("Something went wrong")).toBeInTheDocument();
   });
+
+  it("shows a loader while fetching usage info", () => {
+    useFetchMock.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+    } as any);
+
+    setup();
+
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+  });
 });