Added Update web ui key slider

components/automate-ui/src/app/entities/servers/server.actions.ts

@@ -1,7 +1,7 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { Action } from '@ngrx/store';
 
-import { Server , User } from './server.model';
+import { Server , User, WebUIKey } from './server.model';
 
 export enum ServerActionTypes {
   GET_ALL                        = 'SERVER::GET_ALL',
@@ -21,7 +21,10 @@ export enum ServerActionTypes {
   DELETE_FAILURE                 = 'SERVER::CREATE::DELETE::FAILURE',
   GET_USERS                      = 'SERVER::GET_USERS',
   GET_USERS_SUCCESS              = 'SERVER::GET_USERS::SUCCESS',
-  GET_USERS_FAILURE              = 'SERVER::GET_USERS::FAILURE'
+  GET_USERS_FAILURE              = 'SERVER::GET_USERS::FAILURE',
+  UPDATE_WEB_UI_KEY              = 'SERVER::UPDATE_WEB_UI_KEY',
+  UPDATE_WEB_UI_KEY_SUCCESS      = 'SERVER::UPDATE_WEB_UI_KEY::SUCCESS',
+  UPDATE_WEB_UI_KEY_FAILURE      = 'SERVER::UPDATE_WEB_UI_KEY::FAILURE'
 }
 
 
@@ -141,6 +144,29 @@ export class GetUsersFailure implements Action {
   constructor(public payload: HttpErrorResponse) { }
 }
 
+export interface WebUIKeyPayload {
+  server_id: any;
+  key: string;
+}
+
+export class UpdateWebUIKey implements Action {
+  readonly type = ServerActionTypes.UPDATE_WEB_UI_KEY;
+
+  constructor(public payload: WebUIKey) { }
+}
+
+export class UpdateWebUIKeySuccess implements Action {
+  readonly type = ServerActionTypes.UPDATE_WEB_UI_KEY_SUCCESS;
+
+  constructor(public payload: WebUIKeyPayload) { }
+}
+
+export class UpdateWebUIKeyFailure implements Action {
+  readonly type = ServerActionTypes.UPDATE_WEB_UI_KEY_FAILURE;
+
+  constructor(public payload: HttpErrorResponse) { }
+}
+
 export type ServerActions =
   | GetServers
   | GetServersSuccess
@@ -159,4 +185,7 @@ export type ServerActions =
   | DeleteServerFailure
   | GetUsers
   | GetUsersSuccess
-  | GetUsersFailure;
+  | GetUsersFailure
+  | UpdateWebUIKey
+  | UpdateWebUIKeySuccess
+  | UpdateWebUIKeyFailure;

components/automate-ui/src/app/entities/servers/server.effects.ts

@@ -29,7 +29,11 @@ import {
   GetUsers,
   GetUsersSuccess,
   GetUsersFailure,
-  UsersSuccessPayload
+  UsersSuccessPayload,
+  UpdateWebUIKey,
+  UpdateWebUIKeySuccess,
+  UpdateWebUIKeyFailure,
+  WebUIKeyPayload
 } from './server.actions';
 
 import {
@@ -188,4 +192,29 @@ export class ServerEffects {
         message: `Could not get users: ${msg || error}`
       });
     })));
+
+  UpdateWebUIKey$ = createEffect(() => this.actions$.pipe(
+    ofType(ServerActionTypes.UPDATE_WEB_UI_KEY),
+    mergeMap(({ payload}: UpdateWebUIKey) =>
+      this.requests.updateWebUIKey(payload).pipe(
+        map((resp: WebUIKeyPayload) => new UpdateWebUIKeySuccess(resp)),
+        catchError((error: HttpErrorResponse) =>
+          observableOf(new UpdateWebUIKeyFailure(error)))))));
+
+  UpdateWebUIKeySuccess$ = createEffect(() => this.actions$.pipe(
+    ofType(ServerActionTypes.UPDATE_WEB_UI_KEY_SUCCESS),
+    map(({ payload: webuikey }: UpdateWebUIKeySuccess) => new CreateNotification({
+    type: Type.info,
+    message: `Successfully updated Web UI Key ${webuikey.server_id}.`
+  }))));
+
+  UpdateWebUIKeyFailure$ = createEffect(() => this.actions$.pipe(
+    ofType(ServerActionTypes.UPDATE_WEB_UI_KEY_FAILURE),
+    map(({ payload }: UpdateWebUIKeyFailure) => {
+      const msg = payload.error.error;
+      return new CreateNotification({
+        type: Type.error,
+        message: `Could not update Web UI Key ${msg || payload.error}.`
+      });
+    })));
 }

components/automate-ui/src/app/entities/servers/server.model.ts

@@ -16,3 +16,8 @@ export interface User {
   automate_user_id: string;
   is_server_admin: boolean;
 }
+
+export interface WebUIKey {
+  server_id: string;
+  key: string;
+}

components/automate-ui/src/app/entities/servers/server.reducer.ts

