fixes sonar issues (wip)

.eslintrc

@@ -24,6 +24,7 @@
     "jsx-a11y/no-noninteractive-element-interactions": "off",
     "jsx-a11y/anchor-is-valid": "off",
     "no-console": "off",
+    "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"],
     "no-unused-expressions": "off",
     "import/no-extraneous-dependencies": "off",
     "import/prefer-default-export": "off",

.github/workflows/run-tests.yml

@@ -45,12 +45,20 @@ jobs:
           -Dsonar.organization=tyktechnologies
           -Dsonar.projectKey=TykTechnologies_tyk-ui
           -Dsonar.sources=./src
+          -Dsonar.exclusions=src/common/sass/fontawesome.scss,src/common/sass/tykon.scss
           -Dsonar.coverage.exclusions=cypress/**/*.js,**/*.test.js,src/form/components/Combobox/*.js,src/form/components/Input/*.js,src/form/redux-form/**/*.js
           -Dsonar.cpd.exclusions=**/*.test.js,src/form/redux-form/**/*,src/common/fonts/**/*,src/form/components/Combobox/*.js,src/form/components/Input/*.js
           -Dsonar.test.inclusions=**/*.test.js
           -Dsonar.tests=./src
           -Dsonar.javascript.lcov.reportPaths=coverage/lcov.info
           -Dsonar.eslint.eslintconfigpath=.eslintrc
+          -Dsonar.issue.ignore.multicriteria=S6847,S6819,S3358
+          -Dsonar.issue.ignore.multicriteria.S6847.ruleKey=javascript:S6847
+          -Dsonar.issue.ignore.multicriteria.S6847.resourceKey=**/*
+          -Dsonar.issue.ignore.multicriteria.S6819.ruleKey=javascript:S6819
+          -Dsonar.issue.ignore.multicriteria.S6819.resourceKey=**/*
+          -Dsonar.issue.ignore.multicriteria.S3358.ruleKey=javascript:S3358
+          -Dsonar.issue.ignore.multicriteria.S3358.resourceKey=**/*
     env:
       CI: true
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/sonarcloud.yml

@@ -23,12 +23,20 @@ jobs:
           -Dsonar.organization=tyktechnologies
           -Dsonar.projectKey=TykTechnologies_tyk-ui
           -Dsonar.sources=./src
+          -Dsonar.exclusions=src/common/sass/fontawesome.scss,src/common/sass/tykon.scss
           -Dsonar.coverage.exclusions=cypress/**/*.js,**/*.test.js,src/form/components/Combobox/*.js,src/form/components/Input/*.js,src/form/redux-form/**/*.js
           -Dsonar.cpd.exclusions=**/*.test.js,src/form/redux-form/**/*,src/common/fonts/**/*,src/form/components/Combobox/*.js,src/form/components/Input/*.js
           -Dsonar.test.inclusions=**/*.test.js
           -Dsonar.tests=./src
           -Dsonar.javascript.lcov.reportPaths=coverage/lcov.info
           -Dsonar.eslint.eslintconfigpath=.eslintrc
