Imported repos list empty state updates #19096
There are no files selected for viewing
This file contains hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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> | ||
|
There was a problem hiding this comment. We could get really cheesy here one day 😄 |
||
| )} | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we change the color in dark mode for more contrast?
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It applies to this as well 🙏
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch. I think I'm going to look at swapping all our headings to the podkit ones to at least get that stuff cleaned up and using the updated components.