Merge pull request #24 from SafetyCulture/basic-filter

rogchap · web-flow · commit 6450b4ad00fe · 2019-04-25T18:25:21.000+10:00
Adds a basic filter to the toolbar
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,11 @@
+
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[Makefile]
+indent_style = tab
diff --git a/README.md b/README.md
@@ -2,7 +2,6 @@
 
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)
 
-> Under Development
 
 ![gRPC-Web Dev Tools](screenshots/dev_tools.png)
 
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "url": "https://github.com/SafetyCulture/grpc-web-devtools"
   },
   "dependencies": {
+    "fuse.js": "^3.4.4",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-json-view": "^1.19.1",
@@ -31,4 +32,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}
diff --git a/public/devtools.js b/public/devtools.js
@@ -1,3 +1,3 @@
 // Copyright (c) 2019 SafetyCulture Pty Ltd. All Rights Reserved.
 
-chrome.devtools.panels.create('gRPC-Web', null, 'index.html');
+chrome.devtools.panels.create('gRPC-Web', null, 'index.html');
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,33 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="theme-color" content="#000000" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon-16x16.png" sizes="16x16">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <meta name="theme-color" content="#000000" />
+  <title>gRPC-Web Dev Tools</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -37,5 +22,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
+</body>
+
 </html>
diff --git a/screenshots/dev_tools.png b/screenshots/dev_tools.png
diff --git a/src/App.js b/src/App.js
@@ -29,25 +29,3 @@ class App extends Component {
 }
 
 export default App;
-
-
-/*
-{network.map(req => {
-          return (
-            <div>
-              <h3>{req.method}</h3>
-              <div>Request: {JSON.stringify(req.request)}</div>
-              <div>Response: {JSON.stringify(req.response)}</div>
-              <hr></hr>
-            </div>
-          )
-        })}
-
-<div className="vbox widget">
-                <button onClick={() => {
-                    traceRequest({ method: "/a.url/goes/here", request: { req: "Some request" }, response: "Some response" });
-                  }}>add fake request
-                </button>
-              </div>
-
-        */
diff --git a/src/components/MainLayout.css b/src/components/MainLayout.css
@@ -31,4 +31,4 @@
   margin-left: -1px;
   margin-right: -4px;
   z-index: 9999;
-}
+}
diff --git a/src/components/MainLayout.js b/src/components/MainLayout.js
@@ -33,4 +33,4 @@ export default MainLayout
 //           </div>
 //           <div className="shadow-split-widget-contents shadow-split-widget-main">
 //             <NetworkDetails />
-//           </div>
+//           </div>
diff --git a/src/components/NetworkDetails.css b/src/components/NetworkDetails.css
@@ -2,4 +2,4 @@
 .details-data {
   padding: 4px;
   overflow: scroll;
-}
+}
diff --git a/src/components/NetworkList.css b/src/components/NetworkList.css
@@ -7,7 +7,7 @@
   position: relative;
   line-height: 120%;
   border: none;
-    flex: auto;
+  flex: auto;
 }
 
 .data-grid table {
@@ -100,4 +100,4 @@
   left: 0;
   right: 0;
   overflow-x: hidden;
-}
+}
diff --git a/src/components/NetworkList.js b/src/components/NetworkList.js
@@ -48,4 +48,4 @@ class NetworkList extends Component {
 
 const mapStateToProps = state => ({ network: state.network })
 const mapDispatchToProps = { selectLogEntry };
-export default connect(mapStateToProps, mapDispatchToProps)(NetworkList)
+export default connect(mapStateToProps, mapDispatchToProps)(NetworkList)
diff --git a/src/components/Toolbar.css b/src/components/Toolbar.css
@@ -40,6 +40,30 @@
   color: #333;
 }
 
+.toolbar-item.text {
+  margin: 0 3px;
+}
+
+.toolbar-item.text input {
+  padding-left: 3px;
+  width: 163px;
+  height: 18px;
+  line-height: 20px;
+  display: inline-block;
+  background: #FFF;
+  overflow-x: visible;
+  white-space: nowrap;
+  border: none;
+}
+
+.toolbar-item.text input:hover {
+  box-shadow: var(--focus-ring-inactive-shadow);
+}
+
+.toolbar-item.text input:focus {
+  box-shadow: var(--focus-ring-active-shadow);
+}
+
 :focus {
   outline-width: 0;
 }
