Apply fixes for vue-attributes-order standardization, towards vue/recommended

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>

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>

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>

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>

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>
                             {{

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>

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">

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>

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>

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>

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>

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>

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";

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";

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>

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"

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>
 

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>

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>

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 {

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>

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>

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" />

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>

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"

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>

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>

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">

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"

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'"

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>

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'"

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>

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>

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>

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>

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>

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>

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>

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)"

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>

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"

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>

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"

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"

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
                 >

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

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>

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()"

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>

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>

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">

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>

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 />

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>

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"

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>

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">

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>

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>

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"

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>

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>

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>

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>

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 }}

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>

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>

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

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>

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>

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>

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>

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>

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

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>

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" />

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>

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>

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>

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>

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']" />

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>

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>
 

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>

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 }}

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>

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"

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>

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>

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>