Show view switcher in the control bar under CLL on graph experiment.

PiperOrigin-RevId: 740735248

Author: Googler

src/app/scuba_goldens/toolbar/chrome-linux/renders_correctly.png

@@ -1,6 +1,9 @@
 <nav [ngClass]="['toolbar', graphState]">
   <ng-container *ngFor="let customToggleTemplate of leftAlignedCustomToolbarToggleTemplates">
-    <div class="cell toggler">
+    <div
+      class="cell toggler"
+      [class.flex]="customToggleTemplate == fillerCustomToolbarToggleTemplate"
+    >
       <ng-container
         *ngTemplateOutlet="customToggleTemplate; context: {
           nodes,
@@ -9,7 +12,7 @@
       ></ng-container>
     </div>
   </ng-container>
-  <div *ngIf="rightAlignMainControls" class="flex"></div>
+  <div *ngIf="fillerCustomToolbarToggleTemplate == null && rightAlignMainControls" class="flex"></div>
   <ng-container *ngVar="labelGenerator(this, 'graphState') as label">
     <div class="cell state" *ngIf="label !== false">
       <workflow-graph-icon icon="info"></workflow-graph-icon>
@@ -138,7 +141,10 @@
     </button>
   </div>
   <ng-container *ngFor="let customToggleTemplate of customToolbarToggleTemplates">
-    <div class="cell toggler">
+    <div
+      class="cell toggler"
+      [class.flex]="customToggleTemplate == fillerCustomToolbarToggleTemplate"
+    >
       <ng-container
         *ngTemplateOutlet="customToggleTemplate; context: {
           nodes,
@@ -147,9 +153,12 @@
       ></ng-container>
     </div>
   </ng-container>
-  <div *ngIf="!rightAlignMainControls" class="flex"></div>
+  <div *ngIf="fillerCustomToolbarToggleTemplate == null && !rightAlignMainControls" class="flex"></div>
   <ng-container *ngFor="let customToggleTemplate of rightAlignedCustomToolbarToggleTemplates">
-    <div class="cell toggler">
+    <div
+      class="cell toggler"
+      [class.flex]="customToggleTemplate == fillerCustomToolbarToggleTemplate"
+    >
       <ng-container *ngTemplateOutlet="customToggleTemplate; context: {
         nodes,
         groups

src/app/scuba_goldens/toolbar/chrome-linux/renders_correctly_with_filler_template.png

@@ -86,6 +86,17 @@ describe('DagToolbar', () => {
       });
     });
 
+    describe('With filler template', () => {
+      beforeEach(fakeAsync(() => {
+        fixture.componentInstance.enableFillerTemplate();
+        fixture.detectChanges();
+      }));
+
+      it('Renders correctly (screenshot)', async () => {
+        await screenShot.expectMatch('renders_correctly_with_filler_template');
+      });
+    });
+
     it('Calculated node states correctly', () => {
       expect(toolbar.graphState).toBe('Runtime');
       expect(toolbar.completedSteps).toBe(1);
@@ -158,33 +169,53 @@ describe('DagToolbar', () => {
         [nodes]="nodes" [expanded]="true"
         [rightAlignedCustomToolbarToggleTemplates]="rightAlignedTemplates"
         [features]="features"
+        [fillerCustomToolbarToggleTemplate]="fillerTemplate"
       ></ai-dag-toolbar>
     </div>
     <ng-template #rightAlignedTemplate>
       <button id="rightButton"> Click me</button>
+    </ng-template>
+    <ng-template #rectangleTemplate>
+      <div class="rectangle"></div>
     </ng-template>`,
   providers: [
     //  STATE_SERVICE_PROVIDER,
   ],
   styles: [`
     .container {
-      height: 400px;
-      width: 400px;
+      height: 100px;
+      width: 1200px;
+      background-color: gray;
+    }
+    .rectangle {
+      background-color: red;
+      min-width: 50px;
+      flex-grow: 1;
+      height: 30px;
     }`],
+
   // TODO: Make this AOT compatible. See b/352713444
   jit: true,
-
 })
 class TestComponent {
   @ViewChild('dagToolbar', {static: false}) dagToolbar!: DagToolbar;
   nodes: DagNode[] = FAKE_DATA;
   @ViewChild('rightAlignedTemplate', {static: false})
   rightAlignedTemplate?: TemplateRef<{}>;
+  @ViewChild('rectangleTemplate', {static: false})
+  rectangleTemplate?: TemplateRef<{}>;
 
   rightAlignedTemplates: Array<TemplateRef<{}>> = [];
 
+  fillerTemplate: TemplateRef<{}>|null = null;
+
+  enableFillerTemplate() {
+    this.fillerTemplate = this.rectangleTemplate!;
+  }
+
   ngAfterViewInit() {
     this.rightAlignedTemplates.push(this.rightAlignedTemplate!);
+    this.rightAlignedTemplates.push(this.rectangleTemplate!);
   }
 
   features = {...defaultFeatures, enableShortcuts: true};

src/app/toolbar.ng.html

@@ -134,6 +134,7 @@ export class DagToolbar {
   private $customToolbarToggleTemplates: TemplateRef<any>[] = [];
   private $leftAlignedCustomToolbarToggleTemplates: TemplateRef<any>[] = [];
   private $rightAlignedCustomToolbarToggleTemplates: TemplateRef<any>[] = [];
+  private $fillerCustomToolbarToggleTemplate: TemplateRef<any>|null = null;
 
   @Input() enableMinimap = true;
   @Output() enableMinimapChange = new EventEmitter();
@@ -222,6 +223,15 @@ export class DagToolbar {
     return this.$rightAlignedCustomToolbarToggleTemplates;
   }
 
+  @Input('fillerCustomToolbarToggleTemplate')
+  set fillerCustomToolbarToggleTemplate(template: TemplateRef<any>|null) {
+    this.$fillerCustomToolbarToggleTemplate = template;
+    this.cdr.detectChanges();
+  }
+  get fillerCustomToolbarToggleTemplate() {
+    return this.$fillerCustomToolbarToggleTemplate;
+  }
+
   constructor(
       private readonly cdr: ChangeDetectorRef,
       private readonly dialog: MatDialog,