Feat/plugin basic UI

.gitignore

@@ -10,6 +10,7 @@ videos
 coverage
 dist
 dump
+dump_har
 screenshots
 
 # next.js

README.md

@@ -1,6 +1,6 @@
 # Cypress Debugger
 
-Debug cypress tests in CI - use rrweb to capture the execution, and cypress hooks the capture cypress commands.
+Debug cypress tests in CI - use rrweb to capture the execution, cypress hooks to capture cypress commands, and HttpArchive Generator to record the network.
 
 ## Development
 
@@ -16,7 +16,54 @@ Runs a few tests
 ```sh
 cd apps/web
 npm install
-npx run cypress
+npx cypress run
+```
+
+You will see new `json` files created in `apps/web/dump`. Each file contains fields: `cy`, `rr`, and `har`. 
+
+- `cy` - data from cypress events
+- `rr` - data from the [rrweb](https://www.npmjs.com/package/rrweb)
+- `har` - data from the [HttpArchive Generator]((https://github.com/NeuraLegion/cypress-har-generator))
+
+Extract those fields and replace the contents of `cy.json`, `rr.json`, and `har.json` respectively in `apps/web/data`.
+
+A basic UI that consumes the data from `apps/web/data` is available at http://localhost:3000/
+
+### Notes
+
+A `har.json` file could be visualized with [this tool](https://toolbox.googleapps.com/apps/har_analyzer/)
+
+The [HAR generator](https://github.com/NeuraLegion/cypress-har-generator), currently, only supports Chrome family browsers. Please refer to [this](https://github.com/NeuraLegion/cypress-har-generator#generating-a-har-file) section in order to run cypress for other browsers.
+
+
+## Usage
+
+- call the `install` function inside the `setupNodeEvents` in the cypress config file:
+```typescript
+const { defineConfig } = require("cypress");
+const { install }  = require("@currents/cypress-debugger");
+
+module.exports = defineConfig({
+  e2e: {
+    ...
+    setupNodeEvents(on, config) {
+      install(on, config);
+      return config;
+    },
+  },
+  ...
+});
+```
+
+- call the `support` function in the `cypress/support/e2e` file:
+```typescript
+import { support } from "@currents/cypress-debugger";
+import "./commands";
+
+support();
+beforeEach(() => {
+  cy.visit("/");
+});
+
 ```
 
-You will see new `json` files created in `apps/web/dump`. Each file contains fields: `cy` and `rr`. Extract those field and replace the contents of https://codesandbox.io/s/rr-cy-alt-h01293?file=/src/App.js

apps/web/components/Collapsible/Collapsible.module.scss

@@ -0,0 +1,51 @@
+.collapsible {
+
+    &_button {
+        background-color: darkgray;
+        color: white;
+        cursor: pointer;
+        padding: 7px;
+        width: 100%;
+        border: none;
+        text-align: left;
+        outline: none;
+        font-size: 12px;
+
+        &__active,
+        &:hover {
+            background-color: lightgray;
+        }
+    }
+
+    &_button-content {
+        display: flex;
+    }
+
+    &_chevron {
+        min-width: 12px;
+        padding-right: 2px;
+        position: relative;
+
+        &__active {
+            img {
+                rotate: 90deg;
+            }
+        }
+    }
+
+    &_title {
+        width: 100%;
+    }
+
+    &_content {
+        width: 100%;
+        padding: 0;
+        display: none;
+        overflow: auto;
+        background-color: #f1f1f1;
+
+        &__active {
+            display: block;
+        }
+    }
+}

apps/web/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,66 @@
+import Image from "next/image";
+import { useState } from "react";
+import styles from "./Collapsible.module.scss";
+
+export type CollapsibleElement = {
+  title: JSX.Element | string;
+  content: JSX.Element;
+};
+
+export function Collapsible({ elements }: { elements: CollapsibleElement[] }) {
+  const [opened, setOpened] = useState<number[]>([]);
+
+  const handleClick = (i: number) => {
+    setOpened((o) => {
+      if (o.includes(i)) {
+        const copy = o.slice();
+        copy.splice(
+          o.findIndex((e) => e === i),
+          1
+        );
+        return copy;
+      }
+
+      return [...o, i];
+    });
+  };
+
+  return (
+    <ul className={styles.collapsible}>
+      {elements.map((e, i) => (
+        <li key={i} className={styles["collapsible_element"]}>
+          <button
+            type="button"
+            className={styles["collapsible_button"]}
+            onClick={() => handleClick(i)}
+          >
+            <div className={styles["collapsible_button-content"]}>
+              <div
+                className={`${styles["collapsible_chevron"]} ${
+                  opened.includes(i)
+                    ? styles["collapsible_chevron__active"]
+                    : ""
+                }`}
+              >
+                <Image
+                  src="/chevron.svg"
+                  alt="chevron"
+                  width={12}
+                  height={12}
+                />
+              </div>
+             <div className={styles["collapsible_title"]}>{e.title}</div>
+            </div>
+          </button>
+          <div
+            className={`${styles["collapsible_content"]} ${
+              opened.includes(i) ? styles["collapsible_content__active"] : ""
+            }`}
+          >
+            {e.content}
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}

apps/web/components/CySteps/CyStepItem.module.scss

@@ -0,0 +1,37 @@
+.step {
+    cursor: pointer;
+    padding-left: 5px 0;
+
+    &__active {
+        background-color: darkgray;
+    }
+
+    &:hover {
+        background-color: lightgrey;
+    }
+
+    &_state {
+        font-size: 12px;
+    }
+
+    &_name {
+        font-weight: bold;
+    }
+
+    &_message {
+        font-size: 10px;
+    }
+
+    &_actions {
+        display: flex;
+    }
+
+    &_button {
+        cursor: pointer;
+    }
+
+    &_button:disabled {
+        cursor: not-allowed;
+    }
+
+}

apps/web/components/CySteps/CyStepItem.tsx

@@ -0,0 +1,67 @@
+import { MouseEventHandler } from "react";
+import { CypressStep } from "../../types";
+import styles from "./CyStepItem.module.scss";
+
+export function CyStepItem({
+  step,
+  active,
+  onClick,
+  onBefore,
+  onAfter,
+}: {
+  step: CypressStep;
+  active: boolean;
+  onClick: () => void;
+  onBefore: (e: any) => void;
+  onAfter: (e: any) => void;
+}) {
+  const payload = step.payload;
+
+  return (
+    <li
+      className={`${styles.step} ${active ? styles["step__active"] : ""}`}
+      onClick={onClick}
+    >
+      <span className={styles["step_state"]}>[{payload.state}]&nbsp;</span>
+      {payload.type === "child" && <span> - </span>}
+      <span className={styles["step_name"]}>{payload.name}</span>
+      <div className={styles["step_message"]}>{payload.message}</div>
+      <div className={styles["step_actions"]}>
+        {!!step.meta.before.rrId && (
+          <CyStepItemButton onClick={onBefore} disabled={!active}>
+            Before
+          </CyStepItemButton>
+        )}
+        {!!step.meta.after.rrId && (
+          <>
+            &nbsp;
+            <CyStepItemButton onClick={onAfter} disabled={!active}>
+              After
+            </CyStepItemButton>
+          </>
+        )}
+      </div>
+    </li>
+  );
+}
+
+const CyStepItemButton = ({
+  children,
+  onClick,
+  disabled,
+}: {
+  children: string | JSX.Element;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+}) => {
+  return (
+    <button
+      type="button"
+      className={styles["step_button"]}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+};

apps/web/components/CySteps/CySteps.module.scss

@@ -0,0 +1,4 @@
+.steps {
+    height: 700px;
+    overflow: auto;
+}

apps/web/components/CySteps/CySteps.tsx

@@ -0,0 +1,34 @@
+import { CypressStep } from "../../types";
+import { CyStepItem } from "./CyStepItem";
+import styles from "./CySteps.module.scss";
+
+export function CySteps({
+  steps,
+  activeStep,
+  setActiveStep,
+  onBefore,
+  onAfter,
+}: {
+  steps: CypressStep[];
+  activeStep: number;
+  setActiveStep: (i: number) => void;
+  onBefore: (e: any) => void;
+  onAfter: (e: any) => void;
+}) {
+  if (!steps.length) return null;
+
+  return (
+    <ul className={styles.steps}>
+      {steps.map((s, i) => (
+        <CyStepItem
+          key={s.id}
+          step={s}
+          active={activeStep === i}
+          onClick={() => setActiveStep(i)}
+          onBefore={onBefore}
+          onAfter={onAfter}
+        />
+      ))}
+    </ul>
+  );
+}

apps/web/components/Layout/Layout.module.scss

@@ -0,0 +1,32 @@
+.layout {
+    min-width: 1000px;
+    overflow: auto;
+
+    &_top-block {
+        height: 50px;
+    }
+
+    &_main-block {
+        display: flex;
+    }
+
+    &_content,
+    &_left-sidebar,
+    &_right-sidebar {
+        border: 1px solid #ccc;
+        display: flex;
+    }
+
+    &_left-sidebar {
+        max-width: 250px;
+    }
+
+    &_right-sidebar {
+        max-width: 250px;
+    }
+
+    &_content {
+        display: flex;
+        flex-grow: 1;
+    }
+}