Allow project search on admin dashboard #7882

laushinka · 2022-01-27T19:22:56Z

Description

Allows searching for projects
Shows project detail
Shows list of prebuilds for each project

Search result	Detail with prebuilds	Detail without prebuilds

Related Issue(s)

Fixes #7636 and fixes #5022

How to test

Go to https://laushinka-search-project-7636.staging.gitpod-dev.com/admin/projects
To search all projects, click on the "Search" button without any search queries.
To search specific projects, enter the search query.
Once there are result(s), click on one of the rows to go to the project detail.

Release Notes

Admins can do a text search for projects and their associated prebuilds.

Documentation

codecov · 2022-01-27T19:42:09Z

Codecov Report

Merging #7882 (6c6d31f) into main (9ad62ce) will decrease coverage by 1.26%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main    #7882      +/-   ##
==========================================
- Coverage   11.46%   10.20%   -1.27%     
==========================================
  Files          20       18       -2     
  Lines        1177     1009     -168     
==========================================
- Hits          135      103      -32     
+ Misses       1039      905     -134     
+ Partials        3        1       -2

Flag	Coverage Δ
components-gitpod-cli-app	`10.20% <ø> (ø)`
components-local-app-app-darwin-amd64	`?`
components-local-app-app-darwin-arm64	`?`
components-local-app-app-linux-amd64	`?`
components-local-app-app-linux-arm64	`?`
components-local-app-app-windows-386	`?`
components-local-app-app-windows-amd64	`?`
components-local-app-app-windows-arm64	`?`

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
components/local-app/pkg/auth/auth.go
components/local-app/pkg/auth/pkce.go

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9ad62ce...6c6d31f. Read the comment docs.

laushinka · 2022-01-27T20:40:17Z

/werft run

👍 started the job as gitpod-build-laushinka-search-project-7636.39

laushinka · 2022-01-27T22:12:15Z

/werft run

👍 started the job as gitpod-build-laushinka-search-project-7636.40

laushinka · 2022-01-31T10:03:56Z

@AlexTugarev I requested your review because we talked re the Prebuilds component already, so I thought it would make sense. But feel free to let me know in case your plate is full and I'll assign someone else 🤗

gtsiolis · 2022-01-31T12:48:32Z

Looking at UX changes in this now! 👀

jldec · 2022-01-31T12:51:25Z

Trying out the project search I noticed that the state of the search input is lost when I click through to a project detail and then go back to the project list using the back button.

This is a bit confusing because searching with no input the first time, returns a full list, but clicking the search button again after coming back from a project detail, appears to do nothing (the previous list remains unchanged).

jldec · 2022-01-31T12:53:56Z

Q: Were you able validate that project searches won't trigger a full DB table scan (or if they do, it's ok when that happens)?

jldec

This looks really good - thanks @laushinka
I left 1 comment about search state on back-button, and a question about DB table scans.

laushinka · 2022-01-31T13:27:34Z

Q: Were you able validate that project searches won't trigger a full DB table scan (or if they do, it's ok when that happens)?

I created an index for the cloneUrl so it shouldn't do a full table scan.

gtsiolis

Thanks for adding this, @laushinka! 🔮

Left below some non-blocking comments about UX changes.

I also agree with @jldec's comment in #7636 (comment) about merging the first iteration of this without further changes. ✔️

Approving to unblock merging but holding in case someone from the team could take a closer look at the code changes. 🏀

/hold

components/dashboard/src/admin/ProjectsSearch.tsx

components/dashboard/src/admin/ProjectDetail.tsx

gtsiolis · 2022-01-31T13:26:30Z

components/dashboard/src/projects/Prebuilds.tsx

                    </ItemField>
                </Item>)}
            </ItemsList>
+            {(!isLoadingPrebuilds && prebuilds.length === 0 && props.isAdminDashboard) &&
+                <div className="mt-3">No prebuilds triggered yet.</div>}


praise: Thanks for including an empty state here, @laushinka! 🌟

components/dashboard/src/projects/Prebuilds.tsx

gtsiolis · 2022-01-31T13:33:43Z

components/dashboard/src/admin/ProjectsSearch.tsx

+                    <div className="flex flex-col w-4/12 truncate">
+                        <div className="font-medium text-gray-800 dark:text-gray-100 truncate hover:text-blue-600 dark:hover:text-blue-400">{p.project.name}</div>
+                    </div>
+                    <div className="flex flex-col w-6/12 self-center truncate">


praise: Thanks for adding all the truncation classes here! 💯

gtsiolis · 2022-01-31T13:37:45Z

components/dashboard/src/admin/ProjectsSearch.tsx

