Merge pull request #784 from alleslabs/fix/cfe-320-proposal-list-open…

…-new-tab fix(components): make proposal list row open new tab when use cmd or …
alleslabs · Feb 15, 2024 · 867645f · 867645f
2 parents 914b81b + b38e16c
commit 867645f
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 67 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -60,6 +60,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#784](https://github.com/alleslabs/celatone-frontend/pull/784) Make proposal list row clickable with command/ctrl
 - [#776](https://github.com/alleslabs/celatone-frontend/pull/776) Add expand/collapse all to proposal messages in detail page
 - [#781](https://github.com/alleslabs/celatone-frontend/pull/781) Tooltip default shouldWrap
 - [#774](https://github.com/alleslabs/celatone-frontend/pull/774) Add relevant contract to cosmwasm pool

diff --git a/src/lib/components/table/proposals/ProposalsTableRow.tsx b/src/lib/components/table/proposals/ProposalsTableRow.tsx
@@ -2,7 +2,7 @@ import type { DividerProps, GridProps } from "@chakra-ui/react";
 import { Grid } from "@chakra-ui/react";
 
 import { TableRow, TableRowFreeze } from "../tableComponents";
-import { useInternalNavigate } from "lib/app-provider";
+import { AppLink } from "lib/components/AppLink";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { StopPropagationBox } from "lib/components/StopPropagationBox";
 import type { Proposal } from "lib/types";
@@ -25,81 +25,74 @@ export const ProposalsTableRow = ({
   templateColumns,
   boxShadow,
 }: ProposalsTableRowProps) => {
-  const navigate = useInternalNavigate();
-
-  const onRowSelect = (proposalId: number) =>
-    navigate({
-      pathname: "/proposals/[proposalId]",
-      query: { proposalId },
-    });
-
   // TODO - Revisit split columnsWidth
   const columnsWidth = templateColumns?.toString().split(" ");
   const isDepositOrVoting =
     proposal.status === ProposalStatus.DEPOSIT_PERIOD ||
     proposal.status === ProposalStatus.VOTING_PERIOD;
   return (
-    <Grid
-      templateColumns={templateColumns}
-      minW="min-content"
-      cursor="pointer"
-      _hover={{
-        "> div": {
-          bgColor:
-            proposal.isExpedited && isDepositOrVoting
-              ? "primary.background"
-              : "gray.900",
-        },
-      }}
-      onClick={() => onRowSelect(proposal.id)}
-    >
-      <TableRowFreeze left="0">
-        <ExplorerLink
-          type="proposal_id"
-          value={proposal.id.toString()}
-          showCopyOnHover
-          ampCopierSection="proposal-list"
-        />
-      </TableRowFreeze>
-      <TableRowFreeze
-        left={columnsWidth && columnsWidth[0]}
-        boxShadow={boxShadow}
-        color="gray.800"
+    <AppLink href={`/proposals/${proposal.id}`}>
+      <Grid
+        templateColumns={templateColumns}
+        minW="min-content"
+        cursor="pointer"
+        _hover={{
+          "> div": {
+            bgColor:
+              proposal.isExpedited && isDepositOrVoting
+                ? "primary.background"
+                : "gray.900",
+          },
+        }}
       >
-        <ProposalTextCell
-          title={proposal.title}
-          types={proposal.types}
-          isExpedited={proposal.isExpedited}
-          isDepositOrVoting={isDepositOrVoting}
-        />
-      </TableRowFreeze>
-      <TableRow justifyContent="center">
-        <StopPropagationBox>
-          <StatusChip status={proposal.status} />
-        </StopPropagationBox>
-      </TableRow>
-      <TableRow>
-        <VotingEndTime
-          votingEndTime={proposal.votingEndTime}
-          depositEndTime={proposal.depositEndTime}
-          status={proposal.status}
-        />
-      </TableRow>
-      <TableRow>
-        <StopPropagationBox>
-          <ResolvedHeight
-            resolvedHeight={proposal.resolvedHeight}
+        <TableRowFreeze left="0">
+          <ExplorerLink
+            type="proposal_id"
+            value={proposal.id.toString()}
+            showCopyOnHover
+            ampCopierSection="proposal-list"
+          />
+        </TableRowFreeze>
+        <TableRowFreeze
+          left={columnsWidth && columnsWidth[0]}
+          boxShadow={boxShadow}
+          color="gray.800"
+        >
+          <ProposalTextCell
+            title={proposal.title}
+            types={proposal.types}
+            isExpedited={proposal.isExpedited}
             isDepositOrVoting={isDepositOrVoting}
+          />
+        </TableRowFreeze>
+        <TableRow justifyContent="center">
+          <StopPropagationBox>
+            <StatusChip status={proposal.status} />
+          </StopPropagationBox>
+        </TableRow>
+        <TableRow>
+          <VotingEndTime
+            votingEndTime={proposal.votingEndTime}
+            depositEndTime={proposal.depositEndTime}
+            status={proposal.status}
+          />
+        </TableRow>
+        <TableRow>
+          <StopPropagationBox>
+            <ResolvedHeight
+              resolvedHeight={proposal.resolvedHeight}
+              isDepositOrVoting={isDepositOrVoting}
+              amptrackSection="proposal-list"
+            />
+          </StopPropagationBox>
+        </TableRow>
+        <TableRow>
+          <Proposer
+            proposer={proposal.proposer}
             amptrackSection="proposal-list"
           />
-        </StopPropagationBox>
-      </TableRow>
-      <TableRow>
-        <Proposer
-          proposer={proposal.proposer}
-          amptrackSection="proposal-list"
-        />
-      </TableRow>
-    </Grid>
+        </TableRow>
+      </Grid>
+    </AppLink>
   );
 };