refactor: Remove Render component everywhere (#95)

Jira: EPMDPEDP-12899 Related: #95 Change-Id: If6bc1a751acd21c98ee4d17d73f93ccb9a594368
epam · Nov 7, 2023 · d62cc23 · d62cc23
1 parent f336859
commit d62cc23
Show file tree

Hide file tree

Showing 83 changed files with 527 additions and 704 deletions.
diff --git a/src/Logo.tsx b/src/Logo.tsx
@@ -2,7 +2,6 @@ import { RootState } from '@kinvolk/headlamp-plugin/lib/redux/stores/store';
 import { Grid, Typography } from '@material-ui/core';
 import React from 'react';
 import { TypedUseSelectorHook, useSelector } from 'react-redux';
-import { Render } from './components/Render';
 
 const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;
 
@@ -98,7 +97,7 @@ export const LogoWithText = () => {
 
     return (
         <>
-            <Render condition={isSidebarOpen}>
+            {isSidebarOpen && (
                 <Grid container spacing={2} alignItems={'center'} wrap={'nowrap'}>
                     <Grid item>
                         <Logo />
@@ -107,10 +106,8 @@ export const LogoWithText = () => {
                         <Typography variant="h6">EDP Portal</Typography>
                     </Grid>
                 </Grid>
-            </Render>
-            <Render condition={!isSidebarOpen}>
-                <Logo />
-            </Render>
+            )}
+            {!isSidebarOpen && <Logo />}
         </>
     );
 };
diff --git a/src/components/DataGrid/index.tsx b/src/components/DataGrid/index.tsx
@@ -2,7 +2,6 @@ import { CircularProgress, Grid, Typography } from '@material-ui/core';
 import React from 'react';
 import { usePagination } from '../../hooks/usePagination';
 import { EmptyList } from '../EmptyList';
-import { Render } from '../Render';
 import { Pagination } from './components/Pagination';
 import { useReadyData } from './hooks/useReadyData';
 import { DataGridProps } from './types';
@@ -81,7 +80,7 @@ export const DataGrid = <DataType extends unknown>({
                     <>{emptyListComponent}</>
                 ) : null}
             </Grid>
-            <Render condition={showPagination && data?.length > _rowsPerPage}>
+            {showPagination && data?.length > _rowsPerPage && (
                 <Grid item xs={12}>
                     <Pagination
                         dataCount={readyData && readyData.length}
@@ -91,7 +90,7 @@ export const DataGrid = <DataType extends unknown>({
                         handleChangeRowsPerPage={handleChangeRowsPerPage}
                     />
                 </Grid>
-            </Render>
+            )}
         </Grid>
     );
 };
diff --git a/src/components/EmptyList/index.tsx b/src/components/EmptyList/index.tsx
@@ -3,7 +3,6 @@ import { Box, Grid, Link, Typography, useTheme } from '@material-ui/core';
 import React from 'react';
 import { ICONS } from '../../icons/iconify-icons-mapping';
 import { rem } from '../../utils/styling/rem';
-import { Render } from '../Render';
 import { EmptyListProps } from './types';
 
 export const EmptyList = ({
@@ -54,19 +53,19 @@ export const EmptyList = ({
                             {customText ? customText : `There are no ${missingItemName} here.`}
                         </Typography>
                     </Grid>
-                    <Render condition={!!linkText && !!handleClick}>
+                    {!!linkText && !!handleClick && (
                         <Grid item>
                             <Link onClick={handleClick} component={'button'}>
                                 <Typography>{linkText}</Typography>
                             </Link>
                         </Grid>
-                    </Render>
+                    )}
                 </Grid>
-                <Render condition={!!description}>
+                {!!description && (
                     <Typography variant={'body2'} color={'textSecondary'}>
                         {description}
                     </Typography>
-                </Render>
+                )}
             </Box>
         </Box>
     );

diff --git a/src/components/InfoColumns/index.tsx b/src/components/InfoColumns/index.tsx
@@ -13,7 +13,6 @@ 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 { Render } from '../Render';
 import { useStyles } from './styles';
 import { InfoColumnsAccordionProps, InfoColumnsProps } from './types';
 
@@ -30,13 +29,13 @@ const InfoColumnsRenderer = ({ infoRows }: InfoColumnsProps) => {
                         <Grid container spacing={2}>
                             {row.map(({ label, text, icon, columnXs = 2 }, index) => (
                                 <React.Fragment key={`column::${index}`}>
-                                    <Render condition={!!label && !!text}>
+                                    {!!label && !!text && (
                                         <Grid item xs={columnXs as GridSize}>
                                             <Typography variant={'body2'} gutterBottom>
                                                 {label}
                                             </Typography>
                                             <Grid container spacing={1} alignItems={'center'}>
-                                                <Render condition={!!icon}>
+                                                {!!icon && (
                                                     <Grid item>
                                                         {typeof icon === 'string' ? (
                                                             <UseSpriteSymbol
@@ -48,7 +47,7 @@ const InfoColumnsRenderer = ({ infoRows }: InfoColumnsProps) => {
                                                             icon
                                                         )}
                                                     </Grid>
-                                                </Render>
+                                                )}
                                                 <Grid item>
                                                     <Typography
                                                         variant={'caption'}
@@ -59,7 +58,7 @@ const InfoColumnsRenderer = ({ infoRows }: InfoColumnsProps) => {
                                                 </Grid>
                                             </Grid>
                                         </Grid>
-                                    </Render>
+                                    )}
                                 </React.Fragment>
                             ))}
                         </Grid>

diff --git a/src/components/KubeObjectActions/index.tsx b/src/components/KubeObjectActions/index.tsx
@@ -10,7 +10,6 @@ import {
 import React from 'react';
 import { KubeObjectAction } from '../../types/actions';
 import { ConditionalWrapper } from '../ConditionalWrapper';
-import { Render } from '../Render';
 import { useStyles } from './styles';
 import { KubeObjectActionsProps } from './types';
 
@@ -23,41 +22,39 @@ type ActionsListProps = {
 const ActionsList = ({ actions, menuOpen, anchorEl }: ActionsListProps) => {
     const classes = useStyles();
 
-    return (
-        <Render condition={Boolean(anchorEl)}>
-            <Popper
-                open={menuOpen}
-                anchorEl={anchorEl}
-                disablePortal
-                className={classes.popper}
-                placement={'bottom-end'}
-            >
-                <div role="list" className={classes.actionList}>
-                    {actions.map(({ name, label, action, disabled, icon }, idx) => {
-                        const actionId = `${name}:${idx}`;
+    return anchorEl ? (
+        <Popper
+            open={menuOpen}
+            anchorEl={anchorEl}
+            disablePortal
+            className={classes.popper}
+            placement={'bottom-end'}
+        >
+            <div role="list" className={classes.actionList}>
+                {actions.map(({ name, label, action, disabled, icon }, idx) => {
+                    const actionId = `${name}:${idx}`;
 
-                        return (
-                            <div key={actionId}>
-                                <ConditionalWrapper
-                                    condition={disabled.status}
-                                    wrapper={children => (
-                                        <Tooltip title={disabled.reason}>{children}</Tooltip>
-                                    )}
-                                >
-                                    <ListItem button disabled={disabled.status} onClick={action}>
-                                        <ListItemIcon>
-                                            <Icon icon={icon} width={'25'} />
-                                        </ListItemIcon>
-                                        <ListItemText primary={label} />
-                                    </ListItem>
-                                </ConditionalWrapper>
-                            </div>
-                        );
-                    })}
-                </div>
-            </Popper>
-        </Render>
-    );
+                    return (
+                        <div key={actionId}>
+                            <ConditionalWrapper
+                                condition={disabled.status}
+                                wrapper={children => (
+                                    <Tooltip title={disabled.reason}>{children}</Tooltip>
+                                )}
+                            >
+                                <ListItem button disabled={disabled.status} onClick={action}>
+                                    <ListItemIcon>
+                                        <Icon icon={icon} width={'25'} />
+                                    </ListItemIcon>
+                                    <ListItemText primary={label} />
+                                </ListItem>
+                            </ConditionalWrapper>
+                        </div>
+                    );
+                })}
+            </div>
+        </Popper>
+    ) : null;
 };
 
 export const KubeObjectActions = ({
@@ -67,23 +64,15 @@ export const KubeObjectActions = ({
 }: KubeObjectActionsProps) => {
     const classes = useStyles();
 
-    return (
-        <Render condition={!!actions.length}>
-            <>
-                <ClickAwayListener
-                    onClickAway={handleCloseActionsMenu}
-                    mouseEvent="onMouseDown"
-                    touchEvent="onTouchStart"
-                >
-                    <div className={classes.actions}>
-                        <ActionsList
-                            actions={actions}
-                            menuOpen={Boolean(anchorEl)}
-                            anchorEl={anchorEl}
-                        />
-                    </div>
-                </ClickAwayListener>
-            </>
-        </Render>
-    );
+    return !!actions.length ? (
+        <ClickAwayListener
+            onClickAway={handleCloseActionsMenu}
+            mouseEvent="onMouseDown"
+            touchEvent="onTouchStart"
+        >
+            <div className={classes.actions}>
+                <ActionsList actions={actions} menuOpen={Boolean(anchorEl)} anchorEl={anchorEl} />
+            </div>
+        </ClickAwayListener>
+    ) : null;
 };
diff --git a/src/components/LoadingWrapper/index.tsx b/src/components/LoadingWrapper/index.tsx
@@ -1,18 +1,16 @@
 import { CircularProgress, Grid } from '@material-ui/core';
 import React from 'react';
-import { Render } from '../Render';
 
 export const LoadingWrapper: React.FC<{ isLoading: boolean }> = ({ children, isLoading }) => {
     return (
         <Grid container justifyContent={'center'} alignItems={'center'}>
-            <Render condition={isLoading}>
+            {isLoading ? (
                 <CircularProgress />
-            </Render>
-            <Render condition={!isLoading}>
+            ) : (
                 <Grid item xs={12}>
                     {children}
                 </Grid>
-            </Render>
+            )}
         </Grid>
     );
 };
diff --git a/src/components/MappedProperties/index.tsx b/src/components/MappedProperties/index.tsx
@@ -1,6 +1,5 @@
 import { Typography } from '@material-ui/core';
 import React from 'react';
-import { Render } from '../Render';
 import { MappedPropertiesProps } from './types';
 
 export const MappedProperties = ({ properties, variant }: MappedPropertiesProps) => {
@@ -11,20 +10,16 @@ export const MappedProperties = ({ properties, variant }: MappedPropertiesProps)
 
                 return (
                     <React.Fragment key={propertyId}>
-                        <Render condition={variant === 'inline'}>
+                        {variant === 'inline' && (
                             <>
-                                <Render condition={idx !== 0}>
-                                    <Typography component="span">, </Typography>
-                                </Render>
+                                {idx !== 0 && <Typography component="span">, </Typography>}
                                 <Typography component="span" variant={'caption'}>
                                     {el}
                                 </Typography>
                             </>
-                        </Render>
+                        )}
 
-                        <Render condition={variant === 'block'}>
-                            <Typography component="div">{el}</Typography>
-                        </Render>
+                        {variant === 'block' && <Typography component="div">{el}</Typography>}
                     </React.Fragment>
                 );
             })}

diff --git a/src/components/PageWrapper/index.tsx b/src/components/PageWrapper/index.tsx
@@ -2,7 +2,6 @@ import { Link } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import { Breadcrumbs, Button, Container, Grid, Typography } from '@material-ui/core';
 import React from 'react';
 import { rem } from '../../utils/styling/rem';
-import { Render } from '../Render';
 import { PageWrapperProps } from './types';
 
 export const PageWrapper: React.FC<PageWrapperProps> = ({
@@ -14,7 +13,7 @@ export const PageWrapper: React.FC<PageWrapperProps> = ({
 }) => {
     return (
         <>
-            <Render condition={!!breadcrumbs && !!breadcrumbs.length}>
+            {!!breadcrumbs && !!breadcrumbs.length ? (
                 <Container maxWidth={containerMaxWidth}>
                     <Grid
                         container
@@ -57,7 +56,7 @@ export const PageWrapper: React.FC<PageWrapperProps> = ({
                         <Grid item>{headerSlot}</Grid>
                     </Grid>
                 </Container>
-            </Render>
+            ) : null}
             <Container maxWidth={containerMaxWidth}>{children}</Container>
         </>
     );

diff --git a/src/components/Render/index.tsx b/src/components/Render/index.tsx
diff --git a/src/components/Render/types.ts b/src/components/Render/types.ts
diff --git a/src/components/ResourceIconLink/index.tsx b/src/components/ResourceIconLink/index.tsx
@@ -2,7 +2,6 @@ import { Icon } from '@iconify/react';
 import { Grid, IconButton, Link as MuiLink, Tooltip, useTheme } from '@material-ui/core';
 import React from 'react';
 import { ICONS } from '../../icons/iconify-icons-mapping';
-import { Render } from '../Render';
 import { ResourceIconLinkProps } from './types';
 
 const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation();
@@ -18,15 +17,15 @@ export const ResourceIconLink = ({ tooltipTitle, icon, link }: ResourceIconLinkP
                     <Grid container alignItems={'center'} spacing={1}>
                         <Grid item>{tooltipTitle}</Grid>
                         <span> </span>
-                        <Render condition={!!link}>
+                        {!!link && (
                             <Grid item>
                                 <Icon
                                     icon={ICONS.NEW_WINDOW}
                                     color={theme.palette.grey['500']}
                                     width="15"
                                 />
                             </Grid>
-                        </Render>
+                        )}
                     </Grid>
                 }
             >