From 09c08aeb9bbf0a32976d8816592d3f1bfcc31e08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Thu, 30 Nov 2023 09:56:02 +0000
Subject: [PATCH 1/5] fix(e2e): Don't write to restricted flows.data column
 (#2500)

---
 e2e/tests/api-driven/src/permissions/queries/flows.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/e2e/tests/api-driven/src/permissions/queries/flows.ts b/e2e/tests/api-driven/src/permissions/queries/flows.ts
index fb2051943c..9db7a43379 100644
--- a/e2e/tests/api-driven/src/permissions/queries/flows.ts
+++ b/e2e/tests/api-driven/src/permissions/queries/flows.ts
@@ -3,11 +3,7 @@ import { gql } from "graphql-tag";
 export const INSERT_FLOW_QUERY = gql`
   mutation InsertFlowE2E($team1Id: Int) {
     result: insert_flows(
-      objects: {
-        data: "{hello: 'world'}"
-        slug: "e2e-test-flow"
-        team_id: $team1Id
-      }
+      objects: { slug: "e2e-test-flow", team_id: $team1Id }
     ) {
       returning {
         id
@@ -20,7 +16,7 @@ export const UPDATE_FLOW_QUERY = gql`
   mutation UpdateFlowE2E($team1FlowId: uuid!) {
     result: update_flows_by_pk(
       pk_columns: { id: $team1FlowId }
-      _set: { data: "{hello: 'world2'}" }
+      _set: { slug: "new-slug" }
     ) {
       id
     }

From ce6925305c6fea95744f845d912b44647e58445f Mon Sep 17 00:00:00 2001
From: Ian Jones <51156018+ianjon3s@users.noreply.github.com>
Date: Thu, 30 Nov 2023 12:05:41 +0000
Subject: [PATCH 2/5] feat: Editor styles and layout update (#2491)

* feat: Editor design settings

* feat: Editor design settings

* feat: Theme for editor settings

* feat: Editor styles and layout update

* feat: Styles for option buttons

* feat: Styles for data fields

* feat: Add feature flag for design settings

* refactor: Input caption to input description

* fix: Repeated ID
---
 .../@planx/components/Calculate/Editor.tsx    |   7 +-
 .../@planx/components/Checklist/Editor.tsx    |   2 +-
 .../@planx/components/Confirmation/Editor.tsx |   2 +-
 .../@planx/components/DrawBoundary/Editor.tsx |   2 +
 .../components/FileUploadAndLabel/Editor.tsx  |   1 +
 .../components/InternalPortal/Editor.tsx      |   3 +-
 .../components/PlanningConstraints/Editor.tsx |   1 +
 .../src/@planx/components/Question/Editor.tsx |   6 +-
 editor.planx.uk/src/lib/featureFlags.ts       |   5 +-
 .../components/Settings/DesignSettings.tsx    | 127 ++++++++++++++++--
 .../components/Settings/ServiceSettings.tsx   | 120 +++++++++--------
 .../FlowEditor/components/Settings/index.tsx  |  11 +-
 .../FlowEditor/components/forms/FormModal.tsx |  25 +++-
 editor.planx.uk/src/ui/ColorPicker.tsx        |  22 +--
 editor.planx.uk/src/ui/EditorRow.tsx          |  38 ++++++
 editor.planx.uk/src/ui/ImgInput.tsx           |   9 +-
 editor.planx.uk/src/ui/Input.tsx              |  16 ++-
 editor.planx.uk/src/ui/InputDescription.tsx   |  17 +++
 editor.planx.uk/src/ui/InputField.tsx         |   3 +-
 editor.planx.uk/src/ui/InputGroup.tsx         |  32 ++++-
 editor.planx.uk/src/ui/InputLegend.tsx        |  16 +++
 editor.planx.uk/src/ui/InputRow.tsx           |   4 +-
 editor.planx.uk/src/ui/InputRowLabel.tsx      |  12 +-
 editor.planx.uk/src/ui/ModalSection.tsx       |   4 +-
 .../src/ui/ModalSectionContent.tsx            |  29 ++--
 editor.planx.uk/src/ui/ModalSubtitle.tsx      |   9 +-
 editor.planx.uk/src/ui/OptionButton.tsx       |  20 +--
 .../src/ui/PublicFileUploadButton.tsx         |   6 +-
 editor.planx.uk/src/ui/RichTextInput.css      |  15 ++-
 29 files changed, 415 insertions(+), 149 deletions(-)
 create mode 100644 editor.planx.uk/src/ui/EditorRow.tsx
 create mode 100644 editor.planx.uk/src/ui/InputDescription.tsx
 create mode 100644 editor.planx.uk/src/ui/InputLegend.tsx

diff --git a/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx b/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx
index 59d3cfe698..250ba9e5cf 100644
--- a/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx
@@ -73,7 +73,11 @@ export default function Component(props: Props) {
       <ModalSection>
         <ModalSectionContent title="Calculate" Icon={ICONS[TYPES.Calculate]}>
           <Typography variant="body2">
-            This component does math! Write formulas using <a href="https://mathjs.org/index.html" target="_blank">Math.js</a>, omitting the <code>math.</code> prefix
+            This component does math! Write formulas using{" "}
+            <a href="https://mathjs.org/index.html" target="_blank">
+              Math.js
+            </a>
+            , omitting the <code>math.</code> prefix
           </Typography>
         </ModalSectionContent>
         <ModalSectionContent title="Output">
@@ -82,6 +86,7 @@ export default function Component(props: Props) {
               required
               placeholder="output data field"
               name="output"
+              format="data"
               value={formik.values.output}
               onChange={formik.handleChange}
             />
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx
index a604c85d52..6e14019033 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx
@@ -146,7 +146,7 @@ const OptionEditor: React.FC<{
 
 const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
   return (
-    <ModalSectionContent title="Options">
+    <ModalSectionContent subtitle="Options">
       {formik.values.groupedOptions ? (
         <Box>
           {formik.values.groupedOptions.map(
diff --git a/editor.planx.uk/src/@planx/components/Confirmation/Editor.tsx b/editor.planx.uk/src/@planx/components/Confirmation/Editor.tsx
index 9ff71feff3..af7c706aaa 100644
--- a/editor.planx.uk/src/@planx/components/Confirmation/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Confirmation/Editor.tsx
@@ -18,7 +18,7 @@ export type Props = EditorProps<TYPES.Confirmation, Confirmation>;
 
 function StepEditor(props: ListManagerEditorProps<Step>) {
   return (
-    <Box>
+    <Box width="100%">
       <InputRow>
         <Input
           required
diff --git a/editor.planx.uk/src/@planx/components/DrawBoundary/Editor.tsx b/editor.planx.uk/src/@planx/components/DrawBoundary/Editor.tsx
index 2ab08c9fdb..137359292e 100644
--- a/editor.planx.uk/src/@planx/components/DrawBoundary/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/DrawBoundary/Editor.tsx
@@ -65,6 +65,7 @@ function DrawBoundaryComponent(props: Props) {
               <Input
                 name="dataFieldBoundary"
                 placeholder=""
+                format="data"
                 value={formik.values.dataFieldBoundary}
                 onChange={formik.handleChange}
               />
@@ -75,6 +76,7 @@ function DrawBoundaryComponent(props: Props) {
               <Input
                 name="dataFieldArea"
                 placeholder="property.boundary.area"
+                format="data"
                 value={formik.values.dataFieldArea}
                 onChange={formik.handleChange}
               />
diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.tsx
index 99526725f9..166d7d2683 100644
--- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.tsx
@@ -150,6 +150,7 @@ function FileTypeEditor(props: ListManagerEditorProps<FileType>) {
         <Input
           required
           name="fn"
+          format="data"
           value={props.value.fn}
           onChange={(e) =>
             props.onChange(merge(props.value, { fn: e.target.value }))
diff --git a/editor.planx.uk/src/@planx/components/InternalPortal/Editor.tsx b/editor.planx.uk/src/@planx/components/InternalPortal/Editor.tsx
index 939d9dd591..8df014bf69 100644
--- a/editor.planx.uk/src/@planx/components/InternalPortal/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/InternalPortal/Editor.tsx
@@ -47,7 +47,7 @@ const InternalPortalForm: React.FC<{
   return (
     <form id="modal" onSubmit={formik.handleSubmit} data-testid="form">
       <div>
-        Create new internal portal:{" "}
+        <label htmlFor="portalFlowId">Create new internal portal: </label>
         <InputField
           name="text"
           onChange={formik.handleChange}
@@ -55,6 +55,7 @@ const InternalPortalForm: React.FC<{
           rows={2}
           value={formik.values.text}
           disabled={!!formik.values.flowId}
+          id="portalFlowId"
           // required={!formik.values.flowId} (was ignored by @testing-library?)
         />
         {formik.errors.text && <FormError message={formik.errors.text} />}
diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/Editor.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/Editor.tsx
index da5ed191e7..ad551956a9 100644
--- a/editor.planx.uk/src/@planx/components/PlanningConstraints/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/Editor.tsx
@@ -53,6 +53,7 @@ function PlanningConstraintsComponent(props: Props) {
           <InputGroup label="Planning constraints data field">
             <InputRow>
               <Input
+                format="data"
                 name="fn"
                 placeholder={formik.values.fn}
                 value={formik.values.fn}
diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
index 96690a4f75..35dc0d8825 100644
--- a/editor.planx.uk/src/@planx/components/Question/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -44,7 +44,7 @@ const OptionEditor: React.FC<{
       {props.value.id && (
         <input type="hidden" value={props.value.id} readOnly />
       )}
-      <InputRowItem width="50%">
+      <InputRowItem width="100%">
         <Input
           // required
           format="bold"
@@ -86,11 +86,11 @@ const OptionEditor: React.FC<{
             },
           });
         }}
+        sx={{ width: "160px", maxWidth: "160px" }}
       />
     </InputRow>
     <InputRow>
       <Input
-        format="data"
         value={props.value.data.description || ""}
         placeholder="Description"
         onChange={(ev) => {
@@ -210,7 +210,7 @@ export const Question: React.FC<Props> = (props) => {
           </InputGroup>
         </ModalSectionContent>
 
-        <ModalSectionContent title="Options">
+        <ModalSectionContent subtitle="Options">
           <ListManager
             values={formik.values.options}
             onChange={(newOptions) => {
diff --git a/editor.planx.uk/src/lib/featureFlags.ts b/editor.planx.uk/src/lib/featureFlags.ts
index 89c8da4452..7bf56fbe6f 100644
--- a/editor.planx.uk/src/lib/featureFlags.ts
+++ b/editor.planx.uk/src/lib/featureFlags.ts
@@ -1,5 +1,8 @@
 // add/edit/remove feature flags in array below
-const AVAILABLE_FEATURE_FLAGS = ["DISABLE_SAVE_AND_RETURN"] as const;
+const AVAILABLE_FEATURE_FLAGS = [
+  "DISABLE_SAVE_AND_RETURN",
+  "SHOW_TEAM_SETTINGS",
+] as const;
 
 type featureFlag = (typeof AVAILABLE_FEATURE_FLAGS)[number];
 
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx
index e22d05a20a..fd1ea3558a 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx
@@ -1,23 +1,134 @@
-import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
+import { useFormik } from "formik";
+import { hasFeatureFlag } from "lib/featureFlags";
 import React from "react";
+import ColorPicker from "ui/ColorPicker";
+import EditorRow from "ui/EditorRow";
 import { FeaturePlaceholder } from "ui/FeaturePlaceholder";
+import InputDescription from "ui/InputDescription";
+import InputGroup from "ui/InputGroup";
+import InputLegend from "ui/InputLegend";
+import InputRow from "ui/InputRow";
+import InputRowItem from "ui/InputRowItem";
+import InputRowLabel from "ui/InputRowLabel";
+import PublicFileUploadButton from "ui/PublicFileUploadButton";
 
 const DesignSettings: React.FC = () => {
+  const formik = useFormik<{ bgColor: string }>({
+    initialValues: {
+      bgColor: "#000",
+    },
+    onSubmit: () => {},
+    validate: () => {},
+  });
+
+  const isUsingFeatureFlag = () => hasFeatureFlag("SHOW_TEAM_SETTINGS");
+
   return (
-    <>
-      <Box>
+    <form onSubmit={formik.handleSubmit}>
+      <EditorRow>
         <Typography variant="h2" component="h3" gutterBottom>
           Design
         </Typography>
         <Typography variant="body1">
           How your service appears to public users
         </Typography>
-        <Box py={5}>
-          <FeaturePlaceholder title="Feature in development" />
-        </Box>
-      </Box>
-    </>
+      </EditorRow>
+      {!isUsingFeatureFlag() ? (
+        <EditorRow>
+          <FeaturePlaceholder title="Feature in development" />{" "}
+        </EditorRow>
+      ) : (
+        <>
+          <EditorRow background>
+            <InputGroup flowSpacing>
+              <InputLegend>Theme colour</InputLegend>
+              <InputDescription>
+                Set the theme colour. The theme colour should be a dark colour
+                that contrasts with white ("#ffffff").
+              </InputDescription>
+              <InputDescription>
+                <Link href="https://www.planx.uk">
+                  See our guide for setting theme colours
+                </Link>
+              </InputDescription>
+              <InputRow>
+                <InputRowItem>
+                  <ColorPicker
+                    color={formik.values.bgColor}
+                    onChange={(color) => formik.setFieldValue("bgColor", color)}
+                    label="Theme colour"
+                  />
+                </InputRowItem>
+              </InputRow>
+            </InputGroup>
+          </EditorRow>
+          <EditorRow background>
+            <InputGroup flowSpacing>
+              <InputLegend>Logo</InputLegend>
+              <InputDescription>
+                Set the logo to be used in the header of the service. The logo
+                should contrast with a dark background colour and have a
+                transparent background.
+              </InputDescription>
+              <InputDescription>
+                <Link href="https://www.planx.uk">See our guide for logos</Link>
+              </InputDescription>
+              <InputRow>
+                <InputRowLabel>Logo:</InputRowLabel>
+                <InputRowItem width={50}>
+                  <PublicFileUploadButton />
+                </InputRowItem>
+                <Typography
+                  color="text.secondary"
+                  variant="body2"
+                  pl={2}
+                  alignSelf="center"
+                >
+                  .png or .svg
+                </Typography>
+              </InputRow>
+            </InputGroup>
+          </EditorRow>
+          <EditorRow background>
+            <InputGroup flowSpacing>
+              <InputLegend>Favicon</InputLegend>
+              <InputDescription>
+                Set the favicon to be used in the browser tab. The favicon
+                should be 32x32px and in .ico or .png format.
+              </InputDescription>
+              <InputDescription>
+                <Link href="https://www.planx.uk">
+                  See our guide for favicons
+                </Link>
+              </InputDescription>
+              <InputRow>
+                <InputRowLabel>Favicon:</InputRowLabel>
+                <InputRowItem width={50}>
+                  <PublicFileUploadButton />
+                </InputRowItem>
+                <Typography
+                  color="text.secondary"
+                  variant="body2"
+                  pl={2}
+                  alignSelf="center"
+                >
+                  .ico or .png
+                </Typography>
+              </InputRow>
+            </InputGroup>
+          </EditorRow>
+          <EditorRow>
+            <Button type="submit" variant="contained" color="primary">
+              Update design settings
+            </Button>
+          </EditorRow>
+        </>
+      )}
+    </form>
   );
 };
+
 export default DesignSettings;
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
index b123ff89db..24511d0089 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -4,8 +4,10 @@ import Switch, { SwitchProps } from "@mui/material/Switch";
 import Typography from "@mui/material/Typography";
 import { useFormik } from "formik";
 import React from "react";
+import EditorRow from "ui/EditorRow";
 import Input, { Props as InputProps } from "ui/Input";
 import InputGroup from "ui/InputGroup";
+import InputLegend from "ui/InputLegend";
 import InputRow from "ui/InputRow";
 import InputRowItem from "ui/InputRowItem";
 import RichTextInput from "ui/RichTextInput";
@@ -29,8 +31,8 @@ const TextInput: React.FC<{
   contentInputProps,
 }) => {
   return (
-    <Box mb={2} width="100%">
-      <Box my={2} display="flex" alignItems="center">
+    <Box width="100%">
+      <Box mb={2} display="flex" alignItems="center">
         <Switch {...switchProps} color="primary" />
         <Typography variant="h4" component="h5">
           {title}
@@ -98,15 +100,15 @@ const ServiceSettings: React.FC = () => {
 
   return (
     <form onSubmit={formik.handleSubmit}>
-      <Box pb={3} borderBottom={1}>
+      <EditorRow>
         <Typography variant="h2" component="h3" gutterBottom>
           Elements
         </Typography>
         <Typography variant="body1">
           Manage the features that users will be able to see
         </Typography>
-      </Box>
-      <Box borderBottom={1} pb={3}>
+      </EditorRow>
+      <EditorRow background>
         <TextInput
           title="Legal Disclaimer"
           description="Displayed before a user submits their application"
@@ -126,61 +128,61 @@ const ServiceSettings: React.FC = () => {
             onChange: formik.handleChange,
           }}
         />
-      </Box>
-      <Box pt={2}>
-        <Typography variant="h3" component="h4">
-          <strong>Footer Links</strong>
-        </Typography>
-        <InputGroup>
-          <TextInput
-            title="Help Page"
-            richText
-            description="A place to communicate FAQs, useful tips, or contact information"
-            switchProps={{
-              name: "elements.help.show",
-              checked: formik.values.elements?.help?.show,
-              onChange: formik.handleChange,
-            }}
-            headingInputProps={{
-              name: "elements.help.heading",
-              value: formik.values.elements?.help?.heading,
-              onChange: formik.handleChange,
-            }}
-            contentInputProps={{
-              name: "elements.help.content",
-              value: formik.values.elements?.help?.content,
-              onChange: formik.handleChange,
-            }}
-          />
-
-          <TextInput
-            title="Privacy Page"
-            richText
-            description="Your privacy policy"
-            switchProps={{
-              name: "elements.privacy.show",
-              checked: formik.values.elements?.privacy?.show,
-              onChange: formik.handleChange,
-            }}
-            headingInputProps={{
-              name: "elements.privacy.heading",
-              value: formik.values.elements?.privacy?.heading,
-              onChange: formik.handleChange,
-            }}
-            contentInputProps={{
-              name: "elements.privacy.content",
-              value: formik.values.elements?.privacy?.content,
-              onChange: formik.handleChange,
-            }}
-          />
+      </EditorRow>
+      <EditorRow background>
+        <InputGroup flowSpacing>
+          <InputLegend>Footer Links</InputLegend>
+          <InputRow>
+            <TextInput
+              title="Help Page"
+              richText
+              description="A place to communicate FAQs, useful tips, or contact information"
+              switchProps={{
+                name: "elements.help.show",
+                checked: formik.values.elements?.help?.show,
+                onChange: formik.handleChange,
+              }}
+              headingInputProps={{
+                name: "elements.help.heading",
+                value: formik.values.elements?.help?.heading,
+                onChange: formik.handleChange,
+              }}
+              contentInputProps={{
+                name: "elements.help.content",
+                value: formik.values.elements?.help?.content,
+                onChange: formik.handleChange,
+              }}
+            />
+          </InputRow>
+          <InputRow>
+            <TextInput
+              title="Privacy Page"
+              richText
+              description="Your privacy policy"
+              switchProps={{
+                name: "elements.privacy.show",
+                checked: formik.values.elements?.privacy?.show,
+                onChange: formik.handleChange,
+              }}
+              headingInputProps={{
+                name: "elements.privacy.heading",
+                value: formik.values.elements?.privacy?.heading,
+                onChange: formik.handleChange,
+              }}
+              contentInputProps={{
+                name: "elements.privacy.content",
+                value: formik.values.elements?.privacy?.content,
+                onChange: formik.handleChange,
+              }}
+            />
+          </InputRow>
         </InputGroup>
-
-        <Box py={2} justifyContent="flex-end" mb={4}>
-          <Button type="submit" variant="contained" color="primary">
-            Save
-          </Button>
-        </Box>
-      </Box>
+      </EditorRow>
+      <EditorRow>
+        <Button type="submit" variant="contained" color="primary">
+          Update elements
+        </Button>
+      </EditorRow>
     </form>
   );
 };
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx
index 5d4c4312fc..bc0f708dee 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx
@@ -36,7 +36,7 @@ function TabPanel(props: TabPanelProps) {
       {...other}
     >
       {value === index && (
-        <Container maxWidth="sm" disableGutters>
+        <Container maxWidth="formWrap" disableGutters>
           <Box py={7}>{children}</Box>
         </Container>
       )}
@@ -56,10 +56,11 @@ interface LinkTabProps {
   href?: string;
 }
 
-const StyledTab = styled(Tab)(() => ({
+const StyledTab = styled(Tab)(({ theme }) => ({
   position: "relative",
   zIndex: 1,
   textTransform: "none",
+  background: theme.palette.background.default,
 })) as typeof Tab;
 
 function LinkTab(props: LinkTabProps) {
@@ -84,16 +85,16 @@ const classes = {
   tabIndicator: `${PREFIX}-tabIndicator`,
 };
 
-const Root = styled(Box)(() => ({
+const Root = styled(Box)(({ theme }) => ({
   flexGrow: 1,
-  backgroundColor: "#f2f2f2",
+  backgroundColor: theme.palette.background.default,
   position: "absolute",
   top: HEADER_HEIGHT,
   left: 0,
   right: 0,
   minHeight: `calc(100% - ${HEADER_HEIGHT}px)`,
   [`& .${classes.tabs}`]: {
-    backgroundColor: "#ddd",
+    backgroundColor: theme.palette.border.main,
   },
   [`& .${classes.tabIndicator}`]: {
     height: "100%",
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx b/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
index 9506116602..b6f0a0b063 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
@@ -21,23 +21,27 @@ import { useStore } from "../../lib/store";
 const StyledDialog = styled(Dialog)(({ theme }) => ({
   // Target all modal sections (the direct child is the backdrop, hence the double child selector)
   "& > * > *": {
-    backgroundColor: theme.palette.grey[100],
+    backgroundColor: theme.palette.background.paper,
   },
 }));
 
 const CloseButton = styled(IconButton)(({ theme }) => ({
-  float: "right",
-  margin: 0,
-  padding: 0,
+  margin: "0 0 0 auto",
+  padding: theme.spacing(1),
   color: theme.palette.grey[600],
 }));
 
+const TypeSelect = styled("select")(() => ({
+  fontSize: "1em",
+  padding: "0.25em",
+}));
+
 const NodeTypeSelect: React.FC<{
   value: string;
   onChange: (newValue: string) => void;
 }> = (props) => {
   return (
-    <select
+    <TypeSelect
       value={fromSlug(props.value)}
       onChange={(ev) => {
         props.onChange(ev.target.value);
@@ -85,7 +89,7 @@ const NodeTypeSelect: React.FC<{
       <optgroup label="Outputs">
         <option value={TYPES.Send}>Send</option>
       </optgroup>
-    </select>
+    </TypeSelect>
   );
 };
 
@@ -120,7 +124,14 @@ const FormModal: React.FC<{
       disableScrollLock
       onClose={handleClose}
     >
-      <DialogTitle>
+      <DialogTitle
+        sx={{
+          py: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
         {!handleDelete && (
           <NodeTypeSelect
             value={type}
diff --git a/editor.planx.uk/src/ui/ColorPicker.tsx b/editor.planx.uk/src/ui/ColorPicker.tsx
index 45219d797a..729f0d3f9f 100644
--- a/editor.planx.uk/src/ui/ColorPicker.tsx
+++ b/editor.planx.uk/src/ui/ColorPicker.tsx
@@ -24,7 +24,6 @@ const Root = styled(Box, {
   display: "flex",
   alignItems: "center",
   ...(inline && {
-    height: 50,
     padding: theme.spacing(2, 0),
     "& .popover": {
       top: "calc(100% - 4px)",
@@ -32,15 +31,14 @@ const Root = styled(Box, {
   }),
 }));
 
-const Swatch = styled(Box)(() => ({
+const Swatch = styled(Box)(({ theme }) => ({
   background: "#fff",
   display: "inline-block",
   cursor: "pointer",
-  position: "absolute",
-  top: 0,
-  left: 0,
-  width: 18,
-  height: 18,
+  marginRight: theme.spacing(1),
+  width: 24,
+  height: 24,
+  border: `2px solid ${theme.palette.border.input}`,
 }));
 
 const Cover = styled(ButtonBase)(() => ({
@@ -64,11 +62,13 @@ const StyledButtonBase = styled(ButtonBase, {
   fontFamily: "inherit",
   fontSize: 15,
   position: "relative",
-  display: "block",
+  display: "flex",
+  alignItems: "center",
   textAlign: "left",
-  paddingLeft: theme.spacing(4),
-  paddingRight: theme.spacing(2),
+  padding: theme.spacing(1),
   whiteSpace: "nowrap",
+  backgroundColor: theme.palette.common.white,
+  border: `1px solid ${theme.palette.border.light}`,
   ...(show && {
     color: theme.palette.primary.dark,
     "& .swatch": {
@@ -94,7 +94,7 @@ export default function ColorPicker(props: Props): FCReturn {
 
   return (
     <Root inline={props.inline}>
-      <Typography mr={2} variant="body2">
+      <Typography mr={2} variant="body2" component="label">
         {props.label || "Background colour"}:{" "}
       </Typography>
       <StyledButtonBase show={show} onClick={handleClick} disableRipple>
diff --git a/editor.planx.uk/src/ui/EditorRow.tsx b/editor.planx.uk/src/ui/EditorRow.tsx
new file mode 100644
index 0000000000..63dc188bd1
--- /dev/null
+++ b/editor.planx.uk/src/ui/EditorRow.tsx
@@ -0,0 +1,38 @@
+import Box, { BoxProps } from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+import { contentFlowSpacing } from "@planx/components/shared/Preview/Card";
+import React, { ReactNode } from "react";
+
+interface RootProps extends BoxProps {
+  background?: boolean;
+}
+
+const Root = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "background",
+})<RootProps>(({ background, theme }) => ({
+  display: "block",
+  width: "100%",
+  padding: theme.spacing(2.5, 0),
+  "&:first-of-type": {
+    paddingTop: 0,
+  },
+  "& > * + *": {
+    ...contentFlowSpacing(theme),
+  },
+  ...(background && {
+    background: theme.palette.background.paper,
+    marginTop: theme.spacing(2),
+    padding: theme.spacing(2.5),
+    border: `1px solid ${theme.palette.border.light}`,
+  }),
+}));
+
+export default function InputRow({
+  children,
+  background,
+}: {
+  children: ReactNode;
+  background?: boolean;
+}) {
+  return <Root background={background}>{children}</Root>;
+}
diff --git a/editor.planx.uk/src/ui/ImgInput.tsx b/editor.planx.uk/src/ui/ImgInput.tsx
index 5cd4a37160..17104b37b7 100644
--- a/editor.planx.uk/src/ui/ImgInput.tsx
+++ b/editor.planx.uk/src/ui/ImgInput.tsx
@@ -12,16 +12,17 @@ import PublicFileUploadButton from "./PublicFileUploadButton";
 
 const ImageUploadContainer = styled(Box)(() => ({
   height: 50,
-  width: 50,
   position: "relative",
+  flexGrow: 0,
+  display: "flex",
+  flexDirection: "row-reverse",
+  alignItems: "center",
 }));
 
 const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  position: "absolute",
   backgroundColor: "rgba(0, 0, 0, 0.5)",
   color: theme.palette.common.white,
-  top: 0,
-  right: 0,
+  marginLeft: theme.spacing(0.5),
 }));
 
 /** Uploads an image and returns corresponding URL */
diff --git a/editor.planx.uk/src/ui/Input.tsx b/editor.planx.uk/src/ui/Input.tsx
index 263670c532..19cf9fd9f5 100644
--- a/editor.planx.uk/src/ui/Input.tsx
+++ b/editor.planx.uk/src/ui/Input.tsx
@@ -37,26 +37,36 @@ const StyledInputBase = styled(InputBase, {
   shouldForwardProp: (prop) =>
     !["format", "bordered"].includes(prop.toString()),
 })<StyledInputBase>(({ theme, format, bordered }) => ({
-  backgroundColor: "#fff",
+  backgroundColor: theme.palette.common.white,
   // Maintain 16px minimum input size to prevent zoom on iOS
   fontSize: "1rem",
   width: "100%",
   padding: theme.spacing(0, 1.5),
   height: 50,
+  border: `1px solid ${theme.palette.border.light}`,
   "& input": {
     fontWeight: "inherit",
   },
+  "& ::placeholder": {
+    color: theme.palette.text.secondary,
+    opacity: "0.5",
+  },
+  "&:focus-within": {
+    border: `1px solid ${theme.palette.border.input}`,
+    boxShadow: `inset 0px 0px 0px 1px ${theme.palette.border.input}`,
+    outline: `3px solid ${theme.palette.action.focus}`,
+  },
   ...(bordered && {
     border: `2px solid ${theme.palette.text.primary}`,
   }),
   ...(format === "data" && {
-    backgroundColor: "#fafafa",
+    backgroundColor: theme.palette.background.paper,
   }),
   ...(format === "bold" && {
     fontWeight: FONT_WEIGHT_SEMI_BOLD,
   }),
   ...(format === "large" && {
-    backgroundColor: "#fff",
+    backgroundColor: theme.palette.common.white,
     height: 50,
     fontSize: 25,
     width: "100%",
diff --git a/editor.planx.uk/src/ui/InputDescription.tsx b/editor.planx.uk/src/ui/InputDescription.tsx
new file mode 100644
index 0000000000..d6f4d1cbe1
--- /dev/null
+++ b/editor.planx.uk/src/ui/InputDescription.tsx
@@ -0,0 +1,17 @@
+import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import React, { ReactNode } from "react";
+
+const Description = styled(Typography)(({ theme }) => ({
+  width: "100%",
+  textAlign: "left",
+  color: theme.palette.text.secondary,
+})) as typeof Typography;
+
+export default function InputDescription({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <Description variant="body2">{children}</Description>;
+}
diff --git a/editor.planx.uk/src/ui/InputField.tsx b/editor.planx.uk/src/ui/InputField.tsx
index 50b9ed8155..9a871d7430 100644
--- a/editor.planx.uk/src/ui/InputField.tsx
+++ b/editor.planx.uk/src/ui/InputField.tsx
@@ -12,7 +12,8 @@ const classes = {
 
 const Root = styled(InputBase)(({ theme }) => ({
   [`&.${classes.root}`]: {
-    backgroundColor: theme.palette.grey[100],
+    backgroundColor: theme.palette.common.white,
+    border: `1px solid ${theme.palette.border.light}`,
     transition: "background-color 0.2s ease-out",
     display: "block",
     width: "100%",
diff --git a/editor.planx.uk/src/ui/InputGroup.tsx b/editor.planx.uk/src/ui/InputGroup.tsx
index 63a8ba305d..466d0baa93 100644
--- a/editor.planx.uk/src/ui/InputGroup.tsx
+++ b/editor.planx.uk/src/ui/InputGroup.tsx
@@ -3,6 +3,7 @@ import DragHandle from "@mui/icons-material/DragHandle";
 import Box, { BoxProps } from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
 import React, { PropsWithChildren, useRef } from "react";
 import { useDrag, useDrop } from "react-dnd";
 
@@ -13,12 +14,19 @@ interface Props {
   deleteInputGroup?: any;
   deletable?: boolean;
   draggable?: boolean;
+  flowSpacing?: boolean;
   id?: string;
   index?: number;
   handleMove?: (dragIndex: number, hoverIndex: number) => void;
 }
 
-const Root = styled("fieldset")(({ theme }) => ({
+interface RootProps extends BoxProps {
+  flowSpacing?: boolean;
+}
+
+const Root = styled("fieldset", {
+  shouldForwardProp: (prop) => prop !== "flowSpacing",
+})<RootProps>(({ flowSpacing, theme }) => ({
   border: 0,
   margin: 0,
   padding: 0,
@@ -28,12 +36,17 @@ const Root = styled("fieldset")(({ theme }) => ({
   "& .inputGroup + .inputGroup": {
     marginTop: 0,
   },
+  ...(flowSpacing && {
+    "& > div > * + *": {
+      marginTop: theme.spacing(1.5),
+    },
+  }),
 }));
 
-const Label = styled("legend")(({ theme }) => ({
-  fontSize: 15,
-  padding: theme.spacing(1.5, 0),
-}));
+const Label = styled(Typography)(({ theme }) => ({
+  display: "block",
+  padding: theme.spacing(0.75, 0),
+})) as typeof Typography;
 
 const Drag = styled(Box)(({ theme }) => ({
   position: "absolute",
@@ -107,6 +120,7 @@ export default function InputGroup({
   id,
   index = 0,
   handleMove,
+  flowSpacing,
 }: Props): FCReturn {
   const [deleteHover, setDeleteHover] = React.useState(false);
 
@@ -169,8 +183,12 @@ export default function InputGroup({
   if (draggable) drag(drop(ref));
 
   return (
-    <Root ref={ref} className="inputGroup">
-      {label && <Label>{label}</Label>}
+    <Root ref={ref} className="inputGroup" flowSpacing={flowSpacing}>
+      {label && (
+        <Label variant="subtitle2" component="label">
+          {label}
+        </Label>
+      )}
       <Content
         deletable={deletable}
         draggable={draggable}
diff --git a/editor.planx.uk/src/ui/InputLegend.tsx b/editor.planx.uk/src/ui/InputLegend.tsx
new file mode 100644
index 0000000000..2f9c7094a2
--- /dev/null
+++ b/editor.planx.uk/src/ui/InputLegend.tsx
@@ -0,0 +1,16 @@
+import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import React, { ReactNode } from "react";
+
+const Legend = styled(Typography)(() => ({
+  display: "block",
+  width: "100%",
+})) as typeof Typography;
+
+export default function InputLegend({ children }: { children: ReactNode }) {
+  return (
+    <Legend variant="h3" component="legend">
+      {children}
+    </Legend>
+  );
+}
diff --git a/editor.planx.uk/src/ui/InputRow.tsx b/editor.planx.uk/src/ui/InputRow.tsx
index 19c0529fd8..9f4c515dff 100644
--- a/editor.planx.uk/src/ui/InputRow.tsx
+++ b/editor.planx.uk/src/ui/InputRow.tsx
@@ -8,12 +8,12 @@ const Root = styled(Box, {
   display: "flex",
   width: "100%",
   "&:not(:last-child)": {
-    marginBottom: 2,
+    marginBottom: 5,
   },
   "& > *": {
     flexGrow: 1,
     marginLeft: 1,
-    marginRight: 1,
+    marginRight: 5,
     "&:first-child": {
       marginLeft: 0,
     },
diff --git a/editor.planx.uk/src/ui/InputRowLabel.tsx b/editor.planx.uk/src/ui/InputRowLabel.tsx
index 2e0b4f85f7..12b41d3679 100644
--- a/editor.planx.uk/src/ui/InputRowLabel.tsx
+++ b/editor.planx.uk/src/ui/InputRowLabel.tsx
@@ -1,8 +1,8 @@
-import Box from "@mui/material/Box";
 import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
 import React, { ReactNode } from "react";
 
-const Root = styled(Box)(({ theme }) => ({
+const Label = styled(Typography)(({ theme }) => ({
   flexShrink: 1,
   flexGrow: 0,
   paddingRight: theme.spacing(2),
@@ -10,8 +10,12 @@ const Root = styled(Box)(({ theme }) => ({
   "&:not(:first-child)": {
     paddingLeft: theme.spacing(2),
   },
-}));
+})) as typeof Typography;
 
 export default function InputRowLabel({ children }: { children: ReactNode }) {
-  return <Root>{children}</Root>;
+  return (
+    <Label variant="body2" component="label">
+      {children}
+    </Label>
+  );
 }
diff --git a/editor.planx.uk/src/ui/ModalSection.tsx b/editor.planx.uk/src/ui/ModalSection.tsx
index 2160425fab..506f12f7a5 100644
--- a/editor.planx.uk/src/ui/ModalSection.tsx
+++ b/editor.planx.uk/src/ui/ModalSection.tsx
@@ -3,9 +3,9 @@ import { styled } from "@mui/material/styles";
 import React, { PropsWithChildren } from "react";
 
 const Root = styled(Box)(({ theme }) => ({
-  paddingBottom: theme.spacing(3),
+  padding: theme.spacing(2, 0),
   "& + .modalSection": {
-    borderTop: "0.5px solid #bbb",
+    borderTop: `1px solid ${theme.palette.border.main}`,
   },
 }));
 
diff --git a/editor.planx.uk/src/ui/ModalSectionContent.tsx b/editor.planx.uk/src/ui/ModalSectionContent.tsx
index 7498525466..f8739275ab 100644
--- a/editor.planx.uk/src/ui/ModalSectionContent.tsx
+++ b/editor.planx.uk/src/ui/ModalSectionContent.tsx
@@ -1,11 +1,11 @@
-import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
 import React from "react";
-import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
 interface Props {
   title?: string;
+  subtitle?: string;
   children?: JSX.Element[] | JSX.Element;
   author?: string;
   Icon?: any;
@@ -15,7 +15,7 @@ const SectionContentGrid = styled(Grid)(({ theme }) => ({
   position: "relative",
   paddingTop: theme.spacing(2),
   paddingBottom: theme.spacing(2),
-  wrap: "no-wrap",
+  flexWrap: "nowrap",
 }));
 
 const LeftGutter = styled(Grid)(({ theme }) => ({
@@ -28,12 +28,16 @@ const SectionContent = styled(Grid)(({ theme }) => ({
   paddingRight: theme.spacing(6),
 }));
 
-const Title = styled(Box)(({ theme }) => ({
-  opacity: 0.75,
-  fontWeight: FONT_WEIGHT_SEMI_BOLD,
-  fontSize: 18,
+const Title = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.primary,
   paddingBottom: theme.spacing(2),
-}));
+})) as typeof Typography;
+
+const Subtitle = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  paddingBottom: theme.spacing(2),
+  fontWeight: 600,
+})) as typeof Typography;
 
 const Author = styled("span")(({ theme }) => ({
   fontWeight: 400,
@@ -42,6 +46,7 @@ const Author = styled("span")(({ theme }) => ({
 
 export default function ModalSectionContent({
   title,
+  subtitle,
   children,
   author,
   Icon,
@@ -51,11 +56,17 @@ export default function ModalSectionContent({
       <LeftGutter item>{Icon && <Icon />}</LeftGutter>
       <SectionContent item>
         {title && (
-          <Title>
+          <Title variant="h3">
             {title}
             {author && <Author>by {author}</Author>}
           </Title>
         )}
+        {subtitle && (
+          <Subtitle variant="subtitle1">
+            {subtitle}
+            {author && <Author>by {author}</Author>}
+          </Subtitle>
+        )}
         {children}
       </SectionContent>
     </SectionContentGrid>
diff --git a/editor.planx.uk/src/ui/ModalSubtitle.tsx b/editor.planx.uk/src/ui/ModalSubtitle.tsx
index e7f5a0f1be..739bb6a3f3 100644
--- a/editor.planx.uk/src/ui/ModalSubtitle.tsx
+++ b/editor.planx.uk/src/ui/ModalSubtitle.tsx
@@ -2,7 +2,6 @@ import Box from "@mui/material/Box";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import React from "react";
-import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 
 interface Props {
   title: string;
@@ -10,17 +9,15 @@ interface Props {
 
 const Root = styled(Box)(() => ({
   display: "flex",
-  height: 50,
   alignItems: "center",
 }));
 
-const StyledTypography = styled(Typography)(() => ({
-  fontWeight: FONT_WEIGHT_SEMI_BOLD,
-  opacity: 0.75,
+const StyledTypography = styled(Typography)(({ theme }) => ({
+  padding: theme.spacing(1.15, 0, 0.75),
 }));
 
 export const ModalSubtitle: React.FC<Props> = ({ title }) => (
   <Root sx={{ display: "flex" }}>
-    <StyledTypography variant="body2">{title}</StyledTypography>
+    <StyledTypography variant="subtitle2">{title}</StyledTypography>
   </Root>
 );
diff --git a/editor.planx.uk/src/ui/OptionButton.tsx b/editor.planx.uk/src/ui/OptionButton.tsx
index 1786ee739e..adb45a07e3 100644
--- a/editor.planx.uk/src/ui/OptionButton.tsx
+++ b/editor.planx.uk/src/ui/OptionButton.tsx
@@ -12,8 +12,8 @@ const Root = styled(ButtonBase, {
     !["selected", "backgroundColor"].includes(prop.toString()),
 })<Props>(({ theme, selected, backgroundColor }) => ({
   height: 50,
-  paddingLeft: 50,
-  paddingRight: theme.spacing(3),
+  padding: theme.spacing(0, 3, 0, 5),
+  marginBottom: theme.spacing(0.5),
   fontSize: 15,
   position: "relative",
   fontFamily: "inherit",
@@ -21,18 +21,20 @@ const Root = styled(ButtonBase, {
   width: "auto",
   minWidth: 200,
   textAlign: "left",
+  border: `1px solid ${theme.palette.border.light}`,
+  backgroundColor: theme.palette.common.white,
   "&::before": {
     content: "''",
     position: "absolute",
-    height: 10,
-    width: 10,
-    left: 20,
-    top: 20,
+    height: 12,
+    width: 12,
+    left: 18,
+    top: 18,
     borderRadius: "50%",
-    backgroundColor: theme.palette.grey[500],
+    backgroundColor: theme.palette.grey[400],
     ...(selected && {
       color: "#fff",
-      backgroundColor: backgroundColor || theme.palette.success.light,
+      backgroundColor: backgroundColor || theme.palette.success.main,
     }),
   },
   ...(!selected && {
@@ -41,7 +43,7 @@ const Root = styled(ButtonBase, {
     },
   }),
   ...(selected && {
-    backgroundColor: theme.palette.grey[300],
+    backgroundColor: theme.palette.grey[200],
   }),
 }));
 
diff --git a/editor.planx.uk/src/ui/PublicFileUploadButton.tsx b/editor.planx.uk/src/ui/PublicFileUploadButton.tsx
index 7b8d8e2ff6..41cf283d4d 100644
--- a/editor.planx.uk/src/ui/PublicFileUploadButton.tsx
+++ b/editor.planx.uk/src/ui/PublicFileUploadButton.tsx
@@ -26,8 +26,10 @@ const Root = styled(ButtonBase, {
   borderRadius: 0,
   height: 50,
   width: 50,
-  backgroundColor: "#fff",
-  color: theme.palette.primary.main,
+  flexGrow: 0,
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.primary.dark,
+  border: `1px solid ${theme.palette.border.light}`,
   ...(isDragActive && {
     border: `2px dashed ${theme.palette.primary.dark}`,
   }),
diff --git a/editor.planx.uk/src/ui/RichTextInput.css b/editor.planx.uk/src/ui/RichTextInput.css
index 903872fb5b..6127824065 100644
--- a/editor.planx.uk/src/ui/RichTextInput.css
+++ b/editor.planx.uk/src/ui/RichTextInput.css
@@ -1,7 +1,11 @@
 .ProseMirror {
-  padding: 15px;
+  padding: 12px 15px;
   background-color: #fff;
   min-height: 50px;
+  border: 1px solid #e0e0e0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .ProseMirror > * {
@@ -13,13 +17,20 @@
 }
 
 .ProseMirror p.is-editor-empty:first-child::before {
-  color: #adb5bd;
+  color: #505a5f;
+  opacity: 0.5;
   content: attr(data-placeholder);
   float: left;
   height: 0;
   pointer-events: none;
 }
 
+.ProseMirror.ProseMirror-focused {
+  border: 1px solid #000;
+  box-shadow: inset 0px 0px 0px 1px #000;
+  outline: 3px solid #ffdd00;
+}
+
 .passport {
   background-color: #f2f2f2;
   color: #000661;

From e2966c7d7bb26bf514fedfc4bba7ee1b20209309 Mon Sep 17 00:00:00 2001
From: Ian Jones <51156018+ianjon3s@users.noreply.github.com>
Date: Thu, 30 Nov 2023 15:55:27 +0000
Subject: [PATCH 3/5] chore: Remove obsolete Source Sans Pro ref from header
 (#2501)

---
 editor.planx.uk/.storybook/preview-head.html |  7 -------
 editor.planx.uk/public/index.html            | 10 ----------
 2 files changed, 17 deletions(-)

diff --git a/editor.planx.uk/.storybook/preview-head.html b/editor.planx.uk/.storybook/preview-head.html
index ad496f6275..0b2c6d54ee 100644
--- a/editor.planx.uk/.storybook/preview-head.html
+++ b/editor.planx.uk/.storybook/preview-head.html
@@ -3,10 +3,3 @@
   href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
   rel="stylesheet"
 />
-<!-- OS vector tile source specifies fonts in .pbf format, which OpenLayers can't load, so make them available directly  -->
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-  href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap"
-  rel="stylesheet"
-/>
diff --git a/editor.planx.uk/public/index.html b/editor.planx.uk/public/index.html
index 665bc1dd63..9e84e83265 100644
--- a/editor.planx.uk/public/index.html
+++ b/editor.planx.uk/public/index.html
@@ -25,16 +25,6 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>PlanX</title>
-    <!--
-      Fonts for @opensystemslab/map:
-      OS vector tile source specifies fonts in .pbf format, which OpenLayers can't load, so make them available directly
-    -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap"
-      rel="stylesheet"
-    />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

From d517f7d94a171e0440290dd855965f072afce7a5 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Thu, 30 Nov 2023 16:02:33 +0000
Subject: [PATCH 4/5] chore: bump planx-core (#2502)

---
 api.planx.uk/package.json           |  2 +-
 api.planx.uk/pnpm-lock.yaml         | 18 +++++++-----------
 e2e/tests/api-driven/package.json   |  2 +-
 e2e/tests/api-driven/pnpm-lock.yaml | 14 +++++---------
 e2e/tests/ui-driven/package.json    |  2 +-
 e2e/tests/ui-driven/pnpm-lock.yaml  | 14 +++++---------
 editor.planx.uk/package.json        |  2 +-
 editor.planx.uk/pnpm-lock.yaml      | 10 +++++-----
 8 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/api.planx.uk/package.json b/api.planx.uk/package.json
index 502ee2be47..48a76b0771 100644
--- a/api.planx.uk/package.json
+++ b/api.planx.uk/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@airbrake/node": "^2.1.8",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#d38a7d3",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#415ae86",
     "@types/isomorphic-fetch": "^0.0.36",
     "adm-zip": "^0.5.10",
     "aws-sdk": "^2.1467.0",
diff --git a/api.planx.uk/pnpm-lock.yaml b/api.planx.uk/pnpm-lock.yaml
index 370578d940..9b8bb13bf0 100644
--- a/api.planx.uk/pnpm-lock.yaml
+++ b/api.planx.uk/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
     specifier: ^2.1.8
     version: 2.1.8
   '@opensystemslab/planx-core':
-    specifier: git+https://github.com/theopensystemslab/planx-core#d38a7d3
-    version: github.com/theopensystemslab/planx-core/d38a7d3
+    specifier: git+https://github.com/theopensystemslab/planx-core#415ae86
+    version: github.com/theopensystemslab/planx-core/415ae86
   '@types/isomorphic-fetch':
     specifier: ^0.0.36
     version: 0.0.36
@@ -2218,10 +2218,6 @@ packages:
     resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
     dev: false
 
-  /@types/prop-types@15.7.9:
-    resolution: {integrity: sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==}
-    dev: false
-
   /@types/qs@6.9.7:
     resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==}
 
@@ -2237,7 +2233,7 @@ packages:
   /@types/react@18.2.14:
     resolution: {integrity: sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g==}
     dependencies:
-      '@types/prop-types': 15.7.9
+      '@types/prop-types': 15.7.11
       '@types/scheduler': 0.16.3
       csstype: 3.1.2
     dev: false
@@ -7006,11 +7002,11 @@ packages:
   /punycode@2.3.0:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}
+    dev: false
 
   /punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
-    dev: false
 
   /pure-rand@6.0.2:
     resolution: {integrity: sha512-6Yg0ekpKICSjPswYOuC5sku/TSWaRYlA0qsXqJgM/d/4pLPHPuTxK7Nbf7jFKzAeedUhR8C7K9Uv63FBsSo8xQ==}
@@ -8187,7 +8183,7 @@ packages:
   /uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
-      punycode: 2.3.0
+      punycode: 2.3.1
 
   /urix@0.1.0:
     resolution: {integrity: sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==}
@@ -8531,8 +8527,8 @@ packages:
     resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
     dev: false
 
-  github.com/theopensystemslab/planx-core/d38a7d3:
-    resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/d38a7d3}
+  github.com/theopensystemslab/planx-core/415ae86:
+    resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/415ae86}
     name: '@opensystemslab/planx-core'
     version: 1.0.0
     prepare: true
diff --git a/e2e/tests/api-driven/package.json b/e2e/tests/api-driven/package.json
index 24d94c7145..2588a71686 100644
--- a/e2e/tests/api-driven/package.json
+++ b/e2e/tests/api-driven/package.json
@@ -6,7 +6,7 @@
   },
   "dependencies": {
     "@cucumber/cucumber": "^9.3.0",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#d38a7d3",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#415ae86",
     "axios": "^1.6.0",
     "dotenv": "^16.3.1",
     "dotenv-expand": "^10.0.0",
diff --git a/e2e/tests/api-driven/pnpm-lock.yaml b/e2e/tests/api-driven/pnpm-lock.yaml
index e447ef22b1..61a054d159 100644
--- a/e2e/tests/api-driven/pnpm-lock.yaml
+++ b/e2e/tests/api-driven/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
     specifier: ^9.3.0
     version: 9.3.0
   '@opensystemslab/planx-core':
-    specifier: git+https://github.com/theopensystemslab/planx-core#d38a7d3
-    version: github.com/theopensystemslab/planx-core/d38a7d3
+    specifier: git+https://github.com/theopensystemslab/planx-core#415ae86
+    version: github.com/theopensystemslab/planx-core/415ae86
   axios:
     specifier: ^1.6.0
     version: 1.6.0
@@ -741,10 +741,6 @@ packages:
     resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
     dev: false
 
-  /@types/prop-types@15.7.9:
-    resolution: {integrity: sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==}
-    dev: false
-
   /@types/react-transition-group@4.4.8:
     resolution: {integrity: sha512-QmQ22q+Pb+HQSn04NL3HtrqHwYMf4h3QKArOy5F8U5nEVMaihBs3SR10WiOM1iwPz5jIo8x/u11al+iEGZZrvg==}
     dependencies:
@@ -754,7 +750,7 @@ packages:
   /@types/react@18.2.18:
     resolution: {integrity: sha512-da4NTSeBv/P34xoZPhtcLkmZuJ+oYaCxHmyHzwaDQo9RQPBeXV+06gEk2FpqEcsX9XrnNLvRpVh6bdavDSjtiQ==}
     dependencies:
-      '@types/prop-types': 15.7.9
+      '@types/prop-types': 15.7.11
       '@types/scheduler': 0.16.3
       csstype: 3.1.2
     dev: false
@@ -2825,8 +2821,8 @@ packages:
     resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
     dev: false
 
-  github.com/theopensystemslab/planx-core/d38a7d3:
-    resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/d38a7d3}
+  github.com/theopensystemslab/planx-core/415ae86:
+    resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/415ae86}
     name: '@opensystemslab/planx-core'
     version: 1.0.0
     prepare: true
diff --git a/e2e/tests/ui-driven/package.json b/e2e/tests/ui-driven/package.json
index 137563cf06..6d7f6c49ac 100644
--- a/e2e/tests/ui-driven/package.json
+++ b/e2e/tests/ui-driven/package.json
@@ -8,7 +8,7 @@
     "postinstall": "./install-dependencies.sh"
   },
   "dependencies": {
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#d38a7d3",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#415ae86",
     "axios": "^1.6.0",
     "dotenv": "^16.3.1",
     "eslint": "^8.44.0",
diff --git a/e2e/tests/ui-driven/pnpm-lock.yaml b/e2e/tests/ui-driven/pnpm-lock.yaml
index c39afbb54c..c6d07f921e 100644
--- a/e2e/tests/ui-driven/pnpm-lock.yaml
+++ b/e2e/tests/ui-driven/pnpm-lock.yaml
@@ -6,8 +6,8 @@ settings:
 
 dependencies:
   '@opensystemslab/planx-core':
-    specifier: git+https://github.com/theopensystemslab/planx-core#d38a7d3
-    version: github.com/theopensystemslab/planx-core/d38a7d3
+    specifier: git+https://github.com/theopensystemslab/planx-core#415ae86
+    version: github.com/theopensystemslab/planx-core/415ae86
   axios:
     specifier: ^1.6.0
     version: 1.6.0
@@ -590,10 +590,6 @@ packages:
     resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
     dev: false
 
-  /@types/prop-types@15.7.9:
-    resolution: {integrity: sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==}
-    dev: false
-
   /@types/react-transition-group@4.4.8:
     resolution: {integrity: sha512-QmQ22q+Pb+HQSn04NL3HtrqHwYMf4h3QKArOy5F8U5nEVMaihBs3SR10WiOM1iwPz5jIo8x/u11al+iEGZZrvg==}
     dependencies:
@@ -603,7 +599,7 @@ packages:
   /@types/react@18.2.20:
     resolution: {integrity: sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==}
     dependencies:
-      '@types/prop-types': 15.7.9
+      '@types/prop-types': 15.7.11
       '@types/scheduler': 0.16.3
       csstype: 3.1.2
     dev: false
@@ -2629,8 +2625,8 @@ packages:
     resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
     dev: false
 
-  github.com/theopensystemslab/planx-core/d38a7d3:
-    resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/d38a7d3}
+  github.com/theopensystemslab/planx-core/415ae86:
+    resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/415ae86}
     name: '@opensystemslab/planx-core'
     version: 1.0.0
     prepare: true
diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json
index bbe9fd4576..7a172ddae6 100644
--- a/editor.planx.uk/package.json
+++ b/editor.planx.uk/package.json
@@ -14,7 +14,7 @@
     "@mui/styles": "^5.14.5",
     "@mui/utils": "^5.14.5",
     "@opensystemslab/map": "^0.7.5",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#d38a7d3",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#415ae86",
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.6",
diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml
index 6de742818e..89141e129f 100644
--- a/editor.planx.uk/pnpm-lock.yaml
+++ b/editor.planx.uk/pnpm-lock.yaml
@@ -45,8 +45,8 @@ dependencies:
     specifier: ^0.7.5
     version: 0.7.5
   '@opensystemslab/planx-core':
-    specifier: git+https://github.com/theopensystemslab/planx-core#d38a7d3
-    version: github.com/theopensystemslab/planx-core/d38a7d3(@types/react@18.2.20)
+    specifier: git+https://github.com/theopensystemslab/planx-core#415ae86
+    version: github.com/theopensystemslab/planx-core/415ae86(@types/react@18.2.20)
   '@tiptap/core':
     specifier: ^2.0.3
     version: 2.0.3(@tiptap/pm@2.0.3)
@@ -20780,9 +20780,9 @@ packages:
       use-sync-external-store: 1.2.0(react@18.2.0)
     dev: false
 
-  github.com/theopensystemslab/planx-core/d38a7d3(@types/react@18.2.20):
-    resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/d38a7d3}
-    id: github.com/theopensystemslab/planx-core/d38a7d3
+  github.com/theopensystemslab/planx-core/415ae86(@types/react@18.2.20):
+    resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/415ae86}
+    id: github.com/theopensystemslab/planx-core/415ae86
     name: '@opensystemslab/planx-core'
     version: 1.0.0
     prepare: true

From 4be7446f60e4341e0dd166dfe77eed0d5b6c07f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Fri, 1 Dec 2023 08:57:01 +0000
Subject: [PATCH 5/5] feat: Add `team_integrations` table (#2499)

* feat: Add team_integrations table

* feat: Add team_integrations table

* chore: Update sync scripts
---
 hasura.planx.uk/metadata/tables.yaml          | 20 +++++
 .../down.sql                                  |  1 +
 .../up.sql                                    | 11 +++
 .../tests/team_integrations.test.js           | 76 +++++++++++++++++++
 scripts/seed-database/container.sh            |  5 ++
 scripts/seed-database/write/main.sql          |  3 +-
 .../seed-database/write/team_integrations.sql | 23 ++++++
 7 files changed, 138 insertions(+), 1 deletion(-)
 create mode 100644 hasura.planx.uk/migrations/1701282718987_create_table_public_team_integrations/down.sql
 create mode 100644 hasura.planx.uk/migrations/1701282718987_create_table_public_team_integrations/up.sql
 create mode 100644 hasura.planx.uk/tests/team_integrations.test.js
 create mode 100644 scripts/seed-database/write/team_integrations.sql

diff --git a/hasura.planx.uk/metadata/tables.yaml b/hasura.planx.uk/metadata/tables.yaml
index 2e6347e32a..eb5be3e98f 100644
--- a/hasura.planx.uk/metadata/tables.yaml
+++ b/hasura.planx.uk/metadata/tables.yaml
@@ -1220,6 +1220,18 @@
             - locked_at:
                 _is_null: true
         check: null
+- table:
+    schema: public
+    name: team_integrations
+  select_permissions:
+    - role: api
+      permission:
+        columns:
+          - id
+          - team_id
+          - staging_bops_submission_url
+          - production_bops_submission_url
+        filter: {}
 - table:
     schema: public
     name: team_members
@@ -1284,6 +1296,14 @@
 - table:
     schema: public
     name: teams
+  object_relationships:
+    - name: integrations
+      using:
+        foreign_key_constraint_on:
+          column: team_id
+          table:
+            schema: public
+            name: team_integrations
   array_relationships:
     - name: flows
       using:
diff --git a/hasura.planx.uk/migrations/1701282718987_create_table_public_team_integrations/down.sql b/hasura.planx.uk/migrations/1701282718987_create_table_public_team_integrations/down.sql
new file mode 100644
index 0000000000..f3ab63ba15
--- /dev/null
+++ b/hasura.planx.uk/migrations/1701282718987_create_table_public_team_integrations/down.sql
@@ -0,0 +1 @@
+DROP TABLE "public"."team_integrations";
diff --git a/hasura.planx.uk/migrations/1701282718987_create_table_public_team_integrations/up.sql b/hasura.planx.uk/migrations/1701282718987_create_table_public_team_integrations/up.sql
new file mode 100644
index 0000000000..a05efec395
--- /dev/null
+++ b/hasura.planx.uk/migrations/1701282718987_create_table_public_team_integrations/up.sql
@@ -0,0 +1,11 @@
+CREATE TABLE "public"."team_integrations" (
+  "id" serial NOT NULL,
+  "team_id" integer NOT NULL,
+  "staging_bops_submission_url" text,
+  "production_bops_submission_url" text,
+  PRIMARY KEY ("id"),
+  FOREIGN KEY ("team_id") REFERENCES "public"."teams"("id") ON UPDATE restrict ON DELETE cascade,
+  UNIQUE ("team_id")
+);
+
+COMMENT ON TABLE "public"."team_integrations" IS E'Tracks URLs and API keys for integrations';
\ No newline at end of file
diff --git a/hasura.planx.uk/tests/team_integrations.test.js b/hasura.planx.uk/tests/team_integrations.test.js
new file mode 100644
index 0000000000..612c5a4b8d
--- /dev/null
+++ b/hasura.planx.uk/tests/team_integrations.test.js
@@ -0,0 +1,76 @@
+const { introspectAs } = require("./utils");
+
+describe("team_integrations", () => {
+  describe("public", () => {
+    let i;
+    beforeAll(async () => {
+      i = await introspectAs("public");
+    });
+
+    test("cannot query team_integrations", () => {
+      expect(i.queries).not.toContain("team_integrations");
+    });
+
+    test("cannot create, update, or delete team_integrations", () => {
+      expect(i).toHaveNoMutationsFor("team_integrations");
+    });
+  });
+
+  describe("admin", () => {
+    let i;
+    beforeAll(async () => {
+      i = await introspectAs("admin");
+    });
+
+    test("has full access to query and mutate team_integrations", () => {
+      expect(i.queries).toContain("team_integrations");
+      expect(i.mutations).toContain("insert_team_integrations");
+      expect(i.mutations).toContain("update_team_integrations_by_pk");
+      expect(i.mutations).toContain("delete_team_integrations");
+    });
+  });
+
+  describe("platformAdmin", () => {
+    let i;
+    beforeAll(async () => {
+      i = await introspectAs("platformAdmin");
+    });
+
+    test("cannot query team_integrations", () => {
+      expect(i.queries).not.toContain("team_integrations");
+    });
+
+    test("cannot create, update, or delete team_integrations", () => {
+      expect(i).toHaveNoMutationsFor("team_integrations");
+    });
+  });
+
+  describe("teamEditor", () => {
+    beforeAll(async () => {
+      i = await introspectAs("teamEditor");
+    });
+
+    test("cannot query team_integrations", () => {
+      expect(i.queries).not.toContain("team_integrations");
+    });
+
+    test("cannot create, update, or delete team_integrations", () => {
+      expect(i).toHaveNoMutationsFor("team_integrations");
+    });
+  });
+
+  describe("api", () => {
+    let i;
+    beforeAll(async () => {
+      i = await introspectAs("api");
+    });
+
+    test("can query team_integrations", () => {
+      expect(i.queries).toContain("team_integrations");
+    });
+
+    test("cannot create, update, or delete team_integrations", () => {
+      expect(i).toHaveNoMutationsFor("team_integrations");
+    });
+  });
+});
diff --git a/scripts/seed-database/container.sh b/scripts/seed-database/container.sh
index 0b6828e113..31523cd953 100755
--- a/scripts/seed-database/container.sh
+++ b/scripts/seed-database/container.sh
@@ -33,6 +33,11 @@ for table in "${tables[@]}"; do
   fi
 done
 
+# Copy subset of team_integrations columns
+# Do not copy production values
+psql --quiet ${REMOTE_PG} --command="\\copy (SELECT id, team_id, staging_bops_submission_url FROM team_integrations TO '/tmp/team_integrations.csv' (FORMAT csv, DELIMITER ';');"
+echo team_integrations downloaded
+
 psql --quiet ${REMOTE_PG} --command="\\copy (SELECT DISTINCT ON (flow_id) id, data, flow_id, summary, publisher_id, created_at FROM published_flows ORDER BY flow_id, created_at DESC) TO '/tmp/published_flows.csv' (FORMAT csv, DELIMITER ';');"
 echo published_flows downloaded
 
diff --git a/scripts/seed-database/write/main.sql b/scripts/seed-database/write/main.sql
index 28c4da61fd..f39a94cb10 100644
--- a/scripts/seed-database/write/main.sql
+++ b/scripts/seed-database/write/main.sql
@@ -3,4 +3,5 @@
 \include write/flows.sql
 \include write/flow_document_templates.sql
 \include write/published_flows.sql
-\include write/team_members.sql
\ No newline at end of file
+\include write/team_members.sql
+\include write/team_integrations.sql
\ No newline at end of file
diff --git a/scripts/seed-database/write/team_integrations.sql b/scripts/seed-database/write/team_integrations.sql
new file mode 100644
index 0000000000..a8eb62926d
--- /dev/null
+++ b/scripts/seed-database/write/team_integrations.sql
@@ -0,0 +1,23 @@
+-- insert team_integrations overwriting conflicts
+CREATE TEMPORARY TABLE sync_team_integrations (
+  id serial,
+  team_id integer,
+  staging_bops_submission_url text
+);
+
+\ COPY sync_team_integrations
+FROM
+  '/tmp/team_integrations.csv' WITH (FORMAT csv, DELIMITER ';');
+
+INSERT INTO
+  team_integrations (id, team_id, staging_bops_submission_url)
+SELECT
+  id,
+  team_id,
+  staging_bops_submission_url
+FROM
+  sync_team_integrations ON CONFLICT (id) DO
+UPDATE
+SET
+  team_id = EXCLUDED.team_id,
+  staging_bops_submission_url = EXCLUDED.staging_bops_submission_url;
\ No newline at end of file