Merge branch 'dark-theme(LEAP-460)'

angular.json

@@ -62,8 +62,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "10mb",
+                  "maximumError": "15mb"
                 }
               ]
             },
@@ -83,8 +83,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "10mb",
+                  "maximumError": "15mb"
                 }
               ]
             }

docs/built-in-features/general-options.md

@@ -0,0 +1,30 @@
+Once you opened the Leapp option menu - which can be accessed by clicking the top right gear icon - you can edit the following settings in the General tab
+
+![](../../images/screens/newuxui/leapp-options.png?style=center-img)
+
+## Default Regions
+
+This option allows you to set the default AWS or Azure region/location for every new session. 
+
+Each time you create a new session, this will be the default region assigned to it. 
+
+You can still change it if you need a different one, by selecting a different region while creating the session or by changing the region once a session is created.
+
+## Terminal Selection
+
+This option is used to select the terminal in which to open an SSM session. 
+
+!!! Info
+
+    This setting is currently only available on MacOS. If you want to contribute and add a new terminal for a specific OS, please refer to the [contributing guide](https://github.com/Noovolari/leapp/blob/master/CONTRIBUTING.md)
+
+## Color Theme
+
+Leapp now comes with a slick new Dark Theme! 
+
+With this option, you can switch between light and dark theme, or use your system default.
+
+![](../../images/screens/newuxui/leapp-dark.png?style=center-img)
+
+
+

docs/troubleshooting/faq.md

@@ -22,3 +22,7 @@ Every key stored by Leapp in the vault is named Leapp. The account name shows th
 ## Where do I find the Leapp logs?
 
 Head to the [Application data section](app-data.md).
+
+## SSM terminal is opening but no session is starting, what can I do?
+
+Just close the terminal and relaunch the SSM command.

mkdocs.yml

@@ -33,6 +33,7 @@ nav:
   - 'Built-in features':
       - 'EC2 connect through AWS SSM': 'built-in-features/aws-ec2-connect.md'
       - 'AWS Multi-profile management': 'built-in-features/aws-named-profiles.md'
+  - 'General Options': 'built-in-features/general-options.md'
   - 'Roadmap': https://roadmap.leapp.cloud/tabs/4-in-progress
   - Contributing:
       - 'Get involved': 'contributing/get-involved.md'

package.json

@@ -31,7 +31,9 @@
     "release-mac": "gushio scripts/gushio/target-release.js 'configuration production' mac",
     "release-linux": "gushio scripts/gushio/target-release.js 'configuration production' linux",
     "release-win": "gushio scripts/gushio/target-release.js 'configuration production' win",
-    "release-all": "gushio scripts/gushio/target-release.js 'configuration production' all"
+    "release-all": "gushio scripts/gushio/target-release.js 'configuration production' all",
+    "dist-deb-dev": "rm -rf electron/dist && rm -rf release && rm -rf dist && tsc --p electron && ng build --aot --base-href ./ && mkdir -p electron/dist/electron/assets/images && cp -a electron/assets/images/* electron/dist/electron/assets/images/ && electron-builder build --linux",
+    "dist-win-dev": "rm -rf electron/dist && rm -rf release && rm -rf dist && tsc --p electron && ng build --aot --base-href ./ && mkdir -p electron/dist/electron/assets/images && cp -a electron/assets/images/* electron/dist/electron/assets/images/ && electron-builder build --win --x64"
   },
   "build": {
     "publish": [
@@ -232,10 +234,11 @@
     "electron-installer-dmg": "3.0.0",
     "electron-packager": "15.4.0",
     "electron-rebuild": "3.2.5",
-    "eslint": "^8.8.0",
+    "eslint": "^8.10.0",
     "eslint-plugin-import": "latest",
     "eslint-plugin-jsdoc": "latest",
     "eslint-plugin-prefer-arrow": "latest",
+    "gushio": "~0.5.0",
     "husky": "^7.0.0",
     "jasmine": "^3.7.0",
     "jasmine-core": "~3.7.1",
@@ -252,8 +255,7 @@
     "protractor": "^7.0.0",
     "ts-node": "^9.1.1",
     "typescript": "4.5.5",
-    "util": "^0.12.4",
-    "gushio": "~0.5.0"
+    "util": "^0.12.4"
   },
   "browser": {
     "crypto": false

src/app/app.component.spec.ts

@@ -1,16 +1,25 @@
 import {TestBed, waitForAsync} from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import {mustInjected} from "../base-injectables";
+import {AppModule} from "./app.module";
+import {UpdaterService} from "./services/updater.service";
+import {ComponentsModule} from "./components/components.module";
 
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
+        AppModule,
+        ComponentsModule,
         RouterTestingModule
       ],
       declarations: [
         AppComponent
       ],
+      providers: [
+        UpdaterService
+      ].concat(mustInjected())
     }).compileComponents();
   }));
 