@@ -65,4 +89,12 @@
 
 .toolbar-button:hover:not(:active) svg {
   fill: #333;
-}
+}
+
+.toolbar-button.open svg {
+  fill: var(--accent-color) !important;
+}
+
+.toolbar-button.enabled svg {
+  fill: var(--enabled-color) !important;
+}
diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js
@@ -3,39 +3,75 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { setPreserveLog, clearLog } from '../state/network';
+import { toggleFilter, setFilterValue } from '../state/toolbar';
 import ClearIcon from '../icons/Clear';
+import FilterIcon from '../icons/Filter';
 import './Toolbar.css';
 
+class Toolbar extends Component {
 
+  _renderFilterToolbar() {
+    const { filterIsOpen, filterValue } = this.props.toolbar;
+    if (filterIsOpen) {
+      return (
+        <div className="toolbar">
+          <div className="toolbar-shadow">
+            <span className="toolbar-item text">
+              <input
+                type="text"
+                placeholder="Filter"
+                value={filterValue}
+                onChange={this._onFilterValueChanged}
+              />
+            </span>
+          </div>
+        </div>
+      );
+    }
+  }
 
-class Toolbar extends Component {
   render() {
-    const { preserveLog, clearLog } = this.props;
+    const { preserveLog, clearLog, toggleFilter, toolbar: { filterIsOpen, filterIsEnabled } } = this.props;
     return (
-      <div className="toolbar">
-        <div className="toolbar-shadow">
-          <ToolbarButton title="Clear" onClick={() => clearLog({ force: true })} >
-            <ClearIcon />
-          </ToolbarButton>
-          <ToolbarDivider />
-          <span className="toolbar-item checkbox" title="Do not clear log on page reload / navigation">
-            <input
-              type="checkbox"
-              id="ui-checkbox-preserve-log"
-              checked={preserveLog}
-              onChange={this._onPreserveLogChanged}
-            />
-            <label for="ui-checkbox-preserve-log">Preserve log</label>
-          </span>
+      <>
+        <div className="toolbar">
+          <div className="toolbar-shadow">
+            <ToolbarButton title="Clear" onClick={() => clearLog({ force: true })} >
+              <ClearIcon />
+            </ToolbarButton>
+            <ToolbarButton
+              title="Filter"
+              onClick={() => toggleFilter()}
+              className={(filterIsOpen ? "open " : "") + (filterIsEnabled ? "enabled" : "")}
+            >
+              <FilterIcon />
+            </ToolbarButton>
+            <ToolbarDivider />
+            <span className="toolbar-item checkbox" title="Do not clear log on page reload / navigation">
+              <input
+                type="checkbox"
+                id="ui-checkbox-preserve-log"
+                checked={preserveLog}
+                onChange={this._onPreserveLogChanged}
+              />
+              <label htmlFor="ui-checkbox-preserve-log">Preserve log</label>
+            </span>
+          </div>
         </div>
-      </div>
+        {this._renderFilterToolbar()}
+      </>
     );
   }
 
-  _onPreserveLogChanged = (e) => {
+  _onPreserveLogChanged = e => {
     const { setPreserveLog } = this.props;
     setPreserveLog(e.target.checked);
   }
+
+  _onFilterValueChanged = e => {
+    const { setFilterValue } = this.props;
+    setFilterValue(e.target.value);
+  }
 }
 
 class ToolbarDivider extends Component {
@@ -48,15 +84,18 @@ class ToolbarDivider extends Component {
 
 class ToolbarButton extends Component {
   render() {
-    const { children } = this.props;
+    const { children, className = "", ...other } = this.props;
     return (
-      <button className="toolbar-button toolbar-item" {...this.props}>
+      <button className={"toolbar-button toolbar-item " + className} {...other}>
         {children}
       </button>
     );
   }
 }
 
-const mapStateToProps = state => ({ preserveLog: state.network.preserveLog });
-const mapDispatchToProps = { setPreserveLog, clearLog };
+const mapStateToProps = state => ({
+  preserveLog: state.network.preserveLog,
+  toolbar: state.toolbar,
+});
+const mapDispatchToProps = { setPreserveLog, clearLog, toggleFilter, setFilterValue };
 export default connect(mapStateToProps, mapDispatchToProps)(Toolbar);
diff --git a/src/icons/Clear.js b/src/icons/Clear.js
@@ -1,13 +1,13 @@
 import React, { PureComponent } from 'react';
 
 class Clear extends PureComponent {
-    render() {
-        return (
-            <svg width="14" viewBox="0 0 14 14">
-                <path d="M7.087,0.251C10.166,0.309 13.043,2.669 13.629,5.723C14.21,8.753 12.415,12.079 9.551,13.251C6.414,14.533 2.406,13.015 0.916,9.926C-0.625,6.728 0.865,2.415 4.148,0.881C5.011,0.478 5.959,0.269 6.913,0.251C7,0.25 7,0.25 7.087,0.251ZM3.166,4.415C1.773,6.497 2.43,9.67 4.651,10.984C6.129,11.858 8.086,11.816 9.546,10.861L9.622,10.809L3.191,4.378C3.182,4.39 3.174,4.402 3.166,4.415ZM6.957,2.375C6.192,2.386 5.435,2.584 4.764,2.951L11.043,9.247C12.539,6.573 10.667,2.533 7.179,2.378C7.105,2.376 7.031,2.375 6.957,2.375Z" />
-            </svg>
-        );
-    }
+  render() {
+    return (
+      <svg width="14" viewBox="0 0 14 14">
+        <path d="M7.087,0.251C10.166,0.309 13.043,2.669 13.629,5.723C14.21,8.753 12.415,12.079 9.551,13.251C6.414,14.533 2.406,13.015 0.916,9.926C-0.625,6.728 0.865,2.415 4.148,0.881C5.011,0.478 5.959,0.269 6.913,0.251C7,0.25 7,0.25 7.087,0.251ZM3.166,4.415C1.773,6.497 2.43,9.67 4.651,10.984C6.129,11.858 8.086,11.816 9.546,10.861L9.622,10.809L3.191,4.378C3.182,4.39 3.174,4.402 3.166,4.415ZM6.957,2.375C6.192,2.386 5.435,2.584 4.764,2.951L11.043,9.247C12.539,6.573 10.667,2.533 7.179,2.378C7.105,2.376 7.031,2.375 6.957,2.375Z" />
+      </svg>
+    );
+  }
 }
 
-export default Clear;
+export default Clear;
diff --git a/src/icons/Filter.js b/src/icons/Filter.js
@@ -0,0 +1,14 @@
+import React, { PureComponent } from 'react';
+
+class Filter extends PureComponent {
+  render() {
+    return (
+      <svg width="14" viewBox="0 0 14 14">
+        <path d="M3.434,5.127L10.581,5.127L8.56,7.42L8.56,11.523L5.456,11.584L5.456,7.42L3.434,5.127Z" style={{ fillOpacity: 0.4 }} />
+        <path d="M13.992,3.347L9.997,7.982L9.997,12.413C8.24,12.908 6.385,13.147 4.646,12.603L3.992,12.384L3.992,7.982L-0.005,3.347L-0.005,1.095L13.992,1.086C13.992,1.84 13.992,2.594 13.992,3.347ZM1.495,2.594L1.495,2.79L5.492,7.425L5.492,11.283C6.16,11.441 6.364,11.44 6.804,11.446C7.375,11.455 7.94,11.383 8.497,11.264L8.497,7.425L12.492,2.79L12.492,2.587C8.827,2.589 5.161,2.592 1.495,2.594Z" />
+      </svg>
+    );
+  }
+}
+
+export default Filter;
diff --git a/src/index.css b/src/index.css
@@ -53,6 +53,9 @@ code {
   --divider-color: #d0d0d0;
   --selection-bg-color: var(--accent-color);
   --selection-fg-color: white;
+  --focus-ring-inactive-shadow: 0 0 0 1px #e0e0e0;
+  --focus-ring-active-shadow: 0 0 0 1px var(--accent-color);
+  --enabled-color: #d80000;
 }
 
 .flex-auto {
@@ -75,4 +78,4 @@ code {
   position: relative;
   flex: auto;
   contain: style;
-}
+}
diff --git a/src/index.js b/src/index.js
diff --git a/src/state/network.js b/src/state/network.js
diff --git a/src/state/toolbar.js b/src/state/toolbar.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,6 @@`
`2`	`2`
`3`	`3`	`[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)`
`4`	`4`
`5`		`-> Under Development`
`6`	`5`
`7`	`6`	`![gRPC-Web Dev Tools](screenshots/dev_tools.png)`
`8`	`7`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`// Copyright (c) 2019 SafetyCulture Pty Ltd. All Rights Reserved.`
`2`	`2`
`3`		`-chrome.devtools.panels.create('gRPC-Web', null, 'index.html');`
	`3`	`+chrome.devtools.panels.create('gRPC-Web', null, 'index.html');`