Replace alpaca and remove old dependencies

app/app.js

@@ -3,6 +3,11 @@ import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from './config/environment';
 import './deprecation-workflow';
+import 'bootstrap/dist/css/bootstrap.css';
+import 'ember-modal-dialog/app/styles/ember-modal-dialog/ember-modal-structure.css';
+import 'ember-modal-dialog/app/styles/ember-modal-dialog/ember-modal-appearance.css';
+import 'sweetalert2/dist/sweetalert2.css';
+import 'survey-core/survey-core.css';
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;

app/components/display-metadata-keys/index.hbs

@@ -1,5 +1,5 @@
 {{! template-lint-disable no-triple-curlies }}
-<ul class="list-unstyled" {{did-insert this.setupDisplayData}}>
+<ul class="d-flex flex-column list-unstyled gap-3" {{did-insert this.setupDisplayData}}>
   {{#each this.displayData as |data|}}
     <li>
       {{#if data.isArray}}

app/components/external-repo-review/index.js

@@ -61,7 +61,7 @@ export default class ExternalRepoReviewComponent extends Component {
         if (value.dismiss) {
           return; // Don't redirect
         }
-        $('#externalSubmission').modal('hide');
+        swal.close();
         const win = window.open(repo.url, '_blank');
         if (win) {
           win.focus();

app/components/found-manuscripts/index.js

@@ -7,7 +7,6 @@ import { action, get, set } from '@ember/object';
 export default class FoundManuscriptsComponent extends Component {
   @service oaManuscriptService;
   @service workflow;
-  @service store;
   @service appStaticConfig;
 
   @tracked foundManuscripts = [];
@@ -39,11 +38,14 @@ export default class FoundManuscriptsComponent extends Component {
 
   @task
   setupManuscripts = function* () {
-    const doi = this.workflow.getDoiInfo().DOI;
-    const foundOAMss = yield this.oaManuscriptService.lookup(doi);
+    const doi = this.args.doi;
 
-    if (foundOAMss) {
-      this.foundManuscripts = [...foundOAMss];
+    if (doi) {
+      const foundOAMss = yield this.oaManuscriptService.lookup(doi);
+
+      if (foundOAMss) {
+        this.foundManuscripts = [...foundOAMss];
+      }
     }
   };
 }

app/components/grant-action-cell/index.hbs

@@ -1,6 +1,6 @@
 <LinkTo
   @route="submissions.new"
   @query={{hash grant=(get @record "grant.id") submission=null}}
-  class="btn btn-outline-primary"
+  class="btn btn-outline-primary text-nowrap"
 >New submission</LinkTo>
 {{yield}}

app/components/message-dialog/index.hbs

@@ -2,21 +2,21 @@
 {{#if this.show}}
   <ModalDialog @onClose="toggleModal" @translucentOverlay={{false}}>
     <form class="dialog-form-width">
-      <div class="form-group row">
+      <div class="mb-3 row">
         <label class="col-sm-3 col-form-label" for="msg-to">Recipient:</label>
         <div class="col-sm-9">
           <Input aria-label="msg-to" @id="msg-to" class="form-control" @type="text" @value={{this.to}} />
         </div>
       </div>
 
-      <div class="form-group row">
+      <div class="mb-3 row">
         <label class="col-sm-3 col-form-label" for="msg-subject">Subject:</label>
         <div class="col-sm-9">
           <Input aria-label="msg-subject" @id="msg-subject" class="form-control" @type="text" @value={{this.subject}} />
         </div>
       </div>
 
-      <div class="form-group">
+      <div class="mb-3">
         <label for="msg-text">Message:</label>
         <Textarea aria-label="msg-text" @id="msg-text" class="form-control" @value={{this.message}} @rows="10" />
       </div>

app/components/metadata-form/index.hbs

@@ -1,8 +1,8 @@
 <div
-  id="schemaForm"
-  class="alpaca-form form-group"
+  id="metadata-form"
+  class="mb-3"
   data-test-metadata-form
   {{did-insert this.setupMetadataForm}}
-  {{did-update this.setupMetadataForm @schema}}
+  {{did-update this.setupMetadataForm @schema @data}}
 >
 </div>

app/components/metadata-form/index.js

@@ -1,47 +1,59 @@
 import Component from '@glimmer/component';
-import stripEmptyArrays from 'pass-ui/util/strip-empty-arrays';
 import { action } from '@ember/object';
+import { SurveyModel } from 'survey-js-ui';
+import { DefaultLightPanelless } from 'survey-core/themes';
 
 export default class MetadataForm extends Component {
+  survey = null;
+
   @action
   setupMetadataForm() {
-    const componentContext = this;
-    const originalForm = this.args.schema;
-    const newForm = JSON.parse(JSON.stringify(originalForm));
-    if (!originalForm.options) {
-      newForm.options = {};
-    }
+    const surveySchema = this.args.schema;
+    const surveyData = this.args.data;
 
-    // form ctrls
-    newForm.options.form = {
-      buttons: {
-        Back: {
-          title: 'Back',
-          styles: 'pull-left btn btn-outline-primary',
-          click() {
-            componentContext.args.previousForm(stripEmptyArrays(this.getValue()));
-          },
-        },
-        Abort: {
-          label: 'Cancel',
-          styles: 'pull-left btn btn-outline-danger ml-2',
-          click() {
-            componentContext.args.cancel();
-          },
-        },
-        Next: {
-          label: 'Next',
-          styles: 'pull-right btn btn-primary next',
-          click() {
-            componentContext.args.nextForm(stripEmptyArrays(this.getValue()));
-          },
-        },
+    const customCss = {
+      body: 'pt-4',
+      page: {
+        // Remove default survey.js page class
+        root: '',
+      },
+      text: {
+        root: 'form-control',
+      },
+      comment: {
+        root: 'form-control',
+      },
+      dropdown: {
+        control: 'form-control',
       },
     };
 
-    newForm.options.hideInitValidationError = true;
+    this.survey = new SurveyModel(surveySchema);
+
+    this.survey.css = customCss;
+    this.survey.showCompleteButton = false;
+
+    this.survey.mergeData(surveyData);
+
+    this.survey.applyTheme(DefaultLightPanelless);
+
+    this.survey.applyTheme({
+      cssVariables: {
+        '--sjs-primary-backcolor': 'black',
+        '--sjs-primary-forecolor': 'white',
+        '--sjs-primary-backcolor-light': '#f0f0f0',
+        '--sjs-general-backcolor-dim': 'white',
+        '--sjs-font-family': 'var(--font-bodycopy)',
+      },
+    });
+    this.survey.render(document.getElementById('metadata-form'));
+
+    if (typeof this.args.onSurveyReady === 'function') {
+      this.args.onSurveyReady(this.survey);
+    }
 
-    $('#schemaForm').empty();
-    $('#schemaForm').alpaca(newForm);
+    this.survey.onComplete.add((_sender, _options) => {
+      this.args.next(this.survey.data);
+    });
   }
 }

app/components/nav-bar/index.hbs

@@ -10,14 +10,14 @@
         class="navbar-toggler text-center border-none"
         type="button"
         data-toggle="collapse"
-        data-target="#navbarSupportedContent"
-        aria-controls="navbarSupportedContent"
+        data-target="#navbar-supported-content"
+        aria-controls="navbar-supported-content"
         aria-expanded="false"
         aria-label="Toggle navigation"
       >
         <span class="navbar-toggler-icon"></span>
       </button>
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <div class="collapse navbar-collapse" id="navbar-supported-content">
         <ul class="navbar-nav w-75">
           <li class="nav-item">
             <LinkTo @route="dashboard" class="nav-link pl-0 ml-0">
@@ -61,23 +61,24 @@
         <div class="nav-item dropdown ml-auto w-25">
           <a
             id="user-menu-name"
-            class="nav-link accountInfo pr-1"
-            data-toggle="dropdown"
+            class="nav-link dropdown-toggle accountInfo pr-1"
             href="#"
+            data-bs-toggle="dropdown"
             role="button"
             aria-haspopup="true"
             aria-expanded="false"
+            {{on "click" this.toggleUserMenu}}
           >
             {{this.currentUser.user.displayName}}
           </a>
-          <div id="user-menu" class="dropdown">
-            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+          <ul class="dropdown-menu {{if this.isUserMenuOpen 'show'}}" aria-labelledby="user-menu-name">
+            <li>
               <a class="dropdown-item" href="#" {{on "click" this.logOut}}>
                 <i class="fa fa-lock"></i>
                 Logout
               </a>
-            </div>
-          </div>
+            </li>
+          </ul>
         </div>
       </div>
     </div>

app/components/nav-bar/index.js

@@ -18,6 +18,7 @@ export default class NavBar extends Component {
   @tracked aboutUrl = null;
   @tracked contactUrl = null;
   @tracked faqUrl = null;
+  @tracked isUserMenuOpen = false;
 
   constructor() {
     super(...arguments);
@@ -62,4 +63,9 @@ export default class NavBar extends Component {
       this.faqUrl = config.branding.pages.faqUrl;
     }
   };
+
+  @action
+  toggleUserMenu() {
+    this.isUserMenuOpen = !this.isUserMenuOpen;
+  }
 }

app/components/repocopy-display/index.hbs

@@ -1,5 +1,5 @@
 {{! template-lint-disable link-rel-noopener }}
-<div class="row">
+<div class="d-flex">
   <strong class="col-5 px-0">Manuscript ID(s):</strong>
   {{#if @repoCopy.externalIds}}
     <ul class="col list-unstyled">

app/components/repository-card/index.hbs

@@ -13,7 +13,7 @@
     onChange: f(), // onChange handler for selecting this repo
   }
 }}
-<li class="list-group-item d-flex align-items-center my-1">
+<li class="list-group-item d-flex align-items-center my-1 gap-2">
   {{#if @choice}}
     <input
       aria-label="Optional repositories checkbox"

app/components/submission-action-cell/index.hbs

@@ -1,6 +1,6 @@
 {{! template-lint-disable link-href-attributes no-action no-inline-styles no-invalid-interactive }}
 {{#if @record.isStub}}
-  <LinkTo @route="submissions.new" @query={{hash submission=@record.id}} class="btn btn-outline-primary">
+  <LinkTo @route="submissions.new" @query={{hash submission=@record.id}} class="btn btn-outline-primary text-nowrap">
     Finish submission
   </LinkTo>
 {{else if (and (eq @record.submissionStatus "changes-requested") this.isSubmitter)}}

app/components/submission-repo-details/index.hbs

@@ -1,6 +1,6 @@
 {{! template-lint-disable link-rel-noopener no-curly-component-invocation no-implicit-this }}
 <li>
-  <div class="card float-left col-5 mr-3 mb-0">
+  <div class="card float-start col-5 mr-3 mb-0">
     <div class="card-body sub-status">
       <div class="row card-title">
         {{#if @repo.url}}
@@ -10,7 +10,7 @@
         {{/if}}
       </div>
       <p class="card-text">
-        <div class="row">
+        <div class="d-flex">
           <strong class="col-5 px-0">Deposit status: </strong>
           {{#unless this.isExternalRepo}}
             <div class="col">

app/components/workflow-basics/index.hbs

@@ -98,8 +98,8 @@
   If the manuscript/article you are submitting has been assigned a Digital Object Identifier (DOI), please provide it
   now to pre-populate submission forms.
 </p>
-<div class="form-group">
-  <label>
+<div class="mb-3">
+  <label for="doi">
     DOI
   </label>
   <p class="help-block">
@@ -129,8 +129,8 @@
     </div>
   {{/if}}
 </div>
-<div class="form-group">
-  <label>
+<div class="mb-3">
+  <label for="title">
     Manuscript/Article Title
     <span class="text-muted">
       (required)
@@ -149,14 +149,14 @@
   />
 </div>
 
-<div class="form-group">
+<div class="mb-3">
   <p class="lead text-muted">
     If you are an NIH-user, a journal selection is required to deposit into PMC. It is optional for all other users. If
     you do not see your journal listed, you can skip the journal selection and still use PASS to deposit into
     JScholarship.
   </p>
   <div>
-    <label>
+    <label for="journal">
       Journal
     </label>
     {{#if this.contactUrl}}
@@ -177,6 +177,7 @@
       />
     {{else}}
       <input
+        id="journal"
         type="text"
         class="form-control"
         value={{@publication.journal.journalName}}