[dashboard] use workspace class component (#17206)

Author: svenefftinge

components/dashboard/src/components/WorkspaceClass.tsx

@@ -67,11 +67,11 @@ export default function NewProject() {
                 }
             }
         }
-    }, [user, authProviders, selectedProviderHost]);
+    }, [user, authProviders.data, selectedProviderHost]);
 
     useEffect(() => {
         setIsGitHubWebhooksUnauthorized(false);
-        if (!authProviders || !selectedProviderHost || isGitHubAppEnabled) {
+        if (!authProviders.data || !selectedProviderHost || isGitHubAppEnabled) {
             return;
         }
         const ap = authProviders.data?.find((ap) => ap.host === selectedProviderHost);
@@ -85,7 +85,7 @@ export default function NewProject() {
                     setIsGitHubWebhooksUnauthorized(true);
                 }
             });
-    }, [authProviders, isGitHubAppEnabled, selectedProviderHost]);
+    }, [authProviders.data, isGitHubAppEnabled, selectedProviderHost]);
 
     useEffect(() => {
         if (selectedRepo && user) {

components/dashboard/src/projects/NewProject.tsx

@@ -15,11 +15,11 @@ import { PageWithSubMenu } from "../components/PageWithSubMenu";
 import PillLabel from "../components/PillLabel";
 import { useCurrentOrg } from "../data/organizations/orgs-query";
 import { getGitpodService } from "../service/service";
-import SelectWorkspaceClass from "../user-settings/selectClass";
 import { ProjectContext, useCurrentProject } from "./project-context";
 import { getProjectSettingsMenu, getProjectTabs } from "./projects.routes";
 import { Heading2, Subheading } from "../components/typography/headings";
 import { RemoveProjectModal } from "./RemoveProjectModal";
+import SelectWorkspaceClassComponent from "../components/SelectWorkspaceClassComponent";
 
 export function ProjectSettingsPage(props: { project?: Project; children?: React.ReactNode }) {
     return (
@@ -97,10 +97,12 @@ export default function ProjectSettingsView() {
             <Heading2>Prebuilds</Heading2>
             <Subheading>Choose the workspace machine type for your prebuilds.</Subheading>
             {BillingMode.canSetWorkspaceClass(billingMode) ? (
-                <SelectWorkspaceClass
-                    workspaceClass={project.settings?.workspaceClasses?.prebuild}
-                    setWorkspaceClass={setWorkspaceClassForPrebuild}
-                />
+                <div className="max-w-md">
+                    <SelectWorkspaceClassComponent
+                        selectedWorkspaceClass={project.settings?.workspaceClasses?.prebuild}
+                        onSelectionChange={setWorkspaceClassForPrebuild}
+                    />
+                </div>
             ) : (
                 <Alert type="message" className="mt-4">
                     <div className="flex flex-col">
@@ -201,10 +203,12 @@ export default function ProjectSettingsView() {
                 <Heading2 className="mt-12">Workspaces</Heading2>
                 <Subheading>Choose the workspace machine type for your workspaces.</Subheading>
                 {BillingMode.canSetWorkspaceClass(billingMode) ? (
-                    <SelectWorkspaceClass
-                        workspaceClass={project.settings?.workspaceClasses?.regular}
-                        setWorkspaceClass={setWorkspaceClass}
-                    />
+                    <div className="max-w-md">
+                        <SelectWorkspaceClassComponent
+                            selectedWorkspaceClass={project.settings?.workspaceClasses?.regular}
+                            onSelectionChange={setWorkspaceClass}
+                        />
+                    </div>
                 ) : (
                     <Alert type="message" className="mt-4">
                         <div className="flex flex-col">

components/dashboard/src/projects/ProjectSettings.tsx

@@ -70,7 +70,7 @@ function GitProviders() {
             }
             setAllScopes(scopesByProvider);
         }
-    }, [authProviders, user]);
+    }, [authProviders.data, user]);
 
     useEffect(() => {
         updateCurrentScopes();

components/dashboard/src/user-settings/Integrations.tsx

@@ -389,7 +389,7 @@ function renderError(message: string, linkText?: string, linkHref?: string, link
 export function RepositoryNotFound(p: { error: StartWorkspaceError }) {
     const { host, owner, userIsOwner, userScopes, lastUpdate } = p.error.data;
     const authProviders = useAuthProviders();
-    const authProvider = authProviders?.data?.find((a) => a.host === host);
+    const authProvider = authProviders.data?.find((a) => a.host === host);
     if (!authProvider) {
         return null;
     }