[APM-7] Feature enhancement for the create and edit folder directive (#3179)

* Add observable menu open state to the sidenav-layout component

* add documentation, fix inversed value

* Add success events to folder create/edit directives

* Overridable dialog titles for the directives

* Update the documentation

lib/content-services/dialogs/folder.dialog.html

@@ -1,10 +1,5 @@
 <h2 mat-dialog-title>
-    {{
-    (editing
-    ? 'CORE.FOLDER_DIALOG.EDIT_FOLDER_TITLE'
-    : 'CORE.FOLDER_DIALOG.CREATE_FOLDER_TITLE'
-    ) | translate
-    }}
+    {{ (editing ? editTitle : createTitle) | translate }}
 </h2>
 
 <mat-dialog-content>

lib/content-services/dialogs/folder.dialog.spec.ts

@@ -18,12 +18,13 @@
 import { async, TestBed } from '@angular/core/testing';
 import { ComponentFixture } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { Observable } from 'rxjs/Observable';
 
 import { NodesApiService, TranslationService } from '@alfresco/adf-core';
 import { FolderDialogComponent } from './folder.dialog';
+import { By } from '@angular/platform-browser';
 
 describe('FolderDialogComponent', () => {
 
@@ -33,47 +34,55 @@ describe('FolderDialogComponent', () => {
     let nodesApi: NodesApiService;
     let dialogRef;
 
-    beforeEach(async(() => {
-        dialogRef = {
-            close: jasmine.createSpy('close')
-        };
-
-        TestBed.configureTestingModule({
-            imports: [
-                FormsModule,
-                ReactiveFormsModule,
-                BrowserDynamicTestingModule
-            ],
-            declarations: [
-                FolderDialogComponent
-            ],
-            providers: [
-                { provide: MatDialogRef, useValue: dialogRef }
-            ]
-        });
-
-        // entryComponents are not supported yet on TestBed, that is why this ugly workaround:
-        // https://github.com/angular/angular/issues/10760
-        TestBed.overrideModule(BrowserDynamicTestingModule, {
-            set: { entryComponents: [FolderDialogComponent] }
-        });
-
-        TestBed.compileComponents();
-    }));
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(FolderDialogComponent);
-        component = fixture.componentInstance;
-
-        nodesApi = TestBed.get(NodesApiService);
-
-        translationService = TestBed.get(TranslationService);
-        spyOn(translationService, 'get').and.returnValue(Observable.of('message'));
+    afterEach(() => {
+        fixture.destroy();
+        TestBed.resetTestingModule();
     });
 
-    describe('Edit', () => {
+    describe('Material dialog behaviour', () => {
+
+        beforeEach(async(() => {
+            dialogRef = { close: jasmine.createSpy('close') };
+
+            TestBed.configureTestingModule({
+                imports: [
+                    FormsModule,
+                    ReactiveFormsModule,
+                    BrowserDynamicTestingModule
+                ],
+                declarations: [
+                    FolderDialogComponent
+                ],
+                providers: [
+                    { provide: MatDialogRef, useValue: dialogRef },
+                    { provide: MAT_DIALOG_DATA, useValue: {
+                        editTitle: 'edit',
+                        createTitle: 'create'
+                    } }
+                ]
+            });
+
+            // entryComponents are not supported yet on TestBed, that is why this ugly workaround:
+            // https://github.com/angular/angular/issues/10760
+            TestBed.overrideModule(BrowserDynamicTestingModule, {
+                set: { entryComponents: [FolderDialogComponent] }
+            });
+
+            TestBed.compileComponents();
+        }));
 
         beforeEach(() => {
+            fixture = TestBed.createComponent(FolderDialogComponent);
+            component = fixture.componentInstance;
+
+            nodesApi = TestBed.get(NodesApiService);
+
+            translationService = TestBed.get(TranslationService);
+            spyOn(translationService, 'get').and.returnValue(Observable.of('message'));
+        });
+
+        it('should have the proper overridden title in case of editing', () => {
+
             component.data = {
                 folder: {
                     id: 'node-id',
@@ -83,197 +92,312 @@ describe('FolderDialogComponent', () => {
                     }
                 }
             };
+
             fixture.detectChanges();
+
+            const title = fixture.debugElement.query(By.css('[mat-dialog-title]'));
+            expect(title === null).toBe(false);
+            expect(title.nativeElement.innerText.trim()).toBe('edit');
         });
 
-        it('should init form with folder name and description', () => {
-            expect(component.name).toBe('folder-name');
-            expect(component.description).toBe('folder-description');
-        });
+        it('should have the proper overridden title in case of creating', () => {
 
-        it('should update form input', () => {
-            component.form.controls['name'].setValue('folder-name-update');
-            component.form.controls['description'].setValue('folder-description-update');
-
-            expect(component.name).toBe('folder-name-update');
-            expect(component.description).toBe('folder-description-update');
-        });
-
-        it('should submit updated values if form is valid', () => {
-            spyOn(nodesApi, 'updateNode').and.returnValue(Observable.of({}));
-
-            component.form.controls['name'].setValue('folder-name-update');
-            component.form.controls['description'].setValue('folder-description-update');
-
-            component.submit();
-
-            expect(nodesApi.updateNode).toHaveBeenCalledWith(
-                'node-id',
-                {
-                    name: 'folder-name-update',
-                    properties: {
-                        'cm:title': 'folder-name-update',
-                        'cm:description': 'folder-description-update'
-                    }
-                }
-            );
-        });
-
-        it('should call dialog to close with form data when submit is succesfluly', () => {
-            const folder = {
-                data: 'folder-data'
-            };
-
-            spyOn(nodesApi, 'updateNode').and.returnValue(Observable.of(folder));
-
-            component.submit();
-
-            expect(dialogRef.close).toHaveBeenCalledWith(folder);
-        });
-
-        it('should not submit if form is invalid', () => {
-            spyOn(nodesApi, 'updateNode');
-
-            component.form.controls['name'].setValue('');
-            component.form.controls['description'].setValue('');
-
-            component.submit();
-
-            expect(component.form.valid).toBe(false);
-            expect(nodesApi.updateNode).not.toHaveBeenCalled();
-        });
-
-        it('should not call dialog to close if submit fails', () => {
-            spyOn(nodesApi, 'updateNode').and.returnValue(Observable.throw('error'));
-            spyOn(component, 'handleError').and.callFake(val => val);
-
-            component.submit();
-
-            expect(component.handleError).toHaveBeenCalled();
-            expect(dialogRef.close).not.toHaveBeenCalled();
-        });
-    });
-
-    describe('Create', () => {
-        beforeEach(() => {
             component.data = {
                 parentNodeId: 'parentNodeId',
                 folder: null
             };
+
             fixture.detectChanges();
+
+            const title = fixture.debugElement.query(By.css('[mat-dialog-title]'));
+            expect(title === null).toBe(false);
+            expect(title.nativeElement.innerText.trim()).toBe('create');
         });
-
-        it('should init form with empty inputs', () => {
-            expect(component.name).toBe('');
-            expect(component.description).toBe('');
-        });
-
-        it('should update form input', () => {
-            component.form.controls['name'].setValue('folder-name-update');
-            component.form.controls['description'].setValue('folder-description-update');
-
-            expect(component.name).toBe('folder-name-update');
-            expect(component.description).toBe('folder-description-update');
-        });
-
-        it('should submit updated values if form is valid', () => {
-            spyOn(nodesApi, 'createFolder').and.returnValue(Observable.of({}));
-
-            component.form.controls['name'].setValue('folder-name-update');
-            component.form.controls['description'].setValue('folder-description-update');
-
-            component.submit();
-
-            expect(nodesApi.createFolder).toHaveBeenCalledWith(
-                'parentNodeId',
-                {
-                    name: 'folder-name-update',
-                    properties: {
-                        'cm:title': 'folder-name-update',
-                        'cm:description': 'folder-description-update'
-                    }
-                }
-            );
-        });
-
-        it('should call dialog to close with form data when submit is succesfluly', () => {
-            const folder = {
-                data: 'folder-data'
-            };
-
-            component.form.controls['name'].setValue('name');
-            component.form.controls['description'].setValue('description');
-
-            spyOn(nodesApi, 'createFolder').and.returnValue(Observable.of(folder));
-
-            component.submit();
-
-            expect(dialogRef.close).toHaveBeenCalledWith(folder);
-        });
-
-        it('should not submit if form is invalid', () => {
-            spyOn(nodesApi, 'createFolder');
-
-            component.form.controls['name'].setValue('');
-            component.form.controls['description'].setValue('');
-
-            component.submit();
-
-            expect(component.form.valid).toBe(false);
-            expect(nodesApi.createFolder).not.toHaveBeenCalled();
-        });
-
-        it('should not call dialog to close if submit fails', () => {
-            spyOn(nodesApi, 'createFolder').and.returnValue(Observable.throw('error'));
-            spyOn(component, 'handleError').and.callFake(val => val);
-
-            component.form.controls['name'].setValue('name');
-            component.form.controls['description'].setValue('description');
-
-            component.submit();
-
-            expect(component.handleError).toHaveBeenCalled();
-            expect(dialogRef.close).not.toHaveBeenCalled();
-        });
-
-        describe('Error events ', () => {
-            it('should raise error for 409', (done) => {
-                const error = {
-                    message: '{ "error": {  "statusCode" : 409 } }'
-                };
-
-                component.error.subscribe((message) => {
-                    expect(message).toBe('CORE.MESSAGES.ERRORS.EXISTENT_FOLDER');
-                    done();
-                });
-
-                spyOn(nodesApi, 'createFolder').and.returnValue(Observable.throw(error));
-
-                component.form.controls['name'].setValue('name');
-                component.form.controls['description'].setValue('description');
-
-                component.submit();
-            });
-
-            it('should raise generic error', (done) => {
-                const error = {
-                    message: '{ "error": {  "statusCode" : 123 } }'
-                };
-
-                component.error.subscribe((message) => {
-                    expect(message).toBe('CORE.MESSAGES.ERRORS.GENERIC');
-                    done();
-                });
-
-                spyOn(nodesApi, 'createFolder').and.returnValue(Observable.throw(error));
-
-                component.form.controls['name'].setValue('name');
-                component.form.controls['description'].setValue('description');
-
-                component.submit();
-            });
-        });
-
     });
 
+    describe('Basic component behaviour', () => {
+
+        beforeEach(async(() => {
+            dialogRef = { close: jasmine.createSpy('close') };
+
+            TestBed.configureTestingModule({
+                imports: [
+                    FormsModule,
+                    ReactiveFormsModule,
+                    BrowserDynamicTestingModule
+                ],
+                declarations: [
+                    FolderDialogComponent
+                ],
+                providers: [
+                    { provide: MatDialogRef, useValue: dialogRef }
+                ]
+            });
+
+            // entryComponents are not supported yet on TestBed, that is why this ugly workaround:
+            // https://github.com/angular/angular/issues/10760
+            TestBed.overrideModule(BrowserDynamicTestingModule, {
+                set: { entryComponents: [FolderDialogComponent] }
+            });
+
+            TestBed.compileComponents();
+        }));
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(FolderDialogComponent);
+            component = fixture.componentInstance;
+
+            nodesApi = TestBed.get(NodesApiService);
+
+            translationService = TestBed.get(TranslationService);
+            spyOn(translationService, 'get').and.returnValue(Observable.of('message'));
+        });
+
+        describe('Edit', () => {
+
+            beforeEach(() => {
+                component.data = {
+                    folder: {
+                        id: 'node-id',
+                        name: 'folder-name',
+                        properties: {
+                            ['cm:description']: 'folder-description'
+                        }
+                    }
+                };
+                fixture.detectChanges();
+            });
+
+            it('should have the proper title', () => {
+                const title = fixture.debugElement.query(By.css('[mat-dialog-title]'));
+                expect(title === null).toBe(false);
+                expect(title.nativeElement.innerText.trim()).toBe('CORE.FOLDER_DIALOG.EDIT_FOLDER_TITLE');
+            });
+
+            it('should init form with folder name and description', () => {
+                expect(component.name).toBe('folder-name');
+                expect(component.description).toBe('folder-description');
+            });
+
+            it('should update form input', () => {
+                component.form.controls['name'].setValue('folder-name-update');
+                component.form.controls['description'].setValue('folder-description-update');
+
+                expect(component.name).toBe('folder-name-update');
+                expect(component.description).toBe('folder-description-update');
+            });
+
+            it('should submit updated values if form is valid', () => {
+                spyOn(nodesApi, 'updateNode').and.returnValue(Observable.of({}));
+
+                component.form.controls['name'].setValue('folder-name-update');
+                component.form.controls['description'].setValue('folder-description-update');
+
+                component.submit();
+
+                expect(nodesApi.updateNode).toHaveBeenCalledWith(
+                    'node-id',
+                    {
+                        name: 'folder-name-update',
+                        properties: {
+                            'cm:title': 'folder-name-update',
+                            'cm:description': 'folder-description-update'
+                        }
+                    }
+                );
+            });
+
+            it('should call dialog to close with form data when submit is succesfluly', () => {
+                const folder = {
+                    data: 'folder-data'
+                };
+
+                spyOn(nodesApi, 'updateNode').and.returnValue(Observable.of(folder));
+
+                component.submit();
+
+                expect(dialogRef.close).toHaveBeenCalledWith(folder);
+            });
+
+            it('should emit success output event with folder when submit is succesfull', async(() => {
+                const folder = { data: 'folder-data' };
+                let expectedNode = null;
+
+                spyOn(nodesApi, 'updateNode').and.returnValue(Observable.of(folder));
+
+                component.success.subscribe((node) => { expectedNode = node; });
+                component.submit();
+
+                fixture.whenStable().then(() => {
+                    expect(expectedNode).toBe(folder);
+                });
+            }));
+
+            it('should not submit if form is invalid', () => {
+                spyOn(nodesApi, 'updateNode');
+
+                component.form.controls['name'].setValue('');
+                component.form.controls['description'].setValue('');
+
+                component.submit();
+
+                expect(component.form.valid).toBe(false);
+                expect(nodesApi.updateNode).not.toHaveBeenCalled();
+            });
+
+            it('should not call dialog to close if submit fails', () => {
+                spyOn(nodesApi, 'updateNode').and.returnValue(Observable.throw('error'));
+                spyOn(component, 'handleError').and.callFake(val => val);
+
+                component.submit();
+
+                expect(component.handleError).toHaveBeenCalled();
+                expect(dialogRef.close).not.toHaveBeenCalled();
+            });
+        });
+
+        describe('Create', () => {
+            beforeEach(() => {
+                component.data = {
+                    parentNodeId: 'parentNodeId',
+                    folder: null
+                };
+                fixture.detectChanges();
+            });
+
+            it('should have the proper title', () => {
+                const title = fixture.debugElement.query(By.css('[mat-dialog-title]'));
+                expect(title === null).toBe(false);
+                expect(title.nativeElement.innerText.trim()).toBe('CORE.FOLDER_DIALOG.CREATE_FOLDER_TITLE');
+            });
+
+            it('should init form with empty inputs', () => {
+                expect(component.name).toBe('');
+                expect(component.description).toBe('');
+            });
+
+            it('should update form input', () => {
+                component.form.controls['name'].setValue('folder-name-update');
+                component.form.controls['description'].setValue('folder-description-update');
+
+                expect(component.name).toBe('folder-name-update');
+                expect(component.description).toBe('folder-description-update');
+            });
+
+            it('should submit updated values if form is valid', () => {
+                spyOn(nodesApi, 'createFolder').and.returnValue(Observable.of({}));
+
+                component.form.controls['name'].setValue('folder-name-update');
+                component.form.controls['description'].setValue('folder-description-update');
+
+                component.submit();
+
+                expect(nodesApi.createFolder).toHaveBeenCalledWith(
+                    'parentNodeId',
+                    {
+                        name: 'folder-name-update',
+                        properties: {
+                            'cm:title': 'folder-name-update',
+                            'cm:description': 'folder-description-update'
+                        }
+                    }
+                );
+            });
+
+            it('should call dialog to close with form data when submit is succesfluly', () => {
+                const folder = {
+                    data: 'folder-data'
+                };
+
+                component.form.controls['name'].setValue('name');
+                component.form.controls['description'].setValue('description');
+
+                spyOn(nodesApi, 'createFolder').and.returnValue(Observable.of(folder));
+
+                component.submit();
+
+                expect(dialogRef.close).toHaveBeenCalledWith(folder);
+            });
+
+            it('should emit success output event with folder when submit is succesfull', async(() => {
+                const folder = { data: 'folder-data' };
+                let expectedNode = null;
+
+                component.form.controls['name'].setValue('name');
+                component.form.controls['description'].setValue('description');
+                spyOn(nodesApi, 'createFolder').and.returnValue(Observable.of(folder));
+
+                component.success.subscribe((node) => { expectedNode = node; });
+                component.submit();
+
+                fixture.whenStable().then(() => {
+                    expect(expectedNode).toBe(folder);
+                });
+            }));
+
+            it('should not submit if form is invalid', () => {
+                spyOn(nodesApi, 'createFolder');
+
+                component.form.controls['name'].setValue('');
+                component.form.controls['description'].setValue('');
+
+                component.submit();
+
+                expect(component.form.valid).toBe(false);
+                expect(nodesApi.createFolder).not.toHaveBeenCalled();
+            });
+
+            it('should not call dialog to close if submit fails', () => {
+                spyOn(nodesApi, 'createFolder').and.returnValue(Observable.throw('error'));
+                spyOn(component, 'handleError').and.callFake(val => val);
+
+                component.form.controls['name'].setValue('name');
+                component.form.controls['description'].setValue('description');
+
+                component.submit();
+
+                expect(component.handleError).toHaveBeenCalled();
+                expect(dialogRef.close).not.toHaveBeenCalled();
+            });
+
+            describe('Error events ', () => {
+                it('should raise error for 409', (done) => {
+                    const error = {
+                        message: '{ "error": {  "statusCode" : 409 } }'
+                    };
+
+                    component.error.subscribe((message) => {
+                        expect(message).toBe('CORE.MESSAGES.ERRORS.EXISTENT_FOLDER');
+                        done();
+                    });
+
+                    spyOn(nodesApi, 'createFolder').and.returnValue(Observable.throw(error));
+
+                    component.form.controls['name'].setValue('name');
+                    component.form.controls['description'].setValue('description');
+
+                    component.submit();
+                });
+
+                it('should raise generic error', (done) => {
+                    const error = {
+                        message: '{ "error": {  "statusCode" : 123 } }'
+                    };
+
+                    component.error.subscribe((message) => {
+                        expect(message).toBe('CORE.MESSAGES.ERRORS.GENERIC');
+                        done();
+                    });
+
+                    spyOn(nodesApi, 'createFolder').and.returnValue(Observable.throw(error));
+
+                    component.form.controls['name'].setValue('name');
+                    component.form.controls['description'].setValue('description');
+
+                    component.submit();
+                });
+            });
+
+        });
+    });
 });

lib/content-services/dialogs/folder.dialog.ts

@@ -42,6 +42,12 @@ export class FolderDialogComponent implements OnInit {
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
+    @Output()
+    success: EventEmitter<any> = new EventEmitter<MinimalNodeEntryEntity>();
+
+    editTitle = 'CORE.FOLDER_DIALOG.EDIT_FOLDER_TITLE';
+    createTitle = 'CORE.FOLDER_DIALOG.CREATE_FOLDER_TITLE';
+
     constructor(
         private formBuilder: FormBuilder,
         private dialog: MatDialogRef<FolderDialogComponent>,
@@ -50,7 +56,12 @@ export class FolderDialogComponent implements OnInit {
         @Optional()
         @Inject(MAT_DIALOG_DATA)
         public data: any
-    ) {}
+    ) {
+        if (data) {
+            this.editTitle = data.editTitle || this.editTitle;
+            this.createTitle = data.createTitle || this.createTitle;
+        }
+    }
 
     get editing(): boolean {
         return !!this.data.folder;
@@ -121,7 +132,10 @@ export class FolderDialogComponent implements OnInit {
 
         (editing ? this.edit() : this.create())
             .subscribe(
-                (folder: MinimalNodeEntryEntity) => dialog.close(folder),
+                (folder: MinimalNodeEntryEntity) => {
+                    this.success.emit(folder);
+                    dialog.close(folder);
+                },
                 (error) => this.handleError(error)
             );
     }

lib/content-services/folder-directive/folder-create.directive.spec.ts

@@ -17,7 +17,7 @@
 
 import { HttpClientModule } from '@angular/common/http';
 import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog, MatDialogModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
@@ -27,12 +27,19 @@ import { FolderDialogComponent } from '../dialogs/folder.dialog';
 
 import { DirectiveModule, ContentService, TranslateLoaderService } from '@alfresco/adf-core';
 import { FolderCreateDirective } from './folder-create.directive';
+import { Subject } from 'rxjs/Subject';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 
 @Component({
-    template: '<div [adf-create-folder]="parentNode"></div>'
+    template: '<div [adf-create-folder]="parentNode" (success)="success($event)" title="create-title"></div>'
 })
 class TestComponent {
     parentNode = '';
+    public successParameter: MinimalNodeEntryEntity = null;
+
+    success(node: MinimalNodeEntryEntity) {
+        this.successParameter = node;
+    }
 }
 
 describe('FolderCreateDirective', () => {
@@ -43,6 +50,11 @@ describe('FolderCreateDirective', () => {
     let contentService: ContentService;
     let dialogRefMock;
 
+    const event = {
+        type: 'click',
+        preventDefault: () => null
+    };
+
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [
@@ -80,7 +92,11 @@ describe('FolderCreateDirective', () => {
         node = { entry: { id: 'nodeId' } };
 
         dialogRefMock = {
-            afterClosed: val =>  Observable.of(val)
+            afterClosed: val =>  Observable.of(val),
+            componentInstance: {
+                error: new Subject<any>(),
+                success: new Subject<MinimalNodeEntryEntity>()
+            }
         };
 
         spyOn(dialog, 'open').and.returnValue(dialogRefMock);
@@ -113,4 +129,29 @@ describe('FolderCreateDirective', () => {
             expect(contentService.folderCreate.next).not.toHaveBeenCalled();
         });
     });
+
+    it('should emit success event with node if the folder creation was successful', async(() => {
+        const testNode = <MinimalNodeEntryEntity> {};
+        fixture.detectChanges();
+
+        element.triggerEventHandler('click', event);
+        dialogRefMock.componentInstance.success.next(testNode);
+
+        fixture.whenStable().then(() => {
+            expect(fixture.componentInstance.successParameter).toBe(testNode);
+        });
+    }));
+
+    it('should open the dialog with the proper title', async(() => {
+        fixture.detectChanges();
+        element.triggerEventHandler('click', event);
+
+        expect(dialog.open).toHaveBeenCalledWith(jasmine.any(Function), {
+            data: {
+                parentNodeId: jasmine.any(String),
+                createTitle: 'create-title'
+            },
+            width: jasmine.any(String)
+        });
+    }));
 });

lib/content-services/folder-directive/folder-create.directive.ts

@@ -35,10 +35,16 @@ export class FolderCreateDirective {
     @Input('adf-create-folder')
     parentNodeId: string = DEFAULT_FOLDER_PARENT_ID;
 
+    @Input()
+    title: string = null;
+
     /** Emitted when the create folder give error for example a folder with same name already exist */
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
+    @Output()
+    success: EventEmitter<MinimalNodeEntryEntity> = new EventEmitter<MinimalNodeEntryEntity>();
+
     @HostListener('click', [ '$event' ])
     onClick(event) {
         event.preventDefault();
@@ -55,7 +61,10 @@ export class FolderCreateDirective {
         const { parentNodeId } = this;
 
         return {
-            data: { parentNodeId },
+            data: {
+                parentNodeId,
+                createTitle: this.title
+            },
             width: `${width}px`
         };
     }
@@ -68,6 +77,10 @@ export class FolderCreateDirective {
             this.error.emit(error);
         });
 
+        dialogInstance.componentInstance.success.subscribe((node: MinimalNodeEntryEntity) => {
+            this.success.emit(node);
+        });
+
         dialogInstance.afterClosed().subscribe((node: MinimalNodeEntryEntity) => {
             if (node) {
                 content.folderCreate.next(node);

lib/content-services/folder-directive/folder-edit.directive.spec.ts

@@ -17,7 +17,7 @@
 
 import { HttpClientModule } from '@angular/common/http';
 import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { MatDialog, MatDialogModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
 
@@ -27,12 +27,19 @@ import { Observable } from 'rxjs/Observable';
 
 import { ContentService, TranslateLoaderService, DirectiveModule } from '@alfresco/adf-core';
 import { FolderEditDirective } from './folder-edit.directive';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { Subject } from 'rxjs/Subject';
 
 @Component({
-    template: '<div [adf-edit-folder]="folder"></div>'
+    template: '<div [adf-edit-folder]="folder" (success)="success($event)" title="edit-title"></div>'
 })
 class TestComponent {
     folder = {};
+    public successParameter: MinimalNodeEntryEntity = null;
+
+    success(node: MinimalNodeEntryEntity) {
+        this.successParameter = node;
+    }
 }
 
 describe('FolderEditDirective', () => {
@@ -85,7 +92,11 @@ describe('FolderEditDirective', () => {
         node = { entry: { id: 'folderId' } };
 
         dialogRefMock = {
-            afterClosed: val =>  Observable.of(val)
+            afterClosed: val =>  Observable.of(val),
+            componentInstance: {
+                error: new Subject<any>(),
+                success: new Subject<MinimalNodeEntryEntity>()
+            }
         };
 
         spyOn(dialog, 'open').and.returnValue(dialogRefMock);
@@ -114,4 +125,29 @@ describe('FolderEditDirective', () => {
             expect(contentService.folderEdit.next).not.toHaveBeenCalled();
         });
     });
+
+    it('should emit success event with node if the folder creation was successful', async(() => {
+        const testNode = <MinimalNodeEntryEntity> {};
+        fixture.detectChanges();
+
+        element.triggerEventHandler('click', event);
+        dialogRefMock.componentInstance.success.next(testNode);
+
+        fixture.whenStable().then(() => {
+            expect(fixture.componentInstance.successParameter).toBe(testNode);
+        });
+    }));
+
+    it('should open the dialog with the proper title', async(() => {
+        fixture.detectChanges();
+        element.triggerEventHandler('click', event);
+
+        expect(dialog.open).toHaveBeenCalledWith(jasmine.any(Function), {
+            data: {
+                folder: jasmine.any(Object),
+                editTitle: 'edit-title'
+            },
+            width: jasmine.any(String)
+        });
+    }));
 });

lib/content-services/folder-directive/folder-edit.directive.ts

@@ -39,6 +39,12 @@ export class FolderEditDirective {
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
+    @Input()
+    title: string = null;
+
+    @Output()
+    success: EventEmitter<MinimalNodeEntryEntity> = new EventEmitter<MinimalNodeEntryEntity>();
+
     @HostListener('click', [ '$event' ])
     onClick(event) {
         event.preventDefault();
@@ -58,7 +64,10 @@ export class FolderEditDirective {
         const { folder } = this;
 
         return {
-            data: { folder },
+            data: {
+                folder,
+                editTitle: this.title
+            },
             width: `${width}px`
         };
     }
@@ -71,6 +80,10 @@ export class FolderEditDirective {
             this.error.emit(error);
         });
 
+        dialogInstance.componentInstance.success.subscribe((node: MinimalNodeEntryEntity) => {
+            this.success.emit(node);
+        });
+
         dialogInstance.afterClosed().subscribe((node: MinimalNodeEntryEntity) => {
             if (node) {
                 content.folderEdit.next(node);