@ibm-adw/skill-toolkit/test-kit/client/src/components/info/InfoView.js

Developing your own skills with IBM Automation Digital Worker Skill Toolkit

/*
 Licensed Materials - Property of IBM
 5737-I23
 Copyright IBM Corp. 2019, 2020. All Rights Reserved.
 U.S. Government Users Restricted Rights:
 Use, duplication or disclosure restricted by GSA ADP Schedule
 Contract with IBM Corp.
 */
import React, { useCallback, useContext } from 'react';


import './InfoView.scss';

import { Button, DataTable, Loading } from 'carbon-components-react';
import { Restart32 } from '@carbon/icons-react';
import intl from 'react-intl-universal';
import { LocaleContext, useLocale } from '../../common/locale';

const {
    TableContainer,
    Table,
    TableHead,
    TableRow,
    TableBody,
    TableCell,
    TableHeader,
} = DataTable;

const AVAILABLE_CATEGORIES = [
    'act',
    'understand',
    'decide'
];

const AVAILABLE_LEVELS = [
    'tech_preview',
    'released'
];


const InfoView = (props) => {
    const localeContext = useContext(LocaleContext);
    const nlsLoaded = useLocale(() => [
        import(/* webpackChunkName: "nls" */ `./nls/${localeContext.currentLocale}.json`),
        import(/* webpackChunkName: "nls" */ `./nls/${localeContext.fallbackLocale}.json`)
    ]);

    const {
        lastUpdatedDate,
        skillMetaData
    } = props;

    const transformDataToRowsAndHeaders = useCallback(() => {
        const data = [
            skillMetaData.name,
            skillMetaData.description,
            skillMetaData.package_name,
            skillMetaData.package_version,
            skillMetaData.package_description,
            skillMetaData.category,
            skillMetaData.level
        ];
        const labels = [
            intl.get('info.LINE_LABEL_NAME'),
            intl.get('info.LINE_LABEL_DESCRIPTION'),
            intl.get('info.LINE_LABEL_NAME_PACK'),
            intl.get('info.LINE_LABEL_NAME_VERSION_PACK'),
            intl.get('info.LINE_LABEL_DESCRIPTION_PACK'),
            intl.get('info.LINE_LABEL_SKILL_CATEGORY'),
            intl.get('info.LINE_LABEL_SKILL_LEVEL')
        ];

        const validated = [
            '-',
            '-',
            '-',
            '-',
            '-',
            `${AVAILABLE_CATEGORIES.includes(data[5]) ? intl.get('info.VALID_VALUE') : intl.get('info.INVALID_VALUE', { name: intl.get('info.LINE_LABEL_SKILL_CATEGORY'), list: AVAILABLE_CATEGORIES.join(', ') })}`,
            `${AVAILABLE_LEVELS.includes(data[6]) ? intl.get('info.VALID_VALUE') : intl.get('info.INVALID_VALUE', { name: intl.get('info.LINE_LABEL_SKILL_LEVEL'), list: AVAILABLE_LEVELS.join(', ') })}`
        ];

        const headers = [
            {
                key: 'name',
                header: 'Key',
            },
            {
                key: 'value',
                header: 'Value',
            },
            {
                key: 'valid',
                header: '',
            },
        ];

        const rows = labels.map((label, i) => {
            return {
                id: label.split(' ').join('_'),
                name: label,
                value: data[i],
                valid: validated[i]
            };
        });

        return { rows, headers };
    },[ skillMetaData.category, skillMetaData.description, skillMetaData.level, skillMetaData.name, skillMetaData.package_description, skillMetaData.package_name, skillMetaData.package_version ]);

    const reloadPage = useCallback(() => {
        window.location.reload(true);
    }, []);


    if (nlsLoaded) {
        return (
            <div className='adw--test-content-info'>
                <h2 style={{ alignSelf: 'center', paddingBottom: '20px' }}>{intl.get('info.TITLE')}</h2>
                <DataTable
                    className='adw--test-content-info-table'
                    rows={transformDataToRowsAndHeaders().rows}
                    headers={transformDataToRowsAndHeaders().headers}
                    render={({ rows, headers, getHeaderProps }) => (
                        <TableContainer
                            className='adw--test-content-info-table'
                        >
                            <Table>
                                <TableHead>
                                    <TableRow>
                                        {headers.map(header => (
                                            <TableHeader {...getHeaderProps({ header })}>
                                                {header.header}
                                            </TableHeader>
                                        ))}
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                    {rows.map(row => (
                                        <TableRow key={row.id}>
                                            {row.cells.map(cell => (
                                                <TableCell key={cell.id}>{cell.value}</TableCell>
                                            ))}
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </TableContainer>
                    )}
                />
                <div className='adw--test-content-info-update'>
                    <p>{intl.get('app.LAST_UPDATED_ON_DATE', { updateDate: lastUpdatedDate })}</p>
                    <Button
                        className="adw--test-content-info-update-button"
                        size="default"
                        renderIcon={Restart32}
                        iconDescription="Reload after changes in skill implementation"
                        tooltipPosition="top"
                        tooltipAlignment="center"
                        onClick={reloadPage}
                        kind='ghost'
                        hasIconOnly
                    />
                </div>
            </div>
        );
    } else {
        return <div><Loading withOverlay={false} /></div>;
    }
};

export { InfoView };