Merge pull request #5679 from mheidinger/visual-gql-indicator

feat: add visual indicator for GQL requests

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

@@ -96,15 +96,17 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
 
   const getMethodText = useCallback((item) => {
     if (!item) return;
-    const isGrpc = item.type === 'grpc-request';
-    const isWS = item.type === 'ws-request';
-    if (!isWS && !isGrpc) {
-      return item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
+
+    switch (item.type) {
+      case 'grpc-request':
+        return 'gRPC';
+      case 'ws-request':
+        return 'WS';
+      case 'graphql-request':
+        return 'GQL';
+      default:
+        return item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
     }
-    if (isGrpc) {
-      return 'gRPC';
-    }
-    return 'WS';
   }, [item]);
 
   if (!item) {

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

@@ -40,6 +40,9 @@ const Wrapper = styled.div`
   .method-ws {
     color: ${(props) => props.theme.request.ws};
   }
+  .method-graphql {
+    color: ${(props) => props.theme.request.gql};
+  }
 `;
 
 export default Wrapper;

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

@@ -4,18 +4,20 @@ import StyledWrapper from './StyledWrapper';
 
 const getMethodFlags = (item) => ({
   isGrpc: item.type === 'grpc-request',
-  isWS: item.type === 'ws-request'
+  isWS: item.type === 'ws-request',
+  isGraphQL: item.type === 'graphql-request'
 });
 
-const getMethodText = (item, { isGrpc, isWS }) => {
+const getMethodText = (item, { isGrpc, isWS, isGraphQL }) => {
   if (isGrpc) return 'grpc';
   if (isWS) return 'ws';
+  if (isGraphQL) return 'gql';
   return item.request.method.length > 5
     ? item.request.method.substring(0, 3)
     : item.request.method;
 };
 
-const getClassname = (method = '', { isGrpc, isWS }) => {
+const getClassname = (method = '', { isGrpc, isWS, isGraphQL }) => {
   method = method.toLocaleLowerCase();
   return classnames('mr-1', {
     'method-get': method === 'get',
@@ -26,7 +28,8 @@ const getClassname = (method = '', { isGrpc, isWS }) => {
     'method-head': method === 'head',
     'method-options': method === 'options',
     'method-grpc': isGrpc,
-    'method-ws': isWS
+    'method-ws': isWS,
+    'method-graphql': isGraphQL
   });
 };
 

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

@@ -103,7 +103,8 @@ const darkTheme = {
       head: '#d69956'
     },
     grpc: '#6366f1',
-    ws: '#f59e0b'
+    ws: '#f59e0b',
+    gql: '#e535ab'
   },
 
   requestTabPanel: {

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

@@ -103,7 +103,8 @@ const lightTheme = {
       head: '#ca7811'
     },
     grpc: '#6366f1',
-    ws: '#f59e0b'
+    ws: '#f59e0b',
+    gql: '#e535ab'
   },
 
   requestTabPanel: {