Feature/cedar integration

app/adapters/cedar-metadata-record.ts

@@ -0,0 +1,11 @@
+import OsfAdapter from './osf-adapter';
+
+export default class CedarMetadataRecordAdapter extends OsfAdapter {
+    namespace = '_';
+}
+
+declare module 'ember-data/types/registries/adapter' {
+    export default interface AdapterRegistry {
+        'cedar-metadata-record': CedarMetadataRecordAdapter;
+    } // eslint-disable-line semi
+}

app/adapters/cedar-metadata-template.ts

@@ -0,0 +1,11 @@
+import OsfAdapter from './osf-adapter';
+
+export default class CedarMetadataTemplateAdapter extends OsfAdapter {
+    namespace = '_';
+}
+
+declare module 'ember-data/types/registries/adapter' {
+    export default interface AdapterRegistry {
+        'cedar-metadata-template': CedarMetadataTemplateAdapter;
+    } // eslint-disable-line semi
+}

app/config/environment.d.ts

@@ -21,6 +21,7 @@ declare const config: {
     WATER_BUTLER_ENABLED: boolean;
     plauditWidgetUrl: string,
     environment: any;
+    cedarConfig: any;
     lintOnBuild: boolean;
     testsEnabled: boolean;
     sourcemapsEnabled: boolean;
@@ -31,6 +32,39 @@ declare const config: {
     assetsPrefix: string;
     sentryDSN: string | null;
     googleTagManagerId: string | null;
+    cedarConfig: {
+        viewerConfig: {
+            showHeader: boolean,
+            showFooter: boolean,
+            expandedSampleTemplateLinks: boolean,
+            showSampleTemplateLinks: boolean,
+            defaultLanguage: string,
+            showTemplateData: boolean,
+            showInstanceData: 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,
+            terminologyIntegratedSearchUrl: string,
+        },
+    }
     sentryOptions: {
         release?: string;
         ignoreErrors: string[];

app/guid-file/-components/file-detail-layout/styles.scss

@@ -1,18 +1,30 @@
+// stylelint-disable max-nesting-depth, selector-max-compound-selectors
+
 .container {
     display: flex;
     flex-direction: row;
     flex-grow: 1;
 }
 
 .main-column {
-    flex-grow: 3;
     z-index: 1;
+    width: 70%;
+    min-width: 300px;
+
+    &.mobile {
+        width: 100%;
+    }
+
+    &.is-closed {
+        flex: 1;
+        width: calc(100% - 72px);
+    }
 
     h3 {
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
-        max-width: 70vw;
+        width: 70%;
     }
 }
 
@@ -22,25 +34,28 @@
     flex-basis: 300px;
     flex-direction: column;
     flex-grow: 1;
-    width: 28vw;
+    width: calc(30% - 72px);
+    min-width: 400px;
 
     &.is-closed {
         display: none;
     }
 }
 
 .right-buttons {
-    @media (max-width: 767px) {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-evenly;
-        border-top: 1px solid #ddd;
-    }
     flex-grow: 0;
     display: flex;
     flex-direction: column;
     border-left: 1px solid #ddd;
     z-index: 1;
+    width: 72px;
+    min-width: 72px;
+
+    &.mobile {
+        flex-direction: row;
+        width: 100%;
+        margin-bottom: 10px;
+    }
 }
 
 .slide-in {

app/guid-file/-components/file-detail-layout/template.hbs

@@ -1,8 +1,8 @@
 <div local-class='container'>
     {{#if @isMobile}}
-        <div local-class='main-column'>
+        <div local-class='main-column mobile'>
             {{yield to='header'}}
-            <div local-class='right-buttons'>
+            <div local-class='right-buttons mobile'>
                 {{yield to='rightButtons'}}
             </div>
             <div>
@@ -14,7 +14,8 @@
             </div>
         </div>
     {{else}}
-        <div local-class='main-column'>
+
+        <div local-class='main-column {{if @rightColumnClosed 'is-closed'}}'>
             {{yield to='header'}}
             {{yield to='body'}}
         </div>

app/guid-file/-components/file-header/styles.scss

@@ -0,0 +1,64 @@
+// stylelint-disable max-nesting-depth, selector-max-compound-selectors
+
+.file-header-container {
+    width: 100%;
+
+    .flex-container-row {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        padding: 0 20px 20px;
+
+        h2 {
+            height: 40px;
+            width: 70%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .return-container {
+            width: 30%;
+            height: 70px;
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            align-items: center; 
+        }
+    }
+
+    .project-link-header {
+        padding-bottom: 5px;
+
+        .project-link {
+            margin: 20px;
+        }
+    }
+
+    &.mobile {
+        padding: 0;
+
+        .flex-container-row {
+            padding: 0;
+            flex-direction: column;
+
+            h2,
+            .return-container {
+                width: 100%;
+                height: fit-content;
+                justify-content: flex-start;
+            }
+
+            h2 {
+                margin-top: 0;
+            }
+        } 
+
+        .project-link-header {
+            .project-link {
+                margin: 0;
+            }
+        }
+    }
+}

app/guid-file/-components/file-header/template.hbs

@@ -0,0 +1,40 @@
+<div local-class='file-header-container {{if @isMobile 'mobile'}}'>
+    <h3 local-class='project-link-header'>
+        <OsfLink
+            data-test-project-link
+            data-analytics-name='Linked project'
+            local-class='project-link'
+            @route={{if (eq @model.fileModel.target.type 'registrations') 'guid-registration' 'guid-node'}}
+            @models={{array @model.fileModel.target.id}}
+        >
+            {{@model.fileModel.target.title}}
+        </OsfLink>
+    </h3>
+    <div local-class='flex-container-row'>
+        <h2 data-test-filename>
+            {{@model.displayName}}
+            {{#if @viewedVersion}}
+                ({{t 'general.version'}}: {{@viewedVersion}})
+            {{/if}}
+        </h2>
+        <div local-class='return-container'>
+            {{#if @displayFileActions}}
+                <FileActionsMenu
+                    @item={{@model}}
+                    @onDelete={{@onDelete}}
+                    @allowRename={{false}}
+                    @addonsEnabled={{@model.fileModel.target.addonsEnabled}}
+                />
+            {{else}}
+                <OsfLink
+                    data-test-return-to-metadata
+                    data-analytics-name='Return from cedar metadata template selection'
+                    @route='guid-file.index'
+                    @models={{array @model.fileModel.id}}
+                >
+                    {{ t 'file-detail.metadata.return-to-file' [email protected]}}
+                </OsfLink>
+            {{/if}}
+        </div>
+    </div>
+</div>

app/guid-file/controller.ts → app/guid-file/index/controller.ts

@@ -40,8 +40,8 @@ export default class GuidFile extends Controller {
 
     @action
     toggleRevisions() {
-        if (!this.model.waterButlerRevisions) {
-            taskFor(this.model.getRevisions).perform();
+        if (!this.model.file.waterButlerRevisions) {
+            taskFor(this.model.file.getRevisions).perform();
         }
         if (this.isMobile) {
             this.revisionsOpened = true;
@@ -113,6 +113,6 @@ export default class GuidFile extends Controller {
 
     @action
     onDelete() {
-        this.router.transitionTo('guid-node.files', this.model.fileModel.target.get('id'));
+        this.router.transitionTo('guid-node.files', this.model.file.fileModel.target.get('id'));
     }
 }

app/guid-file/index/route.ts

@@ -0,0 +1,38 @@
+import Store from '@ember-data/store';
+import Route from '@ember/routing/route';
+import RouterService from '@ember/routing/router-service';
+import { inject as service } from '@ember/service';
+import CedarMetadataRecordModel from 'ember-osf-web/models/cedar-metadata-record';
+import CedarMetadataTemplateModel from 'ember-osf-web/models/cedar-metadata-template';
+
+
+export default class MetadataDetailRoute extends Route {
+    @service store!: Store;
+    @service router!: RouterService;
+
+    async model() {
+        const file = this.modelFor('guid-file');
+        const defaultIndex = 0;
+        const cedarMetadataRecords = await file.fileModel.queryHasMany('cedarMetadataRecords', {
+            'page[size]': 20,
+        });
+
+        for(const cedarMetadataRecord of cedarMetadataRecords) {
+            const template = await cedarMetadataRecord.template as CedarMetadataTemplateModel;
+            template.recordCreated = true;
+            cedarMetadataRecord.templateName = template.schemaName;
+        }
+
+        cedarMetadataRecords.sort(
+            (a: CedarMetadataRecordModel, b: CedarMetadataRecordModel) =>
+                a.templateName > b.templateName ? 1 : -1,
+        );
+
+
+        return {
+            file,
+            cedarMetadataRecords,
+            defaultIndex,
+        };
+    }
+}