Upversion dependencies & fix redux state warnings

frontend/package.json

@@ -42,9 +42,9 @@
   },
   "dependencies": {
     "@openshift/dynamic-plugin-sdk": "^4.0.0",
-    "@openshift/dynamic-plugin-sdk-utils": "^4.0.0",
+    "@openshift/dynamic-plugin-sdk-utils": "^4.0.1",
     "@patternfly/patternfly": "^5.1.0",
-    "@patternfly/quickstarts": "^5.0.0",
+    "@patternfly/quickstarts": "^5.1.0",
     "@patternfly/react-catalog-view-extension": "^5.0.0",
     "@patternfly/react-charts": "^7.1.1",
     "@patternfly/react-code-editor": "^5.1.1",
@@ -72,7 +72,7 @@
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.1",
     "sass": "^1.56.2",
-    "showdown": "^1.9.1",
+    "showdown": "^2.1.0",
     "yaml": "^2.2.2"
   },
   "devDependencies": {
@@ -85,7 +85,7 @@
     "@types/react-dom": "^18.0.8",
     "@types/react-redux": "^7.1.24",
     "@types/react-router-dom": "^5.3.3",
-    "@types/showdown": "^1.9.3",
+    "@types/showdown": "^2.0.3",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",
     "babel-loader": "^8.3.0",

frontend/src/app/AppLauncher.tsx

@@ -8,7 +8,6 @@ import {
 import openshiftLogo from '~/images/openshift.svg';
 import { useWatchConsoleLinks } from '~/utilities/useWatchConsoleLinks';
 import { ODH_PRODUCT_NAME } from '~/utilities/const';
-import { useAppSelector } from '~/redux/hooks';
 import { getOpenShiftConsoleServerURL } from '~/utilities/clusterUtils';
 import { useClusterInfo } from '~/redux/selectors/clusterInfo';
 import { ApplicationAction, Section } from '~/types';
@@ -60,13 +59,9 @@ const sectionSortValue = (section: Section): number => {
 
 const AppLauncher: React.FC = () => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const [clusterID, clusterBranding] = useAppSelector((state) => [
-    state.clusterID,
-    state.clusterBranding,
-  ]);
+  const { clusterID, clusterBranding, serverURL } = useClusterInfo();
   const { consoleLinks } = useWatchConsoleLinks();
   const { dashboardConfig } = useAppContext();
-  const { serverURL } = useClusterInfo();
 
   const disableClusterManager = dashboardConfig.spec.dashboardConfig.disableClusterManager;
 

frontend/src/redux/selectors/clusterInfo.ts

@@ -1,5 +1,6 @@
 import { AppState } from '~/redux/types';
 import { useAppSelector } from '~/redux/hooks';
+import { isStateEqual } from '~/redux/selectors/utils';
 import { ClusterState } from './types';
 
 const getClusterInfo = (state: AppState): ClusterState => ({
@@ -8,4 +9,4 @@ const getClusterInfo = (state: AppState): ClusterState => ({
   serverURL: state.serverURL,
 });
 
-export const useClusterInfo = (): ClusterState => useAppSelector(getClusterInfo);
+export const useClusterInfo = (): ClusterState => useAppSelector(getClusterInfo, isStateEqual);

frontend/src/redux/selectors/project.ts

@@ -1,5 +1,6 @@
 import { useAppSelector } from '~/redux/hooks';
+import { isStateEqual } from '~/redux/selectors/utils';
 import { DashboardNamespace } from './types';
 
 export const useDashboardNamespace = (): DashboardNamespace =>
-  useAppSelector((state) => ({ dashboardNamespace: state.dashboardNamespace || '' }));
+  useAppSelector((state) => ({ dashboardNamespace: state.dashboardNamespace || '' }), isStateEqual);

frontend/src/redux/selectors/user.ts

@@ -1,5 +1,6 @@
 import { AppState } from '~/redux/types';
 import { useAppSelector } from '~/redux/hooks';
+import { isStateEqual } from '~/redux/selectors/utils';
 import { UserState } from './types';
 
 const getUser = (state: AppState): UserState => ({
@@ -10,4 +11,4 @@ const getUser = (state: AppState): UserState => ({
   userError: state.userError ?? null,
 });
 
-export const useUser = (): UserState => useAppSelector(getUser);
+export const useUser = (): UserState => useAppSelector(getUser, isStateEqual);

frontend/src/redux/selectors/utils.ts

@@ -0,0 +1,4 @@
+import { isEqual } from 'lodash-es';
+
+export const isStateEqual = <T>(stateBefore: T, stateAfter: T): boolean =>
+  isEqual(stateBefore, stateAfter);