chore: backstage catalog

* Issue:62,fix Split line should have max squeeze limit
* added limit to right pane also

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 16
+    - name: Install dependencies
+      run: npm i --legacy-peer-deps
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npm run test:e2e
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -17,6 +17,7 @@ chrome-extension
 chrome-extension.pem
 chrome-extension.crx
 bruno.zip
+*.zip
 
 # misc
 .DS_Store
@@ -37,3 +38,6 @@ yarn-error.log*
 /renderer
 /renderer/.next/
 /renderer/out/
+/test-results/
+/playwright-report/
+/playwright/.cache/

.nvmrc

@@ -1 +1 @@
-v14.17.0
+v14.18.0

catalog-info.yaml

@@ -0,0 +1,16 @@
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: "bruno"
+  links:
+    - url: https://example.com/user
+      title: Examples Users
+      icon: user
+    - url: https://example.com/group
+      title: Example Group
+      icon: group
+spec:
+  type: component
+  lifecycle: production
+  owner: anoop
+  system: tech-docs

contributing.md

@@ -0,0 +1,53 @@
+## Lets make bruno better, together !!
+
+I am happy that you are looking to improve bruno. Below are the guidelines to get started bringing up bruno on your computer.
+
+### Technology Stack
+
+Bruno is built using NextJs and React. We also use electron to ship a desktop version (that supports local collections)
+
+Libraries we use
+
+- CSS - Tailwind
+- Code Editors - Codemirror
+- State Management - Redux
+- Icons - Tabler Icons
+- Forms - formik
+- Schema Validation - Yup
+- Request Client - axios
+- Filesystem Watcher - chokidar
+
+### Dependencies
+
+You would need [Node v14.x or the latest LTS version](https://nodejs.org/en/) and npm 8.x. We use npm workspaces in the project
+
+### Lets start coding
+
+```bash
+# clone and cd into bruno
+# use Node 14.x, Npm 8.x
+
+# Install deps (note that we use npm workspaces)
+npm i
+
+# run next app
+npm run dev:web
+
+# run electron app
+# neededonly if you want to test changes related to electron app
+# please note that both web and electron use the same code
+# if it works in web, then it should also work in electron
+npm run dev:electron
+
+# open in browser
+open http://localhost:3000
+```
+
+### Raising Pull Request
+
+- Please keep the PR's small and focused on one thing
+- Please follow the format of creating branches
+  - feature/[feature name]: This branch should contain changes for a specific feature
+    - Example: feature/dark-mode
+  - bugfix/[bug name]: This branch should container only bug fixes for a specific bug
+    - Example bugfix/bug-1

main/app/menu-template.js

@@ -1,55 +0,0 @@
-const { ipcMain } = require('electron');
-
-const template = [
-  {
-    label: 'Collection',
-    submenu: [
-      {
-        label: 'Open Collection',
-        click () {
-          ipcMain.emit('main:open-collection');
-        }
-      },
-      { role: 'quit' }
-    ]
-  },
-  {
-     label: 'Edit',
-     submenu: [
-      { role: 'undo'},
-      { role: 'redo'},
-      { role: 'separator'},
-      { role: 'cut'},
-      { role: 'copy'},
-      { role: 'paste'}
-    ]
-  },
-  {
-     label: 'View',
-     submenu: [
-      { role: 'reload'},
-      { role: 'toggledevtools'},
-      { role: 'separator'},
-      { role: 'resetzoom'},
-      { role: 'zoomin'},
-      { role: 'zoomout'},
-      { role: 'separator'},
-      { role: 'togglefullscreen'}
-    ]
-  },
-  {
-     role: 'window',
-     submenu: [
-      { role: 'minimize'},
-      { role: 'close'}
-    ]
-  },
-  {
-    role: 'help',
-    submenu: [
-      { label: 'Learn More'}
-    ]
-  }
-];
-
-module.exports = template;

main/index.js

@@ -1,54 +0,0 @@
-const path = require('path');
-const { format } = require('url');
-const { BrowserWindow, app, Menu } = require('electron');
-const { setContentSecurityPolicy } = require('electron-util');
-
-const menuTemplate = require('./app/menu-template');
-const registerIpc = require('./ipc');
-const isDev = require('electron-is-dev');
-const prepareNext = require('electron-next');
-
-setContentSecurityPolicy(`
-	default-src * 'unsafe-inline' 'unsafe-eval';
-	script-src * 'unsafe-inline' 'unsafe-eval';
-	connect-src * 'unsafe-inline';
-	base-uri 'none';
-	form-action 'none';
-	frame-ancestors 'none';
-`);
-
-const menu = Menu.buildFromTemplate(menuTemplate);
-Menu.setApplicationMenu(menu);
-
-let mainWindow;
-
-// Prepare the renderer once the app is ready
-app.on('ready', async () => {
-  await prepareNext('./renderer');
-
-  mainWindow = new BrowserWindow({
-    width: 1280,
-    height: 768,
-    webPreferences: {
-      nodeIntegration: true,
-      contextIsolation: true,
-      preload: path.join(__dirname, "preload.js")
-    },
-  });
-
-  const url = isDev
-    ? 'http://localhost:8000'
-    : format({
-        pathname: path.join(__dirname, '../renderer/out/index.html'),
-        protocol: 'file:',
-        slashes: true
-      });
-
-  mainWindow.loadURL(url);
-
-  // register all ipc handlers
-  registerIpc(mainWindow);
-});
-
-// Quit the app once all windows are closed
-app.on('window-all-closed', app.quit);

main/ipc.js

@@ -1,47 +0,0 @@
-const axios = require('axios');
-const FormData = require('form-data');
-const { ipcMain } = require('electron');
-const { forOwn, extend } = require('lodash');
-
-
-const registerIpc = () => {
-  // handler for sending http request
-  ipcMain.handle('send-http-request', async (event, request) => {
-    try {
-      // make axios work in node using form data
-      // reference: https://github.com/axios/axios/issues/1006#issuecomment-320165427
-      if(request.headers && request.headers['content-type'] === 'multipart/form-data') {
-        const form = new FormData();
-        forOwn(request.data, (value, key) => {
-          form.append(key, value);
-        });
-        extend(request.headers, form.getHeaders());
-        request.data = form;
-      }
-
-      const result = await axios(request);
-
-      return {
-        status: result.status,
-        headers: result.headers,
-        data: result.data
-      };
-    } catch (error) {
-      if(error.response) {
-        return {
-          status: error.response.status,
-          headers: error.response.headers,
-          data: error.response.data
-        };
-      }
-
-      return {
-        status: -1,
-        headers: [],
-        data: null
-      };
-    }
-  });
-};
-
-module.exports = registerIpc;

main/preload.js

@@ -1,14 +0,0 @@
-const { ipcRenderer, contextBridge } = require('electron');
-
-contextBridge.exposeInMainWorld('ipcRenderer', {
-  invoke: (channel, ...args) => ipcRenderer.invoke(channel, ...args),
-  on: (channel, handler) => {
-    // Deliberately strip event as it includes `sender` 
-    const subscription = (event, ...args) => handler(...args);
-    ipcRenderer.on(channel, subscription);
-
-    return () => {
-      ipcRenderer.removeListener(channel, subscription);
-    };
-  }
-});

main/utils/common.js

@@ -1,14 +0,0 @@
-const { customAlphabet } = require('nanoid');
-
-// a customized version of nanoid without using _ and -
-const uuid = () => {
-  // https://github.com/ai/nanoid/blob/main/url-alphabet/index.js
-  const urlAlphabet = 'useandom26T198340PX75pxJACKVERYMINDBUSHWOLFGQZbfghjklqvwyzrict';
-  const customNanoId = customAlphabet (urlAlphabet, 21);
-
-  return customNanoId();
-};
-
-module.exports = {
-  uuid
-};

package.json

@@ -6,17 +6,27 @@
     "packages/bruno-electron",
     "packages/bruno-tauri",
     "packages/bruno-schema",
-    "packages/bruno-testbench"
+    "packages/bruno-testbench",
+    "packages/bruno-graphql-docs"
   ],
   "devDependencies": {
+    "@faker-js/faker": "^7.6.0",
+    "@playwright/test": "^1.27.1",
     "jest": "^29.2.0",
     "randomstring": "^1.2.2"
   },
   "scripts": {
     "dev:web": "npm run dev --workspace=packages/bruno-app",
     "build:web": "npm run build --workspace=packages/bruno-app",
+    "prettier:web": "npm run prettier --workspace=packages/bruno-app",
     "dev:electron": "npm run dev --workspace=packages/bruno-electron",
+    "build:graphql-docs": "npm run build --workspace=packages/bruno-graphql-docs",
     "build:chrome-extension": "./scripts/build-chrome-extension.sh",
-    "build:electron": "./scripts/build-electron.sh"
+    "build:electron": "./scripts/build-electron.sh",
+    "test:e2e": "npx playwright test",
+    "test:report": "npx playwright show-report"
+  },
+  "overrides": {
+    "rollup": "3.2.5"
   }
 }

packages/bruno-app/next.config.js

