[WEB-5141] chore: project features refactor (#7960)

* chore: project features refactor

* fix: enable/disable condition for toggle

* fix: dependencies

* chore: lint fix

* chore: lint fix

* chore: added fallback exports

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/page.tsx

@@ -6,11 +6,11 @@ import { useParams } from "next/navigation";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { PageHead } from "@/components/core/page-title";
-import { ProjectFeaturesList } from "@/components/project/settings/features-list";
 import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
+import { ProjectFeaturesList } from "@/plane-web/components/projects/settings/features-list";
 
 const FeaturesSettingsPage = observer(() => {
   const { workspaceSlug, projectId } = useParams();

apps/web/ce/components/projects/settings/features-list.tsx

@@ -0,0 +1 @@
+export { ProjectFeaturesList } from "@/components/project/settings/features-list";

apps/web/ce/constants/project/settings/features.tsx

@@ -13,6 +13,7 @@ export type TProperties = {
   isPro: boolean;
   isEnabled: boolean;
   renderChildren?: (currentProjectDetails: IProject, workspaceSlug: string) => ReactNode;
+  href?: string;
 };
 
 type TProjectBaseFeatureKeys = "cycles" | "modules" | "views" | "pages" | "inbox";

apps/web/core/components/core/modals/existing-issues-list-modal.tsx

@@ -33,7 +33,7 @@ type Props = {
   handleOnSubmit: (data: ISearchIssueResponse[]) => Promise<void>;
   workspaceLevelToggle?: boolean;
   shouldHideIssue?: (issue: ISearchIssueResponse) => boolean;
-  selectedWorkItems?: ISearchIssueResponse[];
+  selectedWorkItemIds?: string[];
   workItemSearchServiceCallback?: (params: TProjectIssuesSearchParams) => Promise<ISearchIssueResponse[]>;
 };
 
@@ -51,7 +51,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
     handleOnSubmit,
     workspaceLevelToggle = false,
     shouldHideIssue,
-    selectedWorkItems,
+    selectedWorkItemIds,
     workItemSearchServiceCallback,
   } = props;
   // states
@@ -117,10 +117,10 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
   };
 
   useEffect(() => {
-    if (selectedWorkItems) {
-      setSelectedIssues(selectedWorkItems);
+    if (selectedWorkItemIds) {
+      setSelectedIssues(issues.filter((issue) => selectedWorkItemIds.includes(issue.id)));
     }
-  }, [isOpen, selectedWorkItems]);
+  }, [isOpen, selectedWorkItemIds]);
 
   useEffect(() => {
     handleSearch();

apps/web/core/components/project/settings/features-list.tsx

@@ -3,12 +3,11 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { PROJECT_TRACKER_ELEMENTS, PROJECT_TRACKER_EVENTS } from "@plane/constants";
+import { PROJECT_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { setPromiseToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IProject } from "@plane/types";
-import { ToggleSwitch } from "@plane/ui";
 // components
 import { SettingsHeading } from "@/components/settings/heading";
 // helpers
@@ -19,6 +18,7 @@ import { useUser } from "@/hooks/store/user";
 // plane web imports
 import { UpgradeBadge } from "@/plane-web/components/workspace/upgrade-badge";
 import { PROJECT_FEATURES_LIST } from "@/plane-web/constants/project/settings";
+import { ProjectFeatureToggle } from "./helper";
 
 type Props = {
   workspaceSlug: string;
@@ -96,12 +96,13 @@ export const ProjectFeaturesList: FC<Props> = observer((props) => {
                     </p>
                   </div>
                 </div>
-                <ToggleSwitch
+                <ProjectFeatureToggle
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  featureItem={featureItem}
                   value={Boolean(currentProjectDetails?.[featureItem.property as keyof IProject])}
-                  onChange={() => handleSubmit(featureItemKey, featureItem.property)}
-                  disabled={!featureItem.isEnabled || !isAdmin}
-                  size="sm"
-                  data-ph-element={PROJECT_TRACKER_ELEMENTS.TOGGLE_FEATURE}
+                  handleSubmit={handleSubmit}
+                  disabled={!isAdmin}
                 />
               </div>
               <div className="pl-14">

apps/web/core/components/project/settings/helper.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import { EPillVariant, Pill, EPillSize } from "@plane/propel/pill";
+import { ToggleSwitch } from "@plane/ui";
+import type { TProperties } from "@/plane-web/constants/project/settings/features";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  featureItem: TProperties;
+  value: boolean;
+  handleSubmit: (featureKey: string, featureProperty: string) => void;
+  disabled?: boolean;
+};
+
+export const ProjectFeatureToggle = (props: Props) => {
+  const { workspaceSlug, projectId, featureItem, value, handleSubmit, disabled } = props;
+  return featureItem.href ? (
+    <Link href={`/${workspaceSlug}/settings/projects/${projectId}/features/${featureItem.href}`}>
+      <div className="flex items-center gap-2">
+        <Pill
+          variant={value ? EPillVariant.PRIMARY : EPillVariant.DEFAULT}
+          size={EPillSize.SM}
+          className="border-none rounded-lg"
+        >
+          {value ? "Enabled" : "Disabled"}
+        </Pill>
+        <ChevronRight className="h-4 w-4 text-custom-text-300" />
+      </div>
+    </Link>
+  ) : (
+    <ToggleSwitch
+      value={value}
+      onChange={() => handleSubmit(featureItem.key, featureItem.property)}
+      disabled={disabled}
+      size="sm"
+      data-ph-element={PROJECT_TRACKER_ELEMENTS.TOGGLE_FEATURE}
+    />
+  );
+};

apps/web/core/components/sidebar/add-button.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import type { FC } from "react";
+import React from "react";
 import { cn } from "@plane/utils";
 
 type Props = React.ComponentProps<"button"> & {

apps/web/core/components/sidebar/search-button.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import type { FC } from "react";
+import React from "react";
 import { Search } from "lucide-react";
 import { cn } from "@plane/utils";
 

apps/web/core/store/project/project.store.ts

@@ -12,7 +12,7 @@ import { ProjectService, ProjectStateService, ProjectArchiveService } from "@/se
 // store
 import type { CoreRootStore } from "../root.store";
 
-type ProjectOverviewCollapsible = "links" | "attachments";
+type ProjectOverviewCollapsible = "links" | "attachments" | "milestones";
 
 export interface IProjectStore {
   // observables

apps/web/ee/components/projects/settings/features-list.tsx

@@ -0,0 +1 @@
+export { ProjectFeaturesList } from "@/components/project/settings/features-list";