chore: Migrate interrelated jotai states (#4142)

* chore: migrate interrellated states

* chore: migrate interrellated states

* chore: further migration adjustments

* chore: remove recoil

* chore: adjust openapiPathIDSelector

* chore: fix tiny migration error

* chore: a couple more tiny adjustments

* chore: adjust recoil format to jotai

* merge main

* chore: adjust format in remaining places

Author: chriskari

cypress/cypress.d.ts

@@ -5,13 +5,13 @@ declare namespace Cypress {
     /**
      * Custom command to mount a React component with common providers
      * @param component - React component to mount
-     * @param options - Options for mount, may include initializeRecoil function
-     * @example cy.mount(<MyComponent />, { initializeRecoil: (snapshot) => {...} })
+     * @param options - Options for mount, may include initializeJotai function
+     * @example cy.mount(<MyComponent />, { initializeJotai: [[atom, value]] })
      */
     mount(
       component: React.ReactNode,
       options?: {
-        initializeRecoil?: (snapshot: any) => void;
+        initializeJotai?: Array<[any, any]>;
         [key: string]: any;
       },
     ): Chainable<any>;

cypress/support/component.jsx

@@ -2,7 +2,8 @@
 import { mount } from 'cypress/react18';
 import { ThemeProvider } from '@ui5/webcomponents-react';
 import { MemoryRouter } from 'react-router';
-import { RecoilRoot } from 'recoil';
+import { Provider } from 'jotai';
+import { useHydrateAtoms } from 'jotai/utils';
 
 import i18n from 'i18next';
 import { I18nextProvider, initReactI18next } from 'react-i18next';
@@ -18,17 +19,25 @@ i18n.use(initReactI18next).init({
   },
 });
 
+// Component to initialize Jotai atoms with test data
+function JotaiHydrator({ children, atomValues = [] }) {
+  useHydrateAtoms(atomValues);
+  return children;
+}
+
 Cypress.Commands.add(
   'mount',
-  (component, { initializeRecoil, ...options } = {}) => {
+  (component, { initializeJotai, ...options } = {}) => {
     return mount(
-      <RecoilRoot initializeState={initializeRecoil}>
-        <I18nextProvider i18n={i18n}>
-          <MemoryRouter>
-            <ThemeProvider>{component}</ThemeProvider>
-          </MemoryRouter>
-        </I18nextProvider>
-      </RecoilRoot>,
+      <Provider>
+        <JotaiHydrator atomValues={initializeJotai}>
+          <I18nextProvider i18n={i18n}>
+            <MemoryRouter>
+              <ThemeProvider>{component}</ThemeProvider>
+            </MemoryRouter>
+          </I18nextProvider>
+        </JotaiHydrator>
+      </Provider>,
       options,
     );
   },

package-lock.json

@@ -112,7 +112,6 @@
     "react-router": "^7.5.2",
     "react-syntax-highlighter": "^15.6.1",
     "react-tippy": "^1.4.0",
-    "recoil": "^0.7.7",
     "resize-observer-polyfill": "^1.5.1",
     "rfc6902": "^5.1.2",
     "url": "^0.11.4"

package.json

@@ -1,15 +1,13 @@
 import { useEffect, RefObject, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createPortal } from 'react-dom';
-import { useRecoilValue } from 'recoil';
 import { useAtomValue } from 'jotai';
 import { Icon, Input } from '@ui5/webcomponents-react';
 import { K8sResource } from 'types';
 import { useEventListener } from 'hooks/useEventListener';
 import { useObjectState } from 'shared/useObjectState';
 import { CommandPaletteUI } from './CommandPaletteUI';
-import { availableNodesSelector } from 'state/navigation/availableNodesSelector';
-import { showKymaCompanionState } from 'state/companion/showKymaCompanionAtom';
+import { showKymaCompanionAtom } from 'state/companion/showKymaCompanionAtom';
 import { SCREEN_SIZE_BREAKPOINT_M } from './types';
 import './CommandPaletteSearchBar.scss';
 
@@ -26,14 +24,13 @@ export function CommandPaletteSearchBar({
   setShouldFocus,
   shellbarRef,
 }: CommandPaletteSearchBarProps) {
-  useRecoilValue(availableNodesSelector); // preload the values to prevent page rerenders
   const { t } = useTranslation();
   const [open, setOpen] = useState(shouldFocus || false);
   const [shellbarWidth, setShellbarWidth] = useState(window.innerWidth);
   const [resourceCache, updateResourceCache] = useObjectState<
     Record<string, K8sResource[]>
   >();
-  const showCompanion = useAtomValue(showKymaCompanionState);
+  const showCompanion = useAtomValue(showKymaCompanionAtom);
   const shouldShowDialog = shouldFocus ? shouldFocus : open;
 
   const htmlWrapEl = document.getElementById('html-wrap');

src/command-pallette/CommandPalletteUI/CommandPaletteSearchBar.tsx

@@ -1,9 +1,8 @@
 import { ReactNode, useEffect, useRef, useState } from 'react';
-import { useRecoilValue } from 'recoil';
 import { useAtomValue } from 'jotai';
 import { useEventListener } from 'hooks/useEventListener';
 import { getHistoryEntries } from './search-history';
-import { activeNamespaceIdState } from 'state/activeNamespaceIdAtom';
+import { activeNamespaceIdAtom } from 'state/activeNamespaceIdAtom';
 import {
   CommandPalletteHelp,
   NamespaceContextDisplay,
@@ -14,12 +13,11 @@ import { ResultsList } from './ResultsList/ResultsList';
 import { useSearchResults } from './useSearchResults';
 import { K8sResource } from 'types';
 import { Button, Icon, Input } from '@ui5/webcomponents-react';
-import { showKymaCompanionState } from 'state/companion/showKymaCompanionAtom';
+import { showKymaCompanionAtom } from 'state/companion/showKymaCompanionAtom';
 import { SCREEN_SIZE_BREAKPOINT_M } from './types';
 import { useFormNavigation } from 'shared/hooks/useFormNavigation';
-
-import './CommandPaletteUI.scss';
 import { activateResult, isResultGoingToRedirect } from './helpers';
+import './CommandPaletteUI.scss';
 
 function Background({
   hide,
@@ -58,7 +56,7 @@ export function CommandPaletteUI({
   updateResourceCache,
   shellbarWidth,
 }: CommandPaletteProps) {
-  const namespace = useRecoilValue(activeNamespaceIdState);
+  const namespace = useAtomValue(activeNamespaceIdAtom);
   const { navigateSafely } = useFormNavigation();
 
   const [query, setQuery] = useState('');
@@ -70,7 +68,7 @@ export function CommandPaletteUI({
   const [activeResultIndex, setActiveResultIndex] = useState(0);
   const [isHistoryMode, setHistoryMode] = useState(false);
   const [historyIndex, setHistoryIndex] = useState(0);
-  const showCompanion = useAtomValue(showKymaCompanionState);
+  const showCompanion = useAtomValue(showKymaCompanionAtom);
 
   const commandPaletteRef = useRef<HTMLDivElement | null>(null);
 

src/command-pallette/CommandPalletteUI/CommandPaletteUI.tsx

@@ -1,22 +1,21 @@
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useRecoilValue } from 'recoil';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { isPreferencesOpenState } from 'state/preferences/isPreferencesModalOpenAtom';
+import { isPreferencesOpenAtom } from 'state/preferences/isPreferencesModalOpenAtom';
 import { useFetch } from 'shared/hooks/BackendAPI/useFetch';
-import { showHiddenNamespacesState } from 'state/preferences/showHiddenNamespacesAtom';
-import { columnLayoutState } from 'state/columnLayoutAtom';
+import { showHiddenNamespacesAtom } from 'state/preferences/showHiddenNamespacesAtom';
+import { columnLayoutAtom } from 'state/columnLayoutAtom';
 
 import * as handlers from './handlers';
 import { useGetHiddenNamespaces } from 'shared/hooks/useGetHiddenNamespaces';
 import { K8sResource } from 'types';
-import { clustersState } from 'state/clustersAtom';
-import { clusterState } from 'state/clusterAtom';
-import { availableNodesSelector } from 'state/navigation/availableNodesSelector';
+import { clustersAtom } from 'state/clustersAtom';
+import { clusterAtom } from 'state/clusterAtom';
+import { availableNodesAtom } from 'state/navigation/availableNodesAtom';
 import { CommandPaletteContext, HelpEntries, Result } from './types';
 import { useClustersInfo } from 'state/utils/getClustersInfo';
 import { useNavigate, To } from 'react-router';
-import { showYamlUploadDialogState } from 'state/showYamlUploadDialogAtom';
+import { showYamlUploadDialogAtom } from 'state/showYamlUploadDialogAtom';
 
 type useSearchResultsProps = {
   query: string;
@@ -40,18 +39,17 @@ export function useSearchResults({
   resourceCache,
   updateResourceCache,
 }: useSearchResultsProps): SearchResults {
-  const clusters = useAtomValue(clustersState);
-
-  const cluster = useRecoilValue(clusterState);
-  const availableNodes = useRecoilValue(availableNodesSelector);
-  const setLayoutColumn = useSetAtom(columnLayoutState);
+  const clusters = useAtomValue(clustersAtom);
+  const cluster = useAtomValue(clusterAtom);
+  const availableNodes = useAtomValue(availableNodesAtom);
+  const setLayoutColumn = useSetAtom(columnLayoutAtom);
 
   const hiddenNamespaces = useGetHiddenNamespaces();
-  const showHiddenNamespaces = useRecoilValue(showHiddenNamespacesState);
+  const showHiddenNamespaces = useAtomValue(showHiddenNamespacesAtom);
   const fetch = useFetch();
   const { t } = useTranslation();
-  const setOpenPreferencesModal = useSetAtom(isPreferencesOpenState);
-  const setShowYamlUpload = useSetAtom(showYamlUploadDialogState);
+  const setOpenPreferencesModal = useSetAtom(isPreferencesOpenAtom);
+  const setShowYamlUpload = useSetAtom(showYamlUploadDialogAtom);
   const clustersInfo = useClustersInfo();
   const navigate = useNavigate();
 

src/command-pallette/CommandPalletteUI/useSearchResults.tsx

@@ -8,16 +8,15 @@ import {
   useSearchParams,
 } from 'react-router';
 import { useTranslation } from 'react-i18next';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 
 import { useUrl } from 'hooks/useUrl';
 import { useSentry } from 'hooks/useSentry';
 import { useAppTracking } from 'hooks/tracking';
 
-import { clusterState } from 'state/clusterAtom';
+import { clusterAtom } from 'state/clusterAtom';
 import { languageAtom } from 'state/preferences/languageAtom';
-import { activeNamespaceIdState } from 'state/activeNamespaceIdAtom';
+import { activeNamespaceIdAtom } from 'state/activeNamespaceIdAtom';
 import { useAuthHandler } from 'state/authDataAtom';
 import { useGetConfiguration } from 'state/configuration/configurationAtom';
 import { useGetExtensions } from 'state/navigation/extensionsAtom';
@@ -30,15 +29,15 @@ import { useResourceSchemas } from './resourceSchemas/useResourceSchemas';
 import { removePreviousPath, useAfterInitHook } from 'state/useAfterInitHook';
 import useSidebarCondensed from 'sidebar/useSidebarCondensed';
 import { useGetValidationEnabledSchemas } from 'state/validationEnabledSchemasAtom';
-import { multipleContexts } from 'state/multipleContextsAtom';
+import { multipleContextsAtom } from 'state/multipleContextsAtom';
 
 import {
   Button,
   Dialog,
   SplitterElement,
   SplitterLayout,
 } from '@ui5/webcomponents-react';
-import { showKymaCompanionState } from 'state/companion/showKymaCompanionAtom';
+import { showKymaCompanionAtom } from 'state/companion/showKymaCompanionAtom';
 import KymaCompanion from 'components/KymaCompanion/components/KymaCompanion';
 import { Preferences } from 'components/Preferences/Preferences';
 import { Header } from 'header/Header';
@@ -50,30 +49,30 @@ import { IncorrectPath } from './IncorrectPath';
 import { Spinner } from 'shared/components/Spinner/Spinner';
 import { ContextChooserMessage } from 'components/Clusters/components/ContextChooser/ContextChooser';
 
-import { themeState } from 'state/preferences/themeAtom';
+import { themeAtom } from 'state/preferences/themeAtom';
 import { initTheme } from './initTheme';
 
 import './App.scss';
 import '../../web-components/index'; //Import for custom Web Components
-import { manualKubeConfigIdState } from 'state/manualKubeConfigIdAtom';
+import { manualKubeConfigIdAtom } from 'state/manualKubeConfigIdAtom';
 import { AuthForm } from 'components/Clusters/components/AuthForm';
 import { ResourceForm } from 'shared/ResourceForm';
 import { checkAuthRequiredInputs } from 'components/Clusters/helper';
 
 export default function App() {
-  const theme = useRecoilValue(themeState);
-  const language = useRecoilValue(languageAtom);
-  const cluster = useRecoilValue(clusterState);
-  const setNamespace = useSetRecoilState(activeNamespaceIdState);
+  const theme = useAtomValue(themeAtom);
+  const language = useAtomValue(languageAtom);
+  const cluster = useAtomValue(clusterAtom);
+  const setNamespace = useSetAtom(activeNamespaceIdAtom);
   const { namespace } = useUrl();
   const makeGardenerLoginRoute = useMakeGardenerLoginRoute();
   const { t, i18n } = useTranslation();
   const navigate = useNavigate();
   const authFormRef = useRef<HTMLFormElement>(null);
   const [search] = useSearchParams();
-  const [contextsState, setContextsState] = useAtom(multipleContexts);
+  const [contextsState, setContextsState] = useAtom(multipleContextsAtom);
   const [manualKubeConfigId, setManualKubeConfigId] = useAtom(
-    manualKubeConfigIdState,
+    manualKubeConfigIdAtom,
   );
   const [authFormState, setAuthFormState] = useState<{
     users?: Users;
@@ -104,7 +103,7 @@ export default function App() {
   useAppTracking();
   useAfterInitHook(kubeconfigIdState);
 
-  const showCompanion = useAtomValue(showKymaCompanionState);
+  const showCompanion = useAtomValue(showKymaCompanionAtom);
 
   const updateManualKubeConfigIdState = (e: any) => {
     e.preventDefault();