@@ -14,6 +14,7 @@ export interface ServerEntityState extends EntityState<Server> {
   deleteStatus: EntityStatus;
   getUsers: User[];
   getUsersStatus: EntityStatus;
+  updateWebUIKeyStatus: EntityStatus;
 }
 
 const GET_ALL_STATUS = 'getAllStatus';
@@ -23,6 +24,7 @@ const UPDATE_STATUS = 'updateStatus';
 const GET_STATUS = 'getStatus';
 const DELETE_STATUS = 'deleteStatus';
 const GET_USERS_STATUS = 'getUsersStatus';
+const UPDATE_WEB_UI_KEY_STATUS = 'updateWebUIKeyStatus';
 
 export const serverEntityAdapter: EntityAdapter<Server> = createEntityAdapter<Server>();
 
@@ -35,7 +37,8 @@ export const ServerEntityInitialState: ServerEntityState =
     getStatus: EntityStatus.notLoaded,
     deleteStatus: EntityStatus.notLoaded,
     getUsers: null,
-    getUsersStatus: EntityStatus.notLoaded
+    getUsersStatus: EntityStatus.notLoaded,
+    updateWebUIKeyStatus: EntityStatus.notLoaded
   });
 
 export function serverEntityReducer(
@@ -140,6 +143,16 @@ export function serverEntityReducer(
     case ServerActionTypes.GET_USERS_FAILURE:
       return set(
         GET_USERS_STATUS, EntityStatus.loadingFailure, state);
+
+    case ServerActionTypes.UPDATE_WEB_UI_KEY:
+      return set(UPDATE_WEB_UI_KEY_STATUS, EntityStatus.loading, state);
+
+    case ServerActionTypes.UPDATE_WEB_UI_KEY_SUCCESS:
+      return set(UPDATE_WEB_UI_KEY_STATUS, EntityStatus.loadingSuccess,
+        state);
+
+    case ServerActionTypes.UPDATE_WEB_UI_KEY_FAILURE:
+      return set(UPDATE_WEB_UI_KEY_STATUS, EntityStatus.loadingFailure, state);
   }
 
   return state;

components/automate-ui/src/app/entities/servers/server.requests.ts

@@ -4,8 +4,8 @@ import { Observable } from 'rxjs';
 import { mapKeys, snakeCase } from 'lodash/fp';
 
 import { environment as env } from 'environments/environment';
-import { Server, User } from './server.model';
-import { CreateServerPayload, ServerSuccessPayload } from './server.actions';
+import { Server, User, WebUIKey } from './server.model';
+import { CreateServerPayload, ServerSuccessPayload, WebUIKeyPayload } from './server.actions';
 
 export interface ServersResponse {
   servers: Server[];
@@ -49,4 +49,10 @@ export class ServerRequests {
   public getUser(payload): Observable<UserResponse> {
     return this.http.get<UserResponse>(`${env.infra_proxy_url}/servers/${payload.server_id}/automateinfraserverusers`);
   }
+
+  // Need to change API endpoint for update WebUIKey
+  public updateWebUIKey(payload): Observable<WebUIKey> {
+    return this.http.put<WebUIKeyPayload>
+    (`${env.infra_proxy_url}/servers/${payload.server_id}`, payload.key);
+  }
 }

components/automate-ui/src/app/entities/servers/server.selectors.ts

@@ -56,3 +56,8 @@ export const getUsersStatus = createSelector(
   serverState,
   (state) => state.getUsersStatus
 );
+
+export const updateWebUIKey = createSelector(
+  serverState,
+  (state) => state.updateWebUIKeyStatus
+);

components/automate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.html

@@ -21,6 +21,17 @@
                 <span class="heading">IP Address</span>
                 <span>{{ server?.ip_address }}</span>
               </li>
+              <li>
+                <span class="heading">Web UI Key</span>
+                <span *ngIf="isValid" class="webUIKeyStatus">Valid</span>
+                <img *ngIf="!isValid" src="../../../../assets/img/warning.png" alt="warning" />
+                <span *ngIf="!isValid" class="invalidStatus">Invalid</span>
+                <span class="update-link" data-cy="open-WebKey-slider">
+                  <a 
+                  (click)="webUIKeySlider.slidePanel()"
+                  >Update</a>
+                </span>
+              </li>
             </ul>
           </div>
         </div>
@@ -215,6 +226,9 @@
           <p data-cy="no-records">No Organization available.</p>
         </div>
       </section>
+      <app-update-web-uikey-slider
+       #webUIKeySlider>
+      </app-update-web-uikey-slider>
     </main>
   </div>
 </div>

components/automate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.scss

@@ -42,6 +42,25 @@ chef-page-header {
             font-weight: bold;
             width: 30%;
           }
+
+          &.webUIKeyStatus {
+            text-transform: uppercase;
+          }
+
+          &.update-link {
+            padding-left: 10px;
+            text-decoration: underline;
+
+            a {
+              cursor: pointer;
+            }
+          }
+        }
+
+        img {
+          margin: 2.5px 5.5px 0px 0px;
+          width: 14px;
+          height: 13.5px;
         }
       }
     }

components/automate-ui/src/app/modules/infra-proxy/chef-server-details/chef-server-details.component.ts

