Merge branch 'release/21.3.0'

CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [21.3.0] - 2021-04-23
+### Added
+- support for provider-specific (editable/read-only) registration metadata fields
+
+### Changed
+- DX: clean-up mirage scenarios
+
+### Fixed
+- tablet view of metadata panel on the registry overview page
+
 ## [21.2.0] - 2021-04-19
 ### Added
 - field and relationship for custom metadata field and its schema to registration providers
@@ -1709,7 +1719,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 - Quick Files
 
-[Unreleased]: https://github.com/CenterForOpenScience/ember-osf-web/compare/21.2.0...develop
+[Unreleased]: https://github.com/CenterForOpenScience/ember-osf-web/compare/21.3.0...develop
+[21.3.0]: https://github.com/CenterForOpenScience/ember-osf-web/releases/tag/21.3.0
 [21.2.0]: https://github.com/CenterForOpenScience/ember-osf-web/releases/tag/21.2.0
 [21.1.1]: https://github.com/CenterForOpenScience/ember-osf-web/releases/tag/21.1.1
 [21.1.0]: https://github.com/CenterForOpenScience/ember-osf-web/releases/tag/21.1.0

lib/osf-components/addon/components/editable-field/provider-metadata-manager/component.ts

@@ -0,0 +1,101 @@
+import { action } from '@ember/object';
+import { and, reads } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency-decorators';
+import DS from 'ember-data';
+import Intl from 'ember-intl/services/intl';
+import Toast from 'ember-toastr/services/toast';
+
+import Registration, { ProviderMetadata } from 'ember-osf-web/models/registration';
+import CurrentUserService from 'ember-osf-web/services/current-user';
+import captureException, { getApiErrorMessage } from 'ember-osf-web/utils/capture-exception';
+
+export interface Args {
+    registration: Registration;
+}
+
+export interface ProviderMetadataManager {
+    save: () => void;
+    cancel: () => void;
+    startEditing: () => void;
+    inEditMode: boolean;
+    userCanEdit: boolean;
+    shouldShowField: () => boolean;
+    currentProviderMetadata: ProviderMetadata[];
+    providerSpecificMetadata: ProviderMetadata[];
+    isSaving: () => boolean;
+    fieldIsEmpty: () => boolean;
+    emptyFieldText: string;
+}
+
+function compareFieldValues(isEmpty: boolean, item: ProviderMetadata) {
+    return isEmpty && !item.field_value;
+}
+
+function deepCopy(providerMetadata: ProviderMetadata[]) {
+    return JSON.parse(JSON.stringify(providerMetadata));
+}
+
+export default class ProviderMetadataManagerComponent extends Component<Args> {
+    @service currentUser!: CurrentUserService;
+    @service intl!: Intl;
+    @service store!: DS.Store;
+    @service toast!: Toast;
+
+    @task({ withTestWaiter: true })
+    save = task(function *(this: ProviderMetadataManagerComponent) {
+        if (this.args.registration) {
+            try {
+                this.args.registration.providerSpecificMetadata = deepCopy(this.currentProviderMetadata);
+                yield this.args.registration.save();
+            } catch (e) {
+                const errorMessage = this.intl.t('registries.registration_metadata.edit_provider_metadata.error');
+                captureException(e, { errorMessage });
+                this.args.registration.rollbackAttributes();
+                this.toast.error(getApiErrorMessage(e), errorMessage);
+                throw e;
+            }
+            this.requestedEditMode = false;
+            this.toast.success(this.intl.t('registries.registration_metadata.edit_provider_metadata.success'));
+        }
+    });
+
+    @tracked currentProviderMetadata: ProviderMetadata[] = [];
+    @tracked requestedEditMode: boolean = false;
+
+    @reads('args.registration.provider.currentUserCanReview') userCanEdit!: boolean;
+    @and('userCanEdit', 'requestedEditMode') inEditMode!: boolean;
+
+    constructor(owner: unknown, args: Args) {
+        super(owner, args);
+        this.setCurrentProviderMetadata();
+    }
+
+    get fieldIsEmpty() {
+        if (this.args.registration && this.args.registration.providerSpecificMetadata) {
+            return this.args.registration.providerSpecificMetadata.reduce(compareFieldValues, true);
+        }
+        return true;
+    }
+
+    get shouldShowField() {
+        return this.userCanEdit || !this.fieldIsEmpty;
+    }
+
+    @action
+    startEditing() {
+        this.requestedEditMode = true;
+    }
+
+    @action
+    cancel() {
+        this.setCurrentProviderMetadata();
+        this.requestedEditMode = false;
+    }
+
+    setCurrentProviderMetadata() {
+        this.currentProviderMetadata = deepCopy(this.args.registration.providerSpecificMetadata);
+    }
+}

