HParam UI: reset ColumnHeaders if using obsolete interface (#6358)

## Motivation for features / changes
In #6346 we updated the ColumnHeader interface. However, objects using
this interface are stored in localStorage. This checks localStorage to
ensure it has the new interface. If it does not then it ignores those
values.

## Technical description of changes
I am simply checking if the first value has the name property to ensure
the values are valid. I could do a more thorough check but it seems
unnecessary.

## Detailed steps to verify changes work correctly (as executed by you)
It worked for me when running locally.

Author: JamesHollyer

tensorboard/webapp/persistent_settings/_data_source/persistent_settings_data_source.ts

@@ -209,15 +209,17 @@ export class OSSSettingsConverter extends SettingsConverter<
     }
 
     if (
-      backendSettings.hasOwnProperty('singleSelectionHeaders') &&
-      typeof backendSettings.singleSelectionHeaders === 'object'
+      Array.isArray(backendSettings.singleSelectionHeaders) &&
+      // If the settings stored in the backend are invalid, reset back to default.
+      backendSettings.singleSelectionHeaders[0].name !== undefined
     ) {
       settings.singleSelectionHeaders = backendSettings.singleSelectionHeaders;
     }
 
     if (
-      backendSettings.hasOwnProperty('rangeSelectionHeaders') &&
-      typeof backendSettings.rangeSelectionHeaders === 'object'
+      Array.isArray(backendSettings.rangeSelectionHeaders) &&
+      // If the settings stored in the backend are invalid, reset back to default.
+      backendSettings.rangeSelectionHeaders[0].name !== undefined
     ) {
       settings.rangeSelectionHeaders = backendSettings.rangeSelectionHeaders;
     }

tensorboard/webapp/persistent_settings/_data_source/persistent_settings_data_source_test.ts

@@ -261,6 +261,48 @@ describe('persistent_settings data_source test', () => {
           ],
         });
       });
+
+      it('resets singleSelectionEnabled if old ColumnHeader is stored', async () => {
+        getItemSpy.withArgs(TEST_ONLY.GLOBAL_LOCAL_STORAGE_KEY).and.returnValue(
+          JSON.stringify({
+            singleSelectionHeaders: [
+              {
+                type: ColumnHeaderType.RUN,
+                enabled: true,
+              },
+              {
+                type: ColumnHeaderType.VALUE,
+                enabled: false,
+              },
+            ],
+          })
+        );
+
+        const actual = await firstValueFrom(dataSource.getSettings());
+
+        expect(actual).toEqual({});
+      });
+
+      it('resets rangeSelectionEnabled if old ColumnHeader is stored', async () => {
+        getItemSpy.withArgs(TEST_ONLY.GLOBAL_LOCAL_STORAGE_KEY).and.returnValue(
+          JSON.stringify({
+            rangeSelectionHeaders: [
+              {
+                type: ColumnHeaderType.RUN,
+                enabled: true,
+              },
+              {
+                type: ColumnHeaderType.MIN_VALUE,
+                enabled: true,
+              },
+            ],
+          })
+        );
+
+        const actual = await firstValueFrom(dataSource.getSettings());
+
+        expect(actual).toEqual({});
+      });
     });
 
     describe('#setSettings', () => {