Merge pull request #51 from vidyaaKhandekar/metabase-dashboard-0.1

Task #235204: Integrate Metabase User Journey Dashboards and Response Event Dashboard into learner tab
tekdi · Feb 17, 2025 · 7798562 · 7798562
2 parents 5c35c70 + 4c4b1fb
commit 7798562
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 9 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -145,7 +145,9 @@
     "ENABLE_ROLE": "Enable Role",
     "SEND_INVITATION_TO_NEW_ADMIN": "Send Invitation to new cohort admin",
     "SEND_INVITATION": "Send Invitation",
-    "METABASE_REPORTS": "Metabase Report"
+    "METABASE_REPORTS": "Metabase Report",
+    "USER_JOURNEY_REPORT":"User Journey Report",
+    "USER_RESPONSE_EVENT":"User Response Event Report"
   },
   "LOGIN_PAGE": {
     "USERNAME": "Username",

diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx
@@ -8,7 +8,8 @@ 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 TimelineIcon from "@mui/icons-material/Timeline";
+import QueryStatsIcon from "@mui/icons-material/QueryStats";
 interface ActionCellProps {
   onEdit: (rowData: any) => void;
   onDelete: (rowData: any) => void;
@@ -22,6 +23,7 @@ interface ActionCellProps {
   allowEditIcon?: boolean;
   onAdd: (rowData: any) => void;
   showReports?: boolean;
+  showLearnerReports?: boolean;
 }
 
 const ActionIcon: React.FC<ActionCellProps> = ({
@@ -36,6 +38,7 @@ const ActionIcon: React.FC<ActionCellProps> = ({
   allowEditIcon = false,
   reassignType,
   showReports,
+  showLearnerReports = false,
 }) => {
   const { t } = useTranslation();
   const router = useRouter();
@@ -60,6 +63,10 @@ const ActionIcon: React.FC<ActionCellProps> = ({
       visible: showReports,
       enabled: true,
     },
+    learnerReports: {
+      visible: showLearnerReports,
+      enabled: true,
+    },
   };
 
   const commonButtonStyles = (enabled: boolean) => ({
@@ -143,14 +150,17 @@ const ActionIcon: React.FC<ActionCellProps> = ({
       </>
     );
   };
+  const getUserRowData = (dashboardType: string) => {
+    return rowData?.tenantId && !rowData?.userId
+      ? { tenantId: rowData.tenantId, dashboardType }
+      : rowData?.userId
+        ? { userId: rowData.userId, dashboardType }
+        : {};
+  };
   const renderReportsButton = () => {
     if (!buttonStates.reports.visible) return null;
-    const userRowData =
-      rowData?.tenantId && !rowData?.userId
-        ? { tenantId: rowData.tenantId }
-        : rowData?.userId
-          ? { userId: rowData.userId }
-          : {};
+    const userRowData = getUserRowData("default");
+
     return (
       <Tooltip title={t("COMMON.METABASE_REPORTS")}>
         <Box
@@ -170,6 +180,52 @@ const ActionIcon: React.FC<ActionCellProps> = ({
       </Tooltip>
     );
   };
+  const renderResponseEventReportsButton = () => {
+    if (!buttonStates.learnerReports.visible) return null;
+    const userRowData = getUserRowData("responseEvent");
+
+    return (
+      <Tooltip title={t("COMMON.USER_RESPONSE_EVENT")}>
+        <Box
+          onClick={() =>
+            router.push({
+              pathname: "/dashboard",
+              query: { ...userRowData, from: router.pathname },
+            })
+          }
+          sx={{
+            ...commonButtonStyles(true),
+            backgroundColor: "#EAF2FF",
+          }}
+        >
+          <QueryStatsIcon />
+        </Box>
+      </Tooltip>
+    );
+  };
+  const renderUserJourneyReportsButton = () => {
+    if (!buttonStates.learnerReports.visible) return null;
+    const userRowData = getUserRowData("userJourney");
+
+    return (
+      <Tooltip title={t("COMMON.USER_JOURNEY_REPORT")}>
+        <Box
+          onClick={() =>
+            router.push({
+              pathname: "/dashboard",
+              query: { ...userRowData, from: router.pathname },
+            })
+          }
+          sx={{
+            ...commonButtonStyles(true),
+            backgroundColor: "#EAF2FF",
+          }}
+        >
+          <TimelineIcon />
+        </Box>
+      </Tooltip>
+    );
+  };
 
   const renderReassignButton = () => {
     if (!buttonStates.reassign.visible) return null;
@@ -206,6 +262,8 @@ const ActionIcon: React.FC<ActionCellProps> = ({
       {renderEditDeleteButtons()}
       {renderReportsButton()}
       {renderReassignButton()}
+      {renderUserJourneyReportsButton()}
+      {renderResponseEventReportsButton()}
     </Box>
   );
 };

diff --git a/src/components/KaTableComponent.tsx b/src/components/KaTableComponent.tsx
@@ -51,6 +51,7 @@ interface KaTableComponentProps {
   handleMemberClick?: any;
   allowEditIcon?: boolean;
   showReports?: boolean;
+  showLearnerReports?: boolean;
 }
 
 const KaTableComponent: React.FC<KaTableComponentProps> = ({
@@ -75,6 +76,7 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
   handleMemberClick,
   allowEditIcon,
   showReports,
+  showLearnerReports,
 }) => {
   const [selectedRowIds, setSelectedRowIds] = useState<number[]>([]);
   const { t } = useTranslation();
@@ -105,6 +107,7 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
       },
     }),
   };
+
   return (
     <Paper>
       <div className="ka-table-wrapper">
@@ -149,6 +152,7 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
                       onDelete={onDelete}
                       allowEditIcon={allowEditIcon}
                       showReports={showReports}
+                      showLearnerReports={showLearnerReports}
                       // userAction={props.rowData?.userId}
                       disable={props.rowData?.status === Status.ARCHIVED}
                       reassignType={reassignType}

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

diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState, useMemo } from "react";
 interface RowData {
   tenantId?: string;
   userId?: string;
+  dashboardType?: string;
 }
 
 const Dashboard = () => {
@@ -21,9 +22,23 @@ const Dashboard = () => {
   const metabaseUrl = useMemo(() => {
     if (router.query.from === "/tenant") {
       return `${process.env.NEXT_PUBLIC_METABASE_URL_TENANTID}${rowData?.tenantId}`;
-    } else if (router.query.from === "/learners") {
+    } else if (
+      router.query.from === "/learners" &&
+      rowData?.dashboardType === "default"
+    ) {
       return `${process.env.NEXT_PUBLIC_METABASE_URL_USERID}${rowData?.userId}`;
+    } else if (
+      router.query.from === "/learners" &&
+      rowData?.dashboardType === "responseEvent"
+    ) {
+      return `${process.env.NEXT_PUBLIC_METABASE_URL_USER_RESPONSE_EVENT}${rowData?.userId}`;
+    } else if (
+      router.query.from === "/learners" &&
+      rowData?.dashboardType === "userJourney"
+    ) {
+      return `${process.env.NEXT_PUBLIC_METABASE_URL_USER_JOURNEY}${rowData?.userId}`;
     }
+
     return "";
   }, [router.query.from, rowData]);