From c81a03d34df2a68827e2f05df6a54336030b250e Mon Sep 17 00:00:00 2001
From: Brad Harris <bmharris@gmail.com>
Date: Wed, 8 Nov 2023 21:39:43 +0000
Subject: [PATCH] wip

---
 .../src/repositories/list/RepoListItem.tsx    | 15 +++--
 .../src/repositories/list/RepositoryList.tsx  | 56 +++++++++++++++----
 2 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/components/dashboard/src/repositories/list/RepoListItem.tsx b/components/dashboard/src/repositories/list/RepoListItem.tsx
index 71daf711e02482..4c81df06a7ef50 100644
--- a/components/dashboard/src/repositories/list/RepoListItem.tsx
+++ b/components/dashboard/src/repositories/list/RepoListItem.tsx
@@ -19,17 +19,24 @@ export const RepositoryListItem: FC<Props> = ({ configuration }) => {
     const url = usePrettyRepoURL(configuration.cloneUrl);
 
     return (
-        <li key={configuration.id} className="flex flex-row w-full space-between items-center">
-            <div className="flex flex-col flex-grow gap-1">
+        <tr key={configuration.id} className="flex flex-row w-full space-between items-center">
+            <td className="">
                 <Text className="font-semibold">{configuration.name}</Text>
+            </td>
+            <td>
                 <TextMuted className="text-sm">{url}</TextMuted>
-            </div>
+            </td>
+            <td>
+                {configuration.creationTime
+                    ?.toDate()
+                    .toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}
+            </td>
 
             <div>
                 <Link to={`/repositories/${configuration.id}`}>
                     <Button type="secondary">View</Button>
                 </Link>
             </div>
-        </li>
+        </tr>
     );
 };
diff --git a/components/dashboard/src/repositories/list/RepositoryList.tsx b/components/dashboard/src/repositories/list/RepositoryList.tsx
index 11b3436c7b87b9..98a025448868fc 100644
--- a/components/dashboard/src/repositories/list/RepositoryList.tsx
+++ b/components/dashboard/src/repositories/list/RepositoryList.tsx
@@ -15,13 +15,23 @@ import { RepositoryListItem } from "./RepoListItem";
 import { useListConfigurations } from "../../data/configurations/configuration-queries";
 import { useStateWithDebounce } from "../../hooks/use-state-with-debounce";
 import { TextInput } from "../../components/forms/TextInputField";
+import Pagination from "../../Pagination/Pagination";
 
 const RepositoryListPage: FC = () => {
     const history = useHistory();
+
+    // TODO: Consider pushing this state into query params
+    const [currentPage, setCurrentPage] = useState(1);
     const [searchTerm, setSearchTerm, debouncedSearchTerm] = useStateWithDebounce("");
-    const { data, isLoading } = useListConfigurations({ searchTerm: debouncedSearchTerm, page: 0, pageSize: 10 });
+
+    const pageSize = 10;
+
+    const { data, isLoading } = useListConfigurations({ searchTerm: debouncedSearchTerm, page: currentPage, pageSize });
     const [showCreateProjectModal, setShowCreateProjectModal] = useState(false);
 
+    // TODO: add this to response payload for pagination
+    const totalPages = data?.pagination?.total ?? 0 / pageSize;
+
     const handleProjectCreated = useCallback(
         (project: Project) => {
             history.push(`/repositories/${project.id}`);
@@ -31,25 +41,49 @@ const RepositoryListPage: FC = () => {
 
     return (
         <>
-            <Header title="Repositories" subtitle="" />
-
             <div className="app-container">
-                <div className="py-4 text-right">
-                    <Button onClick={() => setShowCreateProjectModal(true)}>Configure Repository</Button>
+                {/* TODO: Consider updating Header to have an action button prop */}
+                <div className="flex flex-row justify-between">
+                    <Header
+                        title="Repository Configuration"
+                        subtitle="Configure and refine the experience of working with a repository in Gitpod"
+                    />
+                    <Button onClick={() => setShowCreateProjectModal(true)}>Import Repository</Button>
                 </div>
 
-                <div>
-                    <TextInput value={searchTerm} onChange={setSearchTerm} placeholder="Search repositories" />
+                {/* Search/Filter bar */}
+                <div className="flex flex-row justify-between">
+                    <div>
+                        <TextInput
+                            value={searchTerm}
+                            onChange={setSearchTerm}
+                            placeholder="Search imported repositories"
+                        />
+                        {/* TODO: Add prebuild status filter dropdown */}
+                    </div>
+                    <div>{/* TODO: Add copy explaining what records we're showing & total records count */}</div>
                 </div>
 
                 {isLoading && <Loader2 className="animate-spin" />}
 
-                <ul className="space-y-2 mt-8">
-                    {!isLoading &&
-                        data?.configurations.map((configuration) => (
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Repository URL</th>
+                            <th>Created</th>
+                            <th>Prebuilds</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {data?.configurations.map((configuration) => (
                             <RepositoryListItem key={configuration.id} configuration={configuration} />
                         ))}
-                </ul>
+                    </tbody>
+                </table>
+
+                {/* TODO: Refactor Pagination into podkit or to use podkit components internally */}
+                <Pagination currentPage={currentPage} setPage={setCurrentPage} totalNumberOfPages={totalPages} />
             </div>
 
             {showCreateProjectModal && (