diff --git a/frontend/src/metabase/components/CopyWidget.jsx b/frontend/src/metabase/components/CopyWidget.jsx
index f787846a25251f4e4db17d6555d525aaf125b5f2..471c1e1eb96f5baad26ed844d2a0456d16ce05ee 100644
--- a/frontend/src/metabase/components/CopyWidget.jsx
+++ b/frontend/src/metabase/components/CopyWidget.jsx
@@ -20,6 +20,7 @@ export default class CopyWidget extends Component {
}
value={value}
onChange={onChange}
+ readOnly={value && !onChange}
{...props}
/>
<CopyWidgetButton value={value} />
diff --git a/frontend/src/metabase/components/Modal.jsx b/frontend/src/metabase/components/Modal.jsx
index b0b1045d9bd9455d7a0a55b6d9449ca8a31e7711..a870b230a1489036b3ef36ff6baa1f742e0f6b7b 100644
--- a/frontend/src/metabase/components/Modal.jsx
+++ b/frontend/src/metabase/components/Modal.jsx
@@ -3,7 +3,7 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
-import { CSSTransitionGroup } from "react-transition-group";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
import { Motion, spring } from "react-motion";
import _ from "underscore";
import { getScrollX, getScrollY } from "metabase/lib/dom";
@@ -100,26 +100,30 @@ export class WindowModal extends Component {
container={this._modalElement}
enableMouseEvents={enableMouseEvents}
>
- <CSSTransitionGroup
- component="div"
- transitionName="Modal"
- transitionAppear={enableTransition}
- transitionAppearTimeout={250}
- transitionEnter={enableTransition}
- transitionEnterTimeout={250}
- transitionLeave={enableTransition}
- transitionLeaveTimeout={250}
+ <TransitionGroup
+ appear={enableTransition}
+ enter={enableTransition}
+ exit={enableTransition}
>
{isOpen && (
- <div
+ <CSSTransition
key="modal"
- className={cx(backdropClassName, backdropClassnames)}
- style={style}
+ classNames="Modal"
+ timeout={{
+ appear: 250,
+ enter: 250,
+ exit: 250,
+ }}
>
- {this._modalComponent()}
- </div>
+ <div
+ className={cx(backdropClassName, backdropClassnames)}
+ style={style}
+ >
+ {this._modalComponent()}
+ </div>
+ </CSSTransition>
)}
- </CSSTransitionGroup>
+ </TransitionGroup>
</SandboxedPortal>
);
}
diff --git a/frontend/src/metabase/containers/SaveQuestionModal.css b/frontend/src/metabase/containers/SaveQuestionModal.css
index b741ec7615cee2a9635d3193f4631c721d55cf9b..76d2063edeb06673b3c6fe46aba5d7c52c2daec6 100644
--- a/frontend/src/metabase/containers/SaveQuestionModal.css
+++ b/frontend/src/metabase/containers/SaveQuestionModal.css
@@ -10,10 +10,10 @@
max-height: 300px;
transition: max-height 500ms ease-out;
}
-.saveQuestionModalFields-leave {
+.saveQuestionModalFields-exit {
max-height: 300px;
}
-.saveQuestionModalFields-leave.saveQuestionModalFields-leave-active {
+.saveQuestionModalFields-exit.saveQuestionModalFields-exit-active {
max-height: 0px;
transition: max-height 500ms ease-out;
}
diff --git a/frontend/src/metabase/containers/SaveQuestionModal.jsx b/frontend/src/metabase/containers/SaveQuestionModal.jsx
index 6ae7cdffa799323949e27219850afa99dd93f0e8..4efe7472f86e747b79f89d09a6068e819d7e36f7 100644
--- a/frontend/src/metabase/containers/SaveQuestionModal.jsx
+++ b/frontend/src/metabase/containers/SaveQuestionModal.jsx
@@ -1,7 +1,7 @@
/* eslint-disable react/prop-types */
import React, { Component } from "react";
import PropTypes from "prop-types";
-import { CSSTransitionGroup } from "react-transition-group";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
import { t } from "ttag";
import Form, { FormField, FormFooter } from "metabase/containers/FormikForm";
@@ -158,34 +158,37 @@ export default class SaveQuestionModal extends Component {
hidden={!showSaveType}
originalCard={originalCard}
/>
- <CSSTransitionGroup
- component="div"
- transitionName="saveQuestionModalFields"
- transitionEnterTimeout={500}
- transitionLeaveTimeout={500}
- >
+ <TransitionGroup>
{values.saveType === "create" && (
- <div className="saveQuestionModalFields">
- <FormField
- autoFocus
- name="name"
- title={t`Name`}
- placeholder={nameInputPlaceholder}
- />
- <FormField
- name="description"
- type="text"
- title={t`Description`}
- placeholder={t`It's optional but oh, so helpful`}
- />
- <FormField
- name="collection_id"
- title={t`Which collection should this go in?`}
- type="collection"
- />
- </div>
+ <CSSTransition
+ classNames="saveQuestionModalFields"
+ timeout={{
+ enter: 500,
+ exit: 500,
+ }}
+ >
+ <div className="saveQuestionModalFields">
+ <FormField
+ autoFocus
+ name="name"
+ title={t`Name`}
+ placeholder={nameInputPlaceholder}
+ />
+ <FormField
+ name="description"
+ type="text"
+ title={t`Description`}
+ placeholder={t`It's optional but oh, so helpful`}
+ />
+ <FormField
+ name="collection_id"
+ title={t`Which collection should this go in?`}
+ type="collection"
+ />
+ </div>
+ </CSSTransition>
)}
- </CSSTransitionGroup>
+ </TransitionGroup>
<FormFooter submitTitle={t`Save`} onCancel={this.props.onClose} />
</Form>
)}
diff --git a/frontend/src/metabase/css/components/modal.css b/frontend/src/metabase/css/components/modal.css
index c05ac946c6f652352471b3b379bbbaaf18c39ad3..0b191066692bb3d298f9e4e07b78b3ec71b0f192 100644
--- a/frontend/src/metabase/css/components/modal.css
+++ b/frontend/src/metabase/css/components/modal.css
@@ -64,21 +64,21 @@
.Modal-backdrop.Modal-appear,
.Modal-backdrop.Modal-enter {
- transition: background-color 200ms ease-in-out;
background-color: color-mod(var(--color-bg-black) alpha(-99%));
}
.Modal-backdrop.Modal-appear-active,
.Modal-backdrop.Modal-enter-active {
+ transition: background-color 200ms ease-in-out;
background-color: color-mod(var(--color-bg-black) alpha(-40%));
}
-.Modal-backdrop.Modal-leave {
- transition: background-color 200ms ease-in-out 100ms;
+.Modal-backdrop.Modal-exit {
background-color: color-mod(var(--color-bg-black) alpha(-40%));
}
-.Modal-backdrop.Modal-leave-active {
+.Modal-backdrop.Modal-exit-active {
+ transition: background-color 200ms ease-in-out 100ms;
background-color: color-mod(var(--color-bg-black) alpha(-99%));
}
@@ -86,24 +86,24 @@
.Modal-backdrop.Modal-appear .Modal,
.Modal-backdrop.Modal-enter .Modal {
- transition: opacity 200ms linear 100ms, transform 200ms ease-in-out 100ms;
opacity: 0.01;
transform: translate(0, 40px);
}
.Modal-backdrop.Modal-appear-active .Modal,
.Modal-backdrop.Modal-enter-active .Modal {
+ transition: opacity 200ms linear 100ms, transform 200ms ease-in-out 100ms;
opacity: 1;
transform: translate(0, 0);
}
-.Modal-backdrop.Modal-leave .Modal {
- transition: opacity 200ms linear, transform 200ms ease-in-out;
+.Modal-backdrop.Modal-exit .Modal {
opacity: 1;
transform: translate(0, 0);
}
-.Modal-backdrop.Modal-leave-active .Modal {
+.Modal-backdrop.Modal-exit-active .Modal {
+ transition: opacity 200ms linear, transform 200ms ease-in-out;
opacity: 0.01;
transform: translate(0, -40px);
}
@@ -111,10 +111,10 @@
@media (prefers-reduced-motion) {
.Modal-backdrop.Modal-appear,
.Modal-backdrop.Modal-enter,
- .Modal-backdrop.Modal-leave,
+ .Modal-backdrop.Modal-exit,
.Modal-backdrop.Modal-appear .Modal,
.Modal-backdrop.Modal-enter .Modal,
- .Modal-backdrop.Modal-leave .Modal {
+ .Modal-backdrop.Modal-exit .Modal {
transition: none;
}
}
diff --git a/frontend/src/metabase/reference/components/Formula.css b/frontend/src/metabase/reference/components/Formula.css
index 37f489a3290119eec70604297474c86abd8fbc8e..0978919ff9bb32859dde86ab26b7f6c4399e295a 100644
--- a/frontend/src/metabase/reference/components/Formula.css
+++ b/frontend/src/metabase/reference/components/Formula.css
@@ -29,10 +29,10 @@
max-height: 150px;
transition: max-height 300ms ease-out;
}
-.formulaDefinition-leave {
+.formulaDefinition-exit {
max-height: 150px;
}
-.formulaDefinition-leave.formulaDefinition-leave-active {
+.formulaDefinition-exit.formulaDefinition-exit-active {
max-height: 0px;
transition: max-height 300ms ease-out;
}
diff --git a/frontend/src/metabase/reference/components/Formula.jsx b/frontend/src/metabase/reference/components/Formula.jsx
index 483f8a68ce3d954eb8d9aeee35ae290e5b6ceae7..179e6b68ba6235eb0df09485c755363c692604d7 100644
--- a/frontend/src/metabase/reference/components/Formula.jsx
+++ b/frontend/src/metabase/reference/components/Formula.jsx
@@ -3,7 +3,7 @@ import React, { Component } from "react";
import cx from "classnames";
import { connect } from "react-redux";
import { t } from "ttag";
-import { CSSTransitionGroup } from "react-transition-group";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
import Icon from "metabase/components/Icon";
@@ -29,21 +29,25 @@ class Formula extends Component {
<Icon name="beaker" size={24} />
<span className={S.formulaTitle}>{t`View the ${type} formula`}</span>
</div>
- <CSSTransitionGroup
- component="div"
- transitionName="formulaDefinition"
- transitionEnterTimeout={300}
- transitionLeaveTimeout={300}
- >
+ <TransitionGroup>
{isExpanded && (
- <div key="formulaDefinition" className="formulaDefinition">
- <QueryDefinition
- className={S.formulaDefinitionInner}
- object={entity}
- />
- </div>
+ <CSSTransition
+ key="formulaDefinition"
+ classNames="formulaDefinition"
+ timeout={{
+ enter: 300,
+ exit: 300,
+ }}
+ >
+ <div className="formulaDefinition">
+ <QueryDefinition
+ className={S.formulaDefinitionInner}
+ object={entity}
+ />
+ </div>
+ </CSSTransition>
)}
- </CSSTransitionGroup>
+ </TransitionGroup>
</div>
);
}
diff --git a/package.json b/package.json
index 2bdfcbbddf068e089299a25a8ca4a0d9d2820cc5..0030b670dfb8391b65fd12c0b875e39af0720776 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
"react-router-redux": "^4.0.8",
"react-sortable-hoc": "^1.11.0",
"react-textarea-autosize": "^5.2.1",
- "react-transition-group": "1",
+ "react-transition-group": "^4.4.5",
"react-virtualized": "^9.22.3",
"redux": "^4.2.0",
"redux-actions": "^2.0.1",
@@ -184,7 +184,7 @@
"@types/react-router": "3.0.28",
"@types/react-router-redux": "^4.0.53",
"@types/react-textarea-autosize": "^4.3.6",
- "@types/react-transition-group": "1.1.8",
+ "@types/react-transition-group": "^4.4.5",
"@types/react-virtualized": "^9.21.13",
"@types/redux-actions": "^2.6.2",
"@types/redux-auth-wrapper": "^1.0.7",
diff --git a/yarn.lock b/yarn.lock
index cd1e8de7803c22090db6a262a8c37188c4c34cc6..8c19c1de04186da2a801954ab1fbf0274a346711 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2624,7 +2624,7 @@
dependencies:
regenerator-runtime "^0.13.4"
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
version "7.12.1"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
@@ -2680,6 +2680,13 @@
dependencies:
regenerator-runtime "^0.13.4"
+"@babel/runtime@^7.5.5":
+ version "7.20.13"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b"
+ integrity sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==
+ dependencies:
+ regenerator-runtime "^0.13.11"
+
"@babel/runtime@^7.9.2":
version "7.19.0"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
@@ -5774,10 +5781,10 @@
dependencies:
"@types/react" "*"
-"@types/react-transition-group@1.1.8":
- version "1.1.8"
- resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-1.1.8.tgz#99b01ebf3e73a50c484e5ee86a49e9289698d456"
- integrity sha512-dPE733MOo56o6Uvck0lwz8383HTneJsw8SDKe3+M9qnxPqfj78s73l0tMk//Bz1CSf+7aZLF9UVYMY9agnrboA==
+"@types/react-transition-group@^4.4.5":
+ version "4.4.5"
+ resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
+ integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
dependencies:
"@types/react" "*"
@@ -8238,11 +8245,6 @@ cfb@~1.2.1:
crc-32 "~1.2.0"
printj "~1.3.0"
-chain-function@^1.0.0:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.1.tgz#c63045e5b4b663fb86f1c6e186adaf1de402a1cc"
- integrity sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg==
-
chalk@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -9999,12 +10001,13 @@ dom-converter@^0.2, dom-converter@^0.2.0:
dependencies:
utila "~0.4"
-dom-helpers@^3.2.0:
- version "3.4.0"
- resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
- integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+dom-helpers@^5.0.1:
+ version "5.2.1"
+ resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+ integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
dependencies:
- "@babel/runtime" "^7.1.2"
+ "@babel/runtime" "^7.8.7"
+ csstype "^3.0.2"
dom-helpers@^5.1.3:
version "5.2.0"
@@ -17567,7 +17570,7 @@ prompts@^2.4.0:
kleur "^3.0.3"
sisteransi "^1.0.5"
-prop-types@15.x, prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.x, prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -18175,16 +18178,15 @@ react-textarea-autosize@^5.2.1:
dependencies:
prop-types "^15.6.0"
-react-transition-group@1:
- version "1.2.1"
- resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
- integrity sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==
+react-transition-group@^4.4.5:
+ version "4.4.5"
+ resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+ integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
dependencies:
- chain-function "^1.0.0"
- dom-helpers "^3.2.0"
- loose-envify "^1.3.1"
- prop-types "^15.5.6"
- warning "^3.0.0"
+ "@babel/runtime" "^7.5.5"
+ dom-helpers "^5.0.1"
+ loose-envify "^1.4.0"
+ prop-types "^15.6.2"
react-use-measure@^2.0.4:
version "2.1.1"