lib/osf-components/addon/components/editable-field/provider-metadata-manager/template.hbs

@@ -0,0 +1,13 @@
+{{yield (hash
+    save=(perform this.save)
+    cancel=this.cancel
+    startEditing=this.startEditing
+    inEditMode=this.inEditMode
+    userCanEdit=this.userCanEdit
+    shouldShowField=this.shouldShowField
+    currentProviderMetadata=this.currentProviderMetadata
+    providerSpecificMetadata=@registration.providerSpecificMetadata
+    isSaving=this.save.isRunning
+    fieldIsEmpty=this.fieldIsEmpty
+    emptyFieldText=(t 'registries.registration_metadata.no_provider_metadata')
+)}}

lib/osf-components/addon/components/gutters/styles.scss

@@ -40,7 +40,6 @@
         // Display a box shadow to either side when opened
         &[data-gutter-closed='false'] {
             box-shadow: ($modifier * -5px) 0 5px -4px $color-shadow-dark;
-            overflow: visible;
         }
 
         // Slide off the page when closed

lib/osf-components/addon/components/provider-metadata-display/styles.scss

@@ -0,0 +1,11 @@
+.ProviderMetadata__field {
+    word-break: break-word;
+}
+
+.ProviderMetadataWrapper {
+    position: relative;
+
+    h5 {
+        margin-bottom: 0;
+    }
+}

lib/osf-components/addon/components/provider-metadata-display/template.hbs

@@ -0,0 +1,17 @@
+<div 
+    data-test-registration-provider-metadata-wrapper={{@field.field_name}}
+    local-class='ProviderMetadataWrapper ProviderMetadata__field'
+    ...attributes>
+
+    <h5
+        data-test-registration-provider-metadata-field-name={{@field.field_name}}
+    >
+        {{@field.field_name}}:
+    </h5>
+    <span
+        data-test-registration-provider-metadata-field-value={{@field.field_name}}
+        local-class='ProviderMetadataValue'
+    >
+        {{@field.field_value}}
+    </span>
+</div>

lib/osf-components/addon/components/provider-metadata-editable/styles.scss

@@ -0,0 +1,6 @@
+.EditProviderMetadata {
+    input {
+        background-color: #ecf0f1;
+        margin-bottom: 20px;
+    }
+}

lib/osf-components/addon/components/provider-metadata-editable/template.hbs

@@ -0,0 +1,17 @@
+<div 
+    local-class='EditProviderMetadata'
+    data-test-provider-metadata-edit-div={{@field.field_name}}
+>
+    <span
+        data-test-provider-metadata-edit-label={{@field.field_name}}
+        local-class='ProviderMetadataLabel'
+    >
+        {{@field.field_name}}
+    </span>
+    {{input
+        data-test-provider-metadata-edit-input=@field.field_name
+        class='form-control'
+        value=@field.field_value
+        disabled=@manager.save.isRunning
+    }}
+</div>

lib/osf-components/app/components/editable-field/provider-metadata-manager/component.js

@@ -0,0 +1 @@
+export { default } from 'osf-components/components/editable-field/provider-metadata-manager/component';

lib/osf-components/app/components/editable-field/provider-metadata-manager/template.js

@@ -0,0 +1 @@
+export { default } from 'osf-components/components/editable-field/provider-metadata-manager/template';

lib/osf-components/app/components/provider-metadata-display/template.js

@@ -0,0 +1 @@
+export { default } from 'osf-components/components/provider-metadata-display/template';

lib/osf-components/app/components/provider-metadata-editable/template.js

@@ -0,0 +1 @@
+export { default } from 'osf-components/components/provider-metadata-editable/template';

lib/registries/addon/components/registries-metadata/template.hbs

@@ -76,7 +76,34 @@
             </OsfLink>
         </div>
     </div>
