Feature/distribution details

src/components/AppDataGrid.tsx

@@ -42,6 +42,7 @@ export const AppDataGrid: FC<Props> = ({
     pagination: true,
     rows: rows,
     columns: columns,
+    disableSelectionOnClick: true,
     paginationMode: "server",
     components: {
       Pagination: () =>
@@ -52,7 +53,6 @@ export const AppDataGrid: FC<Props> = ({
         }),
     },
     loading: queryResult.isFetching,
-    disableSelectionOnClick: true,
     sortingMode: "server",
     sortModel: ordering
       ? [
@@ -74,8 +74,9 @@ export const AppDataGrid: FC<Props> = ({
   };
 
   const finalDataGridProps = _.merge(defaultDataGridProps, dataGridProps);
-
-  return <DataGrid {...finalDataGridProps} />;
+  //Prevents bug that appears when a table is rendered with Dialogue through parant table:
+  //Docs: https://github.com/mui/mui-x/issues/7943
+  return <DataGrid {...finalDataGridProps} onCellClick={(row, e) => e.stopPropagation()}/>;
 };
 
 interface PaginationProps {

src/components/DistributionDetails.tsx

@@ -0,0 +1,24 @@
+import { FC, ReactNode, useState } from "react";
+import { DistributionsPageContent } from "../pages/[_network]/distributions/[_id]";
+import { Network } from "../redux/networks";
+import DetailsDialog from "./DetailsDialog";
+
+export const DistributionDetailsDialog: FC<{
+  distributionId: string;
+  network: Network;
+  children: (onClick: () => void) => ReactNode;
+}> = ({ children, ...props }) => {
+  const [open, setOpen] = useState(false);
+
+  const handleClickOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <>
+      {children(handleClickOpen)}
+      <DetailsDialog open={open} handleClose={handleClose}>
+        <DistributionsPageContent {...props} />
+      </DetailsDialog>
+    </>
+  );
+};

src/components/IndexUpdatedEventDataGrid.tsx

@@ -5,12 +5,14 @@ import {
   IndexUpdatedEvent_OrderBy,
   Ordering,
   PagedResult,
-  SkipPaging,
+  SkipPaging
 } from "@superfluid-finance/sdk-core";
 import { BigNumber } from "ethers";
 import { FC, useMemo } from "react";
 import { useNetworkContext } from "../contexts/NetworkContext";
 import { AppDataGrid } from "./AppDataGrid";
+import DetailsButton from "./DetailsButton";
+import { DistributionDetailsDialog } from "./DistributionDetails";
 import EtherFormatted from "./EtherFormatted";
 import SuperTokenAddress from "./SuperTokenAddress";
 import TimeAgo from "./TimeAgo";
@@ -52,7 +54,6 @@ const IndexUpdatedEventDataGrid: FC<Props> = ({
   setOrdering,
 }) => {
   const network = useNetworkContext();
-
   const columns: GridColDef[] = useMemo(
     () => [
       { field: "id", hide: true, sortable: false, flex: 1 },
@@ -86,6 +87,22 @@ const IndexUpdatedEventDataGrid: FC<Props> = ({
           );
         },
       },
+      {
+        field: "details",
+        headerName: "Details",
+        flex: 0.5,
+        sortable: false,
+        renderCell: (params) => {
+          return (
+            <DistributionDetailsDialog
+              network={network}
+              distributionId={params.row.id}
+            >
+              {(onClick) => <DetailsButton onClick={onClick} />}
+            </DistributionDetailsDialog>
+          );
+        },
+      },
     ],
     [index, network]
   );

src/components/Tables/Account/AccountPublishedIndexesTable.tsx

@@ -1,4 +1,3 @@
-import CloseIcon from "@mui/icons-material/Close";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import {
   Box,
@@ -19,13 +18,13 @@ import {
   ToggleButtonGroup,
   Toolbar,
   Tooltip,
-  Typography,
+  Typography
 } from "@mui/material";
 import {
   createSkipPaging,
   Index_Filter,
   Index_OrderBy,
-  Ordering,
+  Ordering
 } from "@superfluid-finance/sdk-core";
 import { IndexesQuery } from "@superfluid-finance/sdk-redux";
 import omit from "lodash/fp/omit";
@@ -68,6 +67,7 @@ interface AccountPublishedIndexesTableProps {
   accountAddress: string;
 }
 
+// This is where we are getting a query ID
 type RequiredIndexesQuery = Required<Omit<IndexesQuery, "block">>;
 
 const AccountPublishedIndexesTable: FC<AccountPublishedIndexesTableProps> = ({
@@ -302,7 +302,11 @@ const AccountPublishedIndexesTable: FC<AccountPublishedIndexesTableProps> = ({
         </Stack>
 
         <Tooltip disableFocusListener title="Filter">
-          <IconButton data-cy={"publications-filter"} ref={filterAnchorRef} onClick={openFilter}>
+          <IconButton
+            data-cy={"publications-filter"}
+            ref={filterAnchorRef}
+            onClick={openFilter}
+          >
             <FilterListIcon />
           </IconButton>
         </Tooltip>
@@ -354,10 +358,16 @@ const AccountPublishedIndexesTable: FC<AccountPublishedIndexesTableProps> = ({
                 value={distributionStatus}
                 onChange={onDistributionStatusChange}
               >
-                <ToggleButton data-cy={"filter-distributed-yes"} value={DistributionStatus.Distributed}>
+                <ToggleButton
+                  data-cy={"filter-distributed-yes"}
+                  value={DistributionStatus.Distributed}
+                >
                   Yes
                 </ToggleButton>
-                <ToggleButton data-cy={"filter-distributed-no"} value={DistributionStatus.NotDistributed}>
+                <ToggleButton
+                  data-cy={"filter-distributed-no"}
+                  value={DistributionStatus.NotDistributed}
+                >
                   No
                 </ToggleButton>
               </ToggleButtonGroup>
@@ -375,16 +385,30 @@ const AccountPublishedIndexesTable: FC<AccountPublishedIndexesTableProps> = ({
                 value={unitsStatus}
                 onChange={onUnitsStatusChange}
               >
-                <ToggleButton data-cy={"filter-issued-yes"} value={UnitsStatus.Issued}>Yes</ToggleButton>
-                <ToggleButton data-cy={"filter-issued-no"} value={UnitsStatus.NotIssued}>No</ToggleButton>
+                <ToggleButton
+                  data-cy={"filter-issued-yes"}
+                  value={UnitsStatus.Issued}
+                >
+                  Yes
+                </ToggleButton>
+                <ToggleButton
+                  data-cy={"filter-issued-no"}
+                  value={UnitsStatus.NotIssued}
+                >
+                  No
+                </ToggleButton>
               </ToggleButtonGroup>
             </Box>
 
             <Stack direction="row" justifyContent="flex-end" spacing={1}>
               {(filter.indexId ||
                 distributionStatus !== null ||
                 unitsStatus !== null) && (
-                <Button data-cy={"reset-filter"} onClick={resetFilter} tabIndex={-1}>
+                <Button
+                  data-cy={"reset-filter"}
+                  onClick={resetFilter}
+                  tabIndex={-1}
+                >
                   Reset
                 </Button>
               )}