Add description for network resource

Author: heisbrot

src/modules/networks/resources/NetworkResourceModal.tsx

@@ -17,6 +17,7 @@ import { notify } from "@components/Notification";
 import Paragraph from "@components/Paragraph";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import Separator from "@components/Separator";
+import { Textarea } from "@components/Textarea";
 import { useApiCall } from "@utils/api";
 import {
   ExternalLinkIcon,
@@ -156,6 +157,18 @@ export function ResourceModalContent({
             onChange={(e) => setName(e.target.value)}
           />
         </div>
+        <div>
+          <Label>Description (optional)</Label>
+          <HelpText>
+            Write a short description to add more context to this resource.
+          </HelpText>
+          <Textarea
+            placeholder={"e.g., Production, Development"}
+            value={description}
+            rows={1}
+            onChange={(e) => setDescription(e.target.value)}
+          />
+        </div>
 
         <ResourceSingleAddressInput value={address} onChange={setAddress} />
 

src/modules/networks/resources/ResourceNameCell.tsx

@@ -34,7 +34,7 @@ export default function ResourceNameCell({ resource }: Readonly<Props>) {
       <div
         className={cn(
           "flex flex-col gap-0 text-neutral-300  font-light truncate",
-          "group-hover:text-neutral-100",
+          "group-hover:text-neutral-100 text-left",
         )}
       >
         <TextWithTooltip
@@ -43,6 +43,7 @@ export default function ResourceNameCell({ resource }: Readonly<Props>) {
           className={"font-normal"}
         />
         <DescriptionWithTooltip
+          maxChars={25}
           className={cn("font-normal mt-0.5 ")}
           text={resource.description}
         />

src/modules/networks/resources/ResourcesTable.tsx

@@ -6,6 +6,7 @@ import { DataTableRowsPerPage } from "@components/table/DataTableRowsPerPage";
 import NoResults from "@components/ui/NoResults";
 import { IconCirclePlus } from "@tabler/icons-react";
 import { ColumnDef, SortingState } from "@tanstack/react-table";
+import { removeAllSpaces } from "@utils/helpers";
 import { Layers3Icon } from "lucide-react";
 import * as React from "react";
 import { useState } from "react";
@@ -36,6 +37,12 @@ const NetworkResourceColumns: ColumnDef<NetworkResource>[] = [
       return <ResourceNameCell resource={row.original} />;
     },
   },
+  {
+    id: "description",
+    accessorKey: "description",
+    accessorFn: (resource) =>
+      removeAllSpaces(resource?.description || "").toLowerCase(),
+  },
   {
     id: "address",
     accessorKey: "address",
@@ -122,7 +129,9 @@ export default function ResourcesTable({
           icon={<Layers3Icon size={20} />}
         />
       }
-      columnVisibility={{}}
+      columnVisibility={{
+        description: false,
+      }}
       paginationPaddingClassName={"px-0 pt-8"}
       rightSide={() => (
         <Button