fix(components): add expand collapse all to proposal message accordion

CHANGELOG.md

@@ -60,6 +60,7 @@ 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
 - [#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
 - [#771](https://github.com/alleslabs/celatone-frontend/pull/771) Adjust proposal detail

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;

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]);

src/lib/pages/proposal-details/components/proposal-overview/ProposalMessageCard.tsx

@@ -0,0 +1,60 @@
+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) => (
+  <AccordionItem mb={4}>
+    {({ isExpanded }) => (
+      <>
+        <AccordionButton
+          background="gray.900"
+          borderRadius={8}
+          _hover={{ background: "gray.900" }}
+          onClick={() =>
+            trackUseExpand({
+              action: !isExpanded ? "expand" : "collapse",
+              component: "proposal_message_card",
+              section: "proposal message",
+            })
+          }
+        >
+          <Flex
+            px={4}
+            justifyContent="space-between"
+            w="full"
+            align="center"
+            className="copier-wrapper"
+          >
+            <Flex alignItems="center">
+              <Text variant="body1" fontWeight={600} wordBreak="break-word">
+                {header}
+              </Text>
+            </Flex>
+            <Flex alignItems="center" gap={2}>
+              <AccordionIcon color="gray.600" />
+            </Flex>
+          </Flex>
+        </AccordionButton>
+        <AccordionPanel p={0} pt={4}>
+          <JsonReadOnly text={jsonString} canCopy isExpandable />
+        </AccordionPanel>
+      </>
+    )}
+  </AccordionItem>
+);

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<number[]>([]);
+
+  useEffect(() => {
+    setExpandedIndexes(messages?.length === 1 ? [0] : []);
+  }, [messages]);
 
-export const ProposalMessages = ({ messages }: ProposalMessagesProps) => (
-  <Flex
-    direction="column"
-    gap={4}
-    pt={8}
-    borderTop="1px solid"
-    borderColor="gray.700"
-  >
-    <Heading as="h6" variant="h6">
-      Proposal Messages
-    </Heading>
-    {messages?.length ? (
-      <>
-        {messages.map((item, i) => (
-          <JsonInfo
+  return (
+    <Flex
+      direction="column"
+      gap={4}
+      pt={8}
+      borderTop="1px solid"
+      borderColor="gray.700"
+    >
+      <Flex w="full" alignItems="center" justifyContent="space-between">
+        <Heading as="h6" variant="h6">
+          Proposal Messages
+        </Heading>
+        <Button
+          variant="ghost-primary"
+          minW={{ base: "auto", md: 32 }}
+          size="sm"
+          rightIcon={
+            <CustomIcon
+              name={expandedIndexes.length ? "chevron-up" : "chevron-down"}
+              boxSize={3}
+            />
+          }
+          onClick={() => {
+            trackUseExpandAll(
+              expandedIndexes.length ? "collapse" : "expand",
+              "Proposal Messages"
+            );
+            setExpandedIndexes((prev) =>
+              !prev.length ? Array.from(Array(messages?.length).keys()) : []
+            );
+          }}
+        >
+          {expandedIndexes.length ? "Collapse All" : "Expand All"}
+        </Button>
+      </Flex>
+      <Accordion
+        allowMultiple
+        width="full"
+        variant="transparent"
+        index={expandedIndexes}
+        onChange={(indexes: number[]) => setExpandedIndexes(indexes)}
+      >
+        {messages?.map((item, i) => (
+          <ProposalMessageCard
+            key={`msg-${JSON.stringify(item)}`}
             header={`[${i}] ${item["@type"]}`}
             jsonString={jsonPrettify(JSON.stringify(item))}
-            defaultExpand={messages?.length === 1}
-            key={`msg-${item}`}
           />
         ))}
-      </>
-    ) : (
-      <Text variant="body1" color="text.dark">
-        No Messages
-      </Text>
-    )}
-  </Flex>
-);
+      </Accordion>
+    </Flex>
+  );
+};

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",