-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #209 from Thiht/issue-183-mock-editor
Issue #183 mock editor
- Loading branch information
Showing
21 changed files
with
1,219 additions
and
312 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import * as React from "react"; | ||
| import { Button, Col, Form, Row } from "antd"; | ||
| import Code from "../Code"; | ||
| import { bodyMatcherToPaths } from "../../modules/utils"; | ||
| import { KeyValueEditorEngine } from "./KeyValueEditor"; | ||
|
|
||
| interface BodyMatcherEditorProps { | ||
| name: string[]; | ||
| } | ||
|
|
||
| export const BodyMatcherEditor = ({ | ||
| name, | ||
| }: BodyMatcherEditorProps): JSX.Element => { | ||
| const [initialized, setInitialized] = React.useState(false); | ||
| const [rawJSON, setRawJSON] = React.useState(""); | ||
|
|
||
| return ( | ||
| <Form.List name={name}> | ||
| {(fields, actions) => | ||
| !initialized ? ( | ||
| <> | ||
| <p> | ||
| Please paste a JSON payload below in order to generate the | ||
| corresponding body matcher. For better results, only keep the JSON | ||
| fields you want to match upon. | ||
| </p> | ||
| <Code | ||
| language="json" | ||
| value={rawJSON} | ||
| onChange={(value) => setRawJSON(value)} | ||
| /> | ||
| <Row> | ||
| <Col span={24} style={{ textAlign: "right", marginTop: "0.5em" }}> | ||
| <Button | ||
| onClick={() => { | ||
| try { | ||
| const json = JSON.parse(rawJSON); | ||
| Object.entries(bodyMatcherToPaths(json)).forEach( | ||
| ([key, value]) => { | ||
| // TODO: handle more matchers | ||
| actions.add({ key, matcher: "ShouldEqual", value }); | ||
| } | ||
| ); | ||
| setInitialized(true); | ||
| } catch (e) { | ||
| console.error("Invalid JSON body", e); | ||
| } | ||
| }} | ||
| > | ||
| Generate Body Matcher | ||
| </Button> | ||
| </Col> | ||
| </Row> | ||
| </> | ||
| ) : ( | ||
| <KeyValueEditorEngine | ||
| name={name} | ||
| withMatchers={true} | ||
| fields={fields} | ||
| actions={actions} | ||
| /> | ||
| ) | ||
| } | ||
| </Form.List> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import * as React from "react"; | ||
| import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"; | ||
| import { Button, Form, Input, Select, Space } from "antd"; | ||
| import { defaultMatcher } from "../../modules/types"; | ||
| import { positiveMatchers, negativeMatchers, unaryMatchers } from "./utils"; | ||
| import { FormListFieldData, FormListOperation } from "antd/lib/form/FormList"; | ||
|
|
||
| export interface KeyValueEditorProps { | ||
| name: string[]; | ||
| withMatchers?: boolean; | ||
| } | ||
|
|
||
| export const KeyValueEditor = ({ | ||
| name, | ||
| withMatchers, | ||
| }: KeyValueEditorProps): JSX.Element => ( | ||
| <Form.List name={name}> | ||
| {(fields, actions) => ( | ||
| <KeyValueEditorEngine | ||
| name={name} | ||
| withMatchers={withMatchers} | ||
| fields={fields} | ||
| actions={actions} | ||
| /> | ||
| )} | ||
| </Form.List> | ||
| ); | ||
|
|
||
| export interface KeyValueEditorEngineProps extends KeyValueEditorProps { | ||
| fields: FormListFieldData[]; | ||
| actions: FormListOperation; | ||
| } | ||
|
|
||
| export const KeyValueEditorEngine = ({ | ||
| name, | ||
| withMatchers, | ||
| fields, | ||
| actions, | ||
| }: KeyValueEditorEngineProps): JSX.Element => ( | ||
| <div style={{ margin: "auto" }}> | ||
| {fields.map(({ key, name: fieldName, fieldKey, ...restField }) => ( | ||
| <Space | ||
| key={key} | ||
| style={{ display: "flex", justifyContent: "center" }} | ||
| align="baseline" | ||
| > | ||
| <MinusCircleOutlined onClick={() => actions.remove(fieldName)} /> | ||
|
|
||
| <Form.Item | ||
| {...restField} | ||
| name={[fieldName, "key"]} | ||
| fieldKey={[fieldKey, "key"]} | ||
| > | ||
| <Input placeholder="Key" /> | ||
| </Form.Item> | ||
|
|
||
| {withMatchers && ( | ||
| <Form.Item | ||
| {...restField} | ||
| name={[fieldName, "matcher"]} | ||
| fieldKey={[fieldKey, "matcher"]} | ||
| > | ||
| <Select> | ||
| <Select.OptGroup label="Positive"> | ||
| {positiveMatchers.map((matcher) => ( | ||
| <Select.Option key={matcher} value={matcher}> | ||
| {matcher} | ||
| </Select.Option> | ||
| ))} | ||
| </Select.OptGroup> | ||
| <Select.OptGroup label="Negative"> | ||
| {negativeMatchers.map((matcher) => ( | ||
| <Select.Option key={matcher} value={matcher}> | ||
| {matcher} | ||
| </Select.Option> | ||
| ))} | ||
| </Select.OptGroup> | ||
| </Select> | ||
| </Form.Item> | ||
| )} | ||
|
|
||
| <Form.Item noStyle shouldUpdate> | ||
| {({ getFieldValue }) => ( | ||
| <Form.Item | ||
| {...restField} | ||
| name={[fieldName, "value"]} | ||
| fieldKey={[fieldKey, "value"]} | ||
| hidden={unaryMatchers.includes( | ||
| getFieldValue([...name, fieldKey, "matcher"]) | ||
| )} | ||
| > | ||
| <Input placeholder="Value" /> | ||
| </Form.Item> | ||
| )} | ||
| </Form.Item> | ||
| </Space> | ||
| ))} | ||
|
|
||
| <Form.Item> | ||
| <Button | ||
| type="dashed" | ||
| onClick={() => actions.add({ matcher: defaultMatcher })} | ||
| style={{ width: "100%" }} | ||
| icon={<PlusOutlined />} | ||
| > | ||
| Add field | ||
| </Button> | ||
| </Form.Item> | ||
| </div> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import * as React from "react"; | ||
| import { Form, InputNumber, Switch } from "antd"; | ||
|
|
||
| export const MockContextEditor = (): JSX.Element => ( | ||
| <div className="inline-form-items"> | ||
| <Form.Item name={["context", "times_enabled"]} noStyle> | ||
| <Switch size="small" /> | ||
| </Form.Item> | ||
|
|
||
| <Form.Item | ||
| label="Limit this mock to be called" | ||
| shouldUpdate={(prevValues, currentValues) => prevValues?.context?.times_enabled !== | ||
| currentValues?.context?.times_enabled || | ||
| prevValues?.context?.times !== currentValues?.context?.times} | ||
| style={{ marginBottom: 0, paddingLeft: "5px" }} | ||
| > | ||
| {({ getFieldValue }) => ( | ||
| <> | ||
| <Form.Item name={["context", "times"]} noStyle> | ||
| <InputNumber | ||
| min={1} | ||
| disabled={!getFieldValue(["context", "times_enabled"])} /> | ||
| </Form.Item> | ||
| {getFieldValue(["context", "times"]) <= 1 ? ( | ||
| <span> time</span> | ||
| ) : ( | ||
| <span> times</span> | ||
| )} | ||
| </> | ||
| )} | ||
| </Form.Item> | ||
| </div> | ||
| ); |
31 changes: 31 additions & 0 deletions
31
client/components/MockEditor/MockDynamicResponseEditor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import * as React from "react"; | ||
| import { Form, Select } from "antd"; | ||
| import Code from "../Code"; | ||
|
|
||
| export const MockDynamicResponseEditor = (): JSX.Element => ( | ||
| <> | ||
| <Form.Item label="Engine" name={["dynamic_response", "engine"]}> | ||
| <Select> | ||
| <Select.Option value="go_template_yaml"> | ||
| Go Template (YAML) | ||
| </Select.Option> | ||
| <Select.Option value="go_template_json"> | ||
| Go Template (JSON) | ||
| </Select.Option> | ||
| <Select.Option value="lua">Lua</Select.Option> | ||
| </Select> | ||
| </Form.Item> | ||
|
|
||
| <Form.Item | ||
| noStyle | ||
| shouldUpdate={(prevValues, currentValues) => prevValues?.dynamic_response?.engine !== | ||
| currentValues?.dynamic_response?.engine} | ||
| > | ||
| {({ getFieldValue }) => ( | ||
| <Form.Item label="Script" name={["dynamic_response", "script"]}> | ||
| <Code language={getFieldValue(["dynamic_response", "engine"])} /> | ||
| </Form.Item> | ||
| )} | ||
| </Form.Item> | ||
| </> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| .inline-form-items { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .hidden { | ||
| visibility: hidden; | ||
| } | ||
|
|
||
| .display-none { | ||
| display: none; | ||
| } | ||
|
|
||
| .ant-form-item { | ||
| margin-bottom: 12px; | ||
| } |
Oops, something went wrong.