frontend Detail Drawer: Add detail drawer mode

components/pod/List: Fix URL changing after drawer open Signed-off-by: Vincent T <[email protected]>
headlamp-k8s · Jan 10, 2024 · 48a1507 · 48a1507
1 parent fe7f2ed
commit 48a1507
Show file tree

Hide file tree

Showing 19 changed files with 625 additions and 199 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -103,7 +103,7 @@
     "storybook": "start-storybook -p 6006 -s public",
     "build-typedoc": "npx typedoc",
     "build-storybook": "build-storybook -s public -o ../docs/development/storybook",
-    "i18n": "npx --no-install i18next ./src/**/ts* ./src/**/**/*.ts* ./src/**/**/**/*.ts* -c ./src/i18n/i18next-parser.config.js",
+    "i18n": "npx --no-install i18next ./src/**/*.ts* ./src/**/**/*.ts* ./src/**/**/**/*.ts* -c ./src/i18n/i18next-parser.config.js",
     "tsc": "tsc",
     "make-version": "node ./make-env.js",
     "postinstall": "patch-package"

diff --git a/frontend/src/components/App/Layout.tsx b/frontend/src/components/App/Layout.tsx
@@ -17,6 +17,7 @@ import { useTypedSelector } from '../../redux/reducers/reducers';
 import store from '../../redux/stores/store';
 import ActionsNotifier from '../common/ActionsNotifier';
 import AlertNotification from '../common/AlertNotification';
+// import DetailDrawer from '../common/DetailDrawer/DetailDrawer';
 import Sidebar, { NavigationTabs } from '../Sidebar';
 import RouteSwitcher from './RouteSwitcher';
 import TopBar from './TopBar';
