default orgGitAuthProviders to true for dedicated (#17007)

* default orgGitAuthProviders to true for dedicated

* restrict dupliate auth provider by host for org

* remove restriction on host for orgs

* add disabled select styles

* update copy and clean host value better

* keep constraint there for now

* adding userGitAuthProviders flag

Author: selfcontained

components/dashboard/src/contexts/FeatureFlagContext.tsx

@@ -26,7 +26,9 @@ const defaultFeatureFlags = {
     usePublicApiWorkspacesService: false,
     enablePersonalAccessTokens: false,
     oidcServiceEnabled: false,
-    orgGitAuthProviders: false,
+    // Default to true to enable on gitpod dedicated until ff support is added for dedicated
+    orgGitAuthProviders: true,
+    userGitAuthProviders: false,
     switchToPAYG: false,
     newSignupFlow: false,
 };
@@ -46,6 +48,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
     const [usePublicApiWorkspacesService, setUsePublicApiWorkspacesService] = useState<boolean>(false);
     const [oidcServiceEnabled, setOidcServiceEnabled] = useState<boolean>(false);
     const [orgGitAuthProviders, setOrgGitAuthProviders] = useState<boolean>(false);
+    const [userGitAuthProviders, setUserGitAuthProviders] = useState<boolean>(false);
     const [switchToPAYG, setSwitchToPAYG] = useState<boolean>(false);
     const [newSignupFlow, setNewSignupFlow] = useState<boolean>(false);
 
@@ -63,7 +66,9 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
                     setter: setUsePublicApiWorkspacesService,
                 },
                 oidcServiceEnabled: { defaultValue: false, setter: setOidcServiceEnabled },
-                orgGitAuthProviders: { defaultValue: false, setter: setOrgGitAuthProviders },
+                // Default to true to enable on gitpod dedicated until ff support is added for dedicated
+                orgGitAuthProviders: { defaultValue: true, setter: setOrgGitAuthProviders },
+                userGitAuthProviders: { defaultValue: false, setter: setUserGitAuthProviders },
                 switchToPAYG: { defaultValue: false, setter: setSwitchToPAYG },
                 newSignupFlow: { defaultValue: false, setter: setNewSignupFlow },
             };
@@ -112,6 +117,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
             usePublicApiWorkspacesService,
             oidcServiceEnabled,
             orgGitAuthProviders,
+            userGitAuthProviders,
             newSignupFlow,
             switchToPAYG,
         };
@@ -126,6 +132,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
         startWithOptions,
         switchToPAYG,
         usePublicApiWorkspacesService,
+        userGitAuthProviders,
     ]);
 
     return <FeatureFlagContext.Provider value={flags}>{children}</FeatureFlagContext.Provider>;

components/dashboard/src/index.css

@@ -110,6 +110,7 @@
     select.error {
         @apply border-gitpod-red dark:border-gitpod-red focus:border-gitpod-red dark:focus:border-gitpod-red;
     }
