Merge branch 'main' into feature/TBX-60

animo · Dec 21, 2022 · b2ae313 · b2ae313
2 parents 7089355 + 73a974c
commit b2ae313
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 39 deletions.
diff --git a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
@@ -1,7 +1,7 @@
 import type { ConnectionRecord } from '@aries-framework/core'
 
 import { ConnectionsUtil } from '@animo/toolbox-core/src/utils/records/ConnectionsUtil'
-import { Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
+import { Badge, createStyles, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
 import React from 'react'
 
 import { RecordActions } from '../RecordActions'
@@ -13,18 +13,39 @@ interface ConnectionsTableProps {
   onAccept: (connection: ConnectionRecord) => void
 }
 
+const useStyles = createStyles(() => ({
+  table: {
+    width: '100%',
+    minWidth: 870,
+    tableLayout: 'fixed',
+  },
+  labelSize: {
+    width: 150,
+  },
+  idSize: {
+    width: 200,
+  },
+  stateSize: {
+    width: 100,
+  },
+  actionsSize: {
+    width: 160,
+  },
+}))
+
 export const ConnectionsTable = ({ records, onDelete, onAccept }: ConnectionsTableProps) => {
+  const { classes } = useStyles()
   const theme = useMantineTheme()
 
   return (
     <ScrollArea>
-      <Table verticalSpacing="sm">
+      <Table verticalSpacing="sm" className={classes.table}>
         <thead>
           <tr>
-            <th>Connection</th>
-            <th>Connection Id</th>
-            <th>State</th>
-            <th />
+            <th className={classes.labelSize}>Connection</th>
+            <th className={classes.idSize}>Connection Id</th>
+            <th className={classes.stateSize}>State</th>
+            <th className={classes.actionsSize} />
           </tr>
         </thead>
         <tbody>
@@ -34,8 +55,8 @@ export const ConnectionsTable = ({ records, onDelete, onAccept }: ConnectionsTab
 
             return (
               <tr key={record.id}>
-                <td>
-                  <Group spacing="sm">
+                <td className={classes.labelSize}>
+                  <Group spacing="sm" noWrap>
                     <SmartAvatar size={30} src={record.imageUrl} radius={30}>
                       {record.theirLabel}
                     </SmartAvatar>
@@ -44,15 +65,15 @@ export const ConnectionsTable = ({ records, onDelete, onAccept }: ConnectionsTab
                     </Text>
                   </Group>
                 </td>
-                <td>
+                <td className={classes.idSize}>
                   <Text size="sm" weight={500}>
                     {record.id}
                   </Text>
                 </td>
-                <td>
+                <td className={classes.stateSize}>
                   <Badge variant={theme.colorScheme === 'dark' ? 'light' : 'outline'}>{record.state}</Badge>
                 </td>
-                <td>
+                <td className={classes.actionsSize}>
                   <RecordActions
                     onAccept={isWaitingForAccept ? () => onAccept(record) : undefined}
                     onDelete={() => onDelete(record)}

diff --git a/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx b/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
@@ -2,7 +2,7 @@ import type { ConnectionRecord, CredentialExchangeRecord } from '@aries-framewor
 
 import { formatSchemaName } from '@animo/toolbox-core/src/utils'
 import { CredentialsUtil } from '@animo/toolbox-core/src/utils/records/CredentialsUtil'
-import { Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
+import { Badge, createStyles, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
 import React from 'react'
 
 import { useCredentialsFormatData } from '../../contexts/CredentialFormatDataProvider'
@@ -17,18 +17,36 @@ interface CredentialsTableProps {
   onAccept: (credential: CredentialExchangeRecord) => void
 }
 
+const useStyles = createStyles(() => ({
+  table: {
+    width: '100%',
+    minWidth: 490,
+    tableLayout: 'fixed',
+  },
+  labelSize: {
+    width: 150,
+  },
+  stateSize: {
+    width: 100,
+  },
+  actionsSize: {
+    width: 160,
+  },
+}))
+
 export const CredentialsTable = ({ records, connections, onDelete, onAccept, onDecline }: CredentialsTableProps) => {
+  const { classes } = useStyles()
   const theme = useMantineTheme()
   const { formattedData } = useCredentialsFormatData()
 
   return (
     <ScrollArea>
-      <Table verticalSpacing="sm">
+      <Table verticalSpacing="sm" className={classes.table}>
         <thead>
           <tr>
-            <th>Credential</th>
-            <th>State</th>
-            <th />
+            <th className={classes.labelSize}>Credential</th>
+            <th className={classes.stateSize}>State</th>
+            <th className={classes.actionsSize} />
           </tr>
         </thead>
         <tbody>
@@ -41,8 +59,8 @@ export const CredentialsTable = ({ records, connections, onDelete, onAccept, onD
 
             return (
               <tr key={record.id}>
-                <td>
-                  <Group spacing="sm">
+                <td className={classes.labelSize}>
+                  <Group spacing="sm" noWrap>
                     <SmartAvatar size={30} radius={30} src={connection?.imageUrl}>
                       {connection?.theirLabel}
                     </SmartAvatar>
@@ -51,10 +69,10 @@ export const CredentialsTable = ({ records, connections, onDelete, onAccept, onD
                     </Text>
                   </Group>
                 </td>
-                <td>
+                <td className={classes.stateSize}>
                   <Badge variant={theme.colorScheme === 'dark' ? 'light' : 'outline'}>{record.state}</Badge>
                 </td>
-                <td>
+                <td className={classes.actionsSize}>
                   <RecordActions
                     onAccept={isWaitingForAccept ? () => onAccept(record) : undefined}
                     onDecline={isWaitingForDecline ? () => onDecline(record) : undefined}

diff --git a/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx b/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
@@ -1,7 +1,7 @@
 import type { ConnectionRecord, ProofExchangeRecord } from '@aries-framework/core'
 
 import { ProofsUtil } from '@animo/toolbox-core/src/utils/records/ProofsUtil'
-import { Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
+import { Badge, createStyles, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
 import React from 'react'
 
 import { useProofsFormatData } from '../../contexts/ProofsFormatDataProvider'
@@ -16,19 +16,40 @@ interface ProofsTableProps {
   onDecline: (proof: ProofExchangeRecord) => void
 }
 
+const useStyles = createStyles(() => ({
+  table: {
+    width: '100%',
+    minWidth: 870,
+    tableLayout: 'fixed',
+  },
+  labelSize: {
+    width: 150,
+  },
+  idSize: {
+    width: 200,
+  },
+  stateSize: {
+    width: 100,
+  },
+  actionsSize: {
+    width: 160,
+  },
+}))
+
 export const ProofsTable = ({ records, connections, onDelete, onAccept, onDecline }: ProofsTableProps) => {
+  const { classes } = useStyles()
   const theme = useMantineTheme()
   const { formattedData } = useProofsFormatData()
 
   return (
     <ScrollArea>
-      <Table verticalSpacing="sm">
+      <Table verticalSpacing="sm" className={classes.table}>
         <thead>
           <tr>
-            <th>Connection</th>
-            <th>Proof Id</th>
-            <th>State</th>
-            <th />
+            <th className={classes.labelSize}>Connection</th>
+            <th className={classes.idSize}>Proof Id</th>
+            <th className={classes.stateSize}>State</th>
+            <th className={classes.actionsSize} />
           </tr>
         </thead>
         <tbody>
@@ -43,8 +64,8 @@ export const ProofsTable = ({ records, connections, onDelete, onAccept, onDeclin
 
             return (
               <tr key={record.id}>
-                <td>
-                  <Group spacing="sm">
+                <td className={classes.labelSize}>
+                  <Group spacing="sm" noWrap>
                     <SmartAvatar size={30} radius={30} src={connection?.imageUrl}>
                       {proofName}
                     </SmartAvatar>
@@ -53,23 +74,21 @@ export const ProofsTable = ({ records, connections, onDelete, onAccept, onDeclin
                     </Text>
                   </Group>
                 </td>
-                <td>
+                <td className={classes.idSize}>
                   <Text size="sm" weight={500}>
                     {record.id}
                   </Text>
                 </td>
-                <td>
+                <td className={classes.stateSize}>
                   <Badge variant={theme.colorScheme === 'dark' ? 'light' : 'outline'}>{record.state}</Badge>
                 </td>
-                <td>
-                  <Group spacing={0} position="right">
-                    <RecordActions
-                      onAccept={isWaitingForAccept ? () => onAccept(record) : undefined}
-                      onDecline={isWaitingForDecline ? () => onDecline(record) : undefined}
-                      onDelete={() => onDelete(record)}
-                      isLoading={isLoading}
-                    />
-                  </Group>
+                <td className={classes.actionsSize}>
+                  <RecordActions
+                    onAccept={isWaitingForAccept ? () => onAccept(record) : undefined}
+                    onDecline={isWaitingForDecline ? () => onDecline(record) : undefined}
+                    onDelete={() => onDelete(record)}
+                    isLoading={isLoading}
+                  />
                 </td>
               </tr>
             )