UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: фикс popup рабочего пространства, sidebar-search и полировка модалки внешнего запроса

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

@@ -4,13 +4,13 @@
  * See the LICENSE file for details.
  */
 
-import { useMemo } from "react";
+import { CalendarDays, SignalHigh } from "lucide-react";
 import { observer } from "mobx-react";
+import { ISSUE_PRIORITIES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Badge } from "@plane/propel/badge";
-import { MembersPropertyIcon } from "@plane/propel/icons";
+import { LabelPropertyIcon, MembersPropertyIcon, PriorityIcon, ProjectIcon } from "@plane/propel/icons";
 import type { TIssue, TIssuePriorities } from "@plane/types";
-import { renderFormattedPayloadDate } from "@plane/utils";
+import { cn, renderFormattedDate, renderFormattedPayloadDate } from "@plane/utils";
 import { DateDropdown } from "@/components/dropdowns/date";
 import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { MemberDropdownBase } from "@/components/dropdowns/member/base";
@@ -31,30 +31,31 @@ export const ExternalContoursCreateProperties = observer(function ExternalContou
   const { t } = useTranslation();
   const { getUserDetails } = useMember();
   const { targetProjectIds, getTargetOptionsByProjectId, getTargetProjectById } = useProjectExternalContours();
+  const controlClassName =
+    "nodedc-modal-field flex h-10 min-w-fit items-center gap-2 rounded-[1.25rem] px-3.5 text-[12px] font-medium text-secondary";
 
   const selectedTargetProject = data.target_project_id ? getTargetProjectById(data.target_project_id) : undefined;
   const selectedTargetOptions = getTargetOptionsByProjectId(data.target_project_id);
-  const targetLabelIds = useMemo(
-    () => selectedTargetOptions?.labels?.map((label) => label.id) ?? [],
-    [selectedTargetOptions?.labels]
-  );
-  const assigneeLabel = useMemo(() => {
-    const assigneeIds = data.assignee_ids || [];
-    if (!assigneeIds.length) return t("external_contours_page.form.assignee");
-    if (assigneeIds.length === 1) return getUserDetails(assigneeIds[0])?.display_name || t("external_contours_page.form.assignee");
-    return `${assigneeIds.length} ${t("assignees").toLocaleLowerCase()}`;
-  }, [data.assignee_ids, getUserDetails, t]);
   const getTargetLabelById = (labelId: string) =>
     selectedTargetOptions?.labels?.find((label) => label.id === labelId) ?? null;
+  const targetLabelIds = selectedTargetOptions?.labels?.map((label) => label.id) ?? [];
+  const selectedLabels = (data.label_ids || []).map((labelId) => getTargetLabelById(labelId)).filter((label) => !!label);
+  const assigneeIds = data.assignee_ids || [];
+  const assigneeLabel = !assigneeIds.length
+    ? t("external_contours_page.form.assignee")
+    : assigneeIds.length === 1
+      ? (getUserDetails(assigneeIds[0])?.display_name ?? t("external_contours_page.form.assignee"))
+      : `${assigneeIds.length} ${t("assignees").toLocaleLowerCase()}`;
+  const priorityDetails = ISSUE_PRIORITIES.find((priority) => priority.key === data.priority);
 
   return (
-    <div className="relative flex flex-wrap items-center gap-2">
-      <div className="rounded-md border border-subtle bg-surface-2 px-3 py-1.5 text-11 text-secondary">
-        <span className="mr-2 text-tertiary">{t("external_contours_page.form.source_project")}</span>
-        <Badge variant="neutral">{currentProjectName || "NODE.DC"}</Badge>
+    <div className="relative flex flex-wrap items-center gap-2.5">
+      <div className={cn(controlClassName, "min-w-[16rem] justify-start")}>
+        <span className="text-tertiary">{t("external_contours_page.form.source_project")}</span>
+        <span className="truncate text-primary">{currentProjectName || "NODE.DC"}</span>
       </div>
 
-      <div className="h-7">
+      <div className="h-10">
         <ProjectDropdownBase
           value={data.target_project_id ?? null}
           onChange={(value) => {
@@ -67,41 +68,36 @@ export const ExternalContoursCreateProperties = observer(function ExternalContou
           multiple={false}
           projectIds={targetProjectIds}
           getProjectById={getTargetProjectById}
-          buttonVariant="border-with-text"
+          buttonVariant="transparent-without-text"
+          buttonContainerClassName="h-full"
+          button={
+            <div className={cn(controlClassName, "min-w-[16rem] justify-start")}>
+              <ProjectIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+              <span className={cn("truncate", selectedTargetProject ? "text-primary" : "text-tertiary")}>
+                {selectedTargetProject?.name ?? t("external_contours_page.form.target_project")}
+              </span>
+            </div>
+          }
           placeholder={t("external_contours_page.form.target_project")}
           disabled={targetProjectIds.length === 0}
         />
       </div>
 
-      {selectedTargetProject && (
-        <div className="rounded-md border border-subtle bg-surface-2 px-3 py-1.5 text-11 text-secondary">
-          <span className="mr-2 text-tertiary">{t("external_contours_page.form.selected_target")}</span>
-          <Badge variant="neutral">{selectedTargetProject.name}</Badge>
-        </div>
-      )}
-
-      <div className="h-7">
-        <PriorityDropdown
-          value={data.priority}
-          onChange={(priority) => handleData("priority", priority)}
-          buttonVariant="border-with-text"
-        />
-      </div>
-
-      <div className="h-7">
+      <div className="h-10">
         <MemberDropdownBase
-          value={data.assignee_ids || []}
-          onChange={(assigneeIds) => handleData("assignee_ids", assigneeIds)}
+          value={assigneeIds}
+          onChange={(nextAssigneeIds) => handleData("assignee_ids", nextAssigneeIds)}
           getUserDetails={getUserDetails}
           memberIds={selectedTargetOptions?.member_ids ?? []}
           button={
-            <div className="flex h-full items-center justify-start gap-1.5 rounded-sm border-[0.5px] border-strong px-1.5 text-11 text-secondary">
-              <ButtonAvatars showTooltip={false} userIds={data.assignee_ids || []} icon={MembersPropertyIcon} />
-              <span className="flex-grow truncate text-left text-body-xs-medium leading-5">{assigneeLabel}</span>
+            <div className={cn(controlClassName, "min-w-[12rem] justify-start")}>
+              <ButtonAvatars showTooltip={false} userIds={assigneeIds} icon={MembersPropertyIcon} />
+              <span className={cn("truncate", assigneeIds.length > 0 ? "text-primary" : "text-tertiary")}>
+                {assigneeLabel}
+              </span>
             </div>
           }
-          buttonVariant={(data.assignee_ids || []).length > 0 ? "transparent-without-text" : "border-with-text"}
-          buttonClassName={(data.assignee_ids || []).length > 0 ? "hover:bg-transparent" : ""}
+          buttonVariant="transparent-without-text"
           optionsClassName="z-[60]"
           placeholder={t("external_contours_page.form.assignee")}
           disabled={!data.target_project_id || !selectedTargetOptions}
@@ -109,21 +105,67 @@ export const ExternalContoursCreateProperties = observer(function ExternalContou
         />
       </div>
 
-      <div className="h-7">
+      <div className="h-10">
+        <PriorityDropdown
+          value={data.priority}
+          onChange={(priority) => handleData("priority", priority)}
+          buttonVariant="transparent-without-text"
+          buttonContainerClassName="h-full"
+          button={
+            <div className={cn(controlClassName, "min-w-[12rem] justify-start")}>
+              {data.priority && data.priority !== "none" ? (
+                <PriorityIcon priority={data.priority} size={14} />
+              ) : (
+                <SignalHigh className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+              )}
+              <span className={cn("truncate", data.priority && data.priority !== "none" ? "text-primary" : "text-tertiary")}>
+                {data.priority && data.priority !== "none"
+                  ? priorityDetails?.title
+                  : t("external_contours_page.form.priority")}
+              </span>
+            </div>
+          }
+          placeholder={t("external_contours_page.form.priority")}
+        />
+      </div>
+
+      <div className="h-10">
         <WorkItemLabelSelectBase
           value={data.label_ids || []}
           onChange={(labelIds) => handleData("label_ids", labelIds)}
           getLabelById={getTargetLabelById}
           labelIds={targetLabelIds}
+          buttonContainerClassName="h-full !text-[12px]"
+          label={
+            <div className={cn(controlClassName, "min-w-[9rem] justify-start !text-[12px]")}>
+              <LabelPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+              <span className={cn("truncate", selectedLabels.length > 0 ? "text-primary" : "text-tertiary")}>
+                {selectedLabels.length > 0
+                  ? selectedLabels.length === 1
+                    ? selectedLabels[0]?.name
+                    : `${selectedLabels.length} ${t("labels").toLocaleLowerCase()}`
+                  : t("labels")}
+              </span>
+            </div>
+          }
           disabled={!data.target_project_id || !selectedTargetOptions}
         />
       </div>
 
-      <div className="h-7">
+      <div className="h-10">
         <DateDropdown
           value={data.target_date || null}
           onChange={(date) => handleData("target_date", date ? renderFormattedPayloadDate(date) : "")}
-          buttonVariant="border-with-text"
+          buttonVariant="transparent-without-text"
+          buttonContainerClassName="h-full"
+          button={
+            <div className={cn(controlClassName, "min-w-[10rem] justify-start")}>
+              <CalendarDays className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+              <span className={cn("truncate", data.target_date ? "text-primary" : "text-tertiary")}>
+                {data.target_date ? renderFormattedDate(data.target_date) : t("external_contours_page.form.due_date")}
+              </span>
+            </div>
+          }
           placeholder={t("external_contours_page.form.due_date")}
         />
       </div>