refactor: clean up deprecated uses of combineLatest (#17168)

The signature of `combineLatest` that uses individual parameters has been deprecated. These changes switch to the new recommended way which passes in the observables as an array.

(cherry picked from commit 3961544)

Author: crisbeto

src/cdk-experimental/popover-edit/edit-event-dispatcher.ts

@@ -82,13 +82,13 @@ export class EditEventDispatcher {
   );
 
   /** An observable that emits the row containing focus or an active edit. */
-  readonly editingOrFocused = combineLatest(
+  readonly editingOrFocused = combineLatest([
       this.editing.pipe(
           map(cell => closest(cell, ROW_SELECTOR)),
           this._startWithNull,
       ),
       this.focused.pipe(this._startWithNull),
-  ).pipe(
+  ]).pipe(
       map(([editingRow, focusedRow]) => focusedRow || editingRow),
       this._distinctUntilChanged as MonoTypeOperatorFunction<Element|null>,
       auditTime(FOCUS_DELAY), // Use audit to skip over blur events to the next focused element.
@@ -103,7 +103,7 @@ export class EditEventDispatcher {
   private _currentlyEditing: Element|null = null;
 
   /** The combined set of row hover content states organized by row. */
-  private readonly _hoveredContentStateDistinct = combineLatest(
+  private readonly _hoveredContentStateDistinct = combineLatest([
       this._getFirstRowWithHoverContent(),
       this._getLastRowWithHoverContent(),
       this.editingOrFocused,
@@ -116,7 +116,7 @@ export class EditEventDispatcher {
           ),
           this._startWithNullDistinct,
       ),
-  ).pipe(
+  ]).pipe(
       skip(1), // Skip the initial emission of [null, null, null, null].
       map(computeHoverContentState),
       distinctUntilChanged(areMapEntriesEqual),

src/cdk/table/table.spec.ts

@@ -1396,7 +1396,7 @@ class FakeDataSource extends DataSource<TestData> {
 
   connect(collectionViewer: CollectionViewer) {
     this.isConnected = true;
-    return combineLatest(this._dataChange, collectionViewer.viewChange)
+    return combineLatest([this._dataChange, collectionViewer.viewChange])
       .pipe(map(data => data[0]));
   }
 

src/cdk/tree/tree.spec.ts

@@ -1010,7 +1010,7 @@ class FakeDataSource extends DataSource<TestData> {
   connect(collectionViewer: CollectionViewer): Observable<TestData[]> {
     this.isConnected = true;
 
-    return combineLatest(this._dataChange, collectionViewer.viewChange).pipe(map(([data]) => {
+    return combineLatest([this._dataChange, collectionViewer.viewChange]).pipe(map(([data]) => {
       this.treeControl.dataNodes = data;
       return data;
     }));

src/google-maps/google-map/google-map.ts

@@ -398,7 +398,7 @@ export class GoogleMap implements OnChanges, OnInit, AfterContentInit, OnDestroy
 
   /** Combines the center and zoom and the other map options into a single object */
   private _combineOptions(): Observable<google.maps.MapOptions> {
-    return combineLatest(this._options, this._center, this._zoom)
+    return combineLatest([this._options, this._center, this._zoom])
         .pipe(map(([options, center, zoom]) => {
           const combinedOptions: google.maps.MapOptions = {
             ...options,
@@ -420,7 +420,7 @@ export class GoogleMap implements OnChanges, OnInit, AfterContentInit, OnDestroy
 
   private _watchForOptionsChanges(
       optionsChanges: Observable<google.maps.MapOptions>) {
-    combineLatest(this._googleMapChanges, optionsChanges)
+    combineLatest([this._googleMapChanges, optionsChanges])
         .pipe(takeUntil(this._destroy))
         .subscribe(([googleMap, options]) => {
           googleMap.setOptions(options);

src/google-maps/map-marker/map-marker.ts

@@ -338,8 +338,9 @@ export class MapMarker implements OnInit, OnDestroy {
   }
 
   private _combineOptions(): Observable<google.maps.MarkerOptions> {
-    return combineLatest(
-               this._options, this._title, this._position, this._label, this._clickable, this._map)
+    return combineLatest([
+          this._options, this._title, this._position, this._label, this._clickable, this._map
+        ])
         .pipe(map(([options, title, position, label, clickable, googleMap]) => {
           const combinedOptions: google.maps.MarkerOptions = {
             ...options,

src/material/table/table-data-source.ts

@@ -228,13 +228,13 @@ export class MatTableDataSource<T> extends DataSource<T> {
         observableOf(null);
     const dataStream = this._data;
     // Watch for base data or filter changes to provide a filtered set of data.
-    const filteredData = combineLatest(dataStream, this._filter)
+    const filteredData = combineLatest([dataStream, this._filter])
       .pipe(map(([data]) => this._filterData(data)));
     // Watch for filtered data or sort changes to provide an ordered set of data.
-    const orderedData = combineLatest(filteredData, sortChange)
+    const orderedData = combineLatest([filteredData, sortChange])
       .pipe(map(([data]) => this._orderData(data)));
     // Watch for ordered data or page changes to provide a paged set of data.
-    const paginatedData = combineLatest(orderedData, pageChange)
+    const paginatedData = combineLatest([orderedData, pageChange])
       .pipe(map(([data]) => this._pageData(data)));
     // Watched for paged data changes and send the result to the table to render.
     this._renderChangesSubscription.unsubscribe();

src/youtube-player/youtube-player.ts

@@ -382,7 +382,7 @@ function bindSizeToPlayer(
   widthObs: Observable<number>,
   heightObs: Observable<number>
 ) {
-  return combineLatest(playerObs, widthObs, heightObs)
+  return combineLatest([playerObs, widthObs, heightObs])
       .subscribe(([player, width, height]) => player && player.setSize(width, height));
 }
 
@@ -391,10 +391,10 @@ function bindSuggestedQualityToPlayer(
   playerObs: Observable<YT.Player | undefined>,
   suggestedQualityObs: Observable<YT.SuggestedVideoQuality | undefined>
 ) {
-  return combineLatest(
+  return combineLatest([
     playerObs,
     suggestedQualityObs
-  ).subscribe(
+  ]).subscribe(
     ([player, suggestedQuality]) =>
         player && suggestedQuality && player.setPlaybackQuality(suggestedQuality));
 }
@@ -452,11 +452,11 @@ function createPlayerObservable(
   const playerOptions =
     videoIdObs
     .pipe(
-      withLatestFrom(combineLatest(widthObs, heightObs)),
+      withLatestFrom(combineLatest([widthObs, heightObs])),
       map(([videoId, [width, height]]) => videoId ? ({videoId, width, height, events}) : undefined),
     );
 
-  return combineLatest(youtubeContainer, playerOptions)
+  return combineLatest([youtubeContainer, playerOptions])
       .pipe(
         skipUntilRememberLatest(iframeApiAvailableObs),
         scan(syncPlayerState, undefined),
@@ -505,7 +505,7 @@ function bindCueVideoCall(
   suggestedQualityObs: Observable<YT.SuggestedVideoQuality | undefined>,
   destroyed: Observable<undefined>,
 ) {
-  const cueOptionsObs = combineLatest(startSecondsObs, endSecondsObs)
+  const cueOptionsObs = combineLatest([startSecondsObs, endSecondsObs])
     .pipe(map(([startSeconds, endSeconds]) => ({startSeconds, endSeconds})));
 
   // Only respond to changes in cue options if the player is not running.
@@ -520,14 +520,14 @@ function bindCueVideoCall(
   // If the player changed, there's no reason to run 'cue' unless there are cue options.
   const changedPlayer = playerObs.pipe(
     filterOnOther(
-      combineLatest(videoIdObs, cueOptionsObs),
+      combineLatest([videoIdObs, cueOptionsObs]),
       ([videoId, cueOptions], player) =>
           !!player &&
             (videoId != player.videoId || !!cueOptions.startSeconds || !!cueOptions.endSeconds)));
 
   merge(changedPlayer, changedVideoId, filteredCueOptions)
     .pipe(
-      withLatestFrom(combineLatest(playerObs, videoIdObs, cueOptionsObs, suggestedQualityObs)),
+      withLatestFrom(combineLatest([playerObs, videoIdObs, cueOptionsObs, suggestedQualityObs])),
       map(([_, values]) => values),
       takeUntil(destroyed),
     )