Merge pull request #45 from chaitanyakole/addicon_button

Task #234974 Implement Role-Based Action Permissions for Add, Edit, and Delete ;Task #234692 Integrate Public Metabase URL in Profile Section
tekdi · Feb 12, 2025 · 1eac145 · 1eac145
2 parents 0879a6e + 12744d1
commit 1eac145
Show file tree

Hide file tree

Showing 6 changed files with 173 additions and 139 deletions.
diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx
@@ -1,18 +1,14 @@
 import React from "react";
 import { useTranslation } from "next-i18next";
-import { Box, Typography, Tooltip, useTheme, Button } from "@mui/material";
-import EditIcon from "@mui/icons-material/Edit";
-import DeleteIcon from "@mui/icons-material/Delete";
+import { Box, Typography, Tooltip, Button } from "@mui/material";
+import { useRouter } from "next/router";
+import Image from "next/image";
+import AssessmentIcon from "@mui/icons-material/Assessment";
 import deleteIcon from "../../public/images/deleteIcon.svg";
 import editIcon from "../../public/images/editIcon.svg";
 import cohortIcon from "../../public/images/apartment.svg";
 import addIcon from "../../public/images/addIcon.svg";
-import Dashboard from "@/pages/dashboard";
-import Image from "next/image";
-import { useRouter } from "next/router";
-import AssessmentIcon from "@mui/icons-material/Assessment"; // MUI report icon
-import ApartmentIcon from "@mui/icons-material/Apartment"; // MUI cohort icon
-import AddIcon from "@mui/icons-material/Add";
+
 interface ActionCellProps {
   onEdit: (rowData: any) => void;
   onDelete: (rowData: any) => void;
@@ -25,6 +21,7 @@ interface ActionCellProps {
   roleButton?: boolean;
   allowEditIcon?: boolean;
   onAdd: (rowData: any) => void;
+  showReports?: boolean;
 }
 
 const ActionIcon: React.FC<ActionCellProps> = ({
@@ -36,161 +33,179 @@ const ActionIcon: React.FC<ActionCellProps> = ({
   roleButton = false,
   addAction = false,
   userAction = false,
-  disable = false,
   allowEditIcon = false,
   reassignType,
+  showReports,
 }) => {
   const { t } = useTranslation();
-  const theme = useTheme<any>();
   const router = useRouter();
 
   const isCohortAdmin = rowData?.userRoleTenantMapping?.code === "cohort_admin";
-  const isLearnersPage = router.pathname === "/learners";
-  const isCohortPage = router.pathname === "/cohorts";
+  const currentPage = router.pathname;
 
-  const showEditDeleteButtons = true;
-  const isActionAllowed = isCohortAdmin && !isLearnersPage;
-  const isAddEnabled = isCohortAdmin && isCohortPage;
-  const isEditDeleteEnabled = isLearnersPage || !isCohortAdmin;
+  const buttonStates = {
+    add: {
+      visible: roleButton || addAction,
+      enabled: !isCohortAdmin || currentPage === "/cohorts",
+    },
+    editDelete: {
+      visible: !roleButton || allowEditIcon,
+      enabled: !isCohortAdmin || currentPage === "/learners",
+    },
+    reassign: {
+      visible: userAction,
+      enabled: !isCohortAdmin || currentPage === "/learners",
+    },
+    reports: {
+      visible: showReports,
+      enabled: true,
+    },
+  };
 
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "row",
-        gap: "20px",
-        alignItems: "center",
-      }}
-    >
-      {roleButton && (
+  const commonButtonStyles = (enabled: boolean) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    cursor: enabled ? "pointer" : "not-allowed",
+    p: "10px",
+    opacity: enabled ? 1 : 0.5,
+  });
+
+  const renderAddButton = () => {
+    if (!buttonStates.add.visible) return null;
+
+    if (roleButton) {
+      return (
         <Tooltip title={t("COMMON.ADD")}>
           <Button
-            onClick={() => {
-              if (!isActionAllowed) onAdd(rowData);
-            }}
-            disabled={isActionAllowed}
+            onClick={() => buttonStates.add.enabled && onAdd(rowData)}
+            disabled={!buttonStates.add.enabled}
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              cursor: isActionAllowed ? "not-allowed" : "pointer",
-              backgroundColor: isActionAllowed ? "#d3d3d3" : "#EAF2FF",
-              p: "10px",
+              ...commonButtonStyles(buttonStates.add.enabled),
+              backgroundColor: buttonStates.add.enabled ? "#EAF2FF" : "#d3d3d3",
             }}
           >
-            <Typography variant="body2" fontFamily={"Poppins"}>
+            <Typography variant="body2" fontFamily="Poppins">
               {t("COMMON.ADD")}
             </Typography>
           </Button>
         </Tooltip>
-      )}
+      );
+    }
 
