diff --git a/src/components/ColumnModals/ColumnConfigModal/DefaultValueInput.tsx b/src/components/ColumnModals/ColumnConfigModal/DefaultValueInput.tsx index 3cc78e2a..028fc0d6 100644 --- a/src/components/ColumnModals/ColumnConfigModal/DefaultValueInput.tsx +++ b/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{" "} - Requires Rowy Run setup + Requires + { + e.stopPropagation(); + openRowyRunModal({ feature: "Dynamic Default Value" }); + }} + > + Cloud Function + ) diff --git a/src/components/ColumnModals/FieldsDropdown.tsx b/src/components/ColumnModals/FieldsDropdown.tsx index a3fdd4c6..529c3b84 100644 --- a/src/components/ColumnModals/FieldsDropdown.tsx +++ b/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({ {getFieldProp("icon", option.value as FieldType)} - {option.label}{" "} + {option.label} {option.requireCloudFunctionSetup && ( - <> - (requires + + {" "} + Requires Cloud Function - ) - + )} )}