feat: Update component page

src/components/ActionsInlineList/index.tsx

@@ -1,7 +1,6 @@
 import { Icon } from '@iconify/react';
 import { IconButton, Stack, Tooltip, useTheme } from '@mui/material';
 import React from 'react';
-import { ConditionalWrapper } from '../ConditionalWrapper';
 import { ActionsInlineListProps } from './types';
 
 export const ActionsInlineList = ({ actions }: ActionsInlineListProps) => {
@@ -14,11 +13,8 @@ export const ActionsInlineList = ({ actions }: ActionsInlineListProps) => {
 
         return (
           <div key={actionId}>
-            <ConditionalWrapper
-              condition={disabled.status}
-              wrapper={(children) => <Tooltip title={disabled.reason}>{children}</Tooltip>}
-            >
-              <Tooltip title={label}>
+            <Tooltip title={disabled.reason || label}>
+              <div>
                 <IconButton
                   component="span"
                   disabled={disabled.status}
@@ -28,8 +24,8 @@ export const ActionsInlineList = ({ actions }: ActionsInlineListProps) => {
                 >
                   <Icon icon={icon} width={24} height={24} />
                 </IconButton>
-              </Tooltip>
-            </ConditionalWrapper>
+              </div>
+            </Tooltip>
           </div>
         );
       })}

src/components/BorderedSection/index.tsx

@@ -0,0 +1,28 @@
+import { Box, Stack, Typography } from '@mui/material';
+import React from 'react';
+import { BorderedSectionProps } from './types';
+
+export const BorderedSection = ({ title, children }: BorderedSectionProps) => {
+  return (
+    <Box
+      sx={{
+        backgroundColor: 'background.paper',
+        boxShadow: '0px 1px 10px 0px #0024461F',
+        borderLeft: (t) => `4px solid ${t.palette.primary.main}`,
+        borderRadius: '4px',
+        padding: (t) => t.typography.pxToRem(24),
+      }}
+    >
+      <Stack spacing={3}>
+        {typeof title === 'string' ? (
+          <Typography fontSize={20} fontWeight={600} color="primary.dark">
+            {title}
+          </Typography>
+        ) : (
+          title
+        )}
+        {children}
+      </Stack>
+    </Box>
+  );
+};

src/components/BorderedSection/types.ts

@@ -0,0 +1,4 @@
+export interface BorderedSectionProps {
+  title: string | React.ReactNode;
+  children: React.ReactNode;
+}

src/components/ButtonWithPermission/index.tsx

@@ -1,48 +1,22 @@
-import { KubeObjectInterface } from '@kinvolk/headlamp-plugin/lib/lib/k8s/cluster';
 import { Button, ButtonProps, Tooltip } from '@mui/material';
 import React from 'react';
