Merge pull request #1061 from rowyio/feature/requrie-rowy-run-to-create-columns

ROWY-818: requires cloud function setup before creating related columns

src/atoms/projectScope/rowyRun.ts

@@ -73,7 +73,6 @@ export const rowyRunAtom = atom((get) => {
     handleNotSetUp,
   }: IRowyRunRequestProps): Promise<Response | any | false> => {
     if (!currentUser) {
-      console.log("Rowy Run: Not signed in", route.path);
       if (handleNotSetUp) handleNotSetUp();
       return false;
     }
@@ -85,7 +84,6 @@ export const rowyRunAtom = atom((get) => {
       ? rowyRunServices?.[service]
       : rowyRunUrl;
     if (!serviceUrl) {
-      console.log("Rowy Run: Not set up", route.path);
       if (handleNotSetUp) handleNotSetUp();
       return false;
     }

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";
 
@@ -96,6 +97,7 @@ export default function DefaultValueInput({
   column,
 }: IDefaultValueInputProps) {
   const [projectSettings] = useAtom(projectSettingsAtom, projectScope);
+  const openRowyRunModal = useSetAtom(rowyRunModalAtom, projectScope);
 
   const _type =
     column.type !== FieldType.derivative
@@ -155,9 +157,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,16 +1,24 @@
 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";
 import { getFieldProp } from "@src/components/fields";
 
+import { useSetAtom, useAtom } from "jotai";
+import {
+  projectScope,
+  projectSettingsAtom,
+  rowyRunModalAtom,
+} from "@src/atoms/projectScope";
+
 export interface IFieldsDropdownProps {
   value: FieldType | "";
   onChange: (value: FieldType) => void;
   hideLabel?: boolean;
   label?: string;
   options?: FieldType[];
+
   [key: string]: any;
 }
 
@@ -25,13 +33,21 @@ export default function FieldsDropdown({
   options: optionsProp,
   ...props
 }: IFieldsDropdownProps) {
+  const [projectSettings] = useAtom(projectSettingsAtom, projectScope);
+  const openRowyRunModal = useSetAtom(rowyRunModalAtom, projectScope);
   const fieldTypesToDisplay = optionsProp
     ? FIELDS.filter((fieldConfig) => optionsProp.indexOf(fieldConfig.type) > -1)
     : FIELDS;
-  const options = fieldTypesToDisplay.map((fieldConfig) => ({
-    label: fieldConfig.name,
-    value: fieldConfig.type,
-  }));
+  const options = fieldTypesToDisplay.map((fieldConfig) => {
+    const requireCloudFunctionSetup =
+      fieldConfig.requireCloudFunction && !projectSettings.rowyRunUrl;
+    return {
+      label: fieldConfig.name,
+      value: fieldConfig.type,
+      disabled: requireCloudFunctionSetup,
+      requireCloudFunctionSetup,
+    };
+  });
 
   return (
     <MultiSelect
@@ -44,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) => (
@@ -51,7 +81,33 @@ export default function FieldsDropdown({
           <ListItemIcon style={{ minWidth: 40 }}>
             {getFieldProp("icon", option.value as FieldType)}
           </ListItemIcon>
-          {option.label}
+          <Typography>{option.label}</Typography>
+          {option.requireCloudFunctionSetup && (
+            <Typography
+              color="error"
+              variant="inherit"
+              component="span"
+              marginLeft={1}
+              className={"require-cloud-function"}
+            >
+              {" "}
+              Requires
+              <span
+                style={{
+                  marginLeft: "3px",
+                  cursor: "pointer",
+                  pointerEvents: "all",
+                  textDecoration: "underline",
+                }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  openRowyRunModal({ feature: option.label });
+                }}
+              >
+                Cloud Function
+              </span>
+            </Typography>
+          )}
         </>
       )}
       label={label || "Field type"}

src/components/fields/Action/index.tsx

@@ -30,6 +30,7 @@ export const config: IFieldConfig = {
   SideDrawerField,
   settings: Settings,
   requireConfiguration: true,
+  requireCloudFunction: true,
   sortKey: "status",
 };
 export default config;

src/components/fields/Connector/index.tsx

@@ -34,6 +34,7 @@ export const config: IFieldConfig = {
   }),
   SideDrawerField,
   requireConfiguration: true,
+  requireCloudFunction: true,
   settings: Settings,
 };
 export default config;

src/components/fields/Derivative/index.tsx

@@ -21,5 +21,6 @@ export const config: IFieldConfig = {
   settings: Settings,
   settingsValidator,
   requireConfiguration: true,
+  requireCloudFunction: true,
 };
 export default config;

src/components/fields/types.ts

@@ -19,6 +19,7 @@ export interface IFieldConfig {
   dataType: string;
   initializable?: boolean;
   requireConfiguration?: boolean;
+  requireCloudFunction?: boolean;
   initialValue: any;
   icon?: React.ReactNode;
   description?: string;