[EPMDEDP-12446]: feat: Update stage page, add info columns component …

…which can be reused in resource pages

Change-Id: I40a924569336c88acd6d9a4a47f5092844e82658

src/components/CreateItemAccordion/index.tsx

@@ -20,7 +20,6 @@ export const CreateItemAccordion: React.FC<CreateItemAccordionProps> = ({
     children,
 }) => {
     const theme = useTheme();
-    console.log(theme);
     const classes = useStyles(isExpanded, disabled);
 
     return (

src/components/InfoColumns/index.tsx

@@ -0,0 +1,112 @@
+import { Icon } from '@iconify/react';
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    CircularProgress,
+    Grid,
+    GridSize,
+    Typography,
+} from '@material-ui/core';
+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 { Render } from '../Render';
+import { useStyles } from './styles';
+import { InfoColumnsAccordionProps, InfoColumnsProps } from './types';
+
+const toShowValueFromLocalStorage: 'true' | 'false' = LOCAL_STORAGE_SERVICE.getItem(
+    LS_KEY_SHOW_INFO_COLUMNS_BY_DEFAULT
+);
+
+const InfoColumnsRenderer = ({ infoRows }: InfoColumnsProps) => {
+    return (
+        <Grid container spacing={4}>
+            {infoRows ? (
+                infoRows.map((row, index) => (
+                    <Grid item xs={12} key={`row::${index}`}>
+                        <Grid container spacing={2}>
+                            {row.map(({ label, text, icon, columnXs = 2 }, index) => (
+                                <React.Fragment key={`column::${index}`}>
+                                    <Render condition={!!label && !!text}>
+                                        <Grid item xs={columnXs as GridSize}>
+                                            <Typography variant={'body2'} gutterBottom>
+                                                {label}
+                                            </Typography>
+                                            <Grid container spacing={1} alignItems={'center'}>
+                                                <Render condition={!!icon}>
+                                                    <Grid item>
+                                                        <UseSpriteSymbol
+                                                            name={icon}
+                                                            width={20}
+                                                            height={20}
+                                                        />
+                                                    </Grid>
+                                                </Render>
+                                                <Grid item>
+                                                    <Typography
+                                                        variant={'caption'}
+                                                        style={{ lineHeight: 1 }}
+                                                    >
+                                                        {text}
+                                                    </Typography>
+                                                </Grid>
+                                            </Grid>
+                                        </Grid>
+                                    </Render>
+                                </React.Fragment>
+                            ))}
+                        </Grid>
+                    </Grid>
+                ))
+            ) : (
+                <CircularProgress style={{ display: 'block', margin: '0 auto' }} />
+            )}
+        </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={0}
+            expanded={toShow}
+            onChange={handleChange('info_columns')}
+            className={classes.accordionRoot}
+        >
+            <AccordionSummary
+                expandIcon={<Icon icon={toShow ? ICONS.MINUS : ICONS.PLUS} />}
+                className={classes.accordionSummary}
+            >
+                <Typography>{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/styles.ts

@@ -0,0 +1,21 @@
+import { alpha, makeStyles } from '@material-ui/core';
+import { rem } from '../../utils/styling/rem';
+
+export const useStyles = makeStyles(theme => {
+    return {
+        accordionRoot: {
+            border: `1px dashed ${alpha(theme.palette.common.black, 0.2)}`,
+
+            '&::before': {
+                display: 'none',
+            },
+        },
+        accordionSummary: {
+            minHeight: 'auto',
+        },
+        root: {
+            border: `1px dashed ${alpha(theme.palette.common.black, 0.2)}`,
+            padding: rem(10),
+        },
+    };
+});

src/components/InfoColumns/types.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export interface InfoColumn {
+    label: string;
+    text: string | React.ReactElement;
+    icon?: string;
+    columnXs?: number;
+}
+
+export type InfoRow = InfoColumn[];
+
+export interface InfoColumnsProps {
+    infoRows: InfoRow[];
+}
+
+export interface InfoColumnsAccordionProps extends InfoColumnsProps {
+    title: string;
+}

src/icons/iconify-icons-mapping.ts

@@ -1,6 +1,7 @@
 export enum ICONS {
     PENCIL = 'ci:edit',
     PLUS = 'akar-icons:plus',
+    MINUS = 'akar-icons:minus',
     DOCUMENT_ADD = 'carbon:document-add',
     THREE_DOTS = 'mi:options-vertical',
     ARROW_DOWN = 'dashicons:arrow-down-alt2',

src/pages/edp-component-details/hooks/useInfoRows.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { InfoRow } from '../../../components/InfoColumns/types';
+import {
+    BUILD_TOOL_ICON_MAPPING,
+    CI_TOOL_ICON_MAPPING,
+    FRAMEWORK_ICON_MAPPING,
+    LANGUAGE_ICON_MAPPING,
+} from '../../../configs/icon-mappings';
+import { CI_TOOLS } from '../../../constants/ciTools';
+import { CODEBASE_VERSIONING_TYPES } from '../../../constants/codebaseVersioningTypes';
+import { RESOURCE_ICON_NAMES } from '../../../icons/sprites/Resources/names';
+import { EDPCodebaseKubeObjectInterface } from '../../../k8s/EDPCodebase/types';
+import { capitalizeFirstLetter } from '../../../utils/format/capitalizeFirstLetter';
+import { getCodebaseMappingByCodebaseType } from '../../../utils/getCodebaseMappingByCodebaseType';
+
+export const useInfoRows = (component: EDPCodebaseKubeObjectInterface): InfoRow[] | null => {
+    return React.useMemo(() => {
+        if (!component) {
+            return null;
+        }
+        const {
+            spec: {
+                ciTool,
+                lang,
+                framework,
+                buildTool,
+                type,
+                versioning: { type: versioningType },
+                strategy,
+                gitUrlPath,
+                deploymentScript,
+            },
+        } = component;
+        const codebaseMapping = getCodebaseMappingByCodebaseType(type);
+
+        return [
+            [
+                {
+                    label: 'Language',
+                    text: codebaseMapping?.[lang]?.language?.name || lang,
+                    icon: LANGUAGE_ICON_MAPPING?.[lang?.toLowerCase()] || RESOURCE_ICON_NAMES.OTHER,
+                },
+                {
+                    label: 'Framework',
+                    text: codebaseMapping?.[lang]?.frameworks?.[framework]?.name || framework,
+                    icon:
+                        FRAMEWORK_ICON_MAPPING?.[framework?.toLowerCase()] ||
+                        RESOURCE_ICON_NAMES.OTHER,
+                },
+                {
+                    label: 'Build Tool',
+                    text: codebaseMapping?.[lang]?.buildTools?.[buildTool]?.name || buildTool,
+                    icon:
+                        BUILD_TOOL_ICON_MAPPING?.[buildTool?.toLowerCase()] ||
+                        RESOURCE_ICON_NAMES.OTHER,
+                },
+                {
+                    label: 'CI Tool',
+                    text: capitalizeFirstLetter(ciTool),
+                    icon:
+                        CI_TOOL_ICON_MAPPING?.[ciTool?.toLowerCase()] || RESOURCE_ICON_NAMES.OTHER,
+                },
+                ...(ciTool === CI_TOOLS.JENKINS && !!component?.spec.jenkinsSlave
+                    ? [
+                          {
+                              label: 'Jenkins Agent',
+                              text: component?.spec.jenkinsSlave,
+                          },
+                      ]
+                    : []),
+            ],
+            [
+                {
+                    label: 'Versioning Type',
+                    text: versioningType,
+                },
+                ...(versioningType === CODEBASE_VERSIONING_TYPES.EDP
+                    ? [
+                          {
+                              label: 'Versioning Start From',
+                              text: component?.spec.versioning.startFrom,
+                          },
+                      ]
+                    : []),
+                {
+                    label: 'Strategy',
+                    text: strategy,
+                },
+                {
+                    label: 'Git URL Path',
+                    text: gitUrlPath,
+                },
+                {
+                    label: 'Deployment Script',
+                    text: deploymentScript,
+                },
+            ],
+        ];
+    }, [component]);
+};

src/pages/edp-component-details/styles.ts

@@ -2,12 +2,6 @@ import { makeStyles } from '@material-ui/core';
 import { rem } from '../../utils/styling/rem';
 
 export const useStyles = makeStyles(() => ({
-    defaultValuesBoard: {
-        padding: rem(10),
-        border: '1px solid rgba(0,0,0,0.1)',
-        margin: `${rem(20)} 0`,
-        backgroundColor: 'rgba(0,0,0,0.03)',
-    },
     labelChip: {
         height: rem(20),
         lineHeight: 1,