PROD-2366 - Admin UI for Managing OpenID Providers

clients/admin-ui/src/features/auth/auth.slice.ts

@@ -9,6 +9,7 @@ import { RoleRegistryEnum, ScopeRegistryEnum } from "~/types/api";
 import {
   LoginRequest,
   LoginResponse,
+  LoginWithOIDCRequest,
   LogoutRequest,
   LogoutResponse,
 } from "./types";
@@ -58,6 +59,13 @@ const authApi = baseApi.injectEndpoints({
       }),
       invalidatesTags: () => ["Auth"],
     }),
+    loginWithOIDC: build.mutation<LoginResponse, LoginWithOIDCRequest>({
+      query: (data) => ({
+        url: `plus/openid-provider/${data.provider}/callback?code=${data.code}`,
+        method: "GET",
+      }),
+      invalidatesTags: () => ["Auth"],
+    }),
     logout: build.mutation<LogoutResponse, LogoutRequest>({
       query: () => ({
         url: "logout",
@@ -85,6 +93,7 @@ const authApi = baseApi.injectEndpoints({
 
 export const {
   useLoginMutation,
+  useLoginWithOIDCMutation,
   useLogoutMutation,
   useAcceptInviteMutation,
   useGetRolesToScopesMappingQuery,

clients/admin-ui/src/features/auth/types.ts

@@ -5,6 +5,11 @@ export interface LoginRequest {
   password: string;
 }
 
+export interface LoginWithOIDCRequest {
+  provider: string;
+  code: string;
+}
+
 export interface LoginResponse {
   user_data: User;
   token_data: {

clients/admin-ui/src/features/common/api.slice.ts

@@ -61,6 +61,7 @@ export const baseApi = createApi({
     "Configuration Settings",
     "TCF Purpose Override",
     "Consent Reporting",
+    "OpenID Provider",
   ],
   endpoints: () => ({}),
 });

clients/admin-ui/src/features/common/nav/v2/routes.ts

@@ -55,3 +55,6 @@ export const GLOBAL_CONSENT_CONFIG_ROUTE = "/settings/consent";
 export const MESSAGING_ROUTE = "/messaging";
 export const MESSAGING_ADD_TEMPLATE_ROUTE = "/messaging/add-template";
 export const MESSAGING_EDIT_ROUTE = "/messaging/[id]";
+
+// OpenID Authentication group
+export const OPENID_AUTHENTICATION_ROUTE = "/settings/openid-authentication";

clients/admin-ui/src/features/openid-authentication/AddSSOProviderModal.tsx

@@ -0,0 +1,15 @@
+import { UseDisclosureReturn } from "fidesui";
+
+import AddModal from "~/features/configure-consent/AddModal";
+import SSOProviderForm from "~/features/openid-authentication/SSOProviderForm";
+
+const AddSSOProviderModal = ({
+  isOpen,
+  onClose,
+}: Pick<UseDisclosureReturn, "isOpen" | "onClose">) => (
+  <AddModal isOpen={isOpen} onClose={onClose} title="Add SSO Provider">
+    <SSOProviderForm onClose={onClose} />
+  </AddModal>
+);
+
+export default AddSSOProviderModal;

clients/admin-ui/src/features/openid-authentication/EditSSOProviderModal.tsx

@@ -0,0 +1,19 @@
+import AddModal from "~/features/configure-consent/AddModal";
+import SSOProviderForm from "~/features/openid-authentication/SSOProviderForm";
+import { OpenIDProvider } from "~/types/api/models/OpenIDProvider";
+
+const EditSSOProviderModal = ({
+  isOpen,
+  onClose,
+  openIDProvider,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  openIDProvider: OpenIDProvider;
+}) => (
+  <AddModal isOpen={isOpen} onClose={onClose} title="Edit SSO Provider">
+    <SSOProviderForm openIDProvider={openIDProvider} onClose={onClose} />
+  </AddModal>
+);
+
+export default EditSSOProviderModal;

clients/admin-ui/src/features/openid-authentication/SSOProvider.tsx

@@ -0,0 +1,112 @@
+import {
+  Box,
+  Button,
+  ConfirmationModal,
+  Image,
+  Text,
+  useDisclosure,
+  useToast,
+} from "fidesui";
+
+import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
+import { errorToastParams, successToastParams } from "~/features/common/toast";
+import EditSSOProviderModal from "~/features/openid-authentication/EditSSOProviderModal";
+import { useDeleteOpenIDProviderMutation } from "~/features/openid-authentication/openprovider.slice";
+import { OpenIDProvider } from "~/types/api/models/OpenIDProvider";
+
+const SSOProvider = ({
+  openIDProvider,
+}: {
+  openIDProvider: OpenIDProvider;
+}) => {
+  const { onOpen, isOpen, onClose } = useDisclosure();
+  const {
+    isOpen: deleteIsOpen,
+    onOpen: onDeleteOpen,
+    onClose: onDeleteClose,
+  } = useDisclosure();
+  const toast = useToast();
+
+  const [deleteOpenIDProviderMutation] = useDeleteOpenIDProviderMutation();
+
+  const handleDelete = async () => {
+    const result = await deleteOpenIDProviderMutation(openIDProvider.id);
+    if (isErrorResult(result)) {
+      toast(errorToastParams(getErrorMessage(result.error)));
+      onDeleteClose();
+      return;
+    }
+
+    toast(successToastParams(`OpenID Provider deleted successfully`));
+
+    onDeleteClose();
+  };
+
+  return (
+    <Box
+      alignItems="center"
+      borderRadius="lg"
+      borderWidth="1px"
+      display="flex"
+      height="74px"
+      marginBottom="24px"
+      padding={2}
+    >
+      <Box display="flex" alignItems="center">
+        <Image
+          src={`/images/oauth-login/${openIDProvider.provider}.png`}
+          alt={`${openIDProvider.provider} icon`}
+          width={50}
+          height={50}
+        />
+        <Box display="flex" flexDirection="column">
+          <Text fontSize="medium" fontWeight="bold" marginLeft="16px">
+            {openIDProvider.provider}
+          </Text>
+          <Text fontSize="medium" marginLeft="16px">
+            {openIDProvider.name}
+          </Text>
+        </Box>
+      </Box>
+      <Box flexGrow={1} display="flex" justifyContent="flex-end">
+        <Button
+          size="sm"
+          marginRight="12px"
+          variant="outline"
+          onClick={onDeleteOpen}
+          data-testid="remove-sso-provider-btn"
+        >
+          Remove
+        </Button>
+        <Button
+          size="sm"
+          marginRight="12px"
+          variant="outline"
+          onClick={onOpen}
+          data-testid="edit-sso-provider-btn"
+        >
+          Edit
+        </Button>
+      </Box>
+      <EditSSOProviderModal
+        isOpen={isOpen}
+        onClose={onClose}
+        openIDProvider={openIDProvider}
+      />
+      <ConfirmationModal
+        isOpen={deleteIsOpen}
+        onClose={onDeleteClose}
+        onConfirm={handleDelete}
+        title="Remove SSO provider"
+        message={
+          <Text>
+            You are about to permanently remove this SSO provider. Are you sure
+            you would like to continue?
+          </Text>
+        }
+      />
+    </Box>
+  );
+};
+
+export default SSOProvider;