@ibm-adw/skill-toolkit/test-kit/client/src/components/config/panel/PanelView.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, useState } from 'react';

import './PanelView.scss';

import {
    CodeSnippet,
    Icon,
    InlineNotification,
    Link,
    Loading,
    NotificationActionButton
} from 'carbon-components-react';

import {
    iconData,
    iconChevronRight,
    iconChevronLeft
} from 'carbon-icons';

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


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

    const {
        displayFormData,
        formData,
        validationError,
        specSchema,
        displayPanel,
        setDisplayPanel
    } = props;

    const [ renderError, setRenderError ] = useState(true);

    const renderStatus = useCallback(() => {
        if (specSchema === 'undefined' || specSchema === '{}') {
            return (
                <InlineNotification
                    className={'adw--inline-notif'}
                    hideCloseButton={true}
                    kind="warning"
                    notificationType="inline"
                    role="alert"
                    title={intl.get('panel.STATUS_TITLE_WARNING')}//'Submitted Data Validation Warning'
                    subtitle={intl.get('panel.STATUS_SUBTITLE_WARNING', { specSchema: specSchema })} //{`config_schema is ${specSchema}.`}
                    lowContrast={true}
                />
            );

        } else {
            return (
                <InlineNotification
                    actions={validationError ? <NotificationActionButton
                        onClick={() => setRenderError(!renderError)}>{renderError ? intl.get('panel.BUTTON_HIDE_ERROR') : intl.get('panel.BUTTON_SHOW_ERROR')}</NotificationActionButton> : ''}
                    className={'adw--inline-notif'}
                    hideCloseButton={true}
                    kind={`${!validationError ? 'success' : 'error'}`}
                    notificationType="inline"
                    role="alert"
                    title={`${!validationError ? intl.get('panel.STATUS_TITLE') : intl.get('panel.STATUS_TITLE_ERROR')}`}
                    lowContrast={true}
                />
            );

        }
    },[ renderError, specSchema, validationError ]);

    const renderHeader = useCallback((title) => {
        return (
            <div className='adw--run-header' id='successRunNotification'>
                <Icon
                    icon={iconData}
                    className='adw--run-header__icon adw--run-data__icon'
                    description=''
                    height='16px'
                    width='16px'
                />
                {title}
            </div>
        );
    },[]);

    const renderPanel = useCallback(() => {
        return (
            <div className='adw--test-content-config-formdata-content'>
                {renderStatus()}
                {validationError && renderError ?
                    <CodeSnippet
                        type='multi'
                        className='adw--run--snippet adw--test-content-config-formdata-snippet-error'
                    >
                        {validationError}
                    </CodeSnippet>
                    : ''
                }
                <div className='adw--run-status__header'>
                    {renderHeader(intl.get('panel.PANEL_HEADER_DATA'))}
                </div>
                <CodeSnippet
                    type='multi'
                    className='adw--run--snippet'
                >
                    {formData}
                </CodeSnippet>
                <div className='adw--run-status__header'>
                    {renderHeader(intl.get('panel.PANEL_HEADER_SCHEMA'))}
                </div>
                <CodeSnippet
                    type='multi'
                    className='adw--run--snippet'
                >
                    {specSchema}
                </CodeSnippet>
            </div>
        );
    }, [ formData, renderError, renderHeader, renderStatus, specSchema, validationError ]);

    if (nlsLoaded) {
        return (
            <div
                className={`adw--test-content-config-left-panel ${displayFormData && formData && displayPanel ? 'adw--test-content-config-left-panel-open' : ''}`}>
                {displayFormData && formData ?
                    <div className='adw--test-content-config-formdata-wrapper'>
                        <div
                            className={`adw--test-content-config-formdata ${displayPanel ? 'adw--test-content-config-formdata-open' : ''}`}>
                            {displayPanel ?
                                renderPanel()
                                : ''
                            }
                        </div>
                        <Link
                            className="adw--test-content-config-link"
                            href={null}
                            disabled={false}
                            onClick={() => {
                                setDisplayPanel(!displayPanel);
                            }}
                        >
                            <Icon
                                icon={displayPanel ? iconChevronLeft : iconChevronRight}
                                className='adw--run-status__icon adw--run-success__icon'
                                description=''
                                height='16px'
                                width='16px'
                            />
                        </Link>
                    </div>
                    : ''
                }
            </div>
        );
    } else {
        return <div><Loading withOverlay={false} /></div>;
    }
};

export { PanelView };