ui: cache sqlroles results

Previously, the call to get sql roles was constantly
being requested. This commits adds a cache limit, so
it will only get request after the expiration time.

Epic: None
Release note: None

pkg/ui/workspaces/cluster-ui/src/api/userApi.ts

@@ -16,9 +16,7 @@ export type UserSQLRolesRequestMessage =
 export type UserSQLRolesResponseMessage =
   cockroach.server.serverpb.UserSQLRolesResponse;
 
-export function getUserSQLRoles(
-  req: UserSQLRolesRequestMessage,
-): Promise<UserSQLRolesResponseMessage> {
+export function getUserSQLRoles(): Promise<UserSQLRolesResponseMessage> {
   return fetchData(
     cockroach.server.serverpb.UserSQLRolesResponse,
     `/_status/sqlroles`,

pkg/ui/workspaces/cluster-ui/src/store/sagas.ts

@@ -49,6 +49,6 @@ export function* sagas(cacheInvalidationPeriod?: number): SagaIterator {
     fork(indexStatsSaga),
     fork(clusterLocksSaga),
     fork(schemaInsightsSaga),
-    fork(uiConfigSaga),
+    fork(uiConfigSaga, cacheInvalidationPeriod),
   ]);
 }

pkg/ui/workspaces/cluster-ui/src/store/uiConfig/uiConfig.reducer.ts

@@ -10,7 +10,7 @@
 
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { merge } from "lodash";
-import { DOMAIN_NAME } from "../utils";
+import { DOMAIN_NAME, noopReducer } from "../utils";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
 export type UserSQLRolesRequest = cockroach.server.serverpb.UserSQLRolesRequest;
 
@@ -57,15 +57,17 @@ const uiConfigSlice = createSlice({
     update: (state, action: PayloadAction<Partial<UIConfigState>>) => {
       merge(state, action.payload);
     },
-    refreshUserSQLRoles: (
-      state,
-      action?: PayloadAction<UserSQLRolesRequest>,
-    ) => {
+    receivedUserSQLRoles: (state, action: PayloadAction<string[]>) => {
       if (action?.payload) {
-        const resp = action.payload.toJSON();
-        state.userSQLRoles = resp["roles"];
+        state.userSQLRoles = action.payload;
       }
     },
+    invalidatedUserSQLRoles: state => {
+      state.userSQLRoles = [];
+    },
+    // Define actions that don't change state
+    refreshUserSQLRoles: noopReducer,
+    requestUserSQLRoles: noopReducer,
   },
 });
 

pkg/ui/workspaces/cluster-ui/src/store/uiConfig/uiConfig.sagas.ts

@@ -8,22 +8,48 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import { all, call, put, takeLatest } from "redux-saga/effects";
-import { actions, UserSQLRolesRequest } from "./uiConfig.reducer";
-import { PayloadAction } from "@reduxjs/toolkit";
+import { all, call, delay, put, takeLatest } from "redux-saga/effects";
+import { actions } from "./uiConfig.reducer";
 import { getUserSQLRoles } from "../../api/userApi";
+import { CACHE_INVALIDATION_PERIOD, throttleWithReset } from "../utils";
+import { rootActions } from "../reducers";
+import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
 
-export function* refreshUserSQLRoles(
-  action: PayloadAction<UserSQLRolesRequest>,
-): any {
+export function* refreshUserSQLRolesSaga(): any {
+  yield put(actions.requestUserSQLRoles());
+}
+
+export function* requestUserSQLRolesSaga(): any {
   try {
-    const result = yield call(getUserSQLRoles, action?.payload);
-    yield put(actions.refreshUserSQLRoles(result));
+    const result: cockroach.server.serverpb.UserSQLRolesResponse = yield call(
+      getUserSQLRoles,
+    );
+    yield put(actions.receivedUserSQLRoles(result.roles));
   } catch (e) {
     console.warn(e.message);
   }
 }
 
-export function* uiConfigSaga() {
-  yield all([takeLatest(actions.refreshUserSQLRoles, refreshUserSQLRoles)]);
+export function* receivedUserSQLRolesSaga(delayMs: number): any {
+  yield delay(delayMs);
+  yield put(actions.invalidatedUserSQLRoles());
+}
+
+export function* uiConfigSaga(
+  cacheInvalidationPeriod: number = CACHE_INVALIDATION_PERIOD,
+): any {
+  yield all([
+    throttleWithReset(
+      cacheInvalidationPeriod,
+      actions.refreshUserSQLRoles,
+      [actions.invalidatedUserSQLRoles, rootActions.resetState],
+      refreshUserSQLRolesSaga,
+    ),
+    takeLatest(actions.requestUserSQLRoles, requestUserSQLRolesSaga),
+    takeLatest(
+      actions.receivedUserSQLRoles,
+      receivedUserSQLRolesSaga,
+      cacheInvalidationPeriod,
+    ),
+  ]);
 }