chore: Migrate showAddClusterWizard to Jotai (#4113)

* chore: migrate showAddClusterWizard

* fix: add missing replacement

Author: OliwiaGowor

src/components/Clusters/components/AddClusterDialog.js

@@ -3,12 +3,12 @@ import { Dialog } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
 import { ErrorBoundary } from 'shared/components/ErrorBoundary/ErrorBoundary';
 import { AddClusterWizard } from './AddClusterWizard';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useAtom, useAtomValue } from 'jotai';
 import { showAddClusterWizard } from 'state/showAddClusterWizard';
 
 function AddClusterDialogComponent({ dialogRef }) {
   const [kubeconfig, setKubeconfig] = useState(undefined);
-  const showWizard = useRecoilValue(showAddClusterWizard);
+  const showWizard = useAtomValue(showAddClusterWizard);
 
   useEffect(() => {
     if (!showWizard) {
@@ -26,7 +26,7 @@ function AddClusterDialogComponent({ dialogRef }) {
 }
 export function AddClusterDialog() {
   const { t } = useTranslation();
-  const [showWizard, setShowWizard] = useRecoilState(showAddClusterWizard);
+  const [showWizard, setShowWizard] = useAtom(showAddClusterWizard);
   const dialogRef = useRef(null);
 
   return (

src/components/Clusters/components/AddClusterWizard.js

@@ -10,6 +10,7 @@ import {
 } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useSetAtom } from 'jotai';
 
 import { ResourceForm } from 'shared/ResourceForm';
 import { useCustomFormValidator } from 'shared/hooks/useCustomFormValidator/useCustomFormValidator';
@@ -18,6 +19,8 @@ import { useClustersInfo } from 'state/utils/getClustersInfo';
 import { configurationAtom } from 'state/configuration/configurationAtom';
 import { authDataState } from 'state/authDataAtom';
 import { showAddClusterWizard } from 'state/showAddClusterWizard';
+import { isFormOpenState } from 'state/formOpenAtom';
+import { checkAuthRequiredInputs } from '../helper';
 
 import { addByContext, getUser, hasKubeconfigAuth } from '../shared';
 import { AuthForm } from './AuthForm';
@@ -28,8 +31,6 @@ import { WizardButtons } from 'shared/components/WizardButtons/WizardButtons';
 import { ClusterPreview } from './ClusterPreview';
 
 import './AddClusterWizard.scss';
-import { isFormOpenState } from 'state/formOpenAtom';
-import { checkAuthRequiredInputs } from '../helper';
 
 export function AddClusterWizard({
   kubeconfig,
@@ -49,7 +50,7 @@ export function AddClusterWizard({
     busolaClusterParams?.config?.storage || 'sessionStorage',
   );
   const [selected, setSelected] = useState(1);
-  const setShowWizard = useSetRecoilState(showAddClusterWizard);
+  const setShowWizard = useSetAtom(showAddClusterWizard);
   const [showTitleDescription, setShowTitleDescription] = useState(false);
   const setIsFormOpen = useSetRecoilState(isFormOpenState);
   const [chosenContext, setChosenContext] = useState(undefined);

src/components/Clusters/views/ClusterList.js

@@ -3,7 +3,6 @@ import jsyaml from 'js-yaml';
 import { saveAs } from 'file-saver';
 import { useTranslation } from 'react-i18next';
 import { useSetAtom } from 'jotai';
-import { useSetRecoilState } from 'recoil';
 
 import { useClustersInfo } from 'state/utils/getClustersInfo';
 import { showAddClusterWizard } from 'state/showAddClusterWizard';
@@ -49,7 +48,7 @@ function ClusterList() {
   });
 
   const [chosenCluster, setChosenCluster] = useState(null);
-  const setShowAdd = useSetRecoilState(showAddClusterWizard);
+  const setShowAdd = useSetAtom(showAddClusterWizard);
   const setLayoutColumn = useSetAtom(columnLayoutState);
   const setShowCompanion = useSetAtom(showKymaCompanionState);
 

src/shared/components/FileInput/FileInput.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useRecoilValue } from 'recoil';
+import { useAtomValue } from 'jotai';
 
 import PropTypes from 'prop-types';
 import { Icon } from '@ui5/webcomponents-react';
@@ -9,7 +9,6 @@ import { showYamlUploadDialogState } from 'state/showYamlUploadDialogAtom';
 import { showAddClusterWizard } from 'state/showAddClusterWizard';
 
 import './FileInput.scss';
-import { useAtomValue } from 'jotai';
 
 FileInput.propTypes = {
   fileInputChanged: PropTypes.func.isRequired,
@@ -28,8 +27,8 @@ export function FileInput({
   customMessage,
 }) {
   const [fileNames, setFileNames] = useState([]);
+  const openAddCluster = useAtomValue(showAddClusterWizard);
   const openAdd = useAtomValue(showYamlUploadDialogState);
-  const openAddCluster = useRecoilValue(showAddClusterWizard);
   const [draggingOverCounter, setDraggingCounter] = useState(0);
   const { t } = useTranslation();
   const fileNameRef = useRef(null);

src/state/showAddClusterWizard.ts

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