Linked Time: Conditionally remove fob deselect button (#6016)

* Motivation for features / changes
It does not make sense for a prospective fob to have a deselect button

* Technical description of changes
Add a prop to the card fob component which controls the appearance of
the deselect button.

* Screenshots of UI changes
None

* Detailed steps to verify changes work correctly (as executed by you)
There should be no changes.

Author: rileyajones

tensorboard/webapp/widgets/card_fob/card_fob_component.ng.html

@@ -27,7 +27,11 @@
     (keydown.enter)="stepTyped($event)"
     (keydown.shift.enter)="$event.preventDefault()"
   ></span>
-  <button aria-label="Deselect fob" (click)="fobRemoved.emit()">
+  <button
+    *ngIf="allowRemoval"
+    aria-label="Deselect fob"
+    (click)="fobRemoved.emit()"
+  >
     <mat-icon svgIcon="close_24px"></mat-icon>
   </button>
 </div>

tensorboard/webapp/widgets/card_fob/card_fob_component.ts

@@ -36,6 +36,8 @@ export class CardFobComponent {
 
   @Input() step!: number;
 
+  @Input() allowRemoval?: boolean = true;
+
   @Output() stepChanged = new EventEmitter<number | null>();
   @Output() fobRemoved = new EventEmitter();
 

tensorboard/webapp/widgets/card_fob/card_fob_test.ts

@@ -26,6 +26,7 @@ import {AxisDirection} from './card_fob_types';
       #Fob
       [axisDirection]="axisDirection"
       [step]="step"
+      [allowRemoval]="allowRemoval"
       (stepChanged)="stepChanged($event)"
     ></card-fob>
   `,
@@ -36,6 +37,7 @@ class TestableFobComponent {
 
   @Input() step!: number;
   @Input() axisDirection!: AxisDirection;
+  @Input() allowRemoval: boolean = true;
 
   @Input() stepChanged!: (newStep: number) => void;
 }
@@ -52,13 +54,17 @@ describe('card fob', () => {
 
   function createFobComponent(input: {
     step?: number;
+    allowRemoval?: boolean;
     axisDirection?: AxisDirection;
   }): ComponentFixture<TestableFobComponent> {
     const fixture = TestBed.createComponent(TestableFobComponent);
     fixture.componentInstance.step = input.step ? input.step : 1;
     fixture.componentInstance.axisDirection = input.axisDirection
       ? input.axisDirection
       : AxisDirection.HORIZONTAL;
+    if (input.allowRemoval !== undefined) {
+      fixture.componentInstance.allowRemoval = input.allowRemoval;
+    }
 
     stepChangedSpy = jasmine.createSpy();
     fixture.componentInstance.stepChanged = stepChangedSpy;
@@ -74,6 +80,14 @@ describe('card fob', () => {
     expect(stepSpan.nativeElement.innerText).toBe('3');
   });
 
+  it('does not render deselect button when allowRemoval is false', () => {
+    const fixture = createFobComponent({
+      allowRemoval: false,
+    });
+    fixture.detectChanges();
+    expect(fixture.debugElement.query(By.css('button'))).toBeNull();
+  });
+
   it('emits stepChange when pressing enter key', () => {
     const fixture = createFobComponent({});
     fixture.detectChanges();