feat: respect settings for showing also in overview table

Signed-off-by: Dominikus Hellgartner <dominikus.hellgartner@tngtech.com>

Author: Hellgartner

src/Frontend/Components/AttributionCountPerSourcePerLicenseTable/AttributionCountPerSourcePerLicenseTable.tsx

@@ -7,16 +7,19 @@ import MuiTable from '@mui/material/Table';
 import MuiTableBody from '@mui/material/TableBody';
 import MuiTableContainer from '@mui/material/TableContainer';
 import { orderBy, upperFirst } from 'lodash';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { text } from '../../../shared/text';
+import { useShowClassifications } from '../../state/variables/use-show-classifications';
+import { useShowCriticality } from '../../state/variables/use-show-criticality';
 import {
   LicenseCounts,
   LicenseNamesWithClassification,
   LicenseNamesWithCriticality,
 } from '../../types/types';
 import { Order } from '../TableCellWithSorting/TableCellWithSorting';
 import {
+  Column,
   ColumnConfig,
   orderLicenseNames,
   SingleColumn,
@@ -32,7 +35,7 @@ const classes = {
   },
 };
 
-interface AttributionCountPerSourcePerLicenseTableProps {
+export interface AttributionCountPerSourcePerLicenseTableProps {
   licenseCounts: LicenseCounts;
   licenseNamesWithCriticality: LicenseNamesWithCriticality;
   licenseNamesWithClassification: LicenseNamesWithClassification;
@@ -47,6 +50,39 @@ export const AttributionCountPerSourcePerLicenseTable: React.FC<
     props.licenseCounts.totalAttributionsPerSource,
   );
 
+  const showCriticality = useShowCriticality();
+  const showClassifications = useShowClassifications();
+
+  const getCriticalityColumn = useCallback((): Array<Column> => {
+    if (showCriticality) {
+      return [
+        {
+          columnName: componentText.columns.criticality.title,
+          columnType: SingleColumn.CRITICALITY,
+          columnId: SingleColumn.CRITICALITY,
+          align: 'center',
+          defaultOrder: 'desc',
+        },
+      ];
+    }
+    return [];
+  }, [componentText.columns.criticality.title, showCriticality]);
+
+  const getClassificationColumn = useCallback((): Array<Column> => {
+    if (showClassifications) {
+      return [
+        {
+          columnName: componentText.columns.classification,
+          columnType: SingleColumn.CLASSIFICATION,
+          columnId: SingleColumn.CLASSIFICATION,
+          align: 'center',
+          defaultOrder: 'desc',
+        },
+      ];
+    }
+    return [];
+  }, [componentText.columns.classification, showClassifications]);
+
   const columnConfig: ColumnConfig = useMemo(
     () =>
       new ColumnConfig([
@@ -60,20 +96,8 @@ export const AttributionCountPerSourcePerLicenseTable: React.FC<
               align: 'left',
               defaultOrder: 'asc',
             },
-            {
-              columnName: componentText.columns.criticality.title,
-              columnType: SingleColumn.CRITICALITY,
-              columnId: SingleColumn.CRITICALITY,
-              align: 'center',
-              defaultOrder: 'desc',
-            },
-            {
-              columnName: componentText.columns.classification,
-              columnType: SingleColumn.CLASSIFICATION,
-              columnId: SingleColumn.CLASSIFICATION,
-              align: 'center',
-              defaultOrder: 'desc',
-            },
+            ...getCriticalityColumn(),
+            ...getClassificationColumn(),
           ],
         },
         {
@@ -96,7 +120,15 @@ export const AttributionCountPerSourcePerLicenseTable: React.FC<
           ],
         },
       ]),
