From 9f26d09ecada67ee62c0b8270d6fb1637a1d3733 Mon Sep 17 00:00:00 2001
From: Ashley Smith <ashley.smith@thetradedesk.com>
Date: Wed, 11 Dec 2024 10:49:57 -0700
Subject: [PATCH] feedback changes

---
 .../ApiKeyManagement/KeyCreationDialog.tsx    |  7 ++++---
 .../components/KeyPairs/KeyPairsTable.scss    |  2 +-
 src/web/components/KeyPairs/KeyPairsTable.tsx | 20 +++++++------------
 src/web/screens/apiKeyManagement.tsx          |  7 +++----
 src/web/screens/clientSideIntegration.tsx     |  5 ++---
 5 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/src/web/components/ApiKeyManagement/KeyCreationDialog.tsx b/src/web/components/ApiKeyManagement/KeyCreationDialog.tsx
index 849bcd65d..ee7d3eddd 100644
--- a/src/web/components/ApiKeyManagement/KeyCreationDialog.tsx
+++ b/src/web/components/ApiKeyManagement/KeyCreationDialog.tsx
@@ -99,9 +99,10 @@ function ShowApiKeySecrets({ keySecrets, closeDialog }: ApiKeySecretsProps) {
     <div>
       <h1>API Key {keySecrets.name} Credentials</h1>
       <p>
-        Copy the key and secret, store them in a secure location, and do not share them. When you
-        close the window, these values are not saved and are no longer available to you. If they are
-        lost, you&apos;ll need to create a new key.
+        Copy the key and secret.{' '}
+        <b> You must store them in a secure location, and do not share them.</b> When you close the
+        window, these values are not saved and are no longer available to you. If they are lost,
+        you&apos;ll need to create a new key.
       </p>
       {secrets.map((secret) => (
         <div key={secret.valueName}>
diff --git a/src/web/components/KeyPairs/KeyPairsTable.scss b/src/web/components/KeyPairs/KeyPairsTable.scss
index 0b7062bb8..3eaf58398 100644
--- a/src/web/components/KeyPairs/KeyPairsTable.scss
+++ b/src/web/components/KeyPairs/KeyPairsTable.scss
@@ -41,7 +41,7 @@
 
   .key-pair-header {
     display: flex;
-    gap: 5px;
+    gap: 10px;
 
     .key-pair-tool-tip {
       margin-top: 0.4rem;
diff --git a/src/web/components/KeyPairs/KeyPairsTable.tsx b/src/web/components/KeyPairs/KeyPairsTable.tsx
index e7e210fcd..1fd961389 100644
--- a/src/web/components/KeyPairs/KeyPairsTable.tsx
+++ b/src/web/components/KeyPairs/KeyPairsTable.tsx
@@ -70,22 +70,16 @@ function KeyPairsTableContent({
         <thead>
           <tr>
             <SortableTableHeader<KeyPairModel> className='name' sortKey='name' header='Name' />
-            <SortableTableHeader<KeyPairModel>
-              className='subscription-id'
-              sortKey='subscriptionId'
-              header={
-                <div className='key-pair-header'>
-                  <Tooltip>
-                    Identifies your site to the UID2 service. Can be shared publicly.
-                  </Tooltip>
-                  Subscription ID
-                </div>
-              }
-            />
             <th>
               <div className='key-pair-header'>
-                <Tooltip>Used for encryption. Can be shared publicly.</Tooltip>
+                Subscription ID
+                <Tooltip>Identifies your site to the UID2 service. Can be shared publicly.</Tooltip>
+              </div>
+            </th>
+            <th>
+              <div className='key-pair-header'>
                 Public Key
+                <Tooltip>Used for encryption. Can be shared publicly.</Tooltip>
               </div>
             </th>
             <SortableTableHeader<KeyPairModel>
diff --git a/src/web/screens/apiKeyManagement.tsx b/src/web/screens/apiKeyManagement.tsx
index 12a75b8b7..7728e2c90 100644
--- a/src/web/screens/apiKeyManagement.tsx
+++ b/src/web/screens/apiKeyManagement.tsx
@@ -79,7 +79,8 @@ function ApiKeyManagement() {
     <>
       <h1>API Keys</h1>
       <p className='heading-details'>
-        View and manage your API keys. For more information, see{' '}
+        View and manage your API keys for client-server or server-side integrations. For more
+        information, see{' '}
         <a
           target='_blank'
           className='outside-link'
@@ -91,9 +92,7 @@ function ApiKeyManagement() {
         .
       </p>
       <div>
-        The values you generate on this page are for client-server or server-side integrations.{' '}
-        <b>They must be stored securely and kept secret.</b> For an implementation option that
-        generates UID2 tokens on the client side, go to{' '}
+        For an implementation option that generates UID2 tokens on the client side, go to{' '}
         <NavLink
           to={`/participant/${participant?.id}/clientSideIntegration`}
           className='outside-link'
diff --git a/src/web/screens/clientSideIntegration.tsx b/src/web/screens/clientSideIntegration.tsx
index f4ac3e1bd..1ae792d33 100644
--- a/src/web/screens/clientSideIntegration.tsx
+++ b/src/web/screens/clientSideIntegration.tsx
@@ -166,8 +166,7 @@ function ClientSideIntegration() {
         .
       </p>
       <div>
-        The values you generate on this page are public and do not need to be kept secret. For
-        client-server or server-side integrations, go to{' '}
+        For client-server or server-side integrations, go to{' '}
         <NavLink to={`/participant/${participant?.id}/apiKeys`} className='outside-link'>
           API Keys
         </NavLink>
@@ -186,8 +185,8 @@ function ClientSideIntegration() {
             {(loadedData) => (
               <>
                 <ClientSideCompletion
-                  domainNames={loadedData.domainNames}
                   appIds={loadedData.appIds}
+                  domainNames={loadedData.domainNames}
                   keyPairData={loadedData.keyPairs}
                 />
                 <KeyPairsTable