104 lines
4.5 KiB
TypeScript
104 lines
4.5 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 type { ReactNode } from "react";
|
|
import { observer } from "mobx-react";
|
|
import { useTranslation } from "@plane/i18n";
|
|
import type { TExternalContourRequest } from "@plane/types";
|
|
import { Avatar } from "@plane/ui";
|
|
import { renderFormattedDate } from "@plane/utils";
|
|
import { ExternalContourStatePill } from "./state-pill";
|
|
|
|
type Props = {
|
|
contourRequest: TExternalContourRequest;
|
|
};
|
|
|
|
const TraceabilityCell = ({ label, children }: { label: string; children: ReactNode }) => (
|
|
<div className="rounded-md border border-subtle bg-surface-1 p-3">
|
|
<div className="text-11 font-medium text-tertiary">{label}</div>
|
|
<div className="mt-1 min-h-6 text-13 font-medium text-secondary">{children}</div>
|
|
</div>
|
|
);
|
|
|
|
export const ExternalContoursRequestTraceability = observer(function ExternalContoursRequestTraceability(props: Props) {
|
|
const { contourRequest } = props;
|
|
const { t } = useTranslation();
|
|
|
|
const issue = contourRequest.issue;
|
|
const requestedByName = contourRequest.requested_by_name || issue.created_by_detail?.display_name || t("common.none");
|
|
const requestedAt = contourRequest.requested_at || contourRequest.created_at;
|
|
const lastUpdatedAt = issue.updated_at || contourRequest.updated_at;
|
|
const targetProjectName = contourRequest.target_project_name || issue.project_detail?.name || t("common.none");
|
|
const sourceProjectName = contourRequest.source_project_name || t("common.none");
|
|
const sourceDecision =
|
|
contourRequest.source_decision === "accepted"
|
|
? t("external_contours_page.traceability.source_decision_accepted")
|
|
: t("external_contours_page.traceability.source_decision_pending");
|
|
const dueDate = issue.target_date ? renderFormattedDate(issue.target_date) : t("common.none");
|
|
const assigneeDetails = issue.assignee_details ?? [];
|
|
|
|
return (
|
|
<div className="rounded-lg border border-subtle bg-surface-2 p-4">
|
|
<div className="mb-3">
|
|
<h5 className="text-body-sm-medium">{t("external_contours_page.traceability.title")}</h5>
|
|
<p className="mt-1 text-12 text-tertiary">{t("external_contours_page.traceability.description")}</p>
|
|
</div>
|
|
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
<TraceabilityCell label={t("external_contours_page.traceability.source_contour")}>
|
|
{sourceProjectName}
|
|
</TraceabilityCell>
|
|
|
|
<TraceabilityCell label={t("external_contours_page.traceability.target_contour")}>
|
|
{targetProjectName}
|
|
</TraceabilityCell>
|
|
|
|
<TraceabilityCell label={t("external_contours_page.traceability.status")}>
|
|
<ExternalContourStatePill request={contourRequest} />
|
|
</TraceabilityCell>
|
|
|
|
<TraceabilityCell label={t("external_contours_page.traceability.requested_by")}>
|
|
<div className="flex items-center gap-2">
|
|
<Avatar src={issue.created_by_detail?.avatar_url || ""} name={requestedByName} size="md" showTooltip />
|
|
<span>{requestedByName}</span>
|
|
</div>
|
|
</TraceabilityCell>
|
|
|
|
<TraceabilityCell label={t("external_contours_page.traceability.assignee")}>
|
|
{assigneeDetails.length > 0 ? (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{assigneeDetails.map((assignee) => (
|
|
<div key={assignee.id} className="flex items-center gap-2">
|
|
<Avatar src={assignee.avatar_url || ""} name={assignee.display_name || t("common.none")} size="sm" showTooltip />
|
|
<span className="text-12 font-medium text-secondary">{assignee.display_name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
t("external_contours_page.list.unassigned")
|
|
)}
|
|
</TraceabilityCell>
|
|
|
|
<TraceabilityCell label={t("external_contours_page.traceability.source_decision")}>
|
|
{sourceDecision}
|
|
</TraceabilityCell>
|
|
|
|
<TraceabilityCell label={t("external_contours_page.traceability.requested_at")}>
|
|
{requestedAt ? renderFormattedDate(requestedAt) : t("common.none")}
|
|
</TraceabilityCell>
|
|
|
|
<TraceabilityCell label={t("external_contours_page.traceability.last_updated")}>
|
|
{lastUpdatedAt ? renderFormattedDate(lastUpdatedAt) : t("common.none")}
|
|
</TraceabilityCell>
|
|
|
|
<TraceabilityCell label={t("external_contours_page.traceability.due_date")}>
|
|
{dueDate}
|
|
</TraceabilityCell>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|