change up layout state

web/src/app/app/(settings_layout)/settings/(permissions)/dataset-groups/[datasetGroupId]/users/DatasetGroupUsersController.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useGetDatasetGroupUsers } from '@/api/buster_rest';
-import { useAppLayoutContextSelector } from '@/context/BusterAppLayout';
+import { useInviteModalStore } from '@/context/BusterAppLayout';
 import { useDebounceSearch } from '@/hooks/useDebounceSearch';
 import { PermissionSearchAndListWrapper } from '@/components/features/PermissionComponents';
 import { Button } from '@/components/ui/buttons';
@@ -13,7 +13,7 @@ export const DatasetGroupUsersController: React.FC<{
   datasetGroupId: string;
 }> = ({ datasetGroupId }) => {
   const { data } = useGetDatasetGroupUsers(datasetGroupId);
-  const onToggleInviteModal = useAppLayoutContextSelector((x) => x.onToggleInviteModal);
+  const onToggleInviteModal = useInviteModalStore((x) => x.onToggleInviteModal);
 
   const { filteredItems, handleSearchChange, searchText } = useDebounceSearch({
     items: data || [],

web/src/app/app/(settings_layout)/settings/(permissions)/permission-groups/[permissionGroupId]/users/_PermissionGroupUsersController/PermissionGroupUsersController.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { useGetPermissionGroupUsers } from '@/api/buster_rest';
-
-import { useAppLayoutContextSelector } from '@/context/BusterAppLayout';
+import { useInviteModalStore } from '@/context/BusterAppLayout';
 import { useDebounceSearch } from '@/hooks/useDebounceSearch';
 import { PermissionSearchAndListWrapper } from '@/components/features/PermissionComponents';
 import { Button } from '@/components/ui/buttons';
@@ -14,7 +13,7 @@ export const PermissionGroupUsersController: React.FC<{
   permissionGroupId: string;
 }> = ({ permissionGroupId }) => {
   const { data } = useGetPermissionGroupUsers(permissionGroupId);
-  const onToggleInviteModal = useAppLayoutContextSelector((x) => x.onToggleInviteModal);
+  const onToggleInviteModal = useInviteModalStore((x) => x.onToggleInviteModal);
 
   const { filteredItems, handleSearchChange, searchText } = useDebounceSearch({
     items: data || [],

web/src/components/features/sidebars/SidebarPrimary.tsx

@@ -24,6 +24,7 @@ import {
   useUpdateUserFavorites
 } from '@/api/buster_rest';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { useInviteModalStore } from '@/context/BusterAppLayout';
 
 const topItems: ISidebarList = {
   id: 'top-items',
@@ -121,7 +122,7 @@ export const SidebarPrimary = React.memo(() => {
   const isAdmin = useUserConfigContextSelector((x) => x.isAdmin);
   const { data: favorites } = useGetUserFavorites();
   const currentRoute = useAppLayoutContextSelector((x) => x.currentRoute);
-  const onToggleInviteModal = useAppLayoutContextSelector((s) => s.onToggleInviteModal);
+  const onToggleInviteModal = useInviteModalStore((s) => s.onToggleInviteModal);
   const [openSupportModal, setOpenSupportModal] = useState(false);
   const { mutateAsync: updateUserFavorites } = useUpdateUserFavorites();
   const { mutateAsync: deleteUserFavorite } = useDeleteUserFavorite();
@@ -209,8 +210,8 @@ const GlobalModals = ({
   openSupportModal: boolean;
   onCloseSupportModal: () => void;
 }) => {
-  const onToggleInviteModal = useAppLayoutContextSelector((s) => s.onToggleInviteModal);
-  const openInviteModal = useAppLayoutContextSelector((s) => s.openInviteModal);
+  const onToggleInviteModal = useInviteModalStore((s) => s.onToggleInviteModal);
+  const openInviteModal = useInviteModalStore((s) => s.openInviteModal);
   const onCloseInviteModal = useMemoizedFn(() => onToggleInviteModal(false));
   const isAnonymousUser = useUserConfigContextSelector((state) => state.isAnonymousUser);
 

web/src/context/BusterAppLayout/AppLayoutProvider.tsx

@@ -13,11 +13,6 @@ export const useAppLayout = () => {
   const params = useParams();
   const currentRoute = pathNameToRoute(pathname, params);
   const currentParentRoute = pathNameToParentRoute(pathname, params);
-  const [openInviteModal, setOpenInviteModal] = React.useState(false);
-
-  const onToggleInviteModal = useMemoizedFn((v?: boolean) => {
-    setOpenInviteModal(v ?? !openInviteModal);
-  });
 
   const onChangePage = useMemoizedFn(
     (params: BusterRoutesWithArgsRoute | string): Promise<void> => {
@@ -56,8 +51,6 @@ export const useAppLayout = () => {
 
   return {
     currentRoute,
-    onToggleInviteModal,
-    openInviteModal,
     onChangePage,
     currentParentRoute
   };

web/src/context/BusterAppLayout/index.ts

@@ -1 +1,2 @@
 export * from './AppLayoutProvider';
+export * from './useInviteModalStore';

web/src/context/BusterAppLayout/useInviteModalStore.ts

@@ -0,0 +1,9 @@
+import { create } from 'zustand';
+
+export const useInviteModalStore = create<{
+  openInviteModal: boolean;
+  onToggleInviteModal: (v?: boolean) => void;
+}>((set, get) => ({
+  openInviteModal: false,
+  onToggleInviteModal: (v?: boolean) => set({ openInviteModal: v ?? !get().openInviteModal })
+}));

web/src/controllers/DatasetPermissionUser/PermissionUsers.tsx

@@ -1,22 +1,19 @@
 'use client';
 
 import React from 'react';
-import {
-  PermissionSearchAndListWrapper,
-  HeaderExplanation
-} from '@/components/features/PermissionComponents';
+import { PermissionSearchAndListWrapper } from '@/components/features/PermissionComponents';
 import { useDatasetListPermissionUsers } from '@/api/buster_rest';
 import { useDebounceSearch } from '@/hooks';
 import { Button } from '@/components/ui/buttons';
 import { Plus } from '@/components/ui/icons';
 import { useMemoizedFn } from '@/hooks';
 import { PermissionListUsersContainer } from './PermissionListUsersContainer';
-import { useAppLayoutContextSelector } from '@/context/BusterAppLayout';
+import { useInviteModalStore } from '@/context/BusterAppLayout';
 
 export const PermissionUsers: React.FC<{
   datasetId: string;
 }> = React.memo(({ datasetId }) => {
-  const onToggleInviteModal = useAppLayoutContextSelector((x) => x.onToggleInviteModal);
+  const onToggleInviteModal = useInviteModalStore((x) => x.onToggleInviteModal);
   const { data: permissionUsers, isFetched: isPermissionUsersFetched } =
     useDatasetListPermissionUsers(datasetId);