Migrate rest of dialogs (#5097)

* Replace Dialog in OrderCustomerChangeDialog * Replace Dialog in OrderProductAddDialog * Replace Dialog in OrderFulfillmentTrackingDialog * Replace Dialog in OrderInvoiceEmailSendDialog * Replace Dialog in OrderCannotCancelOrderDialog and fix showing two dialogs * Replace Dialog in OrderFulfillmentApproveDialog * Replace Dialog in ProductVariantDeleteDialog * Replace Dialog in ProductExternalMediaDialog * Replace Dialog in ProductExportSteps * Replace Dialog in ProductVariantMediaSelectDialog * Replace Dialog in DiscountCountrySelectDialog * Replace Dialog in PluginSecretFieldDialog * Replace Dialog in ShippingZonePostalCodeRangeDialog * Replace Dialog in ShippingZoneCountriesAssignDialog * Replace Dialog in ShippingZoneCountriesAssignDialog * Replace Dialog in gift card export dialog * Replace Dialog in GiftCardBulkCreateSuccessDialog * Remove not used delete category dialog * Replace Dialog in SaveFilterTabDialog * Replace Dialog in MenuCreateDialog * Replace Dialog in TokenCreateDialog * Replace Dialog in ExitFormDialog * Replace Dialog in DevModePanel * Add Xl modal size * Replace Dialog in AppPermissionsDialog * Replace Dialog in DryRun * Add modal size MD * Replace Dialog in AttributeValueEditDialog * Replace Dialog in AssignMembersDialog * Replace Dialog in AssignVariantDialog * Replace Dialog in AssignProductDialog * Replace Dialog in AssignContainerDialog * Replace Dialog in AssignAttributeDialog * Add todo comment * Extract messages * Add missing test ids * Add changeset * Add Modal sizes * Update sizing * Small improvements after QA * Fix full width modals * Fix ActionDialog size
saleor · Aug 26, 2024 · b428bcd · b428bcd
1 parent f8e6049
commit b428bcd
Show file tree

Hide file tree

Showing 89 changed files with 1,912 additions and 2,212 deletions.
diff --git a/.changeset/forty-bananas-burn.md b/.changeset/forty-bananas-burn.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Legacy Dialog component is no longer used
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
@@ -6361,10 +6361,6 @@
   "dHAwu8": {
     "string": "Code already exists"
   },
-  "dJQxHt": {
-    "context": "delete category",
-    "string": "Are you sure you want to delete {categoryName}?"
-  },
   "dJVXIb": {
     "context": "vat included in order price",
     "string": "VAT included"

diff --git a/src/apps/components/AppDeleteDialog/AppDeleteDialog.tsx b/src/apps/components/AppDeleteDialog/AppDeleteDialog.tsx
@@ -55,7 +55,6 @@ const AppDeleteDialog: React.FC<AppDeleteDialogProps> = ({
       onConfirm={onConfirm}
       title={intl.formatMessage(msgs.deleteAppTitle)}
       variant="delete"
-      size="lg"
     >
       <Box data-test-id="dialog-content">
         <Box

diff --git a/src/apps/components/AppDialog/AppDialog.tsx b/src/apps/components/AppDialog/AppDialog.tsx
@@ -11,7 +11,7 @@ interface AppDialogProps {
 export const AppDialog: React.FC<AppDialogProps> = ({ children, title, onClose, ...props }) => {
   return (
     <DashboardModal aria-labelledby="extension app dialog" {...props} onChange={onClose}>
-      <DashboardModal.Content>
+      <DashboardModal.Content size="lg">
         <DashboardModal.Title
           display="flex"
           justifyContent="space-between"
@@ -21,7 +21,7 @@ export const AppDialog: React.FC<AppDialogProps> = ({ children, title, onClose,
           {title}
           <DashboardModal.Close onClose={onClose}></DashboardModal.Close>
         </DashboardModal.Title>
-        <Box __width={600} __height={600}>
+        <Box width="100%" __height={600}>
           {children}
         </Box>
       </DashboardModal.Content>

diff --git a/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx b/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx
@@ -3,9 +3,9 @@ import { AppPermissionsDialogPermissionPicker } from "@dashboard/apps/components
 import { useAppPermissionsDialogState } from "@dashboard/apps/components/AppPermissionsDialog/AppPermissionsDialogState";
 import { AppPermissionsDialogMessages } from "@dashboard/apps/components/AppPermissionsDialog/messages";
 import { useGetAvailableAppPermissions } from "@dashboard/apps/hooks/useGetAvailableAppPermissions";
+import { DashboardModal } from "@dashboard/components/Modal";
 import { PermissionEnum, useAppQuery, useAppUpdatePermissionsMutation } from "@dashboard/graphql";
 import useNotifier from "@dashboard/hooks/useNotifier";
-import { Dialog, DialogContent, DialogTitle } from "@material-ui/core";
 import { Box, Skeleton, Text } from "@saleor/macaw-ui-next";
 import React, { useEffect } from "react";
 import { useIntl } from "react-intl";
@@ -109,9 +109,9 @@ export const AppPermissionsDialog = ({
   };
 
   return (
-    <Dialog open={true} onClose={onClose} fullWidth maxWidth={"sm"}>
-      <DialogTitle disableTypography>{formatMessage(messages.heading)}</DialogTitle>
-      <DialogContent>
+    <DashboardModal open={true} onChange={onClose}>
+      <DashboardModal.Content size="sm">
+        <DashboardModal.Title>{formatMessage(messages.heading)}</DashboardModal.Title>
         <Box display={"grid"} gridAutoFlow={"row"}>
           <Text as={"p"}>{formatMessage(messages.info)}</Text>
           <Box
@@ -129,7 +129,7 @@ export const AppPermissionsDialog = ({
           </Box>
           {renderDialogContent()}
         </Box>
-      </DialogContent>
-    </Dialog>
+      </DashboardModal.Content>
+    </DashboardModal>
   );
 };
diff --git a/src/apps/components/AppPermissionsDialog/AppPermissionsDialogConfirmation.tsx b/src/apps/components/AppPermissionsDialog/AppPermissionsDialogConfirmation.tsx
@@ -1,7 +1,10 @@
 import { AppPermissionsDialogMessages } from "@dashboard/apps/components/AppPermissionsDialog/messages";
 import { useGetAvailableAppPermissions } from "@dashboard/apps/hooks/useGetAvailableAppPermissions";
+import BackButton from "@dashboard/components/BackButton";
+import { ConfirmButton } from "@dashboard/components/ConfirmButton";
+import { DashboardModal } from "@dashboard/components/Modal";
 import { PermissionEnum } from "@dashboard/graphql";
-import { Box, Button, Text } from "@saleor/macaw-ui-next";
+import { Box, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -30,6 +33,7 @@ export const AppPermissionsDialogConfirmation = ({
       <Text marginBottom={2} as={"p"}>
         {intl.formatMessage(messages.summaryText)}
       </Text>
+
       {isPermissionsRemoved && (
         <Box marginBottom={4}>
           <Text size={4} fontWeight="bold">
@@ -42,6 +46,7 @@ export const AppPermissionsDialogConfirmation = ({
           ))}
         </Box>
       )}
+
       {isPermissionsAdded && (
         <Box>
           <Text size={4} fontWeight="bold">
@@ -54,23 +59,15 @@ export const AppPermissionsDialogConfirmation = ({
           ))}
         </Box>
       )}
-      <Box display={"flex"} justifyContent={"flex-end"} gap={2} marginTop={6}>
-        <Button
-          variant={"tertiary"}
-          onClick={() => {
-            onBack();
-          }}
-        >
-          {intl.formatMessage(messages.backButton)}
-        </Button>
-        <Button
-          onClick={() => {
-            onApprove();
-          }}
-        >
+
+      <Box marginBottom={6} />
+
+      <DashboardModal.Actions>
+        <BackButton onClick={onBack}>{intl.formatMessage(messages.backButton)}</BackButton>
+        <ConfirmButton data-test-id="submit" transitionState="default" onClick={onApprove}>
           {intl.formatMessage(messages.confirmButton)}
-        </Button>
-      </Box>
+        </ConfirmButton>
+      </DashboardModal.Actions>
     </Box>
   );
 };
diff --git a/src/apps/components/AppPermissionsDialog/AppPermissionsDialogPermissionPicker.tsx b/src/apps/components/AppPermissionsDialog/AppPermissionsDialogPermissionPicker.tsx
@@ -1,7 +1,10 @@
 import { AppPermissionsDialogMessages } from "@dashboard/apps/components/AppPermissionsDialog/messages";
 import { AppPermission } from "@dashboard/apps/components/AppPermissionsDialog/types";
+import BackButton from "@dashboard/components/BackButton";
+import { ConfirmButton } from "@dashboard/components/ConfirmButton";
+import { DashboardModal } from "@dashboard/components/Modal";
 import { PermissionEnum } from "@dashboard/graphql";
-import { Box, Button, Checkbox, List, Text } from "@saleor/macaw-ui-next";
+import { Box, Checkbox, List, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -44,7 +47,7 @@ export const AppPermissionsDialogPermissionPicker = ({
         onChange(values);
       }}
     >
-      <Box overflow={"scroll"} __maxHeight={LIST_MAX_HEIGHT}>
+      <Box overflow={"scroll"} __maxHeight={LIST_MAX_HEIGHT} marginBottom={6}>
         <List>
           {allPermissions.map(perm => {
             const isAssigned = Boolean(selected.find(p => p === perm.code));
@@ -66,12 +69,13 @@ export const AppPermissionsDialogPermissionPicker = ({
           })}
         </List>
       </Box>
-      <Box display={"flex"} justifyContent={"flex-end"} gap={2} marginTop={2}>
-        <Button onClick={onClose} type={"button"} variant={"tertiary"}>
-          {intl.formatMessage(messages.closeButton)}
-        </Button>
-        <Button type={"submit"}>{intl.formatMessage(messages.saveButton)}</Button>
-      </Box>
+
+      <DashboardModal.Actions>
+        <BackButton onClick={onClose}>{intl.formatMessage(messages.closeButton)}</BackButton>
+        <ConfirmButton data-test-id="submit" transitionState="default" type="submit">
+          {intl.formatMessage(messages.saveButton)}
+        </ConfirmButton>
+      </DashboardModal.Actions>
     </form>
   );
 };
diff --git a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
@@ -2,11 +2,12 @@ import { getAttributeValueErrorMessage } from "@dashboard/attributes/errors";
 import BackButton from "@dashboard/components/BackButton";
 import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
+import { DashboardModal } from "@dashboard/components/Modal";
 import { AttributeErrorFragment, AttributeInputTypeEnum } from "@dashboard/graphql";
 import useModalDialogErrors from "@dashboard/hooks/useModalDialogErrors";
 import { buttonMessages } from "@dashboard/intl";
 import { getFormErrors } from "@dashboard/utils/errors";
-import { Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@material-ui/core";
+import { TextField } from "@material-ui/core";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -46,32 +47,27 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
   const formErrors = getFormErrors(["name"], errors);
 
   return (
-    <Dialog
-      onClose={onClose}
-      open={open}
-      fullWidth
-      maxWidth="sm"
-      data-test-id="edit-attribute-value-dialog"
-    >
-      <DialogTitle disableTypography>
-        {attributeValue === null ? (
-          <FormattedMessage
-            id="PqMbma"
-            defaultMessage="Add Value"
-            description="add attribute value"
-          />
-        ) : (
-          <FormattedMessage
-            id="XYhE8p"
-            defaultMessage="Edit Value"
-            description="edit attribute value"
-          />
-        )}
-      </DialogTitle>
-      <Form initial={initialForm} onSubmit={onSubmit}>
-        {({ errors, set, change, clearErrors, setError, data, submit }) => (
-          <>
-            <DialogContent>
+    <DashboardModal onChange={onClose} open={open}>
+      <DashboardModal.Content size="sm" data-test-id="edit-attribute-value-dialog">
+        <Form initial={initialForm} onSubmit={onSubmit}>
+          {({ errors, set, change, clearErrors, setError, data, submit }) => (
+            <DashboardModal.Grid>
+              <DashboardModal.Title>
+                {attributeValue === null ? (
+                  <FormattedMessage
+                    id="PqMbma"
+                    defaultMessage="Add Value"
+                    description="add attribute value"
+                  />
+                ) : (
+                  <FormattedMessage
+                    id="XYhE8p"
+                    defaultMessage="Edit Value"
+                    description="edit attribute value"
+                  />
+                )}
+              </DashboardModal.Title>
+
               <TextField
                 data-test-id="value-name"
                 autoFocus
@@ -88,6 +84,7 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
                 value={data.name}
                 onChange={change}
               />
+
               {isSwatch && (
                 <AttributeSwatchField
                   data={data}
@@ -97,22 +94,23 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
                   set={set}
                 />
               )}
-            </DialogContent>
-            <DialogActions>
-              <BackButton onClick={onClose} />
-              <ConfirmButton
-                data-test-id="submit"
-                transitionState={confirmButtonState}
-                disabled={data.name === ""}
-                onClick={submit}
-              >
-                <FormattedMessage {...buttonMessages.save} />
-              </ConfirmButton>
-            </DialogActions>
-          </>
-        )}
-      </Form>
-    </Dialog>
+
+              <DashboardModal.Actions>
+                <BackButton onClick={onClose} />
+                <ConfirmButton
+                  data-test-id="submit"
+                  transitionState={confirmButtonState}
+                  disabled={data.name === ""}
+                  onClick={submit}
+                >
+                  <FormattedMessage {...buttonMessages.save} />
+                </ConfirmButton>
+              </DashboardModal.Actions>
+            </DashboardModal.Grid>
+          )}
+        </Form>
+      </DashboardModal.Content>
+    </DashboardModal>
   );
 };
 

diff --git a/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx b/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx
diff --git a/src/categories/components/CategoryDeleteDialog/index.ts b/src/categories/components/CategoryDeleteDialog/index.ts