From 8763c02eb652e865343445e84d3c4228211a5eba Mon Sep 17 00:00:00 2001
From: Maxym Borodenko <m.borodenko@aimprosoft.com>
Date: Mon, 20 Aug 2018 16:20:00 +0300
Subject: [PATCH] Display an error if descriptor has not been uploaded

---
 src/ui/catalog/Links.tsx                      |  2 +-
 src/ui/catalog/descriptor/DescriptorCard.tsx  | 14 +++++-
 .../steps/import/index.tsx                    | 43 ++++++++++++++-----
 3 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/ui/catalog/Links.tsx b/src/ui/catalog/Links.tsx
index 56bb444..caf85d3 100644
--- a/src/ui/catalog/Links.tsx
+++ b/src/ui/catalog/Links.tsx
@@ -66,7 +66,7 @@ function DescriptorLink({
   if (edit) {
     return (
       <Link to={ `/descriptors/${descriptor.uuid}/edit` }>
-        { children || descriptor.title }
+        { children || <Markdown basic source={ descriptor.title } /> }
       </Link>
     );
   } else if ((descriptor.state === PublishState.PUBLISHED) || (descriptor._permissions && descriptor._permissions.write)) {
diff --git a/src/ui/catalog/descriptor/DescriptorCard.tsx b/src/ui/catalog/descriptor/DescriptorCard.tsx
index 5cbbdf7..cf21434 100644
--- a/src/ui/catalog/descriptor/DescriptorCard.tsx
+++ b/src/ui/catalog/descriptor/DescriptorCard.tsx
@@ -79,6 +79,7 @@ interface IDescriptorCardProps extends React.ClassAttributes<any> {
     descriptor: Descriptor;
     className?: string;
     classes: any;
+    errorMessage?: string;
     selectedProps: {
         disabled: boolean,
         selectable: boolean,
@@ -136,11 +137,17 @@ const styles = (theme) => ({
         // padding: '20px',
         // height: 'auto',
     },
+    errorMessage: {
+        display: 'block',
+        marginTop: '12px',
+        color: 'red',
+        wordBreak: 'break-word',
+    },
     btnBlue: theme.buttons.blue,
     btnDefault: theme.buttons.default,
 });
 
-const DescriptorCard = ({complete = true, compact, descriptor, classes, className, selectedProps, actions, ...other}: IDescriptorCardProps & ICardProps) => {
+const DescriptorCard = ({complete = true, compact, descriptor, classes, className, selectedProps, actions, errorMessage, ...other}: IDescriptorCardProps & ICardProps) => {
 
     const onClick = (select) => () => {
         const {onSelect, onUnselect} = selectedProps;
@@ -169,7 +176,7 @@ const DescriptorCard = ({complete = true, compact, descriptor, classes, classNam
             <CardHeader
                 title={ descriptor.uuid ?
                   <DescriptorLink to={ descriptor }>{ descriptor.title || 'Untitled' }</DescriptorLink>
-                  : descriptor.title || 'Untitled'
+                  : <Markdown basic source={ descriptor.title } /> || 'Untitled'
                 }
             />
             <CardContent>
@@ -206,6 +213,9 @@ const DescriptorCard = ({complete = true, compact, descriptor, classes, classNam
                         )) }
                       </Grid>
                     ) }
+                    { errorMessage &&
+                        <div className={ classes.errorMessage }>{ errorMessage }</div>
+                    }
                 </Grid>
             </CardContent>
 
diff --git a/src/ui/pages/descriptorlist/descriptorlist-stepper/steps/import/index.tsx b/src/ui/pages/descriptorlist/descriptorlist-stepper/steps/import/index.tsx
index 9ec6f66..393a6b3 100644
--- a/src/ui/pages/descriptorlist/descriptorlist-stepper/steps/import/index.tsx
+++ b/src/ui/pages/descriptorlist/descriptorlist-stepper/steps/import/index.tsx
@@ -30,7 +30,8 @@ class ImportDescriptorsStep extends React.Component<IDescriptorListProps, any> {
     public constructor(props: any) {
         super(props);
         this.state = {
-            uploadedDescriptors: null,
+            uploadedDescriptors: [],
+            nonSavedDescriptors: [],
         };
     }
 
@@ -38,12 +39,6 @@ class ImportDescriptorsStep extends React.Component<IDescriptorListProps, any> {
         this.props.onGotoStep(id);
     }
 
-    protected handleDescriptors = (parsedDescriptors: Descriptor[]) => {
-        this.setState({ ...this.state, uploadedDescriptors: parsedDescriptors }, () => {
-            this.importDescriptors(parsedDescriptors);
-        });
-    }
-
     private importDescriptors = async (d: Descriptor[]) => {
         const {descriptorList, importDescriptor, addDescriptorsToDescriptorList} = this.props;
         const imported: string[] = [];
@@ -54,10 +49,19 @@ class ImportDescriptorsStep extends React.Component<IDescriptorListProps, any> {
                 descriptor.owner = descriptorList.owner;
                 const r = importDescriptor(descriptor)
                     .then((saved) => {
-                        log('Imported', saved);
+                        const descriptors = this.state.uploadedDescriptors;
+                        const alreadyInList = descriptors.map((d) => d.uuid).indexOf(saved.uuid) !== -1;
+                        if (!alreadyInList) {
+                            descriptors.push(saved);
+                            this.setState({ uploadedDescriptors: descriptors });
+                        }
+
                         imported.push(saved.uuid);
                     })
                     .catch((error) => {
+                        const descriptors = this.state.nonSavedDescriptors;
+                        descriptors.push({ descriptor, error: error.response.data.error });
+                        this.setState({ nonSavedDescriptors: descriptors });
                         log(`Descriptor import error`, error);
                     });
                 await r;
@@ -70,12 +74,14 @@ class ImportDescriptorsStep extends React.Component<IDescriptorListProps, any> {
 
     public render() {
         const { location, stillLoading, onDelete, onPublish } = this.props;
+        const notSaved: number = this.state.nonSavedDescriptors.length;
+
         return (
             <NavigationWrapper location={ location } stillLoading={ stillLoading } disabledNext={ false }
                 disabled={ false } steps={ steps }
                 gotoStep={ this.gotoStep } onDelete={ onDelete } onPublish={ onPublish }>
-                <DescriptorParser onHandleDescriptors={ this.handleDescriptors }>
-                    { this.state.uploadedDescriptors ? (
+                <DescriptorParser onHandleDescriptors={ this.importDescriptors }>
+                    { this.state.uploadedDescriptors.length > 0 ? (
                         <div style={ { marginTop: '23px' } }>
                             <h3>{ `Uploaded ${this.state.uploadedDescriptors.length} descriptor definitions` }</h3>
 
@@ -90,6 +96,23 @@ class ImportDescriptorsStep extends React.Component<IDescriptorListProps, any> {
                     ) : (
                         <h3>No descriptors uploaded</h3>
                     ) }
+
+                    { notSaved > 0 && (
+                        <div style={ { marginTop: '23px' } }>
+                            <h3 style={ { color: 'red' } }>{ `${notSaved} error${notSaved !== 1 ? 's' : '' } due uploading` }</h3>
+
+                            <Grid container spacing={ 24 }>
+                                { this.state.nonSavedDescriptors.map((d, index) => (
+                                    <Grid item key={ index } xs={ 12 } md={ 6 } xl={ 4 }>
+                                        <DescriptorCard
+                                            descriptor={ d.descriptor }
+                                            errorMessage={ d.error }
+                                        />
+                                    </Grid>
+                                )) }
+                            </Grid>
+                        </div>
+                    ) }
                 </DescriptorParser>
             </NavigationWrapper>
         );
-- 
GitLab