Migrate ActionDialog, migrate some Dialog to DashboardModal

.changeset/fair-masks-dance.md

@@ -0,0 +1,7 @@
+---
+"saleor-dashboard": patch
+---
+
+Drop legacy Dialog and replace it with new macaw Dialog component in action dialogs, 
+order change warehouse dialog, order payment dialog, add staff member dialog, 
+staff user password restart dialog, tax select country dialog.

playwright/pages/dialogs/draftOrderCreateDialog.ts

@@ -7,7 +7,7 @@ export class DraftOrderCreateDialog {
     page: Page,
     readonly channelNameInput = page.getByTestId("channel-autocomplete"),
     readonly confirmButton = page.getByTestId("submit"),
-    readonly channelOption = page.locator("[data-test-id*='select-field-option']"),
+    readonly channelOption = page.getByTestId("select-option"),
   ) {
     this.page = page;
   }

playwright/pages/dialogs/orderCreateDialog.ts

@@ -7,7 +7,7 @@ export class OrderCreateDialog {
     page: Page,
     readonly channelNameInput = page.getByTestId("channel-autocomplete"),
     readonly confirmButton = page.getByTestId("submit"),
-    readonly channelOption = page.locator("[data-test-id*='select-field-option']"),
+    readonly channelOption = page.getByTestId("select-option"),
   ) {
     this.page = page;
   }

src/apps/components/AppActivateDialog/AppActivateDialog.tsx

@@ -2,7 +2,7 @@ import ActionDialog from "@dashboard/components/ActionDialog";
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { buttonMessages } from "@dashboard/intl";
 import { getStringOrPlaceholder } from "@dashboard/misc";
-import { DialogContentText } from "@material-ui/core";
+import { Box } from "@saleor/macaw-ui-next";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -45,7 +45,7 @@ const AppActivateDialog: React.FC<AppActivateDialogProps> = ({
       title={intl.formatMessage(msgs.activateAppTitle)}
       variant="default"
     >
-      <DialogContentText data-test-id="dialog-content">{getMainText()}</DialogContentText>
+      <Box data-test-id="dialog-content">{getMainText()}</Box>
     </ActionDialog>
   );
 };

src/apps/components/AppDeactivateDialog/AppDeactivateDialog.tsx

@@ -2,7 +2,7 @@ import ActionDialog from "@dashboard/components/ActionDialog";
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { buttonMessages } from "@dashboard/intl";
 import { getStringOrPlaceholder } from "@dashboard/misc";
-import { DialogContentText } from "@material-ui/core";
+import { Box } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -47,15 +47,15 @@ const AppDeactivateDialog: React.FC<AppDeactivateDialogProps> = ({
       title={intl.formatMessage(msgs.deactivateAppTitle)}
       variant="delete"
     >
-      <DialogContentText data-test-id="dialog-content">
+      <Box data-test-id="dialog-content">
         {getMainText()}
         {thirdParty && (
           <>
             {" "}
             <FormattedMessage {...msgs.deactivateAppBillingInfo} />
           </>
         )}
-      </DialogContentText>
+      </Box>
     </ActionDialog>
   );
 };

src/apps/components/AppDeleteDialog/AppDeleteDialog.tsx

