Refactor client imports for better ES module compatibility

client/src/app/app.test.js

@@ -1,7 +1,8 @@
 import galaxyOptions from "@tests/test-data/bootstrapped";
-import { getGalaxyInstance, setGalaxyInstance } from "app";
 import { suppressDebugConsole } from "tests/jest/helpers";
 
+import { getGalaxyInstance, setGalaxyInstance } from "@/app";
+
 export function setupTestGalaxy(galaxyOptions_ = null) {
     galaxyOptions_ = galaxyOptions_ || galaxyOptions;
     setGalaxyInstance((GalaxyApp) => new GalaxyApp(galaxyOptions_));

client/src/app/galaxy.js

@@ -1,5 +1,5 @@
-import { create, dialog } from "utils/data";
-import { _getUserLocale, _setUserLocale, localize } from "utils/localization";
+import { create, dialog } from "@/utils/data";
+import { _getUserLocale, _setUserLocale, localize } from "@/utils/localization";
 
 import { getGalaxyInstance } from "./singleton";
 import userModel from "./user-model";

client/src/app/monitor.js

@@ -3,8 +3,9 @@
 // through getGalaxyInstance, and rarely with setGalaxyInstance
 
 import config from "config";
-import { getAppRoot } from "onload/loadConfig";
-import { serverPath } from "utils/serverPath";
+
+import { getAppRoot } from "@/onload/loadConfig";
+import { serverPath } from "@/utils/serverPath";
 
 import { getGalaxyInstance, setGalaxyInstance } from "./singleton";
 

client/src/app/singleton.js

@@ -3,7 +3,8 @@
  */
 
 import config from "config";
-import { serverPath } from "utils/serverPath";
+
+import { serverPath } from "@/utils/serverPath";
 
 import { GalaxyApp } from "./galaxy";
 

client/src/app/user-model.js

@@ -1,5 +1,5 @@
-import { getAppRoot } from "onload/loadConfig";
-import _l from "utils/localization";
+import { getAppRoot } from "@/onload/loadConfig";
+import _l from "@/utils/localization";
 
 const CURRENT_ID_STR = "current";
 

client/src/bundleEntries.js

@@ -3,7 +3,7 @@
  */
 
 // legacy/grid_base.mako
-export { default as LegacyGridView } from "legacy/grid/grid-view";
+export { default as LegacyGridView } from "@/legacy/grid/grid-view";
 
 // webapps/reports/run_stats.mako
-export { create_chart, create_histogram } from "reports/run_stats";
+export { create_chart, create_histogram } from "@/reports/run_stats";

client/src/components/AboutGalaxy.vue

@@ -117,7 +117,7 @@ const versionUserDocumentationUrl = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 
 .about-galaxy h1 {
     --fa-primary-color: #{$brand-primary};

client/src/components/ActivityBar/ActivityBar.vue

@@ -371,7 +371,7 @@ defineExpose({
 </template>
 
 <style lang="scss">
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 
 .activity-bar {
     background: $panel-bg-color;

client/src/components/ActivityBar/ActivityItem.vue

@@ -112,7 +112,7 @@ const meta = computed(() => store.metaForId(props.id));
 </template>
 
 <style scoped lang="scss">
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 
 .activity-item {
     position: relative;

client/src/components/ActivityBar/ActivitySettings.vue

@@ -147,7 +147,7 @@ function executeActivity(activity: Activity) {
 </template>
 
 <style lang="scss">
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 
 .activity-settings-item {
     background: none;

client/src/components/Annotation.vue

@@ -1,4 +1,4 @@
 <template>
     <ClickToEdit
         ref="annotationInput"
         v-slot="{ toggleEdit, placeholder, stateValidator }"
@@ -24,9 +24,10 @@
 </template>
 
 <script>
-import ClickToEdit from "./ClickToEdit";
 import DebouncedInput from "./DebouncedInput";
 
+import ClickToEdit from "./ClickToEdit.vue";
+
 export default {
     components: {
         DebouncedInput,

client/src/components/ClickToEdit.vue

@@ -80,8 +80,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "theme/blue.scss";
-@import "~scss/mixins.scss";
+@import "@/style/scss/theme/blue.scss";
+@import "@/style/scss/mixins.scss";
 
 .clickToEdit {
     position: relative;

client/src/components/Collections/BuildFileSetWizard.vue

@@ -340,7 +340,7 @@ const {
 </template>
 
 <style lang="scss" scoped>
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 @import "@/components/Collections/wizard/workbook-dropzones.scss";
 
 // modeled a bit after upload-helper in the upload component...

client/src/components/Collections/ListCollectionCreator.vue

@@ -703,7 +703,7 @@ function selectionAsHdaSummary(value: any): HDASummary {
 
 <style scoped lang="scss">
 @import "base.scss";
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 
 .list-collection-creator {
     .footer {

client/src/components/Collections/ListWizard.vue

@@ -24,7 +24,7 @@ import ListCollectionCreator from "./ListCollectionCreator.vue";
 import WhichBuilder from "./ListWizard/WhichBuilder.vue";
 import PairedOrUnpairedListCollectionCreator from "./PairedOrUnpairedListCollectionCreator.vue";
 import GenericWizard from "@/components/Common/Wizard/GenericWizard.vue";
-import RuleCollectionBuilder from "components/RuleCollectionBuilder.vue";
+import RuleCollectionBuilder from "@/components/RuleCollectionBuilder.vue";
 
 interface Props {
     initialAdvanced: boolean;

client/src/components/Collections/RuleBasedCollectionCreatorModal.js

@@ -1,8 +1,8 @@
-import _l from "utils/localization";
-import Modal from "utils/modal";
 import Vue from "vue";
 
 import { rawToTable } from "@/components/Collections/tables";
+import _l from "@/utils/localization";
+import Modal from "@/utils/modal";
 
 const modal = new Modal();
 

client/src/components/Collections/common/CellStatusComponent.vue

@@ -64,7 +64,7 @@ export default defineComponent({
 </template>
 
 <style lang="scss" scoped>
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 
 .status-ok {
     color: $brand-success;

client/src/components/Collections/common/CollectionCreator.vue

@@ -230,10 +230,10 @@ watch(
 
 <style lang="scss">
 $fa-font-path: "../../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
-@import "~@fortawesome/fontawesome-free/scss/_variables";
-@import "~@fortawesome/fontawesome-free/scss/solid";
-@import "~@fortawesome/fontawesome-free/scss/fontawesome";
-@import "~@fortawesome/fontawesome-free/scss/brands";
+@import "@fortawesome/fontawesome-free/scss/_variables";
+@import "@fortawesome/fontawesome-free/scss/solid";
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import "@fortawesome/fontawesome-free/scss/brands";
 
 // Outside the modal - we need to set a max width on the help so ellipses display
 // doesn't cause it to grow without bound. Would greater appreciate a better workaround.

client/src/components/Collections/common/PairedDatasetCellComponent.vue

@@ -113,7 +113,7 @@
             </div>
         </div>
         <div v-else class="paired-datasets-cell">
             <div
                 class="icon-wrapper"
                 :class="{ dragging: dragging, 'drop-target': dropOver }"
                 :draggable="true"
@@ -146,7 +146,7 @@
 </template>
 
 <style lang="scss">
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 
 .paired-datasets-cell {
     display: flex;

client/src/components/Collections/wizard/CardUploadWorkbook.vue

@@ -48,7 +48,7 @@ const emit = defineEmits(["workbookContents"]);
 </template>
 
 <style scoped>
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 @import "@/components/Collections/wizard/workbook-dropzones.scss";
 
 .dropzone {

client/src/components/Collections/wizard/PasteData.vue

@@ -50,7 +50,7 @@ const handleDrop = (event: DragEvent) => {
 </template>
 
 <style scoped>
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 
 .paste-data {
     min-width: 576px;

client/src/components/Collections/wizard/workbook-dropzones.scss

@@ -1,4 +1,4 @@
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 
 .dropzone.highlight {
     border-width: 2px;

client/src/components/Common/DraggableSeparator.vue

@@ -121,7 +121,7 @@ const style = computed(() => ({
 </template>
 
 <style scoped lang="scss">
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 
 $border-width: 6px;
 

client/src/components/Common/GCard.vue

@@ -681,7 +681,7 @@ function onKeyDown(event: KeyboardEvent) {
 </template>
 
 <style scoped lang="scss">
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 @import "_breakpoints.scss";
 
 .g-card {

client/src/components/Common/Heading.vue

@@ -95,7 +95,7 @@ const element = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-@import "scss/theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 
 // prettier-ignore
 h1, h2, h3, h4, h5, h6 {

client/src/components/Common/ItemListEditor.vue

@@ -158,7 +158,7 @@ function resetForm() {
 </template>
 
 <style lang="scss" scoped>
-@import "custom_theme_variables.scss";
+@import "@/style/scss/custom_theme_variables.scss";
 .error {
     color: var(--color-red-500);
 }

client/src/components/Common/TextSummary.vue

@@ -66,7 +66,7 @@ const textTooLong = computed(() => {
 </template>
 
 <style scoped lang="scss">
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 
 .text-summary {
     &.text-summary-short {

client/src/components/Common/VerticalSeparator.vue

@@ -10,7 +10,7 @@
 </template>
 
 <style scoped lang="scss">
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 
 .vr-container {
     position: relative;

client/src/components/Common/Wizard/GenericWizard.vue

@@ -233,7 +233,7 @@ const bodyStyle = computed(() => {
 </template>
 
 <style lang="scss">
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 
 .wizard {
     padding: 0;

client/src/components/ConfigTemplates/SourceOptionsList.vue

@@ -98,7 +98,7 @@ function getOptionType(type: string) {
 </template>
 
 <style scoped lang="scss">
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 @import "_breakpoints.scss";
 
 .source-options-list {

client/src/components/CopyToClipboard.vue

@@ -5,7 +5,8 @@
 <script>
 import { faCopy } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { copy } from "utils/clipboard";
+
+import { copy } from "@/utils/clipboard";
 
 export default {
     components: {

client/src/components/DataDialog/DataDialog.test.js

@@ -5,7 +5,7 @@ import { Services } from "./services";
 import { UrlTracker } from "./utilities";
 
 import DataDialog from "./DataDialog.vue";
-import SelectionDialog from "components/SelectionDialog/SelectionDialog.vue";
+import SelectionDialog from "@/components/SelectionDialog/SelectionDialog.vue";
 
 jest.mock("app");
 

client/src/components/DataDialog/services.js

@@ -1,5 +1,6 @@
 import axios from "axios";
-import { getAppRoot } from "onload/loadConfig";
+
+import { getAppRoot } from "@/onload/loadConfig";
 
 /** Data populator traverses raw server responses **/
 export class Services {

client/src/components/Dataset/DatasetView.vue

@@ -240,7 +240,7 @@ watch(
 </template>
 
 <style lang="scss" scoped>
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 
 .header-details {
     padding-left: 1rem;

client/src/components/DecodedId.vue

@@ -2,10 +2,11 @@
     <span v-if="decoded_id">({{ decoded_id }})</span>
 </template>
 <script>
-import { getGalaxyInstance } from "app";
 import axios from "axios";
-import { getAppRoot } from "onload/loadConfig";
-import { rethrowSimple } from "utils/simple-error";
+
+import { getGalaxyInstance } from "@/app";
+import { getAppRoot } from "@/onload/loadConfig";
+import { rethrowSimple } from "@/utils/simple-error";
 
 export default {
     props: {

client/src/components/DragGhost.vue

@@ -2,9 +2,10 @@
 import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
-import { useEventStore } from "stores/eventStore";
 import { computed } from "vue";
 
+import { useEventStore } from "@/stores/eventStore";
+
 import TextShort from "@/components/Common/TextShort.vue";
 
 const eventStore = useEventStore();
@@ -28,7 +29,7 @@ const name = computed(() => {
 </template>
 
 <style scoped lang="scss">
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 
 #drag-ghost {
     background: $brand-light;

client/src/components/Form/Elements/FormBoolean.test.js

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

client/src/components/Form/Elements/FormCheck.test.js

@@ -1,7 +1,7 @@
 import { mount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
 
-import MountTarget from "./FormCheck";
+import MountTarget from "./FormCheck.vue";
 
 const localVue = getLocalVue(true);
 

client/src/components/Form/Elements/FormDirectory.vue

@@ -49,10 +49,10 @@
 <script>
 import { faFolderOpen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { FilesDialog } from "components/FilesDialog";
-import { Toast } from "composables/toast";
-import _l from "utils/localization";
 
+import { FilesDialog } from "@/components/FilesDialog";
+import { Toast } from "@/composables/toast";
+import _l from "@/utils/localization";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import GButton from "@/components/BaseComponents/GButton.vue";

client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue

@@ -26,7 +26,7 @@ defineProps<{
 </template>
 
 <style lang="scss" scoped>
-@import "theme/blue.scss";
+@import "@/style/scss/theme/blue.scss";
 .ui-drilldown {
     $ui-drilldown-border: 0.5px solid $gray-500;