feat: create Frontend feature flags (#3029)

* Add UI feature flag config

* [autofix.ci] apply automated fixes

* hide general settings if there is nothing to show

* make sure to handle !autoLogin case

* [autofix.ci] apply automated fixes

* missed commit

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: anovazzi1 <otavio2204@gmail.com>

src/frontend/feature-config.json

@@ -0,0 +1,6 @@
+{
+  "ENABLE_DARK_MODE": true,
+  "ENABLE_API": true,
+  "ENABLE_LANGFLOW_STORE": true,
+  "ENABLE_PROFILE_ICONS": true
+}

src/frontend/src/components/chatComponent/index.tsx

@@ -1,3 +1,4 @@
+import FeatureFlags from "@/../feature-config.json";
 import { Transition } from "@headlessui/react";
 import { useMemo, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -140,30 +141,34 @@ export default function FlowToolbar(): JSX.Element {
             <div>
               <Separator orientation="vertical" />
             </div>
-            <div className="flex cursor-pointer items-center gap-2">
+            {FeatureFlags.ENABLE_API && (
-              {currentFlow && currentFlow.data && (
+              <>
-                <ApiModal
+                <div className="flex cursor-pointer items-center gap-2">
-                  flow={currentFlow}
+                  {currentFlow && currentFlow.data && (
-                  open={openCodeModal}
+                    <ApiModal
-                  setOpen={setOpenCodeModal}
+                      flow={currentFlow}
-                >
+                      open={openCodeModal}
-                  <div
+                      setOpen={setOpenCodeModal}
-                    className={classNames(
+                    >
-                      "relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover",
+                      <div
-                    )}
+                        className={classNames(
-                  >
+                          "relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover",
-                    <ForwardedIconComponent
+                        )}
-                      name="Code2"
+                      >
-                      className={"h-5 w-5"}
+                        <ForwardedIconComponent
-                    />
+                          name="Code2"
-                    API
+                          className={"h-5 w-5"}
-                  </div>
+                        />
-                </ApiModal>
+                        API
-              )}
+                      </div>
-            </div>
+                    </ApiModal>
-            <div>
+                  )}
-              <Separator orientation="vertical" />
+                </div>
-            </div>
+                <div>
+                  <Separator orientation="vertical" />
+                </div>
+              </>
+            )}
             <div className="flex items-center gap-2">
               <div
                 className={`side-bar-button ${

src/frontend/src/components/headerComponent/index.tsx

@@ -11,6 +11,7 @@ import {
 } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 
+import FeatureFlags from "@/../feature-config.json";
 import { useLogout } from "@/controllers/API/queries/auth";
 import useAuthStore from "@/stores/authStore";
 import useAlertStore from "../../stores/alertStore";
@@ -182,18 +183,26 @@ export default function Header(): JSX.Element {
           </a>
 
           <Separator orientation="vertical" />
-          <button
+          {FeatureFlags.ENABLE_DARK_MODE && (
-            className="extra-side-bar-save-disable"
+            <button
-            onClick={() => {
+              className="extra-side-bar-save-disable"
-              setDark(!dark);
+              onClick={() => {
-            }}
+                setDark(!dark);
-          >
+              }}
-            {dark ? (
+            >
-              <IconComponent name="SunIcon" className="side-bar-button-size" />
+              {dark ? (
-            ) : (
+                <IconComponent
-              <IconComponent name="MoonIcon" className="side-bar-button-size" />
+                  name="SunIcon"
-            )}
+                  className="side-bar-button-size"
-          </button>
+                />
+              ) : (
+                <IconComponent
+                  name="MoonIcon"
+                  className="side-bar-button-size"
+                />
+              )}
+            </button>
+          )}
           <AlertDropdown>
             <div className="extra-side-bar-save-disable relative">
               {notificationCenter && (
@@ -216,10 +225,17 @@ export default function Header(): JSX.Element {
                   data-testid="user-profile-settings"
                   className="shrink-0"
                 >
-                  <img
+                  {FeatureFlags.ENABLE_PROFILE_ICONS ? (
-                    src={profileImageUrl}
+                    <img
-                    className="h-7 w-7 shrink-0 focus-visible:outline-0"
+                      src={profileImageUrl}
-                  />
+                      className="h-7 w-7 shrink-0 focus-visible:outline-0"
+                    />
+                  ) : (
+                    <IconComponent
+                      name="Settings"
+                      className="side-bar-button-size"
+                    />
+                  )}
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent className="mr-1 mt-1 min-w-40">

src/frontend/src/pages/SettingsPage/index.tsx

@@ -1,3 +1,6 @@
+import FeatureFlags from "@/../feature-config.json";
+import useAuthStore from "@/stores/authStore";
+import { useStoreStore } from "@/stores/storeStore";
 import { useEffect } from "react";
 import { Outlet } from "react-router-dom";
 import ForwardedIconComponent from "../../components/genericIconComponent";
@@ -10,12 +13,26 @@ export default function SettingsPage(): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId,
   );
+
+  const autoLogin = useAuthStore((state) => state.autoLogin);
+  const hasStore = useStoreStore((state) => state.hasStore);
+
+  // Hides the General settings if there is nothing to show
+  const showGeneralSettings =
+    FeatureFlags.ENABLE_PROFILE_ICONS || hasStore || !autoLogin;
+
   useEffect(() => {
     setCurrentFlowId("");
   }, [pathname]);
 
-  const sidebarNavItems = [
+  const sidebarNavItems: {
-    {
+    href?: string;
+    title: string;
+    icon: React.ReactNode;
+  }[] = [];
+
+  if (showGeneralSettings) {
+    sidebarNavItems.push({
       title: "General",
       href: "/settings/general",
       icon: (
@@ -24,7 +41,10 @@ export default function SettingsPage(): JSX.Element {
           className="w-4 flex-shrink-0 justify-start stroke-[1.5]"
         />
       ),
-    },
+    });
+  }
+
+  sidebarNavItems.push(
     {
       title: "Global Variables",
       href: "/settings/global-variables",
@@ -65,7 +85,7 @@ export default function SettingsPage(): JSX.Element {
         />
       ),
     },
-  ];
+  );
   return (
     <PageLayout
       title="Settings"

src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx

@@ -1,3 +1,4 @@
+import FeatureFlags from "@/../feature-config.json";
 import { usePostAddApiKey } from "@/controllers/API/queries/api-keys";
 import { useGetProfilePicturesQuery } from "@/controllers/API/queries/files";
 import useAuthStore from "@/stores/authStore";
@@ -101,13 +102,15 @@ export const GeneralPage = () => {
       <GeneralPageHeaderComponent />
 
       <div className="grid gap-6">
-        <ProfilePictureFormComponent
+        {FeatureFlags.ENABLE_PROFILE_ICONS && (
-          profilePicture={profilePicture}
+          <ProfilePictureFormComponent
-          handleInput={handleInput}
+            profilePicture={profilePicture}
-          handlePatchProfilePicture={handlePatchProfilePicture}
+            handleInput={handleInput}
-          handleGetProfilePictures={handleGetProfilePictures}
+            handlePatchProfilePicture={handlePatchProfilePicture}
-          userData={userData}
+            handleGetProfilePictures={handleGetProfilePictures}
-        />
+            userData={userData}
+          />
+        )}
 
         {!autoLogin && (
           <PasswordFormComponent

src/frontend/src/routes.tsx

@@ -1,3 +1,6 @@
+import FeatureFlags from "@/../feature-config.json";
+import useAuthStore from "@/stores/authStore";
+import { useStoreStore } from "@/stores/storeStore";
 import { Suspense, lazy } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { ProtectedAdminRoute } from "./components/authAdminGuard";
@@ -36,6 +39,13 @@ const StorePage = lazy(() => import("./pages/StorePage"));
 const ViewPage = lazy(() => import("./pages/ViewPage"));
 
 const Router = () => {
+  const autoLogin = useAuthStore((state) => state.autoLogin);
+  const hasStore = useStoreStore((state) => state.hasStore);
+
+  // Hides the General settings if there is nothing to show
+  const showGeneralSettings =
+    FeatureFlags.ENABLE_PROFILE_ICONS || hasStore || !autoLogin;
+
   return (
     <Suspense
       fallback={
@@ -77,10 +87,20 @@ const Router = () => {
             </ProtectedRoute>
           }
         >
-          <Route index element={<Navigate replace to={"general"} />} />
+          <Route
+            index
+            element={
+              <Navigate
+                replace
+                to={showGeneralSettings ? "general" : "global-variables"}
+              />
+            }
+          />
           <Route path="global-variables" element={<GlobalVariablesPage />} />
           <Route path="api-keys" element={<ApiKeysPage />} />
-          <Route path="general/:scrollId?" element={<GeneralPage />} />
+          {showGeneralSettings && (
+            <Route path="general/:scrollId?" element={<GeneralPage />} />
+          )}
           <Route path="shortcuts" element={<ShortcutsPage />} />
           <Route path="messages" element={<MessagesPage />} />
         </Route>

src/frontend/src/stores/storeStore.ts

@@ -1,3 +1,4 @@
+import FeatureFlags from "@/../feature-config.json";
 import { create } from "zustand";
 import { checkHasApiKey, checkHasStore } from "../controllers/API";
 import { StoreStoreType } from "../types/zustand/store";
@@ -9,7 +10,9 @@ export const useStoreStore = create<StoreStoreType>((set) => ({
   loadingApiKey: true,
   checkHasStore: () => {
     checkHasStore().then((res) => {
-      set({ hasStore: res?.enabled ?? false });
+      set({
+        hasStore: FeatureFlags.ENABLE_LANGFLOW_STORE && (res?.enabled ?? false),
+      });
     });
   },
   updateValidApiKey: (validApiKey) => set(() => ({ validApiKey: validApiKey })),