Move criticality display in project statistics

src/Frontend/Components/AttributionCountPerSourcePerLicenseTable/AttributionCountPerSourcePerLicenseTable.tsx

@@ -2,10 +2,20 @@
 // SPDX-FileCopyrightText: TNG Technology Consulting GmbH <https://www.tngtech.com>
 //
 // SPDX-License-Identifier: Apache-2.0
-import { sortBy } from 'lodash';
+import MuiBox from '@mui/material/Box';
+import MuiTable from '@mui/material/Table';
+import MuiTableBody from '@mui/material/TableBody';
+import MuiTableCell from '@mui/material/TableCell';
+import MuiTableContainer from '@mui/material/TableContainer';
+import MuiTableFooter from '@mui/material/TableFooter';
+import MuiTableHead from '@mui/material/TableHead';
+import MuiTableRow from '@mui/material/TableRow';
+import MuiTypography from '@mui/material/Typography';
 
+import { Criticality } from '../../../shared/shared-types';
+import { text } from '../../../shared/text';
+import { OpossumColors, tableClasses } from '../../shared-styles';
 import { LicenseCounts, LicenseNamesWithCriticality } from '../../types/types';
-import { ProjectLicensesTable } from '../ProjectLicensesTable/ProjectLicensesTable';
 
 const classes = {
   container: {
@@ -14,9 +24,7 @@ const classes = {
   },
 };
 
-const LICENSE_COLUMN_NAME_IN_TABLE = 'License name';
-const FOOTER_TITLE = 'Total';
-const TOTAL_SOURCES_TITLE = 'Total';
+const TOTAL_SOURCE_NAME = 'Total';
 
 interface AttributionCountPerSourcePerLicenseTableProps {
   licenseCounts: LicenseCounts;
@@ -40,34 +48,142 @@ export const AttributionCountPerSourcePerLicenseTable: React.FC<
     .reduce((partialSum, num) => partialSum + num, 0)
     .toString();
 
-  const footerRow = [FOOTER_TITLE]
-    .concat(totalNumberOfAttributionsPerSource)
-    .concat(totalNumberOfAttributions);
-  const headerRow = [LICENSE_COLUMN_NAME_IN_TABLE]
-    .concat(sourceNames)
-    .concat(TOTAL_SOURCES_TITLE)
-    .map(
-      (sourceName) => sourceName.charAt(0).toUpperCase() + sourceName.slice(1),
-    );
+  const footerRow = [
+    text.attributionCountPerSourcePerLicenseTable.footerTitle,
+    '',
+    ...totalNumberOfAttributionsPerSource,
+    totalNumberOfAttributions,
+  ];
+
+  const headerRow = [
+    text.attributionCountPerSourcePerLicenseTable.columnNames.licenseName,
+    text.attributionCountPerSourcePerLicenseTable.columnNames.criticality,
+    ...sourceNames,
+    text.attributionCountPerSourcePerLicenseTable.columnNames.totalSources,
+  ].map(
+    (sourceName) => sourceName.charAt(0).toUpperCase() + sourceName.slice(1),
+  );
 
   Object.entries(
     props.licenseCounts.attributionCountPerSourcePerLicense,
   ).forEach(
     ([licenseName, value]) =>
-      (value[TOTAL_SOURCES_TITLE] =
+      (value[TOTAL_SOURCE_NAME] =
         props.licenseCounts.totalAttributionsPerLicense[licenseName]),
   );
 
+  const tableHead = (
+    <MuiTableHead>
+      <MuiTableRow>
+        {headerRow.map((columnHeader, columnIndex) => (
+          <MuiTableCell
+            sx={tableClasses.head}
+            key={columnIndex}
+            align={columnIndex === 0 ? 'left' : 'center'}
+          >
+            {columnHeader}
+          </MuiTableCell>
+        ))}
+      </MuiTableRow>
+    </MuiTableHead>
+  );
+
+  const buildTableRow = (licenseName: string, rowIndex: number) => {
+    const licenseNameCell = (
+      <MuiTableCell
+        sx={{
+          ...tableClasses.body,
+        }}
+        key={0}
+        align={'left'}
+      >
+        <span>{licenseName}</span>
+      </MuiTableCell>
+    );
+
+    const licenseCriticality = props.licenseNamesWithCriticality[licenseName];
+    const criticalityColor =
+      licenseCriticality === Criticality.High
+        ? OpossumColors.orange
+        : licenseCriticality === Criticality.Medium
+          ? OpossumColors.mediumOrange
+          : undefined;
+
+    const criticalityCell = (
+      <MuiTableCell
+        sx={{
+          ...tableClasses.body,
+          color: criticalityColor,
+        }}
+        key={1}
+        align={'center'}
+      >
+        <span>{licenseCriticality ?? '-'}</span>
+      </MuiTableCell>
+    );
+
+    const buildCountBySourceCell =
+      (columnOffset: number) => (sourceName: string, sourceIdx: number) => {
+        const columnIndex = columnOffset + sourceIdx;
+
+        return (
+          <MuiTableCell
+            sx={{
+              ...tableClasses.body,
+            }}
+            key={columnIndex}
+            align={'center'}
+          >
+            {props.licenseCounts.attributionCountPerSourcePerLicense[
+              licenseName
+            ][sourceName] || '-'}
+          </MuiTableCell>
+        );
+      };
+
+    const singleCells = [licenseNameCell, criticalityCell];
+
+    return (
+      <MuiTableRow key={rowIndex}>
+        {singleCells.concat(
+          sourceNames
+            .concat(TOTAL_SOURCE_NAME)
+            .map(buildCountBySourceCell(singleCells.length)),
+        )}
+      </MuiTableRow>
+    );
+  };
+
+  const tableFooter = (
+    <MuiTableFooter>
+      <MuiTableRow>
+        {footerRow.map((total, columnIndex) => (
+          <MuiTableCell
+            sx={tableClasses.footer}
+            key={columnIndex}
+            align={columnIndex === 0 ? 'left' : 'center'}
+          >
+            {total}
+          </MuiTableCell>
+        ))}
+      </MuiTableRow>
+    </MuiTableFooter>
+  );
+
   return (
-    <ProjectLicensesTable
-      title={props.title}
-      containerStyle={classes.container}
-      columnHeaders={headerRow}
-      columnNames={headerRow}
-      rowNames={sortBy(Object.keys(props.licenseNamesWithCriticality))}
-      tableContent={props.licenseCounts.attributionCountPerSourcePerLicense}
-      tableFooter={footerRow}
-      licenseNamesWithCriticality={props.licenseNamesWithCriticality}
-    />
+    <MuiBox>
+      <MuiTypography variant="subtitle1">{props.title}</MuiTypography>
+      <MuiTableContainer sx={classes.container}>
+        <MuiTable size="small" stickyHeader>
+          {tableHead}
+          <MuiTableBody>
+            {Object.keys(props.licenseNamesWithCriticality)
+              .toSorted()
+              .map(buildTableRow)}
+          </MuiTableBody>
+          {tableFooter}
+        </MuiTable>
+      </MuiTableContainer>
+    </MuiBox>
   );
 };