+
+
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 e2401dcbb60..0b7961d463c 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,58 +59,40 @@ 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;
- }
-
- chef-button#cancel-server-popup {
- margin: 10px 15px 0px 0px;
- }
+ .label {
+ font-size: 16px;
+ font-weight: 400;
+ padding-bottom: 0.50em;
+ color: $chef-black;
+ letter-spacing: 0.2px;
+ line-height: 24px;
+ }
- .modal-overlay {
- background-color: #FFFFFF;
- mix-blend-mode: normal;
- opacity: 0.7;
- }
+ chef-button {
+ height: 36px;
+ margin-top: 0;
- 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;
+ }
}
.version-dropdown {
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 f7bd616c2f0..16116009081 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';
@@ -17,6 +17,7 @@ export class CreateChefServerModalComponent implements OnInit {
@Input() createForm: FormGroup;
@Input() fqdnForm: FormGroup;
@Input() ipForm: FormGroup;
+ @HostBinding('class.active') isSlideOpen = false;
public modifyID = false; // Whether the edit ID form is open or not.
@@ -50,13 +51,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 ee46a26242e..73d11486ba5 100644
--- a/e2e/cypress/integration/ui/infra-proxy/chef-servers.spec.ts
+++ b/e2e/cypress/integration/ui/infra-proxy/chef-servers.spec.ts
@@ -26,16 +26,13 @@ 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-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
@@ -56,7 +53,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();
@@ -88,7 +85,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
@@ -100,7 +97,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();
@@ -108,16 +105,11 @@ describe('chef server', () => {
cy.get('[data-cy=add-id]').should('be.visible').clear().type(customServerID);
cy.get('[data-cy=add-fqdn]').type(serverFQDN);
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();
@@ -147,7 +139,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);
@@ -159,11 +151,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');
});
});
});