[ENG-2467 ] Allow contributors to remove themselves via readonly contributor card (#1131)

* Allow read+write contributors to remove themselves via readonly contributor card * Remove unnecessary braces Co-authored-by: Fabrice Mizero <fabrice@cos.io> * Better use of test selectors Co-authored-by: Fabrice Mizero <fabrice@cos.io> * Make CR changes * Add acceptance tests Co-authored-by: Fabrice Mizero <fabrice@cos.io>

Author: brianjgeiger

lib/osf-components/addon/components/contributors/card/readonly/component.ts

@@ -1,10 +1,12 @@
 import { tagName } from '@ember-decorators/component';
 import Component from '@ember/component';
+import { inject as service } from '@ember/service';
 
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { layout } from 'ember-osf-web/decorators/component';
 import ContributorModel from 'ember-osf-web/models/contributor';
+import CurrentUser from 'ember-osf-web/services/current-user';
 import styles from './styles';
 import template from './template';
 
@@ -13,6 +15,7 @@ import template from './template';
 export default class ContributorsCardReadonly extends Component {
  // required
  contributor!: ContributorModel;
+ @service currentUser!: CurrentUser;
 
  @tracked showDropdown = false;
 

lib/osf-components/addon/components/contributors/card/readonly/styles.scss

@@ -8,6 +8,17 @@
 
 .CardSection {
  composes: CardSection from '../styles.scss';
+ max-width: 34%;
+}
+
+.CardSectionSmall {
+ composes: CardSection from '../styles.scss';
+ max-width: 16%;
+}
+
+.CardSectionXS {
+ composes: CardSection from '../styles.scss';
+ max-width: 8%;
 }
 
 .DropdownSection {

lib/osf-components/addon/components/contributors/card/readonly/template.hbs

@@ -1,5 +1,5 @@
 <div
- data-test-contributor-card
+ data-test-contributor-card={{@contributor.id}}
  data-analytics-scope='Contributor card'
  local-class='CardContainer'
 >
@@ -34,22 +34,40 @@
  </span>
  <span
  data-test-contributor-citation={{@contributor.id}}
- local-class='CardSection'
+ local-class='CardSectionSmall'
  >
  {{t (concat 'osf-components.contributors.citation.' @contributor.bibliographic)}}
  </span>
  <span
  data-test-contributor-caret={{@contributor.id}}
- data-analytics-name='{{if this.showDropdown 'Expand' 'Collapse'}} employment and education info'
- local-class='CardSection'
+ data-analytics-name='{{if this.showDropdown 'Collapse' 'Expand'}} employment and education info'
+ aria-label={{if this.showDropdown 
+ (t 'osf-components.contributors.educationAndEmployment.collapse')
+ (t 'osf-components.contributors.educationAndEmployment.expand')
+ }}
+ local-class='CardSectionXS'
  role='button'
  {{on 'click' this.toggleDropdown}}
  >
  <FaIcon
  @icon={{if this.showDropdown 'caret-up' 'caret-down'}}
  />
  </span>
+ <span local-class='CardSectionXS'>
+ {{#if (eq @contributor.users.id this.currentUser.user.id)}}
+ <DeleteButton
+ data-test-contributor-remove-self={{@contributor.id}}
+ @small={{true}}
+ @noBackground={{true}}
+ @delete={{fn @manager.removeContributor @contributor}}
+ @modalTitle={{t 'contributor_list.remove_contributor.confirm_remove.title'}}
+ @modalBody={{t 'contributor_list.remove_contributor.confirm_remove.body'}}
+ @confirmButtonText={{t 'contributor_list.remove_contributor.confirm_remove.button'}}
+ />
+ {{/if}}
+ </span>
  </div>
+</div>
  {{#if this.showDropdown}}
  <div data-test-contributor-card-dropdown local-class='DropdownSection'>
  <ul local-class='DropdownList'>
@@ -86,4 +104,3 @@
  </ul>
  </div>
  {{/if}}
-</div>

lib/osf-components/addon/components/contributors/list/template.hbs

@@ -1,6 +1,6 @@
 {{#let (get
  (hash
- readonly=(component 'contributors/card/readonly')
+ readonly=(component 'contributors/card/readonly' manager=@contributorsManager)
  editable=(component 'contributors/card/editable' manager=@contributorsManager)
  )
  @widgetMode

lib/osf-components/addon/components/contributors/manager/component.ts

@@ -1,6 +1,7 @@
 import { tagName } from '@ember-decorators/component';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import RouterService from '@ember/routing/router-service';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency-decorators';
@@ -10,15 +11,18 @@ import ContributorModel from 'ember-osf-web/models/contributor';
 import DraftRegistrationModel from 'ember-osf-web/models/draft-registration';
 import NodeModel from 'ember-osf-web/models/node';
 import { Permission } from 'ember-osf-web/models/osf-model';
+import CurrentUser from 'ember-osf-web/services/current-user';
 import captureException, { getApiErrorMessage } from 'ember-osf-web/utils/capture-exception';
 import Toast from 'ember-toastr/services/toast';
 import template from './template';
 
 @layout(template)
 @tagName('')
 export default class ContributorsManager extends Component {
+ @service currentUser!: CurrentUser;
  @service toast!: Toast;
  @service intl!: Intl;
+ @service router!: RouterService;
  node?: NodeModel | DraftRegistrationModel;
  @tracked contributors: ContributorModel[] = [];
  @tracked totalPage: number = 1;
@@ -103,16 +107,23 @@ export default class ContributorsManager extends Component {
  @task({ withTestWaiter: true, enqueue: true })
  removeContributor = task(
  function *(this: ContributorsManager, contributor: ContributorModel) {
+ const user = this.currentUser.get('user');
  try {
  yield contributor.destroyRecord();
  this.contributors.removeObject(contributor);
- const contributorName = contributor.unregisteredContributor
- ? contributor.unregisteredContributor
- : contributor.users.get('fullName');
- this.toast.success(this.intl.t(
- 'osf-components.contributors.removeContributor.success',
- { contributorName, htmlSafe: true },
- ));
+
+ if (user && user.id === contributor.users.get('id')) {
+ this.toast.success(this.intl.t('contributor_list.remove_contributor.success'));
+ this.router.transitionTo('home');
+ } else {
+ const contributorName = contributor.unregisteredContributor
+ ? contributor.unregisteredContributor
+ : contributor.users.get('fullName');
+ this.toast.success(this.intl.t(
+ 'osf-components.contributors.removeContributor.success',
+ { contributorName, htmlSafe: true },
+ ));
+ }
  } catch (e) {
  const apiError = getApiErrorMessage(e);
  const errorHeading = this.intl.t('osf-components.contributors.removeContributor.errorHeading');

mirage/scenarios/default.ts

@@ -72,12 +72,18 @@ function registrationScenario(
 
  const rootNode = server.create('node', {
  public: false,
- contributors: server.createList('contributor', 11),
+ contributors: server.createList('contributor', 10),
  currentUserPermissions: [Permission.Admin],
  }, 'withFiles', 'withStorage');
  rootNode.update({
  storage: server.create('node-storage', { storageLimitStatus: StorageStatus.OVER_PRIVATE }),
  });
+ server.create('contributor', {
+ node: rootNode,
+ users: currentUser,
+ permission: Permission.Admin,
+ index: 0,
+ });
 
  const childNodeA = server.create('node', { parent: rootNode });
  server.create('node', { parent: childNodeA });

tests/engines/registries/acceptance/draft/draft-test.ts

@@ -15,6 +15,7 @@ import { setBreakpoint } from 'ember-responsive/test-support';
 import { TestContext } from 'ember-test-helpers';
 import { module, test } from 'qunit';
 
+import { Permission } from 'ember-osf-web/models/osf-model';
 import { visit } from 'ember-osf-web/tests/helpers';
 import { setupEngineApplicationTest } from 'ember-osf-web/tests/helpers/engines';
 import { deserializeResponseKey } from 'ember-osf-web/transforms/registration-response-key';
@@ -397,7 +398,73 @@ module('Registries | Acceptance | draft form', hooks => {
  assert.equal(currentURL(), '/dashboard', 'user is redirected to /dashboard');
  });
 
- test('removeMe fails', async assert => {
+ test('metadata: contributor can remove herself', async assert => {
+ const currentUser = server.create('user', 'loggedIn');
+ const registrationSchema = server.schema.registrationSchemas.find('testSchema');
+ const branchedFrom = server.create('node');
+ const thisContributor = server.create('contributor', {
+ users: currentUser,
+ index: 0,
+ node: branchedFrom,
+ permission: Permission.Write,
+ });
+ server.createList('contributor', 1, { node: branchedFrom });
+ const draftRegistration = server.create('draft-registration',
+ { registrationSchema, initiator: currentUser, branchedFrom });
+
+ await visit(`/registries/drafts/${draftRegistration.id}/metadata`);
+
+ assert.dom(`[data-test-contributor-remove-self="${thisContributor.id}"] > button`)
+ .isVisible('remove me button is visible');
+ await click(`[data-test-contributor-remove-self="${thisContributor.id}"] > button`);
+
+ assert.dom('.modal-content').isVisible('removeMe hard-confirm modal is visible');
+ assert.dom('[data-test-confirm-delete]').isVisible('removeMe hard-confirm modal has confirm button');
+ await percySnapshot(assert);
+
+ await click('[data-test-confirm-delete]');
+ await settled();
+ assert.equal(currentURL(), '/dashboard', 'user is redirected to /dashboard');
+ });
+
+ test('metadata: removeMe fails', async assert => {
+ const currentUser = server.create('user', 'loggedIn');
+ const registrationSchema = server.schema.registrationSchemas.find('testSchema');
+ const branchedFrom = server.create('node');
+ const thisContributor = server.create('contributor', {
+ users: currentUser,
+ index: 0,
+ node: branchedFrom,
+ permission: Permission.Write,
+ });
+ server.createList('contributor', 1, { node: branchedFrom });
+ const draftRegistration = server.create('draft-registration',
+ { registrationSchema, initiator: currentUser, branchedFrom });
+
+ await visit(`/registries/drafts/${draftRegistration.id}/metadata`);
+
+ assert.dom(`[data-test-contributor-remove-self="${thisContributor.id}"] > button`)
+ .isVisible('remove me button is visible');
+ await click(`[data-test-contributor-remove-self="${thisContributor.id}"] > button`);
+
+ assert.dom('.modal-content').isVisible('removeMe hard-confirm modal is visible');
+ assert.dom('[data-test-confirm-delete]').isVisible('removeMe hard-confirm modal has confirm button');
+
+ server.namespace = '/v2';
+ server.del('/nodes/:parentID/contributors/:id', () => ({
+ errors: [{ detail: 'Error occured' }],
+ }), 400);
+
+ await click('[data-test-confirm-delete]');
+ const errorHeading = t('osf-components.contributors.removeContributor.errorHeading');
+ const errorMessage = `${errorHeading}Error occured`;
+ assert.dom('#toast-container', document as unknown as Element).hasTextContaining(
+ stripHtmlTags(errorMessage.toString()),
+ 'Toast error message shows; has the right text',
+ );
+ });
+
+ test('review: removeMe fails', async assert => {
  const currentUser = server.create('user', 'loggedIn');
  const registrationSchema = server.schema.registrationSchemas.find('testSchema');
  const branchedFrom = server.create('node');

tests/integration/components/contributors/component-test.ts

@@ -3,6 +3,7 @@ import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import { setupIntl, t } from 'ember-intl/test-support';
 import { Permission } from 'ember-osf-web/models/osf-model';
+import CurrentUser from 'ember-osf-web/services/current-user';
 import { selectChoose } from 'ember-power-select/test-support';
 import { clickTrigger } from 'ember-power-select/test-support/helpers';
 import { setupRenderingTest } from 'ember-qunit';
@@ -12,13 +13,18 @@ import hbs from 'htmlbars-inline-precompile';
 import { module, skip, test } from 'qunit';
 import { OsfLinkRouterStub } from '../../helpers/osf-link-router-stub';
 
+interface ThisTestContext extends TestContext {
+ currentUser: CurrentUser;
+}
+
 module('Integration | Component | contributors', hooks => {
  setupRenderingTest(hooks);
  setupMirage(hooks);
  setupIntl(hooks);
 
- hooks.beforeEach(function(this: TestContext) {
+ hooks.beforeEach(function(this: ThisTestContext) {
  this.store = this.owner.lookup('service:store');
+ this.currentUser = this.owner.lookup('service:current-user');
  this.owner.register('service:router', OsfLinkRouterStub);
  server.loadFixtures('schema-blocks');
  server.loadFixtures('registration-schemas');
@@ -96,6 +102,51 @@ module('Integration | Component | contributors', hooks => {
  assert.ok(true, 'No a11y errors on page');
  });
 
+ test('read-only contributor card can remove self as contributor', async function(assert) {
+ const currentUser = server.create('user', { id: 'sprout' });
+ const currentUserModel = await this.store.findRecord('user', 'sprout');
+ this.owner.lookup('service:current-user').setProperties({
+ user: currentUserModel, currentUserId: currentUserModel.id,
+ });
+
+ const firstContributor = server.create('contributor', {
+ fullName: 'First Contributor',
+ index: 0,
+ id: 'Remove',
+ users: currentUser,
+ });
+ const secondContributor = server.create('contributor', {
+ fullName: 'Second Contributor',
+ index: 1,
+ id: 'Keep',
+ });
+ const draftRegistration = server.create('draft-registration', {
+ contributors: [firstContributor, secondContributor],
+ });
+ const registrationModel = await this.store.findRecord('draft-registration', draftRegistration.id);
+ this.set('node', registrationModel);
+ await render(hbs`<Contributors::Widget @node={{this.node}} @widgetMode='readonly' />`);
+ assert.dom('[data-test-contributor-card="Keep"]').isVisible(
+ '"Keep" card is visible before contributor removal',
+ );
+ assert.dom('[data-test-contributor-card="Remove"]').isVisible(
+ '"Remove" card is visible before contributor removal',
+ );
+ assert.dom('[data-test-contributor-remove-self="Remove"]')
+ .exists('There is a delete button for currentUser contributor');
+ assert.dom('[data-test-contributor-remove-self="Keep"]')
+ .doesNotExist('There is no delete button for non-currentUser contributor');
+ await click('[data-test-contributor-remove-self="Remove"] > button');
+ await click('[data-test-confirm-delete]');
+
+ assert.dom('[data-test-contributor-card="Keep"]').isVisible(
+ '"Keep" card is visible after contributor removal',
+ );
+ assert.dom('[data-test-contributor-card="Remove"]').isNotVisible(
+ '"Remove" card is not visible after contributor removal',
+ );
+ });
+
  test('editable user card renders', async function(assert) {
  const draftRegistration = server.create('draft-registration');
  const contributor = server.create('contributor', {

translations/en-us.yml

@@ -1624,6 +1624,9 @@ osf-components:
  success: 'Contributor order updated.'
  noEducation: 'No education history to show'
  noEmployment: 'No employment history to show'
+ educationAndEmployment:
+ expand: 'Expand employment and education info'
+ collapse: 'Collapse employment and education info'
  removeContributor:
  confirmRemove:
  title: 'Remove contributor'