frontend: Link: Add drawer logic to links

Signed-off-by: Vincent T <[email protected]>
headlamp-k8s · Dec 10, 2024 · 0271ea9 · 0271ea9
1 parent 72bfd6e
commit 0271ea9
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 5 deletions.
diff --git a/frontend/src/components/common/Link.stories.tsx b/frontend/src/components/common/Link.stories.tsx
@@ -1,15 +1,23 @@
 import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { createStore } from 'redux';
+import reducers from '../../redux/reducers/reducers';
 import Link, { LinkProps } from './Link';
 
+const store = createStore(reducers);
+
 export default {
   title: 'Link',
   component: Link,
   decorators: [
     Story => (
-      <MemoryRouter>
-        <Story />
-      </MemoryRouter>
+      <Provider store={store}>
+        <MemoryRouter>
+          <Story />
+        </MemoryRouter>
+      </Provider>
     ),
   ],
 } as Meta;

diff --git a/frontend/src/components/common/Link.tsx b/frontend/src/components/common/Link.tsx
@@ -1,10 +1,14 @@
 import MuiLink from '@mui/material/Link';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
+import { useDispatch } from 'react-redux';
 import { Link as RouterLink } from 'react-router-dom';
+import helpers from '../../helpers';
 import { kubeObjectQueryKey, useEndpoints } from '../../lib/k8s/api/v2/hooks';
 import { KubeObject } from '../../lib/k8s/KubeObject';
 import { createRouteURL, RouteURLProps } from '../../lib/router';
+import { setSelectedResource } from '../../redux/drawerModeSlice';
+import { useTypedSelector } from '../../redux/reducers/reducers';
 import { LightTooltip } from './Tooltip';
 
 export interface LinkBaseProps {
@@ -23,6 +27,7 @@ export interface LinkProps extends LinkBaseProps {
   state?: {
     [prop: string]: any;
   };
+  drawerEnabled?: boolean;
 }
 
 export interface LinkObjectProps extends LinkBaseProps {
@@ -66,8 +71,8 @@ function PureLink(props: React.PropsWithChildren<LinkProps | LinkObjectProps>) {
     const { kubeObject, ...otherProps } = props as LinkObjectProps;
     return <KubeObjectLink kubeObject={kubeObject!} {...otherProps} />;
   }
+  const { routeName, params = {}, search, state, ...otherProps } = props as LinkObjectProps;
 
-  const { routeName, params = {}, search, state, ...otherProps } = props as LinkProps;
   return (
     <MuiLink
       component={RouterLink}
@@ -84,7 +89,11 @@ function PureLink(props: React.PropsWithChildren<LinkProps | LinkObjectProps>) {
 }
 
 export default function Link(props: React.PropsWithChildren<LinkProps | LinkObjectProps>) {
-  const { tooltip, ...otherProps } = props;
+  const drawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled);
+  const dispatch = useDispatch();
+
+  const { tooltip, kubeObject, ...otherProps } = props as LinkObjectProps;
+
   if (tooltip) {
     let tooltipText = '';
     if (typeof tooltip === 'string') {
@@ -106,5 +115,42 @@ export default function Link(props: React.PropsWithChildren<LinkProps | LinkObje
     }
   }
 
+  if ('kubeObject' in props && kubeObject) {
+    const kubeJSON = kubeObject.jsonData;
+
+    if (drawerEnabled === true && props.kubeObject) {
+      return (
+        <MuiLink
+          onClick={() => {
+            if (drawerEnabled) {
+              dispatch(setSelectedResource(kubeJSON!));
+              /**
+               * NOTE: we are using window.history.pushState to update the URL without causing a page reload.
+               * currently there is no way to update the URL without navigation to the details page which would make the drawer redundant.
+               *
+               * also note that this currently only works in the browser, not in electron.
+               */
+              if (!helpers.isElectron()) {
+                window.history.pushState(
+                  { path: kubeObject.getDetailsLink() },
+                  '',
+                  kubeObject.getDetailsLink()
+                );
+              }
+            }
+          }}
+        >
+          {props.children || kubeObject.getName()}
+        </MuiLink>
+      );
+    } else {
+      return (
+        <MuiLink component={RouterLink} to={kubeObject.getDetailsLink()} {...otherProps}>
+          {props.children || kubeObject.getName()}
+        </MuiLink>
+      );
+    }
+  }
+
   return <PureLink {...otherProps} />;
 }