redux-connected-devtools 1.0.2 → 1.0.4

package/dist/redux-connected-devtools.es.js

@@ -0,0 +1,992 @@
+import React, { useState, useMemo, useRef, useEffect } from "react";
+import styled from "styled-components";
+import { useSelector, Provider } from "react-redux";
+import classnames from "classnames";
+import { createSelector } from "reselect";
+import { connectedSelectors, LifecycleStatus, clearCompletedRequests, clearFailedRequests } from "redux-connected";
+import bytes from "bytes";
+import { FixedSizeList } from "react-window";
+import { debounce } from "shared-base";
+const Download = (props) => {
+  const { size = 24 } = props;
+  return /* @__PURE__ */ React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: `${size}px`,
+    height: `${size}px`,
+    fill: "currentColor"
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+  }));
+};
+const Close = (props) => {
+  const { size = 24 } = props;
+  return /* @__PURE__ */ React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: `${size}px`,
+    height: `${size}px`,
+    fill: "currentColor"
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+  }));
+};
+const ClearAll = (props) => {
+  const { size = 24 } = props;
+  return /* @__PURE__ */ React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: `${size}px`,
+    height: `${size}px`,
+    fill: "currentColor"
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z"
+  }));
+};
+const allIcons = {
+  close: Close,
+  clearAll: ClearAll,
+  download: Download
+};
+const Container$d = styled.div`
+    margin: 0 3px;
+    color: ${(props) => {
+  var _a;
+  return (_a = props.color) != null ? _a : "inherit";
+}};
+    cursor: pointer;
+
+    &:hover {
+        color: gold;
+    }
+`;
+function Icon(props) {
+  const { name, size = 20, color } = props;
+  const Cmp = allIcons[name];
+  return /* @__PURE__ */ React.createElement(Container$d, {
+    className: "Icon-container",
+    "data-testid": "Icon-container",
+    color,
+    onClick: props.onClick
+  }, /* @__PURE__ */ React.createElement(Cmp, {
+    size
+  }));
+}
+const Container$c = styled.div`
+    flex: 1;
+    background-color: #223;
+    z-index: 3;
+    color: #eee;
+    display: flex;
+    flex-direction: column;
+    min-width: 880px;
+    min-height: 880px;
+`;
+const Container$b = styled.div`
+    width: 190px;
+    ${(props) => props.theme.borderRight("1px solid rgba(255, 255, 255, 0.2)")}
+    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+`;
+const MenuGroup = styled.div`
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+`;
+const MenuGroupTitle = styled.div`
+    font-size: 13px;
+    padding: 5px 10px;
+    color: rgba(255, 255, 255, 0.5);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    background-color: rgba(0, 0, 0, 0.1);
+`;
+const MenuItem = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 6px 10px;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.89);
+    background-color: transparent;
+
+    &.selected {
+        color: gold;
+        background-color: rgba(255, 255, 255, 0.05);
+    }
+
+    &:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+        cursor: pointer;
+    }
+`;
+const Title = styled.div`
+    flex: 1;
+`;
+const Badge = styled.div`
+    background-color: rgba(0, 0, 80, 0.3);
+    padding: 0 4px;
+    font-size: 12px;
+    border-radius: 7px;
+    border: 1px solid #334;
+    color: cyan;
+`;
+const BadgeTotal = styled(Badge)`
+    color: #555;
+`;
+function DevMenu(props) {
+  const { groups, items, selectedId, badges, badgesTotal } = props;
+  function renderItem(item) {
+    const { title, id } = item;
+    const selected = id === selectedId;
+    const badge = badges[id];
+    const badgeTotal = badgesTotal[id];
+    return /* @__PURE__ */ React.createElement(MenuItem, {
+      key: item.id,
+      className: classnames({ selected }),
+      onClick: () => props.onClick(item)
+    }, /* @__PURE__ */ React.createElement(Title, null, title), badgeTotal > 0 && badgeTotal !== badge && /* @__PURE__ */ React.createElement(BadgeTotal, null, badgeTotal), badge > 0 && /* @__PURE__ */ React.createElement(Badge, null, badge));
+  }
+  function renderItems(groupItems) {
+    return groupItems.map((item) => renderItem(item));
+  }
+  function renderGroup(group) {
+    const groupItems = items.filter((item) => item.group === group);
+    return /* @__PURE__ */ React.createElement(MenuGroup, {
+      key: group
+    }, /* @__PURE__ */ React.createElement(MenuGroupTitle, null, group), renderItems(groupItems));
+  }
+  function renderGroups() {
+    return groups.map((group) => renderGroup(group));
+  }
+  return /* @__PURE__ */ React.createElement(Container$b, {
+    className: "DevMenu-container",
+    "data-testid": "DevMenu-container"
+  }, renderGroups());
+}
+const devRoutes = [
+  {
+    id: "lifecycleReceived",
+    title: "1. Received",
+    group: "lifecycle",
+    componentId: "LifecycleReceived"
+  },
+  {
+    id: "lifecycleInQueue",
+    title: "2. In queue",
+    group: "lifecycle",
+    componentId: "LifecycleInQueue"
+  },
+  {
+    id: "lifecyclePendingApi",
+    title: "3. Pending API",
+    group: "lifecycle",
+    componentId: "LifecyclePendingApi"
+  },
+  {
+    id: "lifecyclePostAction",
+    title: "4. Post action",
+    group: "lifecycle",
+    componentId: "LifecyclePostAction"
+  },
+  {
+    id: "lifecycleGeneralError",
+    title: "e1. General errors",
+    group: "errors",
+    componentId: "LifecycleGeneralError"
+  },
+  {
+    id: "lifecycleApiError",
+    title: "e2. API errors",
+    group: "errors",
+    componentId: "LifecycleApiError"
+  },
+  {
+    id: "lifecycleFailed",
+    title: "e3. Failed requests (after retries)",
+    group: "errors",
+    componentId: "LifecycleFailed"
+  },
+  {
+    id: "endpointStatus",
+    title: "Endpoint status",
+    group: "settings & stats",
+    componentId: "EndpointStatus"
+  },
+  {
+    id: "settingsGlobal",
+    title: "Global settings",
+    group: "settings & stats",
+    componentId: "GlobalSettings"
+  },
+  {
+    id: "settingsEndpoints",
+    title: "Endpoints configs",
+    group: "settings & stats",
+    componentId: "EndpointConfigs"
+  },
+  {
+    id: "statsGlobal",
+    title: "Global stats",
+    group: "settings & stats",
+    componentId: "GlobalStats"
+  }
+];
+const getGroups = () => {
+  const output = [];
+  devRoutes.forEach((group) => {
+    if (!output.includes(group.group)) {
+      output.push(group.group);
+    }
+  });
+  return output;
+};
+const devGroups = getGroups();
+const $requests = createSelector(
+  connectedSelectors.$requests,
+  (requests) => {
+    return requests.map((request) => {
+      var _a;
+      const { items } = request;
+      const lastPoint = (_a = items[items.length - 1]) != null ? _a : {};
+      const journeyWithDelta = items.map((point, index) => {
+        var _a2;
+        const nextPoint = (_a2 = items[index + 1]) != null ? _a2 : point;
+        const delta = nextPoint.timestamp - point.timestamp;
+        return {
+          ...point,
+          delta
+        };
+      });
+      return {
+        ...request,
+        items: journeyWithDelta,
+        lastPointTimestamp: lastPoint.timestamp,
+        lastPointStatus: lastPoint.status
+      };
+    }).sort((a, b) => {
+      if (a.lastPointTimestamp === b.lastPointTimestamp) {
+        return 0;
+      }
+      return a.lastPointTimestamp > b.lastPointTimestamp ? -1 : 1;
+    });
+  }
+);
+const $requestsReceived = createSelector($requests, (requests) => {
+  return requests.filter((request) => {
+    const { items } = request;
+    const lastPoint = items[items.length - 1];
+    return lastPoint && lastPoint.status === LifecycleStatus.RECEIVED;
+  });
+});
+const $requestsReceivedPast = createSelector($requests, (requests) => {
+  return requests.filter((request) => {
+    const { items } = request;
+    return items.find((point) => point.status === LifecycleStatus.RECEIVED);
+  });
+});
+const $requestsInQueue = createSelector($requests, (requests) => {
+  return requests.filter((request) => {
+    const { items } = request;
+    const lastPoint = items[items.length - 1];
+    return lastPoint && lastPoint.status === LifecycleStatus.IN_QUEUE;
+  });
+});
+const $requestsInQueuePast = createSelector($requests, (requests) => {
+  return requests.filter((request) => {
+    const { items } = request;
+    return items.find((point) => point.status === LifecycleStatus.IN_QUEUE);
+  });
+});
+const $requestsPendingApi = createSelector($requests, (requests) => {
+  return requests.filter((request) => {
+    const { items } = request;
+    const lastPoint = items[items.length - 1];
+    return lastPoint && lastPoint.status === LifecycleStatus.PENDING_API_RESPONSE;
+  });
+});
+const $requestsPendingApiPast = createSelector($requests, (requests) => {
+  return requests.filter((request) => {
+    const { items } = request;
+    return items.find(
+      (point) => point.status === LifecycleStatus.PENDING_API_RESPONSE
+    );
+  });
+});
+const $requestsPostAction = createSelector($requests, (requests) => {
+  return requests.filter((request) => {
+    const { items } = request;
+    const lastPoint = items[items.length - 1];
+    return lastPoint && lastPoint.status === LifecycleStatus.POST_ACTION;
+  });
+});
+const $requestsPostActionPast = createSelector($requests, (requests) => {
+  return requests.filter((request) => {
+    const { items } = request;
+    return items.find(
+      (point) => point.status === LifecycleStatus.POST_ACTION
+    );
+  });
+});
+const $requestsGeneralError = createSelector($requests, (requests) => {
+  return requests.filter((request) => {
+    const { items } = request;
+    const lastPoint = items[items.length - 1];
+    return lastPoint && lastPoint.status === LifecycleStatus.GENERAL_ERROR;
+  });
+});
+const $requestsGeneralErrorPast = createSelector(
+  $requests,
+  (requests) => {
+    return requests.filter((request) => {
+      const { items } = request;
+      return items.find(
+        (point) => point.status === LifecycleStatus.GENERAL_ERROR
+      );
+    });
+  }
+);
+const $requestsApiError = createSelector($requests, (requests) => {
+  return requests.filter((request) => {
+    const { items } = request;
+    const lastPoint = items[items.length - 1];
+    return lastPoint && lastPoint.status === LifecycleStatus.API_ERROR;
+  });
+});
+const $requestsFailed = createSelector($requests, (requests) => {
+  return requests.filter((request) => {
+    const { items } = request;
+    return items.find((point) => point.status === LifecycleStatus.FAILED);
+  });
+});
+const $requestsApiErrorPast = createSelector($requests, (requests) => {
+  return requests.filter((request) => {
+    const { items } = request;
+    return items.find(
+      (point) => point.status === LifecycleStatus.API_ERROR
+    );
+  });
+});
+const $menuBadges = createSelector(
+  $requestsReceived,
+  $requestsInQueue,
+  $requestsGeneralError,
+  $requestsPendingApi,
+  $requestsApiError,
+  $requestsFailed,
+  $requestsPostAction,
+  (requestsReceived, requestsInQueue, requestsGeneralError, requestsPendingApi, requestsApiError, requestsFailed, requestsPostAction) => {
+    return {
+      lifecycleReceived: requestsReceived.length,
+      lifecycleInQueue: requestsInQueue.length,
+      lifecycleGeneralError: requestsGeneralError.length,
+      lifecyclePendingApi: requestsPendingApi.length,
+      lifecycleApiError: requestsApiError.length,
+      lifecycleFailed: requestsFailed.length,
+      lifecyclePostAction: requestsPostAction.length
+    };
+  }
+);
+const $menuBadgesTotal = createSelector(
+  $requestsReceivedPast,
+  $requestsInQueuePast,
+  $requestsGeneralErrorPast,
+  $requestsPendingApiPast,
+  $requestsApiErrorPast,
+  $requestsFailed,
+  $requestsPostActionPast,
+  (requestsReceived, requestsInQueue, requestsGeneralError, requestsPendingApi, requestsApiError, requestsFailed, requestsPostAction) => {
+    return {
+      lifecycleReceived: requestsReceived.length,
+      lifecycleInQueue: requestsInQueue.length,
+      lifecycleGeneralError: requestsGeneralError.length,
+      lifecyclePendingApi: requestsPendingApi.length,
+      lifecycleApiError: requestsApiError.length,
+      lifecycleFailed: requestsFailed.length,
+      lifecyclePostAction: requestsPostAction.length
+    };
+  }
+);
+function DevMenuContainer(props) {
+  const badges = useSelector($menuBadges);
+  const badgesTotal = useSelector($menuBadgesTotal);
+  return /* @__PURE__ */ React.createElement(DevMenu, {
+    groups: devGroups,
+    items: devRoutes,
+    badges,
+    badgesTotal,
+    selectedId: props.selectedId,
+    onClick: props.onClick
+  });
+}
+const Container$a = styled.div`
+    flex: 1;
+    color: #eee;
+    background-color: #232332;
+    display: flex;
+    flex-direction: row;
+`;
+const Content = styled.div`
+    flex: 1;
+    background-color: rgba(0, 0, 0, 0.15);
+    display: flex;
+    flex-direction: column;
+`;
+const Actions = styled.div`
+    position: absolute;
+    bottom: 5px;
+    ${(props) => props.theme.left("10px")}
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+`;
+const Container$9 = styled.div`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+`;
+const Container$8 = styled.div`
+    flex: 1;
+    border-top: 1px solid #333;
+    max-height: 380px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+        background: #333;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+        background: #555;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+        background: #666;
+    }
+`;
+const timestamp = () => new Date().getTime();
+let startOfTime = timestamp();
+const resetStartOfTime = () => {
+  startOfTime = timestamp();
+};
+const getMinutes = () => {
+  return new Date().getMinutes();
+};
+const Container$7 = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    font-family: monospace;
+    color: #99a;
+`;
+const Full = styled.div`
+    font-size: 24px;
+`;
+const Fraction = styled.div`
+    font-size: 12px;
+`;
+function Time(props) {
+  const { value } = props;
+  const relativeValue = (value - startOfTime) / 1e3;
+  const full = Math.floor(relativeValue);
+  const fraction = (relativeValue - full).toFixed(3).split(".").pop();
+  return /* @__PURE__ */ React.createElement(Container$7, {
+    className: "Time-container",
+    "data-testid": "Time-container"
+  }, /* @__PURE__ */ React.createElement(Full, null, full), /* @__PURE__ */ React.createElement(Fraction, null, fraction));
+}
+const Container$6 = styled.div`
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px 20px;
+
+    &:nth-child(2n-1) {
+        background-color: rgba(0, 0, 0, 0.2);
+    }
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.3);
+        cursor: pointer;
+    }
+`;
+const Status = styled.div`
+    color: #aaa;
+`;
+const DataIcon = styled.div`
+    background-color: #000;
+    padding: 3px 7px;
+    font-size: 13px;
+    font-weight: bold;
+    color: purple;
+    border-radius: 5px;
+    ${(props) => props.theme.marginLeft("10px")}
+`;
+const Delta = styled.div`
+    font-size: 13px;
+    width: 60px;
+    font-weight: bold;
+    color: olive;
+    ${(props) => props.theme.marginRight("10px")}
+    text-align: center;
+    font-family: monospace;
+`;
+const Flex = styled.div`
+    flex: 1;
+`;
+const statusMap = {
+  [LifecycleStatus.RECEIVED]: "Received",
+  [LifecycleStatus.POST_ACTION_OPTIMISTIC]: "Post action (optimistic)",
+  [LifecycleStatus.IN_QUEUE]: "In queue",
+  [LifecycleStatus.GENERAL_ERROR]: "General error",
+  [LifecycleStatus.PENDING_API_RESPONSE]: "Pending API",
+  [LifecycleStatus.API_ERROR]: "API error",
+  [LifecycleStatus.POST_ACTION]: "Post action",
+  [LifecycleStatus.FAILED]: "Failed"
+};
+function JourneyRow(props) {
+  const { point } = props;
+  const { status, timestamp: timestamp2, data, delta = "" } = point;
+  function printPoint() {
+    console.log(data);
+  }
+  function renderDataIcon() {
+    if (!data) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(DataIcon, null, "D");
+  }
+  function renderDelta() {
+    if (!delta) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(Delta, null, "+", delta.toLocaleString());
+  }
+  return /* @__PURE__ */ React.createElement(Container$6, {
+    className: "JourneyRow-container",
+    "data-testid": "JourneyRow-container",
+    onClick: printPoint
+  }, /* @__PURE__ */ React.createElement(Status, null, statusMap[status]), renderDataIcon(), /* @__PURE__ */ React.createElement(Flex, null), renderDelta(), /* @__PURE__ */ React.createElement(Time, {
+    value: timestamp2
+  }));
+}
+function RequestJourney(props) {
+  const { item } = props;
+  function renderItem(point, index) {
+    return /* @__PURE__ */ React.createElement(JourneyRow, {
+      key: index,
+      point
+    });
+  }
+  function renderItems() {
+    return item.items.map(
+      (point, index) => renderItem(point, index)
+    );
+  }
+  return /* @__PURE__ */ React.createElement(Container$8, {
+    className: "RequestJourney-container",
+    "data-testid": "RequestJourney-container"
+  }, renderItems());
+}
+const Container$5 = styled.div`
+    flex: 1;
+    padding: 20px;
+`;
+const Table = styled.table``;
+const Tr = styled.tr``;
+const Td = styled.td`
+    color: goldenrod;
+
+    &:first-child {
+        color: #778;
+        text-align: right;
+        ${(props) => props.theme.paddingRight("10px")}
+    }
+`;
+const Container$4 = styled.div`
+    flex: 1;
+    max-height: 850px;
+    overflow: auto;
+    padding: 0 25px;
+    max-width: ${(props) => props.width ? props.width + "px" : "680px"};
+    color: #ccc;
+    line-height: 26px;
+
+    &::-webkit-scrollbar {
+        width: 8px;
+        height: 7px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+        background: #333;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+        background: #555;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+        background: #666;
+    }
+`;
+function JsonViewer(props) {
+  const { json, width } = props;
+  return /* @__PURE__ */ React.createElement(Container$4, {
+    className: "JsonViewer-container",
+    "data-testid": "JsonViewer-container",
+    width
+  }, /* @__PURE__ */ React.createElement("pre", null, JSON.stringify(json, null, 4)));
+}
+function RequestDetails(props) {
+  const { item } = props;
+  return /* @__PURE__ */ React.createElement(Container$5, {
+    className: "RequestDetails-container",
+    "data-testid": "RequestDetails-container"
+  }, /* @__PURE__ */ React.createElement(Table, null, /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement(Tr, null, /* @__PURE__ */ React.createElement(Td, null, "sequence"), /* @__PURE__ */ React.createElement(Td, null, item.sequence)), /* @__PURE__ */ React.createElement(Tr, null, /* @__PURE__ */ React.createElement(Td, null, "id"), /* @__PURE__ */ React.createElement(Td, null, item.shortId)), /* @__PURE__ */ React.createElement(Tr, null, /* @__PURE__ */ React.createElement(Td, null, "apiVerb"), /* @__PURE__ */ React.createElement(Td, null, item.argsApiVerb)), /* @__PURE__ */ React.createElement(Tr, null, /* @__PURE__ */ React.createElement(Td, null, "connection"), /* @__PURE__ */ React.createElement(Td, null, item.argsConnectionType)), /* @__PURE__ */ React.createElement(Tr, null, /* @__PURE__ */ React.createElement(Td, null, "duration"), /* @__PURE__ */ React.createElement(Td, null, item.apiDuration)), /* @__PURE__ */ React.createElement(Tr, null, /* @__PURE__ */ React.createElement(Td, null, "nodeName"), /* @__PURE__ */ React.createElement(Td, null, item.argsNodeName)), /* @__PURE__ */ React.createElement(Tr, null, /* @__PURE__ */ React.createElement(Td, null, "responseSize"), /* @__PURE__ */ React.createElement(Td, null, item.apiResponseSize && bytes(item.apiResponseSize))))), /* @__PURE__ */ React.createElement(JsonViewer, {
+    width: 290,
+    json: item.originalAction
+  }));
+}
+function DevInspector(props) {
+  const { item } = props;
+  if (!item) {
+    return /* @__PURE__ */ React.createElement(Container$9, {
+      className: "DevInspector-container",
+      "data-testid": "DevInspector-container"
+    });
+  }
+  return /* @__PURE__ */ React.createElement(Container$9, {
+    className: "DevInspector-container",
+    "data-testid": "DevInspector-container"
+  }, /* @__PURE__ */ React.createElement(RequestDetails, {
+    item
+  }), /* @__PURE__ */ React.createElement(RequestJourney, {
+    item
+  }));
+}
+const Container$3 = styled.div`
+    flex: 1;
+
+    .list {
+        &::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        /* Track */
+        &::-webkit-scrollbar-track {
+            background: #333;
+        }
+
+        /* Handle */
+        &::-webkit-scrollbar-thumb {
+            background: #555;
+        }
+
+        /* Handle on hover */
+        &::-webkit-scrollbar-thumb:hover {
+            background: #666;
+        }
+    }
+`;
+const Empty = styled.div`
+    color: #456;
+    margin: 30px;
+    font-size: 17px;
+    text-align: center;
+    text-shadow: 1px 3px 3px rgba(0, 0, 0, 0.2);
+`;
+function DevList(props) {
+  const { row: Cmp, items, selectedRow } = props;
+  const Item = (rowInfo) => {
+    const { index, style } = rowInfo;
+    const item = items[index];
+    const className = classnames({ selected: item.id === (selectedRow == null ? void 0 : selectedRow.id) });
+    return /* @__PURE__ */ React.createElement(Cmp, {
+      onClick: props.onClick,
+      className,
+      index,
+      style,
+      item
+    });
+  };
+  function renderEmpty() {
+    return /* @__PURE__ */ React.createElement(Empty, null, "Empty list");
+  }
+  function renderList() {
+    if (items.length === 0) {
+      return renderEmpty();
+    }
+    return /* @__PURE__ */ React.createElement(FixedSizeList, {
+      height: 850,
+      itemCount: items.length,
+      itemSize: 68,
+      width: 350,
+      className: "list"
+    }, Item);
+  }
+  return /* @__PURE__ */ React.createElement(Container$3, {
+    className: "DevList-container",
+    "data-testid": "DevList-container"
+  }, renderList());
+}
+const Container$2 = styled.div`
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px;
+    max-width: 90%;
+    background-color: ${(props) => props.index % 2 === 1 ? "rgba(0, 0, 0, 0.2)" : "transparent"};
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.7);
+        cursor: pointer;
+    }
+`;
+const Col = styled.div`
+    &:first-child {
+        flex: 1;
+    }
+`;
+const Id = styled.div`
+    color: goldenrod;
+    font-size: 16px;
+`;
+const Type = styled.div`
+    color: brown;
+`;
+function RequestRow(props) {
+  var _a;
+  const { index, style, item, className } = props;
+  const { sequence, createdTS } = item;
+  return /* @__PURE__ */ React.createElement(Container$2, {
+    className: `DevListRow-container ${className}`,
+    "data-testid": "DevListRow-container",
+    style,
+    index,
+    onClick: () => props.onClick(item)
+  }, /* @__PURE__ */ React.createElement(Col, null, /* @__PURE__ */ React.createElement(Id, null, sequence), /* @__PURE__ */ React.createElement(Type, null, (_a = item.originalAction) == null ? void 0 : _a.type)), /* @__PURE__ */ React.createElement(Col, null, /* @__PURE__ */ React.createElement(Time, {
+    value: createdTS
+  })));
+}
+const Container$1 = styled.div`
+    flex: 1;
+    display: flex;
+`;
+function Lifecycle(props) {
+  const { requests } = props;
+  const [item, setItem] = useState();
+  function onClick(newItem) {
+    setItem(newItem);
+  }
+  return /* @__PURE__ */ React.createElement(Container$1, {
+    className: "Lifecycle-container",
+    "data-testid": "Lifecycle-container"
+  }, /* @__PURE__ */ React.createElement(DevList, {
+    items: requests,
+    row: RequestRow,
+    onClick,
+    selectedRow: item
+  }), /* @__PURE__ */ React.createElement(DevInspector, {
+    item
+  }));
+}
+function LifecycleReceivedContainer() {
+  const requests = useSelector($requestsReceivedPast);
+  return /* @__PURE__ */ React.createElement(Lifecycle, {
+    requests
+  });
+}
+function GlobalStatsContainer() {
+  const json = useSelector(connectedSelectors.$apiGlobalStatsRaw);
+  return /* @__PURE__ */ React.createElement(JsonViewer, {
+    json
+  });
+}
+function EndpointConfigsContainer() {
+  const json = useSelector(connectedSelectors.$endpointsConfigRaw);
+  return /* @__PURE__ */ React.createElement(JsonViewer, {
+    json
+  });
+}
+function GlobalSettingsContainer() {
+  const json = useSelector(connectedSelectors.$apiGlobalSettingsRaw);
+  return /* @__PURE__ */ React.createElement(JsonViewer, {
+    json
+  });
+}
+function EndpointStatusContainer() {
+  const json = useSelector(connectedSelectors.$endpointsStateRaw);
+  return /* @__PURE__ */ React.createElement(JsonViewer, {
+    json
+  });
+}
+function LifecycleInQueueContainer() {
+  const requests = useSelector($requestsInQueuePast);
+  return /* @__PURE__ */ React.createElement(Lifecycle, {
+    requests
+  });
+}
+function LifecycleGeneralErrorContainer() {
+  const requests = useSelector($requestsGeneralErrorPast);
+  return /* @__PURE__ */ React.createElement(Lifecycle, {
+    requests
+  });
+}
+function LifecyclePendingApiContainer() {
+  const requests = useSelector($requestsPendingApiPast);
+  return /* @__PURE__ */ React.createElement(Lifecycle, {
+    requests
+  });
+}
+function LifecycleApiErrorContainer() {
+  const requests = useSelector($requestsApiErrorPast);
+  return /* @__PURE__ */ React.createElement(Lifecycle, {
+    requests
+  });
+}
+function LifecyclePostActionContainer() {
+  const requests = useSelector($requestsPostActionPast);
+  return /* @__PURE__ */ React.createElement(Lifecycle, {
+    requests
+  });
+}
+function LifecycleFailedContainer() {
+  const requests = useSelector($requestsFailed);
+  return /* @__PURE__ */ React.createElement(Lifecycle, {
+    requests
+  });
+}
+const devComponents = {
+  LifecycleReceived: LifecycleReceivedContainer,
+  LifecycleInQueue: LifecycleInQueueContainer,
+  LifecycleGeneralError: LifecycleGeneralErrorContainer,
+  LifecyclePendingApi: LifecyclePendingApiContainer,
+  LifecycleApiError: LifecycleApiErrorContainer,
+  LifecycleFailed: LifecycleFailedContainer,
+  LifecyclePostAction: LifecyclePostActionContainer,
+  GlobalSettings: GlobalSettingsContainer,
+  GlobalStats: GlobalStatsContainer,
+  EndpointConfigs: EndpointConfigsContainer,
+  EndpointStatus: EndpointStatusContainer
+};
+function DevPanel(props) {
+  const [route, setRoute] = useState(devRoutes[0]);
+  function renderRoute() {
+    const Cmp = devComponents[route.componentId];
+    return /* @__PURE__ */ React.createElement(Cmp, {
+      key: route.id
+    });
+  }
+  return /* @__PURE__ */ React.createElement(Container$a, {
+    className: "DevPanel-container",
+    "data-testid": "DevPanel-container"
+  }, /* @__PURE__ */ React.createElement(DevMenuContainer, {
+    selectedId: route.id,
+    onClick: (item) => setRoute(item)
+  }), /* @__PURE__ */ React.createElement(Actions, null, props.children), /* @__PURE__ */ React.createElement(Content, null, renderRoute()));
+}
+function DevPanelContainer(props) {
+  return /* @__PURE__ */ React.createElement(DevPanel, null, props.children);
+}
+const Container = styled.div`
+    color: olive;
+    margin: 0 5px;
+`;
+function Size(props) {
+  const { size = 0 } = props;
+  const sizeText = useMemo(() => bytes(size), [size]);
+  return /* @__PURE__ */ React.createElement(Container, {
+    className: "Size-container",
+    "data-testid": "Size-container"
+  }, !size ? "-" : sizeText);
+}
+function DevtoolsApp(props) {
+  const { connectedStore, storeSizeInBytes, isDarkMode } = props;
+  const ref = useRef(null);
+  const className = classnames("DevtoolsApp-container", {
+    darkMode: isDarkMode
+  });
+  return /* @__PURE__ */ React.createElement(Container$c, {
+    ref,
+    className,
+    "data-testid": "DevtoolsApp-container"
+  }, /* @__PURE__ */ React.createElement(Provider, {
+    store: connectedStore
+  }, /* @__PURE__ */ React.createElement(DevPanelContainer, null, /* @__PURE__ */ React.createElement(Size, {
+    size: storeSizeInBytes
+  }), /* @__PURE__ */ React.createElement(Icon, {
+    name: "clearAll",
+    onClick: () => props.clearRequests()
+  }), /* @__PURE__ */ React.createElement(Icon, {
+    name: "download",
+    onClick: props.downloadState
+  }))));
+}
+const download = (filename, json) => {
+  const data = JSON.stringify(json, null, 4);
+  const blob = new Blob([data], { type: "text/csv" });
+  if (window.navigator.msSaveOrOpenBlob) {
+    window.navigator.msSaveBlob(blob, filename);
+  } else {
+    const elem = window.document.createElement("a");
+    elem.href = window.URL.createObjectURL(blob);
+    elem.download = filename;
+    document.body.appendChild(elem);
+    elem.click();
+    document.body.removeChild(elem);
+  }
+};
+const useStoreSize = (store) => {
+  const [storeSize, setStoreSize] = useState();
+  const calculateSize = debounce(() => {
+    const state = store.getState();
+    const size = JSON.stringify(state).length;
+    setStoreSize(size);
+  }, 500);
+  useEffect(() => {
+    store.subscribe(() => {
+      calculateSize();
+    });
+  }, [store]);
+  return storeSize;
+};
+function DevtoolsAppContainer(props) {
+  const { connectedStore, isDarkMode } = props;
+  const storeSizeInBytes = useStoreSize(connectedStore);
+  function clearRequests() {
+    connectedStore.dispatch(clearCompletedRequests());
+    connectedStore.dispatch(clearFailedRequests());
+    resetStartOfTime();
+  }
+  function downloadState() {
+    const state = connectedStore.getState();
+    const minutes = getMinutes();
+    const filename = `state_${minutes}.json`;
+    download(filename, state);
+  }
+  return /* @__PURE__ */ React.createElement(DevtoolsApp, {
+    connectedStore,
+    clearRequests,
+    downloadState,
+    storeSizeInBytes,
+    isDarkMode
+  });
+}
+export { DevtoolsAppContainer as DevtoolsApp };
+//# sourceMappingURL=redux-connected-devtools.es.js.map