From 3bf9bd73ae39e0f6c5466ac5a4e6573efa50b2eb Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Tue, 20 Apr 2021 16:22:23 +0200
Subject: [PATCH] Fix/overall bugs (#271)

* fix: reporting

* fix: center icon

* fix: paths in featureview

* fix: revert path in passwordauth

* fix: remove console log
---
 .../Reporting/ReportCard/ReportCard.jsx       | 50 +++++++++++++----
 .../src/component/Reporting/Reporting.jsx     | 16 ++++--
 .../component/Reporting/Reporting.module.scss |  1 +
 .../Reporting/ReportingContainer.jsx          |  5 +-
 .../feature/FeatureView/FeatureView.jsx       | 56 ++++++++++---------
 5 files changed, 85 insertions(+), 43 deletions(-)

diff --git a/frontend/src/component/Reporting/ReportCard/ReportCard.jsx b/frontend/src/component/Reporting/ReportCard/ReportCard.jsx
index bd1952f71a..6e93c9b027 100644
--- a/frontend/src/component/Reporting/ReportCard/ReportCard.jsx
+++ b/frontend/src/component/Reporting/ReportCard/ReportCard.jsx
@@ -21,30 +21,45 @@ const ReportCard = ({ features }) => {
     };
 
     const getPotentiallyStaleToggles = activeToggles => {
-        const result = activeToggles.filter(feature => isFeatureExpired(feature) && !feature.stale);
+        const result = activeToggles.filter(
+            feature => isFeatureExpired(feature) && !feature.stale
+        );
 
         return result;
     };
 
-    const getHealthRating = (total, staleTogglesCount, potentiallyStaleTogglesCount) => {
+    const getHealthRating = (
+        total,
+        staleTogglesCount,
+        potentiallyStaleTogglesCount
+    ) => {
         const startPercentage = 100;
 
         const stalePercentage = (staleTogglesCount / total) * 100;
 
-        const potentiallyStalePercentage = (potentiallyStaleTogglesCount / total) * 100;
+        const potentiallyStalePercentage =
+            (potentiallyStaleTogglesCount / total) * 100;
 
-        return Math.round(startPercentage - stalePercentage - potentiallyStalePercentage);
+        return Math.round(
+            startPercentage - stalePercentage - potentiallyStalePercentage
+        );
     };
 
     const total = features.length;
     const activeTogglesArray = getActiveToggles();
-    const potentiallyStaleToggles = getPotentiallyStaleToggles(activeTogglesArray);
+    const potentiallyStaleToggles = getPotentiallyStaleToggles(
+        activeTogglesArray
+    );
 
     const activeTogglesCount = activeTogglesArray.length;
     const staleTogglesCount = features.length - activeTogglesCount;
     const potentiallyStaleTogglesCount = potentiallyStaleToggles.length;
 
-    const healthRating = getHealthRating(total, staleTogglesCount, potentiallyStaleTogglesCount);
+    const healthRating = getHealthRating(
+        total,
+        staleTogglesCount,
+        potentiallyStaleTogglesCount
+    );
 
     const healthLessThan50 = healthRating < 50;
     const healthLessThan75 = healthRating < 75;
@@ -71,7 +86,9 @@ const ReportCard = ({ features }) => {
     const renderPotentiallyStaleToggles = () => (
         <>
             <ReportProblemOutlinedIcon className={styles.danger} />
-            <span>{potentiallyStaleTogglesCount} potentially stale toggles</span>
+            <span>
+                {potentiallyStaleTogglesCount} potentially stale toggles
+            </span>
         </>
     );
 
@@ -82,10 +99,16 @@ const ReportCard = ({ features }) => {
                     <h2 className={styles.header}>Toggle report</h2>
                     <ul className={styles.reportCardList}>
                         <li>
-                            <ConditionallyRender condition={activeTogglesCount} show={renderActiveToggles} />
+                            <ConditionallyRender
+                                condition={activeTogglesCount}
+                                show={renderActiveToggles}
+                            />
                         </li>
                         <li>
-                            <ConditionallyRender condition={staleTogglesCount} show={renderStaleToggles} />
+                            <ConditionallyRender
+                                condition={staleTogglesCount}
+                                show={renderStaleToggles}
+                            />
                         </li>
                         <li>
                             <ConditionallyRender
@@ -99,8 +122,10 @@ const ReportCard = ({ features }) => {
                     <h2 className={styles.header}>Health rating</h2>
                     <div className={styles.reportCardHealthInnerContainer}>
                         <ConditionallyRender
-                            condition={healthRating}
-                            show={<p className={healthClasses}>{healthRating}%</p>}
+                            condition={healthRating > -1}
+                            show={
+                                <p className={healthClasses}>{healthRating}%</p>
+                            }
                         />
                     </div>
                 </div>
@@ -108,7 +133,8 @@ const ReportCard = ({ features }) => {
                     <h2 className={styles.header}>Potential actions</h2>
                     <div className={styles.reportCardActionContainer}>
                         <p className={styles.reportCardActionText}>
-                            Review your feature toggles and delete unused toggles.
+                            Review your feature toggles and delete unused
+                            toggles.
                         </p>
                     </div>
                 </div>
diff --git a/frontend/src/component/Reporting/Reporting.jsx b/frontend/src/component/Reporting/Reporting.jsx
index 09bd2e0b65..578c0281a4 100644
--- a/frontend/src/component/Reporting/Reporting.jsx
+++ b/frontend/src/component/Reporting/Reporting.jsx
@@ -14,13 +14,16 @@ import { REPORTING_SELECT_ID } from '../../testIds';
 import styles from './Reporting.module.scss';
 
 const Reporting = ({ fetchFeatureToggles, projects }) => {
-    const [projectOptions, setProjectOptions] = useState([{ key: 'default', label: 'Default' }]);
+    const [projectOptions, setProjectOptions] = useState([
+        { key: 'default', label: 'Default' },
+    ]);
     const [selectedProject, setSelectedProject] = useState('default');
 
     useEffect(() => {
         fetchFeatureToggles();
         setSelectedProject(projects[0].id);
-    }, [fetchFeatureToggles, projects]);
+        /* eslint-disable-next-line */
+    }, []);
 
     useEffect(() => {
         setProjectOptions(formatProjectOptions(projects));
@@ -29,7 +32,9 @@ const Reporting = ({ fetchFeatureToggles, projects }) => {
     const onChange = e => {
         const { value } = e.target;
 
-        const selectedProject = projectOptions.find(option => option.key === value);
+        const selectedProject = projectOptions.find(
+            option => option.key === value
+        );
 
         setSelectedProject(selectedProject.key);
     };
@@ -52,7 +57,10 @@ const Reporting = ({ fetchFeatureToggles, projects }) => {
 
     return (
         <React.Fragment>
-            <ConditionallyRender condition={multipleProjects} show={renderSelect} />
+            <ConditionallyRender
+                condition={multipleProjects}
+                show={renderSelect}
+            />
 
             <ReportCardContainer selectedProject={selectedProject} />
             <ReportToggleListContainer selectedProject={selectedProject} />
diff --git a/frontend/src/component/Reporting/Reporting.module.scss b/frontend/src/component/Reporting/Reporting.module.scss
index 8633270338..65aeff8b69 100644
--- a/frontend/src/component/Reporting/Reporting.module.scss
+++ b/frontend/src/component/Reporting/Reporting.module.scss
@@ -119,6 +119,7 @@
 
 .sortIcon {
     margin-left: 8px;
+    transform: translateY(6px);
 }
 
 .reportToggleListHeader {
diff --git a/frontend/src/component/Reporting/ReportingContainer.jsx b/frontend/src/component/Reporting/ReportingContainer.jsx
index 5e84adb3a8..cd0f52fd02 100644
--- a/frontend/src/component/Reporting/ReportingContainer.jsx
+++ b/frontend/src/component/Reporting/ReportingContainer.jsx
@@ -11,6 +11,9 @@ const mapDispatchToProps = {
     fetchFeatureToggles,
 };
 
-const ReportingContainer = connect(mapStateToProps, mapDispatchToProps)(Reporting);
+const ReportingContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(Reporting);
 
 export default ReportingContainer;
diff --git a/frontend/src/component/feature/FeatureView/FeatureView.jsx b/frontend/src/component/feature/FeatureView/FeatureView.jsx
index e9788d9fae..18d0096b1a 100644
--- a/frontend/src/component/feature/FeatureView/FeatureView.jsx
+++ b/frontend/src/component/feature/FeatureView/FeatureView.jsx
@@ -113,32 +113,36 @@ const FeatureView = ({
                 return null;
         }
     };
-    const getTabData = () => [
-        {
-            label: 'Activation',
-            component: getTabComponent('activation'),
-            name: 'strategies',
-            path: `/features/strategies/${featureToggleName}`,
-        },
-        {
-            label: 'Metrics',
-            component: getTabComponent('metrics'),
-            name: 'metrics',
-            path: `/features/metrics/${featureToggleName}`,
-        },
-        {
-            label: 'Variants',
-            component: getTabComponent('variants'),
-            name: 'variants',
-            path: `/features/variants/${featureToggleName}`,
-        },
-        {
-            label: 'Log',
-            component: getTabComponent('log'),
-            name: 'logs',
-            path: `/features/logs/${featureToggleName}`,
-        },
-    ];
+
+    const getTabData = () => {
+        const path = !!isFeatureView ? 'features' : 'archive';
+        return [
+            {
+                label: 'Activation',
+                component: getTabComponent('activation'),
+                name: 'strategies',
+                path: `/${path}/strategies/${featureToggleName}`,
+            },
+            {
+                label: 'Metrics',
+                component: getTabComponent('metrics'),
+                name: 'metrics',
+                path: `/${path}/metrics/${featureToggleName}`,
+            },
+            {
+                label: 'Variants',
+                component: getTabComponent('variants'),
+                name: 'variants',
+                path: `/${path}/variants/${featureToggleName}`,
+            },
+            {
+                label: 'Log',
+                component: getTabComponent('log'),
+                name: 'logs',
+                path: `/${path}/logs/${featureToggleName}`,
+            },
+        ];
+    };
 
     if (!featureToggle) {
         if (features.length === 0) {