-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Repository Config list page (#19039)
* fixing pagination logic * wip * flushing out rows * adding missing creationTime * adjusting result count copy * fix offset... again * Flushing out table UI a bit more * Flushing out table UI a bit more * comment for remembering to use search params * more comments * fix pages count * copy/responsive adjustments * updating search project query & service * pass org id along and check permission in service * Extracting table components * cleanup * fix menu copy
- Loading branch information
1 parent
a5021da
commit eaae6cc
Showing
17 changed files
with
480 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 25 additions & 0 deletions
25
components/dashboard/src/components/podkit/layout/PageHeading.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| /** | ||
| * Copyright (c) 2023 Gitpod GmbH. All rights reserved. | ||
| * Licensed under the GNU Affero General Public License (AGPL). | ||
| * See License.AGPL.txt in the project root for license information. | ||
| */ | ||
|
|
||
| import { Heading1, Subheading } from "@podkit/typography/Headings"; | ||
| import { FC, ReactNode } from "react"; | ||
|
|
||
| type PageHeadingProps = { | ||
| title: string; | ||
| subtitle?: string; | ||
| action?: ReactNode; | ||
| }; | ||
| export const PageHeading: FC<PageHeadingProps> = ({ title, subtitle, action }) => { | ||
| return ( | ||
| <div className="flex flex-row flex-wrap justify-between py-8 gap-2"> | ||
| <div> | ||
| <Heading1>{title}</Heading1> | ||
| {subtitle && <Subheading>{subtitle}</Subheading>} | ||
| </div> | ||
| {action && action} | ||
| </div> | ||
| ); | ||
| }; |
68 changes: 68 additions & 0 deletions
68
components/dashboard/src/components/podkit/tables/Table.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| /** | ||
| * Copyright (c) 2023 Gitpod GmbH. All rights reserved. | ||
| * Licensed under the GNU Affero General Public License (AGPL). | ||
| * See License.AGPL.txt in the project root for license information. | ||
| */ | ||
|
|
||
| import { cn } from "@podkit/lib/cn"; | ||
| import React from "react"; | ||
|
|
||
| type HideableCellProps = { | ||
| hideOnSmallScreen?: boolean; | ||
| }; | ||
|
|
||
| export const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>( | ||
| ({ className, ...props }, ref) => { | ||
| return ( | ||
| <div className="relative w-full overflow-auto"> | ||
| <table ref={ref} className={cn("w-full text-sm text-left", className)} {...props} /> | ||
| </div> | ||
| ); | ||
| }, | ||
| ); | ||
| Table.displayName = "Table"; | ||
|
|
||
| export const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>( | ||
| ({ className, ...props }, ref) => { | ||
| return ( | ||
| <thead | ||
| ref={ref} | ||
| className="[&_th]:p-3 [&_th]:bg-gray-100 dark:[&_th]:bg-gray-800 [&_th:first-child]:rounded-tl-md [&_th:last-child]:rounded-tr-md text-semibold" | ||
| {...props} | ||
| /> | ||
| ); | ||
| }, | ||
| ); | ||
| TableHeader.displayName = "TableHeader"; | ||
|
|
||
| export const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>( | ||
| ({ className, ...props }, ref) => { | ||
| return <tr ref={ref} className="border-b dark:border-gray-700" {...props} />; | ||
| }, | ||
| ); | ||
| TableRow.displayName = "TableRow"; | ||
|
|
||
| export const TableHead = React.forwardRef< | ||
| HTMLTableCellElement, | ||
| React.ThHTMLAttributes<HTMLTableCellElement> & HideableCellProps | ||
| >(({ hideOnSmallScreen, className, ...props }, ref) => { | ||
| return <th ref={ref} className={cn(hideOnSmallScreen && "hidden md:table-cell", className)} {...props} />; | ||
| }); | ||
| TableHead.displayName = "TableHead"; | ||
|
|
||
| export const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>( | ||
| ({ className, ...props }, ref) => { | ||
| return ( | ||
| <tbody ref={ref} className="[&_td]:p-3 [&_td:last-child]:text-right [&_tr]:hover:bg-muted/5" {...props} /> | ||
| ); | ||
| }, | ||
| ); | ||
| TableBody.displayName = "TableBody"; | ||
|
|
||
| export const TableCell = React.forwardRef< | ||
| HTMLTableCellElement, | ||
| React.TdHTMLAttributes<HTMLTableCellElement> & HideableCellProps | ||
| >(({ hideOnSmallScreen, className, ...props }, ref) => { | ||
| return <td ref={ref} className={cn(hideOnSmallScreen && "hidden md:table-cell", className)} {...props} />; | ||
| }); | ||
| TableCell.displayName = "TableCell"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
81 changes: 81 additions & 0 deletions
81
components/dashboard/src/repositories/list/PaginationControls.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| /** | ||
| * Copyright (c) 2023 Gitpod GmbH. All rights reserved. | ||
| * Licensed under the GNU Affero General Public License (AGPL). | ||
| * See License.AGPL.txt in the project root for license information. | ||
| */ | ||
|
|
||
| import { Button } from "@podkit/buttons/Button"; | ||
| import { cn } from "@podkit/lib/cn"; | ||
| import { TextMuted } from "@podkit/typography/TextMuted"; | ||
| import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"; | ||
| import { FC, useCallback } from "react"; | ||
|
|
||
| type Props = { | ||
| currentPage: number; | ||
| totalPages: number; | ||
| pageSize: number; | ||
| totalRows: number; | ||
| currentRows: number; | ||
| onPageChanged: (page: number) => void; | ||
| }; | ||
| export const PaginationControls: FC<Props> = ({ | ||
| currentPage, | ||
| totalPages, | ||
| pageSize, | ||
| totalRows, | ||
| currentRows, | ||
| onPageChanged, | ||
| }) => { | ||
| const prevPage = useCallback(() => { | ||
| onPageChanged(currentPage - 1); | ||
| }, [currentPage, onPageChanged]); | ||
|
|
||
| const nextPage = useCallback(() => { | ||
| onPageChanged(currentPage + 1); | ||
| }, [currentPage, onPageChanged]); | ||
|
|
||
| return ( | ||
| <div className="flex flex-row justify-center items-center py-2 gap-2 text-sm"> | ||
| {/* TODO: Rows per page select */} | ||
| <PaginationCountText | ||
| className="w-24" | ||
| currentPage={currentPage} | ||
| pageSize={pageSize} | ||
| currentRows={currentRows} | ||
| totalRows={totalRows} | ||
| /> | ||
| <Button variant="ghost" size="icon" onClick={prevPage} disabled={currentPage === 1}> | ||
| <ChevronLeftIcon size={20} /> | ||
| </Button> | ||
| <Button variant="ghost" size="icon" onClick={nextPage} disabled={currentPage >= totalPages}> | ||
| <ChevronRightIcon size={20} /> | ||
| </Button> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| type PaginationCountTextProps = { | ||
| currentPage: number; | ||
| pageSize: number; | ||
| currentRows: number; | ||
| totalRows: number; | ||
| className?: string; | ||
| includePrefix?: boolean; | ||
| }; | ||
| export const PaginationCountText: FC<PaginationCountTextProps> = ({ | ||
| currentPage, | ||
| pageSize, | ||
| currentRows, | ||
| totalRows, | ||
| className, | ||
| includePrefix = false, | ||
| }) => { | ||
| const start = (currentPage - 1) * pageSize + 1; | ||
| const end = start + currentRows - 1; | ||
|
|
||
| return ( | ||
| <TextMuted className={cn("min-w-max text-right", className)}> | ||
| {includePrefix ? `Showing ${start} - ${end} of ${totalRows}` : `${start} - ${end} of ${totalRows}`} | ||
| </TextMuted> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.