Enabled tsconfig strict option (#2089)

* enabled ts strict mode

* enabled noUncheckedIndexedAccess check

* tests Please enter the commit message for your changes. Lines starting

* tsconfig update

* update

* updated curl.ts

DEV.md

@@ -1,3 +1,11 @@
+## Manual testing flows
+We don't have as much unit tests in place as I would like (while there are extensive unit tests for some flows, a lot of components just have one unit test which just checks that the component can be created). These manual testing flows tests the critical flows as well. These should be migrated to automated integration testing where possible, and just the flows that can't be automated should be tested manually.
+
+1. Create new window
+1. Send request with pre- and post-request scripts.
+1. Manage collection (create, open query, create nested, delete).
+
+
 ## Troubleshooting
 
 I've encountered some weird specific behavior that occur often, so documenting here when I see such what to do

libs/eslint-config-altair/index.js

@@ -18,5 +18,6 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': 'warn',
     'import/no-unresolved': 0,
     'require-jsdoc': 'off',
+    'valid-jsdoc': 'off',
   },
 };

libs/prettier-config/index.js

@@ -1,6 +1,14 @@
 module.exports = {
   semi: true,
-  trailingComma: "es5",
+  trailingComma: 'es5',
   singleQuote: true,
-  printWidth: 80
+  printWidth: 80,
+  overrides: [
+    {
+      files: 'tsconfig.json',
+      options: {
+        trailingComma: 'none',
+      },
+    },
+  ],
 };

packages/altair-app/src/app/modules/altair/components/add-collection-query-dialog/add-collection-query-dialog.component.ts

@@ -41,7 +41,7 @@ export class AddCollectionQueryDialogComponent implements OnChanges {
   newCollectionTitle = '';
   collectionId = '';
   newCollectionParentCollectionId = this.parentCollectionRootId;
-  collectionNodes: NzTreeNodeOptions[];
+  collectionNodes?: NzTreeNodeOptions[];
   workspaceId = WORKSPACES.LOCAL;
 
   constructor(private collectionService: QueryCollectionService) {}

packages/altair-app/src/app/modules/altair/components/beta-indicator/beta-indicator.component.ts

@@ -10,7 +10,7 @@ import { Observable } from 'rxjs';
   templateUrl: './beta-indicator.component.html',
   styles: [],
 })
