Production deploy

.github/workflows/pull-request.yml

@@ -213,8 +213,9 @@ jobs:
           VITE_APP_HASURA_WEBSOCKET: wss://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
           VITE_APP_MAPBOX_ACCESS_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN }}
           VITE_APP_SHAREDB_URL: wss://sharedb.${{ env.FULL_DOMAIN }}
-          # needed because there's no API to change google's allowed OAuth URLs
+          # needed because there's no API to change google/microsoft's allowed redirect URIs
           VITE_APP_GOOGLE_OAUTH_OVERRIDE: https://api.editor.planx.dev
+          VITE_APP_MICROSOFT_OAUTH_OVERRIDE: https://api.editor.planx.dev
           VITE_APP_ENV: pizza
         working-directory: ${{ env.EDITOR_DIRECTORY }}
       - run: pnpm build-storybook
@@ -230,6 +231,7 @@ jobs:
           VITE_APP_MAPBOX_ACCESS_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN }}
           VITE_APP_SHAREDB_URL: wss://sharedb.${{ env.FULL_DOMAIN }}
           VITE_APP_GOOGLE_OAUTH_OVERRIDE: https://api.editor.planx.dev
+          VITE_APP_MICROSOFT_OAUTH_OVERRIDE: https://api.editor.planx.dev
           VITE_APP_ENV: pizza
 
   pulumi_preview:

editor.planx.uk/src/@planx/components/Checklist/Editor.tsx

@@ -24,8 +24,8 @@ import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 
 import { Option, parseBaseNodeData } from "../shared";
+import { FlagsSelect } from "../shared/FlagsSelect";
 import { ICONS } from "../shared/icons";
-import PermissionSelect from "../shared/PermissionSelect";
 import type { Checklist, Group } from "./model";
 import { toggleExpandableChecklist } from "./model";
 import { ChecklistProps, OptionEditorProps } from "./types";
@@ -68,20 +68,6 @@ const OptionEditor: React.FC<OptionEditorProps> = (props) => {
           }}
         />
 
-        <PermissionSelect
-          value={props.value.data.flag || ""}
-          onChange={(ev) => {
-            props.onChange({
-              ...props.value,
-              data: {
-                ...props.value.data,
-                flag: ev.target.value as string,
-              },
-            });
-          }}
-          sx={{ width: { md: "160px" }, maxWidth: "160px" }}
-        />
-
         {typeof props.index !== "undefined" &&
           props.groups &&
           props.onMoveToGroup && (
@@ -117,6 +103,23 @@ const OptionEditor: React.FC<OptionEditorProps> = (props) => {
           />
         </InputRow>
       )}
+
+      <FlagsSelect
+        value={
+          Array.isArray(props.value.data.flag)
+            ? props.value.data.flag
+            : [props.value.data.flag]
+        }
+        onChange={(ev) => {
+          props.onChange({
+            ...props.value,
+            data: {
+              ...props.value.data,
+              flag: ev,
+            },
+          });
+        }}
+      />
     </div>
   );
 };
@@ -171,7 +174,6 @@ const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
                           text: "",
                           description: "",
                           val: "",
-                          flag: "",
                         },
                       }) as Option
                     }
@@ -245,7 +247,6 @@ const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
                 text: "",
                 description: "",
                 val: "",
-                flag: "",
               },
             }) as Option
           }
@@ -295,9 +296,9 @@ export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
               ...values,
               ...(groupedOptions
                 ? {
-                    categories: groupedOptions.map((gr) => ({
-                      title: gr.title,
-                      count: gr.children.length,
+                    categories: groupedOptions.map((group) => ({
+                      title: group.title,
+                      count: group.children.length,
                     })),
                   }
                 : {

editor.planx.uk/src/@planx/components/Question/Editor.tsx

@@ -17,8 +17,8 @@ import InputRowItem from "ui/shared/InputRowItem";
 import { InternalNotes } from "../../../ui/editor/InternalNotes";
 import { MoreInformation } from "../../../ui/editor/MoreInformation/MoreInformation";
 import { BaseNodeData, Option, parseBaseNodeData } from "../shared";
+import { FlagsSelect } from "../shared/FlagsSelect";
 import { ICONS } from "../shared/icons";
-import PermissionSelect from "../shared/PermissionSelect";
 
 interface Props {
   node: {
@@ -62,7 +62,6 @@ const OptionEditor: React.FC<{
           placeholder="Option"
         />
       </InputRowItem>
-
       <ImgInput
         img={props.value.data.img}
         onChange={(img) => {
@@ -75,20 +74,6 @@ const OptionEditor: React.FC<{
           });
         }}
       />
-
-      <PermissionSelect
-        value={props.value.data.flag || ""}
-        onChange={(ev) => {
-          props.onChange({
-            ...props.value,
-            data: {
-              ...props.value.data,
-              flag: ev.target.value as string,
-            },
-          });
-        }}
-        sx={{ width: { md: "160px" }, maxWidth: "160px" }}
-      />
     </InputRow>
     <InputRow>
       <Input
@@ -123,6 +108,18 @@ const OptionEditor: React.FC<{
         />
       </InputRow>
     )}
+    <FlagsSelect
+      value={Array.isArray(props.value.data.flag) ? props.value.data.flag : [props.value.data.flag]}
+      onChange={(ev) => {
+        props.onChange({
+          ...props.value,
+          data: {
+            ...props.value.data,
+            flag: ev,
+          },
+        });
+      }}
+    />
   </div>
 );
 
@@ -154,7 +151,7 @@ export const Question: React.FC<Props> = (props) => {
         alert(JSON.stringify({ type, ...values, children }, null, 2));
       }
     },
-    validate: () => {},
+    validate: () => { },
   });
 
   const focusRef = useRef<HTMLInputElement | null>(null);
@@ -237,7 +234,6 @@ export const Question: React.FC<Props> = (props) => {
                   text: "",
                   description: "",
                   val: "",
-                  flag: "",
                 },
               }) as Option
             }

