[ui] Set AutoBuild and DeployByDefault (#7051)

* Get and display autoBuild / deployByDefault

* Set autoBuild / deployByDefault

* Update ui static files

* [api] Add orpahn field to Image/Resource

* Display more info about Build / Deploy at startup

* Update ui static files

* e2e tests

* Update ui static files

* Fix unit tests

* 3-states button for AutoBuild

* 3-states button for DeployByDefault

* static ui files

ui/cypress/e2e/spec.cy.ts

@@ -175,6 +175,39 @@ describe('devfile editor spec', () => {
       .should('contain.text', 'an-image-name')
       .should('contain.text', '/path/to/build/context')
       .should('contain.text', '/path/to/dockerfile');
+
+    cy.getByDataCy('image-build-startup').first()
+      .should('contain.text', 'Yes, the image is not referenced by any command');
+  });
+
+  it('displays a created image with forced build', () => {
+    cy.init();
+
+    cy.selectTab(TAB_IMAGES);
+    cy.getByDataCy('image-name').type('created-image');
+    cy.getByDataCy('image-image-name').type('an-image-name');
+    cy.getByDataCy('image-build-context').type('/path/to/build/context');
+    cy.getByDataCy('image-dockerfile-uri').type('/path/to/dockerfile');
+    cy.getByDataCy('image-auto-build-always').click();
+    cy.getByDataCy('image-create').click();
+
+    cy.getByDataCy('image-build-startup').first()
+      .should('contain.text', 'Yes, forced');
+  });
+
+  it('displays a created image with disabled build', () => {
+    cy.init();
+
+    cy.selectTab(TAB_IMAGES);
+    cy.getByDataCy('image-name').type('created-image');
+    cy.getByDataCy('image-image-name').type('an-image-name');
+    cy.getByDataCy('image-build-context').type('/path/to/build/context');
+    cy.getByDataCy('image-dockerfile-uri').type('/path/to/dockerfile');
+    cy.getByDataCy('image-auto-build-never').click();
+    cy.getByDataCy('image-create').click();
+
+    cy.getByDataCy('image-build-startup').first()
+      .should('contain.text', 'No, disabled');
   });
 
   it('displays a created resource, with manifest', () => {
@@ -189,7 +222,10 @@ describe('devfile editor spec', () => {
     cy.getByDataCy('resource-info').first()
       .should('contain.text', 'created-resource')
       .should('contain.text', 'a-resource-manifest');
-  });
+
+    cy.getByDataCy('resource-deploy-startup').first()
+      .should('contain.text', 'Yes, the resource is not referenced by any command');
+    });
 
   it('displays a created resource, with uri (default)', () => {
     cy.init();
@@ -205,6 +241,42 @@ describe('devfile editor spec', () => {
       .should('contain.text', '/my/manifest.yaml');
   });
 
+  it('displays a created resource, with forced deploy', () => {
+    cy.init();
+
+    cy.selectTab(TAB_RESOURCES);
+    cy.getByDataCy('resource-name').type('created-resource');
+    cy.getByDataCy('resource-toggle-inlined').click();
+    cy.getByDataCy('resource-manifest').type('a-resource-manifest');
+    cy.getByDataCy('resource-auto-deploy-always').click();
+    cy.getByDataCy('resource-create').click();
+
+    cy.getByDataCy('resource-info').first()
+      .should('contain.text', 'created-resource')
+      .should('contain.text', 'a-resource-manifest');
+
+    cy.getByDataCy('resource-deploy-startup').first()
+      .should('contain.text', 'Yes, forced');
+  });
+
+  it('displays a created resource, with disabled deploy', () => {
+    cy.init();
+
+    cy.selectTab(TAB_RESOURCES);
+    cy.getByDataCy('resource-name').type('created-resource');
+    cy.getByDataCy('resource-toggle-inlined').click();
+    cy.getByDataCy('resource-manifest').type('a-resource-manifest');
+    cy.getByDataCy('resource-auto-deploy-never').click();
+    cy.getByDataCy('resource-create').click();
+
+    cy.getByDataCy('resource-info').first()
+      .should('contain.text', 'created-resource')
+      .should('contain.text', 'a-resource-manifest');
+
+    cy.getByDataCy('resource-deploy-startup').first()
+      .should('contain.text', 'No, disabled');
+  });
+
   it('displays a created volume', () => {
     cy.init();
 
@@ -327,6 +399,9 @@ describe('devfile editor spec', () => {
       .should('contain.text', 'an-image-name')
       .should('contain.text', '/context/dir')
       .should('contain.text', '/path/to/Dockerfile');
+
+    cy.getByDataCy('image-build-startup').first()
+      .should('contain.text', 'No, the image is referenced by a command');
   });
 
   it('creates an apply resource command with a new resource using manifest', () => {
@@ -353,6 +428,9 @@ describe('devfile editor spec', () => {
     cy.getByDataCy('resource-info').first()
       .should('contain.text', 'a-created-resource')
       .should('contain.text', 'spec: {}');
+
+    cy.getByDataCy('resource-deploy-startup').first()
+      .should('contain.text', 'No, the resource is referenced by a command');
   });
 
   it('creates an apply resource command with a new resource using uri (default)', () => {

ui/src/app/api-gen/model/devstateImagePostRequest.ts

@@ -21,5 +21,15 @@ export interface DevstateImagePostRequest {
     buildContext?: string;
     rootRequired?: boolean;
     uri?: string;
+    autoBuild?: DevstateImagePostRequest.AutoBuildEnum;
+}
+export namespace DevstateImagePostRequest {
+    export type AutoBuildEnum = 'never' | 'undefined' | 'always';
+    export const AutoBuildEnum = {
+        Never: 'never' as AutoBuildEnum,
+        Undefined: 'undefined' as AutoBuildEnum,
+        Always: 'always' as AutoBuildEnum
+    };
 }
 
+

ui/src/app/api-gen/model/devstateResourcePostRequest.ts

@@ -18,5 +18,15 @@ export interface DevstateResourcePostRequest {
     name?: string;
     inlined?: string;
     uri?: string;
+    deployByDefault?: DevstateResourcePostRequest.DeployByDefaultEnum;
+}
+export namespace DevstateResourcePostRequest {
+    export type DeployByDefaultEnum = 'never' | 'undefined' | 'always';
+    export const DeployByDefaultEnum = {
+        Never: 'never' as DeployByDefaultEnum,
+        Undefined: 'undefined' as DeployByDefaultEnum,
+        Always: 'always' as DeployByDefaultEnum
+    };
 }
 
+

ui/src/app/api-gen/model/image.ts

@@ -18,5 +18,19 @@ export interface Image {
     buildContext: string;
     rootRequired: boolean;
     uri: string;
+    autoBuild: Image.AutoBuildEnum;
+    /**
+     * true if the image is not referenced in any command
+     */
+    orphan: boolean;
+}
+export namespace Image {
+    export type AutoBuildEnum = 'never' | 'undefined' | 'always';
+    export const AutoBuildEnum = {
+        Never: 'never' as AutoBuildEnum,
+        Undefined: 'undefined' as AutoBuildEnum,
+        Always: 'always' as AutoBuildEnum
+    };
 }
 
+

ui/src/app/api-gen/model/resource.ts

@@ -15,5 +15,19 @@ export interface Resource {
     name: string;
     inlined?: string;
     uri?: string;
+    deployByDefault: Resource.DeployByDefaultEnum;
+    /**
+     * true if the resource is not referenced in any command
+     */
+    orphan: boolean;
+}
+export namespace Resource {
+    export type DeployByDefaultEnum = 'never' | 'undefined' | 'always';
+    export const DeployByDefaultEnum = {
+        Never: 'never' as DeployByDefaultEnum,
+        Undefined: 'undefined' as DeployByDefaultEnum,
+        Always: 'always' as DeployByDefaultEnum
+    };
 }
 
+

ui/src/app/forms/image/image.component.css

@@ -1,3 +1,6 @@
 .main { padding: 16px; }
 mat-form-field.full-width { width: 100%; }
 mat-form-field.mid-width { width: 50%; }
+div.toggle-group-div {
+    margin: 16px 0;
+}

ui/src/app/forms/image/image.component.html

@@ -2,6 +2,13 @@
     <h2>Add a new image</h2>
     <div class="description">An Image defines how to build a container image.</div>
     <form [formGroup]="form">
+        <div class="toggle-group-div">
+            Build at Startup: <mat-button-toggle-group formControlName="autoBuild">
+                <mat-button-toggle data-cy="image-auto-build-never" matTooltip="Do not build the image at startup" value="never">Never</mat-button-toggle>
+                <mat-button-toggle data-cy="image-auto-build-undefined" matTooltip="Build at startup only if the image is not referenced in any command" value="undefined">If Orphan</mat-button-toggle>
+                <mat-button-toggle data-cy="image-auto-build-always" matTooltip="Force building the image at startup" value="always">Always</mat-button-toggle>
+            </mat-button-toggle-group>
+        </div>
         <mat-form-field appearance="outline" class="mid-width">
             <mat-label><span>Name</span></mat-label>
             <mat-error>Lowercase words separated by dashes. Ex: my-image</mat-error>

ui/src/app/forms/image/image.component.ts

@@ -26,6 +26,7 @@ export class ImageComponent {
       buildContext: new FormControl(""),
       rootRequired: new FormControl(false),
       uri: new FormControl("", [Validators.required]),
+      autoBuild: new FormControl("undefined"),
     })
   }
 

ui/src/app/forms/resource/resource.component.html

@@ -2,6 +2,13 @@
     <h2>Add a new resource</h2>
     <div class="description">A Resource defines a Kubernetes resource. Its definition can be given either by a URI pointing to a manifest file or by an inlined YAML manifest.</div>
     <form [formGroup]="form">
+        <div class="toggle-group-div">
+            Deploy at Startup: <mat-button-toggle-group formControlName="deployByDefault">
+                <mat-button-toggle data-cy="resource-auto-deploy-never" matTooltip="Do not deploy the resource at startup" value="never">Never</mat-button-toggle>
+                <mat-button-toggle data-cy="resource-auto-deploy-undefined" matTooltip="Deploy at startup only if the resource is not referenced in any command" value="undefined">If Orphan</mat-button-toggle>
+                <mat-button-toggle data-cy="resource-auto-deploy-always" matTooltip="Force deploying the resource at startup" value="always">Always</mat-button-toggle>
+            </mat-button-toggle-group>
+        </div>
         <mat-form-field appearance="outline" class="mid-width">
             <mat-label><span>Name</span></mat-label>
             <mat-error>Lowercase words separated by dashes. Ex: my-resource</mat-error>

ui/src/app/forms/resource/resource.component.ts

@@ -24,6 +24,7 @@ export class ResourceComponent {
       name: new FormControl("", [Validators.required, Validators.pattern(PATTERN_COMPONENT_ID)]),
       uri: new FormControl("", [Validators.required]),
       inlined: new FormControl("", []),
+      deployByDefault: new FormControl("undefined"),
     })
   }
 

ui/src/app/services/devstate.service.ts

@@ -43,7 +43,8 @@ export class DevstateService {
       args: image.args,
       buildContext: image.buildContext,
       rootRequired: image.rootRequired,
-      uri: image.uri
+      uri: image.uri,
+      autoBuild: image.autoBuild,
     });
   }
 
@@ -52,6 +53,7 @@ export class DevstateService {
       name: resource.name,
       inlined: resource.inlined,
       uri: resource.uri,
+      deployByDefault: resource.deployByDefault,
     });
   }
 

ui/src/app/tabs/images/images.component.html

@@ -6,6 +6,13 @@
         </mat-card-header>
         <mat-card-content>
             <table class="aligned">
+                <tr data-cy="image-build-startup">
+                    <td>Build at Startup:</td>
+                    <td *ngIf="image.autoBuild == 'always'"><code>Yes, forced</code></td>
+                    <td *ngIf="image.autoBuild == 'undefined' && image.orphan"><code>Yes, the image is not referenced by any command</code></td>
+                    <td *ngIf="image.autoBuild == 'undefined' && !image.orphan"><code>No, the image is referenced by a command</code></td>
+                    <td *ngIf="image.autoBuild == 'never'"><code>No, disabled</code></td>
+                </tr>
                 <tr>
                     <td>Image Name:</td>
                     <td><code>{{image.imageName}}</code></td>

ui/src/app/tabs/resources/resources.component.html

@@ -5,6 +5,15 @@
             <mat-card-subtitle>Cluster Resource</mat-card-subtitle>
         </mat-card-header>
         <mat-card-content>
+            <table class="aligned">
+                <tr data-cy="resource-deploy-startup">
+                    <td>Deploy at Startup:</td>
+                    <td *ngIf="resource.deployByDefault == 'always'"><code>Yes, forced</code></td>
+                    <td *ngIf="resource.deployByDefault == 'undefined' && resource.orphan"><code>Yes, the resource is not referenced by any command</code></td>
+                    <td *ngIf="resource.deployByDefault == 'undefined' && !resource.orphan"><code>No, the resource is referenced by a command</code></td>
+                    <td *ngIf="resource.deployByDefault == 'never'"><code>No, disabled</code></td>
+                </tr>
+            </table>
             <div *ngIf="resource.uri">URI: <code>{{resource.uri}}</code></div>
             <div *ngIf="resource.inlined"><pre>{{resource.inlined}}</pre></div>
         </mat-card-content>