Merge pull request #16398 from dannon/component-naming

Standardize, lint vue component name casing.
galaxyproject · Jul 14, 2023 · dd869c6 · dd869c6
2 parents 58d596f + 37c7cb4
commit dd869c6
Show file tree

Hide file tree

Showing 201 changed files with 985 additions and 1,014 deletions.
diff --git a/client/.eslintrc.js b/client/.eslintrc.js
@@ -15,6 +15,7 @@ const baseRules = {
     // but that kind of refactoring is best done slowly, one bit at a time
     // as those components are touched.
     "vue/multi-word-component-names": "warn",
+    "vue/component-name-in-template-casing": "error",
     "vue/prop-name-casing": "warn",
     "vue/require-prop-types": "warn",
     "vue/require-default-prop": "warn",

diff --git a/client/src/components/AboutGalaxy.vue b/client/src/components/AboutGalaxy.vue
@@ -34,8 +34,8 @@ const versionUserDocumentationUrl = computed(() => {
             <Heading h2 separator size="md">Galaxy Version Information</Heading>
             <p>
                 The Galaxy Server is running version
-                <external-link :href="versionUserDocumentationUrl">
-                    <strong> {{ config.version_major }}.{{ config.version_minor }}</strong> </external-link
+                <ExternalLink :href="versionUserDocumentationUrl">
+                    <strong> {{ config.version_major }}.{{ config.version_minor }}</strong> </ExternalLink
                 >, and the web client was built on <UtcDate :date="clientBuildDate" mode="pretty" />.
             </p>
             <template v-if="config.version_extra">
@@ -53,9 +53,9 @@ const versionUserDocumentationUrl = computed(() => {
             <!-- API documentation link -->
             <p>
                 The Galaxy API is available, and explorable, at
-                <external-link :href="apiDocsLink">
+                <ExternalLink :href="apiDocsLink">
                     {{ apiDocsLink }}
-                </external-link>
+                </ExternalLink>
             </p>
         </div>
         <div>
@@ -67,7 +67,7 @@ const versionUserDocumentationUrl = computed(() => {
             <Heading h2 separator size="md">Terms and Conditions</Heading>
             <p>
                 This Galaxy Server has specified Terms and Conditions that apply to use of the service.
-                <external-link :href="config.terms_url">Review them here.</external-link>
+                <ExternalLink :href="config.terms_url">Review them here.</ExternalLink>
             </p>
         </div>
     </div>

diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -60,23 +60,23 @@ function onQuery(newQuery: string) {
 
 <template>
     <div class="activity-settings rounded p-3 no-highlight">
-        <delayed-input class="mb-3" :delay="100" placeholder="Search activities" @change="onQuery" />
+        <DelayedInput class="mb-3" :delay="100" placeholder="Search activities" @change="onQuery" />
         <div v-if="foundActivities" class="activity-settings-content overflow-auto">
             <div v-for="activity in filteredActivities" :key="activity.id">
                 <div class="activity-settings-item p-2 cursor-pointer" @click="onClick(activity)">
                     <div class="d-flex justify-content-between align-items-start">
                         <span class="w-100">
-                            <font-awesome-icon
+                            <FontAwesomeIcon
                                 v-if="!activity.optional"
                                 class="icon-check mr-1"
                                 icon="fas fa-thumbtack"
                                 fa-fw />
-                            <font-awesome-icon
+                            <FontAwesomeIcon
                                 v-else-if="activity.visible"
                                 class="icon-check mr-1"
                                 icon="fas fa-check-square"
                                 fa-fw />
-                            <font-awesome-icon v-else class="mr-1" icon="far fa-square" fa-fw />
+                            <FontAwesomeIcon v-else class="mr-1" icon="far fa-square" fa-fw />
                             <small>
                                 <icon class="mr-1" :icon="activity.icon" />
                                 <span v-localize class="font-weight-bold">{{
@@ -91,7 +91,7 @@ function onQuery(newQuery: string) {
                             size="sm"
                             variant="link"
                             @click.stop="onRemove(activity)">
-                            <font-awesome-icon icon="fa-trash" fa-fw />
+                            <FontAwesomeIcon icon="fa-trash" fa-fw />
                         </b-button>
                     </div>
                     <small v-localize>

diff --git a/client/src/components/Annotation.vue b/client/src/components/Annotation.vue
@@ -1,5 +1,5 @@
 <template>
-    <click-to-edit
+    <ClickToEdit
         ref="annotationInput"
         v-slot="{ toggleEdit, placeholder, stateValidator }"
         v-b-tooltip.hover="{ boundary: 'viewport', placement: tooltipPlacement }"
@@ -8,7 +8,7 @@
         :value="annotation"
         :title="'Edit annotation...' | localize"
         :placeholder="'Edit annotation...' | localize">
-        <debounced-input v-slot="inputScope" v-model="annotation" :delay="1000">
+        <DebouncedInput v-slot="inputScope" v-model="annotation" :delay="1000">
             <b-form-textarea
                 size="sm"
                 tabindex="-1"
@@ -19,8 +19,8 @@
                 :state="stateValidator(inputScope.value, annotation)"
                 @input="inputScope.input"
                 @blur="toggleEdit(false)"></b-form-textarea>
-        </debounced-input>
-    </click-to-edit>
+        </DebouncedInput>
+    </ClickToEdit>
 </template>
 
 <script>

diff --git a/client/src/components/Citation/Citation.vue b/client/src/components/Citation/Citation.vue
@@ -2,7 +2,7 @@
     <div>
         {{ prefix }}
         <span v-html="citationHtml" />
-        <a v-if="link" :href="link" target="_blank">Visit Citation <font-awesome-icon icon="external-link-alt" /> </a>
+        <a v-if="link" :href="link" target="_blank">Visit Citation <FontAwesomeIcon icon="external-link-alt" /> </a>
     </div>
 </template>
 

diff --git a/client/src/components/ClickToEdit.vue b/client/src/components/ClickToEdit.vue
@@ -12,7 +12,7 @@
                 :editing="editing"
                 :placeholder="placeholder"
                 :state-validator="stateValidator">
-                <debounced-input v-model="localValue" :delay="debounceDelay">
+                <DebouncedInput v-model="localValue" :delay="debounceDelay">
                     <template v-slot="{ value: debouncedValue, input }">
                         <b-form-input
                             ref="clickToEditInput"
@@ -22,7 +22,7 @@
                             @input="input"
                             @blur="toggleEdit(false)" />
                     </template>
-                </debounced-input>
+                </DebouncedInput>
             </slot>
         </component>
     </div>

diff --git a/client/src/components/Collections/ListCollectionCreator.vue b/client/src/components/Collections/ListCollectionCreator.vue
@@ -115,14 +115,14 @@
                             <li>
                                 {{ l("Click ") }}
                                 <i data-target=".reset">
-                                    <font-awesome-icon icon="undo" />
+                                    <FontAwesomeIcon icon="undo" />
                                 </i>
                                 {{ l("to begin again as if you had just opened the interface.") }}
                             </li>
                             <li>
                                 {{ l("Click ") }}
                                 <i data-target=".sort-items">
-                                    <font-awesome-icon icon="sort-alpha-down" />
+                                    <FontAwesomeIcon icon="sort-alpha-down" />
                                 </i>
                                 {{ l("to sort datasets alphabetically.") }}
                             </li>
@@ -150,10 +150,10 @@
                     <template v-slot:middle-content>
                         <div class="collection-elements-controls">
                             <b-button class="reset" :title="titleUndoButton" @click="reset">
-                                <font-awesome-icon icon="undo" />
+                                <FontAwesomeIcon icon="undo" />
                             </b-button>
                             <b-button class="sort-items" :title="titleSortButton" @click="sortByName">
-                                <font-awesome-icon icon="sort-alpha-down" />
+                                <FontAwesomeIcon icon="sort-alpha-down" />
                             </b-button>
                             <a
                                 v-if="atLeastOneDatasetIsSelected"
@@ -179,7 +179,7 @@
                                     ?
                                 </b-alert>
                             </div>
-                            <dataset-collection-element-view
+                            <DatasetCollectionElementView
                                 v-for="element in returnWorkingElements"
                                 v-else
                                 :key="element.id"

diff --git a/client/src/components/Collections/ListDatasetCollectionElementView.vue b/client/src/components/Collections/ListDatasetCollectionElementView.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="collection-element" @click="$emit('element-is-selected', element)">
-        <click-to-edit v-model="elementName" :title="titleElementName" />
+        <ClickToEdit v-model="elementName" :title="titleElementName" />
         <button class="discard-btn btn-sm" :title="titleDiscardButton" @click="clickDiscard">
             {{ l("Discard") }}
         </button>

diff --git a/client/src/components/Collections/PairedElementView.vue b/client/src/components/Collections/PairedElementView.vue
@@ -4,7 +4,7 @@
             <span class="forward-dataset-name flex-column">{{ pair.forward.name }}</span>
             <span class="pair-name-column flex-column">
                 <span class="pair-name">
-                    <click-to-edit v-model="name" :title="titlePairName" />
+                    <ClickToEdit v-model="name" :title="titlePairName" />
                 </span>
             </span>
             <span class="reverse-dataset-name flex-column">{{ pair.reverse.name }}</span>

diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
@@ -324,8 +324,8 @@
                                 </div>
                             </div>
                         </div>
-                        <splitpanes horizontal style="height: 400px">
-                            <pane>
+                        <Splitpanes horizontal style="height: 400px">
+                            <Pane>
                                 <div v-if="noUnpairedElementsDisplayed">
                                     <b-alert show variant="warning">
                                         {{ l("No datasets were found matching the current filters.") }}
@@ -334,7 +334,7 @@
                                 <div class="unpaired-columns flex-column-container scroll-container flex-row">
                                     <div class="forward-column flex-column column truncate">
                                         <ol class="column-datasets">
-                                            <unpaired-dataset-element-view
+                                            <UnpairedDatasetElementView
                                                 v-for="element in forwardElements"
                                                 :key="element.id"
                                                 :class="{
@@ -359,7 +359,7 @@
                                     </div>
                                     <div class="reverse-column flex-column column truncate">
                                         <ol class="column-datasets">
-                                            <unpaired-dataset-element-view
+                                            <UnpairedDatasetElementView
                                                 v-for="element in reverseElements"
                                                 :key="element.id"
                                                 :class="{
@@ -372,8 +372,8 @@
                                         </ol>
                                     </div>
                                 </div>
-                            </pane>
-                            <pane>
+                            </Pane>
+                            <Pane>
                                 <div class="column-header">
                                     <div class="column-title paired-column-title">
                                         <span class="title"> {{ numOfPairs }} {{ l(" pairs") }}</span>
@@ -389,7 +389,7 @@
                                 <div class="paired-columns flex-column-container scroll-container flex-row">
                                     <ol class="column-datasets">
                                         <draggable v-model="pairedElements" @start="drag = true" @end="drag = false">
-                                            <paired-element-view
+                                            <PairedElementView
                                                 v-for="pair in pairedElements"
                                                 :key="pair.id"
                                                 :pair="pair"
@@ -398,8 +398,8 @@
                                         </draggable>
                                     </ol>
                                 </div>
-                            </pane>
-                        </splitpanes>
+                            </Pane>
+                        </Splitpanes>
                     </template>
                 </collection-creator>
             </div>

diff --git a/client/src/components/Collections/common/ChangeDatatypeTab.vue b/client/src/components/Collections/common/ChangeDatatypeTab.vue
@@ -9,7 +9,7 @@
             </div>
         </div>
         <b>{{ l("New Type") }}: </b>
-        <multiselect
+        <Multiselect
             v-if="hasSelectedDatatype"
             v-model="selectedDatatype"
             class="datatype-dropdown"
@@ -20,7 +20,7 @@
             :searchable="true"
             :allow-empty="false">
             {{ selectedDatatype.text }}
-        </multiselect>
+        </Multiselect>
     </div>
 </template>
 <script>

diff --git a/client/src/components/Collections/common/CollectionEditView.vue b/client/src/components/Collections/common/CollectionEditView.vue
@@ -13,45 +13,43 @@
             <b-tab
                 title-link-class="collection-edit-change-genome-nav"
                 @click="updateInfoMessage(newCollectionMessage + ' ' + noQuotaIncreaseMessage)">
-                <template v-slot:title> <font-awesome-icon icon="table" /> &nbsp; {{ l("Database/Build") }}</template>
-                <db-key-provider v-slot="{ item, loading }">
+                <template v-slot:title> <FontAwesomeIcon icon="table" /> &nbsp; {{ l("Database/Build") }}</template>
+                <DbKeyProvider v-slot="{ item, loading }">
                     <div v-if="loading"><b-spinner label="Loading Database/Builds..."></b-spinner></div>
                     <div v-else>
-                        <database-edit-tab
+                        <DatabaseEditTab
                             v-if="item && databaseKeyFromElements"
                             :database-key-from-elements="databaseKeyFromElements"
                             :genomes="item"
                             @clicked-save="clickedSave" />
                     </div>
-                </db-key-provider>
+                </DbKeyProvider>
             </b-tab>
             <SuitableConvertersProvider :id="collection_id" v-slot="{ item }">
                 <b-tab
                     v-if="item && item.length"
                     title-link-class="collection-edit-convert-datatype-nav"
                     @click="updateInfoMessage(newCollectionMessage)">
-                    <template v-slot:title> <font-awesome-icon icon="cog" /> &nbsp; {{ l("Convert") }}</template>
-                    <suitable-converters-tab :suitable-converters="item" @clicked-convert="clickedConvert" />
+                    <template v-slot:title> <FontAwesomeIcon icon="cog" /> &nbsp; {{ l("Convert") }}</template>
+                    <SuitableConvertersTab :suitable-converters="item" @clicked-convert="clickedConvert" />
                 </b-tab>
             </SuitableConvertersProvider>
             <ConfigProvider v-slot="{ config }">
                 <b-tab
                     v-if="config.enable_celery_tasks"
                     title-link-class="collection-edit-change-datatype-nav"
                     @click="updateInfoMessage(expectWaitTimeMessage)">
-                    <template v-slot:title>
-                        <font-awesome-icon icon="database" /> &nbsp; {{ l("Datatypes") }}
-                    </template>
-                    <datatypes-provider v-slot="{ item, loading }">
-                        <div v-if="loading"><loading-span :message="loadingString" /></div>
+                    <template v-slot:title> <FontAwesomeIcon icon="database" /> &nbsp; {{ l("Datatypes") }} </template>
+                    <DatatypesProvider v-slot="{ item, loading }">
+                        <div v-if="loading"><LoadingSpan :message="loadingString" /></div>
                         <div v-else>
-                            <change-datatype-tab
+                            <ChangeDatatypeTab
                                 v-if="item && datatypeFromElements"
                                 :datatype-from-elements="datatypeFromElements"
                                 :datatypes="item"
                                 @clicked-save="clickedDatatypeChange" />
                         </div>
-                    </datatypes-provider>
+                    </DatatypesProvider>
                 </b-tab>
             </ConfigProvider>
         </b-tabs>

diff --git a/client/src/components/Collections/common/DatabaseEditTab.vue b/client/src/components/Collections/common/DatabaseEditTab.vue
@@ -12,7 +12,7 @@
             </div>
         </div>
         <b>{{ l("Database/Build") }}: </b>
-        <multiselect
+        <Multiselect
             v-model="selectedGenome"
             class="database-dropdown"
             deselect-label="Can't remove this value"
@@ -22,7 +22,7 @@
             :searchable="true"
             :allow-empty="false">
             {{ selectedGenome.text }}
-        </multiselect>
+        </Multiselect>
     </div>
 </template>
 <script>

diff --git a/client/src/components/Collections/common/SuitableConvertersTab.vue b/client/src/components/Collections/common/SuitableConvertersTab.vue
@@ -12,15 +12,15 @@
             </div>
         </div>
         <b>{{ l("Converter Tool: ") }}</b>
-        <multiselect
+        <Multiselect
             v-model="selectedConverter"
             deselect-label="Can't remove this value"
             track-by="name"
             label="name"
             :options="suitableConverters"
             :searchable="true"
             :allow-empty="true">
-        </multiselect>
+        </Multiselect>
     </div>
 </template>
 

diff --git a/client/src/components/Common/ButtonSpinner.vue b/client/src/components/Common/ButtonSpinner.vue
@@ -6,7 +6,7 @@
         variant="info"
         title="Please Wait..."
         class="d-flex flex-nowrap align-items-center text-nowrap">
-        <font-awesome-icon icon="spinner" class="mr-2" spin />{{ title }}
+        <FontAwesomeIcon icon="spinner" class="mr-2" spin />{{ title }}
     </b-button>
     <b-button
         v-else
@@ -15,7 +15,7 @@
         class="d-flex flex-nowrap align-items-center text-nowrap"
         :title="tooltip"
         @click="$emit('onClick')">
-        <font-awesome-icon icon="play" class="mr-2" />{{ title }}
+        <FontAwesomeIcon icon="play" class="mr-2" />{{ title }}
     </b-button>
 </template>
 <script>

diff --git a/client/src/components/Common/ExportForm.vue b/client/src/components/Common/ExportForm.vue
@@ -5,7 +5,7 @@
             label-for="directory"
             :description="directoryDescription | localize"
             class="mt-3">
-            <files-input id="directory" v-model="directory" mode="directory" :require-writable="true" />
+            <FilesInput id="directory" v-model="directory" mode="directory" :require-writable="true" />
         </b-form-group>
         <b-form-group id="fieldset-name" label-for="name" :description="nameDescription | localize" class="mt-3">
             <b-form-input id="name" v-model="name" :placeholder="namePlaceholder | localize" required></b-form-input>