convert last used namespace local storage to userSettings

frontend/packages/console-app/src/components/detect-namespace/DetectNamespace.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { NamespaceContext, useValuesForNamespaceContext } from './namespace';
+
+type DetectNamespaceProps = {
+ children: React.ReactNode;
+};
+
+const DetectNamespace: React.FC<DetectNamespaceProps> = ({ children }) => {
+ const { namespace, setNamespace, loaded } = useValuesForNamespaceContext();
+ return loaded ? (
+ <NamespaceContext.Provider value={{ namespace, setNamespace }}>
+ {children}
+ </NamespaceContext.Provider>
+ ) : null;
+};
+
+export default DetectNamespace;

frontend/packages/console-app/src/components/detect-namespace/namespace.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore: FIXME missing exports due to out-of-sync @types/react-redux version
+import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { getNamespace } from '@console/internal/components/utils/link';
+import { useUserSettingsCompatibility } from '@console/shared/src/hooks/useUserSettingsCompatibility';
+import { setActiveNamespace } from '@console/internal/actions/ui';
+import { ALL_NAMESPACES_KEY } from '@console/shared/src/constants';
+
+type NamespaceContextType = {
+ namespace?: string;
+ setNamespace?: (ns: string) => void;
+};
+
+const LAST_NAMESPACE_NAME_LOCAL_STORAGE_KEY = `bridge/last-namespace-name`;
+const LAST_NAMESPACE_NAME_USER_SETTINGS_KEY = 'console.lastNamespace';
+
+export const NamespaceContext = React.createContext<NamespaceContextType>({});
+
+export const useValuesForNamespaceContext = () => {
+ const { pathname } = useLocation();
+ const urlNamespace = getNamespace(pathname);
+ /**
+ * [TODO]: use favorite namespace here if there is any
+ * const [favorite] = useUserSettings()
+ */
+ const [namespace, setNs, loaded] = useUserSettingsCompatibility(
+ LAST_NAMESPACE_NAME_USER_SETTINGS_KEY,
+ LAST_NAMESPACE_NAME_LOCAL_STORAGE_KEY,
+ urlNamespace || ALL_NAMESPACES_KEY,
+ );
+ const dispatchreduxAction = useDispatch();
+ const setNamespace = React.useCallback(
+ (ns: string) => {
+ dispatchreduxAction(setActiveNamespace(ns));
+ setNs(ns);
+ },
+ [dispatchreduxAction, setNs],
+ );
+
+ React.useEffect(() => {
+ if (loaded) {
+ dispatchreduxAction(setActiveNamespace(urlNamespace || namespace || ALL_NAMESPACES_KEY));
+ }
+ // only run this hook when namespace is loaded from user settings
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [loaded]);
+
+ return { namespace: urlNamespace || namespace || ALL_NAMESPACES_KEY, setNamespace, loaded };
+};

frontend/packages/console-shared/src/hoc/index.ts

@@ -2,3 +2,4 @@ export * from './withPostFormSubmissionCallback';
 export * from './withUserSettingsCompatibility';
 export * from './withUserSettings';
 export * from './withActivePerspective';
+export * from './withLastNamespace';

frontend/packages/console-shared/src/hoc/withLastNamespace.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useActiveNamespace } from '../hooks';
+
+type WithLastNamespaceProps = {
+ activeNamespace?: string;
+ setActiveNamespace?: (v: string) => void;
+};
+
+export const withLastNamespace = <Props extends WithLastNamespaceProps>(
+ WrappedComponent: React.ComponentType<Props>,
+): React.FC<Omit<Props, keyof WithLastNamespaceProps>> => (props: Props) => {
+ const [activeNamespace, setActiveNamespace] = useActiveNamespace();
+ return (
+ <WrappedComponent
+ {...props}
+ activeNamespace={activeNamespace}
+ setActiveNamespace={setActiveNamespace}
+ />
+ );
+};

frontend/packages/console-shared/src/hooks/index.ts

@@ -23,3 +23,4 @@ export * from './useUserSettingsCompatibility';
 export * from './hpa-hooks';
 export * from './usePinnedResources';
 export * from './useActivePerspective';
+export * from './useActiveNamespace';

frontend/packages/console-shared/src/hooks/useActiveNamespace.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import { NamespaceContext } from '@console/app/src/components/detect-namespace/namespace';
+
+export const useActiveNamespace = (): [string, (ns: string) => void] => {
+ const { namespace, setNamespace } = useContext(NamespaceContext);
+ return [namespace, setNamespace];
+};

frontend/packages/dev-console/src/components/projects/CreateProjectListPage.tsx

@@ -1,13 +1,9 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-// FIXME upgrading redux types is causing many errors at this time
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-// @ts-ignore
-import { useDispatch } from 'react-redux';
 import { Button } from '@patternfly/react-core';
 import { createProjectModal } from '@console/internal/components/modals';
