From e4fdae332956104190c52989d014fce09b6d9d4e Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Thu, 14 Mar 2024 21:57:00 +0700
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20create=20disco?=
 =?UTF-8?q?nnect=20repository=20dialog=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DisconnectRepositoryDialog.tsx     | 30 +++++++++++++++++++
 .../project/settings/RepoConnectedSection.tsx | 18 ++++-------
 2 files changed, 35 insertions(+), 13 deletions(-)
 create mode 100644 packages/frontend/src/components/projects/Dialog/DisconnectRepositoryDialog.tsx

diff --git a/packages/frontend/src/components/projects/Dialog/DisconnectRepositoryDialog.tsx b/packages/frontend/src/components/projects/Dialog/DisconnectRepositoryDialog.tsx
new file mode 100644
index 00000000..52ac52f8
--- /dev/null
+++ b/packages/frontend/src/components/projects/Dialog/DisconnectRepositoryDialog.tsx
@@ -0,0 +1,30 @@
+import ConfirmDialog, {
+  ConfirmDialogProps,
+} from 'components/shared/ConfirmDialog';
+import React from 'react';
+
+interface DisconnectRepositoryDialogProps extends ConfirmDialogProps {}
+
+export const DisconnectRepositoryDialog = ({
+  open,
+  handleCancel,
+  handleConfirm,
+  ...props
+}: DisconnectRepositoryDialogProps) => {
+  return (
+    <ConfirmDialog
+      {...props}
+      dialogTitle="Disconnect repository?"
+      handleCancel={handleCancel}
+      open={open}
+      confirmButtonTitle="Yes, confirm disconnect"
+      handleConfirm={handleConfirm}
+      confirmButtonProps={{ variant: 'danger' }}
+    >
+      <p className="text-sm text-elements-high-em">
+        Any data tied to your Git project may become misconfigured. Are you sure
+        you want to continue?
+      </p>
+    </ConfirmDialog>
+  );
+};
diff --git a/packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx b/packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx
index 594062fe..f0a35e97 100644
--- a/packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx
+++ b/packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx
@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 
 import { Button, Typography } from '@material-tailwind/react';
 
-import { GitRepositoryDetails } from '../../../../types';
-import ConfirmDialog from '../../../shared/ConfirmDialog';
+import { GitRepositoryDetails } from 'types';
+import { DisconnectRepositoryDialog } from 'components/projects/Dialog/DisconnectRepositoryDialog';
 
 const RepoConnectedSection = ({
   linkedRepo,
@@ -34,21 +34,13 @@ const RepoConnectedSection = ({
           ^ Disconnect
         </Button>
       </div>
-      <ConfirmDialog
-        dialogTitle="Disconnect repository?"
-        handleOpen={() => setDisconnectRepoDialogOpen((preVal) => !preVal)}
+      <DisconnectRepositoryDialog
+        handleCancel={() => setDisconnectRepoDialogOpen((preVal) => !preVal)}
         open={disconnectRepoDialogOpen}
-        confirmButtonTitle="Yes, confirm disconnect"
         handleConfirm={() => {
           setDisconnectRepoDialogOpen((preVal) => !preVal);
         }}
-        color="red"
-      >
-        <Typography variant="small" placeholder={''}>
-          Any data tied to your Git project may become misconfigured. Are you
-          sure you want to continue?
-        </Typography>
-      </ConfirmDialog>
+      />
     </div>
   );
 };