From 40cd59831ec0f7251048283aca62ae58845308a4 Mon Sep 17 00:00:00 2001
From: vhande <hande.vanhove@publiq.be>
Date: Fri, 24 May 2024 09:28:29 +0200
Subject: [PATCH 1/8] Add type keyVisibilityUpgrade

---
 resources/ts/types/Integration.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/resources/ts/types/Integration.ts b/resources/ts/types/Integration.ts
index d02876d14..30615af84 100644
--- 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;
 };

From 34f77122379ded18530c55600db6c65a1982c4aa Mon Sep 17 00:00:00 2001
From: vhande <hande.vanhove@publiq.be>
Date: Fri, 24 May 2024 09:29:01 +0200
Subject: [PATCH 2/8] Show alert

---
 .../Detail/CredentialsAuthClients.tsx         | 52 ++++++++++++-------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
index 71905700c..003d92c80 100644
--- 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,6 +33,7 @@ export const CredentialsAuthClients = ({
   subscription,
   type,
   keyVisibility,
+  keyVisibilityUpgrade,
 }: Props) => {
   const { t } = useTranslation();
 
@@ -63,26 +70,31 @@ export const CredentialsAuthClients = ({
         {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"
-                />,
-              ]}
-            />
+        keyVisibility === KeyVisibility.v1 && !!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">

From fca5a9bfa07420d8d87a9a9dd5fe9ade3a880737 Mon Sep 17 00:00:00 2001
From: vhande <hande.vanhove@publiq.be>
Date: Fri, 24 May 2024 09:29:14 +0200
Subject: [PATCH 3/8] Add polling

---
 .../ts/Components/Integrations/Detail/Credentials.tsx     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/resources/ts/Components/Integrations/Detail/Credentials.tsx b/resources/ts/Components/Integrations/Detail/Credentials.tsx
index 5429f3d29..e7c6f55eb 100644
--- 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,11 @@ export const Credentials = ({
   const hasAnyCredentials = Boolean(
     legacyAuthConsumers.length || authClients.length
   );
-  usePolling(!hasAnyCredentials, { only: ["integration"] });
+  usePolling(
+    !hasAnyCredentials ||
+      (keyVisibility === KeyVisibility.v1 && !!keyVisibilityUpgrade),
+    { only: ["integration"] }
+  );
   const credentials = useMemo(
     () => ({
       legacyTestConsumer: legacyAuthConsumers.find(
@@ -96,6 +101,7 @@ export const Credentials = ({
         type={type}
         subscription={subscription}
         keyVisibility={keyVisibility}
+        keyVisibilityUpgrade={keyVisibilityUpgrade}
       />
     </>
   );

From d95137eedef57eae31099db36d03ca0bd9541e14 Mon Sep 17 00:00:00 2001
From: vhande <hande.vanhove@publiq.be>
Date: Tue, 25 Jun 2024 11:08:35 +0200
Subject: [PATCH 4/8] Update type

---
 resources/ts/types/Integration.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/ts/types/Integration.ts b/resources/ts/types/Integration.ts
index 30615af84..fffd9da49 100644
--- a/resources/ts/types/Integration.ts
+++ b/resources/ts/types/Integration.ts
@@ -37,5 +37,5 @@ export type Integration = {
   authClients: AuthClient[];
   legacyAuthConsumers: LegacyAuthConsumer[];
   keyVisibility: KeyVisibility;
-  keyVisibilityUpgrade: KeyVisibilityUpgrade;
+  keyVisibilityUpgrade: KeyVisibilityUpgrade | null;
 };

From c520209027281632eefe0a089ec21956b3ecc313 Mon Sep 17 00:00:00 2001
From: vhande <hande.vanhove@publiq.be>
Date: Tue, 25 Jun 2024 11:35:10 +0200
Subject: [PATCH 5/8] Add const isKeyVisibilityV1

---
 resources/ts/Components/Integrations/Detail/Credentials.tsx  | 3 ++-
 .../Integrations/Detail/CredentialsAuthClients.tsx           | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/resources/ts/Components/Integrations/Detail/Credentials.tsx b/resources/ts/Components/Integrations/Detail/Credentials.tsx
index e7c6f55eb..9af7cddf4 100644
--- a/resources/ts/Components/Integrations/Detail/Credentials.tsx
+++ b/resources/ts/Components/Integrations/Detail/Credentials.tsx
@@ -41,9 +41,10 @@ export const Credentials = ({
   const hasAnyCredentials = Boolean(
     legacyAuthConsumers.length || authClients.length
   );
+  const isKeyVisibilityV1 = keyVisibility === KeyVisibility.v1
   usePolling(
     !hasAnyCredentials ||
-      (keyVisibility === KeyVisibility.v1 && !!keyVisibilityUpgrade),
+      (isKeyVisibilityV1 && !!keyVisibilityUpgrade),
     { only: ["integration"] }
   );
   const credentials = useMemo(
diff --git a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
index 003d92c80..376cef6b2 100644
--- a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
+++ b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
@@ -36,6 +36,7 @@ export const CredentialsAuthClients = ({
   keyVisibilityUpgrade,
 }: Props) => {
   const { t } = useTranslation();
+  const isKeyVisibilityV1 = keyVisibility === KeyVisibility.v1;
 
   const auth0TestClientWithLabels = [
     {
@@ -69,8 +70,8 @@ export const CredentialsAuthClients = ({
       <Heading className="font-semibold lg:min-w-60" level={4}>
         {t("details.credentials.uitid_v2")}
       </Heading>
-      {keyVisibility === KeyVisibility.v1 ? (
-        keyVisibility === KeyVisibility.v1 && !!keyVisibilityUpgrade ? (
+      {isKeyVisibilityV1 ? (
+        isKeyVisibilityV1 && !!keyVisibilityUpgrade ? (
           <Alert variant="info">{t("integrations.pending_credentials")}</Alert>
         ) : (
           <div className="flex flex-col flex-1 gap-4">

From dd4b7fd0d9f8fc66eb04102380074f35051c970c Mon Sep 17 00:00:00 2001
From: vhande <hande.vanhove@publiq.be>
Date: Tue, 25 Jun 2024 11:35:46 +0200
Subject: [PATCH 6/8] Fix format

---
 resources/ts/Components/Integrations/Detail/Credentials.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/resources/ts/Components/Integrations/Detail/Credentials.tsx b/resources/ts/Components/Integrations/Detail/Credentials.tsx
index 9af7cddf4..62e3a8425 100644
--- a/resources/ts/Components/Integrations/Detail/Credentials.tsx
+++ b/resources/ts/Components/Integrations/Detail/Credentials.tsx
@@ -41,10 +41,9 @@ export const Credentials = ({
   const hasAnyCredentials = Boolean(
     legacyAuthConsumers.length || authClients.length
   );
-  const isKeyVisibilityV1 = keyVisibility === KeyVisibility.v1
+  const isKeyVisibilityV1 = keyVisibility === KeyVisibility.v1;
   usePolling(
-    !hasAnyCredentials ||
-      (isKeyVisibilityV1 && !!keyVisibilityUpgrade),
+    !hasAnyCredentials || (isKeyVisibilityV1 && !!keyVisibilityUpgrade),
     { only: ["integration"] }
   );
   const credentials = useMemo(

From c27f5c5785d4f3c4041eca95fafbe1ff19049889 Mon Sep 17 00:00:00 2001
From: vhande <hande.vanhove@publiq.be>
Date: Thu, 27 Jun 2024 15:10:12 +0200
Subject: [PATCH 7/8] Improve readability

---
 .../ts/Components/Integrations/Detail/Credentials.tsx     | 8 +++-----
 .../Integrations/Detail/CredentialsAuthClients.tsx        | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/resources/ts/Components/Integrations/Detail/Credentials.tsx b/resources/ts/Components/Integrations/Detail/Credentials.tsx
index 62e3a8425..98d40bd82 100644
--- a/resources/ts/Components/Integrations/Detail/Credentials.tsx
+++ b/resources/ts/Components/Integrations/Detail/Credentials.tsx
@@ -41,11 +41,9 @@ export const Credentials = ({
   const hasAnyCredentials = Boolean(
     legacyAuthConsumers.length || authClients.length
   );
-  const isKeyVisibilityV1 = keyVisibility === KeyVisibility.v1;
-  usePolling(
-    !hasAnyCredentials || (isKeyVisibilityV1 && !!keyVisibilityUpgrade),
-    { only: ["integration"] }
-  );
+  const isV1Upgraded =
+    keyVisibility === KeyVisibility.v1 && !!keyVisibilityUpgrade;
+  usePolling(!hasAnyCredentials || isV1Upgraded, { only: ["integration"] });
   const credentials = useMemo(
     () => ({
       legacyTestConsumer: legacyAuthConsumers.find(
diff --git a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
index 376cef6b2..65144e941 100644
--- a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
+++ b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
@@ -71,7 +71,7 @@ export const CredentialsAuthClients = ({
         {t("details.credentials.uitid_v2")}
       </Heading>
       {isKeyVisibilityV1 ? (
-        isKeyVisibilityV1 && !!keyVisibilityUpgrade ? (
+        !!keyVisibilityUpgrade ? (
           <Alert variant="info">{t("integrations.pending_credentials")}</Alert>
         ) : (
           <div className="flex flex-col flex-1 gap-4">

From 16c8b35759ef700e5ad0e5edb4ccbbe505adffa0 Mon Sep 17 00:00:00 2001
From: vhande <hande.vanhove@publiq.be>
Date: Thu, 27 Jun 2024 15:18:10 +0200
Subject: [PATCH 8/8] Fix linting

---
 .../Components/Integrations/Detail/CredentialsAuthClients.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
index 65144e941..d6d078ca8 100644
--- a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
+++ b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
@@ -71,7 +71,7 @@ export const CredentialsAuthClients = ({
         {t("details.credentials.uitid_v2")}
       </Heading>
       {isKeyVisibilityV1 ? (
-        !!keyVisibilityUpgrade ? (
+        keyVisibilityUpgrade ? (
           <Alert variant="info">{t("integrations.pending_credentials")}</Alert>
         ) : (
           <div className="flex flex-col flex-1 gap-4">