Merge pull request galaxyproject#16345 from dannon/client-import-sorting

Client import sorting

client/.eslintrc.js

@@ -45,6 +45,34 @@ const baseRules = {
     "vuejs-accessibility/no-autofocus": "error",
     "vuejs-accessibility/no-static-element-interactions": "warn",
     "vuejs-accessibility/tabindex-no-positive": "error",
+
+    // import and export sorting and linting.
+    "simple-import-sort/imports": [
+        "error",
+        {
+            groups: [
+                // Side effect imports.
+                ["^\\u0000"],
+                // Node.js builtins prefixed with `node:`.
+                ["^node:"],
+                // Packages.
+                // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
+                ["^@?\\w"],
+                // Absolute imports and other imports such as Vue-style `@/foo`.
+                // Anything not matched in another group.
+                ["^"],
+                // Relative imports.
+                // Anything that starts with a dot.
+                ["^\\."],
+                // anything that ends in .vue
+                ["\\.vue$"],
+            ],
+        },
+    ],
+    "simple-import-sort/exports": "error",
+    "import/first": "error",
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error",
 };
 
 const baseExtends = [
@@ -54,6 +82,8 @@ const baseExtends = [
     "plugin:vuejs-accessibility/recommended",
 ];
 
+const basePlugins = ["simple-import-sort", "import"];
+
 module.exports = {
     root: true,
     extends: baseExtends,
@@ -64,6 +94,7 @@ module.exports = {
     },
     rules: baseRules,
     ignorePatterns: ["dist", "src/libs", "src/nls", "src/legacy"],
+    plugins: basePlugins,
     overrides: [
         {
             files: ["**/*.test.js", "**/*.test.ts", "**/tests/jest/**"],
@@ -101,7 +132,7 @@ module.exports = {
                 extraFileExtensions: [".vue"],
                 project: "./tsconfig.json",
             },
-            plugins: ["@typescript-eslint"],
+            plugins: [...basePlugins, "@typescript-eslint"],
         },
     ],
 };

client/package.json

@@ -147,8 +147,8 @@
     "@types/lodash.isequal": "^4.5.6",
     "@types/markdown-it": "^12.2.3",
     "@types/underscore": "^1.11.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.8",
-    "@typescript-eslint/parser": "^5.59.8",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
     "@vue/test-utils": "^1.3.4",
     "@vue/tsconfig": "^0.4.0",
     "@vue/vue2-jest": "^29.2.2",
@@ -162,9 +162,11 @@
     "css-loader": "^6.7.3",
     "css-minimizer-webpack-plugin": "^4.0.0",
     "del": "^6.0.0",
-    "eslint": "^8.41.0",
+    "eslint": "^8.43.0",
     "eslint-plugin-compat": "^4.1.4",
-    "eslint-plugin-vue": "^9.14.1",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-vue": "^9.15.1",
     "eslint-plugin-vuejs-accessibility": "^2.1.0",
     "expose-loader": "^4.0.0",
     "gulp": "^4.0.2",

client/src/app/app.test.js

@@ -1,6 +1,6 @@
+import galaxyOptions from "@tests/test-data/bootstrapped";
 import { getGalaxyInstance, setGalaxyInstance } from "app";
 import Backbone from "backbone";
-import galaxyOptions from "@tests/test-data/bootstrapped";
 
 export function setupTestGalaxy(galaxyOptions_ = null) {
     galaxyOptions_ = galaxyOptions_ || galaxyOptions;

client/src/app/base-mvc.js

@@ -1,6 +1,6 @@
+import Backbone from "backbone";
 import $ from "jquery";
 import _ from "underscore";
-import Backbone from "backbone";
 import _l from "utils/localization";
 
 //==============================================================================

client/src/app/galaxy.js

@@ -1,10 +1,11 @@
+import { getGalaxyInstance } from "app";
+import Backbone from "backbone";
 import $ from "jquery";
 import _ from "underscore";
-import Backbone from "backbone";
-import userModel from "./user-model";
-import { localize, _setUserLocale, _getUserLocale } from "utils/localization";
-import { getGalaxyInstance } from "app";
 import { create, dialog } from "utils/data";
+import { _getUserLocale, _setUserLocale, localize } from "utils/localization";
+
+import userModel from "./user-model";
 
 // ============================================================================
 /** Base galaxy client-side application.

client/src/app/index.js

@@ -1,2 +1,5 @@
-export { setGalaxyInstance, getGalaxyInstance } from "./singleton";
+/* eslint-disable simple-import-sort/exports */
+// order is important here for unit tests, which is unfortunate and should be
+// fixed in the future
+export { getGalaxyInstance, setGalaxyInstance } from "./singleton";
 export { default as galaxyFacade } from "./monitor";

client/src/app/monitor.js

@@ -3,9 +3,9 @@
 // through getGalaxyInstance, and rarely with setGalaxyInstance
 
 import { getGalaxyInstance, setGalaxyInstance } from "app";
+import config from "config";
 import { getAppRoot } from "onload/loadConfig";
 import { serverPath } from "utils/serverPath";
-import config from "config";
 
 const galaxyStub = {
     root: getAppRoot(),

client/src/app/singleton.js

@@ -3,9 +3,10 @@
  */
 
 import config from "config";
-import { GalaxyApp } from "./galaxy";
 import { serverPath } from "utils/serverPath";
 
+import { GalaxyApp } from "./galaxy";
+
 export function setGalaxyInstance(factory) {
     if (!config.testBuild === true) {
         console.warn("setGalaxyInstance", serverPath());

client/src/bundleEntries.js

@@ -9,19 +9,22 @@
 
 /* jquery and _ are exposed via expose-loader while several external plugins rely on these */
 import $ from "jquery"; // eslint-disable-line no-unused-vars
+import Client from "mvc/visualization/chart/chart-client";
 import _ from "underscore"; // eslint-disable-line no-unused-vars
+import Circster from "viz/circster";
+import { TracksterUIView } from "viz/trackster";
+
+// Previously "chart"
 
 export { getGalaxyInstance, setGalaxyInstance } from "app";
-import { TracksterUIView } from "viz/trackster";
-export { TracksterUI } from "viz/trackster";
-import Circster from "viz/circster";
-export { PhylovizView as phyloviz } from "viz/phyloviz";
-export { SweepsterVisualization, SweepsterVisualizationView } from "viz/sweepster";
-export { createTabularDatasetChunkedView } from "mvc/dataset/data";
+export { runTour } from "components/Tour/runTour";
 export { default as LegacyGridView } from "legacy/grid/grid-view";
+export { createTabularDatasetChunkedView } from "mvc/dataset/data";
 export { create_chart, create_histogram } from "reports/run_stats";
-export { runTour } from "components/Tour/runTour";
 export { Toast } from "ui/toast"; // TODO: remove when external consumers are updated/gone (IES right now)
+export { PhylovizView as phyloviz } from "viz/phyloviz";
+export { SweepsterVisualization, SweepsterVisualizationView } from "viz/sweepster";
+export { TracksterUI } from "viz/trackster";
 
 export function trackster(options) {
     new TracksterUIView(options);
@@ -32,12 +35,9 @@ export function circster(options) {
 }
 
 // Previously wandering around as window.thing = thing in the onload script
-export { show_in_overlay, hide_modal, show_message, show_modal, Modal } from "layout/modal";
-export { make_popupmenu, make_popup_menus } from "ui/popupmenu";
+export { hide_modal, Modal, show_in_overlay, show_message, show_modal } from "layout/modal";
+export { make_popup_menus, make_popupmenu } from "ui/popupmenu";
 export { default as async_save_text } from "utils/async-save-text";
-
-// Previously "chart"
-import Client from "mvc/visualization/chart/chart-client";
 export function chart(options) {
     return new Client(options);
 }

client/src/bundleToolshed.js

@@ -7,5 +7,5 @@ import $ from "jquery"; // eslint-disable-line no-unused-vars
 import _ from "underscore"; // eslint-disable-line no-unused-vars
 
 export { default as LegacyGridView } from "legacy/grid/grid-view";
-export { default as ToolshedGroups } from "toolshed/toolshed.groups";
 export { default as store } from "storemodern";
+export { default as ToolshedGroups } from "toolshed/toolshed.groups";

client/src/components/AboutGalaxy.vue

@@ -4,12 +4,13 @@
 
 import { computed } from "vue";
 
-import { getAppRoot } from "@/onload/loadConfig";
 import { useConfig } from "@/composables/config";
-import UtcDate from "@/components/UtcDate.vue";
-import License from "@/components/License/License.vue";
-import ExternalLink from "@/components/ExternalLink.vue";
+import { getAppRoot } from "@/onload/loadConfig";
+
 import Heading from "@/components/Common/Heading.vue";
+import ExternalLink from "@/components/ExternalLink.vue";
+import License from "@/components/License/License.vue";
+import UtcDate from "@/components/UtcDate.vue";
 
 const { config, isLoaded } = useConfig();
 

client/src/components/ActivityBar/ActivityBar.test.js

@@ -1,10 +1,12 @@
 import { createTestingPinia } from "@pinia/testing";
-import { PiniaVuePlugin } from "pinia";
 import { shallowMount } from "@vue/test-utils";
+import { PiniaVuePlugin } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
+
+import { useConfig } from "@/composables/config";
 import { useActivityStore } from "@/stores/activityStore";
 import { useEventStore } from "@/stores/eventStore";
-import { useConfig } from "@/composables/config";
+
 import mountTarget from "./ActivityBar.vue";
 
 jest.mock("composables/config");

client/src/components/ActivityBar/ActivityBar.vue

@@ -1,22 +1,24 @@
 <script setup lang="ts">
-import draggable from "vuedraggable";
-import { ref, type Ref } from "vue";
 import { storeToRefs } from "pinia";
-import { useConfig } from "@/composables/config";
-import { useUserStore } from "@/stores/userStore";
-import { useActivityStore, type Activity } from "@/stores/activityStore";
+import { type Ref, ref } from "vue";
 import { useRoute } from "vue-router/composables";
+import draggable from "vuedraggable";
+
+import { useConfig } from "@/composables/config";
 import { convertDropData } from "@/stores/activitySetup";
+import { type Activity, useActivityStore } from "@/stores/activityStore";
 import { useEventStore } from "@/stores/eventStore";
-import ContextMenu from "@/components/Common/ContextMenu.vue";
-import FlexPanel from "@/components/Panels/FlexPanel.vue";
-import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
-import WorkflowBox from "@/components/Panels/WorkflowBox.vue";
+import { useUserStore } from "@/stores/userStore";
+
 import ActivityItem from "./ActivityItem.vue";
 import ActivitySettings from "./ActivitySettings.vue";
 import InteractiveItem from "./Items/InteractiveItem.vue";
-import UploadItem from "./Items/UploadItem.vue";
 import NotificationItem from "./Items/NotificationItem.vue";
+import UploadItem from "./Items/UploadItem.vue";
+import ContextMenu from "@/components/Common/ContextMenu.vue";
+import FlexPanel from "@/components/Panels/FlexPanel.vue";
+import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
+import WorkflowBox from "@/components/Panels/WorkflowBox.vue";
 
 const { config } = useConfig();
 

client/src/components/ActivityBar/ActivityItem.test.js

@@ -1,5 +1,6 @@
 import { mount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
+
 import mountTarget from "./ActivityItem.vue";
 
 const localVue = getLocalVue();

client/src/components/ActivityBar/ActivityItem.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useRouter } from "vue-router/composables";
-import Popper from "@/components/Popper/Popper.vue";
+
 import TextShort from "@/components/Common/TextShort.vue";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import Popper from "@/components/Popper/Popper.vue";
 
 const router = useRouter();
 

client/src/components/ActivityBar/ActivitySettings.test.js

@@ -1,9 +1,11 @@
 import { createTestingPinia } from "@pinia/testing";
-import { PiniaVuePlugin } from "pinia";
 import { mount } from "@vue/test-utils";
+import { PiniaVuePlugin } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
+
 import { Activities } from "@/stores/activitySetup";
 import { useActivityStore } from "@/stores/activityStore";
+
 import mountTarget from "./ActivitySettings.vue";
 
 const localVue = getLocalVue();

client/src/components/ActivityBar/ActivitySettings.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { computed, ref, type Ref, type ComputedRef } from "vue";
-import { storeToRefs } from "pinia";
-import { useActivityStore, type Activity } from "@/stores/activityStore";
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faSquare } from "@fortawesome/free-regular-svg-icons";
-import { faCheckSquare, faTrash, faThumbtack } from "@fortawesome/free-solid-svg-icons";
+import { faCheckSquare, faThumbtack, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { storeToRefs } from "pinia";
+import { computed, type ComputedRef, type Ref, ref } from "vue";
+
+import { type Activity, useActivityStore } from "@/stores/activityStore";
+
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 
 library.add({

client/src/components/ActivityBar/Items/InteractiveItem.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import { storeToRefs } from "pinia";
+import { computed } from "vue";
+
 import { useEntryPointStore } from "@/stores/entryPointStore";
+
 import ActivityItem from "components/ActivityBar/ActivityItem.vue";
 
 const { entryPoints } = storeToRefs(useEntryPointStore());

client/src/components/ActivityBar/Items/NotificationItem.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import { storeToRefs } from "pinia";
+import { computed } from "vue";
+
 import { useNotificationsStore } from "@/stores/notificationsStore";
+
 import ActivityItem from "components/ActivityBar/ActivityItem.vue";
 
 const { totalUnreadCount } = storeToRefs(useNotificationsStore());

client/src/components/ActivityBar/Items/UploadItem.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, type Ref } from "vue";
+import { onMounted, onUnmounted, type Ref, ref } from "vue";
+
+import { eventHub } from "@/components/plugins/eventHub.js";
+import { useGlobalUploadModal } from "@/composables/globalUploadModal.js";
+import Query from "@/utils/query-string-parsing.js";
+
 import ActivityItem from "components/ActivityBar/ActivityItem.vue";
-// @ts-ignore
-import Query from "utils/query-string-parsing.js";
-// @ts-ignore
-import { useGlobalUploadModal } from "composables/globalUploadModal.js";
-// @ts-ignore
-import { eventHub } from "components/plugins/eventHub.js";
 
 const { openGlobalUploadModal } = useGlobalUploadModal();
 

client/src/components/Annotation.vue

@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import DebouncedInput from "./DebouncedInput";
 import ClickToEdit from "./ClickToEdit";
+import DebouncedInput from "./DebouncedInput";
 
 export default {
     components: {

client/src/components/AvailableDatatypes/AvailableDatatypes.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useDetailedDatatypes, type DetailedDatatypes } from "@/composables/datatypes";
+
+import { type DetailedDatatypes, useDetailedDatatypes } from "@/composables/datatypes";
 import { useFilterObjectArray } from "@/composables/filter";
+
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 
 const filter = ref("");

client/src/components/Citation/Citation.vue

@@ -7,9 +7,9 @@
 </template>
 
 <script>
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 library.add(faExternalLinkAlt);