From 3c5d52a5ff956abade92e395c8d8b347d2d4afed Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Mon, 29 Jan 2024 13:05:22 -0800
Subject: [PATCH] =?UTF-8?q?UI=20=E2=80=93=20Adjust=20API=20Token=20modal,?=
 =?UTF-8?q?=20other=20small=20fixes=20(#16396)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<img width="653" alt="Screenshot 2024-01-26 at 4 03 14 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/4cb59fbc-1cde-4b07-bbf4-cc73091c26b1">

- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 .../SoftwareOS/SoftwareOSTable/_styles.scss   |  2 +-
 .../SoftwareTitles/SoftwareTable/_styles.scss |  1 +
 .../TokenSecretField}/SecretField.stories.tsx |  0
 .../TokenSecretField}/SecretField.tsx         | 46 ++++++++--------
 .../TokenSecretField}/_styles.scss            | 53 +++++--------------
 .../APITokenModal/TokenSecretField}/index.ts  |  0
 .../UserSettingsPage/UserSettingsPage.tsx     |  3 +-
 frontend/pages/UserSettingsPage/_styles.scss  | 15 ++++++
 8 files changed, 56 insertions(+), 64 deletions(-)
 rename frontend/{components/EnrollSecrets/SecretField => pages/UserSettingsPage/APITokenModal/TokenSecretField}/SecretField.stories.tsx (100%)
 rename frontend/{components/EnrollSecrets/SecretField => pages/UserSettingsPage/APITokenModal/TokenSecretField}/SecretField.tsx (66%)
 rename frontend/{components/EnrollSecrets/SecretField => pages/UserSettingsPage/APITokenModal/TokenSecretField}/_styles.scss (58%)
 rename frontend/{components/EnrollSecrets/SecretField => pages/UserSettingsPage/APITokenModal/TokenSecretField}/index.ts (100%)

diff --git a/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOSTable/_styles.scss b/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOSTable/_styles.scss
index 55aeee8d8e..2312dbf55c 100644
--- a/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOSTable/_styles.scss
+++ b/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOSTable/_styles.scss
@@ -2,6 +2,7 @@
   &__count {
     display: flex;
     gap: 12px;
+    align-items: center;
   }
 
   .hosts-cell__wrapper {
@@ -36,5 +37,4 @@
       }
     }
   }
-
 }
