Multiselect field: add back convert to array

src/components/Table/withTableCell.tsx

@@ -164,6 +164,7 @@ export default function withTableCell(
                 onClick={(e) => e.stopPropagation()}
                 onDoubleClick={(e) => e.stopPropagation()}
                 onKeyDown={(e) => e.stopPropagation()}
+                onContextMenu={(e) => e.stopPropagation()}
               >
                 {editorCell}
               </Popover>

src/components/fields/MultiSelect/ConvertStringToArray.tsx

@@ -1,29 +0,0 @@
-import { IPopoverInlineCellProps } from "@src/components/fields/types";
-import { Grid, Tooltip, Button } from "@mui/material";
-
-export const ConvertStringToArray = ({
-  value,
-  onSubmit,
-}: Pick<IPopoverInlineCellProps, "value" | "onSubmit">) => (
-  <Grid container wrap="nowrap" alignItems="center">
-    <Grid item xs style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
-      {value}
-    </Grid>
-    <Grid item>
-      <Tooltip title="It looks like this is a string. Click to convert to an array">
-        <Button
-          onClick={() => onSubmit([value])}
-          style={{
-            display: "flex",
-            minWidth: 0,
-            marginRight: -12,
-            paddingLeft: 12,
-            paddingRight: 12,
-          }}
-        >
-          Fix
-        </Button>
-      </Tooltip>
-    </Grid>
-  </Grid>
-);

src/components/fields/MultiSelect/DisplayCell.tsx

@@ -1,6 +1,7 @@
 import { IDisplayCellProps } from "@src/components/fields/types";
 
 import { ButtonBase, Grid } from "@mui/material";
+import WarningIcon from "@mui/icons-material/WarningAmber";
 import { ChevronDown } from "@src/assets/icons";
 
 import { sanitiseValue } from "./utils";
@@ -29,16 +30,24 @@ export default function MultiSelect({
         justifyContent: "flex-start",
       }}
     >
-      <ChipList>
-        {sanitiseValue(value).map(
-          (item) =>
-            typeof item === "string" && (
-              <Grid item key={item}>
-                <FormattedChip label={item} />
-              </Grid>
-            )
-        )}
-      </ChipList>
+      {typeof value === "string" && value !== "" ? (
+        <div style={{ flexGrow: 1, paddingLeft: "var(--cell-padding)" }}>
+          <WarningIcon color="action" style={{ verticalAlign: "middle" }} />
+          &nbsp;
+          {value}
+        </div>
+      ) : (
+        <ChipList>
+          {sanitiseValue(value).map(
+            (item) =>
+              typeof item === "string" && (
+                <Grid item key={item}>
+                  <FormattedChip label={item} />
+                </Grid>
+              )
+          )}
+        </ChipList>
+      )}
 
       {!disabled && <ChevronDown className="row-hover-iconButton end" />}
     </ButtonBase>

src/components/fields/MultiSelect/PopoverCell.tsx

@@ -1,6 +1,9 @@
 import { IEditorCellProps } from "@src/components/fields/types";
 
+import { Typography, Button } from "@mui/material";
+import WarningIcon from "@mui/icons-material/WarningAmber";
 import MultiSelectComponent from "@rowy/multiselect";
+import EmptyState from "@src/components/EmptyState";
 
 import { sanitiseValue } from "./utils";
 
@@ -14,6 +17,23 @@ export default function MultiSelect({
 }: IEditorCellProps) {
   const config = column.config ?? {};
 
+  if (typeof value === "string" && value !== "")
+    return (
+      <EmptyState
+        Icon={WarningIcon}
+        message="Fix this value"
+        description={
+          <>
+            <Typography>This cell’s value is a string</Typography>
+            <Button color="primary" onClick={() => onSubmit([value])}>
+              Convert to array
+            </Button>
+          </>
+        }
+        sx={{ my: 3, width: column.width }}
+      />
+    );
+
   return (
     <MultiSelectComponent
       value={sanitiseValue(value)}

src/components/fields/MultiSelect/SideDrawerField.tsx

@@ -1,11 +1,12 @@
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
-import { Grid } from "@mui/material";
+import { Grid, Button } from "@mui/material";
+import WarningIcon from "@mui/icons-material/WarningAmber";
 import MultiSelectComponent from "@rowy/multiselect";
 import FormattedChip from "@src/components/FormattedChip";
 
+import { fieldSx } from "@src/components/SideDrawer/utils";
 import { sanitiseValue } from "./utils";
-import { ConvertStringToArray } from "./ConvertStringToArray";
 
 export default function MultiSelect({
   column,
@@ -24,7 +25,25 @@ export default function MultiSelect({
   };
 
   if (typeof value === "string" && value !== "")
-    return <ConvertStringToArray value={value} onSubmit={onChange} />;
+    return (
+      <Grid container wrap="nowrap" gap={1}>
+        <Grid item xs sx={fieldSx}>
+          <WarningIcon color="action" style={{ verticalAlign: "middle" }} />
+          &nbsp;{value}
+        </Grid>
+        <Grid item>
+          <Button
+            color="primary"
+            onClick={() => {
+              onChange([value]);
+              onSubmit();
+            }}
+          >
+            Convert to array
+          </Button>
+        </Grid>
+      </Grid>
+    );
 
   return (
     <>