update logic for console nav bar

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/7888
GitOrigin-RevId: c0b8c7ea371d516fef0ed41dd4f11e6979fb9ae5

frontend/libs/console/legacy-ee/src/lib/components/Main/Actions.js

@@ -33,6 +33,7 @@ import { constructRedirectUrl } from '../../utils/utils';
 import { retrieveByRefreshToken } from '../OAuthCallback/Actions';
 import { decodeToken } from '../../utils/computeAccess';
 import extendedGlobals from '../../Globals';
+import { isCloudConsole } from '@/utils';
 
 const UPDATE_HASURA_DOT_COM_ACCESS = 'Main/UPDATE_HASURA_DOT_COM_ACCESS';
 const SET_MIGRATION_STATUS_SUCCESS = 'Main/SET_MIGRATION_STATUS_SUCCESS';
@@ -58,6 +59,12 @@ const UPDATE_PROJECT_NAME = 'Main/UPDATE_PROJECT_NAME';
 const FETCHING_LUX_PROJECT_INFO = 'Main/FETCHING_LUX_PROJECT_INFO';
 const FETCHED_LUX_PROJECT_INFO = 'Main/FETCHED_LUX_PROJECT_INFO';
 const ERROR_FETCHING_LUX_PROJECT_INFO = 'Main/ERROR_FETCHING_LUX_PROJECT_INFO';
+const FETCHING_LUX_PROJECT_ENTITLEMENTS =
+  'Main/FETCHING_LUX_PROJECT_ENTITLEMENTS';
+const FETCHED_LUX_PROJECT_ENTITLEMENTS =
+  'Main/FETCHED_LUX_PROJECT_ENTITLEMENTS';
+const ERROR_FETCHING_LUX_PROJECT_ENTITLEMENTS =
+  'Main/ERROR_FETCHING_LUX_PROJECT_ENTITLEMENTS';
 
 export const SET_METADATA = 'Main/SET_METADATA';
 export const SET_METADATA_LOADING = 'Main/SET_METADATA_LOADING';
@@ -518,6 +525,7 @@ const idTokenReceived =
           metricsFQDN: decodedToken.payload.metrics_fqdn,
           plan_name: project?.plan_name,
           is_enterprise_user: project?.enterprise_users?.is_active,
+          entitlements: project?.entitlements,
         },
       });
       /* Flush to the local storage */
@@ -694,6 +702,7 @@ export const loadLuxProjectInfo = () => (dispatch, getState) => {
         metricsFQDN: project.tenant?.region_info?.metrics_fqdn || '',
         plan_name: project?.plan_name,
         is_enterprise_user: project?.enterprise_users?.is_active,
+        entitlements: project?.entitlements,
       };
 
       dispatch({
@@ -710,6 +719,77 @@ export const loadLuxProjectInfo = () => (dispatch, getState) => {
     });
 };
 
+export const loadLuxProjectEntitlements = () => (dispatch, getState) => {
+  if (!isCloudConsole(globals)) {
+    return Promise.resolve();
+  }
+
+  const url = Endpoints.luxDataGraphql;
+  const reqOptions = {
+    method: 'POST',
+    credentials: 'include',
+    body: JSON.stringify({
+      query: `
+        query getLuxProjectEntitlements($id: uuid!) {
+          projects_by_pk(id: $id) {
+            entitlements {
+              id
+              entitlement {
+                type
+                config_is_enabled
+              }
+            }
+          }
+        }
+      `,
+      variables: {
+        id: globals.hasuraCloudProjectId,
+      },
+    }),
+  };
+
+  if (globals.consoleMode === 'cli') {
+    reqOptions.headers = {
+      ...getState().tables.dataHeaders,
+    };
+  }
+
+  dispatch({
+    type: FETCHING_LUX_PROJECT_ENTITLEMENTS,
+    data: true,
+  });
+
+  dispatch(requestAction(url, reqOptions))
+    .then(resp => {
+      dispatch({
+        type: FETCHING_LUX_PROJECT_ENTITLEMENTS,
+        data: false,
+      });
+      if (!resp.data || !resp.data.projects_by_pk) {
+        console.error(
+          'getLuxProjectEntitlements error',
+          resp.errors[0]?.message
+        );
+      }
+
+      const projectEntitlements = {
+        entitlements: resp?.data?.projects_by_pk?.entitlements,
+      };
+
+      dispatch({
+        type: FETCHED_LUX_PROJECT_ENTITLEMENTS,
+        data: projectEntitlements,
+      });
+    })
+    .catch(e => {
+      console.error(e);
+      dispatch({
+        type: ERROR_FETCHING_LUX_PROJECT_ENTITLEMENTS,
+        error: e,
+      });
+    });
+};
+
 const updateMigrationModeStatus = () => (dispatch, getState) => {
   // make req to hasura cli to update migration mode
   dispatch({ type: UPDATE_MIGRATION_MODE_PROGRESS, data: true });
@@ -803,6 +883,31 @@ const proMainReducer = (state = { ...mainState, ...defaultState }, action) => {
           loading: false,
         },
       };
