UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: новый канон внешних контуров и стандартизация свойств

plane-src/apps/web/ce/components/projects/external-contours/empty-state.tsx

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Layers3 } from "lucide-react";
+import { cn } from "@plane/utils";
+
+type Props = {
+  title: string;
+  description?: string;
+  compact?: boolean;
+};
+
+export const ExternalContoursEmptyState = (props: Props) => {
+  const { title, description, compact = false } = props;
+
+  return (
+    <div className={cn("nodedc-external-empty-state", compact ? "max-w-md" : "max-w-sm")}>
+      <div className={cn("nodedc-external-empty-media", compact ? "size-22" : "size-24")}>
+        <Layers3 className={cn(compact ? "size-10" : "size-11")} strokeWidth={1.6} />
+      </div>
+      <div className="space-y-2">
+        <h3 className={cn("font-semibold text-primary", compact ? "text-16" : "text-18")}>{title}</h3>
+        {description && <p className="mx-auto max-w-sm text-13 leading-6 text-secondary">{description}</p>}
+      </div>
+    </div>
+  );
+};

plane-src/apps/web/ce/components/projects/external-contours/header.tsx

@@ -69,7 +69,12 @@ export const ProjectExternalContoursHeader = observer(function ProjectExternalCo
               modalState={createIssueModal}
               handleModalClose={() => setCreateIssueModal(false)}
             />
-            <Button variant="primary" size="lg" onClick={() => setCreateIssueModal(true)}>
+            <Button
+              variant="primary"
+              size="lg"
+              onClick={() => setCreateIssueModal(true)}
+              className="nodedc-external-primary-button min-w-[10.75rem]"
+            >
               {t("external_contours_page.header.add_request")}
             </Button>
           </div>

plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx

@@ -8,7 +8,6 @@ import { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { PanelLeft } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { Badge } from "@plane/propel/badge";
 import { Button } from "@plane/propel/button";
 import { IconButton } from "@plane/propel/icon-button";
 import { CheckCircleFilledIcon, ChevronDownIcon, ChevronUpIcon, CloseCircleFilledIcon, LinkIcon, NewTabIcon } from "@plane/propel/icons";
@@ -150,8 +149,22 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
 
         <div className="flex items-center gap-2">
           <div className="flex items-center gap-x-2">
-            <IconButton variant="secondary" size="lg" icon={ChevronUpIcon} aria-label="Previous request" onClick={() => redirectToRelativeIssue("prev")} />
-            <IconButton variant="secondary" size="lg" icon={ChevronDownIcon} aria-label="Next request" onClick={() => redirectToRelativeIssue("next")} />
+            <IconButton
+              variant="secondary"
+              size="lg"
+              icon={ChevronUpIcon}
+              aria-label="Previous request"
+              onClick={() => redirectToRelativeIssue("prev")}
+              className="nodedc-external-icon-button"
+            />
+            <IconButton
+              variant="secondary"
+              size="lg"
+              icon={ChevronDownIcon}
+              aria-label="Next request"
+              onClick={() => redirectToRelativeIssue("next")}
+              className="nodedc-external-icon-button"
+            />
           </div>
 
           <div className="flex flex-wrap items-center gap-2">
@@ -169,7 +182,9 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
             )}
 
             {isSourceAccepted && (
-              <Badge variant="neutral">{t("external_contours_page.traceability.source_decision_accepted")}</Badge>
+              <div className="nodedc-external-readonly-value min-h-[2.75rem] w-auto px-4 text-13 font-medium">
+                {t("external_contours_page.traceability.source_decision_accepted")}
+              </div>
             )}
 
             <Button
