feat: Make configuration pages look similar (#192)

src/components/EmptyList/index.tsx

@@ -32,7 +32,6 @@ export const EmptyList = ({
           width: '100%',
           border: `1px dashed ${theme.palette.divider}`,
           borderRadius: theme.typography.pxToRem(4),
-          minHeight: theme.typography.pxToRem(470),
         }}
       >
         <Box sx={{ mb: theme.typography.pxToRem(16) }}>

src/pages/edp-configuration/components/ConfigurationPageContent/index.tsx

@@ -0,0 +1,89 @@
+import { Icon } from '@iconify/react';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  IconButton,
+  Stack,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import React from 'react';
+import { LearnMoreLink } from '../../../../components/LearnMoreLink';
+import { PageWithSubMenu } from '../../../../components/PageWithSubMenu';
+import { PageWrapper } from '../../../../components/PageWrapper';
+import { ICONS } from '../../../../icons/iconify-icons-mapping';
+import { menu } from '../../menu';
+import { ConfigurationPageContentProps } from './types';
+
+export const ConfigurationPageContent = ({
+  creationForm,
+  children,
+  pageDescription,
+}: ConfigurationPageContentProps) => {
+  const theme = useTheme();
+
+  const { label, description, docLink } = pageDescription;
+
+  return (
+    <>
+      <PageWithSubMenu list={menu} title="Configuration">
+        <PageWrapper containerMaxWidth={'xl'}>
+          <Grid container spacing={3}>
+            <Grid item xs={12}>
+              <Typography fontSize={theme.typography.pxToRem(28)} color="primary.dark" gutterBottom>
+                {label}
+              </Typography>
+              {description && (
+                <Typography variant={'body1'}>
+                  {description} {docLink && <LearnMoreLink url={docLink} />}
+                </Typography>
+              )}
+            </Grid>
+            <Grid item xs={12}>
+              <Stack direction="row" justifyContent="flex-end">
+                <Button
+                  variant="contained"
+                  onClick={creationForm.onOpen}
+                  disabled={creationForm.isDisabled}
+                  startIcon={<Icon icon={ICONS.PLUS} width={20} />}
+                >
+                  {creationForm.label || 'add'}
+                </Button>
+              </Stack>
+            </Grid>
+            <Grid item xs={12}>
+              {children}
+            </Grid>
+          </Grid>
+        </PageWrapper>
+      </PageWithSubMenu>
+      {creationForm && (
+        <Dialog
+          open={creationForm.isOpen}
+          maxWidth="md"
+          fullWidth
+          onClose={(e, reason) => reason !== 'backdropClick' && creationForm.onClose()}
+        >
+          <DialogTitle component="div">
+            <Stack
+              direction="row"
+              spacing={2}
+              justifyContent="space-between"
+              alignItems="center"
+              sx={{ width: '100%' }}
+            >
+              <Typography variant="h6">{creationForm.label}</Typography>
+              <IconButton onClick={creationForm.onClose}>
+                <Icon icon={ICONS.CROSS} width={24} />
+              </IconButton>
+            </Stack>
+          </DialogTitle>
+          <DialogContent>{creationForm.component}</DialogContent>
+        </Dialog>
+      )}
+    </>
+  );
+};

src/pages/edp-configuration/components/ConfigurationPageContent/types.ts

@@ -0,0 +1,14 @@
+import { PageDescription } from '../../../../types/pages';
+
+export interface ConfigurationPageContentProps {
+  creationForm: {
+    component: React.ReactNode;
+    isOpen: boolean;
+    onClose: () => void;
+    onOpen: () => void;
+    label?: string;
+    isDisabled?: boolean;
+  };
+  children: React.ReactNode;
+  pageDescription: PageDescription;
+}

src/pages/edp-configuration/pages/edp-argocd-integration/constants.ts

@@ -1,8 +1,10 @@
+import { EDP_OPERATOR_GUIDE } from '../../../../constants/urls';
 import { PageDescription } from '../../../../types/pages';
 
 export const ARGOCD_INTEGRATION_PAGE_DESCRIPTION: PageDescription = {
   id: 'argocd-integration',
   label: 'Argo CD',
   description: 'Configure Argo CD integration.',
   routePath: '/configuration/argocd-integration',
+  docLink: EDP_OPERATOR_GUIDE.ARGO_CD.url,
 };