adds "projects-comparison" feature flag

Vizzuality · Dec 18, 2024 · e1bda8d · e1bda8d
1 parent fd506b7
commit e1bda8d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 23 deletions.
diff --git a/client/src/containers/overview/project-details/index.tsx b/client/src/containers/overview/project-details/index.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 import { PROJECT_SCORE } from "@shared/entities/project-score.enum";
 import { useAtom } from "jotai";
-import { ChevronUp, ChevronDown, NotebookPen } from "lucide-react";
+import { ChevronUp, ChevronDown, NotebookPen, Plus } from "lucide-react";
 
 import {
   renderCurrency,
@@ -13,6 +13,8 @@ import { cn } from "@/lib/utils";
 
 import { projectDetailsAtom } from "@/app/(overview)/store";
 
+import { useFeatureFlags } from "@/hooks/use-feature-flags";
+
 import ParametersProjects from "@/containers/overview/project-details/parameters";
 
 import BarChart from "@/components/ui/bar-chart";
@@ -141,6 +143,7 @@ const projectData = {
 
 export default function ProjectDetails() {
   const [projectDetails, setProjectDetails] = useAtom(projectDetailsAtom);
+  const featureFlags = useFeatureFlags();
 
   const handleOpenDetails = (open: boolean) =>
     setProjectDetails({ ...projectDetails, isOpen: open });
@@ -363,17 +366,19 @@ export default function ProjectDetails() {
                   <h3 className="text-md">Scorecard ratings</h3>
                 </Label>
               </div>
-              {/*<div className="flex items-center gap-2">*/}
-              {/*  <Label className="text-xs text-big-stone-200">*/}
-              {/*    Compare with a different project*/}
-              {/*  </Label>*/}
-              {/*  <Button*/}
-              {/*    variant="outline"*/}
-              {/*    className="h-8 w-8 p-0 hover:bg-transparent"*/}
-              {/*  >*/}
-              {/*    <Plus className="h-4 w-4" />*/}
-              {/*  </Button>*/}
-              {/*</div>*/}
+              {featureFlags["project-comparison"] && (
+                <div className="flex items-center gap-2">
+                  <Label className="text-xs text-big-stone-200">
+                    Compare with a different project
+                  </Label>
+                  <Button
+                    variant="outline"
+                    className="h-8 w-8 p-0 hover:bg-transparent"
+                  >
+                    <Plus className="h-4 w-4" />
+                  </Button>
+                </div>
+              )}
             </div>
             <div className="mt-2">
               {projectData.scorecard.map((item, index) => (
@@ -413,17 +418,19 @@ export default function ProjectDetails() {
                   <h3 className="text-md">Cost estimates</h3>
                 </Label>
               </div>
-              {/*<div className="flex items-center gap-2">*/}
-              {/*  <Label className="text-xs text-big-stone-200">*/}
-              {/*    Compare with a different project*/}
-              {/*  </Label>*/}
-              {/*  <Button*/}
-              {/*    variant="outline"*/}
-              {/*    className="h-8 w-8 p-0 hover:bg-transparent"*/}
-              {/*  >*/}
-              {/*    <Plus className="h-4 w-4" />*/}
-              {/*  </Button>*/}
-              {/*</div>*/}
+              {featureFlags["project-comparison"] && (
+                <div className="flex items-center gap-2">
+                  <Label className="text-xs text-big-stone-200">
+                    Compare with a different project
+                  </Label>
+                  <Button
+                    variant="outline"
+                    className="h-8 w-8 p-0 hover:bg-transparent"
+                  >
+                    <Plus className="h-4 w-4" />
+                  </Button>
+                </div>
+              )}
             </div>
             <div>
               {projectData.costEstimates.map((estimate) => (

diff --git a/client/src/hooks/use-feature-flags.ts b/client/src/hooks/use-feature-flags.ts
@@ -1,6 +1,7 @@
 const FEATURE_FLAGS = {
   "edit-project": false,
   "share-information": false,
+  "project-comparison": false,
 } as const;
 
 type FeatureFlags = typeof FEATURE_FLAGS;