Merge pull request #3274 from dlabrecq/read-only

Add read only access for new settings tabs
project-koku · Jul 4, 2023 · 4145883 · 4145883
2 parents a1415a3 + e46ebfd
commit 4145883
Show file tree

Hide file tree

Showing 28 changed files with 212 additions and 73 deletions.
diff --git a/locales/data.json b/locales/data.json
@@ -1410,12 +1410,6 @@
         "value": "Should not exceed 10 decimals"
       }
     ],
-    "costModelsReadOnly": [
-      {
-        "type": 0,
-        "value": "You have read only permissions"
-      }
-    ],
     "costModelsRefreshDialog": [
       {
         "type": 0,
@@ -11236,6 +11230,12 @@
         "value": "Failed to get RBAC information"
       }
     ],
+    "readOnlyPermissions": [
+      {
+        "type": 0,
+        "value": "You have read only permissions"
+      }
+    ],
     "recommended": [
       {
         "type": 0,

diff --git a/locales/translations.json b/locales/translations.json
@@ -114,7 +114,6 @@
   "costModelsPopoverAriaLabel": "Cost model info popover",
   "costModelsPopoverButtonAriaLabel": "Opens a dialog with cost model info",
   "costModelsRateTooLong": "Should not exceed 10 decimals",
-  "costModelsReadOnly": "You have read only permissions",
   "costModelsRefreshDialog": "Refresh this dialog",
   "costModelsRemoveTagLabel": "Remove tag value",
   "costModelsRequiredField": "This field is required",
@@ -485,6 +484,7 @@
   "rawCostTitle": "Raw cost",
   "rbacErrorDesc": "There was a problem receiving user permissions. Refreshing this page may fix it. If it does not, please contact your admin.",
   "rbacErrorTitle": "Failed to get RBAC information",
+  "readOnlyPermissions": "You have read only permissions",
   "recommended": "Recommended",
   "redHatStatusUrl": "https://status.redhat.com",
   "remove": "Remove",

diff --git a/src/api/userAccess.ts b/src/api/userAccess.ts
@@ -26,6 +26,7 @@ export const enum UserAccessType {
   ocp = 'ocp',
   rhel = 'ocp', // Todo: update to use RHEL when APIs are available
   ros = 'ocp',
+  settings = 'settings',
 }
 
 // If the user-access API is called without a query parameter, all types are returned in the response

diff --git a/src/components/permissions/permissions.tsx b/src/components/permissions/permissions.tsx
@@ -45,7 +45,7 @@ type PermissionsProps = PermissionsOwnProps & PermissionsStateProps;
 
 const PermissionsBase: React.FC<PermissionsProps> = ({
   children = null,
-  chrome,
+  // chrome,
   isFinsightsFeatureEnabled,
   isIbmFeatureEnabled,
   isRosFeatureEnabled,
@@ -68,7 +68,7 @@ const PermissionsBase: React.FC<PermissionsProps> = ({
     const ocp = hasOcpAccess(userAccess);
     const rhel = isFinsightsFeatureEnabled && hasRhelAccess(userAccess);
     const ros = isRosFeatureEnabled && hasRosAccess(userAccess);
-    const settings = isSettingsFeatureEnabled && (chrome.isOrgAdmin || costModel);
+    const settings = isSettingsFeatureEnabled;
 
     switch (pathname) {
       case formatPath(routes.explorer.path):

diff --git a/src/locales/messages.ts b/src/locales/messages.ts
@@ -637,11 +637,6 @@ export default defineMessages({
     description: 'Should not exceed 10 decimals',
     id: 'costModelsRateTooLong',
   },
-  costModelsReadOnly: {
-    defaultMessage: 'You have read only permissions',
-    description: 'You have read only permissions',
-    id: 'costModelsReadOnly',
-  },
   costModelsRefreshDialog: {
     defaultMessage: 'Refresh this dialog',
     description: 'Refresh this dialog',
@@ -3018,6 +3013,11 @@ export default defineMessages({
     description: 'RBAC error title',
     id: 'rbacErrorTitle',
   },
+  readOnlyPermissions: {
+    defaultMessage: 'You have read only permissions',
+    description: 'You have read only permissions',
+    id: 'readOnlyPermissions',
+  },
   recommended: {
     defaultMessage: 'Recommended',
     description: 'Recommended',

diff --git a/src/routes/components/dataToolbar/basicToolbar.tsx b/src/routes/components/dataToolbar/basicToolbar.tsx
@@ -36,6 +36,7 @@ interface BasicToolbarOwnProps {
   isAllSelected?: boolean;
   isBulkSelectDisabled?: boolean;
   isDisabled?: boolean;
+  isReadOnly?: boolean;
   itemsPerPage?: number;
   itemsTotal?: number;
   onBulkSelected?: (action: string) => void;
@@ -124,7 +125,8 @@ export class BasicToolbarBase extends React.Component<BasicToolbarProps, BasicTo
   // Bulk select
 
   public getBulkSelectComponent = () => {
-    const { isAllSelected, isBulkSelectDisabled, isDisabled, itemsPerPage, itemsTotal, selectedItems } = this.props;
+    const { isAllSelected, isBulkSelectDisabled, isDisabled, isReadOnly, itemsPerPage, itemsTotal, selectedItems } =
+      this.props;
     const { isBulkSelectOpen } = this.state;
 
     return getBulkSelect({
@@ -135,6 +137,7 @@ export class BasicToolbarBase extends React.Component<BasicToolbarProps, BasicTo
       isBulkSelectDisabled,
       isBulkSelectOpen,
       isDisabled,
+      isReadOnly,
       itemsPerPage,
       itemsTotal,
       selectedItems,

diff --git a/src/routes/components/dataToolbar/utils/bulkSelect.tsx b/src/routes/components/dataToolbar/utils/bulkSelect.tsx
@@ -4,6 +4,7 @@ import {
   DropdownPosition,
   DropdownToggle,
   DropdownToggleCheckbox,
+  Tooltip,
 } from '@patternfly/react-core';
 import { intl } from 'components/i18n';
 import messages from 'locales/messages';
@@ -19,6 +20,7 @@ export const getBulkSelect = ({
   isBulkSelectDisabled,
   isBulkSelectOpen,
   isDisabled,
+  isReadOnly,
   itemsPerPage,
   itemsTotal,
   selectedItems,
@@ -30,6 +32,7 @@ export const getBulkSelect = ({
   isBulkSelectDisabled?: boolean;
   isBulkSelectOpen?: boolean;
   isDisabled?: boolean;
+  isReadOnly?: boolean;
   itemsPerPage?: number;
   itemsTotal?: number;
   selectedItems?: ComputedReportItem[];
@@ -52,13 +55,13 @@ export const getBulkSelect = ({
     </DropdownItem>,
   ];
 
-  return (
+  const bulkSelect = (
     <Dropdown
       onSelect={handleOnBulkSelect}
       position={DropdownPosition.left}
       toggle={
         <DropdownToggle
-          isDisabled={isDisabled || isBulkSelectDisabled}
+          isDisabled={isDisabled || isReadOnly || isBulkSelectDisabled}
           splitButtonItems={[
             <DropdownToggleCheckbox
               id="bulk-select"
@@ -83,4 +86,9 @@ export const getBulkSelect = ({
       dropdownItems={dropdownItems}
     />
   );
+  return isReadOnly ? (
+    <Tooltip content={intl.formatMessage(messages.readOnlyPermissions)}>{bulkSelect}</Tooltip>
+  ) : (
+    bulkSelect
+  );
 };
diff --git a/src/routes/costModels/costModel/priceListTable.tsx b/src/routes/costModels/costModel/priceListTable.tsx
@@ -311,7 +311,7 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                           // HACK: to display tooltip on disable
                           style: !isWritePermission ? { pointerEvents: 'auto' } : undefined,
                           tooltip: !isWritePermission ? (
-                            <div>{intl.formatMessage(messages.costModelsReadOnly)}</div>
+                            <div>{intl.formatMessage(messages.readOnlyPermissions)}</div>
                           ) : undefined,
                           onClick: (_evt, _rowIndex, rowData) => {
                             this.setState({
@@ -330,7 +330,7 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                           // HACK: to display tooltip on disable
                           style: !isWritePermission ? { pointerEvents: 'auto' } : {},
                           tooltip: !isWritePermission ? (
-                            <div>{intl.formatMessage(messages.costModelsReadOnly)}</div>
+                            <div>{intl.formatMessage(messages.readOnlyPermissions)}</div>
                           ) : undefined,
                           onClick: (_evt, _rowIndex, rowData) => {
                             const rowIndex = rowData.data.stateIndex;

diff --git a/src/routes/costModels/costModel/sourcesTable.tsx b/src/routes/costModels/costModel/sourcesTable.tsx
@@ -34,7 +34,7 @@ const SourcesTable: React.FC<SourcesTableProps> = ({ canWrite, costModels, intl,
     return [
       {
         style: { pointerEvents: 'auto' },
-        tooltip: intl.formatMessage(messages.costModelsReadOnly),
+        tooltip: intl.formatMessage(messages.readOnlyPermissions),
         isDisabled: true,
         title: intl.formatMessage(messages.costModelsSourceDelete),
       },

diff --git a/src/routes/costModels/costModelsDetails/createCostModelButton.tsx b/src/routes/costModels/costModelsDetails/createCostModelButton.tsx
@@ -36,7 +36,7 @@ const buttonMergeProps = (
 
   return {
     isDisabled: !canWrite,
-    tooltip: intl.formatMessage(messages.costModelsReadOnly),
+    tooltip: intl.formatMessage(messages.readOnlyPermissions),
     children: (
       <Button isDisabled={!canWrite} onClick={openWizard}>
         {intl.formatMessage(messages.costModelsWizardCreateCostModel)}

diff --git a/src/routes/costModels/costModelsDetails/table.tsx b/src/routes/costModels/costModelsDetails/table.tsx
@@ -89,7 +89,7 @@ class CostModelsTableBase extends React.Component<CostModelsTableProps, CostMode
     const actions = createActions(stateName, canWrite, [
       {
         title: intl.formatMessage(messages.delete),
-        tooltip: intl.formatMessage(messages.costModelsReadOnly),
+        tooltip: intl.formatMessage(messages.readOnlyPermissions),
         onClick: (_evt: React.MouseEvent, _rowIx: number, rowData: IRowData) => {
           openDeleteDialog(rowData.data);
         },

diff --git a/src/routes/settings/calculations/calculations.tsx b/src/routes/settings/calculations/calculations.tsx
@@ -1,4 +1,4 @@
-import { PageSection, Title, TitleSizes } from '@patternfly/react-core';
+import { PageSection, Title, TitleSizes, Tooltip } from '@patternfly/react-core';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -8,6 +8,7 @@ import { CostType } from 'routes/components/costType';
 import { Currency } from 'routes/components/currency';
 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';
@@ -20,10 +21,12 @@ interface SettingsOwnProps {
 }
 
 interface SettingsDispatchProps {
+  fetchRbac: typeof rbacActions.fetchRbac;
   updateSettings: typeof settingsActions.updateSettings;
 }
 
 interface SettingsStateProps {
+  canWrite?: boolean;
   updateSettingsStatus: FetchStatus;
 }
 
@@ -45,8 +48,12 @@ class SettingsBase extends React.Component<SettingsProps, SettingsState> {
   };
   public state: SettingsState = { ...this.defaultState };
 
+  public componentDidMount() {
+    this.updateReport();
+  }
+
   private getCostType = () => {
-    const { intl } = this.props;
+    const { canWrite, intl } = this.props;
     const { currentCostType } = this.state;
 
     return (
@@ -56,19 +63,22 @@ class SettingsBase extends React.Component<SettingsProps, SettingsState> {
         </Title>
         {intl.formatMessage(messages.costTypeSettingsDesc)}
         <div style={styles.costType}>
-          <CostType
-            costType={currentCostType}
-            isLocalStorage={false}
-            onSelect={this.handleOnCostTypeSelected}
-            showLabel={false}
-          />
+          {this.getTooltip(
+            <CostType
+              costType={currentCostType}
+              isDisabled={!canWrite}
+              isLocalStorage={false}
+              onSelect={this.handleOnCostTypeSelected}
+              showLabel={false}
+            />
+          )}
         </div>
       </div>
     );
   };
 
   private getCurrency = () => {
-    const { intl } = this.props;
+    const { canWrite, intl } = this.props;
     const { currentCurrency } = this.state;
 
     return (
@@ -78,17 +88,26 @@ class SettingsBase extends React.Component<SettingsProps, SettingsState> {
         </Title>
         {intl.formatMessage(messages.currencyDesc)}
         <div style={styles.currency}>
-          <Currency
-            currency={currentCurrency}
-            isLocalStorage={false}
-            onSelect={this.handleOnCurrencySelected}
-            showLabel={false}
-          />
+          {this.getTooltip(
+            <Currency
+              currency={currentCurrency}
+              isDisabled={!canWrite}
+              isLocalStorage={false}
+              onSelect={this.handleOnCurrencySelected}
+              showLabel={false}
+            />
+          )}
         </div>
       </div>
     );
   };
 
+  private getTooltip = comp => {
+    const { canWrite, intl } = this.props;
+
+    return !canWrite ? <Tooltip content={intl.formatMessage(messages.readOnlyPermissions)}>{comp}</Tooltip> : comp;
+  };
+
   private handleOnCostTypeSelected = value => {
     const { updateSettings } = this.props;
 
@@ -120,6 +139,11 @@ class SettingsBase extends React.Component<SettingsProps, SettingsState> {
     });
   };
 
+  private updateReport = () => {
+    const { fetchRbac } = this.props;
+    fetchRbac();
+  };
+
   public render() {
     return (
       <PageSection isFilled>
@@ -135,11 +159,13 @@ const mapStateToProps = createMapStateToProps<SettingsOwnProps, SettingsStatePro
   const updateSettingsStatus = settingsSelectors.selectSettingsUpdateStatus(state);
 
   return {
+    canWrite: rbacSelectors.isSettingsWritePermission(state),
     updateSettingsStatus,
   };
 });
 
 const mapDispatchToProps: SettingsDispatchProps = {
+  fetchRbac: rbacActions.fetchRbac,
   updateSettings: settingsActions.updateSettings,
 };