Merge branch 'release/21.3.0'

Author: fabmiz

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';