feat: add edit functionality to BindingDetailDialog (#447)

- Introduced an optional `onEdit` prop to the BindingDetailDialog component, allowing users to trigger an edit action.
- Updated the dialog title to display the binding name instead of a static label.
- Integrated the edit functionality into both ClusterRoleBindingsContent and NamespaceRoleBindingsContent components, enabling editing of selected bindings.

Signed-off-by: Stefinie Fernando <minolispencer@gmail.com>

Author: stefinie123

plugins/openchoreo/src/components/AccessControl/MappingsTab/BindingDetailDialog.tsx

@@ -13,6 +13,7 @@ import {
 import { makeStyles } from '@material-ui/core/styles';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
 import BlockIcon from '@material-ui/icons/Block';
+import EditIcon from '@material-ui/icons/EditOutlined';
 import { CHOREO_LABELS } from '@openchoreo/backstage-plugin-common';
 import { useSharedStyles } from './styles';
 
@@ -122,15 +123,15 @@ export interface BindingDetail {
 interface BindingDetailDialogProps {
   open: boolean;
   onClose: () => void;
+  onEdit?: () => void;
   binding: BindingDetail | null;
-  scopeLabel: string;
 }
 
 export const BindingDetailDialog = ({
   open,
   onClose,
+  onEdit,
   binding,
-  scopeLabel,
 }: BindingDetailDialogProps) => {
   const classes = useStyles();
   const sharedClasses = useSharedStyles();
@@ -142,7 +143,7 @@ export const BindingDetailDialog = ({
   return (
     <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
       <DialogTitle disableTypography>
-        <Typography variant="h4">{scopeLabel} Role Binding Details</Typography>
+        <Typography variant="h4">{binding.name}</Typography>
       </DialogTitle>
       <DialogContent>
         <Paper variant="outlined" className={classes.summaryCard}>
@@ -243,6 +244,16 @@ export const BindingDetailDialog = ({
         </Paper>
       </DialogContent>
       <DialogActions>
+        {onEdit && (
+          <Button
+            onClick={onEdit}
+            variant="outlined"
+            color="primary"
+            startIcon={<EditIcon />}
+          >
+            Edit
+          </Button>
+        )}
         <Button onClick={onClose} variant="contained" color="primary">
           Close
         </Button>

plugins/openchoreo/src/components/AccessControl/MappingsTab/ClusterRoleBindingsContent.tsx

@@ -577,8 +577,20 @@ export const ClusterRoleBindingsContent = ({
       <BindingDetailDialog
         open={!!detailBinding}
         onClose={() => setDetailBinding(null)}
+        onEdit={
+          canUpdate && detailBinding
+            ? () => {
+                const original = bindings.find(
+                  b => b.name === detailBinding.name,
+                );
+                setDetailBinding(null);
+                if (original) {
+                  handleEditBinding(original);
+                }
+              }
+            : undefined
+        }
         binding={detailBinding}
-        scopeLabel="Cluster"
       />
     </Box>
   );

plugins/openchoreo/src/components/AccessControl/MappingsTab/NamespaceRoleBindingsContent.tsx

@@ -648,8 +648,20 @@ export const NamespaceRoleBindingsContent = ({
       <BindingDetailDialog
         open={!!detailBinding}
         onClose={() => setDetailBinding(null)}
+        onEdit={
+          canUpdate && detailBinding
+            ? () => {
+                const original = bindings.find(
+                  b => b.name === detailBinding.name,
+                );
+                setDetailBinding(null);
+                if (original) {
+                  handleEditBinding(original);
+                }
+              }
+            : undefined
+        }
         binding={detailBinding}
-        scopeLabel="Namespace"
       />
     </Box>
   );