Repository Config list page #19039

selfcontained · 2023-11-08T21:11:39Z

Description

Updates the Repository Configuration list page to implement the latest designs. There's still some work to do, but wanted to get this as a first milestone to keep the PR from growing too big. Most of the look and feel are here, and basic functionality of searching/paging should work as well. There are some details around loading indicators, and pagination related state that I plan on addressing in the next round of this UI.

Header	Header	Header

Things that aren't accounted for yet but will be in followups. I've called them out in comments in the code, but for summary:

Need the prebuild status filter
Ability to change rows per page (it's set to 5 now to ease development).
Search input is missing some details (icon, proper search input type). I plan on pulling this into podkit and formalizing it a bit from our current TextInput component.
Import modal needs attention and swapping to use new grpc api
Pagination/Search state handling (need to update api response to include some more pagination details and need to shift state into query params instead of component state).

Summary generated by Copilot

`🤖 Generated by Copilot at 09d9d9e`

Fixed pagination bug in getProjects method of ConfigurationServiceAPI. This method lists the user's projects in the dashboard.

Related Issue(s)

Fixes EXP-876

How to test

Import at least 6 repositories (so you have some paging)
Play with paging a bit (there are some edge cases I need to address still but happy path should work)
Make sure dark mode & light mode look right w/ the Table components

Documentation

Preview status

Gitpod was successfully deployed to your preview environment.

🏷️ Name - brad-exp-84ec419e928
🔗 URL - brad-exp-84ec419e928.preview.gitpod-dev.com/workspaces.
📚 Documentation - See our internal documentation for information on how to interact with your preview environment.
📦 Version - brad-exp-876-repositories-list-page-gha.19667
🗒️ Logs - GCP Logs Explorer

Build Options

Build

/werft with-werft
Run the build with werft instead of GHA
leeway-no-cache
/werft no-test
Run Leeway with --dont-test

Publish

/werft publish-to-npm
/werft publish-to-jb-marketplace

Installer

analytics=segment
with-dedicated-emulation
workspace-feature-flags
Add desired feature flags to the end of the line above, space separated

Preview Environment / Integration Tests

/werft with-local-preview
If enabled this will build install/preview
/werft with-preview
/werft with-large-vm
/werft with-gce-vm
If enabled this will create the environment on GCE infra
with-integration-tests=all
Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh. If enabled, with-preview and with-large-vm will be enabled.
with-monitoring

/hold

akosyakov

I look at service side look good to me, i did not look at frontend code or tested it. cc @filiptronicek could you do it please?

components/dashboard/src/repositories/list/RepositoryList.tsx

components/dashboard/src/repositories/list/PaginationControls.tsx

filiptronicek · 2023-11-13T15:56:43Z

components/dashboard/src/repositories/list/RepositoryList.tsx

+                        <thead className="[&_th]:p-3 [&_th]:bg-gray-100 [&_th:first-child]:rounded-tl-md [&_th:last-child]:rounded-tr-md text-semibold">
+                            <tr className="border-b">
+                                <th className="w-48">Name</th>
+                                <th className="hidden md:table-cell">Repository URL</th>


Perhaps we can strip the "URL" part, as the value we're showing is not really a URL? In the context of this page, "Repository" seems self-explanatory and fine.

filiptronicek · 2023-11-13T15:59:34Z

components/dashboard/src/repositories/list/RepositoryList.tsx

@@ -31,25 +59,80 @@ const RepositoryListPage: FC = () => {

    return (


There are some parts which dark mode does not like very much - notably the table header and the row separators.

selfcontained · 2023-11-13T23:47:02Z

components/gitpod-db/src/project-db.ts

@@ -37,3 +31,12 @@ export interface ProjectDB extends TransactionalDB<ProjectDB> {
    getProjectUsage(projectId: string): Promise<ProjectUsage | undefined>;
    updateProjectUsage(projectId: string, usage: Partial<ProjectUsage>): Promise<void>;
 }
+


lifted these args into an object as the ordering/number of them was getting pretty hairy, especially w/ a couple being optional.

selfcontained · 2023-11-13T23:49:18Z

components/server/src/projects/projects-service.ts

+            searchTerm: searchOptions.searchTerm || "",
+            organizationId: searchOptions.organizationId,
+        });
+        // TODO: adjust this to not filter entities, but log errors if any are not accessible for current user


I'm going to tackle this in a followup and leave it filtering for now

akosyakov · 2023-11-14T08:28:11Z

components/server/src/api/configuration-service-api.ts

@@ -78,9 +78,11 @@ export class ConfigurationServiceAPI implements ServiceImpl<typeof Configuration
        }

        const limit = req.pagination?.pageSize || 25;


