frontend: Implement new Activity feature for tabs and windows

frontend/src/components/App/Layout.tsx

@@ -36,6 +36,7 @@ import { useTypedSelector } from '../../redux/hooks';
 import store from '../../redux/stores/store';
 import { useUIPanelsGroupedBySide } from '../../redux/uiSlice';
 import { fetchStatelessClusterKubeConfigs, isEqualClusterConfigs } from '../../stateless/';
+import { ActivitiesRenderer } from '../activity/Activity';
 import ActionsNotifier from '../common/ActionsNotifier';
 import AlertNotification from '../common/AlertNotification';
 import DetailsDrawer from '../common/Resource/DetailsDrawer';
@@ -250,19 +251,23 @@ export default function Layout({}: LayoutProps) {
           <TopBar />
           <Box
             sx={{
-              display: 'flex',
+              display: 'grid',
               overflow: 'hidden',
               flexGrow: 1,
               position: 'relative',
+              gridTemplateRows: '1fr min-content',
+              gridTemplateColumns: 'min-content 1fr',
             }}
           >
             <Sidebar />
             <Main
               id="main"
               sx={{
-                flexGrow: 1,
-                marginLeft: 'initial',
                 overflow: 'auto',
+                position: 'relative',
+                minHeight: 0,
+                gridColumn: '2 / 3',
+                gridRow: '1 / 2',
               }}
             >
               {clustersNotInURL.slice(0, MAXIMUM_NUM_ALERTS).map(clusterName => (
@@ -285,6 +290,7 @@ export default function Layout({}: LayoutProps) {
                 </Container>
               </Box>
             </Main>
+            <ActivitiesRenderer />
             <DetailsDrawer />
           </Box>
           {panels.bottom.map(it => (

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

@@ -14,45 +14,150 @@
  * limitations under the License.
  */
 
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
+import { Icon } from '@iconify/react';
+import { alpha, Box, Button, useTheme } from '@mui/material';
+import React, { ReactNode } from 'react';
+import { Trans } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { setDetailDrawerEnabled } from '../../../redux/drawerModeSlice';
 import { useTypedSelector } from '../../../redux/hooks';
-import { TooltipIcon } from '../../common/Tooltip';
+
+function OverlayPreview({ variant }: { variant: 'full-page' | 'overlay' }) {
+  const theme = useTheme();
+  const size = '150px';
+
+  return (
+    <Box
+      sx={{
+        width: size,
+        height: size,
+        border: '1px solid',
+        borderColor: theme.palette.divider,
+        position: 'relative',
+        borderRadius: theme.shape.borderRadius + 'px',
+        overflow: 'hidden',
+      }}
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '10%',
+          borderBottom: '1px solid',
+          borderColor: theme.palette.divider,
+        }}
+      ></Box>
+      <Box
+        sx={{
+          position: 'absolute',
+          width: '20%',
+          height: '90%',
+          top: '10%',
+          left: 0,
+          borderRight: '1px solid',
+          borderColor: theme.palette.divider,
+        }}
+      />
+      {variant === 'overlay' && (
+        <Box
+          sx={{
+            position: 'absolute',
+            background: theme.palette.background.muted,
+            width: '50%',
+            height: '90%',
+            top: '10%',
+            left: '50%',
+            border: '1px solid',
+            borderColor: theme.palette.divider,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: theme.shape.borderRadius + 'px',
+          }}
+        >
+          <Box sx={{ position: 'absolute', top: 0, right: 0, padding: '3px' }}>
+            <Icon icon="mdi:close" />
+          </Box>
+        </Box>
+      )}
+      {variant === 'full-page' && (
+        <Box
+          sx={{
+            position: 'absolute',
+            background: theme.palette.background.muted,
+            width: '80%',
+            height: '90%',
+            top: '10%',
+            left: '20%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Box
+            sx={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              padding: '3px',
+            }}
+          >
+            <Icon icon="mdi:chevron-left" />
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+const OptionButton = ({
+  children,
+  active,
+  onClick,
+}: {
+  children: ReactNode;
+  active: boolean;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}) => (
+  <Button
+    aria-pressed={active}
+    onClick={onClick}
+    sx={theme => ({
+      display: 'flex',
+      flexDirection: 'column',
+      color: 'unset',
+      textTransform: 'none',
+      gap: 1,
+      border: '2px solid',
+      borderColor: active
+        ? alpha(theme.palette.action.active, theme.palette.action.activatedOpacity)
+        : 'transparent',
+    })}
+  >
+    {children}
+  </Button>
+);
 
 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|Overlay')}
-          <TooltipIcon>
-            {t(
-              'translation|Shows resource details in a pane overlaid on the list view instead of a full page.'
-            )}
-          </TooltipIcon>
-        </>
-      }
-    />
+    <Box sx={{ display: 'flex' }}>
+      <OptionButton active={isDrawerEnabled} onClick={() => dispatch(setDetailDrawerEnabled(true))}>
+        <OverlayPreview variant="overlay" />
+        <Trans>Window</Trans>
+      </OptionButton>
+      <OptionButton
+        active={!isDrawerEnabled}
+        onClick={() => dispatch(setDetailDrawerEnabled(false))}
+      >
+        <OverlayPreview variant="full-page" />
+        <Trans>Full page</Trans>
+      </OptionButton>
+    </Box>
   );
 }

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

@@ -139,41 +139,66 @@
           <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"
+            <div
+              class="MuiBox-root css-k008qs"
             >
-              <span
-                class="MuiSwitch-root MuiSwitch-sizeMedium css-julti5-MuiSwitch-root"
+              <button
+                aria-pressed="true"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-17o2rvr-MuiButtonBase-root-MuiButton-root"
+                tabindex="0"
+                type="button"
               >
-                <span
-                  class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary Mui-checked PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary Mui-checked Mui-checked css-1emuodk-MuiButtonBase-root-MuiSwitch-switchBase"
+                <div
+                  class="MuiBox-root css-q5uj3p"
                 >
-                  <input
-                    checked=""
-                    class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
-                    name="drawerMode"
-                    type="checkbox"
-                  />
-                  <span
-                    class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
+                  <div
+                    class="MuiBox-root css-10tc75p"
                   />
-                  <span
-                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                  <div
+                    class="MuiBox-root css-1tuh5dl"
                   />
-                </span>
+                  <div
+                    class="MuiBox-root css-1wsar2n"
+                  >
+                    <div
+                      class="MuiBox-root css-flohcj"
+                    />
+                  </div>
+                </div>
+                Window
                 <span
-                  class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
+                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                 />
-              </span>
-              <span
-                class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-1ezega9-MuiTypography-root"
+              </button>
+              <button
+                aria-pressed="false"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-gl7zuq-MuiButtonBase-root-MuiButton-root"
+                tabindex="0"
+                type="button"
               >
-                Overlay
                 <div
-                  class="MuiContainer-root MuiContainer-maxWidthLg css-64uahr-MuiContainer-root"
+                  class="MuiBox-root css-q5uj3p"
+                >
+                  <div
+                    class="MuiBox-root css-10tc75p"
+                  />
+                  <div
+                    class="MuiBox-root css-1tuh5dl"
+                  />
+                  <div
+                    class="MuiBox-root css-b95qjn"
+                  >
+                    <div
+                      class="MuiBox-root css-y7640i"
+                    />
+                  </div>
+                </div>
+                Full page
+                <span
+                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                 />
-              </span>
-            </label>
+              </button>
+            </div>
           </dd>
           <dt
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1iczkge-MuiGrid-root"

frontend/src/components/Sidebar/Sidebar.tsx

@@ -371,7 +371,11 @@ export const PureSidebar = memo(
     }, [items]);
 
     return (
-      <Box component="nav" aria-label={t('translation|Navigation')}>
+      <Box
+        component="nav"
+        aria-label={t('translation|Navigation')}
+        sx={{ minHeight: 0, gridColumn: '1 / 2', gridRow: '1 / 3' }}
+      >
         <Drawer
           variant={isTemporaryDrawer ? 'temporary' : 'permanent'}
           PaperProps={{

frontend/src/components/Sidebar/__snapshots__/NavigationTabs.ClusterParentSelected.stories.storyshot

@@ -88,27 +88,27 @@
         </div>
         <div
           aria-labelledby="full-width-tab-0-NavigationTabs-tabs-id"
-          class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-fth53a-MuiTypography-root"
           id="full-width-tabpanel-0-NavigationTabs-tabs-id"
           role="tabpanel"
         />
         <div
           aria-labelledby="full-width-tab-1-NavigationTabs-tabs-id"
-          class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-fth53a-MuiTypography-root"
           hidden=""
           id="full-width-tabpanel-1-NavigationTabs-tabs-id"
           role="tabpanel"
         />
         <div
           aria-labelledby="full-width-tab-2-NavigationTabs-tabs-id"
-          class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-fth53a-MuiTypography-root"
           hidden=""
           id="full-width-tabpanel-2-NavigationTabs-tabs-id"
           role="tabpanel"
         />
         <div
           aria-labelledby="full-width-tab-3-NavigationTabs-tabs-id"
-          class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-fth53a-MuiTypography-root"
           hidden=""
           id="full-width-tabpanel-3-NavigationTabs-tabs-id"
           role="tabpanel"

frontend/src/components/Sidebar/__snapshots__/NavigationTabs.ItemWithoutOwnURLSelected.stories.storyshot

@@ -88,28 +88,28 @@
         </div>
         <div
           aria-labelledby="full-width-tab-0-NavigationTabs-tabs-id"
-          class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-fth53a-MuiTypography-root"
           hidden=""
           id="full-width-tabpanel-0-NavigationTabs-tabs-id"
           role="tabpanel"
         />
         <div
           aria-labelledby="full-width-tab-1-NavigationTabs-tabs-id"
-          class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-fth53a-MuiTypography-root"
           hidden=""
           id="full-width-tabpanel-1-NavigationTabs-tabs-id"
           role="tabpanel"
         />
         <div
           aria-labelledby="full-width-tab-2-NavigationTabs-tabs-id"
-          class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-fth53a-MuiTypography-root"
           hidden=""
           id="full-width-tabpanel-2-NavigationTabs-tabs-id"
           role="tabpanel"
         />
         <div
           aria-labelledby="full-width-tab-3-NavigationTabs-tabs-id"
-          class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-fth53a-MuiTypography-root"
           id="full-width-tabpanel-3-NavigationTabs-tabs-id"
           role="tabpanel"
         />