From 83d2ab72749d4de00eb5d7e139aff44985862384 Mon Sep 17 00:00:00 2001
From: vhande <hande.vanhove@publiq.be>
Date: Wed, 3 Jul 2024 13:08:15 +0200
Subject: [PATCH] Implement visibility feature

---
 resources/ts/Components/IntegrationCard.tsx   | 20 +++++++++++++++----
 .../Detail/CredentialsAuthClients.tsx         | 16 +++++++++++++--
 .../Detail/CredentialsLegacyAuthConsumers.tsx |  4 ++--
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/resources/ts/Components/IntegrationCard.tsx b/resources/ts/Components/IntegrationCard.tsx
index 64b1328e7..df3b20b2c 100644
--- a/resources/ts/Components/IntegrationCard.tsx
+++ b/resources/ts/Components/IntegrationCard.tsx
@@ -96,6 +96,8 @@ export const IntegrationCard = ({
     },
   ];
 
+  const clientSecretLabel = t("details.credentials.client_secret");
+
   const hasAnyCredentials = Boolean(
     legacyTestConsumer || legacyProdConsumer || testClient || prodClient
   );
@@ -126,7 +128,12 @@ export const IntegrationCard = ({
                     <span className="flex items-center whitespace-nowrap">
                       {t(client.label)}
                     </span>
-                    <CopyText>{client.value}</CopyText>
+                    {client.value && (
+                      <CopyText
+                        secret={t(client.label) === clientSecretLabel}
+                        text={client.value}
+                      />
+                    )}
                   </div>
                 ))}
               </div>
@@ -150,7 +157,7 @@ export const IntegrationCard = ({
             <span className="flex items-center whitespace-nowrap">
               {t("details.credentials.api_key")}
             </span>
-            <CopyText>{legacyTestConsumer.apiKey}</CopyText>
+            <CopyText secret text={legacyTestConsumer.apiKey} />
           </section>
         )}
       {type === IntegrationType.Widgets &&
@@ -190,7 +197,12 @@ export const IntegrationCard = ({
                         <span className="flex items-center whitespace-nowrap">
                           {t(client.label)}
                         </span>
-                        <CopyText>{client.value}</CopyText>
+                        {client.value && (
+                          <CopyText
+                            secret={t(client.label) === clientSecretLabel}
+                            text={client.value}
+                          />
+                        )}
                       </div>
                     ))}
                   </div>
@@ -245,7 +257,7 @@ export const IntegrationCard = ({
                   <span className="flex items-center whitespace-nowrap">
                     {t("details.credentials.api_key")}
                   </span>
-                  <CopyText>{legacyProdConsumer.apiKey}</CopyText>
+                  <CopyText secret text={legacyProdConsumer.apiKey} />
                 </div>
               )}
             </div>
diff --git a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
index d6d078ca8..b6a608ae2 100644
--- a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
+++ b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
@@ -60,6 +60,8 @@ export const CredentialsAuthClients = ({
     },
   ];
 
+  const clientSecretLabel = t("details.credentials.client_secret");
+
   const handleKeyVisibilityUpgrade = () =>
     router.post(`/integrations/${id}/upgrade`, {
       keyVisibility: KeyVisibility.v2,
@@ -110,7 +112,12 @@ export const CredentialsAuthClients = ({
                 <span className="flex items-center whitespace-nowrap">
                   {t(client.label)}
                 </span>
-                <CopyText>{client.value}</CopyText>
+                {client.value && (
+                  <CopyText
+                    secret={t(client.label) === clientSecretLabel}
+                    text={client.value}
+                  />
+                )}
               </div>
             ))}
           </div>
@@ -129,7 +136,12 @@ export const CredentialsAuthClients = ({
                     <span className="flex items-center whitespace-nowrap">
                       {t(client.label)}
                     </span>
-                    <CopyText>{client.value}</CopyText>
+                    {client.value && (
+                      <CopyText
+                        secret={t(client.label) === clientSecretLabel}
+                        text={client.value}
+                      />
+                    )}
                   </div>
                 ))}
               </div>
diff --git a/resources/ts/Components/Integrations/Detail/CredentialsLegacyAuthConsumers.tsx b/resources/ts/Components/Integrations/Detail/CredentialsLegacyAuthConsumers.tsx
index 7b53a1bb8..5d91a505a 100644
--- a/resources/ts/Components/Integrations/Detail/CredentialsLegacyAuthConsumers.tsx
+++ b/resources/ts/Components/Integrations/Detail/CredentialsLegacyAuthConsumers.tsx
@@ -56,7 +56,7 @@ export const CredentialsLegacyAuthConsumers = ({
             {t("details.credentials.api_key")}
           </span>
           {legacyTestConsumer && (
-            <CopyText>{legacyTestConsumer.apiKey}</CopyText>
+            <CopyText secret text={legacyTestConsumer.apiKey} />
           )}
         </div>
         {keyVisibility !== KeyVisibility.v2 && (
@@ -72,7 +72,7 @@ export const CredentialsLegacyAuthConsumers = ({
                     <span className="flex items-center whitespace-nowrap">
                       {t("details.credentials.api_key")}
                     </span>
-                    <CopyText>{legacyProdConsumer.apiKey}</CopyText>
+                    <CopyText secret text={legacyProdConsumer.apiKey} />
                   </div>
                 )}
                 {keyVisibility === KeyVisibility.all &&