Add persistent volume claim to prebuild settings

Author: sagor999

components/dashboard/src/admin/ProjectDetail.tsx

@@ -63,6 +63,9 @@ export default function ProjectDetail(props: { project: Project; owner: string |
                     <Property name="Incremental Prebuilds">
                         {props.project.settings?.useIncrementalPrebuilds ? "Yes" : "No"}
                     </Property>
+                    <Property name="Persistent Volume Claim">
+                        {props.project.settings?.usePersistentVolumeClaim ? "Yes" : "No"}
+                    </Property>
                     <Property name="Marked Deleted">{props.project.markedDeleted ? "Yes" : "No"}</Property>
                 </div>
             </div>

components/dashboard/src/projects/ProjectSettings.tsx

@@ -13,6 +13,7 @@ import { getCurrentTeam, TeamsContext } from "../teams/teams-context";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
 import PillLabel from "../components/PillLabel";
 import { ProjectContext } from "./project-context";
+import { getExperimentsClient } from "./../experiments/client";
 
 export function getProjectSettingsMenu(project?: Project, team?: Team) {
     const teamOrUserSlug = !!team ? "t/" + team.slug : "projects";
@@ -50,17 +51,37 @@ export function ProjectSettingsPage(props: { project?: Project; children?: React
 
 export default function () {
     const { project } = useContext(ProjectContext);
+    const location = useLocation();
+    const { teams } = useContext(TeamsContext);
+    const team = getCurrentTeam(location, teams);
 
     const [isLoading, setIsLoading] = useState<boolean>(true);
     const [isIncrementalPrebuildsEnabled, setIsIncrementalPrebuildsEnabled] = useState<boolean>(false);
+    const [isPersistentVolumeClaimEnabled, setIsPersistentVolumeClaimEnabled] = useState<boolean>(false);
+    const [isShowPersistentVolumeClaim, setIsShowPersistentVolumeClaim] = useState<boolean>(false);
 
     useEffect(() => {
         if (!project) {
             return;
         }
         setIsLoading(false);
         setIsIncrementalPrebuildsEnabled(!!project.settings?.useIncrementalPrebuilds);
-    }, [project]);
+        setIsPersistentVolumeClaimEnabled(!!project.settings?.usePersistentVolumeClaim);
+
+        (async () => {
+            const showPersistentVolumeClaim = await getExperimentsClient().getValueAsync(
+                "persistent_volume_claim",
+                false,
+                {
+                    projectId: project?.id,
+                    teamId: team?.id,
+                    teamName: team?.name,
+                    teams,
+                },
+            );
+            setIsShowPersistentVolumeClaim(showPersistentVolumeClaim);
+        })();
+    }, [project, team, teams]);
 
     const toggleIncrementalPrebuilds = async () => {
         if (!project) {
@@ -80,6 +101,24 @@ export default function () {
         }
     };
 
+    const togglePersistentVolumeClaim = async () => {
+        if (!project) {
+            return;
+        }
+        setIsLoading(true);
+        try {
+            await getGitpodService().server.updateProjectPartial({
+                id: project.id,
+                settings: {
+                    usePersistentVolumeClaim: !isPersistentVolumeClaimEnabled,
+                },
+            });
+            setIsPersistentVolumeClaimEnabled(!isPersistentVolumeClaimEnabled);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
     return (
         <ProjectSettingsPage project={project}>
             <h3>Incremental Prebuilds</h3>
@@ -106,6 +145,22 @@ export default function () {
                 disabled={isLoading}
                 onChange={toggleIncrementalPrebuilds}
             />
+            <br></br>
+            <h3>Persistent Volume Claim</h3>
+            <CheckBox
+                title={
+                    <span>
+                        Enable Persistent Volume Claim{" "}
+                        <PillLabel type="warn" className="font-semibold mt-2 ml-2 py-0.5 px-2 self-center">
+                            Experimental
+                        </PillLabel>
+                    </span>
+                }
+                desc={<span>Experimental feature that is still under development.</span>}
+                checked={isPersistentVolumeClaimEnabled}
+                disabled={isLoading || !isShowPersistentVolumeClaim}
+                onChange={togglePersistentVolumeClaim}
+            />
         </ProjectSettingsPage>
     );
 }

components/gitpod-protocol/src/teams-projects-protocol.ts

@@ -14,6 +14,7 @@ export interface ProjectConfig {
 
 export interface ProjectSettings {
     useIncrementalPrebuilds?: boolean;
+    usePersistentVolumeClaim?: boolean;
 }
 
 export interface Project {