Feature Flag: add feature flag for card width setting (tensorflow#5422)

Author: japie1235813

tensorboard/webapp/feature_flag/store/feature_flag_selectors.ts

@@ -116,3 +116,10 @@ export const getIsTimeSeriesPromotionEnabled = createSelector(
     return flags.enableTimeSeriesPromotion;
   }
 );
+
+export const getEnabledCardWidthSetting = createSelector(
+  getFeatureFlags,
+  (flags: FeatureFlags): boolean => {
+    return flags.enabledCardWidthSetting;
+  }
+);

tensorboard/webapp/feature_flag/store/feature_flag_selectors_test.ts

@@ -315,4 +315,29 @@ describe('feature_flag_selectors', () => {
       expect(selectors.getIsTimeSeriesPromotionEnabled(state)).toEqual(true);
     });
   });
+
+  describe('#getEnabledCardWidthSetting', () => {
+    it('returns the proper value', () => {
+      let state = buildState(
+        buildFeatureFlagState({
+          defaultFlags: buildFeatureFlag({
+            enabledCardWidthSetting: false,
+          }),
+        })
+      );
+      expect(selectors.getEnabledCardWidthSetting(state)).toEqual(false);
+
+      state = buildState(
+        buildFeatureFlagState({
+          defaultFlags: buildFeatureFlag({
+            enabledCardWidthSetting: false,
+          }),
+          flagOverrides: {
+            enabledCardWidthSetting: true,
+          },
+        })
+      );
+      expect(selectors.getEnabledCardWidthSetting(state)).toEqual(true);
+    });
+  });
 });

tensorboard/webapp/feature_flag/store/feature_flag_store_config_provider.ts

@@ -31,6 +31,7 @@ export const initialState: FeatureFlagState = {
     metricsImageSupportEnabled: true,
     enabledLinkedTime: false,
     enableTimeSeriesPromotion: false,
+    enabledCardWidthSetting: false,
   },
   flagOverrides: {},
 };

tensorboard/webapp/feature_flag/testing.ts

@@ -30,6 +30,7 @@ export function buildFeatureFlag(
     metricsImageSupportEnabled: true,
     enabledLinkedTime: false,
     enableTimeSeriesPromotion: false,
+    enabledCardWidthSetting: false,
     ...override,
   };
 }

tensorboard/webapp/feature_flag/types.ts

@@ -45,4 +45,6 @@ export interface FeatureFlags {
   enabledLinkedTime: boolean;
   // Whether to enable TimeSeries promotion butter bar.
   enableTimeSeriesPromotion: boolean;
+  // Whether to enable card width adjustment on the right panle.
+  enabledCardWidthSetting: boolean;
 }

tensorboard/webapp/webapp_data_source/tb_feature_flag_data_source.ts

@@ -16,6 +16,7 @@ import {Injectable} from '@angular/core';
 
 import {FeatureFlags} from '../feature_flag/types';
 import {
+  ENABLE_CARD_WIDTH_SETTING_PARAM_KEY,
   ENABLE_COLOR_GROUP_BY_REGEX_QUERY_PARAM_KEY,
   ENABLE_COLOR_GROUP_QUERY_PARAM_KEY,
   ENABLE_DARK_MODE_QUERY_PARAM_KEY,
@@ -79,6 +80,11 @@ export class QueryParamsFeatureFlagDataSource
         params.get(ENABLE_LINK_TIME_PARAM_KEY) !== 'false';
     }
 
+    if (params.has(ENABLE_CARD_WIDTH_SETTING_PARAM_KEY)) {
+      featureFlags.enabledCardWidthSetting =
+        params.get(ENABLE_CARD_WIDTH_SETTING_PARAM_KEY) !== 'false';
+    }
+
     return featureFlags;
   }
 

tensorboard/webapp/webapp_data_source/tb_feature_flag_data_source_test.ts

@@ -140,6 +140,28 @@ describe('tb_feature_flag_data_source', () => {
         });
       });
 
+      it('returns enableCardWidthSetting from the query params', () => {
+        getParamsSpy.and.returnValues(
+          new URLSearchParams('enableCardWidthSetting=false'),
+          new URLSearchParams('enableCardWidthSetting='),
+          new URLSearchParams('enableCardWidthSetting=true'),
+          new URLSearchParams('enableCardWidthSetting=foo')
+        );
+
+        expect(dataSource.getFeatures()).toEqual({
+          enabledCardWidthSetting: false,
+        });
+        expect(dataSource.getFeatures()).toEqual({
+          enabledCardWidthSetting: true,
+        });
+        expect(dataSource.getFeatures()).toEqual({
+          enabledCardWidthSetting: true,
+        });
+        expect(dataSource.getFeatures()).toEqual({
+          enabledCardWidthSetting: true,
+        });
+      });
+
       it('returns all flag values when they are all set', () => {
         getParamsSpy.and.returnValue(
           new URLSearchParams(

tensorboard/webapp/webapp_data_source/tb_feature_flag_data_source_types.ts

@@ -35,6 +35,8 @@ export const EXPERIMENTAL_PLUGIN_QUERY_PARAM_KEY = 'experimentalPlugin';
 
 export const SCALARS_BATCH_SIZE_PARAM_KEY = 'scalarsBatchSize';
 
+export const ENABLE_CARD_WIDTH_SETTING_PARAM_KEY = 'enableCardWidthSetting';
+
 export const ENABLE_COLOR_GROUP_QUERY_PARAM_KEY = 'enableColorGroup';
 
 export const ENABLE_COLOR_GROUP_BY_REGEX_QUERY_PARAM_KEY =