Added setting to enable scrollbar in tab list

packages/altair-app/src/app/modules/altair/components/header/header.component.html

@@ -1,6 +1,6 @@
 <div
   class="header__logo-wrapper"
-  [ngClass]="{ 'header__logo-wrapper--experimental': experimentalEnabled }"
+  [ngClass]="{ 'header__logo-wrapper--experimental': settings?.enableExperimental}"
 >
   <img src="assets/img/altair_logo.svg" alt="logo" class="header__logo" />
 </div>
@@ -11,6 +11,7 @@
   [activeWindowId]="activeWindowId"
   [closedWindows]="closedWindows"
   [isElectron]="isElectron"
+  [enableScrollbar]="settings?.enableTablistScrollbar"
   (newWindowChange)="newWindowChange.emit($event)"
   (activeWindowChange)="activeWindowChange.emit($event)"
   (removeWindowChange)="removeWindowChange.emit($event)"

packages/altair-app/src/app/modules/altair/components/header/header.component.ts

@@ -5,6 +5,7 @@ import {
   EnvironmentState,
 } from 'altair-graphql-core/build/types/state/environments.interfaces';
 import { PerWindowState } from 'altair-graphql-core/build/types/state/per-window.interfaces';
+import { SettingsState } from 'altair-graphql-core/build/types/state/settings.interfaces';
 import { WindowState } from 'altair-graphql-core/build/types/state/window.interfaces';
 import { externalLink } from '../../utils';
 
@@ -14,7 +15,6 @@ import { externalLink } from '../../utils';
   styles: [],
 })
 export class HeaderComponent {
-  @Input() experimentalEnabled = false;
   @Input() windows: WindowState = {};
   @Input() windowIds: string[] = [];
   @Input() closedWindows: PerWindowState[] = [];
@@ -23,6 +23,7 @@ export class HeaderComponent {
   @Input() headerPanels: AltairPanel[] = [];
   @Input() activeEnvironment?: EnvironmentState;
   @Input() environments?: EnvironmentsState;
+  @Input() settings?: SettingsState;
   @Output() activeWindowChange = new EventEmitter<string>();
   @Output() newWindowChange = new EventEmitter();
   @Output() removeWindowChange = new EventEmitter<string>();

packages/altair-app/src/app/modules/altair/components/window-switcher/__snapshots__/window-switcher.component.spec.ts.snap

@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`WindowSwitcherComponent should render correctly 1`] = `
-<app-window-switcher>
+<app-window-switcher
+  class="window-switcher__no-scrollbar"
+>
   <ul
-    class="window-switcher__list"
+    class="window-switcher__list window-switcher__no-scrollbar"
     sortablejs=""
   >
 

packages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.html

@@ -2,6 +2,7 @@
   sortablejs
   [sortablejsOptions]="sortableOptions"
   class="window-switcher__list"
+  [ngClass]="{'window-switcher__no-scrollbar': !enableScrollbar}"
 >
   <li
     class="window-switcher__item"

packages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.ts

@@ -5,6 +5,7 @@ import {
   Output,
   EventEmitter,
   ViewChild,
+  HostBinding,
 } from '@angular/core';
 import { AltairConfig } from 'altair-graphql-core/build/config';
 import { PerWindowState } from 'altair-graphql-core/build/types/state/per-window.interfaces';
@@ -26,6 +27,7 @@ export class WindowSwitcherComponent implements OnInit {
   @Input() closedWindows: PerWindowState[] = [];
   @Input() activeWindowId = '';
   @Input() isElectron = false;
+  @Input() enableScrollbar = false;
   @Output() activeWindowChange = new EventEmitter();
   @Output() newWindowChange = new EventEmitter();
   @Output() removeWindowChange = new EventEmitter();
@@ -34,6 +36,10 @@ export class WindowSwitcherComponent implements OnInit {
   @Output() repositionWindowChange = new EventEmitter();
   @Output() reopenClosedWindowChange = new EventEmitter();
 
+  @HostBinding('class.window-switcher__no-scrollbar') get noScrollbar() {
+    return !this.enableScrollbar;
+  }
+
   @ViewChild(ContextMenuComponent, { static: true })
   public windowTabMenu?: ContextMenuComponent;
 

packages/altair-app/src/app/modules/altair/containers/altair/altair.component.html

@@ -19,7 +19,6 @@
       </div>
     </div>
     <app-header
-      [experimentalEnabled]="(settings$ | async)?.enableExperimental"
       [windows]="windows"
       [windowIds]="windowIds"
       [activeWindowId]="activeWindowId"
@@ -28,6 +27,7 @@
       [headerPanels]="headerPanels$ | async"
       [activeEnvironment]="activeEnvironment$ | async"
       [environments]="environments$ | async"
+      [settings]="settings$ | async"
       (newWindowChange)="newWindow()"
       (activeWindowChange)="setActiveWindow($event)"
       (removeWindowChange)="removeWindow($event)"

packages/altair-app/src/app/modules/altair/utils/settings.schema.json

@@ -63,6 +63,10 @@
             "description": "Enable experimental features.\nNote: Might be unstable",
             "type": "boolean"
         },
+        "enableTablistScrollbar": {
+            "description": "Enable the scrollbar in the tab list",
+            "type": "boolean"
+        },
         "historyDepth": {
             "description": "Number of items allowed in history pane",
             "type": "number"

packages/altair-app/src/scss/components/_window-switcher.scss

@@ -29,11 +29,13 @@ app-window-switcher {
     var(--shadow-weight) var(--shadow-height);
   background-attachment: local, local, scroll, scroll;
 
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
+  &.window-switcher__no-scrollbar {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
   }
 
   &::-webkit-scrollbar-thumb {

packages/altair-core/src/types/state/settings.interfaces.ts

@@ -128,4 +128,9 @@ export interface SettingsState {
    * @default []
    */
   'script.allowedCookies'?: string[];
+
+  /**
+   * Enable the scrollbar in the tab list
+   */
+  enableTablistScrollbar?: boolean;
 }