-
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.
Imported repos list empty state updates (#19096)
* Adding an empty state and loading * updating no results ux * Update components/dashboard/src/repositories/list/RepoListEmptyState.tsx Co-authored-by: Filip Troníček <[email protected]> * updating header colors for better contrast in dark mode --------- Co-authored-by: Filip Troníček <[email protected]>
- Loading branch information
1 parent
4ac04ee
commit b9189bf
Showing
6 changed files
with
191 additions
and
95 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
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
28 changes: 28 additions & 0 deletions
28
components/dashboard/src/repositories/list/RepoListEmptyState.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,28 @@ | ||
| /** | ||
| * 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 { FC } from "react"; | ||
| import { Heading2, Subheading } from "@podkit/typography/Headings"; | ||
| import { Button } from "@podkit/buttons/Button"; | ||
| import { cn } from "@podkit/lib/cn"; | ||
|
|
||
| type Props = { | ||
| onImport: () => void; | ||
| }; | ||
| export const RepoListEmptyState: FC<Props> = ({ onImport }) => { | ||
| return ( | ||
| <div className={cn("w-full flex justify-center mt-2 rounded-xl bg-gray-100 dark:bg-gray-800 px-4 py-20")}> | ||
| <div className="flex flex-col justify-center items-center text-center space-y-4"> | ||
| <Heading2>No imported repositories yet</Heading2> | ||
| <Subheading className="max-w-md"> | ||
| Importing and configuring repositories allows your team members to be coding at the click of a | ||
| button. | ||
| </Subheading> | ||
| <Button onClick={onImport}>Import a Repository</Button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
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
110 changes: 110 additions & 0 deletions
110
components/dashboard/src/repositories/list/RepositoryTable.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,110 @@ | ||
| /** | ||
| * 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 { FC } from "react"; | ||
| import { TextInput } from "../../components/forms/TextInputField"; | ||
| import { Table, TableBody, TableHead, TableHeader, TableRow } from "@podkit/tables/Table"; | ||
| import { LoaderIcon } from "lucide-react"; | ||
| import { RepositoryListItem } from "./RepoListItem"; | ||
| import { LoadingButton } from "@podkit/buttons/LoadingButton"; | ||
| import { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb"; | ||
| import { TextMuted } from "@podkit/typography/TextMuted"; | ||
| import { Subheading } from "@podkit/typography/Headings"; | ||
| import { cn } from "@podkit/lib/cn"; | ||
|
|
||
| type Props = { | ||
| configurations: Configuration[]; | ||
| searchTerm: string; | ||
| hasNextPage: boolean; | ||
| hasMoreThanOnePage: boolean; | ||
| isSearching: boolean; | ||
| isFetchingNextPage: boolean; | ||
| onSearchTermChange: (val: string) => void; | ||
| onLoadNextPage: () => void; | ||
| }; | ||
|
|
||
| export const RepositoryTable: FC<Props> = ({ | ||
| searchTerm, | ||
| configurations, | ||
| hasNextPage, | ||
| hasMoreThanOnePage, | ||
| isSearching, | ||
| isFetchingNextPage, | ||
| onSearchTermChange, | ||
| onLoadNextPage, | ||
| }) => { | ||
| return ( | ||
| <> | ||
| {/* Search/Filter bar */} | ||
| <div className="flex flex-row flex-wrap justify-between items-center"> | ||
| <div className="flex flex-row flex-wrap gap-2 items-center"> | ||
| {/* TODO: Add search icon on left and decide on pulling Inputs into podkit */} | ||
| <TextInput | ||
| className="w-80" | ||
| value={searchTerm} | ||
| onChange={onSearchTermChange} | ||
| placeholder="Search imported repositories" | ||
| /> | ||
| {/* TODO: Add prebuild status filter dropdown */} | ||
| </div> | ||
| </div> | ||
| <div className="relative w-full overflow-auto mt-2"> | ||
| {configurations.length > 0 ? ( | ||
| <Table> | ||
| {/* TODO: Add sorting controls */} | ||
| <TableHeader> | ||
| <TableRow> | ||
| <TableHead className="w-52">Name</TableHead> | ||
| <TableHead hideOnSmallScreen>Repository</TableHead> | ||
| <TableHead className="w-32" hideOnSmallScreen> | ||
| Created | ||
| </TableHead> | ||
| <TableHead className="w-24" hideOnSmallScreen> | ||
| Prebuilds | ||
| </TableHead> | ||
| {/* Action column, loading status in header */} | ||
| <TableHead className="w-24 text-right"> | ||
| {isSearching && ( | ||
| <div className="flex flex-right justify-end items-center"> | ||
| {/* TODO: Make a LoadingIcon component */} | ||
| <LoaderIcon | ||
| className="animate-spin text-gray-500 dark:text-gray-300" | ||
| size={20} | ||
| /> | ||
| </div> | ||
| )} | ||
| </TableHead> | ||
| </TableRow> | ||
| </TableHeader> | ||
| <TableBody> | ||
| {configurations.map((configuration) => { | ||
| return <RepositoryListItem key={configuration.id} configuration={configuration} />; | ||
| })} | ||
| </TableBody> | ||
| </Table> | ||
| ) : ( | ||
| <div | ||
| className={cn( | ||
| "w-full flex justify-center rounded-xl bg-gray-100 dark:bg-gray-800 px-4 py-10 animate-fade-in-fast", | ||
| )} | ||
| > | ||
| <Subheading className="max-w-md">No results found. Try adjusting your search terms.</Subheading> | ||
| </div> | ||
| )} | ||
|
|
||
| <div className="mt-4 mb-8 flex flex-row justify-center"> | ||
| {hasNextPage ? ( | ||
| <LoadingButton variant="secondary" onClick={onLoadNextPage} loading={isFetchingNextPage}> | ||
| Load more | ||
| </LoadingButton> | ||
| ) : ( | ||
| hasMoreThanOnePage && <TextMuted>All repositories are loaded</TextMuted> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; |