- Add import/export feature

- Fix bug: cannot parameterise pathnames that contains certain characters

Author: AndrewWalsh

package-lock.json

@@ -16,10 +16,12 @@
     "@chakra-ui/react": "^2.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "copy-to-clipboard": "^3.3.3",
     "decode-uri-component": "^0.4.1",
     "framer-motion": "^10.16.4",
     "fuse.js": "^6.6.2",
     "genson-js": "^0.0.8",
+    "json-stable-stringify": "^1.0.2",
     "lodash": "^4.17.21",
     "openapi3-ts": "^4.1.2",
     "radix3": "^1.1.0",
@@ -28,13 +30,14 @@
     "react-select": "^5.7.7",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
-    "redoc": "^2.1.2",
+    "redoc": "^2.1.3",
     "store2": "^2.14.2"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.0.0-beta.19",
     "@seriousme/openapi-schema-validator": "^2.1.2",
     "@types/chrome": "^0.0.246",
+    "@types/json-stable-stringify": "^1.0.35",
     "@types/lodash": "^4.14.199",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",

package.json

@@ -2,6 +2,7 @@ import { JSONType, RouterMap, LeafMap, Endpoint } from "../utils/types";
 import { parameterise, insertLeafMap, upsert } from "./store-helpers";
 import { omit, unset } from "lodash";
 import leafMapToEndpoints from "./leafmap-to-endpoints";
