Merge pull request appsmithorg#5026 from appsmithorg/feature/1726-iframe-widget

SatishGandham · web-flow · commit 47bc5aa032e5 · 2021-06-23T13:01:40.000+05:30
Adding iframe widget
diff --git a/app/client/src/assets/icons/widget/embed.svg b/app/client/src/assets/icons/widget/embed.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 2V7H16V4L4 4L4 7H2V2H18ZM2 18V13H4V16H16V13H18V18H2ZM13.5266 7.50323L14.0545 6.98584L16.4884 9.41972L17.0005 9.94231L16.4884 10.465L13.7483 13.2051L13.2257 12.6824L12.7031 12.1597L14.9205 9.94236L13.0092 8.03096L13.5266 7.50323ZM6.34593 13.2051L6.87383 12.6877L7.39122 12.16L5.47992 10.2486L7.69727 8.03122L7.17467 7.50852L6.65209 6.98582L3.91199 9.72591L3.39991 10.2486L3.91199 10.7712L6.34593 13.2051ZM13.0222 5.38513L11.6787 4.76855L7.36265 14.1733L8.70618 14.7899L13.0222 5.38513Z" fill="#939090"/>
+</svg>
diff --git a/app/client/src/components/designSystems/blueprint/IframeComponent.tsx b/app/client/src/components/designSystems/blueprint/IframeComponent.tsx
@@ -0,0 +1,74 @@
+import React, { useEffect } from "react";
+import styled from "styled-components";
+
+import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
+import { hexToRgba } from "components/ads/common";
+
+interface IframeContainerProps {
+  borderColor?: string;
+  borderOpacity?: number;
+  borderWidth?: number;
+}
+
+export const IframeContainer = styled.div<IframeContainerProps>`
+  height: 100%;
+  iframe {
+    width: 100%;
+    height: 100%;
+    border-color: ${(props) =>
+      hexToRgba(
+        props.borderColor || props.theme.colors.border,
+        (props.borderOpacity && !isNaN(props.borderOpacity)
+          ? props.borderOpacity
+          : 100) / 100,
+      )};
+    border-width: ${(props) =>
+      props.borderWidth ? Number(props.borderWidth) : 0}px;
+  }
+`;
+
+export interface IframeComponentProps extends ComponentProps {
+  source: string;
+  title?: string;
+  onURLChanged: (url: string) => void;
+  onMessageReceived: (message: MessageEvent) => void;
+  borderColor?: string;
+  borderOpacity?: number;
+  borderWidth?: number;
+}
+
+function IframeComponent(props: IframeComponentProps) {
+  const {
+    borderColor,
+    borderOpacity,
+    borderWidth,
+    onMessageReceived,
+    onURLChanged,
+    source,
+    title,
+  } = props;
+
+  useEffect(() => {
+    // add a listener
+    window.addEventListener("message", onMessageReceived, false);
+    // clean up
+    return () =>
+      window.removeEventListener("message", onMessageReceived, false);
+  }, []);
+
+  useEffect(() => {
+    onURLChanged(source);
+  }, [source]);
+
+  return (
+    <IframeContainer
+      borderColor={borderColor}
+      borderOpacity={borderOpacity}
+      borderWidth={borderWidth}
+    >
+      <iframe src={source} title={title} />
+    </IframeContainer>
+  );
+}
+
+export default IframeComponent;
diff --git a/app/client/src/constants/AppsmithActionConstants/ActionConstants.tsx b/app/client/src/constants/AppsmithActionConstants/ActionConstants.tsx
@@ -72,6 +72,8 @@ export enum EventType {
   ON_VIDEO_END = "ON_VIDEO_END",
   ON_VIDEO_PLAY = "ON_VIDEO_PLAY",
   ON_VIDEO_PAUSE = "ON_VIDEO_PAUSE",
+  ON_IFRAME_URL_CHANGED = "ON_IFRAME_URL_CHANGED",
+  ON_IFRAME_MESSAGE_RECEIVED = "ON_IFRAME_MESSAGE_RECEIVED",
 }
 
 export type ActionType =
diff --git a/app/client/src/constants/FieldExpectedValue.ts b/app/client/src/constants/FieldExpectedValue.ts
@@ -169,6 +169,12 @@ const FIELD_VALUES: Record<
     isVisible: "boolean",
     gridGap: "number",
   },
