From 608e193c36cab6305f54c2ce851e5fdb579ee929 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 31 May 2024 17:40:21 +0530
Subject: [PATCH] chore: added primary variant to the alert modal (#4664)

---
 web/components/api-token/delete-token-modal.tsx   |  2 +-
 web/components/core/modals/alert-modal.tsx        | 15 +++++++++------
 web/components/cycles/delete-modal.tsx            |  2 +-
 .../estimates/delete-estimate-modal.tsx           |  2 +-
 .../inbox/modals/decline-issue-modal.tsx          |  2 +-
 .../inbox/modals/delete-issue-modal.tsx           |  2 +-
 .../issues/attachment/delete-attachment-modal.tsx |  2 +-
 web/components/issues/delete-issue-modal.tsx      |  2 +-
 web/components/labels/delete-label-modal.tsx      |  2 +-
 web/components/modules/delete-module-modal.tsx    |  2 +-
 web/components/pages/modals/delete-page-modal.tsx |  2 +-
 web/components/states/delete-state-modal.tsx      |  2 +-
 web/components/views/delete-view-modal.tsx        |  2 +-
 web/components/web-hooks/delete-webhook-modal.tsx |  2 +-
 .../workspace/views/delete-view-modal.tsx         |  2 +-
 15 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/web/components/api-token/delete-token-modal.tsx b/web/components/api-token/delete-token-modal.tsx
index 014531c42..6918df463 100644
--- a/web/components/api-token/delete-token-modal.tsx
+++ b/web/components/api-token/delete-token-modal.tsx
@@ -69,7 +69,7 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
     <AlertModalCore
       handleClose={handleClose}
       handleSubmit={handleDeletion}
-      isDeleting={deleteLoading}
+      isSubmitting={deleteLoading}
       isOpen={isOpen}
       title="Delete API token"
       content={
diff --git a/web/components/core/modals/alert-modal.tsx b/web/components/core/modals/alert-modal.tsx
index fbc5e2503..d864c2b38 100644
--- a/web/components/core/modals/alert-modal.tsx
+++ b/web/components/core/modals/alert-modal.tsx
@@ -1,4 +1,4 @@
-import { AlertTriangle, LucideIcon } from "lucide-react";
+import { AlertTriangle, Info, LucideIcon } from "lucide-react";
 // ui
 import { Button, TButtonVariant } from "@plane/ui";
 // components
@@ -6,14 +6,14 @@ import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 // helpers
 import { cn } from "@/helpers/common.helper";
 
-export type TModalVariant = "danger";
+export type TModalVariant = "danger" | "primary";
 
 type Props = {
   content: React.ReactNode | string;
   handleClose: () => void;
   handleSubmit: () => Promise<void>;
   hideIcon?: boolean;
-  isDeleting: boolean;
+  isSubmitting: boolean;
   isOpen: boolean;
   position?: EModalPosition;
   primaryButtonText?: {
@@ -28,14 +28,17 @@ type Props = {
 
 const VARIANT_ICONS: Record<TModalVariant, LucideIcon> = {
   danger: AlertTriangle,
+  primary: Info,
 };
 
 const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = {
   danger: "danger",
+  primary: "primary",
 };
 
 const VARIANT_CLASSES: Record<TModalVariant, string> = {
   danger: "bg-red-500/20 text-red-500",
+  primary: "bg-custom-primary-100/20 text-custom-primary-100",
 };
 
 export const AlertModalCore: React.FC<Props> = (props) => {
@@ -44,7 +47,7 @@ export const AlertModalCore: React.FC<Props> = (props) => {
     handleClose,
     handleSubmit,
     hideIcon = false,
-    isDeleting,
+    isSubmitting,
     isOpen,
     position = EModalPosition.CENTER,
     primaryButtonText = {
@@ -81,8 +84,8 @@ export const AlertModalCore: React.FC<Props> = (props) => {
         <Button variant="neutral-primary" size="sm" onClick={handleClose}>
           {secondaryButtonText}
         </Button>
-        <Button variant={BUTTON_VARIANTS[variant]} size="sm" tabIndex={1} onClick={handleSubmit} loading={isDeleting}>
-          {isDeleting ? primaryButtonText.loading : primaryButtonText.default}
+        <Button variant={BUTTON_VARIANTS[variant]} size="sm" tabIndex={1} onClick={handleSubmit} loading={isSubmitting}>
+          {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
         </Button>
       </div>
     </ModalCore>
diff --git a/web/components/cycles/delete-modal.tsx b/web/components/cycles/delete-modal.tsx
index 48b2a64c4..9a6578f49 100644
--- a/web/components/cycles/delete-modal.tsx
+++ b/web/components/cycles/delete-modal.tsx
@@ -73,7 +73,7 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
     <AlertModalCore
       handleClose={handleClose}
       handleSubmit={formSubmit}
-      isDeleting={loader}
+      isSubmitting={loader}
       isOpen={isOpen}
       title="Delete Cycle"
       content={
diff --git a/web/components/estimates/delete-estimate-modal.tsx b/web/components/estimates/delete-estimate-modal.tsx
index e77c3ecb0..d0949316f 100644
--- a/web/components/estimates/delete-estimate-modal.tsx
+++ b/web/components/estimates/delete-estimate-modal.tsx
@@ -64,7 +64,7 @@ export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
     <AlertModalCore
       handleClose={onClose}
       handleSubmit={handleEstimateDelete}
-      isDeleting={isDeleteLoading}
+      isSubmitting={isDeleteLoading}
       isOpen={isOpen}
       title="Delete Estimate"
       content={
diff --git a/web/components/inbox/modals/decline-issue-modal.tsx b/web/components/inbox/modals/decline-issue-modal.tsx
index 5c7b35a1c..4ca784ec1 100644
--- a/web/components/inbox/modals/decline-issue-modal.tsx
+++ b/web/components/inbox/modals/decline-issue-modal.tsx
@@ -36,7 +36,7 @@ export const DeclineIssueModal: React.FC<Props> = (props) => {
     <AlertModalCore
       handleClose={handleClose}
       handleSubmit={handleDecline}
-      isDeleting={isDeclining}
+      isSubmitting={isDeclining}
       isOpen={isOpen}
       title="Decline Issue"
       content={
diff --git a/web/components/inbox/modals/delete-issue-modal.tsx b/web/components/inbox/modals/delete-issue-modal.tsx
index 5b1c00419..5ad88d1c5 100644
--- a/web/components/inbox/modals/delete-issue-modal.tsx
+++ b/web/components/inbox/modals/delete-issue-modal.tsx
@@ -36,7 +36,7 @@ export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClos
     <AlertModalCore
       handleClose={handleClose}
       handleSubmit={handleDelete}
-      isDeleting={isDeleting}
+      isSubmitting={isDeleting}
       isOpen={isOpen}
       title="Delete Issue"
       content={
diff --git a/web/components/issues/attachment/delete-attachment-modal.tsx b/web/components/issues/attachment/delete-attachment-modal.tsx
index 94ff60c94..98687f538 100644
--- a/web/components/issues/attachment/delete-attachment-modal.tsx
+++ b/web/components/issues/attachment/delete-attachment-modal.tsx
@@ -35,7 +35,7 @@ export const IssueAttachmentDeleteModal: FC<Props> = (props) => {
     <AlertModalCore
       handleClose={handleClose}
       handleSubmit={() => handleDeletion(data.id)}
-      isDeleting={loader}
+      isSubmitting={loader}
       isOpen={isOpen}
       title="Delete attachment"
       content={
diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
index 49c1a8700..46f8e733d 100644
--- a/web/components/issues/delete-issue-modal.tsx
+++ b/web/components/issues/delete-issue-modal.tsx
@@ -66,7 +66,7 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
     <AlertModalCore
       handleClose={onClose}
       handleSubmit={handleIssueDelete}
-      isDeleting={isDeleting}
+      isSubmitting={isDeleting}
       isOpen={isOpen}
       title="Delete Issue"
       content={
diff --git a/web/components/labels/delete-label-modal.tsx b/web/components/labels/delete-label-modal.tsx
index 191667b1c..cb1943f05 100644
--- a/web/components/labels/delete-label-modal.tsx
+++ b/web/components/labels/delete-label-modal.tsx
@@ -56,7 +56,7 @@ export const DeleteLabelModal: React.FC<Props> = observer((props) => {
     <AlertModalCore
       handleClose={handleClose}
       handleSubmit={handleDeletion}
-      isDeleting={isDeleteLoading}
+      isSubmitting={isDeleteLoading}
       isOpen={isOpen}
       title="Delete Label"
       content={
diff --git a/web/components/modules/delete-module-modal.tsx b/web/components/modules/delete-module-modal.tsx
index ffafdb1ec..a19afb4d4 100644
--- a/web/components/modules/delete-module-modal.tsx
+++ b/web/components/modules/delete-module-modal.tsx
@@ -73,7 +73,7 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
     <AlertModalCore
       handleClose={handleClose}
       handleSubmit={handleDeletion}
-      isDeleting={isDeleteLoading}
+      isSubmitting={isDeleteLoading}
       isOpen={isOpen}
       title="Delete Module"
       content={
diff --git a/web/components/pages/modals/delete-page-modal.tsx b/web/components/pages/modals/delete-page-modal.tsx
index ea6dbb569..61a2e2ad9 100644
--- a/web/components/pages/modals/delete-page-modal.tsx
+++ b/web/components/pages/modals/delete-page-modal.tsx
@@ -74,7 +74,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
     <AlertModalCore
       handleClose={handleClose}
       handleSubmit={handleDelete}
-      isDeleting={isDeleting}
+      isSubmitting={isDeleting}
       isOpen={isOpen}
       title="Delete Page"
       content={
diff --git a/web/components/states/delete-state-modal.tsx b/web/components/states/delete-state-modal.tsx
index 1fd256d65..353f88a45 100644
--- a/web/components/states/delete-state-modal.tsx
+++ b/web/components/states/delete-state-modal.tsx
@@ -81,7 +81,7 @@ export const DeleteStateModal: React.FC<Props> = observer((props) => {
     <AlertModalCore
       handleClose={handleClose}
       handleSubmit={handleDeletion}
-      isDeleting={isDeleteLoading}
+      isSubmitting={isDeleteLoading}
       isOpen={isOpen}
       title="Delete State"
       content={
diff --git a/web/components/views/delete-view-modal.tsx b/web/components/views/delete-view-modal.tsx
index 38524f83b..2555ceb41 100644
--- a/web/components/views/delete-view-modal.tsx
+++ b/web/components/views/delete-view-modal.tsx
@@ -62,7 +62,7 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
     <AlertModalCore
       handleClose={handleClose}
       handleSubmit={handleDeleteView}
-      isDeleting={isDeleteLoading}
+      isSubmitting={isDeleteLoading}
       isOpen={isOpen}
       title="Delete View"
       content={
diff --git a/web/components/web-hooks/delete-webhook-modal.tsx b/web/components/web-hooks/delete-webhook-modal.tsx
index 9a579afd8..a8d3ae429 100644
--- a/web/components/web-hooks/delete-webhook-modal.tsx
+++ b/web/components/web-hooks/delete-webhook-modal.tsx
@@ -55,7 +55,7 @@ export const DeleteWebhookModal: FC<IDeleteWebhook> = (props) => {
     <AlertModalCore
       handleClose={handleClose}
       handleSubmit={handleDelete}
-      isDeleting={isDeleting}
+      isSubmitting={isDeleting}
       isOpen={isOpen}
       title="Delete webhook"
       content={
diff --git a/web/components/workspace/views/delete-view-modal.tsx b/web/components/workspace/views/delete-view-modal.tsx
index b38799d91..fadf62271 100644
--- a/web/components/workspace/views/delete-view-modal.tsx
+++ b/web/components/workspace/views/delete-view-modal.tsx
@@ -67,7 +67,7 @@ export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
     <AlertModalCore
       handleClose={handleClose}
       handleSubmit={handleDeletion}
-      isDeleting={isDeleteLoading}
+      isSubmitting={isDeleteLoading}
       isOpen={isOpen}
       title="Delete View"
       content={