v1.3.0

- feat: api keys in auth headers are now parsed and will be associated with endpoints
- feat: api keys in cookies are also parsed, keys that look like they relate to auth will be associated with endpoints
- feat: new Actions menu that presents opportunities to users. Currently includes guidance on how to use the app to generate code for 20+ languages easily. This can be achieved by pasting generated schemas into https://app.quicktype.io/
- feat: long parts in pathnames are now truncated in the middle. Hovering on the part shows a tooltip of the full name. This should resolve UI issues with long pathnames
- fix: the import modal is now cleared after import
- general: code cleanup in some areas, and added comments to clarify core types that power the algorithm
- general: improved some tooltips & clarity in text content

Author: AndrewWalsh

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "OpenAPI DevTools",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "devtools_page": "index.html",
   "permissions": [],
   "icons": {

package-lock.json

@@ -8,14 +8,15 @@
     "test": "vitest",
     "dev": "vite",
     "build": "rimraf dist && tsc && vite build && npm run zip",
-    "zip": "rimraf resources/dist.zip && zip -r resources/dist.zip dist",
+    "zip": "rimraf resources/dist.zip && zip -rj resources/dist.zip dist/*",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix"
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "cookie": "^0.6.0",
     "copy-to-clipboard": "^3.3.3",
     "decode-uri-component": "^0.4.1",
     "framer-motion": "^10.16.4",
@@ -31,17 +32,20 @@
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
     "redoc": "^2.1.3",
-    "store2": "^2.14.2"
+    "store2": "^2.14.2",
+    "truncate-middle": "^1.0.6"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.0.0-beta.19",
     "@seriousme/openapi-schema-validator": "^2.1.2",
     "@types/chrome": "^0.0.246",
+    "@types/cookie": "^0.5.4",
     "@types/json-stable-stringify": "^1.0.35",
     "@types/lodash": "^4.14.199",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
     "@types/react-window": "^1.8.7",
+    "@types/truncate-middle": "^1.0.3",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@vitejs/plugin-react": "^4.1.0",
     "eslint": "^8.51.0",

package.json

@@ -1,9 +1,15 @@
 import { ChakraProvider } from "@chakra-ui/react";
 import Main from "./ui/Main";
+import { closeButtonTheme } from "./ui/ControlDynamicDelete";
+import { extendTheme } from "@chakra-ui/react";
+
+const theme = extendTheme({
+  components: { CloseButton: closeButtonTheme },
+});
 
 function App() {
   return (
-    <ChakraProvider>
+    <ChakraProvider theme={theme}>
       <Main />
     </ChakraProvider>
   );

resources/dist.zip

@@ -178,6 +178,7 @@ it("parameterisation works after export and import", () => {
   store.insert(req, { foo: 1 });
   store.parameterise(2, "/1/2/a", host);
   const exported = store.export();
+  store.clear();
   store.import(exported);
   store.insert(req, { foo: 1 });
   const expected = {

src/App.tsx

@@ -55,7 +55,7 @@ export default class RequestStore {
     return stringify({
       leafMap: this.leafMap,
       disabledHosts: Array.from(this.disabledHosts),
-    });
+    }).trim();
   };
 
   public clear(): void {

src/lib/RequestStore.test.ts

@@ -0,0 +1,82 @@
+// Has header x-api-key
+// Has cookie foo
+const apikey: chrome.devtools.network.Request = {
+  getContent() {},
+  _priority: "High",
+  _resourceType: "fetch",
+  cache: {},
+  connection: "14048",
+  request: {
+    method: "GET",
+    url: "https://httpbin.org/basic-auth/d/d",
+    httpVersion: "http/2.0",
+    headers: [
+      {
+        name: "x-api-key",
+        value: "123",
+      },
+      {
+        name: "cookie",
+        value: "foo=bar;sessionid=123",
+      },
+    ],
+    queryString: [],
+    cookies: [],
+    headersSize: -1,
+    bodySize: 0,
+  },
+  response: {
+    status: 200,
+    statusText: "OK",
+    httpVersion: "http/2.0",
+    headers: [
+      {
+        name: "access-control-allow-credentials",
+        value: "true",
+      },
+      {
+        name: "access-control-allow-origin",
+        value: "*",
+      },
+      {
+        name: "content-length",
+        value: "44",
+      },
+      {
+        name: "content-type",
+        value: "application/json",
+      },
+      {
+        name: "date",
+        value: "Mon, 30 Oct 2023 07:51:43 GMT",
+      },
+      {
+        name: "server",
+        value: "gunicorn/19.9.0",
+      },
+    ],
+    cookies: [],
+    content: {
+      size: 44,
+      mimeType: "application/json",
+    },
+    redirectURL: "",
+    headersSize: -1,
+    bodySize: -1,
+    _transferSize: 184,
+  },
+  serverIPAddress: "54.83.187.171",
+  startedDateTime: "2023-10-30T07:51:43.115Z",
+  time: 428.73000000250715,
+  timings: {
+    blocked: 123.52900002598763,
+    dns: 0.012999999999991019,
+    ssl: 104.29100000000003,
+    connect: 204.75600000000003,
+    send: 0.6009999999999991,
+    wait: 98.76400000092758,
+    receive: 1.066999975591898,
+  },
+};
+
+export default apikey;

src/lib/RequestStore.ts

@@ -16,16 +16,26 @@ import { Authentication, AuthType } from "../utils/types";
 
 export const createSecuritySchemeTypes = (auth?: Authentication): SecuritySchemeObject | undefined => {
   if (!auth) return;
-  const isBearer = auth.id === AuthType.BEARER;
-  const isBasic = auth.id === AuthType.BASIC;
-  const isDigest = auth.id === AuthType.DIGEST;
+  const isBearer = auth.authType === AuthType.HTTP_HEADER_BEARER;
+  const isBasic = auth.authType === AuthType.HTTP_HEADER_BASIC;
+  const isDigest = auth.authType === AuthType.HTTP_HEADER_DIGEST;
   if (isBearer || isBasic || isDigest) {
-    const securitySchemeObject: SecuritySchemeObject = {
+    const httpAuth: SecuritySchemeObject = {
       type: auth.type,
       in: auth.in,
       scheme: auth.scheme,
     };
-    return securitySchemeObject;
+    return httpAuth;
+  }
+  const isAPIKeyHeader = auth.authType.startsWith(AuthType.APIKEY_HEADER_);
+  const isAPIKeyCookie = auth.authType.startsWith(AuthType.APIKEY_COOKIE_);
+  if (isAPIKeyHeader || isAPIKeyCookie) {
+    const apiKeyHeader: SecuritySchemeObject = {
+      type: auth.type,
+      in: auth.in,
+      name: auth.name,
+    };
+    return apiKeyHeader;
   }
 }
 
@@ -136,3 +146,9 @@ export const createQueryParameterTypes = (
   });
 };
 
+// Format THIS_TXT_STR to this text str
+export const formatAuthType = (str: string) => {
+  return str
+    .replace(/_/g, " ")
+    .toLowerCase();
+};

src/lib/__fixtures__/apikey.ts

@@ -6,9 +6,11 @@ import post from "./__fixtures__/post";
 import bearer from "./__fixtures__/bearer";
 import basic from "./__fixtures__/basic";
 import digest from "./__fixtures__/digest";
+import apikey from "./__fixtures__/apikey";
 import { cloneDeep } from "lodash";
 import { AuthType } from "../utils/types";
 import { defaultOptions } from "./store-helpers/persist-options";
+import { formatAuthType } from './endpoints-to-oai31.helpers';
 
 const createRequestStoreWithDefaults = () => {
   const store = new RequestStore();
@@ -36,8 +38,11 @@ it("sets most recent request when enabled", () => {
   store.insert(post, { test: "string" });
   const endpoints = store.endpoints();
   const oai31 = endpointsToOAI31(endpoints, options);
-  // @ts-expect-error ignored
-  const result = oai31.rootDoc.paths?.['/v1/track'].post?.requestBody?.content['application/json'].example;
+  const result =
+    // @ts-expect-error ignored
+    oai31.rootDoc.paths?.["/v1/track"].post?.requestBody?.content[
+      "application/json"
+    ].example;
   expect(result).toEqual({ test: "integer" });
 });
 
@@ -47,7 +52,10 @@ it("sets most recent response when enabled", () => {
   store.insert(post, { test: "string" });
   const endpoints = store.endpoints();
   const oai31 = endpointsToOAI31(endpoints, options);
-  const result = oai31.rootDoc.paths?.['/v1/track'].post?.responses['200'].content['application/json'].example;
+  const result =
+    oai31.rootDoc.paths?.["/v1/track"].post?.responses["200"].content[
+      "application/json"
+    ].example;
   expect(result).toEqual({ test: "string" });
 });
 
@@ -57,7 +65,12 @@ it("sets bearer auth security schema when available", () => {
   const endpoints = store.endpoints();
   const oai31 = endpointsToOAI31(endpoints, defaultOptions);
   expect(oai31.rootDoc.components?.securitySchemes).toEqual({
-    [AuthType.BEARER]: {
+    [formatAuthType(AuthType.APIKEY_HEADER_ + 'AUTHORIZATION')]: {
+      in: "header",
+      name: "AUTHORIZATION",
+      type: "apiKey",
+    },
+    [formatAuthType(AuthType.HTTP_HEADER_BEARER)]: {
       in: "header",
       scheme: "Bearer",
       type: "http",
@@ -71,7 +84,12 @@ it("sets basic auth security schema when available", () => {
   const endpoints = store.endpoints();
   const oai31 = endpointsToOAI31(endpoints, defaultOptions);
   expect(oai31.rootDoc.components?.securitySchemes).toEqual({
-    [AuthType.BASIC]: {
+    [formatAuthType(AuthType.APIKEY_HEADER_ + 'AUTHORIZATION')]: {
+      in: "header",
+      name: "AUTHORIZATION",
+      type: "apiKey",
+    },
+    [formatAuthType(AuthType.HTTP_HEADER_BASIC)]: {
       in: "header",
       scheme: "Basic",
       type: "http",
@@ -85,10 +103,39 @@ it("sets digest auth security schema when available", () => {
   const endpoints = store.endpoints();
   const oai31 = endpointsToOAI31(endpoints, defaultOptions);
   expect(oai31.rootDoc.components?.securitySchemes).toEqual({
-    [AuthType.DIGEST]: {
+    [formatAuthType(AuthType.APIKEY_HEADER_ + 'AUTHORIZATION')]: {
+      in: "header",
+      name: "AUTHORIZATION",
+      type: "apiKey",
+    },
+    [formatAuthType(AuthType.HTTP_HEADER_DIGEST)]: {
       in: "header",
       scheme: "Digest",
       type: "http",
     },
   });
 });
+
+it("sets api keys from headers", () => {
+  const store = new RequestStore();
+  store.insert(apikey, { test: "string" });
+  const endpoints = store.endpoints();
+  const oai31 = endpointsToOAI31(endpoints, defaultOptions);
+  expect(oai31.rootDoc.components?.securitySchemes).toEqual({
+    [formatAuthType(AuthType.APIKEY_COOKIE_ + "SESSIONID")]: {
+      in: "cookie",
+      name: "sessionid",
+      type: "apiKey",
+    },
+    [formatAuthType(AuthType.APIKEY_HEADER_ + "COOKIE")]: {
+      in: "header",
+      name: "COOKIE",
+      type: "apiKey",
+    },
+    [formatAuthType(AuthType.APIKEY_HEADER_ + "X-API-KEY")]: {
+      in: "header",
+      name: "X-API-KEY",
+      type: "apiKey",
+    },
+  });
+});