Fix `padding` prop on Mantine Modals (#46900)

* move default modal padding to general modal component

* small adjustments. Using base modal where apropriate

* shame

enterprise/frontend/src/metabase-enterprise/user_provisioning/components/UserProvisioningModals.tsx

@@ -10,23 +10,6 @@ import { ScimTextWarning } from "./ScimTextWarning";
 
 type BaseUserProvisiongModalProps = Pick<ModalProps, "opened" | "onClose">;
 
-interface ScimModalProps extends BaseUserProvisiongModalProps {
-  title: string;
-  children: React.ReactNode;
-}
-
-const ScimModal = ({ opened, onClose, title, children }: ScimModalProps) => (
-  <Modal.Root opened={opened} onClose={onClose} size="35rem">
-    <Modal.Overlay />
-    <Modal.Content p="md">
-      <Modal.Header mb="sm">
-        <Modal.Title>{title}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>{children}</Modal.Body>
-    </Modal.Content>
-  </Modal.Root>
-);
-
 interface UserProvisioningFirstEnabledModalProps
   extends BaseUserProvisiongModalProps {
   scimBaseUrl: string;
@@ -42,7 +25,9 @@ export const UserProvisioningFirstEnabledModal = ({
   scimError,
 }: UserProvisioningFirstEnabledModalProps) => {
   return (
-    <ScimModal
+    <Modal
+      padding="2rem"
+      size="35rem"
       opened={opened}
       onClose={onClose}
       title={t`Here's what you'll need to set SCIM up`}
@@ -70,7 +55,7 @@ export const UserProvisioningFirstEnabledModal = ({
           </Button>
         </Flex>
       </Stack>
-    </ScimModal>
+    </Modal>
   );
 };
 
@@ -99,7 +84,13 @@ export const UserProvisioningRegenerateTokenModal = ({
 
   if (!confirmed) {
     return (
-      <ScimModal opened={opened} onClose={onClose} title={t`Regenerate token?`}>
+      <Modal
+        size="35rem"
+        padding="2rem"
+        opened={opened}
+        onClose={onClose}
+        title={t`Regenerate token?`}
+      >
         <Stack spacing="lg">
           <Text>
             {/* eslint-disable-next-line no-literal-metabase-strings -- in admin settings */}
@@ -112,19 +103,21 @@ export const UserProvisioningRegenerateTokenModal = ({
             </Button>
           </Flex>
         </Stack>
-      </ScimModal>
+      </Modal>
     );
   }
 
   const scimTokenInputText = regenerateTokenReq.data?.unmasked_key ?? "";
 
   return (
-    <ScimModal
+    <Modal
+      size="35rem"
+      padding="2rem"
       opened={opened}
       onClose={onClose}
       title={t`Copy and save the SCIM token`}
     >
-      <Stack spacing="lg">
+      <Stack spacing="lg" mt="0.5rem">
         <LoadingAndErrorWrapper
           error={regenerateTokenReq.error}
           loading={regenerateTokenReq.isLoading}
@@ -148,6 +141,6 @@ export const UserProvisioningRegenerateTokenModal = ({
           )}
         </Flex>
       </Stack>
-    </ScimModal>
+    </Modal>
   );
 };

frontend/src/metabase/admin/databases/components/DatabaseList/DatabaseList.jsx

@@ -163,37 +163,29 @@ export default class DatabaseList extends Component {
           ) : null}
         </section>
 
-        {/* Needed to make this a composed modal to get the padding we wanted.
-            Not sure why the padding prop didn't work */}
-        <Modal.Root
+        <Modal
           opened={isPermissionModalOpened}
           size={620}
           withCloseButton={false}
+          title={t`Your database was added! Want to configure permissions?`}
+          padding="2rem"
         >
-          <Modal.Overlay />
-          <Modal.Content p="1rem">
-            <Modal.Header>
-              <Modal.Title fz="1.25rem">{t`Your database was added! Want to configure permissions?`}</Modal.Title>
-            </Modal.Header>
-            <Modal.Body>
-              <Text
-                mb="1.5rem"
-                mt="1rem"
-              >{t`You can change these settings later in the Permissions tab. Do you want to configure it?`}</Text>
-              <Flex justify="end">
-                <Button
-                  mr="0.5rem"
-                  onClick={this.onPermissionModalClose}
-                >{t`Maybe later`}</Button>
-                <Button
-                  component={Link}
-                  variant="filled"
-                  to={`/admin/permissions/data/database/${createdDbId}`}
-                >{t`Configure permissions`}</Button>
-              </Flex>
-            </Modal.Body>
-          </Modal.Content>
-        </Modal.Root>
+          <Text
+            mb="1.5rem"
+            mt="1rem"
+          >{t`You can change these settings later in the Permissions tab. Do you want to configure it?`}</Text>
+          <Flex justify="end">
+            <Button
+              mr="0.5rem"
+              onClick={this.onPermissionModalClose}
+            >{t`Maybe later`}</Button>
+            <Button
+              component={Link}
+              variant="filled"
+              to={`/admin/permissions/data/database/${createdDbId}`}
+            >{t`Configure permissions`}</Button>
+          </Flex>
+        </Modal>
       </div>
     );
   }

frontend/src/metabase/admin/settings/components/ApiKeys/CreateApiKeyModal.tsx

@@ -39,7 +39,6 @@ export const CreateApiKeyModal = ({ onClose }: { onClose: () => void }) => {
     return (
       <Modal
         size="30rem"
-        padding="xl"
         opened
         onClose={onClose}
         title={t`Create a new API Key`}

frontend/src/metabase/admin/settings/components/ApiKeys/DeleteApiKeyModal.tsx

@@ -26,13 +26,7 @@ export const DeleteApiKeyModal = ({
   }, [onClose, apiKey.id, deleteApiKey]);
 
   return (
-    <Modal
-      size="30rem"
-      padding="xl"
-      opened
-      onClose={onClose}
-      title={t`Delete API Key`}
-    >
+    <Modal size="30rem" opened onClose={onClose} title={t`Delete API Key`}>
       <FormProvider initialValues={{}} onSubmit={handleDelete}>
         <Form>
           <Stack spacing="lg">

frontend/src/metabase/admin/settings/components/ApiKeys/EditApiKeyModal.tsx

@@ -43,7 +43,6 @@ const RegenerateKeyModal = ({
   return (
     <Modal
       size="30rem"
-      padding="xl"
       opened
       onClose={() => setModal("edit")}
       title={t`Regenerate API key`}

frontend/src/metabase/admin/settings/components/ApiKeys/SecretKeyModal.tsx

@@ -16,7 +16,6 @@ export const SecretKeyModal = ({
 }) => (
   <Modal
     size="30rem"
-    padding="xl"
     zIndex={DEFAULT_Z_INDEX} // prevents CopyWidgetButton's Tippy popover from being obscured
     opened
     onClose={onClose}

frontend/src/metabase/admin/settings/components/CloudPanel/MigrationStart.tsx

@@ -45,7 +45,7 @@ export const MigrationStart = ({
       <Modal.Root
         opened={isModalOpen}
         onClose={closeModal}
-        size={"36rem"}
+        size="36rem"
         data-testid="new-cloud-migration-confirmation"
       >
         <Modal.Overlay />

frontend/src/metabase/collections/containers/CreateCollectionModal.tsx

@@ -46,27 +46,20 @@ function CreateCollectionModal({
   );
 
   return (
-    <Modal.Root
+    <Modal
       opened
       onClose={onClose}
       size="lg"
       data-testid="new-collection-modal"
+      padding="40px"
+      title={t`New collection`}
     >
-      <Modal.Overlay />
-      <Modal.Content p="md">
-        <Modal.Header>
-          <Modal.Title>{t`New collection`}</Modal.Title>
-          <Modal.CloseButton />
-        </Modal.Header>
-        <Modal.Body>
-          <CreateCollectionForm
-            {...props}
-            onCreate={handleCreate}
-            onCancel={onClose}
-          />
-        </Modal.Body>
-      </Modal.Content>
-    </Modal.Root>
+      <CreateCollectionForm
+        {...props}
+        onCreate={handleCreate}
+        onCancel={onClose}
+      />
+    </Modal>
   );
 }
 

frontend/src/metabase/components/ErrorPages/ErrorDiagnosticModal.tsx

@@ -72,7 +72,6 @@ export const ErrorDiagnosticModal = ({
       opened
       onClose={onClose}
       title={t`Download diagnostic information`}
-      padding="xl"
       size="lg"
     >
       <FormProvider

frontend/src/metabase/containers/SaveQuestionModal/SaveQuestionModal.tsx

@@ -27,10 +27,9 @@ export const SaveQuestionModal = ({
     multiStep={multiStep}
     initialCollectionId={initialCollectionId}
   >
-    <Modal.Root onClose={onCancel} opened={true}>
+    <Modal.Root onClose={onCancel} opened={true} padding="40px">
       <Modal.Overlay />
-
-      <Modal.Content p="md" data-testid="save-question-modal">
+      <Modal.Content data-testid="save-question-modal">
         <Modal.Header>
           <Modal.Title>
             <SaveQuestionTitle />

frontend/src/metabase/ui/components/overlays/Modal/Modal.styled.tsx

@@ -7,6 +7,9 @@ const DEFAULT_MODAL_SPACING = "lg";
 
 export const getModalOverrides = (): MantineThemeOverride["components"] => ({
   Modal: {
+    defaultProps: {
+      padding: DEFAULT_MODAL_SPACING,
+    },
     styles: theme => ({
       root: {
         color: "var(--mb-color-text-dark)",
@@ -34,15 +37,9 @@ export const getModalOverrides = (): MantineThemeOverride["components"] => ({
   },
   ModalHeader: {
     defaultProps: {
-      p: DEFAULT_MODAL_SPACING,
       pb: "sm",
     },
   },
-  ModalBody: {
-    defaultProps: {
-      p: DEFAULT_MODAL_SPACING,
-    },
-  },
   ModalCloseButton: {
     defaultProps: {
       "aria-label": t`Close`,