Table use local storage for columns (#1265)

* feat: use local storage to persist table columns

* fix: typo

* style: lint

* style: prettier

Author: jake-bassett

projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts

@@ -124,11 +124,6 @@ import { TableWidgetModel } from './table-widget.model';
 export class TableWidgetRendererComponent
   extends WidgetRenderer<TableWidgetBaseModel, TableDataSource<TableRow> | undefined>
   implements OnInit {
-  private static readonly DEFAULT_PREFERENCES: TableWidgetPreferences = {
-    columns: [],
-    checkboxes: []
-  };
-
   private static readonly DEFAULT_TAB_INDEX: number = 0;
 
   public viewItems: ToggleItem<string>[] = [];
@@ -228,7 +223,7 @@ export class TableWidgetRendererComponent
   }
 
   private getSelectControls(changed?: TableSelectControl): Observable<TableSelectControl[]> {
-    return this.getPreferences().pipe(
+    return this.getSessionPreferences().pipe(
       take(1),
       switchMap(preferences =>
         forkJoinSafeEmpty(
@@ -300,7 +295,7 @@ export class TableWidgetRendererComponent
   }
 
   private getColumnConfigs(): Observable<TableColumnConfig[]> {
-    return this.getPreferences().pipe(
+    return this.getLocalPreferences().pipe(
       switchMap(preferences =>
         combineLatest([this.getScope(), this.api.change$.pipe(mapTo(true), startWith(true))]).pipe(
           switchMap(([scope]) => this.model.getColumns(scope)),
@@ -366,8 +361,8 @@ export class TableWidgetRendererComponent
 
   private updateSelectionPreferences(tableSelectControls: TableSelectControl[]): void {
     if (isNonEmptyString(this.model.getId())) {
-      this.getPreferences().subscribe(preferences =>
-        this.setPreferences({
+      this.getSessionPreferences().subscribe(preferences =>
+        this.setSessionPreferences({
           ...preferences,
           selections: tableSelectControls
         })
@@ -401,8 +396,8 @@ export class TableWidgetRendererComponent
 
   private updateCheckboxPreferences(tableCheckboxControls: TableCheckboxControl[]): void {
     if (isNonEmptyString(this.model.getId())) {
-      this.getPreferences().subscribe(preferences =>
-        this.setPreferences({
+      this.getSessionPreferences().subscribe(preferences =>
+        this.setSessionPreferences({
           ...preferences,
           checkboxes: tableCheckboxControls
         })
@@ -411,7 +406,7 @@ export class TableWidgetRendererComponent
   }
 
   private getCheckboxControls(changed?: TableCheckboxChange): Observable<TableCheckboxControl[]> {
-    return this.getPreferences().pipe(
+    return this.getSessionPreferences().pipe(
       switchMap(preferences =>
         forkJoinSafeEmpty(
           this.model
@@ -484,8 +479,8 @@ export class TableWidgetRendererComponent
 
   public onColumnsChange(columns: TableColumnConfig[]): void {
     if (isNonEmptyString(this.model.getId())) {
-      this.getPreferences().subscribe(preferences =>
-        this.setPreferences({
+      this.getLocalPreferences().subscribe(preferences =>
+        this.setLocalPreferences({
           ...preferences,
           columns: columns.map(column => this.dehydratePersistedColumnConfig(column))
         })
@@ -500,7 +495,7 @@ export class TableWidgetRendererComponent
   public onRowSelection(selections: StatefulTableRow[]): void {
     this.selectedRows = selections;
     /**
-     * Todo: Stich this with selection handlers
+     * Todo: Stitch this with selection handlers
      */
   }
 
@@ -552,27 +547,39 @@ export class TableWidgetRendererComponent
 
   private getViewPreferences(): Observable<TableWidgetViewPreferences> {
     return isNonEmptyString(this.model.viewId)
-      ? this.preferenceService.get<TableWidgetViewPreferences>(this.model.viewId, {}, StorageType.Session).pipe(first())
+      ? this.preferenceService.get<TableWidgetViewPreferences>(this.model.viewId, {}, StorageType.Local).pipe(first())
       : of({});
   }
 
   private setViewPreferences(preferences: TableWidgetViewPreferences): void {
     if (isNonEmptyString(this.model.viewId)) {
-      this.preferenceService.set(this.model.viewId, preferences, StorageType.Session);
+      this.preferenceService.set(this.model.viewId, preferences, StorageType.Local);
+    }
+  }
+
+  private getLocalPreferences(): Observable<TableWidgetLocalPreferences> {
+    return isNonEmptyString(this.model.getId())
+      ? this.preferenceService
+          .get<TableWidgetLocalPreferences>(this.model.getId()!, {}, StorageType.Local)
+          .pipe(first())
+      : of({});
+  }
+
+  private setLocalPreferences(preferences: TableWidgetLocalPreferences): void {
+    if (isNonEmptyString(this.model.getId())) {
+      this.preferenceService.set(this.model.getId()!, preferences, StorageType.Local);
     }
   }
 
-  private getPreferences(
-    defaultPreferences: TableWidgetPreferences = TableWidgetRendererComponent.DEFAULT_PREFERENCES
-  ): Observable<TableWidgetPreferences> {
+  private getSessionPreferences(): Observable<TableWidgetSessionPreferences> {
     return isNonEmptyString(this.model.getId())
       ? this.preferenceService
-          .get<TableWidgetPreferences>(this.model.getId()!, defaultPreferences, StorageType.Session)
+          .get<TableWidgetSessionPreferences>(this.model.getId()!, {}, StorageType.Session)
           .pipe(first())
-      : of(defaultPreferences);
+      : of({});
   }
 
-  private setPreferences(preferences: TableWidgetPreferences): void {
+  private setSessionPreferences(preferences: TableWidgetSessionPreferences): void {
     if (isNonEmptyString(this.model.getId())) {
       this.preferenceService.set(this.model.getId()!, preferences, StorageType.Session);
     }
@@ -607,8 +614,11 @@ interface TableWidgetViewPreferences {
   activeView?: string;
 }
 
-interface TableWidgetPreferences {
+interface TableWidgetLocalPreferences {
   columns?: PersistedTableColumnConfig[];
+}
+
+interface TableWidgetSessionPreferences {
   checkboxes?: TableCheckboxControl[];
   selections?: TableSelectControl[];
 }