From fe9955bf1f2969369d2619003925e143948e7792 Mon Sep 17 00:00:00 2001
From: Jake Bassett <jake@traceable.ai>
Date: Tue, 27 Apr 2021 15:52:13 -0700
Subject: [PATCH 1/3] fix: logic around showing table column editable button

---
 .../table-edit-columns-modal.component.ts     |  7 +++--
 .../table-header-cell-renderer.component.ts   | 26 +++++++++++++++----
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/projects/components/src/table/columns/table-edit-columns-modal.component.ts b/projects/components/src/table/columns/table-edit-columns-modal.component.ts
index d6a68e8a8..6946c4ea6 100644
--- a/projects/components/src/table/columns/table-edit-columns-modal.component.ts
+++ b/projects/components/src/table/columns/table-edit-columns-modal.component.ts
@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { ButtonRole } from '../../button/button';
-import { FilterAttribute } from '../../filtering/filter/filter-attribute';
 import { ModalRef, MODAL_DATA } from '../../modal/modal';
 import { TableColumnConfigExtended } from '../table.service';
 
@@ -50,12 +49,12 @@ export class TableEditColumnsModalComponent {
     @Inject(MODAL_DATA) public readonly modalData: TableColumnConfigExtended[]
   ) {
     this.editColumns = this.modalData
-      .filter(column => !this.isMetaTypeColumn(column.attribute))
+      .filter(column => !this.isMetaTypeColumn(column))
       .sort((a, b) => (a.visible === b.visible ? 0 : a.visible ? -1 : 1));
   }
 
