Alert user when Devfile is synced

ui/cypress/support/commands.ts

@@ -72,6 +72,7 @@ Cypress.Commands.add('clearDevfile', () => {
 Cypress.Commands.add('writeDevfileFile', (content: string) => {
     cy.intercept('PUT', '/api/v1/devstate/devfile').as('writeDevfileFile.applyDevState');
     cy.writeFile('devfile.yaml',  content)
+    cy.get('button[data-cy="confirm-yes"]').first().click();
     cy.wait(['@writeDevfileFile.applyDevState']);
 });
 

ui/src/app/app.component.ts

@@ -10,6 +10,8 @@ import {DevfileContent} from "./api-gen";
 import { TelemetryResponse } from './api-gen';
 import { MatTabChangeEvent } from '@angular/material/tabs';
 import { TelemetryService } from './services/telemetry.service';
+import { MatSnackBar, MatSnackBarRef } from '@angular/material/snack-bar';
+import { ConfirmComponent } from './components/confirm/confirm.component';
 
 @Component({
   selector: 'app-root',
@@ -32,6 +34,7 @@ export class AppComponent implements OnInit {
   protected mermaidContent: string = "";
   protected devfileYaml: string = "";
   protected errorMessage: string  = "";
+  private snackBarRef: MatSnackBarRef<ConfirmComponent> | null = null;
 
   constructor(
     protected sanitizer: DomSanitizer,
@@ -41,7 +44,8 @@ export class AppComponent implements OnInit {
     private mermaid: MermaidService,
     private state: StateService,
     private sse: SseService,
-    private telemetry: TelemetryService
+    private telemetry: TelemetryService,
+    private snackbar: MatSnackBar
   ) {
     this.matIconRegistry.addSvgIcon(
       `github`,
@@ -84,10 +88,25 @@ export class AppComponent implements OnInit {
     });
 
     this.sse.subscribeTo(['DevfileUpdated']).subscribe(event => {
-      let newDevfile: DevfileContent = JSON.parse(event.data)
-      if (newDevfile.content != undefined) {
-        this.propagateChange(newDevfile.content, false);
+      if (this.snackBarRef != null) {
+        this.snackBarRef.afterDismissed().subscribe(() => {});
+        this.snackBarRef.dismiss();
       }
+      this.snackBarRef = this.snackbar.openFromComponent(ConfirmComponent, { data: { 
+        message: "The Devfile has changed on disk. Do you want to update it here?",
+        noLabel: "Cancel", 
+        yesLabel: "Update"
+      }});
+      this.snackBarRef.onAction().subscribe(() => {
+        let newDevfile: DevfileContent = JSON.parse(event.data);
+        if (newDevfile.content != undefined) {
+          this.propagateChange(newDevfile.content, false);
+        }
+        this.snackBarRef = null;
+      });
+      this.snackBarRef.afterDismissed().subscribe(() => { 
+        this.snackBarRef = null;
+      });
     });
 
     this.odoApi.telemetry().subscribe({

ui/src/app/app.module.ts

@@ -18,6 +18,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -43,6 +44,7 @@ import { CommandsListComponent } from './lists/commands-list/commands-list.compo
 import { MultiCommandComponent } from './controls/multi-command/multi-command.component';
 import { EventsComponent } from './tabs/events/events.component';
 import { ChipsEventsComponent } from './controls/chips-events/chips-events.component';
+import { ConfirmComponent } from './components/confirm/confirm.component';
 
 @NgModule({
   declarations: [
@@ -65,6 +67,7 @@ import { ChipsEventsComponent } from './controls/chips-events/chips-events.compo
     MultiCommandComponent,
     EventsComponent,
     ChipsEventsComponent,
+    ConfirmComponent,
   ],
   imports: [
     BrowserModule,
@@ -86,6 +89,7 @@ import { ChipsEventsComponent } from './controls/chips-events/chips-events.compo
     MatInputModule,
     MatMenuModule,
     MatSelectModule,
+    MatSnackBarModule,
     MatTabsModule,
     MatToolbarModule,
     MatTooltipModule,

ui/src/app/components/confirm/confirm.component.html

@@ -0,0 +1,3 @@
+<p>{{message}}</p>
+<button data-cy="confirm-no" mat-raised-button (click)="doNo()">{{noLabel}} </button>
+<button data-cy="confirm-yes" mat-raised-button (click)="doYes()">{{yesLabel}}</button>

ui/src/app/components/confirm/confirm.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmComponent } from './confirm.component';
+
+describe('ConfirmComponent', () => {
+  let component: ConfirmComponent;
+  let fixture: ComponentFixture<ConfirmComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConfirmComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ConfirmComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ui/src/app/components/confirm/confirm.component.ts

@@ -0,0 +1,31 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-confirm',
+  templateUrl: './confirm.component.html',
+  styleUrls: ['./confirm.component.css']
+})
+export class ConfirmComponent {
+
+  protected noLabel: string;
+  protected yesLabel: string;
+  protected message: string;
+
+  constructor(
+    private snackbarRef: MatSnackBarRef<ConfirmComponent>,
+    @Inject(MAT_SNACK_BAR_DATA) data: any,
+    ) {
+      this.message = data.message;
+      this.noLabel = data.noLabel;
+      this.yesLabel = data.yesLabel;
+    }
+
+  doNo() {
+    this.snackbarRef.dismiss();
+  }
+
+  doYes() {
+    this.snackbarRef.dismissWithAction();
+  }
+}