[No ticket] Overview subject search (#1336)

futa-ikeda · web-flow · commit c0854a5618bd · 2021-11-04T15:40:28.000-04:00
-   Ticket: [No ticket]
-   Feature flag: n/a

## Purpose
- Fix the registries overview's subject search widget

## Summary of Changes
- Load the registration provider before querying its subjects
- Update types accordingly

## Side Effects
- None

## QA Notes
- The subject search widget on the registration overview page should work as-expected now
  - Registration admins editing the Registration's Metadata using the Metadata panel on the right should be able to search for subjects and apply those subjects onto the registration
diff --git a/lib/osf-components/addon/components/subjects/browse/item/template.hbs b/lib/osf-components/addon/components/subjects/browse/item/template.hbs
@@ -5,7 +5,7 @@
     ...attributes
 >
     <label
-        data-test-subject={{@singleSubjectManager.subject.id}}
+        data-test-subject-browse-label={{@singleSubjectManager.subject.id}}
         local-class='ItemLabel {{if @singleSubjectManager.hasSelectedChildren 'with-selected-child'}}'
     >
         <Input
diff --git a/lib/osf-components/addon/components/subjects/display/template.hbs b/lib/osf-components/addon/components/subjects/display/template.hbs
@@ -3,7 +3,7 @@
 {{else}}
     <ul local-class='Subjects' data-analytics-scope='Display'>
         {{#each @subjects as |subject|}}
-            <li local-class='Subject'>
+            <li data-test-selected-subject={{subject.text}} local-class='Subject'>
                 {{subject.text}}
 
                 {{#if @removeSubject}}
@@ -21,7 +21,7 @@
                 {{/if}}
             </li>
         {{else}}
-            <span local-class='Placeholder'>
+            <span data-test-selected-subject-placeholder local-class='Placeholder'>
                 {{t 'osf-components.subjects.display.placeholder'}}
             </span>
         {{/each}}
diff --git a/lib/osf-components/addon/components/subjects/search/search-result/template.hbs b/lib/osf-components/addon/components/subjects/search/search-result/template.hbs
@@ -1,6 +1,7 @@
 <li local-class='SearchResult' ...attributes>
     {{#let (unique-id 'search-result') as |inputId|}}
         <Input
+            data-test-subject-search-result-checkbox='{{this.subject.text}}'
             @id={{inputId}}
             @type='checkbox'
             @change={{@singleSubjectManager.toggleSelected}}
@@ -16,7 +17,11 @@
             {{/each}}
         </span>
 
-        <label local-class='Subject' for={{inputId}}>
+        <label
+            data-test-subject-search-result-label
+            local-class='Subject'
+            for={{inputId}}
+        >
             {{#if this.subject}}
                 {{this.subject.text}}
             {{else}}
diff --git a/lib/osf-components/addon/components/subjects/search/template.hbs b/lib/osf-components/addon/components/subjects/search/template.hbs
@@ -5,6 +5,7 @@
         @fixedWidth={{true}}
     />
     <Input
+        data-test-subject-searchbox
         @name='search'
         @type='text'
         @value={{this.userQuery}}
diff --git a/lib/osf-components/addon/components/subjects/widget/template.hbs b/lib/osf-components/addon/components/subjects/widget/template.hbs
@@ -12,8 +12,16 @@
         local-class='TabList'
         as |tablist|
     >
-        <tablist.tab>{{t 'osf-components.subjects.browse.browse_all'}}</tablist.tab>
-        <tablist.tab>{{t 'osf-components.subjects.search.search_all'}}</tablist.tab>
+        <tablist.tab
+            data-test-subject-widget-browse-tab
+        >
+            {{t 'osf-components.subjects.browse.browse_all'}}
+        </tablist.tab>
+        <tablist.tab
+            data-test-subject-widget-search-tab
+        >
+            {{t 'osf-components.subjects.search.search_all'}}
+        </tablist.tab>
     </tab.tabList>
     <tab.tabPanel>
         <Subjects::Browse
diff --git a/lib/registries/addon/components/registries-metadata/component.ts b/lib/registries/addon/components/registries-metadata/component.ts
@@ -1,10 +1,14 @@
 import { tagName } from '@ember-decorators/component';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import { waitFor } from '@ember/test-waiters';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency';
 import config from 'ember-get-config';
 
 import { layout } from 'ember-osf-web/decorators/component';
 import Registration from 'ember-osf-web/models/registration';
+import RegistrationProviderModel from 'ember-osf-web/models/registration-provider';
 
 import styles from './styles';
 import template from './template';
@@ -22,9 +26,16 @@ export default class RegistriesMetadata extends Component {
     registration?: Registration;
     extendedFields?: boolean;
 
+    @tracked provider?: RegistrationProviderModel;
     // Private properties
     expandCitations = false;
 
+    @task({ on: 'didReceiveAttrs'})
+    @waitFor
+    async fetchProvider() {
+        this.provider = await this.registration?.provider;
+    }
+
     @computed('registration')
     get registeredFromId() {
         if (!this.registration) {
diff --git a/lib/registries/addon/components/registries-metadata/template.hbs b/lib/registries/addon/components/registries-metadata/template.hbs
@@ -181,34 +181,36 @@
         </div>
 
         <div local-class='Field'>
-            <Subjects::Manager
-                @model={{this.registration}}
-                @provider={{this.registration.provider}}
-                @doesAutosave={{false}}
-                as |subjectsManager|
-            >
-                <EditableField::SubjectFieldManager
-                    @subjectsManager={{subjectsManager}}
-                    @node={{this.registration}}
-                    as |subjectFieldManager|
+            {{#if this.provider}}
+                <Subjects::Manager
+                    @model={{this.registration}}
+                    @provider={{this.provider}}
+                    @doesAutosave={{false}}
+                    as |subjectsManager|
                 >
-                    <EditableField
-                        data-analytics-scope='Subjects'
-                        @manager={{subjectFieldManager}}
-                        @title={{t 'registries.registration_metadata.subjects'}}
-                        @name='subjects'
-                        @fixedWidth={{true}}
-                        as |field|
+                    <EditableField::SubjectFieldManager
+                        @subjectsManager={{subjectsManager}}
+                        @node={{this.registration}}
+                        as |subjectFieldManager|
                     >
-                        <field.edit>
-                            <Subjects::Widget @subjectsManager={{subjectsManager}} />
-                        </field.edit>
-                        <field.display>
-                            <Subjects::Display @subjects={{subjectsManager.savedSubjects}} />
-                        </field.display>
-                    </EditableField>
-                </EditableField::SubjectFieldManager>
-            </Subjects::Manager>
+                        <EditableField
+                            data-analytics-scope='Subjects'
+                            @manager={{subjectFieldManager}}
+                            @title={{t 'registries.registration_metadata.subjects'}}
+                            @name='subjects'
+                            @fixedWidth={{true}}
+                            as |field|
+                        >
+                            <field.edit>
+                                <Subjects::Widget @subjectsManager={{subjectsManager}} />
+                            </field.edit>
+                            <field.display>
+                                <Subjects::Display @subjects={{subjectsManager.savedSubjects}} />
+                            </field.display>
+                        </EditableField>
+                    </EditableField::SubjectFieldManager>
+                </Subjects::Manager>
+            {{/if}}
         </div>
 
         <div local-class='Field'>
diff --git a/lib/registries/addon/drafts/draft/metadata/template.hbs b/lib/registries/addon/drafts/draft/metadata/template.hbs
@@ -116,7 +116,7 @@
                         </p>
                     </legend>
                     <Subjects::Manager @model={{this.draftManager.draftRegistration}}
-                        @provider={{this.draftManager.draftRegistration.provider}} @doesAutosave={{true}}
+                        @provider={{this.draftManager.provider}} @doesAutosave={{true}}
                         @metadataChangeset={{this.draftManager.metadataChangeset}} as |subjectsManager|>
                         <Subjects::Widget local-class='SubjectsField' @subjectsManager={{subjectsManager}} />
                         <ValidationErrors @changeset={{this.draftManager.metadataChangeset}} @key='subjects'
diff --git a/mirage/config.ts b/mirage/config.ts
@@ -195,7 +195,7 @@ export default function(this: Server) {
     osfNestedResource(this, 'registration', 'comments', { only: ['index'] });
     this.get('/registrations/:guid/citation/:citationStyleID', getCitation);
     osfToManyRelationship(this, 'registration', 'subjects', {
-        only: ['related', 'self'],
+        only: ['related', 'self', 'update'],
     });
     osfResource(this, 'subject', { only: ['show'] });
 
diff --git a/tests/engines/registries/acceptance/draft/draft-test.ts b/tests/engines/registries/acceptance/draft/draft-test.ts
@@ -886,7 +886,7 @@ module('Registries | Acceptance | draft form', hooks => {
             .exists('error appears for unedited, required fields after returning to metadata page: license');
 
         // Choose a subject
-        await click('[data-test-subject="1"] > input');
+        await click('[data-test-subject-browse-label="1"] > input');
         assert.dom('[data-test-validation-errors="subjects"]')
             .doesNotExist('validation error for subjects gone when user makes a selection');
 
diff --git a/tests/engines/registries/acceptance/overview/overview-test.ts b/tests/engines/registries/acceptance/overview/overview-test.ts
@@ -1,5 +1,5 @@
 import { capitalize } from '@ember/string';
-import { click as untrackedClick, fillIn } from '@ember/test-helpers';
+import { click as untrackedClick, fillIn, settled, triggerKeyEvent } from '@ember/test-helpers';
 import { ModelInstance } from 'ember-cli-mirage';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import config from 'ember-get-config';
@@ -453,6 +453,44 @@ module('Registries | Acceptance | overview.overview', hooks => {
         assert.dom('[data-test-editable-field="doi"]').doesNotExist('DOIs are only available for public registrations');
     });
 
+    test('Editable subjects', async assert => {
+        const subjects = [server.create('subject', { text: 'Candy and confection studies' }),
+            server.create('subject', { text: 'Soda and soft drink studies' })];
+        const provider = server.create('registration-provider');
+        provider.update({ subjects });
+        const reg = server.create('registration', {
+            currentUserPermissions: Object.values(Permission),
+            provider,
+        });
+
+        await visit(`/${reg.id}/`);
+
+        await click('[data-test-edit-button="subjects"]');
+        assert.dom('[data-test-subject-widget-browse-tab]').hasAttribute('aria-selected', 'true');
+        assert.dom('[data-test-selected-subject]').doesNotExist('No subjects selected');
+        assert.dom('[data-test-selected-subject-placeholder]')
+            .hasText(t('osf-components.subjects.display.placeholder'), 'Placeholder text shown');
+        assert.dom('[data-test-subject-browse-label]').exists({ count: 2 }, 'All toplevel subjects are listed');
+
+        await untrackedClick('[data-test-subject-browse-label="1"]');
+        assert.dom('[data-test-selected-subject="Candy and confection studies"]')
+            .containsText('Candy and confection studies', 'One subject selected');
+
+        await untrackedClick('[data-test-subject-widget-search-tab]');
+        assert.dom('[data-test-subject-widget-search-tab]').hasAttribute('aria-selected', 'true');
+        assert.dom('[data-test-subject-search-result-label]').doesNotExist('No search results');
+
+        await fillIn('[data-test-subject-searchbox]', 'Soda');
+        triggerKeyEvent('[data-test-subject-searchbox]', 'keyup', 'Shift');
+        await settled();
+        assert.dom('[data-test-subject-search-result-label]').exists('Search finds subjects');
+
+        await untrackedClick('[data-test-subject-search-result-checkbox="Soda and soft drink studies"]');
+        assert.dom('[data-test-selected-subject="Soda and soft drink studies"]').exists('Proper subject selected');
+        await click('[data-test-save-edits]');
+        assert.dom('[data-test-selected-subject]').exists({ count: 2 }, 'Subjects saved');
+    });
+
     test('Editable provider metadata', async assert => {
         server.create('user', 'loggedIn');
 

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`...attributes`
`6`	`6`	`>`
`7`	`7`	`<label`
`8`		`- data-test-subject={{@singleSubjectManager.subject.id}}`
	`8`	`+ data-test-subject-browse-label={{@singleSubjectManager.subject.id}}`
`9`	`9`	`local-class='ItemLabel {{if @singleSubjectManager.hasSelectedChildren 'with-selected-child'}}'`
`10`	`10`	`>`
`11`	`11`	`<Input`