Code cleanup based on theseyi comments

wherehows-web/app/components/datasets/containers/dataset-health.ts

@@ -1,6 +1,6 @@
 import Component from '@ember/component';
 import { get, computed, setProperties, getProperties } from '@ember/object';
-import { task, TaskInstance } from 'ember-concurrency';
+import { task } from 'ember-concurrency';
 import ComputedProperty from '@ember/object/computed';
 import { IChartDatum } from 'wherehows-web/typings/app/visualization/charts';
 import healthCategories from 'wherehows-web/mirage/fixtures/health-categories';
@@ -8,6 +8,16 @@ import healthSeverity from 'wherehows-web/mirage/fixtures/health-severity';
 import healthDetail from 'wherehows-web/mirage/fixtures/health-detail';
 import { IHealthScore } from 'wherehows-web/typings/api/datasets/health';
 
+/**
+ * Used for the dataset health tab, represents the fieldnames for the health score table
+ */
+export enum HealthDataFields {
+  category = 'Category',
+  severity = 'Severity',
+  description = 'Description',
+  score = 'Score'
+}
+
 /**
  * This is the container component for the dataset health tab. It should contain the health bar graphs and a table
  * depicting the detailed health scores. Aside from fetching the data, it also handles click interactions between
@@ -116,7 +126,7 @@ export default class DatasetHealthContainer extends Component {
    * An async parent task to group all data tasks for this container component
    * @type {Task<TaskInstance<Promise<any>>, (a?: any) => TaskInstance<TaskInstance<Promise<any>>>>}
    */