+    select[disabled],
     textarea[disabled],
     input[disabled] {
         @apply bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-400 dark:text-gray-500;

components/dashboard/src/teams/git-integrations/GitIntegrationListItem.tsx

@@ -23,7 +23,7 @@ export const GitIntegrationListItem: FunctionComponent<Props> = ({ provider }) =
     const menuEntries = useMemo(() => {
         const result: ContextMenuEntry[] = [];
         result.push({
-            title: provider.status === "verified" ? "Edit Configuration" : "Activate Integration",
+            title: provider.status === "verified" ? "Edit" : "Activate",
             onClick: () => setShowEditModal(true),
             separator: true,
         });

components/dashboard/src/teams/git-integrations/GitIntegrationModal.tsx

@@ -6,13 +6,13 @@
 
 import { AuthProviderEntry } from "@gitpod/gitpod-protocol";
 import { FunctionComponent, useCallback, useMemo, useState } from "react";
-import Alert from "../../components/Alert";
 import { Button } from "../../components/Button";
 import { InputField } from "../../components/forms/InputField";
 import { SelectInputField } from "../../components/forms/SelectInputField";
 import { TextInputField } from "../../components/forms/TextInputField";
 import { InputWithCopy } from "../../components/InputWithCopy";
 import Modal, { ModalBody, ModalFooter, ModalFooterAlert, ModalHeader } from "../../components/Modal";
+import { Subheading } from "../../components/typography/headings";
 import { useInvalidateOrgAuthProvidersQuery } from "../../data/auth-providers/org-auth-providers-query";
 import { useUpsertOrgAuthProviderMutation } from "../../data/auth-providers/upsert-org-auth-provider-mutation";
 import { useCurrentOrg } from "../../data/organizations/orgs-query";
@@ -37,15 +37,14 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
 
     // This is a readonly value to copy and plug into external oauth config
     const redirectURL = useMemo(() => {
-        // Default to an example
-        let url = callbackUrl("gitlab.example.com");
+        let url = "";
 
         // Once it's saved, use what's stored
         if (!isNew) {
             url = savedProvider?.oauth.callBackUrl ?? url;
         } else {
-            // Otherwise construct it w/ their provided host value
-            url = callbackUrl(host);
+            // Otherwise construct it w/ their provided host value or example
+            url = callbackUrl(host || "gitlab.example.com");
         }
 
         return url;
@@ -79,9 +78,7 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
     const hostOnBlur = useCallback(() => {
         hostOnBlurErrorTracking();
 
-        if (host.startsWith("https://")) {
-            setHost(host.replace("https://", ""));
-        }
+        setHost(cleanHost(host));
     }, [host, hostOnBlurErrorTracking]);
 
     // TODO: We could remove this extra state management if we convert the modal into a detail flow w/ it's own route
@@ -116,7 +113,7 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
             const newProvider = await upsertProvider.mutateAsync({
                 provider: isNew
                     ? {
-                          host: host.replace("https://", ""),
+                          host: cleanHost(host),
                           type,
                           clientId: trimmedId,
                           clientSecret: trimmedSecret,
@@ -192,20 +189,20 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
                 return false;
             }}
         >
-            <ModalHeader>{isNew ? "New Git Integration" : "Git Integration"}</ModalHeader>
+            <ModalHeader>{isNew ? "New Git Auth" : "Git Auth"}</ModalHeader>
             <ModalBody>
-                <div className="flex flex-col text-gray-500">
-                    Configure an integration with a self-managed instance of GitLab, GitHub, or Bitbucket.
-                </div>
+                {isNew && (
+                    <Subheading>
+                        Configure Git Auth with a self-managed instance of GitLab, GitHub or Bitbucket Server.
+                    </Subheading>
+                )}
 
                 <div>
-                    {isNew && (
-                        <SelectInputField label="Provider Type" value={type} onChange={setType}>
-                            <option value="GitHub">GitHub</option>
-                            <option value="GitLab">GitLab</option>
-                            <option value="BitbucketServer">Bitbucket Server</option>
-                        </SelectInputField>
-                    )}
+                    <SelectInputField disabled={!isNew} label="Provider Type" value={type} onChange={setType}>
+                        <option value="GitHub">GitHub</option>
+                        <option value="GitLab">GitLab</option>
+                        <option value="BitbucketServer">Bitbucket Server</option>
+                    </SelectInputField>
                     <TextInputField
                         label="Provider Host Name"
                         value={host}
@@ -247,7 +244,7 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
                             !isNew &&
                             savedProvider?.status !== "verified" && (
                                 <ModalFooterAlert type="warning" closable={false}>
-                                    You need to activate this integration.
+                                    You need to activate this configuration.
                                 </ModalFooterAlert>
                             )
                         )}
@@ -258,7 +255,7 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
                     Cancel
                 </Button>
                 <Button onClick={activate} disabled={!isValid || savingProvider} loading={savingProvider}>
-                    Activate Integration
+                    Activate
                 </Button>
             </ModalFooter>
         </Modal>
@@ -331,3 +328,17 @@ const RedirectUrlDescription: FunctionComponent<RedirectUrlDescriptionProps> = (
         </span>
     );
 };
+
+function cleanHost(host: string) {
+    let cleanedHost = host;
+
+    // Removing https protocol
+    if (host.startsWith("https://")) {
+        cleanedHost = host.replace("https://", "");
+    }
+
+    // Trim any trailing slashes
+    cleanedHost = cleanedHost.replace(/\/$/, "");
+
+    return cleanedHost;
+}

components/dashboard/src/teams/git-integrations/GitIntegrationsList.tsx

@@ -33,7 +33,7 @@ export const GitIntegrationsList: FunctionComponent<Props> = ({ providers }) =>
                 {providers.length !== 0 ? (
                     <div className="">
                         <Button className="whitespace-nowrap" onClick={onCreate}>
-                            New Integration
+                            New Git Auth
                         </Button>
                     </div>
                 ) : null}
@@ -43,7 +43,7 @@ export const GitIntegrationsList: FunctionComponent<Props> = ({ providers }) =>
                 <EmptyMessage
                     title="No Git Auth configurations"
                     subtitle="Configure Git Auth with GitHub or GitLab."
-                    buttonText="New Integration"
+                    buttonText="New Git Auth"
                     onClick={onCreate}
                 />
             ) : (

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

@@ -6,15 +6,19 @@
 
 import { AuthProviderEntry, AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import { SelectAccountPayload } from "@gitpod/gitpod-protocol/lib/auth";
+import { useQuery } from "@tanstack/react-query";
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import Alert from "../components/Alert";
 import CheckBox from "../components/CheckBox";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { ContextMenuEntry } from "../components/ContextMenu";
+import { Delayed } from "../components/Delayed";
 import InfoBox from "../components/InfoBox";
 import { ItemsList } from "../components/ItemsList";
+import { SpinnerLoader } from "../components/Loader";
 import Modal, { ModalBody, ModalHeader, ModalFooter } from "../components/Modal";
 import { Heading2, Subheading } from "../components/typography/headings";
+import { useFeatureFlags } from "../contexts/FeatureFlagContext";
 import copy from "../images/copy.svg";
 import exclamation from "../images/exclamation.svg";
 import { openAuthorizeWindow } from "../provider-utils";
@@ -294,7 +298,6 @@ function GitProviders() {
             )}
 
             {editModal && (
-                // TODO: Use title and buttons props
                 <Modal visible={true} onClose={() => setEditModal(undefined)}>
                     <ModalHeader>Edit Permissions</ModalHeader>
                     <ModalBody>
@@ -340,6 +343,7 @@ function GitProviders() {
                 {authProviders &&
                     authProviders.map((ap) => (
                         <AuthEntryItem
+                            key={ap.authProviderId}
                             isConnected={isConnected}
                             gitProviderMenu={gitProviderMenu}
                             getUsername={getUsername}
@@ -354,8 +358,7 @@ function GitProviders() {
 
 function GitIntegrations() {
     const { user } = useContext(UserContext);
-
-    const [providers, setProviders] = useState<AuthProviderEntry[]>([]);
+    const { userGitAuthProviders } = useFeatureFlags();
 
     const [modal, setModal] = useState<
         | { mode: "new" }
@@ -364,13 +367,15 @@ function GitIntegrations() {
         | undefined
     >(undefined);
 
-    useEffect(() => {
-        updateOwnAuthProviders();
-    }, []);
-
-    const updateOwnAuthProviders = async () => {
-        setProviders(await getGitpodService().server.getOwnAuthProviders());
-    };
+    const {
+        data: providers,
+        isLoading,
+        refetch,
+    } = useQuery(
+        ["own-auth-providers", { userId: user?.id ?? "" }],
+        async () => await getGitpodService().server.getOwnAuthProviders(),
+        { enabled: !!user },
+    );
 
     const deleteProvider = async (provider: AuthProviderEntry) => {
         try {
@@ -379,7 +384,7 @@ function GitIntegrations() {
             console.log(error);
         }
         setModal(undefined);
-        updateOwnAuthProviders();
+        refetch();
     };
 
     const gitProviderMenu = (provider: AuthProviderEntry) => {
@@ -397,14 +402,28 @@ function GitIntegrations() {
         return result;
     };
 
+    if (isLoading) {
+        return (
+            <Delayed>
+                <SpinnerLoader />
+            </Delayed>
+        );
+    }
+
+    // If user has no personal providers and ff is not enabled, don't show anything
+    // Otherwise we show their existing providers w/o ability to create new ones if ff is disabled
+    if ((providers || []).length === 0 && !userGitAuthProviders) {
+        return null;
+    }
+
     return (
         <div>
             {modal?.mode === "new" && (
                 <GitIntegrationModal
                     mode={modal.mode}
                     userId={user?.id || "no-user"}
                     onClose={() => setModal(undefined)}
-                    onUpdate={updateOwnAuthProviders}
+                    onUpdate={refetch}
                 />
             )}
             {modal?.mode === "edit" && (
@@ -413,7 +432,7 @@ function GitIntegrations() {
                     userId={user?.id || "no-user"}
                     provider={modal.provider}
                     onClose={() => setModal(undefined)}
-                    onUpdate={updateOwnAuthProviders}
+                    onUpdate={refetch}
                 />
             )}
             {modal?.mode === "delete" && (
@@ -437,7 +456,8 @@ function GitIntegrations() {
                         Manage Git integrations for self-managed instances of GitLab, GitHub, or Bitbucket.
                     </Subheading>
                 </div>
-                {providers.length !== 0 ? (
+                {/* Hide create button if ff is disabled */}
+                {userGitAuthProviders && (providers || []).length !== 0 ? (
                     <div className="mt-3 flex mt-0">
                         <button onClick={() => setModal({ mode: "new" })} className="ml-2">
                             New Integration

components/server/src/auth/auth-provider-service.ts

@@ -123,8 +123,8 @@ export class AuthProviderService {
     }
 
     async createOrgAuthProvider(entry: AuthProviderEntry.NewOrgEntry): Promise<AuthProviderEntry> {
-        // TODO: only restrict existing provider w/ same host if it's the same organization
-        const existing = await this.authProviderDB.findByHost(entry.host);
+        const orgProviders = await this.authProviderDB.findByOrgId(entry.organizationId);
+        const existing = orgProviders.find((p) => p.host === entry.host);
         if (existing) {
             throw new Error("Provider for this host already exists.");
         }