github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(home): remove margins from env list [EE-4868] (#8285)

pull/8294/head
Chaim Lev-Ari 2023-01-11 10:59:56 +02:00 committed by GitHub
parent 7793b98813
commit 4bdf30c038
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 102 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/react/components/PaginationControls/PaginationControls.tsx
View File

@ -1,3 +1,5 @@
import clsx from 'clsx';
import { ItemsPerPageSelector } from './ItemsPerPageSelector'; import { ItemsPerPageSelector } from './ItemsPerPageSelector';
import { PageSelector } from './PageSelector'; import { PageSelector } from './PageSelector';
@ -9,6 +11,7 @@ interface Props {
showAll?: boolean; showAll?: boolean;
totalCount: number; totalCount: number;
isPageInputVisible?: boolean; isPageInputVisible?: boolean;
className?: string;
} }
export function PaginationControls({ export function PaginationControls({
@ -19,9 +22,10 @@ export function PaginationControls({
onPageChange, onPageChange,
totalCount, totalCount,
isPageInputVisible, isPageInputVisible,
className,
}: Props) { }: Props) {
return ( return (
<div className="paginationControls"> <div className={clsx('paginationControls', className)}>
<div className="form-inline flex"> <div className="form-inline flex">
<ItemsPerPageSelector <ItemsPerPageSelector
value={pageLimit} value={pageLimit}

197
app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx
View File

@ -140,110 +140,107 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
return ( return (
<> <>
{totalAvailable === 0 && <NoEnvironmentsInfoPanel isAdmin={isAdmin} />} {totalAvailable === 0 && <NoEnvironmentsInfoPanel isAdmin={isAdmin} />}
<div className="row">
<div className="col-sm-12">
<TableContainer>
<div className="px-4">
<TableTitle
className="!px-0"
icon={HardDrive}
label="Environments"
description={
<div className="w-full text-sm text-gray-7">
Click on an environment to manage
</div>
}
>
<div className="flex gap-4">
<SearchBar
className="!bg-transparent !m-0"
value={searchBarValue}
onChange={setSearchBarValue}
placeholder="Search by name, group, tag, status, URL..."
data-cy="home-endpointsSearchInput"
/>
{isAdmin && (
<Button
onClick={onRefresh}
data-cy="home-refreshEndpointsButton"
size="medium"
color="light"
icon={RefreshCcw}
className="!m-0"
>
Refresh
</Button>
)}
<KubeconfigButton
environments={environments}
envQueryParams={queryWithSort}
/>
<AMTButton <TableContainer>
environments={environments} <div className="px-4">
envQueryParams={queryWithSort} <TableTitle
/> className="!px-0"
icon={HardDrive}
label="Environments"
description={
<div className="w-full text-sm text-gray-7">
Click on an environment to manage
</div>
}
>
<div className="flex gap-4">
<SearchBar
className="!bg-transparent !m-0"
value={searchBarValue}
onChange={setSearchBarValue}
placeholder="Search by name, group, tag, status, URL..."
data-cy="home-endpointsSearchInput"
/>
{isAdmin && (
<Button
onClick={onRefresh}
data-cy="home-refreshEndpointsButton"
size="medium"
color="light"
icon={RefreshCcw}
className="!m-0"
>
Refresh
</Button>
)}
<KubeconfigButton
environments={environments}
envQueryParams={queryWithSort}
/>
{updateAvailable && <UpdateBadge />} <AMTButton
</div> environments={environments}
</TableTitle> envQueryParams={queryWithSort}
<div className="-mt-3"> />
<EnvironmentListFilters
setPlatformTypes={setPlatformTypes} {updateAvailable && <UpdateBadge />}
platformTypes={platformTypes}
setConnectionTypes={setConnectionTypes}
connectionTypes={connectionTypes}
statusOnChange={statusOnChange}
statusState={statusState}
tagOnChange={tagOnChange}
tagState={tagState}
groupOnChange={groupOnChange}
groupState={groupState}
setAgentVersions={setAgentVersions}
agentVersions={agentVersions}
clearFilter={clearFilter}
sortOnchange={sortOnchange}
sortOnDescending={sortOnDescending}
sortByDescending={sortByDescending}
sortByButton={sortByButton}
sortByState={sortByState}
/>
</div>
<div
className="blocklist !p-0 mt-5 !space-y-2"
data-cy="home-endpointList"
>
{renderItems(
isLoading,
totalCount,
environments.map((env) => (
<EnvironmentItem
key={env.Id}
environment={env}
groupName={
groupsQuery.data?.find((g) => g.Id === env.GroupId)
?.Name
}
onClickBrowse={() => onClickBrowse(env)}
isActive={env.Id === currentEnvironmentId}
/>
))
)}
</div>
<TableFooter>
<PaginationControls
showAll={totalCount <= 100}
pageLimit={pageLimit}
page={page}
onPageChange={setPage}
totalCount={totalCount}
onPageLimitChange={setPageLimit}
/>
</TableFooter>
</div> </div>
</TableContainer> </TableTitle>
<div className="-mt-3">
<EnvironmentListFilters
setPlatformTypes={setPlatformTypes}
platformTypes={platformTypes}
setConnectionTypes={setConnectionTypes}
connectionTypes={connectionTypes}
statusOnChange={statusOnChange}
statusState={statusState}
tagOnChange={tagOnChange}
tagState={tagState}
groupOnChange={groupOnChange}
groupState={groupState}
setAgentVersions={setAgentVersions}
agentVersions={agentVersions}
clearFilter={clearFilter}
sortOnchange={sortOnchange}
sortOnDescending={sortOnDescending}
sortByDescending={sortByDescending}
sortByButton={sortByButton}
sortByState={sortByState}
/>
</div>
<div
className="blocklist !p-0 mt-5 !space-y-2"
data-cy="home-endpointList"
>
{renderItems(
isLoading,
totalCount,
environments.map((env) => (
<EnvironmentItem
key={env.Id}
environment={env}
groupName={
groupsQuery.data?.find((g) => g.Id === env.GroupId)?.Name
}
onClickBrowse={() => onClickBrowse(env)}
isActive={env.Id === currentEnvironmentId}
/>
))
)}
</div>
<TableFooter>
<PaginationControls
className="!mr-0"
showAll={totalCount <= 100}
pageLimit={pageLimit}
page={page}
onPageChange={setPage}
totalCount={totalCount}
onPageLimitChange={setPageLimit}
/>
</TableFooter>
</div> </div>
</div> </TableContainer>
</> </>
); );