chore: migrate preferencesmodalopen state to jotai (#4115)

Author: chriskari

src/command-pallette/CommandPalletteUI/useSearchResults.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 import { useSetAtom } from 'jotai';
 import { isPreferencesOpenState } from 'state/preferences/isPreferencesModalOpenAtom';
 import { useFetch } from 'shared/hooks/BackendAPI/useFetch';
@@ -49,7 +49,7 @@ export function useSearchResults({
   const showHiddenNamespaces = useRecoilValue(showHiddenNamespacesState);
   const fetch = useFetch();
   const { t } = useTranslation();
-  const setOpenPreferencesModal = useSetRecoilState(isPreferencesOpenState);
+  const setOpenPreferencesModal = useSetAtom(isPreferencesOpenState);
   const setShowYamlUpload = useSetAtom(showYamlUploadDialogState);
   const clustersInfo = useClustersInfo();
   const navigate = useNavigate();

src/components/Preferences/Preferences.tsx

@@ -1,6 +1,6 @@
 import { Button, Icon, Dialog, Bar } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
-import { useRecoilState } from 'recoil';
+import { useAtom } from 'jotai';
 
 import { useEventListener } from 'hooks/useEventListener';
 import { TabContainer, Tab } from '@ui5/webcomponents-react';
@@ -21,7 +21,7 @@ import EditViewSettings from './EditViewSettings';
 
 export function Preferences() {
   const { t } = useTranslation();
-  const [isModalOpen, setModalOpen] = useRecoilState(isPreferencesOpenState);
+  const [isModalOpen, setModalOpen] = useAtom(isPreferencesOpenState);
 
   const tabs = [
     {

src/header/HeaderMenu.tsx

@@ -1,7 +1,7 @@
 import { Menu, MenuItem } from '@ui5/webcomponents-react';
 import { MenuDomRef, Ui5CustomEvent } from '@ui5/webcomponents-react';
 import { MenuItemClickEventDetail } from '@ui5/webcomponents/dist/Menu.js';
-import { useSetRecoilState } from 'recoil';
+import { useSetAtom } from 'jotai';
 import { isPreferencesOpenState } from 'state/preferences/isPreferencesModalOpenAtom';
 import { useGetBusolaVersionDetails } from './SidebarMenu/useGetBusolaVersion';
 import { useGetLegalLinks } from './SidebarMenu/useGetLegalLinks';
@@ -25,7 +25,7 @@ interface HeaderMenuProps {
 
 export function HeaderMenu({ isMenuOpen, setIsMenuOpen }: HeaderMenuProps) {
   const { t } = useTranslation();
-  const setPreferencesOpen = useSetRecoilState(isPreferencesOpenState);
+  const setPreferencesOpen = useSetAtom(isPreferencesOpenState);
   const { githubLink, busolaVersion } = useGetBusolaVersionDetails();
   const legalLinks = useGetLegalLinks();
   const getHelpLinks = useGetHelpLinks();

src/state/preferences/isPreferencesModalOpenAtom.ts

@@ -1,12 +1,8 @@
-import { atom, RecoilState } from 'recoil';
-
-type IsPreferencesOpen = boolean;
+import { atom } from 'jotai';
 
 const DEFAULT_IS_PREFERENCES_MODAL_OPEN = false;
 
-export const isPreferencesOpenState: RecoilState<IsPreferencesOpen> = atom<
-  IsPreferencesOpen
->({
-  key: 'isPreferencesModalOpenedState',
-  default: DEFAULT_IS_PREFERENCES_MODAL_OPEN,
-});
+export const isPreferencesOpenState = atom<boolean>(
+  DEFAULT_IS_PREFERENCES_MODAL_OPEN,
+);
+isPreferencesOpenState.debugLabel = 'isPreferencesModalOpenedState';