From 3bea88e761473b5d67d215d2faf732c86abd2091 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 20 Apr 2022 08:09:38 -0400
Subject: [PATCH] Apply fixes for vue-attributes-order standardization, towards
 vue/recommended

---
 client/src/components/Annotation.vue          |  16 +--
 client/src/components/Citation/Citations.vue  |  14 +-
 client/src/components/ClickToEdit.vue         |   8 +-
 .../Collections/ListCollectionCreator.vue     |  10 +-
 .../Collections/PairCollectionCreator.vue     |   4 +-
 .../PairedListCollectionCreator.vue           |  22 +--
 .../Collections/common/ClickToEdit.vue        |   4 +-
 .../Collections/common/CollectionCreator.vue  |  24 ++--
 .../Collections/common/DatabaseEditTab.vue    |   4 +-
 .../common/SuitableConvertersTab.vue          |   4 +-
 .../src/components/Common/ButtonSpinner.vue   |   2 +-
 client/src/components/Common/DelayedInput.vue |   8 +-
 client/src/components/Common/SlugInput.vue    |   6 +-
 client/src/components/Common/Webhook.vue      |   2 +-
 .../src/components/DataDialog/DataDialog.vue  |   6 +-
 .../Dataset/DatasetIndex/DatasetIndex.vue     |   2 +-
 client/src/components/Dataset/DatasetList.vue |   4 +-
 client/src/components/Dataset/DatasetName.vue |   4 +-
 .../Dataset/DatasetStorage/DatasetStorage.vue |   6 +-
 .../DatasetInformation/DatasetAttributes.vue  |  10 +-
 .../DatasetInformation/DatasetDetails.vue     |  10 +-
 .../DatasetInformation/DatasetError.vue       |   8 +-
 .../DatasetInformation/DatasetInformation.vue |   2 +-
 .../DatasetSourceTransform.vue                |   4 +-
 .../components/FilesDialog/FilesDialog.vue    |   8 +-
 .../src/components/FilesDialog/FilesInput.vue |   2 +-
 .../components/Form/Elements/FormColor.vue    |   2 +-
 .../Form/Elements/FormDirectory.vue           |  12 +-
 .../components/Form/Elements/FormInput.vue    |   4 +-
 .../components/Form/Elements/FormNumber.vue   |  12 +-
 client/src/components/Form/FormCard.vue       |   6 +-
 client/src/components/Form/FormElement.vue    |  20 +--
 client/src/components/Form/FormGeneric.vue    |   4 +-
 client/src/components/Form/FormInputs.vue     |   6 +-
 .../History/Content/ContentItem.vue           |   2 +-
 .../Content/Dataset/DatasetActions.vue        |   2 +-
 .../Content/Dataset/DatasetDetails.vue        |   4 +-
 .../History/Content/GenericElement.vue        |   2 +-
 .../History/Content/GenericItem.vue           |   4 +-
 .../CollectionNavigation.vue                  |   2 +-
 .../CurrentCollection/CollectionPanel.vue     |  10 +-
 .../History/CurrentHistory/HistoryDetails.vue |   2 +-
 .../History/CurrentHistory/HistoryEmpty.vue   |   4 +-
 .../History/CurrentHistory/HistoryFilters.vue |  16 +--
 .../CurrentHistory/HistoryNavigation.vue      |  14 +-
 .../HistoryOperations/Operations.vue          |   4 +-
 .../HistoryOperations/SelectionOperations.vue |  10 +-
 .../HistoryOperations/SelectionStatus.vue     |   4 +-
 .../History/CurrentHistory/HistoryPanel.vue   |  18 +--
 client/src/components/History/Index.vue       |  10 +-
 .../src/components/History/Layout/Details.vue |   8 +-
 .../components/History/Modals/CopyModal.vue   |   8 +-
 .../History/Modals/SelectorModal.vue          |   4 +-
 .../src/components/HistoryExport/ToLink.vue   |   2 +-
 .../components/HistoryExport/ToRemoteFile.vue |   2 +-
 client/src/components/HistoryImport.vue       |  10 +-
 client/src/components/HistoryView.vue         |   2 +-
 .../InteractiveTools/InteractiveTools.vue     |   8 +-
 .../src/components/JobInformation/CodeRow.vue |   6 +-
 .../components/JobInformation/JobError.vue    |   2 +-
 .../JobInformation/JobInformation.vue         |  16 +--
 .../components/JobInformation/JobOutputs.vue  |   2 +-
 .../src/components/JobMetrics/JobMetrics.vue  |   2 +-
 .../JobParameters/JobParameters.vue           |   4 +-
 .../components/Libraries/LibrariesList.vue    |  36 ++---
 .../components/Libraries/LibraryEditField.vue |   6 +-
 .../FolderDetails/FolderDetails.vue           |   6 +-
 .../Libraries/LibraryFolder/LibraryFolder.vue |  68 ++++-----
 .../LibraryFolderDataset/LibraryDataset.vue   |  36 ++---
 .../LibraryFolderDatasetPermissions.vue       |  10 +-
 .../LibraryPermissionsWarning.vue             |   4 +-
 .../Libraries/LibraryFolder/SearchField.vue   |   2 +-
 .../LibraryFolder/TopToolbar/FolderTopBar.vue |  14 +-
 .../PermissionsInputField.vue                 |   8 +-
 client/src/components/License/License.vue     |   2 +-
 .../CollectionDisplay.vue                     |  10 +-
 .../CollectionTree.vue                        |   2 +-
 .../Elements/HistoryDatasetDisplay.vue        |  20 +--
 .../Elements/Workflow/WorkflowDisplay.vue     |   8 +-
 .../Elements/Workflow/WorkflowTree.vue        |   2 +-
 client/src/components/Markdown/Markdown.vue   |   4 +-
 .../components/Markdown/MarkdownEditor.vue    |   8 +-
 .../components/Markdown/MarkdownSelector.vue  |   2 +-
 .../components/Markdown/MarkdownToolBox.vue   |  20 +--
 .../components/Markdown/StsDownloadButton.vue |   6 +-
 client/src/components/Masthead/Masthead.vue   |   8 +-
 .../src/components/Masthead/MastheadItem.vue  |  22 +--
 .../NewUserWelcome/NewUserWelcome.vue         |   4 +-
 .../components/PageEditor/PageEditorHtml.vue  |   4 +-
 .../PageEditor/PageEditorMarkdown.vue         |   4 +-
 .../Panels/Buttons/FavoritesButton.vue        |   2 +-
 .../Panels/Buttons/PanelViewButton.vue        |   6 +-
 .../Panels/Buttons/PanelViewMenuItem.vue      |   2 +-
 client/src/components/Panels/Common/Tool.vue  |   6 +-
 .../Panels/Common/ToolPanelLabel.vue          |   2 +-
 .../Panels/Common/ToolPanelLinks.vue          |   2 +-
 .../components/Panels/Common/ToolSection.vue  |   8 +-
 .../Panels/ProviderAwareToolBox.vue           |  10 +-
 .../Panels/ProviderAwareToolBoxWorkflow.vue   |  10 +-
 client/src/components/Panels/ToolBox.vue      |  16 +--
 .../src/components/Panels/ToolBoxWorkflow.vue |  10 +-
 .../components/RuleBuilder/ColumnSelector.vue |  26 ++--
 .../RuleBuilder/RegularExpressionInput.vue    |   2 +-
 .../components/RuleBuilder/RuleDisplay.vue    |   4 +-
 .../RuleBuilder/SavedRulesSelector.vue        |  10 +-
 .../src/components/RuleCollectionBuilder.vue  | 130 +++++++++---------
 .../RulesDisplay/RuleDisplayPreview.vue       |   4 +-
 .../components/RulesDisplay/RulesDisplay.vue  |   4 +-
 .../components/SchemaOrg/OrganizationForm.vue |   2 +-
 .../SchemaOrg/OrganizationViewer.vue          |   2 +-
 .../src/components/SchemaOrg/PersonForm.vue   |   2 +-
 .../src/components/SchemaOrg/PersonViewer.vue |   8 +-
 .../SelectionDialog/DataDialogTable.vue       |  10 +-
 .../SelectionDialog/SelectionDialog.vue       |   8 +-
 client/src/components/Sharing/Sharing.vue     |  70 +++++-----
 client/src/components/Tags/StatelessTags.vue  |   2 +-
 client/src/components/Tool/ToolCard.vue       |  12 +-
 client/src/components/Tool/ToolFooter.vue     |   6 +-
 client/src/components/Tool/ToolForm.vue       |  26 ++--
 client/src/components/ToolsView/ToolsView.vue |   2 +-
 client/src/components/Toolshed/Index.vue      |   4 +-
 .../Toolshed/InstalledList/Index.vue          |   2 +-
 .../Toolshed/InstalledList/Monitor.vue        |   2 +-
 .../RepositoryDetails/InstallationButton.vue  |   2 +-
 .../InstallationSettings.vue                  |   8 +-
 .../components/Toolshed/SearchList/Index.vue  |   8 +-
 .../Toolshed/SearchList/Repositories.vue      |   4 +-
 client/src/components/TooltipOnHover.vue      |   2 +-
 client/src/components/Upload/Collection.vue   |  54 ++++----
 client/src/components/Upload/Composite.vue    |  18 +--
 client/src/components/Upload/Default.vue      |  46 +++----
 client/src/components/Upload/RulesInput.vue   |  22 +--
 client/src/components/Upload/UploadButton.vue |   4 +-
 client/src/components/Upload/UploadModal.vue  |   2 +-
 .../components/Upload/UploadModalContent.vue  |   8 +-
 .../src/components/Upload/UploadWrapper.vue   |   6 +-
 .../components/User/CloudAuth/CloudAuth.vue   |  22 +--
 .../User/CloudAuth/CloudAuthItem.vue          |  16 +--
 .../User/CloudAuth/CredentialForm.vue         |   4 +-
 client/src/components/User/CustomBuilds.vue   |  16 +--
 .../User/DiskUsage/DiskUsageSummary.vue       |   6 +-
 .../Cleanup/CleanupOperationSummary.vue       |   4 +-
 .../Cleanup/ReviewCleanupDialog.vue           |  20 +--
 .../ExternalIdentities/ExternalIdentities.vue |  16 +--
 .../User/ExternalIdentities/ExternalLogin.vue |  12 +-
 .../src/components/User/UserPreferences.vue   |  14 +-
 .../components/Visualizations/PluginList.vue  |   4 +-
 .../Workflow/Editor/Forms/FormDefault.vue     |   8 +-
 .../Workflow/Editor/Forms/FormTool.vue        |   4 +-
 .../src/components/Workflow/Editor/Index.vue  |  14 +-
 .../src/components/Workflow/Editor/Lint.vue   |   2 +-
 .../Workflow/Editor/LintSection.vue           |   6 +-
 .../Workflow/Editor/MessagesModal.vue         |   2 +-
 .../src/components/Workflow/Editor/Node.vue   |   6 +-
 .../components/Workflow/Editor/NodeInput.vue  |   2 +-
 .../components/Workflow/Editor/NodeOutput.vue |   8 +-
 .../components/Workflow/Editor/Options.vue    |  14 +-
 .../Workflow/Editor/Recommendations.vue       |   2 +-
 .../Workflow/Editor/ZoomControl.vue           |   6 +-
 .../src/components/Workflow/Invocations.vue   |  10 +-
 .../components/Workflow/Run/WorkflowRun.vue   |   2 +-
 .../Workflow/Run/WorkflowRunForm.vue          |   6 +-
 .../Workflow/Run/WorkflowRunFormSimple.vue    |  10 +-
 client/src/components/Workflow/TrsImport.vue  |   4 +-
 client/src/components/Workflow/TrsSearch.vue  |   8 +-
 .../components/Workflow/WorkflowImport.vue    |   2 +-
 .../src/components/Workflow/WorkflowList.vue  |   8 +-
 .../WorkflowInvocationState/JobStep.vue       |   2 +-
 .../WorkflowInvocationDetails.vue             |   2 +-
 .../WorkflowInvocationState.vue               |   4 +-
 .../WorkflowInvocationStep.vue                |   6 +-
 client/src/components/admin/BaseList.vue      |   4 +-
 .../admin/DataManager/DataManager.vue         |  12 +-
 .../admin/DataManager/DataManagerJob.vue      |   8 +-
 .../admin/DataManager/DataManagerJobs.vue     |  14 +-
 .../admin/DataManager/DataManagerTable.vue    |   4 +-
 .../src/components/admin/DataManagerGrid.vue  |   2 +-
 .../src/components/admin/DataTablesGrid.vue   |   2 +-
 client/src/components/admin/DataTypes.vue     |   6 +-
 .../admin/Dependencies/ContainerIndex.vue     |  12 +-
 .../admin/Dependencies/Requirements.vue       |   2 +-
 .../admin/Dependencies/ResolutionDetails.vue  |   4 +-
 .../admin/Dependencies/ResolutionIndex.vue    |  10 +-
 .../admin/Dependencies/Statuses.vue           |   2 +-
 .../components/admin/Dependencies/Tools.vue   |   2 +-
 client/src/components/admin/ErrorStack.vue    |   2 +-
 client/src/components/admin/Home.vue          |  28 ++--
 client/src/components/admin/Jobs.vue          |   4 +-
 client/src/components/admin/JobsTable.vue     |   6 +-
 client/src/components/admin/SanitizeAllow.vue |   8 +-
 client/src/components/login/Confirmation.vue  |   4 +-
 client/src/components/login/Login.vue         |   8 +-
 client/src/components/login/Password.vue      |   6 +-
 client/src/components/login/Register.vue      |  12 +-
 194 files changed, 895 insertions(+), 895 deletions(-)

diff --git a/client/src/components/Annotation.vue b/client/src/components/Annotation.vue
index 5c4ccef7a23..5ed0234f3b0 100644
--- a/client/src/components/Annotation.vue
+++ b/client/src/components/Annotation.vue
@@ -1,24 +1,24 @@
 <template>
     <click-to-edit
+        ref="annotationInput"
+        v-slot="{ toggleEdit, placeholder, stateValidator }"
+        v-b-tooltip.hover="{ boundary: 'viewport', placement: tooltipPlacement }"
         class="annotation"
         tag-name="p"
         :value="annotation"
-        ref="annotationInput"
-        v-b-tooltip.hover="{ boundary: 'viewport', placement: tooltipPlacement }"
         :title="'Edit annotation...' | localize"
-        :placeholder="'Edit annotation...' | localize"
-        v-slot="{ toggleEdit, placeholder, stateValidator }">
-        <debounced-input v-model="annotation" :delay="1000" v-slot="inputScope">
+        :placeholder="'Edit annotation...' | localize">
+        <debounced-input v-slot="inputScope" v-model="annotation" :delay="1000">
             <b-form-textarea
                 size="sm"
                 tabindex="-1"
                 rows="3"
                 no-resize
                 :value="inputScope.value"
-                @input="inputScope.input"
-                @blur="toggleEdit(false)"
                 :placeholder="placeholder"
-                :state="stateValidator(inputScope.value, annotation)"></b-form-textarea>
+                :state="stateValidator(inputScope.value, annotation)"
+                @input="inputScope.input"
+                @blur="toggleEdit(false)"></b-form-textarea>
         </debounced-input>
     </click-to-edit>
 </template>
diff --git a/client/src/components/Citation/Citations.vue b/client/src/components/Citation/Citations.vue
index 26dac5deb21..382c9080fad 100644
--- a/client/src/components/Citation/Citations.vue
+++ b/client/src/components/Citation/Citations.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-card class="citation-card" v-if="!simple" header-tag="nav">
+        <b-card v-if="!simple" class="citation-card" header-tag="nav">
             <template v-slot:header>
                 <b-nav card-header tabs>
                     <b-nav-item
@@ -22,11 +22,11 @@
             </div>
             <div class="citations-formatted">
                 <Citation
+                    v-for="(citation, index) in citations"
+                    :key="index"
                     class="formatted-reference"
                     :citation="citation"
-                    :output-format="outputFormat"
-                    v-for="(citation, index) in citations"
-                    :key="index" />
+                    :output-format="outputFormat" />
             </div>
         </b-card>
         <div v-else-if="citations.length">
@@ -40,11 +40,11 @@
                 @hidden="$emit('hidden')">
                 <b-card>
                     <Citation
+                        v-for="(citation, index) in citations"
+                        :key="index"
                         class="formatted-reference"
                         :citation="citation"
-                        :output-format="outputFormat"
-                        v-for="(citation, index) in citations"
-                        :key="index" />
+                        :output-format="outputFormat" />
                 </b-card>
             </b-collapse>
         </div>
diff --git a/client/src/components/ClickToEdit.vue b/client/src/components/ClickToEdit.vue
index 71a4d0d9bd5..79588ae9dc8 100644
--- a/client/src/components/ClickToEdit.vue
+++ b/client/src/components/ClickToEdit.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="clickToEdit" :class="{ empty: !value.length }">
-        <component :is="tagName" class="m-0" v-if="!editing" @click="toggleEdit(true)">
+        <component :is="tagName" v-if="!editing" class="m-0" @click="toggleEdit(true)">
             <span class="editable"></span>
             <span>{{ displayValue }}</span>
             <slot name="tooltip" :editing="editing" :localValue="localValue"></slot>
@@ -17,11 +17,11 @@
                         <b-form-input
                             ref="clickToEditInput"
                             :value="debouncedValue"
-                            @input="input"
-                            @blur="toggleEdit(false)"
                             :autofocus="true"
                             :placeholder="placeholder"
-                            :state="stateValidator(debouncedValue, localValue)" />
+                            :state="stateValidator(debouncedValue, localValue)"
+                            @input="input"
+                            @blur="toggleEdit(false)" />
                     </template>
                 </debounced-input>
             </slot>
diff --git a/client/src/components/Collections/ListCollectionCreator.vue b/client/src/components/Collections/ListCollectionCreator.vue
index 545c8663fbb..8ed4555b0f3 100644
--- a/client/src/components/Collections/ListCollectionCreator.vue
+++ b/client/src/components/Collections/ListCollectionCreator.vue
@@ -156,8 +156,8 @@
                                 <font-awesome-icon icon="sort-alpha-down" />
                             </b-button>
                             <a
-                                class="clear-selected"
                                 v-if="atLeastOneDatasetIsSelected"
+                                class="clear-selected"
                                 href="javascript:void(0);"
                                 role="button"
                                 :title="titleDeselectButton"
@@ -180,14 +180,14 @@
                                 </b-alert>
                             </div>
                             <dataset-collection-element-view
-                                v-else
                                 v-for="element in returnWorkingElements"
+                                v-else
                                 :key="element.id"
+                                :class="{ selected: getSelectedDatasetElems.includes(element.id) }"
+                                :element="element"
                                 @element-is-selected="elementSelected"
                                 @element-is-discarded="elementDiscarded"
-                                @onRename="(name) => (element.name = name)"
-                                :class="{ selected: getSelectedDatasetElems.includes(element.id) }"
-                                :element="element" />
+                                @onRename="(name) => (element.name = name)" />
                         </draggable>
                     </template>
                 </collection-creator>
diff --git a/client/src/components/Collections/PairCollectionCreator.vue b/client/src/components/Collections/PairCollectionCreator.vue
index 3afefe4d07c..8a48d991a48 100644
--- a/client/src/components/Collections/PairCollectionCreator.vue
+++ b/client/src/components/Collections/PairCollectionCreator.vue
@@ -79,10 +79,10 @@
                 <collection-creator
                     :oncancel="oncancel"
                     :hide-source-items="hideSourceItems"
+                    :suggested-name="initialSuggestedName"
                     @onUpdateHideSourceItems="onUpdateHideSourceItems"
                     @clicked-create="clickedCreate"
