From e0630fd2791cf3f0218f4bd668b779f770a86d70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Wed, 22 Nov 2023 14:18:55 +0000 Subject: [PATCH 1/8] feat: Create an `analytics_summary` database view for analytics (#2450) --- hasura.planx.uk/metadata/tables.yaml | 3 +++ .../down.sql | 0 .../up.sql | 0 .../down.sql | 1 + .../up.sql | 22 +++++++++++++++++++ 5 files changed, 26 insertions(+) rename hasura.planx.uk/migrations/{1700308790539_alter_table_public_analytics_logs_add_column_input_errors => 1700303790539_alter_table_public_analytics_logs_add_column_input_errors}/down.sql (100%) rename hasura.planx.uk/migrations/{1700308790539_alter_table_public_analytics_logs_add_column_input_errors => 1700303790539_alter_table_public_analytics_logs_add_column_input_errors}/up.sql (100%) create mode 100644 hasura.planx.uk/migrations/1700303840464_setup_analytics_summary_view/down.sql create mode 100644 hasura.planx.uk/migrations/1700303840464_setup_analytics_summary_view/up.sql diff --git a/hasura.planx.uk/metadata/tables.yaml b/hasura.planx.uk/metadata/tables.yaml index 15aa383b6c..0975212613 100644 --- a/hasura.planx.uk/metadata/tables.yaml +++ b/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 diff --git a/hasura.planx.uk/migrations/1700308790539_alter_table_public_analytics_logs_add_column_input_errors/down.sql b/hasura.planx.uk/migrations/1700303790539_alter_table_public_analytics_logs_add_column_input_errors/down.sql similarity index 100% rename from hasura.planx.uk/migrations/1700308790539_alter_table_public_analytics_logs_add_column_input_errors/down.sql rename to hasura.planx.uk/migrations/1700303790539_alter_table_public_analytics_logs_add_column_input_errors/down.sql diff --git a/hasura.planx.uk/migrations/1700308790539_alter_table_public_analytics_logs_add_column_input_errors/up.sql b/hasura.planx.uk/migrations/1700303790539_alter_table_public_analytics_logs_add_column_input_errors/up.sql similarity index 100% rename from hasura.planx.uk/migrations/1700308790539_alter_table_public_analytics_logs_add_column_input_errors/up.sql rename to hasura.planx.uk/migrations/1700303790539_alter_table_public_analytics_logs_add_column_input_errors/up.sql diff --git a/hasura.planx.uk/migrations/1700303840464_setup_analytics_summary_view/down.sql b/hasura.planx.uk/migrations/1700303840464_setup_analytics_summary_view/down.sql new file mode 100644 index 0000000000..2960f20a82 --- /dev/null +++ b/hasura.planx.uk/migrations/1700303840464_setup_analytics_summary_view/down.sql @@ -0,0 +1 @@ +DROP VIEW public.analytics_summary; diff --git a/hasura.planx.uk/migrations/1700303840464_setup_analytics_summary_view/up.sql b/hasura.planx.uk/migrations/1700303840464_setup_analytics_summary_view/up.sql new file mode 100644 index 0000000000..693d10937b --- /dev/null +++ b/hasura.planx.uk/migrations/1700303840464_setup_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; From 736777ce4638a7a0b5f00dc5a2d912aeb5773dca Mon Sep 17 00:00:00 2001 From: Jessica McInchak Date: Wed, 22 Nov 2023 16:33:40 +0000 Subject: [PATCH 2/8] Revert "feat: Create an `analytics_summary` database view for analytics (#2450)" (#2472) This reverts commit e0630fd2791cf3f0218f4bd668b779f770a86d70. --- hasura.planx.uk/metadata/tables.yaml | 3 --- .../down.sql | 1 - .../up.sql | 22 ------------------- .../down.sql | 0 .../up.sql | 0 5 files changed, 26 deletions(-) delete mode 100644 hasura.planx.uk/migrations/1700303840464_setup_analytics_summary_view/down.sql delete mode 100644 hasura.planx.uk/migrations/1700303840464_setup_analytics_summary_view/up.sql rename hasura.planx.uk/migrations/{1700303790539_alter_table_public_analytics_logs_add_column_input_errors => 1700308790539_alter_table_public_analytics_logs_add_column_input_errors}/down.sql (100%) rename hasura.planx.uk/migrations/{1700303790539_alter_table_public_analytics_logs_add_column_input_errors => 1700308790539_alter_table_public_analytics_logs_add_column_input_errors}/up.sql (100%) diff --git a/hasura.planx.uk/metadata/tables.yaml b/hasura.planx.uk/metadata/tables.yaml index 0975212613..15aa383b6c 100644 --- a/hasura.planx.uk/metadata/tables.yaml +++ b/hasura.planx.uk/metadata/tables.yaml @@ -64,9 +64,6 @@ - user_exit filter: {} check: null -- table: - schema: public - name: analytics_summary - table: schema: public name: blpu_codes diff --git a/hasura.planx.uk/migrations/1700303840464_setup_analytics_summary_view/down.sql b/hasura.planx.uk/migrations/1700303840464_setup_analytics_summary_view/down.sql deleted file mode 100644 index 2960f20a82..0000000000 --- a/hasura.planx.uk/migrations/1700303840464_setup_analytics_summary_view/down.sql +++ /dev/null @@ -1 +0,0 @@ -DROP VIEW public.analytics_summary; diff --git a/hasura.planx.uk/migrations/1700303840464_setup_analytics_summary_view/up.sql b/hasura.planx.uk/migrations/1700303840464_setup_analytics_summary_view/up.sql deleted file mode 100644 index 693d10937b..0000000000 --- a/hasura.planx.uk/migrations/1700303840464_setup_analytics_summary_view/up.sql +++ /dev/null @@ -1,22 +0,0 @@ -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; diff --git a/hasura.planx.uk/migrations/1700303790539_alter_table_public_analytics_logs_add_column_input_errors/down.sql b/hasura.planx.uk/migrations/1700308790539_alter_table_public_analytics_logs_add_column_input_errors/down.sql similarity index 100% rename from hasura.planx.uk/migrations/1700303790539_alter_table_public_analytics_logs_add_column_input_errors/down.sql rename to hasura.planx.uk/migrations/1700308790539_alter_table_public_analytics_logs_add_column_input_errors/down.sql diff --git a/hasura.planx.uk/migrations/1700303790539_alter_table_public_analytics_logs_add_column_input_errors/up.sql b/hasura.planx.uk/migrations/1700308790539_alter_table_public_analytics_logs_add_column_input_errors/up.sql similarity index 100% rename from hasura.planx.uk/migrations/1700303790539_alter_table_public_analytics_logs_add_column_input_errors/up.sql rename to hasura.planx.uk/migrations/1700308790539_alter_table_public_analytics_logs_add_column_input_errors/up.sql From 9bbb4d863f828f46fb0d94351c1e20059bc53c27 Mon Sep 17 00:00:00 2001 From: Jessica McInchak Date: Wed, 22 Nov 2023 17:46:58 +0000 Subject: [PATCH 3/8] feat: create an `analytics_summary` database view for analytics (take two) (#2473) --- hasura.planx.uk/metadata/tables.yaml | 3 +++ .../down.sql | 1 + .../up.sql | 22 +++++++++++++++++++ 3 files changed, 26 insertions(+) create mode 100644 hasura.planx.uk/migrations/1700671079904_create_analytics_summary_view/down.sql create mode 100644 hasura.planx.uk/migrations/1700671079904_create_analytics_summary_view/up.sql diff --git a/hasura.planx.uk/metadata/tables.yaml b/hasura.planx.uk/metadata/tables.yaml index 15aa383b6c..0975212613 100644 --- a/hasura.planx.uk/metadata/tables.yaml +++ b/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 diff --git a/hasura.planx.uk/migrations/1700671079904_create_analytics_summary_view/down.sql b/hasura.planx.uk/migrations/1700671079904_create_analytics_summary_view/down.sql new file mode 100644 index 0000000000..5d77ed66a9 --- /dev/null +++ b/hasura.planx.uk/migrations/1700671079904_create_analytics_summary_view/down.sql @@ -0,0 +1 @@ +DROP VIEW public.analytics_summary CASCADE; diff --git a/hasura.planx.uk/migrations/1700671079904_create_analytics_summary_view/up.sql b/hasura.planx.uk/migrations/1700671079904_create_analytics_summary_view/up.sql new file mode 100644 index 0000000000..693d10937b --- /dev/null +++ b/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; From f22eaf238b38c4988b05325dd53e7d8e220dff14 Mon Sep 17 00:00:00 2001 From: Ian Jones <51156018+ianjon3s@users.noreply.github.com> Date: Wed, 22 Nov 2023 17:52:26 +0000 Subject: [PATCH 4/8] chore: remove react-feather icon library (#2471) * chore: remove react-feather icon library * chore: remove react-feather icon library --- editor.planx.uk/package.json | 1 - editor.planx.uk/pnpm-lock.yaml | 12 ---------- .../FlowEditor/components/PreviewBrowser.tsx | 24 +++++++++---------- .../src/pages/FlowEditor/floweditor.scss | 5 ++-- 4 files changed, 14 insertions(+), 28 deletions(-) diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json index f98e52d1f3..0a41be1b8c 100644 --- a/editor.planx.uk/package.json +++ b/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", diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml index 9bb2472fdd..f51f8eb03c 100644 --- a/editor.planx.uk/pnpm-lock.yaml +++ b/editor.planx.uk/pnpm-lock.yaml @@ -212,9 +212,6 @@ dependencies: react-error-boundary: specifier: ^3.1.4 version: 3.1.4(react@18.2.0) - react-feather: - specifier: ^2.0.10 - version: 2.0.10(react@18.2.0) react-html-parser: specifier: ^2.0.2 version: 2.0.2(react@18.2.0) @@ -17332,15 +17329,6 @@ packages: resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==} dev: false - /react-feather@2.0.10(react@18.2.0): - resolution: {integrity: sha512-BLhukwJ+Z92Nmdcs+EMw6dy1Z/VLiJTzEQACDUEnWMClhYnFykJCGWQx+NmwP/qQHGX/5CzQ+TGi8ofg2+HzVQ==} - peerDependencies: - react: '>=16.8.6' - dependencies: - prop-types: 15.8.1 - react: 18.2.0 - dev: false - /react-helmet-async@1.3.0(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==} peerDependencies: diff --git a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx b/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx index f66c17e228..70b8770179 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx +++ b/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"; @@ -146,7 +144,7 @@ const PreviewBrowser: React.FC<{ value={props.url.replace("/preview", "/unpublished")} /> - { resetPreview(); setKey((a) => !a); @@ -155,7 +153,7 @@ const PreviewBrowser: React.FC<{ - setDebugConsoleVisibility(!showDebugConsole)} /> @@ -168,14 +166,14 @@ const PreviewBrowser: React.FC<{ rel="noopener noreferrer" color="inherit" > - + ) : ( - + @@ -188,7 +186,7 @@ const PreviewBrowser: React.FC<{ rel="noopener noreferrer" color="inherit" > - + @@ -199,7 +197,7 @@ const PreviewBrowser: React.FC<{ rel="noopener noreferrer" color="inherit" > - + diff --git a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss index 06664bbf60..c04cd21333 100644 --- a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss +++ b/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; From 25537e3124b2b1eb7b8d046b1816a298eb20546a Mon Sep 17 00:00:00 2001 From: Jessica McInchak Date: Thu, 23 Nov 2023 11:16:52 +0000 Subject: [PATCH 5/8] infra: update prod deploy Github Action PAT expiration date [skip pizza] (#2476) --- .github/workflows/cron-deploy-to-production.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/cron-deploy-to-production.yml b/.github/workflows/cron-deploy-to-production.yml index 1c31a80b61..ee1b7b8791 100644 --- a/.github/workflows/cron-deploy-to-production.yml +++ b/.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 From f8eb07c631d8f34ecb65943050d382a659aaf526 Mon Sep 17 00:00:00 2001 From: Ian Jones <51156018+ianjon3s@users.noreply.github.com> Date: Thu, 23 Nov 2023 11:33:52 +0000 Subject: [PATCH 6/8] feat: Simple styling for editor console (#2474) --- .../src/pages/FlowEditor/components/PreviewBrowser.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx b/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx index 70b8770179..f1644c844a 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx @@ -49,7 +49,7 @@ const DebugConsole = () => { ], ); return ( - + Date: Thu, 23 Nov 2023 11:35:16 +0000 Subject: [PATCH 7/8] chore: Unify colour refs in theme (#2475) --- editor.planx.uk/src/theme.ts | 53 +++++++++++------------- editor.planx.uk/src/ui/RichTextImage.tsx | 5 +-- 2 files changed, 26 insertions(+), 32 deletions(-) diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts index cdfda2e22f..6f45b54611 100644 --- a/editor.planx.uk/src/theme.ts +++ b/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 = { 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 = { }, border: { main: "#B1B4B6", - input: TEXT_COLOR_PRIMARY, + input: "#0B0C0C", light: "#E0E0E0", }, }; @@ -68,19 +63,19 @@ const DEFAULT_PALETTE: Partial = { // 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}`, }, }, }, diff --git a/editor.planx.uk/src/ui/RichTextImage.tsx b/editor.planx.uk/src/ui/RichTextImage.tsx index ef4e92e447..09e0aaf011 100644 --- a/editor.planx.uk/src/ui/RichTextImage.tsx +++ b/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", -})(({ selected }) => ({ - outline: selected ? `3px solid ${GOVUK_YELLOW}` : undefined, +})(({ selected, theme }) => ({ + outline: selected ? `3px solid ${theme.palette.action.focus}` : undefined, position: "relative", })); From 960deaabebd8fcdc5bb51a15cbc5efa2f620912e Mon Sep 17 00:00:00 2001 From: Jessica McInchak Date: Thu, 23 Nov 2023 20:05:03 +0000 Subject: [PATCH 8/8] feat: add toggle to optionally format Calculate output for automations (#2468) --- .../Calculate/Calculate.stories.tsx | 2 +- .../@planx/components/Calculate/Editor.tsx | 12 ++ .../components/Calculate/Public.test.tsx | 23 +++ .../{Public/index.tsx => Public.tsx} | 9 +- .../@planx/components/Calculate/logic.test.ts | 185 ++++++++++++++++++ .../src/@planx/components/Calculate/model.ts | 4 +- 6 files changed, 229 insertions(+), 6 deletions(-) create mode 100644 editor.planx.uk/src/@planx/components/Calculate/Public.test.tsx rename editor.planx.uk/src/@planx/components/Calculate/{Public/index.tsx => Public.tsx} (70%) create mode 100644 editor.planx.uk/src/@planx/components/Calculate/logic.test.ts diff --git a/editor.planx.uk/src/@planx/components/Calculate/Calculate.stories.tsx b/editor.planx.uk/src/@planx/components/Calculate/Calculate.stories.tsx index 0ed9b038c1..bf17244984 100644 --- a/editor.planx.uk/src/@planx/components/Calculate/Calculate.stories.tsx +++ b/editor.planx.uk/src/@planx/components/Calculate/Calculate.stories.tsx @@ -6,7 +6,7 @@ import React from "react"; import Wrapper from "../fixtures/Wrapper"; import { WarningContainer } from "../shared/Preview/WarningContainer"; import Editor from "./Editor"; -import Public from "./Public/index"; +import Public from "./Public"; export default { title: "PlanX Components/Calculate", diff --git a/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx b/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx index 431820a98e..59d3cfe698 100644 --- a/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx +++ b/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx @@ -14,6 +14,7 @@ import InputGroup from "ui/InputGroup"; import InputRow from "ui/InputRow"; import ModalSection from "ui/ModalSection"; import ModalSectionContent from "ui/ModalSectionContent"; +import OptionButton from "ui/OptionButton"; import type { Calculate } from "./model"; import { evaluate, getVariables, parseCalculate } from "./model"; @@ -85,6 +86,17 @@ export default function Component(props: Props) { onChange={formik.handleChange} /> + { + formik.setFieldValue( + "formatOutputForAutomations", + !formik.values.formatOutputForAutomations, + ); + }} + > + Format the output to automate a future Question or Checklist only + diff --git a/editor.planx.uk/src/@planx/components/Calculate/Public.test.tsx b/editor.planx.uk/src/@planx/components/Calculate/Public.test.tsx new file mode 100644 index 0000000000..997a3180b7 --- /dev/null +++ b/editor.planx.uk/src/@planx/components/Calculate/Public.test.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import { setup } from "testUtils"; + +import Calculate from "./Public"; + +describe("Calculate component", () => { + it("renders correctly", () => { + const handleSubmit = jest.fn(); + setup( + , + ); + + // Calculate should be auto-answered and never shown to user + expect(handleSubmit).toHaveBeenCalled(); + }); +}); diff --git a/editor.planx.uk/src/@planx/components/Calculate/Public/index.tsx b/editor.planx.uk/src/@planx/components/Calculate/Public.tsx similarity index 70% rename from editor.planx.uk/src/@planx/components/Calculate/Public/index.tsx rename to editor.planx.uk/src/@planx/components/Calculate/Public.tsx index 01a1234522..75baa728e7 100644 --- a/editor.planx.uk/src/@planx/components/Calculate/Public/index.tsx +++ b/editor.planx.uk/src/@planx/components/Calculate/Public.tsx @@ -3,8 +3,8 @@ import type { PublicProps } from "@planx/components/ui"; import { useStore } from "pages/FlowEditor/lib/store"; import { useEffect } from "react"; -import type { Calculate } from "../model"; -import { evaluate } from "../model"; +import type { Calculate } from "./model"; +import { evaluate } from "./model"; export type Props = PublicProps; @@ -12,17 +12,18 @@ export default function Component(props: Props) { const passport = useStore((state) => state.computePassport().data); useEffect(() => { + const evaluatedResult = evaluate(props.formula, passport, props.defaults); props.handleSubmit?.({ ...makeData( props, - evaluate(props.formula, passport, props.defaults), + props.formatOutputForAutomations ? [evaluatedResult.toString()] : evaluatedResult, props.output, ), // don't show this component to the user, auto=true required // for back button to skip past this component when going back auto: true, }); - }, []); + }, [props, passport]); return null; } diff --git a/editor.planx.uk/src/@planx/components/Calculate/logic.test.ts b/editor.planx.uk/src/@planx/components/Calculate/logic.test.ts new file mode 100644 index 0000000000..81c876d366 --- /dev/null +++ b/editor.planx.uk/src/@planx/components/Calculate/logic.test.ts @@ -0,0 +1,185 @@ +import { TYPES } from "@planx/components/types"; +import { Store, vanillaStore } from "pages/FlowEditor/lib/store"; + +const { getState, setState } = vanillaStore; +const { upcomingCardIds, resetPreview, record, currentCard } = getState(); + +// Helper method +const visitedNodes = () => Object.keys(getState().breadcrumbs); + +beforeEach(() => { + resetPreview(); +}); + +test("When formatOutputForAutomations is true, Calculate writes an array and future questions are auto-answered", () => { + // Setup + setState({ flow: flowWithAutomation }); + expect(upcomingCardIds()).toEqual([ + "Calculate", + "Question", + ]); + + // Step forwards through the Calculate + record("Calculate", { data: { testGroup: ["2"] }, auto: true }); + upcomingCardIds(); + + // The Question has been auto-answered + expect(visitedNodes()).toEqual([ + "Calculate", + "Question", + ]); + + expect(upcomingCardIds()).toEqual([ + "Group2Notice", + ]); +}); + +test("When formatOutputForAutomations is false, Calculate writes a number and future questions are not auto-answered", () => { + // Setup + setState({ flow: flowWithoutAutomation }); + expect(upcomingCardIds()).toEqual([ + "Calculate", + "Question", + ]); + + // Step forwards through the Calculate + record("Calculate", { data: { testGroup: 2 }, auto: true }); + upcomingCardIds(); + + // The Question has NOT been auto-answered + expect(visitedNodes()).toEqual([ + "Calculate", + ]); + + expect(upcomingCardIds()).toEqual([ + "Question" + ]); +}); + +const flowWithAutomation: Store.flow = { + "_root": { + "edges": [ + "Calculate", + "Question" + ] + }, + "Group2Notice": { + "data": { + "color": "#EFEFEF", + "title": "You are Group 2", + "resetButton": false + }, + "type": TYPES.Notice + }, + "Calculate": { + "data": { + "output": "testGroup", + "formula": "pickRandom([1,2])", + "formatOutputForAutomations": true + }, + "type": TYPES.Calculate + }, + "Group1Notice": { + "data": { + "color": "#EFEFEF", + "title": "You are Group 1", + "resetButton": false + }, + "type": TYPES.Notice + }, + "Group1Response": { + "data": { + "val": "1", + "text": "1" + }, + "type": TYPES.Response, + "edges": [ + "Group1Notice" + ] + }, + "Question": { + "data": { + "fn": "testGroup", + "text": "Which test group? " + }, + "type": TYPES.Statement, + "edges": [ + "Group1Response", + "Group2Response" + ] + }, + "Group2Response": { + "data": { + "val": "2", + "text": "2" + }, + "type": TYPES.Response, + "edges": [ + "Group2Notice" + ] + } +}; + +const flowWithoutAutomation: Store.flow = { + "_root": { + "edges": [ + "Calculate", + "Question" + ] + }, + "Group2Notice": { + "data": { + "color": "#EFEFEF", + "title": "You are Group 2", + "resetButton": false + }, + "type": TYPES.Notice + }, + "Calculate": { + "data": { + "output": "testGroup", + "formula": "pickRandom([1,2])", + "formatOutputForAutomations": false + }, + "type": TYPES.Calculate + }, + "Group1Notice": { + "data": { + "color": "#EFEFEF", + "title": "You are Group 1", + "resetButton": false + }, + "type": TYPES.Notice + }, + "Group1Response": { + "data": { + "val": "1", + "text": "1" + }, + "type": TYPES.Response, + "edges": [ + "Group1Notice" + ] + }, + "Question": { + "data": { + "fn": "testGroup", + "text": "Which test group? " + }, + "type": TYPES.Statement, + "edges": [ + "Group1Response", + "Group2Response" + ] + }, + "Group2Response": { + "data": { + "val": "2", + "text": "2" + }, + "type": TYPES.Response, + "edges": [ + "Group2Notice" + ] + } +}; diff --git a/editor.planx.uk/src/@planx/components/Calculate/model.ts b/editor.planx.uk/src/@planx/components/Calculate/model.ts index 75908d7fc1..1930015a63 100644 --- a/editor.planx.uk/src/@planx/components/Calculate/model.ts +++ b/editor.planx.uk/src/@planx/components/Calculate/model.ts @@ -7,6 +7,7 @@ export interface Calculate extends MoreInformation { defaults: Record; formula: string; samples: Record; + formatOutputForAutomations?: boolean; } export interface Input { @@ -22,6 +23,7 @@ export const parseCalculate = ( defaults: data?.defaults || {}, formula: data?.formula || "", samples: data?.samples || {}, + formatOutputForAutomations: data?.formatOutputForAutomations || false, }); export function getVariables(input: string): Set { @@ -82,7 +84,7 @@ export function evaluate(input: string, scope = {}, defaults = {}): number { } } -// Serialization is only necessary internally. v +// Serialization is only necessary internally. // Mathjs can't handle keys with dots in their names e.g. `property.number` // This complexity should never be exposed to this component's consumers. function serialize(x: string) {