Feedback / pre-release notice (#340)

Co-authored-by: Grace <145345672+microbit-grace@users.noreply.github.com>

Author: microbit-matt-hillsdon

.npmrc

@@ -0,0 +1 @@
+@microbit-foundation:registry=https://npm.pkg.github.com/microbit-foundation

lang/ui.en.json

@@ -659,6 +659,10 @@
     "defaultMessage": "Edit in MakeCode",
     "description": "Edit in MakeCode button text"
   },
+  "feedback": {
+    "defaultMessage": "Feedback",
+    "description": "Action to open a feedback dialog"
+  },
   "footer.connectButton": {
     "defaultMessage": "Connect",
     "description": ""
@@ -779,10 +783,6 @@
     "defaultMessage": "Project loaded",
     "description": "Toast when a new project is loaded"
   },
-  "prototype.warning": {
-    "defaultMessage": "This is a prototype version and is subject to change without notice",
-    "description": ""
-  },
   "reconnectFailed.bluetooth1": {
     "defaultMessage": "The connection to the micro:bit could not be re-established.",
     "description": ""

src/components/DefaultPageLayout.tsx

@@ -29,7 +29,7 @@ import HelpMenu from "./HelpMenu";
 import LanguageMenuItem from "./LanguageMenuItem";
 import LoadProjectMenuItem from "./LoadProjectMenuItem";
 import OpenButton from "./OpenButton";
-import PrototypeVersionWarning from "./PrototypeVersionWarning";
+import PreReleaseNotice from "./PreReleaseNotice";
 import SaveDialogs from "./SaveDialogs";
 import SettingsMenu from "./SettingsMenu";
 import ToolbarMenu from "./ToolbarMenu";
@@ -196,7 +196,7 @@ const DefaultPageLayout = ({
             </>
           }
         />
-        {flags.prototypeWarning && <PrototypeVersionWarning />}
+        {flags.preReleaseNotice && <PreReleaseNotice />}
         <Flex flexGrow={1} flexDir="column">
           {children}
         </Flex>

src/components/FeedbackForm.tsx

@@ -0,0 +1,76 @@
+/**
+ * (c) 2021, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay,
+  ModalCloseButton,
+} from "@chakra-ui/modal";
+import { useEffect, useRef } from "react";
+
+interface FeedbackFormProps {
+  isOpen: boolean;
+  onClose: () => void;
+  finalFocusRef?: React.RefObject<HTMLButtonElement>;
+}
+
+/**
+ * Temporary embedded Jotform for the alpha release.
+ */
+const FeedbackForm = ({
+  isOpen,
+  onClose,
+  finalFocusRef = undefined,
+}: FeedbackFormProps) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  useEffect(() => {
+    const listener = (message: MessageEvent) => {
+      if (
+        message.origin === "https://form.jotform.com" &&
+        typeof message.data === "string"
+      ) {
+        const args = message.data.split(":");
+        // There are many other cases in their big blob of script
+        // but I think this is all we need to care about.
+        if (args[0] === "setHeight" && iframeRef.current) {
+          iframeRef.current.style.height = args[1] + "px";
+        }
+      }
+    };
+    window.addEventListener("message", listener);
+    return () => {
+      window.removeEventListener("message", listener);
+    };
+  });
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size="2xl"
+      finalFocusRef={finalFocusRef}
+    >
+      <ModalOverlay>
+        <ModalContent>
+          <ModalCloseButton />
+          <ModalBody>
+            <iframe
+              ref={iframeRef}
+              title="Feedback"
+              src="https://form.jotform.com/242763044737359"
+              frameBorder="0"
+              height="620px"
+              width="100%"
+              scrolling="no"
+            />
+          </ModalBody>
+        </ModalContent>
+      </ModalOverlay>
+    </Modal>
+  );
+};
+
+export default FeedbackForm;

src/components/HelpMenu.tsx

@@ -13,10 +13,12 @@ import { useRef } from "react";
 import { MdOutlineCookie } from "react-icons/md";
 import {
   RiExternalLinkLine,
+  RiFeedbackLine,
   RiInformationLine,
   RiQuestionLine,
 } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
+import FeedbackForm from "./FeedbackForm";
 import { useDeployment } from "../deployment";
 import AboutDialog from "./AboutDialog";
 
