From 0b96b05d9e19a81b4ae0923b55df1e2b17b28521 Mon Sep 17 00:00:00 2001 From: Brent Bovenzi Date: Wed, 15 Jun 2022 17:45:38 -0400 Subject: [PATCH 1/5] update webpack-cli, eslint, stylelint, babel --- .pre-commit-config.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 883816f901e60..993ed0f321a55 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -583,7 +583,7 @@ repos: language: node files: ^airflow/www/.*\.(css|scss|sass)$ # Keep dependency versions in sync w/ airflow/www/package.json - additional_dependencies: ['stylelint@13.3.1', 'stylelint-config-standard@20.0.0'] + additional_dependencies: ['stylelint@^14.0.0', 'stylelint-config-standard@^25.0.0'] - id: check-providers-init-file-missing name: Provider init file is missing pass_filenames: false From f464bce1777f8ce2261925dc0c6e958b333a4b68 Mon Sep 17 00:00:00 2001 From: Brent Bovenzi Date: Thu, 16 Jun 2022 10:22:23 -0400 Subject: [PATCH 2/5] revert stylelint changes --- .pre-commit-config.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 993ed0f321a55..883816f901e60 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -583,7 +583,7 @@ repos: language: node files: ^airflow/www/.*\.(css|scss|sass)$ # Keep dependency versions in sync w/ airflow/www/package.json - additional_dependencies: ['stylelint@^14.0.0', 'stylelint-config-standard@^25.0.0'] + additional_dependencies: ['stylelint@13.3.1', 'stylelint-config-standard@20.0.0'] - id: check-providers-init-file-missing name: Provider init file is missing pass_filenames: false From 246743b137b0925e4fa97048c87382900539c291 Mon Sep 17 00:00:00 2001 From: Brent Bovenzi Date: Thu, 16 Jun 2022 11:38:15 -0400 Subject: [PATCH 3/5] update more plugins --- airflow/www/webpack.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/airflow/www/webpack.config.js b/airflow/www/webpack.config.js index e48b01c687736..24e252eae1275 100644 --- a/airflow/www/webpack.config.js +++ b/airflow/www/webpack.config.js @@ -54,6 +54,10 @@ Foundation (http://www.apache.org/). }; const config = { + node: { + Buffer: false, + process: false, + }, entry: { airflowDefaultTheme: `${CSS_DIR}/bootstrap-theme.css`, connectionForm: `${JS_DIR}/connection_form.js`, From 053c2740777a7498b0be468a0f89d74b6fb36bde Mon Sep 17 00:00:00 2001 From: Brent Bovenzi Date: Thu, 16 Jun 2022 12:20:59 -0400 Subject: [PATCH 4/5] update to webpack 5 --- airflow/www/webpack.config.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/airflow/www/webpack.config.js b/airflow/www/webpack.config.js index 24e252eae1275..e48b01c687736 100644 --- a/airflow/www/webpack.config.js +++ b/airflow/www/webpack.config.js @@ -54,10 +54,6 @@ Foundation (http://www.apache.org/). }; const config = { - node: { - Buffer: false, - process: false, - }, entry: { airflowDefaultTheme: `${CSS_DIR}/bootstrap-theme.css`, connectionForm: `${JS_DIR}/connection_form.js`, From 6073718be67b23a23cc5334275fcd20c1c512214 Mon Sep 17 00:00:00 2001 From: Brent Bovenzi Date: Thu, 16 Jun 2022 13:03:57 -0400 Subject: [PATCH 5/5] restore animation with framer-motion v6 --- airflow/www/package.json | 2 +- .../www/static/js/grid/components/Tooltip.tsx | 84 ++++++++++++------- airflow/www/yarn.lock | 41 +++++---- 3 files changed, 78 insertions(+), 49 deletions(-) diff --git a/airflow/www/package.json b/airflow/www/package.json index 85665962b1c84..ad11cc3a0d976 100644 --- a/airflow/www/package.json +++ b/airflow/www/package.json @@ -90,7 +90,7 @@ "datatables.net": "^1.11.4", "datatables.net-bs": "^1.11.4", "eonasdan-bootstrap-datetimepicker": "^4.17.47", - "framer-motion": "4.1.17", + "framer-motion": "^6.0.0", "jquery": ">=3.5.0", "jshint": "^2.13.4", "lodash": "^4.17.21", diff --git a/airflow/www/static/js/grid/components/Tooltip.tsx b/airflow/www/static/js/grid/components/Tooltip.tsx index da4af5b529439..d01aec657c1e5 100644 --- a/airflow/www/static/js/grid/components/Tooltip.tsx +++ b/airflow/www/static/js/grid/components/Tooltip.tsx @@ -32,6 +32,7 @@ import { Portal, PortalProps, } from '@chakra-ui/react'; +import { motion, AnimatePresence } from 'framer-motion'; export interface TooltipProps extends HTMLChakraProps<'div'>, @@ -69,6 +70,27 @@ export interface TooltipProps portalProps?: Pick } +const scale = { + exit: { + scale: 0.85, + opacity: 0, + transition: { + opacity: { duration: 0.15, easings: 'easeInOut' }, + scale: { duration: 0.2, easings: 'easeInOut' }, + }, + }, + enter: { + scale: 1, + opacity: 1, + transition: { + opacity: { easings: 'easeOut', duration: 0.2 }, + scale: { duration: 0.2, ease: [0.175, 0.885, 0.4, 1.1] }, + }, + }, +}; + +const StyledTooltip = chakra(motion.div); + const styles = { '--popper-arrow-bg': ['var(--tooltip-bg)'], '--tooltip-bg': 'colors.gray.700', @@ -134,42 +156,42 @@ const Tooltip = forwardRef((props, ref) => { return ( <> {trigger} - {/* TODO: put back in AnimatePresence when we can upgrade framer-motion without ts errors */} - {/* */} - {tooltip.isOpen && ( - - + + {tooltip.isOpen && ( + - {label} - {hasArrow && ( - + {label} + {hasArrow && ( - - )} + data-popper-arrow + className="chakra-tooltip__arrow-wrapper" + > + + + )} + - - - )} - {/* */} + + )} + ); }); diff --git a/airflow/www/yarn.lock b/airflow/www/yarn.lock index 2c015b08d18b2..edeb3eb35eed2 100644 --- a/airflow/www/yarn.lock +++ b/airflow/www/yarn.lock @@ -5509,15 +5509,15 @@ form-data@^3.0.0: combined-stream "^1.0.8" mime-types "^2.1.12" -framer-motion@4.1.17: - version "4.1.17" - resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-4.1.17.tgz#4029469252a62ea599902e5a92b537120cc89721" - integrity sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw== +framer-motion@^6.0.0: + version "6.3.11" + resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.3.11.tgz#c304ce9728601ad9377d47d5d9264e43d741d470" + integrity sha512-xQLk+ZSklNs5QNCUmdWPpKMOuWiB8ZETsvcIOWw8xvri9K3TamuifgCI/B6XpaEDR0/V2ZQF2Wm+gUAZrXo+rw== dependencies: - framesync "5.3.0" + framesync "6.0.1" hey-listen "^1.0.8" - popmotion "9.3.6" - style-value-types "4.1.4" + popmotion "11.0.3" + style-value-types "5.0.0" tslib "^2.1.0" optionalDependencies: "@emotion/is-prop-valid" "^0.8.2" @@ -5529,6 +5529,13 @@ framesync@5.3.0: dependencies: tslib "^2.1.0" +framesync@6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20" + integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA== + dependencies: + tslib "^2.1.0" + fs-minipass@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb" @@ -7993,14 +8000,14 @@ polished@^4.1.3: dependencies: "@babel/runtime" "^7.14.0" -popmotion@9.3.6: - version "9.3.6" - resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.3.6.tgz#b5236fa28f242aff3871b9e23721f093133248d1" - integrity sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw== +popmotion@11.0.3: + version "11.0.3" + resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9" + integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA== dependencies: - framesync "5.3.0" + framesync "6.0.1" hey-listen "^1.0.8" - style-value-types "4.1.4" + style-value-types "5.0.0" tslib "^2.1.0" postcss-calc@^8.2.3: @@ -9316,10 +9323,10 @@ style-search@^0.1.0: resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI= -style-value-types@4.1.4: - version "4.1.4" - resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-4.1.4.tgz#80f37cb4fb024d6394087403dfb275e8bb627e75" - integrity sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg== +style-value-types@5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad" + integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA== dependencies: hey-listen "^1.0.8" tslib "^2.1.0"