-      {addAction && (
-        <Tooltip title={t("COMMON.ADD")}>
+    return (
+      <Tooltip title={t("COMMON.ADD")}>
+        <Box
+          onClick={() => buttonStates.add.enabled && onAdd(rowData)}
+          sx={{
+            ...commonButtonStyles(buttonStates.add.enabled),
+            backgroundColor: buttonStates.add.enabled ? "#EAF2FF" : "#d3d3d3",
+          }}
+        >
+          <Image src={addIcon} alt="" />
+        </Box>
+      </Tooltip>
+    );
+  };
+
+  const renderEditDeleteButtons = () => {
+    if (!buttonStates.editDelete.visible) return null;
+
+    return (
+      <>
+        <Tooltip title={t("COMMON.EDIT")}>
           <Box
-            onClick={() => {
-              if (isAddEnabled) onAdd(rowData);
-            }}
+            onClick={() => buttonStates.editDelete.enabled && onEdit(rowData)}
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              cursor: isAddEnabled ? "pointer" : "not-allowed",
-              color: isAddEnabled ? "" : theme?.palette?.secondary.contrastText,
-              backgroundColor: isAddEnabled ? "#EAF2FF" : "#d3d3d3",
-              p: "10px",
-              opacity: isAddEnabled ? 1 : 0.5,
+              ...commonButtonStyles(buttonStates.editDelete.enabled),
+              backgroundColor: buttonStates.editDelete.enabled
+                ? "#E3EAF0"
+                : "#d3d3d3",
             }}
           >
-            <Image src={addIcon} alt="" />
+            <Image src={editIcon} alt="" />
           </Box>
         </Tooltip>
-      )}
-
-      {(showEditDeleteButtons || allowEditIcon) && (
-        <>
-          <Tooltip title={t("COMMON.EDIT")}>
-            <Box
-              onClick={() => {
-                if (isEditDeleteEnabled) onEdit(rowData);
-              }}
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                cursor: isEditDeleteEnabled ? "pointer" : "not-allowed",
-                backgroundColor: isEditDeleteEnabled ? "#E3EAF0" : "#d3d3d3",
-                p: "10px",
-                opacity: isEditDeleteEnabled ? 1 : 0.5,
-              }}
-            >
-              <Image src={editIcon} alt="" />
-            </Box>
-          </Tooltip>
-
-          <Tooltip title={t("COMMON.DELETE")}>
-            <Box
-              onClick={() => {
-                if (isEditDeleteEnabled) onDelete(rowData);
-              }}
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                cursor: isEditDeleteEnabled ? "pointer" : "not-allowed",
-                backgroundColor: isEditDeleteEnabled ? "#EAF2FF" : "#d3d3d3",
-                p: "10px",
-                opacity: isEditDeleteEnabled ? 1 : 0.5,
-              }}
-            >
-              <Image src={deleteIcon} alt="" />
-            </Box>
-          </Tooltip>
-          <Tooltip title={t("COMMON.METABASE_REPORTS")}>
-            <Box
-              onClick={() => {
-                router.push({
-                  pathname: "/dashboard",
-                  query: rowData,
-                });
-              }}
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                cursor: "pointer",
-                backgroundColor: "#EAF2FF",
-                p: "10px",
-                opacity: 1,
-              }}
-            >
-              <AssessmentIcon />
-            </Box>
-          </Tooltip>
-        </>
-      )}
 
