From 839717c9613832cd8529dedd4decb5057255e74b Mon Sep 17 00:00:00 2001
From: Nick Fitzpatrick <nick@metabase.com>
Date: Fri, 23 Aug 2024 11:57:52 -0300
Subject: [PATCH] Fix `padding` prop on Mantine Modals (#46900)
* move default modal padding to general modal component
* small adjustments. Using base modal where apropriate
* shame
---
.../components/UserProvisioningModals.tsx | 41 +++++++----------
.../components/DatabaseList/DatabaseList.jsx | 46 ++++++++-----------
.../components/ApiKeys/CreateApiKeyModal.tsx | 1 -
.../components/ApiKeys/DeleteApiKeyModal.tsx | 8 +---
.../components/ApiKeys/EditApiKeyModal.tsx | 1 -
.../components/ApiKeys/SecretKeyModal.tsx | 1 -
.../components/CloudPanel/MigrationStart.tsx | 2 +-
.../containers/CreateCollectionModal.tsx | 25 ++++------
.../ErrorPages/ErrorDiagnosticModal.tsx | 1 -
.../SaveQuestionModal/SaveQuestionModal.tsx | 5 +-
.../overlays/Modal/Modal.styled.tsx | 9 ++--
11 files changed, 52 insertions(+), 88 deletions(-)
diff --git a/enterprise/frontend/src/metabase-enterprise/user_provisioning/components/UserProvisioningModals.tsx b/enterprise/frontend/src/metabase-enterprise/user_provisioning/components/UserProvisioningModals.tsx
index ddce9d2ad47..3965b6db6c2 100644
--- a/enterprise/frontend/src/metabase-enterprise/user_provisioning/components/UserProvisioningModals.tsx
+++ b/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>
);
};
diff --git a/frontend/src/metabase/admin/databases/components/DatabaseList/DatabaseList.jsx b/frontend/src/metabase/admin/databases/components/DatabaseList/DatabaseList.jsx
index e375fc7224f..4f5de9508b8 100644
--- a/frontend/src/metabase/admin/databases/components/DatabaseList/DatabaseList.jsx
+++ b/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>
);
}
diff --git a/frontend/src/metabase/admin/settings/components/ApiKeys/CreateApiKeyModal.tsx b/frontend/src/metabase/admin/settings/components/ApiKeys/CreateApiKeyModal.tsx
index d7231f3d837..be5cc598b5a 100644
--- a/frontend/src/metabase/admin/settings/components/ApiKeys/CreateApiKeyModal.tsx
+++ b/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`}
diff --git a/frontend/src/metabase/admin/settings/components/ApiKeys/DeleteApiKeyModal.tsx b/frontend/src/metabase/admin/settings/components/ApiKeys/DeleteApiKeyModal.tsx
index 5a6a66d9a42..e6323dcf979 100644
--- a/frontend/src/metabase/admin/settings/components/ApiKeys/DeleteApiKeyModal.tsx
+++ b/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">
diff --git a/frontend/src/metabase/admin/settings/components/ApiKeys/EditApiKeyModal.tsx b/frontend/src/metabase/admin/settings/components/ApiKeys/EditApiKeyModal.tsx
index 47be7965ada..eb5cfd6e416 100644
--- a/frontend/src/metabase/admin/settings/components/ApiKeys/EditApiKeyModal.tsx
+++ b/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`}
diff --git a/frontend/src/metabase/admin/settings/components/ApiKeys/SecretKeyModal.tsx b/frontend/src/metabase/admin/settings/components/ApiKeys/SecretKeyModal.tsx
index 3db85276f53..87ddf8fdef5 100644
--- a/frontend/src/metabase/admin/settings/components/ApiKeys/SecretKeyModal.tsx
+++ b/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}
diff --git a/frontend/src/metabase/admin/settings/components/CloudPanel/MigrationStart.tsx b/frontend/src/metabase/admin/settings/components/CloudPanel/MigrationStart.tsx
index ae145b7c9c8..5103c87e7cf 100644
--- a/frontend/src/metabase/admin/settings/components/CloudPanel/MigrationStart.tsx
+++ b/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 />
diff --git a/frontend/src/metabase/collections/containers/CreateCollectionModal.tsx b/frontend/src/metabase/collections/containers/CreateCollectionModal.tsx
index 01c495a6e0f..bbffd11f3f2 100644
--- a/frontend/src/metabase/collections/containers/CreateCollectionModal.tsx
+++ b/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>
);
}
diff --git a/frontend/src/metabase/components/ErrorPages/ErrorDiagnosticModal.tsx b/frontend/src/metabase/components/ErrorPages/ErrorDiagnosticModal.tsx
index 6c83352a7e4..f2f498ccfb9 100644
--- a/frontend/src/metabase/components/ErrorPages/ErrorDiagnosticModal.tsx
+++ b/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
diff --git a/frontend/src/metabase/containers/SaveQuestionModal/SaveQuestionModal.tsx b/frontend/src/metabase/containers/SaveQuestionModal/SaveQuestionModal.tsx
index 3536cbaecca..f51d13a9dc5 100644
--- a/frontend/src/metabase/containers/SaveQuestionModal/SaveQuestionModal.tsx
+++ b/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 />
diff --git a/frontend/src/metabase/ui/components/overlays/Modal/Modal.styled.tsx b/frontend/src/metabase/ui/components/overlays/Modal/Modal.styled.tsx
index 7413859a2dd..b75010e921c 100644
--- a/frontend/src/metabase/ui/components/overlays/Modal/Modal.styled.tsx
+++ b/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`,
--
GitLab