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]>
CenterForOpenScience · Feb 22, 2024 · f5c0c89 · f5c0c89
1 parent f7db71a
commit f5c0c89
Show file tree

Hide file tree

Showing 135 changed files with 42,417 additions and 770 deletions.
diff --git a/app/adapters/cedar-metadata-record.ts b/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
+}
diff --git a/app/adapters/cedar-metadata-template.ts b/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
+}
diff --git a/app/config/environment.d.ts b/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[];

diff --git a/app/guid-file/-components/file-detail-layout/styles.scss b/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 {

diff --git a/app/guid-file/-components/file-detail-layout/template.hbs b/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>

diff --git a/app/guid-file/-components/file-header/styles.scss b/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;
+            }
+        }
+    }
+}
diff --git a/app/guid-file/-components/file-header/template.hbs b/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>
diff --git a/app/guid-file/controller.ts → app/guid-file/index/controller.ts b/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'));
     }
 }
diff --git a/app/guid-file/index/route.ts b/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,
+        };
+    }
+}