import { useCallback, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { ArrowLeft, 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, BreadcrumbItem, Button } from "@plane/ui"; // types import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types"; // constants import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue"; // helper import { truncateText } from "helpers/string.helper"; export const ProjectIssuesHeader: React.FC = observer(() => { const [analyticsModal, setAnalyticsModal] = useState(false); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { issueFilter: issueFilterStore, project: projectStore, inbox: inboxStore } = useMobxStore(); const activeLayout = issueFilterStore.userDisplayFilters.layout; const handleLayoutChange = useCallback( (layout: TIssueLayouts) => { if (!workspaceSlug || !projectId) return; issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), { display_filters: { layout, }, }); }, [issueFilterStore, projectId, workspaceSlug] ); const handleFiltersUpdate = useCallback( (key: keyof IIssueFilterOptions, value: string | string[]) => { if (!workspaceSlug || !projectId) return; const newValues = issueFilterStore.userFilters?.[key] ?? []; if (Array.isArray(value)) { value.forEach((val) => { if (!newValues.includes(val)) newValues.push(val); }); } else { if (issueFilterStore.userFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1); else newValues.push(value); } issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), { filters: { [key]: newValues, }, }); }, [issueFilterStore, projectId, workspaceSlug] ); const handleDisplayFiltersUpdate = useCallback( (updatedDisplayFilter: Partial) => { if (!workspaceSlug || !projectId) return; issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), { display_filters: { ...updatedDisplayFilter, }, }); }, [issueFilterStore, projectId, workspaceSlug] ); const handleDisplayPropertiesUpdate = useCallback( (property: Partial) => { if (!workspaceSlug || !projectId) return; issueFilterStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property); }, [issueFilterStore, projectId, workspaceSlug] ); const projectDetails = workspaceSlug && projectId ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) : undefined; const inboxDetails = projectId ? inboxStore.inboxesList?.[projectId.toString()]?.[0] : undefined; const deployUrl = process.env.NEXT_PUBLIC_DEPLOY_URL; return ( <> setAnalyticsModal(false)} projectDetails={projectDetails ?? undefined} />
router.back()}>

Projects

} />
{projectDetails?.is_deployed && deployUrl && ( Public )}
handleLayoutChange(layout)} selectedLayout={activeLayout} /> m.member)} states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined} /> {projectId && inboxStore.isInboxEnabled && inboxDetails && ( )}
); });