feat: remove checkbox and add passthrough select

Author: nayounsang

packages/msw-dev-tool/src/lib/handlerStore.ts

@@ -4,13 +4,10 @@ import { FlattenHandler, Handler, HttpHandlerBehavior } from "./type";
 import {
   getHandlerResponseByBehavior,
   getRowId,
-  getTotalEnableHandlers,
   initMSWDevToolStore,
   isHttpHandler,
-  updateEnableHandlers,
+  mergeStorageData,
 } from "./util";
-import { OnChangeFn, RowSelectionState } from "@tanstack/react-table";
-import isFunction from "lodash/isFunction";
 import { setupWorker as _setupWorker } from "../utils/mswBrowser";
 import { createJSONStorage, persist } from "zustand/middleware";
 import { STORAGE_KEY } from "./const";
@@ -27,10 +24,8 @@ export interface HandlerStoreState {
    */
   restHandlers: Handler[];
   flattenHandlers: FlattenHandler[];
-  handlerRowSelection: RowSelectionState;
   setupDevToolWorker: (...handlers: Handler[]) => Promise<SetupWorker>;
   resetMSWDevTool: () => void;
-  handleHandlerRowSelectionChange: OnChangeFn<RowSelectionState>;
   getWorker: () => SetupWorker;
   getFlattenHandlerById: (id: string) => FlattenHandler | undefined;
   getHandlerBehavior: (id: string) => HttpHandlerBehavior | undefined;
@@ -73,71 +68,34 @@ export const useHandlerStore = create<HandlerStoreState>()(
         }
         const worker = setupWorker(..._handlers);
 
-        const { flattenHandlers, handlerRowSelection, unsupportedHandlers } =
+        const { flattenHandlers, unsupportedHandlers } =
           initMSWDevToolStore(worker);
+
+        const { flattenHandlers: mergedHandlers } = mergeStorageData({
+          flattenHandlers,
+        });
+
         set({
           worker,
-          flattenHandlers,
-          handlerRowSelection,
+          flattenHandlers: mergedHandlers,
           restHandlers: unsupportedHandlers,
         });
 
-        const totalEnableHandlers = getTotalEnableHandlers(
-          flattenHandlers,
-          unsupportedHandlers
-        );
-        updateEnableHandlers(worker, totalEnableHandlers);
-
         return worker;
       },
       resetMSWDevTool: () => {
         const _worker = get().getWorker();
         _worker.resetHandlers();
 
-        const {
-          worker,
-          flattenHandlers,
-          handlerRowSelection,
-          unsupportedHandlers,
-        } = initMSWDevToolStore(_worker);
+        const { worker, flattenHandlers, unsupportedHandlers } =
+          initMSWDevToolStore(_worker);
 
         set({
           worker,
           flattenHandlers,
-          handlerRowSelection,
           restHandlers: unsupportedHandlers,
         });
       },
