display error message, dirty indicator and title icon

src/browser/DirtyResourceSavable.ts

@@ -0,0 +1,34 @@
+import { ResourceSaveable } from './ResourceSaveable';
+import { unmanaged } from 'inversify';
+import { WidgetManager} from "@theia/core/lib/browser";
+import { MessageService, Resource } from '@theia/core/lib/common';
+import { DIRTY_CLASS, TreeEditorWidget } from './theia-tree-editor-widget';
+import * as _ from 'lodash';
+
+export class DirtyResourceSavable extends ResourceSaveable {
+  private _widgetManager: WidgetManager;
+  private _messageService: MessageService;
+
+  constructor(
+    resource: Resource,
+    getData: () => any,
+    @unmanaged() widgetManager: WidgetManager,
+    @unmanaged() messageService: MessageService
+  ) {
+    super(resource, getData);
+
+    this._widgetManager = widgetManager;
+    this._messageService = messageService;
+  }
+
+  onSaveSuccess = () => {
+    const widget = _.head(this._widgetManager.getWidgets('theia-tree-editor')) as TreeEditorWidget;
+    const dirtyClass = ` ${DIRTY_CLASS}`;
+    widget.title.className = widget.title.className.replace(dirtyClass, '');
+
+  }
+
+  onSaveFailure = () => {
+    this._messageService.error('Cannot Save: Undefined Resource');
+  }
+}

src/browser/ResourceSaveable.ts

@@ -1,8 +1,10 @@
-import { Disposable, Event, MaybePromise, Resource } from '@theia/core/lib/common';
-import {Saveable, WidgetManager} from "@theia/core/lib/browser";
-import { DIRTY_CLASS, TreeEditorWidget } from './theia-tree-editor-widget';
-import * as _ from 'lodash';
-import { unmanaged } from 'inversify';
+import {
+  Disposable,
+  Event,
+  MaybePromise,
+  Resource
+} from '@theia/core/lib/common';
+import { Saveable } from "@theia/core/lib/browser";
 
 export class ResourceSaveable implements Saveable {
   autoSave;
@@ -20,30 +22,30 @@ export class ResourceSaveable implements Saveable {
   );
 
   constructor(private resource: Resource,
-              private getData: () => any,
-              @unmanaged() protected readonly widgetManager: WidgetManager) {}
+              private getData: () => any) {}
 
   save(): MaybePromise<void> {
     return this.onSave(this.getData()).then(this.doSave)
   }
 
   doSave = (content: string): MaybePromise<void> => {
-    if ( this.resource.saveContents !== undefined ) {
+    if ( this.resource !== undefined && this.resource.saveContents !== undefined ) {
       return this.resource.saveContents(content, { encoding: 'UTF-8' })
         .then(() => {
           this.dirty = false;
-          const widget = _.head(this.widgetManager.getWidgets('theia-tree-editor')) as TreeEditorWidget;
-          const dirtyClass = ` ${DIRTY_CLASS}`;
-          widget.title.className = widget.title.className.replace(dirtyClass, '');
+          this.onSaveSuccess();
       });
     } else {
-      console.warn('resource cannot save');
-      return undefined;
+      this.onSaveFailure();
     }
   }
 
   onSave(data: any): Promise<string> {
     const content = JSON.stringify(data, null, 2);
     return Promise.resolve(content);
   }
+
+  onSaveSuccess = () => {}
+
+  onSaveFailure = () => {}
 }

src/browser/index.ts

@@ -2,3 +2,4 @@ export * from './theia-tree-editor-widget';
 export * from './tree-editor-utils';
 export * from './theia-tree-editor-contribution';
 export * from './ResourceSaveable';
+export * from './DirtyResourceSavable';

src/browser/theia-tree-editor-widget.tsx

@@ -30,6 +30,7 @@ const defaultResourceParser = (content: string): Promise<any> => {
 
 let widgetCounter = 0;
 export const DIRTY_CLASS = 'theia-mod-dirty';
+const JSON_ICON_CLASS = 'database-icon medium-yellow file-icon';
 @injectable()
 export class TreeEditorWidget extends BaseWidget implements SaveableSource {
   saveable: Saveable;
@@ -48,6 +49,8 @@ export class TreeEditorWidget extends BaseWidget implements SaveableSource {
     this.title.closable = true;
     this.title.label = this.options.fileName;
     this.title.caption = this.title.label;
+    this.title.iconClass =
+      this.title.iconClass.replace('no-icon', '') + `${JSON_ICON_CLASS}`;
     this.resource.readContents()
       .then(content => {
         if(this.options.onResourceLoad === undefined) {