fix: remove cached badge for non-cached queries with warning response header

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8627
GitOrigin-RevId: 5f1579898db93b5eb7ccf1a836e43ae992c498ca

frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/Actions.js

@@ -486,7 +486,13 @@ const getRemoteQueries = (queryUrl, cb, dispatch) => {
 };
 
 const processResponseDetails =
-  (responseTime, responseSize, isResponseCached, responseTrackingId) =>
+  (
+    responseTime,
+    responseSize,
+    isResponseCached,
+    responseTrackingId,
+    cacheWarning
+  ) =>
   dispatch => {
     dispatch({
       type: TRACK_RESPONSE_DETAILS,
@@ -495,6 +501,7 @@ const processResponseDetails =
         responseSize,
         isResponseCached,
         responseTrackingId,
+        cacheWarning,
       },
     });
   };
@@ -725,6 +732,7 @@ const apiExplorerReducer = (state = defaultState, action) => {
             responseSize: action.data.responseSize,
             isResponseCached: action.data.isResponseCached,
             responseTrackingId: action.data.responseTrackingId,
+            cacheWarning: action.data.cacheWarning,
           },
         },
       };

frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/GraphiQLWrapper/GraphiQLWrapper.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import GraphiQL from 'graphiql';
 import { connect } from 'react-redux';
-import { FaCheckCircle } from 'react-icons/fa';
+import { FaCheckCircle, FaExclamationTriangle } from 'react-icons/fa';
 import PropTypes from 'prop-types';
 import GraphiQLErrorBoundary from './GraphiQLErrorBoundary';
 import OneGraphExplorer from '../OneGraphExplorer/OneGraphExplorer';
@@ -94,8 +94,13 @@ class GraphiQLWrapper extends Component {
     } = this.props;
     const { codeExporterOpen, requestTrackingId } = this.state;
     const graphqlNetworkData = this.props.data;
-    const { responseTime, responseSize, isResponseCached, responseTrackingId } =
-      this.props.response;
+    const {
+      responseTime,
+      responseSize,
+      isResponseCached,
+      responseTrackingId,
+      cacheWarning,
+    } = this.props.response;
 
     const graphQLFetcher = graphQLParams => {
       if (headerFocus) {
@@ -236,6 +241,20 @@ class GraphiQLWrapper extends Component {
                 <FaCheckCircle className="text-[#008000]" />
               </>
             )}
+            {!isResponseCached && cacheWarning && (
+              <>
+                <span className="text-xs text-[#777777] font-semibold uppercase">
+                  Not Cached
+                </span>
+                <ToolTip
+                  message={`Response not cached due to: "${cacheWarning}"`}
+                  placement="top"
+                  tooltipStyle="text-yellow-600"
+                >
+                  <FaExclamationTriangle className="text-yellow-600 mb-1" />
+                </ToolTip>
+              </>
+            )}
           </div>
         </GraphiQL.Footer>
       );

frontend/libs/console/legacy-ce/src/lib/utils/requestAction.ts

@@ -13,6 +13,20 @@ import {
 import { globalCookiePolicy } from '../Endpoints';
 import { processResponseDetails } from '../components/Services/ApiExplorer/Actions';
 
+const getCacheRequestWarning = (
+  warningHeader: string | null
+): string | null => {
+  if (!warningHeader) {
+    return null;
+  }
+  return [
+    'cache-store-size-limit-exceeded',
+    'cache-store-capacity-exceeded',
+    'cache-store-error',
+  ]?.some(warning => warningHeader?.includes(warning))
+    ? warningHeader
+    : null;
+};
 const requestAction = <T = any>(
   url: string,
   options: RequestInit = {},
@@ -65,13 +79,17 @@ const requestAction = <T = any>(
                 const endTime = new Date().getTime();
                 const responseTimeMs = endTime - startTime;
                 const isResponseCached = response.headers.has('Cache-Control');
+                const cacheWarning = getCacheRequestWarning(
+                  response.headers.get('Warning')
+                );
                 const responseSize = JSON.stringify(results).length * 2;
                 dispatch(
                   processResponseDetails(
                     responseTimeMs,
                     responseSize,
                     isResponseCached,
-                    requestTrackingId
+                    requestTrackingId,
+                    cacheWarning
                   )
                 );
               }