@@ -93,6 +94,10 @@ export default function Layout({}: LayoutProps) {
   const { t } = useTranslation();
   const clusterInURL = getCluster();
 
+  // DETAIL DRAWER MODE
+  // const isDetailDrawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled);
+  // console.log('LAY - isDetailDrawerEnabled', isDetailDrawerEnabled);
+
   useEffect(() => {
     window.clusterConfigFetchHandler = setInterval(
       () => {
@@ -197,6 +202,7 @@ export default function Layout({}: LayoutProps) {
               )}
             </Container>
           </Box>
+          {/* {isDetailDrawerEnabled && <DetailDrawer />} */}
         </main>
         <ActionsNotifier />
       </Box>

diff --git a/frontend/src/components/App/Settings/DrawerModeButton.tsx b/frontend/src/components/App/Settings/DrawerModeButton.tsx
@@ -0,0 +1,59 @@
+import { FormControlLabel, Switch } from '@material-ui/core';
+import React from 'react';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { setDetailDrawerEnabled } from '../../../redux/drawerModeSlice';
+import { useTypedSelector } from '../../../redux/reducers/reducers';
+
+export default function DrawerModeButton() {
+  const dispatch = useDispatch();
+  const { t } = useTranslation('translation');
+  // This will fix the problem of the project refreshing the state away from needed position
+
+  // DETAIL DRAWER MODE
+  const isDetailDrawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled);
+  // const localDetailDrawerEnabled = localStorage.getItem('detailDrawerEnabled');
+  const [isDrawerEnabled, changeDetailDrawerEnabled] = useState<any>(isDetailDrawerEnabled);
+
+  if (isDetailDrawerEnabled) {
+    console.log('THE LOCAL STORAGE IS TRUE');
+    dispatch(setDetailDrawerEnabled(true));
+    console.log('READING FROM DISPATCHED STATE', isDetailDrawerEnabled);
+  } else {
+    console.log(" THE LOCAL STORAGE IS NULL, UNDEFINED, OR 'FALSE' ");
+    dispatch(setDetailDrawerEnabled(false));
+    console.log('READING FROM DISPATCHED STATE', isDetailDrawerEnabled);
+  }
+
+  console.log('BUTTON - isDetailDrawerEnabled', isDetailDrawerEnabled);
+
+  // the useEffect will run everytime the isDrawerEnabled state changes, which is everytime the user clicks the switch button because the switch button changes the state of isDrawerEnabled
+  useEffect(() => {
+    dispatch(setDetailDrawerEnabled(isDrawerEnabled));
+    console.log('ON SETTINGS');
+    console.log(localStorage.getItem('detailDrawerEnabled'));
+  }, [isDrawerEnabled]);
+
+  // this function takes in the current changes and updates it, this kicks off the useEffect that is listening for changes to newDrawerEnabled
+  function drawerModeToggle() {
+    console.log('drawerModeToggle');
+    changeDetailDrawerEnabled(!isDrawerEnabled);
+  }
+
+  // NOTICE THAT WE DO NOT USE isDrawerEnabled TO DETERMINE HOW THE SWITCH IS RENDERED UNDER THE CHECKED PROP, THIS IS BECAUSE THE USEEFFECT WILL RERENDER THE COMPONENT WITH THE NEW STATE
+  return (
+    <FormControlLabel
+      control={
+        <Switch
+          checked={isDetailDrawerEnabled}
+          onClick={drawerModeToggle}
+          name="drawerMode"
+          color="primary"
+        />
+      }
+      // will need to replace label
+      label={t('translation|Drawer Mode')}
+    />
+  );
+}
diff --git a/frontend/src/components/App/Settings/Settings.tsx b/frontend/src/components/App/Settings/Settings.tsx
@@ -9,6 +9,7 @@ import { setAppSettings } from '../../../redux/configSlice';
 import { defaultTableRowsPerPageOptions } from '../../../redux/configSlice';
 import { ActionButton, NameValueTable, SectionBox } from '../../common';
 import TimezoneSelect from '../../common/TimezoneSelect';
+import DrawerModeButton from './DrawerModeButton';
 import { useSettings } from './hook';
 import NumRowsInput from './NumRowsInput';
 import ThemeChangeButton from './ThemeChangeButton';
@@ -69,6 +70,10 @@ export default function Settings() {
             name: t('translation|Theme'),
             value: <ThemeChangeButton showBothIcons />,
           },
+          {
+            name: t('translation|Details on list view'),
+            value: <DrawerModeButton />,
+          },
           {
             name: t('translation|Number of rows for tables'),
             value: (

diff --git a/frontend/src/components/App/Settings/__snapshots__/Settings.stories.storyshot b/frontend/src/components/App/Settings/__snapshots__/Settings.stories.storyshot
@@ -158,6 +158,52 @@ exports[`Storyshots Settings General 1`] = `
             </button>
           </div>
         </dd>
+        <dt
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 makeStyles-metadataNameCell css-1r6indk-MuiGrid-root"
+        >
+          Drawer Mode
+        </dt>
+        <dd
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 makeStyles-metadataCell makeStyles-valueCol css-r0umuq-MuiGrid-root"
+        >
+          <label
+            class="MuiFormControlLabel-root"
+          >
+            <span
+              class="MuiSwitch-root"
+            >
+              <span
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiSwitch-switchBase MuiSwitch-colorPrimary"
+              >
+                <span
+                  class="MuiIconButton-label"
+                >
+                  <input
+                    class="PrivateSwitchBase-input-4 MuiSwitch-input"
+                    name="drawerMode"
+                    type="checkbox"
+                    value=""
+                  />
+                  <span
+                    class="MuiSwitch-thumb"
+                  />
+                </span>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </span>
+              <span
+                class="MuiSwitch-track"
+              />
+            </span>
+            <span
+              class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+            >
+              Drawer Mode
+            </span>
+          </label>
+        </dd>
         <dt
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 makeStyles-metadataNameCell css-1r6indk-MuiGrid-root"
         >

diff --git a/frontend/src/components/common/Link.tsx b/frontend/src/components/common/Link.tsx
@@ -1,8 +1,10 @@
 import MuiLink from '@mui/material/Link';
 import React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { Link as RouterLink, useHistory } from 'react-router-dom';
 import { makeKubeObject } from '../../lib/k8s/cluster';
 import { createRouteURL, RouteURLProps } from '../../lib/router';
+import { setDetailDrawerOpen } from '../../redux/drawerModeSlice';
 import { LightTooltip } from './Tooltip';
 
 export interface LinkBaseProps {
@@ -21,6 +23,7 @@ export interface LinkProps extends LinkBaseProps {
   state?: {
     [prop: string]: any;
   };
+  drawerEnabled?: boolean;
 }
 
 export interface LinkObjectProps extends LinkBaseProps {
@@ -30,11 +33,35 @@ export interface LinkObjectProps extends LinkBaseProps {
 
 function PureLink(props: React.PropsWithChildren<LinkProps | LinkObjectProps>) {
   if ((props as LinkObjectProps).kubeObject) {
-    const { kubeObject, ...otherProps } = props as LinkObjectProps;
+    const { kubeObject, drawerEnabled, ...otherProps } = props as LinkObjectProps;
+
+    // const drawerOpen = useTypedSelector(state => state.drawerMode.isDetailDrawerOpen);
+    const dispatch = useDispatch();
+    const history = useHistory();
+
+    function drawerLinkHandler(event: any) {
+      event.preventDefault();
+      history.push(kubeObject.getDetailsLink() + '/drawer');
+      dispatch(setDetailDrawerOpen(true));
+    }
+
     return (
-      <MuiLink component={RouterLink} to={kubeObject.getDetailsLink()} {...otherProps}>
-        {props.children || kubeObject.getName()}
-      </MuiLink>
+      <>
+        {drawerEnabled === true ? (
+          <MuiLink
+            component={RouterLink}
+            to={kubeObject.getDetailsLink() + '/drawer'}
+            {...otherProps}
+            onClick={drawerLinkHandler}
+          >
+            {props.children || kubeObject.getName()}
+          </MuiLink>
+        ) : (
+          <MuiLink component={RouterLink} to={kubeObject.getDetailsLink()} {...otherProps}>
+            {props.children || kubeObject.getName()}
+          </MuiLink>
+        )}
+      </>
     );
   }
 

diff --git a/frontend/src/components/common/__snapshots__/ActionsNotifier.stories.storyshot b/frontend/src/components/common/__snapshots__/ActionsNotifier.stories.storyshot
@@ -5,7 +5,7 @@ exports[`Storyshots ActionsNotifier None 1`] = `<div />`;
 exports[`Storyshots ActionsNotifier Some 1`] = `
 <div>
   <div
-    class="makeStyles-bottom-4 makeStyles-left-5 makeStyles-root-1"
+    class="makeStyles-bottom-8 makeStyles-left-9 makeStyles-root-5"
   >
     <div
       class="MuiCollapse-root MuiCollapse-entered"
@@ -18,22 +18,22 @@ exports[`Storyshots ActionsNotifier Some 1`] = `
           class="MuiCollapse-wrapperInner"
         >
           <div
-            class="SnackbarItem-root-8 SnackbarItem-wrappedRoot-23 SnackbarItem-anchorOriginBottomLeft-14"
+            class="SnackbarItem-root-12 SnackbarItem-wrappedRoot-27 SnackbarItem-anchorOriginBottomLeft-18"
           >
             <div
               aria-describedby="notistack-snackbar"
-              class="ForwardRef-root-24 SnackbarItem-contentRoot-15"
+              class="ForwardRef-root-28 SnackbarItem-contentRoot-19"
               role="alert"
               style="webkit-transform: none; transform: none; webkit-transition: -webkit-transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; transition: transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;"
             >
               <div
-                class="SnackbarItem-message-21"
+                class="SnackbarItem-message-25"
                 id="notistack-snackbar"
               >
                 Some message
               </div>
               <div
-                class="SnackbarItem-action-22"
+                class="SnackbarItem-action-26"
               >
                 <button
                   class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall MuiButton-textSizeSmall css-u3zvl7-MuiButtonBase-root-MuiButton-root"