Merge branch 'release_26.0' into dev

Author: mvdbeek

client/src/api/client/index.ts

@@ -1,5 +1,6 @@
 import createClient from "openapi-fetch";
 
+import { pendingRequestsMiddleware } from "@/api/client/pendingRequestsMiddleware";
 import { createRateLimiterMiddleware } from "@/api/client/rateLimiter";
 import type { GalaxyApiPaths } from "@/api/schema";
 import { getAppRoot } from "@/onload/loadConfig";
@@ -12,6 +13,9 @@ function getBaseUrl() {
 function apiClientFactory() {
     const client = createClient<GalaxyApiPaths>({ baseUrl: getBaseUrl() });
 
+    // Registered first so aborted requests bypass the rate-limiter queue.
+    client.use(pendingRequestsMiddleware);
+
     // TODO: Adjust based on server limits (maybe this goes in Galaxy config?)
     client.use(
         createRateLimiterMiddleware({

client/src/api/client/pendingRequestsMiddleware.ts

@@ -0,0 +1,24 @@
+import type { Middleware } from "openapi-fetch";
+
+import { getPendingAbortSignal, SKIP_PENDING_REQUESTS_HEADER } from "@/api/pendingRequests";
+
+/**
+ * Attaches the shared pending-requests signal to every ``GalaxyApi`` request.
+ * The ``openapi-fetch`` client uses native ``fetch()`` so the axios
+ * interceptor does not apply; without this middleware, login/register
+ * navigations cannot cancel in-flight ``/api/...`` calls and a late
+ * anonymous-cookie response can clobber the authenticated ``galaxysession``
+ * cookie. See ``client/src/api/pendingRequests.ts`` for the race.
+ */
+export const pendingRequestsMiddleware: Middleware = {
+    async onRequest({ request }) {
+        if (request.headers.has(SKIP_PENDING_REQUESTS_HEADER)) {
+            const headers = new Headers(request.headers);
+            headers.delete(SKIP_PENDING_REQUESTS_HEADER);
+            return new Request(request, { headers });
+        }
+        const shared = getPendingAbortSignal();
+        const signal = typeof AbortSignal.any === "function" ? AbortSignal.any([request.signal, shared]) : shared;
+        return new Request(request, { signal });
+    },
+};

client/src/api/pendingRequests.ts

@@ -0,0 +1,58 @@
+/**
+ * Shared ``AbortController`` used by both the axios interceptor and the
+ * ``openapi-fetch`` middleware so we can cancel every in-flight request in
+ * one shot right before a login/register navigation.
+ *
+ * Why this exists: when the server processes a request that carries the old
+ * anonymous ``galaxysession`` cookie *after* ``handle_user_login`` has marked
+ * that session ``is_valid=False``, it creates a fresh anonymous session and
+ * responds with ``Set-Cookie: galaxysession=<new>``. Delivered into the cookie
+ * jar after the login response but before the new page loads, it overwrites
+ * the just-issued authenticated cookie — so the new page loads anonymous and
+ * ``wait_for_logged_in`` times out in selenium. Aborting the TCP connection
+ * before the response headers are parsed prevents that ``Set-Cookie`` from
+ * ever applying.
+ */
+import axios, { type InternalAxiosRequestConfig } from "axios";
+
+let activeController = new AbortController();
+
+/** Explicit opt-out header that the login/register POST itself sets. */
+export const SKIP_PENDING_REQUESTS_HEADER = "x-galaxy-skip-pending-abort";
+
+/**
+ * The signal every request should ride on by default. Read lazily so the
+ * ``openapi-fetch`` middleware picks up the fresh signal after each
+ * ``cancelPendingRequests()`` rotation.
+ */
+export function getPendingAbortSignal(): AbortSignal {
+    return activeController.signal;
+}
+
+/**
+ * Install a request interceptor that attaches the shared signal to every
+ * outgoing axios request that didn't set one itself. Call once at app boot.
+ */
+export function installPendingRequestsInterceptor() {
+    axios.interceptors.request.use((config: InternalAxiosRequestConfig) => {
+        if (config.signal !== undefined) {
+            return config;
+        }
+        if (config.headers?.[SKIP_PENDING_REQUESTS_HEADER]) {
+            delete config.headers[SKIP_PENDING_REQUESTS_HEADER];
+            return config;
+        }
+        config.signal = activeController.signal;
+        return config;
+    });
+}
+
+/**
+ * Abort every request that is using the shared signal (both axios via the
+ * interceptor and ``openapi-fetch`` via its middleware) and install a fresh
+ * controller so subsequent requests can still go out.
+ */
+export function cancelPendingRequests() {
+    activeController.abort();
+    activeController = new AbortController();
+}

client/src/components/History/TargetHistoryLink.vue

@@ -38,7 +38,7 @@ const isCurrentTargetHistory = computed(() => {
                 v-else
                 v-g-tooltip.hover
                 data-description="not current history indicator"
-                class="text-warning"
+                class="text-warning text-nowrap"
                 title="This history is not your currently active history. You can click the link to switch to it.">
                 (not current)
             </span>

client/src/components/Login/LoginForm.vue

@@ -15,6 +15,8 @@ import {
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
+import { SKIP_PENDING_REQUESTS_HEADER } from "@/api/pendingRequests";
+import { discardActiveConnectionsBeforeAuthNavigation } from "@/composables/useAuthNavigation";
 import localize from "@/utils/localization";
 import { withPrefix } from "@/utils/redirect";
 import { errorMessageAsString } from "@/utils/simple-error";
@@ -86,13 +88,22 @@ async function submitLogin() {
         redirect = props.redirect ?? null;
     }
 
+    // Stop polling and abort in-flight axios/GalaxyApi before sending the
+    // login POST — otherwise a late anonymous-cookie response can overwrite
+    // the authenticated cookie we're about to receive.
+    discardActiveConnectionsBeforeAuthNavigation();
+
     try {
-        const response = await axios.post(withPrefix("/user/login"), {
-            login: login.value,
-            password: password.value,
-            redirect: redirect,
-            session_csrf_token: props.sessionCsrfToken,
-        });
+        const response = await axios.post(
+            withPrefix("/user/login"),
+            {
+                login: login.value,
+                password: password.value,
+                redirect: redirect,
+                session_csrf_token: props.sessionCsrfToken,
+            },
+            { headers: { [SKIP_PENDING_REQUESTS_HEADER]: "1" } },
+        );
 
         if (response.data.message && response.data.status) {
             alert(response.data.message);

client/src/components/ProgressBar.vue

@@ -43,6 +43,9 @@ const props = withDefaults(defineProps<Props>(), {
     position: absolute;
     text-align: center;
     width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 .progress-container {
     position: relative;

client/src/components/Register/RegisterForm.vue

@@ -14,8 +14,10 @@ import {
 } from "bootstrap-vue";
 import { computed, type Ref, ref } from "vue";
 
+import { SKIP_PENDING_REQUESTS_HEADER } from "@/api/pendingRequests";
 import { getOIDCIdpsWithRegistration, type OIDCConfig } from "@/components/User/ExternalIdentities/ExternalIDHelper";
 import { Toast } from "@/composables/toast";
+import { discardActiveConnectionsBeforeAuthNavigation } from "@/composables/useAuthNavigation";
 import localize from "@/utils/localization";
 import { withPrefix } from "@/utils/redirect";
 import { errorMessageAsString } from "@/utils/simple-error";
@@ -72,15 +74,24 @@ const registerColumnDisplay = computed(() => Boolean(props.termsUrl));
 async function submit() {
     disableCreate.value = true;
 
+    // Stop polling and abort in-flight axios/GalaxyApi before sending the
+    // register POST — otherwise a late anonymous-cookie response can overwrite
+    // the authenticated cookie we're about to receive.
+    discardActiveConnectionsBeforeAuthNavigation();
+
     try {
-        const response = await axios.post(withPrefix("/user/create"), {
-            email: email.value,
-            username: username.value,
-            password: password.value,
-            confirm: confirm.value,
-            subscribe: subscribe.value,
-            session_csrf_token: props.sessionCsrfToken,
-        });
+        const response = await axios.post(
+            withPrefix("/user/create"),
+            {
+                email: email.value,
+                username: username.value,
+                password: password.value,
+                confirm: confirm.value,
+                subscribe: subscribe.value,
+                session_csrf_token: props.sessionCsrfToken,
+            },
+            { headers: { [SKIP_PENDING_REQUESTS_HEADER]: "1" } },
+        );
 
         if (response.data.message && response.data.status) {
             Toast.info(response.data.message);

client/src/components/Workflow/WorkflowAnnotation.vue

@@ -42,7 +42,7 @@ const workflowTags = computed(() => {
 <template>
     <div v-if="workflow" class="pb-2 pl-2">
         <div class="d-flex justify-content-between align-items-center">
-            <div>
+            <div class="annotation-left">
                 <i v-if="timeElapsed" data-description="workflow annotation time info">
                     <FontAwesomeIcon :icon="faClock" class="mr-1" />
                     <span v-localize>
@@ -52,9 +52,11 @@ const workflowTags = computed(() => {
                 </i>
                 <TargetHistoryLink v-if="props.invocationCreateTime" :target-history-id="props.historyId" />
             </div>
-            <slot name="middle-content" />
-            <div class="d-flex align-items-center">
-                <div class="d-flex flex-column align-items-end mr-2 flex-gapy-1">
+            <div class="annotation-middle">
+                <slot name="middle-content" />
+            </div>
+            <div class="annotation-right">
+                <div class="annotation-right-content">
                     <WorkflowIndicators :workflow="workflow" published-view no-edit-time />
                     <WorkflowInvocationsCount v-if="owned" class="mr-1" :workflow="workflow" />
                 </div>
@@ -69,16 +71,66 @@ const workflowTags = computed(() => {
 </template>
 
 <style scoped lang="scss">
-.history-link-wrapper {
-    max-width: 300px;
-
-    &:deep(.history-link) {
-        .history-link-click {
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            display: block;
-        }
+// Left column: 35% of the width
+.annotation-left {
+    flex: 1 1 0;
+    max-width: 35%;
+    min-width: 0;
+    overflow: hidden;
+
+    // Ensure neither the history name nor "(current)" escape the column.
+    :deep(.history-link-wrapper) {
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    // SwitchToHistoryLink root div must be able to shrink to 0 so the
+    // "(current)" label stays visible as long as there is any room.
+    :deep(.history-link-wrapper > div) {
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    :deep(.history-link) {
+        min-width: 0;
+    }
+
+    :deep(.history-link-click) {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: block;
+    }
+}
+
+// Middle column: 30% of the width
+.annotation-middle {
+    flex: 1 1 0;
+    max-width: 30%;
+    min-width: 0;
+}
+
+// Right column: 35% of the width
+.annotation-right {
+    flex: 1 1 0;
+    max-width: 35%;
+    min-width: 0;
+    overflow: hidden;
+    justify-content: flex-end;
+
+    .annotation-right-content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 0.25rem;
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    // Ensure creator badges stay within the column instead of overflowing
+    :deep(.workflow-indicators) {
+        flex-wrap: wrap;
+        justify-content: flex-end;
     }
 }
 </style>

client/src/composables/useAuthNavigation.ts

@@ -0,0 +1,25 @@
+import { cancelPendingRequests } from "@/api/pendingRequests";
+import { useEntryPointStore } from "@/stores/entryPointStore";
+import { useHistoryStore } from "@/stores/historyStore";
+import { useNotificationsStore } from "@/stores/notificationsStore";
+
+/**
+ * Tear down every long-lived connection and cancel every in-flight request
+ * (both axios and ``openapi-fetch``/GalaxyApi) so that nothing issued under
+ * the old anonymous ``galaxysession`` cookie can land on the server after
+ * ``handle_user_login`` has invalidated it. See
+ * ``client/src/api/pendingRequests.ts`` for the race this guards against.
+ *
+ * Call this synchronously as the first step of a login or registration
+ * submit, before the authenticating POST goes out. The shared abort
+ * controller is rotated, so the login/register POST (issued right after)
+ * will use a fresh signal and is not affected.
+ */
+export function discardActiveConnectionsBeforeAuthNavigation() {
+    // Stop polling watchers first so they can't kick off new fetches, then
+    // abort any requests still in flight via the shared AbortController.
+    useHistoryStore().stopWatchingHistory();
+    useEntryPointStore().stopWatchingEntryPoints();
+    useNotificationsStore().stopWatchingNotifications();
+    cancelPendingRequests();
+}

client/src/entry/analysis/index.ts

@@ -2,6 +2,7 @@
 import { createPinia, PiniaVuePlugin } from "pinia";
 import Vue from "vue";
 
+import { installPendingRequestsInterceptor } from "@/api/pendingRequests";
 import { initGalaxyInstance } from "@/app";
 import { initSentry } from "@/app/addons/sentry";
 import { initWebhooks } from "@/app/addons/webhooks";
@@ -13,6 +14,12 @@ import App from "./App.vue";
 Vue.use(PiniaVuePlugin);
 const pinia = createPinia();
 
+// Attach the shared AbortController signal to every outgoing axios request
+// so we can cancel in-flight anonymous-cookie requests before login/register
+// navigates — otherwise their late ``Set-Cookie: galaxysession=<anon>`` can
+// clobber the authenticated cookie.
+installPendingRequestsInterceptor();
+
 window.addEventListener("load", async () => {
     // Create Galaxy object
     const Galaxy = await initGalaxyInstance();