[TAG] Add localStorage value for enabling TAG & SQL editor (#34111)

* Add localStorage value for enabling TAG

* Add key for enabling the manual SQL editor

* Add access graph features retrieval in UserService

The code adds a `fetchAccessGraphFeatures` in UserService that retrieves and stores the access graph features from the provided API URL into the local storage. It also includes error handling to log the error and continue if fetching access graph features fails. The changes also touch the config file to include the API URL for fetching the access graph features.

---------

Co-authored-by: Jakub Nyckowski <jakub.nyckowski@goteleport.com>

web/packages/teleport/src/config.ts

@@ -279,6 +279,8 @@ const cfg = {
 
     // Assist needs some access request info to exist in OSS
     accessRequestPath: '/v1/enterprise/accessrequest/:requestId?',
+
+    accessGraphFeatures: '/v1/enterprise/accessgraph/static/features.json',
   },
 
   getUserClusterPreferencesUrl(clusterId: string) {
@@ -847,6 +849,10 @@ const cfg = {
     return generatePath(cfg.routes.requests, { requestId });
   },
 
+  getAccessGraphFeaturesUrl() {
+    return cfg.api.accessGraphFeatures;
+  },
+
   getListEc2InstancesUrl(integrationName: string) {
     const clusterId = cfg.proxyCluster;
 

web/packages/teleport/src/services/localStorage/localStorage.ts

@@ -243,6 +243,22 @@ const storage = {
     }
     return null;
   },
+
+  getAccessGraphEnabled(): boolean {
+    const item = window.localStorage.getItem(KeysEnum.ACCESS_GRAPH_ENABLED);
+    if (item) {
+      return JSON.parse(item);
+    }
+    return false;
+  },
+
+  getAccessGraphSQLEnabled(): boolean {
+    const item = window.localStorage.getItem(KeysEnum.ACCESS_GRAPH_ENABLED);
+    if (item) {
+      return JSON.parse(item);
+    }
+    return false;
+  },
 };
 
 export default storage;

web/packages/teleport/src/services/localStorage/types.ts

@@ -32,6 +32,8 @@ export const KeysEnum = {
   CLOUD_USER_INVITES: 'grv_teleport_cloud_user_invites',
   ACCESS_GRAPH_SEARCH_MODE: 'grv_teleport_access_graph_search_mode',
   ACCESS_GRAPH_QUERY: 'grv_teleport_access_graph_query',
+  ACCESS_GRAPH_ENABLED: 'grv_teleport_access_graph_enabled',
+  ACCESS_GRAPH_SQL_ENABLED: 'grv_teleport_access_graph_sql_enabled',
 };
 
 // SurveyRequest is the request for sending data to the back end

web/packages/teleport/src/services/user/user.ts

@@ -42,6 +42,10 @@ const service = {
       });
   },
 
+  fetchAccessGraphFeatures(): Promise<object> {
+    return api.get(cfg.getAccessGraphFeaturesUrl());
+  },
+
   fetchUser(username: string) {
     return api.get(cfg.getUserWithUsernameUrl(username)).then(makeUser);
   },

web/packages/teleport/src/teleportContext.tsx

@@ -33,7 +33,6 @@ import desktopService from './services/desktops';
 import userGroupService from './services/userGroups';
 import MfaService from './services/mfa';
 import { agentService } from './services/agents';
-import localStorage from './services/localStorage';
 
 class TeleportContext implements types.Context {
   // stores
@@ -92,6 +91,21 @@ class TeleportContext implements types.Context {
         await userService.checkUserHasAccessToRegisteredResource();
       localStorage.setOnboardDiscover({ hasResource });
     }
+
+    if (user.acl.accessGraph.list) {
+      // If access graph is enabled, check what features are enabled and store them in local storage.
+      try {
+        const accessGraphFeatures =
+          await userService.fetchAccessGraphFeatures();
+
+        for (let key in accessGraphFeatures) {
+          window.localStorage.setItem(key, accessGraphFeatures[key]);
+        }
+      } catch (e) {
+        // If we fail to fetch access graph features, log the error and continue.
+        console.error('Failed to fetch access graph features', e);
+      }
+    }
   }
 
   getFeatureFlags(): types.FeatureFlags {