Merge remote-tracking branch 'origin/prod-beta' into prod-stable

.github/dependabot.yml

@@ -7,7 +7,7 @@ updates:
     target-branch: "main"
     schedule:
       interval: "weekly"
-    open-pull-requests-limit: 10
+    open-pull-requests-limit: 15
     labels:
       - "dependency-bot"
     commit-message:

package.json

@@ -55,7 +55,7 @@
     "@redhat-cloud-services/frontend-components": "^3.11.2",
     "@redhat-cloud-services/frontend-components-notifications": "^3.2.14",
     "@redhat-cloud-services/frontend-components-translations": "^3.2.6",
-    "@redhat-cloud-services/frontend-components-utilities": "^3.7.3",
+    "@redhat-cloud-services/frontend-components-utilities": "^3.7.4",
     "@redhat-cloud-services/rbac-client": "^1.2.5",
     "@unleash/proxy-client-react": "^3.6.0",
     "axios": "^1.4.0",
@@ -67,19 +67,19 @@
     "react-bootstrap": "^2.8.0",
     "react-dom": "^17.0.2",
     "react-intl": "^6.4.4",
-    "react-redux": "^8.1.1",
-    "react-router-dom": "^6.14.1",
+    "react-redux": "^8.1.2",
+    "react-router-dom": "^6.14.2",
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.2",
     "typesafe-actions": "^5.1.0",
     "unleash-proxy-client": "^2.5.0",
     "victory-core": "^36.6.11",
