Merge pull request #1500 from GuessWhoSamFoo/scrollbars

Use custom scrollbars for content, summary, and quick switcher
vmware-archive · Oct 14, 2020 · c1031c1 · c1031c1
2 parents 6e9f331 + 9490113
commit c1031c1
Show file tree

Hide file tree

Showing 33 changed files with 193 additions and 96 deletions.
diff --git a/.github/workflows/preflight-checks.yaml b/.github/workflows/preflight-checks.yaml
@@ -63,28 +63,6 @@ jobs:
         with:
           node-version: 10.x
       - uses: actions/checkout@v2
-      - name: Get npm cache directory
-        id: npm-cache
-        run: |
-          echo "::set-output name=dir::$(npm config get cache)"
-      - uses: actions/cache@v2
-        if: github.event_name == 'push'
-        with:
-          path: ${{ steps.npm-cache.outputs.dir }}
-          key: ${{ runner.os }}-node-push-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-push-${{ hashFiles('**/package-lock.json') }}
-            ${{ runner.os }}-node-push-
-      - uses: actions/cache@v2
-        if: github.event_name == 'pull_request'
-        with:
-          path: ${{ steps.npm-cache.outputs.dir }}
-          key: ${{ runner.os }}-node-pr-${{ github.event.number }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-pr-${{ github.event.number }}-${{ hashFiles('**/package-lock.json') }}
-            ${{ runner.os }}-node-pr-${{ github.event.number }}-
-            ${{ runner.os }}-node-push-${{ hashFiles('**/package-lock.json') }}
-            ${{ runner.os }}-node-push-
       - name: run_karma
         run: |
           cd web

diff --git a/web/angular.json b/web/angular.json
@@ -30,7 +30,8 @@
               "lodash/forEach",
               "lodash/pullAt",
               "lodash/remove",
-              "lodash/uniqueId"
+              "lodash/uniqueId",
+              "overlayscrollbars"
             ],
             "aot": true,
             "outputPath": "dist/dash-frontend",

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -47,6 +47,7 @@
     "@clr/ui": "^4.0.3",
     "@ng-select/ng-select": "^5.0.1",
     "@types/cytoscape": "^3.14.8",
+    "@types/overlayscrollbars": "^1.12.0",
     "@webcomponents/custom-elements": "^1.4.2",
     "angular-resizable-element": "^3.3.3",
     "ansi_up": "^4.0.4",
@@ -66,6 +67,7 @@
     "monaco-editor": "^0.21.2",
     "ng-monaco-editor": "^2.3.0",
     "ngx-highlightjs": "^4.1.2",
+    "overlayscrollbars-ngx": "^0.2.2",
     "rxjs": "^6.6.3",
     "serialize-javascript": "^5.0.1",
     "tslib": "^2.0.2",

diff --git a/web/src/app/components/smart/home/home.component.spec.ts b/web/src/app/components/smart/home/home.component.spec.ts
@@ -3,6 +3,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HomeComponent } from './home.component';
 import { initServiceStub } from 'src/app/testing/init-service-stub';
 import { InitService } from 'src/app/modules/shared/services/init/init.service';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-ngx';
+import { ApplyYAMLComponent } from 'src/app/modules/sugarloaf/components/smart/apply-yaml/apply-yaml.component';
+import { EditorComponent } from 'src/app/modules/shared/components/smart/editor/editor.component';
+import { SharedModule } from 'src/app/modules/shared/shared.module';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
@@ -16,8 +20,14 @@ describe('HomeComponent', () => {
           provide: InitService,
           useValue: initServiceStub,
         },
+        SharedModule,
+      ],
+      declarations: [
+        HomeComponent,
+        ApplyYAMLComponent,
+        EditorComponent,
+        OverlayScrollbarsComponent,
       ],
-      declarations: [HomeComponent],
     }).compileComponents();
   }));
 

diff --git a/web/src/app/modules/shared/components/missing-component/missing-component.component.spec.ts b/web/src/app/modules/shared/components/missing-component/missing-component.component.spec.ts
@@ -3,14 +3,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MissingComponentComponent } from './missing-component.component';
 import { BrowserModule } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
