SILVER/NODEDC_TASKMANAGER
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: внешний контур, auth empty state и HDESIGN update

Browse Source
This commit is contained in:
DCCONSTRUCTIONS
2026-04-20 13:30:04 +03:00
parent b1f980bc7f
commit 9553c81752
16 changed files with 551 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plane-src/apps/web/ce/components/projects/external-contours/empty-state.tsx
+2 -2
View File
@@ -4,7 +4,7 @@
* See the LICENSE file for details.
*/
import { Layers3 } from "lucide-react";
import { Inbox } from "lucide-react";
import { cn } from "@plane/utils";
type Props = {
@@ -19,7 +19,7 @@ export const ExternalContoursEmptyState = (props: 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} />
<Inbox className={cn("block shrink-0", compact ? "size-9" : "size-10")} strokeWidth={1.6} />
</div>
<div className="space-y-2">
<h3 className={cn("font-semibold text-primary", compact ? "text-16" : "text-18")}>{title}</h3>
plane-src/apps/web/ce/components/projects/external-contours/header.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ export const ProjectExternalContoursHeader = observer(function ProjectExternalCo
variant="primary"
size="lg"
onClick={() => setCreateIssueModal(true)}
className="nodedc-external-primary-button min-w-[10.75rem]"
className="nodedc-external-primary-button min-w-[13rem]"
>
{t("external_contours_page.header.add_request")}
</Button>
plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx
+12 -13
View File
@@ -9,7 +9,6 @@ import { observer } from "mobx-react";
import { PanelLeft } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { IconButton } from "@plane/propel/icon-button";
import { CheckCircleFilledIcon, ChevronDownIcon, ChevronUpIcon, CloseCircleFilledIcon, LinkIcon, NewTabIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { TExternalContourRequest, TNameDescriptionLoader } from "@plane/types";
@@ -147,24 +146,24 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-x-2">
<IconButton
variant="secondary"
size="lg"
icon={ChevronUpIcon}
<div className="nodedc-external-detail-toolbar">
<div className="nodedc-external-toolbar-cluster">
<button
type="button"
aria-label="Previous request"
onClick={() => redirectToRelativeIssue("prev")}
className="nodedc-external-icon-button"
/>
<IconButton
variant="secondary"
size="lg"
icon={ChevronDownIcon}
>
<ChevronUpIcon className="size-3.5" />
</button>
<button
type="button"
aria-label="Next request"
onClick={() => redirectToRelativeIssue("next")}
className="nodedc-external-icon-button"
/>
>
<ChevronDownIcon className="size-3.5" />
</button>
</div>
<div className="flex flex-wrap items-center gap-2">
plane-src/apps/web/ce/components/projects/external-contours/issue-properties.tsx
+8 -8
View File
@@ -8,7 +8,7 @@ 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 { LabelPropertyIcon, PriorityIcon, PriorityPropertyIcon } from "@plane/propel/icons";
import type { TIssue } from "@plane/types";
import { PriorityDropdown } from "@/components/dropdowns/priority";
import { IssueLabelSelect } from "@/components/issues/select";
@@ -34,7 +34,7 @@ export const ExternalContoursIssueContentProperties = observer(function External
return (
<div className="flex w-full flex-col">
<div className="w-full overflow-y-auto">
<div className="w-full overflow-visible">
<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">
@@ -48,12 +48,12 @@ export const ExternalContoursIssueContentProperties = observer(function External
onChange={(val) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { priority: val })}
disabled={!isEditable}
buttonVariant="transparent-without-text"
className="flex-1"
buttonContainerClassName="h-full w-full"
className="flex-1 overflow-visible"
buttonContainerClassName="nodedc-external-property-control-shell h-full w-full overflow-visible rounded-[1.25rem] border-0 bg-transparent shadow-none outline-none"
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" />
<PriorityIcon priority={issue.priority} className="h-3.5 w-3.5 flex-shrink-0" />
) : (
<SignalHigh className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
)}
@@ -72,14 +72,14 @@ export const ExternalContoursIssueContentProperties = observer(function External
<LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("labels")}</span>
</div>
<div className="h-full min-h-8 flex-1">
<div className="h-full min-h-8 flex-1 overflow-visible">
<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"
rootClassName="w-full overflow-visible"
buttonContainerClassName="nodedc-external-property-control-shell h-full w-full overflow-visible rounded-[1.25rem] border-0 bg-transparent shadow-none outline-none"
label={
<div className="nodedc-external-property-control text-[13px] font-medium">
<LabelPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
plane-src/apps/web/ce/components/projects/external-contours/issue-root.tsx
+3 -3
View File
@@ -332,11 +332,11 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
<ExternalContoursRequestTraceability contourRequest={contourRequest} />
<div className="nodedc-external-section px-4 py-4">
<div className="nodedc-external-section overflow-visible px-4 py-4">
<IssueAttachmentRoot workspaceSlug={workspaceSlug} projectId={targetProjectId} issueId={issue.id} disabled={!isEditable} />
</div>
<div className="nodedc-external-section px-4 py-4">
<div className="nodedc-external-section overflow-visible px-4 py-4">
<ExternalContoursIssueContentProperties
workspaceSlug={workspaceSlug}
targetProjectId={targetProjectId}
@@ -346,7 +346,7 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
/>
</div>
<div className="nodedc-external-section px-4 py-4">
<div className="nodedc-external-section overflow-visible px-4 py-4">
<IssueActivity workspaceSlug={workspaceSlug} projectId={targetProjectId} issueId={issue.id} />
</div>
</div>
plane-src/apps/web/ce/components/projects/external-contours/list-item.tsx
+40 -35
View File
@@ -58,39 +58,43 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
<div
data-active={selectedInboxIssueId === request.id}
className={cn(
"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 }
"nodedc-external-card relative flex min-h-[15rem] cursor-pointer flex-col gap-5 px-6 py-5 transition-all hover:bg-white/5",
{ "ring-0": selectedInboxIssueId === request.id }
)}
>
<div className="flex items-start justify-between gap-3">
<div className="flex min-w-0 items-center gap-3">
<Avatar
src={requester?.avatar_url || ""}
name={requesterName}
size="lg"
showTooltip
/>
<div className="min-w-0">
<div className="truncate text-15 font-semibold text-primary">{requesterName}</div>
<div className="truncate text-13 text-secondary">{contourName}</div>
<div className="space-y-0.5">
<div className="flex items-center justify-between gap-3">
<div className="flex min-w-0 flex-1 items-center gap-3">
<Avatar
src={requester?.avatar_url || ""}
name={requesterName}
size="md"
showTooltip
/>
<div className="min-w-0">
<div className="truncate text-[15px] leading-5 font-semibold text-primary">{requesterName}</div>
</div>
</div>
</div>
<div className="flex shrink-0 items-center gap-2">
<div className="text-11 font-medium text-tertiary">
{issue.project_detail?.identifier || "REQ"}-{issue.sequence_id}
</div>
<div className="flex items-center gap-2">
{request.has_unread_updates && (
<Tooltip tooltipHeading={t("external_contours_page.list.unread_updates")} isMobile={isMobile}>
<span className="size-2 rounded-full bg-accent-primary" />
</Tooltip>
)}
<ExternalContourStatePill request={request} />
<div className="flex shrink-0 items-center gap-2">
<div className="text-11 font-medium text-tertiary">
{issue.project_detail?.identifier || "REQ"}-{issue.sequence_id}
</div>
<div className="flex items-center gap-2">
{request.has_unread_updates && (
<Tooltip tooltipHeading={t("external_contours_page.list.unread_updates")} isMobile={isMobile}>
<span className="size-2 rounded-full bg-accent-primary" />
</Tooltip>
)}
<ExternalContourStatePill request={request} />
</div>
</div>
</div>
<div className="truncate pl-10 text-[12px] font-medium leading-4 text-secondary">{contourName}</div>
</div>
<div className="flex flex-1 items-center justify-center px-3">
<div className="flex flex-1 items-center justify-center px-5 py-2 text-center">
<h3 className="line-clamp-3 w-full max-w-[18.5rem] text-center text-16 leading-7 font-semibold text-primary">
{issue.name}
</h3>
@@ -99,14 +103,15 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
<div className="flex items-center justify-between gap-3">
<div className="flex min-w-0 items-center gap-2">
{assigneeDetails.length > 0 ? (
assigneeDetails.map((assignee) => (
<Avatar
key={assignee.id}
src={assignee.avatar_url || ""}
name={assignee.display_name || "NODE.DC"}
size="lg"
showTooltip
/>
assigneeDetails.map((assignee, index) => (
<div key={assignee.id} className={cn(index > 0 && "-ml-2")}>
<Avatar
src={assignee.avatar_url || ""}
name={assignee.display_name || "NODE.DC"}
size="md"
showTooltip
/>
</div>
))
) : (
<Tooltip tooltipHeading={t("assignee")} tooltipContent={t("external_contours_page.list.unassigned")} isMobile={isMobile}>
@@ -127,7 +132,7 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
{issue.priority && issue.priority !== "none" && (
<Tooltip tooltipHeading={t("priority")} tooltipContent={`${issue.priority ?? t("none")}`}>
<div className="flex size-8 items-center justify-center rounded-full bg-white/6 text-secondary">
<div className="nodedc-external-priority-inline flex size-8 items-center justify-center rounded-full">
<PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
</div>
</Tooltip>
plane-src/apps/web/ce/components/projects/external-contours/root.tsx
+18 -7
View File
@@ -28,20 +28,31 @@ export const ExternalContoursRoot = observer(function ExternalContoursRoot(props
const { workspaceSlug, projectId, inboxIssueId, navigationTab } = props;
const [isMobileSidebar, setIsMobileSidebar] = useState(true);
const { t } = useTranslation();
const { loader, error, currentTab, currentProjectId, handleCurrentTab, fetchRequests } = useProjectExternalContours();
const { loader, error, currentTab, currentProjectId, requestIds, handleCurrentTab, fetchRequests } =
useProjectExternalContours();
useEffect(() => {
if (!workspaceSlug || !projectId) return;
const resolvedTab = navigationTab || EInboxIssueCurrentTab.OPEN;
const hasProjectChanged = currentProjectId && currentProjectId !== projectId;
if (navigationTab && navigationTab !== currentTab) {
handleCurrentTab(workspaceSlug, projectId, navigationTab);
} else if (hasProjectChanged) {
handleCurrentTab(workspaceSlug, projectId, EInboxIssueCurrentTab.OPEN);
} else {
fetchRequests(workspaceSlug.toString(), projectId.toString(), navigationTab || EInboxIssueCurrentTab.OPEN);
if (hasProjectChanged) {
void handleCurrentTab(workspaceSlug, projectId, EInboxIssueCurrentTab.OPEN);
return;
}
if (currentProjectId === projectId && currentTab === resolvedTab) {
if (loader === "init-loading") return;
if (requestIds.length > 0) return;
}
if (currentTab !== resolvedTab) {
void handleCurrentTab(workspaceSlug, projectId, resolvedTab);
return;
}
void fetchRequests(workspaceSlug.toString(), projectId.toString(), resolvedTab);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [workspaceSlug, projectId, navigationTab]);
plane-src/apps/web/ce/components/projects/external-contours/sidebar.tsx
+24 -20
View File
@@ -10,6 +10,7 @@ import { useTranslation } from "@plane/i18n";
import type { TInboxIssueCurrentTab } from "@plane/types";
import { EInboxIssueCurrentTab } from "@plane/types";
import { cn } from "@plane/utils";
import { useSearchParams } from "next/navigation";
import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
import { useAppRouter } from "@/hooks/use-app-router";
import { ExternalContoursEmptyState } from "./empty-state";
@@ -30,17 +31,20 @@ const tabNavigationOptions: { key: TInboxIssueCurrentTab; i18n_label: string }[]
export const ExternalContoursSidebar = observer(function ExternalContoursSidebar(props: Props) {
const { workspaceSlug, projectId, inboxIssueId, setIsMobileSidebar } = props;
const router = useAppRouter();
const searchParams = useSearchParams();
const { t } = useTranslation();
const { currentTab, handleCurrentTab, filteredRequestIds, openRequestIds, closedRequestIds, loader } =
const { currentTab, filteredRequestIds, openRequestIds, closedRequestIds, loader, handleCurrentTab } =
useProjectExternalContours();
const routeTab = (searchParams.get("currentTab") as TInboxIssueCurrentTab | null) ?? currentTab;
const isTabTransitioning = loader === "init-loading" || routeTab !== currentTab;
useEffect(() => {
if (workspaceSlug && projectId && filteredRequestIds.length > 0 && inboxIssueId === undefined) {
router.push(
`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${filteredRequestIds[0]}`
`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${routeTab}&inboxIssueId=${filteredRequestIds[0]}`
);
}
}, [currentTab, filteredRequestIds, inboxIssueId, projectId, router, workspaceSlug]);
}, [filteredRequestIds, inboxIssueId, projectId, routeTab, router, workspaceSlug]);
return (
<div className="nodedc-external-sidebar-shell h-full w-full flex-shrink-0 border-r border-strong/40">
@@ -52,27 +56,27 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
return (
<button
type="button"
key={option.key}
data-active={currentTab === option.key}
className={cn(
key={option.key}
data-active={routeTab === option.key}
className={cn(
"nodedc-external-tab flex flex-1 items-center justify-center gap-2 text-13 font-medium transition-all"
)}
onClick={() => {
if (currentTab !== option.key) {
handleCurrentTab(workspaceSlug, projectId, option.key);
router.push(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${option.key}`);
}
}}
>
)}
onClick={() => {
if (routeTab !== option.key) {
void handleCurrentTab(workspaceSlug, projectId, option.key);
router.push(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${option.key}`);
}
}}
>
<div>{t(option.i18n_label)}</div>
<div
className={cn(
"rounded-full px-1.5 py-0.5 text-11 font-semibold",
currentTab === option.key ? "bg-accent-primary/15 text-accent-primary" : "bg-white/5 text-secondary"
routeTab === option.key ? "bg-accent-primary/15 text-accent-primary" : "bg-white/5 text-secondary"
)}
>
{count}
</div>
</div>
</button>
);
})}
@@ -80,14 +84,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">
{loader === "init-loading" ? (
{isTabTransitioning ? (
<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">
<div key={routeTab} className="space-y-2">
{filteredRequestIds.map((requestId) => (
<ExternalContoursListItem
key={requestId}
@@ -102,12 +106,12 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
<div className="flex h-full w-full items-center justify-center">
<ExternalContoursEmptyState
title={t(
currentTab === EInboxIssueCurrentTab.OPEN
routeTab === EInboxIssueCurrentTab.OPEN
? "external_contours_page.empty_state.open_title"
: "external_contours_page.empty_state.closed_title"
)}
description={t(
currentTab === EInboxIssueCurrentTab.OPEN
routeTab === EInboxIssueCurrentTab.OPEN
? "external_contours_page.empty_state.open_description"
: "external_contours_page.empty_state.closed_description"
)}