-export class BetaIndicatorComponent implements OnInit {
+export class BetaIndicatorComponent {
   @Input() title = '';
   @Input() description = '';
 
@@ -19,9 +19,7 @@ export class BetaIndicatorComponent implements OnInit {
 
   value$: Observable<boolean>;
 
-  constructor(private store: Store<RootState>) {}
-
-  ngOnInit() {
+  constructor(private store: Store<RootState>) {
     this.value$ = this.store.select(
       (state) => !state.settings[this.getSettingKey()]
     );

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

@@ -76,7 +76,7 @@ export class CodemirrorComponent
 
   @ViewChild('ref') ref!: ElementRef<HTMLTextAreaElement>;
 
-  view: EditorView;
+  view?: EditorView;
   private value = '';
   private onTouched = () => {};
   private onChange = (s: string) => {};
@@ -108,14 +108,18 @@ export class CodemirrorComponent
   }
 
   ngOnDestroy() {
-    this.view.destroy();
+    this.view?.destroy();
   }
 
   writeValue(value: string) {
     if (value === null || value === undefined) {
       return;
     }
 
+    if (!this.view) {
+      return;
+    }
+
     const editorValue = this.view.state.doc.toString();
 
     if (editorValue !== value) {

packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-utils.ts

@@ -71,9 +71,7 @@ export class DocUtils {
   ): DocumentIndexEntry[] {
     let index: DocumentIndexEntry[] = [];
 
-    Object.keys(fields).forEach((fieldKey) => {
-      const field = fields[fieldKey];
-
+    Object.entries(fields).forEach(([fieldKey, field]) => {
       // For each field, create an entry in the index
       const fieldIndex: DocumentIndexFieldEntry = {
         search: field.name,

packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer-type/doc-viewer-type.component.ts

@@ -30,7 +30,7 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DocViewerTypeComponent {
-  @Input() data?: GraphQLNamedType;
+  @Input() data?: GraphQLNamedType | null;
   @Input() gqlSchema?: GraphQLSchema;
   @Input() sortByOption: SortByOptions = 'none';
   @Output() goToFieldChange = new EventEmitter();

packages/altair-app/src/app/modules/altair/components/doc-viewer/doc-viewer/doc-viewer.component.ts

@@ -55,8 +55,8 @@ export class DocViewerComponent implements OnChanges {
   @Output() exportSDLChange = new EventEmitter();
   @Output() loadSchemaChange = new EventEmitter();
 
-  @HostBinding('style.flex-grow') public resizeFactor: number;
-  @ViewChild('docViewer') docViewerRef: ElementRef;
+  @HostBinding('style.flex-grow') public resizeFactor?: number;
+  @ViewChild('docViewer') docViewerRef?: ElementRef;
 
   rootTypes: GraphQLObjectType[] = [];
   index: DocumentIndexEntry[] = [];
@@ -131,7 +131,9 @@ export class DocViewerComponent implements OnChanges {
 
   setDocView(docView?: DocView) {
     this.setDocViewChange.next(docView);
-    this.docViewerRef.nativeElement.scrollTop = 0;
+    if (this.docViewerRef) {
+      this.docViewerRef.nativeElement.scrollTop = 0;
+    }
   }
 
   /**

packages/altair-app/src/app/modules/altair/components/element-wrapper/element-wrapper.component.ts

@@ -19,7 +19,7 @@ export class ElementWrapperComponent implements AfterViewInit, OnChanges {
   @Input() windowId = '';
   @Input() activeWindowId = '';
 
-  @ViewChild('elRef', { static: true }) elRef: ElementRef<HTMLDivElement>;
+  @ViewChild('elRef', { static: true }) elRef?: ElementRef<HTMLDivElement>;
 
   constructor() {}
 
@@ -32,10 +32,11 @@ export class ElementWrapperComponent implements AfterViewInit, OnChanges {
   }
 
   handleRender() {
-    if (this.element) {
+    if (this.element && this.elRef) {
       if (this.windowId && this.windowId !== this.activeWindowId) {
         return;
       }
+
       this.elRef.nativeElement.appendChild(this.element);
     }
   }

packages/altair-app/src/app/modules/altair/components/environment-manager/environment-manager.component.ts

@@ -17,8 +17,9 @@ import {
 import { Extension } from '@codemirror/state';
 import { json, jsonParseLinter } from '@codemirror/lang-json';
 import { Options as SortableOptions, SortableEvent } from 'sortablejs';
+import { TODO } from 'altair-graphql-core/build/types/shared';
 (window as any).jsonlint = (window as any).jsonlint || {
-  parser: {
+  parser: <TODO>{
     parse: function (str: string) {
       try {
         return JSON.parse(str);
@@ -54,7 +55,7 @@ export class EnvironmentManagerComponent implements OnInit, OnChanges {
   @Output() deleteSubEnvironmentChange = new EventEmitter();
   @Output() repositionSubEnvironmentsChange = new EventEmitter();
 
-  @ViewChild('subEnvironmentTitle') subEnvironmentTitleEl: ElementRef;
+  @ViewChild('subEnvironmentTitle') subEnvironmentTitleEl?: ElementRef;
 
   editorExtensions: Extension[] = [
     json(),
@@ -68,10 +69,7 @@ export class EnvironmentManagerComponent implements OnInit, OnChanges {
 
   sortableOptions: SortableOptions;
 
-  ngOnInit() {
-    if (this.environments) {
-      this.selectEnvironment(this.environments.activeSubEnvironment);
-    }
+  constructor() {
     this.sortableOptions = {
       onUpdate: (event: SortableEvent) => {
         this.repositionSubEnvironmentsChange.emit({
@@ -82,6 +80,12 @@ export class EnvironmentManagerComponent implements OnInit, OnChanges {
     };
   }
 
+  ngOnInit() {
+    if (this.environments) {
+      this.selectEnvironment(this.environments.activeSubEnvironment);
+    }
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     if (changes?.environments?.currentValue) {
       this.selectEnvironment(this.selectedEnvironmentId);
@@ -133,7 +137,9 @@ export class EnvironmentManagerComponent implements OnInit, OnChanges {
   }
 
   setFocusOnEnvironmentTitle() {
-    this.subEnvironmentTitleEl.nativeElement.focus();
+    if (this.subEnvironmentTitleEl) {
+      this.subEnvironmentTitleEl.nativeElement.focus();
+    }
   }
 
   onDeleteSubEnvironment() {

packages/altair-app/src/app/modules/altair/components/fancy-input/fancy-input.component.ts

@@ -64,9 +64,9 @@ export class FancyInputComponent implements ControlValueAccessor, OnInit {
   @Output() blurChange = new EventEmitter();
   @Output() submitChange = new EventEmitter();
 
-  @ViewChild('fancyInputEl', { static: true }) fancyInputEl: ElementRef;
+  @ViewChild('fancyInputEl', { static: true }) fancyInputEl?: ElementRef;
   @ViewChild('fancyInputHighlightsEl', { static: true })
-  fancyInputHighlightsEl: ElementRef;
+  fancyInputHighlightsEl?: ElementRef;
 
   highlightData = {
     sections: [] as HighlightSection[],
@@ -122,7 +122,7 @@ export class FancyInputComponent implements ControlValueAccessor, OnInit {
   }
 
   handleInput() {
-    const val = this.fancyInputEl.nativeElement.value;
+    const val: string = this.fancyInputEl?.nativeElement?.value ?? '';
     const ranges = this.getRanges(val, VARIABLE_REGEX);
     const unstaggeredRanges = this.removeStaggeredRanges(ranges);
     const boundaries = this.getBoundaries(unstaggeredRanges);
@@ -170,7 +170,7 @@ export class FancyInputComponent implements ControlValueAccessor, OnInit {
     const ranges: Range[] = [];
     let match;
     while (((match = highlight.exec(val)), match !== null)) {
-      ranges.push([match.index, match.index + match[0].length]);
+      ranges.push([match.index, match.index + match[0]!.length]);
       if (!highlight.global) {
         // non-global regexes do not increase lastIndex, causing an infinite loop,
         // but we can just break manually after the first match
@@ -256,6 +256,9 @@ export class FancyInputComponent implements ControlValueAccessor, OnInit {
 
   updateHighlighterScroll() {
     const updateHighlighterScrollTimeout = setTimeout(() => {
+      if (!this.fancyInputHighlightsEl || !this.fancyInputEl) {
+        return;
+      }
       this.fancyInputHighlightsEl.nativeElement.scrollLeft =
         this.fancyInputEl.nativeElement.scrollLeft;
       this.fancyInputHighlightsEl.nativeElement.scrollTop =

packages/altair-app/src/app/modules/altair/components/flex-resizer/flex-resizer.component.ts

@@ -33,11 +33,11 @@ export class FlexResizerComponent implements OnInit {
   resizeElement: Element;
   resizeContainer: Element | null;
   draggingMode = false;
-  px: number;
-  py: number;
-  originalX: number;
-  originalWidth: number;
-  diffX: number;
+  px = 0;
+  py = 0;
+  originalX = 0;
+  originalWidth = 0;
+  diffX = 0;
 
   /**
    * Stores the total growth factor for all the siblings of resize element
@@ -46,14 +46,14 @@ export class FlexResizerComponent implements OnInit {
 
   throttleMs = 100;
 
-  documentMouseUp$ = fromEvent(this.document, 'mouseup');
-  documentMouseMove$ = fromEvent(this.document, 'mousemove').pipe(
+  documentMouseUp$ = fromEvent<MouseEvent>(this.document, 'mouseup');
+  documentMouseMove$ = fromEvent<MouseEvent>(this.document, 'mousemove').pipe(
     throttleTime(this.throttleMs)
   );
-  elMouseMove$ = fromEvent(this.el.nativeElement, 'mousemove').pipe(
+  elMouseMove$ = fromEvent<MouseEvent>(this.el.nativeElement, 'mousemove').pipe(
     throttleTime(this.throttleMs)
   );
-  elMouseDown$ = fromEvent(this.el.nativeElement, 'mousedown');
+  elMouseDown$ = fromEvent<MouseEvent>(this.el.nativeElement, 'mousedown');
 
   constructor(
     private el: ElementRef,
@@ -73,19 +73,19 @@ export class FlexResizerComponent implements OnInit {
     this.zone.runOutsideAngular(() => {
       this.documentMouseUp$
         .pipe(untilDestroyed(this))
-        .subscribe((evt: MouseEvent) => this.onMouseUp());
+        .subscribe((evt) => this.onMouseUp());
 
       this.documentMouseMove$
         .pipe(untilDestroyed(this))
-        .subscribe((evt: MouseEvent) => this.onResizerMove(evt));
+        .subscribe((evt) => this.onResizerMove(evt));
 
       this.elMouseMove$
         .pipe(untilDestroyed(this))
-        .subscribe((evt: MouseEvent) => this.onResizerMove(evt));
+        .subscribe((evt) => this.onResizerMove(evt));
 
       this.elMouseDown$
         .pipe(untilDestroyed(this))
-        .subscribe((evt: MouseEvent) => this.onResizerPress(evt));
+        .subscribe((evt) => this.onResizerPress(evt));
     });
   }
 

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

@@ -75,14 +75,16 @@ export class LoaderComponent implements AfterViewInit, OnChanges, OnDestroy {
     const idx = rand(0, this.tips.length - 1);
     this.currentTip = this.tips[idx];
 
-    // Compute and cache interval if not available
-    if (!this.currentTip.interval) {
-      const words = this.currentTip.text.split(' ');
-      const calculatedInterval = (words.length / WPM) * 60 * 1000;
-      this.currentTip.interval = Math.max(
-        calculatedInterval,
-        DEFAULT_TIP_INTERVAL
-      );
+    if (this.currentTip) {
+      // Compute and cache interval if not available
+      if (!this.currentTip.interval) {
+        const words = this.currentTip.text.split(' ');
+        const calculatedInterval = (words.length / WPM) * 60 * 1000;
+        this.currentTip.interval = Math.max(
+          calculatedInterval,
+          DEFAULT_TIP_INTERVAL
+        );
+      }
     }
 
     this.setupTipInterval();

packages/altair-app/src/app/modules/altair/components/plugin-manager/plugin-manager.component.ts

@@ -18,7 +18,7 @@ export class PluginManagerComponent {
   @Output() settingsJsonChange = new EventEmitter();
 
   remotePlugins$: Observable<RemotePluginListItem[]>;
-  selectedPluginItem: RemotePluginListItem;
+  selectedPluginItem?: RemotePluginListItem;
 
   shouldRestart = false;
 

packages/altair-app/src/app/modules/altair/components/query-collection-item/query-collection-item.component.spec.ts

@@ -143,9 +143,9 @@ describe('QueryCollectionItemComponent', () => {
     const queryItemTitles = wrapper.findAll(
       '[data-test-id="query-item-title"]'
     );
-    expect(queryItemTitles[0].html()).toContain('Another Query');
-    expect(queryItemTitles[1].html()).toContain('Query 1');
-    expect(queryItemTitles[2].html()).toContain('Zap Query');
+    expect(queryItemTitles[0]!.html()).toContain('Another Query');
+    expect(queryItemTitles[1]!.html()).toContain('Query 1');
+    expect(queryItemTitles[2]!.html()).toContain('Zap Query');
   });
 
   it('should sort rendered queries when sortBy (z-a) is clicked', async () => {
@@ -157,9 +157,9 @@ describe('QueryCollectionItemComponent', () => {
     const queryItemTitles =