Add More Info toggle

Author: AndrewWalsh

resources/dist.zip

@@ -1,9 +1,14 @@
 import { JSONType, RouterMap, LeafMap, Endpoint } from "../utils/types";
-import { parameterise, insertLeafMap, upsert } from "./store-helpers";
+import { parameterise, insertLeafMap, upsert, persistOptions } from "./store-helpers";
 import { omit, unset } from "lodash";
 import leafMapToEndpoints from "./leafmap-to-endpoints";
 import stringify from "json-stable-stringify";
 
+export type Options = {
+  // Includes additional data such as response samples
+  enableMoreInfo: boolean;
+}
+
 /**
  * RequestStore handles routing to endpoints
  * Optimised for fast lookups & insertion via a Radix Tree
@@ -12,11 +17,20 @@ export default class RequestStore {
   private store: RouterMap;
   private leafMap: LeafMap;
   private disabledHosts: Set<string>;
+  private storeOptions: Options;
 
   constructor() {
     this.leafMap = {}; // persist.get() || {};
     this.store = {}; // leafMapToRouterMap(this.leafMap);
     this.disabledHosts = new Set();
+    this.storeOptions = persistOptions.get();
+  }
+
+  public options = (options?: Partial<Options>): Readonly<Options> => {
+    if (!options) return this.storeOptions;
+    this.storeOptions = { ...this.storeOptions, ...options };
+    persistOptions.set(this.storeOptions);
+    return this.storeOptions;
   }
 
   public import(json: string): boolean {

src/lib/RequestStore.ts

@@ -1,9 +1,9 @@
 export { default as createLeaf } from "./create-leaf";
 export { default as parameterise } from "./parameterise";
-export { default as persist } from "./persist";
 export { default as leafMapToRouterMap } from "./leafmap-to-routermap";
 export { default as upsert } from "./upsert";
 export { default as findPathnamesInRouter } from "./find-pathnames-in-router";
 export { default as pruneRouter } from "./prune-router";
+export { default as persistOptions } from "./persist-options";
 export * from "./merge";
 export * from "./helpers";

src/lib/store-helpers/index.ts

@@ -0,0 +1,29 @@
+import store2 from "store2";
+import type { Options } from "../RequestStore";
+
+const namespace = "openapi-devtools-options";
+const key = "options";
+const store = store2.namespace(namespace);
+
+export const defaultOptions: Readonly<Options> = {
+  enableMoreInfo: false,
+};
+
+const get = (): Options => {
+  const options = store.get(key);
+  if (options) return options;
+  store.set(key, defaultOptions);
+  return defaultOptions;
+};
+const set = (value: Partial<Options>) => {
+  const options = get();
+  const newOptions = { ...options, ...value };
+  store.set(key, newOptions);
+};
+const clear = () => store.clear();
+
+export default {
+  get,
+  set,
+  clear,
+};

src/lib/store-helpers/persist-options.ts

@@ -1,7 +1,9 @@
-import store from "store2";
+import store2 from "store2";
 
 const namespace = "openapi-devtools";
 
+const store = store2.namespace(namespace);
+
 const get = () => store.get(namespace);
 const set = (value: unknown) => store.set(namespace, value);
 const clear = () => store.clear();

src/lib/store-helpers/persist.ts src/lib/store-helpers/persist-store.tssrc/lib/store-helpers/persist.ts renamed to src/lib/store-helpers/persist-store.ts

@@ -1,30 +1,38 @@
-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';
+import { useState, useContext } from "react";
+import { Tooltip, HStack, FormControl, FormLabel } from "@chakra-ui/react";
+import { Switch } from "@chakra-ui/react";
+import ControlConfigImport from "./ControlConfigImportExport";
+import Context from "./context";
+
+const TOGGLEMOREID = "toggle-more-info";
 
 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,
-    });
+  const [moreInfoEnabled, setMoreInfoEnabled] = useState(
+    ctx.options().enableMoreInfo
+  );
+  const onToggleMoreInfo = () => {
+    const enableMoreInfo = !ctx.options().enableMoreInfo;
+    ctx.options({ enableMoreInfo });
+    setMoreInfoEnabled(enableMoreInfo);
   };
   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 justifyContent="space-between">
+      <FormControl display="flex" alignItems="center">
+        <Tooltip label="Include response examples in the specification. This could include private information. Your choice will persist across sessions.">
+          <FormLabel htmlFor={TOGGLEMOREID} mb="0">
+            More info
+          </FormLabel>
+        </Tooltip>
+        <Switch
+          id={TOGGLEMOREID}
+          onChange={onToggleMoreInfo}
+          isChecked={moreInfoEnabled}
+        />
+      </FormControl>
+      <HStack>
+        <ControlConfigImport />
+      </HStack>
     </HStack>
   );
 };

src/ui/ControlConfig.tsx

@@ -14,6 +14,7 @@ import {
   Tooltip,
   useToast,
 } from "@chakra-ui/react";
+import copy from "copy-to-clipboard";
 import Context from "./context";
 
 function ControlConfigImport() {
@@ -46,6 +47,17 @@ function ControlConfigImport() {
     return result;
   };
 
+  const onExport = () => {
+    const stateStr = ctx.export();
+    copy(stateStr);
+    toast({
+      title: "Copied to clipboard.",
+      status: "success",
+      duration: 2000,
+      isClosable: true,
+    });
+  };
+
   return (
     <>
       <Tooltip label="Import a state string that was previously exported. This will open a modal, paste in the string to load the state.">
@@ -54,6 +66,12 @@ function ControlConfigImport() {
         </Button>
       </Tooltip>
 
+      <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>
+
       <Modal
         initialFocusRef={initialRef}
         finalFocusRef={finalRef}

src/ui/ControlConfigImport.tsx src/ui/ControlConfigImportExport.tsxsrc/ui/ControlConfigImport.tsx renamed to src/ui/ControlConfigImportExport.tsx

@@ -145,6 +145,7 @@ function Main() {
         endpoints,
         export: requestStore.export,
         import: importFn,
+        options: requestStore.options,
       }}
     >
       <div className={classes.wrapper}>

src/ui/Main.tsx

@@ -1,6 +1,7 @@
 import { createContext } from "react";
 import RequestStore from "../lib/RequestStore";
 import { Endpoint, EndpointsByHost } from "../utils/types";
+import { defaultOptions } from "../lib/store-helpers/persist-options";
 
 type ContextType = {
   endpoints: Endpoint[];
@@ -13,6 +14,7 @@ type ContextType = {
   parameterise: typeof RequestStore.prototype.parameterise;
   import: typeof RequestStore.prototype.import;
   export: typeof RequestStore.prototype.export;
+  options: typeof RequestStore.prototype.options;
 };
 
 const defaultContextValue: ContextType = {
@@ -26,6 +28,7 @@ const defaultContextValue: ContextType = {
   parameterise: () => {},
   import: () => false,
   export: () => '',
+  options: () => defaultOptions,
 };
 
 const Context = createContext<ContextType>(defaultContextValue);