[Inspector] Display notes in the inspector if there are notes found on the domainObject (#4520)

Co-authored-by: Charles Hacskaylo <charlesh88@gmail.com>

src/ui/inspector/InspectorDetailsSpec.js

@@ -43,6 +43,7 @@ describe('the inspector', () => {
                 namespace: '',
                 key: 'mock-folder-key'
             },
+            notes: 'This object should have some notes',
             created: 1592851063871
         };
 
@@ -73,6 +74,7 @@ describe('the inspector', () => {
         const [
             title,
             type,
+            notes,
             timestamp
         ] = details;
 
@@ -85,6 +87,8 @@ describe('the inspector', () => {
             .toEqual('Type');
         expect(type.value.toLowerCase())
             .toEqual(folderItem.type);
+        expect(notes.value)
+            .toEqual('This object should have some notes');
 
         expect(timestamp.name)
             .toEqual('Created');

src/ui/inspector/details/Properties.vue

@@ -94,6 +94,7 @@ export default {
             const typeName = this.type ? this.type.definition.name : `Unknown: ${this.domainObject.type}`;
             const timestampLabel = this.domainObject.modified ? 'Modified' : 'Created';
             const timestamp = this.domainObject.modified ? this.domainObject.modified : this.domainObject.created;
+            const notes = this.domainObject.notes;
 
             const details = [
                 {
@@ -106,6 +107,13 @@ export default {
                 }
             ];
 
+            if (notes) {
+                details.push({
+                    name: 'Notes',
+                    value: notes
+                });
+            }
+
             if (timestamp !== undefined) {
                 const formattedTimestamp = Moment.utc(timestamp)
                     .format('YYYY-MM-DD[\n]HH:mm:ss')

src/ui/inspector/inspector.scss

@@ -162,7 +162,6 @@
 
     &__value {
         color: $colorInspectorPropVal;
-        word-break: break-all;
         &:first-child {
             // If there is no preceding .label element, make value span columns
             grid-column: 1 / 3;