-                    @remove-extensions-toggle="removeExtensionsToggle"
-                    :suggested-name="initialSuggestedName">
+                    @remove-extensions-toggle="removeExtensionsToggle">
                     <template v-slot:help-content>
                         <p>
                             {{
diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
index b9b9bfff122..a2160206986 100644
--- a/client/src/components/Collections/PairedListCollectionCreator.vue
+++ b/client/src/components/Collections/PairedListCollectionCreator.vue
@@ -101,10 +101,10 @@
                 <collection-creator
                     :oncancel="oncancel"
                     :hide-source-items="hideSourceItems"
+                    :render-extensions-toggle="true"
                     @onUpdateHideSourceItems="onUpdateHideSourceItems"
                     @clicked-create="clickedCreate"
-                    @remove-extensions-toggle="removeExtensionsToggle"
-                    :render-extensions-toggle="true">
+                    @remove-extensions-toggle="removeExtensionsToggle">
                     <template v-slot:help-content>
                         <p>
                             {{
@@ -250,9 +250,9 @@
                                     <div
                                         class="unpaired-filter forward-unpaired-filter float-left search-input search-query input-group">
                                         <input
+                                            v-model="forwardFilter"
                                             type="text"
                                             :placeholder="filterTextPlaceholder"
-                                            v-model="forwardFilter"
                                             title="filterTextTitle" />
                                         <div class="input-group-append" :title="chooseFilterTitle">
                                             <button
@@ -303,9 +303,9 @@
                                     <div
                                         class="unpaired-filter reverse-unpaired-filter float-left search-input search-query input-group">
                                         <input
+                                            v-model="reverseFilter"
                                             type="text"
                                             :placeholder="filterTextPlaceholder"
-                                            v-model="reverseFilter"
                                             title="filterTextTitle" />
                                         <div class="input-group-append" :title="chooseFilterTitle">
                                             <button
@@ -337,22 +337,22 @@
                                             <unpaired-dataset-element-view
                                                 v-for="element in forwardElements"
                                                 :key="element.id"
-                                                @element-is-selected="forwardElementSelected"
                                                 :class="{
                                                     selected:
                                                         selectedForwardElement &&
                                                         element.id == selectedForwardElement.id,
                                                 }"
-                                                :element="element" />
+                                                :element="element"
+                                                @element-is-selected="forwardElementSelected" />
                                         </ol>
                                     </div>
                                     <div class="paired-column flex-column no-flex column truncate">
-                                        <ol class="column-datasets" v-if="forwardFilter !== '' && reverseFilter !== ''">
+                                        <ol v-if="forwardFilter !== '' && reverseFilter !== ''" class="column-datasets">
                                             <li
                                                 v-for="(pairableElement, index) in pairableElements"
                                                 :key="index"
-                                                @click="_pair(pairableElement.forward, pairableElement.reverse)"
-                                                class="dataset">
+                                                class="dataset"
+                                                @click="_pair(pairableElement.forward, pairableElement.reverse)">
                                                 {{ l("Pair these datasets") }}
                                             </li>
                                         </ol>
@@ -362,13 +362,13 @@
                                             <unpaired-dataset-element-view
                                                 v-for="element in reverseElements"
                                                 :key="element.id"
-                                                @element-is-selected="reverseElementSelected"
                                                 :class="{
                                                     selected:
                                                         selectedReverseElement &&
                                                         element.id == selectedReverseElement.id,
                                                 }"
-                                                :element="element" />
+                                                :element="element"
+                                                @element-is-selected="reverseElementSelected" />
                                         </ol>
                                     </div>
                                 </div>
diff --git a/client/src/components/Collections/common/ClickToEdit.vue b/client/src/components/Collections/common/ClickToEdit.vue
index 4213fb23001..f5e70406f62 100644
--- a/client/src/components/Collections/common/ClickToEdit.vue
+++ b/client/src/components/Collections/common/ClickToEdit.vue
@@ -1,9 +1,9 @@
 <template>
     <input
-        class="click-to-edit-input"
         v-if="editable"
-        contenteditable
         v-model="localValue"
+        class="click-to-edit-input"
+        contenteditable
         @blur="editable = false"
         @keyup.enter="editable = false" />
     <label v-else @click="editable = true">
diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index ece5276070c..bd7af6e50b2 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -6,8 +6,8 @@
                     class="more-help"
                     href="javascript:void(0);"
                     role="button"
-                    @click="_clickForHelp"
-                    :title="titleForHelp">
+                    :title="titleForHelp"
+                    @click="_clickForHelp">
                     <div v-if="!isExpanded">
                         <i class="fas fa-chevron-down"></i>
                     </div>
@@ -22,8 +22,8 @@
                         class="more-help"
                         href="javascript:void(0);"
                         role="button"
-                        @click="_clickForHelp"
-                        :title="titleForHelp">
+                        :title="titleForHelp"
+                        @click="_clickForHelp">
                     </a>
                 </div>
             </div>
@@ -34,24 +34,24 @@
         <div class="footer flex-row no-flex">
             <div class="attributes clear">
                 <div class="clear">
-                    <label class="setting-prompt float-right" v-if="renderExtensionsToggle">
+                    <label v-if="renderExtensionsToggle" class="setting-prompt float-right">
                         {{ removeFileExtensionsText }}
                         <input
                             class="remove-extensions float-right"
                             type="checkbox"
-                            @click="$emit('remove-extensions-toggle')"
-                            checked />
+                            checked
+                            @click="$emit('remove-extensions-toggle')" />
                     </label>
                     <label class="setting-prompt float-right">
                         {{ hideOriginalsText }}
-                        <input class="hide-originals float-right" type="checkbox" v-model="localHideSourceItems" />
+                        <input v-model="localHideSourceItems" class="hide-originals float-right" type="checkbox" />
                     </label>
                 </div>
                 <div class="clear">
                     <input
+                        v-model="collectionName"
                         class="collection-name form-control float-right"
-                        :placeholder="placeholderEnterName"
-                        v-model="collectionName" />
+                        :placeholder="placeholderEnterName" />
                     <div class="collection-name-prompt float-right">
                         {{ l("Name:") }}
                     </div>
@@ -66,8 +66,8 @@
                 <div class="main-options float-right">
                     <button
                         class="create-collection btn btn-primary"
-                        @click="$emit('clicked-create', collectionName)"
-                        :disabled="!validInput">
+                        :disabled="!validInput"
+                        @click="$emit('clicked-create', collectionName)">
                         {{ l("Create collection") }}
                     </button>
                 </div>
diff --git a/client/src/components/Collections/common/DatabaseEditTab.vue b/client/src/components/Collections/common/DatabaseEditTab.vue
index 38c36f6f347..6de8b75eac9 100644
--- a/client/src/components/Collections/common/DatabaseEditTab.vue
+++ b/client/src/components/Collections/common/DatabaseEditTab.vue
@@ -5,8 +5,8 @@
             <div class="text-right">
                 <button
                     class="save-collection-edit btn btn-primary"
-                    @click="clickedSave"
-                    :disabled="selectedGenome.id == databaseKeyFromElements">
+                    :disabled="selectedGenome.id == databaseKeyFromElements"
+                    @click="clickedSave">
                     {{ l("Save") }}
                 </button>
             </div>
diff --git a/client/src/components/Collections/common/SuitableConvertersTab.vue b/client/src/components/Collections/common/SuitableConvertersTab.vue
index 943539c7d22..fa0a0a369b7 100644
--- a/client/src/components/Collections/common/SuitableConvertersTab.vue
+++ b/client/src/components/Collections/common/SuitableConvertersTab.vue
@@ -5,8 +5,8 @@
             <div class="text-right">
                 <button
                     class="run-tool-collection-edit btn btn-primary"
-                    @click="clickedConvert"
-                    :disabled="selectedConverter == {}">
+                    :disabled="selectedConverter == {}"
+                    @click="clickedConvert">
                     {{ l("Convert Collection") }}
                 </button>
             </div>
diff --git a/client/src/components/Common/ButtonSpinner.vue b/client/src/components/Common/ButtonSpinner.vue
index 56531098ef6..5c5a29aeb46 100644
--- a/client/src/components/Common/ButtonSpinner.vue
+++ b/client/src/components/Common/ButtonSpinner.vue
@@ -2,7 +2,7 @@
     <b-button v-if="wait" variant="info" disabled>
         <font-awesome-icon icon="spinner" class="mr-2" spin />Please wait...
     </b-button>
-    <b-button v-else variant="primary" v-b-tooltip.hover.bottom :title="tooltip" @click="$emit('onClick')">
+    <b-button v-else v-b-tooltip.hover.bottom variant="primary" :title="tooltip" @click="$emit('onClick')">
         <font-awesome-icon icon="check" class="mr-2" />{{ title }}
     </b-button>
 </template>
diff --git a/client/src/components/Common/DelayedInput.vue b/client/src/components/Common/DelayedInput.vue
index 8ede19412fb..8f3281c2267 100644
--- a/client/src/components/Common/DelayedInput.vue
+++ b/client/src/components/Common/DelayedInput.vue
@@ -1,11 +1,11 @@
 <template>
     <b-input-group>
         <b-input
-            class="search-query"
             ref="toolInput"
+            v-model="queryInput"
+            class="search-query"
             size="sm"
             autocomplete="off"
-            v-model="queryInput"
             :placeholder="placeholder"
             @input="delayQuery"
             @change="setQuery"
@@ -15,8 +15,8 @@
                 class="search-clear"
                 size="sm"
                 :title="titleClear | l"
-                @click="clearBox"
-                data-description="reset query">
+                data-description="reset query"
+                @click="clearBox">
                 <icon v-if="loading" icon="spinner" spin />
                 <icon v-else icon="times" />
             </b-button>
diff --git a/client/src/components/Common/SlugInput.vue b/client/src/components/Common/SlugInput.vue
index 0d1129ec8c6..5bdf953f576 100644
--- a/client/src/components/Common/SlugInput.vue
+++ b/client/src/components/Common/SlugInput.vue
@@ -1,11 +1,11 @@
 <template>
     <b-input
+        ref="input"
         v-model="slugInput"
+        class="d-inline w-auto h-auto px-1 py-0"
         @change="onChange"
         @keydown.enter="onChange"
-        @keydown.esc="onCancel"
-        class="d-inline w-auto h-auto px-1 py-0"
-        ref="input" />
+        @keydown.esc="onCancel" />
 </template>
 <script>
 import Vue from "vue";
diff --git a/client/src/components/Common/Webhook.vue b/client/src/components/Common/Webhook.vue
index a3885849690..6aec81f5dc1 100644
--- a/client/src/components/Common/Webhook.vue
+++ b/client/src/components/Common/Webhook.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="webhook" id="webhook-view" />
+    <div id="webhook-view" ref="webhook" />
 </template>
 <script>
 import Webhooks from "mvc/webhooks";
diff --git a/client/src/components/DataDialog/DataDialog.vue b/client/src/components/DataDialog/DataDialog.vue
index 77c8a203e37..e2e73ec52a7 100644
--- a/client/src/components/DataDialog/DataDialog.vue
+++ b/client/src/components/DataDialog/DataDialog.vue
@@ -17,7 +17,7 @@
                 @open="onLoad" />
         </template>
         <template v-slot:buttons>
-            <b-btn size="sm" class="float-left" v-if="undoShow" @click="load()">
+            <b-btn v-if="undoShow" size="sm" class="float-left" @click="load()">
                 <div class="fa fa-caret-left mr-1" />
                 Back
             </b-btn>
@@ -30,8 +30,8 @@
                 size="sm"
                 class="float-right ml-1"
                 variant="primary"
-                @click="onOk"
-                :disabled="!hasValue">
+                :disabled="!hasValue"
+                @click="onOk">
                 Ok
             </b-btn>
         </template>
diff --git a/client/src/components/Dataset/DatasetIndex/DatasetIndex.vue b/client/src/components/Dataset/DatasetIndex/DatasetIndex.vue
index 0159e1ad17a..6e3eaccd903 100644
--- a/client/src/components/Dataset/DatasetIndex/DatasetIndex.vue
+++ b/client/src/components/Dataset/DatasetIndex/DatasetIndex.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
         <b-table
-            thead-class="hidden_header"
             v-if="directoryContent && !errorMessage"
+            thead-class="hidden_header"
             striped
             hover
             :fields="fields"
diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index 29970ab52b6..3cf67acc1a3 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -3,8 +3,8 @@
         <div v-if="error" class="alert alert-danger" show>{{ error }}</div>
         <div v-else>
             <b-alert :variant="messageVariant" :show="showMessage">{{ message }}</b-alert>
-            <delayed-input class="m-1 mb-3" @change="onQuery" placeholder="Search Datasets" />
-            <b-table id="dataset-table" striped no-local-sorting @sort-changed="onSort" :fields="fields" :items="rows">
+            <delayed-input class="m-1 mb-3" placeholder="Search Datasets" @change="onQuery" />
+            <b-table id="dataset-table" striped no-local-sorting :fields="fields" :items="rows" @sort-changed="onSort">
                 <template v-slot:cell(name)="row">
                     <DatasetName :item="row.item" @showDataset="onShowDataset" @copyDataset="onCopyDataset" />
                 </template>
diff --git a/client/src/components/Dataset/DatasetName.vue b/client/src/components/Dataset/DatasetName.vue
index 8e738d9bedf..021ab8fae3d 100644
--- a/client/src/components/Dataset/DatasetName.vue
+++ b/client/src/components/Dataset/DatasetName.vue
@@ -8,13 +8,13 @@
             aria-expanded="false">
             <span
                 v-if="isError"
-                class="dataset-icon error fa fa-times-circle text-danger"
                 v-b-tooltip.hover
+                class="dataset-icon error fa fa-times-circle text-danger"
                 title="An error occurred for this dataset." />
             <span
                 v-else-if="isPaused"
-                class="dataset-icon pause fa fa-pause text-info"
                 v-b-tooltip.hover
+                class="dataset-icon pause fa fa-pause text-info"
                 title="The creation of this dataset has been paused." />
             <span v-else class="dataset-icon fa fa-caret-down" />
             <span class="name">{{ this.getName }}</span>
diff --git a/client/src/components/Dataset/DatasetStorage/DatasetStorage.vue b/client/src/components/Dataset/DatasetStorage/DatasetStorage.vue
index 37f661fe0a1..8477c303dbe 100644
--- a/client/src/components/Dataset/DatasetStorage/DatasetStorage.vue
+++ b/client/src/components/Dataset/DatasetStorage/DatasetStorage.vue
@@ -6,13 +6,13 @@
         <div v-else>
             <p>
                 This dataset is stored in
-                <span class="display-os-by-name" v-if="storageInfo.name">
+                <span v-if="storageInfo.name" class="display-os-by-name">
                     a Galaxy object store named <b>{{ storageInfo.name }}</b>
                 </span>
-                <span class="display-os-by-id" v-else-if="storageInfo.object_store_id">
+                <span v-else-if="storageInfo.object_store_id" class="display-os-by-id">
                     a Galaxy object store with id <b>{{ storageInfo.object_store_id }}</b>
                 </span>
-                <span class="display-os-default" v-else> the default configured Galaxy object store </span>.
+                <span v-else class="display-os-default"> the default configured Galaxy object store </span>.
             </p>
             <div v-html="descriptionRendered"></div>
         </div>
diff --git a/client/src/components/DatasetInformation/DatasetAttributes.vue b/client/src/components/DatasetInformation/DatasetAttributes.vue
index b4cd0e20406..4f340a53532 100644
--- a/client/src/components/DatasetInformation/DatasetAttributes.vue
+++ b/client/src/components/DatasetInformation/DatasetAttributes.vue
@@ -15,9 +15,9 @@
                         <div class="mt-2">
                             <b-button
                                 id="dataset-attributes-default-save"
-                                @click="submit('attribute', 'attributes')"
                                 variant="primary"
-                                class="mr-1">
+                                class="mr-1"
+                                @click="submit('attribute', 'attributes')">
                                 <font-awesome-icon icon="save" class="mr-1" />{{ "Save" | l }}
                             </b-button>
                             <b-button @click="submit('attribute', 'autodetect')">
@@ -31,7 +31,7 @@
                         </template>
                         <FormDisplay :inputs="result['conversion_inputs']" @onChange="onConversion" />
                         <div class="mt-2">
-                            <b-button @click="submit('conversion', 'conversion')" variant="primary">
+                            <b-button variant="primary" @click="submit('conversion', 'conversion')">
                                 <font-awesome-icon icon="exchange-alt" class="mr-1" />{{ "Create Dataset" | l }}
                             </b-button>
                         </div>
@@ -42,7 +42,7 @@
                         </template>
                         <FormDisplay :inputs="result['datatype_inputs']" @onChange="onDatatype" />
                         <div class="mt-2">
-                            <b-button @click="submit('datatype', 'datatype')" variant="primary" class="mr-1">
+                            <b-button variant="primary" class="mr-1" @click="submit('datatype', 'datatype')">
                                 <font-awesome-icon icon="save" class="mr-1" />{{ "Save" | l }}
                             </b-button>
                             <b-button @click="submit('datatype', 'datatype_detect')">
@@ -56,7 +56,7 @@
                         </template>
                         <FormDisplay :inputs="result['permission_inputs']" @onChange="onPermission" />
                         <div class="mt-2">
-                            <b-button @click="submit('permission', 'permission')" variant="primary">
+                            <b-button variant="primary" @click="submit('permission', 'permission')">
                                 <font-awesome-icon icon="save" class="mr-1" />{{ "Save" | l }}
                             </b-button>
                         </div>
diff --git a/client/src/components/DatasetInformation/DatasetDetails.vue b/client/src/components/DatasetInformation/DatasetDetails.vue
index 83066d5e2c7..afa96fcfc9b 100644
--- a/client/src/components/DatasetInformation/DatasetDetails.vue
+++ b/client/src/components/DatasetInformation/DatasetDetails.vue
@@ -9,9 +9,9 @@
                 <CurrentUser v-else v-slot="{ user }">
                     <JobDetailsProvider
                         v-if="!isDatasetLoading && dataset.creating_job !== null"
+                        v-slot="{ result: job, loading: isJobLoading }"
                         :jobid="dataset.creating_job"
-                        auto-refresh
-                        v-slot="{ result: job, loading: isJobLoading }">
+                        auto-refresh>
                         <div v-if="!isJobLoading">
                             <dataset-information class="detail" :hda_id="datasetId" />
                             <job-parameters class="detail" dataset_type="hda" :dataset-id="datasetId" />
@@ -19,16 +19,16 @@
                             <dataset-storage class="detail" :dataset-id="datasetId" />
                             <inheritance-chain class="detail" :dataset-id="datasetId" :dataset-name="dataset.name" />
                             <job-metrics
-                                class="detail"
                                 v-if="config"
+                                class="detail"
                                 :aws_estimate="config.aws_estimate"
                                 :dataset-id="datasetId" />
                             <job-destination-params
-                                class="detail"
                                 v-if="user.is_admin"
+                                class="detail"
                                 :job-id="dataset.creating_job" />
                             <job-dependencies class="detail" :dependencies="job.dependencies"></job-dependencies>
-                            <div class="detail" v-if="dataset.peek">
+                            <div v-if="dataset.peek" class="detail">
                                 <h3>Dataset Peek:</h3>
                                 <div v-html="dataset.peek" />
                             </div>
diff --git a/client/src/components/DatasetInformation/DatasetError.vue b/client/src/components/DatasetInformation/DatasetError.vue
index ddbb8e9aa24..b154b36b5dc 100644
--- a/client/src/components/DatasetInformation/DatasetError.vue
+++ b/client/src/components/DatasetInformation/DatasetError.vue
@@ -7,8 +7,8 @@
         <DatasetProvider :id="datasetId" v-slot="{ result: dataset, loading: datasetLoading }">
             <JobDetailsProvider
                 v-if="!datasetLoading"
-                :jobid="dataset.creating_job"
                 v-slot="{ result: jobDetails, loading }"
+                :jobid="dataset.creating_job"
                 @error="onError">
                 <div v-if="!loading">
                     <div class="page-container edit-attr">
@@ -24,7 +24,7 @@
                         :tool-stderr="jobDetails.tool_stderr"
                         :job-stderr="jobDetails.job_stderr"
                         :job-messages="jobDetails.job_messages" />
-                    <JobProblemProvider :jobid="dataset.creating_job" v-slot="{ result: jobProblems }" @error="onError">
+                    <JobProblemProvider v-slot="{ result: jobProblems }" :jobid="dataset.creating_job" @error="onError">
                         <div v-if="jobProblems && (jobProblems.has_duplicate_inputs || jobProblems.has_empty_inputs)">
                             <h3 class="common_problems mt-3">Detected Common Potential Problems</h3>
                             <p v-if="jobProblems.has_empty_inputs" id="dataset-error-has-empty-inputs">
@@ -72,8 +72,8 @@
                         <b-button
                             id="dataset-error-submit"
                             variant="primary"
-                            @click="submit(dataset, jobDetails.user_email)"
-                            class="mt-3">
+                            class="mt-3"
+                            @click="submit(dataset, jobDetails.user_email)">
                             <font-awesome-icon icon="bug" class="mr-1" />Report
                         </b-button>
                     </div>
diff --git a/client/src/components/DatasetInformation/DatasetInformation.vue b/client/src/components/DatasetInformation/DatasetInformation.vue
index 2d4494d3c2e..0d78156654d 100644
--- a/client/src/components/DatasetInformation/DatasetInformation.vue
+++ b/client/src/components/DatasetInformation/DatasetInformation.vue
@@ -14,7 +14,7 @@
                     </tr>
                     <tr>
                         <td>Created</td>
-                        <td id="created" v-if="dataset.create_time">
+                        <td v-if="dataset.create_time" id="created">
                             <UtcDate :date="dataset.create_time" mode="pretty" />
                         </td>
                     </tr>
diff --git a/client/src/components/DatasetInformation/DatasetSourceTransform.vue b/client/src/components/DatasetInformation/DatasetSourceTransform.vue
index 188f8fecf47..d469dab7ace 100644
--- a/client/src/components/DatasetInformation/DatasetSourceTransform.vue
+++ b/client/src/components/DatasetInformation/DatasetSourceTransform.vue
@@ -6,10 +6,10 @@
             <ul>
                 <li v-for="(transformAction, index) in transform" :key="index">
                     <span
+                        v-b-tooltip.hover.noninteractive.nofade.bottom
                         :title="actionLongDescription(transformAction)"
                         class="dataset-source-transform-element"
-                        :data-transform-action="transformAction.action"
-                        v-b-tooltip.hover.noninteractive.nofade.bottom>
+                        :data-transform-action="transformAction.action">
                         {{ actionShortDescription(transformAction) }}
                     </span>
                 </li>
diff --git a/client/src/components/FilesDialog/FilesDialog.vue b/client/src/components/FilesDialog/FilesDialog.vue
index 8fcecfb9872..fb9496102aa 100644
--- a/client/src/components/FilesDialog/FilesDialog.vue
+++ b/client/src/components/FilesDialog/FilesDialog.vue
@@ -37,18 +37,18 @@
                 @toggleSelectAll="toggleSelectAll" />
         </template>
         <template v-slot:buttons>
-            <b-btn id="back-btn" size="sm" class="float-left" v-if="undoShow" @click="load()">
+            <b-btn v-if="undoShow" id="back-btn" size="sm" class="float-left" @click="load()">
                 <font-awesome-icon :icon="['fas', 'caret-left']" />
                 Back
             </b-btn>
             <b-btn
                 v-if="multiple || !fileMode"
+                id="ok-btn"
                 size="sm"
                 class="float-right ml-1 file-dialog-modal-ok"
                 variant="primary"
-                id="ok-btn"
-                @click="fileMode ? finalize() : selectLeaf(currentDirectory)"
-                :disabled="(fileMode && !hasValue) || isBusy || (!fileMode && urlTracker.atRoot())">
+                :disabled="(fileMode && !hasValue) || isBusy || (!fileMode && urlTracker.atRoot())"
+                @click="fileMode ? finalize() : selectLeaf(currentDirectory)">
                 {{ fileMode ? "Ok" : "Select this folder" }}
             </b-btn>
         </template>
diff --git a/client/src/components/FilesDialog/FilesInput.vue b/client/src/components/FilesDialog/FilesInput.vue
index 9f905c920d7..7584115c3ba 100644
--- a/client/src/components/FilesDialog/FilesInput.vue
+++ b/client/src/components/FilesDialog/FilesInput.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-form-input class="directory-form-input" v-model="localValue" :placeholder="placeholder" @click="selectFile">
+    <b-form-input v-model="localValue" class="directory-form-input" :placeholder="placeholder" @click="selectFile">
     </b-form-input>
 </template>
 
diff --git a/client/src/components/Form/Elements/FormColor.vue b/client/src/components/Form/Elements/FormColor.vue
index cc0fd23cdce..31e3156aa37 100644
--- a/client/src/components/Form/Elements/FormColor.vue
+++ b/client/src/components/Form/Elements/FormColor.vue
@@ -1,7 +1,7 @@
 <template>
     <b-row>
         <b-col class="form-color-input">
-            <b-form-input class="cursor-pointer" :id="id" v-model="currentValue" type="color" size="sm" />
+            <b-form-input :id="id" v-model="currentValue" class="cursor-pointer" type="color" size="sm" />
         </b-col>
         <b-col class="pl-0">
             <label class="pt-1 cursor-pointer" :for="id">Select a color</label>
diff --git a/client/src/components/Form/Elements/FormDirectory.vue b/client/src/components/Form/Elements/FormDirectory.vue
index fdb533fa78b..8d3dd2bdce1 100644
--- a/client/src/components/Form/Elements/FormDirectory.vue
+++ b/client/src/components/Form/Elements/FormDirectory.vue
@@ -7,7 +7,7 @@
             <FilesDialog :key="modalKey" mode="directory" :callback="setUrl" :require-writable="true" />
         </div>
         <b-breadcrumb v-if="url">
-            <b-breadcrumb-item title="Select another folder" @click="reset" class="align-items-center">
+            <b-breadcrumb-item title="Select another folder" class="align-items-center" @click="reset">
                 <b-button class="pathname" variant="primary">
                     <font-awesome-icon icon="folder-open" /> {{ url.protocol }}</b-button
                 >
@@ -16,21 +16,21 @@
                 v-for="({ pathChunk, editable }, index) in pathChunks"
                 :key="index"
                 class="existent-url-path align-items-center">
-                <b-button class="regular-path-chunk" @click="removePath(index)" :disabled="!editable" variant="dark">
+                <b-button class="regular-path-chunk" :disabled="!editable" variant="dark" @click="removePath(index)">
                     {{ pathChunk }}</b-button
                 >
             </b-breadcrumb-item>
             <b-breadcrumb-item class="directory-input-field align-items-center">
                 <b-input
                     id="path-input-breadcrumb"
+                    v-model="currentDirectoryName"
                     aria-describedby="input-live-help input-live-feedback"
                     :state="isValidName"
+                    placeholder="enter directory name"
+                    trim
                     @keyup.enter="addPath"
                     @keydown.191.capture.prevent.stop="addPath"
-                    @keydown.8.capture="removeLastPath"
-                    v-model="currentDirectoryName"
-                    placeholder="enter directory name"
-                    trim />
+                    @keydown.8.capture="removeLastPath" />
             </b-breadcrumb-item>
         </b-breadcrumb>
     </div>
diff --git a/client/src/components/Form/Elements/FormInput.vue b/client/src/components/Form/Elements/FormInput.vue
index d2cc0264769..d6d3d54bd05 100644
--- a/client/src/components/Form/Elements/FormInput.vue
+++ b/client/src/components/Form/Elements/FormInput.vue
@@ -1,6 +1,6 @@
 <template>
-    <textarea v-if="area" :id="id" class="ui-textarea" v-model="currentValue" />
-    <input v-else :id="id" class="ui-input" v-model="currentValue" />
+    <textarea v-if="area" :id="id" v-model="currentValue" class="ui-textarea" />
+    <input v-else :id="id" v-model="currentValue" class="ui-input" />
 </template>
 <script>
 export default {
diff --git a/client/src/components/Form/Elements/FormNumber.vue b/client/src/components/Form/Elements/FormNumber.vue
index 859f3d4c98c..5ba2bc51c63 100644
--- a/client/src/components/Form/Elements/FormNumber.vue
+++ b/client/src/components/Form/Elements/FormNumber.vue
@@ -1,21 +1,21 @@
 <template>
     <div>
-        <b-alert class="mt-2" v-if="errorMessage" :show="dismissCountDown" variant="info" @dismissed="resetAlert">
+        <b-alert v-if="errorMessage" class="mt-2" :show="dismissCountDown" variant="info" @dismissed="resetAlert">
             {{ errorMessage }}
         </b-alert>
         <b-row align-v="center">
             <b-col :sm="isRangeValid ? defaultInputSizeWithSlider : false">
                 <!-- regular dot and dot on numpad have different codes -->
                 <b-form-input
-                    @change="onInputChange"
-                    @keydown.190.capture="onFloatInput"
-                    @keydown.110.capture="onFloatInput"
                     v-model="currentValue"
                     :step="step"
                     size="sm"
-                    type="number" />
+                    type="number"
+                    @change="onInputChange"
+                    @keydown.190.capture="onFloatInput"
+                    @keydown.110.capture="onFloatInput" />
             </b-col>
-            <b-col class="pl-0" v-if="isRangeValid">
+            <b-col v-if="isRangeValid" class="pl-0">
                 <b-form-input v-model="currentValue" :min="min" :max="max" :step="step" type="range" />
             </b-col>
         </b-row>
diff --git a/client/src/components/Form/FormCard.vue b/client/src/components/Form/FormCard.vue
index a3e71b1ac88..bca183f8e9c 100644
--- a/client/src/components/Form/FormCard.vue
+++ b/client/src/components/Form/FormCard.vue
@@ -5,23 +5,23 @@
                 <slot name="operations" />
                 <b-button
                     v-if="collapsible"
+                    v-b-tooltip.hover.bottom
                     role="button"
                     title="Collapse/Expand"
                     variant="link"
                     size="sm"
                     class="float-right"
-                    v-b-tooltip.hover.bottom
                     @click="onCollapse">
                     <font-awesome-icon v-if="expanded" icon="eye-slash" class="fa-fw" />
                     <font-awesome-icon v-else icon="eye" class="fa-fw" />
                 </b-button>
             </div>
-            <b-link class="portlet-title" v-if="collapsible" @click="onCollapse" href="#">
+            <b-link v-if="collapsible" class="portlet-title" href="#" @click="onCollapse">
                 <span v-if="icon" :class="['portlet-title-icon fa mr-1', icon]" />
                 <b class="portlet-title-text" itemprop="name">{{ title }}</b>
                 <span class="portlet-title-description" itemprop="description">{{ description }}</span>
             </b-link>
-            <span class="portlet-title" v-else>
+            <span v-else class="portlet-title">
                 <span v-if="icon" :class="['portlet-title-icon fa mr-1', icon]" />
                 <b class="portlet-title-text" itemprop="name">{{ title }}</b>
                 <span class="portlet-title-description" itemprop="description">{{ description }}</span>
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index b66906be4e0..d980170483c 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -21,26 +21,26 @@
             <span v-else class="ui-form-title-text">{{ title }}</span>
         </div>
         <div v-if="showField" class="ui-form-field" :data-label="title">
-            <FormBoolean v-if="type == 'boolean'" v-model="currentValue" :id="id" />
-            <FormHidden v-else-if="isHiddenType" v-model="currentValue" :id="id" :info="attrs['info']" />
+            <FormBoolean v-if="type == 'boolean'" :id="id" v-model="currentValue" />
+            <FormHidden v-else-if="isHiddenType" :id="id" v-model="currentValue" :info="attrs['info']" />
             <FormNumber
                 v-else-if="type == 'integer' || type == 'float'"
+                :id="id"
+                v-model="currentValue"
                 :max="attrs.max"
                 :min="attrs.min"
-                :type="type"
-                v-model="currentValue"
-                :id="id" />
-            <FormColor v-else-if="type == 'color'" v-model="currentValue" :id="id" />
+                :type="type" />
+            <FormColor v-else-if="type == 'color'" :id="id" v-model="currentValue" />
             <FormDirectory v-else-if="type == 'directory_uri'" v-model="currentValue" />
             <FormParameter
                 v-else-if="backbonejs"
-                v-model="currentValue"
                 :id="id"
+                ref="params"
+                v-model="currentValue"
                 :data-label="title"
                 :type="type"
-                :attributes="attrs"
-                ref="params" />
-            <FormInput v-else v-model="currentValue" :id="id" :area="attrs['area']" />
+                :attributes="attrs" />
+            <FormInput v-else :id="id" v-model="currentValue" :area="attrs['area']" />
         </div>
         <div v-if="showPreview" class="ui-form-preview" v-html="previewText" />
         <span v-if="!!helpText" class="ui-form-info form-text text-muted" v-html="helpText" />
diff --git a/client/src/components/Form/FormGeneric.vue b/client/src/components/Form/FormGeneric.vue
index 40e2a25223e..b72cf9f3ddc 100644
--- a/client/src/components/Form/FormGeneric.vue
+++ b/client/src/components/Form/FormGeneric.vue
@@ -1,6 +1,6 @@
 <template>
-    <UrlDataProvider :url="url" v-slot="{ result: config, loading }" @error="onError">
-        <div :id="id" v-if="!loading">
+    <UrlDataProvider v-slot="{ result: config, loading }" :url="url" @error="onError">
+        <div v-if="!loading" :id="id">
             <b-alert v-if="config.message" :variant="configMessageVariant(config)" show>
                 {{ config.message }}
             </b-alert>
diff --git a/client/src/components/Form/FormInputs.vue b/client/src/components/Form/FormInputs.vue
index 5267d7790ea..794db8881a5 100644
--- a/client/src/components/Form/FormInputs.vue
+++ b/client/src/components/Form/FormInputs.vue
@@ -3,8 +3,8 @@
         <div v-for="(input, index) in inputs" :key="index">
             <div v-if="input.type == 'conditional'">
                 <FormElement
-                    v-model="input.test_param.value"
                     :id="conditionalPrefix(input, input.test_param.name)"
+                    v-model="input.test_param.value"
                     :title="input.test_param.label"
                     :type="input.test_param.type"
                     :help="input.test_param.help"
@@ -32,11 +32,11 @@
                     <template v-slot:operations>
                         <b-button
                             v-if="!sustainRepeats"
+                            v-b-tooltip.hover.bottom
                             role="button"
                             variant="link"
                             size="sm"
                             class="float-right"
-                            v-b-tooltip.hover.bottom
                             @click="repeatDelete(input, cacheId)">
                             <font-awesome-icon icon="trash-alt" />
                         </b-button>
@@ -59,8 +59,8 @@
             </div>
             <FormElement
                 v-else
-                v-model="input.value"
                 :id="getPrefix(input.name)"
+                v-model="input.value"
                 :title="input.label || input.name"
                 :type="input.type"
                 :error="input.error"
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index 009808944e6..45dcbf3681c 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -54,7 +54,7 @@
         </div>
         <!-- collections are not expandable, so we only need the DatasetDetails component here -->
         <div class="detail-animation-wrapper" :class="expandDataset ? '' : 'collapsed'">
-            <DatasetDetails v-if="expandDataset" @edit="onEdit" :dataset="item" />
+            <DatasetDetails v-if="expandDataset" :dataset="item" @edit="onEdit" />
         </div>
     </div>
 </template>
diff --git a/client/src/components/History/Content/Dataset/DatasetActions.vue b/client/src/components/History/Content/Dataset/DatasetActions.vue
index 903ea5265ea..cd49d6a1a88 100644
--- a/client/src/components/History/Content/Dataset/DatasetActions.vue
+++ b/client/src/components/History/Content/Dataset/DatasetActions.vue
@@ -67,7 +67,7 @@
             </div>
         </div>
         <div v-if="showTags" class="mb-2">
-            <StatelessTags class="tags" v-model="tags" @input="onTags" />
+            <StatelessTags v-model="tags" class="tags" @input="onTags" />
         </div>
     </div>
 </template>
diff --git a/client/src/components/History/Content/Dataset/DatasetDetails.vue b/client/src/components/History/Content/Dataset/DatasetDetails.vue
index f734a62949b..ad472098a77 100644
--- a/client/src/components/History/Content/Dataset/DatasetDetails.vue
+++ b/client/src/components/History/Content/Dataset/DatasetDetails.vue
@@ -1,5 +1,5 @@
 <template>
-    <DatasetProvider :id="dataset.id" auto-refresh v-slot="{ loading, result }">
+    <DatasetProvider :id="dataset.id" v-slot="{ loading, result }" auto-refresh>
         <div v-if="!loading" class="dataset">
             <div class="p-2 details">
                 <div class="summary">
@@ -8,7 +8,7 @@
                         <span class="value">{{ result.misc_blurb }}</span>
                     </div>
                     <span v-if="result.file_ext" class="datatype">
-                        <label class="prompt" v-localize>format</label>
+                        <label v-localize class="prompt">format</label>
                         <span class="value">{{ result.file_ext }}</span>
                     </span>
                     <span v-if="result.genome_build" class="dbkey">
diff --git a/client/src/components/History/Content/GenericElement.vue b/client/src/components/History/Content/GenericElement.vue
index 54f85ae311a..c8e8d1b0172 100644
--- a/client/src/components/History/Content/GenericElement.vue
+++ b/client/src/components/History/Content/GenericElement.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
         <ContentItem
-            :item="item.object"
             :id="item.element_index"
+            :item="item.object"
             :name="item.element_identifier"
             :is-dataset="item.element_type == 'hda'"
             :expand-dataset="expandDataset"
diff --git a/client/src/components/History/Content/GenericItem.vue b/client/src/components/History/Content/GenericItem.vue
index 205cee1d5a1..abe04cdf46f 100644
--- a/client/src/components/History/Content/GenericItem.vue
+++ b/client/src/components/History/Content/GenericItem.vue
@@ -1,10 +1,10 @@
 <template>
-    <component :is="providerComponent" :id="itemId" auto-refresh v-slot="{ result: item, loading }">
+    <component :is="providerComponent" :id="itemId" v-slot="{ result: item, loading }" auto-refresh>
         <loading-span v-if="loading" message="Loading dataset" />
         <div v-else>
             <ContentItem
-                :item="item"
                 :id="item.hid"
+                :item="item"
                 :name="item.name"
                 :expand-dataset="expandDataset"
                 :is-dataset="item.history_content_type == 'dataset'"
diff --git a/client/src/components/History/CurrentCollection/CollectionNavigation.vue b/client/src/components/History/CurrentCollection/CollectionNavigation.vue
index 66e79bc81ba..8fd115b5935 100644
--- a/client/src/components/History/CurrentCollection/CollectionNavigation.vue
+++ b/client/src/components/History/CurrentCollection/CollectionNavigation.vue
@@ -3,7 +3,7 @@
         <b-button size="sm" class="text-decoration-none" variant="link" @click="close">
             <icon icon="angle-double-left" class="mr-1" data-description="back to history" /><span>History</span>
         </b-button>
-        <b-button size="sm" class="text-decoration-none" variant="link" v-if="previousName" @click="back">
+        <b-button v-if="previousName" size="sm" class="text-decoration-none" variant="link" @click="back">
             <span class="fa fa-angle-left mr-1" /><span>{{ previousName }}</span>
         </b-button>
     </div>
diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue
index ee42b32fc55..fdda4fd5dcd 100644
--- a/client/src/components/History/CurrentCollection/CollectionPanel.vue
+++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue
@@ -3,12 +3,12 @@
 <template>
     <CollectionElementsProvider
         v-if="dsc"
-        :key="dsc.id"
         :id="dsc.id"
+        :key="dsc.id"
+        v-slot="{ loading, result: payload }"
         :contents-url="contentsUrl"
-        :offset="offset"
-        v-slot="{ loading, result: payload }">
-        <ExpandedItems :scope-key="dsc.id" :get-item-key="(item) => item.id" v-slot="{ isExpanded, setExpanded }">
+        :offset="offset">
+        <ExpandedItems v-slot="{ isExpanded, setExpanded }" :scope-key="dsc.id" :get-item-key="(item) => item.id">
             <section class="dataset-collection-panel d-flex flex-column">
                 <section>
                     <CollectionNavigation
@@ -23,8 +23,8 @@
                         <Listing :items="payload" :loading="loading" @scroll="onScroll">
                             <template v-slot:item="{ item }">
                                 <ContentItem
-                                    :item="item.object"
                                     :id="item.element_index"
+                                    :item="item.object"
                                     :name="item.element_identifier"
                                     :expand-dataset="isExpanded(item)"
                                     :is-dataset="item.element_type == 'hda'"
diff --git a/client/src/components/History/CurrentHistory/HistoryDetails.vue b/client/src/components/History/CurrentHistory/HistoryDetails.vue
index b6c65fea30d..ec9a052f879 100644
--- a/client/src/components/History/CurrentHistory/HistoryDetails.vue
+++ b/client/src/components/History/CurrentHistory/HistoryDetails.vue
@@ -6,7 +6,7 @@
         :writeable="writeable"
         @save="onSave">
         <template v-slot:name>
-            <h3 data-description="name display" v-short="history.name || 'History'" />
+            <h3 v-short="history.name || 'History'" data-description="name display" />
             <h5 class="history-size mt-1">
                 <span v-if="history.size">
                     <div>{{ history.size | niceFileSize }}</div>
diff --git a/client/src/components/History/CurrentHistory/HistoryEmpty.vue b/client/src/components/History/CurrentHistory/HistoryEmpty.vue
index 0d6b3a506dc..bfd16dc946a 100644
--- a/client/src/components/History/CurrentHistory/HistoryEmpty.vue
+++ b/client/src/components/History/CurrentHistory/HistoryEmpty.vue
@@ -5,9 +5,9 @@
             <span>{{ message | l }}</span>
         </h4>
         <p>
-            <a href="#" @click.prevent="openGlobalUploadModal" v-localize>You can load your own data</a>
+            <a v-localize href="#" @click.prevent="openGlobalUploadModal">You can load your own data</a>
             <span v-localize>or</span>
-            <a href="#" @click.prevent="clickDataLink" v-localize>get data from an external source</a>.
+            <a v-localize href="#" @click.prevent="clickDataLink">get data from an external source</a>.
         </p>
     </b-alert>
 </template>
diff --git a/client/src/components/History/CurrentHistory/HistoryFilters.vue b/client/src/components/History/CurrentHistory/HistoryFilters.vue
index 9f4750a1547..2b5c1896aa2 100644
--- a/client/src/components/History/CurrentHistory/HistoryFilters.vue
+++ b/client/src/components/History/CurrentHistory/HistoryFilters.vue
@@ -1,26 +1,26 @@
 <template>
     <div>
         <b-input-group>
-            <DebouncedInput v-model="localFilter" v-slot="{ value, input }">
+            <DebouncedInput v-slot="{ value, input }" v-model="localFilter">
                 <b-form-input
                     size="sm"
                     :value="value"
-                    @input="input"
-                    @keyup.esc="onReset"
                     :placeholder="'search datasets' | localize"
-                    data-description="filter text input" />
+                    data-description="filter text input"
+                    @input="input"
+                    @keyup.esc="onReset" />
             </DebouncedInput>
             <b-input-group-append>
                 <b-button
                     size="sm"
                     :pressed="showAdvanced"
                     :variant="showAdvanced ? 'info' : 'secondary'"
-                    @click="onToggle"
-                    data-description="show advanced filter toggle">
+                    data-description="show advanced filter toggle"
+                    @click="onToggle">
                     <icon v-if="showAdvanced" icon="angle-double-up" />
                     <icon v-else icon="angle-double-down" />
                 </b-button>
-                <b-button size="sm" @click="onReset" data-description="show deleted filter toggle">
+                <b-button size="sm" data-description="show deleted filter toggle" @click="onReset">
                     <icon icon="times" />
                 </b-button>
             </b-input-group-append>
@@ -53,7 +53,7 @@
             <small>Show visible:</small>
             <b-form-checkbox v-model="filterSettings['visible=']" size="sm" switch description="filter visible" />
             <div class="mt-3">
-                <b-button class="mr-1" @click="onSearch" size="sm" variant="primary" description="apply filters">
+                <b-button class="mr-1" size="sm" variant="primary" description="apply filters" @click="onSearch">
                     <icon icon="search" />
                     <span>{{ "Search" | localize }}</span>
                 </b-button>
diff --git a/client/src/components/History/CurrentHistory/HistoryNavigation.vue b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
index b1a5e8f7341..3e55f191a4b 100644
--- a/client/src/components/History/CurrentHistory/HistoryNavigation.vue
+++ b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
@@ -7,10 +7,10 @@
             <h4 class="m-1">History</h4>
             <b-button-group>
                 <b-button
+                    v-b-tooltip.bottom.hover
                     data-description="create new history"
                     size="sm"
                     variant="link"
-                    v-b-tooltip.bottom.hover
                     title="Create new history"
                     @click="$emit('createNewHistory')">
                     <Icon fixed-width icon="plus" />
@@ -18,25 +18,25 @@
 
                 <b-button
                     v-b-modal.selector-history-modal
+                    v-b-tooltip.bottom.hover
                     data-description="switch to another history"
                     size="sm"
                     variant="link"
-                    v-b-tooltip.bottom.hover
                     title="Switch to history">
                     <Icon fixed-width icon="exchange-alt" />
                 </b-button>
 
                 <b-dropdown
+                    v-b-tooltip.bottom.hover
                     size="sm"
                     variant="link"
                     toggle-class="text-decoration-none"
-                    v-b-tooltip.bottom.hover
                     title="Show history options"
                     menu-class="history-options-button-menu"
                     data-description="history options">
                     <b-dropdown-text>
                         <div v-if="historiesLoading">
-                            <b-spinner small v-if="historiesLoading" />
+                            <b-spinner v-if="historiesLoading" small />
                             <span>Fetching histories from server</span>
                         </div>
                         <span v-else>You have {{ histories.length }} histories.</span>
@@ -74,8 +74,8 @@
                     </b-dropdown-item>
 
                     <b-dropdown-item
-                        @click="backboneRoute('/histories/show_structure')"
-                        data-description="show structure">
+                        data-description="show structure"
+                        @click="backboneRoute('/histories/show_structure')">
                         <Icon fixed-width icon="code-branch" class="mr-1" />
                         <span v-localize>Show Structure</span>
                     </b-dropdown-item>
@@ -115,7 +115,7 @@
                         <span v-localize>Export Tool Citations</span>
                     </b-dropdown-item>
 
-                    <b-dropdown-item @click="backboneRoute(exportLink)" data-description="export to file">
+                    <b-dropdown-item data-description="export to file" @click="backboneRoute(exportLink)">
                         <Icon fixed-width icon="file-archive" class="mr-1" />
                         <span v-localize>Export History to File</span>
                     </b-dropdown-item>
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/Operations.vue b/client/src/components/History/CurrentHistory/HistoryOperations/Operations.vue
index 5f3ab724f8f..20dfe1d242c 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/Operations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/Operations.vue
@@ -13,7 +13,7 @@
             <b-dropdown-text id="history-op-all-content">
                 <span v-localize>With entire history...</span>
             </b-dropdown-text>
-            <b-dropdown-item @click="onCopy" data-description="copy datasets">
+            <b-dropdown-item data-description="copy datasets" @click="onCopy">
                 <span v-localize>Copy Datasets</span>
             </b-dropdown-item>
             <b-dropdown-item v-b-modal:show-all-hidden-content>
@@ -35,7 +35,7 @@
         </b-modal>
         <b-modal id="purge-all-deleted-content" title="Purge Deleted Datasets" title-tag="h2" @ok="purgeAllDeleted">
             <p v-localize>Really permanently delete all deleted datasets?</p>
-            <p><strong class="text-danger" v-localize>Warning, this operation cannot be undone.</strong></p>
+            <p><strong v-localize class="text-danger">Warning, this operation cannot be undone.</strong></p>
         </b-modal>
     </section>
 </template>
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
index d5c4beafff6..567f99e0187 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
@@ -27,19 +27,19 @@
             <b-dropdown-item v-if="!showDeleted" v-b-modal:purge-selected-content>
                 <span v-localize>Delete (permanently)</span>
             </b-dropdown-item>
-            <b-dropdown-item v-if="showBuildOptions" @click="buildDatasetList" data-description="build list">
+            <b-dropdown-item v-if="showBuildOptions" data-description="build list" @click="buildDatasetList">
                 <span v-localize>Build Dataset List</span>
             </b-dropdown-item>
-            <b-dropdown-item v-if="showBuildOptions" @click="buildDatasetPair" data-description="build pair">
+            <b-dropdown-item v-if="showBuildOptions" data-description="build pair" @click="buildDatasetPair">
                 <span v-localize>Build Dataset Pair</span>
             </b-dropdown-item>
-            <b-dropdown-item v-if="showBuildOptions" @click="buildListOfPairs" data-description="build list of pairs">
+            <b-dropdown-item v-if="showBuildOptions" data-description="build list of pairs" @click="buildListOfPairs">
                 <span v-localize>Build List of Dataset Pairs</span>
             </b-dropdown-item>
             <b-dropdown-item
                 v-if="showBuildOptions"
-                @click="buildCollectionFromRules"
-                data-description="build collection from rules">
+                data-description="build collection from rules"
+                @click="buildCollectionFromRules">
                 <span v-localize>Build Collection from Rules</span>
             </b-dropdown-item>
         </b-dropdown>
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionStatus.vue b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionStatus.vue
index 739f84b050a..907792b1096 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionStatus.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionStatus.vue
@@ -1,9 +1,9 @@
 <template>
     <b-button-group size="sm">
-        <b-button v-if="hasSelection" variant="link" @click="resetSelection" data-test-id="clear-btn">
+        <b-button v-if="hasSelection" variant="link" data-test-id="clear-btn" @click="resetSelection">
             <span class="fa fa-fw fa-times" title="Clear selection" />
         </b-button>
-        <b-button v-else variant="link" @click="selectAll" data-test-id="select-all-btn">
+        <b-button v-else variant="link" data-test-id="select-all-btn" @click="selectAll">
             <span>Select All</span>
         </b-button>
     </b-button-group>
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index e06aa3d2b5c..12b5fa682c1 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -1,18 +1,15 @@
 <template>
     <HistoryItemsProvider
         :key="historyId"
+        v-slot="{ loading, result: payload, count: totalItemsInQuery }"
         :history-id="historyId"
         :offset="offset"
-        :filter-text="filterText"
-        v-slot="{ loading, result: payload, count: totalItemsInQuery }">
+        :filter-text="filterText">
         <ExpandedItems
+            v-slot="{ expandedCount, isExpanded, setExpanded, collapseAll }"
             :scope-key="historyId"
-            :get-item-key="(item) => item.type_id"
-            v-slot="{ expandedCount, isExpanded, setExpanded, collapseAll }">
+            :get-item-key="(item) => item.type_id">
             <SelectedItems
-                :scope-key="queryKey"
-                :get-item-key="(item) => item.type_id"
-                :filter-text="filterText"
                 v-slot="{
                     selectedItems,
                     showSelection,
@@ -24,7 +21,10 @@
                     isSelected,
                     setSelected,
                     resetSelection,
-                }">
+                }"
+                :scope-key="queryKey"
+                :get-item-key="(item) => item.type_id"
+                :filter-text="filterText">
                 <section class="history-layout d-flex flex-column">
                     <slot name="navigation" :history="history" />
                     <HistoryFilters
@@ -78,8 +78,8 @@
                                 <template v-slot:item="{ item }">
                                     <ContentItem
                                         v-if="!invisible[item.hid]"
-                                        :item="item"
                                         :id="item.hid"
+                                        :item="item"
                                         :name="item.name"
                                         :expand-dataset="isExpanded(item)"
                                         :is-dataset="isDataset(item)"
diff --git a/client/src/components/History/Index.vue b/client/src/components/History/Index.vue
index 80dddac4d1d..d8f26596c80 100644
--- a/client/src/components/History/Index.vue
+++ b/client/src/components/History/Index.vue
@@ -1,6 +1,6 @@
 <template>
-    <CurrentUser class="d-flex flex-column" v-slot="{ user }">
-        <UserHistories v-if="user" :user="user" v-slot="{ currentHistory, histories, handlers, historiesLoading }">
+    <CurrentUser v-slot="{ user }" class="d-flex flex-column">
+        <UserHistories v-if="user" v-slot="{ currentHistory, histories, handlers, historiesLoading }" :user="user">
             <div v-if="currentHistory" id="current-history-panel" class="history-index">
                 <CurrentHistory
                     v-if="!breadcrumbs.length"
@@ -9,11 +9,11 @@
                     @view-collection="onViewCollection">
                     <template v-slot:navigation>
                         <HistoryNavigation
-                            v-on="handlers"
                             :history="currentHistory"
                             :histories="histories"
                             :histories-loading="historiesLoading"
-                            title="Histories" />
+                            title="Histories"
+                            v-on="handlers" />
                     </template>
                 </CurrentHistory>
                 <CurrentCollection
@@ -26,7 +26,7 @@
                 </div>
             </div>
             <div v-else class="flex-grow-1 loadingBackground h-100">
-                <span class="sr-only" v-localize>Loading History...</span>
+                <span v-localize class="sr-only">Loading History...</span>
             </div>
         </UserHistories>
     </CurrentUser>
diff --git a/client/src/components/History/Layout/Details.vue b/client/src/components/History/Layout/Details.vue
index 51ce8d8e747..ab77b8aa93f 100644
--- a/client/src/components/History/Layout/Details.vue
+++ b/client/src/components/History/Layout/Details.vue
@@ -15,15 +15,15 @@
 
         <!-- display annotation, tags -->
         <div v-if="!editing">
-            <div v-if="annotation" class="mt-2" data-description="annotation value" v-short="annotation" />
+            <div v-if="annotation" v-short="annotation" class="mt-2" data-description="annotation value" />
             <StatelessTags v-if="tags" class="tags mt-2" :value="tags" :disabled="true" />
         </div>
 
         <!-- edit form, change title, annotation, or tags -->
         <div v-else class="mt-3" data-description="edit form">
             <b-textarea
-                class="mb-2"
                 v-model="localProps.name"
+                class="mb-2"
                 placeholder="Name"
                 trim
                 max-rows="4"
@@ -31,14 +31,14 @@
                 @keyup.esc="onToggle" />
             <b-textarea
                 v-if="showAnnotation"
-                class="mb-2"
                 v-model="localProps.annotation"
+                class="mb-2"
                 placeholder="Annotation (optional)"
                 trim
                 max-rows="4"
                 data-description="annotation input"
                 @keyup.esc="onToggle" />
-            <StatelessTags v-if="localProps.tags" class="mb-3 tags" v-model="localProps.tags" />
+            <StatelessTags v-if="localProps.tags" v-model="localProps.tags" class="mb-3 tags" />
             <b-button
                 class="save-button mb-1"
                 data-description="editor save button"
diff --git a/client/src/components/History/Modals/CopyModal.vue b/client/src/components/History/Modals/CopyModal.vue
index 2c6a0fccd11..a669c8d4c43 100644
--- a/client/src/components/History/Modals/CopyModal.vue
+++ b/client/src/components/History/Modals/CopyModal.vue
@@ -1,7 +1,7 @@
 <template>
-    <b-modal v-bind="$attrs" v-on="$listeners" :title="title" title-tag="h2">
+    <b-modal v-bind="$attrs" :title="title" title-tag="h2" v-on="$listeners">
         <transition name="fade">
-            <b-alert :show="currentUser.isAnonymous" variant="warning" v-localize>
+            <b-alert v-localize :show="currentUser.isAnonymous" variant="warning">
                 As an anonymous user, unless you login or register, you will lose your current history after copying
                 this history. You can <a href="/user/login">login here</a> or <a href="/user/create">register here</a>.
             </b-alert>
@@ -35,8 +35,8 @@
 
         <div slot="modal-footer" slot-scope="{ ok, cancel }">
             <div>
-                <b-button @click="cancel()" class="mr-3"> Cancel </b-button>
-                <b-button @click="copy(ok)" :variant="saveVariant" :disabled="!formValid">
+                <b-button class="mr-3" @click="cancel()"> Cancel </b-button>
+                <b-button :variant="saveVariant" :disabled="!formValid" @click="copy(ok)">
                     {{ saveTitle | localize }}
                 </b-button>
             </div>
diff --git a/client/src/components/History/Modals/SelectorModal.vue b/client/src/components/History/Modals/SelectorModal.vue
index aab6c6b202e..5ab70afcc06 100644
--- a/client/src/components/History/Modals/SelectorModal.vue
+++ b/client/src/components/History/Modals/SelectorModal.vue
@@ -1,15 +1,15 @@
 <template>
-    <b-modal ref="modal" v-on="$listeners" v-bind="$attrs" :title="'Switch to History' | l">
+    <b-modal ref="modal" v-bind="$attrs" :title="'Switch to History' | l" v-on="$listeners">
         <b-form-group :description="'Filter histories' | l">
             <b-input v-model="filter" :placeholder="'Search Filter' | l" />
         </b-form-group>
 
         <b-table
             ref="history-list"
+            v-model="currentRows"
             striped
             hover
             sticky-header="50vh"
-            v-model="currentRows"
             primary-key="id"
             :fields="fields"
             :filter="filter"
diff --git a/client/src/components/HistoryExport/ToLink.vue b/client/src/components/HistoryExport/ToLink.vue
index e0a8e70c4dd..fa015b65c13 100644
--- a/client/src/components/HistoryExport/ToLink.vue
+++ b/client/src/components/HistoryExport/ToLink.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-alert show variant="danger" v-if="errorMessage" dismissible @dismissed="errorMessage = null">
+        <b-alert v-if="errorMessage" show variant="danger" dismissible @dismissed="errorMessage = null">
             {{ errorMessage }}
             <JobError
                 v-if="jobError"
diff --git a/client/src/components/HistoryExport/ToRemoteFile.vue b/client/src/components/HistoryExport/ToRemoteFile.vue
index 8d606317c2d..4d972e78d63 100644
--- a/client/src/components/HistoryExport/ToRemoteFile.vue
+++ b/client/src/components/HistoryExport/ToRemoteFile.vue
@@ -30,7 +30,7 @@
             </b-form-group>
             <b-row align-h="end">
                 <b-col
-                    ><b-button class="export-button" variant="primary" @click="doExport" :disabled="!canExport"
+                    ><b-button class="export-button" variant="primary" :disabled="!canExport" @click="doExport"
                         >Export</b-button
                     ></b-col
                 >
diff --git a/client/src/components/HistoryImport.vue b/client/src/components/HistoryImport.vue
index 6b7b3fa6c61..318101d347e 100644
--- a/client/src/components/HistoryImport.vue
+++ b/client/src/components/HistoryImport.vue
@@ -1,6 +1,6 @@
 <template>
     <b-card body-class="history-import-component" title="Import a history from an archive">
-        <b-alert v-if="errorMessage" variant="danger" dismissible @dismissed="errorMessage = null" show>
+        <b-alert v-if="errorMessage" variant="danger" dismissible show @dismissed="errorMessage = null">
             {{ errorMessage }}
             <JobError
                 v-if="jobError"
@@ -22,7 +22,7 @@
         </div>
         <div v-else>
             <b-form @submit.prevent="submit">
-                <b-form-group label="How would you like to specify the history archive?" v-slot="{ ariaDescribedby }">
+                <b-form-group v-slot="{ ariaDescribedby }" label="How would you like to specify the history archive?">
                     <b-form-radio-group
                         v-model="importType"
                         :aria-describedby="ariaDescribedby"
@@ -36,21 +36,21 @@
                             Upload local file from your computer
                             <font-awesome-icon icon="upload" />
                         </b-form-radio>
-                        <b-form-radio value="remoteFilesUri" v-if="hasFileSources">
+                        <b-form-radio v-if="hasFileSources" value="remoteFilesUri">
                             Select a remote file (e.g. Galaxy's FTP)
                             <font-awesome-icon icon="folder-open" />
                         </b-form-radio>
                     </b-form-radio-group>
                 </b-form-group>
                 <b-form-group v-if="importType == 'externalUrl'" label="Archived History URL">
-                    <b-form-input type="url" v-model="sourceURL" />
+                    <b-form-input v-model="sourceURL" type="url" />
                 </b-form-group>
                 <b-form-group v-if="importType == 'upload'" label="Archived History File">
                     <b-form-file v-model="sourceFile" />
                 </b-form-group>
                 <b-form-group v-show="importType == 'remoteFilesUri'" label="Remote File">
                     <!-- using v-show so we can have a persistent ref and launch dialog on select -->
-                    <files-input v-model="sourceRemoteFilesUri" ref="filesInput" />
+                    <files-input ref="filesInput" v-model="sourceRemoteFilesUri" />
                 </b-form-group>
                 <b-button class="import-button" variant="primary" type="submit" :disabled="!importReady"
                     >Import history</b-button
diff --git a/client/src/components/HistoryView.vue b/client/src/components/HistoryView.vue
index b57faba7037..3eb07dbc61b 100644
--- a/client/src/components/HistoryView.vue
+++ b/client/src/components/HistoryView.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="structured-history-view">
         <div v-if="errorMessages.length > 0">
-            <div :key="index" v-for="(error, index) in errorMessages">
+            <div v-for="(error, index) in errorMessages" :key="index">
                 <div class="alert alert-danger" role="alert">{{ error }}</div>
             </div>
         </div>
diff --git a/client/src/components/InteractiveTools/InteractiveTools.vue b/client/src/components/InteractiveTools/InteractiveTools.vue
index 5a5a4c952cb..b01804d4392 100644
--- a/client/src/components/InteractiveTools/InteractiveTools.vue
+++ b/client/src/components/InteractiveTools/InteractiveTools.vue
@@ -6,12 +6,12 @@
             <b-col cols="6">
                 <b-input
                     id="interactivetool-search"
+                    v-model="filter"
                     class="m-1"
                     name="query"
                     placeholder="Search Interactive Tool"
                     autocomplete="off"
-                    type="text"
-                    v-model="filter" />
+                    type="text" />
             </b-col>
         </b-row>
         <b-table
@@ -26,8 +26,8 @@
             </template>
             <template v-slot:cell(name)="row">
                 <a
-                    :index="row.index"
                     :id="createId('link', row.item.id)"
+                    :index="row.index"
                     :href="row.item.target"
                     target="_blank"
                     :name="row.item.name"
@@ -51,8 +51,8 @@
             >.
         </div>
         <b-button
-            id="stopInteractiveTool"
             v-if="isCheckboxMarked"
+            id="stopInteractiveTool"
             v-b-tooltip.hover.bottom
             title="Terminate selected tools"
             @click.stop="stopInteractiveToolSession()"
diff --git a/client/src/components/JobInformation/CodeRow.vue b/client/src/components/JobInformation/CodeRow.vue
index 13862466548..f06a5fb3c9e 100644
--- a/client/src/components/JobInformation/CodeRow.vue
+++ b/client/src/components/JobInformation/CodeRow.vue
@@ -1,10 +1,10 @@
 <template>
     <tr
+        v-b-tooltip.hover
+        :title="`click to ${action}`"
         @mousedown="mouseIsDown = true"
         @mousemove="mouseIsDown ? (mouseMoved = true) : (mouseMoved = false)"
-        @mouseup="toggleExpanded()"
-        v-b-tooltip.hover
-        :title="`click to ${action}`">
+        @mouseup="toggleExpanded()">
         <td>
             {{ codeLabel }}
         </td>
diff --git a/client/src/components/JobInformation/JobError.vue b/client/src/components/JobInformation/JobError.vue
index 77b51119469..6f5722bc5d8 100644
--- a/client/src/components/JobInformation/JobError.vue
+++ b/client/src/components/JobInformation/JobError.vue
@@ -4,7 +4,7 @@
             <div @click="showInfo = true">
                 <a href="#">See full job details <font-awesome-icon icon="info-circle" /></a>
             </div>
-            <div class="error-wrapper" v-if="job.stderr" @click="toggleExpanded">
+            <div v-if="job.stderr" class="error-wrapper" @click="toggleExpanded">
                 Job Standard Error
                 <pre :class="errorClasses">{{ job.stderr }}</pre>
                 <b v-if="!expanded">(Click to expand job standard error)</b>
diff --git a/client/src/components/JobInformation/JobInformation.vue b/client/src/components/JobInformation/JobInformation.vue
index 4b154cb9841..213e0b58c7c 100644
--- a/client/src/components/JobInformation/JobInformation.vue
+++ b/client/src/components/JobInformation/JobInformation.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <job-details-provider @update:result="updateJob" auto-refresh :jobid="job_id" />
+        <job-details-provider auto-refresh :jobid="job_id" @update:result="updateJob" />
         <h3>Job Information</h3>
         <table id="job-information" class="tabletip info_data_table">
             <tbody>
@@ -20,13 +20,13 @@
                 </tr>
                 <tr v-if="job && includeTimes">
                     <td>Created</td>
-                    <td id="created" v-if="job.create_time">
+                    <td v-if="job.create_time" id="created">
                         <UtcDate :date="job.create_time" mode="pretty" />
                     </td>
                 </tr>
                 <tr v-if="job && includeTimes">
                     <td>Updated</td>
-                    <td id="updated" v-if="job.update_time">
+                    <td v-if="job.update_time" id="updated">
                         <UtcDate :date="job.update_time" mode="pretty" />
                     </td>
                 </tr>
@@ -36,19 +36,19 @@
                         {{ runTime }}
                     </td>
                 </tr>
-                <code-row id="command-line" v-if="job" :code-label="'Command Line'" :code-item="job.command_line" />
-                <code-row id="stdout" v-if="job" :code-label="'Tool Standard Output'" :code-item="job.tool_stdout" />
-                <code-row id="stderr" v-if="job" :code-label="'Tool Standard Error'" :code-item="job.tool_stderr" />
+                <code-row v-if="job" id="command-line" :code-label="'Command Line'" :code-item="job.command_line" />
+                <code-row v-if="job" id="stdout" :code-label="'Tool Standard Output'" :code-item="job.tool_stdout" />
+                <code-row v-if="job" id="stderr" :code-label="'Tool Standard Error'" :code-item="job.tool_stderr" />
                 <code-row
-                    id="traceback"
                     v-if="job && job.traceback"
+                    id="traceback"
                     :code-label="'Unexpected Job Errors'"
                     :code-item="job.traceback" />
                 <tr v-if="job">
                     <td>Tool Exit Code:</td>
                     <td id="exist-code">{{ job.exit_code }}</td>
                 </tr>
-                <tr id="job-messages" v-if="job && job.job_messages && job.job_messages.length > 0">
+                <tr v-if="job && job.job_messages && job.job_messages.length > 0" id="job-messages">
                     <td>Job Messages</td>
                     <td>
                         <ul style="padding-left: 15px; margin-bottom: 0px">
diff --git a/client/src/components/JobInformation/JobOutputs.vue b/client/src/components/JobInformation/JobOutputs.vue
index feba2eecd7b..a316dac9643 100644
--- a/client/src/components/JobInformation/JobOutputs.vue
+++ b/client/src/components/JobInformation/JobOutputs.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <h3 v-if="title">{{ title }}</h3>
-        <table class="tabletip info_data_table" id="job-outputs">
+        <table id="job-outputs" class="tabletip info_data_table">
             <thead>
                 <tr>
                     <th>Tool Outputs</th>
diff --git a/client/src/components/JobMetrics/JobMetrics.vue b/client/src/components/JobMetrics/JobMetrics.vue
index d156ebe7799..88307f19089 100644
--- a/client/src/components/JobMetrics/JobMetrics.vue
+++ b/client/src/components/JobMetrics/JobMetrics.vue
@@ -13,7 +13,7 @@
             </table>
         </div>
 
-        <div id="aws-estimate" v-if="aws_estimate && computedAwsEstimate">
+        <div v-if="aws_estimate && computedAwsEstimate" id="aws-estimate">
             <div class="aws">
                 <h3>AWS estimate</h3>
                 <b>{{ computedAwsEstimate.price }} USD</b><br />
diff --git a/client/src/components/JobParameters/JobParameters.vue b/client/src/components/JobParameters/JobParameters.vue
index 4ff68df9df8..0ceb1e0db1c 100644
--- a/client/src/components/JobParameters/JobParameters.vue
+++ b/client/src/components/JobParameters/JobParameters.vue
@@ -2,7 +2,7 @@
     <div>
         <div v-if="!isSingleParam" class="tool-parameters">
             <h3 v-if="includeTitle">Tool Parameters</h3>
-            <table class="tabletip info_data_table" id="tool-parameters">
+            <table id="tool-parameters" class="tabletip info_data_table">
                 <thead>
                     <tr>
                         <th>Input Parameter</th>
@@ -31,7 +31,7 @@
                 One or more of your original parameters may no longer be valid or displayed properly.
             </b-alert>
         </div>
-        <div id="single-param" v-if="isSingleParam">
+        <div v-if="isSingleParam" id="single-param">
             <div v-if="Array.isArray(singleParam)">
                 <JobParametersArrayValue :parameter_value="singleParam" />
             </div>
diff --git a/client/src/components/Libraries/LibrariesList.vue b/client/src/components/Libraries/LibrariesList.vue
index 1ba5f007062..7d73ec36eac 100644
--- a/client/src/components/Libraries/LibrariesList.vue
+++ b/client/src/components/Libraries/LibrariesList.vue
@@ -2,27 +2,27 @@
     <CurrentUser v-slot="{ user }">
         <div>
             <div class="form-inline d-flex align-items-center mb-2">
-                <b-button class="mr-1" @click="gotoFirstPage" title="go to first page">
+                <b-button class="mr-1" title="go to first page" @click="gotoFirstPage">
                     <font-awesome-icon icon="home" />
                 </b-button>
                 <b-button
+                    v-if="user.is_admin"
                     id="create-new-lib"
                     v-b-toggle.collapse-2
-                    v-if="user.is_admin"
                     title="Create new folder"
                     class="mr-1">
                     <font-awesome-icon icon="plus" />
                     {{ titleLibrary }}
                 </b-button>
                 <SearchField :typing-delay="0" @updateSearch="searchValue($event)" />
-                <b-form-checkbox v-if="user.is_admin" class="mr-1" @input="toggle_include_deleted($event)" v-localize
+                <b-form-checkbox v-if="user.is_admin" v-localize class="mr-1" @input="toggle_include_deleted($event)"
                     >include deleted</b-form-checkbox
                 >
-                <b-form-checkbox class="mr-1" @input="toggle_exclude_restricted($event)" v-localize
+                <b-form-checkbox v-localize class="mr-1" @input="toggle_exclude_restricted($event)"
                     >exclude restricted</b-form-checkbox
                 >
             </div>
-            <b-collapse v-model="isNewLibFormVisible" id="collapse-2">
+            <b-collapse id="collapse-2" v-model="isNewLibFormVisible">
                 <b-card>
                     <b-form @submit.prevent="newLibrary">
                         <b-input-group class="mb-2 new-row">
@@ -44,6 +44,7 @@
             </b-collapse>
             <b-table
                 id="libraries_list"
+                ref="libraries_list"
                 striped
                 hover
                 :fields="fields"
@@ -51,37 +52,36 @@
                 :per-page="perPage"
                 :current-page="currentPage"
                 show-empty
-                ref="libraries_list"
-                @filtered="onFiltered"
                 :filter="filter"
-                :filter-included-fields="filterOn">
+                :filter-included-fields="filterOn"
+                @filtered="onFiltered">
                 <template v-slot:cell(name)="row">
                     <textarea
                         v-if="row.item.editMode"
-                        class="form-control input_library_name"
                         v-model="row.item.name"
+                        class="form-control input_library_name"
                         rows="3" />
 
-                    <div class="deleted-item" v-else-if="row.item.deleted && include_deleted">{{ row.item.name }}</div>
+                    <div v-else-if="row.item.deleted && include_deleted" class="deleted-item">{{ row.item.name }}</div>
                     <b-link v-else :to="{ path: `folders/${row.item.root_folder_id}` }">{{ row.item.name }}</b-link>
                 </template>
                 <template v-slot:cell(description)="{ item }">
                     <LibraryEditField
-                        @toggleDescriptionExpand="toggleDescriptionExpand(item)"
                         :ref="`description-${item.id}`"
                         :is-expanded="item.isExpanded"
                         :is-edit-mode="item.editMode"
                         :text="item.description"
-                        :changed-value.sync="item[newDescriptionProperty]" />
+                        :changed-value.sync="item[newDescriptionProperty]"
+                        @toggleDescriptionExpand="toggleDescriptionExpand(item)" />
                 </template>
                 <template v-slot:cell(synopsis)="{ item }">
                     <LibraryEditField
-                        @toggleDescriptionExpand="toggleDescriptionExpand(item)"
                         :ref="`synopsis-${item.id}`"
                         :is-expanded="item.isExpanded"
                         :is-edit-mode="item.editMode"
                         :text="item.synopsis"
-                        :changed-value.sync="item[newSynopsisProperty]" />
+                        :changed-value.sync="item[newSynopsisProperty]"
+                        @toggleDescriptionExpand="toggleDescriptionExpand(item)" />
                 </template>
                 <template v-slot:cell(is_unrestricted)="row">
                     <font-awesome-icon
@@ -90,7 +90,7 @@
                         icon="globe" />
                 </template>
                 <template v-slot:cell(buttons)="row">
-                    <b-button @click="undelete(row.item)" v-if="row.item.deleted" :title="'Undelete ' + row.item.name">
+                    <b-button v-if="row.item.deleted" :title="'Undelete ' + row.item.name" @click="undelete(row.item)">
                         <font-awesome-icon icon="unlock" />
                         {{ titleUndelete }}
                     </b-button>
@@ -154,12 +154,12 @@
                             <tr>
                                 <td class="m-0 p-0">
                                     <b-form-input
-                                        class="pagination-input-field"
                                         id="paginationPerPage"
+                                        v-model="perPage"
+                                        class="pagination-input-field"
                                         autocomplete="off"
                                         type="number"
-                                        onkeyup="this.value|=0;if(this.value<1)this.value=1"
-                                        v-model="perPage" />
+                                        onkeyup="this.value|=0;if(this.value<1)this.value=1" />
                                 </td>
                                 <td class="text-muted ml-1 paginator-text">
                                     <span class="pagination-total-pages-text"
diff --git a/client/src/components/Libraries/LibraryEditField.vue b/client/src/components/Libraries/LibraryEditField.vue
index 8d9cbb1eb08..940e840d93c 100644
--- a/client/src/components/Libraries/LibraryEditField.vue
+++ b/client/src/components/Libraries/LibraryEditField.vue
@@ -3,7 +3,7 @@
         <div class="text-field">
             <!-- edit mode -->
             <div v-if="isEditMode">
-                <b-form-textarea class="form-control" :value="text" @change="updateValue" rows="3" no-resize />
+                <b-form-textarea class="form-control" :value="text" rows="3" no-resize @change="updateValue" />
             </div>
             <!-- shrink long text -->
             <div v-else-if="text.length > maxDescriptionLength && !isExpanded">
@@ -13,7 +13,7 @@
                     v-html="linkify(text.substring(0, maxDescriptionLength))">
                 </span>
                 <span :title="text">...</span>
-                <a class="more-text-btn" @click="toggleDescriptionExpand" href="javascript:void(0)">(more) </a>
+                <a class="more-text-btn" href="javascript:void(0)" @click="toggleDescriptionExpand">(more) </a>
             </div>
             <!-- Regular -->
             <div v-else>
@@ -22,8 +22,8 @@
                 <a
                     v-if="text.length > maxDescriptionLength"
                     class="more-text-btn"
-                    @click="toggleDescriptionExpand"
                     href="javascript:void(0)"
+                    @click="toggleDescriptionExpand"
                     >(less)
                 </a>
             </div>
diff --git a/client/src/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue b/client/src/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue
index 36cab841863..6015662b951 100644
--- a/client/src/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue
+++ b/client/src/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue
@@ -1,9 +1,9 @@
 <template>
     <div>
         <b-button
+            v-b-modal.details-modal
             class="details-btn"
             title="Show location details"
-            v-b-modal.details-modal
             data-testid="loc-details-btn">
             <font-awesome-icon icon="info-circle" /> {{ detailsCaption }}
         </b-button>
@@ -12,9 +12,9 @@
             id="details-modal"
             :static="isStatic"
             :title="titleLocationDetails"
-            @show="getDetails"
             title-tag="h3"
-            ok-only>
+            ok-only
+            @show="getDetails">
             <div>
                 <b-alert :show="hasError" variant="danger" data-testid="error-alert"> {{ error }} </b-alert>
                 <div v-if="libraryDetails">
diff --git a/client/src/components/Libraries/LibraryFolder/LibraryFolder.vue b/client/src/components/Libraries/LibraryFolder/LibraryFolder.vue
index ad6d5d8428f..e624a8f84ee 100644
--- a/client/src/components/Libraries/LibraryFolder/LibraryFolder.vue
+++ b/client/src/components/Libraries/LibraryFolder/LibraryFolder.vue
@@ -2,23 +2,24 @@
     <CurrentUser v-slot="{ user }">
         <div>
             <FolderTopBar
-                @updateSearch="updateSearchValue($event)"
-                @refreshTable="refreshTable"
-                @refreshTableContent="refreshTableContent"
-                @fetchFolderContents="fetchFolderContents($event)"
-                @deleteFromTable="deleteFromTable"
-                @setBusy="setBusy($event)"
-                @newFolder="newFolder"
                 :folder-contents="folderContents"
                 :include_deleted="include_deleted"
                 :folder_id="current_folder_id"
                 :selected="selected"
+                @updateSearch="updateSearchValue($event)"
                 :metadata="folder_metadata"
+                @refreshTable="refreshTable"
                 :unselected="unselected"
-                :is-all-selected-mode="isAllSelectedMode" />
+                @refreshTableContent="refreshTableContent"
+                :is-all-selected-mode="isAllSelectedMode"
+                @fetchFolderContents="fetchFolderContents($event)"
+                @deleteFromTable="deleteFromTable"
+                @setBusy="setBusy($event)"
+                @newFolder="newFolder" />
 
             <b-table
                 id="folder_list_body"
+                ref="folder_content_table"
                 striped
                 hover
                 :busy.sync="isBusy"
@@ -27,9 +28,8 @@
                 :per-page="perPage"
                 selectable
                 no-select-on-click
-                @row-clicked="onRowClick"
-                ref="folder_content_table"
-                show-empty>
+                show-empty
+                @row-clicked="onRowClick">
                 <template v-slot:empty>
                     <div v-if="isBusy" class="text-center my-2">
                         <b-spinner class="align-middle"></b-spinner>
@@ -46,24 +46,24 @@
                 <template v-slot:head(selected)="">
                     <font-awesome-icon
                         v-if="isAllSelectedMode && !isAllSelectedOnPage()"
-                        @click="toggleSelect"
                         class="select-checkbox cursor-pointer"
                         size="lg"
                         title="Check to select all datasets"
-                        icon="minus-square" />
+                        icon="minus-square"
+                        @click="toggleSelect" />
                     <font-awesome-icon
                         v-else
-                        @click="toggleSelect"
                         class="select-checkbox cursor-pointer"
                         size="lg"
                         title="Check to select all datasets"
-                        :icon="isAllSelectedOnPage() ? ['far', 'check-square'] : ['far', 'square']" />
+                        :icon="isAllSelectedOnPage() ? ['far', 'check-square'] : ['far', 'square']"
+                        @click="toggleSelect" />
                 </template>
                 <template v-slot:cell(selected)="row">
                     <font-awesome-icon
+                        v-if="!row.item.isNewFolder && !row.item.deleted"
                         class="select-checkbox lib-folder-checkbox"
                         size="lg"
-                        v-if="!row.item.isNewFolder && !row.item.deleted"
                         :icon="row.rowSelected ? ['far', 'check-square'] : ['far', 'square']" />
                 </template>
                 <!-- Name -->
@@ -71,15 +71,15 @@
                     <div v-if="row.item.editMode">
                         <textarea
                             v-if="row.item.isNewFolder"
-                            class="form-control"
-                            name="input_folder_name"
                             :ref="'name' + row.item.id"
                             v-model="row.item.name"
+                            class="form-control"
+                            name="input_folder_name"
                             rows="3" />
                         <textarea
                             v-else
-                            class="form-control"
                             :ref="'name' + row.item.id"
+                            class="form-control"
                             :value="row.item.name"
                             rows="3" />
                     </div>
@@ -110,19 +110,19 @@
                     <div v-if="row.item.editMode">
                         <textarea
                             v-if="row.item.isNewFolder"
-                            class="form-control input_folder_description"
                             :ref="'description' + row.item.id"
                             v-model="row.item.description"
+                            class="form-control input_folder_description"
                             rows="3"></textarea>
                         <textarea
                             v-else
-                            class="form-control input_folder_description"
                             :ref="'description' + row.item.id"
+                            class="form-control input_folder_description"
                             :value="row.item.description"
                             rows="3"></textarea>
                     </div>
                     <div v-else>
-                        <div class="description-field" v-if="getMessage(row.item)">
+                        <div v-if="getMessage(row.item)" class="description-field">
                             <div
                                 v-if="
                                     getMessage(row.item).length > maxDescriptionLength &&
@@ -134,7 +134,7 @@
                                     v-html="linkify(getMessage(row.item).substring(0, maxDescriptionLength))">
                                 </span>
                                 <span :title="getMessage(row.item)"> ...</span>
-                                <a class="more-text-btn" @click="expandMessage(row.item)" href="javascript:void(0)"
+                                <a class="more-text-btn" href="javascript:void(0)" @click="expandMessage(row.item)"
                                     >(more)</a
                                 >
                             </div>
@@ -181,9 +181,9 @@
                 <template v-slot:cell(buttons)="row">
                     <div v-if="row.item.editMode">
                         <button
-                            @click="row.item.isNewFolder ? createNewFolder(row.item) : saveChanges(row.item)"
                             class="primary-button btn-sm permission_folder_btn save_folder_btn"
-                            :title="'save ' + row.item.name">
+                            :title="'save ' + row.item.name"
+                            @click="row.item.isNewFolder ? createNewFolder(row.item) : saveChanges(row.item)">
                             <font-awesome-icon :icon="['far', 'save']" />
                             Save
                         </button>
@@ -198,12 +198,12 @@
                     <div v-else>
                         <b-button
                             v-if="row.item.can_manage && !row.item.deleted && row.item.type === 'folder'"
-                            @click="toggleEditMode(row.item)"
                             data-toggle="tooltip"
                             data-placement="top"
                             size="sm"
                             class="lib-btn permission_folder_btn edit_folder_btn"
-                            :title="'Edit ' + row.item.name">
+                            :title="'Edit ' + row.item.name"
+                            @click="toggleEditMode(row.item)">
                             <font-awesome-icon icon="pencil-alt" />
                             Edit
                         </b-button>
@@ -217,11 +217,11 @@
                             Manage
                         </b-button>
                         <button
-                            @click="undelete(row.item, folder_id)"
                             v-if="row.item.deleted"
                             :title="'Undelete ' + row.item.name"
                             class="lib-btn primary-button btn-sm undelete_dataset_btn"
-                            type="button">
+                            type="button"
+                            @click="undelete(row.item, folder_id)">
                             <font-awesome-icon icon="unlock" />
                             Undelete
                         </button>
@@ -242,8 +242,8 @@
                             :value="currentPage"
                             :total-rows="total_rows"
                             :per-page="perPage"
-                            @input="changePage"
-                            aria-controls="folder_list_body">
+                            aria-controls="folder_list_body"
+                            @input="changePage">
                         </b-pagination>
                     </b-col>
 
@@ -252,11 +252,11 @@
                             <tr>
                                 <td class="m-0 p-0">
                                     <b-form-input
-                                        class="pagination-input-field"
                                         id="paginationPerPage"
+                                        v-model="perPage"
+                                        class="pagination-input-field"
                                         autocomplete="off"
-                                        type="number"
-                                        v-model="perPage" />
+                                        type="number" />
                                 </td>
                                 <td class="text-muted ml-1 paginator-text">
                                     <span class="pagination-total-pages-text">per page, {{ total_rows }} total</span>
diff --git a/client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue b/client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue
index eaedd000701..1054e7dbfb9 100644
--- a/client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue
+++ b/client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue
@@ -7,40 +7,40 @@
                 <b-button
                     title="Download dataset"
                     class="mr-1 mb-2"
-                    @click="download(datasetDownloadFormat, dataset_id)"
-                    data-test-id="download-btn">
+                    data-test-id="download-btn"
+                    @click="download(datasetDownloadFormat, dataset_id)">
                     <font-awesome-icon icon="download" />
                     Download
                 </b-button>
                 <b-button
-                    @click="importToHistory"
                     title="Import dataset into history"
                     class="mr-1 mb-2"
-                    data-test-id="import-history-btn">
+                    data-test-id="import-history-btn"
+                    @click="importToHistory">
                     <font-awesome-icon icon="book" />
                     to History
                 </b-button>
                 <span v-if="dataset.can_user_modify">
                     <b-button
-                        @click="isEditMode = true"
                         title="Modify library item"
                         class="mr-1 mb-2"
-                        data-test-id="modify-btn">
+                        data-test-id="modify-btn"
+                        @click="isEditMode = true">
                         <font-awesome-icon icon="pencil-alt" />
                         Modify
                     </b-button>
                     <b-button
                         title="Attempt to detect the format of dataset"
-                        @click="detectDatatype"
                         class="mr-1 mb-2"
-                        data-test-id="auto-detect-btn">
+                        data-test-id="auto-detect-btn"
+                        @click="detectDatatype">
                         <font-awesome-icon icon="redo" />
                         Auto-detect datatype
                     </b-button>
                 </span>
                 <b-button
-                    title="Manage permissions"
                     v-if="user.is_admin"
+                    title="Manage permissions"
                     class="mr-1 mb-2"
                     :to="{
                         name: 'LibraryFolderDatasetPermissions',
@@ -75,8 +75,8 @@
                     <div v-if="isEditMode">
                         <b-form-input
                             v-if="row.item.name === fieldTitles.name"
-                            :value="row.item.value"
-                            v-model="modifiedDataset.name" />
+                            v-model="modifiedDataset.name"
+                            :value="row.item.value" />
                         <DatatypesProvider
                             v-else-if="row.item.name === fieldTitles.file_ext"
                             v-slot="{ item: datatypes, loading: loadingDatatypes }">
@@ -99,12 +99,12 @@
                         </GenomeProvider>
                         <b-form-input
                             v-else-if="row.item.name === fieldTitles.message"
-                            :value="row.item.value"
-                            v-model="modifiedDataset.message" />
+                            v-model="modifiedDataset.message"
+                            :value="row.item.value" />
                         <b-form-input
                             v-else-if="row.item.name === fieldTitles.misc_info"
-                            :value="row.item.value"
-                            v-model="modifiedDataset.misc_info" />
+                            v-model="modifiedDataset.misc_info"
+                            :value="row.item.value" />
                         <div v-else>{{ row.item.value }}</div>
                     </div>
                     <div v-else>
@@ -114,17 +114,17 @@
             </b-table>
             <!-- Edit Controls -->
             <div v-if="isEditMode">
-                <b-button @click="isEditMode = false" class="mr-1 mb-2">
+                <b-button class="mr-1 mb-2" @click="isEditMode = false">
                     <font-awesome-icon :icon="['fas', 'times']" />
                     Cancel
                 </b-button>
-                <b-button @click="updateDataset" class="mr-1 mb-2">
+                <b-button class="mr-1 mb-2" @click="updateDataset">
                     <font-awesome-icon :icon="['far', 'save']" />
                     Save
                 </b-button>
             </div>
             <!-- Peek View -->
-            <div v-if="dataset.peek" v-html="dataset.peek" data-test-id="peek-view" />
+            <div v-if="dataset.peek" data-test-id="peek-view" v-html="dataset.peek" />
         </div>
     </CurrentUser>
 </template>
diff --git a/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryFolderDatasetPermissions.vue b/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryFolderDatasetPermissions.vue
index 0e296a6e065..d0a5c3e6959 100644
--- a/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryFolderDatasetPermissions.vue
+++ b/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryFolderDatasetPermissions.vue
@@ -32,25 +32,25 @@
                 Changes made below will affect <strong>every</strong> library item that was created from this dataset
                 and also every history this dataset is part of.
             </div>
-            <p class="text-center" v-if="is_unrestricted">
+            <p v-if="is_unrestricted" class="text-center">
                 You can
-                <strong @click="toggleDatasetPrivacy(true)" class="make-private">
+                <strong class="make-private" @click="toggleDatasetPrivacy(true)">
                     <a id="make-private" href="javascript:void(0)">make this dataset private</a>
                 </strong>
                 to you.
             </p>
-            <p class="text-center" v-else>
+            <p v-else class="text-center">
                 You can
-                <strong @click="toggleDatasetPrivacy(false)" class="remove-restrictions">
+                <strong class="remove-restrictions" @click="toggleDatasetPrivacy(false)">
                     <a href="javascript:void(0)">remove all access restrictions</a>
                 </strong>
                 on this dataset.
             </p>
 
             <PermissionsInputField
-                ref="access_field"
                 v-if="access_dataset_roles"
                 :id="dataset_id"
+                ref="access_field"
                 :permission_type="access_dataset_roles_type"
                 :initial_value="access_dataset_roles"
                 :api-root-url="apiRootUrl"
diff --git a/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryPermissionsWarning.vue b/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryPermissionsWarning.vue
index 1b63156db5a..68cb3d3080a 100644
--- a/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryPermissionsWarning.vue
+++ b/client/src/components/Libraries/LibraryFolder/LibraryFolderPermissions/LibraryPermissionsWarning.vue
@@ -1,11 +1,11 @@
 <template>
     <div>
         <div class="text-center">
-            <b-alert show variant="warning" v-if="is_admin">
+            <b-alert v-if="is_admin" show variant="warning">
                 You are logged in as an <strong>administrator</strong> therefore you can manage any folder on this
                 Galaxy instance.
             </b-alert>
-            <b-alert show variant="warning" v-else>
+            <b-alert v-else show variant="warning">
                 You can assign any number of roles to any of the following permission types.
             </b-alert>
         </div>
diff --git a/client/src/components/Libraries/LibraryFolder/SearchField.vue b/client/src/components/Libraries/LibraryFolder/SearchField.vue
index e6a9a267f51..3a2a6185891 100644
--- a/client/src/components/Libraries/LibraryFolder/SearchField.vue
+++ b/client/src/components/Libraries/LibraryFolder/SearchField.vue
@@ -1,10 +1,10 @@
 <template>
     <b-input-group size="sm">
         <b-form-input
+            id="filterInput"
             v-model="search"
             class="mr-1"
             type="search"
-            id="filterInput"
             :placeholder="titleSearch"
             @keyup.enter="startSearch()" />
     </b-input-group>
diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index 31217b4c676..136f60c104f 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -81,10 +81,10 @@
                         </div>
                     </div>
                     <div
+                        v-if="dataset_manipulation"
                         title="Download items as archive"
-                        class="dropdown dataset-manipulation mr-1"
-                        v-if="dataset_manipulation">
-                        <button type="button" id="download--btn" class="primary-button" @click="downloadData('zip')">
+                        class="dropdown dataset-manipulation mr-1">
+                        <button id="download--btn" type="button" class="primary-button" @click="downloadData('zip')">
                             <font-awesome-icon icon="download" />
                             Download
                         </button>
@@ -99,13 +99,13 @@
                         <font-awesome-icon icon="trash" />
                         Delete
                     </button>
-                    <FolderDetails class="mr-1" :id="folder_id" :metadata="metadata" />
-                    <div class="form-check logged-dataset-manipulation mr-1" v-if="canDelete">
+                    <FolderDetails :id="folder_id" class="mr-1" :metadata="metadata" />
+                    <div v-if="canDelete" class="form-check logged-dataset-manipulation mr-1">
                         <b-form-checkbox
                             id="checkbox-1"
                             :checked="include_deleted"
-                            @input="toggle_include_deleted($event)"
-                            name="checkbox-1">
+                            name="checkbox-1"
+                            @input="toggle_include_deleted($event)">
                             include deleted
                         </b-form-checkbox>
                     </div>
diff --git a/client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue b/client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue
index 365ebd90c20..3f7e95922b8 100644
--- a/client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue
+++ b/client/src/components/Libraries/LibraryPermissions/PermissionsInputField.vue
@@ -5,7 +5,7 @@
         </h4>
         <b-row>
             <b-col>
-                <div :class="permission_type" v-if="options && value">
+                <div v-if="options && value" :class="permission_type">
                     <multiselect
                         v-model="value"
                         :options="fetched_options"
@@ -14,11 +14,11 @@
                         :multiple="true"
                         label="name"
                         track-by="id"
+                        :internal-search="false"
                         @input="valueChanged"
-                        @search-change="searchChanged"
-                        :internal-search="false">
+                        @search-change="searchChanged">
                         <template slot="afterList">
-                            <div v-observe-visibility="reachedEndOfList" v-if="hasMorePages">
+                            <div v-if="hasMorePages" v-observe-visibility="reachedEndOfList">
                                 <span class="spinner fa fa-spinner fa-spin fa-1x" />
                             </div>
                         </template>
diff --git a/client/src/components/License/License.vue b/client/src/components/License/License.vue
index 61365fc26e9..8c38b1c81ae 100644
--- a/client/src/components/License/License.vue
+++ b/client/src/components/License/License.vue
@@ -1,6 +1,6 @@
 <template>
     <loading-span v-if="license == null" message="Loading license information"> </loading-span>
-    <div class="text-muted" v-else-if="license.name">
+    <div v-else-if="license.name" class="text-muted">
         <link itemprop="license" :href="license.licenseId" />
         <span v-if="title">
             {{ title }}
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue b/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue
index 979f93e50a5..08c215ad9ce 100644
--- a/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue
+++ b/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue
@@ -3,28 +3,28 @@
         <b-card-header>
             <span class="float-right">
                 <b-button
+                    v-b-tooltip.hover
                     :href="downloadUrl"
                     variant="link"
                     size="sm"
                     role="button"
                     title="Download Collection"
                     type="button"
-                    class="py-0 px-1"
-                    v-b-tooltip.hover>
+                    class="py-0 px-1">
                     <span class="fa fa-download" />
                 </b-button>
                 <CurrentUser v-slot="{ user }">
-                    <UserHistories v-if="user" :user="user" v-slot="{ currentHistoryId }">
+                    <UserHistories v-if="user" v-slot="{ currentHistoryId }" :user="user">
                         <b-button
                             v-if="currentHistoryId"
-                            @click="onCopyCollection(currentHistoryId)"
                             href="#"
                             role="button"
                             variant="link"
+                            v-b-tooltip.hover
                             title="Import Collection"
                             type="button"
                             class="py-0 px-1"
-                            v-b-tooltip.hover>
+                            @click="onCopyCollection(currentHistoryId)">
                             <span class="fa fa-file-import" />
                         </b-button>
                     </UserHistories>
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionTree.vue b/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionTree.vue
index f0a09247661..7af646d99ec 100644
--- a/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionTree.vue
+++ b/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionTree.vue
@@ -7,7 +7,7 @@
         <pre v-if="miscInfo"><code v-html="miscInfo"/></pre>
         <pre v-if="peek"><code v-html="peek"/></pre>
         <div v-if="node && node.elements && node.elements.length" :class="{ 'ml-3': !skipHead }">
-            <CollectionNode v-for="child in node.elements" :node="child" :key="child.id" />
+            <CollectionNode v-for="child in node.elements" :key="child.id" :node="child" />
         </div>
     </div>
 </template>
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
index 61f3cead9cd..a49e9fbee14 100644
--- a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
+++ b/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
@@ -3,47 +3,47 @@
         <b-card-header v-if="!embedded">
             <span class="float-right">
                 <b-button
+                    v-b-tooltip.hover
                     :href="downloadUrl"
                     variant="link"
                     size="sm"
                     role="button"
                     title="Download Dataset"
                     type="button"
-                    class="py-0 px-1"
-                    v-b-tooltip.hover>
+                    class="py-0 px-1">
                     <span class="fa fa-download" />
                 </b-button>
                 <b-button
+                    v-b-tooltip.hover
                     :href="importUrl"
                     role="button"
                     variant="link"
                     title="Import Dataset"
                     type="button"
-                    class="py-0 px-1"
-                    v-b-tooltip.hover>
+                    class="py-0 px-1">
                     <span class="fa fa-file-import" />
                 </b-button>
                 <b-button
                     v-if="expanded"
+                    v-b-tooltip.hover
                     href="#"
                     role="button"
                     variant="link"
                     title="Collapse"
                     type="button"
                     class="py-0 px-1"
-                    v-b-tooltip.hover
                     @click="onExpand">
                     <span class="fa fa-angle-double-up" />
                 </b-button>
                 <b-button
                     v-else
+                    v-b-tooltip.hover
                     href="#"
                     role="button"
                     variant="link"
                     title="Expand"
                     type="button"
                     class="py-0 px-1"
-                    v-b-tooltip.hover
                     @click="onExpand">
                     <span class="fa fa-angle-double-down" />
                 </b-button>
@@ -54,8 +54,8 @@
             </span>
         </b-card-header>
         <b-card-body>
-            <UrlDataProvider :url="itemUrl" v-slot="{ result: itemContent, loading, error }">
-                <UrlDataProvider :url="datatypesUrl" v-slot="{ result: datatypesModel, loading: datatypesLoading }">
+            <UrlDataProvider v-slot="{ result: itemContent, loading, error }" :url="itemUrl">
+                <UrlDataProvider v-slot="{ result: datatypesModel, loading: datatypesLoading }" :url="datatypesUrl">
                     <LoadingSpan v-if="loading" message="Loading Dataset" />
                     <LoadingSpan v-else-if="datatypesLoading" message="Loading Datatypes" />
                     <div v-else-if="error">{{ error }}</div>
@@ -68,8 +68,8 @@
                         <div v-else-if="itemContent.item_data">
                             <div v-if="isSubTypeOfAny(datasetType, ['tabular'], datatypesModel)">
                                 <UrlDataProvider
-                                    :url="metaUrl"
-                                    v-slot="{ result: metaData, loading: metaLoading, error: metaError }">
+                                    v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
+                                    :url="metaUrl">
                                     <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
                                     <div v-else-if="metaError">{{ metaError }}</div>
                                     <b-table
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue b/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
index f65a188e581..04a27d741f7 100644
--- a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
+++ b/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
@@ -3,24 +3,24 @@
         <b-card-header v-if="!embedded">
             <span class="float-right">
                 <b-button
+                    v-b-tooltip.hover
                     :href="downloadUrl"
                     variant="link"
                     size="sm"
                     role="button"
                     title="Download Workflow"
                     type="button"
-                    class="py-0 px-1"
-                    v-b-tooltip.hover>
+                    class="py-0 px-1">
                     <span class="fa fa-download" />
                 </b-button>
                 <b-button
+                    v-b-tooltip.hover
                     :href="importUrl"
                     role="button"
                     variant="link"
                     title="Import Workflow"
                     type="button"
-                    class="py-0 px-1"
-                    v-b-tooltip.hover>
+                    class="py-0 px-1">
                     <span class="fa fa-file-import" />
                 </b-button>
             </span>
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowTree.vue b/client/src/components/Markdown/Elements/Workflow/WorkflowTree.vue
index e64847a2114..876ba1db819 100644
--- a/client/src/components/Markdown/Elements/Workflow/WorkflowTree.vue
+++ b/client/src/components/Markdown/Elements/Workflow/WorkflowTree.vue
@@ -6,7 +6,7 @@
             <span v-if="input.value" class="font-weight-light font-italic">= {{ input.value }}</span>
         </span>
         <div v-if="input && input.inputs && input.inputs.length" :class="{ 'ml-3': !skipHead }">
-            <WorkflowInput v-for="child in input.inputs" :input="child" :key="child.id" />
+            <WorkflowInput v-for="child in input.inputs" :key="child.id" :input="child" />
         </div>
     </div>
 </template>
diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 0f08c1a84a2..6098fd8ab75 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -11,11 +11,11 @@
                     title="Download PDF"></sts-download-button>
                 <b-button
                     v-if="!readOnly"
+                    v-b-tooltip.hover.bottom
                     class="float-right markdown-edit"
                     title="Edit Markdown"
                     variant="link"
                     role="button"
-                    v-b-tooltip.hover.bottom
                     @click="$emit('onEdit')">
                     <font-awesome-icon icon="edit" />
                 </b-button>
@@ -39,7 +39,7 @@
                 </b-alert>
             </div>
             <div v-for="(obj, index) in markdownObjects" :key="index" class="markdown-components">
-                <p v-if="obj.name == 'default'" v-html="obj.content" class="text-justify m-2" />
+                <p v-if="obj.name == 'default'" class="text-justify m-2" v-html="obj.content" />
                 <div v-else-if="obj.name == 'generate_galaxy_version'" class="galaxy-version">
                     <pre><code>{{ getVersion }}</code></pre>
                 </div>
diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index bcadff98f2d..10097ce2b70 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -12,10 +12,10 @@
                         <div class="panel-header-buttons">
                             <slot name="buttons" />
                             <b-button
+                                v-b-tooltip.hover.bottom
                                 title="Help"
                                 variant="link"
                                 role="button"
-                                v-b-tooltip.hover.bottom
                                 @click="onHelp">
                                 <font-awesome-icon icon="question" />
                             </b-button>
@@ -27,11 +27,11 @@
                 </div>
                 <div class="unified-panel-body d-flex">
                     <textarea
-                        class="markdown-textarea"
                         id="workflow-report-editor"
+                        ref="text-area"
                         v-model="content"
-                        @input="onUpdate"
-                        ref="text-area" />
+                        class="markdown-textarea"
+                        @input="onUpdate" />
                 </div>
             </div>
         </div>
diff --git a/client/src/components/Markdown/MarkdownSelector.vue b/client/src/components/Markdown/MarkdownSelector.vue
index 9ff7133d247..b4c3ca6e338 100644
--- a/client/src/components/Markdown/MarkdownSelector.vue
+++ b/client/src/components/Markdown/MarkdownSelector.vue
@@ -6,10 +6,10 @@
                 <div v-if="hasLabels">
                     <b-form-radio
                         v-for="(label, index) in labels"
+                        :key="index"
                         v-model="selectedValue"
                         class="my-2"
                         name="labels"
-                        :key="index"
                         :value="index">
                         {{ label }}
                     </b-form-radio>
diff --git a/client/src/components/Markdown/MarkdownToolBox.vue b/client/src/components/Markdown/MarkdownToolBox.vue
index 9058c4818f2..07e7de66b6f 100644
--- a/client/src/components/Markdown/MarkdownToolBox.vue
+++ b/client/src/components/Markdown/MarkdownToolBox.vue
@@ -13,22 +13,22 @@
                 <tool-section
                     v-if="isWorkflow"
                     :category="historyInEditorSection"
-                    @onClick="onClick"
-                    :expanded="true" />
-                <tool-section v-else :category="historySection" @onClick="onClick" :expanded="true" />
-                <tool-section :category="jobSection" @onClick="onClick" :expanded="true" />
+                    :expanded="true"
+                    @onClick="onClick" />
+                <tool-section v-else :category="historySection" :expanded="true" @onClick="onClick" />
+                <tool-section :category="jobSection" :expanded="true" @onClick="onClick" />
                 <tool-section
                     v-if="isWorkflow"
                     :category="workflowInEditorSection"
-                    @onClick="onClick"
-                    :expanded="true" />
-                <tool-section v-else :category="workflowSection" @onClick="onClick" :expanded="true" />
-                <tool-section :category="otherSection" @onClick="onClick" :expanded="true" />
+                    :expanded="true"
+                    @onClick="onClick" />
+                <tool-section v-else :category="workflowSection" :expanded="true" @onClick="onClick" />
+                <tool-section :category="otherSection" :expanded="true" @onClick="onClick" />
                 <tool-section
                     v-if="hasVisualizations"
                     :category="visualizationSection"
-                    @onClick="onClick"
-                    :expanded="true" />
+                    :expanded="true"
+                    @onClick="onClick" />
             </div>
         </div>
         <MarkdownDialog
diff --git a/client/src/components/Markdown/StsDownloadButton.vue b/client/src/components/Markdown/StsDownloadButton.vue
index 857b1504fb0..ffa55e585d7 100644
--- a/client/src/components/Markdown/StsDownloadButton.vue
+++ b/client/src/components/Markdown/StsDownloadButton.vue
@@ -2,14 +2,14 @@
     <config-provider v-slot="{ config, loading }">
         <b-button
             v-if="!loading && canDownload(config)"
+            v-b-tooltip.hover.bottom
             class="float-right markdown-pdf-export"
             :title="title"
             variant="link"
             role="button"
-            v-b-tooltip.hover.bottom
             @click="onDownload(config)">
-            <font-awesome-icon icon="spinner" spin v-if="waiting" />
-            <font-awesome-icon icon="download" v-else />
+            <font-awesome-icon v-if="waiting" icon="spinner" spin />
+            <font-awesome-icon v-else icon="download" />
         </b-button>
     </config-provider>
 </template>
diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
index 361a7cfdefb..1854278e483 100644
--- a/client/src/components/Masthead/Masthead.vue
+++ b/client/src/components/Masthead/Masthead.vue
@@ -2,16 +2,16 @@
     <b-navbar id="masthead" type="dark" role="navigation" aria-label="Main" class="justify-content-center">
         <b-navbar-brand :href="brandLink" aria-label="homepage">
             <img alt="logo" class="navbar-brand-image" :src="brandImage" />
-            <img alt="logo" class="navbar-brand-image" :src="brandImageSecondary" v-if="brandImageSecondary" />
+            <img v-if="brandImageSecondary" alt="logo" class="navbar-brand-image" :src="brandImageSecondary" />
             <span class="navbar-brand-title">{{ brandTitle }}</span>
         </b-navbar-brand>
         <b-navbar-nav>
             <masthead-item
                 v-for="(tab, idx) in tabs"
-                :tab="tab"
-                :active-tab="activeTab"
+                v-show="!(tab.hidden === undefined ? false : tab.hidden)"
                 :key="`tab-${idx}`"
-                v-show="!(tab.hidden === undefined ? false : tab.hidden)">
+                :tab="tab"
+                :active-tab="activeTab">
             </masthead-item>
         </b-navbar-nav>
         <div ref="quota-meter-container" class="quota-meter-container" />
diff --git a/client/src/components/Masthead/MastheadItem.vue b/client/src/components/Masthead/MastheadItem.vue
index a68da084289..848fd9a0e90 100644
--- a/client/src/components/Masthead/MastheadItem.vue
+++ b/client/src/components/Masthead/MastheadItem.vue
@@ -1,16 +1,16 @@
 <template>
     <b-nav-item
         v-if="!menu"
+        :id="tab.id"
+        v-b-tooltip.hover.bottom
+        v-b-popover.manual.bottom="{ id: tab.id, content: popoverNote, html: true }"
         :class="classes"
         :style="styles"
-        :id="tab.id"
         :href="formatUrl(tab.url)"
         :target="tab.target || '_parent'"
         role="menuitem"
         :link-classes="linkClasses"
-        v-b-tooltip.hover.bottom
         :title="tab.tooltip"
-        v-b-popover.manual.bottom="{ id: tab.id, content: popoverNote, html: true }"
         @click="open(tab, $event)">
         <template v-if="tab.icon">
             <span :class="iconClasses" />
@@ -21,27 +21,27 @@
         </template>
     </b-nav-item>
     <b-nav-item-dropdown
-        ref="dropdown"
         v-else
+        :id="tab.id"
+        ref="dropdown"
+        v-b-tooltip.hover.bottom
+        v-b-popover.manual.bottom="{ id: tab.id, content: popoverNote, html: true }"
         :class="classes"
         :style="styles"
         :text="tab.title"
-        :id="tab.id"
         href="#"
-        v-b-tooltip.hover.bottom
         :title="tab.tooltip"
-        v-b-popover.manual.bottom="{ id: tab.id, content: popoverNote, html: true }"
         @show="open(tab, $event)">
         <template v-for="(item, idx) in tab.menu">
-            <div v-if="item.divider" class="dropdown-divider" :key="`divider-${idx}`" />
+            <div v-if="item.divider" :key="`divider-${idx}`" class="dropdown-divider" />
             <b-dropdown-item
                 v-else-if="item.hidden !== true"
-                :href="formatUrl(item.url)"
                 :key="`item-${idx}`"
+                :href="formatUrl(item.url)"
                 :target="item.target || '_parent'"
                 role="menuitem"
-                @click="open(item, $event)"
-                :disabled="item.disabled === true">
+                :disabled="item.disabled === true"
+                @click="open(item, $event)">
                 {{ item.title }}
             </b-dropdown-item>
         </template>
diff --git a/client/src/components/NewUserWelcome/NewUserWelcome.vue b/client/src/components/NewUserWelcome/NewUserWelcome.vue
index 2b4f973b9d3..8fa770dd58c 100644
--- a/client/src/components/NewUserWelcome/NewUserWelcome.vue
+++ b/client/src/components/NewUserWelcome/NewUserWelcome.vue
@@ -4,9 +4,9 @@
             <component
                 :is="viewElement"
                 v-bind="currentNode"
+                :image-loc="config.welcome_directory"
                 @select="down"
-                @back="up"
-                :image-loc="config.welcome_directory">
+                @back="up">
             </component>
         </ConfigProvider>
     </div>
diff --git a/client/src/components/PageEditor/PageEditorHtml.vue b/client/src/components/PageEditor/PageEditorHtml.vue
index 5823709225b..1aa0c5d0fda 100644
--- a/client/src/components/PageEditor/PageEditorHtml.vue
+++ b/client/src/components/PageEditor/PageEditorHtml.vue
@@ -5,19 +5,19 @@
                 <div class="panel-header-buttons">
                     <b-button
                         id="save-button"
+                        v-b-tooltip.hover.bottom
                         title="Save"
                         variant="link"
                         role="button"
-                        v-b-tooltip.hover.bottom
                         @click="saveContent(false)">
                         <span class="fa fa-save" />
                     </b-button>
                     <b-button
                         id="view-button"
+                        v-b-tooltip.hover.bottom
                         title="Save & View"
                         variant="link"
                         role="button"
-                        v-b-tooltip.hover.bottom
                         @click="saveContent(true)">
                         <span class="fa fa-eye" />
                     </b-button>
diff --git a/client/src/components/PageEditor/PageEditorMarkdown.vue b/client/src/components/PageEditor/PageEditorMarkdown.vue
index b6efaa01e5b..63d4f071e0a 100644
--- a/client/src/components/PageEditor/PageEditorMarkdown.vue
+++ b/client/src/components/PageEditor/PageEditorMarkdown.vue
@@ -8,19 +8,19 @@
             <template v-slot:buttons>
                 <b-button
                     id="save-button"
+                    v-b-tooltip.hover.bottom
                     title="Save"
                     variant="link"
                     role="button"
-                    v-b-tooltip.hover.bottom
                     @click="saveContent(false)">
                     <font-awesome-icon icon="save" />
                 </b-button>
                 <b-button
                     id="view-button"
+                    v-b-tooltip.hover.bottom
                     title="Save & View"
                     variant="link"
                     role="button"
-                    v-b-tooltip.hover.bottom
                     @click="saveContent(true)">
                     <font-awesome-icon icon="eye" />
                 </b-button>
diff --git a/client/src/components/Panels/Buttons/FavoritesButton.vue b/client/src/components/Panels/Buttons/FavoritesButton.vue
index 8b4c27e153e..7f636dfd1a8 100644
--- a/client/src/components/Panels/Buttons/FavoritesButton.vue
+++ b/client/src/components/Panels/Buttons/FavoritesButton.vue
@@ -1,10 +1,10 @@
 <template>
     <b-button
+        v-b-tooltip.hover
         class="panel-header-button-toolbox"
         size="sm"
         variant="link"
         aria-label="Show favorite tools"
-        v-b-tooltip.hover
         :title="tooltipText"
         @click="onFavorites">
         <icon v-if="toggle" :icon="['fas', 'star']" />
diff --git a/client/src/components/Panels/Buttons/PanelViewButton.vue b/client/src/components/Panels/Buttons/PanelViewButton.vue
index 8baeb945bd8..37689b98305 100644
--- a/client/src/components/Panels/Buttons/PanelViewButton.vue
+++ b/client/src/components/Panels/Buttons/PanelViewButton.vue
@@ -1,18 +1,18 @@
 <template>
     <b-dropdown
+        v-b-tooltip.hover
         right
         role="button"
         title="Show panel options"
         variant="link"
         aria-label="View all tool panel configurations"
         class="tool-panel-dropdown"
-        size="sm"
-        v-b-tooltip.hover>
+        size="sm">
         <PanelViewMenuItem
             :current-panel-view="currentPanelView"
             :panel-view="defaultPanelView"
             @onSelect="updatePanelView" />
-        <b-dropdown-group v-for="group in groupedPanelViews" :key="group.type" :id="group.type">
+        <b-dropdown-group v-for="group in groupedPanelViews" :id="group.type" :key="group.type">
             <template v-slot:header>
                 <small class="font-weight-bold">{{ group.title }}</small>
             </template>
diff --git a/client/src/components/Panels/Buttons/PanelViewMenuItem.vue b/client/src/components/Panels/Buttons/PanelViewMenuItem.vue
index 34c5707ab7b..288cc1e429d 100644
--- a/client/src/components/Panels/Buttons/PanelViewMenuItem.vue
+++ b/client/src/components/Panels/Buttons/PanelViewMenuItem.vue
@@ -1,7 +1,7 @@
 <template>
     <b-dropdown-item :data-panel-id="panelView.id" :disabled="isSelected" @click="onClick">
         <span :class="['fa', `fa-${icon}`]" fixed-width />
-        <span class="ml-1" :title="title" v-localize>{{ name }}</span>
+        <span v-localize class="ml-1" :title="title">{{ name }}</span>
     </b-dropdown-item>
 </template>
 
diff --git a/client/src/components/Panels/Common/Tool.vue b/client/src/components/Panels/Common/Tool.vue
index 6168cc34fbe..76ce79d6d22 100644
--- a/client/src/components/Panels/Common/Tool.vue
+++ b/client/src/components/Panels/Common/Tool.vue
@@ -4,13 +4,13 @@
             <span v-if="!hideName">{{ tool.name }}</span>
             <span class="description">{{ tool.description }}</span>
         </a>
-        <a :class="targetClass" @click="onClick" :href="tool.link" :target="tool.target" v-else>
+        <a v-else :class="targetClass" :href="tool.link" :target="tool.target" @click="onClick">
             <img v-if="tool.logo" class="logo" :src="tool.logo" />
             <span class="labels">
                 <span
                     v-for="(label, index) in tool.labels"
-                    :class="['badge', 'badge-primary', `badge-${label}`]"
-                    :key="index">
+                    :key="index"
+                    :class="['badge', 'badge-primary', `badge-${label}`]">
                     {{ label }}
                 </span>
             </span>
diff --git a/client/src/components/Panels/Common/ToolPanelLabel.vue b/client/src/components/Panels/Common/ToolPanelLabel.vue
index 989e88e09ed..36dc2f47b57 100644
--- a/client/src/components/Panels/Common/ToolPanelLabel.vue
+++ b/client/src/components/Panels/Common/ToolPanelLabel.vue
@@ -1,8 +1,8 @@
 <template>
     <div
+        v-b-tooltip.topright.hover
         class="tool-panel-label"
         :title="description"
-        v-b-tooltip.topright.hover
         @mouseover="hover = true"
         @mouseleave="hover = false">
         {{ definition.text }}
diff --git a/client/src/components/Panels/Common/ToolPanelLinks.vue b/client/src/components/Panels/Common/ToolPanelLinks.vue
index 0fadd594746..132d4818c34 100644
--- a/client/src/components/Panels/Common/ToolPanelLinks.vue
+++ b/client/src/components/Panels/Common/ToolPanelLinks.vue
@@ -1,7 +1,7 @@
 <template>
     <span v-if="link">
         <a :href="link" target="_blank" style="display: inline">
-            <font-awesome-icon v-b-tooltip.hover title="Link" icon="external-link-alt" v-show="show" />
+            <font-awesome-icon v-show="show" v-b-tooltip.hover title="Link" icon="external-link-alt" />
         </a>
     </span>
 </template>
diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index 67da86ad03f..0822853f2ac 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -1,12 +1,12 @@
 <template>
     <div v-if="isSection && hasElements" class="tool-panel-section">
         <div
+            v-b-tooltip.topright.hover
             :class="['toolSectionTitle', `tool-menu-section-${sectionName}`]"
             :title="title"
-            v-b-tooltip.topright.hover
             @mouseover="hover = true"
             @mouseleave="hover = false">
-            <a class="title-link" @click="toggleMenu()" href="javascript:void(0)">
+            <a class="title-link" href="javascript:void(0)" @click="toggleMenu()">
                 <span class="name">
                     {{ this.name }}
                 </span>
@@ -16,12 +16,12 @@
         <transition name="slide">
             <div v-if="opened">
                 <template v-for="[key, el] in category.elems.entries()">
-                    <ToolPanelLabel v-if="category.text" :definition="el" :key="key" />
+                    <ToolPanelLabel v-if="category.text" :key="key" :definition="el" />
                     <tool
                         v-else
+                        :key="key"
                         class="ml-2"
                         :tool="el"
-                        :key="key"
                         :tool-key="toolKey"
                         :hide-name="hideName"
                         :operation-title="operationTitle"
diff --git a/client/src/components/Panels/ProviderAwareToolBox.vue b/client/src/components/Panels/ProviderAwareToolBox.vue
index 0e333a1f584..95232d56f7b 100644
--- a/client/src/components/Panels/ProviderAwareToolBox.vue
+++ b/client/src/components/Panels/ProviderAwareToolBox.vue
@@ -1,17 +1,17 @@
 <template>
-    <ConfigProvider class="d-flex flex-column" v-slot="{ config }">
+    <ConfigProvider v-slot="{ config }" class="d-flex flex-column">
         <ToolPanelViewProvider
+            v-if="config.default_panel_view"
             v-slot="{ currentPanel, currentPanelView }"
-            :panel-view="config.default_panel_view"
-            v-if="config.default_panel_view">
+            :panel-view="config.default_panel_view">
             <ToolBox
+                v-if="currentPanelView"
                 :toolbox="currentPanel"
                 :panel-views="config.panel_views"
                 :current-panel-view="currentPanelView"
                 :stored-workflow-menu-entries="storedWorkflowMenuEntries"
                 :workflow-title="workflowTitle"
-                @updatePanelView="updatePanelView"
-                v-if="currentPanelView">
+                @updatePanelView="updatePanelView">
             </ToolBox>
         </ToolPanelViewProvider>
     </ConfigProvider>
diff --git a/client/src/components/Panels/ProviderAwareToolBoxWorkflow.vue b/client/src/components/Panels/ProviderAwareToolBoxWorkflow.vue
index a458a22d36d..84e1c22c57e 100644
--- a/client/src/components/Panels/ProviderAwareToolBoxWorkflow.vue
+++ b/client/src/components/Panels/ProviderAwareToolBoxWorkflow.vue
@@ -1,11 +1,12 @@
 <template>
-    <ConfigProvider class="d-flex flex-column" v-slot="{ config }">
+    <ConfigProvider v-slot="{ config }" class="d-flex flex-column">
         <ToolPanelViewProvider
+            v-if="config.default_panel_view"
             v-slot="{ currentPanel, currentPanelView }"
-            :panel-view="config.default_panel_view"
-            v-if="config.default_panel_view">
+            :panel-view="config.default_panel_view">
             <ToolBoxWorkflow
                 :toolbox="currentPanel"
+                v-if="currentPanelView"
                 :panel-views="config.panel_views"
                 :current-panel-view="currentPanelView"
                 :workflows="workflows"
@@ -15,8 +16,7 @@
                 @onInsertTool="onInsertTool"
                 @onInsertModule="onInsertModule"
                 @onInsertWorkflow="onInsertWorkflow"
-                @onInsertWorkflowSteps="onInsertWorkflowSteps"
-                v-if="currentPanelView">
+                @onInsertWorkflowSteps="onInsertWorkflowSteps">
             </ToolBoxWorkflow>
         </ToolPanelViewProvider>
     </ConfigProvider>
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 8af0fd5b8a5..7c1d878b53c 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -3,10 +3,10 @@
         <div unselectable="on">
             <div class="unified-panel-header-inner">
                 <nav class="d-flex justify-content-between mx-3 my-2">
-                    <h4 class="m-1" v-localize>Tools</h4>
+                    <h4 v-localize class="m-1">Tools</h4>
                     <div class="panel-header-buttons">
                         <b-button-group>
-                            <favorites-button :query="query" @onFavorites="onQuery" v-if="isUser" />
+                            <favorites-button v-if="isUser" :query="query" @onFavorites="onQuery" />
                             <panel-view-button
                                 v-if="panelViews && Object.keys(panelViews).length > 1"
                                 :panel-views="panelViews"
@@ -25,16 +25,16 @@
                 @onQuery="onQuery"
                 @onResults="onResults" />
             <upload-button />
-            <div class="pb-2" v-if="hasResults">
-                <b-button @click="onToggle" size="sm" class="w-100">
+            <div v-if="hasResults" class="pb-2">
+                <b-button size="sm" class="w-100" @click="onToggle">
                     <span :class="buttonIcon" />
                     <span class="mr-1">{{ buttonText }}</span>
                 </b-button>
             </div>
-            <div class="pb-2" v-else-if="queryTooShort">
+            <div v-else-if="queryTooShort" class="pb-2">
                 <b-badge class="alert-danger w-100">Search string too short!</b-badge>
             </div>
-            <div class="pb-2" v-else-if="queryFinished">
+            <div v-else-if="queryFinished" class="pb-2">
                 <b-badge class="alert-danger w-100">No results found!</b-badge>
             </div>
         </div>
@@ -43,15 +43,15 @@
                 <div class="toolMenu">
                     <tool-section
                         v-for="(section, key) in sections"
+                        :key="key"
                         :category="section"
                         :query-filter="queryFilter"
-                        :key="key"
                         @onClick="onOpen" />
                 </div>
                 <tool-section :category="{ text: workflowTitle }" />
                 <div id="internal-workflows" class="toolSectionBody">
                     <div class="toolSectionBg" />
-                    <div class="toolTitle" v-for="wf in workflows" :key="wf.id">
+                    <div v-for="wf in workflows" :key="wf.id" class="toolTitle">
                         <a class="title-link" :href="wf.href">{{ wf.title }}</a>
                     </div>
                 </div>
diff --git a/client/src/components/Panels/ToolBoxWorkflow.vue b/client/src/components/Panels/ToolBoxWorkflow.vue
index 318ecd935db..075a11d34a3 100644
--- a/client/src/components/Panels/ToolBoxWorkflow.vue
+++ b/client/src/components/Panels/ToolBoxWorkflow.vue
@@ -3,7 +3,7 @@
         <div unselectable="on">
             <div class="unified-panel-header-inner">
                 <nav class="d-flex justify-content-between mx-3 my-2">
-                    <h4 class="m-1" v-localize>Tools</h4>
+                    <h4 v-localize class="m-1">Tools</h4>
                     <div class="panel-header-buttons">
                         <panel-view-button
                             v-if="panelViews && Object.keys(panelViews).length > 1"
@@ -26,31 +26,31 @@
             <div class="toolMenuContainer">
                 <tool-section
                     v-for="category in moduleSections"
+                    :key="category.name"
                     :hide-name="true"
                     :category="category"
                     tool-key="name"
                     :section-name="category.name"
                     :query-filter="query"
                     :disable-filter="true"
-                    :key="category.name"
                     @onClick="onInsertModule" />
                 <tool-section
                     v-if="hasDataManagerSection"
-                    :category="dataManagerSection"
                     :key="dataManagerSection.id"
+                    :category="dataManagerSection"
                     :query-filter="query"
                     :disable-filter="true"
                     @onClick="onInsertTool" />
                 <tool-section
                     v-for="section in sections"
+                    :key="section.id"
                     :category="section"
                     :query-filter="query"
-                    :key="section.id"
                     @onClick="onInsertTool" />
                 <tool-section
                     v-if="hasWorkflowSection"
-                    :category="workflowSection"
                     :key="workflowSection.name"
+                    :category="workflowSection"
                     section-name="workflows"
                     operation-icon="fa fa-files-o"
                     operation-title="Insert individual steps."
diff --git a/client/src/components/RuleBuilder/ColumnSelector.vue b/client/src/components/RuleBuilder/ColumnSelector.vue
index 14cf9bf52e5..b4b33fc5ecb 100644
--- a/client/src/components/RuleBuilder/ColumnSelector.vue
+++ b/client/src/components/RuleBuilder/ColumnSelector.vue
@@ -1,37 +1,37 @@
 <template>
-    <div class="rule-column-selector" v-if="!multiple || !ordered">
+    <div v-if="!multiple || !ordered" class="rule-column-selector">
         <label class="d-flex justify-content-end align-items-center">
-            <span class="mr-auto" v-b-tooltip.hover :title="help">{{ label }}</span>
-            <div class="mr-1" v-b-tooltip.hover :title="title">
-                <select2 :value="target" @input="handleInput" :multiple="multiple">
-                    <option v-for="(col, index) in colHeaders" :value="index" :key="col">{{ col }}</option>
+            <span v-b-tooltip.hover class="mr-auto" :title="help">{{ label }}</span>
+            <div v-b-tooltip.hover class="mr-1" :title="title">
+                <select2 :value="target" :multiple="multiple" @input="handleInput">
+                    <option v-for="(col, index) in colHeaders" :key="col" :value="index">{{ col }}</option>
                 </select2>
             </div>
             <slot></slot>
         </label>
     </div>
-    <div class="rule-column-selector" v-else>
+    <div v-else class="rule-column-selector">
         <span>{{ label }}</span>
         <slot></slot>
         <ol>
-            <li v-for="(targetEl, index) in target" :index="index" :key="targetEl" class="rule-column-selector-target">
+            <li v-for="(targetEl, index) in target" :key="targetEl" :index="index" class="rule-column-selector-target">
                 {{ colHeaders[targetEl] }}
                 <span class="fa fa-times rule-column-selector-target-remove" @click="handleRemove(index)"></span>
-                <span class="fa fa-arrow-up rule-column-selector-up" v-if="index !== 0" @click="moveUp(index)"></span>
+                <span v-if="index !== 0" class="fa fa-arrow-up rule-column-selector-up" @click="moveUp(index)"></span>
                 <span
-                    class="fa fa-arrow-down rule-column-selector-down"
                     v-if="index < target.length - 1"
+                    class="fa fa-arrow-down rule-column-selector-down"
                     @click="moveUp(index + 1)"></span>
             </li>
             <li v-if="this.target.length < this.colHeaders.length">
-                <span class="rule-column-selector-target-add" v-if="!orderedEdit">
+                <span v-if="!orderedEdit" class="rule-column-selector-target-add">
                     <i @click="$emit('update:orderedEdit', true)">... {{ l("Assign Another Column") }}</i>
                 </span>
-                <span class="rule-column-selector-target-select" v-else>
-                    <select2 @input="handleAdd" placeholder="Select a column">
+                <span v-else class="rule-column-selector-target-select">
+                    <select2 placeholder="Select a column" @input="handleAdd">
                         <option />
                         <!-- empty option selection for placeholder -->
-                        <option v-for="(col, index) in remainingHeaders" :value="index" :key="col">{{ col }}</option>
+                        <option v-for="(col, index) in remainingHeaders" :key="col" :value="index">{{ col }}</option>
                     </select2>
                 </span>
             </li>
diff --git a/client/src/components/RuleBuilder/RegularExpressionInput.vue b/client/src/components/RuleBuilder/RegularExpressionInput.vue
index b4b86835447..3f7c089adf8 100644
--- a/client/src/components/RuleBuilder/RegularExpressionInput.vue
+++ b/client/src/components/RuleBuilder/RegularExpressionInput.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <label for="regular_expression" v-b-tooltip.hover :title="title">{{ label }}</label>
+        <label v-b-tooltip.hover for="regular_expression" :title="title">{{ label }}</label>
         <span v-b-popover.html="popoverContent" :title="popoverTitle" class="fa fa-question"></span>
         <input
             v-b-tooltip.hover.left
diff --git a/client/src/components/RuleBuilder/RuleDisplay.vue b/client/src/components/RuleBuilder/RuleDisplay.vue
index 1d52daf8011..4fa36439f78 100644
--- a/client/src/components/RuleBuilder/RuleDisplay.vue
+++ b/client/src/components/RuleBuilder/RuleDisplay.vue
@@ -5,10 +5,10 @@
             <span v-b-tooltip.hover :title="editTitle" class="fa fa-edit mr-1" @click="edit"></span>
             <span v-b-tooltip.hover :title="removeTitle" class="fa fa-times map" @click="remove"></span>
         </span>
-        <span class="rule-warning" v-if="rule.warn">
+        <span v-if="rule.warn" class="rule-warning">
             {{ rule.warn }}
         </span>
-        <span class="rule-error" v-if="rule.error">
+        <span v-if="rule.error" class="rule-error">
             <span class="alert-message">{{ rule.error }}</span>
         </span>
     </li>
diff --git a/client/src/components/RuleBuilder/SavedRulesSelector.vue b/client/src/components/RuleBuilder/SavedRulesSelector.vue
index 306527c6597..30c6c64e14d 100644
--- a/client/src/components/RuleBuilder/SavedRulesSelector.vue
+++ b/client/src/components/RuleBuilder/SavedRulesSelector.vue
@@ -1,20 +1,20 @@
 <template>
     <div class="btn-group dropdown">
         <span
+            id="savedRulesButton"
+            v-b-tooltip.hover.bottom
             class="fas fa-history rule-builder-view-source"
             :class="{ disabled: numOfSavedRules == 0 }"
-            v-b-tooltip.hover.bottom
             :title="savedRulesMenu"
-            data-toggle="dropdown"
-            id="savedRulesButton"></span>
+            data-toggle="dropdown"></span>
         <div class="dropdown-menu" role="menu">
             <a
-                class="rule-link dropdown-item saved-rule-item"
                 v-for="(session, index) in sortSavedRules"
                 :key="session.dateTime"
-                @click="$emit('update-rules', session.rule)"
                 v-b-tooltip.hover.right
+                class="rule-link dropdown-item saved-rule-item"
                 :title="formatPreview(session.rule, index)"
+                @click="$emit('update-rules', session.rule)"
                 >Saved rule from {{ formatDate(session.dateTime) }}
             </a>
         </div>
diff --git a/client/src/components/RuleCollectionBuilder.vue b/client/src/components/RuleCollectionBuilder.vue
index e2a837374f5..34e61fce5b8 100644
--- a/client/src/components/RuleCollectionBuilder.vue
+++ b/client/src/components/RuleCollectionBuilder.vue
@@ -23,7 +23,7 @@
             <b>Be sure to specify at least one column as a list identifier</b> - specify more to created nested list
             structures. Specify a column to serve as "collection name" to group datasets into multiple collections.
         </rule-modal-header>
-        <b-alert class="alert-area" v-if="validityErrorMessages.length != 0" show variant="warning" dismissible>
+        <b-alert v-if="validityErrorMessages.length != 0" class="alert-area" show variant="warning" dismissible>
             {{ validityErrorHeader }}
             <ul>
                 <li v-for="error in validityErrorMessages" :key="error">
@@ -32,16 +32,16 @@
             </ul>
         </b-alert>
         <rule-modal-middle v-if="ruleView == 'source'">
-            <p class="errormessagelarge" v-if="ruleSourceError">{{ ruleSourceError }}</p>
-            <textarea class="rule-source" v-model="ruleSource"></textarea>
+            <p v-if="ruleSourceError" class="errormessagelarge">{{ ruleSourceError }}</p>
+            <textarea v-model="ruleSource" class="rule-source"></textarea>
         </rule-modal-middle>
 
         <rule-modal-middle v-else>
             <!-- column-headers -->
             <div
+                v-if="ruleView == 'normal'"
                 class="rule-builder-body vertically-spaced"
-                :class="{ 'flex-column-container': vertical }"
-                v-if="ruleView == 'normal'">
+                :class="{ 'flex-column-container': vertical }">
                 <!-- width: 30%; -->
                 <div class="rule-column" :class="orientation">
                     <div
@@ -54,7 +54,7 @@
                         <rule-component rule-type="sort" :display-rule-type.sync="displayRuleType" :builder="this">
                             <column-selector :target.sync="addSortingTarget" :col-headers="activeRuleColHeaders" />
                             <label v-b-tooltip.hover :title="titleNumericSort">
-                                <input type="checkbox" v-model="addSortingNumeric" />
+                                <input v-model="addSortingNumeric" type="checkbox" />
                                 {{ l("Numeric sorting.") }}
                             </label>
                         </rule-component>
@@ -72,7 +72,7 @@
                             :builder="this">
                             <label>
                                 {{ l("Starting from") }}
-                                <input type="number" v-model="addColumnRownumStart" min="0" />
+                                <input v-model="addColumnRownumStart" type="number" min="0" />
                             </label>
                         </rule-component>
                         <rule-component
@@ -93,11 +93,11 @@
                             :builder="this">
                             <label>
                                 {{ l("Value") }}
-                                <input type="text" v-model="addColumnGroupTagValueValue" />
+                                <input v-model="addColumnGroupTagValueValue" type="text" />
                             </label>
                             <label>
                                 {{ l("Default") }}
-                                <input type="text" v-model="addColumnGroupTagValueDefault" />
+                                <input v-model="addColumnGroupTagValueDefault" type="text" />
                             </label>
                         </rule-component>
                         <rule-component
@@ -106,28 +106,28 @@
                             :builder="this">
                             <column-selector :target.sync="addColumnRegexTarget" :col-headers="activeRuleColHeaders" />
                             <label>
-                                <input type="radio" v-model="addColumnRegexType" value="global" />Create column matching
+                                <input v-model="addColumnRegexType" type="radio" value="global" />Create column matching
                                 expression.
                             </label>
                             <br />
                             <label>
-                                <input type="radio" v-model="addColumnRegexType" value="groups" />Create columns
+                                <input v-model="addColumnRegexType" type="radio" value="groups" />Create columns
                                 matching expression groups.
                             </label>
                             <br />
                             <label>
-                                <input type="radio" v-model="addColumnRegexType" value="replacement" />Create column
+                                <input v-model="addColumnRegexType" type="radio" value="replacement" />Create column
                                 from expression replacement.
                             </label>
                             <br />
                             <regular-expression-input :target.sync="addColumnRegexExpression" />
                             <label v-if="addColumnRegexType == 'groups'">
                                 {{ l("Number of Groups") }}
-                                <input type="number" v-model="addColumnRegexGroupCount" min="1" />
+                                <input v-model="addColumnRegexGroupCount" type="number" min="1" />
                             </label>
                             <label v-if="addColumnRegexType == 'replacement'">
                                 {{ l("Replacement Expression") }}
-                                <input type="text" v-model="addColumnRegexReplacement" class="rule-replacement" />
+                                <input v-model="addColumnRegexReplacement" type="text" class="rule-replacement" />
                             </label>
                         </rule-component>
                         <rule-component
@@ -156,7 +156,7 @@
                             </label>
                             <label>
                                 {{ l("Prefix or suffix length") }}
-                                <input type="number" v-model="addColumnSubstrLength" min="0" />
+                                <input v-model="addColumnSubstrLength" type="number" min="0" />
                             </label>
                         </rule-component>
                         <rule-component
@@ -165,7 +165,7 @@
                             :builder="this">
                             <label>
                                 {{ l("Value") }}
-                                <input type="text" v-model="addColumnValue" />
+                                <input v-model="addColumnValue" type="text" />
                             </label>
                         </rule-component>
                         <rule-component
@@ -212,7 +212,7 @@
                             <column-selector :target.sync="addFilterRegexTarget" :col-headers="activeRuleColHeaders" />
                             <regular-expression-input :target.sync="addFilterRegexExpression" />
                             <label v-b-tooltip.hover :title="titleInvertFilterRegex">
-                                <input type="checkbox" v-model="addFilterRegexInvert" />
+                                <input v-model="addFilterRegexInvert" type="checkbox" />
                                 {{ l("Invert filter.") }}
                             </label>
                         </rule-component>
@@ -223,9 +223,9 @@
                             <column-selector
                                 :target.sync="addFilterMatchesTarget"
                                 :col-headers="activeRuleColHeaders" />
-                            <input type="text" v-model="addFilterMatchesValue" />
+                            <input v-model="addFilterMatchesValue" type="text" />
                             <label v-b-tooltip.hover :title="titleInvertFilterMatches">
-                                <input type="checkbox" v-model="addFilterMatchesInvert" />
+                                <input v-model="addFilterMatchesInvert" type="checkbox" />
                                 {{ l("Invert filter.") }}
                             </label>
                         </rule-component>
@@ -245,7 +245,7 @@
                                     <option value="greater_than_equal">{{ l("greater than or equal to") }}</option>
                                 </select>
                             </label>
-                            <input type="text" v-model="addFilterCompareValue" />
+                            <input v-model="addFilterCompareValue" type="text" />
                         </rule-component>
                         <rule-component
                             rule-type="add_filter_count"
@@ -260,10 +260,10 @@
                             </label>
                             <label>
                                 Filter how many rows?
-                                <input type="number" v-model="addFilterCountN" />
+                                <input v-model="addFilterCountN" type="number" />
                             </label>
                             <label v-b-tooltip.hover :title="titleInvertFilterMatches">
-                                <input type="checkbox" v-model="addFilterCountInvert" />
+                                <input v-model="addFilterCountInvert" type="checkbox" />
                                 {{ l("Invert filter.") }}
                             </label>
                         </rule-component>
@@ -273,12 +273,12 @@
                             :builder="this">
                             <column-selector :target.sync="addFilterEmptyTarget" :col-headers="activeRuleColHeaders" />
                             <label v-b-tooltip.hover :title="titleInvertFilterEmpty">
-                                <input type="checkbox" v-model="addFilterEmptyInvert" />
+                                <input v-model="addFilterEmptyInvert" type="checkbox" />
                                 {{ l("Invert filter.") }}
                             </label>
                         </rule-component>
                         <div v-if="displayRuleType == 'mapping'">
-                            <div class="map" v-for="(map, index) in mapping" :index="index" :key="map.type">
+                            <div v-for="(map, index) in mapping" :key="map.type" class="map" :index="index">
                                 <column-selector
                                     :class="'rule-map-' + map.type.replace(/_/g, '-')"
                                     :label="mappingTargets()[map.type].label"
@@ -298,10 +298,10 @@
                             </div>
                             <div class="buttons rule-edit-buttons d-flex justify-content-end">
                                 <button
+                                    v-if="unmappedTargets.length > 0"
                                     type="button"
                                     class="dropdown-toggle btn btn-primary mr-1"
-                                    data-toggle="dropdown"
-                                    v-if="unmappedTargets.length > 0">
+                                    data-toggle="dropdown">
                                     <span class="fa fa-plus rule-add-mapping"></span>
                                     {{ "Add Definition" }}
                                     <span class="caret"></span>
@@ -309,8 +309,8 @@
                                 <div class="dropdown-menu" role="menu">
                                     <a
                                         v-for="target in unmappedTargets"
-                                        :index="target"
                                         :key="target"
+                                        :index="target"
                                         class="dropdown-item"
                                         href="javascript:void(0)"
                                         :class="'rule-add-mapping-' + target.replace(/_/g, '-')"
@@ -319,16 +319,16 @@
                                     >
                                 </div>
                                 <b-button
+                                    v-if="!hasActiveMappingEdit"
                                     v-b-tooltip.hover.bottom
                                     :title="titleApplyColumnDefinitions"
                                     class="rule-mapping-ok"
-                                    v-if="!hasActiveMappingEdit"
                                     @click="displayRuleType = null"
                                     >{{ l("Apply") }}</b-button
                                 >
                             </div>
                         </div>
-                        <div class="rule-summary" v-if="displayRuleType == null">
+                        <div v-if="displayRuleType == null" class="rule-summary">
                             <span class="title">
                                 {{ l("Rules") }}
                                 <span
@@ -338,9 +338,9 @@
                                     @click="viewSource"></span>
                                 <saved-rules-selector
                                     ref="savedRulesSelector"
-                                    @update-rules="restoreRules"
                                     :saved-rules="this.savedRules"
-                                    :rule-col-headers="colHeadersPerRule" />
+                                    :rule-col-headers="colHeadersPerRule"
+                                    @update-rules="restoreRules" />
                             </span>
                             <div v-if="jaggedData" class="rule-warning">
                                 Rows contain differing numbers of columns, there was likely a problem parsing your data.
@@ -349,22 +349,22 @@
                                 <!-- Example at the end of https://vuejs.org/v2/guide/list.html -->
                                 <rule-display
                                     v-for="(rule, index) in rules"
+                                    :key="index"
                                     :rule="rule"
                                     :index="index"
-                                    :key="index"
+                                    :col-headers="colHeadersPerRule[index]"
                                     @edit="editRule(rule, index)"
-                                    @remove="removeRule(index)"
-                                    :col-headers="colHeadersPerRule[index]" />
+                                    @remove="removeRule(index)" />
                                 <identifier-display
                                     v-for="(map, index) in mapping"
                                     v-bind="map"
-                                    :index="index"
                                     :key="map.type"
+                                    :index="index"
+                                    :col-headers="colHeaders"
                                     @remove="removeMapping(index)"
                                     @edit="displayRuleType = 'mapping'"
                                     @mouseover.native="map.columns.forEach((col) => highlightColumn(col))"
-                                    @mouseout.native="map.columns.forEach((col) => unhighlightColumn(col))"
-                                    :col-headers="colHeaders" />
+                                    @mouseout.native="map.columns.forEach((col) => unhighlightColumn(col))" />
                                 <div v-if="mapping.length == 0">
                                     One or more column definitions must be specified. These are required to specify how
                                     to build collections and datasets from rows and columns of the table.
@@ -375,8 +375,8 @@
                             <div class="rules-buttons btn-group">
                                 <div class="dropup">
                                     <button
-                                        type="button"
                                         v-b-tooltip.hover.bottom
+                                        type="button"
                                         :title="titleRulesMenu"
                                         class="rule-menu-rules-button primary-button dropdown-toggle"
                                         data-toggle="dropdown">
@@ -399,8 +399,8 @@
                                 </div>
                                 <div class="dropup">
                                     <button
-                                        type="button"
                                         v-b-tooltip.hover.bottom
+                                        type="button"
                                         :title="titleFilterMenu"
                                         class="rule-menu-filter-button primary-button dropdown-toggle"
                                         data-toggle="dropdown">
@@ -418,8 +418,8 @@
                                 </div>
                                 <div class="dropup">
                                     <button
-                                        type="button"
                                         v-b-tooltip.hover.bottom
+                                        type="button"
                                         :title="titleColumMenu"
                                         class="rule-menu-column-button primary-button dropdown-toggle"
                                         data-toggle="dropdown">
@@ -430,13 +430,13 @@
                                     <div class="dropdown-menu" role="menu">
                                         <rule-target-component :builder="this" rule-type="add_column_basename" />
                                         <rule-target-component
+                                            v-if="metadataOptions"
                                             :builder="this"
-                                            rule-type="add_column_metadata"
-                                            v-if="metadataOptions" />
+                                            rule-type="add_column_metadata" />
                                         <rule-target-component
+                                            v-if="hasTagsMetadata"
                                             :builder="this"
-                                            rule-type="add_column_group_tag_value"
-                                            v-if="hasTagsMetadata" />
+                                            rule-type="add_column_group_tag_value" />
                                         <rule-target-component :builder="this" rule-type="add_column_regex" />
                                         <rule-target-component :builder="this" rule-type="add_column_concatenate" />
                                         <rule-target-component :builder="this" rule-type="add_column_rownum" />
@@ -450,7 +450,7 @@
                 </div>
                 <!--  flex-column column -->
                 <!--  style="width: 70%;" -->
-                <div class="table-column" :class="orientation" style="width: 100%" v-if="initialElements !== null">
+                <div v-if="initialElements !== null" class="table-column" :class="orientation" style="width: 100%">
                     <hot-table
                         id="hot-table"
                         ref="hotTable"
@@ -462,13 +462,13 @@
             </div>
         </rule-modal-middle>
         <rule-modal-footer v-if="ruleView == 'source'">
-            <b-button v-b-tooltip.hover :title="titleSourceCancel" @click="cancelSourceEdit" class="rule-btn-cancel">{{
+            <b-button v-b-tooltip.hover :title="titleSourceCancel" class="rule-btn-cancel" @click="cancelSourceEdit">{{
                 l("Cancel")
             }}</b-button>
             <b-button v-b-tooltip.hover :title="titleSourceReset" class="creator-reset-btn rule-btn-reset">{{
                 l("Reset")
             }}</b-button>
-            <b-button v-b-tooltip.hover :title="titleSourceApply" @click="attemptRulePreview" class="rule-btn-okay">{{
+            <b-button v-b-tooltip.hover :title="titleSourceApply" class="rule-btn-okay" @click="attemptRulePreview">{{
                 l("Apply")
             }}</b-button>
         </rule-modal-footer>
@@ -476,30 +476,30 @@
             <template v-slot:inputs>
                 <div class="rule-footer-inputs">
                     <label v-if="elementsType == 'datasets'">{{ l("Hide original elements") }}:</label>
-                    <input type="checkbox" v-model="hideSourceItems" v-if="elementsType == 'datasets'" />
-                    <div class="rule-footer-extension-group" v-if="extension && showFileTypeSelector">
+                    <input v-if="elementsType == 'datasets'" v-model="hideSourceItems" type="checkbox" />
+                    <div v-if="extension && showFileTypeSelector" class="rule-footer-extension-group">
                         <label>{{ l("Type") }}:</label>
-                        <select2 name="extension" class="extension-select" v-model="extension">
-                            <option v-for="col in extensions" :value="col['id']" :key="col.id">
+                        <select2 v-model="extension" name="extension" class="extension-select">
+                            <option v-for="col in extensions" :key="col.id" :value="col['id']">
                                 {{ col["text"] }}
                             </option>
                         </select2>
                     </div>
-                    <div class="rule-footer-genome-group" v-if="genome && showGenomeSelector">
+                    <div v-if="genome && showGenomeSelector" class="rule-footer-genome-group">
                         <label>{{ l("Genome") }}:</label>
-                        <select2 class="genome-select" v-model="genome">
-                            <option v-for="col in genomes" :value="col['id']" :key="col.id">{{ col["text"] }}</option>
+                        <select2 v-model="genome" class="genome-select">
+                            <option v-for="col in genomes" :key="col.id" :value="col['id']">{{ col["text"] }}</option>
                         </select2>
                     </div>
                     <label v-if="showAddNameTag">{{ l("Add nametag for name") }}:</label>
-                    <input type="checkbox" v-model="addNameTag" v-if="showAddNameTag" />
-                    <div class="rule-footer-name-group" v-if="showCollectionNameInput">
+                    <input v-if="showAddNameTag" v-model="addNameTag" type="checkbox" />
+                    <div v-if="showCollectionNameInput" class="rule-footer-name-group">
                         <b-input
+                            v-model="collectionName"
+                            v-b-tooltip.hover
                             class="collection-name"
                             :placeholder="namePlaceholder"
-                            :title="namePlaceholder"
-                            v-b-tooltip.hover
-                            v-model="collectionName" />
+                            :title="namePlaceholder" />
                         <label>{{ l("Name") }}:</label>
                     </div>
                 </div>
@@ -507,23 +507,23 @@
             <b-row class="mx-auto">
                 <b-button
                     :help="titleCancel"
-                    @click="cancel"
                     class="creator-cancel-btn rule-btn-cancel"
                     tabindex="-1"
+                    @click="cancel"
                     >{{ l("Cancel") }}</b-button
                 >
 
                 <tooltip-on-hover class="menu-option" :title="titleReset">
-                    <b-button @click="resetRulesAndState" class="creator-reset-btn rule-btn-reset">{{
+                    <b-button class="creator-reset-btn rule-btn-reset" @click="resetRulesAndState">{{
                         l("Reset")
                     }}</b-button>
                 </tooltip-on-hover>
                 <tooltip-on-hover class="menu-option" :disabled="!validInput" :title="titleFinish">
                     <b-button
-                        @click="createCollection"
                         class="create-collection rule-btn-okay"
                         variant="primary"
                         :disabled="!validInput"
+                        @click="createCollection"
                         >{{ finishButtonTitle }}</b-button
                     >
                 </tooltip-on-hover>
@@ -546,7 +546,7 @@
             }}
         </rule-modal-header>
         <rule-modal-footer>
-            <b-button @click="cancel" class="creator-cancel-btn" tabindex="-1">{{ l("Close") }}</b-button>
+            <b-button class="creator-cancel-btn" tabindex="-1" @click="cancel">{{ l("Close") }}</b-button>
         </rule-modal-footer>
     </state-div>
     <state-div v-else-if="state == 'error'">
@@ -556,10 +556,10 @@
             <p class="errormessagelarge">{{ errorMessage }}</p>
         </rule-modal-middle>
         <rule-modal-footer>
-            <b-button v-b-tooltip.hover :title="titleCancel" @click="cancel" class="creator-cancel-btn" tabindex="-1">{{
+            <b-button v-b-tooltip.hover :title="titleCancel" class="creator-cancel-btn" tabindex="-1" @click="cancel">{{
                 l("Close")
             }}</b-button>
-            <b-button v-b-tooltip.hover :title="titleErrorOkay" @click="state = 'build'" tabindex="-1">{{
+            <b-button v-b-tooltip.hover :title="titleErrorOkay" tabindex="-1" @click="state = 'build'">{{
                 l("Okay")
             }}</b-button>
         </rule-modal-footer>
diff --git a/client/src/components/RulesDisplay/RuleDisplayPreview.vue b/client/src/components/RulesDisplay/RuleDisplayPreview.vue
index 2c89853548f..b3ed8f39335 100644
--- a/client/src/components/RulesDisplay/RuleDisplayPreview.vue
+++ b/client/src/components/RulesDisplay/RuleDisplayPreview.vue
@@ -1,10 +1,10 @@
 <template>
     <li class="rule">
         <span class="rule-display">{{ title }} </span>
-        <span class="rule-warning" v-if="rule.warn">
+        <span v-if="rule.warn" class="rule-warning">
             {{ rule.warn }}
         </span>
-        <span class="rule-error" v-if="rule.error">
+        <span v-if="rule.error" class="rule-error">
             <span class="alert-message">{{ rule.error }}</span>
         </span>
     </li>
diff --git a/client/src/components/RulesDisplay/RulesDisplay.vue b/client/src/components/RulesDisplay/RulesDisplay.vue
index 753b0e4d48e..fffe444627f 100644
--- a/client/src/components/RulesDisplay/RulesDisplay.vue
+++ b/client/src/components/RulesDisplay/RulesDisplay.vue
@@ -3,15 +3,15 @@
         <ol class="rules">
             <rule-display-preview
                 v-for="(rule, index) in rules"
+                :key="index"
                 :rule="rule"
                 :index="index"
-                :key="index"
                 :col-headers="columnData.colHeadersPerRule[index]" />
             <identifier-display-preview
                 v-for="(map, index) in mapping"
                 v-bind="map"
-                :index="index"
                 :key="map.type"
+                :index="index"
                 :col-headers="colHeaders" />
         </ol>
     </div>
diff --git a/client/src/components/SchemaOrg/OrganizationForm.vue b/client/src/components/SchemaOrg/OrganizationForm.vue
index 88b6964504c..4cd76c872bb 100644
--- a/client/src/components/SchemaOrg/OrganizationForm.vue
+++ b/client/src/components/SchemaOrg/OrganizationForm.vue
@@ -1,7 +1,7 @@
 <!-- https://schema.org/Organization -->
 <template>
     <b-form @submit="onSave" @reset="onReset">
-        <div role="group" class="form-group" v-for="attribute in displayedAttributes" :key="attribute.key">
+        <div v-for="attribute in displayedAttributes" :key="attribute.key" role="group" class="form-group">
             <label :for="attribute.key">{{ attribute.label }}</label>
             <font-awesome-icon
                 v-b-tooltip.hover
diff --git a/client/src/components/SchemaOrg/OrganizationViewer.vue b/client/src/components/SchemaOrg/OrganizationViewer.vue
index 0c759cefa31..e5c69a1a7e4 100644
--- a/client/src/components/SchemaOrg/OrganizationViewer.vue
+++ b/client/src/components/SchemaOrg/OrganizationViewer.vue
@@ -15,7 +15,7 @@
                 >)
             </span>
         </span>
-        <span itemprop="email" :content="organization.email" v-else-if="email">
+        <span v-else-if="email" itemprop="email" :content="organization.email">
             {{ email }}
         </span>
         <a v-if="url" :href="url" target="_blank">
diff --git a/client/src/components/SchemaOrg/PersonForm.vue b/client/src/components/SchemaOrg/PersonForm.vue
index 61b87a9a41b..faeb7460d73 100644
--- a/client/src/components/SchemaOrg/PersonForm.vue
+++ b/client/src/components/SchemaOrg/PersonForm.vue
@@ -1,7 +1,7 @@
 <!-- https://schema.org/Person -->
 <template>
     <b-form @submit="onSave" @reset="onReset">
-        <div role="group" class="form-group" v-for="attribute in displayedAttributes" :key="attribute.key">
+        <div v-for="attribute in displayedAttributes" :key="attribute.key" role="group" class="form-group">
             <label :for="attribute.key">{{ attribute.label }}</label>
             <font-awesome-icon
                 v-b-tooltip.hover
diff --git a/client/src/components/SchemaOrg/PersonViewer.vue b/client/src/components/SchemaOrg/PersonViewer.vue
index 291b0a3bc26..f71fa83fcff 100644
--- a/client/src/components/SchemaOrg/PersonViewer.vue
+++ b/client/src/components/SchemaOrg/PersonViewer.vue
@@ -9,16 +9,16 @@
             <b-table striped :items="items"> </b-table>
         </b-popover>
         <span v-if="name">
-            <meta itemprop="name" :content="person.name" v-if="person.name" />
-            <meta itemprop="givenName" :content="person.givenName" v-if="person.givenName" />
-            <meta itemprop="familyName" :content="person.familyName" v-if="person.familyName" />
+            <meta v-if="person.name" itemprop="name" :content="person.name" />
+            <meta v-if="person.givenName" itemprop="givenName" :content="person.givenName" />
+            <meta v-if="person.familyName" itemprop="familyName" :content="person.familyName" />
             {{ name }}
             <span v-if="email">
                 (<span itemprop="email" :content="person.email">{{ email }}</span
                 >)
             </span>
         </span>
-        <span itemprop="email" :content="person.email" v-else>
+        <span v-else itemprop="email" :content="person.email">
             {{ email }}
         </span>
         <a v-if="orcidLink" :href="orcidLink" target="_blank">
diff --git a/client/src/components/SelectionDialog/DataDialogTable.vue b/client/src/components/SelectionDialog/DataDialogTable.vue
index 3a39d7d2cb3..50fb25aad93 100644
--- a/client/src/components/SelectionDialog/DataDialogTable.vue
+++ b/client/src/components/SelectionDialog/DataDialogTable.vue
@@ -15,10 +15,10 @@
             @filtered="filtered">
             <template v-slot:head(select_icon)="">
                 <font-awesome-icon
-                    @click="$emit('toggleSelectAll')"
                     class="select-checkbox cursor-pointer"
                     title="Check to select all datasets"
-                    :icon="selectionIcon(selectAllIcon)" />
+                    :icon="selectionIcon(selectAllIcon)"
+                    @click="$emit('toggleSelectAll')" />
             </template>
             <template v-slot:cell(select_icon)="data">
                 <font-awesome-icon :icon="selectionIcon(data.item._rowVariant)" />
@@ -33,7 +33,7 @@
                             <i :class="leafIcon" />
                             <span :title="`label-${data.item.labelTitle}`">{{ data.value ? data.value : "-" }}</span>
                         </div>
-                        <div @click.stop="open(data.item)" v-else>
+                        <div v-else @click.stop="open(data.item)">
                             <font-awesome-icon icon="folder" />
                             <b-link :title="`label-${data.item.labelTitle}`">{{
                                 data.value ? data.value : "-"
@@ -49,7 +49,7 @@
                 {{ data.value ? data.value : "-" }}
             </template>
         </b-table>
-        <div class="text-center" v-if="isBusy">
+        <div v-if="isBusy" class="text-center">
             <b-spinner small type="grow"></b-spinner>
             <b-spinner small type="grow"></b-spinner>
             <b-spinner small type="grow"></b-spinner>
@@ -62,9 +62,9 @@
             <div v-else>No entries.</div>
         </div>
         <b-pagination
-            class="justify-content-md-center"
             v-if="nItems > perPage"
             v-model="currentPage"
+            class="justify-content-md-center"
             :per-page="perPage"
             :total-rows="nItems" />
     </div>
diff --git a/client/src/components/SelectionDialog/SelectionDialog.vue b/client/src/components/SelectionDialog/SelectionDialog.vue
index 0e9542f4a3a..acfd8d8b9a4 100644
--- a/client/src/components/SelectionDialog/SelectionDialog.vue
+++ b/client/src/components/SelectionDialog/SelectionDialog.vue
@@ -1,12 +1,12 @@
 <template>
-    <b-modal modal-class="selection-dialog-modal" v-if="modalShow" visible :static="modalStatic" @hide="hideModal">
+    <b-modal v-if="modalShow" modal-class="selection-dialog-modal" visible :static="modalStatic" @hide="hideModal">
         <template v-slot:modal-header>
             <slot name="search"> </slot>
         </template>
         <slot name="helper"> </slot>
         <b-alert v-if="errorMessage" variant="danger" show v-html="errorMessage" />
         <div v-else>
-            <slot name="options" v-if="optionsShow"> </slot>
+            <slot v-if="optionsShow" name="options"> </slot>
             <div v-else><span class="fa fa-spinner fa-spin" /> <span>Please wait...</span></div>
         </div>
         <template v-slot:modal-footer>
@@ -18,11 +18,11 @@
                     </b-btn>
                 </div>
                 <div v-else>
-                    <b-btn id="back-btn" size="sm" class="float-left" v-if="undoShow" @click="backFunc">
+                    <b-btn v-if="undoShow" id="back-btn" size="sm" class="float-left" @click="backFunc">
                         <font-awesome-icon :icon="['fas', 'caret-left']" />
                         Back
                     </b-btn>
-                    <b-btn size="sm" class="float-right" variant="primary" id="close-btn" @click="hideModal">
+                    <b-btn id="close-btn" size="sm" class="float-right" variant="primary" @click="hideModal">
                         Close
                     </b-btn>
                 </div>
diff --git a/client/src/components/Sharing/Sharing.vue b/client/src/components/Sharing/Sharing.vue
index d97111824b8..51d3b18813b 100644
--- a/client/src/components/Sharing/Sharing.vue
+++ b/client/src/components/Sharing/Sharing.vue
@@ -12,7 +12,7 @@
         <div v-if="!hasUsername">
             <div>To make a {{ modelClass }} accessible via link or publish it, you must create a public username:</div>
             <form class="form-group" @submit.prevent="setUsername()">
-                <input class="form-control" type="text" v-model="newUsername" />
+                <input v-model="newUsername" class="form-control" type="text" />
             </form>
             <b-button type="submit" variant="primary" @click="setUsername()">Set Username</b-button>
         </div>
@@ -22,9 +22,9 @@
             </b-form-checkbox>
             <b-form-checkbox
                 v-if="item.importable"
+                v-model="item.published"
                 class="make-publishable"
                 switch
-                v-model="item.published"
                 @change="onPublish">
                 Make {{ modelClass }} publicly available in
                 <a :href="published_url" target="_top">Published {{ pluralName }}</a>
@@ -37,10 +37,10 @@
                 </div>
                 <p>Anyone can view and import this {{ modelClass }} by visiting the following URL:</p>
                 <blockquote>
-                    <b-button title="Edit URL" @click="onEdit" v-b-tooltip.hover variant="link" size="sm">
+                    <b-button v-b-tooltip.hover title="Edit URL" variant="link" size="sm" @click="onEdit">
                         <font-awesome-icon icon="edit" />
                     </b-button>
-                    <b-button id="tooltip-clipboard" @click="onCopy" @mouseout="onCopyOut" variant="link" size="sm">
+                    <b-button id="tooltip-clipboard" variant="link" size="sm" @click="onCopy" @mouseout="onCopyOut">
                         <font-awesome-icon :icon="['far', 'copy']" />
                     </b-button>
                     <b-tooltip target="tooltip-clipboard" triggers="hover">
@@ -63,10 +63,10 @@
             <br />
             <b-card no-body>
                 <b-button
-                    class="share-with-collapse"
-                    @click="isCollapseVisible = !isCollapseVisible"
                     v-b-toggle.accordion-1
-                    variant="light">
+                    class="share-with-collapse"
+                    variant="light"
+                    @click="isCollapseVisible = !isCollapseVisible">
                     Share {{ modelClass }} with Individual Users
                     <font-awesome-icon :icon="isCollapseVisible ? `caret-up` : `caret-down`" />
                 </b-button>
@@ -74,7 +74,7 @@
                     <ConfigProvider v-slot="{ config }">
                         <CurrentUser v-slot="{ user }">
                             <div v-if="user && config && !permissionsChangeRequired(item)">
-                                <p class="share_with_title" v-if="item.users_shared_with.length === 0">
+                                <p v-if="item.users_shared_with.length === 0" class="share_with_title">
                                     You have not shared this {{ modelClass }} with any users.
                                 </p>
                                 <p v-else class="share_with_title">
@@ -101,16 +101,16 @@
                                         :internal-search="false"
                                         :max-height="config.expose_user_email || user.is_admin ? 300 : 0"
                                         label="email"
-                                        @close="onMultiselectBlur(config.expose_user_email || user.is_admin)"
                                         track-by="email"
+                                        placeholder="Please specify user email"
+                                        @close="onMultiselectBlur(config.expose_user_email || user.is_admin)"
                                         @search-change="
                                             searchChanged($event, config.expose_user_email || user.is_admin)
-                                        "
-                                        placeholder="Please specify user email">
-                                        <template slot="caret" v-if="!(config.expose_user_email || user.is_admin)">
+                                        ">
+                                        <template v-if="!(config.expose_user_email || user.is_admin)" slot="caret">
                                             <div></div>
                                         </template>
-                                        <template slot="noResult" v-if="config.expose_user_email || user.is_admin">
+                                        <template v-if="config.expose_user_email || user.is_admin" slot="noResult">
                                             <div v-if="threeCharactersEntered">
                                                 {{ elementsNotFoundWarning }}
                                             </div>
@@ -121,9 +121,9 @@
                                                 <span>{{ option.email }}</span>
                                                 <i
                                                     aria-hidden="true"
-                                                    @click="remove(option)"
                                                     tabindex="1"
-                                                    class="multiselect__tag-icon"></i>
+                                                    class="multiselect__tag-icon"
+                                                    @click="remove(option)"></i>
                                             </span>
                                         </template>
                                         <template slot="noOptions">
@@ -138,25 +138,25 @@
                                     <div class="share-with-card-buttons">
                                         <!--submit/cancel buttons-->
                                         <b-button
-                                            @click="getSharing()"
                                             variant="outline-danger"
-                                            class="sharing_icon cancel-sharing-with">
+                                            class="sharing_icon cancel-sharing-with"
+                                            @click="getSharing()">
                                             Cancel
                                         </b-button>
                                         <b-button
+                                            v-b-tooltip.hover.bottom
                                             variant="outline-primary"
                                             :disabled="
                                                 !(sharedWithUsersChanged || !!multiselectValues.currentUserSearch)
                                             "
+                                            :title="submitBtnTitle"
+                                            class="sharing_icon submit-sharing-with"
                                             @click.stop="
                                                 setSharing(
                                                     actions.share_with,
                                                     multiselectValues.sharingCandidates.map(({ email }) => email)
                                                 )
-                                            "
-                                            v-b-tooltip.hover.bottom
-                                            :title="submitBtnTitle"
-                                            class="sharing_icon submit-sharing-with">
+                                            ">
                                             {{ multiselectValues.currentUserSearch ? `Add` : `Save` }}
                                         </b-button>
                                     </div>
@@ -177,13 +177,13 @@
                         <b-col v-if="item.extra.can_change.length > 0">
                             <b-card>
                                 <b-card-header header-tag="header" class="p-1" role="tab">
-                                    <b-button block v-b-toggle.can-share variant="warning">
+                                    <b-button v-b-toggle.can-share block variant="warning">
                                         Datasets can be shared by updating their permissions
                                     </b-button>
                                 </b-card-header>
                                 <b-collapse id="can-share" visible accordion="can-share-accordion" role="tabpanel">
                                     <b-list-group>
-                                        <b-list-group-item :key="dataset.id" v-for="dataset in item.extra.can_change">{{
+                                        <b-list-group-item v-for="dataset in item.extra.can_change" :key="dataset.id">{{
                                             dataset.name
                                         }}</b-list-group-item>
                                     </b-list-group>
@@ -193,7 +193,7 @@
                         <b-col v-if="item.extra.cannot_change.length > 0">
                             <b-card>
                                 <b-card-header header-tag="header" class="p-1" role="tab">
-                                    <b-button block v-b-toggle.cannot-share variant="danger"
+                                    <b-button v-b-toggle.cannot-share block variant="danger"
                                         >Datasets cannot be shared, you are not authorized to change
                                         permissions</b-button
                                     >
@@ -201,8 +201,8 @@
                                 <b-collapse id="cannot-share" visible accordion="cannot-accordion2" role="tabpanel">
                                     <b-list-group>
                                         <b-list-group-item
-                                            :key="dataset.id"
                                             v-for="dataset in item.extra.cannot_change"
+                                            :key="dataset.id"
                                             >{{ dataset.name }}</b-list-group-item
                                         >
                                     </b-list-group>
@@ -217,6 +217,9 @@
                                 header-text-variant="white"
                                 align="center">
                                 <b-button
+                                    v-if="item.extra.can_change.length > 0"
+                                    block
+                                    variant="outline-primary"
                                     @click="
                                         setSharing(
                                             actions.share_with,
@@ -224,12 +227,12 @@
                                             share_option.make_public
                                         )
                                     "
-                                    v-if="item.extra.can_change.length > 0"
-                                    block
-                                    variant="outline-primary"
                                     >Make datasets public</b-button
                                 >
                                 <b-button
+                                    v-if="item.extra.can_change.length > 0"
+                                    block
+                                    variant="outline-primary"
                                     @click="
                                         setSharing(
                                             actions.share_with,
@@ -237,25 +240,22 @@
                                             share_option.make_accessible_to_shared
                                         )
                                     "
-                                    v-if="item.extra.can_change.length > 0"
-                                    block
-                                    variant="outline-primary"
                                     >Make datasets private to me and
                                     {{ multiselectValues.sharingCandidates.map(({ email }) => email).join() }}</b-button
                                 >
                                 <b-button
+                                    block
+                                    variant="outline-primary"
                                     @click="
                                         setSharing(
                                             actions.share_with,
                                             multiselectValues.sharingCandidates.map(({ email }) => email),
                                             share_option.no_changes
                                         )
-                                    "
-                                    block
-                                    variant="outline-primary">
+                                    ">
                                     Share Anyway
                                 </b-button>
-                                <b-button @click="getSharing()" block variant="outline-danger">Cancel </b-button>
+                                <b-button block variant="outline-danger" @click="getSharing()">Cancel </b-button>
                             </b-card>
                         </b-col>
                     </b-row>
diff --git a/client/src/components/Tags/StatelessTags.vue b/client/src/components/Tags/StatelessTags.vue
index 110681d40cb..5bb65eb060b 100644
--- a/client/src/components/Tags/StatelessTags.vue
+++ b/client/src/components/Tags/StatelessTags.vue
@@ -14,8 +14,8 @@ upstream component or environment that is accessed through props and events -->
         </a>
         <vue-tags-input
             v-if="tagsVisible"
-            class="tags-input tag-area"
             v-model="tagText"
+            class="tags-input tag-area"
             :tags="tagModels"
             :autocomplete-items="autocompleteTags"
             :disabled="disabled"
diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index bccbdf318a3..04cc287bd2f 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -4,6 +4,7 @@
             <div class="portlet-header">
                 <div class="portlet-operations">
                     <b-dropdown
+                        v-b-tooltip.hover
                         no-caret
                         right
                         role="button"
@@ -11,8 +12,7 @@
                         variant="link"
                         aria-label="View all Options"
                         class="tool-dropdown float-right"
-                        size="sm"
-                        v-b-tooltip.hover>
+                        size="sm">
                         <template v-slot:button-content>
                             <span class="fa fa-caret-down" />
                         </template>
@@ -37,6 +37,7 @@
                     </b-dropdown>
                     <b-dropdown
                         v-if="showVersions"
+                        v-b-tooltip.hover
                         no-caret
                         right
                         role="button"
@@ -44,8 +45,7 @@
                         variant="link"
                         aria-label="Select Versions"
                         class="float-right tool-versions"
-                        size="sm"
-                        v-b-tooltip.hover>
+                        size="sm">
                         <template v-slot:button-content>
                             <span class="fa fa-cubes" />
                         </template>
@@ -55,23 +55,23 @@
                     </b-dropdown>
                     <b-button
                         v-if="showAddFavorite"
+                        v-b-tooltip.hover
                         role="button"
                         title="Add to Favorites"
                         variant="link"
                         size="sm"
                         class="float-right"
-                        v-b-tooltip.hover
                         @click="onAddFavorite">
                         <span class="fa fa-star-o" />
                     </b-button>
                     <b-button
                         v-else
+                        v-b-tooltip.hover
                         role="button"
                         title="Remove from Favorites"
                         variant="link"
                         size="sm"
                         class="float-right"
-                        v-b-tooltip.hover
                         @click="onRemoveFavorite">
                         <span class="fa fa-star" />
                     </b-button>
diff --git a/client/src/components/Tool/ToolFooter.vue b/client/src/components/Tool/ToolFooter.vue
index 4cdc41b07b8..19a44bfc1d2 100644
--- a/client/src/components/Tool/ToolFooter.vue
+++ b/client/src/components/Tool/ToolFooter.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-card class="tool-footer" v-if="hasContent">
+    <b-card v-if="hasContent" class="tool-footer">
         <div v-if="hasCitations" class="mb-1">
             <span class="font-weight-bold">Citations:</span>
             <font-awesome-icon
@@ -9,9 +9,9 @@
                 style="cursor: pointer"
                 @click="copyBibtex" />
             <Citation
-                class="formatted-reference"
                 v-for="(citation, index) in citations"
                 :key="index"
+                class="formatted-reference"
                 :citation="citation"
                 output-format="bibliography"
                 prefix="-" />
@@ -28,7 +28,7 @@
                 <span v-if="requirement.version"> (Version {{ requirement.version }}) </span>
             </div>
         </div>
-        <div class="mb-1" v-if="hasLicense">
+        <div v-if="hasLicense" class="mb-1">
             <span class="font-weight-bold">License:</span>
             <License :license-id="license" />
         </div>
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index f6be5049a13..b236bf8329f 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -1,12 +1,12 @@
 <template>
     <ConfigProvider v-slot="{ config }">
         <CurrentUser v-slot="{ user }">
-            <UserHistories v-if="user" :user="user" v-slot="{ currentHistoryId }">
+            <UserHistories v-if="user" v-slot="{ currentHistoryId }" :user="user">
                 <div v-if="currentHistoryId">
                     <b-alert :show="messageShow" :variant="messageVariant" v-html="messageText" />
                     <LoadingSpan v-if="showLoading" message="Loading Tool" />
                     <div v-if="showEntryPoints">
-                        <ToolEntryPoints v-for="job in entryPoints" :job-id="job.id" :key="job.id" />
+                        <ToolEntryPoints v-for="job in entryPoints" :key="job.id" :job-id="job.id" />
                     </div>
                     <ToolSuccess
                         v-if="showSuccess"
@@ -39,10 +39,10 @@
                         :message-text="messageText"
                         :message-variant="messageVariant"
                         :disabled="disabled || showExecuting"
-                        @onChangeVersion="onChangeVersion"
-                        @onUpdateFavorites="onUpdateFavorites"
                         itemscope="itemscope"
-                        itemtype="https://schema.org/CreativeWork">
+                        itemtype="https://schema.org/CreativeWork"
+                        @onChangeVersion="onChangeVersion"
+                        @onUpdateFavorites="onUpdateFavorites">
                         <template v-slot:body>
                             <FormDisplay
                                 :id="formConfig.id"
@@ -53,32 +53,32 @@
                             <FormElement
                                 v-if="emailAllowed(config, user)"
                                 id="send_email_notification"
+                                v-model="useEmail"
                                 title="Email notification"
                                 help="Send an email notification when the job completes."
-                                type="boolean"
-                                v-model="useEmail" />
+                                type="boolean" />
                             <FormElement
                                 v-if="remapAllowed"
                                 id="rerun_remap_job_id"
+                                v-model="useJobRemapping"
                                 :title="remapTitle"
                                 :help="remapHelp"
-                                type="boolean"
-                                v-model="useJobRemapping" />
+                                type="boolean" />
                             <FormElement
                                 v-if="reuseAllowed(user)"
                                 id="use_cached_job"
+                                v-model="useCachedJobs"
                                 title="Attempt to re-use jobs with identical parameters?"
                                 help="This may skip executing jobs that you have already run."
-                                type="boolean"
-                                v-model="useCachedJobs" />
+                                type="boolean" />
                         </template>
                         <template v-slot:buttons>
                             <ButtonSpinner
                                 id="execute"
                                 title="Execute"
-                                @onClick="onExecute(config, currentHistoryId)"
                                 :wait="showExecuting"
-                                :tooltip="tooltip" />
+                                :tooltip="tooltip"
+                                @onClick="onExecute(config, currentHistoryId)" />
                         </template>
                     </ToolCard>
                 </div>
diff --git a/client/src/components/ToolsView/ToolsView.vue b/client/src/components/ToolsView/ToolsView.vue
index 8af23f3f28e..a4db1edeaca 100644
--- a/client/src/components/ToolsView/ToolsView.vue
+++ b/client/src/components/ToolsView/ToolsView.vue
@@ -39,7 +39,7 @@
                     </template>
                     <p class="card-text" v-html="helpSummary(info.help) || info.description" />
                     <p class="card-text">
-                        <b-btn :index="index" v-b-modal="'modal-' + '-' + index">Info</b-btn>
+                        <b-btn v-b-modal="'modal-' + '-' + index" :index="index">Info</b-btn>
                         <b-modal :id="'modal-' + '-' + index" centered ok-only :static="true" :title="info.name">
                             <b>{{ info.version + " / " + info.id }}</b>
                             <p>{{ info.description }}</p>
diff --git a/client/src/components/Toolshed/Index.vue b/client/src/components/Toolshed/Index.vue
index b442d9f71a2..62ea2b1963f 100644
--- a/client/src/components/Toolshed/Index.vue
+++ b/client/src/components/Toolshed/Index.vue
@@ -5,8 +5,8 @@
             <b-input-group class="mb-3">
                 <b-input
                     id="toolshed-repo-search"
-                    placeholder="Search Repositories"
                     v-model="queryInput"
+                    placeholder="Search Repositories"
                     @input="delayQuery"
                     @change="setQuery"
                     @keydown.esc="setQuery()" />
@@ -16,7 +16,7 @@
                     </b-btn>
                 </b-input-group-append>
             </b-input-group>
-            <b-form-radio-group class="mb-3" v-model="tabValue" :options="tabOptions" />
+            <b-form-radio-group v-model="tabValue" class="mb-3" :options="tabOptions" />
             <div v-if="tabValue">
                 <SearchList :query="query" :scrolled="scrolled" @onQuery="setQuery" @onError="setError" />
             </div>
diff --git a/client/src/components/Toolshed/InstalledList/Index.vue b/client/src/components/Toolshed/InstalledList/Index.vue
index 319c3adc692..9785c51394d 100644
--- a/client/src/components/Toolshed/InstalledList/Index.vue
+++ b/client/src/components/Toolshed/InstalledList/Index.vue
@@ -9,7 +9,7 @@
                     <span class="installed-message text-muted">
                         {{ repositories.length }} repositories installed on this instance.
                     </span>
-                    <b-link @click="toggleMonitor" class="font-weight-bold">
+                    <b-link class="font-weight-bold" @click="toggleMonitor">
                         <span v-if="showMonitor">
                             <span class="fa fa-angle-double-up" />
                             <span>Hide installation progress.</span>
diff --git a/client/src/components/Toolshed/InstalledList/Monitor.vue b/client/src/components/Toolshed/InstalledList/Monitor.vue
index 99b3a937342..633ebf1c9fe 100644
--- a/client/src/components/Toolshed/InstalledList/Monitor.vue
+++ b/client/src/components/Toolshed/InstalledList/Monitor.vue
@@ -3,7 +3,7 @@
         <b-alert v-if="error" variant="danger" show>
             {{ error }}
         </b-alert>
-        <b-card no-body v-if="showItems" class="my-2">
+        <b-card v-if="showItems" no-body class="my-2">
             <h5 class="m-3">Currently installing...</h5>
             <b-table
                 class="mx-3 mb-0"
diff --git a/client/src/components/Toolshed/RepositoryDetails/InstallationButton.vue b/client/src/components/Toolshed/RepositoryDetails/InstallationButton.vue
index ad83444e3f5..2579e3713fc 100644
--- a/client/src/components/Toolshed/RepositoryDetails/InstallationButton.vue
+++ b/client/src/components/Toolshed/RepositoryDetails/InstallationButton.vue
@@ -5,7 +5,7 @@
             <b-button v-if="uninstallState" :class="buttonClass" variant="danger" @click="onUninstall">
                 Uninstall
             </b-button>
-            <b-button v-else :class="buttonClass" @click="onCancel" variant="info">
+            <b-button v-else :class="buttonClass" variant="info" @click="onCancel">
                 <span v-if="!errorState" class="fa fa-spinner fa-spin" />
                 <span>{{ status }}</span>
             </b-button>
diff --git a/client/src/components/Toolshed/RepositoryDetails/InstallationSettings.vue b/client/src/components/Toolshed/RepositoryDetails/InstallationSettings.vue
index 965988a7f53..95e696846f8 100644
--- a/client/src/components/Toolshed/RepositoryDetails/InstallationSettings.vue
+++ b/client/src/components/Toolshed/RepositoryDetails/InstallationSettings.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-modal id="repo-install-settings" :static="modalStatic" v-model="modalShow" @ok="onOk" @hide="onHide">
+    <b-modal id="repo-install-settings" v-model="modalShow" :static="modalStatic" @ok="onOk" @hide="onHide">
         <template v-slot:modal-header>
             <h4 class="title m-0">
                 {{ modalTitle }}
@@ -13,7 +13,7 @@
             v-if="requiresPanel"
             label="Target Section:"
             description="Choose an existing tool panel section or create a new section to contain the installed tools (optional).">
-            <b-form-input list="sectionSelect" v-model="toolSection" />
+            <b-form-input v-model="toolSection" list="sectionSelect" />
             <datalist id="sectionSelect">
                 <option v-for="section in toolSections" :key="section.id">
                     {{ section.name }}
@@ -26,9 +26,9 @@
                 <b-form-group v-if="showConfig" label="Tool Configuration:" description="Choose a tool configuration.">
                     <b-form-radio
                         v-for="filename in toolConfigs"
+                        :key="filename"
                         v-model="toolConfig"
-                        :value="filename"
-                        :key="filename">
+                        :value="filename">
                         {{ filename }}
                     </b-form-radio>
                 </b-form-group>
diff --git a/client/src/components/Toolshed/SearchList/Index.vue b/client/src/components/Toolshed/SearchList/Index.vue
index 6285a71726e..1e3ff13e22f 100644
--- a/client/src/components/Toolshed/SearchList/Index.vue
+++ b/client/src/components/Toolshed/SearchList/Index.vue
@@ -9,19 +9,19 @@
         <div v-if="error" class="alert alert-danger">{{ error }}</div>
         <div v-else>
             <Repositories
+                v-if="!queryEmpty"
                 :query="query"
                 :scrolled="scrolled"
                 :toolshed-url="toolshedUrl"
-                @onError="setError"
-                v-if="!queryEmpty" />
+                @onError="setError" />
             <Categories
+                v-show="queryEmpty"
                 :toolshed-url="toolshedUrl"
                 :loading="loading"
                 @onCategory="setQuery"
                 @onTotal="setTotal"
                 @onError="setError"
-                @onLoading="setLoading"
-                v-show="queryEmpty" />
+                @onLoading="setLoading" />
         </div>
     </div>
 </template>
diff --git a/client/src/components/Toolshed/SearchList/Repositories.vue b/client/src/components/Toolshed/SearchList/Repositories.vue
index a00a5d72532..fd5dc0256f0 100644
--- a/client/src/components/Toolshed/SearchList/Repositories.vue
+++ b/client/src/components/Toolshed/SearchList/Repositories.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-table striped id="shed-search-results" :items="repositories" :fields="fields">
+        <b-table id="shed-search-results" striped :items="repositories" :fields="fields">
             <template v-slot:cell(name)="row">
                 <b-link href="javascript:void(0)" role="button" class="font-weight-bold" @click="row.toggleDetails">
                     {{ row.item.name }}
@@ -11,7 +11,7 @@
                 <RepositoryDetails :repo="row.item" :toolshed-url="toolshedUrl" />
             </template>
         </b-table>
-        <div class="unavailable-message" v-if="noResultsFound">No matching repositories found.</div>
+        <div v-if="noResultsFound" class="unavailable-message">No matching repositories found.</div>
         <loading-span v-if="pageLoading" message="Loading repositories" />
     </div>
 </template>
diff --git a/client/src/components/TooltipOnHover.vue b/client/src/components/TooltipOnHover.vue
index 8efb8eada34..8bfdb00f953 100644
--- a/client/src/components/TooltipOnHover.vue
+++ b/client/src/components/TooltipOnHover.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :disabled="disabled" v-b-tooltip.hover :title="title"><slot /></div>
+    <div v-b-tooltip.hover :disabled="disabled" :title="title"><slot /></div>
 </template>
 <script>
 export default {
diff --git a/client/src/components/Upload/Collection.vue b/client/src/components/Upload/Collection.vue
index 49043cf5319..2bf7f590193 100644
--- a/client/src/components/Upload/Collection.vue
+++ b/client/src/components/Upload/Collection.vue
@@ -1,7 +1,7 @@
 <template>
     <upload-wrapper ref="wrapper" :top-info="topInfo" :highlight-box="highlightBox">
-        <div class="upload-helper" v-show="showHelper"><i class="fa fa-files-o" />Drop files here</div>
-        <table class="upload-table ui-table-striped" v-show="!showHelper" ref="uploadTable">
+        <div v-show="showHelper" class="upload-helper"><i class="fa fa-files-o" />Drop files here</div>
+        <table v-show="!showHelper" ref="uploadTable" class="upload-table ui-table-striped">
             <thead>
                 <tr>
                     <th>Size</th>
@@ -14,9 +14,9 @@
         <template v-slot:footer>
             <span class="upload-footer-title">Collection Type:</span>
             <select2
-                container-class="upload-footer-collection-type"
                 ref="footerCollectionType"
                 v-model="collectionType"
+                container-class="upload-footer-collection-type"
                 :enabled="!running">
                 <option value="list">List</option>
                 <option value="paired">Pair</option>
@@ -24,15 +24,15 @@
             </select2>
             <span class="upload-footer-title">File Type:</span>
             <select2
-                container-class="upload-footer-extension"
                 ref="footerExtension"
                 v-model="extension"
+                container-class="upload-footer-extension"
                 :enabled="!running">
                 <option v-for="(ext, index) in extensions" :key="index" :value="ext.id">{{ ext.text }}</option>
             </select2>
             <span class="upload-footer-extension-info upload-icon-button fa fa-search" />
             <span class="upload-footer-title">Genome (set all):</span>
-            <select2 container-class="upload-footer-genome" ref="footerGenome" v-model="genome" :enabled="!running">
+            <select2 ref="footerGenome" v-model="genome" container-class="upload-footer-genome" :enabled="!running">
                 <option v-for="(listGenome, index) in listGenomes" :key="index" :value="listGenome.id">
                     {{ listGenome.text }}
                 </option>
@@ -40,76 +40,76 @@
         </template>
         <template v-slot:buttons>
             <b-button
+                id="btn-close"
                 ref="btnClose"
                 class="ui-button-default"
-                id="btn-close"
                 :title="btnCloseTitle"
                 @click="$emit('dismiss')">
                 {{ btnCloseTitle | localize }}
             </b-button>
             <b-button
+                id="btn-reset"
                 ref="btnReset"
                 class="ui-button-default"
-                id="btn-reset"
-                @click="_eventReset"
                 :title="btnResetTitle"
-                :disabled="!enableReset">
+                :disabled="!enableReset"
+                @click="_eventReset">
                 {{ btnResetTitle }}
             </b-button>
             <b-button
+                id="btn-stop"
                 ref="btnStop"
                 class="ui-button-default"
-                id="btn-stop"
-                @click="_eventStop"
                 :title="btnStopTitle"
-                :disabled="counterRunning == 0">
+                :disabled="counterRunning == 0"
+                @click="_eventStop">
                 {{ btnStopTitle }}
             </b-button>
             <b-button
+                id="btn-build"
                 ref="btnBuild"
                 class="ui-button-default"
-                id="btn-build"
-                @click="_eventBuild"
                 :disabled="!enableBuild"
                 :title="btnBuildTitle"
-                :variant="enableBuild ? 'primary' : ''">
+                :variant="enableBuild ? 'primary' : ''"
+                @click="_eventBuild">
                 {{ btnBuildTitle }}
             </b-button>
             <b-button
+                id="btn-start"
                 ref="btnStart"
                 class="ui-button-default"
-                id="btn-start"
-                @click="_eventStart"
                 :title="btnStartTitle"
                 :disabled="!enableStart"
-                :variant="enableStart ? 'primary' : ''">
+                :variant="enableStart ? 'primary' : ''"
+                @click="_eventStart">
                 {{ btnStartTitle }}
             </b-button>
             <b-button
+                id="btn-new"
                 ref="btnCreate"
                 class="ui-button-default"
-                id="btn-new"
-                @click="_eventCreate()"
                 :title="btnCreateTitle"
-                :disabled="!enableSources">
+                :disabled="!enableSources"
+                @click="_eventCreate()">
                 <span class="fa fa-edit"></span>{{ btnCreateTitle }}
             </b-button>
             <b-button
+                v-if="remoteFiles"
+                id="btn-ftp"
                 ref="btnFtp"
                 class="ui-button-default"
-                id="btn-ftp"
-                @click="_eventRemoteFiles"
                 :disabled="!enableSources"
-                v-if="remoteFiles">
+                @click="_eventRemoteFiles">
                 <span class="fa fa-folder-open-o"></span>{{ btnFilesTitle }}
             </b-button>
             <b-button
+                id="btn-local"
                 ref="btnLocal"
                 class="ui-button-default"
-                id="btn-local"
                 :title="btnLocalTitle"
-                @click="uploadSelect"
-                :disabled="!enableSources">
+                :disabled="!enableSources"
+                @click="uploadSelect">
                 <span class="fa fa-laptop"></span>{{ btnLocalTitle }}
             </b-button>
         </template>
diff --git a/client/src/components/Upload/Composite.vue b/client/src/components/Upload/Composite.vue
index 9548dd457ad..eeb1b58ef9c 100644
--- a/client/src/components/Upload/Composite.vue
+++ b/client/src/components/Upload/Composite.vue
@@ -1,7 +1,7 @@
 <template>
     <upload-wrapper wrapper-class="upload-view-composite">
-        <div class="upload-helper" v-show="showHelper">Select a composite type</div>
-        <table class="upload-table ui-table-striped" v-show="!showHelper" ref="uploadTable">
+        <div v-show="showHelper" class="upload-helper">Select a composite type</div>
+        <table v-show="!showHelper" ref="uploadTable" class="upload-table ui-table-striped">
             <thead>
                 <tr>
                     <th />
@@ -18,15 +18,15 @@
         <template v-slot:footer>
             <span class="upload-footer-title">Composite Type:</span>
             <select2
-                container-class="upload-footer-extension"
                 ref="footerExtension"
                 v-model="extension"
+                container-class="upload-footer-extension"
                 :enabled="!running">
                 <option v-for="(ext, index) in extensions" :key="index" :value="ext.id">{{ ext.text }}</option>
             </select2>
-            <span class="upload-footer-extension-info upload-icon-button fa fa-search" ref="footerExtensionInfo" />
+            <span ref="footerExtensionInfo" class="upload-footer-extension-info upload-icon-button fa fa-search" />
             <span class="upload-footer-title">Genome/Build:</span>
-            <select2 container-class="upload-footer-genome" ref="footerGenome" v-model="genome" :enabled="!running">
+            <select2 ref="footerGenome" v-model="genome" container-class="upload-footer-genome" :enabled="!running">
                 <option v-for="(listGenome, index) in listGenomes" :key="index" :value="listGenome.id">
                     {{ listGenome.text }}
                 </option>
@@ -37,19 +37,19 @@
                 {{ btnCloseTitle | localize }}
             </b-button>
             <b-button
+                id="btn-start"
                 ref="btnStart"
                 class="ui-button-default"
-                @click="_eventStart"
-                id="btn-start"
                 :disabled="!readyStart"
                 :title="btnStartTitle"
-                :variant="readyStart ? 'primary' : ''">
+                :variant="readyStart ? 'primary' : ''"
+                @click="_eventStart">
                 {{ btnStartTitle }}
             </b-button>
             <b-button
+                id="btn-reset"
                 ref="btnReset"
                 class="ui-button-default"
-                id="btn-reset"
                 :title="btnResetTitle"
                 @click="_eventReset">
                 {{ btnResetTitle }}
diff --git a/client/src/components/Upload/Default.vue b/client/src/components/Upload/Default.vue
index 2685554e19a..7e07201f6de 100644
--- a/client/src/components/Upload/Default.vue
+++ b/client/src/components/Upload/Default.vue
@@ -1,7 +1,7 @@
 <template>
     <upload-wrapper ref="wrapper" :top-info="topInfo" :highlight-box="highlightBox">
-        <div class="upload-helper" v-show="showHelper"><i class="fa fa-files-o" />Drop files here</div>
-        <table class="upload-table ui-table-striped" v-show="!showHelper" ref="uploadTable">
+        <div v-show="showHelper" class="upload-helper"><i class="fa fa-files-o" />Drop files here</div>
+        <table v-show="!showHelper" ref="uploadTable" class="upload-table ui-table-striped">
             <thead>
                 <tr>
                     <th>Name</th>
@@ -18,15 +18,15 @@
         <template v-slot:footer>
             <span class="upload-footer-title">Type (set all):</span>
             <select2
-                container-class="upload-footer-extension"
                 ref="footerExtension"
                 v-model="extension"
+                container-class="upload-footer-extension"
                 :enabled="!running">
                 <option v-for="(ext, index) in extensions" :key="index" :value="ext.id">{{ ext.text }}</option>
             </select2>
             <span class="upload-footer-extension-info upload-icon-button fa fa-search" />
             <span class="upload-footer-title">Genome (set all):</span>
-            <select2 container-class="upload-footer-genome" ref="footerGenome" v-model="genome" :enabled="!running">
+            <select2 ref="footerGenome" v-model="genome" container-class="upload-footer-genome" :enabled="!running">
                 <option v-for="(listGenome, index) in listGenomes" :key="index" :value="listGenome.id">
                     {{ listGenome.text }}
                 </option>
@@ -34,66 +34,66 @@
         </template>
         <template v-slot:buttons>
             <b-button
+                id="btn-close"
                 ref="btnClose"
                 class="ui-button-default"
-                id="btn-close"
                 :title="btnCloseTitle"
                 @click="$emit('dismiss')">
                 {{ btnCloseTitle }}
             </b-button>
             <b-button
+                id="btn-reset"
                 ref="btnReset"
                 class="ui-button-default"
-                id="btn-reset"
-                @click="_eventReset"
                 :title="btnResetTitle"
-                :disabled="!enableReset">
+                :disabled="!enableReset"
+                @click="_eventReset">
                 {{ btnResetTitle }}
             </b-button>
             <b-button
+                id="btn-stop"
                 ref="btnStop"
                 class="ui-button-default"
-                id="btn-stop"
-                @click="_eventStop"
                 :title="btnStopTitle"
-                :disabled="counterRunning == 0">
+                :disabled="counterRunning == 0"
+                @click="_eventStop">
                 {{ btnStopTitle }}
             </b-button>
             <b-button
+                id="btn-start"
                 ref="btnStart"
                 class="ui-button-default"
-                id="btn-start"
-                @click="_eventStart"
                 :disabled="!enableStart"
                 :title="btnStartTitle"
-                :variant="enableStart ? 'primary' : ''">
+                :variant="enableStart ? 'primary' : ''"
+                @click="_eventStart">
                 {{ btnStartTitle }}
             </b-button>
             <b-button
+                id="btn-new"
                 ref="btnCreate"
                 class="ui-button-default"
-                id="btn-new"
-                @click="_eventCreate()"
                 :title="btnCreateTitle"
-                :disabled="!enableSources">
+                :disabled="!enableSources"
+                @click="_eventCreate()">
                 <span class="fa fa-edit"></span>{{ btnCreateTitle }}
             </b-button>
             <b-button
+                v-if="remoteFiles"
+                id="btn-ftp"
                 ref="btnFtp"
                 class="ui-button-default"
-                id="btn-ftp"
-                @click="_eventRemoteFiles"
                 :disabled="!enableSources"
-                v-if="remoteFiles">
+                @click="_eventRemoteFiles">
                 <span class="fa fa-folder-open-o"></span>{{ btnFilesTitle }}
             </b-button>
             <b-button
+                id="btn-local"
                 ref="btnLocal"
                 class="ui-button-default"
-                id="btn-local"
                 :title="btnLocalTitle"
-                @click="uploadSelect"
-                :disabled="!enableSources">
+                :disabled="!enableSources"
+                @click="uploadSelect">
                 <span class="fa fa-laptop"></span>{{ btnLocalTitle }}
             </b-button>
         </template>
diff --git a/client/src/components/Upload/RulesInput.vue b/client/src/components/Upload/RulesInput.vue
index 6a357048075..2e50a86fe26 100644
--- a/client/src/components/Upload/RulesInput.vue
+++ b/client/src/components/Upload/RulesInput.vue
@@ -13,7 +13,7 @@
             <div class="upload-rule-option">
                 <div class="upload-rule-option-title">{{ "Load tabular data from" | l }}</div>
                 <div class="rule-select-type">
-                    <select2 container-class="upload-footer-selection" v-model="selectionType">
+                    <select2 v-model="selectionType" container-class="upload-footer-selection">
                         <option value="paste">{{ "Pasted Table" | l }}</option>
                         <option value="dataset">{{ "History Dataset" | l }}</option>
                         <option v-if="ftpUploadSite" value="ftp">{{ "FTP Directory" | l }}</option>
@@ -21,10 +21,10 @@
                     </select2>
                 </div>
             </div>
-            <div id="upload-rule-dataset-option" class="upload-rule-option" v-if="selectionType == 'dataset'">
+            <div v-if="selectionType == 'dataset'" id="upload-rule-dataset-option" class="upload-rule-option">
                 <div class="upload-rule-option-title">History dataset</div>
                 <div>
-                    <b-link @click="onSelectDataset" v-if="selectedDatasetName == null">
+                    <b-link v-if="selectedDatasetName == null" @click="onSelectDataset">
                         {{ "Select" | l }}
                     </b-link>
                     <span v-else>
@@ -35,37 +35,37 @@
         </span>
         <span style="display: inline; float: right; width: 75%; height: 300px">
             <textarea
+                v-model="sourceContent"
                 class="upload-rule-source-content form-control"
                 style="height: 100%"
-                v-model="sourceContent"
                 :disabled="selectionType != 'paste'"></textarea>
         </span>
         <template v-slot:buttons>
             <b-button
+                id="btn-close"
                 ref="btnClose"
                 class="ui-button-default"
-                id="btn-close"
                 :title="btnCloseTitle"
                 @click="$emit('dismiss')">
                 {{ btnCloseTitle | l }}
             </b-button>
             <b-button
+                id="btn-build"
                 ref="btnBuild"
                 class="ui-button-default"
-                id="btn-build"
-                @click="_eventBuild"
                 :disabled="!sourceContent"
                 :title="btnBuildTitle"
-                :variant="sourceContent ? 'primary' : ''">
+                :variant="sourceContent ? 'primary' : ''"
+                @click="_eventBuild">
                 {{ btnBuildTitle | l }}
             </b-button>
             <b-button
+                id="btn-reset"
                 ref="btnReset"
                 class="ui-button-default"
-                id="btn-reset"
-                @click="_eventReset"
                 :title="btnResetTitle"
-                :disabled="!enableReset">
+                :disabled="!enableReset"
+                @click="_eventReset">
                 {{ btnResetTitle | l }}
             </b-button>
         </template>
diff --git a/client/src/components/Upload/UploadButton.vue b/client/src/components/Upload/UploadButton.vue
index 141286c56b8..8abec7db0fe 100644
--- a/client/src/components/Upload/UploadButton.vue
+++ b/client/src/components/Upload/UploadButton.vue
@@ -1,12 +1,12 @@
 <template>
     <b-button
         id="tool-panel-upload-button"
-        @click="showUploadDialog"
         v-b-tooltip.hover.bottom
         :aria-label="title | localize"
         :title="title | localize"
         class="upload-button"
-        size="sm">
+        size="sm"
+        @click="showUploadDialog">
         <div class="progress">
             <div
                 class="progress-bar progress-bar-notransition"
diff --git a/client/src/components/Upload/UploadModal.vue b/client/src/components/Upload/UploadModal.vue
index c4ddec4cce3..106a16bbb5e 100644
--- a/client/src/components/Upload/UploadModal.vue
+++ b/client/src/components/Upload/UploadModal.vue
@@ -5,7 +5,7 @@ Provides user and current history to modal because it currently has initializati
 
 <template>
     <CurrentUser v-slot="{ user }">
-        <UserHistories v-if="user" :user="user" v-slot="{ currentHistoryId }">
+        <UserHistories v-if="user" v-slot="{ currentHistoryId }" :user="user">
             <b-modal
                 v-model="modalShow"
                 :static="modalStatic"
diff --git a/client/src/components/Upload/UploadModalContent.vue b/client/src/components/Upload/UploadModalContent.vue
index 05ef0547951..07e5b430f88 100644
--- a/client/src/components/Upload/UploadModalContent.vue
+++ b/client/src/components/Upload/UploadModalContent.vue
@@ -1,6 +1,6 @@
 <template>
     <b-tabs v-if="ready">
-        <b-tab title="Regular" id="regular" button-id="tab-title-link-regular" v-if="showRegular">
+        <b-tab v-if="showRegular" id="regular" title="Regular" button-id="tab-title-link-regular">
             <default
                 :app="this"
                 :lazy-load-max="50"
@@ -9,13 +9,13 @@
                 :selectable="selectable"
                 v-on="$listeners" />
         </b-tab>
-        <b-tab title="Composite" id="composite" button-id="tab-title-link-composite" v-if="showComposite">
+        <b-tab v-if="showComposite" id="composite" title="Composite" button-id="tab-title-link-composite">
             <composite :app="this" :has-callback="hasCallback" :selectable="selectable" v-on="$listeners" />
         </b-tab>
-        <b-tab title="Collection" id="collection" button-id="tab-title-link-collection" v-if="showCollection">
+        <b-tab v-if="showCollection" id="collection" title="Collection" button-id="tab-title-link-collection">
             <collection :app="this" :has-callback="hasCallback" :selectable="selectable" v-on="$listeners" />
         </b-tab>
-        <b-tab title="Rule-based" id="rule-based" button-id="tab-title-link-rule-based" v-if="showRules">
+        <b-tab v-if="showRules" id="rule-based" title="Rule-based" button-id="tab-title-link-rule-based">
             <rules-input :app="this" :has-callback="hasCallback" :selectable="selectable" v-on="$listeners" />
         </b-tab>
     </b-tabs>
diff --git a/client/src/components/Upload/UploadWrapper.vue b/client/src/components/Upload/UploadWrapper.vue
index 1e4226e24f7..3d05a61b9e8 100644
--- a/client/src/components/Upload/UploadWrapper.vue
+++ b/client/src/components/Upload/UploadWrapper.vue
@@ -4,13 +4,13 @@
         <div class="upload-top">
             <div class="upload-top-info" v-html="topInfo"></div>
         </div>
-        <div class="upload-box" ref="uploadBox" :style="boxStyle" :class="{ highlight: highlightBox }">
+        <div ref="uploadBox" class="upload-box" :style="boxStyle" :class="{ highlight: highlightBox }">
             <slot />
         </div>
-        <div class="upload-footer" v-if="hasFooter">
+        <div v-if="hasFooter" class="upload-footer">
             <slot name="footer" />
         </div>
-        <div class="clear" v-else />
+        <div v-else class="clear" />
         <div class="upload-buttons">
             <slot name="buttons" />
         </div>
diff --git a/client/src/components/User/CloudAuth/CloudAuth.vue b/client/src/components/User/CloudAuth/CloudAuth.vue
index 4a73c34f7cb..cc4a969280c 100644
--- a/client/src/components/User/CloudAuth/CloudAuth.vue
+++ b/client/src/components/User/CloudAuth/CloudAuth.vue
@@ -11,30 +11,30 @@
                     <ul>
                         <li class="cloudKeyHelp">
                             <a
-                                :class="{ active: showHelp }"
-                                @click.prevent="showHelp = !showHelp"
                                 v-b-tooltip.hover
+                                :class="{ active: showHelp }"
                                 aria-label="Instructions"
-                                title="Instructions">
+                                title="Instructions"
+                                @click.prevent="showHelp = !showHelp">
                                 <span>Instructions</span>
                             </a>
                         </li>
                         <li class="cloudKeyFilter">
                             <a
-                                :class="{ active: showFilter }"
-                                @click.prevent="showFilter = !showFilter"
                                 v-b-tooltip.hover
+                                :class="{ active: showFilter }"
                                 aria-label="Filter Results"
-                                title="Filter Results">
+                                title="Filter Results"
+                                @click.prevent="showFilter = !showFilter">
                                 <span>Filter</span>
                             </a>
                         </li>
                         <li class="createCloudKey">
                             <a
-                                @click.prevent="onCreate"
                                 v-b-tooltip.hover
                                 aria-label="Create New Key"
-                                title="Create New Key">
+                                title="Create New Key"
+                                @click.prevent="onCreate">
                                 <span>Create New Key</span>
                             </a>
                         </li>
@@ -51,7 +51,7 @@
             <transition name="fade">
                 <hgroup v-if="showFilter">
                     <b-form-group :description="filterDescription">
-                        <b-form-input type="text" placeholder="Filter" v-model="filter" />
+                        <b-form-input v-model="filter" type="text" placeholder="Filter" />
                     </b-form-group>
                 </hgroup>
             </transition>
@@ -77,10 +77,10 @@
         </div>
 
         <b-modal
-            v-model="hasDoomed"
-            centered
             id="deleteCredentialModal"
             ref="deleteModal"
+            v-model="hasDoomed"
+            centered
             title="Delete Key?"
             size="sm"
             @ok="deleteKey"
diff --git a/client/src/components/User/CloudAuth/CloudAuthItem.vue b/client/src/components/User/CloudAuth/CloudAuthItem.vue
index 22296cbf4ff..f3c3389e15f 100644
--- a/client/src/components/User/CloudAuth/CloudAuthItem.vue
+++ b/client/src/components/User/CloudAuth/CloudAuthItem.vue
@@ -6,31 +6,31 @@
                 <nav class="operations">
                     <ul>
                         <transition name="fade">
-                            <li class="save" v-if="expanded && credential.dirty">
+                            <li v-if="expanded && credential.dirty" class="save">
                                 <a
-                                    @click.prevent="$emit('save', credential)"
                                     v-b-tooltip.hover
                                     aria-label="Save Key"
-                                    title="Save Key">
+                                    title="Save Key"
+                                    @click.prevent="$emit('save', credential)">
                                     <span>Save Key</span>
                                 </a>
                             </li>
                         </transition>
                         <li class="delete">
                             <a
-                                @click.prevent="$emit('delete', credential)"
                                 v-b-tooltip.hover
                                 aria-label="Delete Key"
-                                title="Delete Key">
+                                title="Delete Key"
+                                @click.prevent="$emit('delete', credential)">
                                 <span>Delete Key</span>
                             </a>
                         </li>
                         <li class="details">
                             <a
-                                @click.prevent="expand()"
                                 v-b-tooltip.hover
                                 aria-label="Show Details"
-                                title="Show Details">
+                                title="Show Details"
+                                @click.prevent="expand()">
                                 <span>Details</span>
                             </a>
                         </li>
@@ -42,8 +42,8 @@
         <!-- eslint-disable vue/no-mutating-props-->
         <credential-form
             v-if="expanded"
-            class="border-top"
             v-model="credential"
+            class="border-top"
             @click.self="expand()"
             @save="$emit('save', credential)"
             @delete="$emit('delete', credential)" />
diff --git a/client/src/components/User/CloudAuth/CredentialForm.vue b/client/src/components/User/CloudAuth/CredentialForm.vue
index a40248cdd1c..d66e6efb7e7 100644
--- a/client/src/components/User/CloudAuth/CredentialForm.vue
+++ b/client/src/components/User/CloudAuth/CredentialForm.vue
@@ -12,10 +12,10 @@
 
         <!-- google-openidconnect -->
         <b-form-group
+            v-if="identityProviders.length > 1"
             label="Identity Provider"
             label-for="identityProvider"
-            label-cols-lg="3"
-            v-if="identityProviders.length > 1">
+            label-cols-lg="3">
             <b-form-select
                 id="identityProvider"
                 v-model="credential.authn_id"
diff --git a/client/src/components/User/CustomBuilds.vue b/client/src/components/User/CustomBuilds.vue
index e6a786e301c..579017d1628 100644
--- a/client/src/components/User/CustomBuilds.vue
+++ b/client/src/components/User/CustomBuilds.vue
@@ -10,8 +10,8 @@
                 <b-table small show-empty class="grid" :items="customBuilds" :fields="fields">
                     <template v-slot:cell(action)="row">
                         <a
-                            href="javascript:void(0)"
                             v-b-tooltip.bottom.hover
+                            href="javascript:void(0)"
                             title="Delete build"
                             @click="deleteBuild(row.item.id)">
                             <i class="icon fa fa-lg fa-trash-o" />
@@ -29,13 +29,13 @@
             <b-row>
                 <b-col id="installed-builds" class="mb-4">
                     <multiselect
+                        v-model="selectedInstalledBuilds"
                         multiple
                         taggable
                         label="label"
                         track-by="value"
                         :searchable="false"
-                        :options="installedBuilds"
-                        v-model="selectedInstalledBuilds">
+                        :options="installedBuilds">
                     </multiselect>
                 </b-col>
             </b-row>
@@ -60,16 +60,16 @@
 
                     <b-form @submit.prevent="save">
                         <b-form-group label="Name" description="Specify a build name, e.g. Hamster." label-for="name">
-                            <b-form-input id="name" tour_id="name" v-model="form.name" required />
+                            <b-form-input id="name" v-model="form.name" tour_id="name" required />
                         </b-form-group>
                         <b-form-group label="Key" description="Specify a build key, e.g. hamster_v1." label-for="id">
-                            <b-form-input id="id" tour_id="id" v-model="form.id" required />
+                            <b-form-input id="id" v-model="form.id" tour_id="id" required />
                         </b-form-group>
                         <b-form-group label="Definition" description="Provide the data source." label-for="type">
                             <b-form-select
                                 id="type"
-                                tour_id="type"
                                 v-model="selectedDataSource"
+                                tour_id="type"
                                 :options="dataSources"></b-form-select>
                         </b-form-group>
                         <div>
@@ -82,9 +82,9 @@
                             <b-form-group v-if="selectedDataSource === 'file'" label="Len-file">
                                 <b-form-file placeholder="Choose a file..." @change="readFile" />
                                 <b-progress
+                                    v-show="fileLoaded !== 0"
                                     animated
                                     show-progress
-                                    v-show="fileLoaded !== 0"
                                     :value="fileLoaded"
                                     :max="maxFileSize" />
                                 <b-form-textarea v-show="form.file" :value="form.file" />
@@ -96,9 +96,9 @@
 
                         <b-button
                             id="save"
+                            v-b-tooltip.bottom.hover
                             type="submit"
                             variant="primary"
-                            v-b-tooltip.bottom.hover
                             title="Create new build">
                             <i class="icon fa fa-save" /> Save
                         </b-button>
diff --git a/client/src/components/User/DiskUsage/DiskUsageSummary.vue b/client/src/components/User/DiskUsage/DiskUsageSummary.vue
index 191945bd352..10bae1f747f 100644
--- a/client/src/components/User/DiskUsage/DiskUsageSummary.vue
+++ b/client/src/components/User/DiskUsage/DiskUsageSummary.vue
@@ -13,18 +13,18 @@
                             <QuotaUsageSummary v-else-if="quotaUsages" :quota-usages="quotaUsages" />
                         </QuotaUsageProvider>
                     </b-row>
-                    <h2 v-else class="text-center my-3" id="basic-disk-usage-summary">
+                    <h2 v-else id="basic-disk-usage-summary" class="text-center my-3">
                         You're using <b>{{ getTotalDiskUsage(user) }}</b> of disk space.
                     </h2>
                 </b-container>
                 <b-container class="text-center mb-5 w-75">
                     <button
                         title="Recalculate disk usage"
-                        @click="onRefresh"
                         :disabled="isRecalculating"
                         variant="outline-secondary"
                         size="sm"
-                        pill>
+                        pill
+                        @click="onRefresh">
                         <b-spinner v-if="isRecalculating" small />
                         <span v-else>Refresh</span>
                     </button>
diff --git a/client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue b/client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue
index 368b7b1ad40..21f1145de71 100644
--- a/client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue
+++ b/client/src/components/User/DiskUsage/Management/Cleanup/CleanupOperationSummary.vue
@@ -14,8 +14,8 @@
                     v-else-if="canClearItems"
                     href="#"
                     class="card-link"
-                    @click="onReviewItems"
-                    data-test-id="review-link">
+                    data-test-id="review-link"
+                    @click="onReviewItems">
                     <b>{{ reviewAndClearText }} {{ summary.niceTotalSize }}</b>
                 </b-link>
                 <b v-else class="text-secondary" data-test-id="no-items-indicator">
diff --git a/client/src/components/User/DiskUsage/Management/Cleanup/ReviewCleanupDialog.vue b/client/src/components/User/DiskUsage/Management/Cleanup/ReviewCleanupDialog.vue
index dc99679d73c..f8717ddfa38 100644
--- a/client/src/components/User/DiskUsage/Management/Cleanup/ReviewCleanupDialog.vue
+++ b/client/src/components/User/DiskUsage/Management/Cleanup/ReviewCleanupDialog.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-modal id="review-cleanup-dialog" title-tag="h2" centered @show="onShowModal" v-model="showDialog" static>
+    <b-modal id="review-cleanup-dialog" v-model="showDialog" title-tag="h2" centered static @show="onShowModal">
         <template v-slot:modal-title>
             {{ title }}
             <span class="text-primary h3">{{ totalItems }}<span v-if="rowLimitReached">+</span> items</span>
@@ -18,24 +18,24 @@
             :per-page="perPage"
             :current-page="currentPage"
             :busy="isBusy"
-            @sort-changed="onSort"
             hover
             no-local-sorting
             no-provider-filtering
             sticky-header="50vh"
-            data-test-id="review-table">
+            data-test-id="review-table"
+            @sort-changed="onSort">
             <template v-slot:head(selected)>
                 <b-form-checkbox
                     v-model="allSelected"
                     :indeterminate="indeterminate"
-                    @change="toggleSelectAll"
-                    data-test-id="select-all-checkbox" />
+                    data-test-id="select-all-checkbox"
+                    @change="toggleSelectAll" />
             </template>
             <template v-slot:cell(selected)="data">
                 <b-form-checkbox
+                    :key="data.index"
                     v-model="selectedItems"
                     :checked="allSelected"
-                    :key="data.index"
                     :value="data.item"></b-form-checkbox>
             </template>
             <template v-slot:cell(update_time)="data">
@@ -46,9 +46,9 @@
             <span v-if="rowLimitReached" class="font-italic">{{ rowLimitReachedText }}</span>
             <b-pagination v-if="hasPages" v-model="currentPage" :total-rows="totalRows" :per-page="perPage" />
             <b-button
+                v-b-modal.confirmation-modal
                 :disabled="!hasItemsSelected"
                 :variant="deleteButtonVariant"
-                v-b-modal.confirmation-modal
                 class="mx-2"
                 data-test-id="delete-button">
                 {{ permanentlyDeleteText }} {{ deleteItemsText }}
@@ -62,10 +62,10 @@
             :ok-title="permanentlyDeleteText"
             :ok-variant="confirmButtonVariant"
             :ok-disabled="!confirmChecked"
-            @show="resetConfirmationModal"
-            @ok="onConfirmCleanupSelectedItems"
             static
-            centered>
+            centered
+            @show="resetConfirmationModal"
+            @ok="onConfirmCleanupSelectedItems">
             <b-form-checkbox id="confirm-delete-checkbox" v-model="confirmChecked" data-test-id="agreement-checkbox">
                 {{ agreementText }}
             </b-form-checkbox>
diff --git a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
index 41721c544f3..4bd96d3413d 100644
--- a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
@@ -28,31 +28,31 @@
             </p>
         </header>
 
-        <div class="external-subheading" v-if="items.length">
+        <div v-if="items.length" class="external-subheading">
             <h3>Connected External Identities</h3>
             <b-button
-                @click="onDisconnect(item)"
-                aria-label="Disconnect External Identity"
-                title="Disconnect External Identity"
                 v-for="item in items"
                 :key="item.email"
-                class="d-block mt-3">
+                aria-label="Disconnect External Identity"
+                title="Disconnect External Identity"
+                class="d-block mt-3"
+                @click="onDisconnect(item)">
                 Disconnect {{ item.provider.charAt(0).toUpperCase() + item.provider.slice(1) }} - {{ item.email }}
             </b-button>
 
             <b-modal
-                centered
                 id="disconnectIDModal"
                 ref="deleteModal"
+                centered
                 title="Disconnect Identity?"
                 size="sm"
                 @ok="disconnectID"
                 @cancel="doomedItem = null"></b-modal>
 
             <b-modal
-                centered
                 id="disconnectAndResetModal"
                 ref="deleteAndResetModal"
+                centered
                 title="Deleting last external identity"
                 @ok="disconnectAndReset"
                 @cancel="doomedItem = null">
@@ -74,7 +74,7 @@
             >
         </div>
 
-        <div class="external-subheading" v-if="enable_oidc">
+        <div v-if="enable_oidc" class="external-subheading">
             <h3>Connect Other External Identities</h3>
             <external-login :login_page="false" />
         </div>
diff --git a/client/src/components/User/ExternalIdentities/ExternalLogin.vue b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
index 1e3ebf66118..37f5de7130a 100644
--- a/client/src/components/User/ExternalIdentities/ExternalLogin.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
@@ -4,13 +4,13 @@
         <b-form id="externalLogin">
             <!-- OIDC login-->
             <hr class="my-4" />
-            <div class="cilogon" v-if="cilogonListShow">
+            <div v-if="cilogonListShow" class="cilogon">
                 <div v-if="login_page">
                     <!--Only Display if CILogon/Custos is configured-->
                     <b-form-group label="Use existing institutional login">
                         <multiselect
-                            placeholder="Select your institution"
                             v-model="selected"
+                            placeholder="Select your institution"
                             :options="cilogon_idps"
                             label="DisplayName"
                             track-by="EntityID">
@@ -23,14 +23,14 @@
                         </b-form-checkbox>
                     </b-form-group>
 
-                    <b-button v-if="cilogon_enabled" @click="submitCILogon('cilogon')" :disabled="selected === null"
+                    <b-button v-if="cilogon_enabled" :disabled="selected === null" @click="submitCILogon('cilogon')"
                         >Sign in with Institutional Credentials*</b-button
                     >
                     <!--convert to v-else-if to allow only one or the other. if both enabled, put the one that should be default first-->
                     <b-button
                         v-if="Object.prototype.hasOwnProperty.call(oidc_idps, 'custos')"
-                        @click="submitCILogon('custos')"
                         :disabled="selected === null"
+                        @click="submitCILogon('custos')"
                         >Sign in with Custos*</b-button
                     >
                 </div>
@@ -44,8 +44,8 @@
 
                     <b-form-group v-if="toggle_cilogon">
                         <multiselect
-                            placeholder="Select your institution"
                             v-model="selected"
+                            placeholder="Select your institution"
                             :options="cilogon_idps"
                             label="DisplayName"
                             track-by="EntityID">
@@ -53,8 +53,8 @@
 
                         <b-button
                             v-if="toggle_cilogon"
-                            @click="submitCILogon(cilogonOrCustos)"
                             :disabled="selected === null"
+                            @click="submitCILogon(cilogonOrCustos)"
                             >Login*</b-button
                         >
                     </b-form-group>
diff --git a/client/src/components/User/UserPreferences.vue b/client/src/components/User/UserPreferences.vue
index a27e5ff70bf..7a6f03e37de 100644
--- a/client/src/components/User/UserPreferences.vue
+++ b/client/src/components/User/UserPreferences.vue
@@ -8,13 +8,13 @@
             {{ titleLoggedInAs }} <strong id="user-preferences-current-email">{{ email }}</strong
             >.
         </p>
-        <b-row class="ml-3 mb-1" v-for="(link, index) in activeLinks" :key="index">
+        <b-row v-for="(link, index) in activeLinks" :key="index" class="ml-3 mb-1">
             <i :class="['pref-icon pt-1 fa fa-lg', link.icon]" />
             <div class="pref-content pr-1">
-                <a :id="link.id" v-if="link.onclick" @click="link.onclick" href="javascript:void(0)"
+                <a v-if="link.onclick" :id="link.id" href="javascript:void(0)" @click="link.onclick"
                     ><b>{{ link.title }}</b></a
                 >
-                <a :id="link.id" v-else :href="`${baseUrl}/${link.action}`"
+                <a v-else :id="link.id" :href="`${baseUrl}/${link.action}`"
                     ><b>{{ link.title }}</b></a
                 >
                 <div class="form-text text-muted">
@@ -25,8 +25,8 @@
         <b-row class="ml-3 mb-1">
             <i class="pref-icon pt-1 fa fa-lg fa-plus-square-o" />
             <div class="pref-content pr-1">
-                <a @click="toggleNotifications" href="javascript:void(0)"><b v-localize>Enable notifications</b></a>
-                <div class="form-text text-muted" v-localize>
+                <a href="javascript:void(0)" @click="toggleNotifications"><b v-localize>Enable notifications</b></a>
+                <div v-localize class="form-text text-muted">
                     Allow push and tab notifcations on job completion. To disable, revoke the site notification
                     privilege in your browser.
                 </div>
@@ -39,11 +39,11 @@
                     <a id="delete-account" href="javascript:void(0)"
                         ><b v-b-modal.modal-prevent-closing v-localize>Delete Account</b></a
                     >
-                    <div class="form-text text-muted" v-localize>Delete your account on this Galaxy server.</div>
+                    <div v-localize class="form-text text-muted">Delete your account on this Galaxy server.</div>
                     <b-modal
                         id="modal-prevent-closing"
-                        centered
                         ref="modal"
+                        centered
                         title="Account Deletion"
                         title-tag="h2"
                         @show="resetModal"
diff --git a/client/src/components/Visualizations/PluginList.vue b/client/src/components/Visualizations/PluginList.vue
index d945e817588..06908acc069 100644
--- a/client/src/components/Visualizations/PluginList.vue
+++ b/client/src/components/Visualizations/PluginList.vue
@@ -30,7 +30,7 @@
                             <div v-if="hdas && hdas.length > 0">
                                 <div class="font-weight-bold">{{ titleSelectDataset }}</div>
                                 <div class="ui-select">
-                                    <select class="select" v-model="selected">
+                                    <select v-model="selected" class="select">
                                         <option v-for="file in hdas" :key="file.id" :value="file.id">
                                             {{ file.name }}
                                         </option>
@@ -45,7 +45,7 @@
                                     <span class="title">{{ titleCreateVisualization }}</span>
                                 </button>
                             </div>
-                            <div v-else class="alert alert-danger" v-localize>
+                            <div v-else v-localize class="alert alert-danger">
                                 There is no suitable dataset in your current history which can be visualized with this
                                 plugin.
                             </div>
diff --git a/client/src/components/Workflow/Editor/Forms/FormDefault.vue b/client/src/components/Workflow/Editor/Forms/FormDefault.vue
index 0c80cbe325c..5434c434f0c 100644
--- a/client/src/components/Workflow/Editor/Forms/FormDefault.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormDefault.vue
@@ -3,23 +3,23 @@
         <template v-slot:operations>
             <b-button
                 v-if="isSubworkflow"
+                v-b-tooltip.hover
                 role="button"
                 title="Edit this Subworkflow. You will need to upgrade this Workflow Step afterwards."
                 variant="link"
                 size="sm"
                 class="float-right py-0 px-1"
-                v-b-tooltip.hover
                 @click="onEditSubworkflow">
                 <span class="fa fa-pencil-alt" />
             </b-button>
             <b-button
                 v-if="isSubworkflow"
+                v-b-tooltip.hover
                 role="button"
                 title="Upgrade this Workflow Step to latest Subworkflow version."
                 variant="link"
                 size="sm"
                 class="float-right py-0 px-1"
-                v-b-tooltip.hover
                 @click="onUpgradeSubworkflow">
                 <span class="fa fa-sync" />
             </b-button>
@@ -30,8 +30,8 @@
                 :value="node.label"
                 title="Label"
                 help="Add a step label."
-                @input="onLabel"
-                :error="errorLabel" />
+                :error="errorLabel"
+                @input="onLabel" />
             <FormElement
                 id="__annotation"
                 :value="node.annotation"
diff --git a/client/src/components/Workflow/Editor/Forms/FormTool.vue b/client/src/components/Workflow/Editor/Forms/FormTool.vue
index f261ff8eb3c..f16cf193e49 100644
--- a/client/src/components/Workflow/Editor/Forms/FormTool.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormTool.vue
@@ -18,8 +18,8 @@
                     :value="node.label"
                     title="Label"
                     help="Add a step label."
-                    @input="onLabel"
-                    :error="errorLabel" />
+                    :error="errorLabel"
+                    @input="onLabel" />
                 <FormElement
                     id="__annotation"
                     :value="node.annotation"
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 0193862654a..4ea246580cb 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -23,10 +23,10 @@
             <template v-slot:buttons>
                 <b-button
                     id="workflow-canvas-button"
+                    v-b-tooltip.hover.bottom
                     title="Return to Workflow"
                     variant="link"
                     role="button"
-                    v-b-tooltip.hover.bottom
                     @click="onEdit">
                     <span class="fa fa-times" />
                 </b-button>
@@ -56,25 +56,25 @@
                     <ZoomControl v-if="!checkWheeled" :zoom-level="zoomLevel" @onZoom="onZoom" />
                     <b-button
                         v-else
+                        v-b-tooltip.hover
                         class="reset-wheel"
-                        @click="resetWheel"
                         variant="light"
                         title="Show Zoom Buttons"
                         size="sm"
                         aria-label="Show Zoom Buttons"
-                        v-b-tooltip.hover>
+                        @click="resetWheel">
                         Zoom Controls
                     </b-button>
                     <div id="canvas-viewport">
-                        <div ref="canvas" id="canvas-container">
+                        <div id="canvas-container" ref="canvas">
                             <WorkflowNode
                                 v-for="(step, key) in steps"
                                 :id="key"
+                                :key="key"
                                 :name="step.name"
                                 :type="step.type"
                                 :content-id="step.content_id"
                                 :step="step"
-                                :key="key"
                                 :datatypes-mapper="datatypesMapper"
                                 :get-manager="getManager"
                                 :get-canvas-manager="getCanvasManager"
@@ -90,7 +90,7 @@
                     <div class="workflow-overview" aria-hidden="true">
                         <div class="workflow-overview-body">
                             <div id="overview-container">
-                                <canvas width="0" height="0" id="overview-canvas" />
+                                <canvas id="overview-canvas" width="0" height="0" />
                                 <div id="overview-viewport" />
                             </div>
                         </div>
@@ -116,7 +116,7 @@
                                     @onUpgrade="onUpgrade" />
                             </div>
                         </div>
-                        <div class="unified-panel-body workflow-right" ref="right-panel">
+                        <div ref="right-panel" class="unified-panel-body workflow-right">
                             <div class="m-2">
                                 <FormTool
                                     v-if="hasActiveNodeTool"
diff --git a/client/src/components/Workflow/Editor/Lint.vue b/client/src/components/Workflow/Editor/Lint.vue
index 6a29eb00559..f4920f86bd0 100644
--- a/client/src/components/Workflow/Editor/Lint.vue
+++ b/client/src/components/Workflow/Editor/Lint.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-card header-tag="header" body-class="p-0" id="lint-panel" class="right-content">
+    <b-card id="lint-panel" header-tag="header" body-class="p-0" class="right-content">
         <template v-slot:header>
             <div class="mb-1 font-weight-bold">
                 <font-awesome-icon icon="magic" class="mr-1" />
diff --git a/client/src/components/Workflow/Editor/LintSection.vue b/client/src/components/Workflow/Editor/LintSection.vue
index 260024109a3..7ff7e19aa47 100644
--- a/client/src/components/Workflow/Editor/LintSection.vue
+++ b/client/src/components/Workflow/Editor/LintSection.vue
@@ -11,10 +11,10 @@
                 <div
                     v-for="(item, idx) in warningItems"
                     :key="idx"
+                    class="ml-2"
                     @mouseover="onMouseOver(item)"
-                    @mouseleave="onMouseLeave(item)"
-                    class="ml-2">
-                    <a href="#" @click="onClick(item)" class="scrolls">
+                    @mouseleave="onMouseLeave(item)">
+                    <a href="#" class="scrolls" @click="onClick(item)">
                         <font-awesome-icon v-if="item.autofix" icon="magic" class="mr-1" />
                         <font-awesome-icon v-else icon="search" class="mr-1" />
                         {{ item.stepLabel }}: {{ item.warningLabel }}
diff --git a/client/src/components/Workflow/Editor/MessagesModal.vue b/client/src/components/Workflow/Editor/MessagesModal.vue
index 955c8085c71..34dd854ceb0 100644
--- a/client/src/components/Workflow/Editor/MessagesModal.vue
+++ b/client/src/components/Workflow/Editor/MessagesModal.vue
@@ -3,12 +3,12 @@
         v-model="show"
         :title="title"
         scrollable
-        @ok="onOk"
         :hide-header-close="true"
         :no-close-on-esc="!error"
         :no-close-on-backdrop="!error"
         :hide-footer="!error"
         ok-only
+        @ok="onOk"
         @hidden="onHidden">
         <div class="workflow-message-modal">
             <div v-if="message == 'progress'">
diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue
index 8c05325f25d..95d9ea93d62 100644
--- a/client/src/components/Workflow/Editor/Node.vue
+++ b/client/src/components/Workflow/Editor/Node.vue
@@ -6,18 +6,18 @@
         :class="{ 'workflow-node': true, 'node-on-scroll-to': scrolledTo, 'node-highlight': highlight }">
         <div class="node-header unselectable clearfix">
             <b-button
+                v-b-tooltip.hover
                 class="node-destroy py-0 float-right"
                 variant="primary"
                 size="sm"
                 aria-label="destroy node"
-                v-b-tooltip.hover
                 title="Remove"
                 @click="onRemove">
                 <i class="fa fa-times" />
             </b-button>
             <b-button
-                :id="popoverId"
                 v-if="isEnabled"
+                :id="popoverId"
                 class="node-recommendations py-0 float-right"
                 variant="primary"
                 size="sm"
@@ -33,11 +33,11 @@
             </b-popover>
             <b-button
                 v-if="canClone"
+                v-b-tooltip.hover
                 class="node-clone py-0 float-right"
                 variant="primary"
                 size="sm"
                 aria-label="clone node"
-                v-b-tooltip.hover
                 title="Duplicate"
                 @click="onClone">
                 <i class="fa fa-files-o" />
diff --git a/client/src/components/Workflow/Editor/NodeInput.vue b/client/src/components/Workflow/Editor/NodeInput.vue
index eb148dfe078..eabe07a0f26 100644
--- a/client/src/components/Workflow/Editor/NodeInput.vue
+++ b/client/src/components/Workflow/Editor/NodeInput.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="form-row dataRow input-data-row" @mouseover="mouseOver" @mouseleave="mouseLeave">
-        <div :id="id" :input-name="input.name" ref="terminal" :class="terminalClass">
+        <div :id="id" ref="terminal" :input-name="input.name" :class="terminalClass">
             <div class="icon" />
         </div>
         <div v-if="showRemove" class="delete-terminal" @click="onRemove" />
diff --git a/client/src/components/Workflow/Editor/NodeOutput.vue b/client/src/components/Workflow/Editor/NodeOutput.vue
index 2c72b234a40..cfa11eb3490 100644
--- a/client/src/components/Workflow/Editor/NodeOutput.vue
+++ b/client/src/components/Workflow/Editor/NodeOutput.vue
@@ -2,14 +2,14 @@
     <div class="form-row dataRow output-data-row">
         <div
             v-if="showCallout"
-            :class="['callout-terminal', output.name]"
-            @click="onToggle"
             v-b-tooltip
-            title="Unchecked outputs will be hidden and are not available as subworkflow outputs.">
+            :class="['callout-terminal', output.name]"
+            title="Unchecked outputs will be hidden and are not available as subworkflow outputs."
+            @click="onToggle">
             <i :class="['mark-terminal', activeClass]" />
         </div>
         {{ label }}
-        <div :id="id" :output-name="output.name" ref="terminal" :class="terminalClass">
+        <div :id="id" ref="terminal" :output-name="output.name" :class="terminalClass">
             <div class="icon" />
         </div>
     </div>
diff --git a/client/src/components/Workflow/Editor/Options.vue b/client/src/components/Workflow/Editor/Options.vue
index 326bf19b628..4a5d26f8226 100644
--- a/client/src/components/Workflow/Editor/Options.vue
+++ b/client/src/components/Workflow/Editor/Options.vue
@@ -2,16 +2,16 @@
     <div class="panel-header-buttons">
         <b-button
             id="workflow-home-button"
+            v-b-tooltip.hover
             role="button"
             title="Edit Attributes"
             variant="link"
             aria-label="Edit Attributes"
             class="editor-button-attributes"
-            v-b-tooltip.hover
             @click="$emit('onAttributes')">
             <span class="fa fa-pencil-alt" />
         </b-button>
-        <b-button-group class="editor-button-save-group" v-b-tooltip title="Save Workflow">
+        <b-button-group v-b-tooltip class="editor-button-save-group" title="Save Workflow">
             <b-button
                 id="workflow-save-button"
                 role="button"
@@ -25,25 +25,25 @@
         </b-button-group>
         <b-button
             id="workflow-report-button"
+            v-b-tooltip.hover
             role="button"
             title="Edit Report"
             variant="link"
             aria-label="Edit Report"
             class="editor-button-report"
-            v-b-tooltip.hover
             @click="$emit('onReport')">
             <span class="fa fa-edit" />
         </b-button>
         <b-dropdown
+            id="workflow-options-button"
+            v-b-tooltip.hover
             no-caret
             right
-            id="workflow-options-button"
             role="button"
             title="Workflow Options"
             variant="link"
             aria-label="Workflow Options"
-            class="editor-button-options"
-            v-b-tooltip.hover>
+            class="editor-button-options">
             <template v-slot:button-content>
                 <span class="fa fa-cog" />
             </template>
@@ -65,12 +65,12 @@
         </b-dropdown>
         <b-button
             id="workflow-run-button"
+            v-b-tooltip.hover
             role="button"
             title="Run Workflow"
             variant="link"
             aria-label="Run Workflow"
             class="editor-button-run"
-            v-b-tooltip.hover
             @click="$emit('onRun')">
             <span class="fa fa-play" />
         </b-button>
diff --git a/client/src/components/Workflow/Editor/Recommendations.vue b/client/src/components/Workflow/Editor/Recommendations.vue
index 6b88bab873e..895d32c7b50 100644
--- a/client/src/components/Workflow/Editor/Recommendations.vue
+++ b/client/src/components/Workflow/Editor/Recommendations.vue
@@ -7,7 +7,7 @@
         <div v-if="compatibleTools.length > 0 && !isDeprecated">
             <div v-for="tool in compatibleTools" :key="tool.id">
                 <i class="fa mr-1 fa-wrench"></i>
-                <a href="#" title="Open tool" :id="tool.id" @click="$emit('onCreate', tool.id, tool.name, $event)">{{
+                <a :id="tool.id" href="#" title="Open tool" @click="$emit('onCreate', tool.id, tool.name, $event)">{{
                     tool.name
                 }}</a>
             </div>
diff --git a/client/src/components/Workflow/Editor/ZoomControl.vue b/client/src/components/Workflow/Editor/ZoomControl.vue
index fc899e9959b..7c9e98c96c2 100644
--- a/client/src/components/Workflow/Editor/ZoomControl.vue
+++ b/client/src/components/Workflow/Editor/ZoomControl.vue
@@ -1,31 +1,31 @@
 <template>
     <span class="zoom-control float-right btn-group-horizontal">
         <b-button
+            v-b-tooltip.hover
             role="button"
             class="fa fa-minus"
             title="Zoom Out"
             size="sm"
             aria-label="Zoom Out"
-            v-b-tooltip.hover
             @click="onZoomOut" />
         <b-button
+            v-b-tooltip.hover
             role="button"
             class="zoom-reset"
             variant="light"
             title="Reset Zoom Level"
             size="sm"
             aria-label="Reset Zoom Level"
-            v-b-tooltip.hover
             @click="onZoomReset">
             {{ this.zoomPercentage }}%
         </b-button>
         <b-button
+            v-b-tooltip.hover
             role="button"
             class="fa fa-plus"
             title="Zoom In"
             size="sm"
             aria-label="Zoom In"
-            v-b-tooltip.hover
             @click="onZoomIn" />
     </span>
 </template>
diff --git a/client/src/components/Workflow/Invocations.vue b/client/src/components/Workflow/Invocations.vue
index 996af50532d..6273de5e433 100644
--- a/client/src/components/Workflow/Invocations.vue
+++ b/client/src/components/Workflow/Invocations.vue
@@ -3,14 +3,14 @@
         <h2 class="mb-3">
             <span id="invocations-title">Workflow Invocations</span>
         </h2>
-        <b-alert variant="info" show v-if="headerMessage">
+        <b-alert v-if="headerMessage" variant="info" show>
             {{ headerMessage }}
         </b-alert>
         <b-table
             id="invocation-list-table"
+            v-model="invocationItemsModel"
             :fields="invocationFields"
             :items="provider"
-            v-model="invocationItemsModel"
             :per-page="perPage"
             :current-page="currentPage"
             hover
@@ -34,16 +34,16 @@
             </template>
             <template v-slot:cell(expand)="data">
                 <b-link
+                    v-if="!data.detailsShowing"
                     v-b-tooltip.hover.top
                     title="Show Invocation Details"
                     class="btn-sm fa fa-chevron-down toggle-invocation-details"
-                    v-if="!data.detailsShowing"
                     @click.stop="swapRowDetails(data)" />
                 <b-link
+                    v-if="data.detailsShowing"
                     v-b-tooltip.hover.top
                     title="Hide Invocation Details"
                     class="btn-sm fa fa-chevron-up toggle-invocation-details"
-                    v-if="data.detailsShowing"
                     @click.stop="swapRowDetails(data)" />
             </template>
             <template v-slot:cell(workflow_id)="data">
@@ -71,8 +71,8 @@
             </template>
             <template v-slot:cell(execute)="data">
                 <b-button
-                    v-b-tooltip.hover.bottom
                     id="run-workflow"
+                    v-b-tooltip.hover.bottom
                     title="Run Workflow"
                     class="workflow-run btn-sm btn-primary fa fa-play"
                     @click.stop="executeWorkflow(getWorkflowByInstanceId(data.item.workflow_id).id)" />
diff --git a/client/src/components/Workflow/Run/WorkflowRun.vue b/client/src/components/Workflow/Run/WorkflowRun.vue
index 218125cc5fa..3d630fe7dec 100644
--- a/client/src/components/Workflow/Run/WorkflowRun.vue
+++ b/client/src/components/Workflow/Run/WorkflowRun.vue
@@ -1,6 +1,6 @@
 <template>
     <span>
-        <b-alert variant="danger" show v-if="error">
+        <b-alert v-if="error" variant="danger" show>
             <h5>Workflow cannot be executed. Please resolve the following issue:</h5>
             {{ error }}
         </b-alert>
diff --git a/client/src/components/Workflow/Run/WorkflowRunForm.vue b/client/src/components/Workflow/Run/WorkflowRunForm.vue
index e0c31cc5a6f..064ab9e9a31 100644
--- a/client/src/components/Workflow/Run/WorkflowRunForm.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunForm.vue
@@ -1,6 +1,6 @@
 <template>
     <CurrentUser v-slot="{ user }">
-        <UserHistories v-if="user" :user="user" v-slot="{ currentHistoryId }">
+        <UserHistories v-if="user" v-slot="{ currentHistoryId }" :user="user">
             <div v-if="currentHistoryId" class="workflow-expanded-form">
                 <div class="h4 clearfix mb-3">
                     <b>Workflow: {{ model.name }}</b>
@@ -24,10 +24,10 @@
                 <FormCard v-if="reuseAllowed(user)" title="Job re-use Options">
                     <template v-slot:body>
                         <FormElement
+                            v-model="useCachedJobs"
                             title="Attempt to re-use jobs with identical parameters?"
                             help="This may skip executing jobs that you have already run."
-                            type="boolean"
-                            v-model="useCachedJobs" />
+                            type="boolean" />
                     </template>
                 </FormCard>
                 <FormCard v-if="resourceInputsAvailable" title="Workflow Resource Options">
diff --git a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
index 9a9806c6c35..adc53c4d7c9 100644
--- a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
@@ -3,14 +3,14 @@
         <div>
             <div class="h4 clearfix mb-3">
                 <b>Workflow: {{ model.name }}</b>
-                <ButtonSpinner class="float-right" title="Run Workflow" id="run-workflow" @onClick="onExecute" />
+                <ButtonSpinner id="run-workflow" class="float-right" title="Run Workflow" @onClick="onExecute" />
                 <b-dropdown
+                    v-if="showRuntimeSettings(user)"
+                    id="dropdown-form"
+                    ref="dropdown"
                     class="workflow-run-settings float-right"
                     style="margin-right: 10px"
-                    id="dropdown-form"
                     title="Workflow Run Settings"
-                    ref="dropdown"
-                    v-if="showRuntimeSettings(user)"
                     no-caret>
                     <template v-slot:button-content>
                         <span class="fa fa-cog" />
@@ -21,8 +21,8 @@
                         >
                         <b-form-checkbox
                             v-if="reuseAllowed(user)"
-                            title="This may skip executing jobs that you have already run."
                             v-model="useCachedJobs"
+                            title="This may skip executing jobs that you have already run."
                             >Attempt to re-use jobs with identical parameters?</b-form-checkbox
                         >
                     </b-dropdown-form>
diff --git a/client/src/components/Workflow/TrsImport.vue b/client/src/components/Workflow/TrsImport.vue
index 483f482bcf6..5b3722a1edc 100644
--- a/client/src/components/Workflow/TrsImport.vue
+++ b/client/src/components/Workflow/TrsImport.vue
@@ -17,9 +17,9 @@
             <div v-else>
                 <div>
                     <b>TRS ID:</b>
-                    <b-form-input v-model="debouncedToolId" id="trs-id-input" />
+                    <b-form-input id="trs-id-input" v-model="debouncedToolId" />
                 </div>
-                <trs-tool :trs-tool="trsTool" v-if="trsTool" @onImport="importVersion(trsTool.id, $event)" />
+                <trs-tool v-if="trsTool" :trs-tool="trsTool" @onImport="importVersion(trsTool.id, $event)" />
             </div>
         </b-card>
         <b-alert v-else show variant="danger" class="text-center my-2"
diff --git a/client/src/components/Workflow/TrsSearch.vue b/client/src/components/Workflow/TrsSearch.vue
index 755ec44ce9d..4e3db38125e 100644
--- a/client/src/components/Workflow/TrsSearch.vue
+++ b/client/src/components/Workflow/TrsSearch.vue
@@ -11,10 +11,10 @@
         <div>
             <!-- <b>Search by workflow description:</b> -->
             <b-input-group class="mb-3">
-                <b-input id="trs-search-query" placeholder="search query" v-model="query" @keydown.esc="query = ''" />
+                <b-input id="trs-search-query" v-model="query" placeholder="search query" @keydown.esc="query = ''" />
                 <b-input-group-append>
                     <b-btn>
-                        <i class="fa fa-question" v-b-popover.bottom="searchHelp" title="Search Help" />
+                        <i v-b-popover.bottom="searchHelp" class="fa fa-question" title="Search Help" />
                     </b-btn>
                     <b-btn v-b-tooltip.hover title="clear search" @click="query = ''">
                         <i class="fa fa-times" />
@@ -37,8 +37,8 @@
                 hover
                 striped
                 caption-top
-                @row-clicked="showRowDetails"
-                :busy="searching">
+                :busy="searching"
+                @row-clicked="showRowDetails">
                 <template v-slot:row-details="row">
                     <b-card>
                         <trs-tool :trs-tool="row.item.data" @onImport="importVersion(row.item.data.id, $event)" />
diff --git a/client/src/components/Workflow/WorkflowImport.vue b/client/src/components/Workflow/WorkflowImport.vue
index 46bd073ca97..722aa5bd0fb 100644
--- a/client/src/components/Workflow/WorkflowImport.vue
+++ b/client/src/components/Workflow/WorkflowImport.vue
@@ -4,7 +4,7 @@
             <b-alert :show="hasErrorMessage" variant="danger">{{ errorMessage }}</b-alert>
             <p>Please provide a Galaxy workflow export URL or a workflow file.</p>
             <b-form-group label="Archived Workflow URL">
-                <b-form-input id="workflow-import-url-input" type="url" v-model="sourceURL" />
+                <b-form-input id="workflow-import-url-input" v-model="sourceURL" type="url" />
                 If the workflow is accessible via a URL, enter the URL above and click Import.
             </b-form-group>
             <b-form-group label="Archived Workflow File">
diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index a65bb3133c5..7476f2761d6 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -12,12 +12,12 @@
                     <b-col cols="6">
                         <b-input
                             id="workflow-search"
+                            v-model="filter"
                             class="m-1"
                             name="query"
                             :placeholder="titleSearchWorkflows"
                             autocomplete="off"
-                            type="text"
-                            v-model="filter" />
+                            type="text" />
                     </b-col>
                     <b-col>
                         <span class="float-right">
@@ -56,10 +56,10 @@
                         <font-awesome-icon v-if="row.item.shared" v-b-tooltip.hover title="Shared" icon="share-alt" />
                     </template>
                     <template v-slot:cell(show_in_tool_panel)="row">
-                        <b-link @click="bookmarkWorkflow(row.item, false)" v-if="row.item.show_in_tool_panel">
+                        <b-link v-if="row.item.show_in_tool_panel" @click="bookmarkWorkflow(row.item, false)">
                             <font-awesome-icon :icon="['fas', 'star']" />
                         </b-link>
-                        <b-link @click="bookmarkWorkflow(row.item, true)" v-else>
+                        <b-link v-else @click="bookmarkWorkflow(row.item, true)">
                             <font-awesome-icon :icon="['far', 'star']" />
                         </b-link>
                     </template>
diff --git a/client/src/components/WorkflowInvocationState/JobStep.vue b/client/src/components/WorkflowInvocationState/JobStep.vue
index 2f6ff2c3e62..9c458c19662 100644
--- a/client/src/components/WorkflowInvocationState/JobStep.vue
+++ b/client/src/components/WorkflowInvocationState/JobStep.vue
@@ -5,7 +5,7 @@
                 <job-provider :id="row.item.id" v-slot="{ item, loading }">
                     <div v-if="loading"><b-spinner label="Loading Job..."></b-spinner></div>
                     <div v-else>
-                        <job-information :job_id="item.id" v-if="item" />
+                        <job-information v-if="item" :job_id="item.id" />
                         <p></p>
                         <job-parameters v-if="item" :job-id="item.id" :include-title="false" />
                     </div>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
index 2877ba03c59..f1359efb173 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
@@ -41,9 +41,9 @@
                 <summary><b>Steps</b></summary>
                 <workflow-invocation-step
                     v-for="step in Object.values(workflow.steps)"
+                    :key="step.id"
                     :invocation="invocation"
                     :ordered-steps="orderedSteps"
-                    :key="step.id"
                     :workflow="workflow"
                     :workflow-step="step" />
             </details>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index dc28a0bc158..78f4dc214d5 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -6,9 +6,9 @@
                     ><b>View Report {{ indexStr }}</b></a
                 >
                 <a
+                    v-b-tooltip
                     class="fa fa-print ml-1 invocation-pdf-link"
                     :href="invocationPdfLink"
-                    v-b-tooltip
                     title="Download PDF" />
             </span>
         </div>
@@ -16,9 +16,9 @@
             <span class="fa fa-spinner fa-spin" />
             <span>Invocation {{ indexStr }}...</span>
             <span
-                class="fa fa-times cancel-workflow-scheduling"
                 v-if="!invocationSchedulingTerminal"
                 v-b-tooltip.hover
+                class="fa fa-times cancel-workflow-scheduling"
                 title="Cancel scheduling of workflow invocation"
                 @click="cancelWorkflowScheduling"></span>
         </div>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index c7b35ab9c66..18e4ba2a7c7 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -7,12 +7,12 @@
                     <u class="step-title">{{ stepLabel }}</u>
                 </span>
             </div>
-            <div class="portlet-content" v-if="expanded">
+            <div v-if="expanded" class="portlet-content">
                 <InvocationStepProvider
                     v-if="isReady && invocationStepId !== undefined"
                     :id="invocationStepId"
-                    auto-refresh
-                    v-slot="{ result: stepDetails, loading }">
+                    v-slot="{ result: stepDetails, loading }"
+                    auto-refresh>
                     <div style="min-width: 1">
                         <loading-span v-if="loading" :message="`Loading invocation step details`"> </loading-span>
                         <div v-else>
diff --git a/client/src/components/admin/BaseList.vue b/client/src/components/admin/BaseList.vue
index 1a9d07ffa7b..45a072e9e9a 100644
--- a/client/src/components/admin/BaseList.vue
+++ b/client/src/components/admin/BaseList.vue
@@ -6,9 +6,9 @@
             <b-button
                 size="sm"
                 :disabled="busy"
-                @click.prevent="executeAll()"
                 :title="tooltipAll"
-                data-placement="bottom">
+                data-placement="bottom"
+                @click.prevent="executeAll()">
                 <span :class="icon" />
             </b-button>
             {{ plural }} available.
diff --git a/client/src/components/admin/DataManager/DataManager.vue b/client/src/components/admin/DataManager/DataManager.vue
index a2ca8106006..be4d3a00b16 100644
--- a/client/src/components/admin/DataManager/DataManager.vue
+++ b/client/src/components/admin/DataManager/DataManager.vue
@@ -28,26 +28,26 @@
                 </b-row>
             </b-container>
             <b-card-group columns>
-                <b-card no-body header="Installed Data Managers" id="data-managers-card">
+                <b-card id="data-managers-card" no-body header="Installed Data Managers">
                     <b-list-group flush>
                         <b-list-group-item v-for="(dataManager, index) in dataManagersFiltered" :key="index">
                             <b-button-group vertical>
                                 <b-button
+                                    :id="kebabCase(dataManager['name'])"
                                     :href="dataManager['toolUrl']"
                                     target="_blank"
-                                    variant="primary"
-                                    :id="kebabCase(dataManager['name'])">
+                                    variant="primary">
                                     <div>{{ dataManager["name"] }}</div>
                                     <div v-if="dataManager['description']">
                                         <i>{{ dataManager["description"] }}</i>
                                     </div>
                                 </b-button>
                                 <b-button
+                                    :id="kebabCase(dataManager['name']) + '-jobs'"
                                     :to="{
                                         name: 'DataManagerJobs',
                                         params: { id: encodeURIComponent(dataManager['id']) },
-                                    }"
-                                    :id="kebabCase(dataManager['name']) + '-jobs'">
+                                    }">
                                     Jobs
                                 </b-button>
                             </b-button-group>
@@ -58,9 +58,9 @@
                     <b-list-group flush>
                         <b-list-group-item
                             v-for="(dataTable, index) in dataTablesFiltered"
+                            :id="kebabCase(dataTable['name']) + '-table'"
                             :key="index"
                             :to="{ name: 'DataManagerTable', params: { name: dataTable['name'] } }"
-                            :id="kebabCase(dataTable['name']) + '-table'"
                             :variant="dataTable['managed'] === true ? 'primary' : 'link'">
                             {{ dataTable["name"] }}
                             <b-badge v-if="dataTable['managed'] === true" variant="primary" pill
diff --git a/client/src/components/admin/DataManager/DataManagerJob.vue b/client/src/components/admin/DataManager/DataManagerJob.vue
index 64328f4b338..d62c2ba3d9e 100644
--- a/client/src/components/admin/DataManager/DataManagerJob.vue
+++ b/client/src/components/admin/DataManager/DataManagerJob.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-breadcrumb v-if="dataManager && jobId && !loading" :items="breadcrumbItems" id="breadcrumb" />
+        <b-breadcrumb v-if="dataManager && jobId && !loading" id="breadcrumb" :items="breadcrumbItems" />
         <Alert :message="message" :variant="status" />
         <Alert v-for="(error, index) in errorMessages" :key="index" :message="error" variant="error" />
         <Alert v-if="viewOnly" message="Not implemented" variant="dark" />
@@ -9,11 +9,11 @@
             <b-row>
                 <b-col>
                     <b-card
+                        id="data-manager-card"
                         header-bg-variant="primary"
                         header-text-variant="white"
                         border-variant="primary"
-                        class="mb-3"
-                        id="data-manager-card">
+                        class="mb-3">
                         <template v-slot:header>
                             <b-container>
                                 <b-row align-v="center">
@@ -28,7 +28,7 @@
                                 </b-row>
                             </b-container>
                         </template>
-                        <b-card v-for="(hda, i) in hdaInfo" :key="i" class="mb-4" :id="'data-card-' + i">
+                        <b-card v-for="(hda, i) in hdaInfo" :id="'data-card-' + i" :key="i" class="mb-4">
                             <template v-slot:header>
                                 <b-table :fields="fields" :items="[hda]" caption-top small stacked>
                                     <template v-slot:table-caption>
diff --git a/client/src/components/admin/DataManager/DataManagerJobs.vue b/client/src/components/admin/DataManager/DataManagerJobs.vue
index fccc5ef4f0a..37ac1c6b4d1 100644
--- a/client/src/components/admin/DataManager/DataManagerJobs.vue
+++ b/client/src/components/admin/DataManager/DataManagerJobs.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-breadcrumb v-if="dataManager && !loading" :items="breadcrumbItems" id="breadcrumb" />
+        <b-breadcrumb v-if="dataManager && !loading" id="breadcrumb" :items="breadcrumbItems" />
         <Alert :message="message" :variant="status" />
         <Alert v-if="viewOnly" message="Not implemented" variant="dark" />
         <Alert v-else-if="loading" message="Waiting for data" variant="info" />
@@ -31,29 +31,29 @@
                 </b-row>
             </b-container>
             <b-table
+                id="jobs-table"
                 :fields="tableFields"
                 :items="tableItems"
                 :filter="filter"
                 hover
                 responsive
-                striped
-                id="jobs-table">
+                striped>
                 <template v-slot:cell(actions)="row">
                     <b-button-group>
                         <b-button v-b-tooltip.hover title="Rerun" target="_top" :href="jobs[row.index]['runUrl']">
                             <span class="fa fa-redo" />
                         </b-button>
                         <b-button
+                            :id="'job-' + jobs[row.index]['encId']"
                             v-b-tooltip.hover
                             title="View Info"
-                            :to="{ name: 'DataManagerJob', params: { id: jobs[row.index]['encId'] } }"
-                            :id="'job-' + jobs[row.index]['encId']">
+                            :to="{ name: 'DataManagerJob', params: { id: jobs[row.index]['encId'] } }">
                             <span class="fa fa-info-circle" />
                         </b-button>
                         <b-button
                             v-if="!showCommandLine"
-                            @click.stop="row.toggleDetails()"
-                            :pressed.sync="row.detailsShowing">
+                            :pressed.sync="row.detailsShowing"
+                            @click.stop="row.toggleDetails()">
                             {{ row.detailsShowing ? "Hide" : "Show" }} Command Line
                         </b-button>
                     </b-button-group>
diff --git a/client/src/components/admin/DataManager/DataManagerTable.vue b/client/src/components/admin/DataManager/DataManagerTable.vue
index e3c046400af..4826396b33c 100644
--- a/client/src/components/admin/DataManager/DataManagerTable.vue
+++ b/client/src/components/admin/DataManager/DataManagerTable.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-breadcrumb v-if="dataTable && !loading" :items="breadcrumbItems" id="breadcrumb" />
+        <b-breadcrumb v-if="dataTable && !loading" id="breadcrumb" :items="breadcrumbItems" />
         <Alert :message="message" :variant="status" />
         <Alert v-if="viewOnly" message="Not implemented" variant="dark" />
         <Alert v-else-if="loading" message="Waiting for data" status="info" />
@@ -16,7 +16,7 @@
                             <b-container>
                                 <b-row align-v="center">
                                     <b-col cols="auto">
-                                        <b-button @click="reload()" v-b-tooltip.hover :title="buttonLabel">
+                                        <b-button v-b-tooltip.hover :title="buttonLabel" @click="reload()">
                                             <span class="fa fa-sync" />
                                         </b-button>
                                     </b-col>
diff --git a/client/src/components/admin/DataManagerGrid.vue b/client/src/components/admin/DataManagerGrid.vue
index 3a28e7029e9..89c10a7f727 100644
--- a/client/src/components/admin/DataManagerGrid.vue
+++ b/client/src/components/admin/DataManagerGrid.vue
@@ -7,8 +7,8 @@
                     <a
                         class="icon-btn"
                         href="javascript:void(0)"
-                        @click="handleReloadButtonClick"
                         :title="`Reload ${dataManagerTableName} tool data table`"
+                        @click="handleReloadButtonClick"
                         ><span class="fa fa-sync"></span
                     ></a>
                 </th>
diff --git a/client/src/components/admin/DataTablesGrid.vue b/client/src/components/admin/DataTablesGrid.vue
index c85b11b0e8b..ccb2197f989 100644
--- a/client/src/components/admin/DataTablesGrid.vue
+++ b/client/src/components/admin/DataTablesGrid.vue
@@ -1,5 +1,5 @@
 <template>
-    <base-grid :is-loaded="isLoaded" :columns="columns" id="data-tables-grid">
+    <base-grid id="data-tables-grid" :is-loaded="isLoaded" :columns="columns">
         <template v-slot:title> Current data table registry contains {{ rows.length }} data tables </template>
         <template v-slot:rows>
             <template v-for="row in rows">
diff --git a/client/src/components/admin/DataTypes.vue b/client/src/components/admin/DataTypes.vue
index b609bdcaf33..15a518632fd 100644
--- a/client/src/components/admin/DataTypes.vue
+++ b/client/src/components/admin/DataTypes.vue
@@ -3,13 +3,13 @@
         <Message :message="message" :status="status" />
         <BaseGrid
             v-if="status !== 'error'"
+            id="data-types-grid"
             :columns="columns"
             :rows="dataTypes"
-            :is-loaded="isDataLoaded"
-            id="data-types-grid">
+            :is-loaded="isDataLoaded">
             <template v-slot:title>
                 <p>Current data types registry contains {{ dataTypes.length }} data types.</p>
-                <input type="checkbox" id="showAllColumns" v-model="showAllColumns" />
+                <input id="showAllColumns" v-model="showAllColumns" type="checkbox" />
                 <label for="showAllColumns">Show all columns</label>
             </template>
         </BaseGrid>
diff --git a/client/src/components/admin/Dependencies/ContainerIndex.vue b/client/src/components/admin/Dependencies/ContainerIndex.vue
index 522642aa3e5..550a652a06e 100644
--- a/client/src/components/admin/Dependencies/ContainerIndex.vue
+++ b/client/src/components/admin/Dependencies/ContainerIndex.vue
@@ -9,15 +9,15 @@
                     <b>Resolution:</b>
                     <label class="mr-sm-2" for="manage-container-type">Resolve containers of type</label>
                     <b-form-select
-                        class="mb-2 mr-sm-2 mb-sm-0"
                         id="manage-container-type"
                         v-model="containerType"
+                        class="mb-2 mr-sm-2 mb-sm-0"
                         :options="containerTypeOptions"></b-form-select>
                     <label class="mr-sm-2" for="manage-resolver-type">using resolvers of type</label>
                     <b-form-select
-                        class="mb-2 mr-sm-2 mb-sm-0"
                         id="manage-resolver-type"
                         v-model="resolverType"
+                        class="mb-2 mr-sm-2 mb-sm-0"
                         :options="resolverTypeOptions"></b-form-select>
                 </b-form>
             </b-row>
@@ -26,9 +26,9 @@
                     <b>Filter:</b>
                     <label class="mr-sm-2" for="manage-filter-resolution">Resolution</label>
                     <b-form-select
-                        class="mb-2 mr-sm-2 mb-sm-0"
                         id="manage-filter-resolution"
-                        v-model="filterResolution">
+                        v-model="filterResolution"
+                        class="mb-2 mr-sm-2 mb-sm-0">
                         <option :value="null">*any*</option>
                         <option value="unresolved">Unresolved</option>
                         <option value="resolved">Resolved</option>
@@ -38,18 +38,18 @@
                     >
                     <b-form-select
                         v-if="filterResolution != 'unresolved'"
-                        class="mb-2 mr-sm-2 mb-sm-0"
                         id="manage-filter-container-type"
                         v-model="filterContainerType"
+                        class="mb-2 mr-sm-2 mb-sm-0"
                         :options="containerTypeOptions"></b-form-select>
                     <label v-if="filterResolution != 'unresolved'" class="mr-sm-2" for="manage-filter-resolver-type"
                         >Resolvers of type</label
                     >
                     <b-form-select
                         v-if="filterResolution != 'unresolved'"
-                        class="mb-2 mr-sm-2 mb-sm-0"
                         id="manage-filter-resolver-type"
                         v-model="filterResolverType"
+                        class="mb-2 mr-sm-2 mb-sm-0"
                         :options="resolverTypeOptions"></b-form-select>
                 </b-form>
             </b-row>
diff --git a/client/src/components/admin/Dependencies/Requirements.vue b/client/src/components/admin/Dependencies/Requirements.vue
index 08d61b0234c..32073e94638 100644
--- a/client/src/components/admin/Dependencies/Requirements.vue
+++ b/client/src/components/admin/Dependencies/Requirements.vue
@@ -3,7 +3,7 @@
         <span v-if="requirements.length == 0">
             <i>no requirements defined</i>
         </span>
-        <div v-else :key="index" v-for="(requirement, index) in requirements">
+        <div v-for="(requirement, index) in requirements" v-else :key="index">
             <requirement :requirement="requirement" />
         </div>
     </span>
diff --git a/client/src/components/admin/Dependencies/ResolutionDetails.vue b/client/src/components/admin/Dependencies/ResolutionDetails.vue
index 484f90941c7..0fb0b164adb 100644
--- a/client/src/components/admin/Dependencies/ResolutionDetails.vue
+++ b/client/src/components/admin/Dependencies/ResolutionDetails.vue
@@ -17,7 +17,7 @@
                 </div>
             </div>
         </div>
-        <div class="row" v-if="resolution.status.length == 0">
+        <div v-if="resolution.status.length == 0" class="row">
             <i><b>No requirements to resolve, no explicit dependency resolution configured.</b></i>
         </div>
         <span v-else-if="!separateDetails">
@@ -41,7 +41,7 @@
             </div>
         </span>
         <div v-else>
-            <span :key="index" v-for="(requirements, index) in resolution.requirements">
+            <span v-for="(requirements, index) in resolution.requirements" :key="index">
                 <div class="row">
                     <div class="col">
                         <requirement :requirement="resolution.requirements[index]" />
diff --git a/client/src/components/admin/Dependencies/ResolutionIndex.vue b/client/src/components/admin/Dependencies/ResolutionIndex.vue
index b13e3f73640..1ed49165972 100644
--- a/client/src/components/admin/Dependencies/ResolutionIndex.vue
+++ b/client/src/components/admin/Dependencies/ResolutionIndex.vue
@@ -9,9 +9,9 @@
                     <b>Resolution:</b>
                     <label class="mr-sm-2" for="manage-resolver-type">Using resolvers of type</label>
                     <b-form-select
-                        class="mb-2 mr-sm-2 mb-sm-0"
                         id="manage-resolver-type"
                         v-model="resolverType"
+                        class="mb-2 mr-sm-2 mb-sm-0"
                         :options="resolverTypeOptions"></b-form-select>
                 </b-form>
             </b-row>
@@ -20,9 +20,9 @@
                     <b>Filter:</b>
                     <label class="mr-sm-2" for="manage-filter-resolution">Resolution</label>
                     <b-form-select
-                        class="mb-2 mr-sm-2 mb-sm-0"
                         id="manage-filter-resolution"
-                        v-model="filterResolution">
+                        v-model="filterResolution"
+                        class="mb-2 mr-sm-2 mb-sm-0">
                         <option :value="null">*any*</option>
                         <option value="unresolved">Unresolved</option>
                         <option value="resolved">Resolved</option>
@@ -69,11 +69,11 @@
                     <!-- v-bind:disabled="!hasSelection"  -->
                     Uninstall
                 </b-button>
-                <b-button class="m-1" @click="setExpandToolIds(true)" v-if="!expandToolIds">
+                <b-button v-if="!expandToolIds" class="m-1" @click="setExpandToolIds(true)">
                     <span class="fa fa-chevron-down" />
                     Expand Tools
                 </b-button>
-                <b-button class="m-1" @click="setExpandToolIds(false)" v-if="expandToolIds">
+                <b-button v-if="expandToolIds" class="m-1" @click="setExpandToolIds(false)">
                     <span class="fa fa-chevron-up" />
                     Group by Requirements
                 </b-button>
diff --git a/client/src/components/admin/Dependencies/Statuses.vue b/client/src/components/admin/Dependencies/Statuses.vue
index 3d9461204e8..32fd499f1ce 100644
--- a/client/src/components/admin/Dependencies/Statuses.vue
+++ b/client/src/components/admin/Dependencies/Statuses.vue
@@ -4,7 +4,7 @@
         <span v-else-if="merged">
             <status-display :status="statuses[0]" :all-statuses="statuses" />
         </span>
-        <div v-else :key="index" v-for="(item_status, index) in statuses">
+        <div v-for="(item_status, index) in statuses" v-else :key="index">
             <status-display :status="item_status" />
         </div>
     </span>
diff --git a/client/src/components/admin/Dependencies/Tools.vue b/client/src/components/admin/Dependencies/Tools.vue
index 6ceb30952ce..51b2b104f8d 100644
--- a/client/src/components/admin/Dependencies/Tools.vue
+++ b/client/src/components/admin/Dependencies/Tools.vue
@@ -4,7 +4,7 @@
             <tool-display :tool-id="toolIds[0]" />
         </span>
         <span v-else-if="compact"> {{ toolIds.length }} tools </span>
-        <div v-else :key="index" v-for="(toolId, index) in toolIds">
+        <div v-for="(toolId, index) in toolIds" v-else :key="index">
             <tool-display :tool-id="toolId" />
         </div>
     </div>
diff --git a/client/src/components/admin/ErrorStack.vue b/client/src/components/admin/ErrorStack.vue
index 0a8a2ccfd89..5ac68f0f1df 100644
--- a/client/src/components/admin/ErrorStack.vue
+++ b/client/src/components/admin/ErrorStack.vue
@@ -2,7 +2,7 @@
     <div>
         <b-alert :show="messageVisible" variant="danger"> {{ messageText }} </b-alert>
         <b-alert :show="infoVisible" variant="info"> No errors available. </b-alert>
-        <b-table striped v-if="errorStackVisible" :fields="errorStackAttributes" :items="errorStack" />
+        <b-table v-if="errorStackVisible" striped :fields="errorStackAttributes" :items="errorStack" />
     </div>
 </template>
 <script>
diff --git a/client/src/components/admin/Home.vue b/client/src/components/admin/Home.vue
index 7e01164e8df..83d132ec043 100644
--- a/client/src/components/admin/Home.vue
+++ b/client/src/components/admin/Home.vue
@@ -10,32 +10,32 @@
         <ul>
             <li>
                 <strong>
-                    <a @click.prevent="useRouter" :href="adminDataTypesUrl">Data Types</a>
+                    <a :href="adminDataTypesUrl" @click.prevent="useRouter">Data Types</a>
                 </strong>
                 - See all datatypes available in this Galaxy.
             </li>
             <li>
                 <strong>
-                    <a @click.prevent="useRouter" :href="adminDataTablesUrl">Data Tables</a>
+                    <a :href="adminDataTablesUrl" @click.prevent="useRouter">Data Tables</a>
                 </strong>
                 - See all data tables available in this Galaxy.
             </li>
             <li>
                 <strong>
-                    <a @click.prevent="useRouter" :href="adminDisplayApplicationsUrl">Display Applications</a>
+                    <a :href="adminDisplayApplicationsUrl" @click.prevent="useRouter">Display Applications</a>
                 </strong>
                 - See all display applications configured in this Galaxy.
             </li>
             <li>
                 <strong>
-                    <a @click.prevent="useRouter" :href="adminJobsUrl">Jobs</a>
+                    <a :href="adminJobsUrl" @click.prevent="useRouter">Jobs</a>
                 </strong>
                 - Display all jobs that are currently not finished (i.e., their state is new, waiting, queued, or
                 running). Administrators are able to cleanly stop long-running jobs.
             </li>
             <li>
                 <strong>
-                    <a @click.prevent="useRouter" :href="adminDMUrl">Local Data</a>
+                    <a :href="adminDMUrl" @click.prevent="useRouter">Local Data</a>
                 </strong>
                 - Manage the reference (and other) data that is stored within Tool Data Tables. See
                 <a href="https://galaxyproject.org/admin/tools/data-managers" target="_blank">wiki</a> for details.
@@ -46,7 +46,7 @@
         <ul>
             <li>
                 <strong>
-                    <a @click.prevent="useRouter" :href="adminUsersUrl">Users</a>
+                    <a :href="adminUsersUrl" @click.prevent="useRouter">Users</a>
                 </strong>
                 - The primary user management interface, displaying information associated with each user and providing
                 operations for resetting passwords, updating user information, impersonating a user, and more.
@@ -54,7 +54,7 @@
             <!-- %if trans.app.config.enable_quotas: -->
             <li>
                 <strong>
-                    <a @click.prevent="useRouter" :href="adminQuotasUrl">Quotas</a>
+                    <a :href="adminQuotasUrl" @click.prevent="useRouter">Quotas</a>
                 </strong>
                 - Manage user space quotas. See
                 <a href="https://galaxyproject.org/admin/disk-quotas" target="_blank">wiki</a> for details.
@@ -62,13 +62,13 @@
             <!-- %endif -->
             <li>
                 <strong>
-                    <a @click.prevent="useRouter" :href="adminGroupsUrl">Groups</a>
+                    <a :href="adminGroupsUrl" @click.prevent="useRouter">Groups</a>
                 </strong>
                 - A view of all groups along with the members of the group and the roles associated with each group.
             </li>
             <li>
                 <strong>
-                    <a @click.prevent="useRouter" :href="adminRolesUrl">Roles</a>
+                    <a :href="adminRolesUrl" @click.prevent="useRouter">Roles</a>
                 </strong>
                 - A view of all non-private roles along with the role type, and the users and groups that are
                 associated, with the role. Also includes a view of the data library datasets that are associated with
@@ -76,7 +76,7 @@
             </li>
             <li>
                 <strong>
-                    <a @click.prevent="useRouter" :href="adminFormsUrl">Forms</a>
+                    <a :href="adminFormsUrl" @click.prevent="useRouter">Forms</a>
                 </strong>
                 - Manage local form definitions.
             </li>
@@ -86,13 +86,13 @@
         <ul>
             <li>
                 <strong>
-                    <a @click.prevent="useRouter" :href="adminSanitizeAllowUrl">Manage Allowlist</a>
+                    <a :href="adminSanitizeAllowUrl" @click.prevent="useRouter">Manage Allowlist</a>
                 </strong>
                 - Manage HTML rendering for installed tools' output datasets.
             </li>
             <li v-if="isToolShedInstalled">
                 <strong>
-                    <a @click.prevent="useRouter" :href="adminToolshedUrl">Install and Uninstall</a>
+                    <a :href="adminToolshedUrl" @click.prevent="useRouter">Install and Uninstall</a>
                 </strong>
                 - Search and install new tools and other Galaxy utilities from the Tool Shed. See
                 <a href="https://galaxyproject.org/admin/tools/add-tool-from-toolshed-tutorial" target="_blank"
@@ -101,13 +101,13 @@
             </li>
             <li v-if="isRepoInstalled">
                 <strong>
-                    <a @click.prevent="useRouter" :href="adminManageMetadata">Manage Metadata</a>
+                    <a :href="adminManageMetadata" @click.prevent="useRouter">Manage Metadata</a>
                 </strong>
                 - Select on which repositories you want to reset metadata.
             </li>
             <li>
                 <strong>
-                    <a @click.prevent="useRouter" :href="adminToolVersionsUrl">View Lineage</a>
+                    <a :href="adminToolVersionsUrl" @click.prevent="useRouter">View Lineage</a>
                 </strong>
                 - A view of a version lineages for all installed tools. Useful for debugging.
             </li>
diff --git a/client/src/components/admin/Jobs.vue b/client/src/components/admin/Jobs.vue
index 56e2b925366..cc6c547cda7 100644
--- a/client/src/components/admin/Jobs.vue
+++ b/client/src/components/admin/Jobs.vue
@@ -34,7 +34,7 @@
                         :disabled="showAllRunning"
                         description="in minutes">
                         <b-input-group>
-                            <b-form-input id="cutoff" type="number" v-model="cutoffMin"> </b-form-input>
+                            <b-form-input id="cutoff" v-model="cutoffMin" type="number"> </b-form-input>
                             <b-input-group-append>
                                 <b-btn type="submit">Refresh</b-btn>
                             </b-input-group-append>
@@ -85,9 +85,9 @@
             </template>
             <template v-slot:cell(selected)="data">
                 <b-form-checkbox
+                    :key="data.index"
                     v-model="selectedStopJobIds"
                     :checked="allSelected"
-                    :key="data.index"
                     :value="data.item['id']"></b-form-checkbox>
             </template>
         </jobs-table>
diff --git a/client/src/components/admin/JobsTable.vue b/client/src/components/admin/JobsTable.vue
index f755a51a82f..34d1a80023b 100644
--- a/client/src/components/admin/JobsTable.vue
+++ b/client/src/components/admin/JobsTable.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
         <b-table
+            v-model="innerValue"
             :fields="fields"
             :items="items"
             :filter="filter"
@@ -8,10 +9,9 @@
             responsive
             striped
             caption-top
-            @row-clicked="toggleDetails"
-            v-model="innerValue"
             :busy="busy"
-            show-empty>
+            show-empty
+            @row-clicked="toggleDetails">
             <template v-slot:table-caption>
                 {{ tableCaption }}
             </template>
diff --git a/client/src/components/admin/SanitizeAllow.vue b/client/src/components/admin/SanitizeAllow.vue
index d664ed6f668..cf395a23f82 100755
--- a/client/src/components/admin/SanitizeAllow.vue
+++ b/client/src/components/admin/SanitizeAllow.vue
@@ -5,7 +5,7 @@
             <b-tab title="Toolshed Tools">
                 <b-tabs>
                     <b-tab title="HTML Sanitized">
-                        <base-grid :is-loaded="isLoaded" :columns="toolshedColumns" id="sanitize-allow-grid">
+                        <base-grid id="sanitize-allow-grid" :is-loaded="isLoaded" :columns="toolshedColumns">
                             <template v-slot:rows>
                                 <template v-for="(row, blockedIdx) in toolshedBlocked">
                                     <tr :key="blockedIdx">
@@ -31,7 +31,7 @@
                         </base-grid>
                     </b-tab>
                     <b-tab title="HTML Rendered">
-                        <base-grid :is-loaded="isLoaded" :columns="columns" id="sanitize-allow-grid">
+                        <base-grid id="sanitize-allow-grid" :is-loaded="isLoaded" :columns="columns">
                             <template v-slot:rows>
                                 <template v-for="(row, allowedIdx) in toolshedAllowed">
                                     <tr :key="allowedIdx">
@@ -62,7 +62,7 @@
             <b-tab title="Local Tools">
                 <b-tabs>
                     <b-tab title="HTML Sanitized">
-                        <base-grid :is-loaded="isLoaded" :columns="columns" id="sanitize-allow-grid">
+                        <base-grid id="sanitize-allow-grid" :is-loaded="isLoaded" :columns="columns">
                             <template v-slot:rows>
                                 <template v-for="(row, localBlockedIdx) in localBlocked">
                                     <tr :key="localBlockedIdx">
@@ -77,7 +77,7 @@
                         </base-grid>
                     </b-tab>
                     <b-tab title="HTML Rendered">
-                        <base-grid :is-loaded="isLoaded" :columns="columns" id="sanitize-allow-grid">
+                        <base-grid id="sanitize-allow-grid" :is-loaded="isLoaded" :columns="columns">
                             <template v-slot:rows>
                                 <template v-for="(row, localAllowedIdx) in localAllowed">
                                     <tr :key="localAllowedIdx">
diff --git a/client/src/components/login/Confirmation.vue b/client/src/components/login/Confirmation.vue
index 62d48f83d14..85a43f3c046 100644
--- a/client/src/components/login/Confirmation.vue
+++ b/client/src/components/login/Confirmation.vue
@@ -2,7 +2,7 @@
     <div class="container">
         <div class="row justify-content-md-center">
             <div class="col" :class="{ 'col-lg-6': !isAdmin }">
-                <b-alert v-html="registration_warning_message" :show="showRegistrationWarning" variant="info">
+                <b-alert :show="showRegistrationWarning" variant="info" v-html="registration_warning_message">
                 </b-alert>
                 <b-alert :show="messageShow" :variant="messageVariant" v-html="messageText" />
                 <b-form id="confirmation" @submit.prevent="submit()">
@@ -34,7 +34,7 @@
                                     I have read and accept these terms to create a new Galaxy account.
                                 </b-form-checkbox>
                             </b-form-group>
-                            <b-button name="confirm" type="submit" @click.prevent="submit" :disabled="!termsRead"
+                            <b-button name="confirm" type="submit" :disabled="!termsRead" @click.prevent="submit"
                                 >Yes, create new account</b-button
                             >
                             <b-button name="cancel" type="submit" @click.prevent="login">No, go back to login</b-button>
diff --git a/client/src/components/login/Login.vue b/client/src/components/login/Login.vue
index 1548940ef2c..c91cd56d3aa 100644
--- a/client/src/components/login/Login.vue
+++ b/client/src/components/login/Login.vue
@@ -10,13 +10,13 @@
                                 <div>
                                     <!-- standard internal galaxy login -->
                                     <b-form-group label="Public Name or Email Address">
-                                        <b-form-input name="login" type="text" v-model="login" />
+                                        <b-form-input v-model="login" name="login" type="text" />
                                     </b-form-group>
                                     <b-form-group label="Password">
-                                        <b-form-input name="password" type="password" v-model="password" />
+                                        <b-form-input v-model="password" name="password" type="password" />
                                         <b-form-text>
                                             Forgot password?
-                                            <a @click="reset" href="javascript:void(0)" role="button"
+                                            <a href="javascript:void(0)" role="button" @click="reset"
                                                 >Click here to reset your password.</a
                                             >
                                         </b-form-text>
@@ -47,7 +47,7 @@
                         </b-card>
                     </b-form>
 
-                    <b-modal centered id="duplicateEmail" ref="duplicateEmail" title="Duplicate Email" ok-only>
+                    <b-modal id="duplicateEmail" ref="duplicateEmail" centered title="Duplicate Email" ok-only>
                         <p>
                             There already exists a user with this email. To associate this external login, you must
                             first be logged in as that existing account.
diff --git a/client/src/components/login/Password.vue b/client/src/components/login/Password.vue
index c0e8149f35e..8555a4f708c 100644
--- a/client/src/components/login/Password.vue
+++ b/client/src/components/login/Password.vue
@@ -3,10 +3,10 @@
         <b-alert :show="messageShow" :variant="messageVariant" v-html="messageText" />
         <b-card header="Change your password">
             <b-form-group v-if="user" label="Current Password">
-                <b-form-input type="password" v-model="current" />
+                <b-form-input v-model="current" type="password" />
             </b-form-group>
-            <b-form-group label="New Password"> <b-form-input type="password" v-model="password" /> </b-form-group>
-            <b-form-group label="Confirm password"> <b-form-input type="password" v-model="confirm" /> </b-form-group>
+            <b-form-group label="New Password"> <b-form-input v-model="password" type="password" /> </b-form-group>
+            <b-form-group label="Confirm password"> <b-form-input v-model="confirm" type="password" /> </b-form-group>
             <b-button type="submit">Save new password</b-button>
         </b-card>
     </b-form>
diff --git a/client/src/components/login/Register.vue b/client/src/components/login/Register.vue
index 29724241733..b4e16e272d3 100644
--- a/client/src/components/login/Register.vue
+++ b/client/src/components/login/Register.vue
@@ -2,23 +2,23 @@
     <div class="container">
         <div class="row justify-content-md-center">
             <div class="col" :class="{ 'col-lg-6': !isAdmin }">
-                <b-alert v-html="registration_warning_message" :show="showRegistrationWarning" variant="info">
+                <b-alert :show="showRegistrationWarning" variant="info" v-html="registration_warning_message">
                 </b-alert>
                 <b-alert :show="messageShow" :variant="messageVariant" v-html="messageText" />
                 <b-form id="registration" @submit.prevent="submit()">
                     <b-card no-body header="Create a Galaxy account">
                         <b-card-body>
                             <b-form-group label="Email Address">
-                                <b-form-input name="email" type="text" v-model="email" />
+                                <b-form-input v-model="email" name="email" type="text" />
                             </b-form-group>
                             <b-form-group label="Password">
-                                <b-form-input name="password" type="password" v-model="password" />
+                                <b-form-input v-model="password" name="password" type="password" />
                             </b-form-group>
                             <b-form-group label="Confirm password">
-                                <b-form-input name="confirm" type="password" v-model="confirm" />
+                                <b-form-input v-model="confirm" name="confirm" type="password" />
                             </b-form-group>
                             <b-form-group label="Public name">
-                                <b-form-input name="username" type="text" v-model="username" />
+                                <b-form-input v-model="username" name="username" type="text" />
                                 <b-form-text
                                     >Your public name is an identifier that will be used to generate addresses for
                                     information you share publicly. Public names must be at least three characters in
@@ -29,7 +29,7 @@
                             <b-form-group
                                 v-if="mailing_join_addr && server_mail_configured"
                                 label="Subscribe to mailing list">
-                                <input name="subscribe" type="checkbox" v-model="subscribe" />
+                                <input v-model="subscribe" name="subscribe" type="checkbox" />
                             </b-form-group>
                             <b-button name="create" type="submit" :disabled="disableCreate">Create</b-button>
                         </b-card-body>