Merge pull request #11009 from Budibase/fix/oidc-custom-icons-fixed

Fix OIDC Custom Icons

packages/backend-core/src/configs/configs.ts

@@ -5,6 +5,7 @@ import {
   GoogleInnerConfig,
   OIDCConfig,
   OIDCInnerConfig,
+  OIDCLogosConfig,
   SCIMConfig,
   SCIMInnerConfig,
   SettingsConfig,
@@ -191,6 +192,10 @@ export function getDefaultGoogleConfig(): GoogleInnerConfig | undefined {
 
 // OIDC
 
+export async function getOIDCLogosDoc(): Promise<OIDCLogosConfig | undefined> {
+  return getConfig<OIDCLogosConfig>(ConfigType.OIDC_LOGOS)
+}
+
 async function getOIDCConfigDoc(): Promise<OIDCConfig | undefined> {
   return getConfig<OIDCConfig>(ConfigType.OIDC)
 }

packages/bbui/src/Form/Core/Picker.svelte

@@ -99,9 +99,15 @@
   bind:this={button}
 >
   {#if fieldIcon}
-    <span class="option-extra icon">
-      <Icon size="S" name={fieldIcon} />
-    </span>
+    {#if !useOptionIconImage}
+      <span class="option-extra icon">
+        <Icon size="S" name={fieldIcon} />
+      </span>
+    {:else}
+      <span class="option-extra icon field-icon">
+        <img src={fieldIcon} alt="icon" width="15" height="15" />
+      </span>
+    {/if}
   {/if}
   {#if fieldColour}
     <span class="option-extra">
@@ -311,4 +317,8 @@
     max-width: 170px;
     font-size: 12px;
   }
+
+  .option-extra.icon.field-icon {
+    display: flex;
+  }
 </style>

packages/builder/src/pages/builder/auth/_components/OIDCButton.svelte

@@ -29,14 +29,13 @@
     }
   })
 
-  $: src = !$oidc.logo
-    ? OidcLogo
-    : preDefinedIcons[$oidc.logo] || `/global/logos_oidc/${$oidc.logo}`
+  $: oidcLogoImageURL = preDefinedIcons[$oidc.logo] ?? $oidc.logo
+  $: logoSrc = oidcLogoImageURL ?? OidcLogo
 </script>
 
 {#if show}
   <FancyButton
-    icon={src}
+    icon={logoSrc}
     on:click={() => {
       const url = `/api/global/auth/${$auth.tenantId}/oidc/configs/${$oidc.uuid}`
       if (samePage) {

packages/types/src/documents/global/config.ts

@@ -79,6 +79,12 @@ export interface OIDCConfigs {
   configs: OIDCInnerConfig[]
 }
 
+export interface OIDCLogosInnerConfig {
+  [key: string]: string
+}
+
+export interface OIDCLogosConfig extends Config<OIDCLogosInnerConfig> {}
+
 export interface OIDCInnerConfig {
   configUrl: string
   clientID: string

packages/worker/src/api/controllers/global/configs.ts

@@ -28,6 +28,7 @@ import {
   SSOConfig,
   SSOConfigType,
   UserCtx,
+  OIDCLogosConfig,
 } from "@budibase/types"
 import * as pro from "@budibase/pro"
 
@@ -280,13 +281,39 @@ export async function save(ctx: UserCtx<Config>) {
   }
 }
 
+function enrichOIDCLogos(oidcLogos: OIDCLogosConfig) {
+  if (!oidcLogos) {
+    return
+  }
+  oidcLogos.config = Object.keys(oidcLogos.config || {}).reduce(
+    (acc: any, key: string) => {
+      if (!key.endsWith("Etag")) {
+        const etag = oidcLogos.config[`${key}Etag`]
+        const objectStoreUrl = objectStore.getGlobalFileUrl(
+          oidcLogos.type,
+          key,
+          etag
+        )
+        acc[key] = objectStoreUrl
+      } else {
+        acc[key] = oidcLogos.config[key]
+      }
+      return acc
+    },
+    {}
+  )
+}
+
 export async function find(ctx: UserCtx) {
   try {
     // Find the config with the most granular scope based on context
     const type = ctx.params.type
-    const scopedConfig = await configs.getConfig(type)
+    let scopedConfig = await configs.getConfig(type)
 
     if (scopedConfig) {
+      if (type === ConfigType.OIDC_LOGOS) {
+        enrichOIDCLogos(scopedConfig)
+      }
       ctx.body = scopedConfig
     } else {
       // don't throw an error, there simply is nothing to return
@@ -300,16 +327,21 @@ export async function find(ctx: UserCtx) {
 export async function publicOidc(ctx: Ctx<void, GetPublicOIDCConfigResponse>) {
   try {
     // Find the config with the most granular scope based on context
-    const config = await configs.getOIDCConfig()
+    const oidcConfig = await configs.getOIDCConfig()
+    const oidcCustomLogos = await configs.getOIDCLogosDoc()
 
-    if (!config) {
+    if (oidcCustomLogos) {
+      enrichOIDCLogos(oidcCustomLogos)
+    }
+
+    if (!oidcConfig) {
       ctx.body = []
     } else {
       ctx.body = [
         {
-          logo: config.logo,
-          name: config.name,
-          uuid: config.uuid,
+          logo: oidcCustomLogos?.config[oidcConfig.logo] ?? oidcConfig.logo,
+          name: oidcConfig.name,
+          uuid: oidcConfig.uuid,
         },
       ]
     }