add useFeature hook, only show workflows when enabled (#12)

* add useFeature hook * only show workflows tab when workflow feature is enabled
riverqueue · Jun 9, 2024 · a2defb1 · a2defb1
1 parent 6a05cf0
commit a2defb1
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 21 deletions.
diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
@@ -12,7 +12,7 @@
   }
   ```
 */
-import { Fragment, PropsWithChildren } from "react";
+import { Fragment, PropsWithChildren, useMemo } from "react";
 
 import {
   Dialog,
@@ -32,33 +32,37 @@ import { classNames } from "@utils/style";
 import { Link } from "@tanstack/react-router";
 import { JobState } from "@services/types";
 import { useSidebarSetting } from "@contexts/SidebarSetting.hook";
+import useFeature from "@hooks/use-feature";
 
 type LayoutProps = PropsWithChildren<object>;
 
-const navigation = [
-  {
-    name: "Jobs",
-    href: "/jobs",
-    icon: QueueListIcon,
-    search: { state: JobState.Running },
-  },
-  { name: "Queues", href: "/queues", icon: InboxStackIcon },
-  { name: "Workflows", href: "#", icon: RectangleGroupIcon },
-];
-
 const Layout = ({ children }: LayoutProps) => {
   const { open: sidebarOpen, setOpen: setSidebarOpen } = useSidebarSetting();
 
+  const featureEnabledWorkflows = useFeature("ENABLE_WORKFLOWS", false);
+
+  const navigation = useMemo(
+    () =>
+      [
+        {
+          name: "Jobs",
+          href: "/jobs",
+          icon: QueueListIcon,
+          search: { state: JobState.Running },
+        },
+        { name: "Queues", href: "/queues", icon: InboxStackIcon },
+        {
+          name: "Workflows",
+          href: "#",
+          icon: RectangleGroupIcon,
+          hidden: !featureEnabledWorkflows,
+        },
+      ].filter((item) => item.hidden === undefined || item.hidden === false),
+    [featureEnabledWorkflows]
+  );
+
   return (
     <>
-      {/*
-        This example requires updating your template:
-
-        ```
-        <html class="h-full bg-white">
-        <body class="h-full">
-        ```
-      */}
       <div className="h-full">
         <Transition show={sidebarOpen} as={Fragment}>
           <Dialog
@@ -162,7 +166,6 @@ const Layout = ({ children }: LayoutProps) => {
                       </nav>
                     </div>
                   </div>
-                  {/* <JobFilters statesAndCounts={statesAndCounts} /> */}
                 </DialogPanel>
               </TransitionChild>
             </div>

diff --git a/ui/src/hooks/use-feature.ts b/ui/src/hooks/use-feature.ts
@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+
+const isNil = (val: string | null | undefined): boolean =>
+  val === undefined || val === null;
+
+const getBoolVal = (val?: string | boolean | null): boolean => {
+  if (typeof val === "string") {
+    return val === "true";
+  }
+
+  return !!val;
+};
+
+const useFeature = (name: string, enabled = false): boolean => {
+  const featureEnabled = useMemo((): boolean => {
+    const localStorageValue = window?.localStorage?.getItem(`FEATURE_${name}`);
+    const envVar: string | undefined = import.meta.env[`VITE_FEATURE_${name}`];
+
+    if (!isNil(localStorageValue)) return getBoolVal(localStorageValue);
+    if (!isNil(envVar)) return getBoolVal(envVar);
+
+    return !!enabled;
+  }, [name, enabled]);
+
+  return featureEnabled;
+};
+
+export default useFeature;
diff --git a/ui/src/vite-env.d.ts b/ui/src/vite-env.d.ts
@@ -2,6 +2,7 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
+  readonly VITE_FEATURE_ENABLE_WORKFLOWS: string;
   readonly VITE_RIVER_API_BASE_URL: string;
 }