73 lines
3.0 KiB
TypeScript
73 lines
3.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 { useTranslation } from "@plane/i18n";
|
|
import { LabelPropertyIcon, 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();
|
|
|
|
if (!issue || !issue?.id) return <></>;
|
|
|
|
return (
|
|
<div className="flex w-full flex-col divide-y-2 divide-subtle-1">
|
|
<div className="w-full overflow-y-auto">
|
|
<h5 className="mb-2 text-body-sm-medium">{t("external_contours_page.properties.section_title")}</h5>
|
|
<div className={`divide-y-2 divide-subtle-1 ${!isEditable ? "opacity-60" : ""}`}>
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex h-8 items-center gap-2">
|
|
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
|
|
<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}
|
|
buttonVariant="border-with-text"
|
|
className="w-3/5 flex-grow rounded-sm px-2 hover:bg-layer-1"
|
|
buttonContainerClassName="w-full text-left"
|
|
buttonClassName="h-auto w-min whitespace-nowrap"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex min-h-8 items-center gap-2">
|
|
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
|
|
<LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
|
|
<span>{t("labels")}</span>
|
|
</div>
|
|
<div className="h-full min-h-8 w-3/5 flex-grow pt-1">
|
|
<IssueLabelSelect
|
|
value={issue.label_ids || []}
|
|
onChange={(labelIds) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { label_ids: labelIds })}
|
|
projectId={targetProjectId}
|
|
disabled={!isEditable}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|