[AAE-10390] Storybook Dialog Module (#7778)

* [AAE-10390] Storybook add Edit JSON story

* [AAE-10390] Storybook add documentation table for story

* [AAE-10390] Storybook add Download ZIP component story

* [AAE-10390] Storybook create new component for storybook purposes only

* [AAE-10390] Storybook change file and story names

* [AAE-10390] Storybook create story for DownloadZipDialog component

* [AAE-10390] Storybook add story-component interaction using controls

* [AAE-10390] Storybook delete unnecessary asset file

* [AAE-10390] Storybook move mock files to proper directory

* [AAE-10390] Storybook change mock services names

* [AAE-10390] Storybook add documentation table for DownloadZip component stories

* [AAE-10390] Storybook create methods for updating proper values in storybook component classes

* [AAE-10390] Storybook update licence

* [AAE-10390] Storybook change button appearance

* [AAE-10390] Storybook update module imports

* [AAE-10390] Storybook change modules structure

* [AAE-10390] Storybook rearrange Dialog modules

* [AAE-10390] Storybook remove unnecessary imports

* [AAE-10390] Storybook move Input directives

* [AAE-10390] Storybook add missed code

* [AAE-10390] Storybook delete dialog module

* [AAE-10390] Storybook add Download Zip module export in public-api file

* Trigger travis

lib/core/src/lib/core.module.ts

@@ -45,7 +45,7 @@ import { NotificationHistoryModule } from './notifications/notification-history.
 import { BlankPageModule } from './blank-page/blank-page.module';
 
 import { DirectiveModule } from './directives/directive.module';
-import { DialogModule } from './dialogs/dialog.module';
+import { DownloadZipDialogModule } from './dialogs/download-zip/download-zip.dialog.module';
 import { PipeModule } from './pipes/pipe.module';
 
 import { AlfrescoApiService } from './services/alfresco-api.service';
@@ -74,7 +74,7 @@ import { RichTextEditorModule } from './rich-text-editor/rich-text-editor.module
         PipeModule,
         CommonModule,
         DirectiveModule,
-        DialogModule,
+        DownloadZipDialogModule,
         FormsModule,
         ReactiveFormsModule,
         HostSettingsModule,
@@ -110,7 +110,7 @@ import { RichTextEditorModule } from './rich-text-editor/rich-text-editor.module
         PipeModule,
         CommonModule,
         DirectiveModule,
-        DialogModule,
+        DownloadZipDialogModule,
         ClipboardModule,
         FormsModule,
         ReactiveFormsModule,

lib/core/src/lib/dialogs/download-zip/download-zip.dialog.module.ts

@@ -15,26 +15,25 @@
  * limitations under the License.
  */
 
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-
-import { MaterialModule } from '../material.module';
-import { DownloadZipDialogComponent } from './download-zip/download-zip.dialog';
+import { DownloadZipDialogComponent } from './download-zip.dialog';
+import { PipeModule } from '../../pipes/pipe.module';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatButtonModule } from '@angular/material/button';
 import { TranslateModule } from '@ngx-translate/core';
-import { PipeModule } from '../pipes/pipe.module';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
+    declarations: [DownloadZipDialogComponent],
     imports: [
         CommonModule,
-        MaterialModule,
-        TranslateModule,
-        PipeModule
+        PipeModule,
+        MatDialogModule,
+        MatProgressBarModule,
+        MatButtonModule,
+        TranslateModule
     ],
-    declarations: [
-        DownloadZipDialogComponent
-    ],
-    exports: [
-        DownloadZipDialogComponent
-    ]
+    exports: [DownloadZipDialogComponent]
 })
-export class DialogModule {}
+export class DownloadZipDialogModule {}

lib/core/src/lib/dialogs/download-zip/download-zip.dialog.stories.component.ts

@@ -0,0 +1,57 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input, OnInit, OnChanges } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { DownloadZipDialogComponent } from './download-zip.dialog';
+import { zipNode, downloadEntry } from '../../mock/download-zip-data.mock';
+
+@Component({
+    selector: 'adf-download-zip-dialog-storybook',
+    template: `<button mat-raised-button (click)="openDialog()">Open dialog</button>`
+})
+export class DownloadZipDialogStorybookComponent implements OnInit, OnChanges {
+    @Input()
+    showLoading: boolean;
+
+    constructor(private dialog: MatDialog) {}
+
+    ngOnInit(): void {
+        this.setEntryStatus(this.showLoading);
+    }
+
+    ngOnChanges(): void {
+        this.setEntryStatus(this.showLoading);
+    }
+
+    setEntryStatus(isLoading: boolean){
+        if (!isLoading) {
+            downloadEntry.entry.status = 'DONE';
+        } else {
+            downloadEntry.entry.status = 'PACKING';
+        }
+    }
+
+    openDialog() {
+        this.dialog.open(DownloadZipDialogComponent, {
+            minWidth: '50%',
+            data: {
+                nodeIds: [zipNode.entry.id]
+            }
+        });
+    }
+}