-import { setActiveNamespace } from '@console/internal/actions/ui';
 import { K8sResourceKind } from '@console/internal/module/k8s';
+import { useActiveNamespace } from '@console/shared';
 import ProjectListPage, { ProjectListPageProps } from './ProjectListPage';
 
 export interface CreateProjectListPageProps extends ProjectListPageProps {
@@ -22,10 +18,9 @@ const CreateProjectListPage: React.FC<CreateProjectListPageProps> = ({
  ...props
 }) => {
  const { t } = useTranslation();
- const dispatch = useDispatch();
-
+ const [, setActiveNamespace] = useActiveNamespace();
  const handleSubmit = (project: K8sResourceKind) => {
- dispatch(setActiveNamespace(project.metadata?.name));
+ setActiveNamespace(project.metadata?.name);
  onCreate && onCreate(project);
  };
 

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/create-vm-wizard-footer.tsx

@@ -2,6 +2,10 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import { connect } from 'react-redux';
+import { Prompt } from 'react-router';
+import { useTranslation } from 'react-i18next';
+import { useActiveNamespace } from '@console/shared';
+import { getActiveNamespace } from '@console/internal/actions/ui';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import {
@@ -11,7 +15,6 @@ import {
  WizardContextConsumer,
  WizardStep,
 } from '@patternfly/react-core';
-import { Prompt } from 'react-router';
 import { useShowErrorToggler } from '../../hooks/use-show-error-toggler';
 import { getDialogUIError, getSimpleDialogUIError } from '../../utils/strings';
 import {
@@ -27,14 +30,12 @@ import {
  isWizardEmpty as _isWizardEmpty,
 } from './selectors/immutable/wizard-selectors';
 import { iGetCommonData } from './selectors/immutable/selectors';
-import { setActiveNamespace, getActiveNamespace } from '@console/internal/actions/ui';
 import { vmWizardActions } from './redux/actions';
 import { ActionType } from './redux/types';
 import { getGoToStep } from './selectors/selectors';
 import { iGetLoadError, iGetIsLoaded } from '../../utils/immutable';
 
 import './create-vm-wizard-footer.scss';
-import { useTranslation } from 'react-i18next';
 
 type WizardContext = {
  onNext: () => void;
@@ -53,7 +54,6 @@ type CreateVMWizardFooterComponentProps = {
  isSimpleView: boolean;
  isInvalidUserTemplate: boolean;
  onEdit: (activeStepID: VMWizardTab) => void;
- setActiveNS: (ns: string) => void;
 };
 
 const CreateVMWizardFooterComponent: React.FC<CreateVMWizardFooterComponentProps> = ({
@@ -65,13 +65,11 @@ const CreateVMWizardFooterComponent: React.FC<CreateVMWizardFooterComponentProps
  isSimpleView,
  goToStep,
  onEdit,
- setActiveNS,
  isInvalidUserTemplate,
 }) => {
  const { t } = useTranslation();
  const [showError, setShowError, checkValidity] = useShowErrorToggler();
- const activeNS = getActiveNamespace();
-
+ const [activeNS, setActiveNS] = useActiveNamespace();
  const prevNamespaceRef = React.useRef('');
  React.useEffect(() => {
  prevNamespaceRef.current = activeNS;
@@ -280,7 +278,6 @@ const stateToProps = (state, { wizardReduxID }) => {
 
 const dispatchToProps = (dispatch, { wizardReduxID }) => ({
  // no callback like this can be passed through the Wizard component
- setActiveNS: (ns) => dispatch(setActiveNamespace(ns)),
  onEdit: (activeStepID: VMWizardTab) => {
  dispatch(vmWizardActions[ActionType.OpenDifficultTabs](wizardReduxID));
  dispatch(vmWizardActions[ActionType.SetGoToStep](wizardReduxID, activeStepID)); // keep on the same tab

frontend/public/actions/ui.ts

@@ -6,10 +6,7 @@ import * as _ from 'lodash-es';
 import store from '../redux';
 import { history } from '../components/utils/router';
 import { OverviewItem } from '@console/shared';
-import {
- ALL_NAMESPACES_KEY,
- LAST_NAMESPACE_NAME_LOCAL_STORAGE_KEY,
-} from '@console/shared/src/constants';
+import { ALL_NAMESPACES_KEY } from '@console/shared/src/constants';
 import { K8sResourceKind, PodKind, NodeKind } from '../module/k8s';
 import { allModels } from '../module/k8s/k8s-models';
 import { detectFeatures, clearSSARFlags } from './features';
@@ -204,7 +201,6 @@ export const setActiveNamespace = (namespace: string = '') => {
  }
  // remember the most recently-viewed project, which is automatically
  // selected when returning to the console
- localStorage.setItem(LAST_NAMESPACE_NAME_LOCAL_STORAGE_KEY, namespace);
  }
 
  return action(ActionType.SetActiveNamespace, { namespace });