feat(ui): some ui improvements (#300)

* feat(ui): lint * fix(pagination): correctly handle limit change at end of pagination * feat(ui): add frontend pagination to logs page * fix(ui): buttons were not properly disabled * feat(ui): improve pagination labeling * feat(ui): pagination on layer table view
padok-team · Jun 14, 2024 · 60d1f58 · 60d1f58
1 parent 2a2a6cd
commit 60d1f58
Show file tree

Hide file tree

Showing 3 changed files with 242 additions and 65 deletions.
diff --git a/ui/src/components/core/Button.tsx b/ui/src/components/core/Button.tsx
@@ -53,7 +53,7 @@ const Button: React.FC<ButtonProps> = ({
           focus-visible:outline-nuances-white
           fill-nuances-black`,
 
-        tertiary: `bg-nuances-white
+        tertiary: `
           text-primary-600
           underline
           hover:text-primary-400
@@ -67,16 +67,25 @@ const Button: React.FC<ButtonProps> = ({
       disabled: {
         primary: `bg-nuances-50
           text-nuances-300
-          fill-nuances-300`,
+          fill-nuances-300
+          active: bg-nuances-50
+          hover:bg-nuances-50
+          `,
 
         secondary: `bg-nuances-50
           text-nuances-300
-          fill-nuances-300`,
+          fill-nuances-300
+          active: bg-nuances-50
+          hover:bg-nuances-50`,
 
-        tertiary: `bg-nuances-white
-          text-nuances-300
+        tertiary: `
           underline
-          fill-nuances-300`,
+          text-nuances-200
+          fill-nuances-200
+          active:text-nuances-200
+          active:fill-nuances-200
+          hover:text-nuances-200
+          hover:fill-nuances-200`,
       },
     },
     dark: {
@@ -117,18 +126,26 @@ const Button: React.FC<ButtonProps> = ({
       disabled: {
         primary: `bg-nuances-50
           text-nuances-300
-          fill-nuances-300`,
+          fill-nuances-300
+          hover:bg-nuances-50
+          active:bg-nuances-50`,
 
         secondary: `bg-nuances-50
           text-nuances-300
-          fill-nuances-300`,
+          fill-nuances-300
+          hover:bg-nuances-50
+          active:bg-nuances-50`,
 
         tertiary: `bg-nuances-black
-          text-nuances-300
           underline
-          fill-nuances-300`,
+          text-nuances-300
+          fill-nuances-300
+          hover:text-nuances-300
+          hover:fill-nuances-300
+          active:text-nuances-300
+          active:fill-nuances-300`,
       },
-    }
+    },
   };
 
   return (
@@ -137,8 +154,8 @@ const Button: React.FC<ButtonProps> = ({
         `relative
         px-4
         py-2
-        rounded-md
-        ${styles[theme].base[variant]}`,
+        rounded-md`,
+        styles[theme].base[variant],
         disabled && styles[theme].disabled[variant],
         className
       )}
@@ -171,7 +188,9 @@ const Button: React.FC<ButtonProps> = ({
           <span className={`${isLoading && "invisible"}`}>{rightIcon}</span>
         )}
         {label && (
-          <span className={`font-semibold text-base ${isLoading && "invisible"}`}>
+          <span
+            className={`font-semibold text-base ${isLoading && "invisible"}`}
+          >
             {label}
           </span>
         )}

diff --git a/ui/src/pages/Layers.tsx b/ui/src/pages/Layers.tsx
@@ -31,13 +31,10 @@ const Layers: React.FC = () => {
   const [layerLimit, setLayerLimit] = useState(10);
   const [searchParams, setSearchParams] = useSearchParams();
 
-  const search = useMemo<string>(
-    () => {
-      setLayerOffset(0);
-      return searchParams.get("search") || ""
-    },
-    [searchParams]
-  );
+  const search = useMemo<string>(() => {
+    setLayerOffset(0);
+    return searchParams.get("search") || "";
+  }, [searchParams]);
 
   const setSearch = useCallback(
     (search: string) => {
@@ -108,6 +105,18 @@ const Layers: React.FC = () => {
     }),
   });
 
+  const updateLimit = useCallback(
+    (limit: number) => {
+      if (layersQuery.isSuccess) {
+        if (layerOffset + limit > layersQuery.data.results.length) {
+          setLayerOffset(Math.max(0, layersQuery.data.results.length - limit));
+        }
+        setLayerLimit(limit);
+      }
+    },
+    [layerOffset, layersQuery]
+  );
+
   return (
     <div className="flex flex-col flex-1 h-screen min-w-0">
       <div
@@ -207,20 +216,78 @@ const Layers: React.FC = () => {
           </div>
           <div className="flex flex-row items-center gap-8">
             <div className="flex flex-row items-center gap-2">
-              <Button theme={theme} variant={"tertiary"} onClick={() => setLayerOffset(Math.max(0,layerOffset-layerLimit))} disabled={ layerOffset == 0 }>Previous</Button>
-              <span className={`
-                  text-base
-                  font-semibold
-                  ${theme === "light" ? "text-nuances-black" : "text-nuances-50"}
-                `}>{layerOffset + 1} - {Math.min(layerOffset + layerLimit, layersQuery.isSuccess ? layersQuery.data.results.length : 0)} of {layersQuery.isSuccess ? layersQuery.data.results.length : 0}</span>
-              <Button theme={theme} variant={"tertiary"} onClick={() => setLayerOffset(Math.min(layerOffset+layerLimit, layersQuery.isSuccess ? layersQuery.data.results.length : 0))} disabled= { !layersQuery.isSuccess || layerOffset + layerLimit >= layersQuery.data.results.length }>Next</Button>
-              <span className={`
+              <Button
+                theme={theme}
+                variant={"tertiary"}
+                onClick={() =>
+                  setLayerOffset(Math.max(0, layerOffset - layerLimit))
+                }
+                disabled={layerOffset == 0}
+              >
+                Previous
+              </Button>
+              {layersQuery.isSuccess ? (
+                <span
+                  className={`
+                      text-base
+                      font-semibold
+                      ${theme === "light" ? "text-nuances-black" : "text-nuances-50"}
+                    `}
+                >
+                  {layerOffset + 1} -{" "}
+                  {Math.min(
+                    layerOffset + layerLimit,
+                    layersQuery.isSuccess ? layersQuery.data.results.length : 0
+                  )}{" "}
+                  of{" "}
+                  {layersQuery.isSuccess ? layersQuery.data.results.length : 0}
+                </span>
+              ) : (
+                <span
+                  className={`
+                      text-base
+                      font-semibold
+                      ${theme === "light" ? "text-nuances-black" : "text-nuances-50"}
+                    `}
+                >
+                  {layersQuery.isLoading ? "Loading..." : "0 - 0 of 0"}
+                </span>
+              )}
+              <Button
+                theme={theme}
+                variant={"tertiary"}
+                onClick={() =>
+                  setLayerOffset(
+                    Math.min(
+                      layerOffset + layerLimit,
+                      layersQuery.isSuccess
+                        ? layersQuery.data.results.length
+                        : 0
+                    )
+                  )
+                }
+                disabled={
+                  !layersQuery.isSuccess ||
+                  layerOffset + layerLimit >= layersQuery.data.results.length
+                }
+              >
+                Next
+              </Button>
+              <span
+                className={`
                   text-base
                   font-medium
                   ${theme === "light" ? "text-primary-600" : "text-nuances-200"}
-                `}>Items per page: </span>
-              <PaginationDropdown className="w-16"
-              variant={theme} selectedPagination={layerLimit} setSelectedPagination={setLayerLimit} />
+                `}
+              >
+                Items per page:{" "}
+              </span>
+              <PaginationDropdown
+                className="w-16"
+                variant={theme}
+                selectedPagination={layerLimit}
+                setSelectedPagination={updateLimit}
+              />
             </div>
             <div className="flex flex-row items-center gap-2">
               <NavigationButton
@@ -265,9 +332,11 @@ const Layers: React.FC = () => {
               </span>
             ) : layersQuery.isSuccess ? (
               layersQuery.data.results.length > 0 ? (
-                layersQuery.data.results.slice(layerOffset, layerOffset + layerLimit).map((layer, index) => (
-                  <Card key={index} variant={theme} layer={layer} />
-                ))
+                layersQuery.data.results
+                  .slice(layerOffset, layerOffset + layerLimit)
+                  .map((layer, index) => (
+                    <Card key={index} variant={theme} layer={layer} />
+                  ))
               ) : (
                 <span
                   className={`
@@ -305,7 +374,7 @@ const Layers: React.FC = () => {
               </span>
             ) : layersQuery.isSuccess ? (
               layersQuery.data.results.length > 0 ? (
-                <Table variant={theme} data={layersQuery.data.results} />
+                <Table variant={theme} data={layersQuery.data.results.slice(layerOffset, layerOffset + layerLimit)} />
               ) : (
                 <div className="p-6">
                   <span