@flightctl/ui-components 1.1.0-rc2 → 1.1.0-rc3

package/src/components/modals/CreateRepositoryModal/CreateRepositoryModal.tsx

@@ -9,9 +9,10 @@ type CreateRepositoryModalProps = {
   type: RepoSpecType;
   onClose: VoidFunction;
   onSuccess: (repository: Repository) => void;
+  validateBeforeCreate?: (repo: Repository) => string | undefined;
 };
 
-const CreateRepositoryModal = ({ type, onClose, onSuccess }: CreateRepositoryModalProps) => {
+const CreateRepositoryModal = ({ type, onClose, onSuccess, validateBeforeCreate }: CreateRepositoryModalProps) => {
   const { t } = useTranslation();
   return (
     <Modal variant="medium" isOpen>
@@ -20,6 +21,7 @@ const CreateRepositoryModal = ({ type, onClose, onSuccess }: CreateRepositoryMod
         <CreateRepositoryForm
           onClose={onClose}
           onSuccess={onSuccess}
+          validateBefore={validateBeforeCreate}
           options={{
             canUseResourceSyncs: false,
             allowedRepoTypes: [type],

package/src/constants.ts

@@ -1,7 +1,7 @@
-export const APP_TITLE = 'Edge Manager';
-export const CORE_API_VERSION = 'v1beta1';
-export const IMAGEBUILDER_API_VERSION = 'v1alpha1';
+import { ApiVersion } from '@flightctl/types';
+import { ApiVersion as ImageBuilderApiVersion } from '@flightctl/types/imagebuilder';
 
+export const APP_TITLE = 'Edge Manager';
 export const PAGE_SIZE = 15;
 export const EVENT_PAGE_SIZE = 200; // It's 500 in OCP console
 
@@ -10,9 +10,9 @@ export const CERTIFICATE_VALIDITY_IN_YEARS = 1;
 export const getApiVersion = (api: 'flightctl' | 'imagebuilder' | 'alerts'): string | undefined => {
   switch (api) {
     case 'flightctl':
-      return CORE_API_VERSION;
+      return ApiVersion.ApiVersionV1beta1;
     case 'imagebuilder':
-      return IMAGEBUILDER_API_VERSION;
+      return ImageBuilderApiVersion.ApiVersionV1alpha1;
     case 'alerts':
     default:
       return undefined;

package/src/hooks/useWebSocket.ts

@@ -11,6 +11,8 @@ const msgToBytes = (msg: string, resize?: boolean) => {
   return result;
 };
 
+const isErrorCloseEvent = (evt: CloseEvent) => evt.code !== 1000 && evt.code !== 1001;
+
 export type WsMetadata = {
   tty: boolean;
   term: string;
@@ -34,13 +36,17 @@ export const useWebSocket = <T>(
   const { t } = useTranslation();
   const wsRef = React.useRef<WebSocket>();
   const isMountedRef = React.useRef(true);
+  const hasReceivedMessageRef = React.useRef(false);
   const [isConnecting, setIsConnecting] = React.useState(true);
   const [isClosed, setIsClosed] = React.useState(false);
   const [error, setError] = React.useState<unknown>();
   const [reset, setReset] = React.useState<number>(0);
 
   const sendMessage = React.useCallback((data: string, resize?: boolean) => {
-    wsRef.current?.send(msgToBytes(data, resize));
+    const ws = wsRef.current;
+    if (ws?.readyState === WebSocket.OPEN) {
+      ws.send(msgToBytes(data, resize));
+    }
   }, []);
 
   React.useEffect(() => {
@@ -54,6 +60,8 @@ export const useWebSocket = <T>(
     try {
       setIsConnecting(true);
       setIsClosed(false);
+      setError(undefined);
+      hasReceivedMessageRef.current = false;
       const wsEndpoint = getWsEndpoint(deviceId);
       const wsMeta = JSON.stringify(wsMetadata);
       const params = new URLSearchParams({
@@ -73,9 +81,16 @@ export const useWebSocket = <T>(
         }
       };
 
-      const handleClose = () => {
+      const handleClose = (evt: CloseEvent) => {
         if (isMountedRef.current) {
+          setIsConnecting(false);
           setIsClosed(true);
+          // If we never received any data from the backend, treat an error close as a failure
+          // Otherwise it may be a normal session close, and we'll show the "Reconnect" banner.
+          if (isErrorCloseEvent(evt) && !hasReceivedMessageRef.current) {
+            const reason = evt.reason || t('Unknown error');
+            setError(t('Failed to connect to device terminal: {{reason}}', { reason }));
+          }
         }
         wsRef.current = undefined;
       };
@@ -84,7 +99,13 @@ export const useWebSocket = <T>(
         // eslint-disable-next-line no-console
         console.error('Error creating websocket:', evt);
         if (isMountedRef.current) {
-          setError(t('Websocket error occured'));
+          setIsConnecting(false);
+          if (!hasReceivedMessageRef.current) {
+            setError(t('Failed to connect to device terminal'));
+          } else {
+            // User may have closed the session, so we'll show the "Reconnect" banner.
+            setIsClosed(true);
+          }
         }
       };
 
@@ -120,6 +141,7 @@ export const useWebSocket = <T>(
   React.useEffect(() => {
     const listener = (evt: MessageEvent<T>) => {
       if (isMountedRef.current) {
+        hasReceivedMessageRef.current = true;
         onMsgReceived(evt.data);
       }
     };

package/src/utils/imageBuilds.ts

@@ -116,17 +116,6 @@ export const isImageExportActiveReason = (reason: ImageExportConditionReason): b
   );
 };
 
-const isDownloadResultRedirect = (response: Response): boolean => {
-  return (
-    response.status === 302 ||
-    response.status === 301 ||
-    response.status === 307 ||
-    response.status === 308 ||
-    response.type === 'opaqueredirect' ||
-    response.status === 0
-  );
-};
-
 // Validate that a URL is safe to use for download (only http/https protocols)
 const isValidDownloadUrl = (url: string): boolean => {
   try {
@@ -137,37 +126,30 @@ const isValidDownloadUrl = (url: string): boolean => {
   }
 };
 
-const getRedirectUrl = (response: Response): string | undefined => {
-  // If the Location header is present, it indicates a redirect.
-  const redirectUrl = response.headers.get('Location');
-  if (redirectUrl) {
-    return redirectUrl;
-  }
-  if (isDownloadResultRedirect(response) && response.url) {
-    return response.url;
-  }
-  return undefined;
-};
-
 export type ExportDownloadResult =
   | { type: 'redirect'; url: string }
   | { type: 'blob'; blob: Blob; filename: string | undefined };
 
-// The download endpoint returns two types of responses: a redirect URL or a blob.
-// If a redirect URL is found, we should use it to trigger the download in the browser.
-// If no redirect URL is found, we should download the blob directly.
+// The ImageBuilder API download endpoint returns two types of responses: a redirect URL or a blob.
+// When it returns a redirect URL, the UI proxy rewrites the response to 200 with { redirectUrl: CDN_URL }
+// When no redirect URL is found, we should download the blob directly.
 export const getExportDownloadResult = async (response: Response): Promise<ExportDownloadResult | null> => {
-  if (!response.ok && response.status !== 0) {
+  if (!response.ok || response.type === 'opaqueredirect' || response.status === 0) {
     return null;
   }
-  const redirectUrl = getRedirectUrl(response);
-  if (redirectUrl) {
-    if (!isValidDownloadUrl(redirectUrl)) {
-      throw new Error('Invalid redirect URL received from server');
+
+  // Extract the redirect URL returned by the UI proxy
+  const contentType = response.headers.get('Content-Type') || '';
+  if (response.ok && contentType.includes('application/json')) {
+    const data = (await response.json()) as { redirectUrl?: string };
+    const url = data?.redirectUrl;
+    if (url && isValidDownloadUrl(url)) {
+      return { type: 'redirect', url };
     }
-    return { type: 'redirect', url: redirectUrl };
+    return null;
   }
 
+  // Download the blob directly
   const blob = await response.blob();
 
   let filename = '';

package/src/utils/search.ts

@@ -1,5 +1,5 @@
 import fuzzy from 'fuzzysearch';
-import { CORE_API_VERSION } from '../constants';
+import { ApiVersion } from '@flightctl/types';
 
 // Must be an even number for "getSearchResultsCount" to work
 export const MAX_TOTAL_SEARCH_RESULTS = 10;
@@ -26,7 +26,7 @@ export const getSearchResultsCount = (labelCount: number, fleetCount: number) =>
 };
 
 export const getEmptyFleetSearch = () => ({
-  apiVersion: CORE_API_VERSION,
+  apiVersion: ApiVersion.ApiVersionV1beta1,
   kind: 'Fleet',
   metadata: {},
   items: [],