fix: Inconsistent handling browser history routes

src/components/App/ClusterRoutes.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Route, Routes, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil';
@@ -30,6 +30,17 @@ export default function ClusterRoutes() {
   const extensions = useRecoilValue(extensionsState);
   const [cluster, setCluster] = useRecoilState(clusterState);
   const [search] = useSearchParams();
+  const [extensibilityRoutes, setExtensibilityRoutes] = useState(null);
+
+  useEffect(() => {
+    if (extensions?.length) {
+      setExtensibilityRoutes(
+        extensions?.map(extension =>
+          createExtensibilityRoutes(extension, language),
+        ),
+      );
+    }
+  }, [extensions, language]);
 
   useEffect(() => {
     if (cluster?.name === currentClusterName) return;
@@ -55,15 +66,17 @@ export default function ClusterRoutes() {
 
   return (
     <Routes>
-      <Route
-        path="*"
-        element={
-          <IncorrectPath
-            to="overview"
-            message={t('components.incorrect-path.message.cluster')}
-          />
-        }
-      />
+      {extensibilityRoutes && (
+        <Route
+          path="*"
+          element={
+            <IncorrectPath
+              to="overview"
+              message={t('components.incorrect-path.message.cluster')}
+            />
+          }
+        />
+      )}
       {/*  overview route should stay static  */}
       <Route
         path="overview"
@@ -75,9 +88,7 @@ export default function ClusterRoutes() {
       />
 
       {/* extensibility routes should go first, so if someone overwrites the default view, the new one should have a higher priority */}
-      {extensions?.map(extension =>
-        createExtensibilityRoutes(extension, language),
-      )}
+      {extensibilityRoutes}
       {resourceRoutes}
       {otherRoutes}
       <Route path="namespaces/:namespaceId/*" element={<NamespaceRoutes />} />

src/components/App/NamespaceRoutes.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { Routes, Route, useParams } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { useTranslation } from 'react-i18next';
@@ -18,6 +19,19 @@ export default function NamespaceRoutes() {
   const { clusterUrl } = useUrl();
   const language = useRecoilValue(languageAtom);
   const extensions = useRecoilValue(extensionsState);
+  const [extensibilityRoutes, setExtensibilityRoutes] = useState<
+    JSX.Element[] | null
+  >(null);
+
+  useEffect(() => {
+    if (extensions?.length) {
+      setExtensibilityRoutes(
+        extensions.map(extension =>
+          createExtensibilityRoutes(extension, language),
+        ),
+      );
+    }
+  }, [extensions, language]);
 
   const { error } = useGet(
     namespaceId === '-all-'
@@ -27,7 +41,7 @@ export default function NamespaceRoutes() {
       skip: false,
       pollingInterval: 0,
       onDataReceived: () => {},
-    },
+    } as any,
   );
   const hasAccessToNamespace =
     JSON.parse(JSON.stringify(error)) === null ||
@@ -43,19 +57,19 @@ export default function NamespaceRoutes() {
 
   return (
     <Routes>
-      <Route
-        path="*"
-        element={
-          <IncorrectPath
-            to=""
-            message={t('components.incorrect-path.message.namespace')}
-          />
-        }
-      />
-      {/* extensibility routes should go first, so if someone overwrites the default view, the new one should have a higher priority */}
-      {extensions?.map(extension =>
-        createExtensibilityRoutes(extension, language),
+      {extensibilityRoutes && (
+        <Route
+          path="*"
+          element={
+            <IncorrectPath
+              to=""
+              message={t('components.incorrect-path.message.namespace')}
+            />
+          }
+        />
       )}
+      {/* extensibility routes should go first, so if someone overwrites the default view, the new one should have a higher priority */}
+      {extensibilityRoutes}
       {resourceRoutesNamespaced}
       {otherRoutesNamespaced}
     </Routes>

src/shared/components/ListActions/ListActions.js

@@ -22,7 +22,10 @@ const StandaloneAction = ({ action, entry }) => {
   return (
     <Button
       data-testid={action.name.replace(' ', '').toLowerCase()}
-      onClick={() => action.handler(entry)}
+      onClick={e => {
+        e.stopPropagation();
+        action.handler(entry);
+      }}
       className="list-actions__standalone"
       design="Transparent"
       icon={typeof icon === 'function' ? icon(entry) : icon}

src/sidebar/NavItem.tsx

@@ -11,7 +11,7 @@ import {
   SideNavigationSubItem,
   SideNavigationItem,
 } from '@ui5/webcomponents-react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { isResourceEditedState } from 'state/resourceEditedAtom';
 
 import { isFormOpenState } from 'state/formOpenAtom';
@@ -28,6 +28,7 @@ export function NavItem({ node, subItem = false }: NavItemProps) {
   const { t } = useTranslation();
   const urlGenerators = useUrl();
   const navigate = useNavigate();
+  const location = useLocation();
   const setLayoutColumn = useSetRecoilState(columnLayoutState);
   const [isResourceEdited, setIsResourceEdited] = useRecoilState(
     isResourceEditedState,
@@ -61,6 +62,7 @@ export function NavItem({ node, subItem = false }: NavItemProps) {
     selected: isNodeSelected(node),
     key: node.pathSegment,
     onClick: (e: Event) => {
+      e.stopPropagation();
       if (node.dataSources) {
         let link =
           !jsonataError && jsonataLink ? jsonataLink : node.externalUrl || '';
@@ -85,11 +87,12 @@ export function NavItem({ node, subItem = false }: NavItemProps) {
               endColumn: null,
               layout: 'OneColumn',
             });
-            navigate(
-              node.createUrlFn
-                ? node.createUrlFn(urlGenerators)
-                : scopedUrl(node.pathSegment),
-            );
+            const url = node.createUrlFn
+              ? node.createUrlFn(urlGenerators)
+              : scopedUrl(node.pathSegment);
+            if (location?.pathname !== url) {
+              navigate(url);
+            }
           },
         );
       }