From 629f408d31ea4cb1c2fb5402b14acf7257b6ac21 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Wed, 19 Jul 2023 10:40:59 -0400
Subject: [PATCH] Fleet UI styleguide update: Replace all search bars and icons
 with new styling (#12312)

---
 .../icon-search-fleet-black-16x16@2x.png      | Bin 841 -> 0 bytes
 .../components/TableContainer/_styles.scss    |  11 ------
 .../ConfirmInviteForm/ConfirmInviteForm.jsx   |   4 +++
 .../ForgotPasswordForm/ForgotPasswordForm.jsx |  10 ++++--
 .../{helpers.js => validate.js}               |   8 ++---
 .../components/forms/LoginForm/LoginForm.jsx  |   8 ++++-
 .../ResetPasswordForm/ResetPasswordForm.jsx   |   2 ++
 .../InputFieldWithIcon/InputFieldWithIcon.jsx |   7 +++-
 .../fields/InputFieldWithIcon/_styles.scss    |  20 +++++++++--
 .../forms/fields/SearchField/SearchField.tsx  |   9 +++--
 frontend/components/icons/Search.tsx          |  32 ++++++++++++++++++
 frontend/components/icons/index.ts            |   2 ++
 .../CustomLabelGroupHeading.tsx               |   1 +
 .../CustomLabelGroupHeading/_styles.scss      |  15 ++++----
 .../SelectQueryModal/SelectQueryModal.tsx     |  10 ++++--
 .../modals/SelectQueryModal/_styles.scss      |  11 ------
 16 files changed, 101 insertions(+), 49 deletions(-)
 delete mode 100644 assets/images/icon-search-fleet-black-16x16@2x.png
 rename frontend/components/forms/ForgotPasswordForm/{helpers.js => validate.js} (75%)
 create mode 100644 frontend/components/icons/Search.tsx

diff --git a/assets/images/icon-search-fleet-black-16x16@2x.png b/assets/images/icon-search-fleet-black-16x16@2x.png
deleted file mode 100644
index 923a571e2e29b9504f0e071ec2246e120831824f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 841
zcmV-P1GfB$P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0^UhPK~#7F#aF#f
z8$l5M<}L{&0_l=85Q;2+MXH#N(viZC(!d))o&fR$m?wyN0!)`OG!a$`oGzu)gS@Fg
zO2HMDuqC+79N3n*o%^#x_$2?_?#|3Nvv;%K0S^pHTi~gp_Y@<W<lwC_C<4Y~Gp{pU
zXAjy0!6D$*&h?Q-PEb<dXU>x?4!YeJFxeTQ5(KoHhlnc;PR%ZFJc4_~E?4<8itH#b
ziOq3uuHE!ce`YbT2)vqE-Z6&CIRp1&l<T@W{$kE+UYu6b7P~_5QkoHOi{?zzwq-F3
ziQYXhp_Vp@oc)-PzA?@o|Ecuv@0409T*KwEn;pJXvMD~D>1r8C1SZs~VkgI<6N9}=
zv`fCO`A7i!D0PTL!Q^Qn?#6U(zvK+qaF^L{rv(qe0ZP37qcG($vHdtZ>SW)Lf`?9#
z6LFQeH0|e7B3yy%qTojl5<Eo5PDjVXW+tt72()I6^1fpjNcMy^X{o~#Dmr+DpoSqZ
zf_6n1E<hvzvL^oM?{y3T9qzTUw!w=bVB6!KFgg9<H8K!T_!l5!Wqj87_8S%fyHq06
zJWza+3MZ)8OSl5Y+HYg7q=u3iEj(VgeWD&ifPO>=iD&~ufX@`G5pmByl-4@8kBo_y
zM@`PGe8vD^yDdm<9rRUN@A|%Ojd`<gIP2)+xH$H5UN<jJejy_!)cYdA`C<iUrF7n?
z9!NHwr@$!*RR9I15^4lwK$tm^dn`_}OpCMY>48bLvdvd<W!J_8yHVlU6|9{$Ta2+y
zJdW>(QYKO6ku4-5tQ2*trH~Dr0KJn)SgJT1iGd)JutX`V*`qOUp6|)nl4c49yZ5s&
z!8-dsZ2Bj?`%P-aU3D{Uj5$CKaI>j7CRhkFg?y&mNWV}7bq7-4jBXSY%sM|xYy4Zd
z+hRkpO7*arwa_Z}E1pE1*|#031mZ|#dHcyiVju!}kV2w%?*!6F{1*ZVB<g<wE5|qU
TLzy6E00000NkvXXu0mjfxt(=<

diff --git a/frontend/components/TableContainer/_styles.scss b/frontend/components/TableContainer/_styles.scss
index 84e36d1e63..1cb21065f6 100644
--- a/frontend/components/TableContainer/_styles.scss
+++ b/frontend/components/TableContainer/_styles.scss
@@ -105,17 +105,6 @@
       }
     }
 
-    &::before {
-      display: inline-block;
-      position: absolute;
-      padding: 5px 0 0 0; // centers spin
-      content: url(../assets/images/icon-search-fleet-black-16x16@2x.png);
-      transform: scale(0.5);
-      height: 20px;
-      top: 3px;
-      left: 8px;
-    }
-
     .input-field {
       padding-left: 42px;
       width: 100%;
diff --git a/frontend/components/forms/ConfirmInviteForm/ConfirmInviteForm.jsx b/frontend/components/forms/ConfirmInviteForm/ConfirmInviteForm.jsx
index 653fb10ef9..57dde25c35 100644
--- a/frontend/components/forms/ConfirmInviteForm/ConfirmInviteForm.jsx
+++ b/frontend/components/forms/ConfirmInviteForm/ConfirmInviteForm.jsx
@@ -32,6 +32,8 @@ class ConfirmInviteForm extends Component {
           <InputFieldWithIcon
             {...fields.name}
             autofocus
+            role="textbox"
+            label="Full name"
             placeholder="Full name"
             inputOptions={{
               maxLength: "80",
@@ -39,6 +41,7 @@ class ConfirmInviteForm extends Component {
           />
           <InputFieldWithIcon
             {...fields.password}
+            label="Password"
             placeholder="Password"
             type="password"
             hint={[
@@ -47,6 +50,7 @@ class ConfirmInviteForm extends Component {
           />
           <InputFieldWithIcon
             {...fields.password_confirmation}
+            label="Confirm password"
             placeholder="Confirm password"
             type="password"
           />
diff --git a/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx b/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx
index 39f4b2ac2a..83a20af976 100644
--- a/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx
+++ b/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx
@@ -4,12 +4,11 @@ import PropTypes from "prop-types";
 import Button from "components/buttons/Button";
 import Form from "components/forms/Form";
 import formFieldInterface from "interfaces/form_field";
-import helpers from "components/forms/ForgotPasswordForm/helpers";
 import InputFieldWithIcon from "components/forms/fields/InputFieldWithIcon";
+import validate from "./validate";
 
 const baseClass = "forgot-password-form";
 const fieldNames = ["email"];
-const { validate } = helpers;
 
 class ForgotPasswordForm extends Component {
   static propTypes = {
@@ -26,7 +25,12 @@ class ForgotPasswordForm extends Component {
     return (
       <form onSubmit={handleSubmit} className={baseClass} autoComplete="off">
         {baseError && <div className="form__base-error">{baseError}</div>}
-        <InputFieldWithIcon {...fields.email} autofocus placeholder="Email" />
+        <InputFieldWithIcon
+          {...fields.email}
+          autofocus
+          label="Email"
+          placeholder="Email"
+        />
         <div className={`${baseClass}__button-wrap`}>
           <Button
             className={`${baseClass}__submit-btn`}
diff --git a/frontend/components/forms/ForgotPasswordForm/helpers.js b/frontend/components/forms/ForgotPasswordForm/validate.js
similarity index 75%
rename from frontend/components/forms/ForgotPasswordForm/helpers.js
rename to frontend/components/forms/ForgotPasswordForm/validate.js
index 18c2ac8a37..5922d1716b 100644
--- a/frontend/components/forms/ForgotPasswordForm/helpers.js
+++ b/frontend/components/forms/ForgotPasswordForm/validate.js
@@ -1,14 +1,14 @@
 import { size } from "lodash";
 import validatePresence from "components/forms/validators/validate_presence";
-import validEmail from "components/forms/validators/valid_email";
+import validateEmail from "components/forms/validators/valid_email";
 
 const validate = (formData) => {
-  const { email } = formData;
   const errors = {};
+  const { email } = formData;
 
   if (!validatePresence(email)) {
     errors.email = "Email field must be completed";
-  } else if (!validEmail(email)) {
+  } else if (!validateEmail(email)) {
     errors.email = "Email must be a valid email address";
   }
 
@@ -17,4 +17,4 @@ const validate = (formData) => {
   return { valid, errors };
 };
 
-export default { validate };
+export default validate;
diff --git a/frontend/components/forms/LoginForm/LoginForm.jsx b/frontend/components/forms/LoginForm/LoginForm.jsx
index 349417a1a4..d335744e35 100644
--- a/frontend/components/forms/LoginForm/LoginForm.jsx
+++ b/frontend/components/forms/LoginForm/LoginForm.jsx
@@ -85,9 +85,15 @@ class LoginForm extends Component {
       <form onSubmit={handleSubmit} className={loginFormClass}>
         <div className={`${baseClass}__container`}>
           {baseError && <div className="form__base-error">{baseError}</div>}
-          <InputFieldWithIcon {...fields.email} autofocus placeholder="Email" />
+          <InputFieldWithIcon
+            {...fields.email}
+            autofocus
+            label="Email"
+            placeholder="Email"
+          />
           <InputFieldWithIcon
             {...fields.password}
+            label="Password"
             placeholder="Password"
             type="password"
           />
diff --git a/frontend/components/forms/ResetPasswordForm/ResetPasswordForm.jsx b/frontend/components/forms/ResetPasswordForm/ResetPasswordForm.jsx
index d9c6f4ecb6..e563a29f09 100644
--- a/frontend/components/forms/ResetPasswordForm/ResetPasswordForm.jsx
+++ b/frontend/components/forms/ResetPasswordForm/ResetPasswordForm.jsx
@@ -29,6 +29,7 @@ class ResetPasswordForm extends Component {
         <InputFieldWithIcon
           {...fields.new_password}
           autofocus
+          label="New password"
           placeholder="New password"
           className={`${baseClass}__input`}
           type="password"
@@ -38,6 +39,7 @@ class ResetPasswordForm extends Component {
         />
         <InputFieldWithIcon
           {...fields.new_password_confirmation}
+          label="Confirm password"
           placeholder="Confirm password"
           className={`${baseClass}__input`}
           type="password"
diff --git a/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx b/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
index db76030f6d..a707fe2643 100644
--- a/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
+++ b/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 
+import Icon from "components/Icon/Icon";
 import FleetIcon from "components/icons/FleetIcon";
 import TooltipWrapper from "components/TooltipWrapper";
 import InputField from "../InputField";
@@ -14,6 +15,7 @@ class InputFieldWithIcon extends InputField {
     error: PropTypes.string,
     hint: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
     iconName: PropTypes.string,
+    iconSvg: PropTypes.string,
     label: PropTypes.string,
     name: PropTypes.string,
     onChange: PropTypes.func,
@@ -67,6 +69,7 @@ class InputFieldWithIcon extends InputField {
       className,
       error,
       iconName,
+      iconSvg,
       name,
       placeholder,
       tabIndex,
@@ -100,9 +103,11 @@ class InputFieldWithIcon extends InputField {
       { [`${baseClass}__icon--active`]: value }
     );
 
+    console.log("iconSvg", iconSvg);
     return (
       <div className={wrapperClasses}>
-        {this.renderHeading()}
+        {this.props.label && this.renderHeading()}
+        {iconSvg && <Icon name={iconSvg} className={iconClasses} />}
         <input
           id={name}
           name={name}
diff --git a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
index db4644224a..432015773d 100644
--- a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
+++ b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
@@ -7,7 +7,6 @@
     position: absolute;
     right: 6px;
     top: 28px;
-    font-size: 18px;
     color: $core-fleet-blue;
 
     &--active {
@@ -21,12 +20,27 @@
     }
   }
 
+  // Refactor to include svg icons
+  &--icon-start {
+    margin-top: 0;
+
+    .input-icon-field__icon {
+      position: absolute;
+      left: 12px;
+      top: 13px;
+      width: 16px;
+      font-size: $x-small;
+      color: $core-fleet-blue;
+      z-index: 1;
+    }
+  }
+
   &__input {
     border: 1px solid $ui-fleet-black-10;
     background-color: $ui-light-grey;
     border-radius: $border-radius;
     padding: 9px 30px 9px $pad-medium;
-    font-size: $small;
+    font-size: $x-small;
     text-indent: 1px;
     position: relative;
     width: 100%;
@@ -95,7 +109,7 @@
   // overwrite icon position and input padding
   &--icon-start {
     input {
-      padding: 9px 1rem 9px 3rem;
+      padding: 9.5px 12px 9.5px 36px; // New figma styling
     }
     .fleeticon {
       right: auto;
diff --git a/frontend/components/forms/fields/SearchField/SearchField.tsx b/frontend/components/forms/fields/SearchField/SearchField.tsx
index 27d8c62d69..ab57f36511 100644
--- a/frontend/components/forms/fields/SearchField/SearchField.tsx
+++ b/frontend/components/forms/fields/SearchField/SearchField.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 // @ts-ignore
-import InputField from "../InputField";
+import InputFieldWithIcon from "../InputFieldWithIcon";
 
 const baseClass = "search-field";
 
@@ -28,11 +28,14 @@ const SearchField = ({
   };
 
   return (
-    <InputField
+    <InputFieldWithIcon
+      name="search"
       placeholder={placeholder}
       value={searchQueryInput}
-      inputWrapperClass={`${baseClass}__input-wrapper`}
+      // inputWrapperClass={`${baseClass}__input-wrapper`}
       onChange={onInputChange}
+      iconPosition="start"
+      iconSvg="search"
     />
   );
 };
diff --git a/frontend/components/icons/Search.tsx b/frontend/components/icons/Search.tsx
new file mode 100644
index 0000000000..7869546cd3
--- /dev/null
+++ b/frontend/components/icons/Search.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
+import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes";
+
+interface ISearchProps {
+  color?: Colors;
+  size?: IconSizes;
+}
+
+const Search = ({
+  size = "medium",
+  color = "ui-fleet-black-75",
+}: ISearchProps) => {
+  return (
+    <svg
+      width={ICON_SIZES[size]}
+      height={ICON_SIZES[size]}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11 6.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-.665 5.249a6.5 6.5 0 1 1 1.414-1.414l3.958 3.958a1 1 0 0 1-1.414 1.414l-3.958-3.958Z"
+        fill={COLORS[color]}
+      />
+    </svg>
+  );
+};
+
+export default Search;
diff --git a/frontend/components/icons/index.ts b/frontend/components/icons/index.ts
index b42cfaa152..bb5fe334aa 100644
--- a/frontend/components/icons/index.ts
+++ b/frontend/components/icons/index.ts
@@ -24,6 +24,7 @@ import More from "./More";
 import Plus from "./Plus";
 import PremiumFeature from "./PremiumFeature";
 import Query from "./Query";
+import Search from "./Search";
 
 import LowDiskSpaceHosts from "./LowDiskSpaceHosts";
 import MissingHosts from "./MissingHosts";
@@ -100,6 +101,7 @@ export const ICON_MAP = {
   copy: Copy,
   eye: Eye,
   pencil: Pencil,
+  search: Search,
   transfer: Transfer,
   trash: TrashCan,
   success: Success,
diff --git a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx
index 9f3682ba69..5ddf98e242 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx
@@ -61,6 +61,7 @@ const CustomLabelGroupHeading = (
         </div>
       </div>
       <div className={`${baseClass}__field`}>
+        <Icon name="search" />
         <input
           className={`${baseClass}__input`}
           ref={inputRef}
diff --git a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss
index 187326b46a..e4d6a12bf0 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss
@@ -20,15 +20,11 @@
 
   &__field {
     position: relative;
-    &::before {
-      display: inline-block;
+
+    .icon {
       position: absolute;
-      padding: 5px 0 0 0; // centers spin
-      content: url(../assets/images/icon-search-fleet-black-16x16@2x.png);
-      transform: scale(0.5);
-      height: 20px;
-      top: 3px;
-      left: 8px;
+      left: 12px;
+      top: 12px;
     }
   }
 
@@ -39,9 +35,10 @@
     border: solid 1px $ui-fleet-black-10;
     border-radius: 4px;
     font-size: $small;
-    padding: $pad-xsmall 12px $pad-xsmall 42px;
+    padding: 9.5px 12px 9.5px 36px;
     color: $core-fleet-blue;
     font-family: "Inter", sans-serif;
+    font-size: $x-small;
     box-sizing: border-box;
     height: 40px;
 
diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/SelectQueryModal.tsx b/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/SelectQueryModal.tsx
index 606d67c6c5..c5378d5c90 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/SelectQueryModal.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/SelectQueryModal.tsx
@@ -7,7 +7,7 @@ import { AppContext } from "context/app";
 import Button from "components/buttons/Button";
 import Modal from "components/Modal";
 // @ts-ignore
-import InputField from "components/forms/fields/InputField";
+import InputFieldWithIcon from "components/forms/fields/InputFieldWithIcon";
 
 import DataError from "components/DataError";
 import permissions from "utilities/permissions";
@@ -135,12 +135,14 @@ const SelectQueryModal = ({
         <div>
           <div className={`${baseClass}__filter-create-wrapper`}>
             <div className={`${baseClass}__filter-queries`}>
-              <InputField
+              <InputFieldWithIcon
                 name="query-filter"
                 onChange={onFilterQueries}
                 placeholder="Filter queries"
                 value={queriesFilter}
                 autofocus
+                iconSvg="search"
+                iconPosition="start"
               />
             </div>
             {(!isOnlyObserver || isObserverPlus || isHostsTeamObserverPlus) && (
@@ -160,12 +162,14 @@ const SelectQueryModal = ({
         <div>
           <div className={`${baseClass}__filter-create-wrapper`}>
             <div className={`${baseClass}__filter-queries`}>
-              <InputField
+              <InputFieldWithIcon
                 name="query-filter"
                 onChange={onFilterQueries}
                 placeholder="Filter queries"
                 value={queriesFilter}
                 autofocus
+                iconSvg="search"
+                iconPosition="start"
               />
             </div>
             {(!isOnlyObserver || isObserverPlus || isHostsTeamObserverPlus) && (
diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/_styles.scss b/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/_styles.scss
index a97628ecd9..9cff3c71b3 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/_styles.scss
+++ b/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/_styles.scss
@@ -43,17 +43,6 @@
     flex-grow: 3;
     position: relative;
 
-    &::before {
-      display: inline-block;
-      position: absolute;
-      padding: 5px 0 0 0; // centers spin
-      content: url(../assets/images/icon-search-fleet-black-16x16@2x.png);
-      transform: scale(0.5);
-      height: 20px;
-      top: 3px;
-      left: 8px;
-    }
-
     .form-field {
       margin-bottom: 0;
     }