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

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

@@ -22,7 +22,7 @@ export function ExternalContourCreateModalRoot(props: Props) {
       isOpen={modalState}
       position={EModalPosition.CENTER}
       width={EModalWidth.XXXXL}
-      className="rounded-lg !bg-transparent shadow-none transition-[width] ease-linear"
+      className="transition-[width] ease-linear"
     >
       <ExternalContoursCreateRoot workspaceSlug={workspaceSlug} projectId={projectId} handleModalClose={handleModalClose} />
     </ModalCore>

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>

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

@@ -126,57 +126,67 @@ export const ExternalContoursCreateRoot = observer(function ExternalContoursCrea
   if (!workspaceSlug || !projectId || !workspaceId) return <></>;
 
   return (
-    <div className="flex w-full gap-2 bg-transparent">
-      <div className="w-full rounded-lg">
-        <form onSubmit={handleFormSubmit} className="flex w-full flex-col">
-          <div className="space-y-5 rounded-t-lg bg-surface-1 p-5">
-            <div className="flex items-center justify-between gap-2">
-              <h3 className="text-18 font-medium text-secondary">{t("external_contours_page.modal.title")}</h3>
-            </div>
-            <div className="space-y-3">
-              <InboxIssueTitle
-                data={formData}
-                handleData={handleFormData as any}
-                isTitleLengthMoreThan255Character={isTitleLengthMoreThan255Character}
-              />
-              <InboxIssueDescription
-                workspaceSlug={workspaceSlug}
-                projectId={projectId}
-                workspaceId={workspaceId}
-                data={formData}
-                handleData={handleFormData as any}
-                editorRef={descriptionEditorRef}
-                containerClassName="min-h-[150px] border-[0.5px] border-subtle-1 bg-layer-2 py-3"
-                onAssetUpload={() => {}}
-              />
-              <ExternalContoursCreateProperties
-                currentProjectName={currentProjectDetails?.name}
-                data={formData}
-                handleData={handleFormData as any}
-              />
-            </div>
-          </div>
-          <div className="flex items-center justify-between gap-2 rounded-b-lg border-t-[0.5px] border-subtle bg-surface-1 px-5 py-4">
-            <div
-              className="inline-flex cursor-pointer items-center gap-1.5"
-              onClick={() => setCreateMore((prevData) => !prevData)}
-              role="button"
-              tabIndex={0}
-            >
-              <ToggleSwitch value={createMore} onChange={() => {}} size="sm" />
-              <span className="text-11">{t("create_more")}</span>
-            </div>
-            <div className="flex items-center gap-3">
-              <Button variant="secondary" size="lg" type="button" onClick={handleModalClose}>
-                {t("cancel")}
-              </Button>
-              <Button type="submit" variant="primary" size="lg" loading={formSubmitting} disabled={!canSubmit || isTitleLengthMoreThan255Character}>
-                {t("external_contours_page.modal.submit")}
-              </Button>
-            </div>
-          </div>
-        </form>
+    <form onSubmit={handleFormSubmit} className="flex w-full flex-col gap-6 px-6 py-6">
+      <div className="space-y-5">
+        <div className="flex items-center justify-between gap-2">
+          <h3 className="text-18 font-medium text-secondary">{t("external_contours_page.modal.title")}</h3>
+        </div>
+        <div className="space-y-4">
+          <InboxIssueTitle
+            data={formData}
+            handleData={handleFormData as any}
+            isTitleLengthMoreThan255Character={isTitleLengthMoreThan255Character}
+            inputClassName="nodedc-modal-input !px-4 !py-3 !text-[15px]"
+          />
+          <InboxIssueDescription
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            workspaceId={workspaceId}
+            data={formData}
+            handleData={handleFormData as any}
+            editorRef={descriptionEditorRef}
+            containerClassName="nodedc-modal-editor min-h-[180px] !border-none !bg-transparent !p-0"
+            onAssetUpload={() => {}}
+          />
+          <ExternalContoursCreateProperties
+            currentProjectName={currentProjectDetails?.name}
+            data={formData}
+            handleData={handleFormData as any}
+          />
+        </div>
       </div>
-    </div>
+      <div className="flex items-center justify-between gap-3 pt-1">
+        <div
+          className="inline-flex cursor-pointer items-center gap-1.5"
+          onClick={() => setCreateMore((prevData) => !prevData)}
+          role="button"
+          tabIndex={0}
+        >
+          <ToggleSwitch value={createMore} onChange={() => {}} size="sm" />
+          <span className="text-11 text-secondary">{t("create_more")}</span>
+        </div>
+        <div className="flex items-center gap-3">
+          <Button
+            variant="secondary"
+            size="lg"
+            type="button"
+            onClick={handleModalClose}
+            className="min-w-[8.25rem] !rounded-[1.25rem] !border-transparent px-5 shadow-none"
+          >
+            {t("cancel")}
+          </Button>
+          <Button
+            type="submit"
+            variant="primary"
+            size="lg"
+            loading={formSubmitting}
+            disabled={!canSubmit || isTitleLengthMoreThan255Character}
+            className="min-w-[8.25rem] !rounded-[1.25rem] !border-transparent px-5 shadow-none"
+          >
+            {t("external_contours_page.modal.submit")}
+          </Button>
+        </div>
+      </div>
+    </form>
   );
 });