wip

redhat-developer · Sep 12, 2023 · 2bbc1ce · 2bbc1ce
1 parent b20ceb6
commit 2bbc1ce
Show file tree

Hide file tree

Showing 17 changed files with 391 additions and 66 deletions.
diff --git a/ui/cypress/e2e/spec.cy.ts b/ui/cypress/e2e/spec.cy.ts
@@ -117,7 +117,7 @@ describe('devfile editor spec', () => {
   });
 
 
-  it.only('displays a modified container', () => {
+  it('displays a modified container', () => {
     cy.init();
 
     cy.selectTab(TAB_VOLUMES);
@@ -767,4 +767,262 @@ describe('devfile editor spec', () => {
     cy.selectTab(TAB_YAML);
     cy.get('[data-cy="yaml-input"]').should("contain.value", "events: {}");
   });
+
+  it('should update list of commands from multi-value field when adding and editing a composite command', () => {
+    cy.init();
+    cy.fixture('input/with-exec-command.yaml').then(yaml => {
+      cy.setDevfile(yaml);
+    });
+
+    cy.selectTab(TAB_COMMANDS);
+    cy.getByDataCy('add').click();
+    cy.getByDataCy('new-command-composite').click();
+    cy.getByDataCy('command-composite-name').type('my-new-composite-command');
+    cy.getByDataCy('add-command').click();
+    cy.getByDataCy('add-command').click();
+    cy.getByDataCy('add-command').click();
+    cy.getByDataCy('command-selector-0').click().get('mat-option').contains('command2').click();
+    cy.getByDataCy('command-selector-1').click().get('mat-option').contains('command3').click();
+    cy.getByDataCy('command-selector-2').click().get('mat-option').contains('command1').click();
+    cy.getByDataCy('command-minus-1').click();
+    cy.getByDataCy('command-composite-create').click();
+
+    cy.getByDataCy('command-info').last()
+        .should('contain.text', 'command2')
+        .should('contain.text', 'command1')
+        .should('not.contain.text', 'command3');
+
+    //Edit
+    cy.getByDataCy('command-edit').last().click();
+    cy.getByDataCy('command-selector-0').should('have.text', 'command2');
+    cy.getByDataCy('command-selector-1').should('have.text', 'command1');
+
+    cy.getByDataCy('add-command').click();
+    cy.getByDataCy('add-command').click();
+    cy.getByDataCy('add-command').click();
+    cy.getByDataCy('command-selector-2').click().get('mat-option').contains('command2').click();
+    cy.getByDataCy('command-minus-4').click();
+    cy.getByDataCy('command-minus-0').click();
+    cy.getByDataCy('command-selector-2').click().get('mat-option').contains('command3').click();
+    cy.getByDataCy('command-composite-save').click();
+
+    cy.getByDataCy('command-info').last()
+        .should('contain.text', 'command1')
+        .should('contain.text', 'command2')
+        .should('contain.text', 'command3');
+  });
+
+  it('should update list of build args from multi-value field when adding and editing an image component', () => {
+    cy.init();
+    cy.selectTab(TAB_IMAGES);
+
+    cy.getByDataCy('image-name').type('my-new-image');
+    cy.getByDataCy('image-image-name').type('an-image-name');
+    cy.getByDataCy('image-dockerfile-uri').type('/path/to/dockerfile');
+
+    cy.getByDataCy('add-text').click();
+    cy.getByDataCy('add-text').click();
+    cy.getByDataCy('add-text').click();
+
+    cy.getByDataCy('image-arg-text-0').type('arg2');
+    cy.getByDataCy('image-arg-text-1').type('arg3');
+    cy.getByDataCy('image-arg-text-2').type('arg1');
+    cy.getByDataCy('image-arg-minus-1').click();
+
+    cy.getByDataCy('image-create').click();
+
+    cy.getByDataCy('image-info').last()
+        .should('contain.text', 'arg2')
+        .should('contain.text', 'arg1')
+        .should('not.contain.text', 'arg3');
+
+    //Edit
+    cy.getByDataCy('image-edit').last().click();
+    cy.getByDataCy('image-arg-text-0').should('have.value', 'arg2');
+    cy.getByDataCy('image-arg-text-1').should('have.value', 'arg1');
+
+    cy.getByDataCy('add-text').click();
+    cy.getByDataCy('add-text').click();
+    cy.getByDataCy('add-text').click();
+    cy.getByDataCy('image-arg-text-2').type('arg2');
+    cy.getByDataCy('image-arg-minus-4').click();
+    cy.getByDataCy('image-arg-minus-0').click();
+    cy.getByDataCy('image-arg-text-2').type('arg3');
+    cy.getByDataCy('image-save').click();
+
+    cy.getByDataCy('image-info').last()
+        .should('contain.text', 'arg1')
+        .should('contain.text', 'arg2')
+        .should('contain.text', 'arg3');
+  });
+
+  it('should update list of env vars from multi-value field when adding and editing a container', () => {
+    cy.init();
+    cy.selectTab(TAB_CONTAINERS);
+
+    cy.getByDataCy('container-name').type('my-new-container');
+    cy.getByDataCy('container-image').type('an-image');
+    cy.getByDataCy('container-env-add').click();
+    cy.getByDataCy('container-env-add').click();
+    cy.getByDataCy('container-env-add').click();
+
+    cy.getByDataCy('container-env-name-0').type("VAR2");
+    cy.getByDataCy('container-env-value-0').type("val2");
+    cy.getByDataCy('container-env-name-1').type("VAR3");
+    cy.getByDataCy('container-env-value-1').type("val3");
+    cy.getByDataCy('container-env-name-2').type("VAR1");
+    cy.getByDataCy('container-env-value-2').type("val1");
+    cy.getByDataCy('container-env-minus-1').click();
+
+    cy.getByDataCy('container-create').click();
+
+    cy.getByDataCy('container-info').last()
+        .should('contain.text', 'my-new-container')
+        .should('contain.text', 'an-image')
+        .should('contain.text', 'VAR2: val2')
+        .should('contain.text', 'VAR1: val1')
+        .should('not.contain.text', 'VAR3: val3');
+
+    //Edit
+    cy.getByDataCy('container-edit').last().click();
+    cy.getByDataCy('container-env-name-0').should('have.value', 'VAR2');
+    cy.getByDataCy('container-env-value-0').should('have.value', 'val2');
+    cy.getByDataCy('container-env-name-1').should('have.value', 'VAR1');
+    cy.getByDataCy('container-env-value-1').should('have.value', 'val1');
+
+    cy.getByDataCy('container-env-add').click();
+    cy.getByDataCy('container-env-add').click();
+    cy.getByDataCy('container-env-add').click();
+    cy.getByDataCy('container-env-name-2').type("VAR2");
+    cy.getByDataCy('container-env-value-2').type("val2");
+    cy.getByDataCy('container-env-minus-4').click();
+    cy.getByDataCy('container-env-minus-0').click();
+    cy.getByDataCy('container-env-name-2').type("VAR3");
+    cy.getByDataCy('container-env-value-2').type("val3");
+    cy.getByDataCy('container-save').click();
+
+    cy.getByDataCy('container-info').last()
+        .should('contain.text', 'my-new-container')
+        .should('contain.text', 'an-image')
+        .should('contain.text', 'VAR2: val2')
+        .should('contain.text', 'VAR1: val1')
+        .should('contain.text', 'VAR3: val3');
+  });
+
+  it('should update list of endpoints from multi-value field when adding and editing a container', () => {
+    cy.init();
+    cy.selectTab(TAB_CONTAINERS);
+
+    cy.getByDataCy('container-name').type('my-new-container');
+    cy.getByDataCy('container-image').type('an-image');
+    cy.getByDataCy('endpoints-add').click();
+    cy.getByDataCy('endpoints-add').click();
+    cy.getByDataCy('endpoints-add').click();
+
+    cy.getByDataCy('endpoint-name-0').type("ep2");
+    cy.getByDataCy('endpoint-targetPort-0').clear().type("4002");
+    cy.getByDataCy('endpoint-name-1').type("ep3");
+    cy.getByDataCy('endpoint-targetPort-1').clear().type("4003");
+    cy.getByDataCy('endpoint-name-2').type("ep1");
+    cy.getByDataCy('endpoint-targetPort-2').clear().type("4001");
+    cy.getByDataCy('endpoint-minus-1').click();
+
+    cy.getByDataCy('container-create').click();
+
+    cy.getByDataCy('container-info').last()
+        .should('contain.text', 'my-new-container')
+        .should('contain.text', 'ep2')
+        .should('contain.text', '4002')
+        .should('contain.text', 'ep1')
+        .should('contain.text', '4001')
+        .should('not.contain.text', 'ep3')
+        .should('not.contain.text', '4003');
+
+    //Edit
+    cy.getByDataCy('container-edit').last().click();
+    cy.getByDataCy('endpoint-name-0').should('have.value', 'ep2');
+    cy.getByDataCy('endpoint-targetPort-0').should('have.value', '4002');
+    cy.getByDataCy('endpoint-name-1').should('have.value', 'ep1');
+    cy.getByDataCy('endpoint-targetPort-1').should('have.value', '4001');
+    cy.getByDataCy('endpoints-add').click();
+    cy.getByDataCy('endpoints-add').click();
+    cy.getByDataCy('endpoints-add').click();
+    cy.getByDataCy('endpoint-name-2').type("ep2");
+    cy.getByDataCy('endpoint-targetPort-2').clear().type("4002");
+    cy.getByDataCy('endpoint-minus-4').click();
+    cy.getByDataCy('endpoint-minus-0').click();
+    cy.getByDataCy('endpoint-name-2').type("ep3");
+    cy.getByDataCy('endpoint-targetPort-2').clear().type("4003");
+    cy.getByDataCy('container-save').click();
+
+    cy.getByDataCy('container-info').last()
+        .should('contain.text', 'my-new-container')
+        .should('contain.text', 'ep1')
+        .should('contain.text', '4001')
+        .should('contain.text', 'ep2')
+        .should('contain.text', '4002')
+        .should('contain.text', 'ep3')
+        .should('contain.text', '4003');
+  });
+
+  it('should update list of volume mounts from multi-value field when adding and editing a container', () => {
+    cy.init();
+    cy.fixture('input/with-volume.yaml').then(yaml => {
+      cy.setDevfile(yaml);
+    });
+
+    cy.selectTab(TAB_CONTAINERS);
+
+    cy.getByDataCy('container-name').type('my-new-container');
+    cy.getByDataCy('container-image').type('an-image');
+    cy.getByDataCy('volume-mount-add').click();
+    cy.getByDataCy('volume-mount-add').click();
+    cy.getByDataCy('volume-mount-add').click();
+
+    cy.getByDataCy('volume-mount-path-0').type("/mnt/vol2", {force: true});
+    cy.getByDataCy('volume-mount-name-0').click().get('mat-option').contains('volume2').click();
+    cy.getByDataCy('volume-mount-path-1').type("/mnt/vol3", {force: true});
+    cy.getByDataCy('volume-mount-name-1').click().get('mat-option').contains('volume3').click();
+    cy.getByDataCy('volume-mount-path-2').type("/mnt/vol1", {force: true});
+    cy.getByDataCy('volume-mount-name-2').click().get('mat-option').contains('volume1').click();
+    cy.getByDataCy('volume-mount-minus-1').click();
+    cy.getByDataCy('container-create').click();
+
+    cy.getByDataCy('container-info').last()
+        .should('contain.text', 'my-new-container')
+        .should('contain.text', 'volume2')
+        .should('contain.text', '/mnt/vol2')
+        .should('contain.text', 'volume1')
+        .should('contain.text', '/mnt/vol1')
+        .should('not.contain.text', 'volume3')
+        .should('not.contain.text', '/mnt/vol3');
+
+    //Edit
+    cy.getByDataCy('container-edit').last().click();
+    cy.getByDataCy('volume-mount-name-0').should('have.text', 'volume2');
+    cy.getByDataCy('volume-mount-path-0').should('have.value', '/mnt/vol2');
+    cy.getByDataCy('volume-mount-name-1').should('have.text', 'volume1');
+    cy.getByDataCy('volume-mount-path-1').should('have.value', '/mnt/vol1');
+    cy.getByDataCy('volume-mount-add').click();
+    cy.getByDataCy('volume-mount-add').click();
+    cy.getByDataCy('volume-mount-add').click();
+    cy.getByDataCy('volume-mount-path-2').type("/mnt/vol2", {force: true});
+    cy.getByDataCy('volume-mount-name-2').click().get('mat-option').contains('volume2').click();
+    cy.getByDataCy('volume-mount-minus-4').click();
+    cy.getByDataCy('volume-mount-minus-0').click();
+    cy.getByDataCy('volume-mount-path-2').type("/mnt/vol3", {force: true});
+    cy.getByDataCy('volume-mount-name-2').click().get('mat-option').contains('volume3').click();
+    cy.getByDataCy('container-save').click();
+
+    cy.getByDataCy('container-info').last()
+        .should('contain.text', 'my-new-container')
+        .should('contain.text', 'volume1')
+        .should('contain.text', '/mnt/vol1')
+        .should('contain.text', 'volume2')
+        .should('contain.text', '/mnt/vol2')
+        .should('contain.text', 'volume3')
+        .should('contain.text', '/mnt/vol3');
+  });
+
+
 });
diff --git a/ui/cypress/fixtures/input/with-exec-command.yaml b/ui/cypress/fixtures/input/with-exec-command.yaml
@@ -7,6 +7,18 @@ commands:
     hotReloadCapable: false
     workingDir: /projects
   id: command1
+- exec:
+      commandLine: echo command2
+      component: container1
+      hotReloadCapable: true
+      workingDir: /projects
+  id: command2
+- exec:
+      commandLine: echo command3
+      component: container1
+      hotReloadCapable: true
+      workingDir: /projects
+  id: command3
 components:
 - container:
     args:

diff --git a/ui/cypress/fixtures/input/with-volume.yaml b/ui/cypress/fixtures/input/with-volume.yaml
@@ -0,0 +1,12 @@
+schemaVersion: 2.2.0
+metadata: {}
+components:
+- name: volume1
+  volume: {}
+- name: volume2
+  volume:
+    size: 2Gi
+- name: volume3
+  volume:
+    ephemeral: true
+    size: 3G
diff --git a/ui/src/app/controls/endpoints/endpoints.component.css b/ui/src/app/controls/endpoints/endpoints.component.css
@@ -1,2 +1,13 @@
 .mid-width { width: 50%; }
 .quart-width { width: 25%; }
+
+mat-card{
+    display:flex;
+    flex-direction: row;
+    margin-bottom: 16px;
+}
+
+mat-card-content{
+    flex-grow: 1;
+    overflow: auto;
+}