+            <Link key={'pr-' + p.project.name} to={'/admin/projects/' + p.project.id} data-analytics='{"button_type":"sidebar_menu"}'>
+                <div className="rounded-xl whitespace-nowrap flex py-6 px-6 w-full justify-between hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gitpod-kumquat-light group">
+                    <div className="flex flex-col w-4/12 truncate">
+                        <div className="font-medium text-gray-800 dark:text-gray-100 truncate hover:text-blue-600 dark:hover:text-blue-400">{p.project.name}</div>


suggestion: Since this was also discussed for the upcoming new workspace input modal (#7715), we could re-use the same pattern which is non-existing yet to include a small indicator on hover that describes the action of the single-click open (see screenshot below). However, feel free to ignore this comment for now, bringing this up for visibility and future iterations.

Open workspace View project

gtsiolis · 2022-01-31T13:39:52Z

components/dashboard/src/projects/Prebuilds.tsx

@@ -170,7 +188,7 @@ export default function () {
                <div className="py-3 pl-3">
                    <DropDown prefix="Prebuild Status: " contextMenuWidth="w-32" entries={statusFilterEntries()} />
                </div>
-                {(!isLoadingPrebuilds && prebuilds.length === 0) &&
+                {(!isLoadingPrebuilds && prebuilds.length === 0 && !props.isAdminDashboard) &&


praise: Nice catch! I was just about to check this out. ⚾

Ended up removing this check to also handle #5022.

gtsiolis · 2022-01-31T13:45:59Z

components/dashboard/src/admin/ProjectsSearch.tsx

+                            <path fillRule="evenodd" clipRule="evenodd" d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z" fill="#A8A29E" />
+                        </svg>
+                    </div>
+                    <input type="search" placeholder="Search Projects" onKeyDown={(k) => k.key === 'Enter' && search()} onChange={(v) => { setSearchTerm(v.target.value) }} />


issue(non-blocking): The issue about state handling that @jldec mentioned in #7882 (comment) is valid but also visible when searching users or workspaces. If this is an online-fix let's include it here but probably not worth blocking this PR as it seems to be out of the scope of the changes here. 🏀

ok - agree.

laushinka · 2022-01-31T18:01:02Z

Ready for another review 🙏🏽 @gtsiolis @jldec

gtsiolis

Thanks for the update, @laushinka! 🔮

UX LGTM. ✔️

Left some minor comments for the visuals. Feel free to ignore these if needed. ➿

components/dashboard/src/admin/ProjectsSearch.tsx

gtsiolis · 2022-01-31T19:33:31Z

components/dashboard/src/admin/ProjectDetail.tsx

+                </div>
+                <div className="flex w-full mt-6">
+                    <Property name="Incremental Prebuilds">{props.project.settings?.useIncrementalPrebuilds ? "Yes" : "No"}</Property>
+                    <Property name="Marked Deleted" >{props.project.markedDeleted ? "Yes" : "No"}</Property>


issue(non-blocking): This is minor but the column alignment seems slightly off for this element. We probably don't need the ml-3 class here or the first child elements for each row, at least until we start working on more complex responsive layouts. What do you think?

BEFORE AFTER

I just did it in a hacky way and markedDeleted is still off 😅 Feel free to share your CSS magic with me �

�

The extra padding shows up because of the missing third child element, right? Going through the code, I think we could simply drop the left padding, use right padding, and use it only for the values, which may overflow in workspace detail page, with almost no side effect in the final rendering. What do you think, @laushinka?

Here's a patch that could help:

diff --git a/components/dashboard/src/admin/ProjectDetail.tsx b/components/dashboard/src/admin/ProjectDetail.tsx index 7c86c908..5066e041 100644 --- a/components/dashboard/src/admin/ProjectDetail.tsx +++ b/components/dashboard/src/admin/ProjectDetail.tsx @@ -18,7 +18,7 @@ export default function ProjectDetail(props: { project: Project, owner: string | <p>{props.project.cloneUrl}</p> </div> </div> - <div className="flex flex-col w-full -ml-3"> + <div className="flex flex-col w-full"> <div className="flex w-full mt-6"> <Property name="Created">{moment(props.project.creationTime).format('MMM D, YYYY')}</Property> <Property name="Repository"><a className="text-blue-400 dark:text-blue-600 hover:text-blue-600 dark:hover:text-blue-400 truncate" href={props.project.cloneUrl}>{props.project.name}</a></Property> diff --git a/components/dashboard/src/admin/Property.tsx b/components/dashboard/src/admin/Property.tsx index 6c68a442..ed29f000 100644 --- a/components/dashboard/src/admin/Property.tsx +++ b/components/dashboard/src/admin/Property.tsx @@ -7,11 +7,11 @@ import { ReactChild } from 'react'; function Property(p: { name: string, children: string | ReactChild, actions?: { label: string, onClick: () => void }[] }) { - return <div className="ml-3 flex flex-col w-4/12 truncate"> + return <div className="flex flex-col w-4/12 truncate"> <div className="text-base text-gray-500 truncate"> {p.name} </div> - <div className="text-lg text-gray-600 font-semibold truncate"> + <div className="mr-3 text-lg text-gray-600 font-semibold truncate"> {p.children} </div> {(p.actions || []).map(a =>

Sorry I think your comment came at the same time as the merging! Will do this as a drive-by in the next admin ticket 🙏🏽

Thanks, @laushinka! Took a bias-for-action and opened #7960 for this minor fix.

components/dashboard/src/admin/ProjectDetail.tsx

jldec

Very nice work - I like this.

jldec · 2022-02-01T06:04:07Z

components/dashboard/src/admin/ProjectsSearch.tsx

+                            <path fillRule="evenodd" clipRule="evenodd" d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z" fill="#A8A29E" />
+                        </svg>
+                    </div>
+                    <input type="search" placeholder="Search Projects" onKeyDown={(k) => k.key === 'Enter' && search()} onChange={(v) => { setSearchTerm(v.target.value) }} />


ok - agree.

roboquat · 2022-02-01T06:05:03Z

LGTM label has been added.

Git tree hash: ea92d1cd6ef722adc601143a1a34ac73dcf73332

jldec · 2022-02-01T06:09:12Z

@gtsiolis I think this is ready to merge.

laushinka · 2022-02-01T11:53:49Z

I think this is ready to merge.

@jldec I think you can remove the hold if you want. I haven't had any devs look at the code though. Maybe I'll ping @JanKoehnlein for a look if the others are busy?

gtsiolis

@laushinka I've left one last minor comment regarding UX.

Other than that, UX looks good to merge. 🏁

I'd suggest to get at least one pair of eyes on the code changes before releasing the hold.

components/dashboard/src/admin/ProjectsSearch.tsx

Co-authored-by: George Tsiolis <tsiolis.g@gmail.com>

JanKoehnlein · 2022-02-01T14:04:08Z

LGTM

JanKoehnlein

LGTM

roboquat · 2022-02-01T14:04:26Z

LGTM label has been added.

Git tree hash: f44654c76a2dc080c1977a892f947ab687ac7561

roboquat · 2022-02-01T14:04:27Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: JanKoehnlein, jldec

Associated issue: #7636

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~components/dashboard/OWNERS~~ [JanKoehnlein,jldec]
~~components/gitpod-db/OWNERS~~ [JanKoehnlein,jldec]
~~components/gitpod-protocol/OWNERS~~ [JanKoehnlein,jldec]
~~components/server/OWNERS~~ [JanKoehnlein,jldec]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

roboquat added do-not-merge/work-in-progress release-note team: webapp Issue belongs to the WebApp team size/XL labels Jan 27, 2022

laushinka force-pushed the laushinka/search-project-7636 branch from c83e9db to 2596c2f Compare January 27, 2022 20:04

laushinka force-pushed the laushinka/search-project-7636 branch from 2596c2f to b07d844 Compare January 28, 2022 08:44

jldec mentioned this pull request Jan 28, 2022

[Admin] Search for projects and show project details #7636

Closed

15 tasks

laushinka force-pushed the laushinka/search-project-7636 branch 3 times, most recently from 74d0ba3 to a5bbd44 Compare January 30, 2022 23:47

laushinka marked this pull request as ready for review January 31, 2022 00:06

roboquat removed the do-not-merge/work-in-progress label Jan 31, 2022

laushinka requested review from AlexTugarev, gtsiolis and jldec January 31, 2022 00:06

laushinka force-pushed the laushinka/search-project-7636 branch 3 times, most recently from af433c5 to 8226f87 Compare January 31, 2022 00:53

jldec suggested changes Jan 31, 2022

View reviewed changes

roboquat assigned jldec Jan 31, 2022

gtsiolis approved these changes Jan 31, 2022

View reviewed changes

roboquat added the do-not-merge/hold label Jan 31, 2022

laushinka force-pushed the laushinka/search-project-7636 branch from 848e55c to 2e13b83 Compare January 31, 2022 17:43

laushinka requested review from jldec and gtsiolis January 31, 2022 18:00

gtsiolis suggested changes Jan 31, 2022

View reviewed changes

roboquat removed the approved label Jan 31, 2022

Allow project search and show project detail

3863d01

laushinka force-pushed the laushinka/search-project-7636 branch from 2e13b83 to 3863d01 Compare January 31, 2022 21:35

laushinka requested a review from gtsiolis January 31, 2022 22:08

jldec approved these changes Feb 1, 2022

View reviewed changes

roboquat added the lgtm label Feb 1, 2022

roboquat added the approved label Feb 1, 2022

laushinka requested a review from JanKoehnlein February 1, 2022 11:56

gtsiolis reviewed Feb 1, 2022

View reviewed changes

components/dashboard/src/admin/ProjectsSearch.tsx Outdated Show resolved Hide resolved

Update components/dashboard/src/admin/ProjectsSearch.tsx

6c6d31f

Co-authored-by: George Tsiolis <tsiolis.g@gmail.com>

roboquat removed the lgtm label Feb 1, 2022

JanKoehnlein approved these changes Feb 1, 2022

View reviewed changes

roboquat assigned JanKoehnlein Feb 1, 2022

roboquat added the lgtm label Feb 1, 2022

laushinka removed the do-not-merge/hold label Feb 1, 2022

roboquat merged commit ed8a3dc into main Feb 1, 2022

roboquat deleted the laushinka/search-project-7636 branch February 1, 2022 14:20

gtsiolis mentioned this pull request Feb 1, 2022

Fix project details layout #7960

Merged

gtsiolis mentioned this pull request Feb 24, 2022

Laushinka/team admin 8060 #8402

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow project search on admin dashboard #7882

Allow project search on admin dashboard #7882

laushinka commented Jan 27, 2022 •

edited

Loading

codecov bot commented Jan 27, 2022 •

edited

Loading

laushinka commented Jan 27, 2022 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Jan 27, 2022 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Jan 31, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Jan 31, 2022 •

edited

Loading

jldec commented Jan 31, 2022

jldec commented Jan 31, 2022

jldec left a comment

laushinka commented Jan 31, 2022

gtsiolis left a comment

gtsiolis Jan 31, 2022

gtsiolis Jan 31, 2022

gtsiolis Jan 31, 2022

gtsiolis Jan 31, 2022

laushinka Jan 31, 2022 •

edited

Loading

gtsiolis Jan 31, 2022

jldec Feb 1, 2022

laushinka commented Jan 31, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment •

edited

Loading

gtsiolis Jan 31, 2022 •

edited

Loading

laushinka Jan 31, 2022 •

edited

Loading

gtsiolis Feb 1, 2022 •

edited

Loading

laushinka Feb 1, 2022

gtsiolis Feb 1, 2022

jldec left a comment

jldec Feb 1, 2022

roboquat commented Feb 1, 2022

jldec commented Feb 1, 2022

laushinka commented Feb 1, 2022

gtsiolis left a comment

JanKoehnlein commented Feb 1, 2022

JanKoehnlein left a comment

roboquat commented Feb 1, 2022

roboquat commented Feb 1, 2022

Allow project search on admin dashboard #7882

Allow project search on admin dashboard #7882

Conversation

laushinka commented Jan 27, 2022 • edited Loading

Description

Related Issue(s)

How to test

Release Notes

Documentation

codecov bot commented Jan 27, 2022 • edited Loading

Codecov Report

laushinka commented Jan 27, 2022 • edited by werft-gitpod-dev-com bot Loading

laushinka commented Jan 27, 2022 • edited by werft-gitpod-dev-com bot Loading

laushinka commented Jan 31, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented Jan 31, 2022 • edited Loading

jldec commented Jan 31, 2022

jldec commented Jan 31, 2022

jldec left a comment

Choose a reason for hiding this comment

laushinka commented Jan 31, 2022

gtsiolis 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

laushinka Jan 31, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

laushinka commented Jan 31, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis left a comment • edited Loading

Choose a reason for hiding this comment

gtsiolis Jan 31, 2022 • edited Loading

Choose a reason for hiding this comment

laushinka Jan 31, 2022 • edited Loading

Choose a reason for hiding this comment

gtsiolis Feb 1, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jldec left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

roboquat commented Feb 1, 2022

jldec commented Feb 1, 2022

laushinka commented Feb 1, 2022

gtsiolis left a comment

Choose a reason for hiding this comment

JanKoehnlein commented Feb 1, 2022

JanKoehnlein left a comment

Choose a reason for hiding this comment

roboquat commented Feb 1, 2022

roboquat commented Feb 1, 2022

laushinka commented Jan 27, 2022 •

edited

Loading

codecov bot commented Jan 27, 2022 •

edited

Loading

laushinka commented Jan 27, 2022 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Jan 27, 2022 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Jan 31, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Jan 31, 2022 •

edited

Loading

laushinka Jan 31, 2022 •

edited

Loading

laushinka commented Jan 31, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment •

edited

Loading

gtsiolis Jan 31, 2022 •

edited

Loading

laushinka Jan 31, 2022 •

edited

Loading

gtsiolis Feb 1, 2022 •

edited

Loading