frontend: DetailsDrawer: Add details drawer / drawer mode

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

frontend/src/components/App/Layout.tsx

@@ -7,6 +7,7 @@ import { styled } from '@mui/material/styles';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
+import { useParams } from 'react-router-dom';
 import { useClustersConf } from '../../lib/k8s';
 import { request } from '../../lib/k8s/apiProxy';
 import { Cluster } from '../../lib/k8s/cluster';
@@ -18,6 +19,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';
@@ -109,6 +111,13 @@ export default function Layout({}: LayoutProps) {
    * indexDB and then sends the backend to parse it and then updates the parsed value into redux
    * store on an interval.
    * */
+  // DETAIL DRAWER MODE
+  const isDetailDrawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled);
+  console.log('LAY - isDetailDrawerEnabled', isDetailDrawerEnabled);
+
+  const params = useParams();
+  console.log('LAY - params: ', params);
+
   useEffect(() => {
     window.clusterConfigFetchHandler = setInterval(
       () => {
@@ -232,6 +241,7 @@ export default function Layout({}: LayoutProps) {
             </Container>
           </Box>
         </Main>
+        {isDetailDrawerEnabled && <DetailsDrawer />}
         <ActionsNotifier />
       </Box>
     </>

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

@@ -0,0 +1,59 @@
+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';
+
+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')}
+    />
+  );
+}

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';
@@ -65,6 +66,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,46 @@
               </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-9f9ori-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
+              </span>
+            </label>
+          </dd>
           <dt
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-trrd7p-MuiGrid-root"
           >