Add guarding if fields are not supplied

src/widgets/iframe/component.jsx

@@ -8,26 +8,34 @@ export default function Component({ service }) {
   const [refreshTimer, setRefreshTimer] = useState(0);
 
   const { widget } = service;
+
   useEffect(() => {
-    const refreshInterval = setInterval(
-      () => {setRefreshTimer(refreshTimer + 1)},
-      widget?.refreshInterval
-    );
-    return () => clearInterval(refreshInterval)
+    if (widget?.refreshInterval) {
+      const refreshInterval = setInterval(() => {
+        setRefreshTimer(refreshTimer + 1);
+      }, widget?.refreshInterval);
+      return () => clearInterval(refreshInterval);
+    }
   }, [refreshTimer]);
 
   const scrollingDisableStyle = widget.scrolling
     ? "pointer-events:none; overflow: hidden;"
     : "";
 
+  const sizeClasses = `h-${widget?.sizes?.xs || 80} sm:h-${
+    widget?.sizes?.sm || 80
+  } md:h-${widget?.sizes?.md || 80} lg:h-${widget?.sizes?.lg || 80} xl:h-${
+    widget?.sizes?.xl || 80
+  } 2xl:h-${widget?.sizes?.["2xl"] || 80}`;
+
   return (
     <Container service={service}>
       <Block>
         <iframe
-          src={widget.src}
-          id={refreshTimer}
-          key={refreshTimer}
-          title="Iframe"
+          src={widget?.src}
+          key={`${widget?.name}-${refreshTimer}`}
+          name={widget?.name}
+          title={widget?.name}
           allow={widget?.allowPolicy}
           allowfullscreen={widget?.allowfullscreen}
           referrerpolicy={widget?.referrerPolicy}
@@ -35,7 +43,7 @@ export default function Component({ service }) {
           scrolling={widget?.allowScrolling}
           frameBorder={widget?.border}
           style={{ width: "100%", scrollingDisableStyle }}
-          className={`h-${widget.sizes?.xs} sm:h-${widget.sizes?.sm} md:h-${widget.sizes?.md} lg:h-${widget.sizes?.lg} xl:h-${widget.sizes?.xl} 2xl:h-${widget.sizes?.["2xl"]} ${scrollingDisableStyle}`}
+          className={sizeClasses}
         />
       </Block>
     </Container>