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

Fix-Scrollbar added to invitation menu and handling height of iframe
tekdi · Feb 19, 2025 · 92b0d03 · 92b0d03
2 parents d23b99e + 76a0013
commit 92b0d03
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 13 deletions.
diff --git a/src/components/layouts/header/Invitation.tsx b/src/components/layouts/header/Invitation.tsx
@@ -297,11 +297,12 @@ const InvitationMenu = () => {
             maxHeight: "80vh",
             mt: "32px",
             position: "fixed",
+            display: "flex",
+            flexDirection: "column",
           },
         }}
       >
-        <Box sx={{ p: 2 }}>
-          {/* Error and Success Alerts */}
+        <Box sx={{ p: 2, flexShrink: 0 }}>
           {error && (
             <Alert severity="error" sx={{ mb: 1 }}>
               {error}
@@ -315,21 +316,33 @@ const InvitationMenu = () => {
 
           <Divider sx={{ my: 1 }} />
 
-          {/* Tabs */}
           <Tabs
             value={tabValue}
             onChange={(_, newValue) => setTabValue(newValue)}
             variant="fullWidth"
-            sx={{ mb: 2 }}
+            sx={{
+              flexShrink: 0,
+              position: "sticky",
+              top: 0,
+              backgroundColor: "white",
+              zIndex: 1,
+            }}
           >
             <Tab label={t("COHORTINVITATION.SENT")} />
             <Tab label={t("COHORTINVITATION.RECEIVED")} />
           </Tabs>
+        </Box>
 
-          {/* Sent Invitations */}
-
+        <Box
+          sx={{
+            flexGrow: 1,
+            overflowY: "auto",
+            maxHeight: "calc(80vh - 120px)",
+            pr: 1,
+          }}
+        >
           {tabValue === 0 && (
-            <Stack spacing={1} sx={{ maxHeight: "400px", overflow: "auto" }}>
+            <Stack spacing={1}>
               {sentInvitations.length === 0 && (
                 <Typography sx={{ textAlign: "center" }}>
                   {t("COHORTINVITATION.NO_PENDING_REQUESTS_SENT")}
@@ -369,7 +382,7 @@ const InvitationMenu = () => {
                           variant="outlined"
                           sx={{ borderRadius: "15px" }}
                         >
-                          Revoke Invitation
+                          Revoke
                         </Button>
                       </Tooltip>
                     </Stack>
@@ -378,10 +391,10 @@ const InvitationMenu = () => {
               ))}
             </Stack>
           )}
-          {/* Received Invitations */}
+
           {tabValue === 1 && (
-            <Stack spacing={1} sx={{ maxHeight: "400px", overflow: "auto" }}>
-              {notificationCount === 0 && (
+            <Stack spacing={1}>
+              {receivedInvitations.length === 0 && (
                 <Typography sx={{ textAlign: "center" }}>
                   {t("COHORTINVITATION.NO_PENDING_INVITATIONS")}
                 </Typography>
@@ -452,6 +465,7 @@ const InvitationMenu = () => {
           )}
         </Box>
       </Menu>
+
       {/* Delete Confirmation Dialog */}
       <Dialog open={!!confirmDelete} onClose={() => setConfirmDelete(null)}>
         <DialogTitle>Delete Invitation</DialogTitle>

diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
@@ -1,6 +1,6 @@
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useRouter } from "next/router";
-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useState, useMemo, useRef } from "react";
 
 interface RowData {
   tenantId?: string;
@@ -10,8 +10,10 @@ interface RowData {
 
 const Dashboard = () => {
   const router = useRouter();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
   const [rowData, setRowData] = useState<RowData | undefined>();
   const [isError, setIsError] = useState(false);
+  const [iframeHeight, setIframeHeight] = useState("800px");
 
   useEffect(() => {
     if (router.query) {
@@ -42,6 +44,21 @@ const Dashboard = () => {
     return "";
   }, [router.query.from, rowData]);
 
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== process.env.NEXT_PUBLIC_METABASE_URL) return;
+      const newHeight = event.data?.height;
+      if (newHeight) {
+        setIframeHeight(`${newHeight}px`);
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, []);
+
   return (
     <div>
       {isError ? (
@@ -50,9 +67,10 @@ const Dashboard = () => {
         </p>
       ) : (
         <iframe
+          ref={iframeRef}
           src={metabaseUrl}
           width="100%"
-          height="600px"
+          height={iframeHeight}
           style={{ border: "none" }}
           onError={() => setIsError(true)}
           title="metabase-dashboard"