build: add plugins framework to learner dash (#215)

* disables some of the current optimizely experiments

.env

@@ -41,4 +41,4 @@ ACCOUNT_PROFILE_URL=''
 ENABLE_NOTICES=''
 CAREER_LINK_URL=''
 OPTIMIZELY_FULL_STACK_SDK_KEY=''
-EXPERIMENT_08_23_VAN_PAINTED_DOOR=true
+EXPERIMENT_08_23_VAN_PAINTED_DOOR=false

package.json

@@ -40,6 +40,7 @@
     "@optimizely/react-sdk": "^2.9.2",
     "@redux-beacon/segment": "^1.1.0",
     "@reduxjs/toolkit": "^1.6.1",
+    "@testing-library/dom": "^9.3.3",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.21.4",
     "classnames": "^2.3.1",
@@ -61,6 +62,7 @@
     "query-string": "7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-error-boundary": "^4.0.11",
     "react-helmet": "^6.1.0",
     "react-intl": "^5.20.9",
     "react-pdf": "^5.5.0",

plugins/Plugin.jsx

@@ -0,0 +1,93 @@
+'use client';
+
+import React, {
+  useEffect, useMemo, useState,
+} from 'react';
+import PropTypes from 'prop-types';
+import { ErrorBoundary } from 'react-error-boundary';
+import { logError } from '@edx/frontend-platform/logging';
+import { PLUGIN_RESIZE } from './data/constants';
+import {
+  dispatchMountedEvent, dispatchReadyEvent, dispatchUnmountedEvent, useHostEvent,
+} from './data/hooks';
+
+// see example-plugin-app/src/PluginOne.jsx for example of customizing errorFallback
+function errorFallbackDefault() {
+  return (
+    <div>
+      <h2>
+        Oops! An error occurred. Please refresh the screen to try again.
+      </h2>
+    </div>
+  );
+}
+
+// eslint-disable-next-line react/function-component-definition
+export default function Plugin({
+  children, className, style, ready, errorFallbackProp,
+}) {
+  const [dimensions, setDimensions] = useState({
+    width: null,
+    height: null,
+  });
+
+  const finalStyle = useMemo(() => ({
+    ...dimensions,
+    ...style,
+  }), [dimensions, style]);
+
+  const errorFallback = errorFallbackProp || errorFallbackDefault;
+
+  // Error logging function
+  // Need to confirm: When an error is caught here, the logging will be sent to the child MFE's logging service
+  const logErrorToService = (error, info) => {
+    logError(error, { stack: info.componentStack });
+  };
+
+  useHostEvent(PLUGIN_RESIZE, ({ payload }) => {
+    setDimensions({
+      width: payload.width,
+      height: payload.height,
+    });
+  });
+
+  useEffect(() => {
+    dispatchMountedEvent();
+
+    return () => {
+      dispatchUnmountedEvent();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (ready) {
+      dispatchReadyEvent();
+    }
+  }, [ready]);
+
+  return (
+    <div className={className} style={finalStyle}>
+      <ErrorBoundary
+        FallbackComponent={errorFallback}
+        onError={logErrorToService}
+      >
+        {children}
+      </ErrorBoundary>
+    </div>
+  );
+}
+
+Plugin.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  errorFallbackProp: PropTypes.func,
+  ready: PropTypes.bool,
+  style: PropTypes.object, // eslint-disable-line
+};
+
+Plugin.defaultProps = {
+  className: null,
+  errorFallbackProp: null,
+  style: {},
+  ready: true,
+};

plugins/PluginContainer.jsx

@@ -0,0 +1,42 @@
+'use client';
+
+import React from 'react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import PluginContainerIframe from './PluginContainerIframe';
+
+import {
+  IFRAME_PLUGIN,
+} from './data/constants';
+import { pluginConfigShape } from './data/shapes';
+
+// eslint-disable-next-line react/function-component-definition
+export default function PluginContainer({ config, ...props }) {
+  if (config === null) {
+    return null;
+  }
+
+  // this will allow for future plugin types to be inserted in the PluginErrorBoundary
+  let renderer = null;
+  switch (config.type) {
+    case IFRAME_PLUGIN:
+      renderer = (
+        <PluginContainerIframe config={config} {...props} />
+      );
+      break;
+    // istanbul ignore next: default isn't meaningful, just satisfying linter
+    default:
+  }
+
+  return (
+    renderer
+  );
+}
+
+PluginContainer.propTypes = {
+  config: pluginConfigShape,
+};
+
+PluginContainer.defaultProps = {
+  config: null,
+};

plugins/PluginContainerIframe.jsx

@@ -0,0 +1,98 @@
+import React, {
+  useEffect, useState,
+} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import {
+  PLUGIN_MOUNTED,
+  PLUGIN_READY,
+  PLUGIN_RESIZE,
+} from './data/constants';
+import {
+  dispatchPluginEvent,
+  useElementSize,
+  usePluginEvent,
+} from './data/hooks';
+import { pluginConfigShape } from './data/shapes';
+
+/**
+ * Feature policy for iframe, allowing access to certain courseware-related media.
+ *
+ * We must use the wildcard (*) origin for each feature, as courseware content
+ * may be embedded in external iframes. Notably, xblock-lti-consumer is a popular
+ * block that iframes external course content.
+
+ * This policy was selected in conference with the edX Security Working Group.
+ * Changes to it should be vetted by them ([email protected]).
+ */
+export const IFRAME_FEATURE_POLICY = (
+  'fullscreen; microphone *; camera *; midi *; geolocation *; encrypted-media *'
+);
+
+export default function PluginContainerIframe({
+  config, fallback, className, ...props
+}) {
+  const { url } = config;
+  const { title, scrolling } = props;
+  const [mounted, setMounted] = useState(false);
+  const [ready, setReady] = useState(false);
+
+  const [iframeRef, iframeElement, width, height] = useElementSize();
+
+  useEffect(() => {
+    if (mounted) {
+      dispatchPluginEvent(iframeElement, {
+        type: PLUGIN_RESIZE,
+        payload: {
+          width,
+          height,
+        },
+      }, url);
+    }
+  }, [iframeElement, mounted, width, height, url]);
+
+  usePluginEvent(iframeElement, PLUGIN_MOUNTED, () => {
+    setMounted(true);
+  });
+
+  usePluginEvent(iframeElement, PLUGIN_READY, () => {
+    setReady(true);
+  });
+
+  return (
+    <>
+      <iframe
+        ref={iframeRef}
+        title={title}
+        src={url}
+        allow={IFRAME_FEATURE_POLICY}
+        scrolling={scrolling}
+        referrerPolicy="origin" // The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
+        className={classNames(
+          'border border-0',
+          { 'd-none': !ready },
+          className,
+        )}
+        {...props}
+      />
+      {!ready && fallback}
+    </>
+  );
+}
+
+PluginContainerIframe.propTypes = {
+  config: pluginConfigShape,
+  fallback: PropTypes.node,
+  scrolling: PropTypes.oneOf(['auto', 'yes', 'no']),
+  title: PropTypes.string,
+  className: PropTypes.string,
+};
+
+PluginContainerIframe.defaultProps = {
+  config: null,
+  fallback: null,
+  scrolling: 'auto',
+  title: null,
+  className: null,
+};

plugins/PluginErrorBoundary.jsx

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import { logError } from '@edx/frontend-platform/logging';
+
+export default class PluginErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    logError(error, { stack: info.componentStack });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <FormattedMessage
+          id="plugin.load.failure.text"
+          defaultMessage="This content failed to load."
+          description="error message when an unexpected error occurs"
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+PluginErrorBoundary.propTypes = {
+  children: PropTypes.node,
+};
+
+PluginErrorBoundary.defaultProps = {
+  children: null,
+};