diff --git a/app/react/components/PaginationControls/PaginationControls.tsx b/app/react/components/PaginationControls/PaginationControls.tsx index d482ba7e8..a57b1a42f 100644 --- a/app/react/components/PaginationControls/PaginationControls.tsx +++ b/app/react/components/PaginationControls/PaginationControls.tsx @@ -1,3 +1,5 @@ +import clsx from 'clsx'; + import { ItemsPerPageSelector } from './ItemsPerPageSelector'; import { PageSelector } from './PageSelector'; @@ -9,6 +11,7 @@ interface Props { showAll?: boolean; totalCount: number; isPageInputVisible?: boolean; + className?: string; } export function PaginationControls({ @@ -19,9 +22,10 @@ export function PaginationControls({ onPageChange, totalCount, isPageInputVisible, + className, }: Props) { return ( -
+
{totalAvailable === 0 && } -
-
- -
- - Click on an environment to manage -
- } - > -
- - {isAdmin && ( - - )} - - + +
+ + Click on an environment to manage +
+ } + > +
+ + {isAdmin && ( + + )} + - {updateAvailable && } -
- -
- -
-
- {renderItems( - isLoading, - totalCount, - environments.map((env) => ( - g.Id === env.GroupId) - ?.Name - } - onClickBrowse={() => onClickBrowse(env)} - isActive={env.Id === currentEnvironmentId} - /> - )) - )} -
- - - + + + {updateAvailable && }
-
+ +
+ +
+
+ {renderItems( + isLoading, + totalCount, + environments.map((env) => ( + g.Id === env.GroupId)?.Name + } + onClickBrowse={() => onClickBrowse(env)} + isActive={env.Id === currentEnvironmentId} + /> + )) + )} +
+ + +
-
+ );