-    [sourceNames, componentText],
+    [
+      componentText.columns.licenseInfo,
+      componentText.columns.licenseName,
+      componentText.columns.classification,
+      componentText.columns.signalCountPerSource,
+      componentText.columns.totalSources,
+      getCriticalityColumn,
+      sourceNames,
+    ],
   );
 
   const [ordering, setOrdering] = useState<TableOrdering>({

src/Frontend/Components/AttributionCountPerSourcePerLicenseTable/AttributionCountPerSourcePerLicenseTableHead/AttributionCountPerSourcePerLicenseTableHead.tsx

@@ -36,7 +36,10 @@ export const AttributionCountPerSourcePerLicenseTableHead: React.FC<
   AttributionCountPerSourcePerLicenseTableHeadProps
 > = (props) => {
   return (
-    <MuiTableHead sx={{ position: 'sticky', top: 0 }}>
+    <MuiTableHead
+      sx={{ position: 'sticky', top: 0 }}
+      data-testid={'license-table-header'}
+    >
       <MuiTableRow>
         {props.columnConfig.groups.map((columnGroup, idx) => {
           return (

src/Frontend/Components/AttributionCountPerSourcePerLicenseTable/__tests__/AttributionCountPerSourcePerLicenseTable.test.tsx

@@ -0,0 +1,100 @@
+// SPDX-FileCopyrightText: Meta Platforms, Inc. and its affiliates
+// SPDX-FileCopyrightText: TNG Technology Consulting GmbH <https://www.tngtech.com>
+//
+// SPDX-License-Identifier: Apache-2.0
+import { screen } from '@testing-library/react';
+
+import { Criticality } from '../../../../shared/shared-types';
+import { setUserSetting } from '../../../state/actions/user-settings-actions/user-settings-actions';
+import { renderComponent } from '../../../test-helpers/render';
+import { LicenseCounts } from '../../../types/types';
+import {
+  AttributionCountPerSourcePerLicenseTable,
+  AttributionCountPerSourcePerLicenseTableProps,
+} from '../AttributionCountPerSourcePerLicenseTable';
+
+const licenseCounts: LicenseCounts = {
+  attributionCountPerSourcePerLicense: {
+    licenseA: {
+      sourceA: 1,
+      sourceB: 3,
+    },
+    licenseB: {
+      sourceB: 2,
+    },
+  },
+  totalAttributionsPerLicense: {
+    licenseA: 4,
+    licenseB: 2,
+  },
+  totalAttributionsPerSource: {
+    sourceA: 1,
+    sourceB: 5,
+  },
+};
+const props: AttributionCountPerSourcePerLicenseTableProps = {
+  licenseCounts,
+  licenseNamesWithCriticality: {
+    licenseA: Criticality.High,
+    licenseB: Criticality.Medium,
+  },
+  licenseNamesWithClassification: {
+    licenseA: 2,
+    licenseB: 3,
+  },
+};
+
+describe('Attribution count per source per license table', () => {
+  it('shows by default criticality and classification columns', () => {
+    renderComponent(<AttributionCountPerSourcePerLicenseTable {...props} />);
+
+    const headerTexts = screen
+      .getAllByTestId('classification-table-row-header')
+      .map((node) => node.textContent);
+
+    expect(headerTexts).toEqual([
+      'Namesorted ascending', //correct, the sorted, ascending is for a11y
+      'Criticality',
+      'Classification',
+      'SourceA',
+      'SourceB',
+      'Total',
+    ]);
+  });
+
+  it('does not show criticality if disabled', () => {
+    renderComponent(<AttributionCountPerSourcePerLicenseTable {...props} />, {
+      actions: [setUserSetting({ showCriticality: false })],
+    });
+
+    const headerTexts = screen
+      .getAllByTestId('classification-table-row-header')
+      .map((node) => node.textContent);
+
+    expect(headerTexts).toEqual([
+      'Namesorted ascending', //correct, the sorted, ascending is for a11y
+      'Classification',
+      'SourceA',
+      'SourceB',
+      'Total',
+    ]);
+  });
+
+  it('does not show classification if disabled', () => {
+    renderComponent(<AttributionCountPerSourcePerLicenseTable {...props} />, {
+      actions: [setUserSetting({ showClassifications: false })],
+    });
+
+    const headerTexts = screen
+      .getAllByTestId('classification-table-row-header')
+      .map((node) => node.textContent);
+
+    expect(headerTexts).toEqual([
+      'Namesorted ascending', //correct, the sorted, ascending is for a11y
+      'Criticality',
+      'SourceA',
+      'SourceB',
+      'Total',
+    ]);
+  });
+});

src/Frontend/Components/TableCellWithSorting/TableCellWithSorting.tsx

@@ -32,6 +32,7 @@ export const TableCellWithSorting: React.FC<TableCellWithSortingProps> = (
         ...props.sx,
       }}
       sortDirection={props.isSortedColumn ? props.order : false}
+      data-testid="classification-table-row-header"
     >
       <TableSortLabel
         sx={{