[24.2] Show Keycloak provider label in UI

client/src/components/HistoryImport.vue

@@ -91,6 +91,7 @@ import { waitOnJob } from "components/JobStates/wait";
 import LoadingSpan from "components/LoadingSpan";
 import { getAppRoot } from "onload/loadConfig";
 import { errorMessageAsString } from "utils/simple-error";
+import { capitalizeFirstLetter } from "utils/strings";
 import Vue, { ref, watch } from "vue";
 
 import { fetchFileSources } from "@/api/remoteFiles";
@@ -165,7 +166,7 @@ export default {
             return this.invocationImport ? "invocation" : "history";
         },
         identifierTextCapitalized() {
-            return this.identifierText.charAt(0).toUpperCase() + this.identifierText.slice(1);
+            return capitalizeFirstLetter(this.identifierText);
         },
         identifierTextPlural() {
             return this.invocationImport ? "invocations" : "histories";

client/src/components/Notifications/Categories/SharedItemNotification.vue

@@ -8,6 +8,7 @@ import { computed } from "vue";
 import type { SharedItemNotification } from "@/api/notifications";
 import { useNotificationsStore } from "@/stores/notificationsStore";
 import { absPath } from "@/utils/redirect";
+import { capitalizeFirstLetter } from "@/utils/strings";
 
 import NotificationActions from "@/components/Notifications/NotificationActions.vue";
 
@@ -21,10 +22,6 @@ const props = defineProps<Props>();
 
 const notificationsStore = useNotificationsStore();
 
-function capitalizeFirstLetter(string: string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
 const content = computed(() => props.notification.content);
 
 const sharedItemType = computed(() => {

client/src/components/User/ExternalIdentities/ExternalIdentities.vue

@@ -46,7 +46,8 @@
                 title="Disconnect External Identity"
                 class="d-block mt-3"
                 @click="onDisconnect(item)">
-                Disconnect {{ item.provider.charAt(0).toUpperCase() + item.provider.slice(1) }} - {{ item.email }}
+                Disconnect {{ capitalizeAsTitle(item.provider_label) }} -
+                {{ item.email }}
             </b-button>
 
             <b-modal
@@ -98,6 +99,8 @@ import { sanitize } from "dompurify";
 import { userLogout } from "utils/logout";
 import Vue from "vue";
 
+import { capitalizeFirstLetter } from "@/utils/strings";
+
 import svc from "./service";
 
 import ExternalLogin from "components/User/ExternalIdentities/ExternalLogin.vue";
@@ -156,6 +159,9 @@ export default {
         Toast.success(notificationMessage);
     },
     methods: {
+        capitalizeAsTitle(str) {
+            return capitalizeFirstLetter(str);
+        },
         loadIdentities() {
             this.loading = true;
             svc.getIdentityProviders()

client/src/components/User/ExternalIdentities/ExternalLogin.vue

@@ -7,6 +7,7 @@ import Multiselect from "vue-multiselect";
 import { useConfig } from "@/composables/config";
 import { withPrefix } from "@/utils/redirect";
 import { errorMessageAsString } from "@/utils/simple-error";
+import { capitalizeFirstLetter } from "@/utils/strings";
 
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -16,7 +17,14 @@ interface Idp {
     OrganizationName: string;
     RandS: boolean;
 }
-type OIDCConfig = Record<string, { icon?: string }>;
+type OIDCConfig = Record<
+    string,
+    {
+        icon?: string;
+        label?: string;
+        custom_button_text?: string;
+    }
+>;
 
 interface Props {
     loginPage?: boolean;
@@ -271,7 +279,12 @@ function getIdpPreference() {
                         <BButton class="d-block mt-3" @click="submitOIDCLogin(idp)">
                             <i :class="oIDCIdps[idp]" />
                             Sign in with
-                            {{ idp.charAt(0).toUpperCase() + idp.slice(1) }}
+                            <span v-if="iDPInfo['label']">
+                                {{ iDPInfo["label"].charAt(0).toUpperCase() + iDPInfo["label"].slice(1) }}
+                            </span>
+                            <span v-else>
+                                {{ capitalizeFirstLetter(idp) }}
+                            </span>
                         </BButton>
                     </span>
                 </div>

client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue

@@ -7,6 +7,7 @@ import { type ComputedRef } from "vue";
 import { type components, GalaxyApi } from "@/api";
 import { getAppRoot } from "@/onload/loadConfig";
 import { errorMessageAsString } from "@/utils/simple-error";
+import { capitalizeFirstLetter } from "@/utils/strings";
 
 import LoadingSpan from "../LoadingSpan.vue";
 import HelpText from "@/components/Help/HelpText.vue";
@@ -369,12 +370,8 @@ const metrics = computed(() => {
     return Object.fromEntries(items.map((item) => [item.y_title, { spec: itemToSpec(item), item: item }]));
 });
 
-function getTimingInTitle(timing: string): string {
-    return timing.charAt(0).toUpperCase() + timing.slice(1);
-}
-
 const timingInTitles = computed(() => {
-    return getTimingInTitle(timing.value);
+    return capitalizeFirstLetter(timing.value);
 });
 
 const groupByInTitles = computed(() => {
@@ -391,9 +388,15 @@ const groupByInTitles = computed(() => {
             <BRow align-h="end" class="mb-2">
                 <BButtonGroup>
                     <b-dropdown right :text="'Timing: ' + timingInTitles">
-                        <b-dropdown-item @click="timing = 'seconds'">{{ getTimingInTitle("seconds") }}</b-dropdown-item>
-                        <b-dropdown-item @click="timing = 'minutes'">{{ getTimingInTitle("minutes") }}</b-dropdown-item>
-                        <b-dropdown-item @click="timing = 'hours'">{{ getTimingInTitle("hours") }}</b-dropdown-item>
+                        <b-dropdown-item @click="timing = 'seconds'">
+                            {{ capitalizeFirstLetter("seconds") }}
+                        </b-dropdown-item>
+                        <b-dropdown-item @click="timing = 'minutes'">
+                            {{ capitalizeFirstLetter("minutes") }}
+                        </b-dropdown-item>
+                        <b-dropdown-item @click="timing = 'hours'">
+                            {{ capitalizeFirstLetter("hours") }}
+                        </b-dropdown-item>
                     </b-dropdown>
                     <b-dropdown right :text="'Group By: ' + groupByInTitles">
                         <b-dropdown-item @click="groupBy = 'tool_id'">Tool</b-dropdown-item>

client/src/utils/strings.ts

@@ -41,3 +41,11 @@ export function snakeCaseToTitleCase(str: string): string {
         .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
         .join(" ");
 }
+
+/**
+ * Capitalize the first letter of a string
+ */
+export function capitalizeFirstLetter(str: string): string {
+    str = str.trim();
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}

lib/galaxy/authnz/managers.py

@@ -132,7 +132,10 @@ def _parse_oidc_backends_config(self, config_file):
                 elif idp in KEYCLOAK_BACKENDS:
                     self.oidc_backends_config[idp] = self._parse_custos_config(child)
                     self.oidc_backends_implementation[idp] = "custos"
-                    self.app.config.oidc[idp] = {"icon": self._get_idp_icon(idp)}
+                    self.app.config.oidc[idp] = {
+                        "icon": self._get_idp_icon(idp),
+                        "label": self.oidc_backends_config[idp].get("label", idp),
+                    }
                 else:
                     raise etree.ParseError("Unknown provider specified")
             if len(self.oidc_backends_config) == 0:

lib/galaxy/webapps/galaxy/controllers/authnz.py

@@ -53,10 +53,14 @@ def index(self, trans, **kwargs):
                 userinfo = jwt.decode(
                     token.id_token, options={"verify_signature": False, "verify_aud": False, "verify_exp": False}
                 )
+                provider_label = trans.app.authnz_manager.oidc_backends_config.get(token.provider, {}).get(
+                    "label", token.provider
+                )
                 rtv.append(
                     {
                         "id": trans.app.security.encode_id(token.id),
                         "provider": token.provider,
+                        "provider_label": provider_label,
                         "email": userinfo["email"],
                         "expiration": str(datetime.datetime.utcfromtimestamp(userinfo["exp"])),
                     }