Merge pull request #88 from terra-money/feature/update_fn

[Feature] Add update fn support
terra-money · Sep 28, 2023 · 0e4daad · 0e4daad
2 parents 54b3259 + 8e5485c
commit 0e4daad
Show file tree

Hide file tree

Showing 41 changed files with 867 additions and 94 deletions.
diff --git a/apps/warp-protocol/src/forms/variables/useExternalVariableForm.ts b/apps/warp-protocol/src/forms/variables/useExternalVariableForm.ts
@@ -8,6 +8,8 @@ export interface ExternalVariableInput {
   body?: string | null;
   headers?: object | null;
   method?: warp_resolver.Method | null;
+  onSuccess?: warp_resolver.UpdateFnValue;
+  onError?: warp_resolver.UpdateFnValue;
   selector: string;
   url: string;
 }
@@ -27,6 +29,8 @@ export const externalVariableToInput = (externalVariable?: warp_resolver.Externa
     method: externalVariable?.init_fn.method ?? null,
     selector: externalVariable?.init_fn.selector ?? '',
     url: externalVariable?.init_fn.url ?? '',
+    onSuccess: externalVariable?.update_fn?.on_success ?? undefined,
+    onError: externalVariable?.update_fn?.on_error ?? undefined,
   };
 };
 
@@ -75,8 +79,15 @@ export const useExternalVariableForm = (externalVariable?: warp_resolver.Externa
         methodError
     );
 
