@ibm-adw/skill-toolkit/test-kit/client/src/components/main/MainView.js

Developing your own skills with IBM Automation Digital Worker Skill Toolkit

/*
 Licensed Materials - Property of IBM
 5737-I23
 Copyright IBM Corp. 2019. 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 './MainView.scss';

import { CatalogView } from '../catalog/CatalogView';
import { ConfigView } from '../config/ConfigView';
import { InfoView } from '../info/InfoView';
import { Loading, Tile } from 'carbon-components-react';

import intl from 'react-intl-universal';
import { LocaleContext, useLocale } from '../../common/locale';

const SWITCHER_VALUES = {
    INFO: 'info',
    CATALOG: 'catalog',
    README: 'readme'
};

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

    const {
        switcher,
        isSidePanelExpanded,
        setErrorToaster,
        setIsSidePanelExpanded,
        lastUpdatedDate,
        skillMetaData,
        serverUrl
    } = props;


    const renderAppropriateHelper = useCallback(() => {
        let content;

        if (switcher === SWITCHER_VALUES.README) {
            content = (
                <div className='adw--test-content-readme'>
                    <h2>{intl.get('main.DOCUMENTATION_TITLE')}</h2>
                    <iframe title='ReadMe' className="adw--test-content-readme-iframe" src={`${serverUrl}/documentation`}>
                        <p>{intl.get('errors.IFRAME')}</p>
                    </iframe>
                </div>
            );
        } else if (switcher === SWITCHER_VALUES.INFO) {
            content = (
                <InfoView lastUpdatedDate={lastUpdatedDate} skillMetaData={skillMetaData}/>
            );
        } else if (switcher === SWITCHER_VALUES.CATALOG) {
            content = (
                <CatalogView/>
            );
        } else {
            content = <h4>{intl.get('errors.UNKNOWN_SWITCHER', { switcher: switcher })}</h4>;
        }
        return content;
    }, [ lastUpdatedDate, serverUrl, skillMetaData, switcher ]);

    if (nlsLoaded) {
        return (
            <div className='adw--test-content-main-columns'>
                <div
                    className={`adw--test-content-main-left-column ${isSidePanelExpanded ? 'adw--test-content-main-left-column-right-open' : ''}`}>
                    <ConfigView
                        displayFormData={!isSidePanelExpanded}
                        setIsSidePanelExpanded={setIsSidePanelExpanded}
                        serverUrl={serverUrl}
                        setErrorToaster={setErrorToaster}
                    />
                </div>
                <div
                    className={`adw--test-content-main-right-column ${isSidePanelExpanded ? 'adw--test-content-main-right-column-open' : ''}`}>
                    {isSidePanelExpanded ?
                        <Tile className='adw--test-content-main-tile'>
                            {renderAppropriateHelper()}
                        </Tile>
                        : ''
                    }
                </div>

            </div>
        );
    } else {
        return <div><Loading withOverlay={false} /></div>;
    }
};

export { MainView };