+  IFRAME_WIDGET: {
+    source: "string",
+    title: "string",
+    borderOpacity: "number",
+    borderWidth: "number",
+  },
 };
 
 export default FIELD_VALUES;
diff --git a/app/client/src/constants/HelpConstants.ts b/app/client/src/constants/HelpConstants.ts
@@ -115,6 +115,10 @@ export const HelpMap = {
     path: "/widget-reference/switch",
     searchKey: "Switch",
   },
+  IFRAME_WIDGET: {
+    path: "/widget-reference/iframe",
+    searchKey: "Iframe",
+  },
 };
 
 export const HelpBaseURL = "https://docs.appsmith.com";
diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx
@@ -27,6 +27,7 @@ export enum WidgetTypes {
   LIST_WIDGET = "LIST_WIDGET",
   SWITCH_WIDGET = "SWITCH_WIDGET",
   TABS_MIGRATOR_WIDGET = "TABS_MIGRATOR_WIDGET",
+  IFRAME_WIDGET = "IFRAME_WIDGET",
 }
 
 export type WidgetType = keyof typeof WidgetTypes;
diff --git a/app/client/src/icons/WidgetIcons.tsx b/app/client/src/icons/WidgetIcons.tsx
@@ -22,6 +22,7 @@ import { ReactComponent as FormIcon } from "assets/icons/widget/form.svg";
 import { ReactComponent as MapIcon } from "assets/icons/widget/map.svg";
 import { ReactComponent as ModalIcon } from "assets/icons/widget/modal.svg";
 import { ReactComponent as ListIcon } from "assets/icons/widget/list.svg";
+import { ReactComponent as EmbedIcon } from "assets/icons/widget/embed.svg";
 /* eslint-disable react/display-name */
 
 export const WidgetIcons: {
@@ -142,6 +143,11 @@ export const WidgetIcons: {
       <ListIcon />
     </IconWrapper>
   ),
+  IFRAME_WIDGET: (props: IconProps) => (
+    <IconWrapper {...props}>
+      <EmbedIcon />
+    </IconWrapper>
+  ),
 };
 
 export type WidgetIcon = typeof WidgetIcons[keyof typeof WidgetIcons];
diff --git a/app/client/src/mockResponses/WidgetConfigResponse.tsx b/app/client/src/mockResponses/WidgetConfigResponse.tsx
@@ -1090,6 +1090,15 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
         ],
       },
     },
+    [WidgetTypes.IFRAME_WIDGET]: {
+      source: "https://www.wikipedia.org/",
+      borderOpacity: 100,
+      borderWidth: 1,
+      rows: 8 * GRID_DENSITY_MIGRATION_V1,
+      columns: 7 * GRID_DENSITY_MIGRATION_V1,
+      widgetName: "Iframe",
+      version: 1,
+    },
   },
   configVersion: 1,
 };
diff --git a/app/client/src/mockResponses/WidgetSidebarResponse.tsx b/app/client/src/mockResponses/WidgetSidebarResponse.tsx
@@ -105,6 +105,11 @@ const WidgetSidebarResponse: WidgetCardProps[] = [
     widgetCardName: "Modal",
     key: generateReactKey(),
   },
+  {
+    type: "IFRAME_WIDGET",
+    widgetCardName: "Iframe",
+    key: generateReactKey(),
+  },
 ];
 
 export default WidgetSidebarResponse;
diff --git a/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx b/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx
@@ -29,6 +29,7 @@ import { VideoWidgetProps } from "widgets/VideoWidget";
 import { SkeletonWidgetProps } from "../../widgets/SkeletonWidget";
 import { SwitchWidgetProps } from "widgets/SwitchWidget";
 import { ListWidgetProps } from "../../widgets/ListWidget/ListWidget";
+import { IframeWidgetProps } from "widgets/IframeWidget";
 
 const initialState: WidgetConfigReducerState = WidgetConfigResponse;
 
