chore: migrate allextensionsstate to jotai (#4120)

Author: chriskari

src/components/Extensibility/tests/useGetCRDByPath.test.js

@@ -2,6 +2,8 @@ import { allExtensionsState } from 'state/navigation/extensionsAtom';
 import { render } from '@testing-library/react';
 import { useGetCRbyPath } from '../useGetCRbyPath.js';
 import { RecoilRoot } from 'recoil';
+import { Provider as JotaiProvider } from 'jotai';
+import { useHydrateAtoms } from 'jotai/utils';
 
 let mockNamespaceId = 'namespaceId';
 let mockCrds = [];
@@ -25,21 +27,33 @@ vi.mock('shared/components/Dropdown/Dropdown', () => {
   };
 });
 
+// Component to initialize Jotai atoms with test data
+const JotaiHydrator = ({ children, initialValues }) => {
+  useHydrateAtoms(initialValues);
+  return children;
+};
+
 const TestComponent = () => {
   const value = useGetCRbyPath();
 
   return <p data-testid="value">{JSON.stringify(value)}</p>;
 };
 
+const renderWithProviders = mockCrds => {
+  return render(
+    <RecoilRoot>
+      <JotaiProvider>
+        <JotaiHydrator initialValues={[[allExtensionsState, mockCrds]]}>
+          <TestComponent />
+        </JotaiHydrator>
+      </JotaiProvider>
+    </RecoilRoot>,
+  );
+};
+
 describe('useGetCRbyPath', () => {
   it('Returns nothing for an empty list', () => {
-    const { queryByTestId } = render(
-      <RecoilRoot
-        initializeState={snapshot => snapshot.set(allExtensionsState, mockCrds)}
-      >
-        <TestComponent />
-      </RecoilRoot>,
-    );
+    const { queryByTestId } = renderWithProviders(mockCrds);
 
     expect(queryByTestId('value')).toHaveTextContent('');
   });
@@ -65,13 +79,7 @@ describe('useGetCRbyPath', () => {
       },
     ];
 
-    const { queryByTestId } = render(
-      <RecoilRoot
-        initializeState={snapshot => snapshot.set(allExtensionsState, mockCrds)}
-      >
-        <TestComponent />
-      </RecoilRoot>,
-    );
+    const { queryByTestId } = renderWithProviders(mockCrds);
     expect(queryByTestId('value')).toHaveTextContent(
       JSON.stringify(mockCrds[1]),
     );
@@ -99,13 +107,7 @@ describe('useGetCRbyPath', () => {
       },
     ];
 
-    const { queryByTestId } = render(
-      <RecoilRoot
-        initializeState={snapshot => snapshot.set(allExtensionsState, mockCrds)}
-      >
-        <TestComponent />
-      </RecoilRoot>,
-    );
+    const { queryByTestId } = renderWithProviders(mockCrds);
 
     expect(queryByTestId('value')).toHaveTextContent(
       JSON.stringify(mockCrds[1]),
@@ -133,13 +135,7 @@ describe('useGetCRbyPath', () => {
       },
     ];
 
-    const { queryByTestId } = render(
-      <RecoilRoot
-        initializeState={snapshot => snapshot.set(allExtensionsState, mockCrds)}
-      >
-        <TestComponent />
-      </RecoilRoot>,
-    );
+    const { queryByTestId } = renderWithProviders(mockCrds);
     expect(queryByTestId('value')).toHaveTextContent(
       JSON.stringify(mockCrds[1]),
     );

src/components/Extensibility/useGetCRbyPath.js

@@ -10,7 +10,7 @@ import { columnLayoutState } from 'state/columnLayoutAtom';
 
 export const useGetCRbyPath = resourceType => {
   const { namespaceId } = useParams();
-  const extensions = useRecoilValue(allExtensionsState);
+  const extensions = useAtomValue(allExtensionsState);
   const { name: clusterName } = useRecoilValue(clusterState) || {};
   const layoutState = useAtomValue(columnLayoutState);
   const resource = useMemo(() => {

src/state/navigation/extensionsAtom.ts

@@ -3,7 +3,13 @@ import jsyaml from 'js-yaml';
 import { mapValues, partial } from 'lodash';
 import { useEffect } from 'react';
 import { ExtInjectionConfig, ExtResource } from '../types';
-import { atom, RecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import { atom, useSetAtom } from 'jotai';
+import {
+  atom as recoilAtom,
+  RecoilState,
+  useRecoilValue,
+  useSetRecoilState,
+} from 'recoil';
 import { clusterState } from '../clusterAtom';
 import { authDataState } from '../authDataAtom';
 import { getFetchFn } from '../utils/getFetchFn';
@@ -404,7 +410,7 @@ export const useGetExtensions = () => {
   const auth = useRecoilValue(authDataState);
   const setExtensions = useSetRecoilState(extensionsState);
   const setStatics = useSetRecoilState(staticsState);
-  const setAllExtensions = useSetRecoilState(allExtensionsState);
+  const setAllExtensions = useSetAtom(allExtensionsState);
   const setInjections = useSetRecoilState(injectionsState);
   const setWizard = useSetRecoilState(wizardState);
   const fetchFn = getFetchFn(useRecoilValue);
@@ -573,35 +579,31 @@ export const useGetExtensions = () => {
 // null for defaultValue,
 // empty array for value or error
 const defaultValue = null;
-export const extensionsState: RecoilState<ExtResource[] | null> = atom<
+export const extensionsState: RecoilState<ExtResource[] | null> = recoilAtom<
   ExtResource[] | null
 >({
   key: 'extensionsState',
   default: defaultValue,
 });
 
-export const staticsState: RecoilState<ExtResource[] | null> = atom<
+export const staticsState: RecoilState<ExtResource[] | null> = recoilAtom<
   ExtResource[] | null
 >({
   key: 'staticsState',
   default: defaultValue,
 });
 
-export const allExtensionsState: RecoilState<ExtResource[] | null> = atom<
-  ExtResource[] | null
->({
-  key: 'allExtensionsState',
-  default: defaultValue,
-});
+export const allExtensionsState = atom<ExtResource[] | null>(defaultValue);
+allExtensionsState.debugLabel = 'allExtensionsState';
 
-export const injectionsState: RecoilState<ExtInjectionConfig[] | null> = atom<
+export const injectionsState: RecoilState<
   ExtInjectionConfig[] | null
->({
+> = recoilAtom<ExtInjectionConfig[] | null>({
   key: 'injectionsState',
   default: defaultValue,
 });
 
-export const wizardState: RecoilState<ExtWizardConfig[] | null> = atom<
+export const wizardState: RecoilState<ExtWizardConfig[] | null> = recoilAtom<
   ExtWizardConfig[] | null
 >({
   key: 'wizardState',