[24.2] Display upload help highlight only once and include Rule-based upload info

client/src/components/Help/terms.yml

@@ -145,3 +145,5 @@ galaxy:
       A utility for uploading files to a Galaxy server from the command line. Use ``galaxy-upload`` to upload
       file(s) to a Galaxy server, and ``galaxy-history-search``, a helper utility to find Galaxy histories
       to pass to the ``galaxy-upload`` command.
+    ruleBased: |
+      Galaxy can bulk import lists & tables of URLs into datasets or collections using reproducible rules.

client/src/components/Upload/UploadModal.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { BModal } from "bootstrap-vue";
+import { BCarousel, BCarouselSlide, BModal } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { ref, watch } from "vue";
 
@@ -13,7 +13,7 @@ import ExternalLink from "../ExternalLink.vue";
 import HelpText from "../Help/HelpText.vue";
 import UploadContainer from "./UploadContainer.vue";
 
-const { currentUser } = storeToRefs(useUserStore());
+const { currentUser, hasSeenUploadHelp } = storeToRefs(useUserStore());
 const { currentHistoryId, currentHistory } = useUserHistories(currentUser);
 
 const { config, isConfigLoaded } = useConfig();
@@ -65,7 +65,14 @@ async function open(overrideOptions) {
 
 watch(
     () => showModal.value,
-    (modalShown) => setIframeEvents(["galaxy_main"], modalShown)
+    (modalShown) => {
+        setIframeEvents(["galaxy_main"], modalShown);
+
+        // once the modal closes the first time a user sees help, we never show it again
+        if (!modalShown && !hasSeenUploadHelp.value) {
+            hasSeenUploadHelp.value = true;
+        }
+    }
 );
 
 defineExpose({
@@ -91,12 +98,33 @@ defineExpose({
                         to <b>{{ currentHistory.name }}</b>
                     </span>
                 </h2>
-                <span>
-                    <ExternalLink href="https://galaxy-upload.readthedocs.io/en/latest/"> Click here </ExternalLink>
-                    to check out the
-                    <HelpText uri="galaxy.upload.galaxyUploadUtil" text="galaxy-upload" />
-                    util!
-                </span>
+
+                <BCarousel v-if="!hasSeenUploadHelp" :interval="4000" no-touch>
+                    <BCarouselSlide>
+                        <template v-slot:img>
+                            <span class="text-nowrap float-right">
+                                <ExternalLink href="https://galaxy-upload.readthedocs.io/en/latest/">
+                                    Click here
+                                </ExternalLink>
+                                to check out the
+                                <HelpText uri="galaxy.upload.galaxyUploadUtil" text="galaxy-upload" />
+                                util!
+                            </span>
+                        </template>
+                    </BCarouselSlide>
+                    <BCarouselSlide>
+                        <template v-slot:img>
+                            <span class="text-nowrap float-right">
+                                More info on <HelpText uri="galaxy.upload.ruleBased" text="Rule-based" /> uploads
+                                <ExternalLink
+                                    href="https://training.galaxyproject.org/training-material/topics/galaxy-interface/tutorials/upload-rules/tutorial.html">
+                                    here
+                                </ExternalLink>
+                                .
+                            </span>
+                        </template>
+                    </BCarouselSlide>
+                </BCarousel>
             </div>
         </template>
         <UploadContainer

client/src/stores/userStore.ts

@@ -28,6 +28,7 @@ export const useUserStore = defineStore("userStore", () => {
     const currentPreferences = ref<Preferences | null>(null);
 
     const preferredListViewMode = useUserLocalStorage("user-store-preferred-list-view-mode", "grid", currentUser);
+    const hasSeenUploadHelp = useUserLocalStorage("user-store-seen-upload-help", false, currentUser);
 
     let loadPromise: Promise<void> | null = null;
 
@@ -148,6 +149,7 @@ export const useUserStore = defineStore("userStore", () => {
         currentTheme,
         currentFavorites,
         preferredListViewMode,
+        hasSeenUploadHelp,
         loadUser,
         matchesCurrentUsername,
         setCurrentUser,