Skip to content

Commit

Permalink
Implement keycloak client
Browse files Browse the repository at this point in the history
  • Loading branch information
@vhande
vhande committed Jul 4, 2024
1 parent 29ee8ad commit 0e7d2a1
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 52 deletions.
75 changes: 52 additions & 23 deletions resources/ts/Components/IntegrationCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,8 @@ export const IntegrationCard = ({
legacyProdConsumer,
testClient,
prodClient,
keycloakTestClient,
keycloakProdClient,
keyVisibility,
onEdit,
}: Props) => {
Expand All @@ -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"] });
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
27 changes: 22 additions & 5 deletions resources/ts/Components/Integrations/Detail/Credentials.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,17 @@ import { IntegrationType } from "../../../types/IntegrationType";
import { CredentialsWidgets } from "./CredentialsWidgets";
import type {
AuthClient,
KeycloakClient,
LegacyAuthConsumer,
} from "../../../types/Credentials";
import type { Integration } from "../../../types/Integration";
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;
Expand All @@ -23,6 +27,8 @@ export type Credentials = {
prodClient?: AuthClient;
legacyTestConsumer?: LegacyAuthConsumer;
legacyProdConsumer?: LegacyAuthConsumer;
keycloakTestClient?: KeycloakClient;
keycloakProdClient?: KeycloakClient;
};

export const Credentials = ({
Expand All @@ -35,6 +41,7 @@ export const Credentials = ({
keyVisibilityUpgrade,
legacyAuthConsumers,
authClients,
keycloakClients,
oldCredentialsExpirationDate,
}: Props) => {
const { t } = useTranslation();
Expand All @@ -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) {
Expand Down
68 changes: 46 additions & 22 deletions resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ type Props = Pick<
export const CredentialsAuthClients = ({
testClient,
prodClient,
keycloakTestClient,
keycloakProdClient,
id,
status,
email,
Expand All @@ -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");

Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down
13 changes: 12 additions & 1 deletion resources/ts/Pages/Integrations/Index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand Down Expand Up @@ -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 = () => {
Expand Down
7 changes: 6 additions & 1 deletion resources/ts/types/Integration.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -36,6 +40,7 @@ export type Integration = {
urls: IntegrationUrl[];
authClients: AuthClient[];
legacyAuthConsumers: LegacyAuthConsumer[];
keycloakClients: KeycloakClient[];
keyVisibility: KeyVisibility;
keyVisibilityUpgrade: KeyVisibilityUpgrade | null;
};

0 comments on commit 0e7d2a1

Please sign in to comment.