[EPMDEDP-12426]: feat: Moves create button upper, updates table empty…

… result logic Change-Id: I1af627601ee2e21d8aefe35348e4bdfe2047b7c7
epam · Aug 8, 2023 · 72ee99f · 72ee99f
1 parent de6dbd4
commit 72ee99f
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 170 deletions.
diff --git a/src/components/PageWrapper/index.tsx b/src/components/PageWrapper/index.tsx
@@ -14,7 +14,13 @@ export const PageWrapper: React.FC<PageWrapperProps> = ({
     return (
         <>
             <Render condition={!!breadcrumbs && !!breadcrumbs.length}>
-                <Grid container spacing={1} alignItems={'center'} justifyContent={'space-between'}>
+                <Grid
+                    container
+                    spacing={1}
+                    alignItems={'center'}
+                    justifyContent={'space-between'}
+                    style={{ marginTop: rem(20) }}
+                >
                     <Grid item>
                         <Grid container spacing={2} alignItems={'center'}>
                             <Grid item>

diff --git a/src/components/Table/components/TableBody/index.tsx b/src/components/Table/components/TableBody/index.tsx
@@ -115,7 +115,7 @@ export const TableBody = ({
                                                         align={textAlign || 'left'}
                                                         style={{
                                                             padding: `${theme.typography.pxToRem(
-                                                                8
+                                                                12
                                                             )} ${theme.typography.pxToRem(16)}`,
                                                         }}
                                                     >

diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
@@ -60,7 +60,13 @@ export const Table = <DataType extends unknown>({
     });
 
     const rowCount = readyData?.length || 0;
-    const hasEmptyResult = !!filterFunction && !readyData?.length;
+    const hasEmptyResult = React.useMemo(() => {
+        if (!data || !readyData) {
+            return;
+        }
+
+        return !!data.length && !readyData?.length;
+    }, [data, readyData]);
 
     return (
         <Paper variant={'outlined'}>

diff --git a/src/pages/edp-cdpipeline-list/view.tsx b/src/pages/edp-cdpipeline-list/view.tsx
@@ -1,11 +1,13 @@
+import { Icon } from '@iconify/react';
 import { SectionBox, SectionFilterHeader } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
-import { Grid, Typography } from '@material-ui/core';
+import { Button, Grid, Typography } from '@material-ui/core';
 import React from 'react';
 import { DocLink } from '../../components/DocLink';
 import { PageWrapper } from '../../components/PageWrapper';
 import { URL_EDP_HEADLAMP_USER_GUIDE_CD_PIPELINES } from '../../constants/urls';
+import { ICONS } from '../../icons/iconify-icons-mapping';
 import { EDPCDPipelineKubeObject } from '../../k8s/EDPCDPipeline';
-import { CreateResourceFab } from '../../providers/Dialog/components/CreateResourceFab';
+import { useDialogContext } from '../../providers/Dialog/hooks';
 import { ResourceActionListContextProvider } from '../../providers/ResourceActionList';
 import { FORM_MODES } from '../../types/forms';
 import { CDPipelineActionsMenu } from '../../widgets/CDPipelineActionsMenu';
@@ -16,37 +18,47 @@ import { CDPipelineList } from './components/CDPipelineList';
 export const PageView = () => {
     const [items, error] = EDPCDPipelineKubeObject.useList();
 
+    const { setDialog } = useDialogContext();
+
     const createEditCDPipelineDialogForwardedProps: CreateEditCDPipelineDialogForwardedProps =
         React.useMemo(() => ({ mode: FORM_MODES.CREATE }), []);
 
     return (
         <PageWrapper>
-            <SectionBox
-                title={
-                    <SectionFilterHeader
-                        // @ts-ignore
-                        title={
-                            <Grid container alignItems={'center'} spacing={1}>
-                                <Grid item>
-                                    <Typography variant={'h5'}>Environments</Typography>
-                                </Grid>
-                                <Grid item>
-                                    <DocLink href={URL_EDP_HEADLAMP_USER_GUIDE_CD_PIPELINES} />
-                                </Grid>
+            <SectionBox>
+                <SectionFilterHeader
+                    // @ts-ignore
+                    title={
+                        <Grid container alignItems={'center'} spacing={1}>
+                            <Grid item>
+                                <Typography variant={'h5'}>Environments</Typography>
+                            </Grid>
+                            <Grid item>
+                                <DocLink href={URL_EDP_HEADLAMP_USER_GUIDE_CD_PIPELINES} />
                             </Grid>
-                        }
-                        headerStyle="label"
-                    />
-                }
-            >
+                        </Grid>
+                    }
+                    actions={[
+                        <Button
+                            startIcon={<Icon icon={ICONS.PLUS} />}
+                            color={'primary'}
+                            variant={'contained'}
+                            onClick={() =>
+                                setDialog({
+                                    modalName: CREATE_EDIT_CD_PIPELINE_DIALOG_NAME,
+                                    forwardedProps: createEditCDPipelineDialogForwardedProps,
+                                })
+                            }
+                        >
+                            create
+                        </Button>,
+                    ]}
+                    headerStyle="label"
+                />
                 <ResourceActionListContextProvider>
                     <CDPipelineList CDPipelines={items} error={error} />
                     <CDPipelineActionsMenu />
                 </ResourceActionListContextProvider>
-                <CreateResourceFab
-                    modalName={CREATE_EDIT_CD_PIPELINE_DIALOG_NAME}
-                    forwardedProps={createEditCDPipelineDialogForwardedProps}
-                />
             </SectionBox>
         </PageWrapper>
     );

diff --git a/src/pages/edp-cluster-list/view.tsx b/src/pages/edp-cluster-list/view.tsx
@@ -1,10 +1,12 @@
+import { Icon } from '@iconify/react';
 import { SectionBox, SectionFilterHeader } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
-import { Grid, Typography } from '@material-ui/core';
+import { Button, Grid, Typography } from '@material-ui/core';
 import React from 'react';
 import { PageWrapper } from '../../components/PageWrapper';
+import { ICONS } from '../../icons/iconify-icons-mapping';
 import { SecretKubeObject } from '../../k8s/Secret';
 import { ARGO_CD_SECRET_LABEL_SECRET_TYPE } from '../../k8s/Secret/labels';
-import { CreateResourceFab } from '../../providers/Dialog/components/CreateResourceFab';
+import { useDialogContext } from '../../providers/Dialog/hooks';
 import { CREATE_CLUSTER_DIALOG_NAME } from '../../widgets/CreateCluster/constants';
 import { routeEDPConfiguration } from '../edp-configuration-list/route';
 import { ClusterList } from './components/ClusterList';
@@ -14,6 +16,8 @@ export const PageView = () => {
         labelSelector: `${ARGO_CD_SECRET_LABEL_SECRET_TYPE}=cluster`,
     });
 
+    const { setDialog } = useDialogContext();
+
     return (
         <PageWrapper
             breadcrumbs={[
@@ -28,23 +32,33 @@ export const PageView = () => {
                 },
             ]}
         >
-            <SectionBox
-                title={
-                    <SectionFilterHeader
-                        // @ts-ignore
-                        title={
-                            <Grid container alignItems={'center'} spacing={1}>
-                                <Grid item>
-                                    <Typography variant={'h5'}>Clusters</Typography>
-                                </Grid>
+            <SectionBox>
+                <SectionFilterHeader
+                    // @ts-ignore
+                    title={
+                        <Grid container alignItems={'center'} spacing={1}>
+                            <Grid item>
+                                <Typography variant={'h5'}>Clusters</Typography>
                             </Grid>
-                        }
-                        headerStyle="label"
-                    />
-                }
-            >
+                        </Grid>
+                    }
+                    headerStyle="label"
+                    actions={[
+                        <Button
+                            startIcon={<Icon icon={ICONS.PLUS} />}
+                            color={'primary'}
+                            variant={'contained'}
+                            onClick={() =>
+                                setDialog({
+                                    modalName: CREATE_CLUSTER_DIALOG_NAME,
+                                })
+                            }
+                        >
+                            create
+                        </Button>,
+                    ]}
+                />
                 <ClusterList clusterSecrets={items} error={error} />
-                <CreateResourceFab modalName={CREATE_CLUSTER_DIALOG_NAME} />
             </SectionBox>
         </PageWrapper>
     );

diff --git a/src/pages/edp-component-list/view.tsx b/src/pages/edp-component-list/view.tsx
@@ -1,15 +1,15 @@
+import { Icon } from '@iconify/react';
 import { SectionBox, SectionFilterHeader } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
-import { Box, Grid, Typography } from '@material-ui/core';
+import { Box, Button, Grid, MenuItem, Select, Typography } from '@material-ui/core';
 import React from 'react';
-import { useForm } from 'react-hook-form';
 import { DocLink } from '../../components/DocLink';
 import { PageWrapper } from '../../components/PageWrapper';
 import { codebaseTypeSelectOptions } from '../../configs/select-options/codebaseTypeSelectOptions';
 import { CODEBASE_TYPES } from '../../constants/codebaseTypes';
 import { URL_EDP_HEADLAMP_USER_GUIDE_APPLICATIONS } from '../../constants/urls';
+import { ICONS } from '../../icons/iconify-icons-mapping';
 import { EDPCodebaseKubeObject } from '../../k8s/EDPCodebase';
-import { CreateResourceFab } from '../../providers/Dialog/components/CreateResourceFab';
-import { FormSelect } from '../../providers/Form/components/FormSelect';
+import { useDialogContext } from '../../providers/Dialog/hooks';
 import { ResourceActionListContextProvider } from '../../providers/ResourceActionList';
 import { FORM_MODES } from '../../types/forms';
 import { rem } from '../../utils/styling/rem';
@@ -21,12 +21,7 @@ import { ComponentList } from './components/ComponentList';
 export const PageView = () => {
     const [type, setType] = React.useState<CODEBASE_TYPES>(CODEBASE_TYPES.ALL);
     const [items, error] = EDPCodebaseKubeObject.useList();
-
-    const {
-        register,
-        control,
-        formState: { errors },
-    } = useForm();
+    const { setDialog } = useDialogContext();
 
     const filteredComponents = React.useMemo(
         () => (type !== CODEBASE_TYPES.ALL ? items.filter(el => el.spec.type === type) : items),
@@ -38,51 +33,70 @@ export const PageView = () => {
 
     return (
         <PageWrapper>
-            <SectionBox
-                title={
-                    <SectionFilterHeader
-                        // @ts-ignore
-                        title={
-                            <Grid container alignItems={'center'} spacing={1}>
-                                <Grid item>
-                                    <Typography variant={'h5'}>Components</Typography>
+            <SectionBox>
+                <SectionFilterHeader
+                    // @ts-ignore
+                    title={
+                        <Grid container alignItems={'center'} spacing={1}>
+                            <Grid item>
+                                <Typography variant={'h5'}>Components</Typography>
+                            </Grid>
+                            <Grid item>
+                                <DocLink href={URL_EDP_HEADLAMP_USER_GUIDE_APPLICATIONS} />
+                            </Grid>
+                        </Grid>
+                    }
+                    headerStyle={'label'}
+                    actions={[
+                        <Box>
+                            <Grid container spacing={1}>
+                                <Grid item style={{ minWidth: rem(200) }}>
+                                    <Select
+                                        onChange={e => setType(e.target.value as CODEBASE_TYPES)}
+                                        defaultValue={CODEBASE_TYPES.ALL}
+                                        fullWidth
+                                    >
+                                        {codebaseTypeSelectOptions.map(
+                                            ({ label, value, disabled = false }, idx) => {
+                                                const key = `${label}::${idx}`;
+
+                                                return (
+                                                    <MenuItem
+                                                        value={value}
+                                                        key={key}
+                                                        disabled={disabled}
+                                                    >
+                                                        {label}
+                                                    </MenuItem>
+                                                );
+                                            }
+                                        )}
+                                    </Select>
                                 </Grid>
                                 <Grid item>
-                                    <DocLink href={URL_EDP_HEADLAMP_USER_GUIDE_APPLICATIONS} />
+                                    <Button
+                                        startIcon={<Icon icon={ICONS.PLUS} />}
+                                        color={'primary'}
+                                        variant={'contained'}
+                                        onClick={() =>
+                                            setDialog({
+                                                modalName: CREATE_EDIT_CODEBASE_DIALOG_NAME,
+                                                forwardedProps:
+                                                    createEditCodebaseDialogForwardedProps,
+                                            })
+                                        }
+                                    >
+                                        create
+                                    </Button>
                                 </Grid>
                             </Grid>
-                        }
-                        headerStyle={'label'}
-                        actions={[
-                            <Box>
-                                <Grid container spacing={1}>
-                                    <Grid item style={{ minWidth: rem(200), marginBottom: rem(6) }}>
-                                        <FormSelect
-                                            {...register('type', {
-                                                onChange: ({ target: { value } }) => setType(value),
-                                            })}
-                                            control={control}
-                                            errors={errors}
-                                            name={'type'}
-                                            label={'Type'}
-                                            options={codebaseTypeSelectOptions}
-                                            defaultValue={CODEBASE_TYPES.ALL}
-                                        />
-                                    </Grid>
-                                </Grid>
-                            </Box>,
-                        ]}
-                    />
-                }
-            >
+                        </Box>,
+                    ]}
+                />
                 <ResourceActionListContextProvider>
                     <ComponentList components={filteredComponents} error={error} />
                     <CodebaseActionsMenu />
                 </ResourceActionListContextProvider>
-                <CreateResourceFab
-                    modalName={CREATE_EDIT_CODEBASE_DIALOG_NAME}
-                    forwardedProps={createEditCodebaseDialogForwardedProps}
-                />
             </SectionBox>
         </PageWrapper>
     );