fix(NGUI-176): improve error handling and fix test cases

Author: Hrithik-Gavankar

src/components/DynamicComponents.tsx

@@ -90,8 +90,9 @@ const DynamicComponent = ({ config, customProps = {} }: IProps) => {
   const Component = componentsMap[config?.component];
 
   if (!Component) {
-    // Throw an error for missing components so ErrorBoundary can catch it
-    throw new Error(`Component "${config?.component}" is not available in the React package. Available components: ${Object.keys(componentsMap).join(', ')}`);
+    // Return null for unknown components instead of throwing an error
+    console.warn(`Component "${config?.component}" is not available in the React package. Available components: ${Object.keys(componentsMap).join(', ')}`);
+    return null;
   }
 
   const newProps = parseProps(config?.props || config);

src/components/ErrorPlaceholder.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface ErrorPlaceholderProps {
+  hasError: boolean;
+  errorMessage?: string;
+  noContentMessage?: string;
+  className?: string;
+}
+
+const ErrorPlaceholder: React.FC<ErrorPlaceholderProps> = ({
+  hasError,
+  errorMessage = "Content failed to load",
+  noContentMessage = "No content available",
+  className = "",
+}) => {
+  const message = hasError ? errorMessage : noContentMessage;
+  const errorClass = hasError ? "error-state" : "";
+
+  return (
+    <div className={`error-placeholder ${errorClass} ${className}`}>
+      {message}
+    </div>
+  );
+};
+
+export default ErrorPlaceholder;

src/components/ImageComponent.tsx

@@ -1,6 +1,8 @@
 import { Card, CardBody, CardHeader, CardTitle } from "@patternfly/react-core";
 import React, { useState } from "react";
 
+import ErrorPlaceholder from "./ErrorPlaceholder";
+
 interface ImageComponentProps {
   component: "image";
   id: string;
@@ -15,25 +17,31 @@ const ImageComponent: React.FC<ImageComponentProps> = ({
   title,
   className,
 }) => {
-  const [imageError, setImageError] = useState(false);
+  const [hasImageError, setHasImageError] = useState(false);
+
+  const handleImageError = () => {
+    setHasImageError(true);
+  };
 
   return (
     <Card id={id} className={className}>
       <CardHeader>
         <CardTitle>{title}</CardTitle>
       </CardHeader>
       <CardBody>
-        {image && !imageError ? (
+        {image && !hasImageError ? (
           <img
             src={image}
             alt={title}
             className="image-component-img"
-            onError={() => setImageError(true)}
+            onError={handleImageError}
           />
         ) : (
-          <div className="image-component-placeholder">
-            {imageError ? "Image failed to load" : "No image provided"}
-          </div>
+          <ErrorPlaceholder
+            hasError={hasImageError}
+            errorMessage="Image failed to load"
+            noContentMessage="No image provided"
+          />
         )}
       </CardBody>
     </Card>

src/components/OneCardWrapper.tsx

@@ -10,7 +10,9 @@ import {
   FlexItem,
   Title,
 } from "@patternfly/react-core";
-import React from "react";
+import React, { useState } from "react";
+
+import ErrorPlaceholder from "./ErrorPlaceholder";
 
 interface DataField {
   name: string;
@@ -35,6 +37,29 @@ const OneCardWrapper: React.FC<OneCardProps> = ({
   imageSize = "md",
   className,
 }) => {
+  const [hasImageError, setHasImageError] = useState(false);
+
+  const handleImageError = () => {
+    setHasImageError(true);
+  };
+
+  // Check for missing or invalid data
+  const hasNoFields = !fields || fields.length === 0;
+  const hasNoTitle = !title || title.trim() === "";
+
+  // If no title and no fields, show error
+  if (hasNoTitle && hasNoFields) {
+    return (
+      <Card id={id} className={`onecard-component-container ${className || ''}`}>
+        <CardBody>
+          <ErrorPlaceholder
+            hasError={false}
+            noContentMessage="No content available"
+          />
+        </CardBody>
+      </Card>
+    );
+  }
 
   return (
     <Card 
@@ -44,15 +69,24 @@ const OneCardWrapper: React.FC<OneCardProps> = ({
       <CardBody>
         <Flex spaceItems={{ default: "spaceItemsLg" }} alignItems={{ default: "alignItemsFlexStart" }}>
           {/* Left Column - Image */}
-          {image && (
+          {image && !hasImageError ? (
             <FlexItem className={`onecard-component-image-container size-${imageSize}`}>
               <img
                 src={image}
                 alt={title}
                 className="onecard-component-img"
+                onError={handleImageError}
+              />
+            </FlexItem>
+          ) : image && hasImageError ? (
+            <FlexItem className={`onecard-component-image-container size-${imageSize}`}>
+              <ErrorPlaceholder
+                hasError={true}
+                errorMessage="Image failed to load"
+                noContentMessage=""
               />
             </FlexItem>
-          )}
+          ) : null}
 
           {/* Right Column - Title + Fields */}
           <FlexItem grow={{ default: "grow" }}>
@@ -61,18 +95,25 @@ const OneCardWrapper: React.FC<OneCardProps> = ({
             </Title>
             <Divider component="div" className="onecard-component-divider" />
             <div>
-              <DescriptionList isAutoFit>
-                {fields?.map((field, idx) => (
-                  <DescriptionListGroup key={idx}>
-                    <DescriptionListTerm>{field.name}</DescriptionListTerm>
-                    <DescriptionListDescription>
-                      {field.data.map((item) =>
-                        item === null ? "N/A" : String(item)
-                      ).join(", ")}
-                    </DescriptionListDescription>
-                  </DescriptionListGroup>
-                ))}
-              </DescriptionList>
+              {hasNoFields ? (
+                <ErrorPlaceholder
+                  hasError={false}
+                  noContentMessage="No data fields available"
+                />
+              ) : (
+                <DescriptionList isAutoFit>
+                  {fields?.map((field, idx) => (
+                    <DescriptionListGroup key={idx}>
+                      <DescriptionListTerm>{field.name}</DescriptionListTerm>
+                      <DescriptionListDescription>
+                        {field.data.map((item) =>
+                          item === null ? "N/A" : String(item)
+                        ).join(", ")}
+                      </DescriptionListDescription>
+                    </DescriptionListGroup>
+                  ))}
+                </DescriptionList>
+              )}
             </div>
           </FlexItem>
         </Flex>

src/components/TableWrapper.tsx

@@ -9,6 +9,8 @@ import {
   Caption,
 } from "@patternfly/react-table";
 
+import ErrorPlaceholder from "./ErrorPlaceholder";
+
 interface FieldData {
   name: string;
   data_path: string;
@@ -25,9 +27,14 @@ interface TableWrapperProps {
 
 const TableWrapper = (props: TableWrapperProps) => {
   const { title, id, fields, className } = props;
+  
+  // Check for missing or invalid data
+  const hasNoFields = !fields || fields.length === 0;
+  const hasNoTitle = !title || title.trim() === "";
+
   // Transform fields data into table format
   const transformFieldsToTableData = () => {
-    if (!fields || fields.length === 0) return { columns: [], rows: [] };
+    if (hasNoFields) return { columns: [], rows: [] };
 
     // Find the maximum number of data items across all fields
     const maxDataLength = Math.max(...fields.map((field) => field.data.length));
@@ -59,29 +66,51 @@ const TableWrapper = (props: TableWrapperProps) => {
   };
 
   const { columns, rows } = transformFieldsToTableData();
+  const hasNoData = rows.length === 0;
+
+  // If no title and no fields, show error
+  if (hasNoTitle && hasNoFields) {
+    return (
+      <Card id={id} className={className}>
+        <CardBody>
+          <ErrorPlaceholder
+            hasError={false}
+            noContentMessage="No content available"
+          />
+        </CardBody>
+      </Card>
+    );
+  }
 
   return (
     <Card id={id} className={className}>
       <CardBody>
-        <Table variant="compact" borders>
-          <Caption>{title}</Caption>
-          <Thead>
-            <Tr>
-              {columns.map((col, index) => (
-                <Th key={index}>{col.label}</Th>
-              ))}
-            </Tr>
-          </Thead>
-          <Tbody>
-            {rows.map((row, rowIndex) => (
-              <Tr key={rowIndex} data-testid={`row-${rowIndex}`}>
-                {columns.map((col, colIndex) => (
-                  <Td key={colIndex}>{row[col.key]}</Td>
+        {hasNoData ? (
+          <ErrorPlaceholder
+            hasError={false}
+            noContentMessage="No data available"
+          />
+        ) : (
+          <Table variant="compact" borders>
+            <Caption>{title}</Caption>
+            <Thead>
+              <Tr>
+                {columns.map((col, index) => (
+                  <Th key={index}>{col.label}</Th>
                 ))}
               </Tr>
-            ))}
-          </Tbody>
-        </Table>
+            </Thead>
+            <Tbody>
+              {rows.map((row, rowIndex) => (
+                <Tr key={rowIndex} data-testid={`row-${rowIndex}`}>
+                  {columns.map((col, colIndex) => (
+                    <Td key={colIndex}>{row[col.key]}</Td>
+                  ))}
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        )}
       </CardBody>
     </Card>
   );

src/components/VideoPlayerWrapper.tsx

@@ -4,7 +4,9 @@ import {
     CardTitle,
     Title,
   } from "@patternfly/react-core";
-  import React from "react";
+  import React, { useState } from "react";
+
+  import ErrorPlaceholder from "./ErrorPlaceholder";
 
   interface VideoPlayerProps {
     id?: string;
@@ -27,6 +29,12 @@ import {
     controls = true,
     aspectRatio = '16:9',
   }) => {
+    const [hasVideoError, setHasVideoError] = useState(false);
+
+    const handleVideoError = () => {
+      setHasVideoError(true);
+    };
+
     // Get aspect ratio class
     const getAspectRatioClass = () => {
       switch (aspectRatio) {
@@ -72,7 +80,7 @@ import {
     };
 
     const renderVideoContent = () => {
-      if (video) {
+      if (video && !hasVideoError) {
         if (isYouTubeUrl(video)) {
           // YouTube video embedding
           return (
@@ -84,6 +92,7 @@ import {
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                 referrerPolicy="strict-origin-when-cross-origin"
                 allowFullScreen
+                onError={handleVideoError}
               />
             </div>
           );
@@ -96,27 +105,31 @@ import {
               autoPlay={autoPlay}
               title={title}
               className="video-player-video"
+              onError={handleVideoError}
             >
               Your browser does not support the video tag.
             </video>
           );
         }
-      } else if (video_img) {
+      } else if (video_img && !hasVideoError) {
         // Show poster image when no video URL is provided
         return (
           <img
             src={video_img}
             alt={title}
             className="video-player-poster"
+            onError={handleVideoError}
           />
         );
       }
 
-      // Fallback when neither video nor poster image is available
+      // Show error placeholder when there's an error or no content
       return (
-        <div>
-          No video content available
-        </div>
+        <ErrorPlaceholder
+          hasError={hasVideoError}
+          errorMessage="Video failed to load"
+          noContentMessage="No video content available"
+        />
       );
     };