Org SSO Page updates (#16868)

* Breaking SSO page into components & react-query

* wrapper component not needed anymore

* position off of bottom instead

* add a heading/subheading for consistency

* add clientside validation

* adding oidcConfig.issuer to api response

* updating test

* minor cleanup

Author: selfcontained

components/dashboard/src/components/Modal.tsx

@@ -150,7 +150,7 @@ export const ModalFooter: FC<ModalFooterProps> = ({ error, warning, children })
     return (
         <div className="relative">
             {hasAlert && (
-                <div className="absolute -top-12 left-0 right-0" style={alertStyles}>
+                <div className="absolute bottom-12 left-0 right-0" style={alertStyles}>
                     <ModalFooterAlert error={error} warning={warning} />
                 </div>
             )}

components/dashboard/src/data/oidc-clients/delete-oidc-client-mutation.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { oidcService } from "../../service/public-api";
+import { useCurrentOrg } from "../organizations/orgs-query";
+import { getOIDCClientsQueryKey, OIDCClientsQueryResults } from "./oidc-clients-query";
+
+type DeleteOIDCClientArgs = {
+    clientId: string;
+};
+export const useDeleteOIDCClientMutation = () => {
+    const queryClient = useQueryClient();
+    const organization = useCurrentOrg().data;
+
+    return useMutation({
+        mutationFn: async ({ clientId }: DeleteOIDCClientArgs) => {
+            if (!organization) {
+                throw new Error("No current organization selected");
+            }
+
+            return await oidcService.deleteClientConfig({
+                id: clientId,
+                organizationId: organization.id,
+            });
+        },
+        onSuccess: (_, { clientId }) => {
+            if (!organization) {
+                throw new Error("No current organization selected");
+            }
+
+            const queryKey = getOIDCClientsQueryKey(organization.id);
+            // filter out deleted client immediately
+            queryClient.setQueryData<OIDCClientsQueryResults>(queryKey, (clients) => {
+                return clients?.filter((c) => c.id !== clientId);
+            });
+
+            // then invalidate query
+            queryClient.invalidateQueries({ queryKey });
+        },
+    });
+};

components/dashboard/src/data/oidc-clients/oidc-clients-query.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { OIDCClientConfig } from "@gitpod/public-api/lib/gitpod/experimental/v1/oidc_pb";
+import { useQuery } from "@tanstack/react-query";
+import { oidcService } from "../../service/public-api";
+import { useCurrentOrg } from "../organizations/orgs-query";
+
+export type OIDCClientsQueryResults = OIDCClientConfig[];
+
+export const useOIDCClientsQuery = () => {
+    const { data: organization, isLoading } = useCurrentOrg();
+
+    return useQuery<OIDCClientsQueryResults>({
+        queryKey: getOIDCClientsQueryKey(organization?.id ?? ""),
+        queryFn: async () => {
+            if (!organization) {
+                throw new Error("No current organization selected");
+            }
+
+            const { clientConfigs } = await oidcService.listClientConfigs({ organizationId: organization.id });
+
+            return clientConfigs;
+        },
+        enabled: !isLoading,
+    });
+};
+
+export const getOIDCClientsQueryKey = (organizationId: string) => ["oidc-clients", { organizationId }];

components/dashboard/src/data/oidc-clients/upsert-oidc-client-mutation.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { oidcService } from "../../service/public-api";
+import { getOIDCClientsQueryKey } from "./oidc-clients-query";
+
+// TODO: find a better way to type this against the API
+type UpsertOIDCClientMutationArgs =
+    | Parameters<typeof oidcService.updateClientConfig>[0]
+    | Parameters<typeof oidcService.createClientConfig>[0];
+
+export const useUpsertOIDCClientMutation = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: async ({ config = {} }: UpsertOIDCClientMutationArgs) => {
+            if ("id" in config) {
+                return await oidcService.updateClientConfig({
+                    config,
+                });
+            } else {
+                return await oidcService.createClientConfig({
+                    config,
+                });
+            }
+        },
+        onSuccess(resp, { config = {} }) {
+            if (!config || !config.organizationId) {
+                return;
+            }
+
+            queryClient.invalidateQueries({ queryKey: getOIDCClientsQueryKey(config.organizationId || "") });
+        },
+    });
+};

components/dashboard/src/teams/GitIntegrationsPage.tsx

@@ -4,48 +4,13 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { FunctionComponent } from "react";
-import { Redirect } from "react-router";
-import Header from "../components/Header";
-import { SpinnerLoader } from "../components/Loader";
-import { useCurrentOrg } from "../data/organizations/orgs-query";
 import { GitIntegrations } from "./git-integrations/GitIntegrations";
 import { OrgSettingsPage } from "./OrgSettingsPage";
 
-export default function GitAuth() {
+export default function GitAuthPage() {
     return (
-        <OrgSettingsPageWrapper>
+        <OrgSettingsPage title="Git Auth" subtitle="Configure Git Auth for GitLab or Github.">
             <GitIntegrations />
-        </OrgSettingsPageWrapper>
-    );
-}
-
-// TODO: Refactor this into OrgSettingsPage so each page doesn't have to do this
-export const OrgSettingsPageWrapper: FunctionComponent = ({ children }) => {
-    const currentOrg = useCurrentOrg();
-
-    const title = "Git Auth";
-    const subtitle = "Configure Git Auth for GitLab, or Github.";
-
-    // Render as much of the page as we can in a loading state to avoid content shift
-    if (currentOrg.isLoading) {
-        return (
-            <div className="w-full">
-                <Header title={title} subtitle={subtitle} />
-                <div className="w-full">
-                    <SpinnerLoader />
-                </div>
-            </div>
-        );
-    }
-
-    if (!currentOrg.data?.isOwner) {
-        return <Redirect to={"/"} />;
-    }
-
-    return (
-        <OrgSettingsPage title={title} subtitle={subtitle}>
-            {children}
         </OrgSettingsPage>
     );
-};
+}