From 5e805cffa7c6f3f436ea24e0a9825f5188ac6ca0 Mon Sep 17 00:00:00 2001
From: Frank Viernau <frank_viernau@epam.com>
Date: Tue, 23 Apr 2024 13:20:46 +0200
Subject: [PATCH] refactor(web-app-template): Swap two columns in summary views

Swap the column for `severitiy` with the column for `is_excluded`, so
that the `is_excluded` column is no more next to the package name. This
avoid mis-leading the user into thinking that `is_excluded` tells
whether the package is excluded. It is supposed to say the the `issue`
is excluded.

Note: This prepares for making `is_excluded` column reflect exclusions
of `Issue.affectedPath`. The summary view of rule violations and
vulnerabilities are only changed for consistency with the issues summary
view.

Signed-off-by: Frank Viernau <frank_viernau@epam.com>
---
 .../src/components/IssuesTable.jsx            | 124 +++++++++---------
 .../src/components/RuleViolationsTable.jsx    | 123 ++++++++---------
 .../src/components/VulnerabilitiesTable.jsx   | 118 ++++++++---------
 3 files changed, 183 insertions(+), 182 deletions(-)

diff --git a/plugins/reporters/web-app-template/src/components/IssuesTable.jsx b/plugins/reporters/web-app-template/src/components/IssuesTable.jsx
index 596188d858fa4..d34dae9d8eb69 100644
--- a/plugins/reporters/web-app-template/src/components/IssuesTable.jsx
+++ b/plugins/reporters/web-app-template/src/components/IssuesTable.jsx
@@ -60,6 +60,68 @@ class IssuesTable extends React.Component {
 
         const columns = [];
 
+        if (showExcludesColumn) {
+            columns.push({
+                align: 'right',
+                filters: (() => [
+                    {
+                        text: (
+                            <span>
+                                <FileExcelOutlined className="ort-excluded" />
+                                {' '}
+                                Excluded
+                            </span>
+                        ),
+                        value: 'excluded'
+                    },
+                    {
+                        text: (
+                            <span>
+                                <FileAddOutlined />
+                                {' '}
+                                Included
+                            </span>
+                        ),
+                        value: 'included'
+                    }
+                ])(),
+                filteredValue: filteredInfo.excludes || null,
+                key: 'excludes',
+                onFilter: (value, webAppOrtIssue) => {
+                    const webAppPackage = webAppOrtIssue.package;
+
+                    if (value === 'excluded') {
+                        return webAppPackage.isExcluded;
+                    }
+
+                    if (value === 'included') {
+                        return !webAppPackage.isExcluded;
+                    }
+
+                    return false;
+                },
+                render: (webAppOrtIssue) => {
+                    const webAppPackage = webAppOrtIssue.package;
+
+                    return webAppPackage.isExcluded
+                        ? (
+                        <span className="ort-excludes">
+                            <Tooltip
+                                placement="right"
+                                title={Array.from(webAppPackage.excludeReasons).join(', ')}
+                            >
+                                <FileExcelOutlined className="ort-excluded" />
+                            </Tooltip>
+                        </span>
+                            )
+                        : (
+                        <FileAddOutlined />
+                            );
+                },
+                width: '2em'
+            });
+        }
+
         columns.push({
             align: 'center',
             dataIndex: 'severityIndex',
@@ -129,68 +191,6 @@ class IssuesTable extends React.Component {
             width: '5em'
         });
 
-        if (showExcludesColumn) {
-            columns.push({
-                align: 'right',
-                filters: (() => [
-                    {
-                        text: (
-                            <span>
-                                <FileExcelOutlined className="ort-excluded" />
-                                {' '}
-                                Excluded
-                            </span>
-                        ),
-                        value: 'excluded'
-                    },
-                    {
-                        text: (
-                            <span>
-                                <FileAddOutlined />
-                                {' '}
-                                Included
-                            </span>
-                        ),
-                        value: 'included'
-                    }
-                ])(),
-                filteredValue: filteredInfo.excludes || null,
-                key: 'excludes',
-                onFilter: (value, webAppOrtIssue) => {
-                    const webAppPackage = webAppOrtIssue.package;
-
-                    if (value === 'excluded') {
-                        return webAppPackage.isExcluded;
-                    }
-
-                    if (value === 'included') {
-                        return !webAppPackage.isExcluded;
-                    }
-
-                    return false;
-                },
-                render: (webAppOrtIssue) => {
-                    const webAppPackage = webAppOrtIssue.package;
-
-                    return webAppPackage.isExcluded
-                        ? (
-                        <span className="ort-excludes">
-                            <Tooltip
-                                placement="right"
-                                title={Array.from(webAppPackage.excludeReasons).join(', ')}
-                            >
-                                <FileExcelOutlined className="ort-excluded" />
-                            </Tooltip>
-                        </span>
-                            )
-                        : (
-                        <FileAddOutlined />
-                            );
-                },
-                width: '2em'
-            });
-        }
-
         columns.push(
             {
                 ellipsis: true,
diff --git a/plugins/reporters/web-app-template/src/components/RuleViolationsTable.jsx b/plugins/reporters/web-app-template/src/components/RuleViolationsTable.jsx
index 3b9dafbac1b1b..440fd1c46c0d0 100644
--- a/plugins/reporters/web-app-template/src/components/RuleViolationsTable.jsx
+++ b/plugins/reporters/web-app-template/src/components/RuleViolationsTable.jsx
@@ -60,6 +60,68 @@ class RuleViolationsTable extends React.Component {
         }
 
         const columns = [];
+
+        if (showExcludesColumn) {
+            columns.push({
+                align: 'right',
+                filters: (() => [
+                    {
+                        text: (
+                            <span>
+                                <FileExcelOutlined className="ort-excluded" />
+                                {' '}
+                                Excluded
+                            </span>
+                        ),
+                        value: 'excluded'
+                    },
+                    {
+                        text: (
+                            <span>
+                                <FileAddOutlined />
+                                {' '}
+                                Included
+                            </span>
+                        ),
+                        value: 'included'
+                    }
+                ])(),
+                filteredValue: filteredInfo.excludes || null,
+                key: 'excludes',
+                onFilter: (value, webAppRuleViolation) => {
+                    if (!webAppRuleViolation.hasPackage()) return true;
+
+                    const { isExcluded } = webAppRuleViolation.package;
+
+                    return (isExcluded && value === 'excluded') || (!isExcluded && value === 'included');
+                },
+                render: (webAppRuleViolation) => {
+                    const webAppPackage = webAppRuleViolation.package;
+
+                    if (webAppPackage) {
+                        return webAppPackage.isExcluded
+                            ? (
+                            <span className="ort-excludes">
+                                <Tooltip
+                                    placement="right"
+                                    title={Array.from(webAppPackage.excludeReasons).join(', ')}
+                                >
+                                    <FileExcelOutlined className="ort-excluded" />
+                                </Tooltip>
+                            </span>
+                                )
+                            : (
+                            <FileAddOutlined />
+                                );
+                    }
+
+                    return null;
+                },
+                responsive: ['md'],
+                width: '2em'
+            });
+        }
+
         columns.push({
             align: 'center',
             dataIndex: 'severityIndex',
@@ -130,67 +192,6 @@ class RuleViolationsTable extends React.Component {
             width: '5em'
         });
 
-        if (showExcludesColumn) {
-            columns.push({
-                align: 'right',
-                filters: (() => [
-                    {
-                        text: (
-                            <span>
-                                <FileExcelOutlined className="ort-excluded" />
-                                {' '}
-                                Excluded
-                            </span>
-                        ),
-                        value: 'excluded'
-                    },
-                    {
-                        text: (
-                            <span>
-                                <FileAddOutlined />
-                                {' '}
-                                Included
-                            </span>
-                        ),
-                        value: 'included'
-                    }
-                ])(),
-                filteredValue: filteredInfo.excludes || null,
-                key: 'excludes',
-                onFilter: (value, webAppRuleViolation) => {
-                    if (!webAppRuleViolation.hasPackage()) return true;
-
-                    const { isExcluded } = webAppRuleViolation.package;
-
-                    return (isExcluded && value === 'excluded') || (!isExcluded && value === 'included');
-                },
-                render: (webAppRuleViolation) => {
-                    const webAppPackage = webAppRuleViolation.package;
-
-                    if (webAppPackage) {
-                        return webAppPackage.isExcluded
-                            ? (
-                            <span className="ort-excludes">
-                                <Tooltip
-                                    placement="right"
-                                    title={Array.from(webAppPackage.excludeReasons).join(', ')}
-                                >
-                                    <FileExcelOutlined className="ort-excluded" />
-                                </Tooltip>
-                            </span>
-                                )
-                            : (
-                            <FileAddOutlined />
-                                );
-                    }
-
-                    return null;
-                },
-                responsive: ['md'],
-                width: '2em'
-            });
-        }
-
         columns.push(
             {
                 dataIndex: 'packageName',
diff --git a/plugins/reporters/web-app-template/src/components/VulnerabilitiesTable.jsx b/plugins/reporters/web-app-template/src/components/VulnerabilitiesTable.jsx
index aaeabde7cc4fb..e19dffe55993b 100644
--- a/plugins/reporters/web-app-template/src/components/VulnerabilitiesTable.jsx
+++ b/plugins/reporters/web-app-template/src/components/VulnerabilitiesTable.jsx
@@ -72,6 +72,65 @@ class VulnerabilitiesTable extends React.Component {
 
         const columns = [];
 
+        if (showExcludesColumn) {
+            columns.push({
+                align: 'right',
+                filters: (() => [
+                    {
+                        text: (
+                            <span>
+                                <FileExcelOutlined className="ort-excluded" />
+                                {' '}
+                                Excluded
+                            </span>
+                        ),
+                        value: 'excluded'
+                    },
+                    {
+                        text: (
+                            <span>
+                                <FileAddOutlined />
+                                {' '}
+                                Included
+                            </span>
+                        ),
+                        value: 'included'
+                    }
+                ])(),
+                filteredValue: filteredInfo.excludes || null,
+                key: 'excludes',
+                onFilter: (value, webAppVulnerability) => {
+                    const { isExcluded } = webAppVulnerability.package;
+
+                    return (isExcluded && value === 'excluded') || (!isExcluded && value === 'included');
+                },
+                render: (webAppVulnerability) => {
+                    const webAppPackage = webAppVulnerability.package;
+
+                    if (webAppPackage) {
+                        return webAppPackage.isExcluded
+                            ? (
+                            <span className="ort-excludes">
+                                <Tooltip
+                                    placement="right"
+                                    title={Array.from(webAppPackage.excludeReasons).join(', ')}
+                                >
+                                    <FileExcelOutlined className="ort-excluded" />
+                                </Tooltip>
+                            </span>
+                                )
+                            : (
+                            <FileAddOutlined />
+                                );
+                    }
+
+                    return null;
+                },
+                responsive: ['md'],
+                width: '2em'
+            });
+        }
+
         columns.push({
             align: 'center',
             dataIndex: 'severityIndex',
@@ -166,65 +225,6 @@ class VulnerabilitiesTable extends React.Component {
             width: '5em'
         });
 
-        if (showExcludesColumn) {
-            columns.push({
-                align: 'right',
-                filters: (() => [
-                    {
-                        text: (
-                            <span>
-                                <FileExcelOutlined className="ort-excluded" />
-                                {' '}
-                                Excluded
-                            </span>
-                        ),
-                        value: 'excluded'
-                    },
-                    {
-                        text: (
-                            <span>
-                                <FileAddOutlined />
-                                {' '}
-                                Included
-                            </span>
-                        ),
-                        value: 'included'
-                    }
-                ])(),
-                filteredValue: filteredInfo.excludes || null,
-                key: 'excludes',
-                onFilter: (value, webAppVulnerability) => {
-                    const { isExcluded } = webAppVulnerability.package;
-
-                    return (isExcluded && value === 'excluded') || (!isExcluded && value === 'included');
-                },
-                render: (webAppVulnerability) => {
-                    const webAppPackage = webAppVulnerability.package;
-
-                    if (webAppPackage) {
-                        return webAppPackage.isExcluded
-                            ? (
-                            <span className="ort-excludes">
-                                <Tooltip
-                                    placement="right"
-                                    title={Array.from(webAppPackage.excludeReasons).join(', ')}
-                                >
-                                    <FileExcelOutlined className="ort-excluded" />
-                                </Tooltip>
-                            </span>
-                                )
-                            : (
-                            <FileAddOutlined />
-                                );
-                    }
-
-                    return null;
-                },
-                responsive: ['md'],
-                width: '2em'
-            });
-        }
-
         columns.push(
             {
                 dataIndex: 'packageName',