ui: remove reset sql stats for non-admin

Continuation from #95303

The previous PR missed the reset on the Transactions tab.
This PR removes the reset sql stats for non-admin users.

Fixes #95213

Release note (ui change): Remove `reset sql stats` from Transactions
page for non-admins.

Author: maryliag

pkg/ui/workspaces/cluster-ui/src/store/sqlStats/sqlStats.selector.ts

@@ -13,5 +13,5 @@ import { adminUISelector } from "../utils/selectors";
 
 export const sqlStatsSelector = createSelector(
   adminUISelector,
-  adminUiState => adminUiState.sqlStats,
+  adminUiState => adminUiState?.sqlStats,
 );

pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetailsConnected.tsx

@@ -37,7 +37,7 @@ import { txnFingerprintIdAttr, getMatchParamByName } from "../util";
 import { TimeScale } from "../timeScaleDropdown";
 
 export const selectTransaction = createSelector(
-  (state: AppState) => state.adminUI.sqlStats,
+  (state: AppState) => state.adminUI?.sqlStats,
   (_state: AppState, props: RouteComponentProps) => props,
   (transactionState, props) => {
     const transactions = transactionState.data?.transactions;

pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.stories.tsx

@@ -42,10 +42,12 @@ storiesOf("Transactions Page", module)
       timeScale={timeScale}
       filters={filters}
       nodeRegions={nodeRegions}
+      hasAdminRole={true}
       onFilterChange={noop}
       onSortingChange={noop}
       refreshData={noop}
       refreshNodes={noop}
+      refreshUserSQLRoles={noop}
       resetSQLStats={noop}
       search={""}
       sortSetting={sortSetting}
@@ -61,10 +63,12 @@ storiesOf("Transactions Page", module)
         timeScale={timeScale}
         filters={filters}
         nodeRegions={nodeRegions}
+        hasAdminRole={true}
         onFilterChange={noop}
         onSortingChange={noop}
         refreshData={noop}
         refreshNodes={noop}
+        refreshUserSQLRoles={noop}
         resetSQLStats={noop}
         search={""}
         sortSetting={sortSetting}
@@ -88,10 +92,12 @@ storiesOf("Transactions Page", module)
         filters={filters}
         history={history}
         nodeRegions={nodeRegions}
+        hasAdminRole={true}
         onFilterChange={noop}
         onSortingChange={noop}
         refreshData={noop}
         refreshNodes={noop}
+        refreshUserSQLRoles={noop}
         resetSQLStats={noop}
         search={""}
         sortSetting={sortSetting}
@@ -108,10 +114,12 @@ storiesOf("Transactions Page", module)
         timeScale={timeScale}
         filters={filters}
         nodeRegions={nodeRegions}
+        hasAdminRole={true}
         onFilterChange={noop}
         onSortingChange={noop}
         refreshData={noop}
         refreshNodes={noop}
+        refreshUserSQLRoles={noop}
         resetSQLStats={noop}
         search={""}
         sortSetting={sortSetting}
@@ -135,10 +143,12 @@ storiesOf("Transactions Page", module)
         }
         filters={filters}
         nodeRegions={nodeRegions}
+        hasAdminRole={true}
         onFilterChange={noop}
         onSortingChange={noop}
         refreshData={noop}
         refreshNodes={noop}
+        refreshUserSQLRoles={noop}
         resetSQLStats={noop}
         search={""}
         sortSetting={sortSetting}

pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx

@@ -95,11 +95,13 @@ export interface TransactionsPageStateProps {
   pageSize?: number;
   search: string;
   sortSetting: SortSetting;
+  hasAdminRole?: UIConfigState["hasAdminRole"];
 }
 
 export interface TransactionsPageDispatchProps {
   refreshData: (req: StatementsRequest) => void;
   refreshNodes: () => void;
+  refreshUserSQLRoles: () => void;
   resetSQLStats: (req: StatementsRequest) => void;
   onTimeScaleChange?: (ts: TimeScale) => void;
   onColumnsChange?: (selectedColumns: string[]) => void;
@@ -238,6 +240,7 @@ export class TransactionsPage extends React.Component<
     }
 
     this.props.refreshNodes();
+    this.props.refreshUserSQLRoles();
   }
 
   componentWillUnmount(): void {
@@ -399,6 +402,7 @@ export class TransactionsPage extends React.Component<
       columns: userSelectedColumnsToShow,
       sortSetting,
       search,
+      hasAdminRole,
     } = this.props;
     const internal_app_name_prefix = data?.internal_app_name_prefix || "";
     const statements = data?.statements || [];
