import { FC } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { ContrastIcon, FileText, Inbox, Layers } from "lucide-react"; import { DiceIcon, ToggleSwitch } from "@plane/ui"; // hooks import { useEventTracker, useProject, useUser, useWorkspace } from "hooks/store"; import useToast from "hooks/use-toast"; // types import { IProject } from "@plane/types"; // constants import { EUserProjectRoles } from "constants/project"; type Props = {}; const PROJECT_FEATURES_LIST = [ { title: "Cycles", description: "Cycles are enabled for all the projects in this workspace. Access them from the sidebar.", icon: , property: "cycle_view", }, { title: "Modules", description: "Modules are enabled for all the projects in this workspace. Access it from the sidebar.", icon: , property: "module_view", }, { title: "Views", description: "Views are enabled for all the projects in this workspace. Access it from the sidebar.", icon: , property: "issue_views_view", }, { title: "Pages", description: "Pages are enabled for all the projects in this workspace. Access it from the sidebar.", icon: , property: "page_view", }, { title: "Inbox", description: "Inbox are enabled for all the projects in this workspace. Access it from the issues views page.", icon: , property: "inbox_view", }, ]; export const ProjectFeaturesList: FC = observer(() => { // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // store hooks const { captureEvent } = useEventTracker(); const { currentUser, membership: { currentProjectRole }, } = useUser(); const { currentProjectDetails, updateProject } = useProject(); const isAdmin = currentProjectRole === EUserProjectRoles.ADMIN; // toast alert const { setToastAlert } = useToast(); const handleSubmit = async (formData: Partial) => { if (!workspaceSlug || !projectId || !currentProjectDetails) return; setToastAlert({ type: "success", title: "Success!", message: "Project feature updated successfully.", }); updateProject(workspaceSlug.toString(), projectId.toString(), formData); }; if (!currentUser) return <>; return (
{PROJECT_FEATURES_LIST.map((feature) => (
{feature.icon}

{feature.title}

{feature.description}

{ captureEvent(`Toggle ${feature.title.toLowerCase()}`, { enabled: !currentProjectDetails?.[feature.property as keyof IProject], element: "Project settings feature page", }); handleSubmit({ [feature.property]: !currentProjectDetails?.[feature.property as keyof IProject], }); }} disabled={!isAdmin} size="sm" />
))}
); });