113 lines
4 KiB
TypeScript
113 lines
4 KiB
TypeScript
"use client";
|
|
|
|
import { observer } from "mobx-react";
|
|
import { useParams } from "next/navigation";
|
|
// icons
|
|
import { Circle, ExternalLink } from "lucide-react";
|
|
// plane constants
|
|
import { EIssuesStoreType } from "@plane/constants";
|
|
// ui
|
|
import { Breadcrumbs, Button, LayersIcon, Tooltip, Header } from "@plane/ui";
|
|
// components
|
|
import { BreadcrumbLink, CountChip } from "@/components/common";
|
|
// constants
|
|
import HeaderFilters from "@/components/issues/filters";
|
|
// helpers
|
|
import { SPACE_BASE_PATH, SPACE_BASE_URL } from "@/helpers/common.helper";
|
|
// hooks
|
|
import { useEventTracker, useProject, useCommandPalette, useUserPermissions } from "@/hooks/store";
|
|
import { useIssues } from "@/hooks/store/use-issues";
|
|
import { useAppRouter } from "@/hooks/use-app-router";
|
|
import { usePlatformOS } from "@/hooks/use-platform-os";
|
|
// plane web
|
|
import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
|
|
import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
|
|
|
|
export const IssuesHeader = observer(() => {
|
|
// router
|
|
const router = useAppRouter();
|
|
const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
|
|
// store hooks
|
|
const {
|
|
issues: { getGroupIssueCount },
|
|
} = useIssues(EIssuesStoreType.PROJECT);
|
|
|
|
const { currentProjectDetails, loader } = useProject();
|
|
|
|
const { toggleCreateIssueModal } = useCommandPalette();
|
|
const { setTrackElement } = useEventTracker();
|
|
const { allowPermissions } = useUserPermissions();
|
|
const { isMobile } = usePlatformOS();
|
|
|
|
const SPACE_APP_URL = (SPACE_BASE_URL.trim() === "" ? window.location.origin : SPACE_BASE_URL) + SPACE_BASE_PATH;
|
|
const publishedURL = `${SPACE_APP_URL}/issues/${currentProjectDetails?.anchor}`;
|
|
|
|
const issuesCount = getGroupIssueCount(undefined, undefined, false);
|
|
const canUserCreateIssue = allowPermissions(
|
|
[EUserPermissions.ADMIN, EUserPermissions.MEMBER],
|
|
EUserPermissionsLevel.PROJECT
|
|
);
|
|
|
|
return (
|
|
<Header>
|
|
<Header.LeftItem>
|
|
<div className="flex items-center gap-2.5">
|
|
<Breadcrumbs onBack={() => router.back()} isLoading={loader === "init-loader"}>
|
|
<ProjectBreadcrumb />
|
|
|
|
<Breadcrumbs.BreadcrumbItem
|
|
type="text"
|
|
link={<BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
|
|
/>
|
|
</Breadcrumbs>
|
|
{issuesCount && issuesCount > 0 ? (
|
|
<Tooltip
|
|
isMobile={isMobile}
|
|
tooltipContent={`There are ${issuesCount} ${issuesCount > 1 ? "issues" : "issue"} in this project`}
|
|
position="bottom"
|
|
>
|
|
<CountChip count={issuesCount} />
|
|
</Tooltip>
|
|
) : null}
|
|
</div>
|
|
{currentProjectDetails?.anchor ? (
|
|
<a
|
|
href={publishedURL}
|
|
className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-custom-primary-100"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
|
|
Public
|
|
<ExternalLink className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
|
|
</a>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</Header.LeftItem>
|
|
<Header.RightItem>
|
|
<div className="hidden gap-3 md:flex">
|
|
<HeaderFilters
|
|
projectId={projectId}
|
|
currentProjectDetails={currentProjectDetails}
|
|
workspaceSlug={workspaceSlug}
|
|
canUserCreateIssue={canUserCreateIssue}
|
|
/>
|
|
</div>
|
|
{canUserCreateIssue ? (
|
|
<Button
|
|
onClick={() => {
|
|
setTrackElement("Project issues page");
|
|
toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
|
|
}}
|
|
size="sm"
|
|
>
|
|
<div className="hidden sm:block">Add</div> Issue
|
|
</Button>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</Header.RightItem>
|
|
</Header>
|
|
);
|
|
});
|