Fix/cfe 29 add search resource

CHANGELOG.md

@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#645](https://github.com/alleslabs/celatone-frontend/pull/645) Add search for resource in account detail
 - [#634](https://github.com/alleslabs/celatone-frontend/pull/634) api v1 - move pool info
 - [#640](https://github.com/alleslabs/celatone-frontend/pull/640) api v1 - recent blocks list
 - [#632](https://github.com/alleslabs/celatone-frontend/pull/632) api v1 - assets info

src/lib/components/resource/ResourceDetailCard.tsx

@@ -91,8 +91,17 @@ export const ResourceDetailCard = ({
       >
         <Flex direction="column" gap={3}>
           {formattedArray.map((item) => (
-            <Flex key={item.key} gap={4}>
-              <Text variant="body2" color="text.dark" minW={40}>
+            <Flex
+              key={item.key}
+              gap={{ base: 1, md: 4 }}
+              direction={{ base: "column", md: "row" }}
+            >
+              <Text
+                variant="body2"
+                color="text.dark"
+                fontWeight="600"
+                minW={40}
+              >
                 {item.key}
               </Text>
               {typeof item.value === "object" ? (

src/lib/components/state/EmptyState.tsx

@@ -27,29 +27,31 @@ export const EmptyState = ({
   textVariant = "body1",
 }: EmptyStateProps) => (
   <Flex
+    alignItems="center"
+    flexDir="column"
+    gap={4}
+    width="full"
     py={py}
     my={my}
     direction="column"
     borderY={withBorder ? "1px solid" : undefined}
     borderColor="gray.700"
   >
-    <Flex alignItems="center" flexDir="column" gap={4} width="full">
-      {imageVariant && (
-        <StateImage imageVariant={imageVariant} imageWidth={imageWidth} />
-      )}
-      {heading && (
-        <Heading as="h5" variant="h5">
-          {heading}
-        </Heading>
-      )}
-      <Text
-        color="text.dark"
-        textAlign="center"
-        whiteSpace="pre-wrap"
-        variant={textVariant}
-      >
-        {message}
-      </Text>
-    </Flex>
+    {imageVariant && (
+      <StateImage imageVariant={imageVariant} imageWidth={imageWidth} />
+    )}
+    {heading && (
+      <Heading as="h5" variant="h5">
+        {heading}
+      </Heading>
+    )}
+    <Text
+      color="text.dark"
+      textAlign="center"
+      whiteSpace="pre-wrap"
+      variant={textVariant}
+    >
+      {message}
+    </Text>
   </Flex>
 );

src/lib/components/table/MobileTitle.tsx

@@ -9,6 +9,7 @@ interface MobileTitleProps {
   title: string;
   count: Option<number>;
   onViewMore?: () => void;
+  showCount?: boolean;
 }
 const cardProps = {
   width: "100%",
@@ -17,14 +18,19 @@ const cardProps = {
   borderRadius: "8px",
 };
 
-export const MobileTitle = ({ onViewMore, title, count }: MobileTitleProps) => (
+export const MobileTitle = ({
+  onViewMore,
+  title,
+  count,
+  showCount = true,
+}: MobileTitleProps) => (
   <Flex
     style={cardProps}
     onClick={!count ? undefined : onViewMore}
     opacity={!count ? 0.5 : 1}
     bg="gray.900"
   >
-    <TableTitle title={title} count={count} mb={0} />
+    <TableTitle title={title} count={count} mb={0} showCount={showCount} />
     <CustomIcon name="chevron-right" color="gray.600" />
   </Flex>
 );

src/lib/components/table/TableTitle.tsx

@@ -7,23 +7,27 @@ interface TableTitleProps extends BoxProps {
   title: string;
   count: Option<number>;
   helperText?: string;
+  showCount?: boolean;
 }
 
 export const TableTitle = ({
   title,
   count,
   helperText,
   mb = 6,
+  showCount = true,
   ...props
 }: TableTitleProps) => (
   <Box mb={mb} {...props}>
     <Flex gap={2} h="29px" alignItems="center">
       <Heading as="h6" variant="h6">
         {title}
       </Heading>
-      <Badge textColor={count ? "text.main" : "text.disabled"}>
-        {count ?? "N/A"}
-      </Badge>
+      {showCount && (
+        <Badge textColor={count ? "text.main" : "text.disabled"}>
+          {count ?? "N/A"}
+        </Badge>
+      )}
     </Flex>
     <Text variant="body2" textColor="text.dark" fontWeight={600}>
       {helperText}

src/lib/pages/account-details/components/ErrorFetching.tsx

@@ -1,8 +1,10 @@
+import { Flex } from "@chakra-ui/react";
+
 import { CustomIcon } from "lib/components/icon";
 
 export const ErrorFetching = () => (
-  <>
+  <Flex>
     <CustomIcon name="alert-circle-solid" color="gray.600" boxSize={4} mr={3} />
     <p>Error fetching data. Please try again later.</p>
-  </>
+  </Flex>
 );

src/lib/pages/account-details/components/modules/ModuleLists.tsx

@@ -28,7 +28,7 @@ export const ModuleLists = ({
   const isMobile = useMobile();
   const isMobileOverview = isMobile && !!onViewMore;
   return (
-    <Box mt={{ base: 4, md: 8 }}>
+    <Box mt={{ base: 4, md: 16 }}>
       {isMobileOverview ? (
         <MobileTitle
           title="Modules"

src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx

@@ -0,0 +1,156 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Flex,
+  Text,
+} from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { useCallback, useMemo, useState } from "react";
+
+import { useInternalNavigate } from "lib/app-provider";
+import InputWithIcon from "lib/components/InputWithIcon";
+import { ResourceCard } from "lib/components/resource";
+import type {
+  HumanAddr,
+  ResourceGroup,
+  ResourceGroupByAccount,
+} from "lib/types";
+import { getFirstQueryParam, truncate } from "lib/utils";
+
+interface ResourceSectionBodyProps {
+  address: HumanAddr;
+  resourcesByOwner: ResourceGroupByAccount[];
+}
+
+export const ResourceLeftPanel = ({
+  address,
+  resourcesByOwner,
+}: ResourceSectionBodyProps) => {
+  const router = useRouter();
+  const navigate = useInternalNavigate();
+  const [keyword, setKeyword] = useState("");
+
+  const selectedAccountParam = getFirstQueryParam(
+    router.query.account,
+    resourcesByOwner?.[0]?.owner
+  );
+  const selectedNameParam = getFirstQueryParam(
+    router.query.selected,
+    resourcesByOwner?.[0]?.resources[0]?.group
+  );
+
+  const handleSelectResource = useCallback(
+    (
+      account: ResourceGroupByAccount["owner"],
+      resource: ResourceGroup["group"]
+    ) => {
+      if (account === selectedAccountParam && resource === selectedNameParam)
+        return;
+      navigate({
+        pathname: `/accounts/[accountAddress]/[tab]`,
+        query: {
+          accountAddress: address,
+          tab: "resources",
+          account,
+          selected: resource,
+        },
+        replace: true,
+        options: {
+          shallow: true,
+        },
+      });
+    },
+    [selectedNameParam, selectedAccountParam, address, navigate]
+  );
+
+  const filteredResourcesByOwner = useMemo(() => {
+    if (!keyword) return resourcesByOwner;
+
+    return resourcesByOwner?.map((each) => ({
+      ...each,
+      resources: each.resources.filter((resource) =>
+        resource.group
+          .toLowerCase()
+          .includes(keyword.trim().toLocaleLowerCase())
+      ),
+    }));
+  }, [keyword, resourcesByOwner]);
+
+  const selectedIndex = filteredResourcesByOwner.findIndex(
+    (item) => item.owner === selectedAccountParam
+  );
+  const selectedGroup = filteredResourcesByOwner[selectedIndex];
+  const selectedResources = selectedGroup?.resources.find(
+    (item) => item.group === selectedNameParam
+  );
+
+  return (
+    <Flex
+      minW={{ base: "full", md: 80 }}
+      direction="column"
+      pb={{ base: 4, md: 0 }}
+      mb={{ base: 4, md: 0 }}
+      borderBottom={{ base: "1px solid", md: "none" }}
+      borderColor={{ base: "gray.700", md: "transparent" }}
+    >
+      <InputWithIcon
+        placeholder="Search with module name..."
+        value={keyword}
+        onChange={(e) => setKeyword(e.target.value)}
+        action="execute-message-search"
+      />
+      <Accordion
+        allowMultiple
+        defaultIndex={[selectedIndex]}
+        width="full"
+        mt={4}
+      >
+        {filteredResourcesByOwner.map((item) => (
+          <AccordionItem mb={4} key={item.owner}>
+            <AccordionButton>
+              <Flex p={4} justifyContent="space-between" w="full">
+                <Text variant="body1" fontWeight={600}>
+                  {truncate(item.owner)}
+                </Text>
+                <AccordionIcon color="gray.600" />
+              </Flex>
+            </AccordionButton>
+            <AccordionPanel>
+              {item.resources.length ? (
+                <Flex direction="column" gap={3}>
+                  {Object.values(item.resources).map((subitem) => (
+                    <ResourceCard
+                      key={subitem.displayName}
+                      name={subitem.group}
+                      amount={subitem.items.length}
+                      isSelected={selectedResources?.group === subitem.group}
+                      onClick={() =>
+                        handleSelectResource(item.owner, subitem.group)
+                      }
+                      hasBorder
+                    />
+                  ))}
+                </Flex>
+              ) : (
+                <Text
+                  variant="body2"
+                  color="text.dark"
+                  textAlign="center"
+                  p={4}
+                  border="1px solid"
+                  borderRadius="8px"
+                  borderColor="gray.700"
+                >
+                  No matching resource found
+                </Text>
+              )}
+            </AccordionPanel>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </Flex>
+  );
+};

src/lib/pages/account-details/components/resources/ResourceOverview.tsx

@@ -30,13 +30,15 @@ export const ResourceOverview = ({
           title="Resources"
           count={totalCount}
           onViewMore={onViewMore}
+          showCount={false}
         />
       ) : (
         <>
           <TableTitle
             title="Resources"
             helperText="Resources stored in this account"
-            count={totalCount}
+            count={undefined}
+            showCount={false}
           />
           <ResourceOverviewBody
             address={address}

src/lib/pages/account-details/components/resources/ResourceSection.tsx

@@ -20,13 +20,10 @@ export const ResourceSection = ({
     <TableTitle
       helperText="Resources stored in this account"
       title="Resources"
-      count={resourcesByOwner?.length}
+      count={undefined}
+      showCount={false}
     />
-    <Flex
-      gap={6}
-      flexDirection={{ base: "column", md: "row" }}
-      position="relative"
-    >
+    <Flex gap={6} flexDirection={{ base: "column", md: "row" }}>
       <ResourceSectionBody
         address={address}
         resourcesByOwner={resourcesByOwner}