From 61a6e41250faf7d066d887659a167b32ec42a144 Mon Sep 17 00:00:00 2001 From: shamsmosowi Date: Mon, 3 Jan 2022 23:22:29 +0700 Subject: [PATCH] connect-service config --- .../fields/ConnectService/Settings.tsx | 323 +++++++++++++++++- .../fields/ConnectService/types.d.ts | 5 + src/components/fields/ConnectService/utils.ts | 5 + 3 files changed, 329 insertions(+), 4 deletions(-) create mode 100644 src/components/fields/ConnectService/types.d.ts diff --git a/src/components/fields/ConnectService/Settings.tsx b/src/components/fields/ConnectService/Settings.tsx index f0ed6d68..93702cb8 100644 --- a/src/components/fields/ConnectService/Settings.tsx +++ b/src/components/fields/ConnectService/Settings.tsx @@ -1,8 +1,324 @@ -import { TextField, FormControlLabel, Switch, Grid } from "@mui/material"; +import { lazy, Suspense, useState } from "react"; +import _get from "lodash/get"; +import stringify from "json-stable-stringify-without-jsonify"; + +import { + Stepper, + Step, + StepButton, + StepContent, + Stack, + Grid, + Switch, + TextField, + FormControl, + FormLabel, + FormControlLabel, + RadioGroup, + Radio, + Typography, + InputLabel, + Link, + Checkbox, + FormHelperText, + Fab, +} from "@mui/material"; + +import SteppedAccordion from "@src/components/SteppedAccordion"; +import MultiSelect from "@rowy/multiselect"; +import FieldSkeleton from "@src/components/SideDrawer/Form/FieldSkeleton"; +import CodeEditorHelper from "@src/components/CodeEditor/CodeEditorHelper"; +import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon"; + +import { useProjectContext } from "@src/contexts/ProjectContext"; +import { WIKI_LINKS } from "@src/constants/externalLinks"; +import { useAppContext } from "@src/contexts/AppContext"; +import { baseFunction } from "./utils"; + +//import typeDefs from "!!raw-loader!./types.d.ts"; +const CodeEditor = lazy( + () => + import("@src/components/CodeEditor" /* webpackChunkName: "CodeEditor" */) +); + +// external service requirement +// Web service URL : url +// Results key path :resultsKey +// Primary Key : primaryKey +// Title Key : titleKey + +// rowy managed service +// function that takes query & user then returns a list of objects with an array of objects +// Primary Key : primaryKey +// label Key : labelKey + +const diagnosticsOptions = { + noSemanticValidation: false, + noSyntaxValidation: false, + noSuggestionDiagnostics: true, +}; export default function Settings({ config, onChange }) { + const { projectId } = useAppContext(); return ( - <> + + + + Select the service mode: + + onChange("mode")(e.target.value)} + > + } + label={ + <> + Managed + + Write JavaScript code below that will be executed by + Rowy Run to return list of options displayed in the + dropdown{" "} + + Requires Rowy Run setup + + + + + } + /> + } + label={ + <> + External + + An existing api endpoint or your own web service, that + will be called when the dropdown is opened. + + Learn more + + + + + } + /> + + + + {config.mode === "external" ? ( + onChange("url")(e.target.value)} + helperText={ + <> + Add the url of the endpoint. If you have deployed it to + Cloud Run you can find it{" "} + + here + + +
+ Your endpoint must be compatible with Rowy Connect service + columns.{" "} + + View requirements + + + + } + /> + ) : ( + <> + + Service Function + }> + Promise;`, + ]} + /> + + + + + )} + + ), + }, + { + id: "Interface", + title: "Interface", + content: ( + + + {/* Primary Key */} + onChange("primaryKey")(e.target.value)} + helperText={ + <> + The key that will be used to uniquely identify the + selected option.{" "} + + Learn more + + + + } + /> + + + {/* Title Key */} + onChange("titleKey")(e.target.value)} + helperText={ + <> + The key that will be used to display the selected option.{" "} + + Learn more + + + + } + /> + + {config.mode === "external" && ( + + {/* Results Key */} + onChange("resultsKey")(e.target.value)} + helperText={ + <> + (Optional)The key that will be used to retrieve the list + of results, if the service doesn't not return an array + options directly{" "} + + Learn more + + + + } + /> + + )} + + ), + }, + + { + id: "optionsSettings", + title: "Options Settings", + content: ( + + + + + Allow for multiple item selection + + onChange("multiple")(e.target.checked)} + /> + + + + {config.multiple && ( + <> + onChange("max")(e.target.value)} + helperText="The maximum number of items that can be selected, or 0 for no limit." + /> + + )} + + + ), + }, + ]} + /> + ); +} + +/* +<> - ); -} +*/ diff --git a/src/components/fields/ConnectService/types.d.ts b/src/components/fields/ConnectService/types.d.ts new file mode 100644 index 00000000..9017df1f --- /dev/null +++ b/src/components/fields/ConnectService/types.d.ts @@ -0,0 +1,5 @@ +type ConnectService = (request: { + query: string; + row: any; + user: any; +}) => Promise; diff --git a/src/components/fields/ConnectService/utils.ts b/src/components/fields/ConnectService/utils.ts index d2feec47..8d0a1f4b 100644 --- a/src/components/fields/ConnectService/utils.ts +++ b/src/components/fields/ConnectService/utils.ts @@ -2,3 +2,8 @@ export const sanitiseValue = (value: any) => { if (value === undefined || value === null || value === "") return []; else return value as string[]; }; + +export const baseFunction = `const serviceFunction: ConnectService = async ({query, row, user}) => { + // TODO: Implement your service function here + return []; +};`;