Merge branch 'main' into fix-modules-state

kyma-project · Jan 20, 2025 · f332ccf · f332ccf
2 parents 6e71633 + dfa56d0
commit f332ccf
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 61 deletions.
diff --git a/src/components/App/ClusterRoutes.js b/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 />} />

diff --git a/src/components/App/NamespaceRoutes.tsx b/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>

diff --git a/src/shared/components/ListActions/ListActions.js b/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}

diff --git a/src/sidebar/NavItem.tsx b/src/sidebar/NavItem.tsx
@@ -1,3 +1,10 @@
+import { useEffect } from 'react';
+import {
+  useLocation,
+  useNavigate,
+  useNavigationType,
+  NavigationType,
+} from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { NavNode } from 'state/types';
 import { useUrl } from 'hooks/useUrl';
@@ -11,7 +18,6 @@ import {
   SideNavigationSubItem,
   SideNavigationItem,
 } from '@ui5/webcomponents-react';
-import { useNavigate } from 'react-router-dom';
 import { isResourceEditedState } from 'state/resourceEditedAtom';
 
 import { isFormOpenState } from 'state/formOpenAtom';
@@ -28,6 +34,8 @@ export function NavItem({ node, subItem = false }: NavItemProps) {
   const { t } = useTranslation();
   const urlGenerators = useUrl();
   const navigate = useNavigate();
+  const location = useLocation();
+  const navigationType = useNavigationType();
   const setLayoutColumn = useSetRecoilState(columnLayoutState);
   const [isResourceEdited, setIsResourceEdited] = useRecoilState(
     isResourceEditedState,
@@ -55,44 +63,57 @@ export function NavItem({ node, subItem = false }: NavItemProps) {
     }
   };
 
-  let propsForNav = {
+  const handleNavigation = (isNavigatingForward?: boolean) => {
+    if (node.dataSources) {
+      let link =
+        !jsonataError && jsonataLink ? jsonataLink : node.externalUrl ?? '';
+      link = link.startsWith('http') ? link : `https://${link}`;
+      const newWindow = window.open(link, 'noopener, noreferrer');
+      if (newWindow) newWindow.opener = null;
+    } else if (node.externalUrl) {
+      const link = node.externalUrl.startsWith('http')
+        ? node.externalUrl
+        : `https://${node.externalUrl}`;
+      const newWindow = window.open(link, 'noopener, noreferrer');
+      if (newWindow) newWindow.opener = null;
+    } else {
+      handleActionIfFormOpen(
+        isResourceEdited,
+        setIsResourceEdited,
+        isFormOpen,
+        setIsFormOpen,
+        () => {
+          setLayoutColumn({
+            midColumn: null,
+            endColumn: null,
+            layout: 'OneColumn',
+          });
+          const url = node.createUrlFn
+            ? node.createUrlFn(urlGenerators)
+            : scopedUrl(node.pathSegment);
+          if (location?.pathname !== url && isNavigatingForward) {
+            navigate(url);
+          }
+        },
+      );
+    }
+  };
+
+  useEffect(() => {
+    if (navigationType === NavigationType.Pop) {
+      handleNavigation();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigationType]);
+
+  const propsForNav = {
     icon: node.externalUrl ? 'action' : node.icon,
     text: t(node.label, { defaultValue: node.label }),
     selected: isNodeSelected(node),
     key: node.pathSegment,
     onClick: (e: Event) => {
-      if (node.dataSources) {
-        let link =
-          !jsonataError && jsonataLink ? jsonataLink : node.externalUrl || '';
-        link = link.startsWith('http') ? link : `https://${link}`;
-        const newWindow = window.open(link, 'noopener, noreferrer');
-        if (newWindow) newWindow.opener = null;
-      } else if (node.externalUrl) {
-        const link = node.externalUrl.startsWith('http')
-          ? node.externalUrl
-          : `https://${node.externalUrl}`;
-        const newWindow = window.open(link, 'noopener, noreferrer');
-        if (newWindow) newWindow.opener = null;
-      } else {
-        handleActionIfFormOpen(
-          isResourceEdited,
-          setIsResourceEdited,
-          isFormOpen,
-          setIsFormOpen,
-          () => {
-            setLayoutColumn({
-              midColumn: null,
-              endColumn: null,
-              layout: 'OneColumn',
-            });
-            navigate(
-              node.createUrlFn
-                ? node.createUrlFn(urlGenerators)
-                : scopedUrl(node.pathSegment),
-            );
-          },
-        );
-      }
+      e.stopPropagation();
+      handleNavigation(true);
     },
   };