♻️ refactor: create transfer project dialog component

packages/frontend/src/components/projects/Dialog/TransferProjectDialog.tsx

@@ -0,0 +1,47 @@
+import ConfirmDialog, {
+  ConfirmDialogProps,
+} from 'components/shared/ConfirmDialog';
+import React from 'react';
+
+interface TransferProjectDialogProps extends ConfirmDialogProps {
+  projectName: string;
+  from: string;
+  to: string;
+}
+
+export const TransferProjectDialog = ({
+  projectName,
+  from,
+  to,
+  open,
+  handleCancel,
+  handleConfirm,
+  ...props
+}: TransferProjectDialogProps) => {
+  return (
+    <ConfirmDialog
+      {...props}
+      dialogTitle="Transfer project?"
+      handleCancel={handleCancel}
+      open={open}
+      confirmButtonTitle="Yes, confirm transfer"
+      handleConfirm={handleConfirm}
+    >
+      <p className="text-sm text-elements-high-em">
+        Upon confirmation, your project{' '}
+        <span className="text-sm font-mono text-elements-on-secondary bg-controls-secondary rounded px-0.5">
+          {projectName}
+        </span>{' '}
+        will be transferred from{' '}
+        <span className="text-sm font-mono text-elements-on-secondary bg-controls-secondary rounded px-0.5">
+          {from}
+        </span>{' '}
+        to{' '}
+        <span className="text-sm font-mono text-elements-on-secondary bg-controls-secondary rounded px-0.5">
+          {to}
+        </span>
+        .
+      </p>
+    </ConfirmDialog>
+  );
+};

packages/frontend/src/pages/org-slug/projects/id/settings/General.tsx

@@ -6,11 +6,11 @@ import { Organization } from 'gql-client';
 
 import { Button, Typography, Input, Option } from '@material-tailwind/react';
 
-import DeleteProjectDialog from '../../../../../components/projects/project/settings/DeleteProjectDialog';
+import DeleteProjectDialog from 'components/projects/project/settings/DeleteProjectDialog';
-import ConfirmDialog from '../../../../../components/shared/ConfirmDialog';
+import { useGQLClient } from 'context/GQLClientContext';
-import { useGQLClient } from '../../../../../context/GQLClientContext';
+import AsyncSelect from 'components/shared/AsyncSelect';
-import AsyncSelect from '../../../../../components/shared/AsyncSelect';
+import { OutletContextType } from 'types';
-import { OutletContextType } from '../../../../../types';
+import { TransferProjectDialog } from 'components/projects/Dialog/TransferProjectDialog';
 
 const CopyIcon = ({ value }: { value: string }) => {
   return (
@@ -230,19 +230,14 @@ const GeneralTabPanel = () => {
             Transfer
           </Button>
         </form>
-        <ConfirmDialog
+        <TransferProjectDialog
-          dialogTitle="Transfer project"
+          handleCancel={() => setOpenTransferDialog(!openTransferDialog)}
-          handleOpen={() => setOpenTransferDialog(!openTransferDialog)}
           open={openTransferDialog}
-          confirmButtonTitle="Yes, Confirm transfer"
           handleConfirm={handleTransferProject}
-          color="blue"
+          projectName={project.name}
-        >
+          from={project.organization.name}
-          <Typography variant="small" placeholder={''}>
+          to={selectedUserOrgName}
-            Upon confirmation, your project {project.name} will be transferred
+        />
-            from {project.organization.name} to {selectedUserOrgName}.
-          </Typography>
-        </ConfirmDialog>
       </div>
       <div className="mb-1">
         <Typography variant="h6" placeholder={''}>