Cookie consent integration (#1124)

microbit-matt-hillsdon · web-flow · commit c1be24c2144a · 2023-08-01T10:32:36.000+01:00
This integrates the new microbit.org-wide cookie consent approach.
Mostly this is delegated to the deployment code, but the line between
the two changes.

New action added to the help menu so cookie settings can be revisited.

The welcome dialog is delayed until after a cookie decision is made to
avoid a clash of modals.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -22,6 +22,7 @@ jobs:
       PRODUCTION_CLOUDFRONT_DISTRIBUTION_ID: E2ELTBTA2OFPY2
       STAGING_CLOUDFRONT_DISTRIBUTION_ID: E2ELTBTA2OFPY2
       REVIEW_CLOUDFRONT_DISTRIBUTION_ID: E3267W09ZJHQG9
+      REACT_APP_FOUNDATION_BUILD: ${{ github.repository_owner == 'microbit-foundation' }}
 
     steps:
       # Note: This workflow disables deployment steps and micro:bit branding installation on forks.
@@ -35,7 +36,7 @@ jobs:
       - run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.1.0-dev.198 @microbit-foundation/website-deploy-aws@0.3.0 @microbit-foundation/website-deploy-aws-config@0.7.1 @microbit-foundation/circleci-npm-package-versioner@1
+      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-dev.18  @microbit-foundation/website-deploy-aws@0.3.0 @microbit-foundation/website-deploy-aws-config@0.7.1 @microbit-foundation/circleci-npm-package-versioner@1
         if: github.repository_owner == 'microbit-foundation'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/lang/ui.ca.json b/lang/ui.ca.json
@@ -195,6 +195,10 @@
     "defaultMessage": "Alguna cosa ha anat malament. Baixa el teu fitxer hexadecimal per mantenir-lo segur i, a continuació, actualitza la pàgina per tornar-la a carregar.",
     "description": "Text displayed when content fails to load"
   },
+  "cookies-action": {
+    "defaultMessage": "Cookies",
+    "description": "Action to show dialog to choose website cookie preferences"
+  },
   "copied": {
     "defaultMessage": "Copiat",
     "description": "Text shown after copy to clipboard"
diff --git a/lang/ui.en.json b/lang/ui.en.json
@@ -195,6 +195,10 @@
     "defaultMessage": "Something went wrong. Download your hex file for safe keeping, then refresh the page to reload.",
     "description": "Text displayed when content fails to load"
   },
+  "cookies-action": {
+    "defaultMessage": "Cookies",
+    "description": "Action to show dialog to choose website cookie preferences"
+  },
   "copied": {
     "defaultMessage": "Copied",
     "description": "Text shown after copy to clipboard"
diff --git a/lang/ui.es-es.json b/lang/ui.es-es.json
@@ -195,6 +195,10 @@
     "defaultMessage": "Algo salió mal. Por seguridad, descarga tu archivo HEX y actualiza la página para recargar.",
     "description": "Text displayed when content fails to load"
   },
+  "cookies-action": {
+    "defaultMessage": "Cookies",
+    "description": "Action to show dialog to choose website cookie preferences"
+  },
   "copied": {
     "defaultMessage": "Copiado",
     "description": "Text shown after copy to clipboard"
diff --git a/lang/ui.fr.json b/lang/ui.fr.json
@@ -195,6 +195,10 @@
     "defaultMessage": "Une erreur est survenue. Téléchargez votre fichier hex pour ne pas le perdre, puis actualisez la page.",
     "description": "Text displayed when content fails to load"
   },
+  "cookies-action": {
+    "defaultMessage": "Cookies",
+    "description": "Action to show dialog to choose website cookie preferences"
+  },
   "copied": {
     "defaultMessage": "Copié",
     "description": "Text shown after copy to clipboard"
diff --git a/lang/ui.ja.json b/lang/ui.ja.json
@@ -195,6 +195,10 @@
     "defaultMessage": "問題が発生しました。hex ファイルをダウンロードして、ページをリロードしてください。",
     "description": "Text displayed when content fails to load"
   },
+  "cookies-action": {
+    "defaultMessage": "Cookies",
+    "description": "Action to show dialog to choose website cookie preferences"
+  },
   "copied": {
     "defaultMessage": "コピーしました",
     "description": "Text shown after copy to clipboard"
diff --git a/lang/ui.ko.json b/lang/ui.ko.json
@@ -195,6 +195,10 @@
     "defaultMessage": "오류가 발생했습니다. hex 파일을 다운로드해 작업물을 보호하고 새로 고침으로 페이지를 다시 불러오세요.",
     "description": "Text displayed when content fails to load"
   },
+  "cookies-action": {
+    "defaultMessage": "Cookies",
+    "description": "Action to show dialog to choose website cookie preferences"
+  },
   "copied": {
     "defaultMessage": "복사됨",
     "description": "Text shown after copy to clipboard"
diff --git a/lang/ui.nl.json b/lang/ui.nl.json
@@ -195,6 +195,10 @@
     "defaultMessage": "Er is iets fout gegaan. Download je hexadecimale bestand voor een veilige bewaring, ververs daarna de pagina om te herladen.",
     "description": "Text displayed when content fails to load"
   },
