Implement visibility feature

cultuurnet · Jul 3, 2024 · 83d2ab7 · 83d2ab7
1 parent 57370e0
commit 83d2ab7
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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 &&