🪟🧹 Stylelint (#15452)

* Stylelint added

* lint staged addition

* Found the right incantation

* WIP

* Typescript import

* stylelint --fix

* Stylelint runs clean!

* More linting!

* paths are hard

* linting

* Tim Code Review

* lint part of build

* Better selector class pattern rule

* Tim CR

* Linting + --fix

* Fixing stylelint issue

* Tim CR

.vscode/settings.json

@@ -8,6 +8,7 @@
   "editor.detectIndentation": true,
   "eslint.format.enable": true,
   "eslint.run": "onType",
+  "stylelint.validate": ["css", "scss"],
   "[javascript]": {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",

airbyte-webapp/.stylelintrc

@@ -0,0 +1,18 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-standard-scss",
+    "stylelint-config-css-modules",
+    "stylelint-config-prettier-scss"
+  ],
+  "rules": {
+    "selector-class-pattern": "^[a-z][a-zA-Z0-9]+$",
+    "color-function-notation": null,
+    "font-family-name-quotes": null,
+    "scss/dollar-variable-empty-line-before": null,
+    "scss/dollar-variable-pattern": null,
+    "scss/percent-placeholder-pattern": null,
+    "value-keyword-case": null
+  },
+  "ignoreFiles": ["**/build/**", "**/dist/**"]
+}

airbyte-webapp/build.gradle

@@ -104,8 +104,16 @@ task copyNginx(type: Copy) {
     into "build/docker/bin/nginx"
 }
 
+task stylelint(type: NpmTask) {
+    dependsOn npmInstall
+    args = ['run', 'stylelint']
+    inputs.files commonConfigs
+    inputs.file '.stylelintrc'
+    inputs.dir 'src'
+}
+
 // Those tasks should be run as part of the "check" task
-check.dependsOn validateLinks, licenseCheck, test
+check.dependsOn validateLinks, licenseCheck, test, stylelint
 
 build.dependsOn buildStorybook
 

airbyte-webapp/package.json

@@ -17,6 +17,8 @@
     "storybook": "start-storybook -p 9009 --quiet",
     "build:storybook": "build-storybook -o 'build/storybook'",
     "lint": "eslint --ext js,ts,tsx src",
+    "stylelint": "stylelint \"**/*.{css,scss}\"",
+    "stylelint-check": "stylelint-config-prettier-scss-check",
     "license-check": "node ./scripts/license-check.js",
     "generate-client": "orval",
     "validate-links": "ts-node --skip-project ./scripts/validate-links.ts"
@@ -119,6 +121,11 @@
     "react-scripts": "^5.0.1",
     "react-select-event": "^5.5.0",
     "storybook-addon-mock": "^2.4.1",
+    "stylelint": "^14.9.1",
+    "stylelint-config-css-modules": "^4.1.0",
+    "stylelint-config-prettier-scss": "^0.0.1",
+    "stylelint-config-standard": "^26.0.0",
+    "stylelint-config-standard-scss": "^5.0.0",
     "tar": "^6.1.11",
     "tmpl": "^1.0.5",
     "ts-node": "^10.8.1",

airbyte-webapp/public/index.css

@@ -3,6 +3,7 @@ body, html {
     height: 100%;
     width: 100%;
 }
+
 noscript {
     box-sizing: border-box;
     background: #F8F8FF;
@@ -13,13 +14,14 @@ noscript {
     align-items: center;
     flex-direction: column;
 }
+
 .card {
     width: 100%;
     max-width: 600px;
     padding: 50px 10px;
-    background: #FFFFFF;
+    background: #FFF;
     border-radius: 8px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 25%);
     border: 1px solid #E8E8ED;
     margin-top: 20px;
     text-align: center;
@@ -44,6 +46,7 @@ noscript {
     format("truetype"),
         /* Safari, Android, iOS */ url("/fonts/inter/Inter-Regular.svg#OpenSans")
     format("svg"); /* Legacy iOS */
+
     font-weight: normal;
     font-style: normal;
 }
@@ -61,6 +64,7 @@ noscript {
     format("truetype"),
         /* Safari, Android, iOS */ url("/fonts/inter/Inter-Medium.svg#OpenSans")
     format("svg"); /* Legacy iOS */
+
     font-weight: 500;
     font-style: normal;
 }
@@ -77,6 +81,7 @@ noscript {
         /* Modern Browsers */ url("/fonts/inter/Inter-Bold.ttf") format("truetype"),
         /* Safari, Android, iOS */ url("/fonts/inter/Inter-Bold.svg#OpenSans")
     format("svg"); /* Legacy iOS */
+
     font-weight: bold;
     font-style: normal;
 }
@@ -95,6 +100,7 @@ noscript {
     format("truetype"),
         /* Safari, Android, iOS */
     url("/fonts/montserrat/Montserrat-Bold.svg#OpenSans") format("svg"); /* Legacy iOS */
+
     font-weight: bold;
     font-style: normal;
 }
@@ -114,6 +120,7 @@ noscript {
     format("truetype"),
         /* Safari, Android, iOS */
     url("/fonts/montserrat/Montserrat-Regular.svg#OpenSans") format("svg"); /* Legacy iOS */
+
     font-weight: normal;
     font-style: normal;
 }
@@ -133,6 +140,7 @@ noscript {
     format("truetype"),
         /* Safari, Android, iOS */
     url("/fonts/robotoMono/RobotoMono-Regular.svg#OpenSans") format("svg"); /* Legacy iOS */
+
     font-weight: normal;
     font-style: normal;
 }
@@ -152,6 +160,7 @@ noscript {
     format("truetype"),
         /* Safari, Android, iOS */
     url("/fonts/courierPrime/CourierPrime-Regular.svg#OpenSans") format("svg"); /* Legacy iOS */
+
     font-weight: normal;
     font-style: normal;
 }
@@ -171,6 +180,7 @@ noscript {
     format("truetype"),
         /* Safari, Android, iOS */
     url("/fonts/shrikhand/Shrikhand-Regular.svg#OpenSans") format("svg"); /* Legacy iOS */
+
     font-weight: normal;
     font-style: normal;
 }

airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorRow.module.scss

@@ -27,6 +27,5 @@
 .actions {
   display: flex;
   flex-direction: row;
-  flex-wrap: nowrap;
   gap: variables.$spacing-md;
 }

airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss

@@ -21,6 +21,7 @@
   &.darkBlue {
     background: colors.$dark-blue-100;
   }
+
   &.green {
     background: colors.$green;
     color: colors.$white;
@@ -52,7 +53,7 @@
   font-weight: 600;
   font-size: 10px;
   color: colors.$white;
-  padding: 3px 0 3px;
+  padding: 3px 0;
 
   &.light {
     font-weight: 500;

airbyte-webapp/src/components/JobItem/components/MainInfo.module.scss

@@ -37,6 +37,19 @@
     }
   }
 
+  &.open {
+    .arrow {
+      transform: rotate(-0deg);
+    }
+  }
+
+  &.failed {
+    .arrow,
+    .lastAttempt {
+      color: colors.$red;
+    }
+  }
+
   .timestampCell {
     display: flex;
     justify-content: flex-end;
@@ -56,27 +69,14 @@
       font-size: 22px;
       margin: 0 30px 0 50px;
 
+      div:hover > &,
       div:hover > div > &,
-      div:hover > div > div > &,
-      div:hover > & {
+      div:hover > div > div > & {
         opacity: 1;
       }
     }
   }
 
-  &.open {
-    .arrow {
-      transform: rotate(-0deg);
-    }
-  }
-
-  &.failed {
-    .arrow,
-    .lastAttempt {
-      color: colors.$red;
-    }
-  }
-
   &.open:not(.failed) {
     border-bottom: variables.$border-thin solid colors.$grey-100;
   }

airbyte-webapp/src/components/LoadingBackdrop/LoadingBackdrop.module.scss

@@ -7,10 +7,12 @@
 
 .loadingBackdropContainer {
   @extend %cover;
+
   position: relative;
 
   .backdrop {
     @extend %cover;
+
     position: absolute;
     background-color: colors.$white;
     opacity: 0.6;
@@ -19,6 +21,7 @@
 
   .spinnerContainer {
     @extend %cover;
+
     position: absolute;
     display: flex;
     align-items: center;

airbyte-webapp/src/components/Markdown/admonitions.module.scss

@@ -19,6 +19,7 @@
   &--warning {
     background-color: colors.$yellow-50;
     border-left-color: colors.$yellow-300;
+
     &::before {
       content: "⚠️";
     }
@@ -27,6 +28,7 @@
   &--danger {
     background-color: colors.$red-50;
     border-left-color: colors.$red-300;
+
     &::before {
       content: "⚠️";
     }

airbyte-webapp/src/components/Modal/Modal.module.scss

@@ -1,14 +1,14 @@
 @use "../../scss/colors";
 @use "../../scss/variables";
 
-@keyframes fadeIn {
+@keyframes fade-in {
   from {
     opacity: 0;
   }
 }
 
 .modal {
-  animation: fadeIn 0.2s ease-out;
+  animation: fade-in 0.2s ease-out;
   position: absolute;
   top: 0;
   left: 0;

airbyte-webapp/src/components/Modal/ModalBody.module.scss

@@ -4,6 +4,7 @@
   padding: variables.$spacing-lg variables.$spacing-xl;
   overflow: auto;
   max-width: 100%;
+
   &.paddingNone {
     padding: 0;
   }

airbyte-webapp/src/components/Spinner/Spinner.module.scss

@@ -4,10 +4,12 @@
   from {
     transform: rotate(0);
   }
+
   to {
     transform: rotate(359deg);
   }
 }
+
 .spinner {
   width: 42px;
   height: 42px;

airbyte-webapp/src/components/base/Switch/Switch.module.scss

@@ -1,7 +1,7 @@
 @use "../../../scss/colors";
 @use "../../../scss/variables";
 
-@mixin knobTransform($position, $small: false) {
+@mixin knob-transform($position, $small: false) {
   @if $position == left {
     transform: translateX(0);
   } @else if $small {
@@ -22,63 +22,6 @@
     height: 18px;
   }
 
-  .switchInput {
-    opacity: 0;
-    width: 0;
-    height: 0;
-
-    &:checked + .slider {
-      background-color: colors.$blue;
-
-      &:before {
-        @include knobTransform(right, false);
-      }
-
-      &.small:before {
-        @include knobTransform(right, true);
-      }
-
-      &.loading {
-        background-image: url("./ProgressReverse.svg");
-
-        &:before {
-          @include knobTransform(left, false);
-        }
-
-        &.small:before {
-          @include knobTransform(left, true);
-        }
-      }
-    }
-
-    &:not(:checked) + .slider {
-      &:before {
-        @include knobTransform(left, false);
-      }
-
-      &.small:before {
-        @include knobTransform(left, true);
-      }
-
-      &.loading {
-        background-image: url("./Progress.svg");
-
-        &:before {
-          @include knobTransform(right, false);
-        }
-
-        &.small:before {
-          @include knobTransform(right, true);
-        }
-      }
-    }
-
-    &:disabled + .slider {
-      opacity: 0.5;
-      cursor: auto;
-    }
-  }
-
   .slider {
     cursor: pointer;
     position: absolute;
@@ -91,12 +34,12 @@
     border-radius: 20px;
     border: 1px solid colors.$grey-200;
 
-    &.small:before {
+    &.small::before {
       height: 16px;
       width: 16px;
     }
 
-    &:before {
+    &::before {
       position: absolute;
       z-index: 1;
       content: "";
@@ -110,4 +53,61 @@
       border: 1px solid colors.$grey-200;
     }
   }
+
+  .switchInput {
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    &:checked + .slider {
+      background-color: colors.$blue;
+
+      &::before {
+        @include knob-transform(right, false);
+      }
+
+      &.small::before {
+        @include knob-transform(right, true);
+      }
+
+      &.loading {
+        background-image: url("./ProgressReverse.svg");
+
+        &::before {
+          @include knob-transform(left, false);
+        }
+
+        &.small::before {
+          @include knob-transform(left, true);
+        }
+      }
+    }
+
+    &:not(:checked) + .slider {
+      &::before {
+        @include knob-transform(left, false);
+      }
+
+      &.small::before {
+        @include knob-transform(left, true);
+      }
+
+      &.loading {
+        background-image: url("./Progress.svg");
+
+        &::before {
+          @include knob-transform(right, false);
+        }
+
+        &.small::before {
+          @include knob-transform(right, true);
+        }
+      }
+    }
+
+    &:disabled + .slider {
+      opacity: 0.5;
+      cursor: auto;
+    }
+  }
 }

airbyte-webapp/src/components/base/Text/heading.module.scss

@@ -2,7 +2,6 @@
 
 .heading {
   font-weight: 700;
-
   color: colors.$dark-blue;
   margin: 0;
   padding: 0;

airbyte-webapp/src/components/base/Tooltip/Tooltip.module.scss

@@ -10,12 +10,11 @@
 .tooltip {
   font-size: 12px;
   line-height: initial;
-
   padding: variables.$spacing-md;
   border-radius: 5px;
   max-width: 300px;
   z-index: z-indices.$tooltip;
-  box-shadow: 0px 2px 4px rgba(colors.$dark-blue, 0.12);
+  box-shadow: 0 2px 4px rgba(colors.$dark-blue, 0.12);
   background: rgba(colors.$dark-blue, 0.9);
   color: colors.$white;
 

airbyte-webapp/src/packages/cloud/views/auth/OAuthLogin/OAuthLogin.module.scss

@@ -10,19 +10,19 @@
   color: colors.$grey-800;
   text-transform: uppercase;
 
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     content: "";
     flex: 1 1;
     border-bottom: 1px solid colors.$grey-300;
     margin: auto;
   }
 
-  &:before {
+  &::before {
     margin-right: vars.$spacing-md;
   }
 
-  &:after {
+  &::after {
     margin-left: vars.$spacing-md;
   }
 }
@@ -37,6 +37,16 @@
   text-align: center;
 }
 
+.google {
+  background: colors.$white;
+  border: 1px solid colors.$grey-300;
+}
+
+.github {
+  background: #333;
+  color: colors.$white;
+}
+
 .google,
 .github {
   justify-content: center;
@@ -55,7 +65,7 @@
 
   &:hover,
   &:focus {
-    box-shadow: 0 1px 3px rgba(53, 53, 66, 0.2), 0 1px 2px rgba(53, 53, 66, 0.12), 0 1px 1px rgba(53, 53, 66, 0.14);
+    box-shadow: 0 1px 3px rgba(53, 53, 66, 20%), 0 1px 2px rgba(53, 53, 66, 12%), 0 1px 1px rgba(53, 53, 66, 14%);
   }
 
   & > img {
@@ -63,16 +73,6 @@
   }
 }
 
-.google {
-  background: colors.$white;
-  border: 1px solid colors.$grey-300;
-}
-
-.github {
-  background: #333;
-  color: colors.$white;
-}
-
 .error {
   margin-top: vars.$spacing-lg;
   color: colors.$red;

airbyte-webapp/src/packages/cloud/views/auth/components/PersonQuoteCover/PersonQuoteCover.module.scss

@@ -12,7 +12,7 @@
   top: 0;
   height: 100%;
   width: 100%;
-  background-image: url(../../../../../../../public/images/testimonials/cartdotcom-person-photo.png);
+  background-image: url("../../../../../../../public/images/testimonials/cartdotcom-person-photo.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -56,13 +56,14 @@
     line-height: 28px;
     text-align: justify;
 
-    &:before {
+    &::before {
       content: open-quote;
       font-size: 50px;
       position: absolute;
       top: 0;
     }
-    &:after {
+
+    &::after {
       content: close-quote;
       font-size: 50px;
       position: absolute;

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionName.module.scss

@@ -16,6 +16,14 @@
   position: relative;
 }
 
+.icon {
+  display: none;
+  position: absolute;
+  right: variables.$spacing-xl;
+  font-size: 18px;
+  color: colors.$blue;
+}
+
 .nameContainer {
   composes: textContainer;
   background-color: colors.$beige-100;
@@ -48,14 +56,6 @@
   }
 }
 
-.icon {
-  display: none;
-  position: absolute;
-  right: variables.$spacing-xl;
-  font-size: 18px;
-  color: colors.$blue;
-}
-
 .editingContainer {
   composes: textContainer;
   background-color: colors.$white;

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusMainInfo.module.scss

@@ -15,7 +15,6 @@
 .pathContainer {
   display: flex;
   flex-wrap: wrap;
-  flex-direction: row;
   justify-content: space-between;
   align-items: center;
 }

airbyte-webapp/src/scss/_colors.scss

@@ -93,11 +93,11 @@ $yellow: $yellow-500;
 
 // LEGACY - DEPRECATED
 
-$primaryColor12: rgba(103, 87, 255, 0.12);
+$primaryColor12: rgba(103, 87, 255, 12%);
 
-$shadowColor: rgba(0, 0, 0, 0.25);
-$cardShadowColor: rgba(26, 25, 77, 0.12);
+$shadowColor: rgba(0, 0, 0, 25%);
+$cardShadowColor: rgba(26, 25, 77, 12%);
 
 $lightRedColor: #ff8870;
 
-$transparentColor: rgba(255, 255, 255, 0);
+$transparentColor: rgba(255, 255, 255, 0%);

airbyte-webapp/src/scss/export.module.scss

@@ -3,6 +3,8 @@
 // New variables won't need to be added here, unless there would be any reason we need to access
 // its value from TypeScript.
 
+/* stylelint-disable */
+
 @use "./colors";
 @use "./fonts";
 

airbyte-webapp/src/utils/testutils.tsx

@@ -43,6 +43,7 @@ export async function render<
     renderResult = await rtlRender<Q, Container>(<div>{ui}</div>, { wrapper: Wrapper, ...renderOptions });
   });
 
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return renderResult!;
 }
 export const TestWrapper: React.FC = ({ children }) => (

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss

@@ -2,7 +2,7 @@
 @use "./DiffSection.module.scss";
 
 .accordionSubHeader {
-  @extend .sectionSubHeader;
+  @extend %sectionSubHeader;
 
   & .padLeft {
     padding-left: variables.$spacing-lg;
@@ -20,11 +20,11 @@
   padding-left: variables.$spacing-xl;
 
   & tbody > tr:first-of-type > td:nth-of-type(2) {
-    border-radius: variables.$border-radius-sm variables.$border-radius-sm 0px 0px;
+    border-radius: variables.$border-radius-sm variables.$border-radius-sm 0 0;
   }
 
   & tbody > tr:last-of-type > td:nth-of-type(2) {
-    border-radius: 0px 0px variables.$border-radius-sm variables.$border-radius-sm;
+    border-radius: 0 0 variables.$border-radius-sm variables.$border-radius-sm;
   }
 
   & tbody > tr:only-of-type > td:nth-of-type(2) {

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss

@@ -7,16 +7,18 @@
   flex-direction: column;
 }
 
-.sectionSubHeader {
+.sectionSubHeader,
+%sectionSubHeader {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0px variables.$spacing-md 0px variables.$spacing-2xl;
+  padding: 0 variables.$spacing-md 0 variables.$spacing-2xl;
   width: 100%;
   height: 22px;
 
   & th {
-    @extend .nameCell;
+    @extend %nameCell;
+
     text-align: left;
     font-weight: 400;
     font-size: 10px;
@@ -29,7 +31,8 @@
   }
 }
 
-.sectionHeader {
+.sectionHeader,
+%sectionHeader {
   font-size: 14px;
   font-weight: 500;
   line-height: 17px;

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss

@@ -22,6 +22,7 @@
   &.add {
     background-color: colors.$green-50;
   }
+
   &.remove {
     background-color: colors.$red-50;
   }
@@ -31,9 +32,11 @@
   &.plus {
     color: colors.$green;
   }
+
   &.minus {
     color: colors.$red;
   }
+
   &.mod {
     color: colors.$blue-100;
   }
@@ -49,10 +52,12 @@
 
 .cell {
   width: 228px;
+
   &.update {
     border-radius: variables.$border-radius-sm;
+
     & span {
-      background-color: rgba(98, 94, 255, 0.1);
+      background-color: rgba(98, 94, 255, 10%);
       padding: variables.$spacing-sm;
       border-radius: variables.$border-radius-sm;
     }

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss

@@ -3,20 +3,23 @@
 @use "./DiffSection.module.scss";
 
 .fieldHeader {
-  @extend .sectionHeader;
+  @extend %sectionHeader;
+
   padding: variables.$spacing-lg variables.$spacing-xl;
 }
 
 .fieldSubHeader {
-  @extend .sectionSubHeader;
-  padding: 0px variables.$spacing-sm 0px 35px;
+  @extend %sectionSubHeader;
+
+  padding: 0 variables.$spacing-sm 0 35px;
 
   .padLeft {
     padding-left: variables.$spacing-xl;
   }
 
   > div {
-    @extend .nameCell;
+    @extend %nameCell;
+
     text-align: left;
     font-weight: 400;
     font-size: 10px;
@@ -33,8 +36,8 @@
   li {
     list-style-type: none;
     list-style-position: inside;
-    margin: 0px;
-    padding: 0px;
+    margin: 0;
+    padding: 0;
     height: auto;
     font-weight: 400;
   }

airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss

@@ -15,6 +15,7 @@
   &.add {
     background-color: colors.$green-50;
   }
+
   &.remove {
     background-color: colors.$red-50;
   }
@@ -22,12 +23,15 @@
 
 .icon {
   margin-top: -1px;
+
   &.plus {
     color: colors.$green;
   }
+
   &.minus {
     color: colors.$red;
   }
+
   &.mod {
     color: colors.$blue-100;
   }
@@ -39,13 +43,15 @@
   border-radius: variables.$border-radius-sm;
   padding: variables.$spacing-sm variables.$spacing-md;
   width: 226px;
-  opacity: 50%;
+  opacity: 0.5;
   background: colors.$red-100;
 }
 
-.nameCell {
+.nameCell,
+%nameCell {
   width: 140px;
   text-align: left;
+
   & .row {
     display: flex;
     flex-direction: row;

airbyte-webapp/src/views/Connection/CatalogTree/CatalogTree.module.scss

@@ -2,13 +2,14 @@
 // of the CatalogTree component once we finish migrating to scss,
 // not only styles used directly in CatalogTree
 
-.headerCell {
+%headerCell {
   font-size: 10px;
   line-height: 13px;
 }
 
 .checkboxCell {
-  @extend .headerCell;
+  @extend %headerCell;
+
   max-width: 43px;
   text-align: center;
   display: flex;

airbyte-webapp/src/views/Connection/CatalogTree/StreamHeader.module.scss

@@ -5,9 +5,11 @@
 .icon {
   margin-right: 7px;
   margin-top: -1px;
+
   &.plus {
     color: colors.$green;
   }
+
   &.minus {
     color: colors.$red;
   }

airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopoutButton.module.scss

@@ -1,12 +1,17 @@
 @use "../../../../scss/colors";
 @use "../../../../scss/variables";
 
+.arrow {
+  color: colors.$grey-300;
+  vertical-align: sub;
+  transition: color 0.3s;
+}
+
 .button {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   gap: variables.$spacing-sm;
-
   padding: 8px;
   border-radius: variables.$border-radius-xs;
   background-color: colors.$grey-100;
@@ -23,9 +28,3 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
-.arrow {
-  color: colors.$grey-300;
-  vertical-align: sub;
-  transition: color 0.3s;
-}

airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.test.tsx

@@ -91,6 +91,7 @@ describe("<ConnectionForm />", () => {
       const prefixInput = container.querySelector("input[data-testid='prefixInput']");
       expect(prefixInput).toBeInTheDocument();
 
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       userEvent.type(prefixInput!, "{selectall}{del}prefix");
       await waitFor(() => userEvent.keyboard("{enter}"));
     });

airbyte-webapp/src/views/Connection/ConnectionForm/components/SyncCatalogField.module.scss

@@ -1,33 +1,38 @@
-.headerCell {
+%headerCell {
   font-size: 10px;
   line-height: 13px;
 }
 
 .checkboxCell {
-  @extend .headerCell;
+  @extend %headerCell;
+
   max-width: 43px;
   text-align: center;
 }
 
-.catalogHeader {
+.catalogHeader,
+%catalogHeader {
   min-height: 33px;
-  margin-bottom: 0px !important;
+  margin-bottom: 0 !important;
   margin-left: 20px;
 }
 
 .readonlyCatalogHeader {
-  @extend .catalogHeader;
+  @extend %catalogHeader;
+
   margin-left: 50px;
 }
 
 .catalogSubheader {
-  @extend .catalogHeader;
+  @extend %catalogHeader;
+
   padding-top: 10px;
   margin-left: 155px;
 }
 
 .readonlyCatalogSubheader {
-  @extend .catalogHeader;
+  @extend %catalogHeader;
+
   padding-top: 10px;
   margin-left: 115px;
 }

airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.test.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { getByTestId, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";