transformer HandleTransformer.tsx

0% Statements 0/35
0% Branches 0/15
0% Functions 0/3
0% Lines 0/34
Press n or j to go to the next uncovered block, b, p or k for the previous block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useRef } from "react";
import hljs from "highlight.js/lib/core";
import python from "highlight.js/lib/languages/python";
import json from "highlight.js/lib/languages/json";
import { useDispatch } from "react-redux";
import useCurrentTask from "../../../../hooks/playbooks/task/useCurrentTask";
import getNestedValue from "../../../../utils/common/getNestedValue";
import { showSnackbar } from "../../../../store/features/snackbar/snackbarSlice";
import { updateCardById } from "../../../../utils/execution/updateCardById";
import CodeAccordion from "../../../common/CodeAccordion";
import { LanguageTypes } from "../../../common/CodeAccordion/types";
import CustomButton from "../../../common/CustomButton";
import { useTestTransformerPlaybooksMutation } from "../../../../store/features/playbook/api";
import { defaultCodeTransformer } from "../../../../utils/common/transformerDefaults";
 
hljs.registerLanguage("python", python as any);
hljs.registerLanguage("json", json as any);
const key =
  "execution_configuration.result_transformer_lambda_function.definition";
 
function HandleResultTransformer({ id }) {
  const [task] = useCurrentTask(id);
  const code = getNestedValue(task, key) ?? "";
  const dispatch = useDispatch();
  const outputRef = useRef<HTMLDivElement>(null);
  const [triggerTestTransformer, { isLoading, data }] =
    useTestTransformerPlaybooksMutation();
  const taskOutput = task?.ui_requirement.outputs?.[0]?.data ?? "";
 
  const testCode = async () => {
    Iif (isLoading) return;
    try {
      await triggerTestTransformer({
        transformerCode: code,
        payload: task?.ui_requirement.outputs?.[0]?.data ?? "{}",
      }).unwrap();
      dispatch(
        showSnackbar({
          message: "Tranformer function test successful",
          type: "success",
        }),
      );
      outputRef.current?.scrollIntoView({
        behavior: "smooth",
      });
    } catch (e: any) {
      dispatch(
        showSnackbar({
          message: e.message ?? "There was an error testing the transformer",
          type: "error",
        }),
      );
    }
  };
 
  const setCode = (value: string) => {
    updateCardById(key, value, id);
  };
 
  return (
    <div className="my-2 flex flex-col gap-2">
      <CodeAccordion
        code={code}
        label={
          <>
            Transformer Function&nbsp;
            <a
              href="https://docs.drdroid.io/docs/output-exporter-transformers"
              target="_blank"
              rel="noreferrer"
              className="underline">
              (See how it works)
            </a>
          </>
        }
        placeholder={defaultCodeTransformer}
        language={LanguageTypes.PYTHON}
        onValueChange={setCode}
        className="min-h-[100px]"
        defaultOpen={true}
      />
 
      <CodeAccordion
        code={taskOutput}
        placeholder="Run the task to generate the output json"
        className="max-h-[150px] !overflow-y-auto"
        disabled={true}
        label={"Test your transformer against an output json"}
        language={LanguageTypes.JSON}>
        {data && (
          <CodeAccordion
            ref={outputRef}
            code={data}
            label="Output"
            language={LanguageTypes.JSON}
            className="max-h-[150px] !overflow-y-auto"
            disabled={true}
            defaultOpen={true}
          />
        )}
        {taskOutput && (
          <CustomButton
            disabled={isLoading}
            className="w-fit"
            onClick={testCode}>
            {isLoading ? "Loading..." : "Test Code"}
          </CustomButton>
        )}
      </CodeAccordion>
    </div>
  );
}
 
export default HandleResultTransformer;