+import { ApplyYAMLComponent } from 'src/app/modules/sugarloaf/components/smart/apply-yaml/apply-yaml.component';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-ngx';
 
 describe('MissingComponentComponent', () => {
   let component: MissingComponentComponent;
   let fixture: ComponentFixture<MissingComponentComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [MissingComponentComponent],
+      declarations: [
+        MissingComponentComponent,
+        ApplyYAMLComponent,
+        OverlayScrollbarsComponent,
+      ],
       imports: [CommonModule],
     }).compileComponents();
   }));

diff --git a/web/src/app/modules/shared/components/presentation/alert/alert.component.spec.ts b/web/src/app/modules/shared/components/presentation/alert/alert.component.spec.ts
@@ -3,14 +3,15 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { AlertComponent } from './alert.component';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
+import { OctantTooltipComponent } from '../octant-tooltip/octant-tooltip';
 
 describe('AlertComponent', () => {
   let component: AlertComponent;
   let fixture: ComponentFixture<AlertComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [AlertComponent],
+      declarations: [AlertComponent, OctantTooltipComponent],
     }).compileComponents();
   }));
 

diff --git a/web/src/app/modules/shared/components/presentation/card/card.component.spec.ts b/web/src/app/modules/shared/components/presentation/card/card.component.spec.ts
@@ -16,6 +16,7 @@ import { FormComponent } from '../form/form.component';
 import { WebsocketService } from '../../../../../data/services/websocket/websocket.service';
 import { WebsocketServiceMock } from '../../../../../data/services/websocket/mock';
 import { windowProvider, WindowToken } from '../../../../../window';
+import { EditorComponent } from '../../smart/editor/editor.component';
 
 describe('CardComponent', () => {
   let component: CardComponent;
@@ -34,6 +35,7 @@ describe('CardComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      declarations: [EditorComponent],
       imports: [SharedModule],
       providers: [
         { provide: FormBuilder, useValue: formBuilder },

diff --git a/web/src/app/modules/shared/components/presentation/containers/containers.component.spec.ts b/web/src/app/modules/shared/components/presentation/containers/containers.component.spec.ts
@@ -3,6 +3,7 @@
 //
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-ngx';
 
 import { ContainersComponent } from './containers.component';
 
@@ -12,7 +13,7 @@ describe('ContainersComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ContainersComponent],
+      declarations: [ContainersComponent, OverlayScrollbarsComponent],
     }).compileComponents();
   }));
 

diff --git a/web/src/app/modules/shared/components/presentation/modal/modal.component.spec.ts b/web/src/app/modules/shared/components/presentation/modal/modal.component.spec.ts
@@ -7,6 +7,7 @@ import { ModalComponent } from './modal.component';
 import { SharedModule } from '../../../shared.module';
 import { ModalService } from '../../../services/modal/modal.service';
 import { windowProvider, WindowToken } from '../../../../../window';
