106 lines
5.0 KiB
TypeScript
106 lines
5.0 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 { observer } from "mobx-react";
|
|
import { SignalHigh } from "lucide-react";
|
|
import { ISSUE_PRIORITIES } from "@plane/constants";
|
|
import { useTranslation } from "@plane/i18n";
|
|
import { LabelPropertyIcon, PriorityIcon, PriorityPropertyIcon } from "@plane/propel/icons";
|
|
import type { TIssue } from "@plane/types";
|
|
import { PriorityDropdown } from "@/components/dropdowns/priority";
|
|
import { IssueLabelSelect } from "@/components/issues/select";
|
|
import type { TIssueOperations } from "@/components/issues/issue-detail";
|
|
|
|
type Props = {
|
|
workspaceSlug: string;
|
|
targetProjectId: string;
|
|
issue: Partial<TIssue> & {
|
|
project_detail?: { name?: string } | null;
|
|
};
|
|
issueOperations: TIssueOperations;
|
|
isEditable: boolean;
|
|
};
|
|
|
|
export const ExternalContoursIssueContentProperties = observer(function ExternalContoursIssueContentProperties(props: Props) {
|
|
const { workspaceSlug, targetProjectId, issue, issueOperations, isEditable } = props;
|
|
const { t } = useTranslation();
|
|
const selectedLabels = issue.label_details ?? [];
|
|
const priorityDetails = ISSUE_PRIORITIES.find((priority) => priority.key === issue?.priority);
|
|
|
|
if (!issue || !issue?.id) return <></>;
|
|
|
|
return (
|
|
<div className="flex w-full flex-col">
|
|
<div className="w-full overflow-visible">
|
|
<h5 className="mb-2 text-body-sm-medium">{t("external_contours_page.properties.section_title")}</h5>
|
|
<div className={`${!isEditable ? "opacity-60" : ""}`}>
|
|
<div className="flex flex-col gap-3">
|
|
<div className="nodedc-external-property-row">
|
|
<div className="nodedc-external-property-label">
|
|
<PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
|
|
<span>{t("priority")}</span>
|
|
</div>
|
|
<PriorityDropdown
|
|
value={issue?.priority}
|
|
onChange={(val) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { priority: val })}
|
|
disabled={!isEditable}
|
|
placement="top-start"
|
|
buttonVariant="transparent-without-text"
|
|
className="flex-1 overflow-visible"
|
|
buttonContainerClassName="nodedc-external-property-control-shell h-full w-full overflow-visible rounded-[1.25rem] border-0 bg-transparent shadow-none outline-none"
|
|
button={
|
|
<div className="nodedc-external-property-control text-[13px] font-medium">
|
|
{issue.priority && issue.priority !== "none" ? (
|
|
<PriorityIcon priority={issue.priority} className="h-3.5 w-3.5 flex-shrink-0" />
|
|
) : (
|
|
<SignalHigh className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
|
|
)}
|
|
<span className={issue.priority && issue.priority !== "none" ? "text-primary" : "text-tertiary"}>
|
|
{issue.priority && issue.priority !== "none"
|
|
? priorityDetails?.title
|
|
: t("external_contours_page.form.priority")}
|
|
</span>
|
|
</div>
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className="nodedc-external-property-row">
|
|
<div className="nodedc-external-property-label">
|
|
<LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
|
|
<span>{t("labels")}</span>
|
|
</div>
|
|
<div className="h-full min-h-8 flex-1 overflow-visible">
|
|
<IssueLabelSelect
|
|
value={issue.label_ids || []}
|
|
onChange={(labelIds) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { label_ids: labelIds })}
|
|
projectId={targetProjectId}
|
|
disabled={!isEditable}
|
|
placement="top-start"
|
|
rootClassName="w-full overflow-visible"
|
|
buttonContainerClassName="nodedc-external-property-control-shell h-full w-full overflow-visible rounded-[1.25rem] border-0 bg-transparent shadow-none outline-none"
|
|
label={
|
|
<div className="nodedc-external-property-control text-[13px] font-medium">
|
|
<LabelPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
|
|
<span className={selectedLabels.length > 0 ? "truncate text-primary" : "truncate text-tertiary"}>
|
|
{selectedLabels.length > 0
|
|
? selectedLabels.length === 1
|
|
? selectedLabels[0]?.name
|
|
: `${selectedLabels.length} ${t("labels").toLocaleLowerCase()}`
|
|
: t("labels")}
|
|
</span>
|
|
</div>
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|