[dashboard] Fix queries useOrgSettings/useConfiguration (#19806)

* [dashboard] Fix useConfiguration ("configurationId data is undefined")

* [dashboard] Fix useOrgSettingsQuery.isLoading

Author: geropl

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

@@ -83,22 +83,31 @@ export const getListConfigurationsVariablesQueryKey = (configurationId: string)
     return [BASE_KEY, "variable", "list", { configurationId }];
 };
 
-export const useConfiguration = (configurationId: string) => {
-    return useQuery<Configuration | undefined, Error>(
+export const useConfiguration = (configurationId?: string) => {
+    // As we want to return "undefined" from this query/cache, and useQuery doesn't allow that, we need:
+    //  - use "null" internally/in the cache
+    //  - transform it to "undefined" using the "select" option
+    return useQuery<Configuration | null, Error, Configuration | undefined>(
         getConfigurationQueryKey(configurationId),
         async () => {
             if (!configurationId) {
-                return;
+                return null;
             }
 
             const { configuration } = await configurationClient.getConfiguration({
                 configurationId,
             });
 
-            return configuration;
+            return configuration || null;
         },
         {
+            initialData: null,
+            select: (data) => data || undefined,
             retry: (failureCount, error) => {
+                if (!configurationId) {
+                    return false;
+                }
+
                 if (failureCount > 3) {
                     return false;
                 }
@@ -165,8 +174,8 @@ export const useConfigurationMutation = () => {
     });
 };
 
-export const getConfigurationQueryKey = (configurationId: string) => {
-    const key: any[] = [BASE_KEY, { configurationId }];
+export const getConfigurationQueryKey = (configurationId?: string) => {
+    const key: any[] = [BASE_KEY, { configurationId: configurationId || "undefined" }];
 
     return key;
 };

components/dashboard/src/data/ide-options/ide-options-query.ts

@@ -11,7 +11,6 @@ import { DisableScope, Scope } from "../workspaces/workspace-classes-query";
 import { useOrgSettingsQuery } from "../organizations/org-settings-query";
 import { OrganizationSettings } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
 import { useMemo } from "react";
-import { useCurrentOrg } from "../organizations/orgs-query";
 import { useConfiguration } from "../configurations/configuration-queries";
 import { useDeepCompareMemoize } from "use-deep-compare-effect";
 
@@ -67,16 +66,10 @@ interface FilterOptions {
     ignoreScope?: DisableScope[];
 }
 export const useAllowedWorkspaceEditorsMemo = (configurationId: string | undefined, options?: FilterOptions) => {
-    const organizationId = useCurrentOrg().data?.id;
     const { data: orgSettings, isLoading: isLoadingOrgSettings } = useOrgSettingsQuery();
     const { data: installationOptions, isLoading: isLoadingInstallationCls } = useIDEOptions();
-    const { data: configuration, isLoading: isLoadingConfiguration } = useConfiguration(configurationId ?? "");
-    let isLoading = isLoadingOrgSettings || isLoadingInstallationCls || isLoadingConfiguration;
-    if (!organizationId) {
-        // If there's no orgID set (i.e. User onboarding page), isLoadingOrgSettings will always be true
-        // So we will filter it out
-        isLoading = isLoadingInstallationCls || isLoadingConfiguration;
-    }
+    const { data: configuration, isLoading: isLoadingConfiguration } = useConfiguration(configurationId);
+    const isLoading = isLoadingOrgSettings || isLoadingInstallationCls || isLoadingConfiguration;
     const depItems = [
         installationOptions,
         options?.ignoreScope,

components/dashboard/src/data/organizations/org-settings-query.ts

@@ -20,18 +20,18 @@ export function useOrgSettingsQueryInvalidator() {
 
 export function useOrgSettingsQuery() {
     const organizationId = useCurrentOrg().data?.id;
-    return useQuery<OrganizationSettings, Error>(
+    return useQuery<OrganizationSettings | null, Error, OrganizationSettings | undefined>(
         getQueryKey(organizationId),
         async () => {
             if (!organizationId) {
-                throw new Error("No org selected.");
+                return null;
             }
 
             const settings = await organizationClient.getOrganizationSettings({ organizationId });
             return settings.settings || new OrganizationSettings();
         },
         {
-            enabled: !!organizationId,
+            select: (data) => data || undefined,
         },
     );
 }

components/dashboard/src/data/workspaces/workspace-classes-query.ts

@@ -120,7 +120,7 @@ export const useAllowedWorkspaceClassesMemo = (
     const { data: orgSettings, isLoading: isLoadingOrgSettings } = useOrgSettingsQuery();
     const { data: installationClasses, isLoading: isLoadingInstallationCls } = useWorkspaceClasses();
     // empty configurationId will return undefined
-    const { data: configuration, isLoading: isLoadingConfiguration } = useConfiguration(configurationId ?? "");
+    const { data: configuration, isLoading: isLoadingConfiguration } = useConfiguration(configurationId);
 
     const isLoading = isLoadingOrgSettings || isLoadingInstallationCls || isLoadingConfiguration;
 

components/dashboard/src/prebuilds/list/RunPrebuildModal.tsx

@@ -43,7 +43,7 @@ export const RunPrebuildModal: FC<Props> = ({ defaultRepositoryId: defaultConfig
         data: prebuildId,
     } = useTriggerPrebuildQuery(configurationId, branchName);
 
-    const { data: configuration } = useConfiguration(configurationId ?? "");
+    const { data: configuration } = useConfiguration(configurationId);
 
     const handleSubmit = useCallback(() => {
         if (!configurationId) {