+          -Dsonar.issue.ignore.multicriteria=S6847,S6819,S3358
+          -Dsonar.issue.ignore.multicriteria.S6847.ruleKey=javascript:S6847
+          -Dsonar.issue.ignore.multicriteria.S6847.resourceKey=**/*
+          -Dsonar.issue.ignore.multicriteria.S6819.ruleKey=javascript:S6819
+          -Dsonar.issue.ignore.multicriteria.S6819.resourceKey=**/*
+          -Dsonar.issue.ignore.multicriteria.S3358.ruleKey=javascript:S3358
+          -Dsonar.issue.ignore.multicriteria.S3358.resourceKey=**/*
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

.gitignore

@@ -5,3 +5,4 @@ coverage
 *DS_Store
 cypress/screenshots
 .vscode
+.scannerwork

src/common/sass/reset.scss

@@ -2,8 +2,8 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
   margin: 0;
   padding: 0;
   border: 0;
-  font-size: 100%;
   font: inherit;
+  font-size: 100%;
   vertical-align: baseline;
 }
 

src/common/sass/typography.scss

@@ -42,6 +42,11 @@ label {
   font-size: text-scale('sm');
   line-height: line-height('sm');
   font-family: $font-family-regular;
+
+  a {
+    font-size: text-scale('sm');
+    text-decoration: underline;
+  }
 }
 
 strong {
@@ -52,7 +57,7 @@ a:not(.tyk-button) {
   cursor: pointer;
   color: $text-color;
   font-family: $font-family-regular;
-  
+
   &.link--bold {
     font-family: $font-family-bold;
   }
@@ -66,14 +71,6 @@ a:not(.tyk-button) {
   }
 }
 
-p,
-label {
-  a {
-    font-size: text-scale('sm');
-    text-decoration: underline;
-  }
-}
-
 .font-family-regular {
   font-family: $font-family-regular;
 }
@@ -94,18 +91,9 @@ label {
 }
 
 .text {
-  &--primary {
-    color: theme-color('primary', 'base');
-  }
-  &--danger {
-    color: theme-color('danger', 'base');
-  }
   &--info {
     color: theme-color('info', 'base');
   }
-  &-warning {
-    color: theme-color('warning', 'base');
-  }
   &--medium {
     font-family: $font-family-medium;
   }
@@ -123,6 +111,25 @@ label {
   &--underline {
     text-decoration: underline;
   }
+
+  &--default-light {
+    color: theme-color('default', 'light') !important;
+  }
+  &--default {
+    color: theme-color('default', 'base') !important;
+  }
+  &--primary {
+    color: theme-color('primary', 'base') !important;
+  }
+  &--danger {
+    color: theme-color('danger', 'base') !important;
+  }
+  &--success {
+    color: theme-color('success', 'base') !important;
+  }
+  &--warning {
+    color: theme-color('warning', 'base') !important;
+  }
 }
 
 td.text-ellipsis {
@@ -160,24 +167,3 @@ td.text-ellipsis {
     margin-left: 5px;
   }
 }
-
-.text {
-  &--default-light {
-    color: theme-color('default', 'light') !important;
-  }
-  &--default {
-    color: theme-color('default', 'base') !important;
-  }
-  &--primary {
-    color: theme-color('primary', 'base') !important;
-  }
-  &--danger {
-    color: theme-color('danger', 'base') !important;
-  }
-  &--success {
-    color: theme-color('success', 'base') !important;
-  }
-  &--warning {
-    color: theme-color('warning', 'base') !important;
-  }
-}

src/components/Chart/index.js

@@ -1,5 +1,5 @@
 import React, {
-  useState, useEffect, useRef, memo,
+  useState, useEffect, useMemo, useRef, memo,
 } from 'react';
 import PropTypes from 'prop-types';
 import * as echarts from 'echarts';
@@ -26,7 +26,7 @@ function Chart({
   zoomEnd,
   title,
   seriesConfig = [],
-  noDataComponent = null,
+  noDataComponent: noDataComponentProp = null,
   zoomColors,
   style,
 }) {
@@ -38,6 +38,17 @@ function Chart({
     }
   };
 
+  const noDataComponent = useMemo(
+    () => (noDataComponentProp
+      ? noDataComponentProp()
+      : (
+        <Message theme="info">
+          No data to display
+        </Message>
+      )),
+    [noDataComponentProp],
+  );
+
   const lineBarChart = {
     defaultOpts: fromJS({
       title: {
@@ -412,16 +423,9 @@ function Chart({
         ref={chartWrapperRef}
       />
       {
-        /* eslint-disable-next-line no-nested-ternary */
         chartHasData()
           ? null
           : noDataComponent
-            ? noDataComponent()
-            : (
-              <Message theme="info">
-                No data to display
-              </Message>
-            )
       }
     </div>
   );

