Skip to content

Commit c89d2de

Browse files
filiptronicekfiliptronicek
authored
Prebuilds List UI (#19354)
* Init prebuilds list * Text size and color tweaks * Dropdown filtering UI * wip changes * File renames and such * Filter by state * fix path * Add configuration ID filtering * Prebuild list error state * Protobuf sorting definition * API-level sorting * Simplify pagination * Fix undefined inference * Dashboard adopt sort behavior * make sorting required * Move ordering 🤷‍♂️ This will most definetely not solve anything, but... * Hopefully fix sorting 🤷‍♂️ * less `as` * Simplify state check * Repeated sorting * Sort out sorting Sorry :/ * Configuration dropdown WIP * Make configuration filter disableable * Use in in SQL * Minor styling adjustements * Nav item * Rename menu item * Const 🤷‍♂️ * Always display filter reset opt * Add prebuild link to prebuild settings * Simplify * Don't throw errors All my homies hate throwing in `server` * FF hook * Name failed to load state * typo * Better unknown inference * Add ConfigurationField component to display repository name and link * Do not retry configuration load * Move prebuild utils * Unify sort types * Refactor PrebuildTable to use arrow function syntax for mapping prebuilds * fix imports * Widen triggered column * Widen even more * Shorten status labels * Init ws db tests * Rename list item comp accordingly T'was an oopsie doopsie * Test configuration ids and branches filtering
1 parent 8c8577e commit c89d2de

32 files changed

+1603
-424
lines changed

‎components/dashboard/src/app/AppRoutes.tsx

+11-4
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import { CreateWorkspacePage } from "../workspaces/CreateWorkspacePage";
3636
import { WebsocketClients } from "./WebsocketClients";
3737
import { BlockedEmailDomains } from "../admin/BlockedEmailDomains";
3838
import { AppNotifications } from "../AppNotifications";
39-
import { useFeatureFlag } from "../data/featureflag-query";
39+
import { useHasConfigurationsAndPrebuildsEnabled } from "../data/featureflag-query";
4040
import { projectsPathInstallGitHubApp } from "../projects/projects.routes";
4141
import { Heading1, Subheading } from "@podkit/typography/Headings";
4242

@@ -80,10 +80,12 @@ const ConfigurationDetailPage = React.lazy(
8080
() => import(/* webpackPrefetch: true */ "../repositories/detail/ConfigurationDetailPage"),
8181
);
8282

83+
const PrebuildListPage = React.lazy(() => import(/* webpackPrefetch: true */ "../prebuilds/list/PrebuildList"));
84+
8385
export const AppRoutes = () => {
8486
const hash = getURLHash();
8587
const location = useLocation();
86-
const repoConfigListAndDetail = useFeatureFlag("repoConfigListAndDetail");
88+
const configurationsAndPrebuilds = useHasConfigurationsAndPrebuildsEnabled();
8789

8890
// TODO: Add a Route for this instead of inspecting location manually
8991
if (location.pathname.startsWith("/blocked")) {
@@ -206,9 +208,14 @@ export const AppRoutes = () => {
206208
<Route exact path={`/projects/:projectSlug/variables`} component={ProjectVariables} />
207209
<Route exact path={`/projects/:projectSlug/:prebuildId`} component={Prebuild} />
208210

209-
{repoConfigListAndDetail && <Route exact path="/repositories" component={ConfigurationListPage} />}
211+
{configurationsAndPrebuilds && <Route exact path={`/prebuilds`} component={PrebuildListPage} />}
212+
{configurationsAndPrebuilds && (
213+
<Route exact path="/repositories" component={ConfigurationListPage} />
214+
)}
210215
{/* Handles all /repositories/:id/* routes in a nested router */}
211-
{repoConfigListAndDetail && <Route path="/repositories/:id" component={ConfigurationDetailPage} />}
216+
{configurationsAndPrebuilds && (
217+
<Route path="/repositories/:id" component={ConfigurationDetailPage} />
218+
)}
212219
{/* basic redirect for old team slugs */}
213220
<Route path={["/t/"]} exact>
214221
<Redirect to="/projects" />

‎components/dashboard/src/components/forms/TextInputField.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { useId } from "../../hooks/useId";
99
import { InputField } from "./InputField";
1010
import { cn } from "@podkit/lib/cn";
1111

12-
type TextInputFieldTypes = "text" | "password" | "email" | "url";
12+
type TextInputFieldTypes = "text" | "password" | "email" | "url" | "search";
1313

1414
type Props = TextInputProps & {
1515
label?: ReactNode;

‎components/dashboard/src/components/podkit/combobox/Combobox.tsx

+23-10
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import React, { FC, FunctionComponent, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
88
import * as RadixPopover from "@radix-ui/react-popover";
99
import { ChevronDown, CircleDashed } from "lucide-react";
10-
import classNames from "classnames";
10+
import { cn } from "@podkit/lib/cn";
1111

1212
export interface ComboboxElement {
1313
id: string;
@@ -23,6 +23,9 @@ export interface ComboboxProps {
2323
searchPlaceholder?: string;
2424
disableSearch?: boolean;
2525
expanded?: boolean;
26+
className?: string;
27+
dropDownClassName?: string;
28+
itemClassName?: string;
2629
onSelectionChange: (id: string) => void;
2730
// Meant to allow consumers to react to search changes even though state is managed internally
2831
onSearchChange?: (searchString: string) => void;
@@ -37,6 +40,9 @@ export const Combobox: FunctionComponent<ComboboxProps> = ({
3740
getElements,
3841
disableSearch,
3942
children,
43+
className,
44+
dropDownClassName,
45+
itemClassName,
4046
onSelectionChange,
4147
onSearchChange,
4248
}) => {
@@ -173,7 +179,7 @@ export const Combobox: FunctionComponent<ComboboxProps> = ({
173179
<RadixPopover.Root defaultOpen={expanded} open={showDropDown} onOpenChange={handleOpenChange}>
174180
<RadixPopover.Trigger
175181
disabled={disabled}
176-
className={classNames(
182+
className={cn(
177183
"w-full h-16 bg-pk-surface-secondary flex flex-row items-center justify-start px-2 text-left",
178184
// when open, just have border radius on top
179185
showDropDown ? "rounded-none rounded-t-lg" : "rounded-lg",
@@ -183,12 +189,13 @@ export const Combobox: FunctionComponent<ComboboxProps> = ({
183189
!showDropDown && !disabled && "hover:bg-pk-surface-tertiary cursor-pointer",
184190
// opacity when disabled
185191
disabled && "opacity-70",
192+
className,
186193
)}
187194
>
188195
{children}
189196
<div className="flex-grow" />
190197
<div
191-
className={classNames(
198+
className={cn(
192199
"mr-2 text-pk-content-secondary transition-transform",
193200
showDropDown && "rotate-180 transition-all",
194201
)}
@@ -198,10 +205,11 @@ export const Combobox: FunctionComponent<ComboboxProps> = ({
198205
</RadixPopover.Trigger>
199206
<RadixPopover.Portal>
200207
<RadixPopover.Content
201-
className={classNames(
208+
className={cn(
202209
"rounded-b-lg p-2 filter drop-shadow-xl z-50 outline-none",
203210
"bg-pk-surface-secondary",
204211
"w-[--radix-popover-trigger-width]",
212+
dropDownClassName,
205213
)}
206214
onKeyDown={onKeyDown}
207215
>
@@ -237,6 +245,7 @@ export const Combobox: FunctionComponent<ComboboxProps> = ({
237245
key={element.id}
238246
element={element}
239247
isActive={element.id === selectedElementTemp}
248+
className={itemClassName}
240249
onSelected={onSelected}
241250
onFocused={setActiveElement}
242251
/>
@@ -256,11 +265,12 @@ export const Combobox: FunctionComponent<ComboboxProps> = ({
256265

257266
type ComboboxSelectedItemProps = {
258267
// Either a string of the icon source or an element
259-
icon: ReactNode;
268+
icon?: ReactNode;
260269
loading?: boolean;
261270
title: ReactNode;
262-
subtitle: ReactNode;
271+
subtitle?: ReactNode;
263272
htmlTitle?: string;
273+
titleClassName?: string;
264274
};
265275

266276
export const ComboboxSelectedItem: FC<ComboboxSelectedItemProps> = ({
@@ -269,10 +279,11 @@ export const ComboboxSelectedItem: FC<ComboboxSelectedItemProps> = ({
269279
title,
270280
subtitle,
271281
htmlTitle,
282+
titleClassName,
272283
}) => {
273284
return (
274285
<div
275-
className={classNames("flex items-center truncate", loading && "animate-pulse")}
286+
className={cn("flex items-center truncate", loading && "animate-pulse")}
276287
title={htmlTitle}
277288
aria-live="polite"
278289
aria-busy={loading}
@@ -292,7 +303,7 @@ export const ComboboxSelectedItem: FC<ComboboxSelectedItemProps> = ({
292303
</div>
293304
) : (
294305
<>
295-
<div className="text-pk-content-secondary font-semibold">{title}</div>
306+
<div className={cn("text-pk-content-secondary font-semibold", titleClassName)}>{title}</div>
296307
<div className="text-xs text-pk-content-tertiary truncate">{subtitle}</div>
297308
</>
298309
)}
@@ -304,22 +315,24 @@ export const ComboboxSelectedItem: FC<ComboboxSelectedItemProps> = ({
304315
type ComboboxItemProps = {
305316
element: ComboboxElement;
306317
isActive: boolean;
318+
className?: string;
307319
onSelected: (id: string) => void;
308320
onFocused: (id: string) => void;
309321
};
310322

311-
export const ComboboxItem: FC<ComboboxItemProps> = ({ element, isActive, onSelected, onFocused }) => {
323+
export const ComboboxItem: FC<ComboboxItemProps> = ({ element, isActive, className, onSelected, onFocused }) => {
312324
let selectionClasses = `bg-pk-surface-tertiary/25 cursor-pointer`;
313325
if (isActive) {
314326
selectionClasses = `bg-pk-content-tertiary/10 cursor-pointer focus:outline-none focus:ring-0`;
315327
}
316328
if (!element.isSelectable) {
317329
selectionClasses = ``;
318330
}
331+
319332
return (
320333
<li
321334
id={element.id}
322-
className={"h-min rounded-lg flex items-center px-2 py-1.5 " + selectionClasses}
335+
className={cn("h-min rounded-lg flex items-center px-2 py-1.5", selectionClasses, className)}
323336
onMouseDown={() => {
324337
if (element.isSelectable) {
325338
onSelected(element.id);

‎components/dashboard/src/components/podkit/tables/SortableTable.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,12 @@ import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
1111
import { cn } from "@podkit/lib/cn";
1212

1313
export type TableSortOrder = "asc" | "desc";
14+
export type SortCallback = (sortBy: string, sortOrder: TableSortOrder) => void;
1415

1516
export type SortableTableHeadProps = {
1617
columnName: string;
1718
sortOrder?: TableSortOrder;
18-
onSort: (sortBy: string, sortOrder: TableSortOrder) => void;
19+
onSort: SortCallback;
1920
} & HideableCellProps;
2021
export const SortableTableHead = React.forwardRef<
2122
HTMLTableCellElement,

‎components/dashboard/src/data/configurations/configuration-queries.ts

+23-7
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
ConfigurationEnvironmentVariable,
1717
EnvironmentVariableAdmission,
1818
} from "@gitpod/public-api/lib/gitpod/v1/envvar_pb";
19+
import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
1920

2021
const BASE_KEY = "configurations";
2122

@@ -32,7 +33,7 @@ export const useListConfigurations = (options: ListConfigurationsArgs) => {
3233
const { searchTerm = "", prebuildsEnabled, pageSize, sortBy, sortOrder } = options;
3334

3435
return useInfiniteQuery(
35-
getListConfigurationsQueryKey(org?.id || "", options),
36+
getListConfigurationsQueryKey(org?.id ?? "", options),
3637
// QueryFn receives the past page's pageParam as it's argument
3738
async ({ pageParam: nextToken }) => {
3839
if (!org) {
@@ -83,13 +84,28 @@ export const getListConfigurationsVariablesQueryKey = (configurationId: string)
8384
};
8485

8586
export const useConfiguration = (configurationId: string) => {
86-
return useQuery<Configuration | undefined, Error>(getConfigurationQueryKey(configurationId), async () => {
87-
const { configuration } = await configurationClient.getConfiguration({
88-
configurationId,
89-
});
87+
return useQuery<Configuration | undefined, Error>(
88+
getConfigurationQueryKey(configurationId),
89+
async () => {
90+
const { configuration } = await configurationClient.getConfiguration({
91+
configurationId,
92+
});
9093

91-
return configuration;
92-
});
94+
return configuration;
95+
},
96+
{
97+
retry: (failureCount, error) => {
98+
if (failureCount > 3) {
99+
return false;
100+
}
101+
102+
if (error && [ErrorCodes.NOT_FOUND, ErrorCodes.PERMISSION_DENIED].includes((error as any).code)) {
103+
return false;
104+
}
105+
return true;
106+
},
107+
},
108+
);
93109
};
94110

95111
type DeleteConfigurationArgs = {

‎components/dashboard/src/data/featureflag-query.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,7 @@ const featureFlags = {
2727
newProjectIncrementalRepoSearchBBS: false,
2828
repositoryFinderSearch: false,
2929
createProjectModal: false,
30-
repoConfigListAndDetail: false,
31-
showRepoConfigMenuItem: false,
30+
configurationsAndPrebuilds: false,
3231
/**
3332
* Whether to enable org-level workspace class restrictions
3433
*/
@@ -82,6 +81,10 @@ export const useIsDataOps = () => {
8281
return useFeatureFlag("dataops");
8382
};
8483

84+
export const useHasConfigurationsAndPrebuildsEnabled = () => {
85+
return useFeatureFlag("configurationsAndPrebuilds");
86+
};
87+
8588
export const useReportDashboardLoggingTracing = () => {
8689
const enabled = useDedicatedFeatureFlag("dashboard_logging_tracing");
8790

‎components/dashboard/src/data/prebuilds/organization-prebuilds-query.ts

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/**
2+
* Copyright (c) 2024 Gitpod GmbH. All rights reserved.
3+
* Licensed under the GNU Affero General Public License (AGPL).
4+
* See License.AGPL.txt in the project root for license information.
5+
*/
6+
7+
import { useInfiniteQuery } from "@tanstack/react-query";
8+
import { prebuildClient } from "../../service/public-api";
9+
import { ListOrganizationPrebuildsRequest_Filter } from "@gitpod/public-api/lib/gitpod/v1/prebuild_pb";
10+
import { useCurrentOrg } from "../organizations/orgs-query";
11+
import { PartialMessage, PlainMessage } from "@bufbuild/protobuf";
12+
import type { DeepPartial } from "@gitpod/gitpod-protocol/lib/util/deep-partial";
13+
import { Sort } from "@gitpod/public-api/lib/gitpod/v1/sorting_pb";
14+
15+
type Args = {
16+
filter: DeepPartial<PlainMessage<ListOrganizationPrebuildsRequest_Filter>>;
17+
sort: PartialMessage<Sort>;
18+
pageSize: number;
19+
};
20+
export const useListOrganizationPrebuildsQuery = ({ filter, pageSize, sort }: Args) => {
21+
const { data: org } = useCurrentOrg();
22+
23+
return useInfiniteQuery(
24+
getListConfigurationsPrebuildsQueryKey(org?.id ?? "", { filter, pageSize, sort }),
25+
async ({ pageParam: nextToken }) => {
26+
if (!org) {
27+
throw new Error("No org currently selected");
28+
}
29+
30+
const { prebuilds, pagination } = await prebuildClient.listOrganizationPrebuilds({
31+
organizationId: org.id,
32+
filter,
33+
sort: [sort],
34+
pagination: { pageSize, token: nextToken },
35+
});
36+
return {
37+
prebuilds,
38+
pagination,
39+
};
40+
},
41+
{
42+
enabled: !!org,
43+
keepPreviousData: true,
44+
getNextPageParam: (lastPage) => {
45+
// Must ensure we return undefined if there are no more pages
46+
return lastPage.pagination?.nextToken || undefined;
47+
},
48+
},
49+
);
50+
};
51+
52+
export const getListConfigurationsPrebuildsQueryKey = (orgId: string, opts: Args) => {
53+
return ["prebuilds", "list", orgId, opts];
54+
};

‎components/dashboard/src/menu/OrganizationSelector.tsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { useCurrentUser } from "../user-context";
1111
import { useCurrentOrg, useOrganizations } from "../data/organizations/orgs-query";
1212
import { useLocation } from "react-router";
1313
import { useOrgBillingMode } from "../data/billing-mode/org-billing-mode-query";
14-
import { useFeatureFlag } from "../data/featureflag-query";
14+
import { useHasConfigurationsAndPrebuildsEnabled } from "../data/featureflag-query";
1515
import { useIsOwner, useListOrganizationMembers, useHasRolePermission } from "../data/organizations/members-query";
1616
import { isOrganizationOwned } from "@gitpod/public-api-common/lib/user-utils";
1717
import { OrganizationRole } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
@@ -25,15 +25,14 @@ export default function OrganizationSelector() {
2525
const hasMemberPermission = useHasRolePermission(OrganizationRole.MEMBER);
2626
const { data: billingMode } = useOrgBillingMode();
2727
const getOrgURL = useGetOrgURL();
28-
const repoConfigListAndDetail = useFeatureFlag("repoConfigListAndDetail");
29-
const showRepoConfigMenuItem = useFeatureFlag("showRepoConfigMenuItem");
28+
const configurationsAndPrebuilds = useHasConfigurationsAndPrebuildsEnabled();
3029

3130
// we should have an API to ask for permissions, until then we duplicate the logic here
3231
const canCreateOrgs = user && !isOrganizationOwned(user);
3332

3433
const userFullName = user?.name || "...";
3534

36-
let activeOrgEntry = !currentOrg.data
35+
const activeOrgEntry = !currentOrg.data
3736
? {
3837
title: userFullName,
3938
customContent: <CurrentOrgEntry title={userFullName} subtitle="Personal Account" />,
@@ -61,14 +60,21 @@ export default function OrganizationSelector() {
6160
// collaborator can't access projects, members, usage and billing
6261
if (hasMemberPermission) {
6362
// Check both flags as one just controls if the menu item is present, the other if the page is accessible
64-
if (repoConfigListAndDetail && showRepoConfigMenuItem) {
63+
if (configurationsAndPrebuilds) {
6564
linkEntries.push({
6665
title: "Repositories",
6766
customContent: <LinkEntry>Repositories</LinkEntry>,
6867
active: false,
6968
separator: false,
7069
link: "/repositories",
7170
});
71+
linkEntries.push({
72+
title: "Prebuilds",
73+
customContent: <LinkEntry>Prebuilds</LinkEntry>,
74+
active: false,
75+
separator: false,
76+
link: "/prebuilds",
77+
});
7278
}
7379
linkEntries.push({
7480
title: "Members",

0 commit comments

Comments
 (0)