+    case FETCHING_LUX_PROJECT_ENTITLEMENTS:
+      return {
+        ...state,
+        project: {
+          ...state.project,
+          loading: action.data,
+        },
+      };
+    case FETCHED_LUX_PROJECT_ENTITLEMENTS:
+      return {
+        ...state,
+        project: {
+          ...state.project,
+          loading: false,
+          entitlements: action.data.entitlements,
+        },
+      };
+    case ERROR_FETCHING_LUX_PROJECT_ENTITLEMENTS:
+      return {
+        ...state,
+        project: {
+          ...state.project,
+          loading: false,
+        },
+      };
     default:
       const nextMainState = mainReducer(state, action);
       /*

frontend/libs/console/legacy-ee/src/lib/components/Main/Main.js

@@ -42,6 +42,7 @@ import {
   featureCompatibilityInit,
   clearCollaboratorSignInState,
   loadLuxProjectInfo,
+  loadLuxProjectEntitlements,
 } from './Actions';
 import './NotificationOverrides.css';
 import { clearPersistedGraphiQLHeaders } from '../../utils/localstorage';
@@ -68,6 +69,8 @@ import logo from './images/white-logo.svg';
 import logoutIcon from './images/log-out.svg';
 import projectImg from './images/project.svg';
 import EELogo from './images/hasura-ee-mono-light.svg';
+import { Plan, Project_Entitlement_Types_Enum } from '@/features/ControlPlane';
+import { isCloudConsole } from '@/utils';
 
 class Main extends React.Component {
   constructor(props) {
@@ -91,6 +94,8 @@ class Main extends React.Component {
     appcuesIdentify();
     dispatch(loadLuxProjectInfo());
 
+    dispatch(loadLuxProjectEntitlements());
+
     if (
       this.hasMetadataEnabledConfig &&
       extendedGlobals.isMetadataAPIEnabled === false
@@ -284,6 +289,46 @@ class Main extends React.Component {
     );
   }
 
+  /**
+   * if a project is on the new cloud_free_v2 plan
+   * metrics are probably not enabled
+   * check if entitlement is enabled for such plans
+   */
+  hasMetricsEntitlement() {
+    // if not a cloud console, don't check
+    if (!isCloudConsole(globals)) {
+      return true;
+    }
+
+    // get the plan name and entitlements array from the project
+    const {
+      project: { plan_name = '', entitlements = [] },
+    } = this.props;
+
+    // entitlements are added only for projects on the
+    //  new cloud_free_v2 and cloud_shared plans
+    // so if the plan is not one of these, return true
+    if (
+      plan_name === Plan.CloudFree ||
+      plan_name === Plan.CloudPayg ||
+      plan_name === 'pro' ||
+      plan_name === 'cloud_dedicated_vpc'
+    ) {
+      return true;
+    }
+
+    // if the plan is one of the new plans, check if the
+    // metrics entitlement is enabled
+    const { entitlement: { config_is_enabled } = {} } =
+      entitlements.find(
+        ({ entitlement: { type } }) =>
+          type === Project_Entitlement_Types_Enum.ConsoleMetricsTab
+      ) || {};
+
+    // if the entitlement is enabled, return true
+    return !!config_is_enabled;
+  }
+
   render() {
     const {
       children,
@@ -391,7 +436,8 @@ class Main extends React.Component {
       if (
         'hasMetricAccess' in accessState &&
         accessState.hasMetricAccess &&
-        isMonitoringTabSupportedEnvironment(globals)
+        isMonitoringTabSupportedEnvironment(globals) &&
+        this.hasMetricsEntitlement()
       ) {
         return (
           <HeaderNavItem