@@ -19,17 +28,4 @@ describe('AppComponent', () => {
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it(`should have as title 'leapp-client'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('leapp-client');
-  });
-
-  it('should render title in a h1 tag', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to leapp-client!');
-  });
 });

src/app/app.component.ts

@@ -18,7 +18,7 @@ import {AwsSsoIntegrationService} from './services/aws-sso-integration.service';
 import {AwsSsoOidcService} from './services/aws-sso-oidc.service';
 import {AwsSsoRoleService} from './services/session/aws/methods/aws-sso-role.service';
 import {KeychainService} from './services/keychain.service';
-import {Constants} from "./models/constants";
+import {Constants} from './models/constants';
 
 @Component({
   selector: 'app-root',
@@ -27,6 +27,7 @@ import {Constants} from "./models/constants";
 })
 export class AppComponent implements OnInit {
   /* Main app file: launches the Angular framework inside Electron app */
+  darkMode: any;
   constructor(
     public app: AppService,
     private workspaceService: WorkspaceService,
@@ -41,7 +42,10 @@ export class AppComponent implements OnInit {
     private awsSsoOidcService: AwsSsoOidcService,
     private awsSsoRoleService: AwsSsoRoleService,
     private keychainService: KeychainService
-  ) {}
+  ) {
+    this.setInitialColorSchema();
+    this.setColorSchemaChangeEventListener();
+  }
 
   async ngOnInit() {
     AwsSsoIntegrationService.init(
@@ -147,7 +151,11 @@ export class AppComponent implements OnInit {
    * Show that we created a copy of original credential file if present in the system
    */
   private showCredentialBackupMessageIfNeeded(workspace: Workspace) {
-    const oldAwsCredentialsPath = this.app.getOS().homedir() + '/' + environment.credentialsDestination;
+    let oldAwsCredentialsPath = this.app.getOS().homedir() + '/' + environment.credentialsDestination;
+    if(this.app.detectOs() === Constants.windows) {
+      oldAwsCredentialsPath = oldAwsCredentialsPath.replaceAll('/', '\\');
+    }
+
     const newAwsCredentialsPath = oldAwsCredentialsPath + '.leapp.bkp';
     const check = workspace.sessions.length === 0 &&
                   this.app.getFs().existsSync(oldAwsCredentialsPath) &&
@@ -203,5 +211,34 @@ export class AppComponent implements OnInit {
     });
   }
 
+  private setInitialColorSchema() {
+    const workspace = this.workspaceService.getWorkspace();
+    if(workspace) {
+      const colorTheme = workspace.colorTheme || environment.colorTheme;
+      workspace.colorTheme = workspace.colorTheme || environment.colorTheme;
+      if(colorTheme === Constants.darkTheme) {
+        document.querySelector('body').classList.add('dark-theme');
+      } else if(colorTheme === Constants.lightTheme) {
+        document.querySelector('body').classList.remove('dark-theme');
+      } else if(colorTheme === Constants.systemDefaultTheme) {
+        if(this.app.isDarkMode()) {
+          document.querySelector('body').classList.add('dark-theme');
+        } else {
+          document.querySelector('body').classList.remove('dark-theme');
+        }
+      }
+    }
+  }
 
+  private setColorSchemaChangeEventListener() {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+      if(this.workspaceService.getWorkspace().colorTheme === Constants.systemDefaultTheme) {
+        if(this.app.isDarkMode()) {
+          document.querySelector('body').classList.add('dark-theme');
+        } else {
+          document.querySelector('body').classList.remove('dark-theme');
+        }
+      }
+    });
+  }
 }

src/app/app.module.ts

@@ -5,8 +5,6 @@ import { AppComponent } from './app.component';
 import { LayoutModule } from './layout/layout.module';
 import { HttpClientModule} from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ConfirmationDialogComponent } from './components/dialogs/confirmation-dialog/confirmation-dialog.component';
-import {InputDialogComponent} from './components/dialogs/input-dialog/input-dialog.component';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {NgSelectModule} from '@ng-select/ng-select';
 import {TrayMenuComponent} from './components/tray-menu/tray-menu.component';

src/app/components/command-bar/command-bar.component.html

@@ -36,9 +36,9 @@
       </div>
 
       <div class="window-buttons">
-        <span class="minimize" (click)="appService.getCurrentWindow().minimize()"><img src="assets/images/windows_minimize.png" alt="" title=""></span>
-        <span class="maximize" (click)="appService.getCurrentWindow().maximize()"><img src="assets/images/windows_maximize.png" alt="" title=""></span>
-        <span class="quit" (click)="appService.getCurrentWindow().hide()"><img src="assets/images/windows_close.png" alt="" title=""></span>
+        <span class="minimize" (click)="appService.getCurrentWindow().minimize()"><img src="assets/images/windows_minimize{{workspaceService.getColorTheme() === eConstants.darkTheme || (workspaceService.getColorTheme() === eConstants.systemDefaultTheme && appService.isDarkMode()) ? '_dark' : ''}}.png" alt="" title=""></span>
+        <span class="maximize" (click)="appService.getCurrentWindow().isMaximized() ? appService.getCurrentWindow().restore() : appService.getCurrentWindow().maximize()"><img src="assets/images/windows_maximize{{workspaceService.getColorTheme() === eConstants.darkTheme || (workspaceService.getColorTheme() === eConstants.systemDefaultTheme && appService.isDarkMode()) ? '_dark' : ''}}.png" alt="" title=""></span>
+        <span class="quit" (click)="appService.getCurrentWindow().hide()"><img src="assets/images/windows_close{{workspaceService.getColorTheme() === eConstants.darkTheme || (workspaceService.getColorTheme() === eConstants.systemDefaultTheme && appService.isDarkMode()) ? '_dark' : ''}}.png" alt="" title=""></span>
       </div>
     </div>
 

src/app/components/command-bar/command-bar.component.scss

@@ -128,3 +128,4 @@
   font-size: 20px;
   color: $search-icon-color;
 }
+

src/app/components/command-bar/command-bar.component.ts

@@ -12,6 +12,7 @@ import {SessionType} from '../../models/session-type';
 import Segment from '../../models/Segment';
 import {globalOrderingFilter} from '../sessions/sessions.component';
 import {syncAllEvent} from '../integration-bar/integration-bar.component';
+import {Constants} from '../../models/constants';
 
 export interface GlobalFilters {
   searchFilter: string;
@@ -47,6 +48,7 @@ export class CommandBarComponent implements OnInit, OnDestroy, AfterContentCheck
   @ViewChild('parent') parent: ElementRef;
   @ViewChild('child') child: ElementRef;
   overflowed = false;
+  eConstants = Constants;
 
   filterForm = new FormGroup({
     searchFilter: new FormControl(''),
@@ -74,9 +76,7 @@ export class CommandBarComponent implements OnInit, OnDestroy, AfterContentCheck
   private subscription5;
   private subscription6;
 
-  private currentSegment: Segment;
-
-  constructor(private bsModalService: BsModalService, private workspaceService: WorkspaceService, public appService: AppService) {
+  constructor(private bsModalService: BsModalService, public workspaceService: WorkspaceService, public appService: AppService) {
     this.filterExtended = false;
     this.compactMode = false;
 
@@ -175,15 +175,22 @@ export class CommandBarComponent implements OnInit, OnDestroy, AfterContentCheck
   toggleCompactMode() {
     this.compactMode = !this.compactMode;
     this.filterExtended = false;
+
+    this.appService.getCurrentWindow().unmaximize();
+    this.appService.getCurrentWindow().restore();
+
+    if(this.appService.detectOs() === Constants.mac && this.appService.getCurrentWindow().isFullScreen()) {
+      this.appService.getCurrentWindow().setFullScreen(false);
+    }
+
     compactMode.next(this.compactMode);
     globalHasFilter.next(this.filterExtended);
-    // this.saveTemporarySegmentAndApply();
+    document.querySelector('.sessions').classList.remove('filtered');
   }
 
   toggleFilters() {
     this.filterExtended = !this.filterExtended;
     globalHasFilter.next(this.filterExtended);
-    // this.saveTemporarySegmentAndApply();
     CommandBarComponent.changeSessionsTableHeight();
   }
 
@@ -368,26 +375,4 @@ export class CommandBarComponent implements OnInit, OnDestroy, AfterContentCheck
 
     this.regions = this.appService.getRegions().map(element => ({ name: element.region, value: false, show: true }));
   }
-
-  private saveTemporarySegmentAndApply() {
-    if (!this.filterExtended) {
-      this.currentSegment = JSON.parse(JSON.stringify({
-        name: 'temp',
-        filterGroup: {
-          dateFilter: this.filterForm.get('dateFilter').value,
-          integrationFilter: this.filterForm.get('integrationFilter').value,
-          profileFilter: this.filterForm.get('profileFilter').value,
-          providerFilter: this.filterForm.get('providerFilter').value,
-          regionFilter: this.filterForm.get('regionFilter').value,
-          searchFilter: this.filterForm.get('searchFilter').value,
-          typeFilter: this.filterForm.get('typeFilter').value
-        }
-      }));
-      globalResetFilter.next(true);
-    } else {
-      globalSegmentFilter.next(this.currentSegment);
-    }
-  }
-
-
 }

src/app/components/components.module.ts

@@ -35,6 +35,7 @@ import { ColumnDialogComponent } from './dialogs/column-dialog/column-dialog.com
 import { LeappSelectComponent } from './leapp-select/leapp-select.component';
 import { IntegrationBarComponent } from './integration-bar/integration-bar.component';
 import {MatTooltipModule} from "@angular/material/tooltip";
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 
 @NgModule({
   declarations: [
@@ -76,7 +77,8 @@ import {MatTooltipModule} from "@angular/material/tooltip";
     MatListModule,
     MatExpansionModule,
     MatButtonToggleModule,
-    MatTooltipModule
+    MatTooltipModule,
+    MatSlideToggleModule
   ],
   exports: [ConfirmationDialogComponent, InputDialogComponent, CommandBarComponent, SideBarComponent, SessionsComponent]
 })

src/app/components/dialogs/column-dialog/column-dialog.component.ts

@@ -30,15 +30,16 @@ export class ColumnDialogComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     // Set new state
-    Object.keys(this.eGlobalColumns).forEach(key => {
-      this.columnForm.get(key).setValue(this.eGlobalColumns[key]);
-    });
-
     this.subscription = this.columnForm.valueChanges.subscribe((values: IGlobalColumns) => {
       this.values = values;
     });
 
     this.subscription2 = compactMode.subscribe(value => this.showRegion = !value);
+
+    Object.keys(this.eGlobalColumns).forEach(key => {
+      this.columnForm.get(key).setValue(this.eGlobalColumns[key]);
+    });
+
   }
 
   ngOnDestroy(): void {

src/app/components/dialogs/create-dialog/create-dialog.component.html

@@ -9,7 +9,7 @@
       <h4>Choose your Cloud Provider</h4>
 
       <div class="strategy-list">
-        <button type="button" class="providers" (click)="setProvider(eSessionType.awsIamRoleFederated);"><img src="./assets/images/aws-logo.svg" width="36" alt=""> Amazon AWS</button>
+        <button type="button" class="providers" (click)="setProvider(eSessionType.awsIamRoleFederated);"><img src="./assets/images/aws{{workspaceService.getColorTheme() === eConstants.darkTheme || (workspaceService.getColorTheme() === eConstants.systemDefaultTheme && appService.isDarkMode()) ? '-dark' : ''}}.png" width="36" alt=""> Amazon AWS</button>
         <button type="button" class="providers" (click)="setProvider(eSessionType.azure);"><img src="./assets/images/azure-logo.svg" width="36" alt=""> Microsoft Azure</button>
 
         <button type="button" class="providers disabled" (click)="false; //setProvider(eSessionType.google);"><img src="./assets/images/google.png" width="36" alt=""> Google Cloud</button>
@@ -37,6 +37,7 @@ <h4><img src="./assets/images/{{getIconForProvider(provider)}}" alt="" title=""
                          [bindValue]="'value'"
                          (change)="setAccessStrategy(provider);"
                          [clearable]="false"
+                         [searchable]="false"
                          [items]="[{value: eSessionType.awsIamRoleFederated, label: 'AWS IAM Role Federated'}, {value: eSessionType.awsIamUser, label: 'AWS IAM User'}, {value: eSessionType.awsIamRoleChained, label: 'AWS IAM Role Chained'}]"
                          placeholder="Select Session Strategy"
                          [addTag]="false"