[ENG-5071] Integration the cedar template into the add flow

app/guid-node/metadata/-components/metadata-cedar/styles.scss

@@ -0,0 +1,24 @@
+// stylelint-disable max-nesting-depth, selector-max-compound-selectors
+
+.metadata-cedar-container {
+    margin-bottom: 30px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    .header-container {
+        width: 100%;
+        margin-bottom: 30px;
+    }
+
+    .cedar-container {
+        width: 100%;
+        margin-bottom: 30px;
+    }
+
+    .return-container {
+        width: 100%;
+    }
+}

app/guid-node/metadata/-components/metadata-cedar/template.hbs

@@ -0,0 +1,22 @@
+<div local-class='metadata-cedar-container'>
+    <div local-class='header-container'>
+        <h2 data-test-schema-name>
+            {{t 'metadata.add-flow.add-title' schemaName=@template.schemaName }}
+        </h2>
+    </div>
+    <div local-class='cedar-container'>
+        <CedarMetadataEditor
+            @templateObject={{@template.cedarId}}
+        />
+    </div>
+    <div local-class='return-container'>
+        <Button
+            data-test-select-button
+            aria-label= {{ t 'metadata.add-flow-select' }}
+            data-analytics-name='Select metadata'
+            {{on 'click' @closeCedarEditor }}
+        >
+            {{ t 'metadata.add-flow.select-different-metadata-schema' }}
+        </Button>
+    </div>
+</div>

app/guid-node/metadata/-components/metadata-select/component.ts

@@ -1,23 +1,10 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import Media from 'ember-responsive';
-import CedarMetadataTemplateModel from 'ember-osf-web/models/cedar-metadata-template';
-import { action } from '@ember/object';
 
