/* * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ import React from 'react'; import { Container, Header, Popover, ColumnLayout, ExpandableSection, SpaceBetween } from '@awsui/components-react'; import {capitalize} from "../../resources/main"; import AllViewerAttributes from "../ui_attributes/AllViewerAttributes"; const ItemDetails = (props) => { let items = []; items = props.items.map((item, index) => { return <Container header={'Record ' + (index + 1)}> <AllViewerAttributes schema={props.schema} schemas={props.schemas} item={item} hideEmpty dataAll={props.allData ? props.allData : undefined} /> </Container> }); return items; } const SummaryItem = (props) => { if(!props.item){ return (<h3>{'-'}</h3>); } return ( <Popover position="top" size="small" triggerType="custom" content={ <ArrayToList list={props.item} displayKey={props.displayKey}/> } > <h3>{props.item.length === 0 ? '-' : props.item.length}</h3> </Popover> ) } const SummaryEntity = (props) => { return ( <Container className="custom-dashboard-container" header={ <Header variant="h2"> <SpaceBetween size={'xl'} direction={'vertical'}> {capitalize(props.entityName)} </SpaceBetween> </Header> } > <ColumnLayout borders="vertical" columns={3}> <SpaceBetween size={'s'} direction={'vertical'}> <SpaceBetween size={'s'} direction={'horizontal'}> <h3>Create</h3> <SummaryItem item={props.entityItem['Create']} displayKey={props.entityName === 'application' ? 'app' + "_name" : props.entityName + "_name"} /> </SpaceBetween> {props.entityItem['Create'].length > 0 ? <ExpandableSection header={'Details'}> <ItemDetails items={props.entityItem['Create']} schemas={props.schemas} schema={props.schemas[props.entityName]} allData={props.dataAll ? props.dataAll : undefined} /> </ExpandableSection> : undefined } </SpaceBetween> <SpaceBetween size={'s'} direction={'vertical'}> <SpaceBetween size={'s'} direction={'horizontal'}> <h3>Update</h3> <SummaryItem item={props.entityItem['Update']} displayKey={props.entityName === 'application' ? 'app' + "_name" : props.entityName + "_name"} /> </SpaceBetween> {props.entityItem['Update'].length > 0 ? <ExpandableSection header={'Details'}> <ItemDetails items={props.entityItem['Update']} schemas={props.schemas} schema={props.schemas[props.entityName]} allData={props.dataAll ? props.dataAll : undefined} /> </ExpandableSection> : undefined } </SpaceBetween> <SpaceBetween size={'s'} direction={'vertical'}> <SpaceBetween size={'s'} direction={'horizontal'}> <h3>No Update</h3> <SummaryItem item={props.entityItem['NoChange']} displayKey={props.entityName === 'application' ? 'app' + "_name" : props.entityName + "_name"} /> </SpaceBetween> {props.entityItem['NoChange'].length > 0 ? <ExpandableSection header={'Details'}> <ItemDetails items={props.entityItem['NoChange']} schemas={props.schemas} schema={props.schemas[props.entityName]} allData={props.dataAll ? props.dataAll : undefined} /> </ExpandableSection> : undefined } </SpaceBetween> </ColumnLayout> </Container> ) } const ArrayToList = (props) => { return ( <div>{props.list.map((item, i) => <p key={item[props.displayKey]}>{item[props.displayKey]}</p>)}</div> // `.map()` creates/returns a new array from calling a function on every element in the array it's called on ) } function getSummaries(items, schemas, dataAll) { let summaries = []; for (const entity in items.entities) { summaries.push(<SummaryEntity key={entity} entityName={entity} entityItem={items.entities[entity]} schemas={schemas} dataAll={dataAll}/>); } return summaries; } // Attribute Display message content const ImportOverview = (props) => { return <Container className="custom-dashboard-container" header={ <Header variant="h2" description="The following records will be amended or created on Upload, please ensure you are happy with this before continuing."> Upload Overview </Header> } > <SpaceBetween size={'l'} direction={'vertical'}> {getSummaries(props.items, props.schemas, props.dataAll)} </SpaceBetween> </Container> }; export default ImportOverview;