Merge pull request open-source-labs#101 from oslabs-beta/master

merging in v1.0 of extension

.github/workflows/main.yml

@@ -0,0 +1,39 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - master
+      - dev
+
+jobs:
+  test:
+    name: Testing packages against our testing suite.
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js 
+      uses: actions/setup-node@v1
+      with:
+        node-version: '14.x'
+    - name: Redis Server in GitHub Actions
+      uses: supercharge/[email protected]
+      with:
+        redis-version: 6
+    - name: npm install and test
+      run: |
+        cd quell-client
+        pwd
+        npm install
+        npm test
+        cd ../quell-server
+        pwd
+        npm install
+        npm test
+        cd ../quell-extension
+        pwd
+        npm install
+        npm test
+        
+        

demo/.gitignore

@@ -1,2 +1 @@
-node_modules
-.env
+node_modules

demo/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}}],
+    '@babel/preset-typescript', "@babel/preset-react"
+  ],
+};

demo/client/src/components/Metrics.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState, useEffect } from 'react';
+import Trend from 'react-trend';
+
+const Metrics = (props) => {
+  const {
+    fetchTime, // time to fetch request
+    fetchTimeInt, // array of time values at each point in fetching and caching
+   } = props;
+  const avgFetchTime = fetchTimeInt[0] ? (fetchTimeInt.reduce((a:number, b:number) => a+b, 0)/fetchTimeInt.length).toFixed(2) + " ms": " - ms";
+
+  return (
+    <div className="metrics-container">
+      <div style={{fontSize:'1.5rem'}}>Metrics:</div>
+      <div id="speed-metrics">
+        <div>Latest query/mutation time:</div>
+        <div style={{fontSize:'1.75em'}}>{fetchTime ? fetchTime + " ms" :" - ms"}</div>
+        <div>Average cache time: {avgFetchTime}</div>
+      </div>
+      <div id="speed-graph">
+        <h3>Speed Graph:</h3>
+          <Trend
+            height = {Number(`${window.innerHeight}`)>=250 ? Number(`${window.innerHeight}`)-220 : 30}
+            // width={Number(window.innerWidth / 5)}
+            className="trend"
+            data={fetchTimeInt}
+            gradient={['#1feaea','#ffd200', '#f72047']}
+            radius={0.9}
+            strokeWidth={2.2}
+            strokeLinecap={'round'}
+          />
+        </div>
+    </div>
+  );
+};
+
+export default Metrics;

demo/client/src/containers/Demo.jsx

@@ -10,7 +10,7 @@ import Header from '../images/headers/QUELL-headers-demo w lines.svg';
 import DropDown from '../images/buttons/dropdown-button.svg';
 import DropDownHover from '../images/buttons/dropdown-button-hover.svg';
 import {Quellify as QuellModule, lokiClientCache as lokiClientCacheModule } from '@quell/client';
-import { Quellify as QuellDev, lokiClientCache as lokiClientCacheDev } from '../../../../quell-client/src/Quellify';
+// import { Quellify as QuellDev, lokiClientCache as lokiClientCacheDev } from '../../../../quell-client/src/Quellify';
 
 const Quell =
   process.env.NODE_ENV === "development"

