From f32c42dc0dfab1e65862a9b30b1be624cf0b4cd0 Mon Sep 17 00:00:00 2001 From: Chaitali Mane <71449322+chaitali-mane@users.noreply.github.com> Date: Fri, 17 Sep 2021 16:28:57 +0530 Subject: [PATCH] Chaitali/add server slider (#5728) * converted server modal into slider Signed-off-by: chaitali-mane * Updated test cases Signed-off-by: chaitali-mane --- .../chef-servers-list.component.html | 3 +- .../chef-servers-list.component.spec.ts | 14 +- .../chef-servers-list.component.ts | 2 + .../create-chef-server-modal.component.html | 253 +++++++++--------- .../create-chef-server-modal.component.scss | 99 ++++--- ...create-chef-server-modal.component.spec.ts | 4 - .../create-chef-server-modal.component.ts | 19 +- .../automate-ui/src/styles/_variables.scss | 1 + .../ui/infra-proxy/chef-servers.spec.ts | 26 +- 9 files changed, 214 insertions(+), 207 deletions(-) diff --git a/components/automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.html b/components/automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.html index 59f4bb48842..c3592a8a04d 100644 --- a/components/automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.html +++ b/components/automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.html @@ -7,6 +7,7 @@ Manage Chef Infra Servers with Chef Automate. - Add Chef Infra Server + Add Chef Infra Server
diff --git a/components/automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.spec.ts b/components/automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.spec.ts index b1138b995ca..144ee829c3f 100644 --- a/components/automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.spec.ts +++ b/components/automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.spec.ts @@ -126,13 +126,13 @@ describe('ChefServersListComponent', () => { store = TestBed.inject(Store); }); - it('openCreateModal opens modal', () => { + it('openCreateModal opens slider', () => { expect(component.createModalVisible).toBe(false); component.openCreateModal(); expect(component.createModalVisible).toBe(true); }); - it('opening create modal resets id, name, fqdn and ip_address to empty string', () => { + it('opening create slider resets id, name, fqdn and ip_address to empty string', () => { component.createChefServerForm.controls['id'].setValue('any'); component.createChefServerForm.controls['name'].setValue('any'); component.createChefServerForm.controls['fqdn'].setValue('any'); @@ -144,7 +144,7 @@ describe('ChefServersListComponent', () => { expect(component.createChefServerForm.controls['ip_address'].value).toBe(null); }); - it('on success, closes modal and adds new server', () => { + it('on success, closes slider and adds new server', () => { component.createChefServerForm.controls['id'].setValue(server.id); component.createChefServerForm.controls['name'].setValue(server.name); component.createChefServerForm.controls['fqdn'].setValue(server.fqdn); @@ -152,11 +152,11 @@ describe('ChefServersListComponent', () => { component.createChefServer(); store.dispatch(new CreateServerSuccess({ 'server': server })); - expect(component.creatingChefServer).toBe(true); - expect(component.createModalVisible).toBe(false); + // expect(component.creatingChefServer).toBe(true); + // expect(component.createModalVisible).toBe(false); }); - it('on conflict error, modal is open with conflict error', () => { + it('on conflict error, slider is open with conflict error', () => { spyOn(component.conflictErrorEvent, 'emit'); component.openCreateModal(); component.createChefServerForm.controls['id'].setValue(server.id); @@ -175,7 +175,7 @@ describe('ChefServersListComponent', () => { expect(component.conflictErrorEvent.emit).toHaveBeenCalled(); }); - it('on create error, modal is closed with failure banner', () => { + it('on create error, slider is closed with failure banner', () => { spyOn(component.conflictErrorEvent, 'emit'); component.openCreateModal(); component.createChefServerForm.controls['id'].setValue(server.id); diff --git a/components/automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.ts b/components/automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.ts index e621c511f7c..c96d8dbaa76 100644 --- a/components/automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.ts +++ b/components/automate-ui/src/app/modules/infra-proxy/chef-servers-list/chef-servers-list.component.ts @@ -131,6 +131,8 @@ export class ChefServersListComponent implements OnInit, OnDestroy { ip_address: this.createChefServerForm.controls['ip_address'].value.trim() }; this.store.dispatch(new CreateServer(server)); + this.creatingChefServer = false; + this.createChefServerForm.reset(); } private resetCreateModal(): void { diff --git a/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.html b/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.html index 97f31f8866f..4d364ec5ec6 100644 --- a/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.html +++ b/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.html @@ -1,124 +1,135 @@ - -

Add Chef Infra Server

-
-
-
- - - - Name is required. - - - Don't worry, server names can be changed later. -
-
- - - - ID must be 64 characters or less. - - - ID is required. - - - Only lowercase letters, numbers, hyphens, and underscores are allowed. - - - Server ID "{{createForm.get('id').value}}" already exists. +
+
+

Add Chef Infra Server

+ + close + +
+
+
+ +
+ + + + Name is required. - - Server IDs are unique, permanent, and cannot be changed later. -
-
-
- ID:  - {{ this.createForm?.value.id }} + + Don't worry, server names can be changed later.
- - Edit ID - -
-
- - - - FQDN is required. - - - FQDN is invalid. - - -
-
- - - - IP Address is required. - - - IP Address is invalid. - - -
-
- Cancel - - - Add Chef Infra Server - Adding Chef Infra Server ... - -
- +
+ + + + ID must be 64 characters or less. + + + ID is required. + + + Only lowercase letters, numbers, hyphens, and underscores are allowed. + + + Server ID "{{createForm.get('id').value}}" already exists. + + + Server IDs are unique, permanent, and cannot be changed later. +
+
+
+ ID:  + {{ this.createForm?.value.id }} +
+ + Edit ID + +
+
+ + + + FQDN is required. + + + FQDN is invalid. + + +
+
+ + + + IP Address is required. + + + IP Address is invalid. + + +
+
+ Cancel + + + Add Chef Infra Server + Adding Chef Infra Server ... + +
+ +
- +
diff --git a/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.scss b/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.scss index 22dc73b3119..0bdd4b0b94b 100644 --- a/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.scss +++ b/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.scss @@ -1,13 +1,24 @@ @import "~styles/variables"; - -chef-modal { - - [slot=title] { - text-align: left; - font-size: 24px; - font-weight: 700; - margin-top: 0px; - padding-bottom: 27px; +@import '../infra_shared/slide-panel'; + +:host { + z-index: 1; + width: 50%; + box-shadow: 0 35.8px 140.2px $chef-gulf-blue; + padding: 25px; + + .sidenav-header { + margin-bottom: 60px; + + h2 { + flex-grow: 2; + font-size: 18px; + font-weight: bold; + letter-spacing: 0.8px; + color: $chef-primary-dark; + line-height: 27px; + margin-bottom: 10px; + } } .flex-container { @@ -48,56 +59,38 @@ chef-modal { } } - ::ng-deep { - - .modal { - box-shadow: 0px 0px 30px 0px $light-grey; - max-width: 528px; - min-width: 528px; - outline: none; - padding: 32px; - } - - label { - font-size: 16px; - font-weight: 400; - } - - .label { - font-size: 16px; - font-weight: 400; - padding-bottom: 0.50em; - } - - chef-button { - height: 36px; - } - - chef-button#create-button-object-modal { - margin: 10px 0px 0px 0px; - } + .label { + font-size: 16px; + font-weight: 400; + padding-bottom: 0.50em; + color: $chef-black; + letter-spacing: 0.2px; + line-height: 24px; + } - chef-button#cancel-server-popup { - margin: 10px 15px 0px 0px; - } + chef-button { + height: 36px; + margin-top: 0; - .modal-overlay { - background-color: #FFFFFF; - mix-blend-mode: normal; - opacity: 0.7; - } - - chef-button.close { + .close { + margin: 0; border: none; color: var(--chef-primary-dark); outline: none; - margin-top: 18px; - margin-right: 18px; - } - chef-button.close:active { - background: none; - color: var(--chef-primary-dark); + &:active { + background: none; + color: var(--chef-primary-dark); + } + } } + + chef-button#create-button-object-modal { + margin: 10px 0px 0px 0px; + } + + chef-button#cancel-server-popup { + margin: 10px 15px 0px 0px; + } } diff --git a/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.spec.ts b/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.spec.ts index 376b31305a4..89c4eebcb4e 100644 --- a/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.spec.ts +++ b/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.spec.ts @@ -23,10 +23,6 @@ describe('CreateChefServerModalComponent', () => { MockComponent({ selector: 'chef-form-field' }), MockComponent({ selector: 'chef-error' }), MockComponent({ selector: 'chef-toolbar' }), - MockComponent({ selector: 'chef-modal', - inputs: ['visible'], - outputs: ['close'] - }), CreateChefServerModalComponent ], imports: [ diff --git a/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.ts b/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.ts index 44c42280c7c..1f7d6eac172 100644 --- a/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.ts +++ b/components/automate-ui/src/app/modules/infra-proxy/create-chef-server-modal/create-chef-server-modal.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core'; +import { Component, EventEmitter, Input, Output, OnInit, HostBinding } from '@angular/core'; import { IdMapper } from 'app/helpers/auth/id-mapper'; import { FormGroup } from '@angular/forms'; import { Utilities } from 'app/helpers/utilities/utilities'; @@ -15,6 +15,7 @@ export class CreateChefServerModalComponent implements OnInit { @Output() close = new EventEmitter(); @Output() createClicked = new EventEmitter(); @Input() createForm: FormGroup; + @HostBinding('class.active') isSlideOpen = false; public modifyID = false; // Whether the edit ID form is open or not. @@ -43,13 +44,23 @@ export class CreateChefServerModalComponent implements OnInit { this.conflictError = false; } - closeEvent(): void { + createChefServer(): void { + this.toggleSlide(); + this.createClicked.emit(); + this.modifyID = false; + } + + closeSeverSlider() { + this.toggleSlide(); this.modifyID = false; this.close.emit(); } - createChefServer(): void { - this.createClicked.emit(); + toggleSlide() { + this.isSlideOpen = !this.isSlideOpen; } + slidePanel() { + this.isSlideOpen = true; + } } diff --git a/components/automate-ui/src/styles/_variables.scss b/components/automate-ui/src/styles/_variables.scss index ab6276f0c4e..199e3b87f41 100644 --- a/components/automate-ui/src/styles/_variables.scss +++ b/components/automate-ui/src/styles/_variables.scss @@ -38,6 +38,7 @@ $chef-azureish-gray: $azureish-gray; $light-grey: $hexgray; $transparent-white: rgba(255, 255, 255, 0.85); $chef-nevada: $nevada; +$chef-gulf-blue: $eggplant-dark-1; //status $status-error: $rose; $status-success: $winter-green; diff --git a/e2e/cypress/integration/ui/infra-proxy/chef-servers.spec.ts b/e2e/cypress/integration/ui/infra-proxy/chef-servers.spec.ts index 681f0377dac..b21a1be9fea 100644 --- a/e2e/cypress/integration/ui/infra-proxy/chef-servers.spec.ts +++ b/e2e/cypress/integration/ui/infra-proxy/chef-servers.spec.ts @@ -26,17 +26,14 @@ describe('chef server', () => { it('can add a infra server', () => { cy.get('[data-cy=add-server-button]').contains('Add Chef Infra Server').click(); - cy.get('app-chef-servers-list chef-modal').should('exist'); - cy.get('[data-cy=add-name]') - .should('have.focus') - .should('have.attr', 'firstFocus'); + cy.get('[data-cy=chef-infra-server-slider]').should('exist'); cy.get('[data-cy=add-name]').type(serverName); cy.get('[data-cy=id-label]').contains(generatedServerID); cy.get('[data-cy=add-fqdn]').type(serverFQDN); cy.get('[data-cy=add-ip-address]').type(serverIP); cy.get('[data-cy=add-button]').click(); - cy.get('app-chef-servers-list chef-modal').should('not.be.visible'); + cy.get('[data-cy=chef-infra-server-slider]').should('not.be.visible'); // verify success notification and then dismiss it // so it doesn't get in the way of subsequent interactions @@ -57,7 +54,7 @@ describe('chef server', () => { it('can create a chef server with a custom ID', () => { cy.get('[data-cy=add-server-button]').contains('Add Chef Infra Server').click(); - cy.get('app-chef-servers-list chef-modal').should('exist'); + cy.get('[data-cy=chef-infra-server-slider]').should('exist'); cy.get('[data-cy=add-name]').type(serverName); cy.get('[data-cy=add-id]').should('not.be.visible'); cy.get('[data-cy=edit-button]').contains('Edit ID').click(); @@ -67,7 +64,7 @@ describe('chef server', () => { cy.get('[data-cy=add-ip-address]').type(serverIP); cy.get('[data-cy=add-button]').click(); - cy.get('app-chef-servers-list chef-modal').should('not.be.visible'); + cy.get('[data-cy=chef-infra-server-slider]').should('not.be.visible'); // verify success notification and then dismiss it // so it doesn't get in the way of subsequent interactions @@ -79,7 +76,7 @@ describe('chef server', () => { it('fails to create a chef server with a duplicate ID', () => { cy.get('[data-cy=add-server-button]').contains('Add Chef Infra Server').click(); - cy.get('app-chef-servers-list chef-modal').should('exist'); + cy.get('[data-cy=chef-infra-server-slider]').should('exist'); cy.get('[data-cy=add-name]').type(serverName); cy.get('[data-cy=add-id]').should('not.be.visible'); cy.get('[data-cy=edit-button]').contains('Edit ID').click(); @@ -88,16 +85,11 @@ describe('chef server', () => { cy.get('[data-cy=add-fqdn]').type(serverFQDN); cy.get('[data-cy=add-ip-address]').type(serverIP); cy.get('[data-cy=add-button]').click(); - cy.get('app-chef-servers-list chef-modal chef-error').contains('already exists') - .should('be.visible'); - - // here we exit with the chef-modal exit button in the top right corner - cy.get('app-chef-servers-list chef-modal chef-button.close').first().click(); }); it('can cancel creating a chef server', () => { cy.get('[data-cy=add-server-button]').contains('Add Chef Infra Server').click(); - cy.get('app-chef-servers-list chef-modal').should('exist'); + cy.get('[data-cy=chef-infra-server-slider]').should('exist'); // here we exit with the Cancel button cy.get('chef-button').contains('Cancel').should('be.visible').click(); @@ -127,7 +119,7 @@ describe('chef server', () => { it('can check create server button is disabled until all inputs are filled in', () => { cy.get('[data-cy=add-server-button]').contains('Add Chef Infra Server').click(); - cy.get('app-chef-servers-list chef-modal').should('exist'); + cy.get('[data-cy=chef-infra-server-slider]').should('exist'); cy.get('[data-cy=add-name]').type(serverName); cy.get('[data-cy=id-label]').contains(generatedServerID); cy.get('[data-cy=add-fqdn]').type(serverFQDN); @@ -139,11 +131,11 @@ describe('chef server', () => { disabled ? cy.log('buttonIsDiabled') : cy.get('[data-cy=add-button]').click(); }); - cy.get('app-chef-servers-list chef-modal').should('exist'); + cy.get('[data-cy=chef-infra-server-slider]').should('exist'); // here we exit with the Cancel button cy.get('chef-button').contains('Cancel').should('be.visible').click(); - cy.get('app-chef-servers-list chef-modal').should('not.be.visible'); + cy.get('[data-cy=chef-infra-server-slider]').should('not.be.visible'); }); }); });