+import stringify from "json-stable-stringify";
 
 /**
  * RequestStore handles routing to endpoints
@@ -18,6 +19,26 @@ export default class RequestStore {
     this.disabledHosts = new Set();
   }
 
+  public import(json: string): boolean {
+    try {
+      const { store, leafMap, disabledHosts } = JSON.parse(json);
+      this.disabledHosts = new Set(disabledHosts);
+      this.store = store;
+      this.leafMap = leafMap;
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  public export = (): string => {
+    return stringify({
+      store: this.store,
+      leafMap: this.leafMap,
+      disabledHosts: Array.from(this.disabledHosts),
+    });
+  };
+
   public clear(): void {
     this.store = {};
     this.leafMap = {};

resources/dist.zip

@@ -1,4 +1,3 @@
-import decodeUriComponent from "decode-uri-component";
 import { Endpoint, LeafMap } from "../utils/types";
 import { pathToParts } from "./store-helpers/helpers";
 
@@ -9,7 +8,7 @@ const leafMapToEndpoints = (leafMap: LeafMap): Array<Endpoint> => {
       const endpoint: Endpoint = {
         host,
         parts: pathToParts(path),
-        pathname: decodeUriComponent(path),
+        pathname: path,
         data: leaf.data,
       };
       endpoints.push(endpoint);

src/lib/RequestStore.ts

@@ -1,19 +1,18 @@
+import decodeUriComponent from "decode-uri-component";
 import {
   createSchemaElseUndefined,
   entriesToJSONType,
   parseJSON,
 } from "../../utils/helpers";
 import { JSONType, Leaf } from "../../utils/types";
 import { parseAuthHeader } from "../../utils/httpauthentication";
-import decodeUriComponent from "decode-uri-component";
 import { filterIgnoreHeaders } from '../../utils/headers';
 
 function createLeaf(
   harRequest: chrome.devtools.network.Request,
   responseBody: JSONType
 ): Leaf {
   const authentication = parseAuthHeader(harRequest.request.headers);
-  harRequest.request.url = decodeUriComponent(harRequest.request.url);
   harRequest.request.headers = filterIgnoreHeaders(harRequest.request.headers);
   harRequest.response.headers = filterIgnoreHeaders(harRequest.response.headers);
   const method = harRequest.request.method;
@@ -22,7 +21,7 @@ function createLeaf(
   const requestHeaders = entriesToJSONType(harRequest.request.headers);
   const responseHeaders = entriesToJSONType(harRequest.response.headers);
   const queryParameters = entriesToJSONType(harRequest.request.queryString);
-  const pathname = new URL(harRequest.request.url).pathname;
+  const pathname = decodeUriComponent(new URL(harRequest.request.url).pathname);
   const leafPart: Leaf = {
     ...(authentication && { authentication }),
     pathname,

src/lib/leafmap-to-endpoints.ts

@@ -1,7 +1,6 @@
 import { MatchedRoute } from "radix3";
 import { arrayToPath, getParamName, pathToArray } from "../../utils/helpers";
 import { Leaf, LeafMap, PartType, Parts, RouteData } from "../../utils/types";
-import decodeUriComponent from "decode-uri-component";
 
 const paramRe = /:param(\d+)/;
 const paramReExact = /^:param(\d+)$/;
@@ -58,7 +57,7 @@ const getPartType = (part: string): PartType => {
 
 export const pathToParts = (path: string): Parts => {
   return pathToArray(path).map((part) => ({
-    part: decodeUriComponent(part),
+    part,
     type: getPartType(part),
   }));
 };

src/lib/store-helpers/create-leaf.ts

@@ -23,8 +23,9 @@ export default function upsert({
   store,
 }: Params): Returns | null {
   const url = new URL(harRequest.request.url);
-  const { host, pathname } = url;
-  const parts = pathToArray(decodeUriComponent(pathname));
+  const { host } = url;
+  const pathname = decodeUriComponent(url.pathname);
+  const parts = pathToArray(pathname);
   if (parts.length === 0) return null;
   // Set the host on first visit
   if (!store[host]) {

src/lib/store-helpers/helpers.ts

@@ -0,0 +1,32 @@
+import { useContext } from "react";
+import { Button, Tooltip, HStack, useToast } from "@chakra-ui/react";
+import copy from 'copy-to-clipboard';
+import Context from './context';
+import ControlConfigImport from './ControlConfigImport';
+
+const ControlConfig = () => {
+  const ctx = useContext(Context);
+  const toast = useToast();
+  const onExport = () => {
+    const stateStr = ctx.export();
+    copy(stateStr);
+    toast({
+      title: "Copied to clipboard.",
+      status: "success",
+      duration: 2000,
+      isClosable: true,
+    });
+  };
+  return (
+    <HStack>
+      <ControlConfigImport />
+      <Tooltip label="Export will copy a state string to your clipboard. Save this somewhere on your computer. You can load it by clicking import and pasting the string.">
+        <Button size="md" onClick={onExport} colorScheme="teal">
+          Export
+        </Button>
+      </Tooltip>
+    </HStack>
+  );
+};
+
+export default ControlConfig;

src/lib/store-helpers/upsert.ts

@@ -0,0 +1,90 @@
+import { useRef, useState, useContext } from "react";
+import {
+  useDisclosure,
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  FormControl,
+  Textarea,
+  ModalFooter,
+  Tooltip,
+  useToast,
+} from "@chakra-ui/react";
+import Context from "./context";
+
+function ControlConfigImport() {
+  const ctx = useContext(Context);
+  const toast = useToast();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [value, setValue] = useState("");
+
+  const initialRef = useRef(null);
+  const finalRef = useRef(null);
+
+  const onImport = () => {
+    const result = ctx.import(value);
+    if (result) {
+      toast({
+        title: "Imported.",
+        status: "success",
+        duration: 2000,
+        isClosable: true,
+      });
+    } else {
+      toast({
+        title: "Could not import.",
+        status: "error",
+        duration: 2000,
+        isClosable: true,
+      });
+    }
+    onClose();
+    return result;
+  };
+
+  return (
+    <>
+      <Tooltip label="Import a state string that was previously exported. This will open a modal, paste in the string to load the state.">
+        <Button size="md" onClick={onOpen} colorScheme="teal">
+          Import
+        </Button>
+      </Tooltip>
+
+      <Modal
+        initialFocusRef={initialRef}
+        finalFocusRef={finalRef}
+        isOpen={isOpen}
+        onClose={onClose}
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Import state string</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb={6}>
+            <FormControl>
+              <Textarea
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                ref={initialRef}
+                placeholder="Paste the state string here..."
+              />
+            </FormControl>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onClick={onImport} colorScheme="blue" mr={3}>
+              Import
+            </Button>
+            <Button onClick={onClose}>Cancel</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+export default ControlConfigImport;