+import { OctantTooltipComponent } from '../octant-tooltip/octant-tooltip';
 
 describe('ModalComponent', () => {
   let component: ModalComponent;
@@ -15,7 +16,7 @@ describe('ModalComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [SharedModule],
-      declarations: [ModalComponent],
+      declarations: [ModalComponent, OctantTooltipComponent],
       providers: [
         { provide: ModalService },
         { provide: WindowToken, useFactory: windowProvider },

diff --git a/web/src/app/modules/shared/components/presentation/pod-status/pod-status.component.spec.ts b/web/src/app/modules/shared/components/presentation/pod-status/pod-status.component.spec.ts
@@ -7,6 +7,7 @@ import { HeptagonGridComponent } from '../heptagon-grid/heptagon-grid.component'
 import { PodStatusComponent } from './pod-status.component';
 import { Component, Input } from '@angular/core';
 import { PodStatus } from '../../../models/pod-status';
+import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
 
 @Component({
   selector: 'app-heptagon-grid',
@@ -26,9 +27,19 @@ describe('PodStatusComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [HighlightModule],
       declarations: [PodStatusComponent, TestGridComponent],
       providers: [
         { provide: HeptagonGridComponent, useClass: TestGridComponent },
+        {
+          provide: HIGHLIGHT_OPTIONS,
+          useValue: {
+            languages: {
+              json: () => import('highlight.js/lib/languages/json'),
+              yaml: () => import('highlight.js/lib/languages/yaml'),
+            },
+          },
+        },
       ],
     }).compileComponents();
   }));

diff --git a/.../modules/shared/components/presentation/resource-viewer/resource-viewer.component.spec.ts b/.../modules/shared/components/presentation/resource-viewer/resource-viewer.component.spec.ts
@@ -5,13 +5,15 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ResourceViewerComponent } from './resource-viewer.component';
 import { SharedModule } from '../../../shared.module';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-ngx';
 
 describe('ResourceViewerComponent', () => {
   let component: ResourceViewerComponent;
   let fixture: ComponentFixture<ResourceViewerComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      declarations: [OverlayScrollbarsComponent],
       imports: [SharedModule],
     }).compileComponents();
   }));

diff --git a/web/src/app/modules/shared/components/presentation/summary/summary.component.html b/web/src/app/modules/shared/components/presentation/summary/summary.component.html
@@ -18,27 +18,27 @@
 </ng-template>
 
 <ng-template #content>
-  <div class="card-block">
-    <h3 class="card-title">{{ title }}</h3>
-
-    <app-alert *ngIf="v?.config.alert" [alert]="v.config.alert"></app-alert>
-
-    <table class="table-noborder">
-      <tbody>
-        <tr *ngFor="let item of v?.config.sections; trackBy: identifyItem">
-          <td class="left">{{ item.header }}</td>
-          <td class="left">
-            <app-view-table *ngIf="item.content?.metadata?.type === 'table'; else dynamic"
-              [view]="item.content"
-            ></app-view-table>
-            <ng-template #dynamic>
-              <app-view-container [view]="item.content"></app-view-container>
-            </ng-template>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+  <overlay-scrollbars>
+    <div class="card-block">
+      <h3 class="card-title">{{ title }}</h3>
+      <app-alert *ngIf="v?.config.alert" [alert]="v.config.alert"></app-alert>
+      <table class="table-noborder">
+        <tbody>
+          <tr *ngFor="let item of v?.config.sections; trackBy: identifyItem">
+            <td class="left">{{ item.header }}</td>
+            <td class="left">
+              <app-view-table *ngIf="item.content?.metadata?.type === 'table'; else dynamic"
+                [view]="item.content"
+              ></app-view-table>
+              <ng-template #dynamic>
+                <app-view-container [view]="item.content"></app-view-container>
+              </ng-template>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </overlay-scrollbars>
 </ng-template>
 
 <ng-template #contentFooter>

diff --git a/web/src/app/modules/shared/components/presentation/tabs/tabs.component.spec.ts b/web/src/app/modules/shared/components/presentation/tabs/tabs.component.spec.ts
@@ -6,13 +6,15 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TabsComponent } from './tabs.component';
 import { SharedModule } from '../../../shared.module';
 import { windowProvider, WindowToken } from '../../../../../window';
+import { OctantTooltipComponent } from '../octant-tooltip/octant-tooltip';
 
 describe('TabsComponent', () => {
   let component: TabsComponent;
   let fixture: ComponentFixture<TabsComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      declarations: [OctantTooltipComponent],
       imports: [SharedModule],
       providers: [{ provide: WindowToken, useFactory: windowProvider }],
     }).compileComponents();

diff --git a/web/src/app/modules/shared/components/presentation/text/text.component.spec.ts b/web/src/app/modules/shared/components/presentation/text/text.component.spec.ts
@@ -7,8 +7,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TextView } from '../../../models/content';
 import { TextComponent } from './text.component';
 import { Status } from '../indicator/indicator.component';
