From a1de04e8a11fc939640bf142a514c909488553df Mon Sep 17 00:00:00 2001
From: Charles Francoise <charles.francoise@payfit.com>
Date: Thu, 10 Feb 2022 16:50:29 +0100
Subject: [PATCH 01/13] add logo SVG

---
 src/icons/clear.svg          | 6 +++++-
 src/icons/index.ts           | 1 +
 src/icons/level-crossing.svg | 9 +++++++++
 src/icons/plus.svg           | 5 ++++-
 4 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 src/icons/level-crossing.svg

diff --git a/src/icons/clear.svg b/src/icons/clear.svg
index 5f1267d7..84aaef85 100644
--- a/src/icons/clear.svg
+++ b/src/icons/clear.svg
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><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 12 19 6.41z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+  <path d="M0 0h24v24H0V0z" fill="none" />
+  <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 12 19 6.41z" />
+</svg>
\ No newline at end of file
diff --git a/src/icons/index.ts b/src/icons/index.ts
index 7ce53b99..75e4c55c 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -1,2 +1,3 @@
 export { default as Plus } from './plus.svg'
 export { default as Clear } from './clear.svg'
+export { default as LevelCrossing } from './level-crossing.svg'
diff --git a/src/icons/level-crossing.svg b/src/icons/level-crossing.svg
new file mode 100644
index 00000000..6cc7c4a1
--- /dev/null
+++ b/src/icons/level-crossing.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path
+      d="m412.55 536.01 190.78-88.961 198.67 92.641-29.285 13.656-167.66-78.184-165.91 77.367 1.5781-3.3828zm-51.758-24.137-31.105-14.504 161.5-75.305-210.11-97.977-0.0625 0.13672-47.191-75.105 87.746-12.109 0.089844-0.19531 283.4 132.15 282.61-131.78-0.007813-0.011719 0.027344 0.003906 0.76953-0.35938 0.23047 0.49609 86.84 11.984-46.637 74.227 0.24219 0.52344-210.2 98.02 167.66 78.184-32.824 15.305-198.68-92.641 239-111.45-18.492-39.648-272.27 126.96-272.27-126.96-18.488 39.648 239 111.45z" />
+    <path
+      d="m602.77 666.12-373.41-174.12-25.355 54.379 327.78 152.85-327.78 152.84 25.355 54.379 373.41-174.12 379.81 177.11 25.359-54.379-334.18-155.83 327.78-152.85-25.355-54.379zm389.95-221.62-0.007813-0.015625 0.035157 0.003907 1.0547-0.49219 0.31641 0.67969 119.1 16.438-63.961 101.8 0.33203 0.71484-288.28 134.43 288.28 134.43-0.23438 0.50391 64.387 102.47-119.88 16.543-0.054687 0.11328-0.17578-0.082032-0.39062 0.054688 0.089843-0.19531-388.19-181.02-388.13 180.99 0.10547 0.22266-0.44922-0.0625-0.19141 0.089844-0.058594-0.125-119.8-16.531 64.34-102.41-0.26562-0.57031 288.29-134.43-288.16-134.37-0.085938 0.1875-64.719-103 120.34-16.609 0.12891-0.26953 388.66 181.24z" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/icons/plus.svg b/src/icons/plus.svg
index 93b8cea7..6a7811e8 100644
--- a/src/icons/plus.svg
+++ b/src/icons/plus.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+  <path d="M0 0h24v24H0V0z" fill="none" />
+  <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+</svg>
\ No newline at end of file

From 24a2de82a910c1b7e2295fd51f59ecb26f12b7ac Mon Sep 17 00:00:00 2001
From: Charles Francoise <charles.francoise@payfit.com>
Date: Thu, 10 Feb 2022 17:36:11 +0100
Subject: [PATCH 02/13] add welcome interface

---
 src/panel/Main.tsx            |  6 ++++--
 src/panel/Sidebar.tsx         |  2 +-
 src/panel/Welcome.tsx         | 24 ++++++++++++++++++++++++
 src/panel/components/List.tsx |  2 +-
 4 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 src/panel/Welcome.tsx

diff --git a/src/panel/Main.tsx b/src/panel/Main.tsx
index 362e3cbf..4bebb09d 100644
--- a/src/panel/Main.tsx
+++ b/src/panel/Main.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react'
 
+import Welcome from './Welcome'
+
 interface Props {
   className?: string
 }
 
 const Main = ({ className }: Props) => (
-  <main id="Main" className={className}>
-    Hello World!
+  <main id="main" className={`min-h-screen ${className}`}>
+    <Welcome />
   </main>
 )
 
diff --git a/src/panel/Sidebar.tsx b/src/panel/Sidebar.tsx
index 80daf133..b954b135 100644
--- a/src/panel/Sidebar.tsx
+++ b/src/panel/Sidebar.tsx
@@ -10,7 +10,7 @@ interface Props {
   requests: Intercept.Request[]
 }
 