Should we have max page size and return invalid argument if a user requests more?

For sure, I'll add this in a followup, need to do some work around pagination/cursors anyways.

yeah, sorry for the confusion in this area yet, i hope we can settle it today

I don't think it is blocking since it is under FF, we can resolve with follow up PR?

filiptronicek

Found this to work reliably — nice work! I haven't tested multiple users per org, but because all the repos are currently public, I don't believe that will make a difference. (org invite in case you'd want to last-minute test it yourself :).

Changing orgs behaves as expected and the pagionation as well.

selfcontained · 2023-11-14T16:48:06Z

/unhold

roboquat added do-not-merge/hold do-not-merge/work-in-progress size/XS size/M size/L size/XL and removed size/XS size/M size/L labels Nov 8, 2023

selfcontained marked this pull request as ready for review November 10, 2023 02:00

selfcontained requested a review from a team as a code owner November 10, 2023 02:00

roboquat removed the do-not-merge/work-in-progress label Nov 10, 2023

github-actions bot added the team: team-experience label Nov 10, 2023

akosyakov approved these changes Nov 10, 2023

View reviewed changes

filiptronicek mentioned this pull request Nov 10, 2023

Configuration Detail setup #19021

Merged

14 tasks

selfcontained marked this pull request as draft November 13, 2023 15:34

roboquat added the do-not-merge/work-in-progress label Nov 13, 2023

selfcontained changed the title ~~Fixing pagination logic~~ Repository Config list page Nov 13, 2023

filiptronicek reviewed Nov 13, 2023

View reviewed changes

roboquat added size/XXL and removed size/XL labels Nov 13, 2023

selfcontained commented Nov 13, 2023

View reviewed changes

selfcontained marked this pull request as ready for review November 14, 2023 00:25

roboquat removed the do-not-merge/work-in-progress label Nov 14, 2023

akosyakov reviewed Nov 14, 2023

View reviewed changes

filiptronicek approved these changes Nov 14, 2023

View reviewed changes

selfcontained added 3 commits November 14, 2023 15:31

fixing pagination logic

4b1b9ec

wip

d8d723e

flushing out rows

c5e1309

selfcontained added 13 commits November 14, 2023 15:33

adding missing creationTime

6d9545d

adjusting result count copy

0cfe97b

fix offset... again

370d4e2

Flushing out table UI a bit more

408cf49

Flushing out table UI a bit more

eff508d

comment for remembering to use search params

f7a6096

more comments

728e34f

fix pages count

aff2533

copy/responsive adjustments

95c5e42

updating search project query & service

aff276c

pass org id along and check permission in service

5b9fc46

Extracting table components

8a3210a

cleanup

c8558ed

selfcontained force-pushed the brad/exp-876-repositories-list-page branch from d6facf0 to c8558ed Compare November 14, 2023 15:51

fix menu copy

fd89c7d

roboquat removed the do-not-merge/hold label Nov 14, 2023

roboquat merged commit eaae6cc into main Nov 14, 2023
12 of 13 checks passed

roboquat deleted the brad/exp-876-repositories-list-page branch November 14, 2023 16:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository Config list page #19039

Repository Config list page #19039

selfcontained commented Nov 8, 2023 •

edited

Loading

akosyakov left a comment

filiptronicek Nov 13, 2023

filiptronicek Nov 13, 2023

selfcontained Nov 13, 2023

selfcontained Nov 13, 2023

akosyakov Nov 14, 2023

selfcontained Nov 14, 2023

akosyakov Nov 14, 2023

akosyakov Nov 14, 2023

filiptronicek left a comment

selfcontained commented Nov 14, 2023

		@@ -31,25 +59,80 @@ const RepositoryListPage: FC = () => {

		return (

		@@ -78,9 +78,11 @@ export class ConfigurationServiceAPI implements ServiceImpl<typeof Configuration
		}

		const limit = req.pagination?.pageSize \|\| 25;

Repository Config list page #19039

Repository Config list page #19039

Conversation

selfcontained commented Nov 8, 2023 • edited Loading

Description

🤖 Generated by Copilot at 09d9d9e

Related Issue(s)

How to test

Documentation

Preview status

Build Options

akosyakov left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

filiptronicek left a comment

Choose a reason for hiding this comment

selfcontained commented Nov 14, 2023

selfcontained commented Nov 8, 2023 •

edited

Loading

`🤖 Generated by Copilot at 09d9d9e`