[WEB-5608] chore: Hide "Pro" Features in Community Edition (#8288)

* chore: Hide "Pro" Features in Community Edition

* refactor: remove time tracking feature and simplify project features list

Author: b-saikrishnakanth

apps/web/ce/components/estimates/estimate-list-item-buttons.tsx

@@ -1,10 +1,6 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
-import { Pen, Trash } from "lucide-react";
+import { Trash } from "lucide-react";
 import { PROJECT_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
-import { Tooltip } from "@plane/propel/tooltip";
-// components
-import { ProIcon } from "@/components/common/pro-icon";
 
 type TEstimateListItem = {
   estimateId: string;
@@ -21,22 +17,6 @@ export const EstimateListItemButtons = observer(function EstimateListItemButtons
   if (!isAdmin || !isEditable) return <></>;
   return (
     <div className="relative flex items-center gap-1">
-      <Tooltip
-        tooltipContent={
-          <div className="relative flex items-center gap-2">
-            <div>Upgrade</div>
-            <ProIcon className="w-3 h-3" />
-          </div>
-        }
-        position="top"
-      >
-        <button
-          className="relative flex-shrink-0 w-6 h-6 flex justify-center items-center rounded cursor-pointer transition-colors overflow-hidden hover:bg-custom-background-80"
-          data-ph-element={PROJECT_SETTINGS_TRACKER_ELEMENTS.ESTIMATES_LIST_ITEM}
-        >
-          <Pen size={12} />
-        </button>
-      </Tooltip>
       <button
         className="relative flex-shrink-0 w-6 h-6 flex justify-center items-center rounded cursor-pointer transition-colors overflow-hidden hover:bg-custom-background-80"
         onClick={() => onDeleteClick && onDeleteClick(estimateId)}

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

@@ -1,5 +1,4 @@
 import type { ReactNode } from "react";
-import { Timer } from "lucide-react";
 // plane imports
 import { CycleIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon } from "@plane/propel/icons";
 import type { IProject } from "@plane/types";
@@ -17,7 +16,6 @@ export type TProperties = {
 };
 
 type TProjectBaseFeatureKeys = "cycles" | "modules" | "views" | "pages" | "inbox";
-type TProjectOtherFeatureKeys = "is_time_tracking_enabled";
 
 type TBaseFeatureList = {
   [key in TProjectBaseFeatureKeys]: TProperties;
@@ -71,35 +69,13 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
   },
 };
 
-type TOtherFeatureList = {
-  [key in TProjectOtherFeatureKeys]: TProperties;
-};
-
-export const PROJECT_OTHER_FEATURES_LIST: TOtherFeatureList = {
-  is_time_tracking_enabled: {
-    key: "time_tracking",
-    property: "is_time_tracking_enabled",
-    title: "Time Tracking",
-    description: "Log time, see timesheets, and download full CSVs for your entire workspace.",
-    icon: <Timer className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
-    isPro: true,
-    isEnabled: false,
-  },
-};
-
 type TProjectFeatures = {
   project_features: {
     key: string;
     title: string;
     description: string;
     featureList: TBaseFeatureList;
   };
-  project_others: {
-    key: string;
-    title: string;
-    description: string;
-    featureList: TOtherFeatureList;
-  };
 };
 
 export const PROJECT_FEATURES_LIST: TProjectFeatures = {
@@ -109,10 +85,4 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
     description: "Toggle these on or off this project.",
     featureList: PROJECT_BASE_FEATURES_LIST,
   },
-  project_others: {
-    key: "work_management",
-    title: "Work management",
-    description: "Available only on some plans as indicated by the label next to the feature below.",
-    featureList: PROJECT_OTHER_FEATURES_LIST,
-  },
 };

apps/web/core/components/estimates/create/stage-one.tsx

@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { Info } from "lucide-react";
 // plane imports
 import { EEstimateSystem, ESTIMATE_SYSTEMS } from "@plane/constants";
@@ -32,29 +31,32 @@ export function EstimateCreateStageOne(props: TEstimateCreateStageOne) {
     <div className="space-y-6">
       <div className="sm:flex sm:items-center sm:space-x-10 sm:space-y-0 gap-2 mb-2">
         <RadioInput
-          options={Object.keys(ESTIMATE_SYSTEMS).map((system) => {
-            const currentSystem = system as TEstimateSystemKeys;
-            const isEnabled = isEstimateSystemEnabled(currentSystem);
-            return {
-              label: !ESTIMATE_SYSTEMS[currentSystem]?.is_available ? (
-                <div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
-                  {t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
-                  <Tooltip tooltipContent={t("common.coming_soon")}>
-                    <Info size={12} />
-                  </Tooltip>
-                </div>
-              ) : !isEnabled ? (
-                <div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
-                  {t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
-                  <UpgradeBadge />
-                </div>
-              ) : (
-                <div>{t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}</div>
-              ),
-              value: system,
-              disabled: !isEnabled,
-            };
-          })}
+          options={Object.keys(ESTIMATE_SYSTEMS)
+            .map((system) => {
+              const currentSystem = system as TEstimateSystemKeys;
+              const isEnabled = isEstimateSystemEnabled(currentSystem);
+              if (!isEnabled) return null;
+              return {
+                label: !ESTIMATE_SYSTEMS[currentSystem]?.is_available ? (
+                  <div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
+                    {t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
+                    <Tooltip tooltipContent={t("common.coming_soon")}>
+                      <Info size={12} />
+                    </Tooltip>
+                  </div>
+                ) : !isEnabled ? (
+                  <div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
+                    {t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
+                    <UpgradeBadge />
+                  </div>
+                ) : (
+                  <div>{t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}</div>
+                ),
+                value: system,
+                disabled: !isEnabled,
+              };
+            })
+            .filter((option) => option !== null)}
           name="estimate-radio-input"
           label={t("project_settings.estimates.create.choose_estimate_system")}
           labelClassName="text-sm font-medium text-custom-text-200 mb-1.5"
@@ -99,7 +101,7 @@ export function EstimateCreateStageOne(props: TEstimateCreateStageOne) {
                     <p className="text-xs text-custom-text-300">
                       {currentEstimateSystem.templates[name]?.values
                         ?.map((template) =>
-                          estimateSystem === EEstimateSystem.TIME
+                          estimateSystem === (EEstimateSystem.TIME as TEstimateSystemKeys)
                             ? convertMinutesToHoursMinutesString(Number(template.value)).trim()
                             : template.value
                         )

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

@@ -32,7 +32,7 @@ export const ProjectFeaturesList = observer(function ProjectFeaturesList(props:
   // derived values
   const currentProjectDetails = getProjectById(projectId);
 
-  const handleSubmit = async (featureKey: string, featureProperty: string) => {
+  const handleSubmit = (featureKey: string, featureProperty: string) => {
     if (!workspaceSlug || !projectId || !currentProjectDetails) return;
 
     // making the request to update the project feature
@@ -52,13 +52,14 @@ export const ProjectFeaturesList = observer(function ProjectFeaturesList(props:
         message: () => "Something went wrong while updating project feature. Please try again.",
       },
     });
-    updateProjectPromise.then(() => {
+    void updateProjectPromise.then(() => {
       captureSuccess({
         eventName: PROJECT_TRACKER_EVENTS.feature_toggled,
         payload: {
           feature_key: featureKey,
         },
       });
+      return undefined;
     });
   };