feat: Experimental Feature Toggle (#525)

louis-jan · web-flow · commit 0d13756a866a · 2023-11-01T23:42:47.000+07:00
* feat: Experimental Feature Toggle

* chore: add open app directory action

* chore: disable experimental feature test case
diff --git a/electron/main.ts b/electron/main.ts
@@ -212,6 +212,15 @@ function handleIPCs() {
     return app.getVersion();
   });
 
+  /**
+   * Handles the "openAppDirectory" IPC message by opening the app's user data directory.
+   * The `shell.openPath` method is used to open the directory in the user's default file explorer.
+   * @param _event - The IPC event object.
+   */
+  ipcMain.handle("openAppDirectory", async (_event) => {
+    shell.openPath(app.getPath("userData"));
+  });
+
   /**
    * Opens a URL in the user's default browser.
    * @param _event - The IPC event object.
diff --git a/electron/preload.ts b/electron/preload.ts
@@ -28,6 +28,8 @@ contextBridge.exposeInMainWorld("electronAPI", {
 
   relaunch: () => ipcRenderer.invoke("relaunch"),
 
+  openAppDirectory: () => ipcRenderer.invoke("openAppDirectory"),
+
   deleteFile: (filePath: string) => ipcRenderer.invoke("deleteFile", filePath),
 
   installRemotePlugin: (pluginName: string) =>
diff --git a/electron/tests/navigation.e2e.spec.ts b/electron/tests/navigation.e2e.spec.ts
@@ -40,8 +40,12 @@ test("renders left navigation panel", async () => {
   expect(chatSection).toBe(false);
 
   // Home actions
-  const botBtn = await page.getByTestId("Bot").first().isEnabled();
+  /* Disable unstable feature tests
+   ** const botBtn = await page.getByTestId("Bot").first().isEnabled();
+   ** Enable back when it is whitelisted
+   */
+
   const myModelsBtn = await page.getByTestId("My Models").first().isEnabled();
   const settingsBtn = await page.getByTestId("Settings").first().isEnabled();
-  expect([botBtn, myModelsBtn, settingsBtn].filter((e) => !e).length).toBe(0);
+  expect([myModelsBtn, settingsBtn].filter((e) => !e).length).toBe(0);
 });
