From 6c72874c78705fac6d1518d32bf459d135d7d2b8 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 22 Jan 2025 17:05:33 -0600
Subject: [PATCH 1/3] Show Keycloak provider label in UI

Fixes https://github.com/galaxyproject/galaxy/issues/19410

If there is a `<label>` provided in `oidc_backends_config`, we show that in the UI instead of just the provider name.
---
 .../User/ExternalIdentities/ExternalIdentities.vue         | 3 ++-
 .../components/User/ExternalIdentities/ExternalLogin.vue   | 7 ++++++-
 lib/galaxy/authnz/managers.py                              | 5 ++++-
 lib/galaxy/webapps/galaxy/controllers/authnz.py            | 4 ++++
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
index 6714b06b5da6..c2385e4c7e17 100644
--- a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
+++ b/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 {{ item.provider_label.charAt(0).toUpperCase() + item.provider_label.slice(1) }} -
+                {{ item.email }}
             </b-button>
 
             <b-modal
diff --git a/client/src/components/User/ExternalIdentities/ExternalLogin.vue b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
index 2bcf4c1f4b5a..db120eefe02d 100644
--- a/client/src/components/User/ExternalIdentities/ExternalLogin.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
@@ -271,7 +271,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>
+                                {{ idp.charAt(0).toUpperCase() + idp.slice(1) }}
+                            </span>
                         </BButton>
                     </span>
                 </div>
diff --git a/lib/galaxy/authnz/managers.py b/lib/galaxy/authnz/managers.py
index 8a1145b9fd46..efc6ad4c8264 100644
--- a/lib/galaxy/authnz/managers.py
+++ b/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:
diff --git a/lib/galaxy/webapps/galaxy/controllers/authnz.py b/lib/galaxy/webapps/galaxy/controllers/authnz.py
index f7e3f459ec3f..e4a07b28092e 100644
--- a/lib/galaxy/webapps/galaxy/controllers/authnz.py
+++ b/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"])),
                     }

From 03d5384a1426dc576902a8626fd351c764afb4bf Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 24 Jan 2025 15:46:41 -0600
Subject: [PATCH 2/3] improve `OIDCConfig` type to prevent TS errors

---
 .../components/User/ExternalIdentities/ExternalLogin.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/src/components/User/ExternalIdentities/ExternalLogin.vue b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
index db120eefe02d..d24b869ce488 100644
--- a/client/src/components/User/ExternalIdentities/ExternalLogin.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
@@ -16,7 +16,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;

From 99f3f2024092bdf582a866662f187ebad1d81753 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 24 Jan 2025 16:11:31 -0600
Subject: [PATCH 3/3] add `capitalizeFirstLetter` function to `utils/strings`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: David López <46503462+davelopez@users.noreply.github.com>
---
 client/src/components/HistoryImport.vue       |  3 ++-
 .../Categories/SharedItemNotification.vue     |  5 +----
 .../ExternalIdentities/ExternalIdentities.vue |  7 ++++++-
 .../User/ExternalIdentities/ExternalLogin.vue |  3 ++-
 .../WorkflowInvocationMetrics.vue             | 19 +++++++++++--------
 client/src/utils/strings.ts                   |  8 ++++++++
 6 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/client/src/components/HistoryImport.vue b/client/src/components/HistoryImport.vue
index 08b1eb44b21a..f024c0991485 100644
--- a/client/src/components/HistoryImport.vue
+++ b/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";
diff --git a/client/src/components/Notifications/Categories/SharedItemNotification.vue b/client/src/components/Notifications/Categories/SharedItemNotification.vue
index b141c87ed308..dcd3de959765 100644
--- a/client/src/components/Notifications/Categories/SharedItemNotification.vue
+++ b/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(() => {
diff --git a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
index c2385e4c7e17..0165358c79e7 100644
--- a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
@@ -46,7 +46,7 @@
                 title="Disconnect External Identity"
                 class="d-block mt-3"
                 @click="onDisconnect(item)">
-                Disconnect {{ item.provider_label.charAt(0).toUpperCase() + item.provider_label.slice(1) }} -
+                Disconnect {{ capitalizeAsTitle(item.provider_label) }} -
                 {{ item.email }}
             </b-button>
 
@@ -99,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";
@@ -157,6 +159,9 @@ export default {
         Toast.success(notificationMessage);
     },
     methods: {
+        capitalizeAsTitle(str) {
+            return capitalizeFirstLetter(str);
+        },
         loadIdentities() {
             this.loading = true;
             svc.getIdentityProviders()
diff --git a/client/src/components/User/ExternalIdentities/ExternalLogin.vue b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
index d24b869ce488..c89310471ec1 100644
--- a/client/src/components/User/ExternalIdentities/ExternalLogin.vue
+++ b/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";
 
@@ -282,7 +283,7 @@ function getIdpPreference() {
                                 {{ iDPInfo["label"].charAt(0).toUpperCase() + iDPInfo["label"].slice(1) }}
                             </span>
                             <span v-else>
-                                {{ idp.charAt(0).toUpperCase() + idp.slice(1) }}
+                                {{ capitalizeFirstLetter(idp) }}
                             </span>
                         </BButton>
                     </span>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index ff06ca1adf7d..2d41ffbe5445 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/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>
diff --git a/client/src/utils/strings.ts b/client/src/utils/strings.ts
index 52b706bf6de9..083e10029962 100644
--- a/client/src/utils/strings.ts
+++ b/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);
+}