rebase plus PR feedback

theopensystemslab · Aug 27, 2024 · 246d1d7 · 246d1d7
2 parents 2a4ba5c + bad5a37
commit 246d1d7
Show file tree

Hide file tree

Showing 34 changed files with 1,094 additions and 553 deletions.
diff --git a/.github/workflows/push-main.yml b/.github/workflows/push-main.yml
@@ -53,13 +53,13 @@ jobs:
       - run: pnpm build
         working-directory: editor.planx.uk
         env:
-          REACT_APP_API_URL: https://api.editor.planx.dev
-          REACT_APP_HASURA_URL: https://hasura.editor.planx.dev/v1/graphql
-          REACT_APP_HASURA_WEBSOCKET: wss://hasura.editor.planx.dev/v1/graphql
-          REACT_APP_SHAREDB_URL: wss://sharedb.editor.planx.dev
-          REACT_APP_AIRBRAKE_PROJECT_ID: ${{ secrets.AIRBRAKE_PROJECT_ID }}
-          REACT_APP_AIRBRAKE_PROJECT_KEY: ${{ secrets.AIRBRAKE_PROJECT_KEY }}
-          REACT_APP_ENV: staging
+          VITE_APP_API_URL: https://api.editor.planx.dev
+          VITE_APP_HASURA_URL: https://hasura.editor.planx.dev/v1/graphql
+          VITE_APP_HASURA_WEBSOCKET: wss://hasura.editor.planx.dev/v1/graphql
+          VITE_APP_SHAREDB_URL: wss://sharedb.editor.planx.dev
+          VITE_APP_AIRBRAKE_PROJECT_ID: ${{ secrets.AIRBRAKE_PROJECT_ID }}
+          VITE_APP_AIRBRAKE_PROJECT_KEY: ${{ secrets.AIRBRAKE_PROJECT_KEY }}
+          VITE_APP_ENV: staging
       - name: Upload Build Artifact
         uses: actions/upload-artifact@v4
         with:

diff --git a/.github/workflows/push-production.yml b/.github/workflows/push-production.yml
@@ -53,13 +53,13 @@ jobs:
       - run: pnpm build
         working-directory: editor.planx.uk
         env:
-          REACT_APP_API_URL: https://api.editor.planx.uk
-          REACT_APP_HASURA_URL: https://hasura.editor.planx.uk/v1/graphql
-          REACT_APP_HASURA_WEBSOCKET: wss://hasura.editor.planx.uk/v1/graphql
-          REACT_APP_SHAREDB_URL: wss://sharedb.editor.planx.uk
-          REACT_APP_AIRBRAKE_PROJECT_ID: ${{ secrets.AIRBRAKE_PROJECT_ID }}
-          REACT_APP_AIRBRAKE_PROJECT_KEY: ${{ secrets.AIRBRAKE_PROJECT_KEY }}
-          REACT_APP_ENV: production
+          VITE_APP_API_URL: https://api.editor.planx.uk
+          VITE_APP_HASURA_URL: https://hasura.editor.planx.uk/v1/graphql
+          VITE_APP_HASURA_WEBSOCKET: wss://hasura.editor.planx.uk/v1/graphql
+          VITE_APP_SHAREDB_URL: wss://sharedb.editor.planx.uk
+          VITE_APP_AIRBRAKE_PROJECT_ID: ${{ secrets.AIRBRAKE_PROJECT_ID }}
+          VITE_APP_AIRBRAKE_PROJECT_KEY: ${{ secrets.AIRBRAKE_PROJECT_KEY }}
+          VITE_APP_ENV: production
       - name: Upload Build Artifact
         uses: actions/upload-artifact@v4
         with:

diff --git a/e2e/tests/ui-driven/install-dependencies.sh b/e2e/tests/ui-driven/install-dependencies.sh
@@ -5,7 +5,7 @@ cd $(dirname "$0")
 
 source ../../../.env
 
-(cd ../../../editor.planx.uk && pnpm install --frozen-lockfile && REACT_APP_ENV=test pnpm build)
+(cd ../../../editor.planx.uk && pnpm install --frozen-lockfile && VITE_APP_ENV=test pnpm build)
 
 if [ -z "${CI}" ]; then
   echo "Please make sure you have Chrome installed on this machine."

diff --git a/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx
@@ -182,7 +182,7 @@ describe("Building a list", () => {
     ).toBeInTheDocument();
   });
 
