From 269bf997de6fe3c070d4134353257137e40d4cc9 Mon Sep 17 00:00:00 2001 From: shamsmosowi Date: Sun, 3 Apr 2022 19:54:53 +0200 Subject: [PATCH] connector --- .../fields/ConnectService/Settings.tsx | 323 +----------------- .../fields/ConnectService/types.d.ts | 5 - src/components/fields/ConnectService/utils.ts | 5 - src/components/fields/Connector/Settings.tsx | 213 ++++++------ src/constants/externalLinks.ts | 1 + 5 files changed, 103 insertions(+), 444 deletions(-) delete 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 93702cb8..f0ed6d68 100644 --- a/src/components/fields/ConnectService/Settings.tsx +++ b/src/components/fields/ConnectService/Settings.tsx @@ -1,324 +1,8 @@ -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, -}; +import { TextField, FormControlLabel, Switch, Grid } from "@mui/material"; 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 deleted file mode 100644 index 9017df1f..00000000 --- a/src/components/fields/ConnectService/types.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -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 8d0a1f4b..d2feec47 100644 --- a/src/components/fields/ConnectService/utils.ts +++ b/src/components/fields/ConnectService/utils.ts @@ -2,8 +2,3 @@ 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 []; -};`; diff --git a/src/components/fields/Connector/Settings.tsx b/src/components/fields/Connector/Settings.tsx index 023438a6..7f240064 100644 --- a/src/components/fields/Connector/Settings.tsx +++ b/src/components/fields/Connector/Settings.tsx @@ -62,120 +62,103 @@ const diagnosticsOptions = { export default function Settings({ config, onChange }) { const { projectId } = useAppContext(); return ( - - }> - - - - - ), - }, - { - id: "config", - title: "Configuration", - content: ( - - - {/* Primary Key */} - onChange("elementId")(e.target.value)} - helperText={ - <> - The key that will be used to uniquely identify the - selected option.{" "} - - Learn more - - - - } - /> - - - {/* Title Key */} - onChange("labelFormatter")(e.target.value)} - helperText={ - <> - The key that will be used to display the selected option.{" "} - - Learn more - - - - } - /> - - - - - 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." - /> - - )} - - - ), - }, - ]} - /> + <> +
+ Connector Function + }> + + + +
+ + {/* Primary Key */} + onChange("elementId")(e.target.value)} + helperText={ + <> + The key that will be used to uniquely identify the selected + option.{" "} + + Learn more + + + + } + /> + + + {/* Title Key */} + onChange("labelFormatter")(e.target.value)} + helperText={ + <> + The field key or template that will be used to display the + selected option.{" "} + + Learn more + + + + } + /> + + + + + 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/constants/externalLinks.ts b/src/constants/externalLinks.ts index 8e069285..18de531c 100644 --- a/src/constants/externalLinks.ts +++ b/src/constants/externalLinks.ts @@ -36,6 +36,7 @@ const WIKI_PATHS = { fieldTypesSupportedFields: "/field-types/supported-fields", fieldTypesDerivative: "/field-types/derivative", fieldTypesConnectTable: "/field-types/connect-table", + fieldTypesConnector: "/field-types/connector", fieldTypesConnectService: "/field-types/connect-service", fieldTypesAction: "/field-types/action", fieldTypesAdd: "/field-types/add",