-import { ClarityModule } from '@clr/angular';
-
+import { ClarityModule, ClrPopoverToggleService } from '@clr/angular';
 @Component({
   template: '<app-view-text [view]="view"></app-view-text>',
 })
@@ -23,6 +22,7 @@ describe('TextComponent', () => {
 
     beforeEach(async(() => {
       TestBed.configureTestingModule({
+        providers: [ClrPopoverToggleService],
         declarations: [TestWrapperComponent, TextComponent],
         imports: [ClarityModule],
       }).compileComponents();

diff --git a/web/src/app/modules/shared/components/presentation/timestamp/timestamp.component.spec.ts b/web/src/app/modules/shared/components/presentation/timestamp/timestamp.component.spec.ts
@@ -6,6 +6,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TimestampComponent } from './timestamp.component';
 import { SharedModule } from '../../../shared.module';
 import { windowProvider, WindowToken } from '../../../../../window';
+import { EditorComponent } from '../../smart/editor/editor.component';
 
 describe('TimestampComponent', () => {
   let component: TimestampComponent;
@@ -14,6 +15,7 @@ describe('TimestampComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [SharedModule],
+      declarations: [EditorComponent],
       providers: [{ provide: WindowToken, useFactory: windowProvider }],
     }).compileComponents();
   }));

diff --git a/...c/app/modules/shared/components/smart/context-selector/context-selector.component.spec.ts b/...c/app/modules/shared/components/smart/context-selector/context-selector.component.spec.ts
@@ -9,6 +9,7 @@ import { KubeContextService } from '../../../services/kube-context/kube-context.
 import { of } from 'rxjs';
 import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../../pipes/truncate/truncate.pipe';
+import { OctantTooltipComponent } from '../../presentation/octant-tooltip/octant-tooltip';
 
 const contexts = [
   {
@@ -35,7 +36,11 @@ describe('ContextSelectorComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ContextSelectorComponent, TruncatePipe],
+      declarations: [
+        ContextSelectorComponent,
+        OctantTooltipComponent,
+        TruncatePipe,
+      ],
       providers: [
         { provide: KubeContextService, useClass: MockKubeContextService },
       ],

diff --git a/web/src/app/modules/shared/components/smart/filters/filters.component.spec.ts b/web/src/app/modules/shared/components/smart/filters/filters.component.spec.ts
@@ -13,6 +13,8 @@ import { ActivatedRouteStub } from 'src/app/testing/activated-route-stub';
 import { FormsModule } from '@angular/forms';
 import { FiltersComponent } from './filters.component';
 import { SharedModule } from '../../../shared.module';
+import { ApplyYAMLComponent } from 'src/app/modules/sugarloaf/components/smart/apply-yaml/apply-yaml.component';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-ngx';
 
 const filterSubject = new BehaviorSubject<Filter[]>([]);
 const labelFilterService: Partial<LabelFilterService> = {
@@ -32,6 +34,7 @@ describe('FiltersComponent', () => {
     };
 
     TestBed.configureTestingModule({
+      declarations: [ApplyYAMLComponent, OverlayScrollbarsComponent],
       imports: [SharedModule],
       providers: [
         { provide: Router, useValue: mockRouter },

diff --git a/web/src/app/modules/shared/components/smart/heptagon/heptagon.component.spec.ts b/web/src/app/modules/shared/components/smart/heptagon/heptagon.component.spec.ts
@@ -7,14 +7,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HeptagonComponent } from './heptagon.component';
 import { Point } from '../../../models/point';
 import { windowProvider, WindowToken } from '../../../../../window';
+import { OctantTooltipComponent } from '../../presentation/octant-tooltip/octant-tooltip';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-ngx';
 
 describe('HeptagonComponent', () => {
   let component: HeptagonComponent;
   let fixture: ComponentFixture<HeptagonComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [HeptagonComponent],
+      declarations: [
+        HeptagonComponent,
+        OctantTooltipComponent,
+        OverlayScrollbarsComponent,
+      ],
       providers: [{ provide: WindowToken, useFactory: windowProvider }],
     }).compileComponents();
   }));