ФУНКЦИИ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: web-доступ к внешним контурам и исправление модалки запроса

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

@@ -34,6 +34,9 @@ export const ExternalContoursContentRoot = observer(function ExternalContoursCon
   const issue = contourRequest?.issue;
   const targetProjectId = issue?.project_id || projectId;
   const { allowPermissions, getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
+  const hasDirectTargetAccess = !!(
+    targetProjectId && getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, targetProjectId) !== undefined
+  );
 
   const isIssueAvailable = getIsRequestAvailable(inboxIssueId?.toString() || "");
 
@@ -53,11 +56,12 @@ export const ExternalContoursContentRoot = observer(function ExternalContoursCon
   );
 
   const isEditable =
-    !!targetProjectId &&
+    hasDirectTargetAccess &&
     (allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT, workspaceSlug, targetProjectId) ||
       issue?.created_by === currentUser?.id);
 
-  const isGuest = !!targetProjectId && getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, targetProjectId) === EUserPermissions.GUEST;
+  const isGuest =
+    !!targetProjectId && getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, targetProjectId) === EUserPermissions.GUEST;
   const isOwner = issue?.created_by === currentUser?.id;
   const readOnly = !isOwner && isGuest;
 
@@ -73,6 +77,7 @@ export const ExternalContoursContentRoot = observer(function ExternalContoursCon
           sourceProjectId={projectId}
           contourRequest={contourRequest}
           isSubmitting={isSubmitting}
+          hasDirectTargetAccess={hasDirectTargetAccess}
         />
       </div>
       <ContentWrapper className="divide-y-2 divide-subtle-1">
@@ -80,6 +85,7 @@ export const ExternalContoursContentRoot = observer(function ExternalContoursCon
           workspaceSlug={workspaceSlug}
           sourceProjectId={projectId}
           contourRequest={contourRequest}
+          hasDirectTargetAccess={hasDirectTargetAccess}
           isEditable={!!isEditable && !readOnly}
           isSubmitting={isSubmitting}
           setIsSubmitting={setIsSubmitting}

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

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

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

@@ -8,31 +8,44 @@ import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import { Badge } from "@plane/propel/badge";
+import { MembersPropertyIcon } from "@plane/propel/icons";
 import type { TIssue, TIssuePriorities } from "@plane/types";
 import { renderFormattedPayloadDate } from "@plane/utils";
 import { DateDropdown } from "@/components/dropdowns/date";
-import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
+import { MemberDropdownBase } from "@/components/dropdowns/member/base";
 import { PriorityDropdown } from "@/components/dropdowns/priority";
-import { ProjectDropdown } from "@/components/dropdowns/project/dropdown";
-import { IssueLabelSelect } from "@/components/issues/select";
-import { useProject } from "@/hooks/store/use-project";
+import { ProjectDropdownBase } from "@/components/dropdowns/project/base";
+import { WorkItemLabelSelectBase } from "@/components/issues/select/base";
+import { useMember } from "@/hooks/store/use-member";
+import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
 
 type Props = {
-  currentProjectId: string;
   currentProjectName?: string;
   data: Partial<TIssue> & { target_project_id?: string | null; priority?: TIssuePriorities };
   handleData: (issueKey: keyof Props["data"], issueValue: Props["data"][keyof Props["data"]]) => void;
 };
 
 export const ExternalContoursCreateProperties = observer(function ExternalContoursCreateProperties(props: Props) {
-  const { currentProjectId, currentProjectName, data, handleData } = props;
+  const { currentProjectName, data, handleData } = props;
   const { t } = useTranslation();
-  const { getProjectById } = useProject();
+  const { getUserDetails } = useMember();
+  const { targetProjectIds, getTargetOptionsByProjectId, getTargetProjectById } = useProjectExternalContours();
 
-  const selectedTargetProject = useMemo(
-    () => (data.target_project_id ? getProjectById(data.target_project_id) : undefined),
-    [data.target_project_id, getProjectById]
+  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;
 
   return (
     <div className="relative flex flex-wrap items-center gap-2">
@@ -42,7 +55,7 @@ export const ExternalContoursCreateProperties = observer(function ExternalContou
       </div>
 
       <div className="h-7">
-        <ProjectDropdown
+        <ProjectDropdownBase
           value={data.target_project_id ?? null}
           onChange={(value) => {
             if (!Array.isArray(value)) {
@@ -52,9 +65,11 @@ export const ExternalContoursCreateProperties = observer(function ExternalContou
             }
           }}
           multiple={false}
+          projectIds={targetProjectIds}
+          getProjectById={getTargetProjectById}
           buttonVariant="border-with-text"
           placeholder={t("external_contours_page.form.target_project")}
-          renderCondition={(projectId) => projectId !== currentProjectId}
+          disabled={targetProjectIds.length === 0}
         />
       </div>
 
@@ -74,24 +89,33 @@ export const ExternalContoursCreateProperties = observer(function ExternalContou
       </div>
 
       <div className="h-7">
-        <MemberDropdown
-          projectId={data.target_project_id ?? undefined}
+        <MemberDropdownBase
           value={data.assignee_ids || []}
           onChange={(assigneeIds) => handleData("assignee_ids", assigneeIds)}
+          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>
+          }
           buttonVariant={(data.assignee_ids || []).length > 0 ? "transparent-without-text" : "border-with-text"}
           buttonClassName={(data.assignee_ids || []).length > 0 ? "hover:bg-transparent" : ""}
+          optionsClassName="z-[60]"
           placeholder={t("external_contours_page.form.assignee")}
-          disabled={!data.target_project_id}
+          disabled={!data.target_project_id || !selectedTargetOptions}
           multiple
         />
       </div>
 
       <div className="h-7">
-        <IssueLabelSelect
+        <WorkItemLabelSelectBase
           value={data.label_ids || []}
           onChange={(labelIds) => handleData("label_ids", labelIds)}
-          projectId={data.target_project_id ?? undefined}
-          disabled={!data.target_project_id}
+          getLabelById={getTargetLabelById}
+          labelIds={targetLabelIds}
+          disabled={!data.target_project_id || !selectedTargetOptions}
         />
       </div>
 

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

@@ -5,7 +5,7 @@
  */
 
 import type { FormEvent } from "react";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
@@ -46,7 +46,7 @@ export const ExternalContoursCreateRoot = observer(function ExternalContoursCrea
   const { getWorkspaceBySlug } = useWorkspace();
   const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id;
   const { currentProjectDetails } = useProject();
-  const { createRequest } = useProjectExternalContours();
+  const { createRequest, fetchTargetOptions, fetchTargetProjects } = useProjectExternalContours();
   const descriptionEditorRef = useRef<EditorRefApi>(null);
   const [createMore, setCreateMore] = useState(false);
   const [formSubmitting, setFormSubmitting] = useState(false);
@@ -59,6 +59,28 @@ export const ExternalContoursCreateRoot = observer(function ExternalContoursCrea
   const isTitleLengthMoreThan255Character = formData?.name ? formData.name.length > 255 : false;
   const canSubmit = !!formData.name?.trim() && !!formData.target_project_id;
 
+  useEffect(() => {
+    if (!workspaceSlug || !projectId) return;
+    fetchTargetProjects(workspaceSlug, projectId).catch(() => {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: t("external_contours_page.modal.error_message"),
+      });
+    });
+  }, [fetchTargetProjects, projectId, t, workspaceSlug]);
+
+  useEffect(() => {
+    if (!workspaceSlug || !projectId || !formData.target_project_id) return;
+    fetchTargetOptions(workspaceSlug, projectId, formData.target_project_id).catch(() => {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: t("external_contours_page.modal.error_message"),
+      });
+    });
+  }, [fetchTargetOptions, formData.target_project_id, projectId, t, workspaceSlug]);
+
   const handleFormSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
@@ -128,7 +150,6 @@ export const ExternalContoursCreateRoot = observer(function ExternalContoursCrea
                 onAssetUpload={() => {}}
               />
               <ExternalContoursCreateProperties
-                currentProjectId={projectId}
                 currentProjectName={currentProjectDetails?.name}
                 data={formData}
                 handleData={handleFormData as any}

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

@@ -25,13 +25,22 @@ type Props = {
   workspaceSlug: string;
   sourceProjectId: string;
   contourRequest: TExternalContourRequest;
+  hasDirectTargetAccess: boolean;
   isSubmitting: TNameDescriptionLoader;
   isMobileSidebar: boolean;
   setIsMobileSidebar: (value: boolean) => void;
 };
 
 export const ExternalContoursIssueActionsHeader = observer(function ExternalContoursIssueActionsHeader(props: Props) {
-  const { workspaceSlug, sourceProjectId, contourRequest, isSubmitting, isMobileSidebar, setIsMobileSidebar } = props;
+  const {
+    workspaceSlug,
+    sourceProjectId,
+    contourRequest,
+    hasDirectTargetAccess,
+    isSubmitting,
+    isMobileSidebar,
+    setIsMobileSidebar,
+  } = props;
   const { t } = useTranslation();
   const router = useAppRouter();
   const { currentTab, filteredRequestIds } = useProjectExternalContours();
@@ -108,11 +117,13 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
             <Button variant="secondary" size="lg" prependIcon={<LinkIcon className="h-2.5 w-2.5" />} onClick={handleCopyLink}>
               {t("external_contours_page.actions.copy")}
             </Button>
-            <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
-              <Button variant="secondary" size="lg" prependIcon={<NewTabIcon className="h-2.5 w-2.5" />}>
-                {t("external_contours_page.actions.open")}
-              </Button>
-            </ControlLink>
+            {hasDirectTargetAccess && (
+              <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
+                <Button variant="secondary" size="lg" prependIcon={<NewTabIcon className="h-2.5 w-2.5" />}>
+                  {t("external_contours_page.actions.open")}
+                </Button>
+              </ControlLink>
+            )}
           </div>
         </div>
       </Row>
@@ -125,11 +136,13 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
         <div className="flex w-full items-center gap-2">
           <ExternalContourStatePill request={contourRequest} />
           <div className="ml-auto flex items-center gap-2">
-            <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
-              <Button variant="secondary" size="sm">
-                {t("external_contours_page.actions.open")}
-              </Button>
-            </ControlLink>
+            {hasDirectTargetAccess && (
+              <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
+                <Button variant="secondary" size="sm">
+                  {t("external_contours_page.actions.open")}
+                </Button>
+              </ControlLink>
+            )}
           </div>
         </div>
       </Header>

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

@@ -9,10 +9,11 @@ import { useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
 import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
+import { Badge } from "@plane/propel/badge";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TExternalContourRequest, TIssue, TNameDescriptionLoader } from "@plane/types";
 import { EFileAssetType } from "@plane/types";
-import { getTextContent } from "@plane/utils";
+import { getTextContent, renderFormattedDate } from "@plane/utils";
 import { DescriptionVersionsRoot } from "@/components/core/description-versions";
 import { DescriptionInput } from "@/components/editor/rich-text/description-input";
 import { DescriptionInputLoader } from "@/components/editor/rich-text/description-input/loader";
@@ -38,13 +39,14 @@ type Props = {
   workspaceSlug: string;
   sourceProjectId: string;
   contourRequest: TExternalContourRequest;
+  hasDirectTargetAccess: boolean;
   isEditable: boolean;
   isSubmitting: TNameDescriptionLoader;
   setIsSubmitting: Dispatch<SetStateAction<TNameDescriptionLoader>>;
 };
 
 export const ExternalContoursIssueMainContent = observer(function ExternalContoursIssueMainContent(props: Props) {
-  const { workspaceSlug, sourceProjectId, contourRequest, isEditable, isSubmitting, setIsSubmitting } = props;
+  const { workspaceSlug, sourceProjectId, contourRequest, hasDirectTargetAccess, isEditable, isSubmitting, setIsSubmitting } = props;
   const { t } = useTranslation();
   const editorRef = useRef<EditorRefApi>(null);
   const { data: currentUser } = useUser();
@@ -100,6 +102,73 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
 
   if (!issue || !issue.project_id || !issue.id) return <></>;
 
+  if (!hasDirectTargetAccess) {
+    return (
+      <>
+        <div className="space-y-4 pb-4">
+          <h1 className="text-xl font-semibold text-primary">{issue.name}</h1>
+          <div
+            className="prose prose-invert max-w-none text-sm text-secondary [&_p]:mb-3"
+            dangerouslySetInnerHTML={{ __html: issue.description_html || "<p></p>" }}
+          />
+        </div>
+
+        <div className="py-4">
+          <ExternalContoursRequestTraceability contourRequest={contourRequest} />
+        </div>
+
+        <div className="py-4">
+          <div className="mb-2 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="flex flex-wrap items-center gap-2">
+              <span className="text-tertiary">{t("external_contours_page.properties.target_contour")}</span>
+              <Badge variant="neutral">{issue.project_detail?.name || t("common.none")}</Badge>
+            </div>
+
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="text-tertiary">{t("assignees")}</span>
+              {issue.assignee_details?.length ? (
+                issue.assignee_details.map((assignee) => (
+                  <Badge key={assignee.id} variant="neutral">
+                    {assignee.display_name}
+                  </Badge>
+                ))
+              ) : (
+                <span>{t("external_contours_page.list.unassigned")}</span>
+              )}
+            </div>
+
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="text-tertiary">{t("priority")}</span>
+              <Badge variant="neutral">{issue.priority || t("none")}</Badge>
+            </div>
+
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="text-tertiary">{t("due_date")}</span>
+              <span>{issue.target_date ? renderFormattedDate(issue.target_date) : t("common.none")}</span>
+            </div>
+
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="text-tertiary">{t("labels")}</span>
+              {issue.label_details?.length ? (
+                issue.label_details.map((label) => (
+                  <div key={label.id} className="flex items-center gap-1 rounded-sm border border-strong px-2 py-1 text-11">
+                    <span className="h-2 w-2 rounded-full" style={{ backgroundColor: label.color }} />
+                    <span>{label.name}</span>
+                  </div>
+                ))
+              ) : (
+                <span>{t("common.none")}</span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="py-4 text-13 text-secondary">{t("external_contours_page.readonly_source_view")}</div>
+      </>
+    );
+  }
+
   return (
     <>
       <div className="space-y-4 pb-4">