[ENG-2276] Update add-new page to allow no project registration (#1140)

* Add to add-new page * Remove unecessary test code, update variable name, make conditionals in template more readable * Update logic in template

Author: baylee-d

app/adapters/draft-registration.ts

@@ -1,7 +1,6 @@
 import OsfAdapter from './osf-adapter';
 
 export default class DraftRegistrationAdapter extends OsfAdapter {
- parentRelationship = 'branchedFrom';
 }
 
 declare module 'ember-data/types/registries/adapter' {

app/models/node.ts

@@ -152,7 +152,7 @@ export default class NodeModel extends BaseFileItem.extend(Validations, Collecta
  registrations!: DS.PromiseManyArray<RegistrationModel>;
 
  @hasMany('draft-registration', { inverse: 'branchedFrom' })
- draftRegistrations!: DS.PromiseManyArray<DraftRegistrationModel>;
+ draftRegistrations?: DS.PromiseManyArray<DraftRegistrationModel>;
 
  @hasMany('node', { inverse: 'forkedFrom' })
  forks!: DS.PromiseManyArray<NodeModel>;

lib/registries/addon/branded/new/controller.ts

@@ -6,6 +6,7 @@ import { timeout } from 'ember-concurrency';
 import { task } from 'ember-concurrency-decorators';
 import DS from 'ember-data';
 
+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 RegistrationSchemaModel from 'ember-osf-web/models/registration-schema';
@@ -24,19 +25,27 @@ export default class BrandedRegistriesNewSubmissionController extends Controller
  @tracked selectedSchema?: RegistrationSchemaModel;
  @tracked schemaOptions: RegistrationSchemaModel[] = [];
  @tracked projectOptions: NodeModel[] = [];
+ @tracked isBasedOnProject: boolean = false;
 
  get disableCreateDraft(): boolean {
- return !(this.selectedSchema && this.selectedProject);
+ return this.isBasedOnProject ? !(this.selectedSchema && this.selectedProject) : !this.selectedSchema;
  }
 
  @task({ withTestWaiter: true })
  createNewDraftRegistration = task(function *(this: BrandedRegistriesNewSubmissionController) {
- const newRegistration = this.store.createRecord('draft-registration',
- {
+ let newRegistration: DraftRegistrationModel;
+ if (this.isBasedOnProject) {
+ newRegistration = this.store.createRecord('draft-registration', {
  registrationSchema: this.selectedSchema,
  provider: this.model,
  branchedFrom: this.selectedProject,
  });
+ } else {
+ newRegistration = this.store.createRecord('draft-registration', {
+ registrationSchema: this.selectedSchema,
+ provider: this.model,
+ });
+ }
  try {
  yield newRegistration.save();
  this.transitionToRoute('drafts.draft', newRegistration.id);

lib/registries/addon/branded/new/styles.scss

@@ -13,6 +13,10 @@
 .selectLabel {
  composes: SchemaBlockDropdown from '../../drafts/draft/metadata/styles.scss';
  display: block;
+
+ div {
+ max-width: 361px;
+ }
 }
 
 .projectHeading {
@@ -25,9 +29,14 @@
  flex-direction: column;
 }
 
-.newProjectHelpText {
- margin-top: 20px;
- max-width: 600px;
+.InformationText {
+ margin: 20px 0 30px;
+ text-align: center;
+ font-style: italic;
+
+ &.ComponentHelpText {
+ max-width: 390px;
+ }
 }
 
 .createDraftButton {
@@ -49,3 +58,47 @@
 .required {
  color: $brand-danger;
 }
+
+.StepOneContainer {
+ margin-bottom: 30px;
+}
+
+.RadioFieldset {
+ position: relative;
+ text-align: center;
+}
+
+.RadioLegend {
+ border-bottom: 0;
+ font-size: 24px;
+ font-weight: 600;
+}
+
+.RadioElement {
+ width: 80px;
+ height: 40px;
+ margin: 0;
+}
+
+.RadioInput {
+ position: absolute;
+ opacity: 0;
+
+ &:hover {
+ cursor: pointer;
+ } 
+}
+
+.RadioLabel {
+ text-align: center;
+ line-height: 40px;
+ border: 1px solid $color-border-gray;
+ color: $color-text-blue-dark;
+ text-transform: uppercase;
+}
+
+.IsChecked {
+ color: $color-osf-secondary;
+ background-color: $color-bg-gray-blue-light;
+ border: 1px solid $color-bg-gray-blue-light;
+}

lib/registries/addon/branded/new/template.hbs

@@ -16,50 +16,83 @@
  </HeroOverlay>
  </layout.heading>
  <layout.main local-class='main'>
+ <p local-class='InformationText'>
+ {{t 'registries.new.provider_info' provider=this.model.name htmlSafe=true}}
+ </p>
  <form data-test-new-registration-form local-class='registrationForm'>
- <label
- data-test-project-select
- local-class='selectLabel'
- >
+ <label local-class='selectLabel StepOneContainer'>
  <p local-class='stepLabel'>
  {{t 'registries.new.step_one'}}
  </p>
- <h2
- data-test-project-select-title
- local-class='projectHeading'
- >
- {{t 'registries.new.select_project'}}
- <span local-class='required' aria-label={{t 'registries.new.required'}}>*</span>
- </h2>
- <PowerSelect
- @ariaLabel={{this.selectedProject.title}}
- @placeholder={{t 'registries.new.select_project_placeholder'}}
- @options={{this.projectOptions}}
- @search={{perform this.projectSearch}}
- @selected={{this.selectedProject}}
- @onchange={{this.updateSelectedProject}}
- as |option|
- >
- {{option.title}}
- </PowerSelect>
+ <fieldset local-class='RadioFieldset'>
+ <legend local-class='RadioLegend'>
+ {{t 'registries.new.step_one_project_heading'}}
+ </legend>
+ <input
+ data-test-has-project-button
+ local-class='RadioElement RadioInput'
+ type='radio'
+ name='HasProject'
+ value='yes'
+ onclick={{fn (mut this.isBasedOnProject) true}}
+ checked={{this.isBasedOnProject}}
+ >
+ <label
+ local-class='RadioElement RadioLabel {{if this.isBasedOnProject 'IsChecked'}}'
+ for='HasProject'
+ >
+ {{t 'registries.new.yes'}}
+ </label>
+ <input
+ data-test-no-project-button
+ local-class='RadioElement RadioInput'
+ type='radio'
+ name='no-project'
+ value='no'
+ onclick={{fn (mut this.isBasedOnProject) false}}
+ checked={{not this.isBasedOnProject}}
+ >
+ <label
+ local-class='RadioElement RadioLabel {{unless this.isBasedOnProject 'IsChecked'}}'
+ for='NoProject'
+ >
+ {{t 'registries.new.no'}}
+ </label>
+ </fieldset>
  </label>
+ {{#if this.isBasedOnProject}}
+ <label data-test-project-select local-class='selectLabel'>
+ <p local-class='stepLabel'>
+ {{t 'registries.new.step_two'}}
+ </p>
+ <h3 data-test-project-select-title local-class='projectHeading'>
+ {{t 'registries.new.select_project'}}
+ <span local-class='required' aria-label={{t 'registries.new.required'}}>*</span>
+ </h3>
+ <PowerSelect
+ @ariaLabel={{this.selectedProject.title}}
+ @placeholder={{t 'registries.new.select_project_placeholder'}}
+ @options={{this.projectOptions}}
+ @search={{perform this.projectSearch}}
+ @selected={{this.selectedProject}}
+ @onchange={{this.updateSelectedProject}}
+ as |option|
+ >
+ {{option.title}}
+ </PowerSelect>
+ </label>
+ <p local-class='InformationText ComponentHelpText'>
+ {{t 'registries.new.component_help_text'}}
+ </p>
+ {{/if}}
 
- <p local-class='newProjectHelpText'>
- {{t 'registries.new.new_project_help_fragment1'}}
- <OsfLink
- @route='dashboard'
- >
- {{t 'registries.new.go_to_dashboard'}}
- </OsfLink>
- {{t 'registries.new.new_project_help_fragment2' htmlSafe=true}}
- </p>
-
- <label
- data-test-schema-select
- local-class='selectLabel'
- >
+ <label data-test-schema-select local-class='selectLabel'>
  <p local-class='stepLabel'>
- {{t 'registries.new.step_two'}}
+ {{#if this.isBasedOnProject}}
+ {{t 'registries.new.step_three'}}
+ {{else}}
+ {{t 'registries.new.step_two'}}
+ {{/if}}
  </p>
  <h2 data-test-schema-select-title>
  {{t 'registries.new.select_schema'}}

lib/registries/addon/drafts/draft/draft-registration-manager.ts

@@ -24,7 +24,7 @@ import buildChangeset from 'ember-osf-web/utils/build-changeset';
 
 type LoadDraftModelTask = TaskInstance<{
  draftRegistration: DraftRegistration,
- node: NodeModel,
+ node?: NodeModel,
  provider: ProviderModel,
 }>;
 
@@ -52,7 +52,7 @@ export default class DraftRegistrationManager {
  @notEmpty('visitedPages') hasVisitedPages!: boolean;
 
  draftRegistration!: DraftRegistration;
- node!: NodeModel;
+ node?: NodeModel;
  provider!: ProviderModel;
 
  @computed('pageManagers.{[],@each.pageIsValid}')

lib/registries/addon/drafts/draft/template.hbs

@@ -16,14 +16,16 @@
  <layout.heading>
  <HeroOverlay @align='left' local-class='DraftHeroOverlay'>
  <div local-class='Title'>
- <OsfLink
- data-analytics-name='Go to project'
- local-class='BreadCrumb'
- @route='guid-node'
- @models={{array draftManager.node.id}}
- >
- {{draftManager.node.title}} >
- </OsfLink>
+ {{#if draftManager.node}}
+ <OsfLink
+ data-analytics-name='Go to project'
+ local-class='BreadCrumb'
+ @route='guid-node'
+ @models={{array draftManager.node.id}}
+ >
+ {{draftManager.node.title}} >
+ </OsfLink>
+ {{/if}}
  <h1>
  {{t 'registries.drafts.draft.form.new_registration'}}
  </h1>

mirage/config.ts

@@ -129,6 +129,7 @@ export default function(this: Server) {
  only: ['index', 'show', 'update'],
  path: '/draft_registrations',
  });
+ this.post('/draft_registrations', createDraftRegistration);
  osfToManyRelationship(this, 'draft-registration', 'subjects');
  osfToManyRelationship(this, 'draft-registration', 'affiliatedInstitutions', {
  only: ['related', 'update', 'add', 'remove'],

mirage/serializers/draft-registration.ts

@@ -8,18 +8,6 @@ const { OSF: { apiUrl } } = config;
 export default class DraftRegistrationSerializer extends ApplicationSerializer<DraftRegistration> {
  buildRelationships(model: ModelInstance<DraftRegistration>) {
  const returnValue: SerializedRelationships<DraftRegistration> = {
- branchedFrom: {
- data: {
- id: model.branchedFrom.id,
- type: 'nodes',
- },
- links: {
- related: {
- href: `${apiUrl}/v2/nodes/${model.branchedFrom.id}`,
- meta: {},
- },
- },
- },
  initiator: {
  data: {
  id: model.initiator.id,
@@ -81,6 +69,20 @@ export default class DraftRegistrationSerializer extends ApplicationSerializer<D
  },
  },
  };
+ if (model.branchedFrom) {
+ returnValue.branchedFrom = {
+ data: {
+ id: model.branchedFrom.id,
+ type: 'nodes',
+ },
+ links: {
+ related: {
+ href: `${apiUrl}/v2/nodes/${model.branchedFrom.id}`,
+ meta: {},
+ },
+ },
+ };
+ }
  if (model.license) {
  returnValue.license = {
  data: {

tests/engines/registries/acceptance/branded/new-test.ts

@@ -60,7 +60,7 @@ module('Registries | Acceptance | branded.new', hooks => {
  assert.equal(currentRouteName(), 'registries.page-not-found', 'At the correct route: page-not-found');
  });
 
- test('users are prevented from submitting incomplete form', async assert => {
+ test('users are prevented from submitting incomplete form with project', async assert => {
  server.loadFixtures('registration-schemas');
  server.loadFixtures('schema-blocks');
  const currentUser = server.create('user', 'loggedIn');
@@ -72,7 +72,11 @@ module('Registries | Acceptance | branded.new', hooks => {
  await visit(`/registries/${brandedProvider.id}/new`);
 
  assert.dom('[data-test-start-registration-button]')
- .isDisabled('Start registration button is disabled on first load');
+ .isNotDisabled('Start registration button is enabled on first load with schema selected');
+ await click('[data-test-has-project-button]');
+ assert.dom('[data-test-project-select]').exists();
+ assert.dom('[data-test-start-registration-button]')
+ .isDisabled('Start button is disabled without project selected');
  await click('[data-test-project-select] .ember-power-select-trigger');
  assert.dom('.ember-power-select-options > li.ember-power-select-option:first-of-type')
  .hasText('This is your project', 'Project dropdown shows project title');
@@ -87,4 +91,19 @@ module('Registries | Acceptance | branded.new', hooks => {
  assert.equal(currentRouteName(), 'registries.drafts.draft.metadata',
  'Go to draft registration metadata page on start');
  });
+ test('users are prevented from submitting incomplete form no project', async assert => {
+ server.loadFixtures('registration-schemas');
+ server.loadFixtures('schema-blocks');
+ const brandedProvider = server.create('registration-provider', 'withBrand', 'withSchemas');
+ await visit(`/registries/${brandedProvider.id}/new`);
+
+ assert.dom('[data-test-start-registration-button]')
+ .isNotDisabled('Start registration button is enabled on first load with schema selected');
+ assert.dom('[data-test-project-select]').doesNotExist();
+ assert.dom('[data-test-schema-select] .ember-power-select-trigger')
+ .hasText('This is a Test Schema', 'Schema dropdown is autopopulated with first schema available');
+ await click('[data-test-start-registration-button]');
+ assert.equal(currentRouteName(), 'registries.drafts.draft.metadata',
+ 'Go to draft registration metadata page on start');
+ });
 });