@@ -471,12 +475,14 @@ export class TransactionsPage extends React.Component<
               setTimeScale={this.changeTimeScale}
             />
           </PageConfigItem>
-          <PageConfigItem className={commonStyles("separator")}>
-            <ClearStats
-              resetSQLStats={this.resetSQLStats}
-              tooltipType="transaction"
-            />
-          </PageConfigItem>
+          {hasAdminRole && (
+            <PageConfigItem className={commonStyles("separator")}>
+              <ClearStats
+                resetSQLStats={this.resetSQLStats}
+                tooltipType="transaction"
+              />
+            </PageConfigItem>
+          )}
         </PageConfig>
         <div className={cx("table-area")}>
           <Loading

pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPageConnected.tsx

@@ -12,7 +12,7 @@ import { connect } from "react-redux";
 import { RouteComponentProps, withRouter } from "react-router-dom";
 import { Dispatch } from "redux";
 
-import { AppState } from "src/store";
+import { AppState, uiConfigActions } from "src/store";
 import { actions as nodesActions } from "src/store/nodes";
 import { actions as sqlStatsActions } from "src/store/sqlStats";
 import {
@@ -27,7 +27,7 @@ import {
   selectFilters,
   selectSearch,
 } from "./transactionsPage.selectors";
-import { selectIsTenant } from "../store/uiConfig";
+import { selectHasAdminRole, selectIsTenant } from "../store/uiConfig";
 import { nodeRegionsByIDSelector } from "../store/nodes";
 import { selectStatementsLastUpdated } from "src/statementsPage/statementsPage.selectors";
 import { selectTimeScale } from "../store/utils/selectors";
@@ -79,6 +79,7 @@ export const TransactionsPageConnected = withRouter(
         nodeRegions: nodeRegionsByIDSelector(state),
         search: selectSearch(state),
         sortSetting: selectSortSetting(state),
+        hasAdminRole: selectHasAdminRole(state),
       },
       activePageProps: mapStateToRecentTransactionsPageProps(state),
     }),
@@ -87,6 +88,8 @@ export const TransactionsPageConnected = withRouter(
         refreshData: (req: StatementsRequest) =>
           dispatch(sqlStatsActions.refresh(req)),
         refreshNodes: () => dispatch(nodesActions.refresh()),
+        refreshUserSQLRoles: () =>
+          dispatch(uiConfigActions.refreshUserSQLRoles()),
         resetSQLStats: (req: StatementsRequest) =>
           dispatch(sqlStatsActions.reset(req)),
         onTimeScaleChange: (ts: TimeScale) => {

pkg/ui/workspaces/db-console/src/views/transactions/transactionsPage.tsx

@@ -11,10 +11,15 @@
 import { connect } from "react-redux";
 import { createSelector } from "reselect";
 import { RouteComponentProps, withRouter } from "react-router-dom";
-import { refreshNodes, refreshStatements } from "src/redux/apiReducers";
+import {
+  refreshNodes,
+  refreshStatements,
+  refreshUserSQLRoles,
+} from "src/redux/apiReducers";
 import { resetSQLStatsAction } from "src/redux/sqlStats";
 import { CachedDataReducerState } from "src/redux/cachedDataReducer";
 import { AdminUIState } from "src/redux/state";
+import { selectHasAdminRole } from "src/redux/user";
 import { StatementsResponseMessage } from "src/util/api";
 
 import { PrintTime } from "src/views/reports/containers/range/print";
@@ -96,6 +101,7 @@ export const transactionColumnsLocalSetting = new LocalSetting(
 const fingerprintsPageActions = {
   refreshData: refreshStatements,
   refreshNodes,
+  refreshUserSQLRoles,
   resetSQLStats: resetSQLStatsAction,
   onTimeScaleChange: setGlobalTimeScaleAction,
   // We use `null` when the value was never set and it will show all columns.
@@ -150,6 +156,7 @@ const TransactionsPageConnected = withRouter(
         search: searchLocalSetting.selector(state),
         sortSetting: sortSettingLocalSetting.selector(state),
         statementsError: state.cachedData.statements.lastError,
+        hasAdminRole: selectHasAdminRole(state),
       },
       activePageProps: mapStateToRecentTransactionsPageProps(state),
     }),