demo/client/src/containers/Devtool.jsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import logo from "../images/quell_logos/icon128.png";
+import Header from "../images/headers/QUELL-headers-devtools w lines.png";
+
+const Devtool = () => {
+  const [activeTab, setActiveTab] = useState("client");
+
+  return (
+    <center>
+      <div id='devtool-header-container'>
+        <img id='devtool-header' src={Header} width={275}/>
+      </div>
+
+      <div className='devtool-text'>
+        <h4>Quell now also features a Chrome Developer Tools extension designed for Quell users. </h4>
+        <h4>With this extension, users can:</h4>
+        <br />
+        <li>Inspect and monitor the latency of client-side GraphQL/Quell requests</li>
+        <li>Make and monitor the latency of GraphQL/Quell requests to a specified server endpoint</li>
+        <li>View server-side cache data and contents, with the ability to manually clear the cache</li>
+        <li>{`Requires zero-to-minimal configuration and can work independently of Quell's client \nand server libraries`}</li>
+        <br/>
+      </div>
+
+      <div className="devtool_demo">
+        <div className="navbar">
+          <img src={'https://imgur.com/180d29b4-ba3f-4c3b-93cd-ba635f087350'} />
+          <button
+            id='client_button'
+            onClick={() => setActiveTab("client")}
+            style={activeTab === "client" ? { backgroundColor: "#444" } : {}}
+          >
+            Client
+          </button>
+          <button
+            id='server_button'
+            onClick={() => setActiveTab("server")}
+            style={activeTab === "server" ? { backgroundColor: "#444" } : {}}
+          >
+            Server
+          </button>
+          <button
+            id='cache_button'
+            onClick={() => setActiveTab("cache")}
+            style={activeTab === "cache" ? { backgroundColor: "#444" } : {}}
+          >
+            Cache
+          </button>
+          <button
+            id='settings_button'
+            onClick={() => setActiveTab("settings")}
+            style={activeTab === "settings" ? { backgroundColor: "#444" } : {}}
+          >
+            Settings
+          </button>
+        </div>
+        <div className="gif_container">
+          {activeTab === "client" && <img src={'https://i.imgur.com/mdZj4OD.gif'} width={800} />}
+          {activeTab === "server" && <img src={'https://i.imgur.com/FBlvNhI.gif'} width={800} />}
+          {activeTab === "cache" && <img src={'https://i.imgur.com/Wj435ZW.gif'} width={800} />}
+          {activeTab === "settings" && <img src={'https://i.imgur.com/WK5saAJ.gif'} width={800} />}
+        </div>
+      </div>
+    </center>
+  );
+};
+
+export default Devtool;

demo/client/src/containers/Header.jsx

@@ -9,7 +9,7 @@ const Header = () => {
   return (
     <header>
       <div id='logo-main-container'>
-        <img id='logo-main' src={Logo}></img>
+        <img id='logo_main' src={Logo} width={600} style={{margin:'20px'}}></img>
       </div>
 
       <ul className='header-links'>
@@ -19,14 +19,17 @@ const Header = () => {
         <li>
           <a href="https://www.npmjs.com/package/@quell/server" target='_blank'>SERVER</a>
         </li>
+        <li>
+          <a href="https://chrome.google.com/webstore/detail/quell-developer-tool/jnegkegcgpgfomoolnjjkmkippoellod" target='_blank'>DEVTOOL</a>
+        </li>
         <li>
           <a href='#demo'>DEMO</a>
         </li>
         <li>
           <a href='#team-quell'>TEAM</a>
         </li>
         <li>
-          <a href='https://github.com/oslabs-beta/Quell' target='_blank'>
+          <a href='https://github.com/open-source-labs/Quell' target='_blank'>
             GITHUB
           </a>
         </li>

demo/client/src/containers/Info.jsx

@@ -33,15 +33,15 @@ const Info = () => {
 
         <p>
           Subsequent GraphQL requests are then checked against the cached data
-          store in client-side cache storage first, allowing Quell to only request the data 
+          store first, allowing Quell to request only the data 
           it needs by dynamically reformulating a new query for what's missing.
         </p>
 
         <div className='quell-puzzle-container'>
           <img id='quell-puzzle' src={Puzzle}></img>
         </div>
         <p>
-          Query responses are then merged with the data present in the client cache storage and
+          Query responses are then merged with the data present in cache storage and
           a full response is returned seamlessly.
         </p>
         <div className='quell-airmail-container'>

demo/client/src/containers/Main.jsx

@@ -5,12 +5,14 @@ import Demo from './Demo.jsx';
 import Team from './Team.jsx';
 import Footer from './Footer.jsx';
 import Graphiql from './Graphiql.jsx';
+import Devtool from './Devtool.jsx';
 
 const Main = () => {
   return (
     <div className="main">
       <Header />
       <Info />
+      <Devtool />
       <Demo />
       <Graphiql />
       <Team />