SSDM-7583 : ObjectTypeForm - display a warning in the property parameters...

SSDM-7583 : ObjectTypeForm - display a warning in the property parameters panel when a property is already in use and it is not fully editable

openbis_ng_ui/src/js/components/types/objectType/ObjectTypeDialogRemoveProperty.jsx

@@ -14,18 +14,22 @@ class ObjectTypeDialogRemoveProperty extends React.Component {
         open={open}
         onConfirm={onConfirm}
         onCancel={onCancel}
-        title={'Remove "' + this.getPropertyName() + '" property'}
-        content='The property is used by some entities. Are you sure you want to remove it?'
+        title={this.getTitle()}
+        content='This property is already used by some entities. Are you sure you want to remove it?'
       />
     )
   }
 
-  getPropertyName() {
+  getTitle() {
     const { open, selection, properties } = this.props
 
     if (open) {
       const property = _.find(properties, ['id', selection.params.id])
-      return property.code
+      if (property.code) {
+        return `Remove "${property.code}" property`
+      } else {
+        return 'Remove property'
+      }
     } else {
       return null
     }

openbis_ng_ui/src/js/components/types/objectType/ObjectTypeDialogRemoveSection.jsx

@@ -14,18 +14,22 @@ class ObjectTypeDialogRemoveSection extends React.Component {
         open={open}
         onConfirm={onConfirm}
         onCancel={onCancel}
-        title={'Remove "' + this.getSectionName() + '" section'}
-        content='The section contains properties used in entities. Are you sure you want to remove it?'
+        title={this.getTitle()}
+        content='This section contains properties which are already used by some entities. Are you sure you want to remove it?'
       />
     )
   }
 
-  getSectionName() {
+  getTitle() {
     const { open, selection, sections } = this.props
 
     if (open) {
       const section = _.find(sections, ['id', selection.params.id])
-      return section.name
+      if (section.name) {
+        return `Remove "${section.name}" section`
+      } else {
+        return 'Remove section'
+      }
     } else {
       return null
     }

openbis_ng_ui/src/js/components/types/objectType/ObjectTypeParametersProperty.jsx

@@ -4,6 +4,7 @@ import Typography from '@material-ui/core/Typography'
 import CheckboxField from '../../common/form/CheckboxField.jsx'
 import TextField from '../../common/form/TextField.jsx'
 import SelectField from '../../common/form/SelectField.jsx'
+import WarningIcon from '@material-ui/icons/Warning'
 import { facade, dto } from '../../../services/openbis.js'
 import logger from '../../../common/logger.js'
 
@@ -16,6 +17,14 @@ const styles = theme => ({
   },
   field: {
     paddingBottom: theme.spacing(2)
+  },
+  warning: {
+    display: 'flex',
+    alignItems: 'center',
+    '& svg': {
+      marginRight: theme.spacing(1),
+      color: theme.palette.warning.main
+    }
   }
 })
 
@@ -173,6 +182,7 @@ class ObjectTypeParametersProperty extends React.PureComponent {
         <Typography variant='h6' className={classes.header}>
           Property
         </Typography>
+        {this.renderWarning(property)}
         {this.renderCode(property)}
         {this.renderDataType(property)}
         {this.renderVocabulary(property)}
@@ -185,6 +195,22 @@ class ObjectTypeParametersProperty extends React.PureComponent {
     )
   }
 
+  renderWarning(property) {
+    if (property.used) {
+      const { classes } = this.props
+      return (
+        <div className={classes.field}>
+          <Typography variant='body2' className={classes.warning}>
+            <WarningIcon />
+            This property is already used by some entities.
+          </Typography>
+        </div>
+      )
+    } else {
+      return null
+    }
+  }
+
   renderLabel(property) {
     const { classes } = this.props
     return (

openbis_ng_ui/src/js/index.js

@@ -21,6 +21,9 @@ const theme = createMuiTheme({
     secondary: {
       main: lightBlue[600]
     },
+    warning: {
+      main: '#ff9609'
+    },
     background: {
       primary: '#ebebeb',
       secondary: '#dbdbdb'