Merge pull request #53 from sergptz/feature/buttons_to_load_json_files

Added buttons to load params, headers or body from a JSON file

Author: unwls

webview/__test__/LoadButtonsBlock.test.js

@@ -0,0 +1,14 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import LoadButtonsBlock from "../components/LoadButtonsBlock";
+import { COMMON } from "../constants";
+
+describe("LoadButtonsBlock component test", () => {
+  it("should render text correctly", () => {
+    const { getByText } = render(<LoadButtonsBlock optionsType={COMMON.HEADERS} />);
+
+    expect(getByText(/Set data from file/i)).toBeInTheDocument();
+    expect(getByText(/Add data from file/i)).toBeInTheDocument();
+  });
+});

webview/__test__/LoadJSONFileButtons.test.js

@@ -0,0 +1,17 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import { COMMON } from "../constants";
+import LoadJSONFileButton from "../features/Request/Button/LoadJSONFileButton";
+
+describe("LoadJSONFileButton component test", () => {
+  it("should render text correctly", () => {
+    const { getByText } = render(<LoadJSONFileButton optionsType={COMMON.HEADERS} />);
+    expect(getByText(/Add data from file/i)).toBeInTheDocument();
+  });
+
+  it("should render text correctly when 'replaceValues' prop is true", () => {
+    const { getByText } = render(<LoadJSONFileButton optionsType={COMMON.HEADERS} replaceValues={true} />);
+    expect(getByText(/Set data from file/i)).toBeInTheDocument();
+  });
+});

webview/components/LoadButtonsBlock.js

@@ -0,0 +1,30 @@
+import PropTypes from "prop-types";
+import React from "react";
+import styled from "styled-components";
+
+import LoadJSONFileButton from "../../webview/features/Request/Button/LoadJSONFileButton";
+import { COMMON, REQUEST } from "../constants";
+
+const LoadButtonsBlock = ({
+  optionsType,
+}) => (
+    <ButtonsWrapper>
+      <LoadJSONFileButton optionsType={optionsType} />
+      <LoadJSONFileButton optionsType={optionsType} replaceValues={true} />
+    </ButtonsWrapper>
+  )
+;
+
+LoadButtonsBlock.propTypes = {
+  optionsType: PropTypes.oneOf([COMMON.HEADERS, REQUEST.PARAMS, REQUEST.FORM_DATA, REQUEST.FORM_URLENCODED]),
+  replaceValues: PropTypes.bool,
+};
+
+const ButtonsWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  margin-right: 25px;
+`;
+
+export default LoadButtonsBlock;

webview/features/Request/Body/RequestBodySelectMenuOption.js

@@ -1,6 +1,7 @@
 import React from "react";
 import shallow from "zustand/shallow";
 
+import LoadButtonsBlock from "../../../components/LoadButtonsBlock";
 import { HEIGHT, OPTION, REQUEST } from "../../../constants";
 import CodeEditor from "../../../shared/CodeEditor";
 import KeyValueTable from "../../../shared/KeyValueTable";
@@ -48,11 +49,14 @@ const RequestBodySelectMenuOption = () => {
     case REQUEST.FORM_DATA:
     case REQUEST.FORM_URLENCODED:
       return (
-        <KeyValueTable
-          type={bodyOption}
-          title={bodyOption}
-          {...keyValueProps}
-        />
+        <>
+          <LoadButtonsBlock optionsType={bodyOption} />
+          <KeyValueTable
+            type={bodyOption}
+            title={bodyOption}
+            {...keyValueProps}
+          />
+        </>
       );
     case REQUEST.RAW:
       return (

webview/features/Request/Button/LoadJSONFileButton.js

@@ -0,0 +1,52 @@
+import PropTypes from "prop-types";
+import React from "react";
+import shallow from "zustand/shallow";
+
+import Button from "../../../components/Button";
+import useStore from "../../../store/useStore";
+
+const LoadJSONFileButton = ({
+  optionsType,
+  replaceValues = false,
+}) => {
+  const {
+    handleFileUpload,
+  } = useStore(
+    (state) => ({ handleFileUpload: state.handleFileUpload }),
+    shallow,
+  );
+
+  async function loadSettingsFromJSONFile(e) {
+    const config = await readFileJSON(e.target.files.item(0))
+    handleFileUpload(config, optionsType, replaceValues)
+  }
+
+  async function readFileJSON(file) {
+    return JSON.parse(await file.text())
+  }
+
+  const fileInput = document.createElement('input')
+  const inputAttrs = {
+    hidden: true,
+    type: 'file',
+    accept: '.json'
+  }
+  for (let attr in inputAttrs) {
+    fileInput.setAttribute(attr, inputAttrs[attr])
+  }
+  fileInput.addEventListener('change', (e) => loadSettingsFromJSONFile(e))
+
+  return (
+    <Button buttonType="submit" handleButtonClick={() => fileInput.click()}>
+      { replaceValues ? 'Set data from file' : 'Add data from file'}
+    </Button>
+  );
+};
+
+LoadJSONFileButton.propTypes = {
+  optionsType: PropTypes.string,
+  replaceValues: PropTypes.bool,
+};
+
+
+export default LoadJSONFileButton;

webview/features/Request/Menu/RequestMenuOption.js

@@ -1,6 +1,7 @@
 import React from "react";
 import shallow from "zustand/shallow";
 
+import LoadButtonsBlock from "../../../components/LoadButtonsBlock";
 import { COMMON, REQUEST } from "../../../constants";
 import KeyValueTable from "../../../shared/KeyValueTable";
 import useStore from "../../../store/useStore";
@@ -30,7 +31,12 @@ const RequestMenuOption = () => {
   switch (requestOption) {
     case REQUEST.PARAMS:
     case COMMON.HEADERS:
-      return <KeyValueTable type={requestOption} {...keyValueProps} />;
+      return (
+        <>
+          <LoadButtonsBlock optionsType={requestOption} />
+          <KeyValueTable type={requestOption} {...keyValueProps} />
+        </>
+      );
     case REQUEST.AUTH:
       return <RequestAuthSelectMenu />;
     case COMMON.BODY:

webview/store/slices/keyValueTableDataSlice.js

@@ -72,6 +72,25 @@ const keyValueTableDataSlice = (set) => ({
       ),
     })),
 
+  handleFileUpload: (data, optionsType = COMMON.HEADERS, replaceValues) => {
+    const rows = []
+    for (let key in data) {
+      rows.push({
+        optionType: optionsType,
+        isChecked: true,
+        key,
+        value: data[key],
+        description: "",
+      })
+    }
+    set((state) => ({ 
+      keyValueTableData: [
+        ...(state.keyValueTableData.filter(v => data[v.key] === undefined && (!replaceValues || v.optionType !== optionsType))),
+        ...rows
+      ]
+    }))
+  },
+
   handleRequestKey: (dataIndex, detail) =>
     set((state) => ({
       keyValueTableData: state.keyValueTableData.map((tableData, index) =>