82 lines
3.6 KiB
TypeScript
82 lines
3.6 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import { useState } from "react";
|
|
import { observer } from "mobx-react";
|
|
import { useParams } from "next/navigation";
|
|
import { RefreshCcw } from "lucide-react";
|
|
import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
|
|
import { useTranslation } from "@plane/i18n";
|
|
import { Header } from "@plane/ui";
|
|
import { AppHeaderPrimaryActionButton } from "@/components/core/app-header/primary-action-button";
|
|
import { FiltersToggle } from "@/components/rich-filters/filters-toggle";
|
|
import { useProject } from "@/hooks/store/use-project";
|
|
import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
|
|
import { useUserPermissions } from "@/hooks/store/user";
|
|
import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
|
|
import { ExpandedToolbarBreadcrumbs } from "@/plane-web/components/breadcrumbs/expanded-toolbar-breadcrumbs";
|
|
import { ProjectFeatureBreadcrumb } from "@/plane-web/components/breadcrumbs/project-feature";
|
|
import { useExternalContoursFilter } from "./filters/provider";
|
|
import { ExternalContourCreateModalRoot } from "./create-modal";
|
|
|
|
export const ProjectExternalContoursHeader = observer(function ProjectExternalContoursHeader() {
|
|
const [createIssueModal, setCreateIssueModal] = useState(false);
|
|
const { workspaceSlug, projectId } = useParams();
|
|
const { t } = useTranslation();
|
|
const { allowPermissions } = useUserPermissions();
|
|
const { loader: currentProjectDetailsLoader } = useProject();
|
|
const { loader } = useProjectExternalContours();
|
|
const filter = useExternalContoursFilter();
|
|
|
|
const isAuthorized = allowPermissions(
|
|
[EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
|
|
EUserPermissionsLevel.PROJECT
|
|
);
|
|
|
|
return (
|
|
<Header>
|
|
<Header.LeftItem className="nodedc-bottom-dock-left">
|
|
<div className="flex min-w-0 flex-grow items-center gap-4 overflow-hidden">
|
|
<ExpandedToolbarBreadcrumbs isLoading={currentProjectDetailsLoader === "init-loader"}>
|
|
<CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
|
|
<ProjectFeatureBreadcrumb
|
|
workspaceSlug={workspaceSlug?.toString()}
|
|
projectId={projectId?.toString()}
|
|
featureKey="external_contours"
|
|
isLast
|
|
/>
|
|
</ExpandedToolbarBreadcrumbs>
|
|
|
|
{(loader === "mutation-loading" || loader === "issue-loading") && (
|
|
<div className="flex items-center gap-1.5 text-tertiary">
|
|
<RefreshCcw className="h-3.5 w-3.5 animate-spin" />
|
|
<p className="text-13">{t("syncing")}...</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Header.LeftItem>
|
|
<Header.RightItem>
|
|
{workspaceSlug && projectId && isAuthorized ? (
|
|
<div className="flex items-center gap-2">
|
|
<div className="nodedc-top-toolbar-cluster flex items-center gap-2">
|
|
<FiltersToggle filter={filter} showAddFilterButtonWhenEmpty={false} />
|
|
</div>
|
|
<ExternalContourCreateModalRoot
|
|
workspaceSlug={workspaceSlug.toString()}
|
|
projectId={projectId.toString()}
|
|
modalState={createIssueModal}
|
|
handleModalClose={() => setCreateIssueModal(false)}
|
|
/>
|
|
<AppHeaderPrimaryActionButton onClick={() => setCreateIssueModal(true)}>
|
|
{t("app_header.add_task")}
|
|
</AppHeaderPrimaryActionButton>
|
|
</div>
|
|
) : null}
|
|
</Header.RightItem>
|
|
</Header>
|
|
);
|
|
});
|