Merge branch 'main' into feature/PPF-462

cultuurnet · Jun 27, 2024 · 65c9581 · 65c9581
2 parents 8fca50c + f877e8e
commit 65c9581
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 22 deletions.
diff --git a/resources/ts/Components/Integrations/Detail/Credentials.tsx b/resources/ts/Components/Integrations/Detail/Credentials.tsx
@@ -32,6 +32,7 @@ export const Credentials = ({
   subscription,
   type,
   keyVisibility,
+  keyVisibilityUpgrade,
   legacyAuthConsumers,
   authClients,
   oldCredentialsExpirationDate,
@@ -40,7 +41,9 @@ export const Credentials = ({
   const hasAnyCredentials = Boolean(
     legacyAuthConsumers.length || authClients.length
   );
-  usePolling(!hasAnyCredentials, { only: ["integration"] });
+  const isV1Upgraded =
+    keyVisibility === KeyVisibility.v1 && !!keyVisibilityUpgrade;
+  usePolling(!hasAnyCredentials || isV1Upgraded, { only: ["integration"] });
   const credentials = useMemo(
     () => ({
       legacyTestConsumer: legacyAuthConsumers.find(
@@ -96,6 +99,7 @@ export const Credentials = ({
         type={type}
         subscription={subscription}
         keyVisibility={keyVisibility}
+        keyVisibilityUpgrade={keyVisibilityUpgrade}
       />
     </>
   );

diff --git a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
@@ -11,10 +11,16 @@ import type { Integration } from "../../../types/Integration";
 import { KeyVisibility } from "../../../types/KeyVisibility";
 import { router } from "@inertiajs/react";
 import { Link } from "../../Link";
+import { Alert } from "../../Alert";
 
 type Props = Pick<
   Integration,
-  "id" | "status" | "subscription" | "type" | "keyVisibility"
+  | "id"
+  | "status"
+  | "subscription"
+  | "type"
+  | "keyVisibility"
+  | "keyVisibilityUpgrade"
 > &
   Credentials & { email: string };
 
@@ -27,8 +33,10 @@ export const CredentialsAuthClients = ({
   subscription,
   type,
   keyVisibility,
+  keyVisibilityUpgrade,
 }: Props) => {
   const { t } = useTranslation();
+  const isKeyVisibilityV1 = keyVisibility === KeyVisibility.v1;
 
   const auth0TestClientWithLabels = [
     {
@@ -62,27 +70,32 @@ export const CredentialsAuthClients = ({
       <Heading className="font-semibold lg:min-w-60" level={4}>
         {t("details.credentials.uitid_v2")}
       </Heading>
-      {keyVisibility === KeyVisibility.v1 ? (
-        <div className="flex flex-col flex-1 gap-4">
-          <div>
-            <Trans
-              i18nKey="details.credentials.uitid_alert"
-              components={[
-                <Link
-                  key={t("details.credentials.uitid_alert")}
-                  href={t("details.credentials.uitid_alert_link")}
-                  className="text-publiq-blue-dark hover:underline mb-3"
-                />,
-              ]}
-            />
+      {isKeyVisibilityV1 ? (
+        keyVisibilityUpgrade ? (
+          <Alert variant="info">{t("integrations.pending_credentials")}</Alert>
+        ) : (
+          <div className="flex flex-col flex-1 gap-4">
+            <div>
+              <Trans
+                i18nKey="details.credentials.uitid_alert"
+                components={[
+                  <Link
+                    key={t("details.credentials.uitid_alert")}
+                    href={t("details.credentials.uitid_alert_link")}
+                    className="text-publiq-blue-dark hover:underline mb-3"
+                  />,
+                ]}
+              />
+            </div>
+
+            <ButtonPrimary
+              className="self-start"
+              onClick={handleKeyVisibilityUpgrade}
+            >
+              {t("details.credentials.action_uitid")}
+            </ButtonPrimary>
           </div>
-          <ButtonPrimary
-            className="self-start"
-            onClick={handleKeyVisibilityUpgrade}
-          >
-            {t("details.credentials.action_uitid")}
-          </ButtonPrimary>
-        </div>
+        )
       ) : (
         <div className="flex flex-col flex-1 gap-4">
           <div className="flex flex-col gap-3">

diff --git a/resources/ts/types/Integration.ts b/resources/ts/types/Integration.ts
@@ -16,6 +16,11 @@ export type Coupon = {
   reduction: number;
 };
 
+type KeyVisibilityUpgrade = {
+  id: string;
+  integrationId: string;
+  keyVisibility: string;
+};
 export type Integration = {
   id: string;
   type: Values<typeof IntegrationType>;
@@ -32,4 +37,5 @@ export type Integration = {
   authClients: AuthClient[];
   legacyAuthConsumers: LegacyAuthConsumer[];
   keyVisibility: KeyVisibility;
+  keyVisibilityUpgrade: KeyVisibilityUpgrade | null;
 };