feat: graphql support (#65)

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,115 @@
 import React from 'react';
-import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
+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 }) => {
+  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();
+    }
+  };
+
+  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} />;
+      }
+      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'>
+            <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;