@@ -1,5 +1,9 @@
 module.exports = {
   reactStrictMode: true,
+  publicRuntimeConfig: {
+    CI: process.env.CI,
+    PLAYWRIGHT: process.env.PLAYWRIGHT
+  },
   webpack: (config, { isServer }) => {
     // Fixes npm packages that depend on `fs` module
     if (!isServer) {

packages/bruno-app/package.json

@@ -15,7 +15,8 @@
     "@reduxjs/toolkit": "^1.8.0",
     "@tabler/icons": "^1.46.0",
     "@tippyjs/react": "^4.2.6",
-    "@usebruno/schema": "0.1.0",
+    "@usebruno/schema": "0.2.0",
+    "@usebruno/graphql-docs": "0.1.0",
     "axios": "^0.26.0",
     "classnames": "^2.3.1",
     "codemirror": "^5.65.2",
@@ -30,16 +31,20 @@
     "idb": "^7.0.0",
     "immer": "^9.0.15",
     "lodash": "^4.17.21",
+    "markdown-it": "^13.0.1",
     "mousetrap": "^1.6.5",
     "nanoid": "3.3.4",
-    "next": "^12.1.0",
+    "next": "12.3.1",
     "path": "^0.12.7",
+    "platform": "^1.3.6",
+    "posthog-node": "^2.1.0",
     "qs": "^6.11.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.4.0",
     "react-redux": "^7.2.6",
     "react-tabs": "^3.2.3",
+    "reckonjs": "^0.1.2",
     "sass": "^1.46.0",
     "split-on-first": "^3.0.0",
     "styled-components": "^5.3.3",

packages/bruno-app/src/components/BrunoSupport/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Modal from 'components/Modal/index';
-import { IconSpeakerphone, IconBrandTwitter, IconBrandGithub } from '@tabler/icons';
+import { IconSpeakerphone, IconBrandTwitter, IconBrandGithub, IconBrandDiscord } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 
 const BrunoSupport = ({ onClose }) => {
@@ -14,6 +14,12 @@ const BrunoSupport = ({ onClose }) => {
               <span className="label ml-2">Report Issues</span>
             </a>
           </div>
+          <div className="mt-2">
+            <a href="https://discord.com/invite/KgcZUncpjq" target="_blank" className="flex items-end">
+              <IconBrandDiscord size={18} strokeWidth={2} />
+              <span className="label ml-2">Discord</span>
+            </a>
+          </div>
           <div className="mt-2">
             <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-end">
               <IconBrandGithub size={18} strokeWidth={2} />

packages/bruno-app/src/components/CodeEditor/index.js

@@ -38,7 +38,7 @@ export default class QueryEditor extends React.Component {
       showCursorWhenSelecting: true,
       foldGutter: true,
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
-      readOnly: this.props.readOnly ? 'nocursor' : false,
+      readOnly: this.props.readOnly,
       theme: this.props.theme === 'dark' ? 'monokai' : 'default',
       extraKeys: {
         'Cmd-Enter': () => {
@@ -61,6 +61,8 @@ export default class QueryEditor extends React.Component {
             this.props.onSave();
           }
         },
+        'Cmd-F': 'findPersistent',
+        'Ctrl-F': 'findPersistent',
         Tab: function (cm) {
           cm.replaceSelection('  ', 'end');
         }
@@ -90,8 +92,6 @@ export default class QueryEditor extends React.Component {
     }
 
     if (this.props.theme !== prevProps.theme && this.editor) {
-      this.cachedValue = this.props.value;
-      this.editor.setValue(this.props.value);
       this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default');
     }
     this.ignoreChangeEvent = false;

packages/bruno-app/src/components/Dropdown/StyledWrapper.js

@@ -25,6 +25,7 @@ const Wrapper = styled.div`
         display: flex;
         align-items: center;
         padding: 0.35rem 0.6rem;
+        background-color: ${(props) => props.theme.dropdown.labelBg};
       }
 
       .dropdown-item {

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js

@@ -8,7 +8,7 @@ const Wrapper = styled.div`
 
     thead,
     td {
-      border: 1px solid ${(props) => props.theme.table.border};
+      border: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder};
     }
 
     thead {
@@ -29,6 +29,7 @@ const Wrapper = styled.div`
     width: 100%;
     border: solid 1px transparent;
     outline: none !important;
+    background-color: transparent;
 
     &:focus {
       outline: none !important;

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js

@@ -4,8 +4,11 @@ const StyledWrapper = styled.div`
   margin-inline: -1rem;
   margin-block: -1.5rem;
 
+  background-color: ${(props) => props.theme.collection.environment.settings.bg};
+
   .environments-sidebar {
-    background-color: #eaeaea;
+    background-color: ${(props) => props.theme.collection.environment.settings.sidebar.bg};
+    border-right: solid 1px ${(props) => props.theme.collection.environment.settings.sidebar.borderRight};
     min-height: 400px;
   }
 
@@ -20,15 +23,15 @@ const StyledWrapper = styled.div`
 
     &:hover {
       text-decoration: none;
-      background-color: #e4e4e4;
+      background-color: ${(props) => props.theme.collection.environment.settings.item.hoverBg};
     }
   }
 
   .active {
-    background-color: #dcdcdc !important;
-    border-left: solid 2px var(--color-brand);
+    background-color: ${(props) => props.theme.collection.environment.settings.item.active.bg} !important;
+    border-left: solid 2px ${(props) => props.theme.collection.environment.settings.item.border};
     &:hover {
-      background-color: #dcdcdc !important;
+      background-color: ${(props) => props.theme.collection.environment.settings.item.active.hoverBg} !important;
     }
   }
 
@@ -36,7 +39,7 @@ const StyledWrapper = styled.div`
     padding: 8px 10px;
     cursor: pointer;
     border-bottom: none;
-    color: var(--color-text-link);
+    color: ${(props) => props.theme.textLink};
 
     &:hover {
       span {

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js

@@ -9,8 +9,8 @@ const EnvironmentList = ({ collection }) => {
   const [openCreateModal, setOpenCreateModal] = useState(false);
 
   useEffect(() => {
-    setSelectedEnvironment(environments[0]);
-  }, []);
+    setSelectedEnvironment(environments && environments.length ? environments[0] : null);
+  }, [environments]);
 
   if (!selectedEnvironment) {
     return null;

packages/bruno-app/src/components/Modal/StyledWrapper.js

@@ -110,6 +110,10 @@ const Wrapper = styled.div`
         outline: none !important;
       }
     }
+
+    .bruno-form {
+      color: ${(props) => props.theme.modal.body.color};
+    }
   }
 
   .bruno-modal-backdrop {
@@ -126,7 +130,7 @@ const Wrapper = styled.div`
       height: 100%;
       width: 100%;
       left: 0;
-      opacity: 0.4;
+      opacity: ${(props) => props.theme.modal.backdrop.opacity};
       top: 0;
       background: black;
       position: fixed;
@@ -140,6 +144,13 @@ const Wrapper = styled.div`
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
   }
+
+  &.modal-footer-none {
+    .bruno-modal-content {
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+  }
 `;
 
 export default Wrapper;

packages/bruno-app/src/components/Modal/index.js

@@ -64,6 +64,9 @@ const Modal = ({ size, title, confirmText, cancelText, handleCancel, handleConfi
   if (isClosing) {
     classes += ' modal--animate-out';
   }
+  if(hideFooter) {
+    classes += ' modal-footer-none';
+  }
   return (
     <StyledWrapper className={classes}>
       <div className={`bruno-modal-card modal-${size}`}>

packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js

@@ -12,7 +12,7 @@ const Wrapper = styled.div`
     }
 
     thead {
-      color: ${(props) => props.theme.table.thead.color};;
+      color: ${(props) => props.theme.table.thead.color};
       font-size: 0.8125rem;
       user-select: none;
     }
@@ -29,6 +29,7 @@ const Wrapper = styled.div`
     width: 100%;
     border: solid 1px transparent;
     outline: none !important;
+    color: ${(props) => props.theme.table.input.color};
 
     &:focus {
       outline: none !important;

packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.js

@@ -1,22 +1,14 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  .react-tabs__tab-list {
-    border-bottom: none !important;
-    padding-top: 0;
-    padding-left: 0 !important;
-    display: flex;
-    align-items: center;
-    margin: 0;
-
-    .react-tabs__tab {
+  div.tabs {
+    div.tab {
       padding: 6px 0px;
       border: none;
-      user-select: none;
       border-bottom: solid 2px transparent;
-      margin-right: 20px;
-      color: rgb(125 125 125);
-      outline: none !important;
+      margin-right: 1.25rem;
+      color: var(--color-tab-inactive);
+      cursor: pointer;
 
       &:focus,
       &:active,
@@ -27,36 +19,12 @@ const StyledWrapper = styled.div`
         box-shadow: none !important;
       }
 
-      &:after {
-        display: none !important;
+      &.active {
+        color: ${(props) => props.theme.tabs.active.color} !important;
+        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
     }
   }
-
-  .react-tabs__tab--selected {
-    border: none;
-    color: ${(props) => props.theme.tabs.active.color} !important;
-    border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
-    border-color: var(--color-tab-active-border) !important;
-    background: inherit;
-    outline: none !important;
-    box-shadow: none !important;
-
-    &:focus,
-    &:active,
-    &:focus-within,
-    &:focus-visible,
-    &:target {
-      border: none;
-      outline: none !important;
-      box-shadow: none !important;
-      border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
-      border-color: var(--color-tab-active-border) !important;
-      background: inherit;
-      outline: none !important;
-      box-shadow: none !important;
-    }
-  }
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js

@@ -1,26 +1,133 @@
-import React from 'react';
-import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
+import React, { useEffect } from 'react';
+import find from 'lodash/find';
+import get from 'lodash/get';
+import classnames from 'classnames';
+import { IconRefresh, IconLoader2, IconBook, IconDownload } from '@tabler/icons';
+import { useSelector, useDispatch } from 'react-redux';
+import { updateRequestPaneTab } from 'providers/ReduxStore/slices/tabs';
 import QueryEditor from 'components/RequestPane/QueryEditor';
 import RequestHeaders from 'components/RequestPane/RequestHeaders';
+import { useTheme } from 'providers/Theme';
+import { updateRequestGraphqlQuery } from 'providers/ReduxStore/slices/collections';
+import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import useGraphqlSchema from './useGraphqlSchema';
 import StyledWrapper from './StyledWrapper';
 
-const GraphQLRequestPane = ({ onRunQuery, schema, leftPaneWidth, value, onQueryChange }) => {
+const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, toggleDocs, handleGqlClickReference }) => {
+  const dispatch = useDispatch();
+  const tabs = useSelector((state) => state.tabs.tabs);
+  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
+  const query = item.draft ? get(item, 'draft.request.body.graphql.query') : get(item, 'request.body.graphql.query');
+  const url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url');
+  const {
+    storedTheme
+  } = useTheme();
+  
+  let {
+    schema,
+    loadSchema,
+    isLoading: isSchemaLoading,
+    error: schemaError
+  } = useGraphqlSchema(url);
+
+  const loadGqlSchema = () => {
+    if(!isSchemaLoading) {
+      loadSchema();
+    }
+  };
+
+  useEffect(() => {
+    if(onSchemaLoad) {
+      onSchemaLoad(schema);
+    }
+  }, [schema]);
+
+  const onQueryChange = (value) => {
+    dispatch(
+      updateRequestGraphqlQuery({
+        query: value,
+        itemUid: item.uid,
+        collectionUid: collection.uid
+      })
+    );
+  };
+  const onRun = () => dispatch(sendRequest(item, collection.uid));
+  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
+
+  const selectTab = (tab) => {
+    dispatch(
+      updateRequestPaneTab({
+        uid: item.uid,
+        requestPaneTab: tab
+      })
+    );
+  };
+
+  const getTabPanel = (tab) => {
+    switch (tab) {
+      case 'query': {
+        return <QueryEditor
+          theme={storedTheme}
+          schema={schema}
+          width={leftPaneWidth}
+          onSave={onSave}
+          value={query}
+          onRun={onRun}
+          onEdit={onQueryChange}
+          onClickReference={handleGqlClickReference}
+        />;
+      }
+      case 'headers': {
+        return <RequestHeaders item={item} collection={collection} />;
+      }
+      default: {
+        return <div className="mt-4">404 | Not found</div>;
+      }
+    }
+  };
+
+  if (!activeTabUid) {
+    return <div>Something went wrong</div>;
+  }
+
+  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
+  if (!focusedTab || !focusedTab.uid || !focusedTab.requestPaneTab) {
+    return <div className="pb-4 px-4">An error occured!</div>;
+  }
+
+  const getTabClassname = (tabName) => {
+    return classnames(`tab select-none ${tabName}`, {
+      active: tabName === focusedTab.requestPaneTab
+    });
+  };
+
   return (
-    <StyledWrapper className="h-full">
-      <Tabs className="react-tabs mt-1 flex flex-grow flex-col h-full" forceRenderTabPanel>
-        <TabList>
-          <Tab tabIndex="-1">Query</Tab>
-          <Tab tabIndex="-1">Headers</Tab>
-        </TabList>
-        <TabPanel>
-          <div className="mt-4">
-            <QueryEditor schema={schema} width={leftPaneWidth} value={value} onRunQuery={onRunQuery} onEdit={onQueryChange} />
+    <StyledWrapper className="flex flex-col h-full relative">
+      <div className="flex items-center tabs" role="tablist">
+        <div className={getTabClassname('query')} role="tab" onClick={() => selectTab('query')}>
+          Query
+        </div>
+        <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
+          Headers
+        </div>
+        <div className="flex flex-grow justify-end items-center" style={{fontSize: 13}}>
+          <div className='flex items-center cursor-pointer hover:underline' onClick={loadGqlSchema}>
+            {isSchemaLoading ? (
+              <IconLoader2 className="animate-spin" size={18} strokeWidth={1.5}/>
+            ) : null}
+            {!isSchemaLoading && !schema ? <IconDownload size={18} strokeWidth={1.5}/> : null }
+            {!isSchemaLoading && schema ? <IconRefresh size={18} strokeWidth={1.5}/> : null }
+            <span className='ml-1'>{schema ? 'Schema' : 'Load Schema'}</span>
           </div>
-        </TabPanel>
-        <TabPanel>
-          <RequestHeaders />
-        </TabPanel>
-      </Tabs>
+          <div
+            className='flex items-center cursor-pointer hover:underline ml-2'
+            onClick={toggleDocs}
+          >
+            <IconBook size={18} strokeWidth={1.5} /><span className='ml-1'>Docs</span>
+          </div>
+        </div>
+      </div>
+      <section className="flex w-full mt-5">{getTabPanel(focusedTab.requestPaneTab)}</section>
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/useGraphqlSchema.js

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { getIntrospectionQuery, buildClientSchema } from 'graphql';
+import { simpleHash } from 'utils/common';
+
+const schemaHashPrefix = 'bruno.graphqlSchema';
+
+const fetchSchema = (endpoint) => {
+  const introspectionQuery = getIntrospectionQuery();
+  const queryParams = {
+    query: introspectionQuery
+  };
+
+  return fetch(endpoint, {
+    method: 'POST',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(queryParams)
+  });
+}
+
+const useGraphqlSchema = (endpoint) => {
+  const localStorageKey = `${schemaHashPrefix}.${simpleHash(endpoint)}`;
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [schema, setSchema] = useState(() => {
+    try {
+      const saved = localStorage.getItem(localStorageKey);
+      if(!saved) {
+        return null;
+      }
+      return buildClientSchema(JSON.parse(saved));
+    } catch {
+      localStorage.setItem(localStorageKey, null);
+      return null;
+    }
+  });
+
+  const loadSchema = () => {
+    setIsLoading(true);
+    fetchSchema(endpoint)
+      .then((res) => res.json())
+      .then((s) => {
+        if (s && s.data) {
+          setSchema(buildClientSchema(s.data));
+          setIsLoading(false);
+          localStorage.setItem(localStorageKey, JSON.stringify(s.data));
+          toast.success('Graphql Schema loaded successfully');
+        } else {
+          return Promise.reject(new Error('An error occurred while introspecting schema'));
+        }
+      })
+      .catch((err) => {
+        setIsLoading(false);
+        setError(err);
+        toast.error('Error occured while loading Graphql Schema');
+      });
+  };
+
+  return {
+    isLoading,
+    schema,
+    loadSchema,
+    error
+  };
+};
+
+export default useGraphqlSchema;

packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js

@@ -12,7 +12,7 @@ const Wrapper = styled.div`
     }
 
     thead {
-      color: ${(props) => props.theme.table.thead.color};;
+      color: ${(props) => props.theme.table.thead.color};
       font-size: 0.8125rem;
       user-select: none;
     }
@@ -29,6 +29,7 @@ const Wrapper = styled.div`
     width: 100%;
     border: solid 1px transparent;
     outline: none !important;
+    color: ${(props) => props.theme.table.input.color};
 
     &:focus {
       outline: none !important;

packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js

@@ -5,12 +5,30 @@ const StyledWrapper = styled.div`
     background: ${(props) => props.theme.codemirror.bg};
     border: solid 1px ${(props) => props.theme.codemirror.border};
     /* todo: find a better way */
-    height: calc(100vh - 250px);
+    height: calc(100vh - 220px);
   }
 
   textarea.cm-editor {
     position: relative;
   }
+
+  // Todo: dark mode temporary fix
+  // Clean this
+  .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
+    color: #9cdcfe !important;
+  }
+
+  .cm-s-monokai span.cm-string {
+    color: #ce9178 !important;
+  }
+
+  .cm-s-monokai span.cm-number{
+    color: #b5cea8 !important;
+  }
+
+  .cm-s-monokai span.cm-atom{
+    color: #569cd6 !important;
+  }
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/RequestPane/QueryEditor/index.js

@@ -38,6 +38,7 @@ export default class QueryEditor extends React.Component {
       tabSize: 2,
       mode: 'graphql',
       theme: this.props.editorTheme || 'graphiql',
+      theme: this.props.theme === 'dark' ? 'monokai' : 'default',
       keyMap: 'sublime',
       autoCloseBrackets: true,
       matchBrackets: true,
@@ -75,54 +76,51 @@ export default class QueryEditor extends React.Component {
         'Alt-Space': () => editor.showHint({ completeSingle: true, container: this._node }),
         'Shift-Space': () => editor.showHint({ completeSingle: true, container: this._node }),
         'Shift-Alt-Space': () => editor.showHint({ completeSingle: true, container: this._node }),
-
         'Cmd-Enter': () => {
-          if (this.props.onRunQuery) {
-            this.props.onRunQuery();
+          if (this.props.onRun) {
+            this.props.onRun();
           }
         },
         'Ctrl-Enter': () => {
-          if (this.props.onRunQuery) {
-            this.props.onRunQuery();
+          if (this.props.onRun) {
+            this.props.onRun();
           }
         },
-
         'Shift-Ctrl-C': () => {
           if (this.props.onCopyQuery) {
             this.props.onCopyQuery();
           }
         },
-
         'Shift-Ctrl-P': () => {
           if (this.props.onPrettifyQuery) {
             this.props.onPrettifyQuery();
           }
         },
-
         /* Shift-Ctrl-P is hard coded in Firefox for private browsing so adding an alternative to Pretiffy */
-
         'Shift-Ctrl-F': () => {
           if (this.props.onPrettifyQuery) {
             this.props.onPrettifyQuery();
           }
         },
-
         'Shift-Ctrl-M': () => {
           if (this.props.onMergeQuery) {
             this.props.onMergeQuery();
           }
         },
         'Cmd-S': () => {
-          if (this.props.onRunQuery) {
-            // empty
+          if (this.props.onSave) {
+            this.props.onSave();
+            return false;
           }
         },
-
         'Ctrl-S': () => {
-          if (this.props.onRunQuery) {
-            // empty
+          if (this.props.onSave) {
+            this.props.onSave();
+            return false;
           }
-        }
+        },
+        'Cmd-F': 'findPersistent',
+        'Ctrl-F': 'findPersistent'
       }
     }));
     if (editor) {
@@ -149,6 +147,10 @@ export default class QueryEditor extends React.Component {
       this.cachedValue = this.props.value;
       this.editor.setValue(this.props.value);
     }
+
+    if (this.props.theme !== prevProps.theme && this.editor) {
+      this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default');
+    }
     this.ignoreChangeEvent = false;
   }
 
@@ -164,7 +166,7 @@ export default class QueryEditor extends React.Component {
   render() {
     return (
       <StyledWrapper
-        className="h-full"
+        className="h-full w-full"
         aria-label="Query Editor"
         ref={(node) => {
           this._node = node;
@@ -173,8 +175,11 @@ export default class QueryEditor extends React.Component {
     );
   }
 
-  _onKeyUp = (_cm, event) => {
-    if (AUTO_COMPLETE_AFTER_KEY.test(event.key) && this.editor) {
+  _onKeyUp = (_cm, e) => {
+    if (e.metaKey || e.ctrlKey || e.altKey) {
+      return;
+    }
+    if (AUTO_COMPLETE_AFTER_KEY.test(e.key) && this.editor) {
       this.editor.execCommand('autocomplete');
     }
   };

packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js

@@ -10,7 +10,7 @@ const HttpMethodSelector = ({ method, onMethodSelect }) => {
   const Icon = forwardRef((props, ref) => {
     return (
       <div ref={ref} className="flex w-full items-center pl-3 py-1 select-none uppercase">
-        <div className="flex-grow font-medium">{method}</div>
+        <div className="flex-grow font-medium" id="create-new-request-method">{method}</div>
         <div>
           <IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2} />
         </div>

packages/bruno-app/src/components/RequestPane/QueryUrl/index.js

@@ -11,7 +11,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
   const { theme } = useTheme();
   const dispatch = useDispatch();
   const method = item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
-  let url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url');
+  const url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url');
 
   const onUrlChange = (value) => {
     dispatch(
@@ -49,7 +49,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
           spellCheck="false"
           onChange={(event) => onUrlChange(event.target.value)}
         />
-        <div className="flex items-center h-full mr-2 cursor-pointer" onClick={handleRun}>
+        <div className="flex items-center h-full mr-2 cursor-pointer" id="send-request" onClick={handleRun}>
           <SendIcon color={theme.requestTabPanel.url.icon} width={22}/>
         </div>
       </div>

packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js

@@ -25,6 +25,25 @@ const StyledWrapper = styled.div`
       border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.activeBorder};
     }
   }
+
+  div.graphql-docs-explorer-container {
+    background: white;
+    outline: none;
+    box-shadow: rgb(0 0 0 / 15%) 0px 0px 8px;
+    position: absolute;
+    right: 0px;
+    z-index: 2000;
+    width: 350px;
+    height: 100%;
+
+    div.doc-explorer-title {
+      text-align: left;
+    }
+
+    div.doc-explorer-rhs {
+      display: flex;
+    }
+  }
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/RequestTabPanel/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import find from 'lodash/find';
 import toast from 'react-hot-toast';
 import { useSelector, useDispatch } from 'react-redux';
@@ -12,10 +12,14 @@ import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import RequestNotFound from './RequestNotFound';
 import QueryUrl from 'components/RequestPane/QueryUrl';
 import NetworkError from 'components/ResponsePane/NetworkError';
-import useGraphqlSchema from '../../hooks/useGraphqlSchema';
+import { DocExplorer } from '@usebruno/graphql-docs';
 
 import StyledWrapper from './StyledWrapper';
 
+const MIN_LEFT_PANE_WIDTH = 300;
+const MIN_RIGHT_PANE_WIDTH = 350;
+const DEFAULT_PADDING = 5;
+
 const RequestTabPanel = () => {
   if (typeof window == 'undefined') {
     return <div></div>;
@@ -29,23 +33,43 @@ const RequestTabPanel = () => {
   let asideWidth = useSelector((state) => state.app.leftSidebarWidth);
   const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
   const [leftPaneWidth, setLeftPaneWidth] = useState(focusedTab && focusedTab.requestPaneWidth ? focusedTab.requestPaneWidth : (screenWidth - asideWidth) / 2.2); // 2.2 so that request pane is relatively smaller
-  const [rightPaneWidth, setRightPaneWidth] = useState(screenWidth - asideWidth - leftPaneWidth - 5);
+  const [rightPaneWidth, setRightPaneWidth] = useState(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING);
   const [dragging, setDragging] = useState(false);
 
+  // Not a recommended pattern here to have the child component
+  // make a callback to set state, but treating this as an exception
+  const docExplorerRef = useRef(null);
+  const [schema, setSchema] = useState(null);
+  const [showGqlDocs, setShowGqlDocs] = useState(false);
+  const onSchemaLoad = (schema) => setSchema(schema);
+  const toggleDocs = () => setShowGqlDocs((showGqlDocs) => !showGqlDocs);
+  const handleGqlClickReference = (reference) => {
+    if(docExplorerRef.current) {
+      docExplorerRef.current.showDocForReference(reference);
+    }
+    if(!showGqlDocs) {
+      setShowGqlDocs(true);
+    }
+  };
+
   useEffect(() => {
     const leftPaneWidth = (screenWidth - asideWidth) / 2.2;
     setLeftPaneWidth(leftPaneWidth);
   }, [screenWidth]);
 
   useEffect(() => {
-    setRightPaneWidth(screenWidth - asideWidth - leftPaneWidth - 5);
+    setRightPaneWidth(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING);
   }, [screenWidth, asideWidth, leftPaneWidth]);
 
   const handleMouseMove = (e) => {
     if (dragging) {
       e.preventDefault();
-      setLeftPaneWidth(e.clientX - asideWidth - 5);
-      setRightPaneWidth(screenWidth - e.clientX - 5);
+      let leftPaneXPosition = e.clientX + 2;
+      if (leftPaneXPosition < (asideWidth+ DEFAULT_PADDING + MIN_LEFT_PANE_WIDTH) || leftPaneXPosition > (screenWidth - MIN_RIGHT_PANE_WIDTH )) {
+        return;
+      }
+      setLeftPaneWidth(leftPaneXPosition- asideWidth);
+      setRightPaneWidth(screenWidth - e.clientX - DEFAULT_PADDING);
     }
   };
   const handleMouseUp = (e) => {
@@ -55,7 +79,7 @@ const RequestTabPanel = () => {
       dispatch(
         updateRequestPaneTabWidth({
           uid: activeTabUid,
-          requestPaneWidth: e.clientX - asideWidth - 5
+          requestPaneWidth: e.clientX - asideWidth - DEFAULT_PADDING
         })
       );
     }
@@ -65,11 +89,6 @@ const RequestTabPanel = () => {
     setDragging(true);
   };
 
-  let schema = null;
-  // let {
-  //   schema
-  // } = useGraphqlSchema('https://api.spacex.land/graphql');
-
   useEffect(() => {
     document.addEventListener('mouseup', handleMouseUp);
     document.addEventListener('mousemove', handleMouseMove);
@@ -105,24 +124,23 @@ const RequestTabPanel = () => {
       })
     );
   };
-  const onGraphqlQueryChange = (value) => {};
-  const runQuery = async () => {};
 
   return (
-    <StyledWrapper className={`flex flex-col flex-grow ${dragging ? 'dragging' : ''}`}>
+    <StyledWrapper className={`flex flex-col flex-grow relative ${dragging ? 'dragging' : ''}`}>
       <div className="pt-4 pb-3 px-4">
         <QueryUrl item={item} collection={collection} handleRun={handleRun} />
       </div>
-      <section className="main flex flex-grow pb-4">
+      <section className="main flex flex-grow pb-4 relative">
         <section className="request-pane">
-          <div className="px-4" style={{ width: `${leftPaneWidth}px`, height: 'calc(100% - 5px)' }}>
+          <div className="px-4" style={{ width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`, height: `calc(100% - ${DEFAULT_PADDING}px)` }}>
             {item.type === 'graphql-request' ? (
               <GraphQLRequestPane
-                onRunQuery={runQuery}
-                schema={schema}
+                item={item}
+                collection={collection}
                 leftPaneWidth={leftPaneWidth}
-                value={item.request.body.graphql.query}
-                onQueryChange={onGraphqlQueryChange}
+                onSchemaLoad={onSchemaLoad}
+                toggleDocs={toggleDocs}
+                handleGqlClickReference={handleGqlClickReference}
               />
             ) : null}
 
@@ -138,8 +156,22 @@ const RequestTabPanel = () => {
           <ResponsePane item={item} collection={collection} rightPaneWidth={rightPaneWidth} response={item.response} />
         </section>
       </section>
+
+      {item.type === 'graphql-request' ? (
+        <div className={`graphql-docs-explorer-container ${showGqlDocs ? '' : 'hidden'}`}>
+          <DocExplorer schema={schema} ref={(r) => docExplorerRef.current = r}>
+            <button
+              className='mr-2'
+              onClick={toggleDocs}
+              aria-label="Close Documentation Explorer"
+            >
+              {'\u2715'}
+            </button>
+          </DocExplorer>
+        </div>
+      ): null}
     </StyledWrapper>
   );
 };
 
-export default RequestTabPanel;
+export default RequestTabPanel;

packages/bruno-app/src/components/RequestTabs/index.js

@@ -119,7 +119,7 @@ const RequestTabs = () => {
                   </div>
                 </li>
               ) : null}
-              <li className="select-none short-tab" onClick={createNewTab}>
+              <li className="select-none short-tab" id="create-new-tab" onClick={createNewTab}>
                 <div className="flex items-center">
                   <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16">
                     <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   .menu-icon {
-    color: rgb(110 110 110);
+    color: ${(props) => props.theme.sidebar.dropdownIcon.color};
 
     .dropdown {
       div[aria-expanded='true'] {
@@ -62,9 +62,9 @@ const Wrapper = styled.div`
     }
 
     div.dropdown-item.delete-item {
-      color: var(--color-text-danger);
+      color: ${(props) => props.theme.colors.danger};
       &:hover {
-        background-color: var(--color-background-danger);
+        background-color: ${(props) => props.theme.colors.bg.danger};
         color: white;
       }
     }

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js

@@ -15,6 +15,7 @@ import CloneCollectionItem from './CloneCollectionItem';
 import DeleteCollectionItem from './DeleteCollectionItem';
 import { isItemARequest, isItemAFolder, itemIsOpenedInTabs } from 'utils/tabs';
 import { doesRequestMatchSearchText, doesFolderHaveItemsMatchSearchText } from 'utils/collections/search';
+import { getDefaultRequestPaneTab } from 'utils/collections';
 import { hideHomePage } from 'providers/ReduxStore/slices/app';
 
 import StyledWrapper from './StyledWrapper';
@@ -69,7 +70,8 @@ const CollectionItem = ({ item, collection, searchText }) => {
         dispatch(
           addTab({
             uid: item.uid,
-            collectionUid: collection.uid
+            collectionUid: collection.uid,
+            requestPaneTab: getDefaultRequestPaneTab(item)
           })
         );
       }

packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollectionFromWorkspace/index.js

@@ -20,7 +20,6 @@ const RemoveCollectionFromWorkspace = ({ onClose, collection }) => {
           })
         );
       })
-      .then(() => dispatch(removeLocalCollection(collection.uid)))
       .then(() => toast.success('Collection removed from workspace'))
       .catch((err) => console.log(err) && toast.error('An error occured while removing the collection'));
   };

packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js

@@ -24,7 +24,7 @@ const Wrapper = styled.div`
 
       svg {
         height: 22px;
-        color: rgb(110 110 110);
+        color: ${(props) => props.theme.sidebar.dropdownIcon.color};
       }
     }
 
@@ -45,9 +45,9 @@ const Wrapper = styled.div`
     }
 
     div.dropdown-item.delete-collection {
-      color: var(--color-text-danger);
+      color: ${(props) => props.theme.colors.text.danger};
       &:hover {
-        background-color: var(--color-background-danger);
+        background-color: ${(props) => props.theme.colors.bg.danger};
         color: white;
       }
     }

packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js

@@ -82,7 +82,7 @@ const Collection = ({ collection, searchText }) => {
       <div className="flex py-1 collection-name items-center">
         <div className="flex flex-grow items-center" onClick={handleClick}>
           <IconChevronRight size={16} strokeWidth={2} className={iconClassName} style={{ width: 16, color: 'rgb(160 160 160)' }} />
-          <div className="ml-1">{collection.name}</div>
+          <div className="ml-1" id="sidebar-collection-name">{collection.name}</div>
         </div>
         <div className="collection-actions">
           <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement="bottom-start">

packages/bruno-app/src/components/Sidebar/Collections/CreateOrAddCollection/StyledWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  color: ${(props) => props.theme.colors.text.muted};
+`;
+
+export default Wrapper;

packages/bruno-app/src/components/Sidebar/Collections/CreateOrAddCollection/index.js

@@ -8,6 +8,7 @@ import toast from 'react-hot-toast';
 import styled from 'styled-components';
 import CreateCollection from 'components/Sidebar/CreateCollection';
 import SelectCollection from 'components/Sidebar/Collections/SelectCollection';
+import StyledWrapper from './StyledWrapper';
 
 const LinkStyle = styled.span`
   color: ${(props) => props.theme['text-link']};
@@ -50,8 +51,8 @@ const CreateOrAddCollection = () => {
   );
 
   return (
-    <div className="px-2 mt-4 text-gray-600">
-      {createCollectionModalOpen ? <CreateCollection handleCancel={() => setCreateCollectionModalOpen(false)} handleConfirm={handleCreateCollection} /> : null}
+    <StyledWrapper className="px-2 mt-4">
+      {createCollectionModalOpen ? <CreateCollection onClose={() => setCreateCollectionModalOpen(false)} handleConfirm={handleCreateCollection} /> : null}
 
       {addCollectionToWSModalOpen ? (
         <SelectCollection title="Add Collection to Workspace" onClose={() => setAddCollectionToWSModalOpen(false)} onSelect={handleAddCollectionToWorkspace} />
@@ -63,7 +64,7 @@ const CreateOrAddCollection = () => {
           <CreateLink /> or <AddLink /> Collection to Workspace.
         </div>
       </div>
-    </div>
+    </StyledWrapper>
   );
 };
 

packages/bruno-app/src/components/Sidebar/Collections/SelectCollection/StyledWrapper.js

@@ -10,7 +10,7 @@ const StyledWrapper = styled.div`
     cursor: pointer;
 
     &:hover {
-      background-color: #f4f4f4;
+      background-color: ${(props) => props.theme.plainGrid.hoverBg};;
     }
   }
 `;

packages/bruno-app/src/components/Sidebar/ImportCollection/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { collectionImported } from 'providers/ReduxStore/slices/collections';
+import importBrunoCollection from 'utils/importers/bruno-collection';
+import importPostmanCollection from 'utils/importers/postman-collection';
+import { addCollectionToWorkspace } from 'providers/ReduxStore/slices/workspaces/actions';
+import { toastError } from 'utils/common/error';
+import toast from 'react-hot-toast';
+import Modal from 'components/Modal';
+
+const ImportCollection = ({ onClose }) => {
+  const dispatch = useDispatch();
+  const { activeWorkspaceUid } = useSelector((state) => state.workspaces);
+
+  const handleImportBrunoCollection = () => {
+    importBrunoCollection()
+      .then((collection) => {
+        dispatch(collectionImported({ collection: collection }));
+        dispatch(addCollectionToWorkspace(activeWorkspaceUid, collection.uid));
+        toast.success('Collection imported successfully');
+        onClose();
+      })
+      .catch((err) => toastError(err, 'Import collection failed'));
+  };
+
+  const handleImportPostmanCollection = () => {
+    importPostmanCollection()
+      .then((collection) => {
+        dispatch(collectionImported({ collection: collection }));
+        dispatch(addCollectionToWorkspace(activeWorkspaceUid, collection.uid));
+        toast.success('Postman Collection imported successfully');
+        onClose();
+      })
+      .catch((err) => toastError(err, 'Postman Import collection failed'));
+  };
+
+  return (
+    <Modal size="sm" title="Import Collection" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
+      <div>
+        <div
+          className='text-link hover:underline cursor-pointer'
+          onClick={handleImportBrunoCollection}
+        >
+          Bruno Collection
+        </div>
+        <div
+          className='text-link hover:underline cursor-pointer mt-2'
+          onClick={handleImportPostmanCollection}
+        >
+          Postman Collection
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ImportCollection;

packages/bruno-app/src/components/Sidebar/LocalCollections/StyledWrapper.js

@@ -13,6 +13,11 @@ const Wrapper = styled.div`
     }
   }
 
+  .muted-message {
+    color: ${(props) => props.theme.sidebar.muted};
+    border-top: solid 1px ${(props) => props.theme.dropdown.seperator};
+  }
+
   div[data-tippy-root] {
     width: calc(100% - 1rem);
   }

packages/bruno-app/src/components/Sidebar/LocalCollections/index.js

@@ -60,7 +60,7 @@ const LocalCollections = ({ searchText }) => {
             <span>Open Collection</span>
           </div>
 
-          <div className="px-2 pt-2 text-gray-600" style={{ fontSize: 10, borderTop: 'solid 1px #e7e7e7' }}>
+          <div className="px-2 pt-2 muted-message" style={{ fontSize: 10 }}>
             Note: Local collections are not tied to a workspace
           </div>
         </Dropdown>

packages/bruno-app/src/components/Sidebar/MenuBar/index.js

@@ -8,7 +8,7 @@ import { IconCode, IconFiles, IconMoon, IconChevronsLeft, IconLifebuoy } from '@
 import Link from 'next/link';
 import StyledWrapper from './StyledWrapper';
 import BrunoSupport from 'components/BrunoSupport';
-import ThemeSupport from 'components/ThemeSupport/index';
+import SwitchTheme from 'components/SwitchTheme';
 
 const MenuBar = () => {
   const router = useRouter();
@@ -23,6 +23,9 @@ const MenuBar = () => {
 
   return (
     <StyledWrapper className="h-full flex flex-col">
+      {openBrunoSupport && <BrunoSupport onClose={() => setOpenBrunoSupport(false)} />}
+      {openTheme && <SwitchTheme onClose={() => setOpenTheme(false)} />}
+
       <div className="flex flex-col">
         <Link href="/">
           <div className={getClassName('/')}>
@@ -46,18 +49,16 @@ const MenuBar = () => {
               <IconUser size={28} strokeWidth={1.5}/>
           </div>
         </Link> */}
-        <div className="menu-item">
-          <IconLifebuoy size={28} strokeWidth={1.5} onClick={() => setOpenBrunoSupport(true)} />
+        <div className="menu-item" onClick={() => setOpenBrunoSupport(true)}>
+          <IconLifebuoy size={28} strokeWidth={1.5}/>
         </div>
-        <div className="menu-item">
-          <IconMoon size={28} strokeWidth={1.5} onClick={() => setOpenTheme(true)} />
+        <div className="menu-item" onClick={() => setOpenTheme(true)}>
+          <IconMoon size={28} strokeWidth={1.5}/>
         </div>
         <div className="menu-item" onClick={() => dispatch(toggleLeftMenuBar())}>
           <IconChevronsLeft size={28} strokeWidth={1.5} />
         </div>
       </div>
-      {openBrunoSupport && <BrunoSupport onClose={() => setOpenBrunoSupport(false)} />}
-      {openTheme && <ThemeSupport onClose={() => setOpenTheme(false)} />}
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/Sidebar/NewRequest/index.js

@@ -9,6 +9,7 @@ import { newEphermalHttpRequest } from 'providers/ReduxStore/slices/collections'
 import { newHttpRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { addTab } from 'providers/ReduxStore/slices/tabs';
 import HttpMethodSelector from 'components/RequestPane/QueryUrl/HttpMethodSelector';
+import { getDefaultRequestPaneTab } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 
 const NewRequest = ({ collection, item, isEphermal, onClose }) => {
@@ -42,7 +43,8 @@ const NewRequest = ({ collection, item, isEphermal, onClose }) => {
             dispatch(
               addTab({
                 uid: uid,
-                collectionUid: collection.uid
+                collectionUid: collection.uid,
+                requestPaneTab: getDefaultRequestPaneTab({type: values.requestType})
               })
             );
             onClose();
@@ -77,27 +79,27 @@ const NewRequest = ({ collection, item, isEphermal, onClose }) => {
     <StyledWrapper>
       <Modal size="md" title="New Request" confirmText="Create" handleConfirm={onSubmit} handleCancel={onClose}>
         <form className="bruno-form" onSubmit={formik.handleSubmit}>
-          <div className="hidden">
+          <div>
             <label htmlFor="requestName" className="block font-semibold">
               Type
             </label>
 
             <div className="flex items-center mt-2">
               <input
-                id="http"
+                id="http-request"
                 className="cursor-pointer"
                 type="radio"
                 name="requestType"
                 onChange={formik.handleChange}
-                value="http"
+                value="http-request"
                 checked={formik.values.requestType === 'http-request'}
               />
-              <label htmlFor="http" className="ml-1 cursor-pointer select-none">
+              <label htmlFor="http-request" className="ml-1 cursor-pointer select-none">
                 Http
               </label>
 
               <input
-                id="graphql"
+                id="graphql-request"
                 className="ml-4 cursor-pointer"
                 type="radio"
                 name="requestType"
@@ -105,16 +107,16 @@ const NewRequest = ({ collection, item, isEphermal, onClose }) => {
                   formik.setFieldValue('requestMethod', 'POST');
                   formik.handleChange(event);
                 }}
-                value="graphql"
+                value="graphql-request"
                 checked={formik.values.requestType === 'graphql-request'}
               />
-              <label htmlFor="graphql" className="ml-1 cursor-pointer select-none">
+              <label htmlFor="graphql-request" className="ml-1 cursor-pointer select-none">
                 Graphql
               </label>
             </div>
           </div>
 
-          <div>
+          <div className="mt-4">
             <label htmlFor="requestName" className="block font-semibold">
               Name
             </label>

packages/bruno-app/src/components/Sidebar/StyledWrapper.js

@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   color: ${(props) => props.theme.sidebar.color};
 
   aside {
-    background-color: ${(props) => props.theme['sidebar-background']};
+    background-color: ${(props) => props.theme.sidebar.bg};
 
     .collection-title {
       line-height: 1.5;
@@ -54,7 +54,7 @@ const Wrapper = styled.div`
     &:hover div.drag-request-border {
       width: 2px;
       height: 100%;
-      border-left: solid 1px var(--color-request-dragbar-background-active);
+      border-left: solid 1px ${(props) => props.theme.sidebar.dragbar};
     }
   }
 `;

packages/bruno-app/src/components/Sidebar/TitleBar/StyledWrapper.js

@@ -1,17 +1,14 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  .local-collection-label {
-    background-color: var(--color-sidebar-background);
-  }
-
   .local-collections-unavailable {
     padding: 0.35rem 0.6rem;
+    color: ${(props) => props.theme.sidebar.muted};
     border-top: solid 1px ${(props) => props.theme.dropdown.seperator};
     font-size: 11px;
   }
   .collection-dropdown {
-    color: rgb(110 110 110);
+    color: ${(props) => props.theme.sidebar.dropdownIcon.color};
 
     &:hover {
       color: inherit;

packages/bruno-app/src/components/Sidebar/TitleBar/index.js

@@ -2,8 +2,8 @@ import toast from 'react-hot-toast';
 import Bruno from 'components/Bruno';
 import Dropdown from 'components/Dropdown';
 import CreateCollection from '../CreateCollection';
-import importCollection from 'utils/collections/import';
 import SelectCollection from 'components/Sidebar/Collections/SelectCollection';
+import ImportCollection from 'components/Sidebar/ImportCollection';
 
 import { IconDots } from '@tabler/icons';
 import { IconFolders } from '@tabler/icons';
@@ -11,13 +11,13 @@ import { isElectron } from 'utils/common/platform';
 import { useState, forwardRef, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { showHomePage } from 'providers/ReduxStore/slices/app';
-import { collectionImported } from 'providers/ReduxStore/slices/collections';
 import { openLocalCollection } from 'providers/ReduxStore/slices/collections/actions';
 import { addCollectionToWorkspace } from 'providers/ReduxStore/slices/workspaces/actions';
 import StyledWrapper from './StyledWrapper';
 
 const TitleBar = () => {
   const [createCollectionModalOpen, setCreateCollectionModalOpen] = useState(false);
+  const [importCollectionModalOpen, setImportCollectionModalOpen] = useState(false);
   const [addCollectionToWSModalOpen, setAddCollectionToWSModalOpen] = useState(false);
   const { activeWorkspaceUid } = useSelector((state) => state.workspaces);
   const isPlatformElectron = isElectron();
@@ -48,18 +48,10 @@ const TitleBar = () => {
       .catch(() => toast.error('An error occured while adding collection to workspace'));
   };
 
-  const handleImportCollection = () => {
-    importCollection()
-      .then((collection) => {
-        dispatch(collectionImported({ collection: collection }));
-        dispatch(addCollectionToWorkspace(activeWorkspaceUid, collection.uid));
-      })
-      .catch((err) => console.log(err));
-  };
-
   return (
     <StyledWrapper className="px-2 py-2">
       {createCollectionModalOpen ? <CreateCollection isLocal={createCollectionModalOpen === 'local' ? true : false} onClose={() => setCreateCollectionModalOpen(false)} /> : null}
+      {importCollectionModalOpen ? <ImportCollection onClose={() => setImportCollectionModalOpen(false)} /> : null}
 
       {addCollectionToWSModalOpen ? (
         <SelectCollection title="Add Collection to Workspace" onClose={() => setAddCollectionToWSModalOpen(false)} onSelect={handleAddCollectionToWorkspace} />
@@ -91,7 +83,7 @@ const TitleBar = () => {
               className="dropdown-item"
               onClick={(e) => {
                 menuDropdownTippyRef.current.hide();
-                handleImportCollection();
+                setImportCollectionModalOpen(true);
               }}
             >
               Import Collection
@@ -135,7 +127,7 @@ const TitleBar = () => {
                 </div>
               </>
             ) : (
-              <div className="flex items-center select-none text-gray-400 text-xs local-collections-unavailable">
+              <div className="flex items-center select-none text-xs local-collections-unavailable">
                 Note: Local collections are only available on the desktop app.
               </div>
             )}

packages/bruno-app/src/components/Sidebar/index.js

@@ -124,7 +124,7 @@ const Sidebar = () => {
                   title="GitHub"
                 ></iframe>
               </div>
-              <div className="flex flex-grow items-center justify-end text-xs mr-2">v0.2.0</div>
+              <div className="flex flex-grow items-center justify-end text-xs mr-2">v0.3.0</div>
             </div>
           </div>
         </div>

packages/bruno-app/src/components/SwitchTheme/index.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import Modal from 'components/Modal/index';
+import StyledWrapper from './StyledWrapper';
+import { useTheme } from 'providers/Theme';
+
+const SwitchTheme = ({ onClose }) => {
+  const { storedTheme, setStoredTheme } = useTheme();
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      theme: storedTheme
+    },
+    validationSchema: Yup.object({
+      theme: Yup.string().oneOf(['light', 'dark']).required('theme is required')
+    }),
+    onSubmit: (values) => {
+      setStoredTheme(values.theme);
+    }
+  });
+
+  return (
+    <StyledWrapper>
+      <Modal size="sm" title={'Switch Theme'} handleCancel={onClose} hideFooter={true}>
+        <div className='bruno-form'>
+          <div className="flex items-center mt-2">
+            <input
+              id="light-theme"
+              className="cursor-pointer"
+              type="radio"
+              name="theme"
+              onChange={(e) => {
+                formik.handleChange(e);
+                formik.handleSubmit()
+              }}
+              value="light"
+              checked={formik.values.theme === 'light'}
+            />
+            <label htmlFor="light-theme" className="ml-1 cursor-pointer select-none">
+              Light
+            </label>
+
+            <input
+              id="dark-theme"
+              className="ml-4 cursor-pointer"
+              type="radio"
+              name="theme"
+              onChange={(e) => {
+                formik.handleChange(e);
+                formik.handleSubmit()
+              }}
+              value="dark"
+              checked={formik.values.theme === 'dark'}
+            />
+            <label htmlFor="dark-theme" className="ml-1 cursor-pointer select-none">
+              Dark
+            </label>
+          </div>
+        </div>
+      </Modal>
+    </StyledWrapper>
+  );
+};
+
+export default SwitchTheme;

packages/bruno-app/src/components/ThemeSupport/index.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import Modal from 'components/Modal/index';
-import StyledWrapper from './StyledWrapper';
-import { useTheme } from 'providers/Theme';
-
-const ThemeSupport = ({ onClose }) => {
-  const { storedTheme, themeOptions, setStoredTheme } = useTheme();
-
-  console.log(themeOptions);
-
-  const handleThemeChange = (e) => {
-    setStoredTheme(e.target.value);
-  };
-
-  return (
-    <StyledWrapper>
-      <Modal size="sm" title={'Support'} handleCancel={onClose} hideFooter={true}>
-        <div className="collection-options">
-          <select name="theme_switcher" onChange={handleThemeChange} defaultValue={storedTheme}>
-            {themeOptions.map((tk, index) => {
-              return (
-                <option value={tk} key={index}>
-                  {tk}
-                </option>
-              );
-            })}
-          </select>
-        </div>
-      </Modal>
-    </StyledWrapper>
-  );
-};
-
-export default ThemeSupport;

packages/bruno-app/src/components/Welcome/StyledWrapper.js

@@ -2,22 +2,23 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   .heading {
-    color:  ${(props) => props.theme.welcome.heading};
+    color: ${(props) => props.theme.welcome.heading};
     font-size: 0.75rem;
   }
 
   .muted {
-    color:  ${(props) => props.theme.welcome.muted};
+    color: ${(props) => props.theme.welcome.muted};
   }
 
   .collection-options {
+    cursor: pointer;
+
     svg {
       position: relative;
       top: -1px;
     }
 
     .label {
-      cursor: pointer;
       &:hover {
         text-decoration: underline;
       }

packages/bruno-app/src/components/Welcome/index.js

@@ -10,13 +10,15 @@ import { IconBrandGithub, IconPlus, IconUpload, IconFiles, IconFolders, IconPlay
 import Bruno from 'components/Bruno';
 import CreateCollection from 'components/Sidebar/CreateCollection';
 import SelectCollection from 'components/Sidebar/Collections/SelectCollection';
-import importCollection, { importSampleCollection } from 'utils/collections/import';
+import { importSampleCollection } from 'utils/importers/bruno-collection';
+import ImportCollection from 'components/Sidebar/ImportCollection';
 import StyledWrapper from './StyledWrapper';
 
 const Welcome = () => {
   const dispatch = useDispatch();
   const [createCollectionModalOpen, setCreateCollectionModalOpen] = useState(false);
   const [addCollectionToWSModalOpen, setAddCollectionToWSModalOpen] = useState(false);
+  const [importCollectionModalOpen, setImportCollectionModalOpen] = useState(false);
   const { activeWorkspaceUid } = useSelector((state) => state.workspaces);
   const isPlatformElectron = isElectron();
 
@@ -29,15 +31,6 @@ const Welcome = () => {
       .catch(() => toast.error('An error occured while adding collection to workspace'));
   };
 
-  const handleImportCollection = () => {
-    importCollection()
-      .then((collection) => {
-        dispatch(collectionImported({ collection: collection }));
-        dispatch(addCollectionToWorkspace(activeWorkspaceUid, collection.uid));
-      })
-      .catch((err) => console.log(err));
-  };
-
   const handleImportSampleCollection = () => {
     importSampleCollection()
       .then((collection) => {
@@ -58,6 +51,7 @@ const Welcome = () => {
   return (
     <StyledWrapper className="pb-4 px-6 mt-6">
       {createCollectionModalOpen ? <CreateCollection isLocal={createCollectionModalOpen === 'local' ? true : false} onClose={() => setCreateCollectionModalOpen(false)} /> : null}
+      {importCollectionModalOpen ? <ImportCollection onClose={() => setImportCollectionModalOpen(false)} /> : null}
 
       {addCollectionToWSModalOpen ? (
         <SelectCollection title="Add Collection to Workspace" onClose={() => setAddCollectionToWSModalOpen(false)} onSelect={handleAddCollectionToWorkspace} />
@@ -67,29 +61,29 @@ const Welcome = () => {
         <Bruno width={50} />
       </div>
       <div className="text-xl font-semibold select-none">bruno</div>
-      <div className="mt-4">Opensource API Client.</div>
+      <div className="mt-4">Local-first, Opensource API Client.</div>
 
       <div className="uppercase font-semibold heading mt-10">Collections</div>
       <div className="mt-4 flex items-center collection-options select-none">
-        <div className="flex items-center">
+        <div className="flex items-center" onClick={() => setCreateCollectionModalOpen(true)}>
           <IconPlus size={18} strokeWidth={2} />
-          <span className="label ml-2" onClick={() => setCreateCollectionModalOpen(true)}>
+          <span className="label ml-2" id="create-collection">
             Create Collection
           </span>
         </div>
-        <div className="flex items-center ml-6">
+        <div className="flex items-center ml-6" onClick={() => setAddCollectionToWSModalOpen(true)}>
           <IconFiles size={18} strokeWidth={2} />
-          <span className="label ml-2" onClick={() => setAddCollectionToWSModalOpen(true)}>
+          <span className="label ml-2" id="add-collection">
             Add Collection to Workspace
           </span>
         </div>
-        <div className="flex items-center ml-6" onClick={handleImportCollection}>
+        <div className="flex items-center ml-6" onClick={() => setImportCollectionModalOpen(true)}>
           <IconUpload size={18} strokeWidth={2} />
-          <span className="label ml-2">Import Collection</span>
+          <span className="label ml-2" id="import-collection">Import Collection</span>
         </div>
         <div className="flex items-center ml-6" onClick={handleImportSampleCollection}>
           <IconPlayerPlay size={18} strokeWidth={2} />
-          <span className="label ml-2">Load Sample Collection</span>
+          <span className="label ml-2" id="load-sample-collection">Load Sample Collection</span>
         </div>
       </div>
 

packages/bruno-app/src/components/Workspaces/WorkspaceConfigurer/DeleteWorkspace/index.js

@@ -4,6 +4,7 @@ import Modal from 'components/Modal/index';
 import { deleteWorkspace } from 'providers/ReduxStore/slices/workspaces/actions';
 import { useDispatch } from 'react-redux';
 import toast from 'react-hot-toast';
+import { toastError } from 'utils/common/error';
 import StyledWrapper from './StyledWrapper';
 
 const DeleteWorkspace = ({ onClose, workspace }) => {
@@ -14,7 +15,7 @@ const DeleteWorkspace = ({ onClose, workspace }) => {
         toast.success('Workspace deleted!');
         onClose();
       })
-      .catch(() => toast.error('An error occured while deleting the workspace'));
+      .catch(toastError);
   };
 
   return (

packages/bruno-app/src/components/Workspaces/WorkspaceConfigurer/WorkspaceItem/StyledWrapper.js

@@ -10,7 +10,7 @@ const Wrapper = styled.div`
   }
 
   div:hover {
-    background-color: #f4f4f4;
+    background-color: ${(props) => props.theme.plainGrid.hoverBg};
   }
 `;
 

packages/bruno-app/src/components/Workspaces/WorkspaceSelector/index.js

@@ -18,7 +18,7 @@ const WorkspaceSelector = () => {
 
   useEffect(() => {
     setActiveWorkspace(workspaces.find((workspace) => workspace.uid === activeWorkspaceUid));
-  }, [activeWorkspaceUid]);
+  }, [activeWorkspaceUid, workspaces]);
 
   const Icon = forwardRef((props, ref) => {
     return (

packages/bruno-app/src/globalStyles.js

@@ -22,6 +22,10 @@ const GlobalStyle = createGlobalStyle`
     padding: .215rem .6rem .215rem .6rem;
   }
 
+  .btn-xs {
+    padding: .2rem .4rem .2rem .4rem;
+  }
+
   .btn-md {
     padding: .4rem 1.1rem;
     line-height: 1.47;
@@ -66,9 +70,9 @@ const GlobalStyle = createGlobalStyle`
     }
 
     &:disabled {
-      color: #545454;
-      background: #efefef;
-      border: solid 1px rgb(234, 234, 234);
+      color: ${(props) => props.theme.button.disabled.color};
+      background: ${(props) => props.theme.button.disabled.bg};
+      border: solid 1px ${(props) => props.theme.button.disabled.border};
       cursor: not-allowed;
     }
 

packages/bruno-app/src/hooks/useGraphqlSchema/index.js

@@ -1,44 +0,0 @@
-import { useState, useEffect } from 'react';
-import { getIntrospectionQuery, buildClientSchema } from 'graphql';
-
-const useGraphqlSchema = (endpoint) => {
-  const [isLoaded, setIsLoaded] = useState(false);
-  const [schema, setSchema] = useState(null);
-  const [error, setError] = useState(null);
-
-  const introspectionQuery = getIntrospectionQuery();
-  const queryParams = {
-    query: introspectionQuery
-  };
-
-  useEffect(() => {
-    fetch(endpoint, {
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(queryParams)
-    })
-      .then((res) => res.json())
-      .then((s) => {
-        if (s && s.data) {
-          setSchema(buildClientSchema(s.data));
-          setIsLoaded(true);
-        } else {
-          return Promise.reject(new Error('An error occurred while introspecting schema'));
-        }
-      })
-      .catch((err) => {
-        setError(err);
-      });
-  }, []);
-
-  return {
-    isLoaded,
-    schema,
-    error
-  };
-};
-
-export default useGraphqlSchema;

packages/bruno-app/src/pageComponents/Collections/StyledWrapper.js

@@ -17,7 +17,7 @@ const Wrapper = styled.div`
       border-radius: 3px;
 
       &:hover {
-        background-color: #f4f4f4;
+        background-color: ${(props) => props.theme.plainGrid.hoverBg};
         margin-left: -8px;
         margin-right: -8px;
         padding-left: 8px;

packages/bruno-app/src/pageComponents/Login/StyledWrapper.js

@@ -28,7 +28,7 @@ const Wrapper = styled.div`
     }
 
     a {
-      color: var(--color-text-link);
+      color: ${(props) => props.theme.textLink};
     }
 
     .error-msg {

packages/bruno-app/src/pageComponents/SignUp/StyledWrapper.js

@@ -28,7 +28,7 @@ const Wrapper = styled.div`
     }
 
     a {
-      color: var(--color-text-link);
+      color: ${(props) => props.theme.textLink};
     }
 
     .or {

packages/bruno-app/src/pages/_app.js

@@ -1,7 +1,6 @@
 import { Provider } from 'react-redux';
-import { Toaster } from 'react-hot-toast';
 import { AppProvider } from 'providers/App';
-import { AuthProvider } from 'providers/Auth';
+import { ToastProvider } from 'providers/Toaster';
 import { HotkeysProvider } from 'providers/Hotkeys';
 
 import ReduxStore from 'providers/ReduxStore';
@@ -34,12 +33,13 @@ function MyApp({ Component, pageProps }) {
       <NoSsr>
         <Provider store={ReduxStore}>
           <ThemeProvider>
-            <AppProvider>
-              <HotkeysProvider>
-                <Toaster toastOptions={{ duration: 2000 }} />
-                <Component {...pageProps} />
-              </HotkeysProvider>
-            </AppProvider>
+            <ToastProvider>
+              <AppProvider>
+                <HotkeysProvider>
+                  <Component {...pageProps} />
+                </HotkeysProvider>
+              </AppProvider>
+            </ToastProvider>
           </ThemeProvider>
         </Provider>
       </NoSsr>

packages/bruno-app/src/providers/App/index.js

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import useIdb from './useIdb';
+import useTelemetry from './useTelemetry';
 import useLocalCollectionTreeSync from './useLocalCollectionTreeSync';
 import { useDispatch } from 'react-redux';
 import { refreshScreenWidth } from 'providers/ReduxStore/slices/app';
@@ -9,6 +10,7 @@ export const AppContext = React.createContext();
 
 export const AppProvider = (props) => {
   useIdb();
+  useTelemetry();
   useLocalCollectionTreeSync();
 
   const dispatch = useDispatch();

packages/bruno-app/src/providers/App/useTelemetry.js

@@ -0,0 +1,66 @@
+import { useEffect } from 'react';
+import getConfig from 'next/config';
+import { PostHog } from 'posthog-node';
+import platformLib from 'platform';
+import { uuid } from 'utils/common';
+import { isElectron } from 'utils/common/platform';
+
+const { publicRuntimeConfig } = getConfig();
+const posthogApiKey = 'phc_7gtqSrrdZRohiozPMLIacjzgHbUlhalW1Bu16uYijMR';
+let posthogClient = null;
+
+const isPlaywrightTestRunning = () => {
+  return publicRuntimeConfig.PLAYWRIGHT ? true : false;
+};
+
+// Todo support chrome and firefox extension
+const getPlatform = () => {
+  return isElectron() ? 'electron' : 'web';
+};
+
+const getPosthogClient = () => {
+  if(posthogClient) {
+    return posthogClient;
+  }
+
+  posthogClient = new PostHog(posthogApiKey);
+  return posthogClient;
+};
+
+const getAnonymousTrackingId = () => {
+  let id = localStorage.getItem('bruno.anonymousTrackingId');
+
+  if(!id || !id.length || id.length !== 21) {
+    id = uuid();
+    localStorage.setItem('bruno.anonymousTrackingId', id);
+  }
+
+  return id;
+};
+
+const trackStart = () => {
+  if(isPlaywrightTestRunning()) {
+    return;
+  }
+
+  const trackingId = getAnonymousTrackingId();
+  const platform = getPlatform();
+  const client = getPosthogClient();
+  client.capture({
+    distinctId: trackingId,
+    event: 'start',
+    properties: {
+      platform: platform,
+      os: platformLib.os.family
+    }
+  });
+};
+
+const useTelemetry = () => {
+  useEffect(() => {
+    trackStart();
+    setInterval(trackStart , 24 * 60 * 60 * 1000);
+  }, []);
+};
+
+export default useTelemetry;

packages/bruno-app/src/providers/ReduxStore/slices/app.js

@@ -3,8 +3,8 @@ import { createSlice } from '@reduxjs/toolkit';
 const initialState = {
   isDragging: false,
   idbConnectionReady: false,
-  leftSidebarWidth: 270,
-  leftMenuBarOpen: true,
+  leftSidebarWidth: 222,
+  leftMenuBarOpen: false,
   screenWidth: 500,
   showHomePage: false
 };

packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js

@@ -16,7 +16,8 @@ import {
   findEnvironmentInCollection,
   isItemAFolder,
   refreshUidsInItem,
-  interpolateEnvironmentVars
+  interpolateEnvironmentVars,
+  getDefaultRequestPaneTab
 } from 'utils/collections';
 import { collectionSchema, itemSchema, environmentsSchema } from '@usebruno/schema';
 import { waitForNextTick } from 'utils/common';
@@ -108,7 +109,8 @@ export const createCollection = (collectionName) => (dispatch, getState) => {
         dispatch(
           addTab({
             uid: requestItem.uid,
-            collectionUid: newCollection.uid
+            collectionUid: newCollection.uid,
+            requestPaneTab: getDefaultRequestPaneTab(requestItem)
           })
         )
       )
@@ -635,7 +637,8 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
         dispatch(
           addTab({
             uid: item.uid,
-            collectionUid: collection.uid
+            collectionUid: collection.uid,
+            requestPaneTab: getDefaultRequestPaneTab(item)
           })
         );
       })

packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js

@@ -606,6 +606,22 @@ export const collectionsSlice = createSlice({
         }
       }
     },
+    updateRequestGraphqlQuery: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+
+        if (item && isItemARequest(item)) {
+          if (!item.draft) {
+            item.draft = cloneDeep(item);
+          }
+          item.draft.request.body.mode = 'graphql';
+          item.draft.request.body.graphql = item.draft.request.body.graphql || {};
+          item.draft.request.body.graphql.query = action.payload.query;
+        }
+      }
+    },
     updateRequestMethod: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
 
@@ -791,6 +807,7 @@ export const {
   deleteMultipartFormParam,
   updateRequestBodyMode,
   updateRequestBody,
+  updateRequestGraphqlQuery,
   updateRequestMethod,
   localCollectionAddFileEvent,
   localCollectionAddDirectoryEvent,

packages/bruno-app/src/providers/ReduxStore/slices/tabs.js

@@ -23,7 +23,7 @@ export const tabsSlice = createSlice({
         uid: action.payload.uid,
         collectionUid: action.payload.collectionUid,
         requestPaneWidth: null,
-        requestPaneTab: 'params',
+        requestPaneTab: action.payload.requestPaneTab || 'params',
         responsePaneTab: 'response'
       });
       state.activeTabUid = action.payload.uid;

packages/bruno-app/src/providers/ReduxStore/slices/workspaces/actions.js

@@ -5,6 +5,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import { workspaceSchema } from '@usebruno/schema';
 import { findCollectionInWorkspace } from 'utils/workspaces';
 import { getWorkspacesFromIdb, saveWorkspaceToIdb, deleteWorkspaceInIdb } from 'utils/idb/workspaces';
+import { BrunoError } from 'utils/common/error';
 import {
   loadWorkspaces,
   addWorkspace as _addWorkspace,
@@ -110,7 +111,7 @@ export const deleteWorkspace = (workspaceUid) => (dispatch, getState) => {
 
   return new Promise((resolve, reject) => {
     if (state.workspaces.activeWorkspaceUid === workspaceUid) {
-      throw new Error('User cannot delete current workspace');
+      throw new BrunoError('Cannot delete current workspace');
     }
 
     const workspace = find(state.workspaces.workspaces, (w) => w.uid === workspaceUid);

packages/bruno-app/src/providers/Theme/index.js

@@ -6,7 +6,8 @@ import { ThemeProvider as SCThemeProvider } from 'styled-components';
 
 export const ThemeContext = createContext();
 export const ThemeProvider = (props) => {
-  const [storedTheme, setStoredTheme] = useLocalStorage('bruno.theme', 'light');
+  const isBrowserThemeLight = window.matchMedia("(prefers-color-scheme: light)").matches;
+  const [storedTheme, setStoredTheme] = useLocalStorage('bruno.theme', isBrowserThemeLight ? 'light' : 'dark');
 
   const theme = themes[storedTheme];
   const themeOptions = Object.keys(themes);

packages/bruno-app/src/providers/Toaster/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Toaster } from 'react-hot-toast';
+import { useTheme } from 'providers/Theme';
+
+export const ToastContext = React.createContext();
+
+export const ToastProvider = (props) => {
+  const {
+    storedTheme
+  } = useTheme();
+
+  const toastOptions = { duration: 2000 };
+  if(storedTheme === 'dark') {
+    toastOptions.style = {
+      borderRadius: '10px',
+      background: '#3d3d3d',
+      color: '#fff'
+    };
+  }
+
+  return (
+    <ToastContext.Provider {...props} value="toastProvider">
+      <Toaster toastOptions={toastOptions} />
+      <div>
+        {props.children}
+      </div>
+    </ToastContext.Provider>
+  );
+};
+
+export default ToastProvider;

packages/bruno-app/src/themes/dark.js

@@ -4,12 +4,25 @@ const darkTheme = {
   textLink: '#569cd6',
   bg: '#1e1e1e',
 
+  colors: {
+    text: {
+      danger: '#f06f57',
+      muted: '#9d9d9d'
+    },
+    bg: {
+      danger: '#d03544'
+    }
+  },
+
   menubar: {
-    bg: '#333333',
+    bg: '#333333'
   },
 
   sidebar: {
     color: '#ccc',
+    muted: '#9d9d9d',
+    bg: '#252526',
+    dragbar: '#8a8a8a',
 
     workspace: {
       bg: '#3D3D3D'
@@ -29,6 +42,10 @@ const darkTheme = {
           indentBorder: 'solid 1px #4c4c4c'
         }
       }
+    },
+
+    dropdownIcon: {
+      color: '#ccc'
     }
   },
 
@@ -38,12 +55,13 @@ const darkTheme = {
   },
 
   dropdown: {
-    color: "rgb(204, 204, 204)",
-    iconColor: "rgb(204, 204, 204)",
+    color: 'rgb(204, 204, 204)',
+    iconColor: 'rgb(204, 204, 204)',
     bg: 'rgb(48, 48, 49)',
-    hoverBg: '#0F395E',
+    hoverBg: '#185387',
     shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
-    seperator: '#444'
+    seperator: '#444',
+    labelBg: '#4a4949'
   },
 
   request: {
@@ -75,7 +93,24 @@ const darkTheme = {
 
   collection: {
     environment: {
-      bg: '#3D3D3D'
+      bg: '#3D3D3D',
+
+      settings: {
+        bg: '#3D3D3D',
+        sidebar: {
+          bg: '#3D3D3D',
+          borderRight: '#4f4f4f'
+        },
+        item: {
+          border: '#569cd6',
+          hoverBg: 'transparent',
+          active: {
+            bg: 'transparent',
+            hoverBg: 'transparent'
+          }
+        },
+        gridBorder: '#4f4f4f'
+      }
     }
   },
 
@@ -87,20 +122,23 @@ const darkTheme = {
     },
     body: {
       color: '#ccc',
-      bg: 'rgb(48, 48, 49)',
+      bg: 'rgb(48, 48, 49)'
     },
-    input : {
+    input: {
       bg: 'rgb(65, 65, 65)',
       border: 'rgb(65, 65, 65)',
       focusBorder: 'rgb(65, 65, 65)'
+    },
+    backdrop: {
+      opacity: 0.2
     }
   },
 
   button: {
     secondary: {
       color: 'rgb(204, 204, 204)',
-      bg: '#0F395E',
-      border: '#0F395E',
+      bg: '#185387',
+      border: '#185387',
       hoverBorder: '#696969'
     },
     close: {
@@ -108,6 +146,11 @@ const darkTheme = {
       bg: 'transparent',
       border: 'transparent',
       hoverBorder: ''
+    },
+    disabled: {
+      color: '#a5a5a5',
+      bg: '#626262',
+      border: '#626262'
     }
   },
 
@@ -148,34 +191,18 @@ const darkTheme = {
 
   table: {
     border: '#333',
-    thead : {
+    thead: {
       color: 'rgb(204, 204, 204)'
     },
-    striped: '#2A2D2F'
+    striped: '#2A2D2F',
+    input: {
+      color: '#555555'
+    }
   },
 
-  'primary-text': '#ffffff',
-  'secondary-text': '#929292',
-  'sidebar-collection-item-active-background': '#e1e1e1',
-  'sidebar-background': '#252526',
-  'sidebar-bottom-bg': '#68217a',
-  'request-dragbar-background': '#efefef',
-  'request-dragbar-background-active': 'rgb(200, 200, 200)',
-  'tab-inactive': 'rgb(155 155 155)',
-  'tab-active-border': '#546de5',
-  'layout-border': '#dedede',
-  'codemirror-border': '#efefef',
-  'codemirror-background': 'rgb(243, 243, 243)',
-  'text-link': '#1663bb',
-  'text-danger': 'rgb(185, 28, 28)',
-  'background-danger': '#dc3545',
-  'method-get': 'rgb(5, 150, 105)',
-  'method-post': '#8e44ad',
-  'method-delete': 'rgb(185, 28, 28)',
-  'method-patch': 'rgb(52 52 52)',
-  'method-options': 'rgb(52 52 52)',
-  'method-head': 'rgb(52 52 52)',
-  'table-stripe': '#f3f3f3'
+  plainGrid: {
+    hoverBg: '#3D3D3D'
+  }
 };
 
 export default darkTheme;

packages/bruno-app/src/themes/light.js

@@ -4,12 +4,25 @@ const lightTheme = {
   textLink: '#1663bb',
   bg: '#fff',
 
+  colors: {
+    text: {
+      danger: 'rgb(185, 28, 28)',
+      muted: '#4b5563'
+    },
+    bg: {
+      danger: '#dc3545'
+    }
+  },
+
   menubar: {
-    bg: 'rgb(44, 44, 44)',
+    bg: 'rgb(44, 44, 44)'
   },
 
   sidebar: {
     color: 'rgb(52, 52, 52)',
+    muted: '#4b5563',
+    bg: '#F3F3F3',
+    dragbar: 'rgb(200, 200, 200)',
 
     workspace: {
       bg: '#e1e1e1'
@@ -29,6 +42,10 @@ const lightTheme = {
           indentBorder: 'solid 1px #d0d0d0'
         }
       }
+    },
+
+    dropdownIcon: {
+      color: 'rgb(110 110 110)'
     }
   },
 
@@ -38,12 +55,13 @@ const lightTheme = {
   },
 
   dropdown: {
-    color: "rgb(48 48 48)",
-    iconColor: "rgb(75, 85, 99)",
+    color: 'rgb(48 48 48)',
+    iconColor: 'rgb(75, 85, 99)',
     bg: '#fff',
     hoverBg: '#e9e9e9',
     shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px',
-    seperator: '#e7e7e7'
+    seperator: '#e7e7e7',
+    labelBg: '#f3f3f3'
   },
 
   request: {
@@ -75,7 +93,28 @@ const lightTheme = {
 
   collection: {
     environment: {
-      bg: '#efefef'
+      bg: '#efefef',
+
+      settings: {
+        bg: 'white',
+        sidebar: {
+          bg: '#eaeaea',
+          borderRight: 'transparent'
+        },
+        item: {
+          border: '#546de5',
+          hoverBg: '#e4e4e4',
+          active: {
+            bg: '#dcdcdc',
+            hoverBg: '#dcdcdc'
+          }
+        },
+        gridBorder: '#f4f4f4'
+      }
+    },
+
+    sidebar: {
+      bg: '#eaeaea'
     }
   },
 
@@ -86,13 +125,16 @@ const lightTheme = {
       iconColor: 'black'
     },
     body: {
-      color: '#ccc',
-      bg: 'white',
+      color: 'rgb(52, 52, 52)',
+      bg: 'white'
     },
-    input : {
+    input: {
       bg: 'white',
       border: '#ccc',
       focusBorder: '#8b8b8b'
+    },
+    backdrop: {
+      opacity: 0.4
     }
   },
 
@@ -108,6 +150,11 @@ const lightTheme = {
       bg: 'white',
       border: 'white',
       hoverBorder: ''
+    },
+    disabled: {
+      color: '#9f9f9f',
+      bg: '#efefef',
+      border: 'rgb(234, 234, 234)'
     }
   },
 
@@ -148,34 +195,18 @@ const lightTheme = {
 
   table: {
     border: '#efefef',
-    thead : {
+    thead: {
       color: '#616161'
     },
-    striped: '#f3f3f3'
+    striped: '#f3f3f3',
+    input: {
+      color: '#000000'
+    }
   },
-  
-  'primary-text': 'rgb(52 52 52)',
-  'secondary-text': '#929292',
-  'sidebar-collection-item-active-background': '#e1e1e1',
-  'sidebar-background': '#f3f3f3',
-  'sidebar-bottom-bg': '#f3f3f3',
-  'request-dragbar-background': '#efefef',
-  'request-dragbar-background-active': 'rgb(200, 200, 200)',
-  'tab-inactive': 'rgb(155 155 155)',
-  'tab-active-border': '#546de5',
-  'layout-border': '#dedede',
-  'codemirror-border': '#efefef',
-  'codemirror-background': 'rgb(243, 243, 243)',
-  'text-link': '#1663bb',
-  'text-danger': 'rgb(185, 28, 28)',
-  'background-danger': '#dc3545',
-  'method-get': 'rgb(5, 150, 105)',
-  'method-post': '#8e44ad',
-  'method-delete': 'rgb(185, 28, 28)',
-  'method-patch': 'rgb(52 52 52)',
-  'method-options': 'rgb(52 52 52)',
-  'method-head': 'rgb(52 52 52)',
-  'table-stripe': '#f3f3f3'
+
+  plainGrid: {
+    hoverBg: '#f4f4f4'
+  }
 };
 
 export default lightTheme;

packages/bruno-app/src/utils/collections/import.js

@@ -1,98 +0,0 @@
-import each from 'lodash/each';
-import get from 'lodash/get';
-import fileDialog from 'file-dialog';
-import toast from 'react-hot-toast';
-import { uuid } from 'utils/common';
-import { collectionSchema } from '@usebruno/schema';
-import { saveCollectionToIdb } from 'utils/idb';
-import sampleCollection from './samples/sample-collection.json';
-
-const readFile = (files) => {
-  return new Promise((resolve, reject) => {
-    const fileReader = new FileReader();
-    fileReader.onload = (e) => resolve(e.target.result);
-    fileReader.onerror = (err) => reject(err);
-    fileReader.readAsText(files[0]);
-  });
-};
-
-const parseJsonCollection = (str) => {
-  return new Promise((resolve, reject) => {
-    try {
-      let parsed = JSON.parse(str);
-      return resolve(parsed);
-    } catch (err) {
-      toast.error('Unable to parse the collection json file');
-      reject(err);
-    }
-  });
-};
-
-const validateSchema = (collection = {}) => {
-  collection.uid = uuid();
-  return new Promise((resolve, reject) => {
-    collectionSchema
-      .validate(collection)
-      .then(() => resolve(collection))
-      .catch((err) => {
-        toast.error('The Collection file is corrupted');
-        reject(err);
-      });
-  });
-};
-
-const updateUidsInCollection = (collection) => {
-  collection.uid = uuid();
-
-  const updateItemUids = (items = []) => {
-    each(items, (item) => {
-      item.uid = uuid();
-
-      each(get(item, 'request.headers'), (header) => (header.uid = uuid()));
-      each(get(item, 'request.params'), (param) => (param.uid = uuid()));
-      each(get(item, 'request.body.multipartForm'), (param) => (param.uid = uuid()));
-      each(get(item, 'request.body.formUrlEncoded'), (param) => (param.uid = uuid()));
-
-      if (item.items && item.items.length) {
-        updateItemUids(item.items);
-      }
-    });
-  };
-  updateItemUids(collection.items);
-
-  return collection;
-};
-
-const importCollection = () => {
-  return new Promise((resolve, reject) => {
-    fileDialog({ accept: 'application/json' })
-      .then(readFile)
-      .then(parseJsonCollection)
-      .then(validateSchema)
-      .then(updateUidsInCollection)
-      .then(validateSchema)
-      .then((collection) => saveCollectionToIdb(window.__idb, collection))
-      .then((collection) => {
-        toast.success('Collection imported successfully');
-        resolve(collection);
-      })
-      .catch((err) => {
-        toast.error('Import collection failed');
-        reject(err);
-      });
-  });
-};
-
-export const importSampleCollection = () => {
-  return new Promise((resolve, reject) => {
-    validateSchema(sampleCollection)
-      .then(validateSchema)
-      .then(updateUidsInCollection)
-      .then(validateSchema)
-      .then((collection) => saveCollectionToIdb(window.__idb, collection))
-      .then(resolve)
-      .catch(reject);
-  });
-};
-
-export default importCollection;

packages/bruno-app/src/utils/collections/index.js

@@ -1,4 +1,4 @@
-import template from 'lodash/template';
+import reckon from 'reckonjs';
 import get from 'lodash/get';
 import each from 'lodash/each';
 import find from 'lodash/find';
@@ -196,7 +196,7 @@ export const transformCollectionToSaveToIdb = (collection, options = {}) => {
               json: si.draft.request.body.json,
               text: si.draft.request.body.text,
               xml: si.draft.request.body.xml,
-              multipartForm: si.draft.request.body.multipartForm,
+              graphql: si.draft.request.body.graphql,
               formUrlEncoded: copyFormUrlEncodedParams(si.draft.request.body.formUrlEncoded),
               multipartForm: copyMultipartFormParams(si.draft.request.body.multipartForm)
             }
@@ -214,6 +214,7 @@ export const transformCollectionToSaveToIdb = (collection, options = {}) => {
               json: si.request.body.json,
               text: si.request.body.text,
               xml: si.request.body.xml,
+              graphql: si.request.body.graphql,
               formUrlEncoded: copyFormUrlEncodedParams(si.request.body.formUrlEncoded),
               multipartForm: copyMultipartFormParams(si.request.body.multipartForm)
             }
@@ -356,21 +357,26 @@ export const isLocalCollection = (collection) => {
 };
 
 export const interpolateEnvironmentVars = (item, variables) => {
-  const envVars = {};
-  const { request } = item;
+  const envVars = {
+    interpolation: { escapeValue: true }
+  };
+  const _item = item.draft ? item.draft : item;
+  const { request } = _item;
   each(variables, (variable) => {
     envVars[variable.name] = variable.value;
   });
 
-  const templateOpts = {
-    interpolate: /{{([\s\S]+?)}}/g, //interpolate content using markers `{{}}`
-    evaluate: null, // prevent any js evaluation
-    escape: null // disable any escaping
+  // TODO: Find a better interpolation library
+  const interpolate = (str) => {
+    if(!str || !str.length || typeof str !== "string") {
+      return str;
+    }
+
+    return str.reckon(envVars);
   };
 
-  const interpolate = (str) => template(str, templateOpts)(envVars);
-
   request.url = interpolate(request.url);
+  console.log(request.url);
 
   each(request.headers, (header) => {
     header.value = interpolate(header.value);
@@ -405,3 +411,13 @@ export const interpolateEnvironmentVars = (item, variables) => {
 
   return request;
 };
+
+export const getDefaultRequestPaneTab = (item) => {
+  if(item.type === 'http-request') {
+    return 'params';
+  }
+
+  if(item.type === 'graphql-request') {
+    return 'query';
+  }
+};

packages/bruno-app/src/utils/common/error.js

@@ -9,26 +9,28 @@ export class BrunoError extends Error {
   }
 }
 
-export const parseError = (error) => {
+export const parseError = (error, defaultErrorMsg = 'An error occurred') => {
   if (error instanceof BrunoError) {
     return error.message;
   }
 
-  return error.message ? error.message : 'An error occured';
+  return error.message ? error.message : defaultErrorMsg;
 };
 
-export const toastError = (error) => {
+export const toastError = (error, defaultErrorMsg = 'An error occurred') => {
+  let errorMsg = parseError(error, defaultErrorMsg);
+
   if (error instanceof BrunoError) {
     if (error.level === 'warning') {
-      return toast(error.message, {
+      return toast(errorMsg, {
         icon: '⚠️',
         duration: 3000
       });
     }
-    return toast.error(error.message, {
+    return toast.error(errorMsg, {
       duration: 3000
     });
   }
 
-  return toast.error(error.message || 'An error occured');
+  return toast.error(errorMsg);
 };

packages/bruno-app/src/utils/importers/bruno-collection.js

@@ -0,0 +1,56 @@
+import fileDialog from 'file-dialog';
+import { saveCollectionToIdb } from 'utils/idb';
+import { BrunoError } from 'utils/common/error';
+import { validateSchema, updateUidsInCollection } from './common';
+import sampleCollection from './samples/sample-collection.json';
+
+const readFile = (files) => {
+  return new Promise((resolve, reject) => {
+    const fileReader = new FileReader();
+    fileReader.onload = (e) => resolve(e.target.result);
+    fileReader.onerror = (err) => reject(err);
+    fileReader.readAsText(files[0]);
+  });
+};
+
+const parseJsonCollection = (str) => {
+  return new Promise((resolve, reject) => {
+    try {
+      let parsed = JSON.parse(str);
+      return resolve(parsed);
+    } catch (err) {
+      console.log(err);
+      reject(new BrunoError('Unable to parse the collection json file'));
+    }
+  });
+};
+
+const importCollection = () => {
+  return new Promise((resolve, reject) => {
+    fileDialog({ accept: 'application/json' })
+      .then(readFile)
+      .then(parseJsonCollection)
+      .then(validateSchema)
+      .then(updateUidsInCollection)
+      .then(validateSchema)
+      .then((collection) => saveCollectionToIdb(window.__idb, collection))
+      .then((collection) => resolve(collection))
+      .catch((err) => {
+        console.log(err);
+        reject(new BrunoError('Import collection failed'));
+      });
+  });
+};
+
+export const importSampleCollection = () => {
+  return new Promise((resolve, reject) => {
+    validateSchema(sampleCollection)
+      .then(updateUidsInCollection)
+      .then(validateSchema)
+      .then((collection) => saveCollectionToIdb(window.__idb, collection))
+      .then(resolve)
+      .catch(reject);
+  });
+};
+
+export default importCollection;

packages/bruno-app/src/utils/importers/common.js

@@ -0,0 +1,44 @@
+
+import each from 'lodash/each';
+import get from 'lodash/get';
+
+import cloneDeep from 'lodash/cloneDeep';
+import { uuid } from 'utils/common';
+import { collectionSchema } from '@usebruno/schema';
+import { BrunoError } from 'utils/common/error';
+
+export const validateSchema = (collection = {}) => {
+  return new Promise((resolve, reject) => {
+    collectionSchema
+      .validate(collection)
+      .then(() => resolve(collection))
+      .catch((err) => {
+        console.log(err);
+        reject(new BrunoError('The Collection file is corrupted'));
+      });
+  });
+};
+
+export const updateUidsInCollection = (_collection) => {
+  const collection = cloneDeep(_collection);
+
+  collection.uid = uuid();
+
+  const updateItemUids = (items = []) => {
+    each(items, (item) => {
+      item.uid = uuid();
+
+      each(get(item, 'request.headers'), (header) => (header.uid = uuid()));
+      each(get(item, 'request.params'), (param) => (param.uid = uuid()));
+      each(get(item, 'request.body.multipartForm'), (param) => (param.uid = uuid()));
+      each(get(item, 'request.body.formUrlEncoded'), (param) => (param.uid = uuid()));
+
+      if (item.items && item.items.length) {
+        updateItemUids(item.items);
+      }
+    });
+  };
+  updateItemUids(collection.items);
+
+  return collection;
+};

packages/bruno-app/src/utils/importers/postman-collection.js

@@ -0,0 +1,194 @@
+import each from 'lodash/each';
+import get from 'lodash/get';
+import fileDialog from 'file-dialog';
+import { uuid } from 'utils/common';
+import { saveCollectionToIdb } from 'utils/idb';
+import { BrunoError } from 'utils/common/error';
+import { validateSchema, updateUidsInCollection } from './common';
+
+const readFile = (files) => {
+  return new Promise((resolve, reject) => {
+    const fileReader = new FileReader();
+    fileReader.onload = (e) => resolve(e.target.result);
+    fileReader.onerror = (err) => reject(err);
+    fileReader.readAsText(files[0]);
+  });
+};
+
+const isItemAFolder = (item) => {
+  return !item.request;
+};
+
+const importPostmanV2CollectionItem = (brunoParent, item) => {
+  brunoParent.items = brunoParent.items || [];
+
+  each(item, (i) => {
+    if(isItemAFolder(i)) {
+      const brunoFolderItem = {
+        uid: uuid(),
+        name: i.name,
+        type: 'folder',
+        items: []
+      };
+      brunoParent.items.push(brunoFolderItem);
+      if(i.item && i.item.length) {
+        importPostmanV2CollectionItem(brunoFolderItem, i.item);
+      }
+    } else {
+      if(i.request) {
+        let url = '';
+        if(typeof i.request.url === 'string') {
+          url = i.request.url;
+        } else {
+          url = get(i, 'request.url.raw') || '';
+        }
+
+        const brunoRequestItem = {
+          uid: uuid(),
+          name: i.name,
+          type: 'http-request',
+          request: {
+            url: url,
+            method: i.request.method,
+            headers: [],
+            params: [],
+            body: {
+              mode: 'none',
+              json: null,
+              text: null,
+              xml: null,
+              formUrlEncoded: [],
+              multipartForm: []
+            }
+          }
+        };
+
+        const bodyMode = get(i, 'request.body.mode');
+        if(bodyMode) {
+          if(bodyMode === 'formdata') {
+            brunoRequestItem.request.body.mode = 'multipartForm';
+            each(i.request.body.formdata, (param) => {
+              brunoRequestItem.request.body.formUrlEncoded.push({
+                uid: uuid(),
+                name: param.key,
+                value: param.value,
+                description: param.description,
+                enabled: !param.disabled
+              });
+            });
+          }
+
+          if(bodyMode === 'urlencoded') {
+            brunoRequestItem.request.body.mode = 'formUrlEncoded';
+            each(i.request.body.urlencoded, (param) => {
+              brunoRequestItem.request.body.formUrlEncoded.push({
+                uid: uuid(),
+                name: param.key,
+                value: param.value,
+                description: param.description,
+                enabled: !param.disabled
+              });
+            });
+          }
+
+          if(bodyMode === 'raw') {
+            const language = get(i, 'request.body.options.raw.language');
+            if(language === 'json') {
+              brunoRequestItem.request.body.mode = 'json';
+              brunoRequestItem.request.body.json = i.request.body.raw;
+            } else if (language === 'xml') {
+              brunoRequestItem.request.body.mode = 'xml';
+              brunoRequestItem.request.body.xml = i.request.body.raw;
+            } else {
+              brunoRequestItem.request.body.mode = 'text';
+              brunoRequestItem.request.body.text = i.request.body.raw;
+            }
+          }
+        }
+
+        each(i.request.header, (header) => {
+          brunoRequestItem.request.headers.push({
+            uid: uuid(),
+            name: header.key,
+            value: header.value,
+            description: header.description,
+            enabled: !header.disabled
+          });
+        });
+
+        each(get(i, 'request.url.query'), (param) => {
+          brunoRequestItem.request.params.push({
+            uid: uuid(),
+            name: param.key,
+            value: param.value,
+            description: param.description,
+            enabled: !param.disabled
+          });
+        });
+
+        brunoParent.items.push(brunoRequestItem);
+      }
+    }
+  });
+};
+
+const importPostmanV2Collection = (collection) => {
+  const brunoCollection = {
+    name: collection.info.name,
+    uid: uuid(),
+    version: "1",
+    items: [],
+    environments: []
+  };
+
+  importPostmanV2CollectionItem(brunoCollection, collection.item);
+
+  return brunoCollection;
+};
+
+
+const parsePostmanCollection = (str) => {
+  return new Promise((resolve, reject) => {
+    try {
+      let collection = JSON.parse(str);
+      let schema = get(collection, 'info.schema');
+
+      let v2Schemas = [
+        'https://schema.getpostman.com/json/collection/v2.0.0/collection.json',
+        'https://schema.getpostman.com/json/collection/v2.1.0/collection.json'
+      ];
+
+      if(v2Schemas.includes(schema)) {
+        return resolve(importPostmanV2Collection(collection));
+      }
+
+      throw new BrunoError('Unknown postman schema');
+    } catch (err) {
+      console.log(err);
+      if(err instanceof BrunoError) {
+        return reject(err);
+      }
+
+      return reject(new BrunoError('Unable to parse the postman collection json file'));
+    }
+  });
+};
+
+const importCollection = () => {
+  return new Promise((resolve, reject) => {
+    fileDialog({ accept: 'application/json' })
+      .then(readFile)
+      .then(parsePostmanCollection)
+      .then(validateSchema)
+      .then(updateUidsInCollection)
+      .then(validateSchema)
+      .then((collection) => saveCollectionToIdb(window.__idb, collection))
+      .then((collection) => resolve(collection))
+      .catch((err) => {
+        console.log(err);
+        reject(new BrunoError('Import collection failed'));
+      });
+  });
+};
+
+export default importCollection;

packages/bruno-app/src/utils/network/index.js

@@ -1,14 +1,14 @@
+import get from 'lodash/get';
 import each from 'lodash/each';
 import filter from 'lodash/filter';
 import qs from 'qs';
-import { rawRequest, gql } from 'graphql';
 import { sendHttpRequestInBrowser } from './browser';
 import { isElectron } from 'utils/common/platform';
 import cancelTokens, { deleteCancelToken } from 'utils/network/cancelTokens';
 
 export const sendNetworkRequest = async (item, options) => {
   return new Promise((resolve, reject) => {
-    if (item.type === 'http-request') {
+    if (['http-request', 'graphql-request'].includes(item.type)) {
       const timeStart = Date.now();
       sendHttpRequest(item.draft ? item.draft.request : item.request, options)
         .then((response) => {
@@ -79,6 +79,15 @@ const sendHttpRequest = async (request, options) => {
       axiosRequest.data = params;
     }
 
+    if (request.body.mode === 'graphql') {
+      const graphqlQuery = {
+        query: get(request, 'body.graphql.query'),
+        variables: JSON.parse(get(request, 'body.graphql.variables') || '{}')
+      };
+      axiosRequest.headers['content-type'] = 'application/json';
+      axiosRequest.data = graphqlQuery;
+    }
+
     console.log('>>> Sending Request');
     console.log(axiosRequest);
 
@@ -90,21 +99,6 @@ const sendHttpRequest = async (request, options) => {
   });
 };
 
-const sendGraphqlRequest = async (request) => {
-  const query = gql`
-    ${request.request.body.graphql.query}
-  `;
-
-  const { data, errors, extensions, headers, status } = await rawRequest(request.request.url, query);
-
-  return {
-    data,
-    headers,
-    data,
-    errors
-  };
-};
-
 export const cancelNetworkRequest = async (cancelTokenUid) => {
   if (isElectron()) {
     return new Promise((resolve, reject) => {

packages/bruno-electron/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0",
+  "version": "0.3.0",
   "name": "bruno",
   "description": "Opensource API Client",
   "homepage": "https://www.usebruno.com",
@@ -15,7 +15,6 @@
   "dependencies": {
     "axios": "^0.26.0",
     "chokidar": "^3.5.3",
-    "dmg-license": "^1.0.11",
     "electron-is-dev": "^2.0.0",
     "electron-store": "^8.1.0",
     "electron-util": "^0.17.2",
@@ -26,9 +25,12 @@
     "nanoid": "3.3.4",
     "yup": "^0.32.11"
   },
+  "optionalDependencies": {
+    "dmg-license": "^1.0.11"
+  },
   "devDependencies": {
     "electron": "^21.1.1",
-    "electron-builder": "23.0.2",
+    "electron-builder": "23.3.3",
     "electron-icon-maker": "^0.0.5"
   }
 }

packages/bruno-graphql-docs/.gitignore

@@ -0,0 +1,22 @@
+# dependencies
+node_modules
+yarn.lock
+pnpm-lock.yaml
+package-lock.json
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# production
+dist
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

packages/bruno-graphql-docs/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@usebruno/graphql-docs",
+  "version": "0.1.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^9.0.2",
+    "@types/markdown-it": "^12.2.3",
+    "@types/react": "^18.0.25",
+    "graphql": "^16.6.0",
+    "markdown-it": "^13.0.1",
+    "postcss": "^8.4.18",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rollup": "3.2.5",
+    "rollup-plugin-dts": "^5.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^4.8.4"
+  },
+  "peerDependencies": {
+    "graphql": "^16.6.0",
+    "markdown-it": "^13.0.1",
+    "react": "^17.0.2"
+  },
+  "overrides": {
+    "rollup": "3.2.5"
+  }
+}

packages/bruno-graphql-docs/readme.md

@@ -0,0 +1,8 @@
+# bruno-graphql-docs
+
+Standalone graphql docs explorer module forked from [graphiql](https://github.com/graphql/graphiql)
+
+### Publish to Npm Registry
+```bash
+npm publish --access=public
+```

packages/bruno-graphql-docs/rollup.config.js

@@ -0,0 +1,46 @@
+const { nodeResolve } = require("@rollup/plugin-node-resolve");
+const commonjs = require("@rollup/plugin-commonjs");
+const typescript = require("@rollup/plugin-typescript");
+const dts = require("rollup-plugin-dts");
+const postcss = require("rollup-plugin-postcss");
+const { terser } = require("rollup-plugin-terser");
+const peerDepsExternal = require('rollup-plugin-peer-deps-external');
+
+const packageJson = require("./package.json");
+
+module.exports = [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      postcss({
+        minimize: true,
+				extensions: ['.css']
+      }),
+      peerDepsExternal(),
+      nodeResolve({
+        extensions: ['.css']
+      }),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      terser()
+    ],
+    external: ["react", "react-dom", "index.css"]
+  },
+  {
+    input: "dist/esm/index.d.ts",
+    output: [{ file: "dist/index.d.ts", format: "esm" }],
+    plugins: [dts.default()],
+  }
+];

packages/bruno-graphql-docs/src/components/DocExplorer.tsx

@@ -0,0 +1,233 @@
+/**
+ *  Copyright (c) 2021 GraphQL Contributors.
+ *
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+import React, { ReactNode } from 'react';
+import { GraphQLSchema, isType, GraphQLNamedType, GraphQLError } from 'graphql';
+import { FieldType } from './DocExplorer/types';
+
+import FieldDoc from './DocExplorer/FieldDoc';
+import SchemaDoc from './DocExplorer/SchemaDoc';
+import SearchBox from './DocExplorer/SearchBox';
+import SearchResults from './DocExplorer/SearchResults';
+import TypeDoc from './DocExplorer/TypeDoc';
+
+type NavStackItem = {
+  name: string;
+  title?: string;
+  search?: string;
+  def?: GraphQLNamedType | FieldType;
+};
+
+const initialNav: NavStackItem = {
+  name: 'Schema',
+  title: 'Documentation Explorer',
+};
+
+type DocExplorerProps = {
+  schema?: GraphQLSchema | null;
+  schemaErrors?: readonly GraphQLError[];
+  children?: ReactNode | null;
+};
+
+type DocExplorerState = {
+  navStack: NavStackItem[];
+};
+
+/**
+ * DocExplorer
+ *
+ * Shows documentations for GraphQL definitions from the schema.
+ *
+ * Props:
+ *
+ *   - schema: A required GraphQLSchema instance that provides GraphQL document
+ *     definitions.
+ *
+ * Children:
+ *
+ *   - Any provided children will be positioned in the right-hand-side of the
+ *     top bar. Typically this will be a "close" button for temporary explorer.
+ *
+ */
+export class DocExplorer extends React.Component<
+  DocExplorerProps,
+  DocExplorerState
+> {
+  // handleClickTypeOrField: OnClickTypeFunction | OnClickFieldFunction
+  constructor(props: DocExplorerProps) {
+    super(props);
+
+    this.state = { navStack: [initialNav] };
+  }
+
+  shouldComponentUpdate(
+    nextProps: DocExplorerProps,
+    nextState: DocExplorerState,
+  ) {
+    return (
+      this.props.schema !== nextProps.schema ||
+      this.state.navStack !== nextState.navStack ||
+      this.props.schemaErrors !== nextProps.schemaErrors
+    );
+  }
+
+  render() {
+    const { schema, schemaErrors } = this.props;
+    const navStack = this.state.navStack;
+    const navItem = navStack[navStack.length - 1];
+
+    let content;
+    if (schemaErrors) {
+      content = (
+        <div className="error-container">{'Error fetching schema'}</div>
+      );
+    } else if (schema === undefined) {
+      // Schema is undefined when it is being loaded via introspection.
+      content = (
+        <div className="spinner-container">
+          <div className="spinner" />
+        </div>
+      );
+    } else if (!schema) {
+      // Schema is null when it explicitly does not exist, typically due to
+      // an error during introspection.
+      content = <div className="error-container">{'No Schema Available'}</div>;
+    } else if (navItem.search) {
+      content = (
+        <SearchResults
+          searchValue={navItem.search}
+          withinType={navItem.def as GraphQLNamedType}
+          schema={schema}
+          onClickType={this.handleClickType}
+          onClickField={this.handleClickField}
+        />
+      );
+    } else if (navStack.length === 1) {
+      content = (
+        <SchemaDoc schema={schema} onClickType={this.handleClickType} />
+      );
+    } else if (isType(navItem.def)) {
+      content = (
+        <TypeDoc
+          schema={schema}
+          type={navItem.def}
+          onClickType={this.handleClickType}
+          onClickField={this.handleClickField}
+        />
+      );
+    } else {
+      content = (
+        <FieldDoc
+          field={navItem.def as FieldType}
+          onClickType={this.handleClickType}
+        />
+      );
+    }
+
+    const shouldSearchBoxAppear =
+      navStack.length === 1 ||
+      (isType(navItem.def) && 'getFields' in navItem.def);
+
+    let prevName;
+    if (navStack.length > 1) {
+      prevName = navStack[navStack.length - 2].name;
+    }
+
+    return (
+      <div className="graphql-docs-container">
+        <section
+          className="doc-explorer"
+          key={navItem.name}
+          aria-label="Documentation Explorer">
+          <div className="doc-explorer-title-bar">
+            {prevName && (
+              <button
+                className="doc-explorer-back"
+                onClick={this.handleNavBackClick}
+                aria-label={`Go back to ${prevName}`}>
+                {prevName}
+              </button>
+            )}
+            <div className="doc-explorer-title">
+              {navItem.title || navItem.name}
+            </div>
+            <div className="doc-explorer-rhs">{this.props.children}</div>
+          </div>
+          <div className="doc-explorer-contents">
+            {shouldSearchBoxAppear && (
+              <SearchBox
+                value={navItem.search}
+                placeholder={`Search ${navItem.name}...`}
+                onSearch={this.handleSearch}
+              />
+            )}
+            {content}
+          </div>
+        </section>
+      </div>
+    );
+  }
+
+  // Public API
+  showDoc(typeOrField: GraphQLNamedType | FieldType) {
+    const navStack = this.state.navStack;
+    const topNav = navStack[navStack.length - 1];
+    if (topNav.def !== typeOrField) {
+      this.setState({
+        navStack: navStack.concat([
+          {
+            name: typeOrField.name,
+            def: typeOrField,
+          },
+        ]),
+      });
+    }
+  }
+
+  // Public API
+  showDocForReference(reference: any) {
+    if (reference && reference.kind === 'Type') {
+      this.showDoc(reference.type);
+    } else if (reference.kind === 'Field') {
+      this.showDoc(reference.field);
+    } else if (reference.kind === 'Argument' && reference.field) {
+      this.showDoc(reference.field);
+    } else if (reference.kind === 'EnumValue' && reference.type) {
+      this.showDoc(reference.type);
+    }
+  }
+
+  // Public API
+  showSearch(search: string) {
+    const navStack = this.state.navStack.slice();
+    const topNav = navStack[navStack.length - 1];
+    navStack[navStack.length - 1] = { ...topNav, search };
+    this.setState({ navStack });
+  }
+
+  reset() {
+    this.setState({ navStack: [initialNav] });
+  }
+
+  handleNavBackClick = () => {
+    if (this.state.navStack.length > 1) {
+      this.setState({ navStack: this.state.navStack.slice(0, -1) });
+    }
+  };
+
+  handleClickType = (type: GraphQLNamedType) => {
+    this.showDoc(type);
+  };
+
+  handleClickField = (field: FieldType) => {
+    this.showDoc(field);
+  };
+
+  handleSearch = (value: string) => {
+    this.showSearch(value);
+  };
+}

packages/bruno-graphql-docs/src/components/DocExplorer/Argument.tsx

@@ -0,0 +1,33 @@
+/**
+ *  Copyright (c) 2021 GraphQL Contributors.
+ *
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { GraphQLArgument } from 'graphql';
+import TypeLink from './TypeLink';
+import DefaultValue from './DefaultValue';
+import { OnClickTypeFunction } from './types';
+
+type ArgumentProps = {
+  arg: GraphQLArgument;
+  onClickType: OnClickTypeFunction;
+  showDefaultValue?: boolean;
+};
+
+export default function Argument({
+  arg,
+  onClickType,
+  showDefaultValue,
+}: ArgumentProps) {
+  return (
+    <span className="arg">
+      <span className="arg-name">{arg.name}</span>
+      {': '}
+      <TypeLink type={arg.type} onClick={onClickType} />
+      {showDefaultValue !== false && <DefaultValue field={arg} />}
+    </span>
+  );
+}

packages/bruno-graphql-docs/src/components/DocExplorer/DefaultValue.tsx

@@ -0,0 +1,37 @@
+/**
+ *  Copyright (c) 2021 GraphQL Contributors.
+ *
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { astFromValue, print, ValueNode } from 'graphql';
+import { FieldType } from './types';
+
+const printDefault = (ast?: ValueNode | null): string => {
+  if (!ast) {
+    return '';
+  }
+  return print(ast);
+};
+
+type DefaultValueProps = {
+  field: FieldType;
+};
+
+export default function DefaultValue({ field }: DefaultValueProps) {
+  // field.defaultValue could be null or false, so be careful here!
+  if ('defaultValue' in field && field.defaultValue !== undefined) {
+    return (
+      <span>
+        {' = '}
+        <span className="arg-default-value">
+          {printDefault(astFromValue(field.defaultValue, field.type))}
+        </span>
+      </span>
+    );
+  }
+
+  return null;
+}

packages/bruno-graphql-docs/src/components/DocExplorer/Directive.tsx

@@ -0,0 +1,22 @@
+/**
+ *  Copyright (c) 2021 GraphQL Contributors.
+ *
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { DirectiveNode } from 'graphql';
+
+type DirectiveProps = {
+  directive: DirectiveNode;
+};
+
+export default function Directive({ directive }: DirectiveProps) {
+  return (
+    <span className="doc-category-item" id={directive.name.value}>
+      {'@'}
+      {directive.name.value}
+    </span>
+  );
+}

packages/bruno-graphql-docs/src/components/DocExplorer/FieldDoc.tsx

@@ -0,0 +1,129 @@
+/**
+ *  Copyright (c) 2021 GraphQL Contributors.
+ *
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import Argument from './Argument';
+import Directive from './Directive';
+import MarkdownContent from './MarkdownContent';
+import TypeLink from './TypeLink';
+import { GraphQLArgument, DirectiveNode } from 'graphql';
+import { OnClickTypeFunction, FieldType } from './types';
+
+type FieldDocProps = {
+  field?: FieldType;
+  onClickType: OnClickTypeFunction;
+};
+
+export default function FieldDoc({ field, onClickType }: FieldDocProps) {
+  const [showDeprecated, handleShowDeprecated] = React.useState(false);
+  let argsDef;
+  let deprecatedArgsDef;
+  if (field && 'args' in field && field.args.length > 0) {
+    argsDef = (
+      <div id="doc-args" className="doc-category">
+        <div className="doc-category-title">{'arguments'}</div>
+        {field.args
+          .filter(arg => !arg.deprecationReason)
+          .map((arg: GraphQLArgument) => (
+            <div key={arg.name} className="doc-category-item">
+              <div>
+                <Argument arg={arg} onClickType={onClickType} />
+              </div>
+              <MarkdownContent
+                className="doc-value-description"
+                markdown={arg.description}
+              />
+              {arg && 'deprecationReason' in arg && (
+                <MarkdownContent
+                  className="doc-deprecation"
+                  markdown={arg?.deprecationReason}
+                />
+              )}
+            </div>
+          ))}
+      </div>
+    );
+    const deprecatedArgs = field.args.filter(arg =>
+      Boolean(arg.deprecationReason),
+    );
+    if (deprecatedArgs.length > 0) {
+      deprecatedArgsDef = (
+        <div id="doc-deprecated-args" className="doc-category">
+          <div className="doc-category-title">{'deprecated arguments'}</div>
+          {!showDeprecated ? (
+            <button
+              className="show-btn"
+              onClick={() => handleShowDeprecated(!showDeprecated)}>
+              {'Show deprecated arguments...'}
+            </button>
+          ) : (
+            deprecatedArgs.map((arg, i) => (
+              <div key={i}>
+                <div>
+                  <Argument arg={arg} onClickType={onClickType} />
+                </div>
+                <MarkdownContent
+                  className="doc-value-description"
+                  markdown={arg.description}
+                />
+                {arg && 'deprecationReason' in arg && (
+                  <MarkdownContent
+                    className="doc-deprecation"
+                    markdown={arg?.deprecationReason}
+                  />
+                )}
+              </div>
+            ))
+          )}
+        </div>
+      );
+    }
+  }
+
+  let directivesDef;
+  if (
+    field &&
+    field.astNode &&
+    field.astNode.directives &&
+    field.astNode.directives.length > 0
+  ) {
+    directivesDef = (
+      <div id="doc-directives" className="doc-category">
+        <div className="doc-category-title">{'directives'}</div>
+        {field.astNode.directives.map((directive: DirectiveNode) => (
+          <div key={directive.name.value} className="doc-category-item">
+            <div>
+              <Directive directive={directive} />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <MarkdownContent
+        className="doc-type-description"
+        markdown={field?.description || 'No Description'}
+      />
+      {field && 'deprecationReason' in field && (
+        <MarkdownContent
+          className="doc-deprecation"
+          markdown={field?.deprecationReason}
+        />
+      )}
+      <div className="doc-category">
+        <div className="doc-category-title">{'type'}</div>
+        <TypeLink type={field?.type} onClick={onClickType} />
+      </div>
+      {argsDef}
+      {directivesDef}
+      {deprecatedArgsDef}
+    </div>
+  );
+}

packages/bruno-graphql-docs/src/components/DocExplorer/MarkdownContent.tsx

@@ -0,0 +1,37 @@
+/**
+ *  Copyright (c) 2021 GraphQL Contributors.
+ *
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import MD from 'markdown-it';
+
+type Maybe<T> = T | null | undefined;
+
+const md = new MD({
+  // render urls as links, à la github-flavored markdown
+  linkify: true,
+});
+
+type MarkdownContentProps = {
+  markdown?: Maybe<string>;
+  className?: string;
+};
+
+export default function MarkdownContent({
+  markdown,
+  className,
+}: MarkdownContentProps) {
+  if (!markdown) {
+    return <div />;
+  }
+
+  return (
+    <div
+      className={className}
+      dangerouslySetInnerHTML={{ __html: md.render(markdown) }}
+    />
+  );
+}

packages/bruno-graphql-docs/src/components/DocExplorer/SchemaDoc.tsx

@@ -0,0 +1,59 @@
+/**
+ *  Copyright (c) 2021 GraphQL Contributors.
+ *
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import TypeLink from './TypeLink';
+import MarkdownContent from './MarkdownContent';
+import { GraphQLSchema } from 'graphql';
+import { OnClickTypeFunction } from './types';
+
+type SchemaDocProps = {
+  schema: GraphQLSchema;
+  onClickType: OnClickTypeFunction;
+};
+
+// Render the top level Schema
+export default function SchemaDoc({ schema, onClickType }: SchemaDocProps) {
+  const queryType = schema.getQueryType();
+  const mutationType = schema.getMutationType && schema.getMutationType();
+  const subscriptionType =
+    schema.getSubscriptionType && schema.getSubscriptionType();
+
+  return (
+    <div>
+      <MarkdownContent
+        className="doc-type-description"
+        markdown={
+          schema.description ||
+          'A GraphQL schema provides a root type for each kind of operation.'
+        }
+      />
+      <div className="doc-category">
+        <div className="doc-category-title">{'root types'}</div>
+        <div className="doc-category-item">
+          <span className="keyword">{'query'}</span>
+          {': '}
+          <TypeLink type={queryType} onClick={onClickType} />
+        </div>
+        {mutationType && (
+          <div className="doc-category-item">
+            <span className="keyword">{'mutation'}</span>
+            {': '}
+            <TypeLink type={mutationType} onClick={onClickType} />
+          </div>
+        )}
+        {subscriptionType && (
+          <div className="doc-category-item">
+            <span className="keyword">{'subscription'}</span>
+            {': '}
+            <TypeLink type={subscriptionType} onClick={onClickType} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

packages/bruno-graphql-docs/src/components/DocExplorer/SearchBox.tsx

@@ -0,0 +1,71 @@
+/**
+ *  Copyright (c) 2021 GraphQL Contributors.
+ *
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+import React, { ChangeEventHandler } from 'react';
+
+import debounce from '../../utility/debounce';
+
+type OnSearchFn = (value: string) => void;
+
+type SearchBoxProps = {
+  value?: string;
+  placeholder: string;
+  onSearch: OnSearchFn;
+};
+
+type SearchBoxState = {
+  value: string;
+};
+
+export default class SearchBox extends React.Component<
+  SearchBoxProps,
+  SearchBoxState
+> {
+  debouncedOnSearch: OnSearchFn;
+
+  constructor(props: SearchBoxProps) {
+    super(props);
+    this.state = { value: props.value || '' };
+    this.debouncedOnSearch = debounce(200, this.props.onSearch);
+  }
+
+  render() {
+    return (
+      <label className="search-box">
+        <div className="search-box-icon" aria-hidden="true">
+          {'\u26b2'}
+        </div>
+        <input
+          value={this.state.value}
+          onChange={this.handleChange}
+          type="text"
+          placeholder={this.props.placeholder}
+          aria-label={this.props.placeholder}
+        />
+        {this.state.value && (
+          <button
+            className="search-box-clear"
+            onClick={this.handleClear}
+            aria-label="Clear search input">
+            {'\u2715'}
+          </button>
+        )}
+      </label>
+    );
+  }
+
+  handleChange: ChangeEventHandler<HTMLInputElement> = event => {
+    const value = event.currentTarget.value;
+    this.setState({ value });
+    this.debouncedOnSearch(value);
+  };
+
+  handleClear = () => {
+    this.setState({ value: '' });
+    this.props.onSearch('');
+  };
+}

packages/bruno-graphql-docs/src/components/DocExplorer/SearchResults.tsx

@@ -0,0 +1,164 @@
+/**
+ *  Copyright (c) 2021 GraphQL Contributors.
+ *
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+import React, { ReactNode } from 'react';
+import { GraphQLSchema, GraphQLNamedType } from 'graphql';
+
+import Argument from './Argument';
+import TypeLink from './TypeLink';
+import { OnClickFieldFunction, OnClickTypeFunction } from './types';
+
+type SearchResultsProps = {
+  schema: GraphQLSchema;
+  withinType?: GraphQLNamedType;
+  searchValue: string;
+  onClickType: OnClickTypeFunction;
+  onClickField: OnClickFieldFunction;
+};
+
+export default class SearchResults extends React.Component<
+  SearchResultsProps,
+  {}
+> {
+  shouldComponentUpdate(nextProps: SearchResultsProps) {
+    return (
+      this.props.schema !== nextProps.schema ||
+      this.props.searchValue !== nextProps.searchValue
+    );
+  }
+
+  render() {
+    const searchValue = this.props.searchValue;
+    const withinType = this.props.withinType;
+    const schema = this.props.schema;
+    const onClickType = this.props.onClickType;
+    const onClickField = this.props.onClickField;
+
+    const matchedWithin: ReactNode[] = [];
+    const matchedTypes: ReactNode[] = [];
+    const matchedFields: ReactNode[] = [];
+
+    const typeMap = schema.getTypeMap();
+    let typeNames = Object.keys(typeMap);
+
+    // Move the within type name to be the first searched.
+    if (withinType) {
+      typeNames = typeNames.filter(n => n !== withinType.name);
+      typeNames.unshift(withinType.name);
+    }
+
+    for (const typeName of typeNames) {
+      if (
+        matchedWithin.length + matchedTypes.length + matchedFields.length >=
+        100
+      ) {
+        break;
+      }
+
+      const type = typeMap[typeName];
+      if (withinType !== type && isMatch(typeName, searchValue)) {
+        matchedTypes.push(
+          <div className="doc-category-item" key={typeName}>
+            <TypeLink type={type} onClick={onClickType} />
+          </div>,
+        );
+      }
+
+      if (type && 'getFields' in type) {
+        const fields = type.getFields();
+        Object.keys(fields).forEach(fieldName => {
+          const field = fields[fieldName];
+          let matchingArgs;
+
+          if (!isMatch(fieldName, searchValue)) {
+            if ('args' in field && field.args.length) {
+              matchingArgs = field.args.filter(arg =>
+                isMatch(arg.name, searchValue),
+              );
+              if (matchingArgs.length === 0) {
+                return;
+              }
+            } else {
+              return;
+            }
+          }
+
+          const match = (
+            <div className="doc-category-item" key={typeName + '.' + fieldName}>
+              {withinType !== type && [
+                <TypeLink key="type" type={type} onClick={onClickType} />,
+                '.',
+              ]}
+              <a
+                className="field-name"
+                onClick={event => onClickField(field, type, event)}>
+                {field.name}
+              </a>
+              {matchingArgs && [
+                '(',
+                <span key="args">
+                  {matchingArgs.map(arg => (
+                    <Argument
+                      key={arg.name}
+                      arg={arg}
+                      onClickType={onClickType}
+                      showDefaultValue={false}
+                    />
+                  ))}
+                </span>,
+                ')',
+              ]}
+            </div>
+          );
+
+          if (withinType === type) {
+            matchedWithin.push(match);
+          } else {
+            matchedFields.push(match);
+          }
+        });
+      }
+    }
+
+    if (
+      matchedWithin.length + matchedTypes.length + matchedFields.length ===
+      0
+    ) {
+      return <span className="doc-alert-text">{'No results found.'}</span>;
+    }
+
+    if (withinType && matchedTypes.length + matchedFields.length > 0) {
+      return (
+        <div>
+          {matchedWithin}
+          <div className="doc-category">
+            <div className="doc-category-title">{'other results'}</div>
+            {matchedTypes}
+            {matchedFields}
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="doc-search-items">
+        {matchedWithin}
+        {matchedTypes}
+        {matchedFields}
+      </div>
+    );
+  }
+}
+
+function isMatch(sourceText: string, searchValue: string) {
+  try {
+    const escaped = searchValue.replace(/[^_0-9A-Za-z]/g, ch => '\\' + ch);
+    return sourceText.search(new RegExp(escaped, 'i')) !== -1;
+  } catch (e) {
+    return sourceText.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
+  }
+}

packages/bruno-graphql-docs/src/components/DocExplorer/TypeDoc.tsx

@@ -0,0 +1,260 @@
+/**
+ *  Copyright (c) 2021 GraphQL Contributors.
+ *
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+import React, { ReactNode } from 'react';
+import {
+  GraphQLSchema,
+  GraphQLObjectType,
+  GraphQLInterfaceType,
+  GraphQLUnionType,
+  GraphQLEnumType,
+  GraphQLType,
+  GraphQLEnumValue,
+} from 'graphql';
+
+import Argument from './Argument';
+import MarkdownContent from './MarkdownContent';
+import TypeLink from './TypeLink';
+import DefaultValue from './DefaultValue';
+import { FieldType, OnClickTypeFunction, OnClickFieldFunction } from './types';
+
+type TypeDocProps = {
+  schema: GraphQLSchema;
+  type: GraphQLType;
+  onClickType: OnClickTypeFunction;
+  onClickField: OnClickFieldFunction;
+};
+
+type TypeDocState = {
+  showDeprecated: boolean;
+};
+
+export default class TypeDoc extends React.Component<
+  TypeDocProps,
+  TypeDocState
+> {
+  constructor(props: TypeDocProps) {
+    super(props);
+    this.state = { showDeprecated: false };
+  }
+
+  shouldComponentUpdate(nextProps: TypeDocProps, nextState: TypeDocState) {
+    return (
+      this.props.type !== nextProps.type ||
+      this.props.schema !== nextProps.schema ||
+      this.state.showDeprecated !== nextState.showDeprecated
+    );
+  }
+
+  render() {
+    const schema = this.props.schema;
+    const type = this.props.type;
+    const onClickType = this.props.onClickType;
+    const onClickField = this.props.onClickField;
+
+    let typesTitle: string | null = null;
+    let types: readonly (GraphQLObjectType | GraphQLInterfaceType)[] = [];
+    if (type instanceof GraphQLUnionType) {
+      typesTitle = 'possible types';
+      types = schema.getPossibleTypes(type);
+    } else if (type instanceof GraphQLInterfaceType) {
+      typesTitle = 'implementations';
+      types = schema.getPossibleTypes(type);
+    } else if (type instanceof GraphQLObjectType) {
+      typesTitle = 'implements';
+      types = type.getInterfaces();
+    }
+
+    let typesDef;
+    if (types && types.length > 0) {
+      typesDef = (
+        <div id="doc-types" className="doc-category">
+          <div className="doc-category-title">{typesTitle}</div>
+          {types.map(subtype => (
+            <div key={subtype.name} className="doc-category-item">
+              <TypeLink type={subtype} onClick={onClickType} />
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    // InputObject and Object
+    let fieldsDef;
+    let deprecatedFieldsDef;
+    if (type && 'getFields' in type) {
+      const fieldMap = type.getFields();
+      const fields = Object.keys(fieldMap).map(name => fieldMap[name]);
+      fieldsDef = (
+        <div id="doc-fields" className="doc-category">
+          <div className="doc-category-title">{'fields'}</div>
+          {fields
+            .filter(field => !field.deprecationReason)
+            .map(field => (
+              <Field
+                key={field.name}
+                type={type}
+                field={field}
+                onClickType={onClickType}
+                onClickField={onClickField}
+              />
+            ))}
+        </div>
+      );
+
+      const deprecatedFields = fields.filter(field =>
+        Boolean(field.deprecationReason),
+      );
+      if (deprecatedFields.length > 0) {
+        deprecatedFieldsDef = (
+          <div id="doc-deprecated-fields" className="doc-category">
+            <div className="doc-category-title">{'deprecated fields'}</div>
+            {!this.state.showDeprecated ? (
+              <button className="show-btn" onClick={this.handleShowDeprecated}>
+                {'Show deprecated fields...'}
+              </button>
+            ) : (
+              deprecatedFields.map(field => (
+                <Field
+                  key={field.name}
+                  type={type}
+                  field={field}
+                  onClickType={onClickType}
+                  onClickField={onClickField}
+                />
+              ))
+            )}
+          </div>
+        );
+      }
+    }
+
+    let valuesDef: ReactNode;
+    let deprecatedValuesDef: ReactNode;
+    if (type instanceof GraphQLEnumType) {
+      const values = type.getValues();
+      valuesDef = (
+        <div className="doc-category">
+          <div className="doc-category-title">{'values'}</div>
+          {values
+            .filter(value => Boolean(!value.deprecationReason))
+            .map(value => (
+              <EnumValue key={value.name} value={value} />
+            ))}
+        </div>
+      );
+
+      const deprecatedValues = values.filter(value =>
+        Boolean(value.deprecationReason),
+      );
+      if (deprecatedValues.length > 0) {
+        deprecatedValuesDef = (
+          <div className="doc-category">
+            <div className="doc-category-title">{'deprecated values'}</div>
+            {!this.state.showDeprecated ? (
+              <button className="show-btn" onClick={this.handleShowDeprecated}>
+                {'Show deprecated values...'}
+              </button>
+            ) : (
+              deprecatedValues.map(value => (
+                <EnumValue key={value.name} value={value} />
+              ))
+            )}
+          </div>
+        );
+      }
+    }
+
+    return (
+      <div>
+        <MarkdownContent
+          className="doc-type-description"
+          markdown={
+            ('description' in type && type.description) || 'No Description'
+          }
+        />
+        {type instanceof GraphQLObjectType && typesDef}
+        {fieldsDef}
+        {deprecatedFieldsDef}
+        {valuesDef}
+        {deprecatedValuesDef}
+        {!(type instanceof GraphQLObjectType) && typesDef}
+      </div>
+    );
+  }
+
+  handleShowDeprecated = () => this.setState({ showDeprecated: true });
+}
+
+type FieldProps = {
+  type: GraphQLType;
+  field: FieldType;
+  onClickType: OnClickTypeFunction;
+  onClickField: OnClickFieldFunction;
+};
+
+function Field({ type, field, onClickType, onClickField }: FieldProps) {
+  return (
+    <div className="doc-category-item">
+      <a
+        className="field-name"
+        onClick={event => onClickField(field, type, event)}>
+        {field.name}
+      </a>
+      {'args' in field &&
+        field.args &&
+        field.args.length > 0 && [
+          '(',
+          <span key="args">
+            {field.args
+              .filter(arg => !arg.deprecationReason)
+              .map(arg => (
+                <Argument key={arg.name} arg={arg} onClickType={onClickType} />
+              ))}
+          </span>,
+          ')',
+        ]}
+      {': '}
+      <TypeLink type={field.type} onClick={onClickType} />
+      <DefaultValue field={field} />
+      {field.description && (
+        <MarkdownContent
+          className="field-short-description"
+          markdown={field.description}
+        />
+      )}
+      {'deprecationReason' in field && field.deprecationReason && (
+        <MarkdownContent
+          className="doc-deprecation"
+          markdown={field.deprecationReason}
+        />
+      )}
+    </div>
+  );
+}
+
+type EnumValue = {
+  value: GraphQLEnumValue;
+};
+
+function EnumValue({ value }: EnumValue) {
+  return (
+    <div className="doc-category-item">
+      <div className="enum-value">{value.name}</div>
+      <MarkdownContent
+        className="doc-value-description"
+        markdown={value.description}
+      />
+      {value.deprecationReason && (
+        <MarkdownContent
+          className="doc-deprecation"
+          markdown={value.deprecationReason}
+        />
+      )}
+    </div>
+  );
+}