From 5ecc782b3954958df43fa4695ba0fa4fe742a791 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 22 Dec 2022 18:06:45 +0000
Subject: [PATCH] =?UTF-8?q?Disable=20next/prev=20buttons=20so=20the=20layo?=
 =?UTF-8?q?ut=20doesn=E2=80=99t=20jump=20around?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/components/LinkWithDisabled.tsx       | 26 +++++++++
 apps/webapp/app/components/Pagination.tsx     | 56 +++++++++++++------
 .../workflows/$workflowSlug/runs/index.tsx    |  2 -
 3 files changed, 64 insertions(+), 20 deletions(-)
 create mode 100644 apps/webapp/app/components/LinkWithDisabled.tsx

diff --git a/apps/webapp/app/components/LinkWithDisabled.tsx b/apps/webapp/app/components/LinkWithDisabled.tsx
new file mode 100644
index 000000000..cf0ac8093
--- /dev/null
+++ b/apps/webapp/app/components/LinkWithDisabled.tsx
@@ -0,0 +1,26 @@
+import { Link } from "@remix-run/react";
+import classNames from "classnames";
+
+type Props = Parameters<typeof Link>[0] & {
+  disabled?: boolean;
+  disabledClassName?: string;
+};
+
+export function LinkDisabled({
+  disabled = false,
+  disabledClassName,
+  ...props
+}: Props) {
+  if (disabled) {
+    return (
+      <span
+        {...props}
+        className={classNames(props.className, disabledClassName)}
+      >
+        {props.children}
+      </span>
+    );
+  } else {
+    return <Link {...props}>{props.children}</Link>;
+  }
+}
diff --git a/apps/webapp/app/components/Pagination.tsx b/apps/webapp/app/components/Pagination.tsx
index dfe41e27f..3bfcb5dc6 100644
--- a/apps/webapp/app/components/Pagination.tsx
+++ b/apps/webapp/app/components/Pagination.tsx
@@ -6,6 +6,7 @@ import {
 } from "@heroicons/react/24/solid";
 import { Link, useLocation } from "@remix-run/react";
 import classNames from "classnames";
+import { LinkDisabled } from "./LinkWithDisabled";
 
 export function PaginationControls({
   currentPage,
@@ -56,27 +57,29 @@ export function PaginationControls({
             className="isolate inline-flex -space-x-px rounded-md shadow-sm"
             aria-label="Pagination"
           >
-            {currentPage > 1 && (
-              <Link
-                to={pageUrl(location, currentPage - 1)}
-                className="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"
-              >
-                <span className="sr-only">Previous</span>
-                <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
-              </Link>
-            )}
+            <LinkDisabled
+              to={pageUrl(location, currentPage - 1)}
+              disabled={currentPage === 1}
+              className="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"
+              disabledClassName="opacity-30"
+            >
+              <span className="sr-only">Previous</span>
+              <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
+            </LinkDisabled>
+
             {calculatePageLinks(currentPage, totalPages).map((page, i) => (
               <PageLinkComponent page={page} key={i} location={location} />
             ))}
-            {currentPage < totalPages && (
-              <Link
-                to={pageUrl(location, currentPage + 1)}
-                className="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"
-              >
-                <span className="sr-only">Next</span>
-                <ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
-              </Link>
-            )}
+
+            <LinkDisabled
+              to={pageUrl(location, currentPage + 1)}
+              disabled={currentPage === totalPages}
+              className="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"
+              disabledClassName="opacity-30"
+            >
+              <span className="sr-only">Next</span>
+              <ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
+            </LinkDisabled>
           </nav>
         </div>
       </div>
@@ -137,6 +140,23 @@ function PageLinkComponent({
   }
 }
 
+function NextPreviousButton({
+  path,
+  children,
+}: {
+  path: string;
+  children: any;
+}) {
+  return (
+    <Link
+      to={path}
+      className="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"
+    >
+      {children}
+    </Link>
+  );
+}
+
 type PageLink = EllipsisPageLink | SpecificPageLink;
 
 type EllipsisPageLink = {
diff --git a/apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug/runs/index.tsx b/apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug/runs/index.tsx
index 54ed9902b..61fe2086b 100644
--- a/apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug/runs/index.tsx
+++ b/apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug/runs/index.tsx
@@ -48,8 +48,6 @@ export default function Page() {
   const result = useTypedLoaderData<typeof loader>();
   const { runs, total, page, pageCount, pageSize } = result;
 
-  console.log(result);
-
   return (
     <>
       <Header1 className="mb-6">Runs</Header1>