diff --git a/app/guid-node/metadata/-components/metadata-detail/styles.scss b/app/guid-node/metadata/-components/metadata-detail/styles.scss
new file mode 100644
index 0000000000..6b2e0ad899
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..5910f19d94
--- /dev/null
+++ b/app/guid-node/metadata/-components/metadata-detail/template.hbs
@@ -0,0 +1,51 @@
+
+
+ {{#each @cedarMetadataRecord.metadata.templates as |template| }}
+ {{#panels.panel
+ as |panel|}}
+ {{#panel.toggle}}
+
+
+
+
+ {{template.name}}
+
+
+
+
+
{{t 'metadata.detail.popover.header'}}
+ {{t 'metadata.detail.popover.content'}}
+
+
+
+
+
+ {{data.key}}
+
+ {{#if data.required}}
+
+ *
+
+ {{/if}}
+
+
+ {{data.value}}
+
+
+
- {{ t 'cedar.editor.save-button' }}
-
-
+ {{#each this.templates as |template| }}
+
+
+
+ {{/each}}
{{#if this.showTabs}}
diff --git a/mirage/factories/cedar-metadata-record.ts b/mirage/factories/cedar-metadata-record.ts
index 83d782a161..8957b2b73e 100644
--- a/mirage/factories/cedar-metadata-record.ts
+++ b/mirage/factories/cedar-metadata-record.ts
@@ -5,9 +5,18 @@ import faker from 'faker';
export default Factory.extend({
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() {
@@ -15,6 +24,33 @@ export default Factory.extend({
},
});
+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
index bece72afde..203bda5966 100644
--- 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
index c70854238b..aa9092cde0 100644
--- 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'