lib/core/src/lib/dialogs/download-zip/download-zip.dialog.stories.ts

@@ -0,0 +1,86 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { CoreStoryModule } from '../../testing/core.story.module';
+import { MatButtonModule } from '@angular/material/button';
+import {
+    AlfrescoApiService,
+    ContentService,
+    DownloadZipService,
+    NodesApiService
+} from '../../services';
+import { DownloadZipDialogStorybookComponent } from './download-zip.dialog.stories.component';
+import {
+    AlfrescoApiServiceMock,
+    ContentApiMock,
+    DownloadZipMockService,
+    NodesApiMock
+} from '../../mock/download-zip-service.mock';
+import { DownloadZipDialogModule } from './download-zip.dialog.module';
+
+export default {
+    component: DownloadZipDialogStorybookComponent,
+    title: 'Core/Dialog/Download ZIP Dialog',
+    decorators: [
+        moduleMetadata({
+            imports: [
+                CoreStoryModule,
+                DownloadZipDialogModule,
+                MatButtonModule
+            ],
+            providers: [
+                {
+                    provide: AlfrescoApiService,
+                    useClass: AlfrescoApiServiceMock
+                },
+                {
+                    provide: DownloadZipService,
+                    useClass: DownloadZipMockService
+                },
+                {
+                    provide: ContentService,
+                    useClass: ContentApiMock
+                },
+                {
+                    provide: NodesApiService,
+                    useClass: NodesApiMock
+                }
+            ]
+        })
+    ],
+    argTypes: {
+        showLoading: {
+            control: {
+                type: 'boolean'
+            },
+            table: {
+                category: 'Story controls',
+                type: {
+                    summary: 'boolean'
+                }
+            },
+            defaultValue: false
+        }
+    }
+} as Meta;
+
+export const downloadZIPDialog: Story<DownloadZipDialogStorybookComponent> = (
+    args: DownloadZipDialogStorybookComponent
+) => ({
+    props: args
+});

lib/core/src/lib/dialogs/edit-json/edit-json.dialog.module.ts

@@ -15,15 +15,15 @@
  * limitations under the License.
  */
 
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule } from '@angular/material/dialog';
-import { TranslateModule } from '@ngx-translate/core';
 import { EditJsonDialogComponent } from './edit-json.dialog';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
 @NgModule({
+    declarations: [EditJsonDialogComponent],
     imports: [
         CommonModule,
         FormsModule,
@@ -32,11 +32,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
         MatDialogModule,
         MatButtonModule
     ],
-    declarations: [
-        EditJsonDialogComponent
-    ],
-    exports: [
-        EditJsonDialogComponent
-    ]
+    exports: [EditJsonDialogComponent]
 })
 export class EditJsonDialogModule {}

lib/core/src/lib/dialogs/edit-json/edit-json.dialog.stories.component.ts

@@ -0,0 +1,86 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, OnInit, OnChanges, Input } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import {
+    EditJsonDialogComponent,
+    EditJsonDialogSettings
+} from './edit-json.dialog';
+
+@Component({
+    selector: 'adf-edit-json-dialog-storybook',
+    template: `<button mat-raised-button (click)="openDialog()">
+        Open dialog
+    </button>`
+})
+export class EditJsonDialogStorybookComponent implements OnInit, OnChanges {
+    @Input()
+    title: string;
+
+    @Input()
+    editable: boolean;
+
+    @Input()
+    value: string;
+
+    private _settings: EditJsonDialogSettings;
+
+    set settings(newSettings: EditJsonDialogSettings) {
+        this._settings = {
+            title: newSettings.title,
+            editable: newSettings.editable,
+            value: JSON.stringify(newSettings.value, null, '  ')
+        };
+    }
+
+    constructor(private dialog: MatDialog) {}
+
+    ngOnInit() {
+        this.settings = {
+            title: this.title,
+            editable: this.editable,
+            value: this.value
+        };
+    }
+
+    ngOnChanges() {
+        this.settings = {
+            title: this.title,
+            editable: this.editable,
+            value: this.value
+        };
+    }
+
+    openDialog() {
+        this.dialog
+            .open(EditJsonDialogComponent, {
+                data: this._settings,
+                minWidth: `50%`
+            })
+            .afterClosed()
+            .subscribe((value: string) => {
+                if (value) {
+                    this._settings.value = JSON.stringify(
+                        JSON.parse(value),
+                        null,
+                        '  '
+                    );
+                }
+            });
+    }
+}

lib/core/src/lib/dialogs/edit-json/edit-json.dialog.stories.ts