diff --git a/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/_styles.scss b/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/_styles.scss
index eaa7dd014f..2a3d226f82 100644
--- a/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/_styles.scss
+++ b/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/_styles.scss
@@ -2,6 +2,7 @@
   &__count {
     display: flex;
     gap: 12px;
+    align-items: center;
   }
 
   &__vuln_dropdown {
diff --git a/frontend/components/EnrollSecrets/SecretField/SecretField.stories.tsx b/frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/SecretField.stories.tsx
similarity index 100%
rename from frontend/components/EnrollSecrets/SecretField/SecretField.stories.tsx
rename to frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/SecretField.stories.tsx
diff --git a/frontend/components/EnrollSecrets/SecretField/SecretField.tsx b/frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/SecretField.tsx
similarity index 66%
rename from frontend/components/EnrollSecrets/SecretField/SecretField.tsx
rename to frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/SecretField.tsx
index bceed62222..5f54f08b6f 100644
--- a/frontend/components/EnrollSecrets/SecretField/SecretField.tsx
+++ b/frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/SecretField.tsx
@@ -36,29 +36,29 @@ const SecretField = ({ secret }: ISecretFieldProps): JSX.Element | null => {
     return false;
   };
 
-  const renderLabel = () => {
+  const renderCopyShowButtons = () => {
     return (
-      <span className={`${baseClass}`}>
-        <span className="buttons">
-          {copyMessage && (
-            <span className="copy-message">{`${copyMessage} `}</span>
-          )}
-          <Button
-            variant="unstyled"
-            className={`${baseClass}__secret-copy-icon`}
-            onClick={onCopySecret}
-          >
-            <Icon name="copy" />
-          </Button>
-          <a
-            href="#showSecret"
-            onClick={onToggleSecret}
-            className={`${baseClass}__show-secret`}
-          >
-            <Icon name="eye" />
-          </a>
-        </span>
-      </span>
+      <div className="buttons">
+        {copyMessage && (
+          <span
+            className={`${baseClass}__copy-message`}
+          >{`${copyMessage} `}</span>
+        )}
+        <Button
+          variant="unstyled"
+          className={`${baseClass}__copy-secret-icon`}
+          onClick={onCopySecret}
+        >
+          <Icon name="copy" />
+        </Button>
+        <Button
+          variant="unstyled"
+          className={`${baseClass}__show-secret-icon`}
+          onClick={onToggleSecret}
+        >
+          <Icon name="eye" />
+        </Button>
+      </div>
     );
   };
 
@@ -68,10 +68,10 @@ const SecretField = ({ secret }: ISecretFieldProps): JSX.Element | null => {
         disabled
         inputWrapperClass={`${baseClass}__secret-input`}
         name="secret-field"
-        label={renderLabel()}
         type={showSecret ? "text" : "password"}
         value={secret}
       />
+      {renderCopyShowButtons()}
     </div>
   );
 };
diff --git a/frontend/components/EnrollSecrets/SecretField/_styles.scss b/frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/_styles.scss
similarity index 58%
rename from frontend/components/EnrollSecrets/SecretField/_styles.scss
rename to frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/_styles.scss
index 29401c7f25..fee0ee67cc 100644
--- a/frontend/components/EnrollSecrets/SecretField/_styles.scss
+++ b/frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/_styles.scss
@@ -1,17 +1,17 @@
 .secret-field {
-  &__secret-input {
-    margin-bottom: 8px;
-
-    .form-field__label {
-      position: relative;
-      font-size: $x-small;
-      font-weight: $bold;
-      margin-top: $pad-small;
-      width: 100%;
-      height: 0;
-      min-height: 0;
+  &__secret {
+    display: flex;
+    align-items: center;
+    .buttons {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+      position: absolute;
+      left: 466px;
+      min-width: 130px;
     }
-
+  }
+  &__secret-input {
     .input-field {
       width: 100%;
       padding-right: 16%;
@@ -26,13 +26,11 @@
     }
   }
 
-  &__secret-copy-icon {
+  &__copy-secret-icon {
     color: $core-vibrant-blue;
-    margin-left: $pad-small;
-    margin-right: $pad-small;
   }
 
-  .copy-message {
+  &__copy-message {
     font-weight: $regular;
     vertical-align: top;
     background-color: $ui-light-grey;
@@ -41,29 +39,6 @@
     padding: 2px 6px;
   }
 
-  .buttons {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    right: 16px;
-    top: 12px;
-    height: 16px;
-
-    span {
-      font-weight: $regular;
-    }
-
-    a {
-      display: flex;
-      align-items: center;
-    }
-
-    img {
-      width: 16px;
-      height: 16px;
-    }
-  }
-
   &__secret-download-icon {
     display: block;
     font-size: $x-small;
diff --git a/frontend/components/EnrollSecrets/SecretField/index.ts b/frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/index.ts
similarity index 100%
rename from frontend/components/EnrollSecrets/SecretField/index.ts
rename to frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/index.ts
diff --git a/frontend/pages/UserSettingsPage/UserSettingsPage.tsx b/frontend/pages/UserSettingsPage/UserSettingsPage.tsx
index fae48a210d..19c389c867 100644
--- a/frontend/pages/UserSettingsPage/UserSettingsPage.tsx
+++ b/frontend/pages/UserSettingsPage/UserSettingsPage.tsx
@@ -20,11 +20,11 @@ import Modal from "components/Modal";
 // @ts-ignore
 import UserSettingsForm from "components/forms/UserSettingsForm";
 import InfoBanner from "components/InfoBanner";
-import SecretField from "components/EnrollSecrets/SecretField";
 import MainContent from "components/MainContent";
 import SidePanelContent from "components/SidePanelContent";
 import CustomLink from "components/CustomLink";
 
+import SecretField from "./APITokenModal/TokenSecretField/SecretField";
 import UserSidePanel from "./UserSidePanel";
 
 const baseClass = "user-settings";
@@ -170,6 +170,7 @@ const UserSettingsPage = ({
       return false;
     }
 
+    // TODO - move to its own component
     return (
       <Modal
         title="Get API token"
diff --git a/frontend/pages/UserSettingsPage/_styles.scss b/frontend/pages/UserSettingsPage/_styles.scss
index 355a6b0e3f..c9c4c6ce96 100644
--- a/frontend/pages/UserSettingsPage/_styles.scss
+++ b/frontend/pages/UserSettingsPage/_styles.scss
@@ -24,6 +24,21 @@
   }
 
   .token-message {
+    @include help-text;
+    .custom-link {
+      font-size: inherit;
+      .icon {
+        scale: 0.88;
+      }
+      &__no-wrap {
+        // adjust for multi-line custom links
+        .icon {
+          padding-left: 4px;
+          position: relative;
+          top: 2px;
+        }
+      }
+    }
     margin-bottom: 2rem;
   }