Updated the column selector settings menu so the checkboxes are enabled, and function as expected.

client/package.json

@@ -12,8 +12,7 @@
         "clean": "rimraf dist/",
         "test": "karma start test/karma.conf.js",
         "test-single-run": "karma start test/karma.conf.js --singleRun --no-auto-watch",
-        "start": "webpack-dev-server --mode=development --port 4000 --history-api-fallback --colors",
-        "sync": "webpack --env.disableMinimize=true --mode=production --output-path=../webapp/target/pwm-1.8.0-SNAPSHOT/public/resources/webjars/pwm-client --watch --progress --colors"
+        "start": "webpack-dev-server --mode=development --port 4000 --history-api-fallback --colors"
     },
     "author": "",
     "license": "ISC",

client/src/modules/helpdesk/helpdesk-search-table.component.html

@@ -82,8 +82,8 @@
         <ias-menu name="menu1" ias-align="end end" class="ias-styles-root">
             <div class="ias-input-container">
                 <div class="checkbox-button" ng-repeat="(key, value) in $ctrl.columnConfiguration">
-                    <input type="checkbox" ng-checked="value.visible" aria-label="Toggle column visibility" disabled/>
-                    <ias-button ng-click="$ctrl.toggleColumnVisible($event, key)">{{value.label}}</ias-button>
+                    <input type="checkbox" ng-model="value.visible" aria-label="Toggle column visibility" />
+                    <ias-button class="toggle-column-btn" ng-click="value.visible = !value.visible; $event.stopImmediatePropagation();">{{value.label}}</ias-button>
                 </div>
             </div>
         </ias-menu>

client/src/modules/helpdesk/helpdesk-search-table.component.ts

@@ -106,18 +106,6 @@ export default class HelpDeskSearchTableComponent extends HelpDeskSearchBaseComp
         this.toggleView('search.cards');
     }
 
-    toggleColumnVisible(event, columnId): void {
-        const visibleColumns = Object.keys(this.columnConfiguration).filter((columnId) => {
-            return this.columnConfiguration[columnId].visible;
-        });
-
-        if (!(visibleColumns.length === 1 && this.columnConfiguration[columnId].visible)) {
-            this.columnConfiguration[columnId].visible = !this.columnConfiguration[columnId].visible;
-        }
-
-        event.stopImmediatePropagation();
-    }
-
     private onSearchResult(searchResult: SearchResult): void {
         this.searchResult = searchResult;
     }

client/src/modules/helpdesk/helpdesk-search.component.scss

@@ -110,4 +110,11 @@
       }
     }
   }
+
+  .ias-input-container > .checkbox-button > .ias-button.toggle-column-btn {
+    &:focus, &:hover {
+      background-color: transparent;
+      box-shadow: none;
+    }
+  }
 }

client/src/modules/peoplesearch/peoplesearch-table.component.html

@@ -86,8 +86,8 @@
         <ias-menu name="menu1" ias-align="end end" class="ias-styles-root">
             <div class="ias-input-container">
                 <div class="checkbox-button" ng-repeat="(key, value) in $ctrl.columnConfiguration">
-                    <input type="checkbox" ng-checked="value.visible" aria-label="Toggle column visibility" disabled/>
-                    <ias-button ng-click="$ctrl.toggleColumnVisible($event, key)">{{value.label}}</ias-button>
+                    <input type="checkbox" ng-model="value.visible" aria-label="Toggle column visibility" />
+                    <ias-button class="toggle-column-btn" ng-click="value.visible = !value.visible; $event.stopImmediatePropagation();">{{value.label}}</ias-button>
                 </div>
             </div>
         </ias-menu>

client/src/modules/peoplesearch/peoplesearch-table.component.scss

@@ -43,4 +43,11 @@
             }
         }
     }
+
+    .ias-input-container > .checkbox-button > .ias-button.toggle-column-btn {
+        &:focus, &:hover {
+            background-color: transparent;
+            box-shadow: none;
+        }
+    }
 }

client/src/modules/peoplesearch/peoplesearch-table.component.ts

@@ -116,18 +116,6 @@ export default class PeopleSearchTableComponent extends PeopleSearchBaseComponen
         }
     }
 
-    toggleColumnVisible(event, columnId): void {
-        const visibleColumns = Object.keys(this.columnConfiguration).filter((columnId) => {
-            return this.columnConfiguration[columnId].visible;
-        });
-
-        if (!(visibleColumns.length === 1 && this.columnConfiguration[columnId].visible)) {
-            this.columnConfiguration[columnId].visible = !this.columnConfiguration[columnId].visible;
-        }
-
-        event.stopImmediatePropagation();
-    }
-
     private onSearchResult(searchResult: SearchResult): void {
         this.searchResult = searchResult;
     }

client/webpack.config.js

@@ -119,8 +119,8 @@ module.exports = function (env, argv) {
         // Development-specific configuration
         return webpackMerge(commonConfig, {
             entry: {
-                'peoplesearch.ng': './src/modules/peoplesearch/main.dev',
-                'helpdesk.ng': './src/modules/helpdesk/main.dev'
+                'peoplesearch.ng': './src/modules/peoplesearch/main',
+                'helpdesk.ng': './src/modules/helpdesk/main'
             },
             plugins: [
                 new HtmlWebpackPlugin({