9cfde896b3
* [WEB-5134] refactor: update `web` ESLint configuration and refactor imports to use type imports - Enhanced ESLint configuration by adding new rules for import consistency and type imports. - Refactored multiple files to replace regular imports with type imports for better clarity and performance. - Ensured consistent use of type imports across the application to align with TypeScript best practices. * refactor: standardize type imports across components - Updated multiple files to replace regular imports with type imports for improved clarity and consistency. - Ensured adherence to TypeScript best practices in the rich filters and issue layouts components.
81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import type { FC } from "react";
|
|
import { useState } from "react";
|
|
import { observer } from "mobx-react";
|
|
import { useParams } from "next/navigation";
|
|
import { RefreshCcw } from "lucide-react";
|
|
// ui
|
|
import { EProjectFeatureKey, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
|
|
import { useTranslation } from "@plane/i18n";
|
|
import { Button } from "@plane/propel/button";
|
|
import { Breadcrumbs, Header } from "@plane/ui";
|
|
// components
|
|
import { InboxIssueCreateModalRoot } from "@/components/inbox/modals/create-modal";
|
|
// hooks
|
|
import { useProject } from "@/hooks/store/use-project";
|
|
import { useProjectInbox } from "@/hooks/store/use-project-inbox";
|
|
import { useUserPermissions } from "@/hooks/store/user";
|
|
// plane web
|
|
import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
|
|
|
|
export const ProjectInboxHeader: FC = observer(() => {
|
|
// states
|
|
const [createIssueModal, setCreateIssueModal] = useState(false);
|
|
// router
|
|
const { workspaceSlug, projectId } = useParams();
|
|
// store hooks
|
|
const { allowPermissions } = useUserPermissions();
|
|
const { t } = useTranslation();
|
|
|
|
const { currentProjectDetails, loader: currentProjectDetailsLoader } = useProject();
|
|
const { loader } = useProjectInbox();
|
|
|
|
// derived value
|
|
const isAuthorized = allowPermissions(
|
|
[EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
|
|
EUserPermissionsLevel.PROJECT
|
|
);
|
|
|
|
return (
|
|
<Header>
|
|
<Header.LeftItem>
|
|
<div className="flex items-center gap-4 flex-grow">
|
|
<Breadcrumbs isLoading={currentProjectDetailsLoader === "init-loader"}>
|
|
<CommonProjectBreadcrumbs
|
|
workspaceSlug={workspaceSlug?.toString() ?? ""}
|
|
projectId={projectId?.toString() ?? ""}
|
|
featureKey={EProjectFeatureKey.INTAKE}
|
|
isLast
|
|
/>
|
|
</Breadcrumbs>
|
|
|
|
{loader === "pagination-loading" && (
|
|
<div className="flex items-center gap-1.5 text-custom-text-300">
|
|
<RefreshCcw className="h-3.5 w-3.5 animate-spin" />
|
|
<p className="text-sm">{t("syncing")}...</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Header.LeftItem>
|
|
<Header.RightItem>
|
|
{currentProjectDetails?.inbox_view && workspaceSlug && projectId && isAuthorized ? (
|
|
<div className="flex items-center gap-2">
|
|
<InboxIssueCreateModalRoot
|
|
workspaceSlug={workspaceSlug.toString()}
|
|
projectId={projectId.toString()}
|
|
modalState={createIssueModal}
|
|
handleModalClose={() => setCreateIssueModal(false)}
|
|
/>
|
|
|
|
<Button variant="primary" size="sm" onClick={() => setCreateIssueModal(true)}>
|
|
{t("add_work_item")}
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</Header.RightItem>
|
|
</Header>
|
|
);
|
|
});
|