frontend: Add detail drawer mode

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';
@@ -105,6 +106,8 @@ export default function Layout({}: LayoutProps) {
   const allClusters = useClustersConf();
   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
@@ -235,6 +238,7 @@ export default function Layout({}: LayoutProps) {
             </Container>
           </Box>
         </Main>
+        {isDetailDrawerEnabled && <DetailsDrawer />}
         <ActionsNotifier />
       </Box>
     </>

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

@@ -0,0 +1,39 @@
+import { FormControlLabel, Switch } from '@mui/material';
+import React 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 DrawerModeSettings() {
+  const dispatch = useDispatch();
+  const { t } = useTranslation('translation');
+
+  const isDrawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled);
+
+  function drawerModeToggle() {
+    dispatch(setDetailDrawerEnabled(!isDrawerEnabled));
+  }
+
+  return (
+    <FormControlLabel
+      control={
+        <Switch
+          checked={isDrawerEnabled}
+          onClick={drawerModeToggle}
+          name="drawerMode"
+          color="primary"
+        />
+      }
+      label={
+        <>
+          {t('translation|Drawer Mode')}
+          <TooltipIcon>
+            {t('translation|Displays resource details in a side drawer instead of a full page')}
+          </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 DrawerModeSettings from './DrawerModeSettings';
 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: <DrawerModeSettings />,
+          },
           {
             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"
           >