UI: Improved mobile configuration dialog to single file

ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.html

@@ -43,23 +43,14 @@
                  [data]=createMarkDownCommand(gitRepositoryLink)></tb-markdown>
   </div>
   <div class="tb-form-panel stroked">
-    <div class="tb-form-panel-title" translate>mobile.configuration-step.configure-api-title</div>
+    <div class="tb-form-panel-title" translate>mobile.configuration-step.configure-app-settings-title</div>
-    <div translate>mobile.configuration-step.configure-api-text</div>
+    <div class="flex gap-4">
-    <tb-markdown usePlainMarkdown containerClass="tb-command-code"
+      <div class="flex-1" translate>mobile.configuration-step.configure-app-settings-text</div>
-                 [data]=createMarkDownCommand(pathToConstants)></tb-markdown>
+      <button mat-stroked-button color="primary" type="button" (click)="downloadSettings()">
-    <div translate>mobile.configuration-step.configure-api-hint</div>
+        <mat-icon class="tb-mat-24">download</mat-icon>
-    <tb-markdown usePlainMarkdown containerClass="tb-command-code"
+        {{ 'mobile.configuration-step.download-file' | translate }}
-                 [data]=createMarkDownCommand(configureApi)></tb-markdown>
+      </button>
-  </div>
+    </div>
-  <div class="tb-form-panel stroked" *ngIf="setApplication">
-    <div class="tb-form-panel-title" translate>mobile.configuration-step.configure-package-title</div>
-    <div translate>mobile.configuration-step.configure-package-text</div>
-    <div translate>mobile.configuration-step.configure-package-text-install</div>
-    <tb-markdown usePlainMarkdown containerClass="tb-command-code"
-                 [data]=createMarkDownCommand(flutterInstallRenameCommand)></tb-markdown>
-    <div translate>mobile.configuration-step.configure-package-run-commands</div>
-    <tb-markdown usePlainMarkdown containerClass="tb-command-code"
-                 [data]=createMarkDownCommand(renameCommands)></tb-markdown>
   </div>
   <div class="tb-form-panel stroked">
     <div class="tb-form-panel-title" translate>mobile.configuration-step.run-app-title</div>

ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.ts

@@ -22,6 +22,7 @@ import { Router } from '@angular/router';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { ActionPreferencesPutUserSettings } from '@core/auth/auth.actions';
 import { MobileApp } from '@shared/models/mobile-app.models';
+import { ImportExportService } from '@shared/import-export/import-export.service';
 
 export interface MobileAppConfigurationDialogData {
   afterAdd: boolean;
@@ -36,53 +37,22 @@ export interface MobileAppConfigurationDialogData {
 })
 export class MobileAppConfigurationDialogComponent extends DialogComponent<MobileAppConfigurationDialogComponent> {
 
-  notShowAgain = false;
+  private fileName = 'configs.json';
-  setApplication = false;
 
+  notShowAgain = false;
   showDontShowAgain: boolean;
 
   gitRepositoryLink = 'git clone -b master https://github.com/thingsboard/flutter_thingsboard_app.git';
-  pathToConstants = 'lib/constants/app_constants.dart';
+  flutterRunCommand = `flutter run --dart-define-from-file ${this.fileName}`;
-  flutterRunCommand = 'flutter run';
-  flutterInstallRenameCommand = 'flutter pub global activate rename';
-
-  configureApi: string;
-
-  renameCommands: string[] = [];
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) private data: MobileAppConfigurationDialogData,
               protected dialogRef: MatDialogRef<MobileAppConfigurationDialogComponent>,
