Fix services logo (#81)

Author: jackcloudquery

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudquery/plugin-config-ui-lib",
   "description": "Plugin configuration UI library for CloudQuery Cloud App",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "private": false,
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package.json

@@ -61,7 +61,7 @@ export function Logo({ width = 24, height = 24, src, alt, fallbackSrc }: LogoPro
         height={height - PADDING}
         width={width - PADDING}
         onLoad={() => setIsLoaded(true)}
-        onError={parseSrc(currentSrc) === src ? handleError : undefined}
+        onError={handleError}
       />
     </Box>
   );

src/components/display/logo.tsx

@@ -13,6 +13,7 @@ import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 
 import { Logo } from './logo';
+import { parseSrc } from '../../utils/parseSrc';
 
 enum ServiceListMode {
   All = 'all',
@@ -56,7 +57,7 @@ export interface ServiceListProps {
 export function ServiceList({
   services,
   topServices = [],
-  fallbackLogoSrc = 'favicon.ico',
+  fallbackLogoSrc = parseSrc('favicon.ico'),
   value = [],
   onChange,
   maxHeight = '400px',

src/components/display/serviceList.tsx

@@ -6,6 +6,7 @@ import FormLabel from '@mui/material/FormLabel';
 
 import { Controller } from 'react-hook-form';
 
+import { usePluginContext } from '../../../context';
 import { getFieldHelperText } from '../../../utils';
 import { ServiceList, ServiceTypes } from '../../display';
 
@@ -33,6 +34,8 @@ export function ControlServicesSelectorField({
   helperText,
   label,
 }: ControlServicesSelectorFieldProps) {
+  const { config } = usePluginContext();
+
   return (
     <Controller
       name={name}
@@ -45,6 +48,7 @@ export function ControlServicesSelectorField({
             value={field.value}
             onChange={field.onChange}
             maxHeight="none"
+            fallbackLogoSrc={config.iconLink}
           />
           <FormHelperText error={!!fieldState.error?.message}>
             {getFieldHelperText(fieldState.error?.message, helperText)}

src/components/form/controls/controlServicesSelectorField.tsx

@@ -5,6 +5,7 @@ import { useFormContext } from 'react-hook-form';
 import { ControlTextField } from './controls/controlTextField';
 import { Section } from './sections/section';
 import { usePluginContext } from '../../context/plugin';
+import { parseSrc } from '../../utils/parseSrc';
 import { Logo } from '../display';
 
 /**
@@ -37,7 +38,7 @@ export function ConfigUIFormHeader() {
             gap: 1.5,
           }}
         >
-          <Logo src={config.iconLink} fallbackSrc="favicon.ico" alt={config.label} />
+          <Logo src={config.iconLink} fallbackSrc={parseSrc('favicon.ico')} alt={config.label} />
           <Typography variant="body1">{config.label}</Typography>
         </Box>
       </Box>