+    const isNumKind = ['decimal', 'uint', 'int'].includes(state.kind);
+
+    const onSuccess = isNumKind ? state.onSuccess : undefined;
+    const onError = isNumKind ? state.onError : undefined;
+
     dispatch({
       ...state,
+      onSuccess,
+      onError,
       nameError,
       submitDisabled,
       bodyError,

diff --git a/apps/warp-protocol/src/forms/variables/useQueryVariableForm.tsx b/apps/warp-protocol/src/forms/variables/useQueryVariableForm.tsx
@@ -7,6 +7,8 @@ export interface QueryVariableInput {
   queryJson: string;
   kind: warp_resolver.VariableKind;
   querySelector: string;
+  onSuccess?: warp_resolver.UpdateFnValue;
+  onError?: warp_resolver.UpdateFnValue;
 }
 
 export interface QueryVariableState extends FormState<QueryVariableInput> {
@@ -23,6 +25,8 @@ export const queryVariableToInput = (queryVariable?: warp_resolver.QueryVariable
     name: queryVariable?.name ?? '',
     queryJson,
     querySelector: queryVariable?.init_fn.selector ?? '',
+    onSuccess: queryVariable?.update_fn?.on_success ?? undefined,
+    onError: queryVariable?.update_fn?.on_error ?? undefined,
   };
 };
 
@@ -70,8 +74,15 @@ export const useQueryVariableForm = (queryVariable?: warp_resolver.QueryVariable
         !querySelectorValid
     );
 
+    const isNumKind = ['decimal', 'uint', 'int'].includes(state.kind);
+
+    const onSuccess = isNumKind ? state.onSuccess : undefined;
+    const onError = isNumKind ? state.onError : undefined;
+
     dispatch({
       ...state,
+      onSuccess,
+      onError,
       nameError,
       queryJsonError,
       submitDisabled,

diff --git a/apps/warp-protocol/src/forms/variables/useStaticVariableForm.tsx b/apps/warp-protocol/src/forms/variables/useStaticVariableForm.tsx
@@ -6,6 +6,8 @@ export interface StaticVariableInput {
   name: string;
   kind: warp_resolver.VariableKind;
   value: string;
+  onSuccess?: warp_resolver.UpdateFnValue;
+  onError?: warp_resolver.UpdateFnValue;
 }
 
 export interface StaticVariableState extends FormState<StaticVariableInput> {
@@ -19,6 +21,8 @@ export const staticVariableToInput = (variable?: warp_resolver.StaticVariable):
     name: variable?.name ?? '',
     kind: variable?.kind ?? ('' as warp_resolver.VariableKind),
     value: variable?.value ?? '',
+    onSuccess: variable?.update_fn?.on_success ?? undefined,
+    onError: variable?.update_fn?.on_error ?? undefined,
   };
 };
 
@@ -46,8 +50,15 @@ export const useStaticVariableForm = (variable?: warp_resolver.StaticVariable) =
       state.name === undefined || state.name === null || state.name.length < 1 || nameError || kindError || valueError
     );
 
+    const isNumKind = ['decimal', 'uint', 'int'].includes(state.kind);
+
+    const onSuccess = isNumKind ? state.onSuccess : undefined;
+    const onError = isNumKind ? state.onError : undefined;
+
     dispatch({
       ...state,
+      onSuccess,
+      onError,
       nameError,
       submitDisabled,
     });

diff --git a/apps/warp-protocol/src/pages/job-new/condition-builder/condition-node/DecimalExprNode.tsx b/apps/warp-protocol/src/pages/job-new/condition-builder/condition-node/DecimalExprNode.tsx
@@ -30,7 +30,7 @@ export const DecimalExprNode = forwardRef((props: DecimalExprNodeProps, ref: Rea
     }
   }, [op, left, right, setExpr, expr]);
 
-  const Left = <ValueInput variant="number" value={left} onChange={(v) => setLeft(v)} />;
+  const Left = <ValueInput kind="decimal" variant="number" value={left} onChange={(v) => setLeft(v)} />;
 
   const Op = (
     <OperatorInput<warp_resolver.NumOp>
@@ -42,7 +42,7 @@ export const DecimalExprNode = forwardRef((props: DecimalExprNodeProps, ref: Rea
     />
   );
 
-  const Right = <ValueInput variant="number" value={right} onChange={(v) => setRight(v)} />;
+  const Right = <ValueInput kind="decimal" variant="number" value={right} onChange={(v) => setRight(v)} />;
 
   return (
     <>

diff --git a/apps/warp-protocol/src/pages/job-new/condition-builder/condition-node/IntExprNode.tsx b/apps/warp-protocol/src/pages/job-new/condition-builder/condition-node/IntExprNode.tsx
@@ -30,7 +30,7 @@ export const IntExprNode = forwardRef((props: IntExprNodeProps, ref: React.Ref<H
     }
   }, [op, left, right, setExpr, expr]);
 
-  const Left = <ValueInput variant="number" value={left} onChange={(v) => setLeft(v)} />;
+  const Left = <ValueInput kind="int" variant="number" value={left} onChange={(v) => setLeft(v)} />;
 
   const Op = (
     <OperatorInput<warp_resolver.NumOp>
@@ -42,7 +42,7 @@ export const IntExprNode = forwardRef((props: IntExprNodeProps, ref: React.Ref<H
     />
   );
 
-  const Right = <ValueInput variant="number" value={right} onChange={(v) => setRight(v)} />;
+  const Right = <ValueInput kind="int" variant="number" value={right} onChange={(v) => setRight(v)} />;
 
   return (
     <>

diff --git a/apps/warp-protocol/src/pages/job-new/condition-builder/condition-node/StringExprNode.tsx b/apps/warp-protocol/src/pages/job-new/condition-builder/condition-node/StringExprNode.tsx
@@ -30,7 +30,7 @@ export const StringExprNode = forwardRef((props: StringExprNodeProps, ref: React
     }
   }, [op, left, right, setExpr, expr]);
 
-  const Left = <ValueInput variant="text" value={left} onChange={(v) => setLeft(v)} />;
+  const Left = <ValueInput kind="string" variant="text" value={left} onChange={(v) => setLeft(v)} />;
 
   const Op = (
     <OperatorInput<warp_resolver.StringOp>
@@ -42,7 +42,7 @@ export const StringExprNode = forwardRef((props: StringExprNodeProps, ref: React
     />
   );
 
-  const Right = <ValueInput variant="text" value={right} onChange={(v) => setRight(v)} />;
+  const Right = <ValueInput kind="string" variant="text" value={right} onChange={(v) => setRight(v)} />;
 
   return (
     <>

diff --git a/...src/pages/job-new/condition-builder/condition-node/value-input/EnvValueDialog.module.sass b/...src/pages/job-new/condition-builder/condition-node/value-input/EnvValueDialog.module.sass
@@ -0,0 +1,8 @@
+.root
+  width: 640px
+
+.body
+  display: grid
+  grid-template-columns: 1fr 1fr
+  row-gap: 20px !important
+  column-gap: 20px !important
diff --git a/...rotocol/src/pages/job-new/condition-builder/condition-node/value-input/EnvValueDialog.tsx b/...rotocol/src/pages/job-new/condition-builder/condition-node/value-input/EnvValueDialog.tsx
@@ -0,0 +1,35 @@
+import { Button } from 'components/primitives';
+import { useDialog, DialogProps } from '@terra-money/apps/hooks';
+import { Dialog, DialogBody, DialogHeader } from 'components/dialog';
+import styles from './EnvValueDialog.module.sass';
+import { warp_resolver } from '@terra-money/warp-sdk';
+
+type EnvValueDialogProps = {};
+
+const numEnvValues: warp_resolver.NumEnvValue[] = ['time', 'block_height'];
+
+export const EnvValueDialog = (props: DialogProps<EnvValueDialogProps, warp_resolver.NumEnvValue>) => {
+  const { closeDialog } = props;
+
+  return (
+    <Dialog className={styles.root}>
+      <DialogHeader title="Select Environment Value" onClose={() => closeDialog(undefined)} />
+      <DialogBody className={styles.body}>
+        {numEnvValues.map((envValue) => (
+          <Button
+            key={envValue}
+            onClick={() => {
+              closeDialog(envValue);
+            }}
+          >
+            {envValue}
+          </Button>
+        ))}
+      </DialogBody>
+    </Dialog>
+  );
+};
+
+export const useEnvValueDialog = () => {
+  return useDialog<EnvValueDialogProps, warp_resolver.NumEnvValue>(EnvValueDialog);
+};
diff --git a/...col/src/pages/job-new/condition-builder/condition-node/value-input/ValueInput.module.sass b/...col/src/pages/job-new/condition-builder/condition-node/value-input/ValueInput.module.sass
@@ -33,17 +33,24 @@
 .pencil_icon
   cursor: pointer
 
+.terminal_icon
+  cursor: pointer
+
+  path
+    stroke: var(--input-color)
+
 .dropdown_toggle
   height: 100% !important
   fill-opacity: 0.6
   cursor: pointer
   border-right: 1px solid rgba(246, 247, 250, 0.1)
 
-  svg
-    path
-      fill: #F6F7FA !important
+  // svg
+  //   path
+  //     fill: #F6F7FA !important
 
 .dropdown_menu
+  z-index: 10001 !important
   margin-left: -15px
   overflow: hidden
 

diff --git a/...rp-protocol/src/pages/job-new/condition-builder/condition-node/value-input/ValueInput.tsx b/...rp-protocol/src/pages/job-new/condition-builder/condition-node/value-input/ValueInput.tsx
@@ -3,6 +3,7 @@ import { UIElementProps } from '@terra-money/apps/components';
 import { TextInput } from 'components/primitives/text-input';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { ReactComponent as LightningIcon } from 'components/assets/Lightning.svg';
+import { ReactComponent as TerminalIcon } from 'components/assets/Terminal.svg';
 import { ReactComponent as PuzzleIcon } from 'components/assets/Puzzle.svg';
 import { ReactComponent as PencilIcon } from 'components/assets/Pencil.svg';
 import { warp_resolver } from '@terra-money/warp-sdk';
@@ -15,6 +16,7 @@ import { DropdownMenu } from 'components/dropdown-menu/DropdownMenu';
 import { useCachedVariables } from 'pages/job-new/useCachedVariables';
 import { resolveVariableRef, variableName, variableRef } from 'utils/variable';
 import { useSelectVariableDialog } from '../select-variable/SelectVariableDialog';
+import { useEnvValueDialog } from './EnvValueDialog';
 
 type Value =
   | warp_resolver.NumValueFor_Decimal256And_NumExprOpAnd_DecimalFnOp
@@ -25,12 +27,14 @@ type ValueInputProps<T extends Value> = UIElementProps & {
   value: T;
   onChange: (value: T) => void;
   variant: 'number' | 'text';
+  kind: warp_resolver.VariableKind;
 };
 
 export function ValueInput<T extends Value>(props: ValueInputProps<T>) {
-  const { value, onChange, variant } = props;
+  const { value, onChange, variant, kind } = props;
 
   const openSelectVariableDialog = useSelectVariableDialog();
+  const openEnvValueDialog = useEnvValueDialog();
 
   const onSelectVariable = async (value: T, setValue: (variable: warp_resolver.Variable) => void) => {
     const resp = await openSelectVariableDialog({
@@ -42,6 +46,14 @@ export function ValueInput<T extends Value>(props: ValueInputProps<T>) {
     }
   };
 
+  const onSelectEnv = async () => {
+    const envValue = await openEnvValueDialog({});
+
+    if (envValue) {
+      onChange({ env: envValue } as T);
+    }
+  };
+
   const { variables } = useCachedVariables();
 
   const getText = (v: T) => {
@@ -53,21 +65,25 @@ export function ValueInput<T extends Value>(props: ValueInputProps<T>) {
       return v.simple;
     }
 
+    if ('env' in v) {
+      return v.env;
+    }
+
     return undefined;
   };
 
+  const isNumKind = ['decimal', 'uint', 'int'].includes(kind);
+
   const inputProps = {
     startAdornment: (
       <>
         <DropdownMenu
           menuClass={styles.dropdown_menu}
           action={
             <InputAdornment position="start" className={styles.dropdown_toggle}>
-              {'ref' in value ? (
-                <LightningIcon className={styles.lightning_icon} />
-              ) : (
-                <PuzzleIcon className={styles.puzzle_icon} />
-              )}
+              {'ref' in value && <LightningIcon className={styles.lightning_icon} />}
+              {'simple' in value && <PuzzleIcon className={styles.puzzle_icon} />}
+              {'env' in value && <TerminalIcon className={styles.terminal_icon} />}
               <KeyboardArrowDownIcon className={styles.chevron} />
             </InputAdornment>
           }
@@ -86,6 +102,15 @@ export function ValueInput<T extends Value>(props: ValueInputProps<T>) {
             <span>Variable</span>
             <LightningIcon className={styles.lightning_icon} />
           </MenuAction>
+          {isNumKind && (
+            <MenuAction
+              className={classNames(styles.dropdown_item, 'env' in value && styles.dropdown_item_selected)}
+              onClick={onSelectEnv}
+            >
+              <span>Environment</span>
+              <TerminalIcon className={styles.terminal_icon} />
+            </MenuAction>
+          )}
         </DropdownMenu>
       </>
     ),
@@ -110,9 +135,12 @@ export function ValueInput<T extends Value>(props: ValueInputProps<T>) {
         placeholder="Type here"
         margin="none"
         value={getText(value)}
-        disabled={'ref' in value}
+        disabled={'ref' in value || 'env' in value}
         onChange={(event) => {
-          if ('ref' in value && event.target.value === variableName(resolveVariableRef(value.ref, variables))) {
+          if (
+            'env' in value ||
+            ('ref' in value && event.target.value === variableName(resolveVariableRef(value.ref, variables)))
+          ) {
             return;
           }
 
@@ -129,9 +157,12 @@ export function ValueInput<T extends Value>(props: ValueInputProps<T>) {
       placeholder="Type here"
       margin="none"
       value={getText(value)}
-      disabled={'ref' in value}
+      disabled={'ref' in value || 'env' in value}
       onChange={(event) => {
-        if ('ref' in value && event.target.value === variableName(resolveVariableRef(value.ref, variables))) {
+        if (
+          'env' in value ||
+          ('ref' in value && event.target.value === variableName(resolveVariableRef(value.ref, variables)))
+        ) {
           return;
         }
 

diff --git a/apps/warp-protocol/src/pages/job-page/panels/Condition/typed-expressions/BoolExpression.tsx b/apps/warp-protocol/src/pages/job-page/panels/Condition/typed-expressions/BoolExpression.tsx
@@ -12,7 +12,7 @@ export const BoolExpression = (props: BoolExpressionProps) => {
 
   return (
     <span className={className}>
-      <VariableValue job={job} variableRef={variableRef} />
+      <VariableValue variables={job.vars} variableRef={variableRef} />
     </span>
   );
 };
diff --git a/apps/warp-protocol/src/pages/job-page/panels/Condition/typed-expressions/ExpressionValue.tsx b/apps/warp-protocol/src/pages/job-page/panels/Condition/typed-expressions/ExpressionValue.tsx
@@ -24,7 +24,7 @@ export const ExpressionValue = (props: ExpressionValueProps) => {
   }
 
   if ('ref' in value) {
-    left = <VariableValue job={job} variableRef={value.ref} />;
+    left = <VariableValue variables={job.vars} variableRef={value.ref} />;
   }
 
   return left;