Send telemetry for profile searches and add search button

components/automate-ui/src/app/pages/+compliance/+profile/+profile-overview/profile-overview.component.html

@@ -24,13 +24,25 @@
         <chef-heading>Profiles</chef-heading>
         <chef-subheading>Compliance profiles manage security and compliance scans.</chef-subheading>
 
-        <div class="profiles-search" *ngIf="!profilesEmpty || isAvailableProfilesVisible">
+        <div class="profiles-search" *ngIf="!profilesEmpty || isAvailableProfilesVisible"
+        [class.active]="formActive">
           <input
+            #search_box
             chefInput
             type="text"
             aria-label="Search profiles"
             placeholder="Search profiles..."
-            (input)="onSearchInput($event)"/>
+            autocomplete="off"
+            (focus)="toggleFocus()"
+            (blur)="toggleFocus()"/>
+          <button
+          type="submit"
+          class="primary"
+          primary
+          (click)="onSearchInput(search_box.value)">
+            <span aria-hidden="true" class="hidden">Submit Search</span>
+            <chef-icon>search</chef-icon>
+          </button>
         </div>
 
         <chef-tab-selector *ngIf="isAvailableProfilesVisible" class="profiles-tabs" [value]="selectedTab" (change)="onTabChange($event)">

components/automate-ui/src/app/pages/+compliance/+profile/+profile-overview/profile-overview.component.scss

@@ -5,11 +5,47 @@
 }
 
 .profiles-search {
-  padding: 18px 0 14px;
+  display: flex;
+  margin: 18px 0 14px;
+  flex-direction: row;
+  width: 100%;
 
-  chef-input {
+  &.active {
+    box-shadow: 0px 0px 0px 1px $chef-primary-bright; // Mimic default outline
+  }
+
+  input {
     width: 100%;
     font-size: 14px;
+    border-radius: 4px 0px 0px 4px;
+    transition: 0s; // Remove default transition
+
+    &:focus {
+      border: 0; // Accessibility is being noted around containing form
+    }
+  }
+
+  button {
+    background: #E6EBEE;
+    width: 45px;
+    box-shadow: 0 1px 14px #E6EBEE;
+    border: 0px solid transparent;
+    border-radius: 0px 4px 4px 0px;
+    cursor: pointer;
+    font-size: 16px;
+
+    &:focus {
+      outline: none;
+      border: 1px solid $chef-primary-bright;
+    }
+
+    &[disabled] {
+      cursor: auto;
+    }
+
+    .hidden {
+      display: none;
+    }
   }
 }
 

components/automate-ui/src/app/pages/+compliance/+profile/+profile-overview/profile-overview.component.spec.ts

@@ -16,6 +16,7 @@ import { UploadService } from 'app/services/profiles/upload.service';
 import { ChefSessionService } from 'app/services/chef-session/chef-session.service';
 import { ProductDeployedService } from 'app/services/product-deployed/product-deployed.service';
 import { MockComponent } from 'ng2-mock-component';
+import { TelemetryService } from 'app/services/telemetry/telemetry.service';
 
 class MockProductDeployedService {
   constructor(private products: string[]) { }
@@ -38,6 +39,10 @@ class MockUploadService {
   }
 }
 
+class MockTelemetryService {
+  track() { }
+}
+
 describe('ProfilesOverviewComponent', () => {
   let store: Store<NgrxStateAtom>;
   let fixture, component, element;
@@ -68,7 +73,8 @@ describe('ProfilesOverviewComponent', () => {
           {provide: ChefSessionService, useValue: mockSession},
           {provide: UploadService, useClass: MockUploadService},
           FeatureFlagsService,
-          { provide: ProductDeployedService, useValue: new MockProductDeployedService([]) }
+          { provide: ProductDeployedService, useValue: new MockProductDeployedService([]) },
+          { provide: TelemetryService, useClass: MockTelemetryService }
         ],
         schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
       });
@@ -428,7 +434,8 @@ describe('ProfilesOverviewComponent', () => {
           {provide: ChefSessionService, useValue: mockSession},
           {provide: UploadService, useClass: MockUploadService},
           FeatureFlagsService,
-          { provide: ProductDeployedService, useValue: new MockProductDeployedService([]) }
+          { provide: ProductDeployedService, useValue: new MockProductDeployedService([]) },
+          { provide: TelemetryService, useClass: MockTelemetryService }
         ],
         schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
       });
@@ -515,7 +522,9 @@ describe('ProfilesOverviewComponent', () => {
           {provide: UploadService, useClass: MockUploadService},
           FeatureFlagsService,
           // This installs the Desktop offering
-          { provide: ProductDeployedService, useValue: new MockProductDeployedService(['desktop']) }
+          { provide: ProductDeployedService,
+            useValue: new MockProductDeployedService(['desktop']) },
+          { provide: TelemetryService, useClass: MockTelemetryService }
         ],
         schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
       });