@@ -1,7 +1,6 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { getStringOrPlaceholder } from "@dashboard/misc";
-import { DialogContentText } from "@material-ui/core";
 import { Box, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -56,8 +55,9 @@ const AppDeleteDialog: React.FC<AppDeleteDialogProps> = ({
       onConfirm={onConfirm}
       title={intl.formatMessage(msgs.deleteAppTitle)}
       variant="delete"
+      size="lg"
     >
-      <DialogContentText data-test-id="dialog-content" style={{ marginTop: "-12px" }}>
+      <Box data-test-id="dialog-content">
         <Box
           backgroundColor="warning1"
           padding={2}
@@ -70,7 +70,7 @@ const AppDeleteDialog: React.FC<AppDeleteDialogProps> = ({
           <Text size={2}>{intl.formatMessage(msgs.deleteAppWarning)}</Text>
         </Box>
         {getMainText()} <FormattedMessage {...msgs.deleteAppQuestion} />
-      </DialogContentText>
+      </Box>
     </ActionDialog>
   );
 };

src/apps/components/AppDialog/AppDialog.tsx

@@ -1,35 +1,26 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogProps,
-  DialogTitle,
-  IconButton,
-  Typography,
-} from "@material-ui/core";
-import CloseIcon from "@material-ui/icons/Close";
+import { DashboardModal } from "@dashboard/components/Modal";
+import { Box } from "@saleor/macaw-ui-next";
 import React from "react";
 
-import { useStyles } from "./styles";
-
-interface AppDialogProps extends DialogProps {
+interface AppDialogProps {
+  title?: string;
   onClose: () => void;
+  open: boolean;
 }
 
-export const AppDialog: React.FC<AppDialogProps> = ({ children, ...props }) => {
-  const classes = useStyles();
-
+export const AppDialog: React.FC<AppDialogProps> = ({ children, title, onClose, ...props }) => {
   return (
-    <Dialog aria-labelledby="extension app dialog" {...props}>
-      <DialogTitle disableTypography className={classes.header}>
-        <Typography variant="h6" component="h2">
-          {props.title}
-        </Typography>
-        <IconButton color="inherit" onClick={props.onClose} aria-label="close">
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
-      <DialogContent className={classes.content}>{children}</DialogContent>
-    </Dialog>
+    <DashboardModal aria-labelledby="extension app dialog" {...props} onChange={onClose}>
+      <DashboardModal.Content>
+        <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
+          {title}
+          <DashboardModal.Close onClose={onClose}></DashboardModal.Close>
+        </DashboardModal.Title>
+        <Box __width={600} __height={600}>
+          {children}
+        </Box>
+      </DashboardModal.Content>
+    </DashboardModal>
   );
 };
 

src/apps/components/AppInProgressDeleteDialog/AppInProgressDeleteDialog.tsx

@@ -1,7 +1,7 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { getStringOrPlaceholder } from "@dashboard/misc";
-import { DialogContentText } from "@material-ui/core";
+import { Box } from "@saleor/macaw-ui-next";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -43,7 +43,7 @@ const AppInProgressDeleteDialog = ({
       title={intl.formatMessage(msgs.header)}
       variant="delete"
     >
-      <DialogContentText data-test-id="dialog-content">{getMainText()}</DialogContentText>
+      <Box data-test-id="dialog-content">{getMainText()}</Box>
     </ActionDialog>
   );
 };

src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.tsx

@@ -1,6 +1,5 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
-import { DialogContentText } from "@material-ui/core";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -35,18 +34,16 @@ const AttributeBulkDeleteDialog: React.FC<AttributeBulkDeleteDialogProps> = ({
       variant="delete"
       data-test-id="attribute-bulk-delete-dialog"
     >
-      <DialogContentText>
-        <FormattedMessage
-          id="lG/MDw"
-          defaultMessage="{counter,plural,one{Are you sure you want to delete this attribute?} other{Are you sure you want to delete {displayQuantity} attributes?}}"
-          data-test-id="delete-attr-from-list-dialog-text"
-          description="dialog content"
-          values={{
-            counter: quantity,
-            displayQuantity: <strong>{quantity}</strong>,
-          }}
-        />
-      </DialogContentText>
+      <FormattedMessage
+        id="lG/MDw"
+        defaultMessage="{counter,plural,one{Are you sure you want to delete this attribute?} other{Are you sure you want to delete {displayQuantity} attributes?}}"
+        data-test-id="delete-attr-from-list-dialog-text"
+        description="dialog content"
+        values={{
+          counter: quantity,
+          displayQuantity: <strong>{quantity}</strong>,
+        }}
+      />
     </ActionDialog>
   );
 };

src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.tsx

@@ -1,6 +1,5 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
-import { DialogContentText } from "@material-ui/core";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -34,17 +33,15 @@ const AttributeDeleteDialog: React.FC<AttributeDeleteDialogProps> = ({
         description: "dialog title",
       })}
     >
-      <DialogContentText>
-        <FormattedMessage
-          id="h1rPPg"
-          defaultMessage="Are you sure you want to delete {attributeName}?"
-          description="dialog content"
-          data-test-id="delete-single-attr-dialog-text"
-          values={{
-            attributeName: <strong>{name}</strong>,
-          }}
-        />
-      </DialogContentText>
+      <FormattedMessage
+        id="h1rPPg"
+        defaultMessage="Are you sure you want to delete {attributeName}?"
+        description="dialog content"
+        data-test-id="delete-single-attr-dialog-text"
+        values={{
+          attributeName: <strong>{name}</strong>,
+        }}
+      />
     </ActionDialog>
   );
 };

src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.tsx

@@ -1,6 +1,5 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
-import { DialogContentText } from "@material-ui/core";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -38,28 +37,26 @@ const AttributeValueDeleteDialog: React.FC<AttributeValueDeleteDialogProps> = ({
         description: "dialog title",
       })}
     >
-      <DialogContentText>
-        {useName ? (
-          <FormattedMessage
-            data-test-id="delete-attribute-value-dialog-text"
-            id="no3Ygn"
-            defaultMessage='Are you sure you want to delete "{name}" value? If you delete it you won’t be able to assign it to any of the products with "{attributeName}" attribute.'
-            values={{
-              attributeName,
-              name,
-            }}
-          />
-        ) : (
-          <FormattedMessage
-            id="JyQoES"
-            defaultMessage='Are you sure you want to delete "{name}" value?'
-            description="delete attribute value"
-            values={{
-              name,
-            }}
-          />
-        )}
-      </DialogContentText>
+      {useName ? (
+        <FormattedMessage
+          data-test-id="delete-attribute-value-dialog-text"
+          id="no3Ygn"
+          defaultMessage='Are you sure you want to delete "{name}" value? If you delete it you won’t be able to assign it to any of the products with "{attributeName}" attribute.'
+          values={{
+            attributeName,
+            name,
+          }}
+        />
+      ) : (
+        <FormattedMessage
+          id="JyQoES"
+          defaultMessage='Are you sure you want to delete "{name}" value?'
+          description="delete attribute value"
+          values={{
+            name,
+          }}
+        />
+      )}
     </ActionDialog>
   );
 };