diff --git a/web/app/_components/LeftHeaderAction/index.tsx b/web/app/_components/LeftHeaderAction/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React from 'react'
+import React, { useContext } from 'react'
 import SecondaryButton from '../SecondaryButton'
 import { useSetAtom, useAtomValue } from 'jotai'
 import {
@@ -13,13 +13,17 @@ import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
 import { Button } from '@uikit'
 import { activeAssistantModelAtom } from '@helpers/atoms/Model.atom'
 import { showingModalNoActiveModel } from '@helpers/atoms/Modal.atom'
+import {
+  FeatureToggleContext,
+} from '@helpers/FeatureToggleWrapper'
 
 const LeftHeaderAction: React.FC = () => {
   const setMainView = useSetAtom(setMainViewStateAtom)
   const { downloadedModels } = useGetDownloadedModels()
   const activeModel = useAtomValue(activeAssistantModelAtom)
   const { requestCreateConvo } = useCreateConversation()
   const setShowModalNoActiveModel = useSetAtom(showingModalNoActiveModel)
+  const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
 
   const onExploreClick = () => {
     setMainView(MainViewState.ExploreModel)
@@ -50,12 +54,14 @@ const LeftHeaderAction: React.FC = () => {
           className="w-full flex-1"
           icon={<MagnifyingGlassIcon width={16} height={16} />}
         />
-        <SecondaryButton
-          title={'Create bot'}
-          onClick={onCreateBotClicked}
-          className="w-full flex-1"
-          icon={<PlusIcon width={16} height={16} />}
-        />
+        {experimentalFeatureEnabed && (
+          <SecondaryButton
+            title={'Create bot'}
+            onClick={onCreateBotClicked}
+            className="w-full flex-1"
+            icon={<PlusIcon width={16} height={16} />}
+          />
+        )}
       </div>
       <Button
         onClick={onNewConversationClick}
diff --git a/web/containers/Providers/index.tsx b/web/containers/Providers/index.tsx
@@ -15,6 +15,7 @@ import {
   isCorePluginInstalled,
   setupBasePlugins,
 } from '@services/pluginService'
+import { FeatureToggleWrapper } from '@helpers/FeatureToggleWrapper'
 
 const Providers = (props: PropsWithChildren) => {
   const [setupCore, setSetupCore] = useState(false)
@@ -70,9 +71,11 @@ const Providers = (props: PropsWithChildren) => {
       {setupCore && (
         <ThemeWrapper>
           {activated ? (
-            <EventListenerWrapper>
-              <ModalWrapper>{children}</ModalWrapper>
-            </EventListenerWrapper>
+            <FeatureToggleWrapper>
+              <EventListenerWrapper>
+                <ModalWrapper>{children}</ModalWrapper>
+              </EventListenerWrapper>
+            </FeatureToggleWrapper>
           ) : (
             <div className="flex h-screen w-screen items-center justify-center bg-background">
               <CompactLogo width={56} height={56} />
diff --git a/web/containers/Sidebar/Left.tsx b/web/containers/Sidebar/Left.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { useAtomValue, useSetAtom } from 'jotai'
 import {
   MainViewState,
@@ -20,6 +20,9 @@ import { twMerge } from 'tailwind-merge'
 import { showingBotListModalAtom } from '@helpers/atoms/Modal.atom'
 import useGetBots from '@hooks/useGetBots'
 import { useUserConfigs } from '@hooks/useUserConfigs'
+import {
+  FeatureToggleContext,
+} from '@helpers/FeatureToggleWrapper'
 
 export const SidebarLeft = () => {
   const [config] = useUserConfigs()
@@ -28,6 +31,7 @@ export const SidebarLeft = () => {
   const setBotListModal = useSetAtom(showingBotListModalAtom)
   const { downloadedModels } = useGetDownloadedModels()
   const { getAllBots } = useGetBots()
+  const { experimentalFeatureEnabed } = useContext(FeatureToggleContext)
 
   const onMenuClick = (mainViewState: MainViewState) => {
     if (currentState === mainViewState) return
@@ -88,18 +92,21 @@ export const SidebarLeft = () => {
       icon: <LayoutGrid size={20} className="flex-shrink-0" />,
       state: MainViewState.MyModel,
     },
-    {
-      name: 'Bot',
-      icon: <Bot size={20} className="flex-shrink-0" />,
-      state: MainViewState.CreateBot,
-    },
+    ...(experimentalFeatureEnabed
+      ? [
+          {
+            name: 'Bot',
+            icon: <Bot size={20} className="flex-shrink-0" />,
+            state: MainViewState.CreateBot,
+          },
+        ]
+      : []),
     {
       name: 'Settings',
       icon: <Settings size={20} className="flex-shrink-0" />,
       state: MainViewState.Setting,
     },
   ]
-
   return (
     <m.div
       initial={false}
@@ -124,42 +131,44 @@ export const SidebarLeft = () => {
             config.sidebarLeftExpand ? 'items-start' : 'items-center'
           )}
         >
-          {menus.map((menu, i) => {
-            const isActive = currentState === menu.state
-            const isBotMenu = menu.name === 'Bot'
-            return (
-              <div className="relative w-full px-4 py-2" key={i}>
-                <button
-                  data-testid={menu.name}
-                  className={twMerge(
-                    'flex w-full flex-shrink-0 items-center gap-x-2',
-                    config.sidebarLeftExpand
-                      ? 'justify-start'
-                      : 'justify-center'
-                  )}
-                  onClick={() =>
-                    isBotMenu ? onBotListClick() : onMenuClick(menu.state)
-                  }
-                >
-                  {menu.icon}
-                  <m.span
-                    initial={false}
-                    variants={variant}
-                    animate={config.sidebarLeftExpand ? 'show' : 'hide'}
-                    className="text-xs font-semibold text-muted-foreground"
+          {menus
+            .filter((menu) => !!menu)
+            .map((menu, i) => {
+              const isActive = currentState === menu.state
+              const isBotMenu = menu.name === 'Bot'
+              return (
+                <div className="relative w-full px-4 py-2" key={i}>
+                  <button
+                    data-testid={menu.name}
+                    className={twMerge(
+                      'flex w-full flex-shrink-0 items-center gap-x-2',
+                      config.sidebarLeftExpand
+                        ? 'justify-start'
+                        : 'justify-center'
+                    )}
+                    onClick={() =>
+                      isBotMenu ? onBotListClick() : onMenuClick(menu.state)
+                    }
                   >
-                    {menu.name}
-                  </m.span>
-                </button>
-                {isActive ? (
-                  <m.div
-                    className="absolute inset-0 left-2 -z-10 h-full w-[calc(100%-16px)] rounded-md bg-accent/20 p-2 backdrop-blur-lg"
-                    layoutId="active-state"
-                  />
-                ) : null}
-              </div>
-            )
-          })}
+                    {menu.icon}
+                    <m.span
+                      initial={false}
+                      variants={variant}
+                      animate={config.sidebarLeftExpand ? 'show' : 'hide'}
+                      className="text-xs font-semibold text-muted-foreground"
+                    >
+                      {menu.name}
+                    </m.span>
+                  </button>
+                  {isActive ? (
+                    <m.div
+                      className="absolute inset-0 left-2 -z-10 h-full w-[calc(100%-16px)] rounded-md bg-accent/20 p-2 backdrop-blur-lg"
+                      layoutId="active-state"
+                    />
+                  ) : null}
+                </div>
+              )
+            })}
         </div>
         <m.div
           initial={false}
@@ -170,19 +179,15 @@ export const SidebarLeft = () => {
           <div className="space-y-2 rounded-lg border border-border bg-background/50 p-3">
             <button
               onClick={() =>
-                window.coreAPI?.openExternalUrl(
-                  'https://discord.gg/AsJ8krTT3N'
-                )
+                window.coreAPI?.openExternalUrl('https://discord.gg/AsJ8krTT3N')
               }
               className="block text-xs font-semibold text-muted-foreground"
             >
               Discord
             </button>
             <button
               onClick={() =>
-                window.coreAPI?.openExternalUrl(
-                  'https://twitter.com/janhq_'
-                )
+                window.coreAPI?.openExternalUrl('https://twitter.com/janhq_')
               }
               className="block text-xs font-semibold text-muted-foreground"
             >
diff --git a/web/helpers/FeatureToggleWrapper.tsx b/web/helpers/FeatureToggleWrapper.tsx
@@ -0,0 +1,43 @@
+import React, { ReactNode, useEffect, useState } from 'react'
+
+interface FeatureToggleContextType {
+  experimentalFeatureEnabed: boolean
+  setExperimentalFeatureEnabled: (on: boolean) => void
+}
+
+const initialContext: FeatureToggleContextType = {
+  experimentalFeatureEnabed: false,
+  setExperimentalFeatureEnabled: (boolean) => {},
+}
+
+export const FeatureToggleContext =
+  React.createContext<FeatureToggleContextType>(initialContext)
+
+export function FeatureToggleWrapper({ children }: { children: ReactNode }) {
+  const EXPERIMENTAL_FEATURE_ENABLED = 'expermientalFeatureEnabled'
+  const [experimentalEnabed, setExperimentalEnabled] = useState<boolean>(false)
+
+  useEffect(() => {
+    // Global experimental feature is disabled
+    let globalFeatureEnabled = false
+    if (localStorage.getItem(EXPERIMENTAL_FEATURE_ENABLED) !== 'true') {
+      globalFeatureEnabled = true
+    }
+  }, [])
+
+  const setExperimentalFeature = (on: boolean) => {
+    localStorage.setItem(EXPERIMENTAL_FEATURE_ENABLED, on ? 'true' : 'false')
+    setExperimentalEnabled(on)
+  }
+
+  return (
+    <FeatureToggleContext.Provider
+      value={{
+        experimentalFeatureEnabed: experimentalEnabed,
+        setExperimentalFeatureEnabled: setExperimentalFeature,
+      }}
+    >
+      {children}
+    </FeatureToggleContext.Provider>
+  )
+}
diff --git a/web/screens/Settings/Advanced/index.tsx b/web/screens/Settings/Advanced/index.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import React, { useContext, useRef } from 'react'
+import { Button, Switch } from '@uikit'
+import { FeatureToggleContext } from '@helpers/FeatureToggleWrapper'
+
+const Advanced = () => {
+  const { experimentalFeatureEnabed, setExperimentalFeatureEnabled } =
+    useContext(FeatureToggleContext)
+  const fileInputRef = useRef<HTMLInputElement | null>(null)
+  return (
+    <div className="block w-full">
+      <div className="flex w-full items-start justify-between border-b border-gray-200 py-4 first:pt-0 last:border-none dark:border-gray-800">
+        <div className="w-4/5 flex-shrink-0 space-y-1.5">
+          <div className="flex gap-x-2">
+            <h6 className="text-sm font-semibold capitalize">
+              Experimental Mode
+            </h6>
+          </div>
+          <p className="whitespace-pre-wrap leading-relaxed text-gray-600 dark:text-gray-400">
+            Enable experimental features that may be unstable or not fully
+            tested.
+          </p>
+        </div>
+        <Switch
+          checked={experimentalFeatureEnabed}
+          onCheckedChange={(e) => {
+            if (e === true) {
+              setExperimentalFeatureEnabled(true)
+            } else {
+              setExperimentalFeatureEnabled(false)
+            }
+          }}
+        />
+      </div>
+      {window.electronAPI && (
+        <div className="flex w-full items-start justify-between border-b border-gray-200 py-4 first:pt-0 last:border-none dark:border-gray-800">
+          <div className="w-4/5 flex-shrink-0 space-y-1.5">
+            <div className="flex gap-x-2">
+              <h6 className="text-sm font-semibold capitalize">
+                Open App Directory
+              </h6>
+            </div>
+            <p className="whitespace-pre-wrap leading-relaxed text-gray-600 dark:text-gray-400">
+              Open the directory where the app data is located.
+            </p>
+          </div>
+          <div>
+            <Button
+              size="sm"
+              themes="outline"
+              onClick={() => window.electronAPI.openAppDirectory()}
+            >
+              Open
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Advanced
diff --git a/web/screens/Settings/CorePlugins/PluginsCatalog.tsx b/web/screens/Settings/CorePlugins/PluginsCatalog.tsx
diff --git a/web/screens/Settings/index.tsx b/web/screens/Settings/index.tsx
