Feature/cedar integration (#2143)

* [ENG-4908] Prototype CEE (#2050)

* prototype CEEE

* CR followup

* fix args names

* [ENG-4843] [ENG-5056] [ENG-5057] [ENG-5058] [ENG-5059] Feature/cedar integration (#2091)

* Added the cedar metadata template model

* Added the new models for cedar-metadata-template and record

* Fixed some linting issues

* Added the adapters and serializers for cedar metadata template and record

* Fixed some typos and ignorance with serializers, api-contracts, etc

* Fixed the namespace

* Fixed the all the relationships

* [ENG-4845] Updates to convert the currect guid-metadata to tab based (#2093)

* Updates to convert the currect guid-metadata to tab based

* Added the tabbing system to the metadata page

* Initial commit for geting the mirage serializers to work for cedar-metadata-records

* Updates from PR comments

* [ENG-5065] Add a new metadata details (view only) component (#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

* Inital metadata add route

* Added more information to select a schema

* Added missing files

* Fixed the pagination on read-only templates

* Fixed some tests

* Fixed a typo

* Updates per PR comments

* Updates per PR requests

* Initial commit to add the cedar template

* Added a new component to handle the cedar editor

* Styling of the cedar editor

* For debugging added the configuration to the component

* Template rendering

* Added more cedar templates and updated the config

* Fixes per the PR

* Updates based on the PR

* Removed the unnecessary metadata-select component and passed in isMobile

* Added metadata information to the tabs

* Fixed the title

* add cedar assets (#2104)

* artifact viewer prototype

* Added biosample record, removed unnecessary components and hooked up the initial editor post on save

* fixed the types by adding singular and plurals and updated the save to work for create and patch

* Updates from the PR based on comments. Much better with consistent naming of variables

* Updates for PR

* Updates for the PR

* Added a loading indicator, disabled the button and redirected the route

* Router changes for Yuhuai

* modify route structure

* Added a draft status

* Added visualization for draft metadata

* Added better text for published metadata and analytics

* Added the final touch to get the recordId and display the correct record

* Fixed two tests

* Fixed another test

* Initial PR comment updates

* Additional PR comment updates

* The last of the PR comments

* Updates from PR requests

* Added visualization for draft metadata

* Added more edit flow components

* Additional updates

* Updates to make a better flow and have the editor display persisted data

* Finishing touches on the edit flow

* Added a toast message to handle saving errors

* Added a cancel button

* Editted a merge mistake

* A linting issue

* Updates for the linter and PR comments

* Additional updates

* Updates based on the PR

* Removed the async

* Added a better isPersisting handler

* Update to the cedar metadata editor flow

* update versions (#2114)

* Initial updates to port node::metadata to registration

* Updated the routes

* Initial commit for registrations and mirage scenarios

* Updates to some files, mostly mirage

* Moved metadata components to osf-components, removed the guid-node metadata components, generized some components

* Added a component for the detail page

* Converted the metadata add page to be a component

* Fixed a test

* Fixed additional tests

* Fixed a flaky test

* Okay ... to similar tests

* Refactored based on PR comments

* One last PR Suggestions

* Initial conversion to add cedar metadata to files

* More component creation

* Updates to get files to work

* fix relationship

* The tabs are displaying and the cedar artifact viewer is working

* Typo for a test failue

* Updates for the PR

* Fixed a camel-case class names

* Added the ability to add a cedar template to a file

* Added updates for navigation, scenarios and mobile

* Additional mobile formatting

* Fixed two tests

* Removed a test that did nothing

* Updates for the PR

* Added everything to fix publish

* Hopeful fix for the tests

* Added permissions

* Updated the if statement for permissions

* Another quick update to make mirage scenarios more realistic

* Updates for PR suggestions

* Missed a suggestion

* Updates for Yuhuais comments

* New flow for downloading a cedar template

* Updates to flow, css and verbiage

* One more tooltip

* Updates to fix the guid-file tabs

* Added initial update for guid-file

* Added the title updates to registries

* Updates to display the name of the file

* add terminologyIntegratedSearchUrl (#2126)

* Change `findAll` to `query` to hide inactive templates (#2128)

* change findAll to query

* use schema:description and fallback to description when schema:description is not available

* use schema:description and fallback to description when schema:description is not available--amend

* metadataDownload to metadata_download

* Added a share icon and fixed the routing to reflect the current tab (#2127)

* Added a share icon and fixed the routing to reflect the current tab

* Removed from files

* Style updates based on PR suggestions from Futa

* Fixed for an issue between mirage and BE

* Fixes for the file page overrunning

* Fixed a translations for a notion issue

* Updates to translations

* upgrade CEE to 1.0.15

* Fixed some issues

* Another quick fix for mobile

* Another quick mobile css fix

* Another quick mobile css fix

* Quick naming convention fix

* Oops missing translation update

* A late addition to fix a flow issue when adding

* Removed the async/await on the cancel button

* upgrade CEE to 1.0.16 (#2135)

* Updates for Cedar Requests from Product (#2136)

* Moved the "Select a different template" button

* Fixed a typo on including a component

* Added the async on route transition

* Updates to disable adding a duplicate record

* Added select disable functionality to registries

* Finished the disable feature for files and fixed some other nuisances

* Added sorting and moved the selected tab to the first

* upgrade CEE to 1.1.0

* Fixed the persist because the parent route was not run on an add or edit

* Add an aria label

* Fix color contrast issue

* Enabled the embedding of templates on cedar records (#2141)

* Enabled the embedding of templates on cedar records

* Fixed a discepancy on the tab views

* More one fix for consistency

* Overwrite white-space rule for tooltips from cedar (#2146)

* Go to page not found when encountering errors. (#2147)

* fixes

* fix test errors

* Update styling (#2149)

* Upgrade cee version to 1.2.1. Listen to more events to trigger validation (#2150)

* upgrade cee version. listen to more events to trigger validation

* change to pointerover

---------

Co-authored-by: Lord Business <[email protected]>
Co-authored-by: Brian Pilati <[email protected]>
Co-authored-by: Futa Ikeda <[email protected]>
Co-authored-by: futa-ikeda <[email protected]>

Author: 3 people

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' fileName=@model.displayName}}
+                </OsfLink>
+            {{/if}}
+        </div>
+    </div>
+</div>

app/guid-file/controller.ts app/guid-file/index/controller.tsapp/guid-file/controller.ts renamed to 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,
+        };
+    }
+}