Fleet UI: Created consistent UI for the copy button of an input field (#29056)

changes/28652-copy-button-consistency

@@ -0,0 +1 @@
+Fleet UI: Created consistent UI for the copy button of an input field

frontend/components/AddHostsModal/PlatformWrapper/AndroidPanel/AndroidPanel.tsx

@@ -42,7 +42,6 @@ const AndroidPanel = ({ enrollSecret }: IAndroidPanelProps) => {
       <InputField
         label="Send this to your end users:"
         enableCopy
-        copyButtonPosition="inside"
         readOnly
         inputWrapperClass
         name="enroll-link"

frontend/components/AddHostsModal/PlatformWrapper/IosIpadosPanel/IosIpadosPanel.tsx

@@ -45,7 +45,6 @@ const IosIpadosPanel = ({ enrollSecret }: IosIpadosPanelProps) => {
       <InputField
         label="Send this to your end users:"
         enableCopy
-        copyButtonPosition="inside"
         readOnly
         inputWrapperClass
         name="enroll-link"

frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx

@@ -315,7 +315,6 @@ const PlatformWrapper = ({
             inputWrapperClass={`${baseClass}__installer-input ${baseClass}__chromeos-extension-id`}
             name="Extension ID"
             enableCopy
-            copyButtonPosition="inside"
             label="Extension ID"
             value={CHROME_OS_INFO.extensionId}
           />
@@ -324,7 +323,6 @@ const PlatformWrapper = ({
             inputWrapperClass={`${baseClass}__installer-input ${baseClass}__chromeos-url`}
             name="Installation URL"
             enableCopy
-            copyButtonPosition="inside"
             label="Installation URL"
             value={CHROME_OS_INFO.installationUrl}
           />
@@ -333,7 +331,6 @@ const PlatformWrapper = ({
             inputWrapperClass={`${baseClass}__installer-input ${baseClass}__chromeos-policy-for-extension`}
             name="Policy for extension"
             enableCopy
-            copyButtonPosition="inside"
             label="Policy for extension"
             type="textarea"
             value={CHROME_OS_INFO.policyForExtension}
@@ -360,7 +357,6 @@ const PlatformWrapper = ({
               inputWrapperClass={`${baseClass}__installer-input ${baseClass}__installer-input-${packageType}`}
               name="installer"
               enableCopy
-              copyButtonPosition="inside"
               label={renderLabel(packageType)}
               type="textarea"
               value={renderInstallerString(packageType)}
@@ -455,7 +451,6 @@ const PlatformWrapper = ({
                   inputWrapperClass={`${baseClass}__run-osquery-input`}
                   name="run-osquery"
                   enableCopy
-                  copyButtonPosition="inside"
                   label={renderLabel("plain-osquery")}
                   type="text"
                   value="osqueryd --flagfile=flagfile.txt --verbose"
@@ -499,7 +494,6 @@ const PlatformWrapper = ({
           inputWrapperClass={`${baseClass}__installer-input ${baseClass}__installer-input-${packageType}`}
           name="installer"
           enableCopy
-          copyButtonPosition="inside"
           label={renderLabel(packageType)}
           type="textarea"
           value={renderInstallerString(packageType)}

frontend/components/forms/fields/InputField/InputField.jsx

@@ -45,7 +45,6 @@ class InputField extends Component {
     /** Use in conjunction with type "password" and enableCopy to see eye icon to view */
     enableShowSecret: PropTypes.bool,
     enableCopy: PropTypes.bool,
-    copyButtonPosition: PropTypes.oneOf(["inside", "outside"]),
     ignore1password: PropTypes.bool,
   };
 
@@ -66,7 +65,6 @@ class InputField extends Component {
     helpText: "",
     enableCopy: false,
     enableShowSecret: false,
-    copyButtonPosition: "outside",
     ignore1password: false,
   };
 
@@ -124,7 +122,7 @@ class InputField extends Component {
   };
 
   renderCopyButton = () => {
-    const { value, copyButtonPosition } = this.props;
+    const { value } = this.props;
 
     const copyValue = (e) => {
       e.preventDefault();
@@ -136,28 +134,11 @@ class InputField extends Component {
       });
     };
 
-    const copyButtonValue =
-      copyButtonPosition === "outside" ? (
-        <>
-          <Icon name="copy" />
-          <span>Copy</span>
-        </>
-      ) : (
-        <Icon name="copy" />
-      );
-
-    const wrapperClasses = classnames(
-      `${baseClass}__copy-wrapper`,
-      copyButtonPosition === "outside"
-        ? `${baseClass}__copy-wrapper-outside`
-        : `${baseClass}__copy-wrapper-inside`
-    );
+    const copyButtonValue = <Icon name="copy" />;
+    const wrapperClasses = classnames(`${baseClass}__copy-wrapper`);
 
     const copiedConfirmationClasses = classnames(
-      `${baseClass}__copied-confirmation`,
-      copyButtonPosition === "outside"
-        ? `${baseClass}__copied-confirmation-outside`
-        : `${baseClass}__copied-confirmation-inside`
+      `${baseClass}__copied-confirmation`
     );
 
     return (
@@ -165,11 +146,7 @@ class InputField extends Component {
         {this.state.copied && (
           <span className={copiedConfirmationClasses}>Copied!</span>
         )}
-        <Button
-          variant={copyButtonPosition === "outside" ? "text-icon" : "icon"}
-          onClick={copyValue}
-          iconStroke
-        >
+        <Button variant={"icon"} onClick={copyValue} iconStroke>
           {copyButtonValue}
         </Button>
         {this.props.enableShowSecret && this.renderShowSecretButton()}
@@ -195,7 +172,6 @@ class InputField extends Component {
       ignore1password,
       enableCopy,
       enableShowSecret,
-      copyButtonPosition,
     } = this.props;
 
     const { onInputChange } = this;
@@ -228,8 +204,6 @@ class InputField extends Component {
 
     const inputContainerClasses = classnames(`${baseClass}__input-container`, {
       "copy-enabled": enableCopy,
-      "copy-outside": enableCopy && copyButtonPosition === "outside",
-      "copy-inside": enableCopy && copyButtonPosition === "inside",
     });
 
     if (type === "textarea") {

frontend/components/forms/fields/InputField/InputField.stories.jsx

@@ -36,10 +36,6 @@ export default {
     enableCopy: {
       control: "boolean",
     },
-    copyButtonPosition: {
-      control: "radio",
-      options: ["inside", "outside"],
-    },
     enableShowSecret: {
       control: "boolean",
     },
@@ -110,10 +106,9 @@ WithCopyEnabled.args = {
   value: "This text can be copied",
 };
 
-export const WithCopyEnabledInsideInput = Template.bind({});
-WithCopyEnabledInsideInput.args = {
+export const WithCopyEnabledInput = Template.bind({});
+WithCopyEnabledInput.args = {
   ...WithCopyEnabled.args,
-  copyButtonPosition: "inside",
 };
 
 export const WithTooltip = Template.bind({});

frontend/components/forms/fields/InputField/InputField.stories.tsx

@@ -113,7 +113,6 @@ export const WithCopyButton: Story = {
     label: "Input with Copy Button",
     value: "Click to copy this text",
     enableCopy: true,
-    copyButtonPosition: "outside",
   },
 };
 

frontend/components/forms/fields/InputField/InputField.tests.tsx

@@ -107,7 +107,7 @@ describe("InputField Component", () => {
       />
     );
 
-    expect(screen.getByRole("button", { name: /copy/i })).toBeInTheDocument();
+    expect(screen.getByTestId("copy-icon")).toBeInTheDocument();
   });
 
   test("calls onBlur when input loses focus", async () => {

frontend/components/forms/fields/InputField/_styles.scss

@@ -101,14 +101,6 @@
     display: flex;
     align-items: center;
     position: relative;
-  }
-
-  &__copy-wrapper-outside {
-    position: relative;
-    gap: $pad-medium;
-  }
-
-  &__copy-wrapper-inside {
     position: absolute;
     top: 0;
     right: 0;
@@ -117,15 +109,7 @@
   }
 
   &__input-container.copy-enabled {
-    &.copy-outside {
-      display: flex;
-      align-items: center;
-      gap: $pad-small;
-    }
-
-    &.copy-inside {
-      position: relative;
-    }
+    position: relative;
   }
 
   &__copied-confirmation {

frontend/components/forms/fields/InputFieldHiddenContent/InputFieldHiddenContent.tsx

@@ -30,7 +30,6 @@ const InputFieldHiddenContent = ({
         name={name}
         enableShowSecret
         enableCopy
-        copyButtonPosition="inside"
         type={"password"}
         value={value}
         helpText={helpText}

frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx

@@ -358,7 +358,6 @@ const Calendars = (): JSX.Element => {
                   inputWrapperClass={`${baseClass}__oauth-scopes`}
                   name="oauth-scopes"
                   enableCopy
-                  copyButtonPosition="inside"
                   type="textarea"
                   value={OAUTH_SCOPES}
                 />

frontend/pages/hosts/details/DeviceUserPage/AutoEnrollMdmModal/AutoEnrollMdmModal.tsx

@@ -49,7 +49,6 @@ const AutoEnrollMdmModal = ({
             </div>
             <InputField
               enableCopy
-              copyButtonPosition="inside"
               readOnly
               inputWrapperClass
               name="profiles-renew-command"
@@ -90,7 +89,6 @@ const AutoEnrollMdmModal = ({
             </div>
             <InputField
               enableCopy
-              copyButtonPosition="inside"
               readOnly
               inputWrapperClass
               name="profiles-renew-command"