Production deploy

.github/workflows/cron-deploy-to-production.yml

@@ -1,7 +1,7 @@
 name: "Automatic production deployment"
 
 on:
-  # TODO: Enable CRON after the holiday season
+  # TODO: Enable CRON if desired
   # schedule:
   #   # “At 09:00 on every day-of-week from Tuesday through Friday.” 
   #   -   cron: "0 9 * * 2-5"
@@ -17,7 +17,7 @@ jobs:
         # Requires a Personal Access Token generated by an OSL GitHub org admin
         # Allows this action to trigger the push-production.yml action
         # PAT requires the "Read and write" permissions on repository "Contents"
-        # XXX: Expires 01/12/23, see docs here on generating a new one - https://bit.ly/3YNr5sM
+        # XXX: Expires 23/11/24, see docs here on generating a new one - https://bit.ly/3YNr5sM
         PERSONAL_ACCESS_TOKEN: ${{ secrets.PROD_DEPLOY_PAT }}
       run: |
         set -xe

editor.planx.uk/package.json

@@ -70,7 +70,6 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^3.1.4",
-    "react-feather": "^2.0.10",
     "react-html-parser": "^2.0.2",
     "react-markdown": "^8.0.7",
     "react-navi": "^0.15.0",

editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx

@@ -1,3 +1,8 @@
+import LanguageIcon from "@mui/icons-material/Language";
+import MenuOpenIcon from "@mui/icons-material/MenuOpen";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import SignalCellularAltIcon from "@mui/icons-material/SignalCellularAlt";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
@@ -10,13 +15,6 @@ import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import formatDistanceToNow from "date-fns/formatDistanceToNow";
 import React, { useState } from "react";
-import {
-  BarChart,
-  ExternalLink,
-  Globe,
-  RefreshCw,
-  Terminal,
-} from "react-feather";
 import { useAsync } from "react-use";
 import Input from "ui/Input";
 
