🪟🔧 Remove styled components (round 1) #18766

josephkmh · 2022-11-01T10:24:11Z

What

As part of hack day I want to convert as many styled components to CSS modules as possible! This PR is a first set of changes. There is no particular organization, I just want to avoid having a single huge PR, so I'm breaking the work up into chunks.

How

Converts styled components to CSS modules
Some very minor refactors related to export syntax (named exports vs defaults)

Recommended reading order

Top to bottom

timroes

Code LGTM, have not tested locally, but couldn't see any functional changes in the code.

* master: (59 commits) 🪟🔧 Remove styled components (round 1) (#18766) Bump Airbyte version from 0.40.17 to 0.40.18 (#18827) ci: add job and run id to test reports (#18832) hide ConfigPersistence inside ConfigRepository to discourage use (#18803) Remove the bulk actions from ConfigPersistence (#18800) remove config persistence from seeding logic (#18749) Remove ConfigPersistence usage from SecretsMigrator (#18747) Add normalization changelog and bump normalization version in platform (#18813) 🐛Source Exchange Rates: Fix handling error during check connection (#18726) 🐛Destination Google Sheets: Fix empty headers list (#18729) Bump helm chart version reference to 0.40.40 (#18815) Use equalsIgnoreCase (#18810) [charts/airbyte-cron] Cleanup env vars (#18787) 🐛 Source Facebook Marketing: reduce request limit after specific error (#18734) Parameterize test_empty_streams and test_stream_with_1_airbyte_column by destination (#18197) Correct coinmarket spec (#18790) ci: use custom test-reporter action to upload job results (#18004) Fix unit tests in source relational db (#18789) query to include data plane attributes (#18531) Mark/update notification settings design (#18159) ...

edmundito

Meant to send this sooner, just some things to follow up on.

edmundito · 2022-11-01T17:54:32Z

airbyte-webapp/src/components/common/DeleteBlock/DeleteBlock.module.scss

@@ -0,0 +1,16 @@
+@use "scss/colors";
+
+.deleteBlock {


Could also be .container

edmundito · 2022-11-01T17:55:04Z

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

+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  margin: 5px 0 10px;


The spacing variables can be used here.

edmundito · 2022-11-01T17:56:24Z

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

+  color: colors.$dark-blue-900;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;


Does the EditorHeader style have a similar style to one of the Text or Heading components?

edmundito · 2022-11-01T18:23:31Z

airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.tsx

+      <div className={styles.content}>
        <FormattedMessage id={text} />
-        <ButtonContent>
+        <div className={styles.buttonContent}>


This could probably be switched to use ModalBody and ModalFooter instead (these were created after this component)

edmundito · 2022-11-01T18:27:21Z

airbyte-webapp/src/components/common/EmptyResourceBlock/EmptyResourceBlock.module.scss

+  font-weight: normal;
+  font-size: 14px;
+  line-height: 19px;


This could be replaceable with a Text component

edmundito · 2022-11-01T18:27:39Z

airbyte-webapp/src/components/common/EmptyResourceBlock/EmptyResourceBlock.module.scss

+  font-size: 14px;
+  line-height: 19px;
+  color: colors.$grey-500;
+  margin-top: 5px;


This along other parts of this SCSS can use the spacing variables

edmundito · 2022-11-02T13:57:49Z

airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.module.scss

+.rowsContainer {
+  background: colors.$white;
+  border-radius: 8px;
+  margin: 0 10px 5px;


Can use spacing variables

edmundito · 2022-11-02T13:59:20Z

airbyte-webapp/src/components/connection/CatalogTree/TreeRowWrapper.module.scss

+  height: 40px;
+  border-bottom: 1px solid colors.$grey-50;
+
+  &--noBorder {


As mentioned before, you can make this more react-friendly by not using the modifier format. The css module already does that for you.

* refactor EditorHeader (untested) * refactor BaseClearView * delete unused Subtitle * refactor ConfirmationModal * refactor Arrow * refactor BulkHeader * refactor CatalogTreeSearch * refactor StreamFieldTable * refactor StreamHeader * refactor ConnectorIcon * refactor TreeRowWrapper * refactor DeleteBlock * refactor EmptyResourceBlock * revert unintended element change

* solve conflicts * solve conflict in json schema * bump to version 0.1.8 for the changes of this pr * change ad account id in the schemas * query to include data plane attributes (#18531) * query to include data plane attributes * rename functions * fix java build * more renaming fix * Fix unit tests in source relational db (#18789) * Fix unit tests * Add extra test case for record count > 1 * Store record count in variable * ci: use custom test-reporter action to upload job results (#18004) * ci: use custom action to upload job results * Correct coinmarket spec (#18790) * correct coinmarket spec * remove duplicate support normalization from source spec * rollback coinmarketcap version in source def seed * update connector version * auto-bump connector version Co-authored-by: Octavia Squidington III <octavia-squidington-iii@users.noreply.github.com> * Parameterize test_empty_streams and test_stream_with_1_airbyte_column by destination (#18197) * Remove lines that always add Postgres to list of destinations * Parameterize all tests in test_ephemeral by destination * 🐛 Source Facebook Marketing: reduce request limit after specific error (#18734) * 🐛 Source Facebook Marketing: reduce request limit after specific error * 🐛 Source Facebook Marketing: bump version; update docs * 🐛 Source Facebook Marketing: add test * 🐛 Source Facebook Marketing: increase timeout * [charts/airbyte-cron] Cleanup env vars (#18787) * [charts/airbyte-cron] Cleanup env vars * Remove unused env var * Use equalsIgnoreCase (#18810) * Bump helm chart version reference to 0.40.40 (#18815) Co-authored-by: perangel <perangel@users.noreply.github.com> Co-authored-by: Kyryl Skobylko <xpuska513@gmail.com> * 🐛Destination Google Sheets: Fix empty headers list (#18729) * Fix empty headers list * Updated PR number * Bumped version * auto-bump connector version Co-authored-by: Octavia Squidington III <octavia-squidington-iii@users.noreply.github.com> * 🐛Source Exchange Rates: Fix handling error during check connection (#18726) * Fix handling error during check connection * Updated PR number * auto-bump connector version Co-authored-by: Octavia Squidington III <octavia-squidington-iii@users.noreply.github.com> * Add normalization changelog and bump normalization version in platform (#18813) * Remove ConfigPersistence usage from SecretsMigrator (#18747) * remove config persistence from seeding logic (#18749) * Remove the bulk actions from ConfigPersistence (#18800) * hide ConfigPersistence inside ConfigRepository to discourage use (#18803) * ci: add job and run id to test reports (#18832) * Bump Airbyte version from 0.40.17 to 0.40.18 (#18827) Co-authored-by: grishick <grishick@users.noreply.github.com> * 🪟🔧 Remove styled components (round 1) (#18766) * refactor EditorHeader (untested) * refactor BaseClearView * delete unused Subtitle * refactor ConfirmationModal * refactor Arrow * refactor BulkHeader * refactor CatalogTreeSearch * refactor StreamFieldTable * refactor StreamHeader * refactor ConnectorIcon * refactor TreeRowWrapper * refactor DeleteBlock * refactor EmptyResourceBlock * revert unintended element change * fixed acceptance tests (#18699) * 🪟🔧 Reactor Breadcrumbs component to use anchors (#18764) * refactor breadcrumbs to use actual links * PR comments on styles * increase test timeout for some webapp tests to prevent flakes (#18807) * Remove "Filters and Segments" from Google Analytics v4 (#18508) Filters and Segments info was incorrectly added to the Google Analytics v4 connector instead of the Google Analytics (Universal Analytics) Connector. * Add notes about EU OAUth (#18835) EU OAuth is not fully tested so adding a note to account for that. * 🪟🐛 Fix: visual regression in ConnectorIcon (#18849) * fix visual regression * remove unused prop * Add links to demo page (#18828) * mysql-source:fix tinyint unsigned handling (#18619) * mysql-source:fix tinyint unsigned handling * update doc * format * upgrade version * auto-bump connector version Co-authored-by: Octavia Squidington III <octavia-squidington-iii@users.noreply.github.com> * 🪟 🎉 Allow environment specific sections in docs (#18829) * Allow environment specific sections in docs * Change syntax to lower case * ci: replace GITHUB_OUTPUT with GITHUB_ENV on multiline variables (#18809) * ci: replace GITHUB_OUTPUT with GITHUB_ENV on multiline variables * ci: replace github set-ouput with new syntax in ./tools/bin/ * Add connection ID to span (#18852) * edited connector docs (#18855) * 🪟 🔧 Upgrade husky to 8.0.1 (#18719) * Upgrade Husky * Upgrade Husky * Upgrade Husky * Upgrade Husky * Upgrade Husky * ci: replace GITHUB_OUTPUT with GITHUB_ENV for multiline variables (#18857) * Avoid NPE when adding connection ID to trace (#18856) * Filter exit errors by operation name (#18850) * add label * auto-bump connector version Co-authored-by: marcosmarxm <marcosmarxm@gmail.com> Co-authored-by: Xiaohan Song <xiaohan@airbyte.io> Co-authored-by: Liren Tu <tuliren@gmail.com> Co-authored-by: Conor <cpdeethree@users.noreply.github.com> Co-authored-by: Marcos Marx <marcosmarxm@users.noreply.github.com> Co-authored-by: Octavia Squidington III <octavia-squidington-iii@users.noreply.github.com> Co-authored-by: Greg Solovyev <grishick@users.noreply.github.com> Co-authored-by: Artem Inzhyyants <36314070+artem1205@users.noreply.github.com> Co-authored-by: perangel <perangel@gmail.com> Co-authored-by: Jonathan Pearlin <jonathan@airbyte.io> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: perangel <perangel@users.noreply.github.com> Co-authored-by: Kyryl Skobylko <xpuska513@gmail.com> Co-authored-by: Serhii Lazebnyi <53845333+lazebnyi@users.noreply.github.com> Co-authored-by: Charles <charles@airbyte.io> Co-authored-by: Octavia Squidington III <90398440+octavia-squidington-iii@users.noreply.github.com> Co-authored-by: Joey Marshment-Howell <josephkmh@users.noreply.github.com> Co-authored-by: darynaishchenko <80129833+darynaishchenko@users.noreply.github.com> Co-authored-by: Michael Siega <109092231+mfsiega-airbyte@users.noreply.github.com> Co-authored-by: Tyler B <104733644+TBernstein4@users.noreply.github.com> Co-authored-by: Yowan Ramchoreeter <26179814+YowanR@users.noreply.github.com> Co-authored-by: Tim Roes <tim@airbyte.io> Co-authored-by: Subodh Kant Chaturvedi <subodh1810@gmail.com> Co-authored-by: Volodymyr Pochtar <v.pochtar@gmail.com> Co-authored-by: Amruta Ranade <11484018+Amruta-Ranade@users.noreply.github.com>

josephkmh added 13 commits October 31, 2022 21:51

refactor EditorHeader (untested)

848cb5c

refactor BaseClearView

781868f

delete unused Subtitle

71da962

refactor ConfirmationModal

89d9d80

refactor Arrow

b70a9d7

refactor BulkHeader

d9663cd

refactor CatalogTreeSearch

ba7e41c

refactor StreamFieldTable

b319aa9

refactor StreamHeader

8ca43a4

refactor ConnectorIcon

ad4c37e

refactor TreeRowWrapper

27c7f81

refactor DeleteBlock

d193186

refactor EmptyResourceBlock

f145055

github-actions bot added area/platform issues related to the platform area/frontend Related to the Airbyte webapp labels Nov 1, 2022

Merge branch 'master' into joey/exterminate-styled-components

362d823

josephkmh marked this pull request as ready for review November 1, 2022 12:12

josephkmh requested a review from a team as a code owner November 1, 2022 12:12

josephkmh added 3 commits November 1, 2022 13:14

revert unintended element change

ad89b4a

Merge branch 'master' into joey/exterminate-styled-components

d56a1c5

Merge branch 'master' into joey/exterminate-styled-components

cb7a03f

timroes approved these changes Nov 1, 2022

View reviewed changes

josephkmh merged commit 578f40a into master Nov 2, 2022

josephkmh deleted the joey/exterminate-styled-components branch November 2, 2022 08:40

josephkmh mentioned this pull request Nov 2, 2022

🪟🐛 Fix: visual regression in ConnectorIcon #18849

Merged

edmundito reviewed Nov 2, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🪟🔧 Remove styled components (round 1) #18766

🪟🔧 Remove styled components (round 1) #18766

josephkmh commented Nov 1, 2022

timroes left a comment

edmundito left a comment

edmundito Nov 1, 2022

edmundito Nov 1, 2022

edmundito Nov 1, 2022

edmundito Nov 1, 2022

edmundito Nov 1, 2022

edmundito Nov 1, 2022

edmundito Nov 2, 2022

edmundito Nov 2, 2022

🪟🔧 Remove styled components (round 1) #18766

🪟🔧 Remove styled components (round 1) #18766

Conversation

josephkmh commented Nov 1, 2022

What

How

Recommended reading order

timroes left a comment

Choose a reason for hiding this comment

edmundito left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment