Merge pull request #356 from TykTechnologies/TUI-44/linting-and-others

TUI-44: linting and others
TykTechnologies · Mar 6, 2024 · 5e926ec · 5e926ec
2 parents 9c7b416 + 1da337c
commit 5e926ec
Show file tree

Hide file tree

Showing 132 changed files with 2,472 additions and 5,793 deletions.
diff --git a/.eslintrc b/.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",

diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml
@@ -45,12 +45,20 @@ jobs:
           -Dsonar.organization=tyktechnologies
           -Dsonar.projectKey=TykTechnologies_tyk-ui
           -Dsonar.sources=./src
-          -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.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/components/EditableList/**/*.js,src/form/redux-form/**/*.js,src/hooks/**/*,src/utils/**/*
+          -Dsonar.cpd.exclusions=**/*.test.js,src/form/redux-form/**/*,src/common/fonts/**/*,src/form/components/Combobox/*.js,src/form/components/Input/*.js,src/form/components/EditableList/**/*.js,src/form/redux-form/**/*.js,src/hooks/**/*,src/utils/**/*
           -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 }}

diff --git a/.github/workflows/sonarcloud.yml b/.github/workflows/sonarcloud.yml
@@ -23,12 +23,20 @@ jobs:
           -Dsonar.organization=tyktechnologies
           -Dsonar.projectKey=TykTechnologies_tyk-ui
           -Dsonar.sources=./src
-          -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.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/components/EditableList/**/*.js,src/form/redux-form/**/*.js,src/hooks/**/*,src/utils/**/*
+          -Dsonar.cpd.exclusions=**/*.test.js,src/form/redux-form/**/*,src/common/fonts/**/*,src/form/components/Combobox/*.js,src/form/components/Input/*.js,src/form/components/EditableList/**/*.js,src/form/redux-form/**/*.js,src/hooks/**/*,src/utils/**/*
           -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 }}
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,5 @@ coverage
 .nyc_output
 *DS_Store
 cypress/screenshots
+.vscode
+.scannerwork
diff --git a/lib/index.css b/lib/index.css
diff --git a/lib/index.css.map b/lib/index.css.map
diff --git a/lib/index.js b/lib/index.js
diff --git a/lib/index.js.map b/lib/index.js.map
diff --git a/lib/sass/common/sass/reset.scss b/lib/sass/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;
 }
 

diff --git a/lib/sass/common/sass/typography.scss b/lib/sass/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;
-  }
-}
diff --git a/lib/sass/components/Panel/sass/Panel.scss b/lib/sass/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;

diff --git a/lib/sass/components/Table/sass/Table.scss b/lib/sass/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;
       }

diff --git a/lib/sass/form/components/Combobox2/sass/Combobox.scss b/lib/sass/form/components/Combobox2/sass/Combobox.scss
@@ -116,7 +116,6 @@
   &__text-value {
     font-family: $font-family-medium;
     font-size: text-scale('sm');
-    line-height: line-height('sm');
     padding: 9px 5px;
     width: 100%;
     overflow: hidden;
@@ -145,6 +144,7 @@
     cursor: pointer;
     outline: none;
     transition: all .2s;
+    color: $text-color;
 
     &--expanded {
       transform: rotate(180deg);
@@ -168,6 +168,7 @@
 
   &.tyk-form-group--rounded-corners {
     border-radius: $general-border-radius;
+    z-index: 1081;
   }
 
   .tyk-combobox2__combobox-search {
@@ -217,10 +218,3 @@
     }
   }
 }
-.tyk-combobox2__values-container-trigger {
-  color: $text-color;
-}
-
-.tyk-combobox2__combobox-dropdown.tyk-form-group--rounded-corners {
-  z-index: 1081;
-}
diff --git a/lib/sass/form/components/Dropdown/sass/Dropdown.scss b/lib/sass/form/components/Dropdown/sass/Dropdown.scss
@@ -108,6 +108,8 @@
 
   &:hover {
     color: $tyk-dropdown-item-hover-text-color;
+    background-color: $tyk-dropdown-item-background-hover;
+    text-decoration: none;
   }
 
   .badge {
@@ -117,11 +119,6 @@
     margin-top: -4px;
     margin-left: 6px;
   }
-
-  &:hover {
-    background-color: $tyk-dropdown-item-background-hover;
-    text-decoration: none;
-  }
 }
 
 .tyk-dropdown--relative.opened {

diff --git a/lib/sass/form/components/EditableList/sass/EditableList.scss b/lib/sass/form/components/EditableList/sass/EditableList.scss
@@ -23,8 +23,8 @@
       border-bottom-left-radius: 0px;
       border-top-right-radius: 3px;
       border-bottom-right-radius: 3px;
-      padding-bottom: 11px;
-      padding: map-get($spacing, 'sm') map-get($spacing, 'base') 11px map-get($spacing, 'base');
+      padding-block: map-get($spacing, 'sm') 11px;
+      padding-inline: map-get($spacing, 'base');
     }
   }
 
@@ -43,11 +43,23 @@
 
 .tyk-editable-list__header {
   padding-top: map-get($spacing, 'base');
-  border-bottom: 1px solid theme-color('background', 'dark');
-  color: $text-color;
   font-size: 11px;
   padding-bottom: map-get($spacing, 'base');
   text-transform: uppercase;
+  background-color: white;
+  border-top-left-radius: $general-border-radius;
+  border-top-right-radius: $general-border-radius;
+  border: $general-border-width solid theme-color('default', 'light');
+  border-bottom: 1px solid theme-color('default', 'light') !important;
+  color: $text-color !important;
+  font-family: $font-family-bold;
+  margin-top: map-get($spacing, 'sm');
+
+  & + .tyk-editable-list-items.table {
+      border-top: none;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+  }
 
   .tyk-row {
     margin: 0;
@@ -186,20 +198,3 @@
       margin-right: map-get($spacing, 'sm');
   }
 }
-
-.tyk-editable-list__header {
-    background-color: white;
-    border-top-left-radius: $general-border-radius;
-    border-top-right-radius: $general-border-radius;
-    border: $general-border-width solid theme-color('default', 'light');
-    border-bottom: 1px solid theme-color('default', 'light') !important;
-    color: $text-color !important;
-    font-family: $font-family-bold;
-    margin-top: map-get($spacing, 'sm');
-
-    & + .tyk-editable-list-items.table {
-        border-top: none;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-}