console: add tooltips to certain headers on API Explorer (#5286)

console/src/components/Services/ApiExplorer/ApiExplorer.scss

@@ -831,3 +831,10 @@ label {
 .graphiqlModeToggle {
   float: right;
 }
+
+.headerInfoIcon {
+  cursor: pointer;
+  padding-right: 8px;
+  font-size: 14px;
+  display: inline-block;
+}

console/src/components/Services/ApiExplorer/ApiRequest/ApiRequest.js

@@ -39,12 +39,26 @@ import {
 import { getGraphQLEndpoint } from '../utils';
 
 import styles from '../ApiExplorer.scss';
-import { ADMIN_SECRET_HEADER_KEY } from '../../../../constants';
+import {
+  ADMIN_SECRET_HEADER_KEY,
+  HASURA_CLIENT_NAME,
+  HASURA_COLLABORATOR_TOKEN,
+} from '../../../../constants';
 
 /* When the page is loaded for the first time, hydrate the header state from the localStorage
  * Keep syncing the localStorage state when user modifies.
  * */
 
+const ActionIcon = ({ message, dataHeaderID }) => (
+  <Tooltip placement="left" message={message}>
+    <i
+      className={`${styles.headerInfoIcon} fa fa-question-circle`}
+      data-header-id={dataHeaderID}
+      aria-hidden="true"
+    />
+  </Tooltip>
+);
+
 class ApiRequest extends Component {
   constructor(props) {
     super(props);
@@ -332,6 +346,14 @@ class ApiRequest extends Component {
           const isAdminSecret =
             header.key.toLowerCase() === ADMIN_SECRET_HEADER_KEY;
 
+          const consoleId = window.__env.consoleId;
+
+          const isClientName =
+            header.key.toLowerCase() === HASURA_CLIENT_NAME && consoleId;
+
+          const isCollaboratorToken =
+            header.key.toLowerCase() === HASURA_COLLABORATOR_TOKEN && consoleId;
+
           const getHeaderActiveCheckBox = () => {
             let headerActiveCheckbox = null;
 
@@ -523,6 +545,18 @@ class ApiRequest extends Component {
                   {getHeaderAdminVal()}
                   {getJWTInspectorIcon()}
                   {getHeaderRemoveBtn()}
+                  {isClientName && (
+                    <ActionIcon
+                      message="Hasura client name is a header that indicates where the request is being made from. This is used by GraphQL Engine for providing detailed metrics."
+                      dataHeaderID={i}
+                    />
+                  )}
+                  {isCollaboratorToken && (
+                    <ActionIcon
+                      message="Hasura collaborator token is an admin-secret alternative when you login using Hasura. This is used by GraphQL Engine to authorise your requests."
+                      dataHeaderID={i}
+                    />
+                  )}
                 </td>
               );
             }

console/src/constants.ts

@@ -2,4 +2,6 @@ export const SERVER_CONSOLE_MODE = 'server';
 export const CLI_CONSOLE_MODE = 'cli';
 
 export const ADMIN_SECRET_HEADER_KEY = 'x-hasura-admin-secret';
+export const HASURA_COLLABORATOR_TOKEN = 'hasura-collaborator-token';
+export const HASURA_CLIENT_NAME = 'hasura-client-name';
 export const REDUX_LOCATION_CHANGE_ACTION_TYPE = '@@router/LOCATION_CHANGE';