-
+    {{#if this.registration.providerSpecificMetadata}}
+        <div local-class='Field'>
+            <EditableField::ProviderMetadataManager
+                @registration={{this.registration}} as |providerMetadataManager|
+            >
+                <EditableField
+                    data-test-editable-field-provider-metadata
+                    data-analytics-scope='providerMetadata'
+                    @manager={{providerMetadataManager}}
+                    @title={{t 'registries.registration_metadata.provider_specific_metadata'}}
+                    @name='metadata'
+                    as |field|
+                >
+                    {{#each field.manager.currentProviderMetadata as |metadataField|}}
+                        <field.edit>
+                            <ProviderMetadataEditable @field={{metadataField}} @manager={{providerMetadataManager}} />
+                        </field.edit>
+                    {{/each}}
+                    {{#each field.manager.providerSpecificMetadata as |metadataField|}}
+                        <field.display>
+                            <ProviderMetadataDisplay @field={{metadataField}} @manager={{providerMetadataManager}} />
+                        </field.display>
+                    {{/each}}
+
+                </EditableField>
+            </EditableField::ProviderMetadataManager>
+        </div>
+    {{/if}}
     {{#if this.registration.iaUrl}}
         <div local-class='Field'>
             <h4>{{t 'registries.registration_metadata.internet_archive_link'}}</h4>

mirage/scenarios/collections.ts

@@ -0,0 +1,50 @@
+import { ModelInstance, Server } from 'ember-cli-mirage';
+
+import { Permission } from 'ember-osf-web/models/osf-model';
+import User from 'ember-osf-web/models/user';
+
+export function collectionScenario(server: Server, currentUser: ModelInstance<User>) {
+    const licensesAcceptable = server.schema.licenses.all().models;
+    const primaryCollection = server.create('collection');
+    const nodeToBeAdded = server.create('node', {
+        title: 'Node to be added to collection',
+        currentUserPermissions: Object.values(Permission),
+    });
+    server.create('contributor', {
+        node: nodeToBeAdded,
+        users: currentUser,
+        index: 0,
+    });
+    const nodeAdded = server.create('node', {
+        description: 'A random description',
+        title: 'Added to collection',
+        license: licensesAcceptable[0],
+        currentUserPermissions: Object.values(Permission),
+    });
+    server.create('contributor', {
+        node: nodeAdded,
+        users: currentUser,
+        index: 0,
+    });
+    server.create('collected-metadatum', {
+        creator: currentUser,
+        guid: nodeAdded,
+        id: nodeAdded.id,
+        collection: primaryCollection,
+    });
+    server.create('collected-metadatum', {
+        creator: currentUser,
+        guid: server.create('node', 'withContributors'),
+        collection: primaryCollection,
+    });
+    server.create('collected-metadatum', {
+        creator: currentUser,
+        guid: server.create('node', 'withContributors'),
+        collection: primaryCollection,
+    });
+    server.create('collection-provider', {
+        id: 'studyswap',
+        primaryCollection,
+        licensesAcceptable,
+    });
+}

mirage/scenarios/dashboard.ts

@@ -0,0 +1,52 @@
+import { ModelInstance, Server } from 'ember-cli-mirage';
+import config from 'ember-get-config';
+
+import { Permission } from 'ember-osf-web/models/osf-model';
+import User from 'ember-osf-web/models/user';
+
+const {
+    dashboard: {
+        noteworthyNode,
+        popularNode,
+    },
+} = config;
+
+export function dashboardScenario(server: Server, currentUser: ModelInstance<User>) {
+    server.create('user-setting', { user: currentUser });
+    const firstNode = server.create('node', 'withAffiliatedInstitutions');
+    server.create('contributor', { node: firstNode, users: currentUser, index: 0 });
+    const nodes = server.createList('node', 10, {
+        currentUserPermissions: Object.values(Permission),
+    }, 'withContributors');
+    for (const node of nodes) {
+        server.create('contributor', {
+            node,
+            users: currentUser,
+            permission: Permission.Admin,
+            index: 0,
+        });
+    }
+
+    server.create('node', {
+        id: noteworthyNode,
+        linkedNodes: nodes.slice(0, 5),
+        title: 'NNW',
+        currentUserPermissions: [Permission.Read],
+    });
+    server.create('node', {
+        id: popularNode,
+        linkedNodes: nodes.slice(5, 10),
+        title: 'Popular',
+        currentUserPermissions: [Permission.Read],
+    });
+    for (const node of nodes.slice(4, 10)) {
+        server.create('contributor', { node, users: currentUser, index: 11 });
+    }
+
+    // NOTE: Some institutions are already created by this point
+    server.createList('institution', 20);
+    // Create a specific institution to test institutional dashboard with; should be ID 29 at this point
+    server.create('institution', {
+        id: 'has-users',
+    }, 'withMetrics');
+}