Fix managed cluster access button for read only users

CHANGELOG.md

@@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file.
 
 ## Unreleased
 
+### Fixed
+- Fix access to cluster manage buttons shown for users without cluster write permission from [mabhi](https://github.com/mabhi)
+
 ## [0.1.5]- 2022-11-04
 ### Added
 - Show last access time in users list page from [akshay196](https://github.com/akshay196)

src/app/routes/edges/routes/PrivateEdgeList/components/DataTableToolbar.js

@@ -161,6 +161,7 @@ const DataTableToolbar = (props) => {
     callGetEdges,
     userAndRoleDetail,
     data,
+    hasWriteAccessInCluster,
   } = props;
   const isClusterListAvailable = data.length !== 0;
   const classes = useStyles();
@@ -221,15 +222,17 @@ const DataTableToolbar = (props) => {
             )}
             <div className="d-inline-block">
               <DownloadKubeconfig user={userAndRoleDetail} withIcon />
-              <Button
-                variant="contained"
-                className="jr-btn jr-btn-label left text-nowrap text-white mr-3"
-                onClick={(event) => handleCreateClick(event)}
-                color="primary"
-              >
-                <i className="zmdi zmdi-plus zmdi-hc-fw " />
-                <span>New Cluster</span>
-              </Button>
+              {hasWriteAccessInCluster && (
+                <Button
+                  variant="contained"
+                  className="jr-btn jr-btn-label left text-nowrap text-white mr-3"
+                  onClick={(event) => handleCreateClick(event)}
+                  color="primary"
+                >
+                  <i className="zmdi zmdi-plus zmdi-hc-fw " />
+                  <span>New Cluster</span>
+                </Button>
+              )}
             </div>
           </div>
         </div>

src/app/routes/edges/routes/PrivateEdgeList/components/SlatList/index.js

@@ -42,7 +42,7 @@ const dateFormatOptions = {
 
 const SlatList = (props) => {
   const [openClusterSharing, setOpenClusterSharing] = useState(false);
-  const { disableActions } = props;
+  const { hasWriteAccessInCluster, disableActions } = props;
   const { UserSession, Projects, sshEdges, partnerDetail, alertsConfig } =
     props.parentProps;
 
@@ -162,6 +162,7 @@ const SlatList = (props) => {
                   sshEdges,
                   partnerDetail,
                   alertsConfig,
+                  hasWriteAccessInCluster,
                 }}
               >
                 <ClusterActions

src/app/routes/edges/routes/PrivateEdgeList/index.js

@@ -1197,8 +1197,8 @@ class PrivateEdgeList extends React.Component {
     const { order, orderBy, selected, rowsPerPage, page } = this.state;
     const { match, UserSession, Projects, sshEdges, partnerDetail } =
       this.props;
+    console.log(this.props);
     let data = [];
-    const roles = [];
     if (!this.state.edges) {
       return null;
     }
@@ -1250,6 +1250,20 @@ class PrivateEdgeList extends React.Component {
       return ready;
     };
 
+    const hasWriteAccessInCluster = (projectName) => {
+      let hasWriteAccess = false;
+      // if user has access to the current project or the user has org wide roles
+      var allPermissions = this.props.userAndRoleDetail.spec.permissions
+        .filter(
+          (obj) => obj.project === projectName || obj.scope === "organization"
+        )
+        .map((item) => item.permissions);
+      let deduplicatedPermissions = new Set(allPermissions.flat(1));
+      // only look out for cluster write permissions
+      hasWriteAccess = deduplicatedPermissions.has("cluster.write");
+      return hasWriteAccess;
+    };
+
     return (
       <Spinner loading={!this.state.edgesLoaded} hideChildren addHeight>
         <div>
@@ -1273,6 +1287,9 @@ class PrivateEdgeList extends React.Component {
           </div>
           <Paper className="mb-4">
             <DataTableToolbar
+              hasWriteAccessInCluster={hasWriteAccessInCluster(
+                this.props.UserSession.projectId
+              )}
               renderInTable={this.state.renderInTable}
               callGetEdges={this.callGetEdges}
               setDefaultValue={this.setDefaultValue}
@@ -1349,7 +1366,7 @@ class PrivateEdgeList extends React.Component {
                                   iconOnly={true}
                                 />
                               )}
-                              {this.state.userRole !== "READ_ONLY_OPS" && (
+                              {hasWriteAccessInCluster(n.metadata.project) && (
                                 <Tooltip title="Kubectl Settings">
                                   <IconButton
                                     aria-label="edit"
@@ -1362,7 +1379,7 @@ class PrivateEdgeList extends React.Component {
                                   </IconButton>
                                 </Tooltip>
                               )}
-                              {this.state.userRole !== "READ_ONLY_OPS" && (
+                              {hasWriteAccessInCluster(n.metadata.project) && (
                                 <DeleteIconComponent
                                   key={n.metadata.name}
                                   button={{
@@ -1411,6 +1428,9 @@ class PrivateEdgeList extends React.Component {
                   parentProps={{ ...this.props }}
                   index={index}
                   UserSession={this.props.UserSession}
+                  hasWriteAccessInCluster={hasWriteAccessInCluster(
+                    n.metadata.project
+                  )}
                   isUpdateEndpointsSuccess={this.props.isUpdateEndpointsSuccess}
                   isUpdateEndpointsError={this.props.isUpdateEndpointsError}
                   UpdateEndpointsError={this.props.UpdateEndpointsError}

src/components/ClusterActions/index.js

@@ -3,6 +3,7 @@ import {
   DEFAULT_MENU_ITEMS,
   MENU_ITEMS,
   NOT_READY_MENU_ITEMS,
+  CLUSTER_RO_MENU_ITEMS,
 } from "constants/ClusterActions";
 import { downloadFile, parseError, useSnack } from "utils";
 import {
@@ -28,9 +29,8 @@ const ClusterActions = ({
   resumeAutoRefresh = null,
   pauseAutoRefresh = null,
 }) => {
-  const { UserSession, project, partnerDetail } = useContext(
-    ClusterActionsContext
-  );
+  const { hasWriteAccessInCluster, UserSession, project, partnerDetail } =
+    useContext(ClusterActionsContext);
 
   const dispatch = useDispatch();
   const history = useHistory();
@@ -86,6 +86,13 @@ const ClusterActions = ({
       menuItems = menuItems.filter((item) =>
         NOT_READY_MENU_ITEMS.includes(item)
       );
+    // Remove actions for read-only clusters
+    if (!hasWriteAccessInCluster) {
+      menuItems = menuItems.filter(
+        (item) => !CLUSTER_RO_MENU_ITEMS.includes(item)
+      );
+    }
+
     setMenuItems(menuItems);
   };
 

src/constants/ClusterActions.js

@@ -19,3 +19,5 @@ export const NOT_READY_MENU_ITEMS = [
   "Download Kube Config",
   "Delete",
 ];
+
+export const CLUSTER_RO_MENU_ITEMS = ["Edit Labels", "Delete"];