NG_UI : tabs : when trying to open a non-existent object show appropriate info message

openbis_ng_ui/src/js/components/types/form/TypeForm.jsx

@@ -4,6 +4,7 @@ import { connect } from 'react-redux'
 import { withStyles } from '@material-ui/core/styles'
 import { Resizable } from 're-resizable'
 import ComponentContext from '@src/js/components/common/ComponentContext.js'
+import Container from '@src/js/components/common/form/Container.jsx'
 import Loading from '@src/js/components/common/loading/Loading.jsx'
 import logger from '@src/js/common/logger.js'
 
@@ -12,6 +13,7 @@ import TypeFormFacade from './TypeFormFacade.js'
 import TypeFormButtons from './TypeFormButtons.jsx'
 import TypeFormParameters from './TypeFormParameters.jsx'
 import TypeFormPreview from './TypeFormPreview.jsx'
+import TypeFormMessage from './TypeFormMessage.jsx'
 import TypeFormDialogRemoveSection from './TypeFormDialogRemoveSection.jsx'
 import TypeFormDialogRemoveProperty from './TypeFormDialogRemoveProperty.jsx'
 
@@ -70,16 +72,22 @@ class TypeForm extends React.PureComponent {
   render() {
     logger.log(logger.DEBUG, 'TypeForm.render')
 
-    const { loading, type, dictionaries } = this.state
+    const { loaded, loading } = this.state
 
-    return (
-      <Loading loading={loading}>
-        {!!type && !!dictionaries && this.doRender()}
-      </Loading>
-    )
+    return <Loading loading={loading}>{loaded && this.doRender()}</Loading>
   }
 
   doRender() {
+    const { type } = this.state
+
+    if (type) {
+      return this.doRenderExisting()
+    } else {
+      return this.doRenderNonExistent()
+    }
+  }
+
+  doRenderExisting() {
     let { controller } = this
 
     let {
@@ -163,6 +171,14 @@ class TypeForm extends React.PureComponent {
       </div>
     )
   }
+
+  doRenderNonExistent() {
+    return (
+      <Container>
+        <TypeFormMessage type='info'>Object does not exist.</TypeFormMessage>
+      </Container>
+    )
+  }
 }
 
 export default _.flow(connect(), withStyles(styles))(TypeForm)

openbis_ng_ui/src/js/components/types/form/TypeFormControllerLoad.js

@@ -29,6 +29,7 @@ export default class TypeFormControllerLoad {
       })
       .finally(() => {
         this.context.setState({
+          loaded: true,
           loading: false
         })
       })

openbis_ng_ui/src/js/components/types/form/TypeFormControllerLoadType.js

@@ -14,76 +14,79 @@ export default class TypeFormControllerLoadType {
   async execute() {
     const strategy = this._getStrategy()
 
-    let promise = null
     if (strategy.getNewObjectType() === this.object.type) {
-      promise = Promise.resolve([null, null, null])
+      return this._init(null, null, null)
     } else if (strategy.getExistingObjectType() === this.object.type) {
-      promise = Promise.all([
+      return Promise.all([
         this.facade.loadType(this.object),
         this.facade.loadUsages(this.object),
         this.facade.loadAssignments(this.object)
-      ])
+      ]).then(([loadedType, loadedUsages, loadedAssignments]) => {
+        if (loadedType) {
+          return this._init(loadedType, loadedUsages, loadedAssignments)
+        }
+      })
     }
+  }
 
-    return promise.then(([loadedType, loadedUsages, loadedAssignments]) => {
-      const sections = []
-      const properties = []
-      let section = null
-      let property = null
-      let sectionsCounter = 0
-      let propertiesCounter = 0
-
-      if (loadedType && loadedType.propertyAssignments) {
-        loadedType.propertyAssignments.forEach(loadedAssignment => {
-          property = this._createProperty(
-            'property-' + propertiesCounter++,
-            loadedType,
-            loadedAssignment,
-            loadedUsages,
-            loadedAssignments
+  async _init(loadedType, loadedUsages, loadedAssignments) {
+    const sections = []
+    const properties = []
+    let section = null
+    let property = null
+    let sectionsCounter = 0
+    let propertiesCounter = 0
+
+    if (loadedType && loadedType.propertyAssignments) {
+      loadedType.propertyAssignments.forEach(loadedAssignment => {
+        property = this._createProperty(
+          'property-' + propertiesCounter++,
+          loadedType,
+          loadedAssignment,
+          loadedUsages,
+          loadedAssignments
+        )
+        properties.push(property)
+
+        if (!section || section.name.value !== loadedAssignment.section) {
+          section = this._createSection(
+            'section-' + sectionsCounter++,
+            loadedAssignment
           )
-          properties.push(property)
-
-          if (!section || section.name.value !== loadedAssignment.section) {
-            section = this._createSection(
-              'section-' + sectionsCounter++,
-              loadedAssignment
-            )
-            sections.push(section)
-          }
+          sections.push(section)
+        }
 
-          section.properties.push(property.id)
-          property.section = section.id
-          property.original = {
-            ...property
-          }
-        })
-      }
+        section.properties.push(property.id)
+        property.section = section.id
+        property.original = {
+          ...property
+        }
+      })
+    }
 
-      const type = this._createType(loadedType, loadedUsages)
+    const type = this._createType(loadedType, loadedUsages)
 
-      if (loadedType) {
-        type.original = {
-          ...type,
-          properties
-        }
+    if (loadedType) {
+      type.original = {
+        ...type,
+        properties
       }
+    }
 
-      const selection = this._createSelection(sections)
-
-      return this.context.setState(() => ({
-        type,
-        properties,
-        propertiesCounter,
-        sections,
-        sectionsCounter,
-        selection: selection,
-        usages: loadedUsages,
-        assignments: loadedAssignments,
-        removeSectionDialogOpen: false,
-        removePropertyDialogOpen: false
-      }))
-    })
+    const selection = this._createSelection(sections)
+
+    return this.context.setState(() => ({
+      type,
+      properties,
+      propertiesCounter,
+      sections,
+      sectionsCounter,
+      selection: selection,
+      usages: loadedUsages,
+      assignments: loadedAssignments,
+      removeSectionDialogOpen: false,
+      removePropertyDialogOpen: false
+    }))
   }
 
   _createType(loadedType, loadedUsages) {

openbis_ng_ui/src/js/components/types/form/TypeFormFacade.js

@@ -69,9 +69,13 @@ export default class TypeFormFacade {
     return strategy.getTypes([id], fo).then(map => {
       const type = map[object.id]
 
-      return type.getPropertyAssignments().map(assignment => {
-        return assignment.getPropertyType()
-      })
+      if (type) {
+        return type.getPropertyAssignments().map(assignment => {
+          return assignment.getPropertyType()
+        })
+      } else {
+        return []
+      }
     })
   }