fix: Reset layout after click on Navigation item (kyma-project#3726)

* small cleanup of code

* temporary fix for layout state

* add my thoughts

* potential fix

* revert changes

* improve routing

* fix flickering in custom resources

* fix extensibility routes

* use navigate

Author: dbadura

src/components/App/ExtensibilityRoutes.js

@@ -20,12 +20,7 @@ const Details = React.lazy(() =>
 );
 const Create = React.lazy(() => import('../Extensibility/ExtensibilityCreate'));
 
-const ColumnWrapper = ({
-  defaultColumn = 'list',
-  resourceType,
-  extension,
-  urlPath,
-}) => {
+const ColumnWrapper = ({ resourceType, extension, urlPath }) => {
   const [layoutState, setLayoutColumn] = useRecoilState(columnLayoutState);
   const [searchParams] = useSearchParams();
   const layout = searchParams.get('layout');
@@ -34,6 +29,7 @@ const ColumnWrapper = ({
   const { t } = useTranslation();
 
   const { namespaceId, resourceName } = useParams();
+  const defaultColumn = resourceName ? 'details' : 'list';
   const initialLayoutState = layout
     ? {
         layout: layout,
@@ -171,7 +167,7 @@ export const createExtensibilityRoutes = (extension, language, ...props) => {
   return (
     <React.Fragment key={urlPath}>
       <Route
-        path={urlPath}
+        path={`${urlPath}/:resourceName?`}
         exact
         element={
           <Suspense fallback={<Spinner />}>
@@ -183,21 +179,6 @@ export const createExtensibilityRoutes = (extension, language, ...props) => {
           </Suspense>
         }
       />
-      {extension.details && (
-        <Route
-          path={`${urlPath}/:resourceName`}
-          exact
-          element={
-            <Suspense fallback={<Spinner />}>
-              <ColumnWrapper
-                defaultColumn="details"
-                resourceType={resourceType}
-                urlPath={urlPath}
-              />
-            </Suspense>
-          }
-        />
-      )}
     </React.Fragment>
   );
 };

src/components/CustomResources/CustomResources.js

@@ -19,7 +19,7 @@ export function CustomResources({
 }) {
   const { group, names } = crd.spec;
   const name = names.plural;
-  const customUrl = useCustomResourceUrl(crd, true);
+  const customUrl = useCustomResourceUrl(crd);
   const { namespace } = useUrl();
   const resourceUrl =
     namespace && namespace !== '-all-'

src/resources/ClusterEvents/ClusterEventDetails.tsx

@@ -0,0 +1,33 @@
+import { useParams } from 'react-router-dom';
+import EventDetails from 'resources/Events/EventDetails';
+import { pathSegment } from 'resources/ClusterEvents/index';
+import { useUrl } from 'hooks/useUrl';
+
+export type ClusterEventDetailsProps = {
+  resourceName: string;
+  resourceUrl: string | undefined;
+  namespace: string | undefined;
+};
+
+export default function ClusterEventDetails({
+  resourceName,
+  resourceUrl,
+  namespace,
+  ...props
+}: ClusterEventDetailsProps) {
+  const params = useParams();
+  const overriddenNamespace = params.namespace ?? namespace;
+  const overriddenResourceUrl = resourceUrl
+    ? `/api/v1/namespaces/${overriddenNamespace}/events/${resourceName}`
+    : undefined;
+  const { clusterUrl } = useUrl();
+  return (
+    <EventDetails
+      {...props}
+      layoutCloseCreateUrl={clusterUrl(pathSegment)}
+      resourceName={resourceName}
+      namespace={overriddenNamespace}
+      resourceUrl={overriddenResourceUrl}
+    />
+  );
+}

src/resources/ClusterEvents/ClusterEventList.tsx

@@ -0,0 +1,6 @@
+import EventsList from 'resources/Events/EventList';
+import { ReactNode } from 'react';
+
+export default function ClusterEventList(props: any): ReactNode {
+  return <EventsList {...props} isClusterView={true} />;
+}

src/resources/ClusterEvents/index.js

@@ -1,8 +1,15 @@
-export { List, Details, resourceType } from 'resources/Events';
+import React from 'react';
+
+export { resourceType, ResourceDescription } from 'resources/Events';
 export const namespaced = false;
 export const apiGroup = '';
 export const apiVersion = 'v1';
-
 export const category = '';
-export const topLevelNode = true;
 export const icon = 'warning2';
+export const topLevelNode = true;
+
+export const pathSegment = 'clusterevents';
+export const customPath = `${pathSegment}/:namespace?/:resourceName?`;
+
+export const List = React.lazy(() => import('./ClusterEventList'));
+export const Details = React.lazy(() => import('./ClusterEventDetails'));

src/resources/CustomResourceDefinitions/CRCreate.js

@@ -28,18 +28,11 @@ function CRCreate({
   const [initialResource] = useState(
     initialCustomResource || createTemplate(crd),
   );
-  const currUrl = window.location.href;
 
-  const customUrl = useCustomResourceUrl(
-    crd,
-    currUrl.includes('customresources/'),
-  );
+  const customUrl = useCustomResourceUrl(crd);
 
   const navigate = useNavigate();
-  const { nextQuery, currentQuery } = usePrepareLayout(layoutNumber);
-  const goToLayoutQuery = customUrl(cr).includes('customresources/')
-    ? nextQuery
-    : currentQuery;
+  const { nextQuery } = usePrepareLayout(layoutNumber);
 
   const currentVersion = crd.spec.versions?.find(ver => ver.storage).name;
   const namespace =
@@ -75,7 +68,7 @@ function CRCreate({
             resourceType: crd.spec.names.kind,
           }),
         });
-        navigate(`${customUrl(cr)}${goToLayoutQuery}`);
+        navigate(`${customUrl(cr)}${nextQuery}`);
       }}
     />
   );

src/resources/CustomResourceDefinitions/useCustomResourceUrl.js

@@ -1,39 +1,21 @@
-import { useRecoilValue } from 'recoil';
-
-import { allNodesSelector } from 'state/navigation/allNodesSelector';
 import { useUrl } from 'hooks/useUrl';
 
-export function useCustomResourceUrl(crd, columnLayout = false) {
-  const { resourceUrl, clusterUrl, namespaceUrl } = useUrl();
-  const clusterNodes = useRecoilValue(allNodesSelector).filter(
-    node => !node.namespaced,
-  );
-  const namespaceNodes = useRecoilValue(allNodesSelector).filter(
-    node => node.namespaced,
-  );
-
+export function useCustomResourceUrl(crd) {
+  const { clusterUrl, namespaceUrl } = useUrl();
   return cr => {
-    const crdNamePlural = crd.spec.names.plural;
-    const clusterNode = clusterNodes.find(
-      res => res.resourceType === crdNamePlural,
+    const crClusterURL = clusterUrl(
+      `customresources/${crd.metadata.name}/${cr.metadata.name}`,
     );
-    const namespaceNode = namespaceNodes.find(
-      res => res.resourceType === crdNamePlural,
+
+    const crNamespaceURL = namespaceUrl(
+      `customresources/${crd.metadata.name}/${cr.metadata.name}`,
+      { namespace: cr.metadata.namespace },
     );
 
-    if (clusterNode) {
-      return resourceUrl(cr, { resourceType: clusterNode.pathSegment });
-    } else if (namespaceNode && !columnLayout) {
-      return resourceUrl(cr, { resourceType: namespaceNode.pathSegment });
-    } else if (crd.spec.scope === 'Cluster') {
-      return clusterUrl(
-        `customresources/${crd.metadata.name}/${cr.metadata.name}`,
-      );
+    if (crd.spec.scope === 'Cluster') {
+      return crClusterURL;
     } else {
-      return namespaceUrl(
-        `customresources/${crd.metadata.name}/${cr.metadata.name}`,
-        { namespace: cr.metadata.namespace },
-      );
+      return crNamespaceURL;
     }
   };
 }

src/resources/Events/EventDetails.js

@@ -87,7 +87,9 @@ export default function EventDetails(props) {
       value: event => (
         <Link
           data-testid="details-link"
-          url={clusterUrl(`namespaces/${event.metadata.namespace}`)}
+          url={clusterUrl(
+            `namespaces/${event.metadata.namespace}/events/${props.resourceName}`,
+          )}
         >
           {event.metadata.namespace}
         </Link>
@@ -103,6 +105,7 @@ export default function EventDetails(props) {
 
   return (
     <ResourceDetails
+      {...props}
       customComponents={[Specification]}
       customColumns={customColumns}
       description={ResourceDescription}
@@ -112,7 +115,6 @@ export default function EventDetails(props) {
       hideLabels
       hideAnnotations
       hideLastUpdate
-      {...props}
     />
   );
 }

src/resources/Events/EventList.js

@@ -8,21 +8,41 @@ import { ResourcesList } from 'shared/components/ResourcesList/ResourcesList';
 import { useUrl } from 'hooks/useUrl';
 import { Icon, ObjectStatus, Text } from '@ui5/webcomponents-react';
 import {
-  ResourceDescription,
   docsURL,
   i18nDescriptionKey,
+  ResourceDescription,
 } from 'resources/Events';
+import { pathSegment } from 'resources/ClusterEvents';
+
+function useEventUrl(resourceType, clusterView) {
+  const { namespaceUrl, clusterUrl } = useUrl();
+
+  if (clusterView) {
+    return resource => {
+      return clusterUrl(
+        `${pathSegment}/${resource.metadata.namespace}/${resource.metadata.name}`,
+      );
+    };
+  }
+  return resource => {
+    return namespaceUrl(`${resourceType}/${resource.metadata.name}`, {
+      namespace: resource.metadata.namespace,
+    });
+  };
+}
 
 export function EventList({
   defaultType,
   hideInvolvedObjects,
   filter,
   isCompact,
+  isClusterView = false,
   ...props
 }) {
   const { t } = useTranslation();
-  const { namespaceUrl, namespace } = useUrl();
+  const { namespace } = useUrl();
   const resourceType = props.resourceType.toLowerCase();
+  const customUrl = useEventUrl(resourceType, isClusterView);
   const {
     EVENT_MESSAGE_TYPE,
     displayType,
@@ -149,11 +169,7 @@ export function EventList({
       searchSettings={{
         textSearchProperties,
       }}
-      customUrl={event =>
-        namespaceUrl(`${resourceType}/${event.metadata.name}`, {
-          namespace: event.metadata.namespace,
-        })
-      }
+      customUrl={customUrl}
       emptyListProps={{
         showButton: false,
         subtitleText: i18nDescriptionKey,

src/resources/createResourceRoutes.js

@@ -24,18 +24,12 @@ export const createPath = (
 ) => {
   const { detailsView = false, pathSegment = '' } = config;
 
-  const details = detailsView ? '/:resourceName' : '';
+  const details = detailsView ? '/:resourceName?' : '';
 
   return `${pathSegment}${details}`;
 };
 
-const ColumnWrapper = ({
-  defaultColumn = 'list',
-  list,
-  details,
-  create,
-  ...props
-}) => {
+const ColumnWrapper = ({ list, details, create, ...props }) => {
   const [layoutState, setLayoutColumn] = useRecoilState(columnLayoutState);
   const [searchParams] = useSearchParams();
   const layout = searchParams.get('layout');
@@ -57,6 +51,8 @@ const ColumnWrapper = ({
     [props.namespaceId, namespaceIdFromParams],
   );
 
+  const defaultColumn = resourceName ? 'details' : 'list';
+
   const initialLayoutState = layout
     ? {
         layout: layout,
@@ -210,22 +206,19 @@ export const createResourceRoutes = ({
   List = null,
   Details = null,
   Create = null,
-  namespaced = true,
   resourceType = '',
   resourceI18Key = '',
+  customPath = null,
   ...props
 }) => {
   const pathSegment = resourceType.toLowerCase();
 
-  const listPath = createPath({ pathSegment });
-  const detailsPath = Details
-    ? createPath({ pathSegment, detailsView: true })
-    : '';
+  const path = customPath || createPath({ pathSegment, detailsView: true });
 
   return (
-    <React.Fragment key={listPath}>
+    <React.Fragment key={path}>
       <Route
-        path={listPath}
+        path={path}
         exact
         element={
           <Suspense fallback={<Spinner />}>
@@ -243,27 +236,6 @@ export const createResourceRoutes = ({
           </Suspense>
         }
       />
-      {detailsPath ? (
-        <Route
-          path={detailsPath}
-          element={
-            <Suspense fallback={<Spinner />}>
-              <ColumnWrapper
-                resourceType={resourceType}
-                resourceI18Key={resourceI18Key}
-                hasDetailsView={true}
-                list={<List />}
-                details={<Details />}
-                create={Create ? <Create /> : null}
-                defaultColumn="details"
-                {...props}
-              >
-                <Details />
-              </ColumnWrapper>
-            </Suspense>
-          }
-        />
-      ) : null}
     </React.Fragment>
   );
 };