feat: use ConfirmDialog for ResetPasswordDialog (#2035)

AbhineetJain · web-flow · commit fc38b6181946 · 2022-06-03T17:35:09.000Z
* feat: use ConfirmDialog for ResetPasswordDialog

* fix lint

* make description typography a div

* use paragraph for string description, div otherwise

* fix lint
diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.tsx
@@ -105,7 +105,11 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
         </Typography>
 
         {description && (
-          <Typography className={styles.description} variant="body2">
+          <Typography
+            component={typeof description === "string" ? "p" : "div"}
+            className={styles.description}
+            variant="body2"
+          >
             {description}
           </Typography>
         )}
diff --git a/site/src/components/ResetPasswordDialog/ResetPasswordDialog.tsx b/site/src/components/ResetPasswordDialog/ResetPasswordDialog.tsx
@@ -1,11 +1,9 @@
-import DialogActions from "@material-ui/core/DialogActions"
-import DialogContent from "@material-ui/core/DialogContent"
 import DialogContentText from "@material-ui/core/DialogContentText"
 import { makeStyles } from "@material-ui/core/styles"
 import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
-import { CodeBlock } from "../CodeBlock/CodeBlock"
-import { Dialog, DialogActionButtons, DialogTitle } from "../Dialog/Dialog"
+import { CodeExample } from "../CodeExample/CodeExample"
+import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog"
 
 export interface ResetPasswordDialogProps {
   open: boolean
@@ -36,32 +34,35 @@ export const ResetPasswordDialog: FC<ResetPasswordDialogProps> = ({
 }) => {
   const styles = useStyles()
 
-  return (
-    <Dialog open={open} onClose={onClose}>
-      <DialogTitle title={Language.title} />
-
-      <DialogContent>
-        <DialogContentText variant="subtitle2">{Language.message(user?.username)}</DialogContentText>
-
-        <DialogContentText component="div">
-          <CodeBlock lines={[newPassword ?? ""]} className={styles.codeBlock} />
-        </DialogContentText>
-      </DialogContent>
+  const description = (
+    <>
+      <DialogContentText variant="subtitle2">{Language.message(user?.username)}</DialogContentText>
+      <DialogContentText component="div" className={styles.codeBlock}>
+        <CodeExample code={newPassword ?? ""} className={styles.codeExample} />
+      </DialogContentText>
+    </>
+  )
 
-      <DialogActions>
-        <DialogActionButtons
-          onCancel={onClose}
-          confirmText={Language.confirmText}
-          onConfirm={onConfirm}
-          confirmLoading={loading}
-        />
-      </DialogActions>
-    </Dialog>
+  return (
+    <ConfirmDialog
+      type="info"
+      hideCancel={false}
+      open={open}
+      onConfirm={onConfirm}
+      onClose={onClose}
+      title={Language.title}
+      confirmLoading={loading}
+      confirmText={Language.confirmText}
+      description={description}
+    />
   )
 }
 
 const useStyles = makeStyles(() => ({
   codeBlock: {
+    marginBottom: 0,
+  },
+  codeExample: {
     minHeight: "auto",
     userSelect: "all",
     width: "100%",