-    "xstate": "^4.38.0"
+    "xstate": "^4.38.2"
   },
   "devDependencies": {
     "@formatjs/cli": "^6.1.3",
     "@redhat-cloud-services/eslint-config-redhat-cloud-services": "^1.3.0",
-    "@redhat-cloud-services/frontend-components-config": "^5.0.5",
+    "@redhat-cloud-services/frontend-components-config": "^5.1.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.5.3",
@@ -88,25 +88,25 @@
     "@types/react-dom": "^17.0.9",
     "@types/react-redux": "^7.1.25",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
     "@xstate/test": "^0.5.1",
     "aphrodite": "^2.4.0",
     "copy-webpack-plugin": "^11.0.0",
-    "eslint": "^8.44.0",
+    "eslint": "^8.46.0",
     "eslint-plugin-formatjs": "^4.10.3",
     "eslint-plugin-jest-dom": "^5.0.1",
-    "eslint-plugin-jsdoc": "^46.4.3",
-    "eslint-plugin-markdown": "^3.0.0",
-    "eslint-plugin-patternfly-react": "^4.80.4",
+    "eslint-plugin-jsdoc": "^46.4.5",
+    "eslint-plugin-markdown": "^3.0.1",
+    "eslint-plugin-patternfly-react": "^5.0.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-sort-keys-fix": "^1.1.2",
     "eslint-plugin-testing-library": "^5.11.0",
     "git-revision-webpack-plugin": "^5.0.0",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "^29.6.1",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.2",
     "jest-mock-axios": "^4.7.2",
     "jws": "^4.0.0",
     "npm-run-all": "^4.1.5",
@@ -116,7 +116,7 @@
     "webpack-bundle-analyzer": "^4.9.0"
   },
   "overrides": {
-    "eslint": "^8.44.0",
+    "eslint": "^8.46.0",
     "react-intl": "^6.4.4"
   },
   "insights": {

src/api/accountSettings.ts

@@ -13,6 +13,22 @@ export interface AccountSettings {
   data: AccountSettingsData;
 }
 
+export interface CostTypePayload {
+  cost_type?: string;
+}
+
+export interface CurrencyPayload {
+  currency?: string;
+}
+
 export function fetchAccountSettings() {
   return axios.get<AccountSettings>(`account-settings/`);
 }
+
+export function updateCostType(payload: CostTypePayload) {
+  return axios.put(`account-settings/cost-type`, payload);
+}
+
+export function updateCurrency(payload: CurrencyPayload) {
+  return axios.put(`account-settings/currency`, payload);
+}

src/api/userAccess.ts

@@ -5,6 +5,7 @@ import type { PagedLinks, PagedMetaData } from './api';
 export interface UserAccessData {
   access?: boolean;
   type?: UserAccessType;
+  write?: boolean;
 }
 
 export interface UserAccess {

src/components/permissions/permissions.tsx

@@ -24,6 +24,7 @@ import {
   hasOcpAccess,
   hasRhelAccess,
   hasRosAccess,
+  hasSettingsAccess,
 } from 'utils/userAccess';
 
 interface PermissionsOwnProps extends ChromeComponentProps {
@@ -68,7 +69,7 @@ const PermissionsBase: React.FC<PermissionsProps> = ({
     const ocp = hasOcpAccess(userAccess);
     const rhel = isFinsightsFeatureEnabled && hasRhelAccess(userAccess);
     const ros = isRosFeatureEnabled && hasRosAccess(userAccess);
-    const settings = isSettingsFeatureEnabled;
+    const settings = isSettingsFeatureEnabled && hasSettingsAccess(userAccess);
 
     switch (pathname) {
       case formatPath(routes.explorer.path):
@@ -101,7 +102,7 @@ const PermissionsBase: React.FC<PermissionsProps> = ({
       case formatPath(routes.rhelDetailsBreakdown.path):
         return rhel;
       case formatPath(routes.settings.path):
-        return settings;
+        return costModel || settings;
       default:
         return false;
     }

src/routes/settings/calculations/calculations.tsx

@@ -6,28 +6,27 @@ import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { CostType } from 'routes/components/costType';
 import { Currency } from 'routes/components/currency';
+import { accountSettingsActions, accountSettingsSelectors } from 'store/accountSettings';
 import type { FetchStatus } from 'store/common';
 import { createMapStateToProps } from 'store/common';
-import { rbacActions, rbacSelectors } from 'store/rbac';
-import { settingsActions, settingsSelectors } from 'store/settings';
 import { getCostType, getCurrency, setAccountCurrency, setCostType, setCurrency } from 'utils/localStorage';
 import type { RouterComponentProps } from 'utils/router';
 import { withRouter } from 'utils/router';
 
 import { styles } from './calculations.styles';
 
 interface SettingsOwnProps {
-  // TBD...
+  canWrite?: boolean;
 }
 
 interface SettingsDispatchProps {
-  fetchRbac: typeof rbacActions.fetchRbac;
-  updateSettings: typeof settingsActions.updateSettings;
+  updateCostType: typeof accountSettingsActions.updateCostType;
+  updateCurrency: typeof accountSettingsActions.updateCurrency;
 }
 
 interface SettingsStateProps {
-  canWrite?: boolean;
-  updateSettingsStatus: FetchStatus;
+  updateCostTypeStatus: FetchStatus;
+  updateCurrencyStatus: FetchStatus;
 }
 
 interface SettingsState {
@@ -48,10 +47,6 @@ class SettingsBase extends React.Component<SettingsProps, SettingsState> {
   };
   public state: SettingsState = { ...this.defaultState };
 
-  public componentDidMount() {
-    this.updateReport();
-  }
-
   private getCostType = () => {
     const { canWrite, intl } = this.props;
     const { currentCostType } = this.state;
@@ -109,41 +104,28 @@ class SettingsBase extends React.Component<SettingsProps, SettingsState> {
   };
 
   private handleOnCostTypeSelected = value => {
-    const { updateSettings } = this.props;
+    const { updateCostType } = this.props;
 
     this.setState({ currentCostType: value }, () => {
       setCostType(value);
-      updateSettings({
-        api: {
-          settings: {
-            cost_type: value,
-          },
-        },
+      updateCostType({
+        cost_type: value,
       });
     });
   };
 
   private handleOnCurrencySelected = value => {
-    const { updateSettings } = this.props;
+    const { updateCurrency } = this.props;
 
     this.setState({ currentCurrency: value }, () => {
       setCurrency(value);
       setAccountCurrency(value); // Todo: remove account currency after settings page has been moved
-      updateSettings({
-        api: {
-          settings: {
-            currency: value,
-          },
-        },
+      updateCurrency({
+        currency: value,
       });
     });
   };
 
-  private updateReport = () => {
-    const { fetchRbac } = this.props;
-    fetchRbac();
-  };
-
   public render() {
     return (
       <PageSection isFilled>
@@ -156,17 +138,18 @@ class SettingsBase extends React.Component<SettingsProps, SettingsState> {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const mapStateToProps = createMapStateToProps<SettingsOwnProps, SettingsStateProps>(state => {
-  const updateSettingsStatus = settingsSelectors.selectSettingsUpdateStatus(state);
+  const updateCostTypeStatus = accountSettingsSelectors.selectUpdateCostTypeStatus(state);
+  const updateCurrencyStatus = accountSettingsSelectors.selectUpdateCurrencyStatus(state);
 
   return {
-    canWrite: rbacSelectors.isSettingsWritePermission(state),
-    updateSettingsStatus,
+    updateCostTypeStatus,
+    updateCurrencyStatus,
   };
 });
 
 const mapDispatchToProps: SettingsDispatchProps = {
-  fetchRbac: rbacActions.fetchRbac,
-  updateSettings: settingsActions.updateSettings,
+  updateCostType: accountSettingsActions.updateCostType,
+  updateCurrency: accountSettingsActions.updateCurrency,
 };
 
 const Calculations = injectIntl(withRouter(connect(mapStateToProps, mapDispatchToProps)(SettingsBase)));

src/routes/settings/costCategory/costCategory.tsx

@@ -25,7 +25,7 @@ import { CostCategoryTable } from './costCategoryTable';
 import { CostCategoryToolbar } from './costCategoryToolbar';
 
 interface CostCategoryOwnProps {
-  // TBD...
+  canWrite?: boolean;
 }
 
 export interface CostCategoryMapProps {

src/routes/settings/platformProjects/platformProjects.tsx

@@ -25,7 +25,7 @@ import { PlatformTable } from './platformTable';
 import { PlatformToolbar } from './platformToolbar';
 
 interface PlatformProjectsOwnProps {
-  // TBD...
+  canWrite?: boolean;
 }
 
 export interface PlatformProjectsMapProps {

src/routes/settings/settings.tsx

@@ -81,6 +81,15 @@ const Settings: React.FC<SettingsProps> = () => {
   const { isSettingsPlatformEnabled, userAccess, userAccessFetchStatus } = useMapToProps();
   const intl = useIntl();
 
+  const canWrite = () => {
+    let result = false;
+    if (userAccess) {
+      const data = (userAccess.data as any).find(d => d.type === 'settings');
+      result = data && data.access && data.write;
+    }
+    return result;
+  };
+
   const getAvailableTabs = () => {
     const availableTabs: AvailableTab[] = [
       {
@@ -152,13 +161,13 @@ const Settings: React.FC<SettingsProps> = () => {
         <NotAuthorized pathname={formatPath(routes.costModel.path)} />
       );
     } else if (currentTab === SettingsTab.calculations) {
-      return hasSettingsAccess(userAccess) ? <Calculations /> : notAuthorized;
+      return hasSettingsAccess(userAccess) ? <Calculations canWrite={canWrite()} /> : notAuthorized;
     } else if (currentTab === SettingsTab.costCategory) {
-      return hasSettingsAccess(userAccess) ? <CostCategory /> : notAuthorized;
+      return hasSettingsAccess(userAccess) ? <CostCategory canWrite={canWrite()} /> : notAuthorized;
     } else if (currentTab === SettingsTab.platformProjects) {
-      return hasSettingsAccess(userAccess) ? <PlatformProjects /> : notAuthorized;
+      return hasSettingsAccess(userAccess) ? <PlatformProjects canWrite={canWrite()} /> : notAuthorized;
     } else if (currentTab === SettingsTab.tags) {
-      return hasSettingsAccess(userAccess) ? <TagDetails /> : notAuthorized;
+      return hasSettingsAccess(userAccess) ? <TagDetails canWrite={canWrite()} /> : notAuthorized;
     } else {
       return emptyTab;
     }

src/routes/settings/tagDetails/tagDetails.tsx

@@ -25,7 +25,7 @@ import { TagTable } from './tagTable';
 import { TagToolbar } from './tagToolbar';
 
 interface TagDetailsOwnProps {
-  // TBD...
+  canWrite?: boolean;
 }
 
 export interface TagDetailsMapProps {