@@ -51,7 +49,7 @@ const DebugConsole = () => {
     ],
   );
   return (
-    <Console>
+    <Console borderTop={2} borderColor="border.main" bgcolor="background.paper">
       <Typography variant="body2">
         <a
           href={`${process.env.REACT_APP_API_URL}/flows/${flowId}/download-schema`}
@@ -146,7 +144,7 @@ const PreviewBrowser: React.FC<{
             value={props.url.replace("/preview", "/unpublished")}
           />
           <Tooltip arrow title="Refresh preview">
-            <RefreshCw
+            <RefreshIcon
               onClick={() => {
                 resetPreview();
                 setKey((a) => !a);
@@ -155,7 +153,7 @@ const PreviewBrowser: React.FC<{
           </Tooltip>
 
           <Tooltip arrow title="Toggle debug console">
-            <Terminal
+            <MenuOpenIcon
               onClick={() => setDebugConsoleVisibility(!showDebugConsole)}
             />
           </Tooltip>
@@ -168,14 +166,14 @@ const PreviewBrowser: React.FC<{
                 rel="noopener noreferrer"
                 color="inherit"
               >
-                <BarChart />
+                <SignalCellularAltIcon />
               </Link>
             </Tooltip>
           ) : (
             <Tooltip arrow title="Analytics page unavailable">
               <Box>
                 <Link component={"button"} disabled aria-disabled={true}>
-                  <BarChart />
+                  <SignalCellularAltIcon />
                 </Link>
               </Box>
             </Tooltip>
@@ -188,7 +186,7 @@ const PreviewBrowser: React.FC<{
               rel="noopener noreferrer"
               color="inherit"
             >
-              <ExternalLink />
+              <OpenInNewIcon />
             </Link>
           </Tooltip>
 
@@ -199,7 +197,7 @@ const PreviewBrowser: React.FC<{
               rel="noopener noreferrer"
               color="inherit"
             >
-              <Globe />
+              <LanguageIcon />
             </Link>
           </Tooltip>
         </Box>

editor.planx.uk/src/pages/FlowEditor/floweditor.scss

@@ -47,14 +47,15 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
     input {
       flex: 1;
       padding: 5px;
+      margin-right: 5px;
       background: white;
       border: 1px solid rgba(0, 0, 0, 0.2);
     }
     svg {
       cursor: pointer;
       opacity: 0.7;
-      padding: 6px 0 3px 5px;
-      // height: 20px;
+      margin: 6px 4px 1px 4px;
+      font-size: 1.2rem;
     }
     display: flex;
     background: #ddd;

editor.planx.uk/src/theme.ts

@@ -14,12 +14,7 @@ import createPalette, {
 } from "@mui/material/styles/createPalette";
 import { deepmerge } from "@mui/utils";
 
-export const GOVUK_YELLOW = "#FFDD00";
-
-export const DEFAULT_PRIMARY_COLOR = "#0010A4";
-const TEXT_COLOR_PRIMARY = "#0B0C0C";
-const TEXT_COLOR_SECONDARY = "#505A5F";
-const BG_COLOR_DEFAULT = "#FFFFFF";
+const DEFAULT_PRIMARY_COLOR = "#0010A4";
 
 // Type styles
 export const FONT_WEIGHT_SEMI_BOLD = "600";
@@ -30,22 +25,22 @@ const SPACING_TIGHT = "-0.02em";
 const DEFAULT_PALETTE: Partial<PaletteOptions> = {
   primary: {
     main: DEFAULT_PRIMARY_COLOR,
-    contrastText: BG_COLOR_DEFAULT,
+    contrastText: "#FFFFFF",
   },
   background: {
-    default: BG_COLOR_DEFAULT,
+    default: "#FFFFFF",
     paper: "#F9F8F8",
   },
   secondary: {
     main: "#F3F2F1",
   },
   text: {
-    primary: TEXT_COLOR_PRIMARY,
-    secondary: TEXT_COLOR_SECONDARY,
+    primary: "#0B0C0C",
+    secondary: "#505A5F",
   },
   action: {
     selected: "#F8F8F8",
-    focus: GOVUK_YELLOW,
+    focus: "#FFDD00",
   },
   error: {
     main: "#D4351C",
@@ -59,7 +54,7 @@ const DEFAULT_PALETTE: Partial<PaletteOptions> = {
   },
   border: {
     main: "#B1B4B6",
-    input: TEXT_COLOR_PRIMARY,
+    input: "#0B0C0C",
     light: "#E0E0E0",
   },
 };
@@ -68,19 +63,19 @@ const DEFAULT_PALETTE: Partial<PaletteOptions> = {
 // https://design-system.service.gov.uk/get-started/focus-states/
 // https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/helpers/_focused.scss
 export const focusStyle = {
-  color: TEXT_COLOR_PRIMARY,
-  backgroundColor: GOVUK_YELLOW,
-  boxShadow: `0 -2px ${GOVUK_YELLOW}, 0 4px ${TEXT_COLOR_PRIMARY}`,
+  color: DEFAULT_PALETTE.text?.primary,
+  backgroundColor: DEFAULT_PALETTE.action?.focus,
+  boxShadow: `0 -2px ${DEFAULT_PALETTE.action?.focus}, 0 4px ${DEFAULT_PALETTE.text?.primary}`,
   textDecoration: "none",
   outline: "3px solid transparent",
 };
 
 // Ensure that if the element already has a border, the border gets thicker
 export const borderedFocusStyle = {
-  outline: `3px solid ${GOVUK_YELLOW}`,
+  outline: `3px solid ${DEFAULT_PALETTE.action?.focus}`,
   outlineOffset: 0,
   zIndex: 1,
-  boxShadow: `inset 0 0 0 2px ${TEXT_COLOR_PRIMARY}`,
+  boxShadow: `inset 0 0 0 2px ${DEFAULT_PALETTE.text?.primary}`,
   backgroundColor: "transparent",
 };
 
@@ -141,12 +136,12 @@ const getThemeOptions = (primaryColor: string): ThemeOptions => {
       subtitle1: {
         fontSize: "1.375rem",
         lineHeight: LINE_HEIGHT_BASE,
-        color: TEXT_COLOR_SECONDARY,
+        color: palette.text.secondary,
       },
       subtitle2: {
         fontSize: "1.188rem",
         lineHeight: LINE_HEIGHT_BASE,
-        color: TEXT_COLOR_SECONDARY,
+        color: palette.text.secondary,
       },
       body1: {
         fontSize: "1.188rem",
@@ -195,7 +190,7 @@ const getThemeOptions = (primaryColor: string): ThemeOptions => {
             fontWeight: FONT_WEIGHT_SEMI_BOLD,
           },
           body: {
-            backgroundColor: BG_COLOR_DEFAULT,
+            backgroundColor: palette.background.default,
             lineHeight: LINE_HEIGHT_BASE,
           },
           hr: {
@@ -210,7 +205,7 @@ const getThemeOptions = (primaryColor: string): ThemeOptions => {
             "&:focus-visible": {
               ...focusStyle,
               // !important is required here as setting disableElevation = true removes boxShadow
-              boxShadow: `inset 0 -4px 0 ${TEXT_COLOR_PRIMARY} !important`,
+              boxShadow: `inset 0 -4px 0 ${DEFAULT_PALETTE.text?.primary} !important`,
               // Hover should not overwrite focus
               "&:hover": focusStyle,
             },
@@ -240,9 +235,9 @@ const getThemeOptions = (primaryColor: string): ThemeOptions => {
             minWidth: "3em",
           },
           text: {
-            color: TEXT_COLOR_SECONDARY,
+            color: palette.text.secondary,
             "&:hover": {
-              color: TEXT_COLOR_PRIMARY,
+              color: palette.text.primary,
             },
           },
           sizeSmall: {
@@ -279,8 +274,8 @@ const getThemeOptions = (primaryColor: string): ThemeOptions => {
             borderRadius: 0,
             "&:focus-visible": {
               "& svg, div": {
-                color: "black",
-                borderColor: "black",
+                color: palette.common.black,
+                borderColor: palette.common.black,
               },
               "&>*:hover": {
                 backgroundColor: "transparent",
@@ -341,7 +336,7 @@ const getThemeOptions = (primaryColor: string): ThemeOptions => {
             height: "44px",
             padding: 0,
             margin: "0 0.75em 0 0",
-            color: TEXT_COLOR_PRIMARY,
+            color: palette.text.primary,
             "& .MuiSvgIcon-root": {
               // Hide default MUI SVG, we'll use pseudo elements as Gov.uk
               visibility: "hidden",
@@ -354,7 +349,7 @@ const getThemeOptions = (primaryColor: string): ThemeOptions => {
               left: "2px",
               width: "40px",
               height: "40px",
-              color: TEXT_COLOR_PRIMARY,
+              color: palette.text.primary,
               border: "2px solid currentcolor",
               borderRadius: "50%",
               background: "rgba(0,0,0,0)",
@@ -368,7 +363,7 @@ const getThemeOptions = (primaryColor: string): ThemeOptions => {
               width: 0,
               height: 0,
               transform: "translate(-50%, -50%)",
-              color: TEXT_COLOR_PRIMARY,
+              color: palette.text.primary,
               border: "10px solid currentcolor",
               borderRadius: "50%",
               background: "currentcolor",
@@ -382,7 +377,7 @@ const getThemeOptions = (primaryColor: string): ThemeOptions => {
               borderWidth: "4px",
               outline: "3px solid rgba(0,0,0,0)",
               outlineOffset: "1px",
-              boxShadow: `0 0 0 4px ${GOVUK_YELLOW}`,
+              boxShadow: `0 0 0 4px ${palette.action.focus}`,
             },
           },
         },

editor.planx.uk/src/ui/RichTextImage.tsx

@@ -14,12 +14,11 @@ import {
   ReactNodeViewRenderer,
 } from "@tiptap/react";
 import React from "react";
-import { GOVUK_YELLOW } from "theme";
 
 const StyledNodeViewWrapper = styled(NodeViewWrapper, {
   shouldForwardProp: (prop) => prop !== "selected",
-})<NodeViewWrapperProps & { selected: boolean }>(({ selected }) => ({
-  outline: selected ? `3px solid ${GOVUK_YELLOW}` : undefined,
+})<NodeViewWrapperProps & { selected: boolean }>(({ selected, theme }) => ({
+  outline: selected ? `3px solid ${theme.palette.action.focus}` : undefined,
   position: "relative",
 }));
 

hasura.planx.uk/metadata/tables.yaml

@@ -64,6 +64,9 @@
           - user_exit
         filter: {}
         check: null
+- table:
+    schema: public
+    name: analytics_summary
 - table:
     schema: public
     name: blpu_codes

hasura.planx.uk/migrations/1700671079904_create_analytics_summary_view/down.sql

@@ -0,0 +1 @@
+DROP VIEW public.analytics_summary CASCADE;

hasura.planx.uk/migrations/1700671079904_create_analytics_summary_view/up.sql

@@ -0,0 +1,22 @@
+CREATE OR REPLACE VIEW public.analytics_summary AS 
+select 
+	a.id as analytics_id,
+	al.id as analytics_log_id,
+	f.slug as service_slug,
+	t.slug as team_slug,
+	a.type as analytics_type,
+	a.created_at as analytics_created_at,
+	user_agent,
+	referrer,
+	flow_direction,
+	metadata,
+	al.user_exit as is_user_exit,
+	node_type,
+	node_title,
+	has_clicked_help,
+	input_errors,
+	CAST(EXTRACT(EPOCH FROM (al.next_log_created_at - al.created_at)) as numeric (10, 1)) as time_spent_on_node_seconds
+from analytics a
+	left join analytics_logs al on a.id = al.analytics_id
+	left join flows f on a.flow_id = f.id
+	left join teams t on t.id = f.team_id;