feat: modernize widget experience

packages/widgets/src/iframe/component.tsx

@@ -1,43 +1,35 @@
 "use client";
 
-import { Anchor, Box, Group, Stack, Text, Title } from "@mantine/core";
+import { Box, Stack, Text, Title } from "@mantine/core";
 import { IconBrowserOff, IconProtocol } from "@tabler/icons-react";
 
 import { objectEntries } from "@homarr/common";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getSafeApplicationUrl } from "../common/application-url";
 import classes from "./component.module.css";
 
-export default function IFrameWidget({ options, isEditMode, displayMode }: WidgetComponentProps<"iframe">) {
+export default function IFrameWidget({ options, isEditMode }: WidgetComponentProps<"iframe">) {
   const t = useI18n();
   const { embedUrl, allowScrolling, ...permissions } = options;
+  const safeEmbedUrl = getSafeApplicationUrl(embedUrl);
   const allowedPermissions = getAllowedPermissions(permissions);
   const sandboxFlags = getSandboxFlags(permissions);
 
   if (embedUrl.trim() === "") return <NoUrl />;
-  if (!isSupportedProtocol(embedUrl)) {
+  if (!safeEmbedUrl) {
     return <UnsupportedProtocol />;
   }
 
   return (
     <Stack h="100%" w="100%" gap={0}>
-      {displayMode === "advanced" && (
-        <Group key="advanced-header" px="xs" py={4} wrap="nowrap" justify="space-between">
-          <Text size="xs" c="dimmed" truncate>
-            {getFrameTitle(embedUrl)}
-          </Text>
-          <Anchor href={embedUrl} target="_blank" rel="noreferrer" size="xs">
-            {t("widget.app.option.openInNewTab.label")}
-          </Anchor>
-        </Group>
-      )}
-      <Box key="frame" style={{ flex: 1, minHeight: 0 }}>
+      <Box style={{ flex: 1, minHeight: 0 }}>
         <iframe
           style={isEditMode ? { userSelect: "none", pointerEvents: "none" } : undefined}
           className={classes.iframe}
-          src={embedUrl}
-          title={getFrameTitle(embedUrl)}
+          src={safeEmbedUrl}
+          title={getFrameTitle(safeEmbedUrl)}
           allow={allowedPermissions}
           scrolling={allowScrolling ? "yes" : "no"}
           sandbox={sandboxFlags.join(" ")}
@@ -52,12 +44,7 @@ export default function IFrameWidget({ options, isEditMode, displayMode }: Widge
 const supportedProtocols = ["http", "https"];
 
 export const isSupportedProtocol = (url: string) => {
-  try {
-    const parsedUrl = new URL(url);
-    return supportedProtocols.map((protocol) => `${protocol}:`).includes(`${parsedUrl.protocol}`);
-  } catch {
-    return false;
-  }
+  return getSafeApplicationUrl(url) !== undefined;
 };
 
 const NoUrl = () => {

packages/widgets/src/iframe/index.ts

@@ -1,23 +1,39 @@
-import { IconBrowser } from "@tabler/icons-react";
+import { IconBrowser, IconExternalLink } from "@tabler/icons-react";
 
 import { createWidgetDefinition } from "../definition";
+import { getSafeApplicationUrl } from "../common/application-url";
 import { optionsBuilder } from "../options";
 
+const createOptions = () =>
+  optionsBuilder.from((factory) => ({
+    embedUrl: factory.text(),
+    allowFullScreen: factory.switch(),
+    allowScrolling: factory.switch({
+      defaultValue: true,
+    }),
+    allowPayment: factory.switch(),
+    allowAutoPlay: factory.switch(),
+    allowMicrophone: factory.switch(),
+    allowCamera: factory.switch(),
+    allowGeolocation: factory.switch(),
+    allowModals: factory.switch(),
+  }));
+
 export const { definition, componentLoader } = createWidgetDefinition("iframe", {
+  supportsAdvancedFocus: false,
   icon: IconBrowser,
-  createOptions() {
-    return optionsBuilder.from((factory) => ({
-      embedUrl: factory.text(),
-      allowFullScreen: factory.switch(),
-      allowScrolling: factory.switch({
-        defaultValue: true,
-      }),
-      allowPayment: factory.switch(),
-      allowAutoPlay: factory.switch(),
-      allowMicrophone: factory.switch(),
-      allowCamera: factory.switch(),
-      allowGeolocation: factory.switch(),
-      allowModals: factory.switch(),
-    }));
+  contextActions: ({ options }) => {
+    const embedUrl = getSafeApplicationUrl(options.embedUrl);
+    return embedUrl
+      ? [
+          {
+            key: "open-iframe",
+            label: "widget.app.option.openInNewTab.label",
+            icon: IconExternalLink,
+            onClick: () => window.open(embedUrl, "_blank", "noopener,noreferrer"),
+          },
+        ]
+      : [];
   },
+  createOptions,
 }).withDynamicImport(() => import("./component"));