From dc966ca8eecdb45fe3de368dd2e3f0914e66d215 Mon Sep 17 00:00:00 2001
From: Yu Yi Yang <yu-yi.yang@saucelabs.com>
Date: Fri, 26 Jul 2024 11:48:05 +0200
Subject: [PATCH] update test snapshots

---
 .../Components/Filters/Search.spec.jsx        |   9 +-
 .../__snapshots__/Search.spec.jsx.snap        |  67 +-
 .../__snapshots__/ImportHar.spec.jsx.snap     |   7 +-
 .../FilterContainer.spec.jsx.snap             | 703 ++++++++---------
 .../__snapshots__/MainContainer.spec.jsx.snap | 710 ++++++++----------
 .../NetworkTableContainer.spec.jsx.snap       |   7 +-
 6 files changed, 684 insertions(+), 819 deletions(-)

diff --git a/tests/__tests__/Components/Filters/Search.spec.jsx b/tests/__tests__/Components/Filters/Search.spec.jsx
index 3709b41..3004863 100644
--- a/tests/__tests__/Components/Filters/Search.spec.jsx
+++ b/tests/__tests__/Components/Filters/Search.spec.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 
 import Search from './../../../../src/Components/Filters/Search';
+import NetworkProvider from '../../../../src/state/network/NetworkProvider';
 
 describe('Search', () => {
   const params = {
@@ -11,7 +12,11 @@ describe('Search', () => {
   };
 
   it('renders without crashing', () => {
-    const element = shallow(<Search {...params} />);
+    const element = mount(
+      <NetworkProvider>
+        <Search {...params} />
+      </NetworkProvider>,
+    );
     expect(element).toMatchSnapshot();
   });
 });
diff --git a/tests/__tests__/Components/Filters/__snapshots__/Search.spec.jsx.snap b/tests/__tests__/Components/Filters/__snapshots__/Search.spec.jsx.snap
index 8ccb34c..d975a8b 100644
--- a/tests/__tests__/Components/Filters/__snapshots__/Search.spec.jsx.snap
+++ b/tests/__tests__/Components/Filters/__snapshots__/Search.spec.jsx.snap
@@ -1,23 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Search renders without crashing 1`] = `
-<div>
-  <Dropdown
-    className={null}
-    items={
-      Array [
-        "url",
-        "body",
-      ]
+<NetworkProvider
+  autoHighlightChange={false}
+  data={null}
+  fetchOptions={
+    Object {
+      "withCredentials": true,
     }
+  }
+  file={null}
+  initialState={
+    Immutable.Map {
+      "errorFilter": false,
+      "search": Object {
+        "name": "url",
+        "value": "",
+      },
+      "error": null,
+      "scrollToIndex": null,
+      "data": Immutable.List [],
+      "selectedReqIndex": null,
+      "reqDetail": null,
+      "showReqDetail": false,
+      "totalNetworkTime": null,
+      "actualData": Immutable.List [],
+      "filter": Object {
+        "name": null,
+        "value": null,
+      },
+      "dataSummary": Immutable.Map {},
+      "loading": false,
+      "sort": Object {
+        "isAcs": true,
+        "key": "startedDateTime",
+      },
+    }
+  }
+  onDataError={null}
+  onDataLoaded={null}
+  scrollRequestPosition="near"
+  scrollTimeStamp={null}
+>
+  <Search
+    name="url"
     onChange={[Function]}
-    selected="url"
-  />
-  <input
-    onChange={[Function]}
-    placeholder="Filter"
-    type="text"
     value="test"
-  />
-</div>
+  >
+    <input
+      onChange={[Function]}
+      placeholder="Search by full URL"
+      type="text"
+      value=""
+    />
+  </Search>
+</NetworkProvider>
 `;
diff --git a/tests/__tests__/Components/Import/__snapshots__/ImportHar.spec.jsx.snap b/tests/__tests__/Components/Import/__snapshots__/ImportHar.spec.jsx.snap
index 5742f55..cae8e84 100644
--- a/tests/__tests__/Components/Import/__snapshots__/ImportHar.spec.jsx.snap
+++ b/tests/__tests__/Components/Import/__snapshots__/ImportHar.spec.jsx.snap
@@ -72,17 +72,14 @@ exports[`ImportHAR renders without crashing 1`] = `
         type="file"
       />
       <Button
-        category="default"
         className={null}
         disabled={false}
         href={null}
-        material={true}
-        raised={true}
-        size="sm"
         type="button"
+        variant="default"
       >
         <button
-          className="btn btn-sm btn-md-default btn-md-default-raised btn-md-raised"
+          className="btn"
           disabled={false}
           href={null}
           type="button"
diff --git a/tests/__tests__/Containers/__snapshots__/FilterContainer.spec.jsx.snap b/tests/__tests__/Containers/__snapshots__/FilterContainer.spec.jsx.snap
index 439f578..eebdf2d 100644
--- a/tests/__tests__/Containers/__snapshots__/FilterContainer.spec.jsx.snap
+++ b/tests/__tests__/Containers/__snapshots__/FilterContainer.spec.jsx.snap
@@ -44,407 +44,324 @@ exports[`FilterContainer renders without crashing 1`] = `
 >
   <FilterContainer>
     <section>
-      <Row>
-        <div
-          className="sc-bwzfXH FqmtD"
+      <div>
+        <Search>
+          <input
+            onChange={[Function]}
+            placeholder="Search by full URL"
+            type="text"
+            value=""
+          />
+        </Search>
+      </div>
+      <div>
+        <Button
+          className="filter-button selected-filter"
+          disabled={false}
+          href={null}
+          key="All"
+          onClick={[Function]}
+          size="sm"
+          type="button"
+          variant="default"
         >
-          <Col
-            md={5}
-            sm={4}
-            xs={12}
+          <button
+            className="btn filter-button selected-filter"
+            disabled={false}
+            href={null}
+            onClick={[Function]}
+            size="sm"
+            type="button"
+          >
+            All
+          </button>
+        </Button>
+        <Button
+          className="filter-button"
+          disabled={false}
+          href={null}
+          key="XHR"
+          onClick={[Function]}
+          size="sm"
+          type="button"
+          variant="default"
+        >
+          <button
+            className="btn filter-button"
+            disabled={false}
+            href={null}
+            onClick={[Function]}
+            size="sm"
+            type="button"
+          >
+            XHR
+          </button>
+        </Button>
+        <Button
+          className="filter-button"
+          disabled={false}
+          href={null}
+          key="JS"
+          onClick={[Function]}
+          size="sm"
+          type="button"
+          variant="default"
+        >
+          <button
+            className="btn filter-button"
+            disabled={false}
+            href={null}
+            onClick={[Function]}
+            size="sm"
+            type="button"
+          >
+            JS
+          </button>
+        </Button>
+        <Button
+          className="filter-button"
+          disabled={false}
+          href={null}
+          key="CSS"
+          onClick={[Function]}
+          size="sm"
+          type="button"
+          variant="default"
+        >
+          <button
+            className="btn filter-button"
+            disabled={false}
+            href={null}
+            onClick={[Function]}
+            size="sm"
+            type="button"
+          >
+            CSS
+          </button>
+        </Button>
+        <Button
+          className="filter-button"
+          disabled={false}
+          href={null}
+          key="Img"
+          onClick={[Function]}
+          size="sm"
+          type="button"
+          variant="default"
+        >
+          <button
+            className="btn filter-button"
+            disabled={false}
+            href={null}
+            onClick={[Function]}
+            size="sm"
+            type="button"
+          >
+            Img
+          </button>
+        </Button>
+        <Button
+          className="filter-button"
+          disabled={false}
+          href={null}
+          key="Media"
+          onClick={[Function]}
+          size="sm"
+          type="button"
+          variant="default"
+        >
+          <button
+            className="btn filter-button"
+            disabled={false}
+            href={null}
+            onClick={[Function]}
+            size="sm"
+            type="button"
+          >
+            Media
+          </button>
+        </Button>
+        <Button
+          className="filter-button"
+          disabled={false}
+          href={null}
+          key="Font"
+          onClick={[Function]}
+          size="sm"
+          type="button"
+          variant="default"
+        >
+          <button
+            className="btn filter-button"
+            disabled={false}
+            href={null}
+            onClick={[Function]}
+            size="sm"
+            type="button"
+          >
+            Font
+          </button>
+        </Button>
+        <Button
+          className="filter-button"
+          disabled={false}
+          href={null}
+          key="Doc"
+          onClick={[Function]}
+          size="sm"
+          type="button"
+          variant="default"
+        >
+          <button
+            className="btn filter-button"
+            disabled={false}
+            href={null}
+            onClick={[Function]}
+            size="sm"
+            type="button"
+          >
+            Doc
+          </button>
+        </Button>
+        <Button
+          className="filter-button"
+          disabled={false}
+          href={null}
+          key="WS"
+          onClick={[Function]}
+          size="sm"
+          type="button"
+          variant="default"
+        >
+          <button
+            className="btn filter-button"
+            disabled={false}
+            href={null}
+            onClick={[Function]}
+            size="sm"
+            type="button"
+          >
+            WS
+          </button>
+        </Button>
+        <Button
+          className="filter-button"
+          disabled={false}
+          href={null}
+          key="Manifest"
+          onClick={[Function]}
+          size="sm"
+          type="button"
+          variant="default"
+        >
+          <button
+            className="btn filter-button"
+            disabled={false}
+            href={null}
+            onClick={[Function]}
+            size="sm"
+            type="button"
+          >
+            Manifest
+          </button>
+        </Button>
+        <ErrorFilter
+          isError={false}
+          onChange={[Function]}
+        >
+          <Checkbox
+            containerClassName=""
+            isChecked={false}
+            onChange={[Function]}
+            title="error"
           >
             <div
-              className="sc-htpNat cDbBBt"
+              className="checkbox-container"
             >
-              <Search
-                name="url"
-                onChange={[Function]}
-                value=""
+              <label
+                title="error"
               >
-                <div>
-                  <Dropdown
-                    className={null}
-                    items={
-                      Array [
-                        "url",
-                        "body",
-                      ]
-                    }
-                    onChange={[Function]}
-                    selected="url"
-                  >
-                    <span
-                      className="dropdown-container"
-                    >
-                      <Button
-                        category="default"
-                        className="dropdown-toggle"
-                        disabled={false}
-                        href={null}
-                        material={true}
-                        onClick={[Function]}
-                        raised={false}
-                        size="sm"
-                        type="button"
-                      >
-                        <button
-                          className="btn dropdown-toggle btn-sm btn-md-default"
-                          disabled={false}
-                          href={null}
-                          onClick={[Function]}
-                          type="button"
-                        >
-                          url
-                        </button>
-                      </Button>
-                    </span>
-                  </Dropdown>
-                  <input
-                    onChange={[Function]}
-                    placeholder="Filter"
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </Search>
+                <input
+                  checked={false}
+                  onChange={[Function]}
+                  type="checkbox"
+                />
+                Errors Only
+              </label>
             </div>
-          </Col>
-          <Col
-            md={7}
-            sm={8}
-            xs={12}
+          </Checkbox>
+        </ErrorFilter>
+        <ImportHar
+          className={null}
+          showButton={true}
+        >
+          <div
+            onBlur={[Function]}
+            onClick={[Function]}
+            onDragEnter={[Function]}
+            onDragLeave={[Function]}
+            onDragOver={[Function]}
+            onDrop={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={0}
           >
-            <div
-              className="sc-htpNat dizpnI"
+            <input
+              accept=".har"
+              autoComplete="off"
+              multiple={false}
+              onChange={[Function]}
+              onClick={[Function]}
+              style={
+                Object {
+                  "display": "none",
+                }
+              }
+              tabIndex={-1}
+              type="file"
+            />
+            <Button
+              className={null}
+              disabled={false}
+              href={null}
+              type="button"
+              variant="default"
             >
-              <div>
-                <Button
-                  category="default"
-                  className="filter-button selected-filter"
-                  disabled={false}
-                  href={null}
-                  key="All"
-                  material={true}
-                  onClick={[Function]}
-                  raised={true}
-                  size="sm"
-                  type="button"
-                >
-                  <button
-                    className="btn filter-button selected-filter btn-sm btn-md-default btn-md-default-raised btn-md-raised"
-                    disabled={false}
-                    href={null}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    All
-                  </button>
-                </Button>
-                <Button
-                  category="default"
-                  className="filter-button"
-                  disabled={false}
-                  href={null}
-                  key="XHR"
-                  material={true}
-                  onClick={[Function]}
-                  raised={false}
-                  size="sm"
-                  type="button"
-                >
-                  <button
-                    className="btn filter-button btn-sm btn-md-default"
-                    disabled={false}
-                    href={null}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    XHR
-                  </button>
-                </Button>
-                <Button
-                  category="default"
-                  className="filter-button"
-                  disabled={false}
-                  href={null}
-                  key="JS"
-                  material={true}
-                  onClick={[Function]}
-                  raised={false}
-                  size="sm"
-                  type="button"
-                >
-                  <button
-                    className="btn filter-button btn-sm btn-md-default"
-                    disabled={false}
-                    href={null}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    JS
-                  </button>
-                </Button>
-                <Button
-                  category="default"
-                  className="filter-button"
-                  disabled={false}
-                  href={null}
-                  key="CSS"
-                  material={true}
-                  onClick={[Function]}
-                  raised={false}
-                  size="sm"
-                  type="button"
-                >
-                  <button
-                    className="btn filter-button btn-sm btn-md-default"
-                    disabled={false}
-                    href={null}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    CSS
-                  </button>
-                </Button>
-                <Button
-                  category="default"
-                  className="filter-button"
-                  disabled={false}
-                  href={null}
-                  key="Img"
-                  material={true}
-                  onClick={[Function]}
-                  raised={false}
-                  size="sm"
-                  type="button"
-                >
-                  <button
-                    className="btn filter-button btn-sm btn-md-default"
-                    disabled={false}
-                    href={null}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    Img
-                  </button>
-                </Button>
-                <Button
-                  category="default"
-                  className="filter-button"
-                  disabled={false}
-                  href={null}
-                  key="Media"
-                  material={true}
-                  onClick={[Function]}
-                  raised={false}
-                  size="sm"
-                  type="button"
-                >
-                  <button
-                    className="btn filter-button btn-sm btn-md-default"
-                    disabled={false}
-                    href={null}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    Media
-                  </button>
-                </Button>
-                <Button
-                  category="default"
-                  className="filter-button"
-                  disabled={false}
-                  href={null}
-                  key="Font"
-                  material={true}
-                  onClick={[Function]}
-                  raised={false}
-                  size="sm"
-                  type="button"
-                >
-                  <button
-                    className="btn filter-button btn-sm btn-md-default"
-                    disabled={false}
-                    href={null}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    Font
-                  </button>
-                </Button>
-                <Button
-                  category="default"
-                  className="filter-button"
-                  disabled={false}
-                  href={null}
-                  key="Doc"
-                  material={true}
-                  onClick={[Function]}
-                  raised={false}
-                  size="sm"
-                  type="button"
-                >
-                  <button
-                    className="btn filter-button btn-sm btn-md-default"
-                    disabled={false}
-                    href={null}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    Doc
-                  </button>
-                </Button>
-                <Button
-                  category="default"
-                  className="filter-button"
-                  disabled={false}
-                  href={null}
-                  key="WS"
-                  material={true}
-                  onClick={[Function]}
-                  raised={false}
-                  size="sm"
-                  type="button"
-                >
-                  <button
-                    className="btn filter-button btn-sm btn-md-default"
-                    disabled={false}
-                    href={null}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    WS
-                  </button>
-                </Button>
-                <Button
-                  category="default"
-                  className="filter-button"
-                  disabled={false}
-                  href={null}
-                  key="Manifest"
-                  material={true}
-                  onClick={[Function]}
-                  raised={false}
-                  size="sm"
-                  type="button"
-                >
-                  <button
-                    className="btn filter-button btn-sm btn-md-default"
-                    disabled={false}
-                    href={null}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    Manifest
-                  </button>
-                </Button>
-                <ErrorFilter
-                  isError={false}
-                  onChange={[Function]}
-                >
-                  <Checkbox
-                    containerClassName=""
-                    isChecked={false}
-                    onChange={[Function]}
-                    title="error"
-                  >
-                    <div
-                      className="checkbox-container"
-                    >
-                      <label
-                        title="error"
-                      >
-                        <input
-                          checked={false}
-                          onChange={[Function]}
-                          type="checkbox"
-                        />
-                        Errors Only
-                      </label>
-                    </div>
-                  </Checkbox>
-                </ErrorFilter>
-                <ImportHar
-                  className={null}
-                  showButton={true}
-                >
-                  <div
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onDragEnter={[Function]}
-                    onDragLeave={[Function]}
-                    onDragOver={[Function]}
-                    onDrop={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    tabIndex={0}
-                  >
-                    <input
-                      accept=".har"
-                      autoComplete="off"
-                      multiple={false}
-                      onChange={[Function]}
-                      onClick={[Function]}
-                      style={
-                        Object {
-                          "display": "none",
-                        }
-                      }
-                      tabIndex={-1}
-                      type="file"
-                    />
-                    <Button
-                      category="default"
-                      className={null}
-                      disabled={false}
-                      href={null}
-                      material={true}
-                      raised={true}
-                      size="sm"
-                      type="button"
-                    >
-                      <button
-                        className="btn btn-sm btn-md-default btn-md-default-raised btn-md-raised"
-                        disabled={false}
-                        href={null}
-                        type="button"
-                      >
-                        Import HAR
-                      </button>
-                    </Button>
-                  </div>
-                </ImportHar>
-                <Reset
-                  className=""
-                  onReset={[Function]}
-                >
-                  <Button
-                    category="default"
-                    className=""
-                    disabled={false}
-                    href={null}
-                    material={true}
-                    onClick={[Function]}
-                    raised={true}
-                    size="sm"
-                    type="button"
-                  >
-                    <button
-                      className="btn btn-sm btn-md-default btn-md-default-raised btn-md-raised"
-                      disabled={false}
-                      href={null}
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      Reset
-                    </button>
-                  </Button>
-                </Reset>
-              </div>
-            </div>
-          </Col>
-        </div>
-      </Row>
+              <button
+                className="btn"
+                disabled={false}
+                href={null}
+                type="button"
+              >
+                Import HAR
+              </button>
+            </Button>
+          </div>
+        </ImportHar>
+        <Reset
+          className=""
+          onReset={[Function]}
+        >
+          <Button
+            className=""
+            disabled={false}
+            href={null}
+            onClick={[Function]}
+            type="button"
+            variant="default"
+          >
+            <button
+              className="btn"
+              disabled={false}
+              href={null}
+              onClick={[Function]}
+              type="button"
+            >
+              Reset
+            </button>
+          </Button>
+        </Reset>
+      </div>
     </section>
   </FilterContainer>
 </NetworkProvider>
diff --git a/tests/__tests__/Containers/__snapshots__/MainContainer.spec.jsx.snap b/tests/__tests__/Containers/__snapshots__/MainContainer.spec.jsx.snap
index 323e894..68d36e4 100644
--- a/tests/__tests__/Containers/__snapshots__/MainContainer.spec.jsx.snap
+++ b/tests/__tests__/Containers/__snapshots__/MainContainer.spec.jsx.snap
@@ -51,407 +51,324 @@ exports[`MainContainer renders without crashing 1`] = `
     >
       <FilterContainer>
         <section>
-          <Row>
-            <div
-              className="sc-bwzfXH FqmtD"
+          <div>
+            <Search>
+              <input
+                onChange={[Function]}
+                placeholder="Search by full URL"
+                type="text"
+                value=""
+              />
+            </Search>
+          </div>
+          <div>
+            <Button
+              className="filter-button selected-filter"
+              disabled={false}
+              href={null}
+              key="All"
+              onClick={[Function]}
+              size="sm"
+              type="button"
+              variant="default"
             >
-              <Col
-                md={5}
-                sm={4}
-                xs={12}
+              <button
+                className="btn filter-button selected-filter"
+                disabled={false}
+                href={null}
+                onClick={[Function]}
+                size="sm"
+                type="button"
+              >
+                All
+              </button>
+            </Button>
+            <Button
+              className="filter-button"
+              disabled={false}
+              href={null}
+              key="XHR"
+              onClick={[Function]}
+              size="sm"
+              type="button"
+              variant="default"
+            >
+              <button
+                className="btn filter-button"
+                disabled={false}
+                href={null}
+                onClick={[Function]}
+                size="sm"
+                type="button"
+              >
+                XHR
+              </button>
+            </Button>
+            <Button
+              className="filter-button"
+              disabled={false}
+              href={null}
+              key="JS"
+              onClick={[Function]}
+              size="sm"
+              type="button"
+              variant="default"
+            >
+              <button
+                className="btn filter-button"
+                disabled={false}
+                href={null}
+                onClick={[Function]}
+                size="sm"
+                type="button"
+              >
+                JS
+              </button>
+            </Button>
+            <Button
+              className="filter-button"
+              disabled={false}
+              href={null}
+              key="CSS"
+              onClick={[Function]}
+              size="sm"
+              type="button"
+              variant="default"
+            >
+              <button
+                className="btn filter-button"
+                disabled={false}
+                href={null}
+                onClick={[Function]}
+                size="sm"
+                type="button"
+              >
+                CSS
+              </button>
+            </Button>
+            <Button
+              className="filter-button"
+              disabled={false}
+              href={null}
+              key="Img"
+              onClick={[Function]}
+              size="sm"
+              type="button"
+              variant="default"
+            >
+              <button
+                className="btn filter-button"
+                disabled={false}
+                href={null}
+                onClick={[Function]}
+                size="sm"
+                type="button"
+              >
+                Img
+              </button>
+            </Button>
+            <Button
+              className="filter-button"
+              disabled={false}
+              href={null}
+              key="Media"
+              onClick={[Function]}
+              size="sm"
+              type="button"
+              variant="default"
+            >
+              <button
+                className="btn filter-button"
+                disabled={false}
+                href={null}
+                onClick={[Function]}
+                size="sm"
+                type="button"
+              >
+                Media
+              </button>
+            </Button>
+            <Button
+              className="filter-button"
+              disabled={false}
+              href={null}
+              key="Font"
+              onClick={[Function]}
+              size="sm"
+              type="button"
+              variant="default"
+            >
+              <button
+                className="btn filter-button"
+                disabled={false}
+                href={null}
+                onClick={[Function]}
+                size="sm"
+                type="button"
+              >
+                Font
+              </button>
+            </Button>
+            <Button
+              className="filter-button"
+              disabled={false}
+              href={null}
+              key="Doc"
+              onClick={[Function]}
+              size="sm"
+              type="button"
+              variant="default"
+            >
+              <button
+                className="btn filter-button"
+                disabled={false}
+                href={null}
+                onClick={[Function]}
+                size="sm"
+                type="button"
+              >
+                Doc
+              </button>
+            </Button>
+            <Button
+              className="filter-button"
+              disabled={false}
+              href={null}
+              key="WS"
+              onClick={[Function]}
+              size="sm"
+              type="button"
+              variant="default"
+            >
+              <button
+                className="btn filter-button"
+                disabled={false}
+                href={null}
+                onClick={[Function]}
+                size="sm"
+                type="button"
+              >
+                WS
+              </button>
+            </Button>
+            <Button
+              className="filter-button"
+              disabled={false}
+              href={null}
+              key="Manifest"
+              onClick={[Function]}
+              size="sm"
+              type="button"
+              variant="default"
+            >
+              <button
+                className="btn filter-button"
+                disabled={false}
+                href={null}
+                onClick={[Function]}
+                size="sm"
+                type="button"
+              >
+                Manifest
+              </button>
+            </Button>
+            <ErrorFilter
+              isError={false}
+              onChange={[Function]}
+            >
+              <Checkbox
+                containerClassName=""
+                isChecked={false}
+                onChange={[Function]}
+                title="error"
               >
                 <div
-                  className="sc-htpNat cDbBBt"
+                  className="checkbox-container"
                 >
-                  <Search
-                    name="url"
-                    onChange={[Function]}
-                    value=""
+                  <label
+                    title="error"
                   >
-                    <div>
-                      <Dropdown
-                        className={null}
-                        items={
-                          Array [
-                            "url",
-                            "body",
-                          ]
-                        }
-                        onChange={[Function]}
-                        selected="url"
-                      >
-                        <span
-                          className="dropdown-container"
-                        >
-                          <Button
-                            category="default"
-                            className="dropdown-toggle"
-                            disabled={false}
-                            href={null}
-                            material={true}
-                            onClick={[Function]}
-                            raised={false}
-                            size="sm"
-                            type="button"
-                          >
-                            <button
-                              className="btn dropdown-toggle btn-sm btn-md-default"
-                              disabled={false}
-                              href={null}
-                              onClick={[Function]}
-                              type="button"
-                            >
-                              url
-                            </button>
-                          </Button>
-                        </span>
-                      </Dropdown>
-                      <input
-                        onChange={[Function]}
-                        placeholder="Filter"
-                        type="text"
-                        value=""
-                      />
-                    </div>
-                  </Search>
+                    <input
+                      checked={false}
+                      onChange={[Function]}
+                      type="checkbox"
+                    />
+                    Errors Only
+                  </label>
                 </div>
-              </Col>
-              <Col
-                md={7}
-                sm={8}
-                xs={12}
+              </Checkbox>
+            </ErrorFilter>
+            <ImportHar
+              className={null}
+              showButton={true}
+            >
+              <div
+                onBlur={[Function]}
+                onClick={[Function]}
+                onDragEnter={[Function]}
+                onDragLeave={[Function]}
+                onDragOver={[Function]}
+                onDrop={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                tabIndex={0}
               >
-                <div
-                  className="sc-htpNat dizpnI"
+                <input
+                  accept=".har"
+                  autoComplete="off"
+                  multiple={false}
+                  onChange={[Function]}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "display": "none",
+                    }
+                  }
+                  tabIndex={-1}
+                  type="file"
+                />
+                <Button
+                  className={null}
+                  disabled={false}
+                  href={null}
+                  type="button"
+                  variant="default"
                 >
-                  <div>
-                    <Button
-                      category="default"
-                      className="filter-button selected-filter"
-                      disabled={false}
-                      href={null}
-                      key="All"
-                      material={true}
-                      onClick={[Function]}
-                      raised={true}
-                      size="sm"
-                      type="button"
-                    >
-                      <button
-                        className="btn filter-button selected-filter btn-sm btn-md-default btn-md-default-raised btn-md-raised"
-                        disabled={false}
-                        href={null}
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        All
-                      </button>
-                    </Button>
-                    <Button
-                      category="default"
-                      className="filter-button"
-                      disabled={false}
-                      href={null}
-                      key="XHR"
-                      material={true}
-                      onClick={[Function]}
-                      raised={false}
-                      size="sm"
-                      type="button"
-                    >
-                      <button
-                        className="btn filter-button btn-sm btn-md-default"
-                        disabled={false}
-                        href={null}
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        XHR
-                      </button>
-                    </Button>
-                    <Button
-                      category="default"
-                      className="filter-button"
-                      disabled={false}
-                      href={null}
-                      key="JS"
-                      material={true}
-                      onClick={[Function]}
-                      raised={false}
-                      size="sm"
-                      type="button"
-                    >
-                      <button
-                        className="btn filter-button btn-sm btn-md-default"
-                        disabled={false}
-                        href={null}
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        JS
-                      </button>
-                    </Button>
-                    <Button
-                      category="default"
-                      className="filter-button"
-                      disabled={false}
-                      href={null}
-                      key="CSS"
-                      material={true}
-                      onClick={[Function]}
-                      raised={false}
-                      size="sm"
-                      type="button"
-                    >
-                      <button
-                        className="btn filter-button btn-sm btn-md-default"
-                        disabled={false}
-                        href={null}
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        CSS
-                      </button>
-                    </Button>
-                    <Button
-                      category="default"
-                      className="filter-button"
-                      disabled={false}
-                      href={null}
-                      key="Img"
-                      material={true}
-                      onClick={[Function]}
-                      raised={false}
-                      size="sm"
-                      type="button"
-                    >
-                      <button
-                        className="btn filter-button btn-sm btn-md-default"
-                        disabled={false}
-                        href={null}
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        Img
-                      </button>
-                    </Button>
-                    <Button
-                      category="default"
-                      className="filter-button"
-                      disabled={false}
-                      href={null}
-                      key="Media"
-                      material={true}
-                      onClick={[Function]}
-                      raised={false}
-                      size="sm"
-                      type="button"
-                    >
-                      <button
-                        className="btn filter-button btn-sm btn-md-default"
-                        disabled={false}
-                        href={null}
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        Media
-                      </button>
-                    </Button>
-                    <Button
-                      category="default"
-                      className="filter-button"
-                      disabled={false}
-                      href={null}
-                      key="Font"
-                      material={true}
-                      onClick={[Function]}
-                      raised={false}
-                      size="sm"
-                      type="button"
-                    >
-                      <button
-                        className="btn filter-button btn-sm btn-md-default"
-                        disabled={false}
-                        href={null}
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        Font
-                      </button>
-                    </Button>
-                    <Button
-                      category="default"
-                      className="filter-button"
-                      disabled={false}
-                      href={null}
-                      key="Doc"
-                      material={true}
-                      onClick={[Function]}
-                      raised={false}
-                      size="sm"
-                      type="button"
-                    >
-                      <button
-                        className="btn filter-button btn-sm btn-md-default"
-                        disabled={false}
-                        href={null}
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        Doc
-                      </button>
-                    </Button>
-                    <Button
-                      category="default"
-                      className="filter-button"
-                      disabled={false}
-                      href={null}
-                      key="WS"
-                      material={true}
-                      onClick={[Function]}
-                      raised={false}
-                      size="sm"
-                      type="button"
-                    >
-                      <button
-                        className="btn filter-button btn-sm btn-md-default"
-                        disabled={false}
-                        href={null}
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        WS
-                      </button>
-                    </Button>
-                    <Button
-                      category="default"
-                      className="filter-button"
-                      disabled={false}
-                      href={null}
-                      key="Manifest"
-                      material={true}
-                      onClick={[Function]}
-                      raised={false}
-                      size="sm"
-                      type="button"
-                    >
-                      <button
-                        className="btn filter-button btn-sm btn-md-default"
-                        disabled={false}
-                        href={null}
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        Manifest
-                      </button>
-                    </Button>
-                    <ErrorFilter
-                      isError={false}
-                      onChange={[Function]}
-                    >
-                      <Checkbox
-                        containerClassName=""
-                        isChecked={false}
-                        onChange={[Function]}
-                        title="error"
-                      >
-                        <div
-                          className="checkbox-container"
-                        >
-                          <label
-                            title="error"
-                          >
-                            <input
-                              checked={false}
-                              onChange={[Function]}
-                              type="checkbox"
-                            />
-                            Errors Only
-                          </label>
-                        </div>
-                      </Checkbox>
-                    </ErrorFilter>
-                    <ImportHar
-                      className={null}
-                      showButton={true}
-                    >
-                      <div
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onDragEnter={[Function]}
-                        onDragLeave={[Function]}
-                        onDragOver={[Function]}
-                        onDrop={[Function]}
-                        onFocus={[Function]}
-                        onKeyDown={[Function]}
-                        tabIndex={0}
-                      >
-                        <input
-                          accept=".har"
-                          autoComplete="off"
-                          multiple={false}
-                          onChange={[Function]}
-                          onClick={[Function]}
-                          style={
-                            Object {
-                              "display": "none",
-                            }
-                          }
-                          tabIndex={-1}
-                          type="file"
-                        />
-                        <Button
-                          category="default"
-                          className={null}
-                          disabled={false}
-                          href={null}
-                          material={true}
-                          raised={true}
-                          size="sm"
-                          type="button"
-                        >
-                          <button
-                            className="btn btn-sm btn-md-default btn-md-default-raised btn-md-raised"
-                            disabled={false}
-                            href={null}
-                            type="button"
-                          >
-                            Import HAR
-                          </button>
-                        </Button>
-                      </div>
-                    </ImportHar>
-                    <Reset
-                      className=""
-                      onReset={[Function]}
-                    >
-                      <Button
-                        category="default"
-                        className=""
-                        disabled={false}
-                        href={null}
-                        material={true}
-                        onClick={[Function]}
-                        raised={true}
-                        size="sm"
-                        type="button"
-                      >
-                        <button
-                          className="btn btn-sm btn-md-default btn-md-default-raised btn-md-raised"
-                          disabled={false}
-                          href={null}
-                          onClick={[Function]}
-                          type="button"
-                        >
-                          Reset
-                        </button>
-                      </Button>
-                    </Reset>
-                  </div>
-                </div>
-              </Col>
-            </div>
-          </Row>
+                  <button
+                    className="btn"
+                    disabled={false}
+                    href={null}
+                    type="button"
+                  >
+                    Import HAR
+                  </button>
+                </Button>
+              </div>
+            </ImportHar>
+            <Reset
+              className=""
+              onReset={[Function]}
+            >
+              <Button
+                className=""
+                disabled={false}
+                href={null}
+                onClick={[Function]}
+                type="button"
+                variant="default"
+              >
+                <button
+                  className="btn"
+                  disabled={false}
+                  href={null}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  Reset
+                </button>
+              </Button>
+            </Reset>
+          </div>
         </section>
       </FilterContainer>
       <section>
@@ -535,18 +452,15 @@ exports[`MainContainer renders without crashing 1`] = `
                       value=""
                     />
                     <Button
-                      category="default"
                       className={null}
                       disabled={false}
                       href={null}
-                      material={true}
                       onClick={[Function]}
-                      raised={true}
-                      size="sm"
                       type="button"
+                      variant="default"
                     >
                       <button
-                        className="btn btn-sm btn-md-default btn-md-default-raised btn-md-raised"
+                        className="btn"
                         disabled={false}
                         href={null}
                         onClick={[Function]}
diff --git a/tests/__tests__/Containers/__snapshots__/NetworkTableContainer.spec.jsx.snap b/tests/__tests__/Containers/__snapshots__/NetworkTableContainer.spec.jsx.snap
index 96dfecf..78edea0 100644
--- a/tests/__tests__/Containers/__snapshots__/NetworkTableContainer.spec.jsx.snap
+++ b/tests/__tests__/Containers/__snapshots__/NetworkTableContainer.spec.jsx.snap
@@ -122,18 +122,15 @@ exports[`NetworkTableContainer renders without crashing 1`] = `
                 value=""
               />
               <Button
-                category="default"
                 className={null}
                 disabled={false}
                 href={null}
-                material={true}
                 onClick={[Function]}
-                raised={true}
-                size="sm"
                 type="button"
+                variant="default"
               >
                 <button
-                  className="btn btn-sm btn-md-default btn-md-default-raised btn-md-raised"
+                  className="btn"
                   disabled={false}
                   href={null}
                   onClick={[Function]}