-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
features enable/disable functionality added (#1275)
* general page added * features enable/disable functionality added * crown icon added * import path fixed * workspace route fix
- Loading branch information
1 parent
f404e29
commit 3c9cfb5
Showing
25 changed files
with
628 additions
and
4,096 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| "use client" | ||
|
|
||
| import * as React from "react" | ||
| import * as SwitchPrimitives from "@radix-ui/react-switch" | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
|
|
||
| const Switch = React.forwardRef< | ||
| React.ElementRef<typeof SwitchPrimitives.Root>, | ||
| React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SwitchPrimitives.Root | ||
| className={cn( | ||
| "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", | ||
| className | ||
| )} | ||
| {...props} | ||
| ref={ref} | ||
| > | ||
| <SwitchPrimitives.Thumb | ||
| className={cn( | ||
| "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0" | ||
| )} | ||
| /> | ||
| </SwitchPrimitives.Root> | ||
| )) | ||
| Switch.displayName = SwitchPrimitives.Root.displayName | ||
|
|
||
| export { Switch } |
Oops, something went wrong.