import { useCallback, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { ArrowLeft, Briefcase, Circle, ExternalLink, Plus } from "lucide-react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // components import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues"; import { ProjectAnalyticsModal } from "components/analytics"; // ui import { Breadcrumbs, Button, LayersIcon } from "@plane/ui"; // types import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types"; // constants import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue"; // helper import { renderEmoji } from "helpers/emoji.helper"; import { EFilterType } from "store/issues/types"; import { EProjectStore } from "store/command-palette.store"; import { EUserWorkspaceRoles } from "constants/workspace"; export const ProjectIssuesHeader: React.FC = observer(() => { const [analyticsModal, setAnalyticsModal] = useState(false); const router = useRouter(); const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string }; const { project: { currentProjectDetails }, projectLabel: { projectLabels }, projectMember: { projectMembers }, projectState: projectStateStore, inbox: inboxStore, commandPalette: commandPaletteStore, trackEvent: { setTrackElement }, // issue filters projectIssuesFilter: { issueFilters, updateFilters }, projectIssues: {}, user: { currentProjectRole }, } = useMobxStore(); const activeLayout = issueFilters?.displayFilters?.layout; const handleFiltersUpdate = useCallback( (key: keyof IIssueFilterOptions, value: string | string[]) => { if (!workspaceSlug || !projectId) return; const newValues = issueFilters?.filters?.[key] ?? []; if (Array.isArray(value)) { value.forEach((val) => { if (!newValues.includes(val)) newValues.push(val); }); } else { if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1); else newValues.push(value); } updateFilters(workspaceSlug, projectId, EFilterType.FILTERS, { [key]: newValues }); }, [workspaceSlug, projectId, issueFilters, updateFilters] ); const handleLayoutChange = useCallback( (layout: TIssueLayouts) => { if (!workspaceSlug || !projectId) return; updateFilters(workspaceSlug, projectId, EFilterType.DISPLAY_FILTERS, { layout: layout }); }, [workspaceSlug, projectId, updateFilters] ); const handleDisplayFilters = useCallback( (updatedDisplayFilter: Partial) => { if (!workspaceSlug || !projectId) return; updateFilters(workspaceSlug, projectId, EFilterType.DISPLAY_FILTERS, updatedDisplayFilter); }, [workspaceSlug, projectId, updateFilters] ); const handleDisplayProperties = useCallback( (property: Partial) => { if (!workspaceSlug || !projectId) return; updateFilters(workspaceSlug, projectId, EFilterType.DISPLAY_PROPERTIES, property); }, [workspaceSlug, projectId, updateFilters] ); const inboxDetails = projectId ? inboxStore.inboxesList?.[projectId]?.[0] : undefined; const deployUrl = process.env.NEXT_PUBLIC_DEPLOY_URL; const canUserCreateIssue = currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole); return ( <> setAnalyticsModal(false)} projectDetails={currentProjectDetails ?? undefined} />
{renderEmoji(currentProjectDetails.emoji)} ) : currentProjectDetails?.icon_prop ? (
{renderEmoji(currentProjectDetails.icon_prop)}
) : ( {currentProjectDetails?.name.charAt(0)} ) ) : ( ) } label={currentProjectDetails?.name ?? "Project"} link={`/${workspaceSlug}/projects`} /> } label="Issues" />
{currentProjectDetails?.is_deployed && deployUrl && ( Public )}
handleLayoutChange(layout)} selectedLayout={activeLayout} /> m.member)} states={projectStateStore.states?.[projectId ?? ""] ?? undefined} /> {projectId && inboxStore.isInboxEnabled && inboxDetails && ( )} {canUserCreateIssue && ( )}
); });