editor.planx.uk/src/@planx/components/shared/FlagsSelect.tsx

@@ -0,0 +1,87 @@
+import {
+  AutocompleteChangeReason,
+  AutocompleteProps,
+} from "@mui/material/Autocomplete";
+import Chip from "@mui/material/Chip";
+import ListItem from "@mui/material/ListItem";
+import { Flag, flatFlags } from "@opensystemslab/planx-core/types";
+import React, { useMemo } from "react";
+import InputRow from "ui/shared/InputRow";
+import { CustomCheckbox, SelectMultiple } from "ui/shared/SelectMultiple";
+
+interface Props {
+  value?: Array<Flag["value"]>;
+  onChange: (values: Array<Flag["value"]>) => void;
+}
+
+const renderOptions: AutocompleteProps<
+  Flag,
+  true,
+  true,
+  false,
+  "div"
+>["renderOption"] = (props, flag, { selected }) => (
+  <ListItem {...props}>
+    <CustomCheckbox
+      aria-hidden="true"
+      className={selected ? "selected" : ""}
+      sx={{ backgroundColor: `${flag.bgColor}` }}
+    />
+    {flag.text}
+  </ListItem>
+);
+
+const renderTags: AutocompleteProps<
+  Flag,
+  true,
+  true,
+  false,
+  "div"
+>["renderTags"] = (value, getFlagProps) =>
+  value.map((flag, index) => (
+    <Chip
+      {...getFlagProps({ index })}
+      key={flag.value}
+      label={flag.text}
+      sx={{ backgroundColor: flag.bgColor, color: flag.color }}
+    />
+  ));
+
+export const FlagsSelect: React.FC<Props> = (props) => {
+  const { value: initialFlagValues } = props;
+
+  const value: Flag[] | undefined = useMemo(
+    () =>
+      initialFlagValues?.flatMap((initialFlagValue) =>
+        flatFlags.filter((flag) => flag.value === initialFlagValue),
+      ),
+    [initialFlagValues],
+  );
+
+  const handleChange = (
+    _event: React.SyntheticEvent,
+    value: Flag[],
+    _reason: AutocompleteChangeReason,
+  ) => {
+    const selectedFlags = value.map((flag) => flag.value);
+    props.onChange(selectedFlags);
+  };
+
+  return (
+    <InputRow>
+      <SelectMultiple
+        id="select-multiple-flags"
+        key="select-multiple-flags"
+        label="Flags (up to one per category)"
+        options={flatFlags}
+        getOptionLabel={(flag) => flag.text}
+        groupBy={(flag) => flag.category}
+        onChange={handleChange}
+        isOptionEqualToValue={(flag, value) => flag.value === value.value}
+        value={value}
+        renderOption={renderOptions}
+        renderTags={renderTags}
+      />
+    </InputRow>
+  );
+};

editor.planx.uk/src/@planx/components/shared/index.ts

@@ -1,4 +1,4 @@
-import { NodeTags } from "@opensystemslab/planx-core/types";
+import { Flag, NodeTags } from "@opensystemslab/planx-core/types";
 import trim from "lodash/trim";
 import { Store } from "pages/FlowEditor/lib/store";
 
@@ -28,7 +28,7 @@ export interface Option {
   id: string;
   data: {
     description?: string;
-    flag?: string;
+    flag?: Array<Flag["value"]>;
     img?: string;
     text: string;
     val?: string;

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/FlagBand.tsx

@@ -0,0 +1,31 @@
+import Box from "@mui/material/Box";
+import { Flag } from "@opensystemslab/planx-core/types";
+import React from "react";
+
+export const FlagBand: React.FC<{
+  flag: Flag;
+}> = ({ flag }) => {
+  return (
+    <Box
+      sx={(theme) => ({
+        backgroundColor: `${flag?.bgColor || theme.palette.grey[800]}`,
+        borderBottom: `1px solid ${theme.palette.grey[400]}`,
+        width: "100%",
+        height: "12px",
+      })}
+    />
+  );
+};
+
+export const NoFlagBand: React.FC = () => {
+  return (
+    <Box
+      sx={(theme) => ({
+        backgroundColor: theme.palette.grey[700],
+        borderBottom: `1px solid ${theme.palette.grey[400]}`,
+        width: "100%",
+        height: "12px",
+      })}
+    />
+  );
+}