Add compliance component. (#975)

Allows the deployment to optionally display a compliance notice.
Disabled when embedded via iframe on the basis that the embedding application is responsible (e.g. micro:bit classroom, the current Python Editor versioning component).

Author: microbit-robert

.circleci/config.yml

@@ -34,7 +34,7 @@ _steps:
   install_dependencies: &install_dependencies
     run: npm ci --cache .npm-cache && sudo npm config set @microbit-foundation:registry https://npm.pkg.github.com/microbit-foundation && sudo npm i -g @microbit-foundation/[email protected] @microbit-foundation/[email protected] @microbit-foundation/circleci-npm-package-versioner@1
   install_theme: &install_theme
-    run: npm config set @microbit-foundation:registry https://npm.pkg.github.com/microbit-foundation && npm install --no-save @microbit-foundation/[email protected].183
+    run: npm config set @microbit-foundation:registry https://npm.pkg.github.com/microbit-foundation && npm install --no-save @microbit-foundation/[email protected].192
   update_version: &update_version
     run: npm run ci:update-version
   build: &build

src/App.css

@@ -31,6 +31,7 @@
 html,
 body,
 #root,
+.WorkbenchContainer,
 .Workbench {
   width: 100%;
   /* --ios-vvh set by VisualViewPortCSSVariables on iOS only. */

src/common/zIndex.ts

@@ -13,3 +13,4 @@ export const splitViewHideButton = 4;
 // z-index above the xterm.js's layers (currently 10 but given some margin for increases as it can vary with config)
 export const zIndexAboveTerminal = 20;
 export const zIndexOverlay = 30;
+export const zIndexAboveDialogs = 1500;

src/deployment/index.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { ReactNode } from "react";
+import { IconType } from "react-icons/lib";
 import { Logging } from "../logging/logging";
 
 // This is configured via a webpack alias, defaulting to ./default
@@ -13,6 +14,13 @@ export const deployment: DeploymentConfig = d;
 export interface DeploymentConfig {
   squareLogo?: ReactNode;
   horizontalLogo?: ReactNode;
+  Compliance?: ({
+    zIndex,
+    externalLinkIcon,
+  }: {
+    zIndex: number;
+    externalLinkIcon: IconType;
+  }) => JSX.Element;
 
   chakraTheme: any;
 

src/workbench/Workbench.tsx

@@ -6,6 +6,7 @@
 import { Box, Flex } from "@chakra-ui/layout";
 import { useMediaQuery } from "@chakra-ui/react";
 import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { RiExternalLinkLine } from "react-icons/ri";
 import { useIntl } from "react-intl";
 import {
   hideSidebarMediaQuery,
@@ -20,6 +21,8 @@ import {
   SplitViewSized,
 } from "../common/SplitView";
 import { SizedMode } from "../common/SplitView/SplitView";
+import { zIndexAboveDialogs } from "../common/zIndex";
+import { useDeployment } from "../deployment";
 import { ConnectionStatus } from "../device/device";
 import { useConnectionStatus } from "../device/device-hooks";
 import EditorArea from "../editor/EditorArea";
@@ -116,9 +119,23 @@ const Workbench = () => {
       )}
     </Box>
   );
-
+  const inIframe = () => {
+    try {
+      return window.self !== window.top;
+    } catch (e) {
+      return true;
+    }
+  };
+  const deployment = useDeployment();
+  const Compliance = deployment.Compliance ?? (() => null);
   return (
-    <>
+    <Flex className="WorkbenchContainer" flexDir="column">
+      {!inIframe() && (
+        <Compliance
+          zIndex={zIndexAboveDialogs}
+          externalLinkIcon={RiExternalLinkLine}
+        />
+      )}
       <Flex className="Workbench">
         <SplitView
           direction="row"
@@ -161,7 +178,7 @@ const Workbench = () => {
         </SplitView>
       </Flex>
       <Overlay />
-    </>
+    </Flex>
   );
 };