From 0e7d2a123b3b1d2017a91960a4fb9e5753fe9e89 Mon Sep 17 00:00:00 2001
From: vhande <hande.vanhove@publiq.be>
Date: Thu, 4 Jul 2024 13:56:41 +0200
Subject: [PATCH] Implement keycloak client

---
 resources/ts/Components/IntegrationCard.tsx   | 75 +++++++++++++------
 .../Integrations/Detail/Credentials.tsx       | 27 +++++--
 .../Detail/CredentialsAuthClients.tsx         | 68 +++++++++++------
 resources/ts/Pages/Integrations/Index.tsx     | 13 +++-
 resources/ts/types/Integration.ts             |  7 +-
 5 files changed, 138 insertions(+), 52 deletions(-)

diff --git a/resources/ts/Components/IntegrationCard.tsx b/resources/ts/Components/IntegrationCard.tsx
index 35aab9af3..19057da6a 100644
--- a/resources/ts/Components/IntegrationCard.tsx
+++ b/resources/ts/Components/IntegrationCard.tsx
@@ -68,6 +68,8 @@ export const IntegrationCard = ({
   legacyProdConsumer,
   testClient,
   prodClient,
+  keycloakTestClient,
+  keycloakProdClient,
   keyVisibility,
   onEdit,
 }: Props) => {
@@ -77,32 +79,59 @@ export const IntegrationCard = ({
 
   const integrationTypesInfo = useIntegrationTypesInfo();
 
-  const auth0TestClientWithLabels = [
-    {
-      label: "details.credentials.client_id",
-      value: testClient?.clientId,
-    },
-    {
-      label: "details.credentials.client_secret",
-      value: testClient?.clientSecret,
-    },
-  ];
+  const testClientWithLabels = keycloakEnabled
+    ? [
+        {
+          label: "details.credentials.client_id",
+          value: keycloakTestClient?.clientId,
+        },
+        {
+          label: "details.credentials.client_secret",
+          value: keycloakTestClient?.clientSecret,
+        },
+      ]
+    : [
+        {
+          label: "details.credentials.client_id",
+          value: testClient?.clientId,
+        },
+        {
+          label: "details.credentials.client_secret",
+          value: testClient?.clientSecret,
+        },
+      ];
 
-  const auth0ProdClientWithLabels = [
-    {
-      label: "details.credentials.client_id",
-      value: prodClient?.clientId,
-    },
-    {
-      label: "details.credentials.client_secret",
-      value: prodClient?.clientSecret,
-    },
-  ];
+  const prodClientWithLabels = keycloakEnabled
+    ? [
+        {
+          label: "details.credentials.client_id",
+          value: keycloakProdClient?.clientId,
+        },
+        {
+          label: "details.credentials.client_secret",
+          value: keycloakProdClient?.clientSecret,
+        },
+      ]
+    : [
+        {
+          label: "details.credentials.client_id",
+          value: prodClient?.clientId,
+        },
+        {
+          label: "details.credentials.client_secret",
+          value: prodClient?.clientSecret,
+        },
+      ];
 
   const clientSecretLabel = t("details.credentials.client_secret");
 
   const hasAnyCredentials = Boolean(
-    legacyTestConsumer || legacyProdConsumer || testClient || prodClient
+    legacyTestConsumer ||
+      legacyProdConsumer ||
+      testClient ||
+      prodClient ||
+      keycloakProdClient ||
+      keycloakProdClient
   );
 
   usePolling(!hasAnyCredentials, { only: ["credentials"] });
@@ -123,7 +152,7 @@ export const IntegrationCard = ({
             </Heading>
             <div className="flex flex-col gap-2">
               <div className="flex flex-col gap-2">
-                {auth0TestClientWithLabels.map((client) => (
+                {testClientWithLabels.map((client) => (
                   <div
                     key={`${client.label}-${client.value}`}
                     className="flex gap-1 max-md:flex-col max-md:items-start"
@@ -192,7 +221,7 @@ export const IntegrationCard = ({
                 )}
                 {status === IntegrationStatus.Active && (
                   <div className="flex flex-col gap-2">
-                    {auth0ProdClientWithLabels.map((client) => (
+                    {prodClientWithLabels.map((client) => (
                       <div
                         key={`${client.label}-${client.value}`}
                         className="flex gap-1 max-md:flex-col max-md:items-start"
diff --git a/resources/ts/Components/Integrations/Detail/Credentials.tsx b/resources/ts/Components/Integrations/Detail/Credentials.tsx
index 98d40bd82..90a4f83e0 100644
--- a/resources/ts/Components/Integrations/Detail/Credentials.tsx
+++ b/resources/ts/Components/Integrations/Detail/Credentials.tsx
@@ -5,6 +5,7 @@ import { IntegrationType } from "../../../types/IntegrationType";
 import { CredentialsWidgets } from "./CredentialsWidgets";
 import type {
   AuthClient,
+  KeycloakClient,
   LegacyAuthConsumer,
 } from "../../../types/Credentials";
 import type { Integration } from "../../../types/Integration";
@@ -12,6 +13,9 @@ import { Alert } from "../../Alert";
 import { useTranslation } from "react-i18next";
 import { usePolling } from "../../../hooks/usePolling";
 import { KeyVisibility } from "../../../types/KeyVisibility";
+import { UiTiDv1Environment } from "../../../types/UiTiDv1Environment";
+import { Auth0Tenant } from "../../../types/Auth0Tenant";
+import { KeycloakEnvironment } from "../../../types/KeycloakEnvironment";
 
 type Props = Integration & {
   email: string;
@@ -23,6 +27,8 @@ export type Credentials = {
   prodClient?: AuthClient;
   legacyTestConsumer?: LegacyAuthConsumer;
   legacyProdConsumer?: LegacyAuthConsumer;
+  keycloakTestClient?: KeycloakClient;
+  keycloakProdClient?: KeycloakClient;
 };
 
 export const Credentials = ({
@@ -35,6 +41,7 @@ export const Credentials = ({
   keyVisibilityUpgrade,
   legacyAuthConsumers,
   authClients,
+  keycloakClients,
   oldCredentialsExpirationDate,
 }: Props) => {
   const { t } = useTranslation();
@@ -47,15 +54,25 @@ export const Credentials = ({
   const credentials = useMemo(
     () => ({
       legacyTestConsumer: legacyAuthConsumers.find(
-        (consumer) => consumer.environment === "test"
+        (consumer) => consumer.environment === UiTiDv1Environment.Testing
       ),
       legacyProdConsumer: legacyAuthConsumers.find(
-        (consumer) => consumer.environment === "prod"
+        (consumer) => consumer.environment === UiTiDv1Environment.Production
+      ),
+      testClient: authClients.find(
+        (client) => client.tenant === Auth0Tenant.Testing
+      ),
+      prodClient: authClients.find(
+        (client) => client.tenant === Auth0Tenant.Production
+      ),
+      keycloakTestClient: keycloakClients.find(
+        (client) => client.environment === KeycloakEnvironment.Testing
+      ),
+      keycloakProdClient: keycloakClients.find(
+        (client) => client.environment === KeycloakEnvironment.Production
       ),
-      testClient: authClients.find((client) => client.tenant === "test"),
-      prodClient: authClients.find((client) => client.tenant === "prod"),
     }),
-    [legacyAuthConsumers, authClients]
+    [legacyAuthConsumers, authClients, keycloakClients]
   );
 
   if (!hasAnyCredentials) {
diff --git a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
index 508bb04c3..00908b4b4 100644
--- a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
+++ b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
@@ -28,6 +28,8 @@ type Props = Pick<
 export const CredentialsAuthClients = ({
   testClient,
   prodClient,
+  keycloakTestClient,
+  keycloakProdClient,
   id,
   status,
   email,
@@ -42,27 +44,49 @@ export const CredentialsAuthClients = ({
 
   const isKeyVisibilityV1 = keyVisibility === KeyVisibility.v1;
 
-  const auth0TestClientWithLabels = [
-    {
-      label: "details.credentials.client_id",
-      value: testClient?.clientId,
-    },
-    {
-      label: "details.credentials.client_secret",
-      value: testClient?.clientSecret,
-    },
-  ];
+  const testClientWithLabels = keycloakEnabled
+    ? [
+        {
+          label: "details.credentials.client_id",
+          value: keycloakTestClient?.clientId,
+        },
+        {
+          label: "details.credentials.client_secret",
+          value: keycloakTestClient?.clientSecret,
+        },
+      ]
+    : [
+        {
+          label: "details.credentials.client_id",
+          value: testClient?.clientId,
+        },
+        {
+          label: "details.credentials.client_secret",
+          value: testClient?.clientSecret,
+        },
+      ];
 
-  const auth0ProdClientWithLabels = [
-    {
-      label: "details.credentials.client_id",
-      value: prodClient?.clientId,
-    },
-    {
-      label: "details.credentials.client_secret",
-      value: prodClient?.clientSecret,
-    },
-  ];
+  const prodClientWithLabels = keycloakEnabled
+    ? [
+        {
+          label: "details.credentials.client_id",
+          value: keycloakProdClient?.clientId,
+        },
+        {
+          label: "details.credentials.client_secret",
+          value: keycloakProdClient?.clientSecret,
+        },
+      ]
+    : [
+        {
+          label: "details.credentials.client_id",
+          value: prodClient?.clientId,
+        },
+        {
+          label: "details.credentials.client_secret",
+          value: prodClient?.clientSecret,
+        },
+      ];
 
   const clientSecretLabel = t("details.credentials.client_secret");
 
@@ -108,7 +132,7 @@ export const CredentialsAuthClients = ({
             <Heading className="font-semibold flex min-w-[5rem]" level={4}>
               {t("details.credentials.test")}
             </Heading>
-            {auth0TestClientWithLabels.map((client) => (
+            {testClientWithLabels.map((client) => (
               <div
                 key={`${client.label}-${client.value}`}
                 className="flex gap-1 max-md:flex-col max-md:items-start"
@@ -132,7 +156,7 @@ export const CredentialsAuthClients = ({
             <StatusLight status={status} />
             {status === IntegrationStatus.Active && (
               <div className="flex flex-col gap-3">
-                {auth0ProdClientWithLabels.map((client) => (
+                {prodClientWithLabels.map((client) => (
                   <div
                     key={`${client.label}-${client.value}`}
                     className="flex gap-1 max-md:flex-col max-md:items-start"
diff --git a/resources/ts/Pages/Integrations/Index.tsx b/resources/ts/Pages/Integrations/Index.tsx
index 792ce5f13..bb31e8f30 100644
--- a/resources/ts/Pages/Integrations/Index.tsx
+++ b/resources/ts/Pages/Integrations/Index.tsx
@@ -19,6 +19,7 @@ import { UiTiDv1Environment } from "../../types/UiTiDv1Environment";
 import type { Credentials } from "../../types/Credentials";
 import type { Integration } from "../../types/Integration";
 import { router } from "@inertiajs/react";
+import { KeycloakEnvironment } from "../../types/KeycloakEnvironment";
 
 type Props = {
   integrations: Integration[];
@@ -72,9 +73,19 @@ const Index = ({ integrations, paginationInfo, credentials }: Props) => {
               client.integrationId === integration.id &&
               client.environment === UiTiDv1Environment.Production
           ),
+          keycloakTestClient: credentials.keycloak.find(
+            (client) =>
+              client.integrationId === integration.id &&
+              client.environment === KeycloakEnvironment.Testing
+          ),
+          keycloakProdClient: credentials.keycloak.find(
+            (client) =>
+              client.integrationId === integration.id &&
+              client.environment === KeycloakEnvironment.Testing
+          ),
         },
       })),
-    [integrations, credentials.auth0, credentials.uitidV1]
+    [integrations, credentials.auth0, credentials.uitidV1, credentials.keycloak]
   );
 
   const handleDeleteIntegration = () => {
diff --git a/resources/ts/types/Integration.ts b/resources/ts/types/Integration.ts
index fffd9da49..1ad7b0a0d 100644
--- a/resources/ts/types/Integration.ts
+++ b/resources/ts/types/Integration.ts
@@ -5,7 +5,11 @@ import type { Contact } from "./Contact";
 import type { Organization } from "./Organization";
 import type { Subscription } from "./Subscription";
 import type { IntegrationUrl } from "./IntegrationUrl";
-import type { AuthClient, LegacyAuthConsumer } from "./Credentials";
+import type {
+  AuthClient,
+  KeycloakClient,
+  LegacyAuthConsumer,
+} from "./Credentials";
 import type { KeyVisibility } from "./KeyVisibility";
 
 export type Coupon = {
@@ -36,6 +40,7 @@ export type Integration = {
   urls: IntegrationUrl[];
   authClients: AuthClient[];
   legacyAuthConsumers: LegacyAuthConsumer[];
+  keycloakClients: KeycloakClient[];
   keyVisibility: KeyVisibility;
   keyVisibilityUpgrade: KeyVisibilityUpgrade | null;
 };