+  "cookies-action": {
+    "defaultMessage": "Cookies",
+    "description": "Action to show dialog to choose website cookie preferences"
+  },
   "copied": {
     "defaultMessage": "Gekopieerd",
     "description": "Text shown after copy to clipboard"
diff --git a/lang/ui.zh-cn.json b/lang/ui.zh-cn.json
@@ -195,6 +195,10 @@
     "defaultMessage": "出错了。下载您的 hex 文件以便安全保存，然后刷新页面来重新加载。",
     "description": "Text displayed when content fails to load"
   },
+  "cookies-action": {
+    "defaultMessage": "Cookies",
+    "description": "Action to show dialog to choose website cookie preferences"
+  },
   "copied": {
     "defaultMessage": "已复制",
     "description": "Text shown after copy to clipboard"
diff --git a/lang/ui.zh-tw.json b/lang/ui.zh-tw.json
@@ -195,6 +195,10 @@
     "defaultMessage": "發生錯誤。下載您的 HEX 檔案以便安全儲存，然後重新整理頁面來重新載入。",
     "description": "Text displayed when content fails to load"
   },
+  "cookies-action": {
+    "defaultMessage": "Cookies",
+    "description": "Action to show dialog to choose website cookie preferences"
+  },
   "copied": {
     "defaultMessage": "複製的",
     "description": "Text shown after copy to clipboard"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "mobile-drag-drop": "^2.3.0-rc.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-icons": "^4.2.0",
+    "react-icons": "^4.8.0",
     "react-intl": "^5.20.10",
     "vscode-jsonrpc": "^6.0.0",
     "vscode-languageserver-protocol": "^3.16.0",
diff --git a/public/index.html b/public/index.html
@@ -20,25 +20,15 @@
       name="twitter:description"
       content="A Python Editor for the BBC micro:bit, built by the Micro:bit Educational Foundation and the global Python Community."
     />
-    <% if (process.env.REACT_APP_GA_MEASUREMENT_ID &&
-    (process.env.REACT_APP_STAGE === 'PRODUCTION' || process.env.REACT_APP_STAGE
-    === "STAGING")) { %>
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GA_MEASUREMENT_ID%"
-    ></script>
+    <% if (process.env.REACT_APP_FOUNDATION_BUILD === 'true') { %>
+    <script src="https://shared-assets.microbit.org/common/v1/common.js" async></script>
+    <link rel="stylesheet" href="https://shared-assets.microbit.org/common/v1/main.css"></link>
     <script>
+      // GA config itself is via the common assets config depending on consent.
       window.dataLayer = window.dataLayer || [];
-      window.gaMeasurementId = "%REACT_APP_GA_MEASUREMENT_ID%";
-      window.gtag = function () {
+      window.gtag = window.gtag || function() {
         window.dataLayer.push(arguments);
       };
-      gtag("js", new Date());
-      var options = {
-        anonymize_ip: true,
-        cookie_prefix: "%REACT_APP_GA_COOKIE_PREFIX%",
-      };
-      gtag("config", window.gaMeasurementId, options);
     </script>
     <% } %>
   </head>
diff --git a/src/App.tsx b/src/App.tsx
@@ -62,6 +62,7 @@ const App = () => {
   });
 
   const deployment = useDeployment();
+  const { ConsentProvider } = deployment.compliance;
   return (
     <>
       <VisualViewPortCSSVariables />
@@ -79,11 +80,13 @@ const App = () => {
                           <SelectionProvider>
                             <DialogProvider>
                               <RouterProvider>
-                                <ProjectDropTarget>
-                                  <ActiveEditorProvider>
-                                    <Workbench />
-                                  </ActiveEditorProvider>
-                                </ProjectDropTarget>
+                                <ConsentProvider>
+                                  <ProjectDropTarget>
+                                    <ActiveEditorProvider>
+                                      <Workbench />
+                                    </ActiveEditorProvider>
+                                  </ProjectDropTarget>
+                                </ConsentProvider>
                               </RouterProvider>
                             </DialogProvider>
                           </SelectionProvider>
diff --git a/src/deployment/default/index.tsx b/src/deployment/default/index.tsx
@@ -3,13 +3,31 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { DeploymentConfig } from "..";
+import { createContext } from "react";
+import { CookieConsent, DeploymentConfig } from "..";
 import { NullLogging } from "./logging";
 import theme from "./theme";
 
+const stubConsentValue: CookieConsent = {
+  analytics: false,
+  functional: true,
+};
+const stubConsentContext = createContext<CookieConsent | undefined>(
+  stubConsentValue
+);
+
 const defaultDeployment: DeploymentConfig = {
   chakraTheme: theme,
   logging: new NullLogging(),
+  compliance: {
+    ConsentProvider: ({ children }) => (
+      <stubConsentContext.Provider value={stubConsentValue}>
+        {children}
+      </stubConsentContext.Provider>
+    ),
+    consentContext: stubConsentContext,
+    manageCookies: undefined,
+  },
 };
 
 export default defaultDeployment;
diff --git a/src/deployment/index.ts b/src/deployment/index.ts
@@ -3,24 +3,36 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { ReactNode } from "react";
-import { IconType } from "react-icons/lib";
+import { ReactNode, useContext } from "react";
 import { Logging } from "../logging/logging";
 
 // This is configured via a webpack alias, defaulting to ./default
 import { default as d } from "theme-package";
 export const deployment: DeploymentConfig = d;
 
+export interface CookieConsent {
+  analytics: boolean;
+  functional: boolean;
+}
+
 export interface DeploymentConfig {
   squareLogo?: ReactNode;
   horizontalLogo?: ReactNode;
-  Compliance?: ({
-    zIndex,
-    externalLinkIcon,
-  }: {
-    zIndex: number;
-    externalLinkIcon: IconType;
-  }) => JSX.Element;
+  compliance: {
+    /**
+     * A provider that will be used to wrap the app UI.
+     */
+    ConsentProvider: (props: { children: ReactNode }) => JSX.Element;
+    /**
+     * Context that will be used to read the current consent value.
+     * The provider is not used directly.
+     */
+    consentContext: React.Context<CookieConsent | undefined>;
+    /**
+     * Optional hook for the user to revisit cookie settings.
+     */
+    manageCookies: (() => void) | undefined;
+  };
 
   chakraTheme: any;
 
@@ -35,3 +47,8 @@ export interface DeploymentConfig {
 export const useDeployment = (): DeploymentConfig => {
   return deployment;
 };
+
+export const useCookieConsent = (): CookieConsent | undefined => {
+  const { compliance } = useDeployment();
+  return useContext(compliance.consentContext);
+};
diff --git a/src/e2e/app.ts b/src/e2e/app.ts
@@ -126,10 +126,16 @@ export class App {
       value: "1",
       url: this.url,
     });
-    // Don't show compliance notice.
+    // Don't show compliance notice for Foundation builds
     await page.setCookie({
       name: "MBCC",
-      value: "1",
+      value: encodeURIComponent(
+        JSON.stringify({
+          version: 1,
+          analytics: false,
+          functional: true,
+        })
+      ),
       url: this.url,
     });
 
diff --git a/src/messages/ui.ca.json b/src/messages/ui.ca.json
@@ -411,6 +411,12 @@
       "value": "Alguna cosa ha anat malament. Baixa el teu fitxer hexadecimal per mantenir-lo segur i, a continuació, actualitza la pàgina per tornar-la a carregar."
     }
   ],
+  "cookies-action": [
+    {
+      "type": 0,
+      "value": "Cookies"
+    }
+  ],
   "copied": [
     {
       "type": 0,
diff --git a/src/messages/ui.en.json b/src/messages/ui.en.json
@@ -407,6 +407,12 @@
       "value": "Something went wrong. Download your hex file for safe keeping, then refresh the page to reload."
     }
   ],
+  "cookies-action": [
+    {
+      "type": 0,
+      "value": "Cookies"
+    }
+  ],
   "copied": [
     {
       "type": 0,
diff --git a/src/messages/ui.es-es.json b/src/messages/ui.es-es.json
@@ -411,6 +411,12 @@
       "value": "Algo salió mal. Por seguridad, descarga tu archivo HEX y actualiza la página para recargar."
     }
   ],
+  "cookies-action": [
+    {
+      "type": 0,
+      "value": "Cookies"
+    }
+  ],
   "copied": [
     {
       "type": 0,
diff --git a/src/messages/ui.fr.json b/src/messages/ui.fr.json
@@ -407,6 +407,12 @@
       "value": "Une erreur est survenue. Téléchargez votre fichier hex pour ne pas le perdre, puis actualisez la page."
     }
   ],
+  "cookies-action": [
+    {
+      "type": 0,
+      "value": "Cookies"
+    }
+  ],
   "copied": [
     {
       "type": 0,
diff --git a/src/messages/ui.ja.json b/src/messages/ui.ja.json
@@ -431,6 +431,12 @@
       "value": "問題が発生しました。hex ファイルをダウンロードして、ページをリロードしてください。"
     }
   ],
+  "cookies-action": [
+    {
+      "type": 0,
+      "value": "Cookies"
+    }
+  ],
   "copied": [
     {
       "type": 0,
diff --git a/src/messages/ui.ko.json b/src/messages/ui.ko.json
diff --git a/src/messages/ui.nl.json b/src/messages/ui.nl.json
diff --git a/src/messages/ui.zh-cn.json b/src/messages/ui.zh-cn.json
diff --git a/src/messages/ui.zh-tw.json b/src/messages/ui.zh-tw.json
diff --git a/src/workbench/HelpMenu.tsx b/src/workbench/HelpMenu.tsx
diff --git a/src/workbench/PreReleaseNotice.tsx b/src/workbench/PreReleaseNotice.tsx
diff --git a/src/workbench/Workbench.tsx b/src/workbench/Workbench.tsx