-import { DeepPartial } from '../../types/global';
 import { ConditionalWrapper } from '../ConditionalWrapper';
 
 export const ButtonWithPermission = ({
-  item,
-  actionCheckName,
+  allowed,
+  text = 'Forbidden',
   ButtonProps,
   children,
 }: {
-  item: DeepPartial<KubeObjectInterface>;
-  actionCheckName: string;
+  allowed: boolean;
+  text: string;
   ButtonProps: ButtonProps;
   children: React.ReactNode;
 }) => {
-  const [allowed, setAllowed] = React.useState<boolean>(false);
-
-  React.useEffect(() => {
-    let isMounted = true;
-    if (!!item) {
-      item
-        .getAuthorization(actionCheckName)
-        .then((result: any) => {
-          if (isMounted) {
-            setAllowed(!!result.status?.allowed);
-          }
-        })
-        .catch(() => {
-          if (isMounted) {
-            setAllowed(false);
-          }
-        });
-    }
-
-    return function cleanup() {
-      isMounted = false;
-    };
-  }, [actionCheckName, item]);
-
   return (
     <ConditionalWrapper
       condition={!allowed}
-      wrapper={(children) => <Tooltip title={'Forbidden'}>{children}</Tooltip>}
+      wrapper={(children) => <Tooltip title={text}>{children}</Tooltip>}
     >
       <div>
         <Button {...ButtonProps} disabled={ButtonProps?.disabled || !allowed}>

src/components/DataGrid/index.tsx

@@ -98,15 +98,17 @@ export const DataGrid = <DataType extends unknown>({
 
   return (
     <Stack spacing={2}>
-      {renderGrid()}
+      <div>{renderGrid()}</div>
       {showPagination && data?.length > _rowsPerPage && (
-        <Pagination
-          dataCount={readyData && readyData.length}
-          page={page}
-          rowsPerPage={_rowsPerPage}
-          handleChangePage={handleChangePage}
-          handleChangeRowsPerPage={handleChangeRowsPerPage}
-        />
+        <div>
+          <Pagination
+            dataCount={readyData && readyData.length}
+            page={page}
+            rowsPerPage={_rowsPerPage}
+            handleChangePage={handleChangePage}
+            handleChangeRowsPerPage={handleChangeRowsPerPage}
+          />
+        </div>
       )}
     </Stack>
   );

src/components/InfoColumns/index.tsx

@@ -1,26 +1,9 @@
-import { Icon } from '@iconify/react';
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  CircularProgress,
-  Grid,
-  GridSize,
-  Typography,
-} from '@mui/material';
+import { CircularProgress, Grid, GridSize, Typography } from '@mui/material';
 import React from 'react';
-import { ICONS } from '../../icons/iconify-icons-mapping';
 import { UseSpriteSymbol } from '../../icons/UseSpriteSymbol';
-import { LOCAL_STORAGE_SERVICE } from '../../services/local-storage';
-import { LS_KEY_SHOW_INFO_COLUMNS_BY_DEFAULT } from '../../services/local-storage/keys';
-import { useStyles } from './styles';
-import { InfoColumnsAccordionProps, InfoColumnsProps } from './types';
+import { InfoColumnsProps } from './types';
 
-const toShowValueFromLocalStorage: 'true' | 'false' = LOCAL_STORAGE_SERVICE.getItem(
-  LS_KEY_SHOW_INFO_COLUMNS_BY_DEFAULT
-);
-
-const InfoColumnsRenderer = ({ infoRows }: InfoColumnsProps) => {
+export const InfoColumns = ({ infoRows }: InfoColumnsProps) => {
   return (
     <Grid container spacing={4}>
       {infoRows ? (
@@ -31,7 +14,7 @@ const InfoColumnsRenderer = ({ infoRows }: InfoColumnsProps) => {
                 <React.Fragment key={`column::${index}`}>
                   {!!label && !!text && (
                     <Grid item xs={columnXs as GridSize}>
-                      <Typography variant={'body2'} gutterBottom>
+                      <Typography fontWeight={500} fontSize={14} color="primary.dark" gutterBottom>
                         {label}
                       </Typography>
                       <Grid container spacing={1} alignItems={'center'}>
@@ -45,7 +28,11 @@ const InfoColumnsRenderer = ({ infoRows }: InfoColumnsProps) => {
                           </Grid>
                         )}
                         <Grid item>
-                          <Typography variant={'caption'} style={{ lineHeight: 1 }}>
+                          <Typography
+                            fontSize={13}
+                            color="secondary.dark"
+                            style={{ lineHeight: 1 }}
+                          >
                             {text}
                           </Typography>
                         </Grid>
@@ -63,43 +50,3 @@ const InfoColumnsRenderer = ({ infoRows }: InfoColumnsProps) => {
     </Grid>
   );
 };
-
-export const InfoColumnsAccordion = ({ infoRows, title }: InfoColumnsAccordionProps) => {
-  const classes = useStyles();
-  const [expandedPanel, setExpandedPanel] = React.useState<string>(
-    toShowValueFromLocalStorage === 'true' ? 'info_columns' : null
-  );
-
-  const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
-    setExpandedPanel(isExpanded ? panel : null);
-    LOCAL_STORAGE_SERVICE.setItem(LS_KEY_SHOW_INFO_COLUMNS_BY_DEFAULT, String(isExpanded));
-  };
-
-  const toShow = expandedPanel === 'info_columns';
-
-  return (
-    <Accordion elevation={1} expanded={toShow} onChange={handleChange('info_columns')}>
-      <AccordionSummary
-        expandIcon={<Icon icon={ICONS.ARROW_DOWN} />}
-        className={classes.accordionSummary}
-      >
-        <Typography variant={'h6'} style={{ fontWeight: 600 }}>
-          {title}
-        </Typography>
-      </AccordionSummary>
-      <AccordionDetails>
-        <InfoColumnsRenderer infoRows={infoRows} />
-      </AccordionDetails>
-    </Accordion>
-  );
-};
-
-export const InfoColumns = ({ infoRows }: InfoColumnsProps) => {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.root}>
-      <InfoColumnsRenderer infoRows={infoRows} />
-    </div>
-  );
-};

src/components/InfoColumns/types.ts

@@ -12,7 +12,3 @@ export type InfoRow = InfoColumn[];
 export interface InfoColumnsProps {
   infoRows: InfoRow[];
 }
-
-export interface InfoColumnsAccordionProps extends InfoColumnsProps {
-  title: string;
-}

src/components/NoDataWidgetWrapper/index.tsx

@@ -1,7 +1,8 @@
-import { Paper, Typography } from '@mui/material';
-import clsx from 'clsx';
+import { Icon } from '@iconify/react';
+import { Stack, Typography } from '@mui/material';
 import React from 'react';
-import { useStyles } from './styles';
+import { STATUS_COLOR } from '../../constants/colors';
+import { ICONS } from '../../icons/iconify-icons-mapping';
 import { NoDataWidgetWrapperProps } from './types';
 
 export const NoDataWidgetWrapper: React.FC<NoDataWidgetWrapperProps> = ({
@@ -10,21 +11,29 @@ export const NoDataWidgetWrapper: React.FC<NoDataWidgetWrapperProps> = ({
   text = 'No data available.',
   children,
 }) => {
-  const classes = useStyles();
-
-  return (
-    <Paper
-      elevation={0}
-      className={clsx(classes.wrapper, { [classes.wrapperWithPadding]: isLoading })}
+  return !isLoading && !hasData ? (
+    <Stack
+      spacing={1}
+      alignItems="center"
+      direction="row"
+      maxWidth={(t) => t.typography.pxToRem(520)}
     >
-      {!isLoading && !hasData ? (
-        <div className={classes.overlap}>
-          <div>
-            {typeof text === 'string' ? <Typography variant={'body1'}>{text}</Typography> : text}
-          </div>
-        </div>
-      ) : null}
-      <div className={clsx({ [classes.noContent]: !isLoading && !hasData })}>{children}</div>
-    </Paper>
+      <Icon
+        icon={ICONS.WARNING}
+        width={32}
+        height={32}
+        color={STATUS_COLOR.UNKNOWN}
+        style={{ flexShrink: 0 }}
+      />
+      {typeof text === 'string' ? (
+        <Typography variant={'body1'} color="secondary.dark">
+          {text}
+        </Typography>
+      ) : (
+        text
+      )}
+    </Stack>
+  ) : (
+    <>{children}</>
   );
 };

src/components/PageWithSubMenu/index.tsx

@@ -131,8 +131,6 @@ export const PageWithSubMenu: React.FC<PageWithSubMenuProps> = ({ title, list, c
                       sx={{
                         minHeight: 'auto',
                         flexDirection: 'row',
-                        justifyContent: 'flex-start',
-                        textAlign: 'left',
                         gap: theme.typography.pxToRem(10),
                         padding: theme.typography.pxToRem(16),
                         textDecoration: 'none !important',

src/components/PageWrapper/index.tsx

@@ -14,7 +14,13 @@ export const PageWrapper: React.FC<PageWrapperProps> = ({
   const hasBreadcrumbs = !!breadcrumbs && !!breadcrumbs.length;
 
   return (
-    <Box sx={{ pt: theme.typography.pxToRem(40), px: theme.typography.pxToRem(16) }}>
+    <Box
+      sx={{
+        pt: theme.typography.pxToRem(40),
+        pb: theme.typography.pxToRem(120),
+        px: theme.typography.pxToRem(16),
+      }}
+    >
       {hasBreadcrumbs ? (
         <Grid container spacing={1} alignItems={'center'} justifyContent={'space-between'}>
           <Grid item>
@@ -31,6 +37,7 @@ export const PageWrapper: React.FC<PageWrapperProps> = ({
                         component={Link}
                         routeName={url.pathname}
                         params={url.params}
+                        sx={{ minWidth: 0 }}
                       >
                         {label}
                       </Button>