Merge pull request #9826 from Budibase/fix-default-oidc-icons

Fix default oidc icons

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

@@ -24,6 +24,7 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionIcon = () => null
+  export let useOptionIconImage = false
   export let getOptionColour = () => null
   export let open = false
   export let readonly = false
@@ -189,7 +190,16 @@
           >
             {#if getOptionIcon(option, idx)}
               <span class="option-extra icon">
-                <Icon size="S" name={getOptionIcon(option, idx)} />
+                {#if useOptionIconImage}
+                  <img
+                    src={getOptionIcon(option, idx)}
+                    alt="icon"
+                    width="15"
+                    height="15"
+                  />
+                {:else}
+                  <Icon size="S" name={getOptionIcon(option, idx)} />
+                {/if}
               </span>
             {/if}
             {#if getOptionColour(option, idx)}

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

@@ -11,6 +11,7 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionIcon = () => null
+  export let useOptionIconImage = false
   export let getOptionColour = () => null
   export let isOptionEnabled
   export let readonly = false
@@ -73,6 +74,7 @@
   {getOptionLabel}
   {getOptionValue}
   {getOptionIcon}
+  {useOptionIconImage}
   {getOptionColour}
   {isOptionEnabled}
   {autocomplete}

packages/bbui/src/Form/Select.svelte

@@ -14,6 +14,7 @@
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
   export let getOptionIcon = option => option?.icon
+  export let useOptionIconImage = false
   export let getOptionColour = option => option?.colour
   export let isOptionEnabled
   export let quiet = false
@@ -56,6 +57,7 @@
     {getOptionValue}
     {getOptionIcon}
     {getOptionColour}
+    {useOptionIconImage}
     {isOptionEnabled}
     {autocomplete}
     {customPopoverHeight}

packages/builder/src/pages/builder/portal/settings/auth/index.svelte

@@ -305,14 +305,17 @@
     }
     if (oidcLogos?.config) {
       const logoKeys = Object.keys(oidcLogos.config)
-      logoKeys.map(logoKey => {
-        const logoUrl = oidcLogos.config[logoKey]
-        iconDropdownOptions.unshift({
-          label: logoKey,
-          value: logoKey,
-          icon: logoUrl,
+      logoKeys
+        // don't include the etag entry in the logo config
+        .filter(key => !key.toLowerCase().includes("etag"))
+        .map(logoKey => {
+          const logoUrl = oidcLogos.config[logoKey]
+          iconDropdownOptions.unshift({
+            label: logoKey,
+            value: logoKey,
+            icon: logoUrl,
+          })
         })
-      })
     }
 
     // Fetch OIDC config
@@ -484,6 +487,7 @@
         <Select
           label=""
           bind:value={providers.oidc.config.configs[0].logo}
+          useOptionIconImage
           options={iconDropdownOptions}
           on:change={e => e.detail === "Upload" && fileinput.click()}
         />