-const Sidebar = ({ className, requests }: Props) => (
+const Sidebar = ({ className = '', requests }: Props) => (
   <aside
     id="sidebar"
     className={`flex flex-col justify-between border-r border-slate-300 ${className}`}
diff --git a/src/panel/Welcome.tsx b/src/panel/Welcome.tsx
new file mode 100644
index 00000000..2b86079a
--- /dev/null
+++ b/src/panel/Welcome.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+import { LevelCrossing } from '@/icons'
+
+interface Props {
+  className?: string
+}
+
+const Welcome = ({ className = '' }: Props) => (
+  <div
+    id="welcome"
+    className={`container min-h-screen flex flex-col justify-center items-center bg-slate-50 ${className}`}
+  >
+    <div className="container max-w-xs">
+      <LevelCrossing className="w-full h-auto fill-indigo-700" />
+    </div>
+    <div className="font-bold text-4xl">Welcome to Interceptor</div>
+    <button className="px-9 py-3 my-6 rounded font-semibold bg-blue-700 text-white hover:opacity-75 active:opacity-100">
+      Add Intercept
+    </button>
+  </div>
+)
+
+export default Welcome
diff --git a/src/panel/components/List.tsx b/src/panel/components/List.tsx
index f21a8c6f..06ba2142 100644
--- a/src/panel/components/List.tsx
+++ b/src/panel/components/List.tsx
@@ -5,7 +5,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   header?: React.ReactNode
 }
 
-const List = ({ className, header = '', items = [], ...props }: Props) => {
+const List = ({ className = '', header = '', items = [], ...props }: Props) => {
   if (typeof header === 'string') {
     header = <div className="font-bold bg-slate-100">{header}</div>
   }

From 09d0e7bc7197ef7ec7be284c02c484091af89aec Mon Sep 17 00:00:00 2001
From: Charles Francoise <charles.francoise@payfit.com>
Date: Thu, 10 Feb 2022 17:47:16 +0100
Subject: [PATCH 03/13] add tests

---
 src/panel/Welcome.tsx                         |  5 +++-
 src/panel/__tests__/Welcome.tsx               | 25 ++++++++++++++++
 .../__tests__/__snapshots__/Main.tsx.snap     | 26 +++++++++++++++--
 .../__tests__/__snapshots__/Welcome.tsx.snap  | 29 +++++++++++++++++++
 4 files changed, 82 insertions(+), 3 deletions(-)
 create mode 100644 src/panel/__tests__/Welcome.tsx
 create mode 100644 src/panel/__tests__/__snapshots__/Welcome.tsx.snap

diff --git a/src/panel/Welcome.tsx b/src/panel/Welcome.tsx
index 2b86079a..3b890d53 100644
--- a/src/panel/Welcome.tsx
+++ b/src/panel/Welcome.tsx
@@ -15,7 +15,10 @@ const Welcome = ({ className = '' }: Props) => (
       <LevelCrossing className="w-full h-auto fill-indigo-700" />
     </div>
     <div className="font-bold text-4xl">Welcome to Interceptor</div>
-    <button className="px-9 py-3 my-6 rounded font-semibold bg-blue-700 text-white hover:opacity-75 active:opacity-100">
+    <button
+      className="px-9 py-3 my-6 rounded font-semibold bg-blue-700 text-white hover:opacity-75 active:opacity-100"
+      title="Add intercept"
+    >
       Add Intercept
     </button>
   </div>
diff --git a/src/panel/__tests__/Welcome.tsx b/src/panel/__tests__/Welcome.tsx
new file mode 100644
index 00000000..7d3eaf9c
--- /dev/null
+++ b/src/panel/__tests__/Welcome.tsx
@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { cleanup, fireEvent, render } from '@testing-library/react'
+import * as React from 'react'
+import '@testing-library/jest-dom'
+
+import Welcome from '../Welcome'
+
+describe('[Welcome]', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('should match empty snapshot', () => {
+    const { container } = render(<Welcome />)
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should click button', () => {
+    const { getByRole } = render(<Welcome />)
+    const button = getByRole('button', { name: 'Add intercept' })
+    fireEvent.click(button)
+
+    expect.pass('TODO: do stuff on click')
+  })
+})
diff --git a/src/panel/__tests__/__snapshots__/Main.tsx.snap b/src/panel/__tests__/__snapshots__/Main.tsx.snap
index 7b15f3dc..37e55d66 100644
--- a/src/panel/__tests__/__snapshots__/Main.tsx.snap
+++ b/src/panel/__tests__/__snapshots__/Main.tsx.snap
@@ -3,9 +3,31 @@
 exports[`[Main] should match empty snapshot 1`] = `
 <div>
   <main
-    id="Main"
+    class="min-h-screen undefined"
+    id="main"
   >
-    Hello World!
+    <div
+      class="container min-h-screen flex flex-col justify-center items-center bg-slate-50 "
+      id="welcome"
+    >
+      <div
+        class="container max-w-xs"
+      >
+        <svg
+          class="w-full h-auto fill-indigo-700"
+        />
+      </div>
+      <div
+        class="font-bold text-4xl"
+      >
+        Welcome to Interceptor
+      </div>
+      <button
+        class="px-9 py-3 my-6 rounded font-semibold bg-blue-700 text-white hover:opacity-75 active:opacity-100"
+      >
+        Add Intercept
+      </button>
+    </div>
   </main>
 </div>
 `;
diff --git a/src/panel/__tests__/__snapshots__/Welcome.tsx.snap b/src/panel/__tests__/__snapshots__/Welcome.tsx.snap
new file mode 100644
index 00000000..ae91aa3e
--- /dev/null
+++ b/src/panel/__tests__/__snapshots__/Welcome.tsx.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[Welcome] should match empty snapshot 1`] = `
+<div>
+  <div
+    class="container min-h-screen flex flex-col justify-center items-center bg-slate-50 "
+    id="welcome"
+  >
+    <div
+      class="container max-w-xs"
+    >
+      <svg
+        class="w-full h-auto fill-indigo-700"
+      />
+    </div>
+    <div
+      class="font-bold text-4xl"
+    >
+      Welcome to Interceptor
+    </div>
+    <button
+      class="px-9 py-3 my-6 rounded font-semibold bg-blue-700 text-white hover:opacity-75 active:opacity-100"
+      title="Add intercept"
+    >
+      Add Intercept
+    </button>
+  </div>
+</div>
+`;

From b93f43c46287e24655d60e37b61c4a2e88de5f1c Mon Sep 17 00:00:00 2001
From: Charles Francoise <charles.francoise@payfit.com>
Date: Thu, 10 Feb 2022 19:51:53 +0100
Subject: [PATCH 04/13] InterceptContext

---
 .eslintrc.js                                  |  1 +
 src/intercept/__tests__/index.ts              |  1 -
 src/intercept/react/intercept.tsx             | 46 +++++++++++++++
 src/panel/InterceptList.tsx                   | 14 ++---
 src/panel/Sidebar.tsx                         |  6 +-
 src/panel/Welcome.tsx                         |  2 +-
 src/panel/__tests__/InterceptList.tsx         |  8 ++-
 .../__tests__/__snapshots__/App.tsx.snap      | 56 +++++++++++++++++--
 .../__snapshots__/InterceptList.tsx.snap      |  6 +-
 .../__tests__/__snapshots__/Main.tsx.snap     |  3 +-
 .../__snapshots__/RequestList.tsx.snap        |  4 +-
 .../__tests__/__snapshots__/Sidebar.tsx.snap  |  4 +-
 .../__tests__/__snapshots__/Welcome.tsx.snap  |  2 +-
 .../__tests__/__snapshots__/List.tsx.snap     | 10 ++--
 14 files changed, 130 insertions(+), 33 deletions(-)
 create mode 100644 src/intercept/react/intercept.tsx

diff --git a/.eslintrc.js b/.eslintrc.js
index 667c0fc1..ef57a1b1 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -38,6 +38,7 @@ module.exports = {
     },
   },
   rules: {
+    '@typescript-eslint/no-empty-function': 'off',
     ...importRules,
   },
 }
diff --git a/src/intercept/__tests__/index.ts b/src/intercept/__tests__/index.ts
index 96228df4..88a9faf0 100644
--- a/src/intercept/__tests__/index.ts
+++ b/src/intercept/__tests__/index.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
 import { chrome } from 'jest-chrome'
 
 import { RequestPausedEvent, listen, subscribe, unlisten } from '../debugger'
diff --git a/src/intercept/react/intercept.tsx b/src/intercept/react/intercept.tsx
new file mode 100644
index 00000000..0b5bd777
--- /dev/null
+++ b/src/intercept/react/intercept.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { createContext, useContext, useState } from 'react'
+
+import * as intercept from '../intercept'
+
+interface InterceptContextType {
+  intercepts: intercept.Intercept[]
+  addIntercept: (pattern: string) => void
+  removeIntercept: (inter: intercept.Intercept) => void
+}
+
+const InterceptContext = createContext<InterceptContextType>({
+  intercepts: [],
+  addIntercept: () => {},
+  removeIntercept: () => {},
+})
+
+interface Props {
+  children: React.ReactNode
+}
+
+export const Provider = ({ children }: Props) => {
+  const [intercepts, setIntercepts] = useState([...intercept.intercepts])
+
+  const addIntercept = (pattern: string) => {
+    intercept.addIntercept({ pattern, enabled: true })
+    setIntercepts([...intercept.intercepts])
+  }
+  const removeIntercept = (inter: intercept.Intercept) => {
+    intercept.removeIntercept(inter)
+    setIntercepts([...intercept.intercepts])
+  }
+
+  return (
+    <InterceptContext.Provider
+      value={{ intercepts, addIntercept, removeIntercept }}
+    >
+      {children}
+    </InterceptContext.Provider>
+  )
+}
+
+export const useIntercepts = () => {
+  const ctx = useContext(InterceptContext)
+  return ctx
+}
diff --git a/src/panel/InterceptList.tsx b/src/panel/InterceptList.tsx
index f5e690bc..672f79dc 100644
--- a/src/panel/InterceptList.tsx
+++ b/src/panel/InterceptList.tsx
@@ -3,6 +3,10 @@ import { useMemo, useState } from 'react'
 
 import { Clear as ClearIcon, Plus as PlusIcon } from '@/icons'
 import * as intercept from '@/intercept'
+import {
+  Provider as InterceptProvider,
+  useIntercepts,
+} from '@/intercept/react/intercept'
 
 import List from './components/List'
 
@@ -41,15 +45,7 @@ interface Props {
 }
 
 const InterceptList = ({ className }: Props) => {
-  const [intercepts, setIntercepts] = useState([...intercept.intercepts])
-  const addIntercept = (pattern: string) => {
-    intercept.addIntercept({ pattern, enabled: true })
-    setIntercepts([...intercept.intercepts])
-  }
-  const removeIntercept = (inter: intercept.Intercept) => {
-    intercept.removeIntercept(inter)
-    setIntercepts([...intercept.intercepts])
-  }
+  const { intercepts, addIntercept, removeIntercept } = useIntercepts()
 
   const items = useMemo(
     () =>
diff --git a/src/panel/Sidebar.tsx b/src/panel/Sidebar.tsx
index b954b135..22304c11 100644
--- a/src/panel/Sidebar.tsx
+++ b/src/panel/Sidebar.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import * as Intercept from '@/intercept'
+import { Provider as InterceptProvider } from '@/intercept/react/intercept'
 
 import InterceptList from './InterceptList'
 import RequestList from './RequestList'
@@ -16,7 +17,10 @@ const Sidebar = ({ className = '', requests }: Props) => (
     className={`flex flex-col justify-between border-r border-slate-300 ${className}`}
   >
     <RequestList className="flex-initial overflow-y-auto" requests={requests} />
-    <InterceptList className="flex-none overflow-y-auto" />
+
+    <InterceptProvider>
+      <InterceptList className="flex-none overflow-y-auto" />
+    </InterceptProvider>
   </aside>
 )
 
diff --git a/src/panel/Welcome.tsx b/src/panel/Welcome.tsx
index 3b890d53..753a16ce 100644
--- a/src/panel/Welcome.tsx
+++ b/src/panel/Welcome.tsx
@@ -16,7 +16,7 @@ const Welcome = ({ className = '' }: Props) => (
     </div>
     <div className="font-bold text-4xl">Welcome to Interceptor</div>
     <button
-      className="px-9 py-3 my-6 rounded font-semibold bg-blue-700 text-white hover:opacity-75 active:opacity-100"
+      className="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-white hover:opacity-75 active:opacity-100"
       title="Add intercept"
     >
       Add Intercept
diff --git a/src/panel/__tests__/InterceptList.tsx b/src/panel/__tests__/InterceptList.tsx
index bd463fe6..d84a4a8d 100644
--- a/src/panel/__tests__/InterceptList.tsx
+++ b/src/panel/__tests__/InterceptList.tsx
@@ -3,6 +3,8 @@ import { cleanup, fireEvent, render } from '@testing-library/react'
 import * as React from 'react'
 import '@testing-library/jest-dom'
 
+import { Provider as InterceptProvider } from '@/intercept/react/intercept'
+
 import InterceptList from '../InterceptList'
 
 describe('[InterceptList]', () => {
@@ -17,7 +19,11 @@ describe('[InterceptList]', () => {
   })
 
   it('should match snapshots after clicking buttons', () => {
-    const { container, getByRole } = render(<InterceptList />)
+    const { container, getByRole } = render(
+      <InterceptProvider>
+        <InterceptList />
+      </InterceptProvider>
+    )
 
     const addButton = getByRole('button', { name: 'Add intercept' })
     fireEvent.click(addButton)
diff --git a/src/panel/__tests__/__snapshots__/App.tsx.snap b/src/panel/__tests__/__snapshots__/App.tsx.snap
index 18e63b8a..633906be 100644
--- a/src/panel/__tests__/__snapshots__/App.tsx.snap
+++ b/src/panel/__tests__/__snapshots__/App.tsx.snap
@@ -50,10 +50,32 @@ exports[`[App] matches snapshot 1`] = `
       </div>
     </aside>
     <main
-      class="ml-64"
-      id="Main"
+      class="min-h-screen ml-64"
+      id="main"
     >
-      Hello World!
+      <div
+        class="container min-h-screen flex flex-col justify-center items-center bg-slate-50 "
+        id="welcome"
+      >
+        <div
+          class="container max-w-xs"
+        >
+          <svg
+            class="w-full h-auto fill-indigo-700"
+          />
+        </div>
+        <div
+          class="font-bold text-4xl"
+        >
+          Welcome to Interceptor
+        </div>
+        <button
+          class="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-white hover:opacity-75 active:opacity-100"
+          title="Add intercept"
+        >
+          Add Intercept
+        </button>
+      </div>
     </main>
   </div>
 </div>
@@ -117,10 +139,32 @@ exports[`[App] should update after callback 1`] = `
       </div>
     </aside>
     <main
-      class="ml-64"
-      id="Main"
+      class="min-h-screen ml-64"
+      id="main"
     >
-      Hello World!
+      <div
+        class="container min-h-screen flex flex-col justify-center items-center bg-slate-50 "
+        id="welcome"
+      >
+        <div
+          class="container max-w-xs"
+        >
+          <svg
+            class="w-full h-auto fill-indigo-700"
+          />
+        </div>
+        <div
+          class="font-bold text-4xl"
+        >
+          Welcome to Interceptor
+        </div>
+        <button
+          class="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-white hover:opacity-75 active:opacity-100"
+          title="Add intercept"
+        >
+          Add Intercept
+        </button>
+      </div>
     </main>
   </div>
 </div>
diff --git a/src/panel/__tests__/__snapshots__/InterceptList.tsx.snap b/src/panel/__tests__/__snapshots__/InterceptList.tsx.snap
index dbfbffcc..5afcf5fc 100644
--- a/src/panel/__tests__/__snapshots__/InterceptList.tsx.snap
+++ b/src/panel/__tests__/__snapshots__/InterceptList.tsx.snap
@@ -3,7 +3,7 @@
 exports[`[InterceptList] should match empty snapshot 1`] = `
 <div>
   <div
-    class="flex flex-col undefined"
+    class="flex flex-col "
     id="intercept-list"
   >
     <div
@@ -33,7 +33,7 @@ exports[`[InterceptList] should match empty snapshot 1`] = `
 exports[`[InterceptList] should match snapshots after clicking buttons 1`] = `
 <div>
   <div
-    class="flex flex-col undefined"
+    class="flex flex-col "
     id="intercept-list"
   >
     <div
@@ -87,7 +87,7 @@ exports[`[InterceptList] should match snapshots after clicking buttons 1`] = `
 exports[`[InterceptList] should match snapshots after clicking buttons 2`] = `
 <div>
   <div
-    class="flex flex-col undefined"
+    class="flex flex-col "
     id="intercept-list"
   >
     <div
diff --git a/src/panel/__tests__/__snapshots__/Main.tsx.snap b/src/panel/__tests__/__snapshots__/Main.tsx.snap
index 37e55d66..371a26e5 100644
--- a/src/panel/__tests__/__snapshots__/Main.tsx.snap
+++ b/src/panel/__tests__/__snapshots__/Main.tsx.snap
@@ -23,7 +23,8 @@ exports[`[Main] should match empty snapshot 1`] = `
         Welcome to Interceptor
       </div>
       <button
-        class="px-9 py-3 my-6 rounded font-semibold bg-blue-700 text-white hover:opacity-75 active:opacity-100"
+        class="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-white hover:opacity-75 active:opacity-100"
+        title="Add intercept"
       >
         Add Intercept
       </button>
diff --git a/src/panel/__tests__/__snapshots__/RequestList.tsx.snap b/src/panel/__tests__/__snapshots__/RequestList.tsx.snap
index 6343ed26..c8053800 100644
--- a/src/panel/__tests__/__snapshots__/RequestList.tsx.snap
+++ b/src/panel/__tests__/__snapshots__/RequestList.tsx.snap
@@ -3,7 +3,7 @@
 exports[`[RequestList] should match empty snapshot 1`] = `
 <div>
   <div
-    class="flex flex-col undefined"
+    class="flex flex-col "
     id="request-list"
   >
     <div
@@ -21,7 +21,7 @@ exports[`[RequestList] should match empty snapshot 1`] = `
 exports[`[RequestList] should match requestful snapshot 1`] = `
 <div>
   <div
-    class="flex flex-col undefined"
+    class="flex flex-col "
     id="request-list"
   >
     <div
diff --git a/src/panel/__tests__/__snapshots__/Sidebar.tsx.snap b/src/panel/__tests__/__snapshots__/Sidebar.tsx.snap
index ec1d6f89..c9fa62e2 100644
--- a/src/panel/__tests__/__snapshots__/Sidebar.tsx.snap
+++ b/src/panel/__tests__/__snapshots__/Sidebar.tsx.snap
@@ -3,7 +3,7 @@
 exports[`[Sidebar] should match empty snapshot 1`] = `
 <div>
   <aside
-    class="flex flex-col justify-between border-r border-slate-300 undefined"
+    class="flex flex-col justify-between border-r border-slate-300 "
     id="sidebar"
   >
     <div
@@ -51,7 +51,7 @@ exports[`[Sidebar] should match empty snapshot 1`] = `
 exports[`[Sidebar] should match requestful snapshot 1`] = `
 <div>
   <aside
-    class="flex flex-col justify-between border-r border-slate-300 undefined"
+    class="flex flex-col justify-between border-r border-slate-300 "
     id="sidebar"
   >
     <div
diff --git a/src/panel/__tests__/__snapshots__/Welcome.tsx.snap b/src/panel/__tests__/__snapshots__/Welcome.tsx.snap
index ae91aa3e..a0300951 100644
--- a/src/panel/__tests__/__snapshots__/Welcome.tsx.snap
+++ b/src/panel/__tests__/__snapshots__/Welcome.tsx.snap
@@ -19,7 +19,7 @@ exports[`[Welcome] should match empty snapshot 1`] = `
       Welcome to Interceptor
     </div>
     <button
-      class="px-9 py-3 my-6 rounded font-semibold bg-blue-700 text-white hover:opacity-75 active:opacity-100"
+      class="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-white hover:opacity-75 active:opacity-100"
       title="Add intercept"
     >
       Add Intercept
diff --git a/src/panel/components/__tests__/__snapshots__/List.tsx.snap b/src/panel/components/__tests__/__snapshots__/List.tsx.snap
index 795e95fa..4b25e922 100644
--- a/src/panel/components/__tests__/__snapshots__/List.tsx.snap
+++ b/src/panel/components/__tests__/__snapshots__/List.tsx.snap
@@ -3,7 +3,7 @@
 exports[`[List] should match component header snapshot 1`] = `
 <div>
   <div
-    class="flex flex-col undefined"
+    class="flex flex-col "
   >
     <div
       class="header"
@@ -20,7 +20,7 @@ exports[`[List] should match component header snapshot 1`] = `
 exports[`[List] should match empty snapshot 1`] = `
 <div>
   <div
-    class="flex flex-col undefined"
+    class="flex flex-col "
   >
     <div
       class="font-bold bg-slate-100"
@@ -35,7 +35,7 @@ exports[`[List] should match empty snapshot 1`] = `
 exports[`[List] should match header + component items snapshot 1`] = `
 <div>
   <div
-    class="flex flex-col undefined"
+    class="flex flex-col "
   >
     <div
       class="font-bold bg-slate-100"
@@ -62,7 +62,7 @@ exports[`[List] should match header + component items snapshot 1`] = `
 exports[`[List] should match header + string items snapshot 1`] = `
 <div>
   <div
-    class="flex flex-col undefined"
+    class="flex flex-col "
   >
     <div
       class="font-bold bg-slate-100"
@@ -82,7 +82,7 @@ exports[`[List] should match header + string items snapshot 1`] = `
 exports[`[List] should match string header snapshot 1`] = `
 <div>
   <div
-    class="flex flex-col undefined"
+    class="flex flex-col "
   >
     <div
       class="font-bold bg-slate-100"

From 637ab0c37cbf72a34eaeed0302b60fa1211a159c Mon Sep 17 00:00:00 2001
From: Charles Francoise <charles.francoise@payfit.com>
Date: Thu, 10 Feb 2022 20:01:30 +0100
Subject: [PATCH 05/13] rename package

---
 src/{intercept => interceptor}/__tests__/debugger.ts  |  0
 src/{intercept => interceptor}/__tests__/index.ts     |  0
 src/{intercept => interceptor}/__tests__/intercept.ts |  0
 src/{intercept => interceptor}/debugger.ts            |  0
 src/{intercept => interceptor}/index.ts               |  0
 src/{intercept => interceptor}/intercept.ts           |  0
 src/{intercept => interceptor}/react/intercept.tsx    |  0
 src/{intercept => interceptor}/request.ts             |  0
 src/panel/App.tsx                                     | 10 +++++-----
 src/panel/InterceptList.tsx                           |  8 ++++----
 src/panel/Sidebar.tsx                                 |  6 +++---
 src/panel/__tests__/App.tsx                           | 10 +++++-----
 src/panel/__tests__/InterceptList.tsx                 |  2 +-
 13 files changed, 18 insertions(+), 18 deletions(-)
 rename src/{intercept => interceptor}/__tests__/debugger.ts (100%)
 rename src/{intercept => interceptor}/__tests__/index.ts (100%)
 rename src/{intercept => interceptor}/__tests__/intercept.ts (100%)
 rename src/{intercept => interceptor}/debugger.ts (100%)
 rename src/{intercept => interceptor}/index.ts (100%)
 rename src/{intercept => interceptor}/intercept.ts (100%)
 rename src/{intercept => interceptor}/react/intercept.tsx (100%)
 rename src/{intercept => interceptor}/request.ts (100%)

diff --git a/src/intercept/__tests__/debugger.ts b/src/interceptor/__tests__/debugger.ts
similarity index 100%
rename from src/intercept/__tests__/debugger.ts
rename to src/interceptor/__tests__/debugger.ts
diff --git a/src/intercept/__tests__/index.ts b/src/interceptor/__tests__/index.ts
similarity index 100%
rename from src/intercept/__tests__/index.ts
rename to src/interceptor/__tests__/index.ts
diff --git a/src/intercept/__tests__/intercept.ts b/src/interceptor/__tests__/intercept.ts
similarity index 100%
rename from src/intercept/__tests__/intercept.ts
rename to src/interceptor/__tests__/intercept.ts
diff --git a/src/intercept/debugger.ts b/src/interceptor/debugger.ts
similarity index 100%
rename from src/intercept/debugger.ts
rename to src/interceptor/debugger.ts
diff --git a/src/intercept/index.ts b/src/interceptor/index.ts
similarity index 100%
rename from src/intercept/index.ts
rename to src/interceptor/index.ts
diff --git a/src/intercept/intercept.ts b/src/interceptor/intercept.ts
similarity index 100%
rename from src/intercept/intercept.ts
rename to src/interceptor/intercept.ts
diff --git a/src/intercept/react/intercept.tsx b/src/interceptor/react/intercept.tsx
similarity index 100%
rename from src/intercept/react/intercept.tsx
rename to src/interceptor/react/intercept.tsx
diff --git a/src/intercept/request.ts b/src/interceptor/request.ts
similarity index 100%
rename from src/intercept/request.ts
rename to src/interceptor/request.ts
diff --git a/src/panel/App.tsx b/src/panel/App.tsx
index d6f25e89..825b62bb 100644
--- a/src/panel/App.tsx
+++ b/src/panel/App.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react'
 import { useLayoutEffect, useReducer } from 'react'
 
-import * as Intercept from '@/intercept'
+import * as Interceptor from '@/interceptor'
 
 import Main from './Main'
 import Sidebar from './Sidebar'
 
 const App = () => {
   const [requests, pushRequest] = useReducer(
-    (requests: Intercept.Request[], req: Intercept.Request) => [
+    (requests: Interceptor.Request[], req: Interceptor.Request) => [
       ...requests,
       req,
     ],
@@ -16,14 +16,14 @@ const App = () => {
   )
 
   useLayoutEffect(() => {
-    Intercept.listen()
-    const unsubscribe = Intercept.subscribe((req) => {
+    Interceptor.listen()
+    const unsubscribe = Interceptor.subscribe((req) => {
       pushRequest(req)
     })
 
     return () => {
       unsubscribe()
-      Intercept.unlisten()
+      Interceptor.unlisten()
     }
   }, [])
 
diff --git a/src/panel/InterceptList.tsx b/src/panel/InterceptList.tsx
index 672f79dc..2909a322 100644
--- a/src/panel/InterceptList.tsx
+++ b/src/panel/InterceptList.tsx
@@ -2,17 +2,17 @@ import * as React from 'react'
 import { useMemo, useState } from 'react'
 
 import { Clear as ClearIcon, Plus as PlusIcon } from '@/icons'
-import * as intercept from '@/intercept'
+import * as Interceptor from '@/interceptor'
 import {
   Provider as InterceptProvider,
   useIntercepts,
-} from '@/intercept/react/intercept'
+} from '@/interceptor/react/intercept'
 
 import List from './components/List'
 
 interface ItemProps {
-  inter: intercept.Intercept
-  onDelete: (inter: intercept.Intercept) => void
+  inter: Interceptor.Intercept
+  onDelete: (inter: Interceptor.Intercept) => void
 }
 
 const Item = ({ inter, onDelete }: ItemProps) => {
diff --git a/src/panel/Sidebar.tsx b/src/panel/Sidebar.tsx
index 22304c11..63261cb6 100644
--- a/src/panel/Sidebar.tsx
+++ b/src/panel/Sidebar.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react'
 
-import * as Intercept from '@/intercept'
-import { Provider as InterceptProvider } from '@/intercept/react/intercept'
+import * as Interceptor from '@/interceptor'
+import { Provider as InterceptProvider } from '@/interceptor/react/intercept'
 
 import InterceptList from './InterceptList'
 import RequestList from './RequestList'
 
 interface Props {
   className?: string
-  requests: Intercept.Request[]
+  requests: Interceptor.Request[]
 }
 
 const Sidebar = ({ className = '', requests }: Props) => (
diff --git a/src/panel/__tests__/App.tsx b/src/panel/__tests__/App.tsx
index c2607445..a70c88db 100644
--- a/src/panel/__tests__/App.tsx
+++ b/src/panel/__tests__/App.tsx
@@ -3,12 +3,12 @@ import { cleanup, render, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import '@testing-library/jest-dom'
 
-import * as Intercept from '@/intercept'
+import * as Interceptor from '@/interceptor'
 
 import App from '../App'
 
-jest.mock('@/intercept')
-const mockedIntercept = Intercept as jest.Mocked<typeof Intercept>
+jest.mock('@/interceptor')
+const mockedIntercept = Interceptor as jest.Mocked<typeof Interceptor>
 
 describe('[App]', () => {
   const unsubscribe = jest.fn()
@@ -38,7 +38,7 @@ describe('[App]', () => {
   })
 
   it('should update after callback', async () => {
-    let listener: Intercept.RequestEventListener = () => {
+    let listener: Interceptor.RequestEventListener = () => {
       throw new Error('listener called before subscribe')
     }
     mockedIntercept.subscribe.mockImplementation((l) => {
@@ -53,7 +53,7 @@ describe('[App]', () => {
     const req = {
       method: 'GET',
       url: 'https://example.com',
-    } as Intercept.Request
+    } as Interceptor.Request
     await waitFor(() => listener(req))
 
     expect(container).not.toEqual(snapshot)
diff --git a/src/panel/__tests__/InterceptList.tsx b/src/panel/__tests__/InterceptList.tsx
index d84a4a8d..e167f7f7 100644
--- a/src/panel/__tests__/InterceptList.tsx
+++ b/src/panel/__tests__/InterceptList.tsx
@@ -3,7 +3,7 @@ import { cleanup, fireEvent, render } from '@testing-library/react'
 import * as React from 'react'
 import '@testing-library/jest-dom'
 
-import { Provider as InterceptProvider } from '@/intercept/react/intercept'
+import { Provider as InterceptProvider } from '@/interceptor/react/intercept'
 
 import InterceptList from '../InterceptList'
 

From ae907b9fba0cb68aa48d6df7f09165b5c264e847 Mon Sep 17 00:00:00 2001
From: Charles Francoise <charles.francoise@payfit.com>
Date: Thu, 10 Feb 2022 20:04:15 +0100
Subject: [PATCH 06/13] export interceptor-react differently

---
 src/interceptor/react/index.ts        | 1 +
 src/panel/InterceptList.tsx           | 5 +----
 src/panel/Sidebar.tsx                 | 2 +-
 src/panel/__tests__/InterceptList.tsx | 2 +-
 4 files changed, 4 insertions(+), 6 deletions(-)
 create mode 100644 src/interceptor/react/index.ts

diff --git a/src/interceptor/react/index.ts b/src/interceptor/react/index.ts
new file mode 100644
index 00000000..4d69a160
--- /dev/null
+++ b/src/interceptor/react/index.ts
@@ -0,0 +1 @@
+export { Provider as InterceptProvider, useIntercepts } from './intercept'
diff --git a/src/panel/InterceptList.tsx b/src/panel/InterceptList.tsx
index 2909a322..8433fed0 100644
--- a/src/panel/InterceptList.tsx
+++ b/src/panel/InterceptList.tsx
@@ -3,10 +3,7 @@ import { useMemo, useState } from 'react'
 
 import { Clear as ClearIcon, Plus as PlusIcon } from '@/icons'
 import * as Interceptor from '@/interceptor'
-import {
-  Provider as InterceptProvider,
-  useIntercepts,
-} from '@/interceptor/react/intercept'
+import { useIntercepts } from '@/interceptor/react'
 
 import List from './components/List'
 
diff --git a/src/panel/Sidebar.tsx b/src/panel/Sidebar.tsx
index 63261cb6..e88974e1 100644
--- a/src/panel/Sidebar.tsx
+++ b/src/panel/Sidebar.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import * as Interceptor from '@/interceptor'
-import { Provider as InterceptProvider } from '@/interceptor/react/intercept'
+import { InterceptProvider } from '@/interceptor/react'
 
 import InterceptList from './InterceptList'
 import RequestList from './RequestList'
diff --git a/src/panel/__tests__/InterceptList.tsx b/src/panel/__tests__/InterceptList.tsx
index e167f7f7..a10cb518 100644
--- a/src/panel/__tests__/InterceptList.tsx
+++ b/src/panel/__tests__/InterceptList.tsx
@@ -3,7 +3,7 @@ import { cleanup, fireEvent, render } from '@testing-library/react'
 import * as React from 'react'
 import '@testing-library/jest-dom'
 
-import { Provider as InterceptProvider } from '@/interceptor/react/intercept'
+import { InterceptProvider } from '@/interceptor/react'
 
 import InterceptList from '../InterceptList'
 

From 95d80f5bd89ea2316f0d2fe4036686af1057de5b Mon Sep 17 00:00:00 2001
From: Charles Francoise <charles.francoise@payfit.com>
Date: Thu, 10 Feb 2022 21:04:59 +0100
Subject: [PATCH 07/13] forgot a few imports

---
 src/panel/__tests__/RequestList.tsx | 4 ++--
 src/panel/__tests__/Sidebar.tsx     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/panel/__tests__/RequestList.tsx b/src/panel/__tests__/RequestList.tsx
index bf34fed2..9897e44c 100644
--- a/src/panel/__tests__/RequestList.tsx
+++ b/src/panel/__tests__/RequestList.tsx
@@ -3,12 +3,12 @@ import { cleanup, render } from '@testing-library/react'
 import * as React from 'react'
 import '@testing-library/jest-dom'
 
-import * as Intercept from '@/intercept'
+import * as Interceptor from '@/interceptor'
 
 import RequestList from '../RequestList'
 
 // mock request
-const request: Intercept.Request = {
+const request: Interceptor.Request = {
   headers: {},
   initialPriority: 'Medium',
   method: 'GET',
diff --git a/src/panel/__tests__/Sidebar.tsx b/src/panel/__tests__/Sidebar.tsx
index 75baabac..32a83afd 100644
--- a/src/panel/__tests__/Sidebar.tsx
+++ b/src/panel/__tests__/Sidebar.tsx
@@ -3,12 +3,12 @@ import { cleanup, render } from '@testing-library/react'
 import * as React from 'react'
 import '@testing-library/jest-dom'
 
-import * as Intercept from '@/intercept'
+import * as Interceptor from '@/interceptor'
 
 import Sidebar from '../Sidebar'
 
 // mock request
-const request: Intercept.Request = {
+const request: Interceptor.Request = {
   headers: {},
   initialPriority: 'Medium',
   method: 'GET',

From 091b5201cb7d3517ff21aae3c4df7560875322c1 Mon Sep 17 00:00:00 2001
From: Charles Francoise <charles.francoise@payfit.com>
Date: Thu, 10 Feb 2022 21:17:21 +0100
Subject: [PATCH 08/13] one more import

---
 src/panel/RequestList.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/panel/RequestList.tsx b/src/panel/RequestList.tsx
index 4cca2ab8..d3cab26d 100644
--- a/src/panel/RequestList.tsx
+++ b/src/panel/RequestList.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 import { useMemo } from 'react'
 
-import * as Intercept from '@/intercept'
+import * as Interceptor from '@/interceptor'
 
 import List from './components/List'
 
 interface ItemProps {
-  request: Intercept.Request
+  request: Interceptor.Request
 }
 
 const Item = ({ request }: ItemProps) => (
@@ -17,7 +17,7 @@ const Item = ({ request }: ItemProps) => (
 
 interface Props {
   className?: string
-  requests: Intercept.Request[]
+  requests: Interceptor.Request[]
 }
 
 const RequestList = ({ className, requests }: Props) => {

From 77d9ce848e317edb8aa36befb0c0878edd6e32e9 Mon Sep 17 00:00:00 2001
From: Charles Francoise <charles.francoise@payfit.com>
Date: Thu, 10 Feb 2022 21:19:33 +0100
Subject: [PATCH 09/13] move InterceptProvider up the tree

---
 src/panel/App.tsx     | 17 ++++++++++-------
 src/panel/Sidebar.tsx |  5 +----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/panel/App.tsx b/src/panel/App.tsx
index 825b62bb..a1da1949 100644
--- a/src/panel/App.tsx
+++ b/src/panel/App.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import { useLayoutEffect, useReducer } from 'react'
 
 import * as Interceptor from '@/interceptor'
+import { InterceptProvider } from '@/interceptor/react'
 
 import Main from './Main'
 import Sidebar from './Sidebar'
@@ -28,13 +29,15 @@ const App = () => {
   }, [])
 
   return (
-    <div id="App" className="h-screen">
-      <Sidebar
-        className="fixed top-0 left-0 bottom-0 w-64"
-        requests={requests}
-      />
-      <Main className="ml-64" />
-    </div>
+    <InterceptProvider>
+      <div id="App" className="h-screen">
+        <Sidebar
+          className="fixed top-0 left-0 bottom-0 w-64"
+          requests={requests}
+        />
+        <Main className="ml-64" />
+      </div>
+    </InterceptProvider>
   )
 }
 
diff --git a/src/panel/Sidebar.tsx b/src/panel/Sidebar.tsx
index e88974e1..cf6f79a4 100644
--- a/src/panel/Sidebar.tsx
+++ b/src/panel/Sidebar.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 
 import * as Interceptor from '@/interceptor'
-import { InterceptProvider } from '@/interceptor/react'
 
 import InterceptList from './InterceptList'
 import RequestList from './RequestList'
@@ -18,9 +17,7 @@ const Sidebar = ({ className = '', requests }: Props) => (
   >
     <RequestList className="flex-initial overflow-y-auto" requests={requests} />
 
-    <InterceptProvider>
-      <InterceptList className="flex-none overflow-y-auto" />
-    </InterceptProvider>
+    <InterceptList className="flex-none overflow-y-auto" />
   </aside>
 )
 

From af5691877d5eb167ac6a53e2d58a40907db29110 Mon Sep 17 00:00:00 2001
From: Charles Francoise <charles.francoise@payfit.com>
Date: Thu, 10 Feb 2022 21:27:55 +0100
Subject: [PATCH 10/13] connect add intercept button in welcome screen

---
 src/panel/Welcome.tsx | 38 ++++++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/panel/Welcome.tsx b/src/panel/Welcome.tsx
index 753a16ce..3c20be58 100644
--- a/src/panel/Welcome.tsx
+++ b/src/panel/Welcome.tsx
@@ -1,27 +1,33 @@
 import * as React from 'react'
 
 import { LevelCrossing } from '@/icons'
+import { useIntercepts } from '@/interceptor/react'
 
 interface Props {
   className?: string
 }
 
-const Welcome = ({ className = '' }: Props) => (
-  <div
-    id="welcome"
-    className={`container min-h-screen flex flex-col justify-center items-center bg-slate-50 ${className}`}
-  >
-    <div className="container max-w-xs">
-      <LevelCrossing className="w-full h-auto fill-indigo-700" />
-    </div>
-    <div className="font-bold text-4xl">Welcome to Interceptor</div>
-    <button
-      className="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-white hover:opacity-75 active:opacity-100"
-      title="Add intercept"
+const Welcome = ({ className = '' }: Props) => {
+  const { addIntercept } = useIntercepts()
+
+  return (
+    <div
+      id="welcome"
+      className={`container min-h-screen flex flex-col justify-center items-center bg-slate-50 ${className}`}
     >
-      Add Intercept
-    </button>
-  </div>
-)
+      <div className="container max-w-xs">
+        <LevelCrossing className="w-full h-auto fill-indigo-700" />
+      </div>
+      <div className="font-bold text-4xl">Welcome to Interceptor</div>
+      <button
+        className="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-sm text-white hover:opacity-75 active:opacity-100"
+        title="Add intercept"
+        onClick={() => addIntercept('')}
+      >
+        Add Intercept
+      </button>
+    </div>
+  )
+}
 
 export default Welcome

From f1536aa4acc83e9ca4dbdbbc011725f6eae6b86b Mon Sep 17 00:00:00 2001
From: Charles Francoise <charles.francoise@payfit.com>
Date: Thu, 10 Feb 2022 21:28:23 +0100
Subject: [PATCH 11/13] simplify useIntercepts defiunition

---
 src/interceptor/react/intercept.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/interceptor/react/intercept.tsx b/src/interceptor/react/intercept.tsx
index 0b5bd777..e63d242b 100644
--- a/src/interceptor/react/intercept.tsx
+++ b/src/interceptor/react/intercept.tsx
@@ -40,7 +40,4 @@ export const Provider = ({ children }: Props) => {
   )
 }
 
-export const useIntercepts = () => {
-  const ctx = useContext(InterceptContext)
-  return ctx
-}
+export const useIntercepts = () => useContext(InterceptContext)

From 13265b580cec3a99d49dbd55c41a1bbcd510dca1 Mon Sep 17 00:00:00 2001
From: Charles Francoise <charles.francoise@payfit.com>
Date: Thu, 10 Feb 2022 21:29:39 +0100
Subject: [PATCH 12/13] update snapshots

---
 src/panel/__tests__/__snapshots__/App.tsx.snap     | 4 ++--
 src/panel/__tests__/__snapshots__/Main.tsx.snap    | 2 +-
 src/panel/__tests__/__snapshots__/Welcome.tsx.snap | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/panel/__tests__/__snapshots__/App.tsx.snap b/src/panel/__tests__/__snapshots__/App.tsx.snap
index 633906be..584e1dd6 100644
--- a/src/panel/__tests__/__snapshots__/App.tsx.snap
+++ b/src/panel/__tests__/__snapshots__/App.tsx.snap
@@ -70,7 +70,7 @@ exports[`[App] matches snapshot 1`] = `
           Welcome to Interceptor
         </div>
         <button
-          class="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-white hover:opacity-75 active:opacity-100"
+          class="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-sm text-white hover:opacity-75 active:opacity-100"
           title="Add intercept"
         >
           Add Intercept
@@ -159,7 +159,7 @@ exports[`[App] should update after callback 1`] = `
           Welcome to Interceptor
         </div>
         <button
-          class="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-white hover:opacity-75 active:opacity-100"
+          class="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-sm text-white hover:opacity-75 active:opacity-100"
           title="Add intercept"
         >
           Add Intercept
diff --git a/src/panel/__tests__/__snapshots__/Main.tsx.snap b/src/panel/__tests__/__snapshots__/Main.tsx.snap
index 371a26e5..2342cc16 100644
--- a/src/panel/__tests__/__snapshots__/Main.tsx.snap
+++ b/src/panel/__tests__/__snapshots__/Main.tsx.snap
@@ -23,7 +23,7 @@ exports[`[Main] should match empty snapshot 1`] = `
         Welcome to Interceptor
       </div>
       <button
-        class="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-white hover:opacity-75 active:opacity-100"
+        class="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-sm text-white hover:opacity-75 active:opacity-100"
         title="Add intercept"
       >
         Add Intercept
diff --git a/src/panel/__tests__/__snapshots__/Welcome.tsx.snap b/src/panel/__tests__/__snapshots__/Welcome.tsx.snap
index a0300951..85fd5b67 100644
--- a/src/panel/__tests__/__snapshots__/Welcome.tsx.snap
+++ b/src/panel/__tests__/__snapshots__/Welcome.tsx.snap
@@ -19,7 +19,7 @@ exports[`[Welcome] should match empty snapshot 1`] = `
       Welcome to Interceptor
     </div>
     <button
-      class="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-white hover:opacity-75 active:opacity-100"
+      class="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-sm text-white hover:opacity-75 active:opacity-100"
       title="Add intercept"
     >
       Add Intercept

From 260a9dd2097e3d79fae2f4f6fcc243d823594c6c Mon Sep 17 00:00:00 2001
From: Charles Francoise <charles.francoise@payfit.com>
Date: Thu, 10 Feb 2022 21:33:59 +0100
Subject: [PATCH 13/13] add a snapshot test for welcome screen

---
 src/panel/__tests__/Welcome.tsx               |  4 +--
 .../__tests__/__snapshots__/Welcome.tsx.snap  | 28 +++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/panel/__tests__/Welcome.tsx b/src/panel/__tests__/Welcome.tsx
index 7d3eaf9c..f6a4acbd 100644
--- a/src/panel/__tests__/Welcome.tsx
+++ b/src/panel/__tests__/Welcome.tsx
@@ -16,10 +16,10 @@ describe('[Welcome]', () => {
   })
 
   it('should click button', () => {
-    const { getByRole } = render(<Welcome />)
+    const { container, getByRole } = render(<Welcome />)
     const button = getByRole('button', { name: 'Add intercept' })
     fireEvent.click(button)
 
-    expect.pass('TODO: do stuff on click')
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/panel/__tests__/__snapshots__/Welcome.tsx.snap b/src/panel/__tests__/__snapshots__/Welcome.tsx.snap
index 85fd5b67..ab657e98 100644
--- a/src/panel/__tests__/__snapshots__/Welcome.tsx.snap
+++ b/src/panel/__tests__/__snapshots__/Welcome.tsx.snap
@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`[Welcome] should click button 1`] = `
+<div>
+  <div
+    class="container min-h-screen flex flex-col justify-center items-center bg-slate-50 "
+    id="welcome"
+  >
+    <div
+      class="container max-w-xs"
+    >
+      <svg
+        class="w-full h-auto fill-indigo-700"
+      />
+    </div>
+    <div
+      class="font-bold text-4xl"
+    >
+      Welcome to Interceptor
+    </div>
+    <button
+      class="px-9 py-3 my-6 rounded font-semibold bg-indigo-700 text-sm text-white hover:opacity-75 active:opacity-100"
+      title="Add intercept"
+    >
+      Add Intercept
+    </button>
+  </div>
+</div>
+`;
+
 exports[`[Welcome] should match empty snapshot 1`] = `
 <div>
   <div