-  private isMetaTypeColumn(attribute: FilterAttribute | undefined): boolean {
-    return attribute === undefined || attribute.type.startsWith('$$');
+  private isMetaTypeColumn(column: TableColumnConfigExtended): boolean {
+    return column.id.startsWith('$$') || (column.attribute !== undefined && column.attribute.type.startsWith('$$'));
   }
 
   public isLastRemainingColumn(column: TableColumnConfigExtended): boolean {
diff --git a/projects/components/src/table/header/table-header-cell-renderer.component.ts b/projects/components/src/table/header/table-header-cell-renderer.component.ts
index 47c026f5d..43a8c4431 100644
--- a/projects/components/src/table/header/table-header-cell-renderer.component.ts
+++ b/projects/components/src/table/header/table-header-cell-renderer.component.ts
@@ -35,11 +35,11 @@ import { TableColumnConfigExtended } from '../table.service';
       [htTooltip]="this.getTooltip(this.columnConfig.titleTooltip, this.columnConfig.title)"
       class="table-header-cell-renderer"
     >
-      <ng-container *ngIf="this.leftAlignFilterButton">
+      <ng-container *ngIf="this.isShowOptionButton && this.leftAlignFilterButton">
         <ng-container *ngTemplateOutlet="optionsButton"></ng-container>
       </ng-container>
       <div class="title" [ngClass]="this.classes" (click)="this.onSortChange()">{{ this.columnConfig.title }}</div>
-      <ng-container *ngIf="!this.leftAlignFilterButton">
+      <ng-container *ngIf="this.isShowOptionButton && !this.leftAlignFilterButton">
         <ng-container *ngTemplateOutlet="optionsButton"></ng-container>
       </ng-container>
 
@@ -54,9 +54,9 @@ import { TableColumnConfigExtended } from '../table.service';
             <div [style.min-width.px]="trigger.offsetWidth" class="popover-content">
               <ng-container *ngIf="this.isFilterable">
                 <div class="popover-item" (click)="this.onFilterValues()" *ngIf="this.isFilterable">Filter Values</div>
-                <div class="popover-item-divider" *ngIf="this.columnConfig.sortable !== false || this.editable"></div>
               </ng-container>
               <ng-container *ngIf="this.columnConfig.sortable !== false">
+                <div class="popover-item-divider"></div>
                 <div class="popover-item sort-ascending" (click)="this.onSortChange(SORT_ASC)">
                   Sort Ascending
                   <ht-icon class="popover-item-icon" icon="${IconType.ArrowUp}" size="${IconSize.Small}"></ht-icon>
@@ -65,10 +65,10 @@ import { TableColumnConfigExtended } from '../table.service';
                   Sort Descending
                   <ht-icon class="popover-item-icon" icon="${IconType.ArrowDown}" size="${IconSize.Small}"></ht-icon>
                 </div>
-                <div class="popover-item-divider" *ngIf="this.editable"></div>
               </ng-container>
 
-              <ng-container *ngIf="this.editable">
+              <ng-container *ngIf="this.editable && this.isEditableAvailableColumns">
+                <div class="popover-item-divider"></div>
                 <div class="popover-item" (click)="this.onEditColumns()">Edit Columns</div>
               </ng-container>
             </div>
@@ -115,6 +115,8 @@ export class TableHeaderCellRendererComponent implements OnInit, OnChanges {
   public classes: string[] = [];
 
   public isFilterable: boolean = false;
+  public isEditableAvailableColumns: boolean = false;
+  public isShowOptionButton: boolean = false;
 
   @ViewChild('htmlTooltip')
   public htmlTooltipTemplate?: TemplateRef<unknown>;
@@ -132,6 +134,8 @@ export class TableHeaderCellRendererComponent implements OnInit, OnChanges {
 
     if (changes.columnConfig || changes.metadata) {
       this.isFilterable = this.isAttributeFilterable();
+      this.isEditableAvailableColumns = this.areAnyAvailableColumnsEditable();
+      this.isShowOptionButton = this.isFilterable || this.isEditableAvailableColumns || this.columnConfig?.sortable === true;
     }
   }
 
@@ -183,6 +187,18 @@ export class TableHeaderCellRendererComponent implements OnInit, OnChanges {
     );
   }
 
+  private areAnyAvailableColumnsEditable(): boolean {
+    if (this.availableColumns === undefined) {
+      return false;
+    }
+
+    return this.availableColumns.some(column => this.isColumnEditable(column))
+  }
+
+  private isColumnEditable(columnConfig: TableColumnConfigExtended): boolean {
+    return columnConfig.editable === true;
+  }
+
   public onFilterValues(): void {
     this.isFilterable &&
       this.modalService.createModal<InFilterModalData>({

From 11433a6a42e21e3d06e712cdb32635d4ddb35a75 Mon Sep 17 00:00:00 2001
From: Jake Bassett <jake@traceable.ai>
Date: Tue, 27 Apr 2021 15:55:35 -0700
Subject: [PATCH 2/3] style: prettier

---
 .../src/table/header/table-header-cell-renderer.component.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/projects/components/src/table/header/table-header-cell-renderer.component.ts b/projects/components/src/table/header/table-header-cell-renderer.component.ts
index 43a8c4431..6c3cc6b9a 100644
--- a/projects/components/src/table/header/table-header-cell-renderer.component.ts
+++ b/projects/components/src/table/header/table-header-cell-renderer.component.ts
@@ -135,7 +135,8 @@ export class TableHeaderCellRendererComponent implements OnInit, OnChanges {
     if (changes.columnConfig || changes.metadata) {
       this.isFilterable = this.isAttributeFilterable();
       this.isEditableAvailableColumns = this.areAnyAvailableColumnsEditable();
-      this.isShowOptionButton = this.isFilterable || this.isEditableAvailableColumns || this.columnConfig?.sortable === true;
+      this.isShowOptionButton =
+        this.isFilterable || this.isEditableAvailableColumns || this.columnConfig?.sortable === true;
     }
   }
 
@@ -192,7 +193,7 @@ export class TableHeaderCellRendererComponent implements OnInit, OnChanges {
       return false;
     }
 
-    return this.availableColumns.some(column => this.isColumnEditable(column))
+    return this.availableColumns.some(column => this.isColumnEditable(column));
   }
 
   private isColumnEditable(columnConfig: TableColumnConfigExtended): boolean {

From 730c846b71c4265cb1b9f3c2bb8d9e352085fe4a Mon Sep 17 00:00:00 2001
From: Jake Bassett <jake@traceable.ai>
Date: Wed, 28 Apr 2021 11:56:10 -0700
Subject: [PATCH 3/3] fix: tests

---
 .../header/table-header-cell-renderer.component.test.ts   | 4 +---
 .../table/header/table-header-cell-renderer.component.ts  | 8 ++++----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/projects/components/src/table/header/table-header-cell-renderer.component.test.ts b/projects/components/src/table/header/table-header-cell-renderer.component.test.ts
index 0d90d1a7f..9396fc096 100644
--- a/projects/components/src/table/header/table-header-cell-renderer.component.test.ts
+++ b/projects/components/src/table/header/table-header-cell-renderer.component.test.ts
@@ -113,9 +113,7 @@ describe('Table Header Cell Renderer', () => {
       }
     });
 
-    spectator.click('.options-button');
-    expect(spectator.query('.sort-ascending', { root: true })).not.toExist();
-    expect(spectator.query('.sort-descending', { root: true })).not.toExist();
+    expect(spectator.query('.options-button', { root: true })).not.toExist();
   });
 
   test('should create tooltip correctly', () => {
diff --git a/projects/components/src/table/header/table-header-cell-renderer.component.ts b/projects/components/src/table/header/table-header-cell-renderer.component.ts
index 6c3cc6b9a..90db5ec34 100644
--- a/projects/components/src/table/header/table-header-cell-renderer.component.ts
+++ b/projects/components/src/table/header/table-header-cell-renderer.component.ts
@@ -43,6 +43,10 @@ import { TableColumnConfigExtended } from '../table.service';
         <ng-container *ngTemplateOutlet="optionsButton"></ng-container>
       </ng-container>
 
+      <ng-template #htmlTooltip>
+        <div [innerHTML]="this.columnConfig?.titleTooltip"></div>
+      </ng-template>
+
       <ng-template #optionsButton>
         <ht-popover class="options-button" [closeOnClick]="true">
           <ht-popover-trigger>
@@ -74,10 +78,6 @@ import { TableColumnConfigExtended } from '../table.service';
             </div>
           </ht-popover-content>
         </ht-popover>
-
-        <ng-template #htmlTooltip>
-          <div [innerHTML]="this.columnConfig?.titleTooltip"></div>
-        </ng-template>
       </ng-template>
     </div>
   `