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

app/config/environment.d.ts

@@ -32,6 +32,34 @@ declare const config: {
     assetsPrefix: string;
     sentryDSN: string | null;
     googleTagManagerId: string | null;
+    cedarConfig: {
+        ceeConfig: {
+            showTemplateUpload: boolean,
+            showDataSaver: boolean,
+            showSampleTemplateLinks: boolean,
+        },
+        editorConfig: {
+            sampleTemplateLocationPrefix: string,
+            loadSampleTemplateName: string,
+            expandedSampleTemplateLinks: boolean,
+            showTemplateRenderingRepresentation: boolean,
+            showMultiInstanceInfo: boolean,
+            expandedInstanceDataFull: boolean,
+            expandedInstanceDataCore: boolean,
+            expandedMultiInstanceInfo: boolean,
+            expandedTemplateRenderingRepresentation: boolean,
+            showInstanceDataFull: boolean,
+            showTemplateSourceData: boolean,
+            expandedTemplateSourceData: boolean,
+            collapseStaticComponents: boolean,
+            showStaticText: boolean,
+            showInstanceDataCore: boolean,
+            showHeader: boolean,
+            showFooter: boolean,
+            showInstanceDataFull: boolean,
+            showTemplateSourceData: boolean,
+        },
+    }
     sentryOptions: {
         release?: string;
         ignoreErrors: string[];

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

@@ -0,0 +1,19 @@
+// 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;
+
+    .cedar-container {
+        width: 100%;
+        margin-bottom: 30px;
+    }
+
+    .return-container {
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,16 @@
+<div local-class='metadata-cedar-container'>
+    <div local-class='cedar-container'>
+        <CedarMetadataEditor
+            @templateObject={{@template.template}}
+        />
+    </div>
+    <div local-class='return-container'>
+        <Button
+            data-test-select-button
+            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/template.hbs

@@ -1,16 +1,15 @@
-<div local-class='metadata-select-container {{if this.isMobile 'mobile'}}'>
+<div local-class='metadata-select-container {{if @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) }}
         >
             {{ t 'metadata.add-flow.select' }}
         </Button>

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

@@ -17,7 +17,7 @@ export default class MetadataTabs extends Component<TabArgs> {
     @service media!: Media;
     @service analytics!: Analytics;
 
-    guidNode= this.args.guidNode;
+    guidNode = this.args.guidNode;
     templates = this.args.templates;
 
     @tracked showTabs = false;

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

@@ -2,12 +2,43 @@ 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';
+import Intl from 'ember-intl/services/intl';
 
 export default class GuidMetadataAdd extends Controller {
     @service media!: Media;
+    @service router!: RouterService;
+    @service intl!: Intl;
 
     supportEmail = config.support.supportEmail;
 
+    @tracked displaySelectionOptions = true;
+    @tracked selectedTemplate?: CedarMetadataTemplateModel;
+    @tracked tabTitle = this.intl.t('metadata.add-flow.select');
+
+    @action
+    selectTemplate(cedarMetadataTemplate: CedarMetadataTemplateModel): void {
+        this.displaySelectionOptions = false;
+        this.selectedTemplate = cedarMetadataTemplate;
+        this.updateTitle();
+    }
+
+    @action
+    closeCedarEditor(): void {
+        this.displaySelectionOptions = true;
+        this.selectedTemplate = undefined;
+        this.updateTitle();
+    }
+
+    private updateTitle(): void {
+        // eslint-disable-next-line max-len
+        const translation = this.displaySelectionOptions ? 'metadata.add-flow.tab-title-select' : 'metadata.add-flow.tab-title-add';
+        this.tabTitle = this.intl.t(translation);
+    }
+
     get isMobile() {
         return this.media.isMobile;
     }

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

@@ -1,23 +1,33 @@
+{{page-title this.tabTitle}}
 <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}}
+                    @isMobile={{this.isMobile}}
+                ></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}}
+        <GuidNode::Metadata::-Components::MetadataCedar
+            @template={{this.selectedTemplate}}
+            @closeCedarEditor={{this.closeCedarEditor}}
+        ></GuidNode::Metadata::-Components::MetadataCedar>
+    {{/if}}
 </div>
 

app/guid-node/metadata/template.hbs

@@ -1,2 +1,3 @@
+{{page-title (t 'metadata.tab-title') replace=true}}
 {{outlet}}
 

config/environment.js

@@ -24,6 +24,27 @@ const {
             showDataSaver: false,
             showSampleTemplateLinks: false,
         },
+        editorConfig: {
+            sampleTemplateLocationPrefix: 'http://localhost:4240/cedar-embeddable-editor-sample-templates/',
+            loadSampleTemplateName: '01',
+            expandedSampleTemplateLinks: true,
+            showTemplateRenderingRepresentation: false,
+            showMultiInstanceInfo: false,
+            expandedInstanceDataFull: false,
+            expandedInstanceDataCore: false,
+            expandedMultiInstanceInfo: false,
+            expandedTemplateRenderingRepresentation: false,
+            expandedTemplateSourceData: false,
+            collapseStaticComponents: false,
+            showStaticText: false,
+            showInstanceDataCore: false,
+            showHeader: false,
+            showFooter: false,
+
+            // These are required to be false
+            showInstanceDataFull: false,
+            showTemplateSourceData: false,
+        },
     },
     CLIENT_ID: clientId,
     COLLECTIONS_ENABLED = false,

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

@@ -10,12 +10,14 @@ interface Args {
 }
 
 export default class CedarMetadataEditor extends Component<Args> {
+
+    cedarConfig = cedarConfig.editorConfig;
+
     @action
     save() {
         /*
         const cee = document.querySelector('cedar-embeddable-editor');
         console.log(cee.metadata);
         */
     }
-    cedarConfig = cedarConfig;
 }

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

@@ -0,0 +1,46 @@
+// 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%;
+
+            h1 {
+                font-size: 24px;
+                font-weight: bold;
+                margin-top: 5px;
+            }
+
+            h2 {
+                display: none;
+            }
+
+        }
+    }
+
+    .action-container {
+        width: calc(100% - 85px);
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+    }
+
+    :global(.template-card) {
+        margin: 0 !important;
+    }
+}
+

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

@@ -1,13 +1,19 @@
-<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.cedarConfig}}
+            templateObject={{@templateObject}}
+            instanceObject={{@instanceObject}}
+        />
+    </div>
+    <div local-class='action-container'>
+        <Button
+            data-test-save-button
+            data-analytics-name='Save cedar metadata'
+            {{on 'click' this.save}}
+        >
+            {{ t 'cedar.editor.save-button' }}
+        </Button>
+    </div>
 </div>