UI: Modify layout so that grid fills the viewport height

Issue: #3418 PR: #3645
guardicore · Sep 6, 2023 · 0a8c545 · 0a8c545
1 parent 59a5f89
commit 0a8c545
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 26 deletions.
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/MarketplacePage.js b/monkey/monkey_island/cc/ui/src/components/pages/MarketplacePage.js
@@ -1,6 +1,6 @@
 import React, {useContext, useState} from 'react';
 import Tabs from '@mui/material/Tabs';
-import {Tab, Box, Badge} from '@mui/material';
+import {Tab, Box, Badge, Stack} from '@mui/material';
 import {PluginsContext} from '../contexts/plugins/PluginsContext';
 import AvailablePlugins from '../ui-components/plugins-marketplace/AvailablePlugins';
 import InstalledPlugins from '../ui-components/plugins-marketplace/InstalledPlugins';
@@ -16,10 +16,11 @@ const TabPanel = (props) => {
       hidden={value !== index}
       id={`full-width-tabpanel-${index}`}
       aria-labelledby={`full-width-tab-${index}`}
+      style={{minHeight: 0}}
       {...other}
     >
       {value === index && (
-        <Box sx={{px: 1, py: 3}}>
+        <Box sx={{px: 1, py: 3, height: '100%'}}>
           {children}
         </Box>
       )}
@@ -62,7 +63,8 @@ const MarketplacePage = () => {
   </div>
 
   return (
-      <Box id={classes['marketplace-page']} className="main col-xl-8 col-lg-8 col-md-9 col-sm-9 offset-xl-2 offset-lg-3 offset-md-3 offset-sm-3">
+      <Box id={classes['marketplace-page']} className="main col-xl-8 col-lg-8 col-md-9 col-sm-9 offset-xl-2 offset-lg-3 offset-md-3 offset-sm-3" maxHeight={'100vh'}>
+        <Stack height='100%'>
         <h1 className='page-title'>Plugins</h1>
         <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
           <Tabs value={tabValue}
@@ -97,6 +99,7 @@ const MarketplacePage = () => {
               setPluginsInUninstallProcess={setPluginsInUninstallProcess} />
         </TabPanel>
         <TabPanel value={tabValue} index={2}><UploadNewPlugin/></TabPanel>
+        </Stack>
       </Box>
   )
 };

diff --git a/...monkey_island/cc/ui/src/components/ui-components/plugins-marketplace/AvailablePlugins.tsx b/...monkey_island/cc/ui/src/components/ui-components/plugins-marketplace/AvailablePlugins.tsx
@@ -7,7 +7,7 @@ import {PluginsContext} from '../../contexts/plugins/PluginsContext';
 import {GridActionsCellItem} from '@mui/x-data-grid';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import DownloadDoneIcon from '@mui/icons-material/DownloadDone';
-import {Box, Grid} from '@mui/material';
+import {Box, Grid, Stack} from '@mui/material';
 import BasePlugins from './BasePlugins';
 import SearchBar from '../SearchBar';
 import AuthComponent from '../../AuthComponent';
@@ -177,8 +177,8 @@ const AvailablePlugins = (props) => {
   }
 
   return (
-    <Box>
-      <Grid container spacing={2} rowSpacing={1} columnSpacing={2}>
+    <Stack spacing={2} height='100%'>
+      <Grid container spacing={2}>
         <Grid xs={4} item>
           <SearchBar setQuery={onSearchChanged} />
         </Grid>
@@ -199,14 +199,12 @@ const AvailablePlugins = (props) => {
         <Grid xs={1} item >
           <Button onClick={() => refreshAvailablePlugins(true)}><RefreshIcon/></Button>
         </Grid>
-        <Grid xs={12} item>
-          <BasePlugins plugins={displayedPlugins}
-                       loadingMessage="Loading all available plugins..."
-                       onRefreshCallback={onRefreshCallback}
-                       getRowActions={getRowActions} />
-        </Grid>
       </Grid>
-    </Box>
+      <BasePlugins plugins={displayedPlugins}
+                    loadingMessage="Loading all available plugins..."
+                    onRefreshCallback={onRefreshCallback}
+                    getRowActions={getRowActions} />
+    </Stack>
   )
 };
 

diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/plugins-marketplace/BasePlugins.tsx b/monkey/monkey_island/cc/ui/src/components/ui-components/plugins-marketplace/BasePlugins.tsx
@@ -82,7 +82,7 @@ const BasePlugins = (props) => {
 
 
   return (
-    <Box className={styles['plugins-wrapper']}>
+    <Box className={styles['plugins-wrapper']} minHeight={0}>
       {/*<PluginsActions showUpgradableToggle={showUpgradableToggle}/>*/}
 
        {isLoadingPlugins
@@ -91,7 +91,8 @@ const BasePlugins = (props) => {
                      rows={[...rows]}
                      rowHeight={'25px'}
                      showToolbar={false}
-                     maxHeight={'500px'}
+                     height={'100%'}
+                     minHeight={0}
                      className="marketplace-plugins-list"
                      initialState={initialState}
                      needCustomWorkaround={false}

diff --git a/...monkey_island/cc/ui/src/components/ui-components/plugins-marketplace/InstalledPlugins.tsx b/...monkey_island/cc/ui/src/components/ui-components/plugins-marketplace/InstalledPlugins.tsx
@@ -2,7 +2,7 @@ import React, {useContext, useEffect, useState} from 'react';
 import {InstalledPlugin, PluginsContext} from '../../contexts/plugins/PluginsContext';
 import {shallowAdditionOfUniqueValueToArray, shallowRemovalOfUniqueValueFromArray} from '../../../utils/objectUtils';
 import {GridActionsCellItem} from '@mui/x-data-grid';
-import {Box, Grid} from '@mui/material';
+import {Grid, Stack} from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import AutoDeleteIcon from '@mui/icons-material/AutoDelete';
 import DownloadingIcon from '@mui/icons-material/Downloading';
@@ -260,8 +260,8 @@ const InstalledPlugins = (props) => {
   }
 
   return (
-    <Box>
-      <Grid container spacing={2} rowSpacing={1} columnSpacing={2}>
+    <Stack spacing={2} height='100%'>
+      <Grid container spacing={2}>
         <Grid xs={4} item>
           <SearchBar setQuery={onSearchChanged} />
         </Grid>
@@ -276,15 +276,13 @@ const InstalledPlugins = (props) => {
           <MonkeyToggle options={[{value: 'all', label: 'All'},{value: 'upgradable', label: 'Upgradable'}]}
                       setSelectedValues={onToggleChanged}/>
         </Grid>
-        <Grid xs={12} item>
-          <BasePlugins plugins={displayedPlugins}
-                      loadingMessage="Loading all available plugins..."
-                      onRefreshCallback={onRefreshCallback}
-                      getRowActions={getRowActions}
-          />
-        </Grid>
       </Grid>
-    </Box>
+      <BasePlugins plugins={displayedPlugins}
+                  loadingMessage="Loading all available plugins..."
+                  onRefreshCallback={onRefreshCallback}
+                  getRowActions={getRowActions}
+      />
+    </Stack>
   )
 };