@@ -65,6 +65,7 @@ export class ChefServerDetailsComponent implements OnInit, OnDestroy {
   public users;
   public usersListLoading;
   public authFailure = false;
+  public isValid = false;
 
   constructor(
     private fb: FormBuilder,
@@ -289,5 +290,4 @@ export class ChefServerDetailsComponent implements OnInit, OnDestroy {
     };
     this.store.dispatch(new UpdateServer({server: updatedServer}));
   }
-
 }

components/automate-ui/src/app/modules/infra-proxy/create-chef-server-slider/create-chef-server-slider.component.html

@@ -151,13 +151,13 @@ <h2 slot="title">Add Chef Infra Server </h2>
                 (keyup)="handleInput($event)"
                 autofocus></textarea>
             </label>
-            <chef-error
-            *ngIf="webUIKeyForm.get('webui_key').hasError('required') && webUIKeyForm.get('webui_key').dirty">
-            WEB UI KEY is required.
+            <chef-error class="textarea-error"
+              *ngIf="webUIKeyForm.get('webui_key').hasError('required') && webUIKeyForm.get('webui_key').dirty">
+              WEB UI KEY is required.
             </chef-error>
-            <span class="note_text">Note: A web UI Key is located <span>Here</span>(Need Better Help Text).</span>
           </chef-form-field>
         </div>
+        <span class="note_text">Note: A web UI Key is located <span>Here</span>(Need Better Help Text).</span>
        <div id="button-bar">
           <chef-button id="cancel-server-popup" tertiary [disabled]="creating" (click)="closeSeverSlider()">Cancel</chef-button>
           <chef-button [disabled]="!createForm?.valid || webUIKeyForm?.valid || creating || conflictError || (selected === 'fqdn') ? !fqdnForm?.valid : !ipForm?.valid"

components/automate-ui/src/app/modules/infra-proxy/create-chef-server-slider/create-chef-server-slider.component.scss

@@ -152,3 +152,7 @@
   font-size: 14px;
   letter-spacing: 0.2px;
 }
+
+.textarea-error {
+  margin-top: -6px;
+}

components/automate-ui/src/app/modules/infra-proxy/infra-proxy.module.ts

@@ -63,6 +63,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import { PaginatorComponent } from './paginator/paginator.component';
 import { SelectBoxModule } from './select-box/src/public_api';
 import { TreeTableModule } from './tree-table/tree-table.module';
+import { UpdateWebUIKeySliderComponent } from './update-web-uikey-slider/update-web-uikey-slider.component';
 
 @NgModule({
   declarations: [
@@ -115,6 +116,7 @@ import { TreeTableModule } from './tree-table/tree-table.module';
     ResetNodeKeyComponent,
     RevisionIdComponent,
     UpdateNodeTagModalComponent,
+    UpdateWebUIKeySliderComponent,
     PaginatorComponent
   ],
   imports: [

components/automate-ui/src/app/modules/infra-proxy/update-web-uikey-slider/update-web-uikey-slider.component.html

@@ -0,0 +1,48 @@
+<div ngClass="{slide : isSlideOpen}">
+  <div class="sidenav-header">
+    <chef-button class="back-button" secondary (click)="closeUpdateModal()" data-cy="back-button">
+      <chef-icon>arrow_back</chef-icon>
+    </chef-button>
+    <h1 data-cy="title" slot="title">Update Web UI Key</h1>
+    <chef-button class="close" secondary (click)="closeUpdateModal()">
+      <chef-icon>close</chef-icon>
+    </chef-button>
+  </div>
+  <form [formGroup]="updateKeyForm">
+    <div class="sidenav-body">
+      <div class="id-margin">
+        <chef-form-field>
+          <label>
+            <span class="Keylabel">Web UI Key <span aria-hidden="true">*</span></span>
+            <textarea 
+              chefInput 
+              firstFocus
+              name="webUiKey"
+              formControlName="webUiKey"
+              type="text"
+              autocomplete="off"
+              (keyup)="handleInput($event)" 
+              data-cy="enter-key">
+            </textarea>
+          </label>
+          <chef-error class="textarea-error"
+            *ngIf="updateKeyForm.get('webUiKey').hasError('required') && updateKeyForm.get('webUiKey').dirty">
+            WEB UI KEY is required.
+          </chef-error>
+        </chef-form-field>
+        <span class="bottom-note">Note: A web UI Key is located Here (Need Better Help text)</span>
+      </div>
+    </div>
+    <div class="button-bar">
+      <chef-button tertiary data-cy="cancel" (click)="closeUpdateModal()">Cancel</chef-button>
+      <chef-button primary data-cy="Upload"
+        [disabled]="!updateKeyForm?.valid || conflictError || updating"
+        id="upload-button-object-modal"
+        (click)="uploadWebUIKey()">
+        <chef-loading-spinner *ngIf="updating"></chef-loading-spinner>
+        <span *ngIf="!updating">Upload Web UI Key</span>
+        <span *ngIf="updating">Uploading Web UI Key</span>
+      </chef-button>
+    </div>
+  </form>
+</div>