[Pan-867]: features enable/disable functionality added

client/Providers/AppProvider.tsx

@@ -13,11 +13,17 @@ import { Provider as RollbarProvider, ErrorBoundary } from "@rollbar/react";
 import QueryProvider from "./QueryProvider";
 import Intercom from "@/components/Intercom/Intercom";
 import { ToastContainer } from "react-toastify";
+import dynamic from "next/dynamic";
 import "styles/globals.css";
 import "styles/App.css";
 import "styles/multi-range-slider.css";
 import "react-toastify/dist/ReactToastify.css";
 
+const _NoSSR = ({ children }) => <React.Fragment>{children}</React.Fragment>;
+const NoSSR = dynamic(() => Promise.resolve(_NoSSR), {
+  ssr: false,
+});
+
 export default function AppProvider({ children }: { children: ReactNode }) {
   const pathname = usePathname();
   const defaultTitle = getTitleFromPath(pathname);
@@ -41,10 +47,12 @@ export default function AppProvider({ children }: { children: ReactNode }) {
     <>
       <RollbarProvider config={rollbarConfig}>
         <ErrorBoundary>
-          <ContextProvider>
-            <ToastContainer autoClose={3000} className="w-64 text-white" />
-            <QueryProvider>{children}</QueryProvider>
-          </ContextProvider>
+          <NoSSR>
+            <ContextProvider>
+              <ToastContainer autoClose={3000} className="w-64 text-white" />
+              <QueryProvider>{children}</QueryProvider>
+            </ContextProvider>
+          </NoSSR>
         </ErrorBoundary>
       </RollbarProvider>
       <Intercom appID={NEXT_PUBLIC_INTERCOM_APP_ID} />

client/app/(ee)/settings/logs/logs-card.tsx

@@ -4,6 +4,7 @@ import Card from "@/components/card";
 import LogsTable from "components/LogsTable/index";
 import { LogData } from "./logs-interface";
 import Pagination from "@/components/pagination";
+import usePermissionCheck from "@/hooks/useCheckFeature";
 
 interface IProps {
   logs: LogData[];
@@ -14,7 +15,10 @@ const LogsCard = ({ logs, logs_count }: IProps) => {
   const [page, setPage] = useState(1);
   const itemsPerPage = 15;
 
+  usePermissionCheck();
+
   const totalPages = Math.ceil(logs_count / itemsPerPage);
+
   return (
     <Card extra="w-full py-2 px-5">
       <LogsTable data={logs} />

client/app/(ee)/settings/logs/page.tsx

@@ -8,7 +8,7 @@ export default async function Logs() {
   return (
     <div className="w-full h-full overflow-y-auto custom-scroll mt-5 px-2 md:px-4">
       <h1 className="text-2xl font-bold dark:text-white mb-10">Logs</h1>
-      <LogsCard logs={data?.logs} logs_count={data?.logs_count} />
+      <LogsCard logs={data?.logs || []} logs_count={data?.logs_count} />
     </div>
   );
 }

client/app/loading.tsx

@@ -0,0 +1,12 @@
+import { Loader } from "@/components/loader/Loader";
+import React from "react";
+
+const Loading = () => {
+  return (
+    <div className="flex items-center justify-center w-full h-full mx-auto">
+      <Loader />
+    </div>
+  );
+};
+
+export default Loading;

client/app/settings/general/page.tsx

@@ -0,0 +1,158 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { Switch } from "@/components/ui/switch";
+import { Loader } from "@/components/loader/Loader";
+import { useGetMe, useUpdateUserRoutes } from "@/hooks/useUsers";
+import { toast } from "react-toastify";
+import ConfirmationDialog from "@/components/ConfirmationDialog";
+import AppTooltip from "@/components/AppTooltip";
+import { revalidateLogs } from "@/lib/actions";
+import { useQueryClient } from "@tanstack/react-query";
+import { FaCrown } from "react-icons/fa";
+
+const GeneralPage = () => {
+  const [routes, setRoutes] = useState([]);
+  const { data: userResponse, isLoading } = useGetMe();
+  const { mutateAsync: updateUserRoutes, isPending } = useUpdateUserRoutes();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [feature, setFeature] = useState({
+    routeName: "",
+    featureName: null,
+  });
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    if (userResponse) {
+      setRoutes(userResponse?.data?.features?.routes || []);
+    }
+  }, [userResponse]);
+
+  const handleToggle = (routeName, featureName) => {
+    let rName: string, fName: string;
+    if (!routeName && !featureName) {
+      rName = feature.routeName;
+      fName = feature.featureName;
+    } else {
+      rName = routeName;
+      fName = featureName;
+    }
+    const updatedRoutes = routes.map((route) => {
+      if (route.name === rName) {
+        if (fName) {
+          route.features = route.features.map((feature) =>
+            feature.name === fName
+              ? { ...feature, enabled: !feature.enabled }
+              : feature
+          );
+        } else {
+          route.enabled = !route.enabled;
+        }
+      }
+      return route;
+    });
+
+    const body = {
+      routes: updatedRoutes,
+    };
+    setRoutes(updatedRoutes);
+    updateUserRoutes(body, {
+      onSuccess() {
+        queryClient.invalidateQueries({ queryKey: ["useGetMe"] });
+        revalidateLogs();
+        setIsModalOpen(false);
+      },
+      onError(error: any) {
+        toast.error(
+          error?.response?.data?.message
+            ? error?.response?.data?.message
+            : error.message
+        );
+      },
+    });
+  };
+
+  return (
+    <>
+      <div className="w-full h-full overflow-y-auto custom-scroll mt-5 px-2 md:px-4">
+        <h1 className="text-2xl font-bold dark:text-white mb-10">General</h1>
+        {isLoading ? (
+          <Loader />
+        ) : (
+          <div className="px-2 md:px-10">
+            {routes?.map((route) => (
+              <>
+                {route?.isEnterprise && (
+                  <div className="mt-5" key={route.name}>
+                    <div className="flex gap-5 mb-5">
+                      <h2 className="text-xl font-semibold dark:text-white">
+                        {route.name}
+                      </h2>
+                    </div>
+                    <div className="flex items-center gap-5">
+                      <div className="flex items-center gap-2">
+                        <p className="dark:text-white">
+                          {route.enabled ? "Disable" : "Enable"}{" "}
+                          {route.name.toLowerCase()}
+                        </p>
+                        {route.isEnterprise && (
+                          <AppTooltip text="Enterprise Feature">
+                            <FaCrown />
+                          </AppTooltip>
+                        )}
+                      </div>
+                      <Switch
+                        name={route.name}
+                        checked={route.enabled}
+                        onCheckedChange={() => {
+                          if (!route.enabled) {
+                            setIsModalOpen(true);
+                            setFeature({
+                              routeName: route.name,
+                              featureName: null,
+                            });
+                          } else {
+                            handleToggle(route.name, null);
+                          }
+                        }}
+                      />
+                    </div>
+                    {/* Will add features in the future */}
+                    {/* {route.features.map((feature) => (
+                      <div
+                        className="flex items-center gap-5"
+                        key={feature.name}
+                      >
+                        <p className="dark:text-white">
+                          Toggle {feature.name.toLowerCase()}
+                        </p>
+                        <Switch
+                          name={`${route.name}-${feature.name}`}
+                          checked={feature.enabled}
+                          onCheckedChange={() =>
+                            handleToggle(route.name, feature.name)
+                          }
+                        />
+                      </div>
+                    ))} */}
+                  </div>
+                )}
+              </>
+            ))}
+          </div>
+        )}
+      </div>
+      {isModalOpen && (
+        <ConfirmationDialog
+          text={`Are you sure you want to enable enterprise feature?`}
+          onCancel={() => {
+            setIsModalOpen(false);
+          }}
+          onSubmit={() => handleToggle(null, null)}
+          isLoading={isPending}
+        />
+      )}
+    </>
+  );
+};
+
+export default GeneralPage;

client/app/settings/layout.tsx

@@ -1,20 +1,14 @@
-"use client";
 import React from "react";
 import VerticalLineSeperator from "components/VerticalLineSeperator";
-import Drawer from "react-modern-drawer";
-import "react-modern-drawer/dist/index.css";
-import { useAppStore } from "store";
 import Navbar from "@/components/Navbar";
 import SettingsLeftBar from "@/components/SettingsLayout/LeftBar";
+import LeftBarDrawer from "@/components/SettingsLayout/LeftBarDrawer";
 
-export default function SettingsLayout({
+export default async function SettingsLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const isSideBarOpen = useAppStore((state) => state.isSideBarOpen);
-  const setIsSidebarOpen = useAppStore((state) => state.setIsSidebarOpen);
-
   return (
     <>
       <div className="flex flex-col h-screen">
@@ -30,15 +24,7 @@ export default function SettingsLayout({
           <div className="flex-1 w-full">{children}</div>
         </div>
       </div>
-      <Drawer
-        open={isSideBarOpen}
-        onClose={() => setIsSidebarOpen(false)}
-        direction="left"
-        className=""
-        zIndex={1000}
-      >
-        <SettingsLeftBar isMobileView={true} />
-      </Drawer>
+      <LeftBarDrawer />
     </>
   );
 }

client/app/settings/loading.tsx

@@ -0,0 +1,12 @@
+import { Loader } from "@/components/loader/Loader";
+import React from "react";
+
+const Loading = () => {
+  return (
+    <div className="flex items-center justify-center w-full h-full mx-auto">
+      <Loader />
+    </div>
+  );
+};
+
+export default Loading;

client/components/LogsTable/index.tsx

@@ -13,7 +13,7 @@ import {
   HeaderCell,
   Cell,
 } from "@table-library/react-table-library/table";
-import { LogData } from "app/settings/logs/logs-interface";
+import { LogData } from "@/app/(ee)/settings/logs/logs-interface";
 
 const LogList: React.FC<{ data: LogData[] }> = ({
   data,

client/components/SettingsLayout/LeftBar.tsx

@@ -3,31 +3,16 @@ import React from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import { useAppStore } from "store";
+import { useGetMe } from "@/hooks/useUsers";
 
 interface IProps {
   isMobileView?: boolean;
 }
 
-const routes = [
-  {
-    name: "Datasets",
-    url: "/settings/datasets",
-    isAdmin: true,
-  },
-  {
-    name: "Logs",
-    url: "/settings/logs",
-    isAdmin: true,
-  },
-  {
-    name: "Workspaces",
-    url: "/settings/workspaces",
-    isAdmin: true,
-  },
-];
-
 const SettingsLeftBar = ({ isMobileView = false }: IProps) => {
   const setIsSidebarOpen = useAppStore((state) => state.setIsSidebarOpen);
+  const { data: userResponse } = useGetMe();
+
   const pathname = usePathname();
   const closeSidebar = () => {
     setIsSidebarOpen(false);
@@ -52,17 +37,19 @@ const SettingsLeftBar = ({ isMobileView = false }: IProps) => {
             Settings
           </h2>
         </div>
-        {routes?.map((route, index) => (
-          <Link href={route.url} key={index}>
-            <div
-              onClick={() => closeSidebar()}
-              key={index}
-              className={`px-4 py-1 dark:text-white text-base truncate cursor-pointer hover:underline ${
-                route.url === pathname ? "font-bold" : "font-light"
-              }`}
-            >
-              {route.name}
-            </div>
+        {userResponse?.data?.features?.routes?.map((route, index) => (
+          <Link href={route.path} key={index}>
+            {route.enabled && (
+              <div
+                onClick={() => closeSidebar()}
+                key={index}
+                className={`px-4 py-1 dark:text-white text-base truncate cursor-pointer hover:underline ${
+                  route.path === pathname ? "font-bold" : "font-light"
+                }`}
+              >
+                {route.name}
+              </div>
+            )}
           </Link>
         ))}
       </div>

client/components/SettingsLayout/LeftBarDrawer.tsx

@@ -0,0 +1,26 @@
+"use client";
+import { useAppStore } from "@/store";
+import React from "react";
+import Drawer from "react-modern-drawer";
+import SettingsLeftBar from "./LeftBar";
+import "react-modern-drawer/dist/index.css";
+
+const LeftBarDrawer = () => {
+  const isSideBarOpen = useAppStore((state) => state.isSideBarOpen);
+  const setIsSidebarOpen = useAppStore((state) => state.setIsSidebarOpen);
+  return (
+    <>
+      <Drawer
+        open={isSideBarOpen}
+        onClose={() => setIsSidebarOpen(false)}
+        direction="left"
+        className=""
+        zIndex={1000}
+      >
+        <SettingsLeftBar isMobileView={true} />
+      </Drawer>
+    </>
+  );
+};
+
+export default LeftBarDrawer;