Add "Enable Prebuilds" to Project Settings – EXP-573 (#18698)

* cleanup: remove obsolete remainings of /prebuild prefix

* Add Project.settings.enablePrebuilds

* PrebuildManager.shouldPrebuild to consider Project.settings.enablePrebuilds

* Don't install webhooks on project creation

* foreseeable change: don't prefetch project details

* fix: unused imports

* redirect to project settings on project created

* don't trigger prebuilds on project created

* fix: get rid of many ListProjects requests on Settings page

* Project Settings: add checkbox for "enable prebuilds"

* handle "enable prebuilds" in server

* updating PAPI

* fixup

* fixup

* make PrebuildManager require a Project to work on

* also SCM webhook handlers
* move project usage registration to PrebuildManager

* address feedback on useListProjectsQuery and  useCurrentProject

* remove empty class name attributes

* make use of <InputField> as wrapper for <SelectWorkspaceClassComponent>

* fixup <SelectWorkspaceClassComponent> width

* update hint on "Enable Prebuilds" action

Co-authored-by: George Tsiolis <[email protected]>

* fix "enablePrebuild" handling

* add [Enable Prebuilds] button to "Project Created" page

* show detailed prebuild setting only if prebuilds are enabled

* drive-by: fix max width on "Remove Project"

* fix: re-add `loading` state to `useCurrentProject` hook

this caused an issue with loading components as `useListProjectsQuery.isLoading` is false initially.

* add "Enable Prebuilds" to project card

* fixup project-context.tsx

state should only be updated if `useListProjectsQuery` is loaded.

* fixup button type

* add hint to create a .gitpod.yml

* Apply suggestions from code review

Co-authored-by: George Tsiolis <[email protected]>

* remove unnecessary !

* extract Project.isPrebuildsEnabled

* fixup: add missing await

* render "Learn more" if not enabled, too.

* fix getCloneUrl for BBS

* fix getCloneUrl for GitLab

---------

Co-authored-by: George Tsiolis <[email protected]>

Author: AlexTugarev

components/dashboard/src/components/Header.tsx

@@ -29,7 +29,7 @@ export default function Header(p: HeaderProps) {
     return (
         <div className="app-container border-gray-200 dark:border-gray-800">
             <div className="flex pb-8 pt-6">
-                <div className="">
+                <div>
                     {p.complexTitle ? p.complexTitle : <Heading1 tracking="tight">{p.title}</Heading1>}
                     {typeof p.subtitle === "string" ? (
                         <Subheading tracking="wide">{p.subtitle}</Subheading>

components/dashboard/src/components/forms/InputField.tsx

@@ -15,17 +15,22 @@ type Props = {
     error?: ReactNode;
     topMargin?: boolean;
     className?: string;
+    disabled?: boolean;
 };
 
 export const InputField: FunctionComponent<Props> = memo(
-    ({ label, id, hint, error, topMargin = true, className, children }) => {
+    ({ label, id, hint, error, topMargin = true, className, children, disabled = false }) => {
         return (
             <div className={classNames("flex flex-col space-y-2", { "mt-4": topMargin }, className)}>
                 {label && (
                     <label
                         className={classNames(
-                            "text-md font-semibold dark:text-gray-400",
-                            error ? "text-red-600" : "text-gray-600",
+                            "text-md font-semibold",
+                            disabled
+                                ? "text-gray-400 dark:text-gray-400"
+                                : error
+                                ? "text-red-600 dark:text-red-400"
+                                : "text-gray-600 dark:text-gray-100",
                         )}
                         htmlFor={id}
                     >

components/dashboard/src/data/projects/create-project-mutation.ts

@@ -35,9 +35,6 @@ export const useCreateProject = () => {
                 if (org) {
                     refreshProjects(org.id);
                 }
-
-                // Kick off a prebuild for the new project
-                getGitpodService().server.triggerPrebuild(project.id, null);
             },
         },
     );

components/dashboard/src/data/projects/list-projects-query.ts

@@ -18,7 +18,7 @@ export const useListProjectsQuery = () => {
     const org = useCurrentOrg().data;
     const orgId = org?.id;
     return useQuery<ListProjectsQueryResults>({
-        // Projects are either tied to current team, otherwise current user
+        enabled: !!orgId,
         queryKey: getListProjectsQueryKey(orgId || ""),
         cacheTime: 1000 * 60 * 60 * 1, // 1 hour
         queryFn: async () => {
@@ -57,9 +57,5 @@ export const useRefreshProjects = () => {
 };
 
 export const getListProjectsQueryKey = (orgId: string) => {
-    if (!orgId) {
-        throw new Error("Must provide either an orgId for projects query key");
-    }
-
     return ["projects", "list", { orgId }];
 };

components/dashboard/src/projects/NewProject.tsx

@@ -64,7 +64,7 @@ export default function NewProject() {
                 <Heading1>Project Created</Heading1>
                 <Subheading className="mt-2 text-center">
                     Created{" "}
-                    <a className="gp-link" href={`/projects/${Project.slug(project!)}`}>
+                    <a className="gp-link" href={`/projects/${Project.slug(project)}/settings`}>
                         {project.name}
                     </a>{" "}
                     {!currentTeam ? (
@@ -80,7 +80,12 @@ export default function NewProject() {
                     )}
                 </Subheading>
 
-                <div className="mt-12">
+                <div className="mt-12 flex space-x-2">
+                    <a href={`/projects/${Project.slug(project)}/settings`}>
+                        <Button type="secondary" onClick={onNewWorkspace}>
+                            Enable Prebuilds
+                        </Button>
+                    </a>
                     <Button onClick={onNewWorkspace}>New Workspace</Button>
                 </div>
             </div>

components/dashboard/src/projects/ProjectListItem.tsx

@@ -25,6 +25,12 @@ export const ProjectListItem: FunctionComponent<ProjectListItemProps> = ({ proje
     const [showRemoveModal, setShowRemoveModal] = useState(false);
     const { data: prebuild, isLoading } = useLatestProjectPrebuildQuery({ projectId: project.id });
 
+    const enablePrebuilds =
+        !!project.settings?.enablePrebuilds ||
+        // TODO(at): out of scope for now, but once we've migrated the settings of existings projects
+        // we can remove the implicit enablement here
+        !project.settings;
+
     return (
         <div key={`project-${project.id}`} className="h-52">
             <div className="h-42 border border-gray-100 dark:border-gray-800 rounded-t-xl">
@@ -72,7 +78,16 @@ export const ProjectListItem: FunctionComponent<ProjectListItemProps> = ({ proje
                 </div>
             </div>
             <div className="h-10 px-4 border rounded-b-xl dark:border-gray-800 bg-gray-100 border-gray-100 dark:bg-gray-800">
-                {prebuild ? (
+                {!enablePrebuilds ? (
+                    <div className="flex h-full text-sm">
+                        <Link
+                            to={`/projects/${Project.slug(project!)}/settings`}
+                            className="flex-shrink-0 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                        >
+                            Enable Prebuilds &rarr;
+                        </Link>
+                    </div>
+                ) : prebuild ? (
                     <div className="flex flex-row h-full text-sm space-x-4">
                         <Link
                             to={`/projects/${Project.slug(project!)}/${prebuild?.info?.id}`}
@@ -100,11 +115,11 @@ export const ProjectListItem: FunctionComponent<ProjectListItemProps> = ({ proje
                         </Link>
                     </div>
                 ) : isLoading ? (
-                    <div className="flex h-full text-md">
+                    <div className="flex h-full text-sm">
                         <p className="my-auto ">...</p>
                     </div>
                 ) : (
-                    <div className="flex h-full text-md">
+                    <div className="flex h-full text-sm">
                         <p className="my-auto ">No recent prebuilds</p>
                     </div>
                 )}