-      {userAction && (
-        <Tooltip title={reassignType}>
+        <Tooltip title={t("COMMON.DELETE")}>
           <Box
-            onClick={() => {
-              if (isEditDeleteEnabled && reassignCohort)
-                reassignCohort(rowData);
-            }}
+            onClick={() => buttonStates.editDelete.enabled && onDelete(rowData)}
             sx={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              cursor: isEditDeleteEnabled ? "pointer" : "not-allowed",
-              backgroundColor: isEditDeleteEnabled ? "#E5E5E5" : "#d3d3d3",
-              p: "10px",
-              opacity: isEditDeleteEnabled ? 1 : 0.5,
+              ...commonButtonStyles(buttonStates.editDelete.enabled),
+              backgroundColor: buttonStates.editDelete.enabled
+                ? "#EAF2FF"
+                : "#d3d3d3",
             }}
           >
-            <Image src={cohortIcon} alt="" />
+            <Image src={deleteIcon} alt="" />
           </Box>
         </Tooltip>
-      )}
+      </>
+    );
+  };
+  const renderReportsButton = () => {
+    if (!buttonStates.reports.visible) return null;
+    const userRowData =
+      rowData?.tenantId && !rowData?.userId
+        ? { tenantId: rowData.tenantId }
+        : rowData?.userId
+          ? { userId: rowData.userId }
+          : {};
+    return (
+      <Tooltip title={t("COMMON.METABASE_REPORTS")}>
+        <Box
+          onClick={() =>
+            router.push({
+              pathname: "/dashboard",
+              query: { ...userRowData, from: router.pathname },
+            })
+          }
+          sx={{
+            ...commonButtonStyles(true),
+            backgroundColor: "#EAF2FF",
+          }}
+        >
+          <AssessmentIcon />
+        </Box>
+      </Tooltip>
+    );
+  };
+
+  const renderReassignButton = () => {
+    if (!buttonStates.reassign.visible) return null;
+
+    return (
+      <Tooltip title={reassignType}>
+        <Box
+          onClick={() =>
+            buttonStates.reassign.enabled && reassignCohort?.(rowData)
+          }
+          sx={{
+            ...commonButtonStyles(buttonStates.reassign.enabled),
+            backgroundColor: buttonStates.reassign.enabled
+              ? "#E5E5E5"
+              : "#d3d3d3",
+          }}
+        >
+          <Image src={cohortIcon} alt="" />
+        </Box>
+      </Tooltip>
+    );
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        gap: "20px",
+        alignItems: "center",
+      }}
+    >
+      {renderAddButton()}
+      {renderEditDeleteButtons()}
+      {renderReportsButton()}
+      {renderReassignButton()}
     </Box>
   );
 };

diff --git a/src/components/KaTableComponent.tsx b/src/components/KaTableComponent.tsx
@@ -50,6 +50,7 @@ interface KaTableComponentProps {
   reassignType?: string;
   handleMemberClick?: any;
   allowEditIcon?: boolean;
+  showReports?: boolean;
 }
 
 const KaTableComponent: React.FC<KaTableComponentProps> = ({
@@ -73,6 +74,7 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
   reassignType,
   handleMemberClick,
   allowEditIcon,
+  showReports,
 }) => {
   const [selectedRowIds, setSelectedRowIds] = useState<number[]>([]);
   const { t } = useTranslation();
@@ -103,7 +105,6 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
       },
     }),
   };
-
   return (
     <Paper>
       <div className="ka-table-wrapper">
@@ -147,6 +148,7 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
                       reassignCohort={reassignCohort}
                       onDelete={onDelete}
                       allowEditIcon={allowEditIcon}
+                      showReports={showReports}
                       // userAction={props.rowData?.userId}
                       disable={props.rowData?.status === Status.ARCHIVED}
                       reassignType={reassignType}
@@ -201,6 +203,12 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
                         onClick={() => {
                           addCohortBtnFunc(props.rowData);
                         }}
+                        disabled={
+                          props.rowData?.userRoleTenantMapping?.code !=
+                          "cohort_admin"
+                            ? false
+                            : true
+                        }
                         sx={{
                           display: "flex",
                           flexDirection: "column",

diff --git a/src/components/UserTable.tsx b/src/components/UserTable.tsx
@@ -923,6 +923,7 @@ const UserTable: React.FC<UserTableProps> = ({
           onDelete={handleDelete}
           pagination={pagination}
           allowEditIcon={true}
+          showReports={true}
           noDataMessage={data?.length === 0 ? t("COMMON.NO_USER_FOUND") : ""}
         />
       ) : (

diff --git a/src/pages/cohorts.tsx b/src/pages/cohorts.tsx
@@ -980,6 +980,7 @@ const Center: React.FC = () => {
             extraActions={extraActions}
             showIcons={true}
             allowEditIcon={true}
+            showReports={false}
             onAdd={handleAdd}
             onEdit={handleEdit}
             onDelete={handleDelete}