diff --git a/assets/packs/remote_execution_cell/App.js b/assets/packs/remote_execution_cell/App.js index 7ab6f329..1f8ca070 100644 --- a/assets/packs/remote_execution_cell/App.js +++ b/assets/packs/remote_execution_cell/App.js @@ -1,14 +1,27 @@ import React, { useEffect, useRef, useState } from "react"; -import { RiLockPasswordLine, RiInputMethodLine } from "@remixicon/react"; +import { + RiLockPasswordLine, + RiInputMethodLine, + RiArrowDownSLine, +} from "@remixicon/react"; import classNames from "classnames"; export default function App({ ctx, payload }) { const [fields, setFields] = useState(payload.fields); + const [nodeVariables, setNodeVariables] = useState(payload.node_variables); + const [cookieVariables, setCookieVariables] = useState( + payload.cookie_variables, + ); useEffect(() => { ctx.handleEvent("update_field", ({ fields }) => { setFields((currentFields) => ({ ...currentFields, ...fields })); }); + + ctx.handleEvent("variables", ({ node_variables, cookie_variables }) => { + setNodeVariables(node_variables); + setCookieVariables(cookie_variables); + }); }, []); function pushUpdate(field, value) { @@ -43,14 +56,11 @@ export default function App({ ctx, payload }) { pushUpdate("node_source", source)} textInputProps={{ - name: "node", - value: fields.node, + name: "node_text", + value: fields.node_text, onChange: (event) => handleChange(event, false), onBlur: handleBlur, }} @@ -59,6 +69,15 @@ export default function App({ ctx, payload }) { value: fields.node_secret, onChange: handleChange, }} + variableSelectProps={{ + name: "node_variable", + value: fields.node_variable, + onChange: handleChange, + options: nodeVariables.map((variable) => ({ + label: variable, + value: variable, + })), + }} modalTitle="Set node value" required /> @@ -67,14 +86,11 @@ export default function App({ ctx, payload }) { pushUpdate("cookie_source", source)} textInputProps={{ - name: "cookie", - value: fields.cookie, + name: "cookie_text", + value: fields.cookie_text, onChange: (event) => handleChange(event, false), onBlur: handleBlur, }} @@ -83,6 +99,15 @@ export default function App({ ctx, payload }) { value: fields.cookie_secret, onChange: handleChange, }} + variableSelectProps={{ + name: "cookie_variable", + value: fields.cookie_variable, + onChange: handleChange, + options: cookieVariables.map((variable) => ({ + label: variable, + value: variable, + })), + }} modalTitle="Set cookie value" required /> @@ -168,11 +193,86 @@ function TextField({ ); } +export function SelectField({ + label = null, + value, + className, + options = [], + optionGroups = [], + required = false, + fullWidth = false, + startAdornment, + ...props +}) { + function renderOptions(options) { + return options.map((option) => ( + + )); + } + + const isValueAvailable = options.some((option) => option.value === value); + + const noOptions = options.length === 0 && optionGroups.length === 0; + + return ( +
+ {label && ( + + )} +
+ {startAdornment} +
+ +
+ +
+
+
+
+ ); +} + function SecretField({ ctx, - toggleInputProps, + source, + onSourceChange, textInputProps, secretInputProps, + variableSelectProps, label = null, required = false, modalTitle = "Select secret", @@ -198,36 +298,61 @@ function SecretField({ ); } - const useSecret = toggleInputProps.checked; + const sources = ["text", "secret", "variable"]; + + function onSourceClick() { + const sourceIndex = sources.indexOf(source); + const nextSource = sources[(sourceIndex + 1) % sources.length]; + onSourceChange(nextSource); + } const inputTypeToggle = ( -