thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: added primary variant to the alert modal (#4664)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2024-05-31 17:40:21 +05:30 committed by GitHub
parent 830f0861c1
commit 608e193c36
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/api-token/delete-token-modal.tsx
View File

@ -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={

15
web/components/core/modals/alert-modal.tsx
View File

@ -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>

2
web/components/cycles/delete-modal.tsx
View File

@ -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={

2
web/components/estimates/delete-estimate-modal.tsx
View File

@ -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={

2
web/components/inbox/modals/decline-issue-modal.tsx
View File

@ -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={

2
web/components/inbox/modals/delete-issue-modal.tsx
View File

@ -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={

2
web/components/issues/attachment/delete-attachment-modal.tsx
View File

@ -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={

2
web/components/issues/delete-issue-modal.tsx
View File

@ -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={

2
web/components/labels/delete-label-modal.tsx
View File

@ -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={

2
web/components/modules/delete-module-modal.tsx
View File

@ -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={

2
web/components/pages/modals/delete-page-modal.tsx
View File

@ -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={

2
web/components/states/delete-state-modal.tsx
View File

@ -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={

2
web/components/views/delete-view-modal.tsx
View File

@ -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={

2
web/components/web-hooks/delete-webhook-modal.tsx
View File

@ -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={

2
web/components/workspace/views/delete-view-modal.tsx
View File

@ -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={