Column Customization: Fix up settings button (#6306)

* Motivation for features / changes
Fixes up the button in settings which opens the editor. This change
makes it an actual button with an edit icon. It also adds some
functionality to highlight the button when the editor is open.

![2023-04-14_12-37-31
(1)](https://user-images.githubusercontent.com/8672809/232139904-fd6337b8-ee8e-424e-93c6-1496c0408675.gif)

Author: JamesHollyer

tensorboard/webapp/metrics/views/right_pane/right_pane_test.ts

@@ -556,30 +556,26 @@ describe('metrics right_pane', () => {
             );
           });
 
-          it('renders left cheron when slideout is closed', () => {
+          it('renders without toggle-opened class when slideout is closed', () => {
             store.overrideSelector(selectors.isMetricsSlideoutMenuOpen, false);
             const fixture = TestBed.createComponent(SettingsViewContainer);
             fixture.detectChanges();
 
             expect(
-              fixture.debugElement
-                .query(By.css('.column-edit-menu-toggle'))
-                .query(By.css('mat-icon'))
-                .nativeElement.getAttribute('svgIcon')
-            ).toBe('chevron_left_24px');
+              fixture.debugElement.query(By.css('.column-edit-menu-toggle'))
+                .nativeElement
+            ).not.toHaveClass('toggle-opened');
           });
 
-          it('renders right cheron when slideout is open', () => {
+          it('renders with toggle-opened class when slideout is open', () => {
             store.overrideSelector(selectors.isMetricsSlideoutMenuOpen, true);
             const fixture = TestBed.createComponent(SettingsViewContainer);
             fixture.detectChanges();
 
             expect(
-              fixture.debugElement
-                .query(By.css('.column-edit-menu-toggle'))
-                .query(By.css('mat-icon'))
-                .nativeElement.getAttribute('svgIcon')
-            ).toBe('chevron_right_24px');
+              fixture.debugElement.query(By.css('.column-edit-menu-toggle'))
+                .nativeElement
+            ).toHaveClass('toggle-opened');
           });
         });
       });

tensorboard/webapp/metrics/views/right_pane/settings_view_component.ng.html

@@ -58,21 +58,15 @@ <h3 class="section-title">General</h3>
         >Link by step {{getLinkedTimeSelectionStartStep()}}
       </mat-checkbox>
     </div>
-    <div
+    <button
+      mat-button
       *ngIf="isScalarColumnCustomizationEnabled"
-      class="column-edit-menu-toggle"
+      [ngClass]="{'column-edit-menu-toggle':true, 'toggle-opened': isSlideOutMenuOpen}"
       (click)="onSlideOutToggled.emit()"
     >
-      <mat-icon
-        *ngIf="!isSlideOutMenuOpen"
-        svgIcon="chevron_left_24px"
-      ></mat-icon>
-      <mat-icon
-        *ngIf="isSlideOutMenuOpen"
-        svgIcon="chevron_right_24px"
-      ></mat-icon>
-      Open Column Edit Control
-    </div>
+      <mat-icon svgIcon="edit_24px"></mat-icon>
+      Edit Table Columns
+    </button>
   </div>
 
   <div class="control-row card-width">

tensorboard/webapp/metrics/views/right_pane/settings_view_component.scss

@@ -101,9 +101,23 @@ mat-slider {
   align-items: center;
   display: flex;
   cursor: pointer;
+  font-size: inherit;
+  height: 28px;
+  padding-left: 5px;
+  padding-right: 12px;
+  &.mat-button-wrapper {
+    display: inline-flex;
+    align-items: center;
+  }
+  &.toggle-opened {
+    background-color: mat.get-color-from-palette(mat.$grey-palette, 200);
+    @include tb-dark-theme {
+      background-color: mat.get-color-from-palette(mat.$grey-palette, 800);
+    }
+  }
   mat-icon {
-    height: 15px;
     width: 15px;
+    margin-right: 6px;
   }
 }