chore: Migrate isSidebarCondensedState to Jotai (#4109)

* chore: replace state

* fix

* cleanup

* tests: wait to load

Author: OliwiaGowor

src/header/SidebarSwitcher/SidebarSwitcher.tsx

@@ -1,11 +1,11 @@
 import { Button } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
-import { useRecoilState } from 'recoil';
+import { useAtom } from 'jotai';
 import { isSidebarCondensedState } from 'state/preferences/isSidebarCondensedAtom';
 
 export function SidebarSwitcher(props: any) {
   const { t } = useTranslation();
-  const [isSidebarCondensed, setSidebarCondensed] = useRecoilState(
+  const [isSidebarCondensed, setSidebarCondensed] = useAtom(
     isSidebarCondensedState,
   );
 

src/sidebar/CategoryItem.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { SetterOrUpdater, useRecoilValue } from 'recoil';
+import { SetterOrUpdater } from 'recoil';
+import { useAtomValue } from 'jotai';
+
 import { Category } from 'state/navigation/categories';
 import {
   SideNavigationItem,
@@ -32,7 +34,7 @@ export function CategoryItem({
   const { t } = useTranslation();
   const categoryName = t(category.label, { defaultValue: category.label });
   const expanded = expandedCategories.includes(category.key);
-  const isSidebarCondensed = useRecoilValue(isSidebarCondensedState);
+  const isSidebarCondensed = useAtomValue(isSidebarCondensedState);
 
   const handleAddExpandedCategory = (
     e: Ui5CustomEvent<

src/sidebar/SidebarNavigation.tsx

@@ -1,5 +1,5 @@
+import { useAtomValue, useSetAtom } from 'jotai';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { useSetAtom } from 'jotai';
 import {
   SideNavigation,
   SideNavigationItem,
@@ -24,7 +24,7 @@ import { useFormNavigation } from 'shared/hooks/useFormNavigation';
 
 export function SidebarNavigation() {
   const navigationNodes = useRecoilValue(sidebarNavigationNodesSelector);
-  const isSidebarCondensed = useRecoilValue(isSidebarCondensedState);
+  const isSidebarCondensed = useAtomValue(isSidebarCondensedState);
   const namespace = useRecoilValue(activeNamespaceIdState);
   const { t } = useTranslation();
   const navigate = useNavigate();

src/sidebar/useSidebarCondensed.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useSetAtom } from 'jotai';
 import { isSidebarCondensedState } from 'state/preferences/isSidebarCondensedAtom';
 
 function getWindowDimensions() {
@@ -26,7 +26,7 @@ function useWindowDimensions() {
 
 export default function useSidebarCondensed() {
   const width = useWindowDimensions();
-  const setSidebarCondensed = useSetRecoilState(isSidebarCondensedState);
+  const setSidebarCondensed = useSetAtom(isSidebarCondensedState);
 
   useEffect(() => {
     if (width <= 900) setSidebarCondensed(true);

src/state/preferences/isSidebarCondensedAtom.ts

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

tests/integration/tests/kyma-namespace/z-run-after.spec.js

@@ -12,6 +12,8 @@ context('Clean up Namespace', () => {
       .contains('Namespaces')
       .click();
 
+    cy.wait(1000);
+
     cy.deleteFromGenericList('Namespace', Cypress.env('NAMESPACE_NAME'), {
       clearSearch: false,
       checkIfResourceIsRemoved: false,