src/components/List/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { fromJS } from 'immutable';
 import ListItem from './js/ListItem';
 
 function List(props) {
@@ -28,7 +27,7 @@ function List(props) {
   };
 
   const getListStyle = () => {
-    const styleCopy = fromJS(style).toJS();
+    const styleCopy = structuredClone(style);
     if (labelwidth) {
       styleCopy.flexBasis = `calc(100% - ${labelwidth} - 20px)`;
     }

src/components/Modal/index.js

@@ -96,6 +96,9 @@ Modal.Header = ({ children }) => {
     </div>
   );
 };
+Modal.Header.propTypes = {
+  children: PropTypes.element,
+};
 /* eslint-disable-next-line */
 Modal.Title = ({ children }) => {
   console.warn('%cModal.Title%c is deprecated.', 'font-weight: bold', '');
@@ -105,6 +108,9 @@ Modal.Title = ({ children }) => {
     </h4>
   );
 };
+Modal.Title.propTypes = {
+  children: PropTypes.element,
+};
 
 Modal.propTypes = {
   children: PropTypes.oneOfType([

src/components/Panel/sass/Panel.scss

@@ -15,18 +15,6 @@
     border: $general-border-width solid theme-color('danger', 'base');
   }
 
-  &__header {
-    align-items: center;
-    border-bottom: 1px solid $panel-default-border-bottom-color;
-    display: flex;
-    font-family: $font-family-regular;
-
-    > .tyk-icon,
-    > .tyk-tooltip__wrapper {
-      margin-left: 5px;
-    }
-  }
-
   .tyk-panel {
     border: $general-border-width solid theme-color('default', 'light');
     box-shadow: none;
@@ -57,13 +45,11 @@
 
     .tyk-panel__header {
       @include panel-variant($panel-primary-header-color, $panel-primary-header-text-color);
+      border: $panel-primary-border-color;
     }
 
     .tyk-panel__body {
-        @include panel-variant($panel-primary-body-color, $panel-primary-body-text-color);
-      }
-    .tyk-panel__header {
-      border: $panel-primary-border-color;
+      @include panel-variant($panel-primary-body-color, $panel-primary-body-text-color);
     }
 
     & .tyk-form-group {
@@ -121,6 +107,9 @@
 }
 
 .tyk-panel__header {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid $panel-default-border-bottom-color;
   border-radius: $panel-border-radius;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
@@ -129,6 +118,11 @@
   padding: $padding-y-panel-header $padding-x-panel-header;
   position: relative;
 
+  > .tyk-icon,
+  > .tyk-tooltip__wrapper {
+    margin-left: 5px;
+  }
+
   .tyk-panel--collapsed & {
     border-bottom-left-radius: $panel-border-radius;
     border-bottom-right-radius: $panel-border-radius;

src/components/Table/sass/Table.scss

@@ -33,6 +33,7 @@
       line-height: line-height('sm');
       font-family: $font-family-bold;
       text-transform: uppercase;
+      padding: $table-th-padding;
 
       &:last-child {
         border-right: none;
@@ -49,10 +50,6 @@
       }
     }
 
-    > thead th {
-      padding: $table-th-padding;
-    }
-
     > tbody tr:hover {
       background: rgba(theme-color('background', 'light'), 0.4);
     }
@@ -67,7 +64,7 @@
       &:last-child {
         border-right: none;
       }
-      
+
       vertical-align: middle;
 
       &.fit {
@@ -97,7 +94,7 @@
       border-top: 1px solid theme-color('default', 'light');
       transition: all .4s linear;
       border-radius: $general-border-radius;
-  
+
       &.clickable {
         cursor: pointer;
       }

src/components/Tabs/index.js

@@ -207,7 +207,7 @@ function Tabs(props) {
 
     const key = tempPath.shift();
 
-    return !!(tempTabs && tempTabs[key]);
+    return Boolean(tempTabs?.[key]);
   };
 
   const context = useMemo(() => ({

src/components/Tabs/js/TabContent.js

@@ -33,7 +33,7 @@ function TabContent(props) {
   useEffect(() => {
     if (
       tabExists(path) && tabData?.title
-      && (prevTabData?.title !== tabData?.title || prevTabData.selected !== tabData.selected)
+      && (prevTabData?.title !== tabData?.title || prevTabData?.selected !== tabData.selected)
     ) {
       const tempTabData = { ...tabData };
       updateTab(tempTabData, path);

src/components/Toast/Toast.test.js

@@ -4,7 +4,6 @@ import toast from './index';
 
 /* eslint-disable react/destructuring-assignment */
 function Component(props) {
-  // eslint-disable-next-line react/jsx-no-useless-fragment
   return props.children || <button type="button" onClick={props.onClick}>Show Toast</button>;
 }
 

src/components/Toast/js/ToastContainer.js

@@ -31,8 +31,9 @@ function ToastContainer(props) {
     const tempMessages = { ...messages };
     delete tempMessages[index];
     setMessages((prevMessages) => {
-      const { [index]: messageToBeRemoved, ...restMessages } = prevMessages;
-      return restMessages;
+      const newMessages = { ...prevMessages };
+      delete newMessages[index];
+      return newMessages;
     });
   };