[ENG-5065] Add a new metadata details (view only) component (CenterFo…

…rOpenScience#2095) * Added the initial metadata-detail component * Added some more touches to the detail template * Removed unnecessary mobile styling and actually the component. * Much cleaner look and feel for the read-only view * Added more randomness
bp-cos · Jan 31, 2024 · d9f8949 · d9f8949
1 parent 6f4fb9d
commit d9f8949
Show file tree

Hide file tree

Showing 7 changed files with 191 additions and 11 deletions.
diff --git a/app/guid-node/metadata/-components/metadata-detail/styles.scss b/app/guid-node/metadata/-components/metadata-detail/styles.scss
@@ -0,0 +1,74 @@
+// stylelint-disable max-nesting-depth, selector-max-compound-selectors
+
+.metadata-detail-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    a {
+        text-decoration: none;
+        color: $color-text-black;
+    }
+
+    .header-container {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        margin-bottom: 10px;
+
+        .header {
+            font-size: 18px;
+            margin-right: 20px;
+        }
+    }
+
+    .detail-container {
+        width: calc(100% - 20px);
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        margin-left: 20px;
+        padding-bottom: 20px;
+        margin-bottom: 20px;
+        border-bottom: 1px solid $color-border-gray-darker;
+
+        .key-container {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: flex-start;
+
+            .key {
+                font-weight: bold;
+            }
+
+            .required {
+                color: $brand-danger;
+            }
+        }
+    }
+}
+
+:global(.cp-is-open .cedar-template-chevron-right) {
+    display: none;
+}
+
+:global(.cp-is-open .cedar-template-chevron-down) {
+    display: flex;
+    margin-right: 10px;
+}
+
+
+:global(.cp-is-closed .cedar-template-chevron-right) {
+    display: flex;
+    margin-right: 10px;
+}
+
+:global(.cp-is-closed .cedar-template-chevron-down) {
+    display: none;
+}
diff --git a/app/guid-node/metadata/-components/metadata-detail/template.hbs b/app/guid-node/metadata/-components/metadata-detail/template.hbs
@@ -0,0 +1,51 @@
+<div local-class='metadata-detail-container'>
+    <CpPanels
+        @accordion={{true}}
+        as |panels|
+    >
+        {{#each @cedarMetadataRecord.metadata.templates as |template| }}
+            {{#panels.panel
+                as |panel|}}
+                {{#panel.toggle}}
+                    <div local-class='header-container'>
+                        <FaIcon class='cedar-template-chevron-right' @icon='chevron-right' />
+                        <FaIcon class='cedar-template-chevron-down' @icon='chevron-down' />
+                        <div local-class='header'>
+                            {{template.name}}
+                        </div>
+                        <FaIcon @icon='question-circle' />
+                        <EmberPopover
+                            @side='bottom'
+                            @event='hover'
+                            @popperContainer='body'
+                        >
+                            <div local-class='popover-format'>
+                                <h3>{{t 'metadata.detail.popover.header'}}</h3>
+                                {{t 'metadata.detail.popover.content'}}
+                            </div>
+                        </EmberPopover>
+                    </div>
+                {{/panel.toggle}}
+                {{#panel.body}}
+                    {{#each template.data as |data| }}
+                        <div local-class='detail-container'>
+                            <div local-class='key-container'>
+                                <div local-class='key'>
+                                    {{data.key}}
+                                </div>
+                                {{#if data.required}}
+                                    <div local-class='required'>
+                                        *
+                                    </div>
+                                {{/if}}
+                            </div>
+                            <div>
+                                {{data.value}}
+                            </div>
+                        </div>
+                    {{/each}}
+                {{/panel.body}}
+            {{/panels.panel}}
+        {{/each}}
+    </CpPanels>
+</div>
diff --git a/app/guid-node/metadata/-components/metadata-tabs/styles.scss b/app/guid-node/metadata/-components/metadata-tabs/styles.scss
@@ -49,7 +49,7 @@
 
         /* stylelint-enable selector-no-qualifying-type */
         .tab-list {
-            overflow-x: hidden;
+            overflow: hidden;
 
             li {
                 display: block;

diff --git a/app/guid-node/metadata/-components/metadata-tabs/template.hbs b/app/guid-node/metadata/-components/metadata-tabs/template.hbs
@@ -31,11 +31,13 @@
                 </NodeMetadataManager>
             </div>
         </tab.tabPanel>
-        <tab.tabPanel>
-            <div local-class='metadata-pane' data-test-registrations-pane>
-                {{ t 'cedar.editor.save-button' }}
-            </div>
-        </tab.tabPanel>
+        {{#each this.templates as |template| }}
+            <tab.tabPanel>
+                <GuidNode::Metadata::-Components::MetadataDetail
+                    @cedarMetadataRecord={{template}}
+                ></GuidNode::Metadata::-Components::MetadataDetail>
+            </tab.tabPanel>
+        {{/each}}
     </AriaTabs>
     {{#if this.showTabs}}
         <div local-class='more-options'>

diff --git a/mirage/factories/cedar-metadata-record.ts b/mirage/factories/cedar-metadata-record.ts
@@ -5,16 +5,52 @@ import faker from 'faker';
 
 export default Factory.extend<CedarMetadataRecordModel>({
     metadata() {
-        return {
+        const metadata = {
             name: faker.lorem.word(),
+            templates: [
+                buildData(),
+            ],
         };
+
+        for(let index = 0; index < faker.random.number({min: 1, max: 9, precision: 1}); index++) {
+            metadata.templates.push(buildData());
+        }
+
+        return metadata;
     },
 
     isPublished() {
         return true;
     },
 });
 
+function buildData(): object {
+    const record = Object({
+        name: faker.lorem.sentence(6),
+        data: [
+            Object({
+                key: faker.lorem.words(3),
+                value: faker.lorem.sentence(50),
+                required: faker.random.boolean(),
+
+            }),
+        ],
+    });
+
+    for(let index = 0; index < faker.random.number({min: 1, max: 9, precision: 1}); index++) {
+        record.data.push(
+            Object({
+                key: faker.lorem.words(faker.random.number({min: 1, max: 5, precision: 1})),
+                value: faker.lorem.sentence(50),
+                required: faker.random.boolean(),
+            }),
+        );
+    }
+
+    return record;
+}
+
+
 declare module 'ember-cli-mirage/types/registries/model' {
     export default interface MirageModelRegistry {
         'cedar-metadata-record': CedarMetadataRecordModel;

diff --git a/mirage/scenarios/cedar-metatdata-record.ts b/mirage/scenarios/cedar-metatdata-record.ts
@@ -14,11 +14,19 @@ export function cedarMetadataRecordsScenario(
 
     threeCedarMetadataRecords(server);
 
+    twelveCedarMetadataRecords(server);
+
+}
+
+function noCedarMetadataRecords(server: Server) {
+    server.create('node', {
+        id: '0-cedar-records',
+    });
 }
 
 function threeCedarMetadataRecords(server: Server) {
     const newNode = server.create('node', {
-        id: 'three-cedar-metadata-records',
+        id: '3-cedar-records',
     });
 
     const cedarMetadataRecords = server.createList('cedar-metadata-record', 3);
@@ -28,9 +36,14 @@ function threeCedarMetadataRecords(server: Server) {
     });
 }
 
+function twelveCedarMetadataRecords(server: Server) {
+    const newNode = server.create('node', {
+        id: '12-cedar-records',
+    });
 
-function noCedarMetadataRecords(server: Server) {
-    server.create('node', {
-        id: 'no-cedar-metadata-records',
+    const cedarMetadataRecords = server.createList('cedar-metadata-record', 12);
+
+    newNode.update({
+        cedarMetadataRecords,
     });
 }
diff --git a/translations/en-us.yml b/translations/en-us.yml
@@ -216,6 +216,10 @@ metadata:
     add-schema: 'Add Community Metadata Schemas'
     see-more: 'Click to see more metadata options'
     see-less: 'Click to see less metadata options'
+    detail:
+        popover:
+            header: 'This is a default header'
+            content: 'This is a default content'
 cedar:
     editor:
         save-button: 'Save'