From ff4b11d7d34c7d79dade18272162d4a487aca401 Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Fri, 9 Feb 2024 16:34:25 +0700 Subject: [PATCH 1/3] fix(components): add expand collapse all to proposal message accordion --- CHANGELOG.md | 2 + .../amplitude/track-event/trackInteraction.ts | 1 + .../resources/ResourceSectionBody.tsx | 1 + .../proposal-overview/ProposalMessageCard.tsx | 70 +++++++++++++++ .../proposal-overview/ProposalMessages.tsx | 88 +++++++++++++------ src/lib/styles/theme/components/accordion.ts | 1 + 6 files changed, 136 insertions(+), 27 deletions(-) create mode 100644 src/lib/pages/proposal-details/components/proposal-overview/ProposalMessageCard.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 0196ba93c..05c2f15bf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -54,6 +54,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Improvements +- [#776](https://github.com/alleslabs/celatone-frontend/pull/776) Add expand/collapse all to proposal messages in detail page +- [#771](https://github.com/alleslabs/celatone-frontend/pull/771) Adjust proposal detail - [#772](https://github.com/alleslabs/celatone-frontend/pull/772) Add zod validator to code details page code id params - [#770](https://github.com/alleslabs/celatone-frontend/pull/770) Add unit test for account store (mobx) - [#769](https://github.com/alleslabs/celatone-frontend/pull/769) Add unit test for format.test.ts on shortenName function diff --git a/src/lib/amplitude/track-event/trackInteraction.ts b/src/lib/amplitude/track-event/trackInteraction.ts index 8c60a76a3..edf65d57c 100644 --- a/src/lib/amplitude/track-event/trackInteraction.ts +++ b/src/lib/amplitude/track-event/trackInteraction.ts @@ -77,6 +77,7 @@ export const trackUseExpand = ({ | "module_interaction_function_accordion" | "module_interaction_selected_function_card" | "pool_tx_msg" + | "proposal_message_card" | "resources_detail_card" | "resources_by_account_card"; info?: object; diff --git a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx index 90ce599c6..324e0cc87 100644 --- a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx +++ b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx @@ -50,6 +50,7 @@ export const ResourceSectionBody = ({ const selectedResource = resourcesByOwner ?.find((resource) => resource.owner === selectedAccountParam) ?.resources?.find((resource) => resource.group === selectedNameParam); + useEffect(() => { setExpandedIndexes(selectedResource?.items.length === 1 ? [0] : []); }, [resourcesByOwner, selectedResource]); diff --git a/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessageCard.tsx b/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessageCard.tsx new file mode 100644 index 000000000..e728b2624 --- /dev/null +++ b/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessageCard.tsx @@ -0,0 +1,70 @@ +import { + AccordionButton, + AccordionIcon, + AccordionItem, + AccordionPanel, + Flex, + Text, +} from "@chakra-ui/react"; + +import { trackUseExpand } from "lib/amplitude"; +import JsonReadOnly from "lib/components/json/JsonReadOnly"; + +interface ProposalMessageCardProps { + header: string; + jsonString: string; +} + +export const ProposalMessageCard = ({ + header, + jsonString, +}: ProposalMessageCardProps) => { + return ( + + {({ isExpanded }) => ( + <> + + trackUseExpand({ + action: !isExpanded ? "expand" : "collapse", + component: "proposal_message_card", + section: "proposal message", + }) + } + > + + + + {header} + + + + + + + + +
+ +
+ + + )} + + ); +}; diff --git a/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessages.tsx b/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessages.tsx index c4dd3e490..06a78fe2a 100644 --- a/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessages.tsx +++ b/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessages.tsx @@ -1,39 +1,73 @@ -import { Flex, Heading, Text } from "@chakra-ui/react"; +import { Accordion, Button, Flex, Heading } from "@chakra-ui/react"; +import { useEffect, useState } from "react"; -import { JsonInfo } from "lib/components/json/JsonInfo"; +import { trackUseExpandAll } from "lib/amplitude"; +import { CustomIcon } from "lib/components/icon"; import type { ProposalData } from "lib/types"; import { jsonPrettify } from "lib/utils"; +import { ProposalMessageCard } from "./ProposalMessageCard"; + interface ProposalMessagesProps { messages: ProposalData["messages"]; } +export const ProposalMessages = ({ messages }: ProposalMessagesProps) => { + const [expandedIndexes, setExpandedIndexes] = useState([]); + + useEffect(() => { + setExpandedIndexes(messages?.length === 1 ? [0] : []); + }, [messages]); -export const ProposalMessages = ({ messages }: ProposalMessagesProps) => ( - - - Proposal Messages - - {messages?.length ? ( - <> - {messages.map((item, i) => ( - + + + Proposal Messages + + + + setExpandedIndexes(indexes)} + > + {messages?.map((item, i) => ( + ))} - - ) : ( - - No Messages - - )} - -); + + + ); +}; diff --git a/src/lib/styles/theme/components/accordion.ts b/src/lib/styles/theme/components/accordion.ts index 7076deb97..58637a6b0 100644 --- a/src/lib/styles/theme/components/accordion.ts +++ b/src/lib/styles/theme/components/accordion.ts @@ -16,6 +16,7 @@ const gray900 = definePartsStyle({ borderRadius: "0px 8px 8px 0px", }, }); + const transparent = definePartsStyle({ container: { bg: "transparent", From 29d512332913618b52d3e07bfefbb8f731ee9967 Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Tue, 13 Feb 2024 13:59:10 +0700 Subject: [PATCH 2/3] feat(components): refactor proposal message card --- .../proposal-overview/ProposalMessageCard.tsx | 86 ++++++++----------- 1 file changed, 38 insertions(+), 48 deletions(-) diff --git a/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessageCard.tsx b/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessageCard.tsx index e728b2624..f104e4aeb 100644 --- a/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessageCard.tsx +++ b/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessageCard.tsx @@ -18,53 +18,43 @@ interface ProposalMessageCardProps { export const ProposalMessageCard = ({ header, jsonString, -}: ProposalMessageCardProps) => { - return ( - - {({ isExpanded }) => ( - <> - - trackUseExpand({ - action: !isExpanded ? "expand" : "collapse", - component: "proposal_message_card", - section: "proposal message", - }) - } +}: ProposalMessageCardProps) => ( + + {({ isExpanded }) => ( + <> + + trackUseExpand({ + action: !isExpanded ? "expand" : "collapse", + component: "proposal_message_card", + section: "proposal message", + }) + } + > + - - - - {header} - - - - - + + + {header} + - - -
- -
- - - )} - - ); -}; + + + + + + + + + + )} + +); From 612aad9ee8a6f73734e5738312797ddf03f28504 Mon Sep 17 00:00:00 2001 From: Jennie Alles Date: Wed, 14 Feb 2024 15:34:13 +0700 Subject: [PATCH 3/3] fix(components): fix proposal msg key --- .../components/proposal-overview/ProposalMessages.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessages.tsx b/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessages.tsx index 06a78fe2a..02aa41c44 100644 --- a/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessages.tsx +++ b/src/lib/pages/proposal-details/components/proposal-overview/ProposalMessages.tsx @@ -43,7 +43,7 @@ export const ProposalMessages = ({ messages }: ProposalMessagesProps) => { onClick={() => { trackUseExpandAll( expandedIndexes.length ? "collapse" : "expand", - "account detail resources Tab" + "Proposal Messages" ); setExpandedIndexes((prev) => !prev.length ? Array.from(Array(messages?.length).keys()) : [] @@ -62,7 +62,7 @@ export const ProposalMessages = ({ messages }: ProposalMessagesProps) => { > {messages?.map((item, i) => (