Feat: Improve KVStore values and page layout

src/pages/services/data/data-row.tsx

@@ -10,6 +10,7 @@ import {
 } from "@liftedinit/ui";
 import { DeleteKeyDialog } from "./delete-key-dialog";
 import { MarkImmutableDialog } from "./mark-immutable-dialog";
+import { ExpandCode } from "shared";
 
 export function DataRow({
   item,
@@ -29,7 +30,7 @@ export function DataRow({
   return (
     <Tr key={item.key}>
       <Td>{item.key}</Td>
-      <Td>{Buffer.from(item.value).toString()}</Td>
+      <Td><ExpandCode content={Buffer.from(item.value).toString()} /></Td>
       <Td>
         {isEditable ? (
           <Tag colorScheme="green">Modifiable</Tag>

src/pages/services/data/data-table.tsx

@@ -1,4 +1,4 @@
-import { Table, Tbody, Th, Thead, Tr } from "@liftedinit/ui";
+import { Box, Table, Tbody, Th, Thead, Tr } from "@liftedinit/ui";
 import { DataRow } from "./data-row";
 
 export function DataTable({
@@ -13,7 +13,8 @@ export function DataTable({
   setKeyvalue: ({ key, value }: { key: string; value: string }) => void;
 }) {
   return (
-    <Table>
+    <Box bg="white" mt="2" h="85vh" overflowY="auto" boxShadow="base">
+    <Table overflowY="hidden" variant="simple">
       <Thead>
         <Tr>
           <Th>Key</Th>
@@ -36,5 +37,6 @@ export function DataTable({
           ))}
       </Tbody>
     </Table>
+    </Box>
   );
 }

src/shared/expand-code.tsx

@@ -0,0 +1,40 @@
+import { Text, Button, Box  } from "@liftedinit/ui";
+import { useState } from "react";
+
+export function ExpandCode({ content }: any) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleExpanded = () => {
+    setIsExpanded(!isExpanded);
+  }
+
+  const ExpandButton = () => (
+    <Button as="a" variant="link" size="sm" ml={1} onClick={toggleExpanded} color="brand.teal.500">
+      {isExpanded ? "(Collapse)" : "(...)"}
+    </Button>
+  );
+
+  return (
+    <Box bg="white" my={6}>
+      {
+        isExpanded ? (
+          <Text maxW="50em">
+            {content}
+            <ExpandButton />
+          </Text>
+        ) : content.length > 5000 ? (
+          <>
+            <Text maxW="50em">
+              {content.substring(0, 5000)}
+              <ExpandButton />
+            </Text>
+          </>
+        ) : (
+          <Text maxW="50em">
+            {content}
+          </Text>
+        )
+      }
+    </Box>
+  );
+}

src/shared/index.ts

@@ -1 +1,2 @@
 export * from "./helpers";
+export * from "./expand-code";