@@ -29,17 +31,21 @@ interface HelpMenuProps {
  */
 const HelpMenu = ({ isMobile, ...rest }: HelpMenuProps) => {
   const aboutDialogDisclosure = useDisclosure();
+  const feedbackDisclosure = useDisclosure();
   const intl = useIntl();
   const MenuButtonRef = useRef(null);
   const deployment = useDeployment();
-
   return (
     <Box display={isMobile ? { base: "block", lg: "none" } : undefined}>
       <AboutDialog
         isOpen={aboutDialogDisclosure.isOpen}
         onClose={aboutDialogDisclosure.onClose}
         finalFocusRef={MenuButtonRef}
       />
+      <FeedbackForm
+        isOpen={feedbackDisclosure.isOpen}
+        onClose={feedbackDisclosure.onClose}
+      />
       <Menu {...rest}>
         <MenuButton
           as={IconButton}
@@ -69,6 +75,12 @@ const HelpMenu = ({ isMobile, ...rest }: HelpMenuProps) => {
                 >
                   <FormattedMessage id="help-support" />
                 </MenuItem>
+                <MenuItem
+                  icon={<RiFeedbackLine />}
+                  onClick={feedbackDisclosure.onOpen}
+                >
+                  <FormattedMessage id="feedback" />
+                </MenuItem>
                 <MenuDivider />
               </>
             )}

src/components/PreReleaseNotice.tsx

@@ -0,0 +1,55 @@
+/**
+ * (c) 2021, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { Button } from "@chakra-ui/button";
+import { Flex, HStack, Text } from "@chakra-ui/layout";
+import { useDisclosure } from "@chakra-ui/react";
+import { RiFeedbackFill } from "react-icons/ri";
+import FeedbackForm from "./FeedbackForm";
+import { FormattedMessage } from "react-intl";
+
+const PreReleaseNotice = () => {
+  const feedbackDialogDisclosure = useDisclosure();
+  return (
+    <>
+      <FeedbackForm
+        isOpen={feedbackDialogDisclosure.isOpen}
+        onClose={feedbackDialogDisclosure.onClose}
+      />
+      <Flex
+        bgColor="gray.800"
+        color="white"
+        p={1}
+        pl={3}
+        pr={3}
+        justifyContent="center"
+        gap={8}
+        as="section"
+        aria-label="Release information"
+        role="region"
+      >
+        <Text fontSize="sm" textAlign="center" fontWeight="semibold" p={1}>
+          This is a beta version and is subject to change without notice
+        </Text>
+        <HStack>
+          <Button
+            leftIcon={<RiFeedbackFill />}
+            variant="link"
+            color="white"
+            colorScheme="whiteAlpha"
+            fontWeight="bold"
+            size="xs"
+            p={1}
+            onClick={feedbackDialogDisclosure.onOpen}
+          >
+            <FormattedMessage id="feedback" />
+          </Button>
+        </HStack>
+      </Flex>
+    </>
+  );
+};
+
+export default PreReleaseNotice;

src/components/PrototypeVersionWarning.tsx

@@ -16,9 +16,9 @@ export type Flag =
    */
   | "devtools"
   /**
-   * Flag to add a prototype warning. Enabled for staging site and production stages.
+   * Flag to add a beta warning. Enabled for review and staging site stages.
    */
-  | "prototypeWarning"
+  | "preReleaseNotice"
   /**
    * Example flags used for testing.
    */
@@ -33,7 +33,7 @@ interface FlagMetadata {
 const allFlags: FlagMetadata[] = [
   // Alphabetical order.
   { name: "devtools", defaultOnStages: ["local"] },
-  { name: "prototypeWarning", defaultOnStages: ["staging", "production"] },
+  { name: "preReleaseNotice", defaultOnStages: ["review", "staging"] },
   { name: "exampleOptInA", defaultOnStages: ["review", "staging"] },
   { name: "exampleOptInB", defaultOnStages: [] },
 ];

src/flags.ts

@@ -1145,6 +1145,12 @@
       "value": "Edit in MakeCode"
     }
   ],
+  "feedback": [
+    {
+      "type": 0,
+      "value": "Feedback"
+    }
+  ],
   "footer.connectButton": [
     {
       "type": 0,
@@ -1331,12 +1337,6 @@
       "value": "Project loaded"
     }
   ],
-  "prototype.warning": [
-    {
-      "type": 0,
-      "value": "This is a prototype version and is subject to change without notice"
-    }
-  ],
   "reconnectFailed.bluetooth1": [
     {
       "type": 0,