@@ -82,6 +83,7 @@ export interface WidgetConfigReducerState {
     ICON_WIDGET: Partial<IconWidgetProps> & WidgetConfigProps;
     SKELETON_WIDGET: Partial<SkeletonWidgetProps> & WidgetConfigProps;
     LIST_WIDGET: Partial<ListWidgetProps<WidgetProps>> & WidgetConfigProps;
+    IFRAME_WIDGET: Partial<IframeWidgetProps> & WidgetConfigProps;
   };
   configVersion: number;
 }
diff --git a/app/client/src/utils/WidgetRegistry.tsx b/app/client/src/utils/WidgetRegistry.tsx
@@ -103,6 +103,11 @@ import SwitchWidget, {
 import TabsMigratorWidget, {
   ProfiledTabsMigratorWidget,
 } from "widgets/Tabs/TabsMigrator";
+import IframeWidget, {
+  IframeWidgetProps,
+  ProfiledIframeWidget,
+} from "widgets/IframeWidget";
+
 export default class WidgetBuilderRegistry {
   static registerWidgetBuilders() {
     WidgetFactory.registerWidgetBuilder(
@@ -454,5 +459,18 @@ export default class WidgetBuilderRegistry {
       ModalWidget.getMetaPropertiesMap(),
       ModalWidget.getPropertyPaneConfig(),
     );
+
+    WidgetFactory.registerWidgetBuilder(
+      WidgetTypes.IFRAME_WIDGET,
+      {
+        buildWidget(widgetData: IframeWidgetProps): JSX.Element {
+          return <ProfiledIframeWidget {...widgetData} />;
+        },
+      },
+      IframeWidget.getDerivedPropertiesMap(),
+      IframeWidget.getDefaultPropertiesMap(),
+      IframeWidget.getMetaPropertiesMap(),
+      IframeWidget.getPropertyPaneConfig(),
+    );
   }
 }
diff --git a/app/client/src/utils/autocomplete/EntityDefinitions.ts b/app/client/src/utils/autocomplete/EntityDefinitions.ts
@@ -246,6 +246,13 @@ export const entityDefinitions = {
     items: generateTypeDef(widget.items),
     listData: generateTypeDef(widget.listData),
   }),
+  IFRAME_WIDGET: {
+    "!doc": "Iframe widget is used to display iframes in your app.",
+    "!url": "https://docs.appsmith.com/widget-reference/iframe",
+    isVisible: isVisible,
+    source: "string",
+    title: "string",
+  },
 };
 
 export const GLOBAL_DEFS = {
diff --git a/app/client/src/widgets/IframeWidget.tsx b/app/client/src/widgets/IframeWidget.tsx
@@ -0,0 +1,161 @@
+import React from "react";
+
+import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
+import { WidgetType, WidgetTypes } from "constants/WidgetConstants";
+import IframeComponent from "components/designSystems/blueprint/IframeComponent";
+import { VALIDATION_TYPES } from "constants/WidgetValidation";
+import * as Sentry from "@sentry/react";
+import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
+
+class IframeWidget extends BaseWidget<IframeWidgetProps, WidgetState> {
+  static getPropertyPaneConfig() {
+    return [
+      {
+        sectionName: "General",
+        children: [
+          {
+            propertyName: "source",
+            helpText: "The URL of the page to embed",
+            label: "Source",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter the URL of the page to embed",
+            isBindProperty: true,
+            isTriggerProperty: false,
+            validation: VALIDATION_TYPES.TEXT,
+          },
+          {
+            propertyName: "title",
+            helpText: "Label the content of the page to embed",
+            label: "Title",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter the title of the page to embed",
+            isBindProperty: true,
+            isTriggerProperty: false,
+            validation: VALIDATION_TYPES.TEXT,
+          },
+        ],
+      },
+      {
+        sectionName: "Actions",
+        children: [
+          {
+            helpText: "Triggers an action when the source URL is changed",
+            propertyName: "onURLChanged",
+            label: "onURLChanged",
+            controlType: "ACTION_SELECTOR",
+            isJSConvertible: true,
+            isBindProperty: true,
+            isTriggerProperty: true,
+          },
+          {
+            helpText: "Triggers an action when a message event is received",
+            propertyName: "onMessageReceived",
+            label: "onMessageReceived",
+            controlType: "ACTION_SELECTOR",
+            isJSConvertible: true,
+            isBindProperty: true,
+            isTriggerProperty: true,
+          },
+        ],
+      },
+      {
+        sectionName: "Styles",
+        children: [
+          {
+            propertyName: "borderColor",
+            label: "Border Color",
+            controlType: "COLOR_PICKER",
+            isBindProperty: false,
+            isTriggerProperty: false,
+          },
+          {
+            propertyName: "borderOpacity",
+            label: "Border Opacity (%)",
+            controlType: "INPUT_TEXT",
+            isBindProperty: true,
+            isTriggerProperty: false,
+            inputType: "NUMBER",
+            validation: VALIDATION_TYPES.NUMBER,
+          },
+          {
+            propertyName: "borderWidth",
+            label: "Border Width (px)",
+            controlType: "INPUT_TEXT",
+            isBindProperty: true,
+            isTriggerProperty: false,
+            inputType: "NUMBER",
+            validation: VALIDATION_TYPES.NUMBER,
+          },
+        ],
+      },
+    ];
+  }
+
+  urlChangedHandler = (url: string) => {
+    if (url && this.props.onURLChanged) {
+      super.executeAction({
+        triggerPropertyName: "onURLChanged",
+        dynamicString: this.props.onURLChanged,
+        event: {
+          type: EventType.ON_IFRAME_URL_CHANGED,
+        },
+      });
+    }
+  };
+
+  messageReceivedHandler = (event: MessageEvent) => {
+    // Accept messages only from the current iframe
+    if (!this.props.source?.includes(event.origin)) {
+      return;
+    }
+    if (this.props.onMessageReceived) {
+      super.executeAction({
+        triggerPropertyName: "onMessageReceived",
+        dynamicString: this.props.onMessageReceived,
+        event: {
+          type: EventType.ON_IFRAME_MESSAGE_RECEIVED,
+        },
+      });
+    }
+  };
+
+  getPageView() {
+    const {
+      borderColor,
+      borderOpacity,
+      borderWidth,
+      source,
+      title,
+      widgetId,
+    } = this.props;
+    return (
+      <IframeComponent
+        borderColor={borderColor}
+        borderOpacity={borderOpacity}
+        borderWidth={borderWidth}
+        onMessageReceived={this.messageReceivedHandler}
+        onURLChanged={this.urlChangedHandler}
+        source={source}
+        title={title}
+        widgetId={widgetId}
+      />
+    );
+  }
+
+  getWidgetType(): WidgetType {
+    return WidgetTypes.IFRAME_WIDGET;
+  }
+}
+
+export interface IframeWidgetProps extends WidgetProps {
+  source: string;
+  title?: string;
+  onURLChanged?: string;
+  onMessageReceived?: string;
+  borderColor?: string;
+  borderOpacity?: number;
+  borderWidth?: number;
+}
+
+export default IframeWidget;
+export const ProfiledIframeWidget = Sentry.withProfiler(IframeWidget);

Original file line number	Diff line number	Diff line change
`@@ -72,6 +72,8 @@ export enum EventType {`
`72`	`72`	`ON_VIDEO_END = "ON_VIDEO_END",`
`73`	`73`	`ON_VIDEO_PLAY = "ON_VIDEO_PLAY",`
`74`	`74`	`ON_VIDEO_PAUSE = "ON_VIDEO_PAUSE",`
	`75`	`+ ON_IFRAME_URL_CHANGED = "ON_IFRAME_URL_CHANGED",`
	`76`	`+ ON_IFRAME_MESSAGE_RECEIVED = "ON_IFRAME_MESSAGE_RECEIVED",`
`75`	`77`	`}`
`76`	`78`
`77`	`79`	`export type ActionType =`
Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,7 @@ export enum WidgetTypes {`
`27`	`27`	`LIST_WIDGET = "LIST_WIDGET",`
`28`	`28`	`SWITCH_WIDGET = "SWITCH_WIDGET",`
`29`	`29`	`TABS_MIGRATOR_WIDGET = "TABS_MIGRATOR_WIDGET",`
	`30`	`+ IFRAME_WIDGET = "IFRAME_WIDGET",`
`30`	`31`	`}`
`31`	`32`
`32`	`33`	`export type WidgetType = keyof typeof WidgetTypes;`