frontend: DetailsDrawer: Add details drawer / drawer mode

Signed-off-by: Vincent T <[email protected]>

frontend/src/components/App/Layout.tsx

@@ -18,6 +18,7 @@ import store from '../../redux/stores/store';
 import { fetchStatelessClusterKubeConfigs, isEqualClusterConfigs } from '../../stateless/';
 import ActionsNotifier from '../common/ActionsNotifier';
 import AlertNotification from '../common/AlertNotification';
+import DetailsDrawer from '../DetailsDrawer/DetailsDrawer';
 import Sidebar, { NavigationTabs } from '../Sidebar';
 import RouteSwitcher from './RouteSwitcher';
 import TopBar from './TopBar';
@@ -104,6 +105,8 @@ export default function Layout({}: LayoutProps) {
   const clusterInURL = getCluster();
   const theme = useTheme();
 
+  const isDetailDrawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled);
+
   /** This fetches the cluster config from the backend and updates the redux store on an interval.
    * When stateless clusters are enabled, it also fetches the stateless cluster config from the
    * indexDB and then sends the backend to parse it and then updates the parsed value into redux
@@ -232,6 +235,7 @@ export default function Layout({}: LayoutProps) {
             </Container>
           </Box>
         </Main>
+        {isDetailDrawerEnabled && <DetailsDrawer />}
         <ActionsNotifier />
       </Box>
     </>

frontend/src/components/App/Settings/DrawerModeButton.tsx

@@ -0,0 +1,55 @@
+import { FormControlLabel, Switch } from '@mui/material';
+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';
+import { TooltipIcon } from '../../common';
+
+export default function DrawerModeButton() {
+  const dispatch = useDispatch();
+  const { t } = useTranslation('translation');
+
+  const [isDrawerEnabled, changeDetailDrawerEnabled] = useState<any>(
+    useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled)
+  );
+
+  if (isDrawerEnabled) {
+    dispatch(setDetailDrawerEnabled(true));
+  } else {
+    dispatch(setDetailDrawerEnabled(false));
+  }
+
+  // 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));
+  }, [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() {
+    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={isDrawerEnabled}
+          onClick={drawerModeToggle}
+          name="drawerMode"
+          color="primary"
+        />
+      }
+      label={
+        <>
+          {t('translation|Drawer Mode')}
+          <TooltipIcon>
+            {t('translation|Enable details to render in side drawer window')}
+          </TooltipIcon>
+        </>
+      }
+    />
+  );
+}

frontend/src/components/App/Settings/Settings.tsx

@@ -8,6 +8,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';
@@ -57,6 +58,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: (

frontend/src/components/App/Settings/__snapshots__/Settings.General.stories.storyshot

@@ -151,6 +151,49 @@
               </button>
             </div>
           </dd>
+          <dt
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-trrd7p-MuiGrid-root"
+          >
+            Details on list view
+          </dt>
+          <dd
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8 css-deb4a-MuiGrid-root"
+          >
+            <label
+              class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
+            >
+              <span
+                class="MuiSwitch-root MuiSwitch-sizeMedium css-julti5-MuiSwitch-root"
+              >
+                <span
+                  class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1nsozxe-MuiButtonBase-root-MuiSwitch-switchBase"
+                >
+                  <input
+                    class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
+                    name="drawerMode"
+                    type="checkbox"
+                  />
+                  <span
+                    class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
+                  />
+                  <span
+                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                  />
+                </span>
+                <span
+                  class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
+                />
+              </span>
+              <span
+                class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-1ezega9-MuiTypography-root"
+              >
+                Drawer Mode
+                <div
+                  class="MuiContainer-root MuiContainer-maxWidthLg css-64uahr-MuiContainer-root"
+                />
+              </span>
+            </label>
+          </dd>
           <dt
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-trrd7p-MuiGrid-root"
           >