HParams: Add redux logic for making the runs table full screen (#6432)

## Motivation for features / changes
Once we have added a bunch of more columns to the runs table we foresee
users wanting to make the table full screen.

## Technical description of changes
* I am not adding a test for the selector given it has no logic. This is
as per a previous offline discussion
* It will not be possible to drag the runs table to full screen with
this implementation, but if we decide to add support for that, it should
be fairly simple.

Author: rileyajones

tensorboard/webapp/core/actions/core_actions.ts

@@ -93,3 +93,7 @@ export const sideBarWidthChanged = createAction(
   '[Core] Side Bar Width Changed',
   props<{widthInPercent: number}>()
 );
+
+export const runsTableFullScreenToggled = createAction(
+  '[Core] Runs Table Full Screen Toggled'
+);

tensorboard/webapp/core/store/core_reducers.ts

@@ -167,6 +167,12 @@ const reducer = createReducer(
     }
 
     return nextState;
+  }),
+  on(actions.runsTableFullScreenToggled, (state) => {
+    return {
+      ...state,
+      runsTableFullScreen: !state.runsTableFullScreen,
+    };
   })
 );
 

tensorboard/webapp/core/store/core_reducers_test.ts

@@ -15,6 +15,7 @@ limitations under the License.
 import {persistentSettingsLoaded} from '../../persistent_settings';
 import {DataLoadState} from '../../types/data';
 import * as actions from '../actions';
+import {runsTableFullScreenToggled} from '../actions';
 import {
   buildPluginMetadata,
   createCoreState,
@@ -643,4 +644,17 @@ describe('core reducer', () => {
       expect(state4.sideBarWidthInPercent).toBe(0);
     });
   });
+
+  describe('#runsTableFullScreenToggled', () => {
+    it('toggles runsTableFullScreen attribute', () => {
+      const state = createCoreState({
+        runsTableFullScreen: false,
+      });
+      const state2 = reducers(state, runsTableFullScreenToggled());
+      const state3 = reducers(state2, runsTableFullScreenToggled());
+
+      expect(state2.runsTableFullScreen).toBeTrue();
+      expect(state3.runsTableFullScreen).toBeFalse();
+    });
+  });
 });

tensorboard/webapp/core/store/core_selectors.ts

@@ -74,3 +74,10 @@ export const getSideBarWidthInPercent = createSelector(
     return state.sideBarWidthInPercent;
   }
 );
+
+export const getRunsTableFullScreen = createSelector(
+  selectCoreState,
+  (state: CoreState): boolean => {
+    return state.runsTableFullScreen;
+  }
+);

tensorboard/webapp/core/store/core_types.ts

@@ -38,6 +38,8 @@ export interface CoreState {
   polymerInteropRunSelection: Set<RunId>;
   // Number between 0 and 100.
   sideBarWidthInPercent: number;
+  // Whether the runs table should occupy the full screen.
+  runsTableFullScreen: boolean;
 }
 
 /*
@@ -99,4 +101,5 @@ export const initialState: CoreState = {
   polymerInteropRuns: [],
   polymerInteropRunSelection: new Set(),
   sideBarWidthInPercent: 20,
+  runsTableFullScreen: false,
 };

tensorboard/webapp/core/testing/index.ts

@@ -72,6 +72,7 @@ export function createCoreState(override?: Partial<CoreState>): CoreState {
     polymerInteropRuns: [],
     polymerInteropRunSelection: new Set(),
     sideBarWidthInPercent: 0,
+    runsTableFullScreen: false,
     ...override,
   };
 }