NODEDC_TASKMANAGER/plane-src/apps/web/ce/components/projects/external-contours/actions-menu.tsx

92 lines
3.1 KiB
TypeScript

/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
import { MoreHorizontal, Bell, BellOff } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { getIconButtonStyling } from "@plane/propel/icon-button";
import { CheckCircleFilledIcon, CloseCircleFilledIcon, CopyLinkIcon, NewTabIcon } from "@plane/propel/icons";
import { CustomMenu } from "@plane/ui";
type Props = {
canOpenTargetWorkItem: boolean;
canReviewClosedRequest: boolean;
includeDecisionActions?: boolean;
isSubscribed?: boolean;
isSubscriptionLoading?: boolean;
onAccept?: () => void;
onCopy: () => void;
onDecline?: () => void;
onOpenTarget?: () => void;
onToggleSubscription?: () => void;
};
export const ExternalContourActionsMenu = (props: Props) => {
const {
canOpenTargetWorkItem,
canReviewClosedRequest,
includeDecisionActions = false,
isSubscribed,
isSubscriptionLoading = false,
onAccept,
onCopy,
onDecline,
onOpenTarget,
onToggleSubscription,
} = props;
const { t } = useTranslation();
return (
<CustomMenu
customButton={<MoreHorizontal className="size-4" />}
customButtonClassName={getIconButtonStyling("secondary", "lg")}
placement="bottom-start"
>
{includeDecisionActions && canReviewClosedRequest && onAccept && (
<CustomMenu.MenuItem onClick={onAccept}>
<div className="flex items-center gap-2 text-success-secondary">
<CheckCircleFilledIcon width={14} height={14} />
{t("external_contours_page.actions.accept")}
</div>
</CustomMenu.MenuItem>
)}
{includeDecisionActions && canReviewClosedRequest && onDecline && (
<CustomMenu.MenuItem onClick={onDecline}>
<div className="flex items-center gap-2 text-danger-secondary">
<CloseCircleFilledIcon width={14} height={14} />
{t("external_contours_page.actions.decline")}
</div>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={onCopy}>
<div className="flex items-center gap-2">
<CopyLinkIcon width={14} height={14} />
{t("external_contours_page.actions.copy")}
</div>
</CustomMenu.MenuItem>
{canOpenTargetWorkItem && onOpenTarget && (
<CustomMenu.MenuItem onClick={onOpenTarget}>
<div className="flex items-center gap-2">
<NewTabIcon width={14} height={14} />
{t("external_contours_page.actions.open")}
</div>
</CustomMenu.MenuItem>
)}
{canOpenTargetWorkItem && onToggleSubscription && (
<CustomMenu.MenuItem onClick={onToggleSubscription} disabled={isSubscriptionLoading || isSubscribed === undefined}>
<div className="flex items-center gap-2">
{isSubscribed ? <BellOff width={14} height={14} /> : <Bell width={14} height={14} />}
{isSubscribed ? t("common.actions.unsubscribe") : t("common.actions.subscribe")}
</div>
</CustomMenu.MenuItem>
)}
</CustomMenu>
);
};