-  test("Editing an item", { timeout: 20000 }, async () => {
+  test("Editing an item", { timeout: 25000 }, async () => {
     // Setup three cards
     const { getAllByTestId, getByTestId, user } = setup(
       <ListComponent {...mockZooProps} />,
@@ -235,7 +235,7 @@ describe("Building a list", () => {
 
   test(
     "Removing an item when all cards are inactive",
-    { timeout: 20000 },
+    { timeout: 25000 },
     async () => {
       // Setup three cards
       const {

diff --git a/editor.planx.uk/src/@planx/components/List/Public/index.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.tsx
@@ -25,7 +25,7 @@ import { ListProvider, useListContext } from "./Context";
 
 export type Props = PublicProps<List>;
 
-export const ListCard = styled(Box)(({ theme }) => ({
+const ListCard = styled(Box)(({ theme }) => ({
   padding: theme.spacing(2),
   backgroundColor: theme.palette.background.paper,
   border: "1px solid darkgray",

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -4,6 +4,8 @@ import Box from "@mui/material/Box";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
+import { SiteAddress } from "@planx/components/FindProperty/model";
+import { ErrorSummaryContainer } from "@planx/components/shared/Preview/ErrorSummaryContainer";
 import { SchemaFields } from "@planx/components/shared/Schema/SchemaFields";
 import { Feature } from "geojson";
 import { useStore } from "pages/FlowEditor/lib/store";
@@ -107,10 +109,13 @@ const Root = () => {
     drawColor,
     drawType,
     schemaName,
+    handleSubmit,
   } = mapAndLabelProps;
 
   const teamSettings = useStore.getState().teamSettings;
   const passport = useStore((state) => state.computePassport());
+  const { latitude, longitude } =
+    (passport?.data?._address as SiteAddress) || {};
 
   const [features, setFeatures] = useState<Feature[] | undefined>(undefined);
 
@@ -124,15 +129,36 @@ const Root = () => {
       }
     };
 
-    const map: any = document.getElementById("map-and-label-map");
-
+    const map: HTMLElement | null =
+      document.getElementById("map-and-label-map");
     map?.addEventListener("geojsonChange", geojsonChangeHandler);
 
     return function cleanup() {
       map?.removeEventListener("geojsonChange", geojsonChangeHandler);
     };
   }, [setFeatures]);
 
+  if (!latitude || !longitude) {
+    return (
+      <Card handleSubmit={handleSubmit} isValid>
+        <CardHeader title={title} description={description} />
+        <ErrorSummaryContainer
+          role="status"
+          data-testid="error-summary-invalid-graph"
+        >
+          <Typography variant="h4" component="h2" gutterBottom>
+            Invalid graph
+          </Typography>
+          <Typography variant="body2">
+            Edit this flow so that "MapAndLabel" is positioned after
+            "FindProperty"; an initial address is required to correctly display
+            the map.
+          </Typography>
+        </ErrorSummaryContainer>
+      </Card>
+    );
+  }
+
   return (
     <Card handleSubmit={validateAndSubmitForm} isValid>
       <CardHeader
@@ -155,8 +181,8 @@ const Root = () => {
             drawPointer="crosshair"
             zoom={20}
             maxZoom={23}
-            latitude={Number(passport?.data?._address?.latitude)}
-            longitude={Number(passport?.data?._address?.longitude)}
+            latitude={latitude}
+            longitude={longitude}
             osProxyEndpoint={`${
               import.meta.env.VITE_APP_API_URL
             }/proxy/ordnance-survey`}

diff --git a/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/MapFieldInput.tsx b/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/MapFieldInput.tsx
@@ -61,7 +61,9 @@ export const MapFieldInput: React.FC<Props<MapField>> = (props) => {
             maxZoom={23}
             latitude={Number(passport?.data?._address?.latitude)}
             longitude={Number(passport?.data?._address?.longitude)}
-            osProxyEndpoint={`${process.env.REACT_APP_API_URL}/proxy/ordnance-survey`}
+            osProxyEndpoint={`${
+              import.meta.env.VITE_APP_API_URL
+            }/proxy/ordnance-survey`}
             osCopyright={`Basemap subject to Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`}
             clipGeojsonData={
               teamSettings?.boundaryBBox &&

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -260,7 +260,7 @@ const ServiceSettings: React.FC = () => {
     const message = `${emoji[status]} *${teamSlug}/${flowSlug}* is now ${status} (@Silvia)`;
 
     return axios.post(
-      `${process.env.REACT_APP_API_URL}/send-slack-notification`,
+      `${import.meta.env.VITE_APP_API_URL}/send-slack-notification`,
       {
         message: message,
       },