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

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

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,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 (
+    <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}>
+            <div
+              style={
+                isExpanded
+                  ? { display: "block" }
+                  : { height: 0, display: "none" }
+              }
+            >
+              <JsonReadOnly text={jsonString} canCopy isExpandable />
+            </div>
+          </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",
+              "account detail resources Tab"
+            );
+            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-${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",