Fixes

Author: jackcloudquery

src/components/display/formFooter/testConnectionResult.tsx

@@ -31,13 +31,11 @@ export function FormFooterTestConnectionResult({
   const intervalId = useRef<number>();
   const timeoutId = useRef<number>();
   const [progress, setProgress] = useState(0);
-  const [errorMessage, setErrorMessage] = useState<string | undefined>();
-  const [success, setSuccess] = useState(false);
+  const [progressRunning, setProgressRunning] = useState(false);
 
   useEffect(() => {
     if (isLoading) {
-      setErrorMessage(undefined);
-      setSuccess(false);
+      setProgressRunning(true);
 
       const updateProgress = (currentProgress: number) => {
         const difference = 100 - currentProgress;
@@ -64,17 +62,13 @@ export function FormFooterTestConnectionResult({
       let hasTransitionEnded = false;
 
       const handleTransitionEnd = () => {
+        setProgressRunning(false);
+
         clearTimeout(timeoutId.current);
         timeoutId.current = window.setTimeout(() => {
           if (!hasTransitionEnded) {
             hasTransitionEnded = true;
-            if (failureError) {
-              setErrorMessage(
-                failureError.message ||
-                  'Connection failed, please check your configuration and try again',
-              );
-            } else {
-              setSuccess(true);
+            if (!failureError) {
               onSuccess();
             }
           }
@@ -99,9 +93,9 @@ export function FormFooterTestConnectionResult({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading, isSubmitting]);
 
-  if (success) {
-    return null;
-  }
+  const errorMessage = failureError
+    ? failureError.message || 'Connection failed, please check your configuration and try again'
+    : undefined;
 
   return (
     <Card ref={cardRef}>
@@ -124,13 +118,14 @@ export function FormFooterTestConnectionResult({
             </Button>
           )}
         </Stack>
-        {errorMessage ? (
+        {progressRunning && (
+          <LinearProgress ref={progressElemRef} value={progress} variant="determinate" />
+        )}
+        {errorMessage && !progressRunning && (
           <Alert color="error" severity="error" variant="filled">
             <AlertTitle>Connection test failed</AlertTitle>
             {errorMessage.charAt(0).toUpperCase() + errorMessage.slice(1)}
           </Alert>
-        ) : (
-          <LinearProgress ref={progressElemRef} value={progress} variant="determinate" />
         )}
       </Card>
     </Card>

src/components/display/lightboxImage/index.tsx

@@ -2,6 +2,8 @@ import React, { ImgHTMLAttributes, useCallback } from 'react';
 
 import { PluginUiMessageHandler } from '@cloudquery/plugin-config-ui-connector';
 
+import { parseSrc } from '../../../utils/parseSrc';
+
 /**
  * @public
  */
@@ -47,7 +49,11 @@ export function LightboxImage({ pluginUiMessageHandler, ...props }: LightboxImag
       onClick={handleOpen}
       onKeyDown={handleKeyDown}
     >
-      <img {...props} style={{ width: 'inherit', display: 'block', ...props.style }} />
+      <img
+        {...props}
+        src={props.src ? parseSrc(props.src) : undefined}
+        style={{ width: 'inherit', display: 'block', ...props.style }}
+      />
     </button>
   );
 }

src/components/display/logo.tsx

@@ -4,6 +4,8 @@ import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import useTheme from '@mui/material/styles/useTheme';
 
+import { parseSrc } from '../../utils/parseSrc';
+
 /**
  * @public
  */
@@ -54,7 +56,7 @@ export function Logo({ width = 24, height = 24, src, alt, fallbackSrc }: LogoPro
         />
       )}
       <img
-        src={currentSrc}
+        src={parseSrc(currentSrc)}
         alt={alt ?? src}
         height={height - PADDING}
         width={width - PADDING}

src/components/utils/cloudAppMock.tsx

@@ -24,6 +24,8 @@ import createTheme from '@mui/material/styles/createTheme';
 import Typography from '@mui/material/Typography';
 import toast, { Toaster as HotToaster, ToastBar } from 'react-hot-toast';
 
+import { parseSrc } from '../../utils/parseSrc';
+
 /**
  * @public
  */
@@ -460,6 +462,7 @@ export function CloudAppMock({
                   isLoaded: true,
                 } as typeof lightboxProps)
               }
+              src={lightboxProps?.src ? parseSrc(lightboxProps.src) : undefined}
               style={{
                 height: 'auto',
                 maxHeight: lightboxProps?.isLoaded ? undefined : 0,

src/utils/parseSrc.ts

@@ -0,0 +1,11 @@
+export function parseSrc(src: string) {
+  if (src.startsWith('./')) {
+    return `${window.location.origin}${window.location.pathname}${src.slice(1)}`;
+  }
+
+  if (src.startsWith('/')) {
+    return `${window.location.origin}${src}`;
+  }
+
+  return src;
+}