@@ -0,0 +1,95 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { CoreStoryModule } from '../../testing/core.story.module';
+import { EditJsonDialogModule } from './edit-json.dialog.module';
+import { EditJsonDialogStorybookComponent } from './edit-json.dialog.stories.component';
+import { MatButtonModule } from '@angular/material/button';
+
+const jsonData = {
+    maxValue: 50,
+    minValue: 10,
+    values: [10, 15, 14, 27, 35, 23, 49, 38],
+    measurementId: 'm_10001',
+    researcherId: 's_10002'
+};
+
+export default {
+    component: EditJsonDialogStorybookComponent,
+    title: 'Core/Dialog/Edit JSON Dialog',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, EditJsonDialogModule, MatButtonModule]
+        })
+    ],
+    argTypes: {
+        value: {
+            description: 'Displayed text',
+            control: {
+                type: 'object'
+            },
+            defaultValue: jsonData,
+            table: {
+                category: 'Provider settings',
+                type: {
+                    summary: 'string'
+                },
+                defaultValue: {
+                    summary: ''
+                }
+            }
+        },
+        editable: {
+            description: 'Defines if component is editable',
+            control: {
+                type: 'boolean'
+            },
+            defaultValue: false,
+            table: {
+                category: 'Provider settings',
+                type: {
+                    summary: 'boolean'
+                },
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        title: {
+            control: {
+                type: 'text'
+            },
+            defaultValue: 'JSON Dialog Title',
+            table: {
+                category: 'Provider settings',
+                type: {
+                    summary: 'string'
+                },
+                defaultValue: {
+                    summary: 'JSON'
+                }
+            }
+        }
+    }
+} as Meta;
+
+const template: Story<EditJsonDialogStorybookComponent> = (args: EditJsonDialogStorybookComponent) => ({
+    props: args
+});
+
+export const editJSONDialog = template.bind({});

lib/core/src/lib/dialogs/public-api.ts

@@ -16,8 +16,7 @@
  */
 
 export * from './download-zip/download-zip.dialog';
+export * from './download-zip/download-zip.dialog.module';
 
 export * from './edit-json/edit-json.dialog';
 export * from './edit-json/edit-json.dialog.module';
-
-export * from './dialog.module';

lib/core/src/lib/mock/download-zip-data.mock.ts

@@ -0,0 +1,33 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DownloadEntry } from '@alfresco/js-api';
+
+export const zipNode = {
+    entry: {
+        name: 'files.zip',
+        contentUrl: './assets/files.zip',
+        id: 'files_in_zip'
+    }
+};
+
+export const downloadEntry: DownloadEntry = {
+    entry: {
+        id: 'entryId',
+        status: 'DONE'
+    }
+};

lib/core/src/lib/mock/download-zip-service.mock.ts

@@ -0,0 +1,101 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DownloadBodyCreate, DownloadEntry } from '@alfresco/js-api';
+import { from, Observable, of, ReplaySubject, Subject } from 'rxjs';
+import { catchError } from 'rxjs/internal/operators/catchError';
+import { zipNode, downloadEntry } from './download-zip-data.mock';
+
+export class AlfrescoApiServiceMock {
+    nodeUpdated = new Subject<Node>();
+    alfrescoApiInitialized: ReplaySubject<boolean> = new ReplaySubject(1);
+    alfrescoApi = new AlfrescoApiCompatibilityMock();
+
+    load() {}
+    getInstance = () => this.alfrescoApi;
+}
+
+class AlfrescoApiCompatibilityMock {
+    core = new CoreMock();
+    content = new ContentApiMock();
+
+    isOauthConfiguration = () => true;
+    isLoggedIn = () => true;
+    isEcmConfiguration = () => true;
+    isEcmLoggedIn = () => true;
+}
+
+export class ContentApiMock {
+    getContentUrl = (_: string, _1?: boolean, _2?: string): string =>
+        zipNode.entry.contentUrl;
+}
+
+class CoreMock {
+    downloadsApi = new DownloadsApiMock();
+    nodesApi = new NodesApiMock();
+}
+
+export class NodesApiMock {
+    getNode = (_: string, _2?: any): any => of(zipNode.entry);
+}
+
+class DownloadsApiMock {
+    createDownload = (
+        _: DownloadBodyCreate,
+        _2?: any
+    ): Promise<DownloadEntry> => Promise.resolve(downloadEntry);
+
+    getDownload = (_: string, _2?: any): Promise<DownloadEntry> =>
+        Promise.resolve(downloadEntry);
+    cancelDownload(_: string) {}
+}
+
+export class DownloadZipMockService {
+    private _downloadsApi: DownloadsApiMock;
+    get downloadsApi(): DownloadsApiMock {
+        this._downloadsApi = this._downloadsApi ?? new DownloadsApiMock();
+        return this._downloadsApi;
+    }
+
+    createDownload(payload: DownloadBodyCreate): Observable<DownloadEntry> {
+        return from(this.downloadsApi.createDownload(payload)).pipe(
+            catchError((err) => of(err))
+        );
+    }
+
+    getDownload(downloadId: string): Observable<DownloadEntry> {
+        return from(this.downloadsApi.getDownload(downloadId));
+    }
+
+    cancelDownload(downloadId: string) {
+        this.downloadsApi.cancelDownload(downloadId);
+    }
+
+    download(url: string, fileName: string) {
+        if (url && fileName) {
+            const link = document.createElement('a');
+
+            link.style.display = 'none';
+            link.download = fileName;
+            link.href = url;
+
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+}