Merge pull request #2912 from Hyperkid123/jotai-migration

Migrate rest of ChromeReducer state to Jotai

src/chrome/create-chrome.ts

@@ -5,7 +5,7 @@ import { AnalyticsBrowser } from '@segment/analytics-next';
 import get from 'lodash/get';
 import Cookies from 'js-cookie';
 
-import { appAction, appObjectId, globalFilterScope, removeGlobalFilter, toggleGlobalFilter } from '../redux/actions';
+import { globalFilterScope, removeGlobalFilter, toggleGlobalFilter } from '../redux/actions';
 import { ITLess, getEnv, getEnvDetails, isProd, updateDocumentTitle } from '../utils/common';
 import { createSupportCase } from '../utils/createCase';
 import debugFunctions from '../utils/debugFunctions';
@@ -15,7 +15,6 @@ import { middlewareListener } from '../redux/redux-config';
 import { clearAnsibleTrialFlag, isAnsibleTrialFlagActive, setAnsibleTrialFlag } from '../utils/isAnsibleTrialFlagActive';
 import chromeHistory from '../utils/chromeHistory';
 import { ReduxState } from '../redux/store';
-import { STORE_INITIAL_HASH } from '../redux/action-types';
 import { FlagTagsFilter } from '../@types/types';
 import useBundle, { bundleMapping, getUrl } from '../hooks/useBundle';
 import { warnDuplicatePkg } from './warnDuplicatePackages';
@@ -29,6 +28,7 @@ import { isFeedbackModalOpenAtom } from '../state/atoms/feedbackModalAtom';
 import { usePendoFeedback } from '../components/Feedback';
 import { NavListener, activeAppAtom } from '../state/atoms/activeAppAtom';
 import { isDebuggerEnabledAtom } from '../state/atoms/debuggerModalatom';
+import { appActionAtom, pageObjectIdAtom } from '../state/atoms/pageAtom';
 
 export type CreateChromeContextConfig = {
   useGlobalFilter: (callback: (selectedTags?: FlagTagsFilter) => any) => ReturnType<typeof callback>;
@@ -63,8 +63,8 @@ export const createChromeContext = ({
   const visibilityFunctions = getVisibilityFunctions();
   const dispatch = store.dispatch;
   const actions = {
-    appAction: (action: string) => dispatch(appAction(action)),
-    appObjectId: (objectId: string) => dispatch(appObjectId(objectId)),
+    appAction: (action: string) => chromeStore.set(appActionAtom, action),
+    appObjectId: (objectId: string) => chromeStore.set(pageObjectIdAtom, objectId),
     appNavClick: (item: string) => chromeStore.set(activeAppAtom, item),
     globalFilterScope: (scope: string) => dispatch(globalFilterScope(scope)),
     registerModule: (module: string, manifest?: string) => registerModule({ module, manifest }),
@@ -146,17 +146,6 @@ export const createChromeContext = ({
     },
     identifyApp,
     hideGlobalFilter: (isHidden: boolean) => {
-      const initialHash = store.getState()?.chrome?.initialHash;
-      /**
-       * Restore app URL hash fragment after the global filter is disabled
-       */
-      if (initialHash) {
-        chromeHistory.replace({
-          ...chromeHistory.location,
-          hash: initialHash,
-        });
-        dispatch({ type: STORE_INITIAL_HASH });
-      }
       dispatch(toggleGlobalFilter(isHidden));
     },
     isBeta: () => isPreview,

src/components/ErrorComponents/GatewayErrorComponent.tsx

@@ -1,16 +1,15 @@
 import React, { Fragment } from 'react';
 import NotAuthorized from '@redhat-cloud-services/frontend-components/NotAuthorized';
-import { useSelector } from 'react-redux';
 import sanitizeHtml from 'sanitize-html';
+import { useAtomValue } from 'jotai';
+import { Text, TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
 
-import type { ReduxState } from '../../redux/store';
 import ChromeLink from '../ChromeLink/ChromeLink';
-import { Text, TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
 import { useIntl } from 'react-intl';
 import Messages from '../../locales/Messages';
 import { ThreeScaleError } from '../../utils/responseInterceptors';
-import { useAtomValue } from 'jotai';
 import { activeModuleAtom } from '../../state/atoms/activeModuleAtom';
+import { activeProductAtom } from '../../state/atoms/activeProductAtom';
 
 export type GatewayErrorComponentProps = {
   error: ThreeScaleError;
@@ -51,7 +50,7 @@ const Description = ({ detail, complianceError }: DescriptionProps) => {
 
 const GatewayErrorComponent = ({ error }: GatewayErrorComponentProps) => {
   const activeModule = useAtomValue(activeModuleAtom);
-  const activeProduct = useSelector((state: ReduxState) => state.chrome.activeProduct);
+  const activeProduct = useAtomValue(activeProductAtom);
   // get active product, fallback to module name if product is not defined
   const serviceName = activeProduct || activeModule;
   return <NotAuthorized description={<Description complianceError={error.complianceError} detail={error.detail} />} serviceName={serviceName} />;

src/components/Navigation/ChromeNavItem.tsx

@@ -9,14 +9,14 @@ import StarIcon from '@patternfly/react-icons/dist/dynamic/icons/star-icon';
 import { titleCase } from 'title-case';
 import classNames from 'classnames';
 import get from 'lodash/get';
-import { useAtomValue } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 
 import ChromeLink, { LinkWrapperProps } from '../ChromeLink/ChromeLink';
-import { useDispatch, useSelector } from 'react-redux';
-import { markActiveProduct } from '../../redux/actions';
+import { useSelector } from 'react-redux';
 import { ChromeNavItemProps } from '../../@types/types';
 import useFavoritePagesWrapper from '../../hooks/useFavoritePagesWrapper';
 import { isPreviewAtom } from '../../state/atoms/releaseAtom';
+import { activeProductAtom } from '../../state/atoms/activeProductAtom';
 
 const ChromeNavItem = ({
   appId,
@@ -33,13 +33,13 @@ const ChromeNavItem = ({
 }: ChromeNavItemProps) => {
   const isPreview = useAtomValue(isPreviewAtom);
   const hasNotifier = useSelector((state) => get(state, notifier));
-  const dispatch = useDispatch();
+  const markActiveProduct = useSetAtom(activeProductAtom);
   const { favoritePages } = useFavoritePagesWrapper();
   const isFavorited = useMemo(() => favoritePages.find(({ favorite, pathname }) => favorite && pathname === href), [href, favoritePages]);
 
   useEffect(() => {
     if (active) {
-      dispatch(markActiveProduct(product));
+      markActiveProduct(product);
     }
   }, [active]);
 

src/components/Stratosphere/RedirectBanner.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { Alert, AlertActionCloseButton } from '@patternfly/react-core/dist/dynamic/components/Alert';
 import { Text, TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
-import { useSelector } from 'react-redux';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { ReduxState } from '../../redux/store';
+import { useAtomValue } from 'jotai';
 import useMarketplacePartner from '../../hooks/useMarketplacePartner';
+import { activeProductAtom } from '../../state/atoms/activeProductAtom';
 
 const RedirectBanner = () => {
   const { pathname, hash, state } = useLocation();
   const { partnerId, partner, removePartnerParam } = useMarketplacePartner();
   const navigate = useNavigate();
-  const product = useSelector<ReduxState, string | undefined>((state) => state.chrome.activeProduct);
+  const product = useAtomValue(activeProductAtom);
 
   const handleClose = () => {
     // remove only the flag search param