-interface TabArgs {
-    template: CedarMetadataTemplateModel;
-}
-
-
-export default class MetadataSelect extends Component<TabArgs> {
+export default class MetadataSelect extends Component {
     @service media!: Media;
 
-    template = this.args.template;
-
-    @action
-    // eslint-disable-next-line
-    selectTemplate() { }
-
     get isMobile() {
         return this.media.isMobile;
     }

app/guid-node/metadata/-components/metadata-select/template.hbs

@@ -1,16 +1,16 @@
 <div local-class='metadata-select-container {{if this.isMobile 'mobile'}}'>
     <div local-class='title' data-test-select-title>
-        {{ this.template.schemaName }}
+        {{ @template.schemaName }}
     </div>
     <div local-class='description' data-test-select-description>
-        {{ this.template.template.description}}
+        {{ @template.template.description}}
     </div>
     <div local-class='action'>
         <Button
             data-test-select-button
             aria-label= {{ t 'metadata.add-flow-select' }}
             data-analytics-name='Select metadata'
-            {{on 'click' this.selectTemplate}}
+            {{on 'click' (fn @selectTemplate @template.cedarId) }}
         >
             {{ t 'metadata.add-flow.select' }}
         </Button>

app/guid-node/metadata/add/controller.ts

@@ -2,12 +2,40 @@ import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import Media from 'ember-responsive';
 import config from 'ember-osf-web/config/environment';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import RouterService from '@ember/routing/router-service';
+import CedarMetadataTemplateModel from 'ember-osf-web/models/cedar-metadata-template';
 
 export default class GuidMetadataAdd extends Controller {
     @service media!: Media;
+    @service router!: RouterService;
 
     supportEmail = config.support.supportEmail;
 
+    @tracked displaySelectionOptions = true;
+    @tracked selectedTemplate = undefined;
+
+    @action
+    selectTemplate(cedarId: string): void {
+        this.displaySelectionOptions = false;
+
+        // eslint-disable-next-line max-len
+        const selectedTemplate = this.model.templates.filter((template: CedarMetadataTemplateModel) =>  cedarId === template.cedarId);
+
+        if (selectedTemplate) {
+            this.selectedTemplate = selectedTemplate.pop();
+        } else {
+            this.router.transitionTo('not-found', `${this.model.guidNode.id}/metadata`);
+        }
+    }
+
+    @action
+    closeCedarEditor(): void {
+        this.displaySelectionOptions = true;
+        this.selectedTemplate = undefined;
+    }
+
     get isMobile() {
         return this.media.isMobile;
     }

app/guid-node/metadata/add/template.hbs

@@ -1,23 +1,32 @@
 <div local-class='metadata-add-container {{if this.isMobile 'mobile'}}'>
-    <div local-class='header-container'>
-        <div local-class='header'>
-            <h2 data-test-metadata-add-header>
-                {{t 'metadata.add-flow.select-metadata-schema'}}    
-            </h2>
+    {{#if this.displaySelectionOptions}}
+        <div local-class='header-container'>
+            <div local-class='header'>
+                <h2 data-test-metadata-add-header>
+                    {{t 'metadata.add-flow.select-metadata-schema'}}    
+                </h2>
+            </div>
+            <div local-class='explanation' data-test-metadata-add-explanation>
+                {{t 'metadata.add-flow.explanation' supportEmail=this.supportEmail htmlSafe=true }}    
+            </div>
+            <div local-class='available-schemas' data-test-metadata-add-available-schemas>
+                {{t 'metadata.add-flow.available-schemas' }}
+            </div>
         </div>
-        <div local-class='explanation' data-test-metadata-add-explanation>
-            {{t 'metadata.add-flow.explanation' supportEmail=this.supportEmail htmlSafe=true }}    
+        <div local-class='template-container'>
+            {{#each this.model.templates as |template|}}
+                <GuidNode::Metadata::-Components::MetadataSelect
+                    @template={{template}}
+                    @selectTemplate={{this.selectTemplate}}
+                ></GuidNode::Metadata::-Components::MetadataSelect>
+            {{/each}}
         </div>
-        <div local-class='available-schemas' data-test-metadata-add-available-schemas>
-            {{t 'metadata.add-flow.available-schemas' }}
-        </div>
-    </div>
-    <div local-class='template-container'>
-        {{#each this.model.templates as |template|}}
-            <GuidNode::Metadata::-Components::MetadataSelect
-                @template={{template}}
-            />
-        {{/each}}
-    </div>
+    {{else}}
+        {{this.model.guidNode.id}}
+        <GuidNode::Metadata::-Components::MetadataCedar
+            @template={{this.selectedTemplate}}
+            @closeCedarEditor={{this.closeCedarEditor}}
+        ></GuidNode::Metadata::-Components::MetadataCedar>
+    {{/if}}
 </div>
 

lib/osf-components/addon/components/cedar-metadata-editor/component.ts

@@ -10,6 +10,29 @@ interface Args {
 }
 
 export default class CedarMetadataEditor extends Component<Args> {
+
+    config = {
+        sampleTemplateLocationPrefix: 'http://localhost:4240/cedar-embeddable-editor-sample-templates/',
+        loadSampleTemplateName: '01',
+        expandedSampleTemplateLinks: true,
+        showTemplateRenderingRepresentation: true,
+        showInstanceDataCore: true,
+        expandedInstanceDataCore: false,
+        showMultiInstanceInfo: true,
+        expandedMultiInstanceInfo: false,
+        expandedTemplateRenderingRepresentation: false,
+        showInstanceDataFull: false,
+        expandedInstanceDataFull: false,
+        showTemplateSourceData: true,
+        expandedTemplateSourceData: false,
+        showHeader: true,
+        showFooter: true,
+        defaultLanguage: 'en',
+        fallbackLanguage: 'en',
+        collapseStaticComponents: false,
+        showStaticText: true,
+    };
+
     @action
     save() {
         /*

lib/osf-components/addon/components/cedar-metadata-editor/styles.scss

@@ -0,0 +1,30 @@
+// stylelint-disable max-nesting-depth, selector-max-compound-selectors
+
+.cedar-add-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    .cedar-container {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: flex-start;
+        margin-bottom: 30px;
+
+        .cedar-editor {
+            width: 100%;
+        }
+    }
+
+    .action-container {
+        width: calc(100% - 45px);
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+    }
+}

lib/osf-components/addon/components/cedar-metadata-editor/template.hbs

@@ -1,13 +1,20 @@
-<div>
-    <cedar-embeddable-editor
-        config={{this.cedarConfig}}
-        templateObject={{@templateObject}}
-        instanceObject={{@instanceObject}}
-    >
-    </cedar-embeddable-editor>
-    <Button
-        {{on 'click' this.save}}
-    >
-        {{ t 'cedar.editor.save-button' }}
-    </Button>
+<div local-class='cedar-add-container'>
+    <div local-class='cedar-container'>
+        <cedar-embeddable-editor
+            local-class='cedar-editor'
+            config={{this.config}}
+            templateObject={{@templateObject}}
+            instanceObject={{@instanceObject}}
+        />
+    </div>
+    <div local-class='action-container'>
+        <Button
+            data-test-save-button
+            aria-label= {{ t 'cedar.editor.save-button' }}
+            data-analytics-name='Save cedar metadata'
+            {{on 'click' this.save}}
+        >
+            {{ t 'cedar.editor.save-button' }}
+        </Button>
+    </div>
 </div>

mirage/fixtures/cedar-metadata-templates.ts

@@ -4,31 +4,31 @@ import CedarMetadataTemplateModel from 'ember-osf-web/models/cedar-metadata-temp
 const cedarMetadataTemplates: Array<Partial<CedarMetadataTemplateModel>> = [
     {
         id: '2',
-        schemaName: 'OSF Registries - 1',
-        cedarId: 'abc-123',
+        schemaName: 'Biosample submission template schema',
+        cedarId: 'https://repo.metadatacenter.net/templates/58098c2d-dea9-4ec6-8f5d-d85d5f1b4f6f',
         active: true,
         template: Object({
-            description: 'A template description may or may not exist on the cedar template object',
+            description: 'Biosample submission template schema generated by the CEDAR Template Editor 2.6.44',
         }),
         templateVersion: 1,
     },
     {
         id: '3',
-        schemaName: 'OSF Registries - 2',
-        cedarId: 'abc-123',
+        schemaName: 'Ffis funder draft template schema',
+        cedarId: 'https://repo.metadatacenter.org/templates/352a29d7-3df8-4bdd-bd75-e09d16c7063d',
         active: true,
         template: Object({
-            description: 'A template description may or may not exist on the cedar template object',
+            description: 'Ffis funder draft template schema generated by the CEDAR Template Editor 2.6.44',
         }),
         templateVersion: 1,
     },
     {
         id: '1',
-        schemaName: 'A - OSF Registries - 2',
-        cedarId: 'abc-123',
+        schemaName: 'License field schema',
+        cedarId: 'https://repo.metadatacenter.org/template-fields/8b51634a-42df-414b-be27-6cfdfb611591',
         active: true,
         template: Object({
-            description: 'A template description may or may not exist on the cedar template object',
+            description: 'License field schema generated by the CEDAR Template Editor 2.4.10',
         }),
         templateVersion: 1,
     },

translations/en-us.yml

@@ -221,9 +221,11 @@ metadata:
     see-less: 'Click to see less metadata options'
     add-flow:
         select-metadata-schema: 'Select a Metadata Schema'
+        select-different-metadata-schema: 'Select a different schema'
         explanation: 'OSF has partnered with CEDAR to provide more ways to annotate your research with domain-specific metadata schemas. If a schema is missing, let us know at <a href="mailto:{supportEmail}">{supportEmail}</a>.'
         available-schemas: 'Available Schemas from CEDAR'
         select: 'Select'
+        add-title: '{schemaName} Schema'
     detail:
         popover:
             header: 'This is a default header'