consistent "require cloud function" text on both default values and columns

src/components/ColumnModals/ColumnConfigModal/DefaultValueInput.tsx

@@ -1,5 +1,5 @@
 import { lazy, Suspense, createElement, useState } from "react";
-import { useAtom } from "jotai";
+import { useAtom, useSetAtom } from "jotai";
 
 import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
@@ -17,6 +17,7 @@ import {
   projectScope,
   compatibleRowyRunVersionAtom,
   projectSettingsAtom,
+  rowyRunModalAtom,
 } from "@src/atoms/projectScope";
 import { ColumnConfig } from "@src/types/table";
 
@@ -93,6 +94,7 @@ export default function DefaultValueInput({
   column,
 }: IDefaultValueInputProps) {
   const [projectSettings] = useAtom(projectSettingsAtom, projectScope);
+  const openRowyRunModal = useSetAtom(rowyRunModalAtom, projectScope);
 
   const _type =
     column.type !== FieldType.derivative
@@ -152,9 +154,23 @@ export default function DefaultValueInput({
                 "Dynamic"
               ) : (
                 <>
-                  Dynamic —{" "}
+                  Dynamic{" "}
                   <Typography color="error" variant="inherit" component="span">
-                    Requires Rowy Run setup
+                    Requires
+                    <span
+                      style={{
+                        marginLeft: "3px",
+                        cursor: "pointer",
+                        pointerEvents: "all",
+                        textDecoration: "underline",
+                      }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        openRowyRunModal({ feature: "Dynamic Default Value" });
+                      }}
+                    >
+                      Cloud Function
+                    </span>
                   </Typography>
                 </>
               )

src/components/ColumnModals/FieldsDropdown.tsx

@@ -1,5 +1,5 @@
 import MultiSelect from "@rowy/multiselect";
-import { ListItemIcon } from "@mui/material";
+import { Box, ListItemIcon, Typography } from "@mui/material";
 
 import { FIELDS } from "@src/components/fields";
 import { FieldType } from "@src/constants/fields";
@@ -60,6 +60,20 @@ export default function FieldsDropdown({
         AutocompleteProps: {
           groupBy: (option: typeof options[number]) =>
             getFieldProp("group", option.value),
+          ListboxProps: {
+            sx: {
+              '& li.MuiAutocomplete-option[aria-disabled="true"]': {
+                opacity: 1,
+              },
+              '& li.MuiAutocomplete-option[aria-disabled="true"] > *': {
+                opacity: 0.4,
+              },
+              '& li.MuiAutocomplete-option[aria-disabled="true"] > .require-cloud-function':
+                {
+                  opacity: 1,
+                },
+            },
+          },
         },
       } as any)}
       itemRenderer={(option) => (
@@ -67,10 +81,17 @@ export default function FieldsDropdown({
           <ListItemIcon style={{ minWidth: 40 }}>
             {getFieldProp("icon", option.value as FieldType)}
           </ListItemIcon>
-          {option.label}{" "}
+          <Typography>{option.label}</Typography>
           {option.requireCloudFunctionSetup && (
-            <>
-              (requires
+            <Typography
+              color="error"
+              variant="inherit"
+              component="span"
+              marginLeft={1}
+              className={"require-cloud-function"}
+            >
+              {" "}
+              Requires
               <span
                 style={{
                   marginLeft: "3px",
@@ -85,8 +106,7 @@ export default function FieldsDropdown({
               >
                 Cloud Function
               </span>
-              )
-            </>
+            </Typography>
           )}
         </>
       )}