+              private importExportService: ImportExportService,
               ) {
     super(store, router, dialogRef);
-
     this.showDontShowAgain = this.data.afterAdd;
-
-    this.setApplication = !!this.data.androidApp || !!this.data.iosApp;
-
-    this.configureApi = `static const thingsBoardApiEndpoint = '${window.location.origin}';`;
-    if (this.setApplication) {
-      this.configureApi += '\n';
-      if (!!this.data.androidApp) {
-        this.configureApi += `\nstatic const thingsboardAndroidAppSecret = '${this.data.androidApp.appSecret}';`;
-      }
-      if (!!this.data.iosApp) {
-        this.configureApi += `\nstatic const thingsboardIOSAppSecret = '${this.data.iosApp.appSecret}';`;
-      }
-    }
-    if (this.setApplication) {
-      if (this.data.androidApp?.pkgName === this.data.iosApp?.pkgName) {
-        this.renameCommands.push(`rename setBundleId --targets android, ios --value "${this.data.androidApp.pkgName}"`);
-      } else {
-        if (!!this.data.androidApp) {
-          this.renameCommands.push(`rename setBundleId --targets android --value "${this.data.androidApp.pkgName}"`);
-        }
-        if (!!this.data.iosApp) {
-          this.renameCommands.push(`rename setBundleId --targets ios --value "${this.data.iosApp.pkgName}"`);
-        }
-      }
-    }
   }
 
   close(): void {
@@ -94,14 +64,24 @@ export class MobileAppConfigurationDialogComponent extends DialogComponent<Mobil
     }
   }
 
-  createMarkDownCommand(commands: string | string[]): string {
+  createMarkDownCommand(commands: string): string {
-    if (Array.isArray(commands)) {
+    return this.createMarkDownSingleCommand(commands);
-      const formatCommands: Array<string> = [];
+  }
-      commands.forEach(command => formatCommands.push(this.createMarkDownSingleCommand(command)));
+
-      return formatCommands.join(`\n<br />\n\n`);
+  downloadSettings(): void {
-    } else {
+    const settings: any = {
-      return this.createMarkDownSingleCommand(commands);
+      thingsBoardApiEndpoint: window.location.origin
+    };
+    if (!!this.data.androidApp) {
+      settings.androidApplicationId = this.data.androidApp.pkgName;
+      settings.thingsboardOAuth2CallbackUrlScheme = this.data.androidApp.pkgName + '.auth';
+      settings.thingsboardAndroidAppSecret = this.data.androidApp.appSecret;
     }
+    if (!!this.data.iosApp) {
+      settings.iosApplicationId = this.data.iosApp.pkgName;
+      settings.thingsboardIOSAppSecret = this.data.iosApp.appSecret;
+    }
+    this.importExportService.exportJson(settings, this.fileName);
   }
 
   private createMarkDownSingleCommand(command: string): string {

ui-ngx/src/app/shared/import-export/import-export.service.ts

@@ -1188,7 +1188,7 @@ export class ImportExportService {
     this.exportJson(data, filename);
   }
 
-  private exportJson(data: any, filename: string) {
+  public exportJson(data: any, filename: string) {
     if (isObject(data)) {
       data = JSON.stringify(data, null,  2);
     }

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3850,17 +3850,13 @@
             "prepare-environment-text": "Flutter ThingsBoard Mobile Application requires Flutter SDK. Follow instructions to set up Flutter SDK.",
             "get-source-code-title": "Get app source code",
             "get-source-code-text": "You can get Flutter ThingsBoard Mobile Application source code by cloning it from the GitHub repository:",
-            "configure-api-title": "Configure ThingsBoard API endpoint",
+            "configure-app-settings-title": "Configure app settings",
-            "configure-api-text": "Open the flutter_thingsboard_app project in your editor/IDE. Edit:",
+            "configure-app-settings-text": "Download the configuration file and place it into the root directory of the project you cloned in the previous step.",
-            "configure-api-hint": "Set the value of the thingsBoardApiEndpoint constant to match the API endpoint of your ThingsBoard server instance. Do not use “localhost” or “127.0.0.1” hostnames.",
+            "download-file": "Download file",
             "run-app-title": "Run the app",
             "run-app-text": "Run the app as described in your IDE.\nIf using the terminal, run the app with the following command:",
             "more-information": "Detailed information may be found in our Getting Started documentation.",
-            "getting-started": "Getting Started",
+            "getting-started": "Getting Started"
-            "configure-package-title": "Configure application package",
-            "configure-package-text": "You can manually change the Application Package or use third party CLI tool.",
-            "configure-package-text-install": "To install the Rename CLI Tool, execute the following command:",
-            "configure-package-run-commands": "Run these commands in the root directory of your project:"
         }
     },
     "notification": {