-  getContainerDataTask = task(function*(this: DatasetHealthContainer): IterableIterator<TaskInstance<Promise<any>>> {
+  getContainerDataTask = task(function*(this: DatasetHealthContainer): IterableIterator<void> {
     // Pretend like we're getting data from somehwere
     const healthData = {
       categories: healthCategories,

wherehows-web/app/components/datasets/health/score-table.ts

@@ -4,6 +4,8 @@ import { computed, setProperties, getProperties, get } from '@ember/object';
 import ComputedProperty from '@ember/object/computed';
 import { IDropDownOption } from 'wherehows-web/typings/app/dataset-compliance';
 import { noop } from 'wherehows-web/utils/helpers/functions';
+import { capitalize } from '@ember/string';
+import { HealthDataFields } from 'wherehows-web/components/datasets/containers/dataset-health';
 
 /**
  * Adds properties specifically to help the table render each row to the basic health score
@@ -19,7 +21,7 @@ interface IRenderedHealthScore extends IHealthScore {
 interface IHealthTableHeader {
   label: string;
   class: string;
-  dropdownOptions: IDropDownOption<string>[] | undefined;
+  dropdownOptions: Array<IDropDownOption<string>> | undefined;
   initialDropdown: IDropDownOption<string>;
   onDropdownSelect: (type: string, selection: IDropDownOption<string>) => void;
 }
@@ -45,54 +47,6 @@ export default class DatasetsHealthScoreTable extends Component {
    */
   tagName = 'table';
 
-  /**
-   * Expected headers for the detailed table. It contains the wording for each header as well as
-   * additional properties
-   * @type {Array<IHealthTableHeader>}
-   */
-  headers = computed('dropdownOptions', function(this: DatasetsHealthScoreTable): Array<IHealthTableHeader> {
-    const dropdownOptions = get(this, 'dropdownOptions');
-    const onDropdownSelect = get(this, 'onDropdownSelect');
-
-    return ['Category', 'Description', 'Score', 'Severity'].map(header => ({
-      label: header,
-      class: `dataset-health__score-table__${header.toLowerCase()}`,
-      dropdownOptions: dropdownOptions[header.toLowerCase()],
-      initialDropdown: { label: header, value: '' },
-      onDropdownSelect: onDropdownSelect.bind(this, header)
-    }));
-  });
-
-  /**
-   * Uses the passed in table data to calculate a dropdown list of options available for filtering by category
-   * and severity for the table's rows.
-   * @type {ComputedProperty<IHealthTableDropdowns>}
-   */
-  dropdownOptions: ComputedProperty<IHealthTableDropdowns> = computed('tableData', function(
-    this: DatasetsHealthScoreTable
-  ) {
-    const tableData = get(this, 'tableData');
-    const includedOptions = new Set();
-
-    return tableData.reduce(
-      (output, row) => {
-        const { category, severity } = row;
-
-        !includedOptions.has(category) && output.category.push({ label: category, value: category });
-        severity && !includedOptions.has(severity) && output.severity.push({ label: severity, value: severity });
-        // Ensures we only add each option once, assumes severity will never === category
-        includedOptions.add(category);
-        includedOptions.add(severity);
-
-        return output;
-      },
-      {
-        category: <IDropDownOption<string>[]>[{ label: 'Category', value: '' }],
-        severity: <IDropDownOption<string>[]>[{ label: 'Severity', value: '' }]
-      }
-    );
-  });
-
   /**
    * Passed in table data, mostly raw detailed information about the compliance score details and the
    * breakdown of such.
@@ -114,6 +68,67 @@ export default class DatasetsHealthScoreTable extends Component {
    */
   currentCategoryFilter: string;
 
+  /**
+   * Expected headers for the detailed table. It contains the wording for each header as well as
+   * additional properties
+   * @type {Array<IHealthTableHeader>}
+   */
+  headers = computed('dropdownOptions', function(this: DatasetsHealthScoreTable): Array<IHealthTableHeader> {
+    const { dropdownOptions, onDropdownSelect } = getProperties(this, 'dropdownOptions', 'onDropdownSelect');
+
+    return ['Category', 'Description', 'Score', 'Severity'].map(header => ({
+      label: header,
+      class: `dataset-health__score-table__${header.toLowerCase()}`,
+      dropdownOptions: dropdownOptions[header.toLowerCase()],
+      initialDropdown: { label: header, value: '' },
+      onDropdownSelect: onDropdownSelect.bind(this, header)
+    }));
+  });
+
+  /**
+   * Passed in function from the dataset health container that helps us handle when the user clicks on a
+   * specific category from the dropdown menu in the table header
+   * @param {IDropDownOption} selection - the selected option from the dropdown
+   */
+  onCategorySelect: (selection: IDropDownOption<string>) => void;
+
+  /**
+   * Passed in function from the dataset health container that helps us handle when the user clicks on a
+   * specific severity from the dropdown menu on the table header
+   * @param {IDropDownOption} selection - the selected option from the dropdown
+   */
+  onSeveritySelect: (section: IDropDownOption<string>) => void;
+
+  /**
+   * Uses the passed in table data to calculate a dropdown list of options available for filtering by category
+   * and severity for the table's rows.
+   * @type {ComputedProperty<IHealthTableDropdowns>}
+   */
+  dropdownOptions = computed('tableData', function(this: DatasetsHealthScoreTable): IHealthTableDropdowns {
+    const tableData = get(this, 'tableData');
+    const includedOptions = new Set();
+    // Starting with a default ALL/NO FILTER option
+    const categoryOptions: Array<IDropDownOption<string>> = [{ label: HealthDataFields.category, value: '' }];
+    const severityOptions: Array<IDropDownOption<string>> = [{ label: HealthDataFields.severity, value: '' }];
+
+    tableData.forEach(row => {
+      const { category, severity } = row;
+
+      if (!includedOptions.has(category)) {
+        categoryOptions.push({ label: capitalize(category), value: category });
+      }
+
+      if (severity && !includedOptions.has(severity)) {
+        severityOptions.push({ label: capitalize(severity), value: severity });
+      }
+      // Ensures no repeats
+      includedOptions.add(category);
+      includedOptions.add(severity);
+    });
+
+    return { category: categoryOptions, severity: severityOptions };
+  });
+
   /**
    * Calculates table data from the passed in information by appending each row with information that helps to
    * style the table.
@@ -140,32 +155,6 @@ export default class DatasetsHealthScoreTable extends Component {
     }
   );
 
-  /**
-   * Passed in function from the dataset health container that helps us handle when the user clicks on a
-   * specific category from the dropdown menu in the table header
-   * @param {IDropDownOption} selection - the selected option from the dropdown
-   */
-  onCategorySelect: (selection: IDropDownOption<string>) => void;
-
-  /**
-   * Passed in function from the dataset health container that helps us handle when the user clicks on a
-   * specific severity from the dropdown menu on the table header
-   * @param {IDropDownOption} selection - the selected option from the dropdown
-   */
-  onSeveritySelect: (section: IDropDownOption<string>) => void;
-
-  constructor() {
-    super(...arguments);
-
-    setProperties(this, {
-      tableData: this.tableData || [],
-      currentSeverityFilter: this.currentSeverityFilter || '',
-      currentCategoryFilter: this.currentCategoryFilter || '',
-      onCategorySelect: this.onCategorySelect || noop,
-      onSeveritySelect: this.onSeveritySelect || noop
-    });
-  }
-
   /**
    * This is attached to each header object so that we can pass into the dropdown option for that header
    * and allow the user to select from it with a handler
@@ -179,4 +168,16 @@ export default class DatasetsHealthScoreTable extends Component {
       this.onSeveritySelect(selection);
     }
   }
+
+  constructor() {
+    super(...arguments);
+
+    setProperties(this, {
+      tableData: this.tableData || [],
+      currentSeverityFilter: this.currentSeverityFilter || '',
+      currentCategoryFilter: this.currentCategoryFilter || '',
+      onCategorySelect: this.onCategorySelect || noop,
+      onSeveritySelect: this.onSeveritySelect || noop
+    });
+  }
 }

wherehows-web/app/styles/components/dataset-health/_metrics-charts.scss

@@ -2,7 +2,7 @@
   &__metrics-charts {
     @include nacho-container;
     display: flex;
-    margin-bottom: 24px;
+    margin-bottom: item-spacing(5);
   }
 
   &__chart-container {