From 231b8b40d6e12d3a7fef1cda95f7601a2d73d821 Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Wed, 6 Jan 2021 09:17:54 -0700
Subject: [PATCH] DatabasesContainer: add more fields to table

---
 .../api/admin/databases/getDatabases.ts        |  4 ++++
 .../admin/databases/DatabasesContainer.tsx     | 18 ++++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/resources/scripts/api/admin/databases/getDatabases.ts b/resources/scripts/api/admin/databases/getDatabases.ts
index 4f88a30e0..08ada8d95 100644
--- a/resources/scripts/api/admin/databases/getDatabases.ts
+++ b/resources/scripts/api/admin/databases/getDatabases.ts
@@ -11,6 +11,8 @@ export interface Database {
     maxDatabases: number;
     createdAt: Date;
     updatedAt: Date;
+
+    getAddress (): string;
 }
 
 export const rawDataToDatabase = ({ attributes }: FractalResponseData): Database => ({
@@ -22,6 +24,8 @@ export const rawDataToDatabase = ({ attributes }: FractalResponseData): Database
     maxDatabases: attributes.max_databases,
     createdAt: new Date(attributes.created_at),
     updatedAt: new Date(attributes.updated_at),
+
+    getAddress: () => `${attributes.host}:${attributes.port}`,
 });
 
 interface ctx {
diff --git a/resources/scripts/components/admin/databases/DatabasesContainer.tsx b/resources/scripts/components/admin/databases/DatabasesContainer.tsx
index 605b4205f..8df94fab7 100644
--- a/resources/scripts/components/admin/databases/DatabasesContainer.tsx
+++ b/resources/scripts/components/admin/databases/DatabasesContainer.tsx
@@ -1,3 +1,4 @@
+import CopyOnClick from '@/components/elements/CopyOnClick';
 import React, { useContext, useEffect, useState } from 'react';
 import getDatabases, { Context as DatabasesContext } from '@/api/admin/databases/getDatabases';
 import FlashMessageRender from '@/components/FlashMessageRender';
@@ -92,6 +93,7 @@ const DatabasesContainer = () => {
                                             <TableHeader name={'ID'}/>
                                             <TableHeader name={'Name'}/>
                                             <TableHeader name={'Address'}/>
+                                            <TableHeader name={'Username'}/>
                                         </TableHead>
 
                                         <TableBody>
@@ -102,13 +104,25 @@ const DatabasesContainer = () => {
                                                             <RowCheckbox id={database.id}/>
                                                         </td>
 
-                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{database.id}</td>
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                            <CopyOnClick text={database.id.toString()}>
+                                                                <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{database.id}</code>
+                                                            </CopyOnClick>
+                                                        </td>
+
                                                         <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
                                                             <NavLink to={`${match.url}/${database.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
                                                                 {database.name}
                                                             </NavLink>
                                                         </td>
-                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{database.host}:{database.port}</td>
+
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                            <CopyOnClick text={database.getAddress()}>
+                                                                <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{database.getAddress()}</code>
+                                                            </CopyOnClick>
+                                                        </td>
+
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{database.username}</td>
                                                     </TableRow>
                                                 ))
                                             }