-      handleHandlerRowSelectionChange: (updater) => {
-        const worker = get().getWorker();
-
-        if (isFunction(updater)) {
-          set(({ handlerRowSelection }) => {
-            const next = updater(handlerRowSelection);
-            const current = get().flattenHandlers.map((handler) =>
-              next[handler.id]
-                ? { ...handler, enabled: true }
-                : { ...handler, enabled: false }
-            );
-            return { handlerRowSelection: next, flattenHandlers: current };
-          });
-        } else {
-          const current = get().flattenHandlers.map((handler) =>
-            updater[handler.id]
-              ? { ...handler, enabled: true }
-              : { ...handler, enabled: false }
-          );
-          set({ handlerRowSelection: updater, flattenHandlers: current });
-        }
-
-        const flattenHandlers = get().flattenHandlers;
-        const restHandlers = get().restHandlers;
-        const totalEnableHandlers = getTotalEnableHandlers(
-          flattenHandlers,
-          restHandlers
-        );
-        updateEnableHandlers(worker, totalEnableHandlers);
-      },
       getWorker: () => {
         const worker = get().worker;
         if (!worker) throw new Error("Worker is not initialized");

packages/msw-dev-tool/src/lib/type.ts

@@ -12,36 +12,41 @@ export type HttpRequestResolverExtras<Params extends PathParams> = {
 };
 
 export type ValueUnion<T> = T[keyof T];
+
+/**
+ * Comment out rarely used status codes until the user requests them.
+ */
 export const HttpStatusCode = {
   // 4xx Client Error
   BAD_REQUEST: 400,
   UNAUTHORIZED: 401,
-  PAYMENT_REQUIRED: 402,
+  //PAYMENT_REQUIRED: 402,
   FORBIDDEN: 403,
   NOT_FOUND: 404,
   METHOD_NOT_ALLOWED: 405,
   NOT_ACCEPTABLE: 406,
   CONFLICT: 409,
-  GONE: 410,
+  //GONE: 410,
   PRECONDITION_FAILED: 412,
   PAYLOAD_TOO_LARGE: 413,
   UNSUPPORTED_MEDIA_TYPE: 415,
-  RANGE_NOT_SATISFIABLE: 416,
+  //RANGE_NOT_SATISFIABLE: 416,
   TOO_MANY_REQUESTS: 429,
 
   // 5xx Server Error
   INTERNAL_SERVER_ERROR: 500,
-  NOT_IMPLEMENTED: 501,
+  //NOT_IMPLEMENTED: 501,
   BAD_GATEWAY: 502,
   SERVICE_UNAVAILABLE: 503,
   GATEWAY_TIMEOUT: 504,
-  HTTP_VERSION_NOT_SUPPORTED: 505,
+  //HTTP_VERSION_NOT_SUPPORTED: 505,
 } as const;
 
 export type HttpStatusCode = ValueUnion<typeof HttpStatusCode>;
 
 export const CustomBehavior = {
   DEFAULT: "default",
+  DISABLE: "disable mock",
   DELAY: "delay",
   RETURN_NULL: "return null",
   NETWORK_ERROR: "network error",
@@ -65,7 +70,6 @@ export type FlattenHandler = {
   id: string;
   path: string;
   method: string;
-  enabled: boolean;
   handler: HttpHandler;
   behavior: HttpHandlerBehavior;
 };

packages/msw-dev-tool/src/lib/util.ts

@@ -10,7 +10,7 @@ import {
 import { dummyHandler } from "../const/handler";
 import { SetupWorker } from "msw/lib/browser";
 import { RowSelectionState } from "@tanstack/react-table";
-import { AsyncResponseResolverReturnType, delay, HttpResponse } from "msw";
+import { AsyncResponseResolverReturnType, delay, HttpResponse, passthrough } from "msw";
 import { STORAGE_KEY } from "./const";
 
 export const getRowId = ({ path, method }: { path: string; method: string }) =>
@@ -38,7 +38,6 @@ export const convertHandlers = (handlers: Handler[]) => {
       id: getRowId({ path, method }),
       path,
       method,
-      enabled: true,
       handler,
       behavior: HttpHandlerBehavior.DEFAULT,
     });
@@ -48,46 +47,12 @@ export const convertHandlers = (handlers: Handler[]) => {
   return { flattenHandlers, unsupportedHandlers };
 };
 
-export const getTotalEnableHandlers = (
-  flattenHandlers: FlattenHandler[],
-  restHandlers: Handler[]
-) => {
-  const checkedHttpHandlers = flattenHandlers
-    .filter((h) => h.enabled)
-    .map((h) => h.handler);
-  return [...checkedHttpHandlers, ...restHandlers];
-};
-
-/**
- * This has to do with `msw` internal workings.
- * If I spread an empty array in `resetHandlers`, it will be replaced by `initialHandler`.
- * Therefore, I proposed the `clear` method, but unfortunately it was not accepted!
- */
-export const updateEnableHandlers = (
-  worker: SetupWorker,
-  totalEnableHandlers: Handler[]
-) => {
-  if (totalEnableHandlers.length === 0) {
-    worker.resetHandlers(dummyHandler);
-    return;
-  }
-
-  worker.resetHandlers(...totalEnableHandlers);
-};
-
 export const initMSWDevToolStore = (worker: SetupWorker) => {
   const handlers = worker.listHandlers() as Handler[];
-  const { flattenHandlers: newFlattenHandlers, unsupportedHandlers } =
+  const { flattenHandlers, unsupportedHandlers } =
     convertHandlers(handlers);
-  const { flattenHandlers } = mergeStorageData({
-    flattenHandlers: newFlattenHandlers,
-  });
-  const handlerRowSelection = flattenHandlers.reduce((acc, handler) => {
-    acc[handler.id] = handler.enabled;
-    return acc;
-  }, {} as RowSelectionState);
 
-  return { worker, flattenHandlers, unsupportedHandlers, handlerRowSelection };
+  return { worker, flattenHandlers, unsupportedHandlers };
 };
 
 export const isHttpHandler = (handler: Handler): handler is HttpHandler => {
@@ -104,6 +69,10 @@ export const getHandlerResponseByBehavior = async (
     return originalResolverCallback();
   }
 
+  if (behavior === CustomBehavior.DISABLE) {
+    return passthrough();
+  }
+
   if (behavior === CustomBehavior.DELAY) {
     await delay("infinite");
     return new Response();
@@ -148,7 +117,6 @@ export const mergeStorageData = ({
     if (savedHandler) {
       return {
         ...newHandler,
-        enabled: savedHandler.enabled,
         behavior: savedHandler.behavior,
       };
     }

packages/msw-dev-tool/src/ui/DevToolContent/hook/useFlattenHandlersTable.tsx

@@ -12,35 +12,11 @@ import { BehaviorSelect } from "../HandlerTable/BehaviorSelect";
 export const useFlattenHandlersTable = () => {
   const {
     flattenHandlers,
-    handlerRowSelection,
-    handleHandlerRowSelectionChange,
   } = useHandlerStore();
 
   const columnHelper = createColumnHelper<FlattenHandler>();
   const columns: ColumnDef<FlattenHandler, any>[] = useMemo(() => {
     return [
-      columnHelper.accessor("enabled", {
-        header: ({ table }) => (
-          <input
-            type="checkbox"
-            checked={table.getIsAllRowsSelected()}
-            onChange={(e) => {
-              e.stopPropagation();
-              table.toggleAllRowsSelected(e.target.checked);
-            }}
-          />
-        ),
-        cell: ({ row }) => (
-          <input
-            type="checkbox"
-            checked={row.getIsSelected()}
-            onChange={(e) => {
-              e.stopPropagation();
-              row.toggleSelected(e.target.checked);
-            }}
-          />
-        ),
-      }),
       columnHelper.accessor("path", {
         header: "Protocol",
         cell: ({ row }) => {
@@ -76,16 +52,12 @@ export const useFlattenHandlersTable = () => {
         },
       }),
     ];
-  }, [flattenHandlers, handlerRowSelection, handleHandlerRowSelectionChange]);
+  }, [flattenHandlers]);
 
   const table = useReactTable({
     columns,
     data: flattenHandlers,
     getCoreRowModel: getCoreRowModel(),
-    state: {
-      rowSelection: handlerRowSelection,
-    },
-    onRowSelectionChange: handleHandlerRowSelectionChange,
     getRowId: (row) => row.id,
     enableRowSelection: true,
   });