@@ -211,7 +226,9 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
               </>
             )}
             {isSourceAccepted && (
-              <Badge variant="neutral">{t("external_contours_page.traceability.source_decision_accepted")}</Badge>
+              <div className="nodedc-external-readonly-value min-h-10 w-auto px-4 text-13 font-medium">
+                {t("external_contours_page.traceability.source_decision_accepted")}
+              </div>
             )}
             {hasDirectTargetAccess && (
               <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">

plane-src/apps/web/ce/components/projects/external-contours/issue-properties.tsx

@@ -5,6 +5,8 @@
  */
 
 import { observer } from "mobx-react";
+import { SignalHigh } from "lucide-react";
+import { ISSUE_PRIORITIES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { LabelPropertyIcon, PriorityPropertyIcon } from "@plane/propel/icons";
 import type { TIssue } from "@plane/types";
@@ -25,17 +27,19 @@ type Props = {
 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="nodedc-external-section flex w-full flex-col px-4 py-4">
+    <div className="flex w-full flex-col">
       <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={`${!isEditable ? "opacity-60" : ""}`}>
           <div className="flex flex-col gap-3">
-            <div className="nodedc-external-panel flex min-h-12 items-center gap-3 px-4 py-3">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1.5 text-13 text-tertiary">
+            <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>
@@ -43,24 +47,51 @@ export const ExternalContoursIssueContentProperties = observer(function External
                 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-full px-3 hover:bg-white/6"
-                buttonContainerClassName="w-full text-left"
-                buttonClassName="h-auto w-min whitespace-nowrap"
+                buttonVariant="transparent-without-text"
+                className="flex-1"
+                buttonContainerClassName="h-full w-full"
+                button={
+                  <div className="nodedc-external-property-control text-[13px] font-medium">
+                    {issue.priority && issue.priority !== "none" ? (
+                      <PriorityPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+                    ) : (
+                      <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-panel flex min-h-12 items-center gap-3 px-4 py-3">
-              <div className="flex w-2/5 flex-shrink-0 items-center gap-1.5 text-13 text-tertiary">
+            <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 w-3/5 flex-grow pt-1">
+              <div className="h-full min-h-8 flex-1">
                 <IssueLabelSelect
                   value={issue.label_ids || []}
                   onChange={(labelIds) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { label_ids: labelIds })}
                   projectId={targetProjectId}
                   disabled={!isEditable}
+                  rootClassName="w-full"
+                  buttonContainerClassName="h-full w-full"
+                  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>

plane-src/apps/web/ce/components/projects/external-contours/issue-root.tsx

@@ -8,7 +8,9 @@ import type { Dispatch, SetStateAction } from "react";
 import { useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
 import type { EditorRefApi } from "@plane/editor";
+import { ISSUE_PRIORITIES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { LabelPropertyIcon, PriorityIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TExternalContourRequest, TIssue, TNameDescriptionLoader } from "@plane/types";
 import { EFileAssetType } from "@plane/types";
@@ -80,6 +82,7 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
   const mirroredAttachments = contourRequest.mirrored_attachments ?? [];
   const mirroredComments = contourRequest.mirrored_comments ?? [];
   const targetProjectId = issue.project_id || sourceProjectId;
+  const priorityDetails = ISSUE_PRIORITIES.find((priority) => priority.key === issue.priority);
 
   const { duplicateIssues } = useDebouncedDuplicateIssues(
     workspaceSlug,
@@ -194,24 +197,38 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
         <div className="nodedc-external-section flex flex-col gap-3 px-4 py-4">
           <div className="text-body-sm-medium">{t("external_contours_page.properties.section_title")}</div>
           <div className="flex flex-col gap-3 text-13 text-secondary">
-            <div className="nodedc-external-panel flex flex-wrap items-center gap-2 px-4 py-3">
-              <span className="text-tertiary">{t("priority")}</span>
-              <span className="rounded-full bg-white/6 px-3 py-1.5 text-12 font-medium text-primary">
-                {issue.priority || t("none")}
-              </span>
+            <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>
+              <div className="nodedc-external-property-value flex-1 text-[13px] font-medium">
+                <PriorityIcon priority={issue.priority ?? "none"} className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+                <span className="text-12 font-medium text-primary">
+                  {issue.priority && issue.priority !== "none"
+                    ? priorityDetails?.title ?? t(issue.priority)
+                    : t("external_contours_page.form.priority")}
+                </span>
+              </div>
             </div>
 
-            <div className="nodedc-external-panel flex flex-wrap items-center gap-2 px-4 py-3">
-              <span className="text-tertiary">{t("labels")}</span>
+            <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>
               {issue.label_details?.length ? (
-                issue.label_details.map((label) => (
-                  <div key={label.id} className="flex items-center gap-1 rounded-full bg-white/6 px-3 py-1.5 text-11">
-                    <span className="h-2 w-2 rounded-full" style={{ backgroundColor: label.color }} />
-                    <span>{label.name}</span>
-                  </div>
-                ))
+                <div className="nodedc-external-property-value flex-1 flex-wrap text-[13px] font-medium">
+                  <LabelPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+                  <span className="text-12 font-medium text-primary">
+                    {issue.label_details.map((label) => label.name).join(", ")}
+                  </span>
+                </div>
               ) : (
-                <span>{t("common.none")}</span>
+                <div className="nodedc-external-property-value flex-1 text-[13px] font-medium">
+                  <LabelPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+                  <span className="text-12 font-medium text-tertiary">{t("labels")}</span>
+                </div>
               )}
             </div>
           </div>

plane-src/apps/web/ce/components/projects/external-contours/list-item.tsx

@@ -11,7 +11,7 @@ import { useSearchParams } from "next/navigation";
 import { useTranslation } from "@plane/i18n";
 import { PriorityIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
-import { Avatar, Row } from "@plane/ui";
+import { Avatar } from "@plane/ui";
 import { cn, renderFormattedDate } from "@plane/utils";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
@@ -55,10 +55,10 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
       href={`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${request.id}`}
       onClick={(e) => handleIssueRedirection(e, request.id)}
     >
-      <Row
+      <div
         data-active={selectedInboxIssueId === request.id}
         className={cn(
-          "nodedc-external-card relative flex min-h-[15rem] cursor-pointer flex-col gap-5 px-5 py-5 transition-all hover:bg-white/5",
+          "nodedc-external-card relative flex min-h-[15rem] cursor-pointer flex-col gap-6 px-6 py-5 transition-all hover:bg-white/5",
           { "ring-1 ring-accent-primary/35": selectedInboxIssueId === request.id }
         )}
       >
@@ -90,8 +90,8 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
           </div>
         </div>
 
-        <div className="flex flex-1 items-center justify-center px-2">
-          <h3 className="line-clamp-3 w-full max-w-[18rem] text-center text-16 leading-7 font-semibold text-primary">
+        <div className="flex flex-1 items-center justify-center px-3">
+          <h3 className="line-clamp-3 w-full max-w-[18.5rem] text-center text-16 leading-7 font-semibold text-primary">
             {issue.name}
           </h3>
         </div>
@@ -127,12 +127,14 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
 
             {issue.priority && issue.priority !== "none" && (
               <Tooltip tooltipHeading={t("priority")} tooltipContent={`${issue.priority ?? t("none")}`}>
-                <PriorityIcon priority={issue.priority} withContainer className="h-3 w-3" />
+                <div className="flex size-8 items-center justify-center rounded-full bg-white/6 text-secondary">
+                  <PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
+                </div>
               </Tooltip>
             )}
           </div>
         </div>
-      </Row>
+      </div>
     </Link>
   );
 });

plane-src/apps/web/ce/components/projects/external-contours/root.tsx

@@ -8,14 +8,13 @@ import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { PanelLeft } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateCompact } from "@plane/propel/empty-state";
 import { TransferIcon } from "@plane/propel/icons";
 import type { TInboxIssueCurrentTab } from "@plane/types";
 import { EInboxIssueCurrentTab } from "@plane/types";
 import { cn } from "@plane/utils";
-import { InboxLayoutLoader } from "@/components/ui/loader/layouts/project-inbox/inbox-layout-loader";
 import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
 import { ExternalContoursContentRoot } from "./content-root";
+import { ExternalContoursEmptyState } from "./empty-state";
 import { ExternalContoursSidebar } from "./sidebar";
 
 type TExternalContoursRoot = {
@@ -46,14 +45,6 @@ export const ExternalContoursRoot = observer(function ExternalContoursRoot(props
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [workspaceSlug, projectId, navigationTab]);
 
-  if (loader === "init-loading") {
-    return (
-      <div className="relative flex h-full w-full flex-col">
-        <InboxLayoutLoader />
-      </div>
-    );
-  }
-
   if (error && error?.status === "init-error") {
     return (
       <div className="relative flex h-full w-full flex-col items-center justify-center gap-3">
@@ -99,10 +90,10 @@ export const ExternalContoursRoot = observer(function ExternalContoursRoot(props
         ) : (
           <div className="flex h-full w-full items-center justify-center px-8">
             <div className="nodedc-external-section max-w-xl px-8 py-10">
-              <EmptyStateCompact
-                assetKey="intake"
+              <ExternalContoursEmptyState
+                compact
                 title={t("external_contours_page.empty_state.detail_title")}
-                assetClassName="size-20"
+                description={t("external_contours_page.empty_state.detail_description")}
               />
             </div>
           </div>

plane-src/apps/web/ce/components/projects/external-contours/sidebar.tsx

@@ -7,12 +7,12 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import type { TInboxIssueCurrentTab } from "@plane/types";
 import { EInboxIssueCurrentTab } from "@plane/types";
 import { cn } from "@plane/utils";
 import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
 import { useAppRouter } from "@/hooks/use-app-router";
+import { ExternalContoursEmptyState } from "./empty-state";
 import { ExternalContoursListItem } from "./list-item";
 
 type Props = {
@@ -31,7 +31,8 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
   const { workspaceSlug, projectId, inboxIssueId, setIsMobileSidebar } = props;
   const router = useAppRouter();
   const { t } = useTranslation();
-  const { currentTab, handleCurrentTab, filteredRequestIds, openRequestIds, closedRequestIds } = useProjectExternalContours();
+  const { currentTab, handleCurrentTab, filteredRequestIds, openRequestIds, closedRequestIds, loader } =
+    useProjectExternalContours();
 
   useEffect(() => {
     if (workspaceSlug && projectId && filteredRequestIds.length > 0 && inboxIssueId === undefined) {
@@ -79,8 +80,14 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
         </div>
 
         <div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-auto px-4 pb-4">
-          {filteredRequestIds.length > 0 ? (
-            <div className="space-y-3">
+          {loader === "init-loading" ? (
+            <div className="flex h-full items-center justify-center">
+              <div className="nodedc-external-empty px-6 py-6 text-13 text-secondary">
+                {t("loading")}...
+              </div>
+            </div>
+          ) : filteredRequestIds.length > 0 ? (
+            <div className="space-y-4">
               {filteredRequestIds.map((requestId) => (
                 <ExternalContoursListItem
                   key={requestId}
@@ -93,23 +100,18 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
             </div>
           ) : (
             <div className="flex h-full w-full items-center justify-center">
-              {currentTab === EInboxIssueCurrentTab.OPEN ? (
-                <EmptyStateDetailed
-                  assetKey="inbox"
-                  title={t("external_contours_page.empty_state.open_title")}
-                  description={t("external_contours_page.empty_state.open_description")}
-                  assetClassName="size-20"
-                  rootClassName="px-page-x"
-                />
-              ) : (
-                <EmptyStateDetailed
-                  assetKey="inbox"
-                  title={t("external_contours_page.empty_state.closed_title")}
-                  description={t("external_contours_page.empty_state.closed_description")}
-                  assetClassName="size-20"
-                  className="px-10"
-                />
-              )}
+              <ExternalContoursEmptyState
+                title={t(
+                  currentTab === EInboxIssueCurrentTab.OPEN
+                    ? "external_contours_page.empty_state.open_title"
+                    : "external_contours_page.empty_state.closed_title"
+                )}
+                description={t(
+                  currentTab === EInboxIssueCurrentTab.OPEN
+                    ? "external_contours_page.empty_state.open_description"
+                    : "external_contours_page.empty_state.closed_description"
+                )}
+              />
             </div>
           )}
         </div>