Feature/add console filters (codesandbox#1225)

abdullahtariq1171 · SaraVieira · commit b4b714356f8a · 2019-01-10T21:05:34.000+01:00
* add console filters * update 'console-feed' * connect filters with 'console-feed' * Add @abdullahtariq1171 as a contributor * update 'console-feed' update-checksums * Change input field component to FilterInput * use common <Select /> * add border for console filter select
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -645,6 +645,16 @@
       ]
     },
     {
+      "login": "abdullahtariq1171",
+      "name": "Abdullah",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/5623766?v=4",
+      "profile": "https://github.com/abdullahtariq1171",
+      "contributions": [
+        "code",
+        "design"
+]
+}
+{
       "login": "dv297",
       "name": "Daniel Vu",
       "avatar_url": "https://avatars2.githubusercontent.com/u/5365325?v=4",
diff --git a/README.md b/README.md
@@ -51,7 +51,7 @@ Thanks goes to these wonderful people
 | [<img src="https://avatars0.githubusercontent.com/u/1820292?v=4" width="100px;"/><br /><sub><b>Michel Weststrate</b></sub>](https://twitter.com/mweststrate)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=mweststrate "Code") | [<img src="https://avatars0.githubusercontent.com/u/52824?v=4" width="100px;"/><br /><sub><b>Oleg</b></sub>](https://kof.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=kof "Code") | [<img src="https://avatars0.githubusercontent.com/u/1127037?v=4" width="100px;"/><br /><sub><b>Paul Sherman</b></sub>](https://www.pshrmn.com)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Apshrmn "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=pshrmn "Code") | [<img src="https://avatars2.githubusercontent.com/u/9244507?v=4" width="100px;"/><br /><sub><b>Ro Savage</b></sub>](https://github.com/ro-savage)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ro-savage "Code") | [<img src="https://avatars3.githubusercontent.com/u/13242392?v=4" width="100px;"/><br /><sub><b>Sam Denty</b></sub>](https://samdd.me)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=samdenty99 "Code") | [<img src="https://avatars1.githubusercontent.com/u/3087225?v=4" width="100px;"/><br /><sub><b>Zephraph</b></sub>](https://github.com/zephraph)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=zephraph "Code") | [<img src="https://avatars1.githubusercontent.com/u/1900735?v=4" width="100px;"/><br /><sub><b>Josh Waller</b></sub>](https://www.joshwaller.me)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdxprograms "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdxprograms "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=mdxprograms "Documentation") |
 | [<img src="https://avatars0.githubusercontent.com/u/1195863?v=4" width="100px;"/><br /><sub><b>Joe Ng'ethe</b></sub>](http://joey.co.ke)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=joeynimu "Code") | [<img src="https://avatars0.githubusercontent.com/u/576935?v=4" width="100px;"/><br /><sub><b>Carles Codony</b></sub>](https://github.com/bitblitter)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bitblitter "Code") | [<img src="https://avatars2.githubusercontent.com/u/468006?v=4" width="100px;"/><br /><sub><b>Vytenis</b></sub>](https://github.com/FDiskas)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=FDiskas "Code") | [<img src="https://avatars1.githubusercontent.com/u/894149?v=4" width="100px;"/><br /><sub><b>Manuel Dugué</b></sub>](http://manueldugue.de)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdugue "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdugue "Code") | [<img src="https://avatars2.githubusercontent.com/u/5346497?v=4" width="100px;"/><br /><sub><b>Demian Dekoninck</b></sub>](https://dem.be)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=DemianD "Code") | [<img src="https://avatars2.githubusercontent.com/u/3144549?v=4" width="100px;"/><br /><sub><b>Drake Costa</b></sub>](http://www.saeris.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Saeris "Code") | [<img src="https://avatars2.githubusercontent.com/u/433394?v=4" width="100px;"/><br /><sub><b>Marko Stijak</b></sub>](https://cxjs.io/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=mstijak "Code") |
 | [<img src="https://avatars2.githubusercontent.com/u/10588170?v=4" width="100px;"/><br /><sub><b>Ilya</b></sub>](https://twitter.com/ilya_komar0ff)<br />[💬](#question-Komar0ff "Answering Questions") [🤔](#ideas-Komar0ff "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/10627086?v=4" width="100px;"/><br /><sub><b>Emerson Laurentino</b></sub>](https://twitter.com/elaurent_)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=emersonlaurentino "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Aemersonlaurentino "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/180963?v=4" width="100px;"/><br /><sub><b>Aaron Reisman</b></sub>](https://github.com/lifeiscontent)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Alifeiscontent "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=lifeiscontent "Code") [📦](#platform-lifeiscontent "Packaging/porting to new platform") | [<img src="https://avatars2.githubusercontent.com/u/19484365?v=4" width="100px;"/><br /><sub><b>Colton Colcleasure</b></sub>](https://github.com/colshacol)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=colshacol "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Acolshacol "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/497242?v=4" width="100px;"/><br /><sub><b>PJ Walker</b></sub>](https://github.com/PJWalker)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3APJWalker "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=PJWalker "Code") | [<img src="https://avatars2.githubusercontent.com/u/29819102?v=4" width="100px;"/><br /><sub><b>Satya Rohith</b></sub>](https://satya.tech)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=satyarohith "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=satyarohith "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/17421347?v=4" width="100px;"/><br /><sub><b>Melanie Seltzer</b></sub>](https://www.melanieseltzer.io/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=melanieseltzer "Code") |
-| [<img src="https://avatars1.githubusercontent.com/u/23313266?v=4" width="100px;"/><br /><sub><b>ZYSzys</b></sub>](http://zyszys.top)<br />[📖](https://github.com/CompuIves/codesandbox-client/commits?author=ZYSzys "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1051509?v=4" width="100px;"/><br /><sub><b>Sara Vieira</b></sub>](http://iamsaravieira.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=SaraVieira "Code") [🎨](#design-SaraVieira "Design") [🤔](#ideas-SaraVieira "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/6137112?v=4" width="100px;"/><br /><sub><b>François Chalifour</b></sub>](https://francoischalifour.com)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Afrancoischalifour "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=francoischalifour "Code") | [<img src="https://avatars2.githubusercontent.com/u/5365325?v=4" width="100px;"/><br /><sub><b>Daniel Vu</b></sub>](https://twitter.com/dvv297)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=dv297 "Code") | [<img src="https://avatars3.githubusercontent.com/u/4931048?v=4" width="100px;"/><br /><sub><b>Vivek Nayyar</b></sub>](https://www.viveknayyar.in/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=vivek12345 "Code") | [<img src="https://avatars3.githubusercontent.com/u/6244647?v=4" width="100px;"/><br /><sub><b>Bob Ziroll</b></sub>](https://github.com/bobziroll)<br />[📖](https://github.com/CompuIves/codesandbox-client/commits?author=bobziroll "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/640208?v=4" width="100px;"/><br /><sub><b>Alexander Lichter</b></sub>](https://blog.lichter.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=manniL "Code") |
+| [<img src="https://avatars1.githubusercontent.com/u/23313266?v=4" width="100px;"/><br /><sub><b>ZYSzys</b></sub>](http://zyszys.top)<br />[📖](https://github.com/CompuIves/codesandbox-client/commits?author=ZYSzys "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1051509?v=4" width="100px;"/><br /><sub><b>Sara Vieira</b></sub>](http://iamsaravieira.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=SaraVieira "Code") [🎨](#design-SaraVieira "Design") [🤔](#ideas-SaraVieira "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/6137112?v=4" width="100px;"/><br /><sub><b>François Chalifour</b></sub>](https://francoischalifour.com)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Afrancoischalifour "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=francoischalifour "Code") | [<img src="https://avatars2.githubusercontent.com/u/5365325?v=4" width="100px;"/><br /><sub><b>Daniel Vu</b></sub>](https://twitter.com/dvv297)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=dv297 "Code") | [<img src="https://avatars3.githubusercontent.com/u/4931048?v=4" width="100px;"/><br /><sub><b>Vivek Nayyar</b></sub>](https://www.viveknayyar.in/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=vivek12345 "Code") | [<img src="https://avatars3.githubusercontent.com/u/6244647?v=4" width="100px;"/><br /><sub><b>Bob Ziroll</b></sub>](https://github.com/bobziroll)<br />[📖](https://github.com/CompuIves/codesandbox-client/commits?author=bobziroll "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/640208?v=4" width="100px;"/><br /><sub><b>Alexander Lichter</b></sub>](https://blog.lichter.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=manniL "Code") | <sub><b>Abdullah</b></sub>](https://github.com/abdullahtariq1171)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=abdullahtariq1171 "Code") [🎨](#design-abdullahtariq1171 "Design") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 ## Backers
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -150,7 +150,7 @@
     "codesandbox-import-utils": "1.3.5",
     "color": "^0.11.4",
     "compare-versions": "^3.1.0",
-    "console-feed": "^2.8.0",
+    "console-feed": "^2.8.5",
     "css-modules-loader-core": "^1.1.0",
     "cssnano": "^3.10.0",
     "debug": "^2.6.8",
diff --git a/packages/app/src/app/components/Preview/DevTools/Console/elements.js b/packages/app/src/app/components/Preview/DevTools/Console/elements.js
@@ -35,6 +35,24 @@ export const IconContainer = styled.div`
   justify-content: center;
 `;
 
+export const FilterInput = styled.input`
+  transition: 0.4s ease all;
+  background-color: ${props =>
+    props.theme['input.background'] || 'rgba(255, 255, 255, 0.1)'};
+  border: 1px solid transparent;
+  outline: none;
+  border-radius: 4px;
+  width: 6em;
+  padding: 0.15em 0.5em;
+  margin-right: 8px;
+
+  color: ${props => props.theme['input.foreground'] || 'white'};
+
+  &:focus {
+    width: 8em;
+  }
+`;
+
 export const inspectorTheme = theme => ({
   PADDING: '0.4rem 1.5rem 0.4rem 0px',
 
diff --git a/packages/app/src/app/components/Preview/DevTools/Console/index.js b/packages/app/src/app/components/Preview/DevTools/Console/index.js
@@ -7,9 +7,10 @@ import update from 'immutability-helper';
 import ClearIcon from 'react-icons/lib/md/clear-all';
 import { Decode, Console as ConsoleFeed } from 'console-feed';
 
+import Select from 'common/components/Select';
 import Input from './Input';
 
-import { Container, Messages, inspectorTheme } from './elements';
+import { Container, Messages, inspectorTheme, FilterInput } from './elements';
 
 export type IMessage = {
   type: 'message' | 'command' | 'return',
@@ -22,6 +23,8 @@ class Console extends React.Component {
     messages: [],
     scrollToBottom: true,
     initialClear: true,
+    filter: [],
+    searchKeywords: '',
   };
 
   listener;
@@ -104,6 +107,14 @@ class Console extends React.Component {
         }
         break;
       }
+      case 'search-log': {
+        this.setState({ searchKeywords: data.value });
+        break;
+      }
+      case 'filter-log': {
+        this.setState({ filter: data.filters });
+        break;
+      }
       default: {
         break;
       }
@@ -193,6 +204,7 @@ class Console extends React.Component {
       return null;
     }
 
+    const { messages, filter, searchKeywords } = this.state;
     return (
       <Container>
         <Messages
@@ -201,9 +213,11 @@ class Console extends React.Component {
           }}
         >
           <ConsoleFeed
-            logs={this.state.messages}
+            logs={messages}
             variant={this.props.theme.light ? 'light' : 'dark'}
             styles={inspectorTheme(this.props.theme)}
+            filter={filter}
+            searchKeywords={searchKeywords}
           />
         </Messages>
         <Input evaluateConsole={this.evaluateConsole} />
@@ -212,6 +226,40 @@ class Console extends React.Component {
   }
 }
 
+const ConsoleFilterInput = ({ style }) => (
+  <FilterInput
+    placeholder="Filter"
+    style={style}
+    onChange={({ target: { value } }) =>
+      dispatch({ type: 'search-log', value })
+    }
+  />
+);
+
+const ConsoleFilterSelect = props => {
+  const handleOnChange = ({ target: { value } }) => {
+    if (value === 'all') {
+      dispatch({ type: 'filter-log', filters: [] });
+    } else {
+      const filters = value === 'info' ? ['info', 'log'] : [value];
+      dispatch({ type: 'filter-log', filters });
+    }
+  };
+
+  return (
+    <Select
+      style={{ ...props.style, borderColor: '#2c2e30' }}
+      onChange={handleOnChange}
+    >
+      <option value="all">All</option>
+      <option value="info">Info</option>
+      <option value="warn">Warning</option>
+      <option value="error">Error</option>
+      <option value="debug">Debug</option>
+    </Select>
+  );
+};
+
 export default {
   title: 'Console',
   Content: withTheme(Console),
@@ -223,5 +271,17 @@ export default {
       },
       Icon: ClearIcon,
     },
+    {
+      title: 'Search',
+      onClick: () => {
+        dispatch({ type: 'Search Click' });
+      },
+      Icon: withTheme(ConsoleFilterInput),
+    },
+    {
+      title: 'Log Filter',
+      onClick: () => {},
+      Icon: withTheme(ConsoleFilterSelect),
+    },
   ],
 };
diff --git a/packages/app/src/app/components/Preview/DevTools/elements.js b/packages/app/src/app/components/Preview/DevTools/elements.js
@@ -73,6 +73,7 @@ export const Actions = styled.div`
   position: absolute;
   right: 1rem;
   font-size: 1.125rem;
+  display: inline-flex;
 
   svg {
     margin: 0 0.5rem;
diff --git a/packages/sandbox-hooks/package.json b/packages/sandbox-hooks/package.json
@@ -4,6 +4,6 @@
   "private": true,
   "dependencies": {
     "codesandbox-api": "^0.0.18",
-    "console-feed": "^2.8.1"
+    "console-feed": "^2.8.5"
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -6143,19 +6143,10 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
 
-console-feed@^2.8.0:
-  version "2.8.3"
-  resolved "https://registry.yarnpkg.com/console-feed/-/console-feed-2.8.3.tgz#81c07b14c236033fe26d76d2b5b305c3345cae99"
-  dependencies:
-    emotion "^9.1.1"
-    emotion-theming "^9.0.0"
-    linkifyjs "^2.1.6"
-    react-emotion "^9.1.1"
-    react-inspector "^2.2.2"
-
-console-feed@^2.8.1:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/console-feed/-/console-feed-2.8.1.tgz#2f20be4457bd63cd45309733ae1187c3331e9574"
+console-feed@^2.8.5:
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/console-feed/-/console-feed-2.8.5.tgz#d91c360faf79c73fbc774fc5175b9ebbe6e1ebb4"
+  integrity sha512-cUClwZUScfP/7OwOxu/7f+AuVr8mCNquG5s0UPiLq1VHI+TBoIeYOM7sjsHthJfmBNbOWf/B5NNOqP43OrHMBw==
   dependencies:
     emotion "^9.1.1"
     emotion-theming "^9.0.0"

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,6 @@`
`4`	`4`	`"private": true,`
`5`	`5`	`"dependencies": {`
`6`	`6`	`"codesandbox-api": "^0.0.18",`
`7`		`- "console-feed": "^2.8.1"`
	`7`	`+ "console-feed": "^2.8.5"`
`8`	`8`	`}`
`9`	`9`	`}`