@@ -601,7 +610,9 @@ describe('ProfilesOverviewComponent', () => {
           {provide: UploadService, useClass: MockUploadService},
           FeatureFlagsService,
           // This installs the Desktop offering
-          { provide: ProductDeployedService, useValue: new MockProductDeployedService(['desktop']) }
+          { provide: ProductDeployedService,
+            useValue: new MockProductDeployedService(['desktop']) },
+          { provide: TelemetryService, useClass: MockTelemetryService }
         ],
         schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
       });

components/automate-ui/src/app/pages/+compliance/+profile/+profile-overview/profile-overview.component.ts

@@ -23,6 +23,7 @@ import { ChefSessionService } from 'app/services/chef-session/chef-session.servi
 import { find } from 'lodash';
 import { ProductDeployedService } from 'app/services/product-deployed/product-deployed.service';
 import { HttpStatus } from 'app/types/types';
+import { TelemetryService } from 'app/services/telemetry/telemetry.service';
 
 interface Profile {
     name: String;
@@ -54,6 +55,7 @@ export class ProfileOverviewComponent implements OnInit, OnDestroy {
   filteredAvailableProfiles: Array<Profile> = [];
   filteredProfilesLength = 0;
   filteredAvailableProfilesLength = 0;
+  formActive = false;
 
   // shows setup page when false
   profilesEnabled = true;
@@ -88,7 +90,8 @@ export class ProfileOverviewComponent implements OnInit, OnDestroy {
     private uploadService: UploadService,
     private chefSessionService: ChefSessionService,
     private layoutFacade: LayoutFacadeService,
-    private productDeployedService: ProductDeployedService
+    private productDeployedService: ProductDeployedService,
+    private telemetryService: TelemetryService
   ) {
     this.isAvailableProfilesVisible = !this.productDeployedService.isProductDeployed('desktop');
   }
@@ -109,15 +112,16 @@ export class ProfileOverviewComponent implements OnInit, OnDestroy {
       });
   }
 
-  onSearchInput(event) {
-    const value = event.target.value;
+  onSearchInput(searchText) {
+    const value = searchText;
     const filter = profile => {
       return ['name', 'version', 'title'].some(key => {
         return profile[key].toLowerCase().includes(value.toLowerCase());
       });
     };
     this.filteredProfiles = this.installedProfiles.filter(filter);
     this.filteredAvailableProfiles = this.availableProfiles.filter(filter);
+    this.telemetryService.track('Compliance_Profiles_Search', { searchText });
   }
 
   // load the user's profiles
@@ -315,4 +319,8 @@ export class ProfileOverviewComponent implements OnInit, OnDestroy {
   selectTab(tabToSelect: 'installed' | 'available') {
     this.selectedTab = tabToSelect;
   }
+
+  toggleFocus(): void {
+    this.formActive = !this.formActive;
+  }
 }