From ce498beada856174e92a3c567a3beed9ce6e1338 Mon Sep 17 00:00:00 2001
From: LiuLiu <liuliu.developer@gmail.com>
Date: Mon, 2 Dec 2024 16:28:19 -0800
Subject: [PATCH] remotes list ui

---
 .../breadcrumbs/RemotesBreadcrumbs.tsx        | 20 ++++----
 .../breadcrumbs/breadcrumbDetails.tsx         |  5 +-
 .../DatabasePage/ForRemotes/RemotesPage.tsx   | 41 +++++++++++++----
 .../DatabasePage/ForRemotes/Row.tsx           | 22 +++++++++
 .../DatabasePage/ForRemotes/index.module.css  | 46 +++++++++++++++++++
 .../DatabasePage/ForRemotes/index.tsx         |  6 +--
 6 files changed, 114 insertions(+), 26 deletions(-)
 create mode 100644 web/renderer/components/pageComponents/DatabasePage/ForRemotes/Row.tsx
 create mode 100644 web/renderer/components/pageComponents/DatabasePage/ForRemotes/index.module.css

diff --git a/web/renderer/components/breadcrumbs/RemotesBreadcrumbs.tsx b/web/renderer/components/breadcrumbs/RemotesBreadcrumbs.tsx
index 8ae955e3..7d9b032b 100644
--- a/web/renderer/components/breadcrumbs/RemotesBreadcrumbs.tsx
+++ b/web/renderer/components/breadcrumbs/RemotesBreadcrumbs.tsx
@@ -1,4 +1,4 @@
-import { DatabaseParams  } from "@lib/params";
+import { DatabaseParams } from "@lib/params";
 import Breadcrumbs from ".";
 import { remoteBreadcrumbDetails } from "./breadcrumbDetails";
 
@@ -8,12 +8,12 @@ type Props = {
 };
 
 export default function RemotesBreadcrumbs(props: Props) {
-    return (
-        <Breadcrumbs
-          {...props}
-          aria-label="db-remotes-breadcrumbs"
-          data-cy="db-remotes-breadcrumbs"
-          breadcrumbs={remoteBreadcrumbDetails(props.params)}
-        />
-      );
-}
\ No newline at end of file
+  return (
+    <Breadcrumbs
+      {...props}
+      aria-label="db-remotes-breadcrumbs"
+      data-cy="db-remotes-breadcrumbs"
+      breadcrumbs={remoteBreadcrumbDetails(props.params)}
+    />
+  );
+}
diff --git a/web/renderer/components/breadcrumbs/breadcrumbDetails.tsx b/web/renderer/components/breadcrumbs/breadcrumbDetails.tsx
index 8ff42355..8f5260f3 100644
--- a/web/renderer/components/breadcrumbs/breadcrumbDetails.tsx
+++ b/web/renderer/components/breadcrumbs/breadcrumbDetails.tsx
@@ -113,7 +113,9 @@ export function commitLogBreadcrumbDetails(
   ];
 }
 
-export function remoteBreadcrumbDetails(params: DatabaseParams): BreadcrumbDetails[] {
+export function remoteBreadcrumbDetails(
+  params: DatabaseParams,
+): BreadcrumbDetails[] {
   return [
     ...databaseBreadcrumbs(params),
     {
@@ -124,7 +126,6 @@ export function remoteBreadcrumbDetails(params: DatabaseParams): BreadcrumbDetai
   ];
 }
 
-
 export function tableBreadcrumbsDetails(
   params: TableParams,
 ): BreadcrumbDetails[] {
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage.tsx
index 02e892eb..37586c52 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/RemotesPage.tsx
@@ -1,26 +1,47 @@
 import { QueryHandler } from "@dolthub/react-components";
 import { RemoteFragment, useRemoteListQuery } from "@gen/graphql-types";
 import { DatabaseParams } from "@lib/params";
+import css from "./index.module.css";
+import Row from "./Row";
 
 type Props = {
   params: DatabaseParams;
 };
 
 type InnerProps = {
-  remotes : RemoteFragment[];
+  remotes: RemoteFragment[];
 };
 
 function Inner({ remotes }: InnerProps) {
   return (
-    <ul>
-      {remotes.map(remote => (
-        <li key={remote.name}>
-          <span>{remote.name}</span>
-          <span>{remote.url}</span>
-          <span>{remote.fetchSpecs}</span>
-        </li>
-      ))}
-    </ul>
+    <div className={css.container}>
+      <div className={css.top}>
+        <h1>Remotes</h1>
+      </div>
+
+      {remotes.length ? (
+        <div className={css.tableParent}>
+          <table className={css.table}>
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Url</th>
+                <th>Fetch Specs</th>
+              </tr>
+            </thead>
+            <tbody>
+              {remotes.map(r => (
+                <Row key={r._id} remote={r} />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <p className={css.noRemotes} data-cy="remote-list-no-remotes">
+          No remotes found
+        </p>
+      )}
+    </div>
   );
 }
 
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/Row.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/Row.tsx
new file mode 100644
index 00000000..a399b3b9
--- /dev/null
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/Row.tsx
@@ -0,0 +1,22 @@
+import { RemoteFragment } from "@gen/graphql-types";
+
+type Props = {
+  remote: RemoteFragment;
+};
+
+export default function Row({ remote }: Props) {
+  return (
+    <tr>
+      <td>{remote.name}</td>
+      <td>{remote.url}</td>
+      <td>
+        {remote.fetchSpecs.map((fs, i) => (
+          <span key={fs}>
+            {fs}
+            {i < remote.fetchSpecs.length - 1 ? ", " : ""}
+          </span>
+        ))}
+      </td>
+    </tr>
+  );
+}
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/index.module.css b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/index.module.css
new file mode 100644
index 00000000..fd188186
--- /dev/null
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/index.module.css
@@ -0,0 +1,46 @@
+.container {
+  @apply mx-6;
+}
+
+.top {
+  @apply flex justify-between pt-6;
+}
+
+.tableParent {
+  @apply overflow-x-auto;
+}
+
+.table {
+  @apply my-8 min-w-[55rem] w-full;
+
+  tr {
+    @apply border-b-[6px] border-stone-50 relative;
+  }
+
+  th {
+    @apply font-semibold;
+  }
+
+  th,
+  td {
+    @apply pl-2 pr-4 py-2.5 text-left lg:pr-10;
+  }
+
+  td {
+    @apply bg-white text-stone-500;
+  }
+
+  th:first-child,
+  td:first-child {
+    @apply xl:pl-20;
+  }
+
+  th:last-child,
+  td:last-child {
+    @apply xl:pr-32;
+  }
+}
+
+.noRemotes {
+  @apply text-center text-lg m-6;
+}
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/index.tsx b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/index.tsx
index 285b8d20..16ba2bb4 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForRemotes/index.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForRemotes/index.tsx
@@ -17,13 +17,11 @@ export default function ForBranches({ params, newBranch }: Props): JSX.Element {
       initialTabIndex={5}
       params={params}
       hideDefaultTable
-      smallHeaderBreadcrumbs={
-        <RemotesBreadcrumbs params={params} />
-      }
+      smallHeaderBreadcrumbs={<RemotesBreadcrumbs params={params} />}
       routeRefChangeTo={urlParams => branches(urlParams)}
     >
       <NotDoltWrapper showNotDoltMsg feature={feature} bigMsg>
-        <RemotesPage params={params}/>
+        <RemotesPage params={params} />
       </NotDoltWrapper>
     </ForDefaultBranch>
   );