From e7897764edc8ec4d62907045498d1f30e9ca2791 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Tue, 30 Jul 2024 13:56:58 +0530 Subject: [PATCH 01/39] add alert bar component --- .../ui/src/assets/svg/cross-icon.svg | 3 + .../ui/src/assets/svg/error-cross.svg | 3 + .../ui/src/assets/svg/error-icon.svg | 12 ++ .../ui/src/assets/svg/general-icon.svg | 12 ++ .../ui/src/assets/svg/info-cross.svg | 3 + .../resources/ui/src/assets/svg/info-icon.svg | 12 ++ .../ui/src/assets/svg/success-cross.svg | 3 + .../ui/src/assets/svg/success-icon.svg | 10 ++ .../ui/src/assets/svg/warning-cross.svg | 3 + .../ui/src/assets/svg/warning-icon.svg | 12 ++ .../components/AlertBar/AlertBar.interface.ts | 16 +++ .../ui/src/components/AlertBar/AlertBar.tsx | 117 ++++++++++++++++++ .../components/AlertBar/alert-bar.style.less | 31 +++++ .../pages/MyDataPage/MyDataPage.component.tsx | 2 + 14 files changed, 239 insertions(+) create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/cross-icon.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/error-cross.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/error-icon.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/general-icon.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/info-cross.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/info-icon.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/success-cross.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/success-icon.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/warning-cross.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/warning-icon.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/cross-icon.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/cross-icon.svg new file mode 100644 index 000000000000..c2d2d59156a3 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/cross-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/error-cross.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/error-cross.svg new file mode 100644 index 000000000000..a3a154cece1c --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/error-cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/error-icon.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/error-icon.svg new file mode 100644 index 000000000000..571f68c76e5e --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/error-icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/general-icon.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/general-icon.svg new file mode 100644 index 000000000000..386598d34288 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/general-icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/info-cross.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/info-cross.svg new file mode 100644 index 000000000000..49b14ed64637 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/info-cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/info-icon.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/info-icon.svg new file mode 100644 index 000000000000..ed5f693f4d0f --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/info-icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/success-cross.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/success-cross.svg new file mode 100644 index 000000000000..a271a3987251 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/success-cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/success-icon.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/success-icon.svg new file mode 100644 index 000000000000..55f35d7c54cf --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/success-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/warning-cross.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/warning-cross.svg new file mode 100644 index 000000000000..f0f7064ec556 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/warning-cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/warning-icon.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/warning-icon.svg new file mode 100644 index 000000000000..27215bc1f127 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/warning-icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts new file mode 100644 index 000000000000..ba4be03f0327 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts @@ -0,0 +1,16 @@ +/* + * Copyright 2024 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +interface AlertBarProps { + type: 'general' | 'info' | 'success' | 'warning' | 'error'; + message: string; +} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx new file mode 100644 index 000000000000..0032e124ae3d --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx @@ -0,0 +1,117 @@ +/* + * Copyright 2024 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import Icon from '@ant-design/icons'; +import React, { useState } from 'react'; +import { ReactComponent as CrossIcon } from '../../assets/svg/cross-icon.svg'; +import { ReactComponent as ErrorCross } from '../../assets/svg/error-cross.svg'; +import { ReactComponent as ErrorIcon } from '../../assets/svg/error-icon.svg'; +import { ReactComponent as GeneralIcon } from '../../assets/svg/general-icon.svg'; +import { ReactComponent as InfoCross } from '../../assets/svg/info-cross.svg'; +import { ReactComponent as InfoIcon } from '../../assets/svg/info-icon.svg'; +import { ReactComponent as SuccessCross } from '../../assets/svg/success-cross.svg'; +import { ReactComponent as SuccessIcon } from '../../assets/svg/success-icon.svg'; +import { ReactComponent as WarningCross } from '../../assets/svg/warning-cross.svg'; +import { ReactComponent as WarningIcon } from '../../assets/svg/warning-icon.svg'; +import './alert-bar.style.less'; + +const AlertBar = ({ + type = 'general', + message = '', +}: AlertBarProps): JSX.Element => { + const [isAlertVisible, setIsAlertVisible] = useState(true); + let alertComponent = { + icon: GeneralIcon, + color: '#292929', + bgColor: '#f6f7f9', + crossIcon: CrossIcon, + }; + + switch (type) { + case 'general': + alertComponent = { + icon: GeneralIcon, + color: '#292929', + bgColor: '#f6f7f9', + crossIcon: CrossIcon, + }; + + break; + case 'info': + alertComponent = { + icon: InfoIcon, + color: '#0950C5', + bgColor: '#f6f8ff', + crossIcon: InfoCross, + }; + + break; + case 'success': + alertComponent = { + icon: SuccessIcon, + color: '#1D7C4D', + bgColor: '#f5fbf8', + crossIcon: SuccessCross, + }; + + break; + case 'warning': + alertComponent = { + icon: WarningIcon, + color: '#F59638', + bgColor: '#fff5eb', + crossIcon: WarningCross, + }; + + break; + case 'error': + alertComponent = { + icon: ErrorIcon, + color: '#CB2531', + bgColor: '#fcf0f1', + crossIcon: ErrorCross, + }; + + break; + } + + const handleCrossClick = () => setIsAlertVisible(false); + + return ( + <> +
+
+ +

{message}

+
+ +
+ + ); +}; + +export default AlertBar; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less new file mode 100644 index 000000000000..b2574ff77f62 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less @@ -0,0 +1,31 @@ +/* + * Copyright 2024 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +.alert-container { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px; +} + +.alert-content { + display: flex; + align-items: center; + gap: 8px; +} + +.cross-icon { + cursor: pointer; + background-color: transparent; + border: none; +} diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx index c4f54c684e9c..c6334591e406 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx @@ -23,6 +23,7 @@ import React, { import RGL, { WidthProvider } from 'react-grid-layout'; import { useTranslation } from 'react-i18next'; import ActivityFeedProvider from '../../components/ActivityFeed/ActivityFeedProvider/ActivityFeedProvider'; +import AlertBar from '../../components/AlertBar/AlertBar'; import Loader from '../../components/common/Loader/Loader'; import WelcomeScreen from '../../components/MyData/WelcomeScreen/WelcomeScreen.component'; import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1'; @@ -207,6 +208,7 @@ const MyDataPage = () => { return ( + From 8d832a5e1ce589447d2faa05e3e670bdfb1834ec Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Tue, 30 Jul 2024 15:21:57 +0530 Subject: [PATCH 02/39] updated as per comments --- .../svg/{cross-icon.svg => ic-cross.svg} | 0 .../svg/{error-icon.svg => ic-error.svg} | 0 .../svg/{general-icon.svg => ic-general.svg} | 0 .../svg/{info-icon.svg => ic-info-tag.svg} | 0 .../svg/{success-icon.svg => ic-success.svg} | 0 .../{warning-icon.svg => ic-warning-tag.svg} | 0 .../components/AlertBar/AlertBar.interface.ts | 4 +- .../ui/src/components/AlertBar/AlertBar.tsx | 111 ++++++++---------- .../components/AlertBar/alert-bar.style.less | 25 ++++ .../pages/MyDataPage/MyDataPage.component.tsx | 2 - 10 files changed, 78 insertions(+), 64 deletions(-) rename openmetadata-ui/src/main/resources/ui/src/assets/svg/{cross-icon.svg => ic-cross.svg} (100%) rename openmetadata-ui/src/main/resources/ui/src/assets/svg/{error-icon.svg => ic-error.svg} (100%) rename openmetadata-ui/src/main/resources/ui/src/assets/svg/{general-icon.svg => ic-general.svg} (100%) rename openmetadata-ui/src/main/resources/ui/src/assets/svg/{info-icon.svg => ic-info-tag.svg} (100%) rename openmetadata-ui/src/main/resources/ui/src/assets/svg/{success-icon.svg => ic-success.svg} (100%) rename openmetadata-ui/src/main/resources/ui/src/assets/svg/{warning-icon.svg => ic-warning-tag.svg} (100%) diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/cross-icon.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-cross.svg similarity index 100% rename from openmetadata-ui/src/main/resources/ui/src/assets/svg/cross-icon.svg rename to openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-cross.svg diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/error-icon.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-error.svg similarity index 100% rename from openmetadata-ui/src/main/resources/ui/src/assets/svg/error-icon.svg rename to openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-error.svg diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/general-icon.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-general.svg similarity index 100% rename from openmetadata-ui/src/main/resources/ui/src/assets/svg/general-icon.svg rename to openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-general.svg diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/info-icon.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-info-tag.svg similarity index 100% rename from openmetadata-ui/src/main/resources/ui/src/assets/svg/info-icon.svg rename to openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-info-tag.svg diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/success-icon.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-success.svg similarity index 100% rename from openmetadata-ui/src/main/resources/ui/src/assets/svg/success-icon.svg rename to openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-success.svg diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/warning-icon.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-warning-tag.svg similarity index 100% rename from openmetadata-ui/src/main/resources/ui/src/assets/svg/warning-icon.svg rename to openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-warning-tag.svg diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts index ba4be03f0327..78d2cadd1ed0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts @@ -10,7 +10,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +type AlertBarType = 'general' | 'info' | 'success' | 'warning' | 'error'; + interface AlertBarProps { - type: 'general' | 'info' | 'success' | 'warning' | 'error'; + type: AlertBarType; message: string; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx index 0032e124ae3d..12fbe772a4e5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx @@ -11,17 +11,17 @@ * limitations under the License. */ import Icon from '@ant-design/icons'; -import React, { useState } from 'react'; -import { ReactComponent as CrossIcon } from '../../assets/svg/cross-icon.svg'; +import React, { useMemo, useState } from 'react'; import { ReactComponent as ErrorCross } from '../../assets/svg/error-cross.svg'; -import { ReactComponent as ErrorIcon } from '../../assets/svg/error-icon.svg'; -import { ReactComponent as GeneralIcon } from '../../assets/svg/general-icon.svg'; +import { ReactComponent as CrossIcon } from '../../assets/svg/ic-cross.svg'; +import { ReactComponent as ErrorIcon } from '../../assets/svg/ic-error.svg'; +import { ReactComponent as GeneralIcon } from '../../assets/svg/ic-general.svg'; +import { ReactComponent as InfoIcon } from '../../assets/svg/ic-info-tag.svg'; +import { ReactComponent as SuccessIcon } from '../../assets/svg/ic-success.svg'; +import { ReactComponent as WarningIcon } from '../../assets/svg/ic-warning-tag.svg'; import { ReactComponent as InfoCross } from '../../assets/svg/info-cross.svg'; -import { ReactComponent as InfoIcon } from '../../assets/svg/info-icon.svg'; import { ReactComponent as SuccessCross } from '../../assets/svg/success-cross.svg'; -import { ReactComponent as SuccessIcon } from '../../assets/svg/success-icon.svg'; import { ReactComponent as WarningCross } from '../../assets/svg/warning-cross.svg'; -import { ReactComponent as WarningIcon } from '../../assets/svg/warning-icon.svg'; import './alert-bar.style.less'; const AlertBar = ({ @@ -29,78 +29,67 @@ const AlertBar = ({ message = '', }: AlertBarProps): JSX.Element => { const [isAlertVisible, setIsAlertVisible] = useState(true); - let alertComponent = { - icon: GeneralIcon, - color: '#292929', - bgColor: '#f6f7f9', - crossIcon: CrossIcon, - }; - switch (type) { - case 'general': - alertComponent = { - icon: GeneralIcon, - color: '#292929', - bgColor: '#f6f7f9', - crossIcon: CrossIcon, - }; + const alertComponent = useMemo(() => { + switch (type) { + case 'general': + return { + icon: GeneralIcon, + className: 'general', + crossIcon: CrossIcon, + }; - break; - case 'info': - alertComponent = { - icon: InfoIcon, - color: '#0950C5', - bgColor: '#f6f8ff', - crossIcon: InfoCross, - }; + case 'info': + return { + icon: InfoIcon, + className: 'info', + crossIcon: InfoCross, + }; - break; - case 'success': - alertComponent = { - icon: SuccessIcon, - color: '#1D7C4D', - bgColor: '#f5fbf8', - crossIcon: SuccessCross, - }; + case 'success': + return { + icon: SuccessIcon, + className: 'success', + crossIcon: SuccessCross, + }; - break; - case 'warning': - alertComponent = { - icon: WarningIcon, - color: '#F59638', - bgColor: '#fff5eb', - crossIcon: WarningCross, - }; + case 'warning': + return { + icon: WarningIcon, + className: 'warning', + crossIcon: WarningCross, + }; - break; - case 'error': - alertComponent = { - icon: ErrorIcon, - color: '#CB2531', - bgColor: '#fcf0f1', - crossIcon: ErrorCross, - }; + case 'error': + return { + icon: ErrorIcon, + className: 'error', + crossIcon: ErrorCross, + }; - break; - } + default: + return { + icon: GeneralIcon, + className: 'general', + crossIcon: CrossIcon, + }; + } + }, [type]); const handleCrossClick = () => setIsAlertVisible(false); return ( <>
+ className={`alert-container ${alertComponent.className}`} + style={{ display: isAlertVisible ? 'flex' : 'none' }}>
-

{message}

+

{message}

+
+
+ +

{message}

- + +
); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less index 168cae0fbf87..77559f52664d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less @@ -16,41 +16,41 @@ align-items: center; justify-content: space-between; padding: 20px; -} -.alert-content { - display: flex; - align-items: center; - gap: 8px; -} + &.general { + background-color: #f6f7f9; + color: #292929; + } -.cross-icon { - cursor: pointer; - background-color: transparent; - border: none; -} + &.info { + background-color: #f6f8ff; + color: #0950c5; + } -.general { - background-color: #f6f7f9; - color: #292929; -} + &.success { + background-color: #f5fbf8; + color: #1d7c4d; + } -.info { - background-color: #f6f8ff; - color: #0950c5; -} + &.warning { + background-color: #fff5eb; + color: #f59638; + } -.success { - background-color: #f5fbf8; - color: #1d7c4d; -} + &.error { + background-color: #fcf0f1; + color: #cb2531; + } -.warning { - background-color: #fff5eb; - color: #f59638; -} + .alert-content { + display: flex; + align-items: center; + gap: 8px; + } -.error { - background-color: #fcf0f1; - color: #cb2531; + .cross-icon { + cursor: pointer; + background-color: transparent; + border: none; + } } From 1caed64974776eab631805c389ca4a1241482966 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Wed, 31 Jul 2024 12:31:23 +0530 Subject: [PATCH 04/39] updated alert bar component --- .../ui/src/components/AlertBar/AlertBar.tsx | 56 +++++++++++++------ .../components/AlertBar/alert-bar.style.less | 1 + 2 files changed, 39 insertions(+), 18 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx index 82d965a595fd..9b6104c3a0d3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx @@ -11,6 +11,8 @@ * limitations under the License. */ import Icon from '@ant-design/icons'; +import { Alert } from 'antd'; +import classNames from 'classnames'; import React, { useMemo, useState } from 'react'; import { ReactComponent as ErrorCross } from '../../assets/svg/error-cross.svg'; import { ReactComponent as CrossIcon } from '../../assets/svg/ic-cross.svg'; @@ -30,7 +32,11 @@ const AlertBar = ({ }: AlertBarProps): JSX.Element => { const [isAlertVisible, setIsAlertVisible] = useState(true); - const alertComponent = useMemo(() => { + const { + icon: AlertIcon, + className, + crossIcon: CloseIcon, + } = useMemo(() => { switch (type) { case 'info': return { @@ -72,24 +78,38 @@ const AlertBar = ({ const handleCrossClick = () => setIsAlertVisible(false); return ( -
-
- + {type === 'general' ? ( +
+
+ +

{message}

+
+ +
+ ) : ( + } + description={message} + icon={} + type={type} /> -

{message}

-
- + )}
); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less index 77559f52664d..e39fe837283e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less @@ -16,6 +16,7 @@ align-items: center; justify-content: space-between; padding: 20px; + border: none; &.general { background-color: #f6f7f9; From ca7bafa416e44c1261158593952eac6f597b8618 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Wed, 31 Jul 2024 12:47:49 +0530 Subject: [PATCH 05/39] remove styles attributes --- .../ui/src/components/AlertBar/AlertBar.tsx | 21 +++++++------------ .../components/AlertBar/alert-bar.style.less | 5 +++++ 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx index 9b6104c3a0d3..c1b44d221041 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx @@ -78,25 +78,18 @@ const AlertBar = ({ const handleCrossClick = () => setIsAlertVisible(false); return ( -
+ <> {type === 'general' ? (
+ className={`${ + isAlertVisible ? 'alert-container' : 'hidden' + } ${className}`}>
- +

{message}

) : ( @@ -110,7 +103,7 @@ const AlertBar = ({ type={type} /> )} -
+ ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less index e39fe837283e..5b3bc730f139 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less @@ -49,9 +49,14 @@ gap: 8px; } + .alert-icon { + font-size: 25px; + } + .cross-icon { cursor: pointer; background-color: transparent; border: none; + font-size: 14px; } } From 3f1dbd8d78ec4a12773682c06acf66c4d723aaa6 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Wed, 31 Jul 2024 13:08:13 +0530 Subject: [PATCH 06/39] update styles --- .../components/AlertBar/alert-bar.style.less | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less index 5b3bc730f139..683122da22c4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less @@ -16,7 +16,11 @@ align-items: center; justify-content: space-between; padding: 20px; - border: none; + font-size: 16px; + + &.ant-alert-with-description { + padding: 20px; + } &.general { background-color: #f6f7f9; @@ -26,21 +30,29 @@ &.info { background-color: #f6f8ff; color: #0950c5; + border: none; + border-radius: 0px; } &.success { background-color: #f5fbf8; color: #1d7c4d; + border: none; + border-radius: 0px; } &.warning { background-color: #fff5eb; color: #f59638; + border: none; + border-radius: 0px; } &.error { background-color: #fcf0f1; color: #cb2531; + border: none; + border-radius: 0px; } .alert-content { @@ -59,4 +71,8 @@ border: none; font-size: 14px; } + + .ant-alert-description { + font-size: 16px; + } } From 0c30bb1298ff2cca004e60e8490aa578ef39a62d Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Wed, 31 Jul 2024 19:41:51 +0530 Subject: [PATCH 07/39] add alert store and use alert in page layout --- .../components/AlertBar/AlertBar.interface.ts | 4 +- .../ui/src/components/AlertBar/AlertBar.tsx | 1 + .../components/PageLayoutV1/PageLayoutV1.tsx | 51 ++++++++++++------- .../resources/ui/src/hooks/useAlertBar.ts | 35 +++++++++++++ .../main/resources/ui/src/utils/ToastUtils.ts | 23 ++------- 5 files changed, 74 insertions(+), 40 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/hooks/useAlertBar.ts diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts index 78d2cadd1ed0..136a70a04634 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts @@ -10,9 +10,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -type AlertBarType = 'general' | 'info' | 'success' | 'warning' | 'error'; +export type AlertBarType = 'general' | 'info' | 'success' | 'warning' | 'error'; -interface AlertBarProps { +export interface AlertBarProps { type: AlertBarType; message: string; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx index c1b44d221041..8b72f428924a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx @@ -25,6 +25,7 @@ import { ReactComponent as InfoCross } from '../../assets/svg/info-cross.svg'; import { ReactComponent as SuccessCross } from '../../assets/svg/success-cross.svg'; import { ReactComponent as WarningCross } from '../../assets/svg/warning-cross.svg'; import './alert-bar.style.less'; +import { AlertBarProps } from './AlertBar.interface'; const AlertBar = ({ type = 'general', diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx index 3d03682e20e7..b347614842f0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx @@ -21,6 +21,8 @@ import React, { ReactNode, useMemo, } from 'react'; +import { useAlertStore } from '../../hooks/useAlertBar'; +import AlertBar from '../AlertBar/AlertBar'; import DocumentTitle from '../common/DocumentTitle/DocumentTitle'; import './../../styles/layout/page-layout.less'; @@ -60,6 +62,8 @@ const PageLayoutV1: FC = ({ mainContainerClassName = '', pageContainerStyle = {}, }: PageLayoutProp) => { + const { alert } = useAlertStore(); + const contentWidth = useMemo(() => { if (leftPanel && rightPanel) { return `calc(100% - ${leftPanelWidth + rightPanelWidth}px)`; @@ -99,27 +103,36 @@ const PageLayoutV1: FC = ({ {leftPanel} )} - + {alert && ( + + + )} - flex={contentWidth} - offset={center ? 3 : 0} - span={center ? 18 : 24}> - {children} + + + {children} + + {rightPanel && ( + + {rightPanel} + + )} + - {rightPanel && ( - - {rightPanel} - - )} ); diff --git a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertBar.ts b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertBar.ts new file mode 100644 index 000000000000..f16c5ca3c8be --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertBar.ts @@ -0,0 +1,35 @@ +/* + * Copyright 2024 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { create } from 'zustand'; +import { AlertBarType } from '../components/AlertBar/AlertBar.interface'; + +type AlertType = { + type: AlertBarType; + message: string; +}; + +interface AlertStore { + alert: AlertType | undefined; + addAlert: (alert: AlertType) => void; + reset: () => void; +} + +export const useAlertStore = create()((set) => ({ + alert: undefined, + addAlert: (alert: AlertType) => { + set({ alert }); + }, + reset: () => { + set({ alert: undefined }); + }, +})); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ToastUtils.ts b/openmetadata-ui/src/main/resources/ui/src/utils/ToastUtils.ts index bfe835732fc3..14acbbaf7018 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/ToastUtils.ts +++ b/openmetadata-ui/src/main/resources/ui/src/utils/ToastUtils.ts @@ -14,8 +14,8 @@ import { AxiosError } from 'axios'; import { isEmpty, isString } from 'lodash'; import React from 'react'; -import { toast } from 'react-toastify'; import { ClientErrors } from '../enums/Axios.enum'; +import { useAlertStore } from '../hooks/useAlertBar'; import i18n from './i18next/LocalUtil'; import { getErrorText } from './StringsUtils'; @@ -69,10 +69,7 @@ export const showErrorToast = ( } } callback && callback(errorMessage); - toast.error(errorMessage, { - toastId: hashCode(errorMessage), - autoClose: autoCloseTimer, - }); + useAlertStore.getState().addAlert({ type: 'error', message: errorMessage }); }; /** @@ -81,9 +78,7 @@ export const showErrorToast = ( * @param autoCloseTimer Set the delay in ms to close the toast automatically. `Default: 5000` */ export const showSuccessToast = (message: string, autoCloseTimer = 5000) => { - toast.success(message, { - autoClose: autoCloseTimer, - }); + useAlertStore.getState().addAlert({ type: 'success', message }); }; /** @@ -92,15 +87,5 @@ export const showSuccessToast = (message: string, autoCloseTimer = 5000) => { * @param autoCloseTimer Set the delay in ms to close the toast automatically. `Default: 5000` */ export const showInfoToast = (message: string, autoCloseTimer = 5000) => { - toast.info(message, { - autoClose: autoCloseTimer, - }); -}; - -/** - * Clear all the toast messages. - */ -export const clearAllToasts = () => { - toast.clearWaitingQueue(); - toast.dismiss(); + useAlertStore.getState().addAlert({ type: 'info', message }); }; From beb3e7c9be428b8f95192d9db44f0c6a72a5eb98 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Wed, 31 Jul 2024 21:28:59 +0530 Subject: [PATCH 08/39] update component to have reset method --- .../ui/src/components/AlertBar/AlertBar.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx index 8b72f428924a..f213197562a8 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx @@ -13,7 +13,7 @@ import Icon from '@ant-design/icons'; import { Alert } from 'antd'; import classNames from 'classnames'; -import React, { useMemo, useState } from 'react'; +import React, { useMemo } from 'react'; import { ReactComponent as ErrorCross } from '../../assets/svg/error-cross.svg'; import { ReactComponent as CrossIcon } from '../../assets/svg/ic-cross.svg'; import { ReactComponent as ErrorIcon } from '../../assets/svg/ic-error.svg'; @@ -24,6 +24,7 @@ import { ReactComponent as WarningIcon } from '../../assets/svg/ic-warning-tag.s import { ReactComponent as InfoCross } from '../../assets/svg/info-cross.svg'; import { ReactComponent as SuccessCross } from '../../assets/svg/success-cross.svg'; import { ReactComponent as WarningCross } from '../../assets/svg/warning-cross.svg'; +import { useAlertStore } from '../../hooks/useAlertBar'; import './alert-bar.style.less'; import { AlertBarProps } from './AlertBar.interface'; @@ -31,7 +32,7 @@ const AlertBar = ({ type = 'general', message = '', }: AlertBarProps): JSX.Element => { - const [isAlertVisible, setIsAlertVisible] = useState(true); + const { alert, reset } = useAlertStore(); const { icon: AlertIcon, @@ -76,20 +77,15 @@ const AlertBar = ({ } }, [type]); - const handleCrossClick = () => setIsAlertVisible(false); - return ( <> {type === 'general' ? ( -
+

{message}

-
@@ -102,6 +98,7 @@ const AlertBar = ({ description={message} icon={} type={type} + onClose={() => reset()} /> )} From d50634ae21ad5b77fa9c18536e3ab52a58c108c7 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Wed, 31 Jul 2024 21:42:15 +0530 Subject: [PATCH 09/39] refactor: update reset calling method --- .../main/resources/ui/src/components/AlertBar/AlertBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx index f213197562a8..7a08e5054596 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx @@ -85,7 +85,7 @@ const AlertBar = ({

{message}

-
@@ -98,7 +98,7 @@ const AlertBar = ({ description={message} icon={} type={type} - onClose={() => reset()} + onClose={reset} /> )} From 42ec8727b5380d06955fb49bf23c893b5adc8c06 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Fri, 2 Aug 2024 12:07:37 +0530 Subject: [PATCH 10/39] update reset method name --- .../resources/ui/src/components/AlertBar/AlertBar.tsx | 8 ++++---- .../src/main/resources/ui/src/hooks/useAlertBar.ts | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx index 7a08e5054596..d71333fed112 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx @@ -32,7 +32,7 @@ const AlertBar = ({ type = 'general', message = '', }: AlertBarProps): JSX.Element => { - const { alert, reset } = useAlertStore(); + const { resetAlert } = useAlertStore(); const { icon: AlertIcon, @@ -80,12 +80,12 @@ const AlertBar = ({ return ( <> {type === 'general' ? ( -
+

{message}

-
@@ -98,7 +98,7 @@ const AlertBar = ({ description={message} icon={} type={type} - onClose={reset} + onClose={resetAlert} /> )} diff --git a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertBar.ts b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertBar.ts index f16c5ca3c8be..879496ed4c3b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertBar.ts +++ b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertBar.ts @@ -21,7 +21,7 @@ type AlertType = { interface AlertStore { alert: AlertType | undefined; addAlert: (alert: AlertType) => void; - reset: () => void; + resetAlert: () => void; } export const useAlertStore = create()((set) => ({ @@ -29,7 +29,7 @@ export const useAlertStore = create()((set) => ({ addAlert: (alert: AlertType) => { set({ alert }); }, - reset: () => { + resetAlert: () => { set({ alert: undefined }); }, })); From 8f9bccf768ad71da6ec0b39c7310e42675d8c047 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Fri, 2 Aug 2024 20:32:24 +0530 Subject: [PATCH 11/39] updated as per feedbacks --- .../ui/src/assets/svg/error-cross.svg | 3 - .../resources/ui/src/assets/svg/ic-cross.svg | 3 - .../ui/src/assets/svg/ic-general.svg | 12 --- .../ui/src/assets/svg/info-cross.svg | 3 - .../ui/src/assets/svg/success-cross.svg | 3 - .../ui/src/assets/svg/warning-cross.svg | 3 - .../components/AlertBar/AlertBar.interface.ts | 6 +- .../ui/src/components/AlertBar/AlertBar.tsx | 75 ++++++------------- .../ui/src/components/AlertBar/CrossIcon.tsx | 31 ++++++++ .../components/AlertBar/alert-bar.style.less | 19 +---- .../components/AppContainer/AppContainer.tsx | 3 + .../AppContainer/app-container.less | 3 +- .../resources/ui/src/hooks/useAlertBar.ts | 8 +- .../src/main/resources/ui/src/styles/temp.css | 3 +- 14 files changed, 72 insertions(+), 103 deletions(-) delete mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/error-cross.svg delete mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-cross.svg delete mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-general.svg delete mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/info-cross.svg delete mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/success-cross.svg delete mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/warning-cross.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/AlertBar/CrossIcon.tsx diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/error-cross.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/error-cross.svg deleted file mode 100644 index a3a154cece1c..000000000000 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/error-cross.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-cross.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-cross.svg deleted file mode 100644 index c2d2d59156a3..000000000000 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-cross.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-general.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-general.svg deleted file mode 100644 index 386598d34288..000000000000 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-general.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/info-cross.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/info-cross.svg deleted file mode 100644 index 49b14ed64637..000000000000 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/info-cross.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/success-cross.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/success-cross.svg deleted file mode 100644 index a271a3987251..000000000000 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/success-cross.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/warning-cross.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/warning-cross.svg deleted file mode 100644 index f0f7064ec556..000000000000 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/warning-cross.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts index 136a70a04634..d6f937b24498 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts @@ -1,3 +1,5 @@ +import { AlertProps } from 'antd'; + /* * Copyright 2024 Collate. * Licensed under the Apache License, Version 2.0 (the "License"); @@ -10,9 +12,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export type AlertBarType = 'general' | 'info' | 'success' | 'warning' | 'error'; - export interface AlertBarProps { - type: AlertBarType; + type: AlertProps['type']; message: string; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx index d71333fed112..0e586355e1a0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx @@ -10,98 +10,71 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import Icon from '@ant-design/icons'; import { Alert } from 'antd'; import classNames from 'classnames'; import React, { useMemo } from 'react'; -import { ReactComponent as ErrorCross } from '../../assets/svg/error-cross.svg'; -import { ReactComponent as CrossIcon } from '../../assets/svg/ic-cross.svg'; import { ReactComponent as ErrorIcon } from '../../assets/svg/ic-error.svg'; -import { ReactComponent as GeneralIcon } from '../../assets/svg/ic-general.svg'; import { ReactComponent as InfoIcon } from '../../assets/svg/ic-info-tag.svg'; import { ReactComponent as SuccessIcon } from '../../assets/svg/ic-success.svg'; import { ReactComponent as WarningIcon } from '../../assets/svg/ic-warning-tag.svg'; -import { ReactComponent as InfoCross } from '../../assets/svg/info-cross.svg'; -import { ReactComponent as SuccessCross } from '../../assets/svg/success-cross.svg'; -import { ReactComponent as WarningCross } from '../../assets/svg/warning-cross.svg'; import { useAlertStore } from '../../hooks/useAlertBar'; import './alert-bar.style.less'; import { AlertBarProps } from './AlertBar.interface'; +import CrossIcon from './CrossIcon'; -const AlertBar = ({ - type = 'general', - message = '', -}: AlertBarProps): JSX.Element => { +const AlertBar = ({ type, message }: AlertBarProps): JSX.Element => { const { resetAlert } = useAlertStore(); - const { - icon: AlertIcon, - className, - crossIcon: CloseIcon, - } = useMemo(() => { + const { icon, className, crossIcon } = useMemo(() => { switch (type) { case 'info': return { - icon: InfoIcon, + icon: , className: 'info', - crossIcon: InfoCross, + crossIcon: , }; case 'success': return { - icon: SuccessIcon, + icon: , className: 'success', - crossIcon: SuccessCross, + crossIcon: , }; case 'warning': return { - icon: WarningIcon, + icon: , className: 'warning', - crossIcon: WarningCross, + crossIcon: , }; case 'error': return { - icon: ErrorIcon, + icon: , className: 'error', - crossIcon: ErrorCross, + crossIcon: , }; default: return { - icon: GeneralIcon, - className: 'general', - crossIcon: CrossIcon, + icon: null, + className: '', + crossIcon: null, }; } }, [type]); return ( - <> - {type === 'general' ? ( -
-
- -

{message}

-
- -
- ) : ( - } - description={message} - icon={} - type={type} - onClose={resetAlert} - /> - )} - + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/CrossIcon.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/CrossIcon.tsx new file mode 100644 index 000000000000..1b43e8921ee7 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/CrossIcon.tsx @@ -0,0 +1,31 @@ +/* + * Copyright 2024 Collate. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; + +const CrossIcon = ({ iconColor }: { iconColor: string }) => { + return ( + + + + ); +}; + +export default CrossIcon; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less index 683122da22c4..b747661b8dfa 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less @@ -10,6 +10,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + .alert-container { width: 100%; display: flex; @@ -17,6 +18,7 @@ justify-content: space-between; padding: 20px; font-size: 16px; + height: 64px; &.ant-alert-with-description { padding: 20px; @@ -55,23 +57,6 @@ border-radius: 0px; } - .alert-content { - display: flex; - align-items: center; - gap: 8px; - } - - .alert-icon { - font-size: 25px; - } - - .cross-icon { - cursor: pointer; - background-color: transparent; - border: none; - font-size: 14px; - } - .ant-alert-description { font-size: 16px; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx index b1b694b2690b..cf3a58819308 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx @@ -17,6 +17,7 @@ import React, { useCallback, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { ES_MAX_PAGE_SIZE } from '../../constants/constants'; import { useLimitStore } from '../../context/LimitsProvider/useLimitsStore'; +import { useAlertStore } from '../../hooks/useAlertBar'; import { useApplicationStore } from '../../hooks/useApplicationStore'; import { useDomainStore } from '../../hooks/useDomainStore'; import { getDomainList } from '../../rest/domainAPI'; @@ -32,6 +33,7 @@ const AppContainer = () => { const { i18n } = useTranslation(); const { Header, Sider, Content } = Layout; const { currentUser } = useApplicationStore(); + const { alert } = useAlertStore(); const { updateDomains, updateDomainLoading } = useDomainStore(); const AuthenticatedRouter = applicationRoutesClass.getRouteElements(); const ApplicationExtras = applicationsClassBase.getApplicationExtension(); @@ -76,6 +78,7 @@ const AppContainer = () => { ()((set) => ({ set({ alert }); }, resetAlert: () => { - set({ alert: undefined }); + setTimeout(() => { + set({ alert: undefined }); + }, 1000); }, })); diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css index 0f97f437bd94..b627b3d7c45f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css +++ b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css @@ -816,6 +816,7 @@ body .list-option.rdw-option-active { --ant-navbar-height: 64px; } -:root .extra-banner { +:root .extra-banner, +:root .alert-banner { --ant-navbar-height: 128px; } From 0f12a126c1f63816e9e64a80f5e746153ab3923c Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Fri, 2 Aug 2024 21:02:40 +0530 Subject: [PATCH 12/39] refcator: update CrossIcon component usage --- .../ui/src/components/AlertBar/AlertBar.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx index 0e586355e1a0..ecb002413d53 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx @@ -25,41 +25,41 @@ import CrossIcon from './CrossIcon'; const AlertBar = ({ type, message }: AlertBarProps): JSX.Element => { const { resetAlert } = useAlertStore(); - const { icon, className, crossIcon } = useMemo(() => { + const { icon, className, crossIconColor } = useMemo(() => { switch (type) { case 'info': return { icon: , className: 'info', - crossIcon: , + crossIconColor: '#0950c5', }; case 'success': return { icon: , className: 'success', - crossIcon: , + crossIconColor: '#1D7C4D', }; case 'warning': return { icon: , className: 'warning', - crossIcon: , + crossIconColor: '#F59638', }; case 'error': return { icon: , className: 'error', - crossIcon: , + crossIconColor: '#CB2531', }; default: return { icon: null, className: '', - crossIcon: null, + crossIconColor: null, }; } }, [type]); @@ -69,7 +69,7 @@ const AlertBar = ({ type, message }: AlertBarProps): JSX.Element => { closable showIcon className={classNames(className, 'alert-container')} - closeIcon={crossIcon} + closeIcon={crossIconColor && } description={message} icon={icon} type={type} From 57927c0ba003ea212ae3fb4ba6926fd03e1851d0 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Fri, 2 Aug 2024 21:05:10 +0530 Subject: [PATCH 13/39] chore: remove condition for CrossIcon --- .../main/resources/ui/src/components/AlertBar/AlertBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx index ecb002413d53..7d5838c3ad0b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx @@ -59,7 +59,7 @@ const AlertBar = ({ type, message }: AlertBarProps): JSX.Element => { return { icon: null, className: '', - crossIconColor: null, + crossIconColor: '', }; } }, [type]); @@ -69,7 +69,7 @@ const AlertBar = ({ type, message }: AlertBarProps): JSX.Element => { closable showIcon className={classNames(className, 'alert-container')} - closeIcon={crossIconColor && } + closeIcon={} description={message} icon={icon} type={type} From 2073bfa99bedf412fb53a2b4fea8e120cc52dcb1 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Mon, 5 Aug 2024 10:56:55 +0530 Subject: [PATCH 14/39] update animation for opening alert bar. --- .../components/AlertBar/alert-bar.style.less | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less index b747661b8dfa..06524201d743 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less @@ -11,17 +11,28 @@ * limitations under the License. */ +@keyframes resize-alert-animation { + from { + height: 0; + padding: 0 20px; + } + to { + height: auto; + padding: 20px; + } +} + .alert-container { width: 100%; display: flex; align-items: center; justify-content: space-between; - padding: 20px; font-size: 16px; - height: 64px; + height: 0; + animation: resize-alert-animation 0.3s ease-in-out forwards; &.ant-alert-with-description { - padding: 20px; + padding: 0; } &.general { From e15b877d14f283671a08f349182b81d43d26f58e Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Mon, 5 Aug 2024 13:52:22 +0530 Subject: [PATCH 15/39] add autoCloseTimer to alert banner --- .../ui/src/components/AlertBar/AlertBar.tsx | 6 ++--- .../components/AlertBar/alert-bar.style.less | 23 +++++++++++++++---- .../components/AppContainer/AppContainer.tsx | 2 +- .../components/PageLayoutV1/PageLayoutV1.tsx | 2 +- .../{useAlertBar.ts => useAlertStore.ts} | 20 +++++++++++++--- .../main/resources/ui/src/utils/ToastUtils.ts | 12 ++++++---- 6 files changed, 48 insertions(+), 17 deletions(-) rename openmetadata-ui/src/main/resources/ui/src/hooks/{useAlertBar.ts => useAlertStore.ts} (65%) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx index 7d5838c3ad0b..d53c92bcb76f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx @@ -17,13 +17,13 @@ import { ReactComponent as ErrorIcon } from '../../assets/svg/ic-error.svg'; import { ReactComponent as InfoIcon } from '../../assets/svg/ic-info-tag.svg'; import { ReactComponent as SuccessIcon } from '../../assets/svg/ic-success.svg'; import { ReactComponent as WarningIcon } from '../../assets/svg/ic-warning-tag.svg'; -import { useAlertStore } from '../../hooks/useAlertBar'; +import { useAlertStore } from '../../hooks/useAlertStore'; import './alert-bar.style.less'; import { AlertBarProps } from './AlertBar.interface'; import CrossIcon from './CrossIcon'; const AlertBar = ({ type, message }: AlertBarProps): JSX.Element => { - const { resetAlert } = useAlertStore(); + const { resetAlert, animationClass } = useAlertStore(); const { icon, className, crossIconColor } = useMemo(() => { switch (type) { @@ -68,7 +68,7 @@ const AlertBar = ({ type, message }: AlertBarProps): JSX.Element => { } description={message} icon={icon} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less index 06524201d743..264e1d712aed 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less @@ -11,7 +11,7 @@ * limitations under the License. */ -@keyframes resize-alert-animation { +@keyframes resize-show-animation { from { height: 0; padding: 0 20px; @@ -22,17 +22,30 @@ } } +@keyframes resize-hide-animation { + from { + height: auto; + padding: 20px; + } + to { + height: 0; + padding: 0 20px; + } +} + .alert-container { width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 16px; - height: 0; - animation: resize-alert-animation 0.3s ease-in-out forwards; - &.ant-alert-with-description { - padding: 0; + &.show-alert { + animation: resize-show-animation 0.3s ease-in-out forwards; + } + + &.hide-alert { + animation: resize-hide-animation 0.3s ease-in-out forwards; } &.general { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx index cf3a58819308..af3247309de1 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx @@ -17,7 +17,7 @@ import React, { useCallback, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { ES_MAX_PAGE_SIZE } from '../../constants/constants'; import { useLimitStore } from '../../context/LimitsProvider/useLimitsStore'; -import { useAlertStore } from '../../hooks/useAlertBar'; +import { useAlertStore } from '../../hooks/useAlertStore'; import { useApplicationStore } from '../../hooks/useApplicationStore'; import { useDomainStore } from '../../hooks/useDomainStore'; import { getDomainList } from '../../rest/domainAPI'; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx index b347614842f0..e8b1b028def2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx @@ -21,7 +21,7 @@ import React, { ReactNode, useMemo, } from 'react'; -import { useAlertStore } from '../../hooks/useAlertBar'; +import { useAlertStore } from '../../hooks/useAlertStore'; import AlertBar from '../AlertBar/AlertBar'; import DocumentTitle from '../common/DocumentTitle/DocumentTitle'; import './../../styles/layout/page-layout.less'; diff --git a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertBar.ts b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts similarity index 65% rename from openmetadata-ui/src/main/resources/ui/src/hooks/useAlertBar.ts rename to openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts index 0ba9e3d823ae..164ad5a5203c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertBar.ts +++ b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts @@ -20,14 +20,28 @@ type AlertType = { interface AlertStore { alert: AlertType | undefined; - addAlert: (alert: AlertType) => void; + animationClass: string; + addAlert: (alert: AlertType, timer?: number) => void; resetAlert: () => void; } export const useAlertStore = create()((set) => ({ alert: undefined, - addAlert: (alert: AlertType) => { - set({ alert }); + animationClass: '', + addAlert: (alert: AlertType, timer?: number) => { + set({ alert, animationClass: 'show-alert' }); + + const autoCloseTimer = + timer !== undefined ? timer : alert.type === 'error' ? Infinity : 5000; + + if (autoCloseTimer !== Infinity) { + setTimeout(() => { + set({ animationClass: 'hide-alert' }); + setTimeout(() => { + set({ alert: undefined }); + }, 1000); + }, autoCloseTimer); + } }, resetAlert: () => { setTimeout(() => { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ToastUtils.ts b/openmetadata-ui/src/main/resources/ui/src/utils/ToastUtils.ts index 14acbbaf7018..a14ca095aa65 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/ToastUtils.ts +++ b/openmetadata-ui/src/main/resources/ui/src/utils/ToastUtils.ts @@ -15,7 +15,7 @@ import { AxiosError } from 'axios'; import { isEmpty, isString } from 'lodash'; import React from 'react'; import { ClientErrors } from '../enums/Axios.enum'; -import { useAlertStore } from '../hooks/useAlertBar'; +import { useAlertStore } from '../hooks/useAlertStore'; import i18n from './i18next/LocalUtil'; import { getErrorText } from './StringsUtils'; @@ -69,7 +69,9 @@ export const showErrorToast = ( } } callback && callback(errorMessage); - useAlertStore.getState().addAlert({ type: 'error', message: errorMessage }); + useAlertStore + .getState() + .addAlert({ type: 'error', message: errorMessage }, autoCloseTimer); }; /** @@ -78,7 +80,9 @@ export const showErrorToast = ( * @param autoCloseTimer Set the delay in ms to close the toast automatically. `Default: 5000` */ export const showSuccessToast = (message: string, autoCloseTimer = 5000) => { - useAlertStore.getState().addAlert({ type: 'success', message }); + useAlertStore + .getState() + .addAlert({ type: 'success', message }, autoCloseTimer); }; /** @@ -87,5 +91,5 @@ export const showSuccessToast = (message: string, autoCloseTimer = 5000) => { * @param autoCloseTimer Set the delay in ms to close the toast automatically. `Default: 5000` */ export const showInfoToast = (message: string, autoCloseTimer = 5000) => { - useAlertStore.getState().addAlert({ type: 'info', message }); + useAlertStore.getState().addAlert({ type: 'info', message }, autoCloseTimer); }; From 3970cb62ea32bbf84a8900bb123e65b8e254ee95 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Mon, 5 Aug 2024 17:38:28 +0530 Subject: [PATCH 16/39] remove cross icon component --- .../ui/src/components/AlertBar/CrossIcon.tsx | 31 ------------------- 1 file changed, 31 deletions(-) delete mode 100644 openmetadata-ui/src/main/resources/ui/src/components/AlertBar/CrossIcon.tsx diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/CrossIcon.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/CrossIcon.tsx deleted file mode 100644 index 1b43e8921ee7..000000000000 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/CrossIcon.tsx +++ /dev/null @@ -1,31 +0,0 @@ -/* - * Copyright 2024 Collate. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * http://www.apache.org/licenses/LICENSE-2.0 - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import React from 'react'; - -const CrossIcon = ({ iconColor }: { iconColor: string }) => { - return ( - - - - ); -}; - -export default CrossIcon; From 7c16a64d0b293ef8dd6efd3b3992fa81fd805b7b Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Mon, 5 Aug 2024 17:38:39 +0530 Subject: [PATCH 17/39] add cross icon svg --- .../src/main/resources/ui/src/assets/svg/ic-cross.svg | 3 +++ .../main/resources/ui/src/components/AlertBar/AlertBar.tsx | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-cross.svg diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-cross.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-cross.svg new file mode 100644 index 000000000000..4edb4b8312eb --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx index d53c92bcb76f..0526965ebd4a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx @@ -13,6 +13,7 @@ import { Alert } from 'antd'; import classNames from 'classnames'; import React, { useMemo } from 'react'; +import { ReactComponent as CrossIcon } from '../../assets/svg/ic-cross.svg'; import { ReactComponent as ErrorIcon } from '../../assets/svg/ic-error.svg'; import { ReactComponent as InfoIcon } from '../../assets/svg/ic-info-tag.svg'; import { ReactComponent as SuccessIcon } from '../../assets/svg/ic-success.svg'; @@ -20,7 +21,6 @@ import { ReactComponent as WarningIcon } from '../../assets/svg/ic-warning-tag.s import { useAlertStore } from '../../hooks/useAlertStore'; import './alert-bar.style.less'; import { AlertBarProps } from './AlertBar.interface'; -import CrossIcon from './CrossIcon'; const AlertBar = ({ type, message }: AlertBarProps): JSX.Element => { const { resetAlert, animationClass } = useAlertStore(); @@ -69,7 +69,7 @@ const AlertBar = ({ type, message }: AlertBarProps): JSX.Element => { closable showIcon className={classNames(className, 'alert-container', animationClass)} - closeIcon={} + closeIcon={} description={message} icon={icon} type={type} From eab36498538389231b34ae06592164c30033aac7 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Mon, 5 Aug 2024 17:39:47 +0530 Subject: [PATCH 18/39] update to fix the height issue --- .../ui/src/components/AlertBar/alert-bar.style.less | 10 +++------- .../ui/src/components/AppContainer/app-container.less | 4 ++++ .../src/main/resources/ui/src/hooks/useAlertStore.ts | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less index 264e1d712aed..b0b233857b71 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less @@ -17,14 +17,14 @@ padding: 0 20px; } to { - height: auto; + height: 64px; padding: 20px; } } @keyframes resize-hide-animation { from { - height: auto; + height: 64px; padding: 20px; } to { @@ -39,6 +39,7 @@ align-items: center; justify-content: space-between; font-size: 16px; + overflow-y: scroll; &.show-alert { animation: resize-show-animation 0.3s ease-in-out forwards; @@ -48,11 +49,6 @@ animation: resize-hide-animation 0.3s ease-in-out forwards; } - &.general { - background-color: #f6f7f9; - color: #292929; - } - &.info { background-color: #f6f8ff; color: #0950c5; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/app-container.less b/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/app-container.less index 31df9a09ac27..b2c094a12f00 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/app-container.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/app-container.less @@ -22,6 +22,10 @@ height: calc(100vh - 64px); } + &.alert-banner { + height: 100vh; + } + background-color: white; .ant-layout-header { line-height: inherit; diff --git a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts index 164ad5a5203c..1f0698184145 100644 --- a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts +++ b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts @@ -39,13 +39,13 @@ export const useAlertStore = create()((set) => ({ set({ animationClass: 'hide-alert' }); setTimeout(() => { set({ alert: undefined }); - }, 1000); + }, 300); }, autoCloseTimer); } }, resetAlert: () => { setTimeout(() => { set({ alert: undefined }); - }, 1000); + }, 300); }, })); From e1e61810ed382cd0cf53833da3fbdf62237fa1ea Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Fri, 20 Sep 2024 12:11:40 +0530 Subject: [PATCH 19/39] fix height glitch issue when alert appears --- .../ui/src/components/AlertBar/alert-bar.style.less | 4 ++-- .../ui/src/components/AppContainer/app-container.less | 7 +------ .../src/main/resources/ui/src/hooks/useAlertStore.ts | 9 ++------- .../main/resources/ui/src/styles/layout/page-layout.less | 1 + 4 files changed, 6 insertions(+), 15 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less index b0b233857b71..dbe166838a08 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less @@ -42,11 +42,11 @@ overflow-y: scroll; &.show-alert { - animation: resize-show-animation 0.3s ease-in-out forwards; + animation: resize-show-animation 1.2s ease-in-out forwards; } &.hide-alert { - animation: resize-hide-animation 0.3s ease-in-out forwards; + animation: resize-hide-animation 1.2s ease-out forwards; } &.info { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/app-container.less b/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/app-container.less index b2c094a12f00..e0d632e2ab77 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/app-container.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/app-container.less @@ -16,16 +16,11 @@ .app-container { height: 100vh; - &.extra-banner, - &.alert-banner { + &.extra-banner { // Remove the height of the banner height: calc(100vh - 64px); } - &.alert-banner { - height: 100vh; - } - background-color: white; .ant-layout-header { line-height: inherit; diff --git a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts index 1f0698184145..a18f382134b1 100644 --- a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts +++ b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts @@ -36,16 +36,11 @@ export const useAlertStore = create()((set) => ({ if (autoCloseTimer !== Infinity) { setTimeout(() => { - set({ animationClass: 'hide-alert' }); - setTimeout(() => { - set({ alert: undefined }); - }, 300); + set({ animationClass: 'hide-alert', alert: undefined }); }, autoCloseTimer); } }, resetAlert: () => { - setTimeout(() => { - set({ alert: undefined }); - }, 300); + set({ animationClass: 'hide-alert', alert: undefined }); }, })); diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less b/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less index 4d2cea492ece..fea21d847c0d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less +++ b/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less @@ -18,6 +18,7 @@ height: calc(100vh - @om-navbar-height); overflow-y: auto; overflow-x: hidden; + transition: height 1.2s ease-in-out; } .page-layout-v1-left-panel { From 5b94326d170f70a38a367bc0048b9e76485d7bf5 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Fri, 20 Sep 2024 20:13:25 +0530 Subject: [PATCH 20/39] update the alert notification tests --- .../e2e/Features/ActivityFeed.spec.ts | 30 +++++++++++-------- .../e2e/Features/TeamsDragAndDrop.spec.ts | 9 ++++-- .../e2e/Features/TeamsHierarchy.spec.ts | 3 +- .../e2e/Flow/ApiServiceRest.spec.ts | 13 ++++---- .../e2e/Flow/CustomizeLandingPage.spec.ts | 10 +++---- .../playwright/e2e/Flow/PersonaFlow.spec.ts | 3 +- .../DataInsightReportApplication.spec.ts | 26 ++++++++++++---- .../e2e/Pages/DataInsightSettings.spec.ts | 8 +++-- .../e2e/Pages/DataQualityAndProfiler.spec.ts | 10 +++++-- .../ui/playwright/e2e/Pages/Glossary.spec.ts | 3 +- .../e2e/Pages/LoginConfiguration.spec.ts | 6 +++- .../ui/playwright/e2e/Pages/Policies.spec.ts | 12 ++++++-- .../ui/playwright/e2e/Pages/Roles.spec.ts | 14 +++++++-- .../e2e/Pages/SearchIndexApplication.spec.ts | 26 ++++++++++++---- .../ui/playwright/e2e/Pages/Teams.spec.ts | 2 +- .../ui/playwright/e2e/Pages/TestSuite.spec.ts | 3 +- .../VersionPages/EntityVersionPages.spec.ts | 12 ++++---- .../ServiceEntityVersionPage.spec.ts | 12 ++++---- .../entity/ingestion/MySqlIngestionClass.ts | 6 +++- .../ingestion/PostgresIngestionClass.ts | 6 +++- .../RedshiftWithDBTIngestionClass.ts | 6 +++- .../entity/ingestion/ServiceBaseClass.ts | 12 ++++++-- .../resources/ui/playwright/utils/alert.ts | 4 +-- .../main/resources/ui/playwright/utils/bot.ts | 4 +-- .../resources/ui/playwright/utils/common.ts | 13 ++++---- .../ui/playwright/utils/customMetric.ts | 9 +++--- .../playwright/utils/customizeLandingPage.ts | 3 +- .../resources/ui/playwright/utils/dragDrop.ts | 2 +- .../resources/ui/playwright/utils/entity.ts | 21 +++---------- .../resources/ui/playwright/utils/glossary.ts | 18 +++++++---- .../ui/playwright/utils/serviceIngestion.ts | 6 +++- .../resources/ui/playwright/utils/task.ts | 4 +-- .../resources/ui/playwright/utils/team.ts | 4 +-- .../resources/ui/playwright/utils/user.ts | 27 ++++++++++------- 34 files changed, 222 insertions(+), 125 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts index 88d7bc102516..504b83230e31 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts @@ -203,14 +203,14 @@ test.describe('Activity feed', () => { await page.getByText('Accept Suggestion').click(); - await toastNotification(page, /Task resolved successfully/); + await toastNotification(page, /Task resolved successfully/, 'success'); // Task 1 - Request to update tag to be resolved await page.getByText('Accept Suggestion').click(); const waitForCountFetch = page.waitForResponse('/api/v1/feed/count?**'); - await toastNotification(page, /Task resolved successfully/); + await toastNotification(page, /Task resolved successfully/, 'success'); await waitForCountFetch; await checkTaskCount(page, 0, 2); @@ -362,14 +362,14 @@ test.describe('Activity feed', () => { await page.getByText('OK').click(); - await toastNotification(page, /Task resolved successfully/); + await toastNotification(page, /Task resolved successfully/, 'success'); // Task 1 - Resolved the task await page.getByText('Accept Suggestion').click(); const waitForCountFetch = page.waitForResponse('/api/v1/feed/count?**'); - await toastNotification(page, /Task resolved successfully/); + await toastNotification(page, /Task resolved successfully/, 'success'); await waitForCountFetch; await checkTaskCount(page, 0, 2); @@ -415,7 +415,11 @@ test.describe('Activity feed', () => { await page.getByRole('menuitem', { name: 'close' }).click(); - await toastNotification(page, 'Task cannot be closed without a comment.'); + await toastNotification( + page, + 'Task cannot be closed without a comment.', + 'warning' + ); // Close the task from the Button.Group, with comment is added. await page.fill( @@ -433,7 +437,7 @@ test.describe('Activity feed', () => { await commentWithCloseTask; const waitForCountFetch = page.waitForResponse('/api/v1/feed/count?**'); - await toastNotification(page, 'Task closed successfully.'); + await toastNotification(page, 'Task closed successfully.', 'success'); await waitForCountFetch; await checkTaskCount(page, 0, 1); @@ -491,7 +495,7 @@ test.describe('Activity feed', () => { await commentWithCloseTask; const waitForCountFetch2 = page.waitForResponse('/api/v1/feed/count?**'); - await toastNotification(page, 'Task closed successfully.'); + await toastNotification(page, 'Task closed successfully.', 'success'); await waitForCountFetch2; // open task count after closing one task @@ -698,7 +702,8 @@ base.describe('Activity feed with Data Consumer User', () => { // await toastNotification(page1, 'Task closed successfully.'); await toastNotification( page1, - 'An exception with message [Cannot invoke "java.util.List.stream()" because "owners" is null] was thrown while processing request.' + 'An exception with message [Cannot invoke "java.util.List.stream()" because "owners" is null] was thrown while processing request.', + 'error' ); // TODO: Ashish - Enable them once issue is resolved from Backend https://github.com/open-metadata/OpenMetadata/issues/17059 @@ -765,7 +770,7 @@ base.describe('Activity feed with Data Consumer User', () => { await page2.getByText('Accept Suggestion').click(); const waitForCountFetch = page2.waitForResponse('/api/v1/feed/count?**'); - await toastNotification(page2, /Task resolved successfully/); + await toastNotification(page2, /Task resolved successfully/, 'success'); await waitForCountFetch; // TODO: Ashish - Enable them once issue is resolved from Backend https://github.com/open-metadata/OpenMetadata/issues/17059 @@ -906,7 +911,7 @@ base.describe('Activity feed with Data Consumer User', () => { await page2.getByText('OK').click(); - await toastNotification(page2, /Task resolved successfully/); + await toastNotification(page2, /Task resolved successfully/, 'success'); // Accept the description task @@ -928,7 +933,7 @@ base.describe('Activity feed with Data Consumer User', () => { await page2.getByText('OK').click(); - await toastNotification(page2, /Task resolved successfully/); + await toastNotification(page2, /Task resolved successfully/, 'success'); await afterActionUser2(); } @@ -975,7 +980,8 @@ base.describe('Activity feed with Data Consumer User', () => { await toastNotification( page2, // eslint-disable-next-line max-len - `Principal: CatalogPrincipal{name='${viewAllUser.responseData.name}'} operation EditDescription denied by role ${viewAllRoles.responseData.name}, policy ${viewAllPolicy.responseData.name}, rule editNotAllowed` + `Principal: CatalogPrincipal{name='${viewAllUser.responseData.name}'} operation EditDescription denied by role ${viewAllRoles.responseData.name}, policy ${viewAllPolicy.responseData.name}, rule editNotAllowed`, + 'error' ); await afterActionUser2(); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/TeamsDragAndDrop.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/TeamsDragAndDrop.spec.ts index a91ddc482b01..eaa13dbc0f3b 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/TeamsDragAndDrop.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/TeamsDragAndDrop.spec.ts @@ -118,7 +118,8 @@ test.describe('Teams drag and drop should work properly', () => { await dragAndDropElement(page, team, teamNameGroup); await toastNotification( page, - `You cannot move to this team as Team Type ${TEAM_TYPE_BY_NAME[team]} can't be Group children` + `You cannot move to this team as Team Type ${TEAM_TYPE_BY_NAME[team]} can't be Group children`, + 'error' ); } }); @@ -132,7 +133,8 @@ test.describe('Teams drag and drop should work properly', () => { await dragAndDropElement(page, team, teamNameDepartment); await toastNotification( page, - `You cannot move to this team as Team Type ${TEAM_TYPE_BY_NAME[team]} can't be Department children` + `You cannot move to this team as Team Type ${TEAM_TYPE_BY_NAME[team]} can't be Department children`, + 'error' ); } }); @@ -143,7 +145,8 @@ test.describe('Teams drag and drop should work properly', () => { await dragAndDropElement(page, teamNameBusiness, teamNameDivision); await toastNotification( page, - "You cannot move to this team as Team Type BusinessUnit can't be Division children" + "You cannot move to this team as Team Type BusinessUnit can't be Division children", + 'error' ); }); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/TeamsHierarchy.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/TeamsHierarchy.spec.ts index 0f40bc75eca2..1ada99e4cb99 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/TeamsHierarchy.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/TeamsHierarchy.spec.ts @@ -138,7 +138,8 @@ test.describe('Add Nested Teams and Test TeamsSelectable', () => { await toastNotification( page, - `"${businessTeamName}" deleted successfully!` + `"${businessTeamName}" deleted successfully!`, + 'success' ); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/ApiServiceRest.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/ApiServiceRest.spec.ts index ec7a2f4c7887..6d856c83bf0b 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/ApiServiceRest.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/ApiServiceRest.spec.ts @@ -12,7 +12,12 @@ */ import { expect, test } from '@playwright/test'; import { GlobalSettingOptions } from '../../constant/settings'; -import { descriptionBox, redirectToHomePage, uuid } from '../../utils/common'; +import { + descriptionBox, + redirectToHomePage, + toastNotification, + uuid, +} from '../../utils/common'; import { settingClick } from '../../utils/sidebar'; const apiServiceConfig = { @@ -89,10 +94,6 @@ test.describe('API service', () => { await deleteResponse; - await expect(page.locator('.Toastify__toast-body')).toHaveText( - /deleted successfully!/ - ); - - await page.click('.Toastify__close-button'); + await toastNotification(page, /deleted successfully!/, 'success'); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/CustomizeLandingPage.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/CustomizeLandingPage.spec.ts index b0cba878881f..f9f9bf859306 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/CustomizeLandingPage.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/CustomizeLandingPage.spec.ts @@ -14,7 +14,7 @@ import { expect, Page, test as base } from '@playwright/test'; import { PersonaClass } from '../../support/persona/PersonaClass'; import { UserClass } from '../../support/user/UserClass'; import { performAdminLogin } from '../../utils/admin'; -import { redirectToHomePage } from '../../utils/common'; +import { redirectToHomePage, toastNotification } from '../../utils/common'; import { checkAllDefaultWidgets, navigateToCustomizeLandingPage, @@ -239,10 +239,10 @@ test.describe('Customize Landing Page Flow', () => { .click(); // Verify the toast notification - const toastNotification = adminPage.locator('.Toastify__toast-body'); - - await expect(toastNotification).toContainText( - 'Page layout updated successfully.' + await toastNotification( + adminPage, + 'Page layout updated successfully.', + 'success' ); // Check if all widgets are present after resetting the layout diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/PersonaFlow.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/PersonaFlow.spec.ts index 0a8c29520b4e..c8d64eb5a3dc 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/PersonaFlow.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/PersonaFlow.spec.ts @@ -260,7 +260,8 @@ test.describe.serial('Persona operations', () => { await toastNotification( page, - `"${PERSONA_DETAILS.displayName}" deleted successfully!` + `"${PERSONA_DETAILS.displayName}" deleted successfully!`, + 'success' ); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataInsightReportApplication.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataInsightReportApplication.spec.ts index bd702fb47683..a8e9ee66f07a 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataInsightReportApplication.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataInsightReportApplication.spec.ts @@ -65,7 +65,11 @@ test.describe.serial('Data Insight Report Application', () => { await page.click('[data-value="5"]'); await page.click('[data-testid="deploy-button"]'); - await toastNotification(page, 'Application installed successfully'); + await toastNotification( + page, + 'Application installed successfully', + 'success' + ); await expect( page.locator('[data-testid="data-insights-report-application-card"]') @@ -83,7 +87,7 @@ test.describe.serial('Data Insight Report Application', () => { await page.click('[data-testid="hour-options"]'); await page.click('[title="01"]'); await page.click('.ant-modal-body [data-testid="deploy-button"]'); - await toastNotification(page, 'Schedule saved successfully'); + await toastNotification(page, 'Schedule saved successfully', 'success'); // Validate update config in the application await expect(page.locator('[data-testid="cron-string"]')).toContainText( @@ -95,7 +99,11 @@ test.describe.serial('Data Insight Report Application', () => { await page.click('#root\\/sendToTeams'); await page.click('[data-testid="submit-btn"]'); - await toastNotification(page, 'Configuration saved successfully'); + await toastNotification( + page, + 'Configuration saved successfully', + 'success' + ); // Validate update config in the application @@ -109,7 +117,11 @@ test.describe.serial('Data Insight Report Application', () => { ); await page.click('[data-testid="run-now-button"]'); - await toastNotification(page, 'Application triggered successfully'); + await toastNotification( + page, + 'Application triggered successfully', + 'success' + ); const { apiContext } = await getApiContext(page); @@ -149,7 +161,11 @@ test.describe.serial('Data Insight Report Application', () => { await page.click('[data-testid="uninstall-button-title"]'); await page.click('[data-testid="save-button"]'); - await toastNotification(page, 'Application uninstalled successfully'); + await toastNotification( + page, + 'Application uninstalled successfully', + 'success' + ); await expect( page.locator('[data-testid="data-insights-report-application-card"]') diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataInsightSettings.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataInsightSettings.spec.ts index 9aad52640d37..ecfc78bfeb4e 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataInsightSettings.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataInsightSettings.spec.ts @@ -69,7 +69,7 @@ test.describe.serial('Data Insight settings page should work properly', () => { // Click on deploy button await page.click('.ant-modal-body [data-testid="deploy-button"]'); - await toastNotification(page, 'Schedule saved successfully'); + await toastNotification(page, 'Schedule saved successfully', 'success'); // Verify cron string await expect(page.locator('[data-testid="cron-string"]')).toContainText( @@ -98,7 +98,11 @@ test.describe.serial('Data Insight settings page should work properly', () => { // Click on the save button await page.click('[data-testid="save-button"]'); - await toastNotification(page, 'Application uninstalled successfully'); + await toastNotification( + page, + 'Application uninstalled successfully', + 'success' + ); await expect( page.locator('[data-testid="data-insights-application-card"]') diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataQualityAndProfiler.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataQualityAndProfiler.spec.ts index fd30546e6267..d181674d9596 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataQualityAndProfiler.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataQualityAndProfiler.spec.ts @@ -147,7 +147,7 @@ test('Table test case', async ({ page }) => { ); await page.locator('button').filter({ hasText: 'Submit' }).click(); await updateTestCaseResponse; - await toastNotification(page, 'Test case updated successfully.'); + await toastNotification(page, 'Test case updated successfully.', 'success'); await page.click(`[data-testid="edit-${NEW_TABLE_TEST_CASE.name}"]`); await page.waitForSelector('#tableTestForm_params_columnName'); @@ -231,7 +231,7 @@ test('Column test case', async ({ page }) => { ); await page.locator('button').getByText('Submit').click(); await updateTestCaseResponse; - await toastNotification(page, 'Test case updated successfully.'); + await toastNotification(page, 'Test case updated successfully.', 'success'); await page.click(`[data-testid="edit-${NEW_COLUMN_TEST_CASE.name}"]`); await page.waitForSelector('#tableTestForm_params_minLength'); @@ -454,7 +454,11 @@ test('TestCase with Array params value', async ({ page }) => { await page.locator('#tableTestForm_displayName').clear(); await page.fill('#tableTestForm_displayName', 'Updated display name'); await page.click('.ant-modal-footer >> text=Submit'); - await toastNotification(page, 'Test case updated successfully.'); + await toastNotification( + page, + 'Test case updated successfully.', + 'success' + ); await expect(page.locator(`[data-testid="${testCaseName}"]`)).toHaveText( 'Updated display name' diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Glossary.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Glossary.spec.ts index a10b9489f3ce..baa16fef1d42 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Glossary.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Glossary.spec.ts @@ -351,7 +351,8 @@ test.describe('Glossary tests', () => { await toastNotification( page, - /mutually exclusive and can't be assigned together/ + /mutually exclusive and can't be assigned together/, + 'error' ); // Add non mutually exclusive tags diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/LoginConfiguration.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/LoginConfiguration.spec.ts index a90da17b68ca..fe1ffbb06ec4 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/LoginConfiguration.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/LoginConfiguration.spec.ts @@ -68,7 +68,11 @@ test.describe('Login configuration', () => { // Click the save button await page.click('[data-testid="save-button"]'); - await toastNotification(page, 'Login Configuration updated successfully.'); + await toastNotification( + page, + 'Login Configuration updated successfully.', + 'success' + ); // Assert the updated values await expect( diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Policies.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Policies.spec.ts index 5ae25ec71fef..038c637ee8ef 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Policies.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Policies.spec.ts @@ -25,7 +25,11 @@ import { UPDATED_RULE_NAME, } from '../../constant/permission'; import { GlobalSettingOptions } from '../../constant/settings'; -import { descriptionBox, redirectToHomePage } from '../../utils/common'; +import { + descriptionBox, + redirectToHomePage, + toastNotification, +} from '../../utils/common'; import { validateFormNameFieldInput } from '../../utils/form'; import { settingClick } from '../../utils/sidebar'; @@ -258,8 +262,10 @@ test.describe('Policy page should work properly', () => { await page.locator('[data-testid="delete-rule"]').click(); // Validate the error message - await expect(page.locator('.Toastify__toast-body')).toContainText( - ERROR_MESSAGE_VALIDATION.lastRuleCannotBeRemoved + await toastNotification( + page, + ERROR_MESSAGE_VALIDATION.lastRuleCannotBeRemoved, + 'error' ); }); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Roles.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Roles.spec.ts index ce8df8423644..911747d396ad 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Roles.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Roles.spec.ts @@ -12,7 +12,12 @@ */ import { expect, test } from '@playwright/test'; import { GlobalSettingOptions } from '../../constant/settings'; -import { descriptionBox, redirectToHomePage, uuid } from '../../utils/common'; +import { + descriptionBox, + redirectToHomePage, + toastNotification, + uuid, +} from '../../utils/common'; import { removePolicyFromRole } from '../../utils/roles'; import { settingClick } from '../../utils/sidebar'; @@ -201,9 +206,12 @@ test('Roles page should work properly', async ({ page }) => { // Removing the last policy and validating the error message await removePolicyFromRole(page, policies.dataConsumerPolicy, roleName); - await expect(page.locator('.Toastify__toast-body')).toContainText( - errorMessageValidation.lastPolicyCannotBeRemoved + await toastNotification( + page, + errorMessageValidation.lastPolicyCannotBeRemoved, + 'error' ); + await expect(page.locator('.ant-table-row')).toContainText( policies.dataConsumerPolicy ); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/SearchIndexApplication.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/SearchIndexApplication.spec.ts index 3ed0cfb80b67..318ca62a0f90 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/SearchIndexApplication.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/SearchIndexApplication.spec.ts @@ -96,7 +96,7 @@ test('Search Index Application', async ({ page }) => { await page.click('.ant-modal-body [data-testid="deploy-button"]'); await deployResponse; - await toastNotification(page, 'Schedule saved successfully'); + await toastNotification(page, 'Schedule saved successfully', 'success'); expect(await page.innerText('[data-testid="schedule-type"]')).toContain( 'None' @@ -116,7 +116,11 @@ test('Search Index Application', async ({ page }) => { await page.click('[data-testid="submit-btn"]'); await responseAfterSubmit; - await toastNotification(page, 'Configuration saved successfully'); + await toastNotification( + page, + 'Configuration saved successfully', + 'success' + ); }); await test.step('Uninstall application', async () => { @@ -129,7 +133,11 @@ test('Search Index Application', async ({ page }) => { await page.click('[data-testid="save-button"]'); await deleteRequest; - await toastNotification(page, 'Application uninstalled successfully'); + await toastNotification( + page, + 'Application uninstalled successfully', + 'success' + ); const card1 = page.locator( '[data-testid="search-indexing-application-card"]' @@ -163,7 +171,11 @@ test('Search Index Application', async ({ page }) => { await page.click('[data-testid="deploy-button"]'); await installApplicationResponse; - await toastNotification(page, 'Application installed successfully'); + await toastNotification( + page, + 'Application installed successfully', + 'success' + ); const card = page.locator( '[data-testid="search-indexing-application-card"]' @@ -187,7 +199,11 @@ test('Search Index Application', async ({ page }) => { await triggerPipelineResponse; - await toastNotification(page, 'Application triggered successfully'); + await toastNotification( + page, + 'Application triggered successfully', + 'success' + ); await page.reload(); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Teams.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Teams.spec.ts index 393eb932817c..889a781138b8 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Teams.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Teams.spec.ts @@ -201,7 +201,7 @@ test.describe('Teams Page', () => { // Click on join teams button await page.locator('[data-testid="join-teams"]').click(); - await toastNotification(page, 'Team joined successfully!'); + await toastNotification(page, 'Team joined successfully!', 'success'); // Verify leave team button exists await expect( diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TestSuite.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TestSuite.spec.ts index 45addd132221..9442f40e682b 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TestSuite.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TestSuite.spec.ts @@ -219,7 +219,8 @@ test('Logical TestSuite', async ({ page }) => { await deleteResponse; await toastNotification( page, - `"${NEW_TEST_SUITE.name}" deleted successfully!` + `"${NEW_TEST_SUITE.name}" deleted successfully!`, + 'success' ); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/VersionPages/EntityVersionPages.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/VersionPages/EntityVersionPages.spec.ts index 6b8ae01172a2..cdf892e82460 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/VersionPages/EntityVersionPages.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/VersionPages/EntityVersionPages.spec.ts @@ -22,7 +22,11 @@ import { SearchIndexClass } from '../../support/entity/SearchIndexClass'; import { StoredProcedureClass } from '../../support/entity/StoredProcedureClass'; import { TableClass } from '../../support/entity/TableClass'; import { TopicClass } from '../../support/entity/TopicClass'; -import { createNewPage, redirectToHomePage } from '../../utils/common'; +import { + createNewPage, + redirectToHomePage, + toastNotification, +} from '../../utils/common'; import { addMultiOwner, assignTier } from '../../utils/entity'; const entities = [ @@ -233,11 +237,7 @@ entities.forEach((EntityClass) => { await deleteResponse; - await expect(page.locator('.Toastify__toast-body')).toHaveText( - /deleted successfully!/ - ); - - await page.click('.Toastify__close-button'); + await toastNotification(page, /deleted successfully!/, 'success'); await page.reload(); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/VersionPages/ServiceEntityVersionPage.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/VersionPages/ServiceEntityVersionPage.spec.ts index 895c59e86627..e562734b1aaf 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/VersionPages/ServiceEntityVersionPage.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/VersionPages/ServiceEntityVersionPage.spec.ts @@ -23,7 +23,11 @@ import { MlmodelServiceClass } from '../../support/entity/service/MlmodelService import { PipelineServiceClass } from '../../support/entity/service/PipelineServiceClass'; import { SearchIndexServiceClass } from '../../support/entity/service/SearchIndexServiceClass'; import { StorageServiceClass } from '../../support/entity/service/StorageServiceClass'; -import { createNewPage, redirectToHomePage } from '../../utils/common'; +import { + createNewPage, + redirectToHomePage, + toastNotification, +} from '../../utils/common'; import { addMultiOwner, assignTier } from '../../utils/entity'; const entities = [ @@ -198,11 +202,7 @@ entities.forEach((EntityClass) => { await deleteResponse; - await expect(page.locator('.Toastify__toast-body')).toHaveText( - /deleted successfully!/ - ); - - await page.click('.Toastify__close-button'); + await toastNotification(page, /deleted successfully!/, 'success'); await page.reload(); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/MySqlIngestionClass.ts b/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/MySqlIngestionClass.ts index a5198ec00715..458bf8f8c7e2 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/MySqlIngestionClass.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/MySqlIngestionClass.ts @@ -139,7 +139,11 @@ class MysqlIngestionClass extends ServiceBaseClass { ); await page.getByTestId('run-button').click(); - await toastNotification(page, `Pipeline triggered successfully!`); + await toastNotification( + page, + `Pipeline triggered successfully!`, + 'success' + ); await this.handleIngestionRetry('profiler', page); }); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/PostgresIngestionClass.ts b/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/PostgresIngestionClass.ts index 1027ea78eac9..2b8eb5281a7c 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/PostgresIngestionClass.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/PostgresIngestionClass.ts @@ -145,7 +145,11 @@ class PostgresIngestionClass extends ServiceBaseClass { await page.getByTestId('run-button').click(); - await toastNotification(page, `Pipeline triggered successfully!`); + await toastNotification( + page, + `Pipeline triggered successfully!`, + 'success' + ); await this.handleIngestionRetry('usage', page); }); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/RedshiftWithDBTIngestionClass.ts b/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/RedshiftWithDBTIngestionClass.ts index fd8d59ef7671..57900ef41bad 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/RedshiftWithDBTIngestionClass.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/RedshiftWithDBTIngestionClass.ts @@ -165,7 +165,11 @@ class RedshiftWithDBTIngestionClass extends ServiceBaseClass { ); await page.getByTestId('run-button').click(); - await toastNotification(page, `Pipeline triggered successfully!`); + await toastNotification( + page, + `Pipeline triggered successfully!`, + 'success' + ); await this.handleIngestionRetry('dbt', page); }); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/ServiceBaseClass.ts b/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/ServiceBaseClass.ts index f6d9e8e0f36d..70721681546a 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/ServiceBaseClass.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/ServiceBaseClass.ts @@ -187,7 +187,11 @@ class ServiceBaseClass { await page.getByTestId('more-actions').first().click(); await page.getByTestId('run-button').click(); - await toastNotification(page, `Pipeline triggered successfully!`); + await toastNotification( + page, + `Pipeline triggered successfully!`, + 'success' + ); await this.handleIngestionRetry('metadata', page); } @@ -454,7 +458,11 @@ class ServiceBaseClass { await page.getByTestId('more-actions').first().click(); await page.getByTestId('run-button').click(); - await toastNotification(page, `Pipeline triggered successfully!`); + await toastNotification( + page, + `Pipeline triggered successfully!`, + 'success' + ); // Wait for success await this.handleIngestionRetry('metadata', page); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/alert.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/alert.ts index 1618c6f74b4f..fe564d63ae0f 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/alert.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/alert.ts @@ -124,7 +124,7 @@ export const deleteAlertSteps = async (page: Page, name: string) => { await page.click('[data-testid="confirm-button"]'); await deleteAlert; - await toastNotification(page, `"${name}" deleted successfully!`); + await toastNotification(page, `"${name}" deleted successfully!`, 'success'); }; export const addOwnerFilter = async ({ @@ -762,7 +762,7 @@ export const saveAlertAndVerifyResponse = async (page: Page) => { expect(response.status()).toEqual(201); }); - await toastNotification(page, 'Alerts created successfully.'); + await toastNotification(page, 'Alerts created successfully.', 'success'); // Check if the alert details page is visible await getAlertDetails; diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/bot.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/bot.ts index 3e0c01b48083..dc7a74df55dd 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/bot.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/bot.ts @@ -93,7 +93,7 @@ export const createBot = async (page: Page) => { await expect(page.getByTestId('token-expiry')).toBeVisible(); - await toastNotification(page, 'Bot created successfully.'); + await toastNotification(page, 'Bot created successfully.', 'success'); }; export const deleteBot = async (page: Page) => { @@ -112,7 +112,7 @@ export const deleteBot = async (page: Page) => { await deleteResponse; - await toastNotification(page, /deleted successfully!/); + await toastNotification(page, /deleted successfully!/, 'success'); await expect(page.getByTestId('page-layout-v1')).not.toContainText(botName); }; diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts index f2b7ffc39d9c..2a86bf8598ce 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts @@ -113,15 +113,14 @@ export const getEntityTypeSearchIndexMapping = (entityType: string) => { export const toastNotification = async ( page: Page, - message: string | RegExp + message: string | RegExp, + type: 'info' | 'success' | 'warning' | 'error' ) => { - await expect(page.getByRole('alert').first()).toHaveText(message); + await expect(page.locator(`.alert-container.${type}`)).toHaveText(message); - await page - .locator('.Toastify__toast') - .getByLabel('close', { exact: true }) - .first() - .click(); + await expect(page.locator('.ant-alert-icon')).toBeVisible(); + + await page.locator('.alert-container .ant-alert-close-icon').click(); }; export const clickOutside = async (page: Page) => { diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/customMetric.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/customMetric.ts index aec19a4749a9..e17a5866b892 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/customMetric.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/customMetric.ts @@ -16,6 +16,7 @@ import { NAME_MAX_LENGTH_VALIDATION_ERROR, NAME_VALIDATION_ERROR, } from '../constant/common'; +import { toastNotification } from './common'; type CustomMetricDetails = { page: Page; @@ -118,12 +119,12 @@ export const createCustomMetric = async ({ await page.click('[data-testid="submit-button"]'); await createMetricResponse; - await expect(page.locator('.Toastify__toast-body')).toHaveText( - new RegExp(`${metric.name} created successfully.`) + await toastNotification( + page, + new RegExp(`${metric.name} created successfully.`), + 'success' ); - await page.locator('.Toastify__close-button').click(); - // verify the created custom metric await expect(page).toHaveURL(/profiler/); await expect( diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/customizeLandingPage.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/customizeLandingPage.ts index a73082ed9695..79958ab18268 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/customizeLandingPage.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/customizeLandingPage.ts @@ -143,6 +143,7 @@ export const saveCustomizeLayoutPage = async ( await toastNotification( page, - `Page layout ${isCreated ? 'created' : 'updated'} successfully.` + `Page layout ${isCreated ? 'created' : 'updated'} successfully.`, + 'success' ); }; diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/dragDrop.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/dragDrop.ts index 8fc97411c1b3..a50ec954eace 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/dragDrop.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/dragDrop.ts @@ -59,5 +59,5 @@ export const confirmationDragAndDropTeam = async ( await page.locator('.ant-modal-footer > .ant-btn-primary').click(); await patchResponse; - await toastNotification(page, 'Team moved successfully!'); + await toastNotification(page, 'Team moved successfully!', 'success'); }; diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/entity.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/entity.ts index 45efa17e4efb..4550e40a41d2 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/entity.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/entity.ts @@ -24,7 +24,7 @@ import { } from '../constant/delete'; import { ES_RESERVED_CHARACTERS } from '../constant/entity'; import { EntityTypeEndpoint } from '../support/entity/Entity.interface'; -import { clickOutside, redirectToHomePage } from './common'; +import { clickOutside, redirectToHomePage, toastNotification } from './common'; export const visitEntityPage = async (data: { page: Page; @@ -734,7 +734,6 @@ const announcementForm = async ( ); await page.click('#announcement-submit'); await announcementSubmit; - await page.click('.Toastify__close-button'); }; export const createAnnouncement = async ( @@ -1116,11 +1115,7 @@ export const restoreEntity = async (page: Page) => { await page.click('[data-testid="restore-button"]'); await page.click('button:has-text("Restore")'); - await expect(page.locator('.Toastify__toast-body')).toHaveText( - /restored successfully/ - ); - - await page.click('.Toastify__close-button'); + await toastNotification(page, /restored successfully/, 'success'); const exists = await page .locator('[data-testid="deleted-badge"]') @@ -1159,11 +1154,7 @@ export const softDeleteEntity = async ( await deleteResponse; - await expect(page.locator('.Toastify__toast-body')).toHaveText( - /deleted successfully!/ - ); - - await page.click('.Toastify__close-button'); + await toastNotification(page, /deleted successfully!/, 'success'); await page.reload(); @@ -1228,11 +1219,7 @@ export const hardDeleteEntity = async ( await page.click('[data-testid="confirm-button"]'); await deleteResponse; - await expect(page.locator('.Toastify__toast-body')).toHaveText( - /deleted successfully!/ - ); - - await page.click('.Toastify__close-button'); + await toastNotification(page, /deleted successfully!/, 'success'); }; export const checkDataAssetWidget = async ( diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts index b060e62128dd..861c1cfd72af 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts @@ -499,7 +499,7 @@ export const approveGlossaryTermTask = async ( await taskResolve; // Display toast notification - await toastNotification(page, /Task resolved successfully/); + await toastNotification(page, /Task resolved successfully/, 'success'); }; export const validateGlossaryTerm = async ( @@ -718,9 +718,17 @@ export const deleteGlossaryOrGlossaryTerm = async ( await deleteRes; if (isGlossaryTerm) { - await toastNotification(page, /"Glossary Term" deleted successfully!/); + await toastNotification( + page, + /"Glossary Term" deleted successfully!/, + 'success' + ); } else { - await toastNotification(page, /"Glossary" deleted successfully!/); + await toastNotification( + page, + /"Glossary" deleted successfully!/, + 'success' + ); } }; @@ -886,7 +894,7 @@ export const createDescriptionTaskForGlossary = async ( } await page.click('button[type="submit"]'); - await toastNotification(page, /Task created successfully./); + await toastNotification(page, /Task created successfully./, 'success'); }; export const createTagTaskForGlossary = async ( @@ -957,7 +965,7 @@ export const createTagTaskForGlossary = async ( await page.click('button[type="submit"]'); - await toastNotification(page, /Task created successfully./); + await toastNotification(page, /Task created successfully./, 'success'); }; export const approveTagsTask = async ( diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/serviceIngestion.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/serviceIngestion.ts index 211222a7d8a8..2788c177d08a 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/serviceIngestion.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/serviceIngestion.ts @@ -106,7 +106,11 @@ export const deleteService = async ( await deleteResponse; // Closing the toast notification - await toastNotification(page, `"${serviceName}" deleted successfully!`); + await toastNotification( + page, + `"${serviceName}" deleted successfully!`, + 'success' + ); await page.waitForSelector(`[data-testid="service-name-${serviceName}"]`, { state: 'hidden', diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts index dfccbd0cefd3..5d924c4fe4da 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts @@ -80,7 +80,7 @@ export const createDescriptionTask = async ( } await page.click('button[type="submit"]'); - await toastNotification(page, /Task created successfully./); + await toastNotification(page, /Task created successfully./, 'success'); }; export const createTagTask = async ( @@ -148,7 +148,7 @@ export const createTagTask = async ( await page.click('button[type="submit"]'); - await toastNotification(page, /Task created successfully./); + await toastNotification(page, /Task created successfully./, 'success'); }; export const checkTaskCount = async ( diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/team.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/team.ts index 4ffa5541332d..2762ee2e8050 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/team.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/team.ts @@ -74,7 +74,7 @@ export const softDeleteTeam = async (page: Page) => { await deleteResponse; - await toastNotification(page, /deleted successfully!/); + await toastNotification(page, /deleted successfully!/, 'success'); }; export const hardDeleteTeam = async (page: Page) => { @@ -100,7 +100,7 @@ export const hardDeleteTeam = async (page: Page) => { await deleteResponse; - await toastNotification(page, /deleted successfully!/); + await toastNotification(page, /deleted successfully!/, 'success'); }; export const getNewTeamDetails = (teamName: string) => { diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/user.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/user.ts index fe4930dce8cd..3e18632edebd 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/user.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/user.ts @@ -138,11 +138,7 @@ export const softDeleteUserProfilePage = async ( await deleteResponse; - await expect(page.locator('.Toastify__toast-body')).toHaveText( - /deleted successfully!/ - ); - - await page.click('.Toastify__close-button'); + await toastNotification(page, /deleted successfully!/, 'success'); await deletedUserChecks(page); }; @@ -165,7 +161,7 @@ export const restoreUserProfilePage = async (page: Page, fqn: string) => { await restoreResponse; - await toastNotification(page, /User restored successfully/); + await toastNotification(page, /User restored successfully/, 'success'); await nonDeletedUserChecks(page); }; @@ -193,7 +189,7 @@ export const hardDeleteUserProfilePage = async ( await deleteResponse; - await toastNotification(page, /deleted successfully!/); + await toastNotification(page, /deleted successfully!/, 'success'); }; export const editDisplayName = async (page: Page, editedUserName: string) => { @@ -359,7 +355,11 @@ export const softDeleteUser = async ( await deleteResponse; await fetchUpdatedUsers; - await toastNotification(page, `"${displayName}" deleted successfully!`); + await toastNotification( + page, + `"${displayName}" deleted successfully!`, + 'success' + ); // Search soft deleted user in non-deleted mode const searchSoftDeletedUserResponse = page.waitForResponse( @@ -403,7 +403,7 @@ export const restoreUser = async ( await page.click('.ant-modal-footer > .ant-btn-primary'); await restoreUserResponse; - await toastNotification(page, 'User restored successfully'); + await toastNotification(page, 'User restored successfully', 'success'); }; export const permanentDeleteUser = async ( @@ -435,7 +435,11 @@ export const permanentDeleteUser = async ( await page.click('[data-testid="confirm-button"]'); await hardDeleteUserResponse; - await toastNotification(page, `"${displayName}" deleted successfully!`); + await toastNotification( + page, + `"${displayName}" deleted successfully!`, + 'success' + ); // Search the user again const searchUserAfterDeleteResponse = page.waitForResponse( @@ -692,7 +696,8 @@ const resetPasswordModal = async ( page, isOldPasswordCorrect ? 'Password updated successfully.' - : 'Old Password is not correct' + : 'Old Password is not correct', + isOldPasswordCorrect ? 'success' : 'error' ); }; From c545756a12913ab779a24b72e56dda664db03748 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Tue, 24 Sep 2024 15:52:56 +0530 Subject: [PATCH 21/39] update alert transition issue --- .../ui/src/components/AppContainer/AppContainer.tsx | 2 -- .../components/MyData/LeftSidebar/left-sidebar.less | 2 +- .../src/main/resources/ui/src/hooks/useAlertStore.ts | 10 ++++++++-- .../resources/ui/src/styles/layout/page-layout.less | 1 - .../src/main/resources/ui/src/styles/temp.css | 3 +-- 5 files changed, 10 insertions(+), 8 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx index 8f39a599da5a..62de043cdf38 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx @@ -18,7 +18,6 @@ import { useTranslation } from 'react-i18next'; import { useLimitStore } from '../../context/LimitsProvider/useLimitsStore'; import { useAlertStore } from '../../hooks/useAlertStore'; import { useApplicationStore } from '../../hooks/useApplicationStore'; -import { useDomainStore } from '../../hooks/useDomainStore'; import { getLimitConfig } from '../../rest/limitsAPI'; import applicationRoutesClass from '../../utils/ApplicationRoutesClassBase'; import Appbar from '../AppBar/Appbar'; @@ -32,7 +31,6 @@ const AppContainer = () => { const { Header, Sider, Content } = Layout; const { currentUser } = useApplicationStore(); const { alert } = useAlertStore(); - const { updateDomains, updateDomainLoading } = useDomainStore(); const AuthenticatedRouter = applicationRoutesClass.getRouteElements(); const ApplicationExtras = applicationsClassBase.getApplicationExtension(); const isDirectionRTL = useMemo(() => i18n.dir() === 'rtl', [i18n]); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/left-sidebar.less b/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/left-sidebar.less index 09318aee17bd..7b67dfd7da25 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/left-sidebar.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/left-sidebar.less @@ -18,7 +18,7 @@ z-index: 1; .left-sidebar-container { - position: absolute; + position: fixed; top: 0; left: 0; width: 60px; diff --git a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts index a18f382134b1..06d870f15ad0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts +++ b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts @@ -36,11 +36,17 @@ export const useAlertStore = create()((set) => ({ if (autoCloseTimer !== Infinity) { setTimeout(() => { - set({ animationClass: 'hide-alert', alert: undefined }); + set({ animationClass: 'hide-alert' }); + setTimeout(() => { + set({ alert: undefined }); + }, 300); }, autoCloseTimer); } }, resetAlert: () => { - set({ animationClass: 'hide-alert', alert: undefined }); + set({ animationClass: 'hide-alert' }); + setTimeout(() => { + set({ alert: undefined }); + }, 300); }, })); diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less b/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less index fea21d847c0d..4d2cea492ece 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less +++ b/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less @@ -18,7 +18,6 @@ height: calc(100vh - @om-navbar-height); overflow-y: auto; overflow-x: hidden; - transition: height 1.2s ease-in-out; } .page-layout-v1-left-panel { diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css index b627b3d7c45f..0f97f437bd94 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css +++ b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css @@ -816,7 +816,6 @@ body .list-option.rdw-option-active { --ant-navbar-height: 64px; } -:root .extra-banner, -:root .alert-banner { +:root .extra-banner { --ant-navbar-height: 128px; } From f0791ca7911468d07b9c0eef1f86abf49e61869c Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Wed, 25 Sep 2024 12:39:20 +0530 Subject: [PATCH 22/39] revert the changes for height issue --- .../ui/src/components/MyData/LeftSidebar/left-sidebar.less | 2 +- .../src/main/resources/ui/src/styles/layout/page-layout.less | 1 + openmetadata-ui/src/main/resources/ui/src/styles/temp.css | 3 ++- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/left-sidebar.less b/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/left-sidebar.less index 7b67dfd7da25..09318aee17bd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/left-sidebar.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/left-sidebar.less @@ -18,7 +18,7 @@ z-index: 1; .left-sidebar-container { - position: fixed; + position: absolute; top: 0; left: 0; width: 60px; diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less b/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less index 4d2cea492ece..fea21d847c0d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less +++ b/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less @@ -18,6 +18,7 @@ height: calc(100vh - @om-navbar-height); overflow-y: auto; overflow-x: hidden; + transition: height 1.2s ease-in-out; } .page-layout-v1-left-panel { diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css index 0f97f437bd94..b627b3d7c45f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css +++ b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css @@ -816,6 +816,7 @@ body .list-option.rdw-option-active { --ant-navbar-height: 64px; } -:root .extra-banner { +:root .extra-banner, +:root .alert-banner { --ant-navbar-height: 128px; } From a6a3a41fadcd168c41de10433822673f8ce85323 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Tue, 22 Oct 2024 14:27:45 +0530 Subject: [PATCH 23/39] add alert in mydata --- .../ui/src/pages/MyDataPage/MyDataPage.component.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx index 96e541a15516..7ffef858a556 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx @@ -36,6 +36,7 @@ import { Thread } from '../../generated/entity/feed/thread'; import { PageType } from '../../generated/system/ui/page'; import { EntityReference } from '../../generated/type/entityReference'; import LimitWrapper from '../../hoc/LimitWrapper'; +import { useAlertStore } from '../../hooks/useAlertStore'; import { useApplicationStore } from '../../hooks/useApplicationStore'; import { useGridLayoutDirection } from '../../hooks/useGridLayoutDirection'; import { getDocumentByFQN } from '../../rest/DocStoreAPI'; @@ -63,6 +64,7 @@ const MyDataPage = () => { useState(true); const [announcements, setAnnouncements] = useState([]); const storageData = localStorage.getItem(LOGGED_IN_USER_STORAGE_KEY); + const { addAlert } = useAlertStore(); const loggedInUserName = useMemo(() => { return currentUser?.name ?? ''; @@ -141,6 +143,12 @@ const MyDataPage = () => { } }, [currentUser]); + useEffect(() => { + setTimeout(() => { + addAlert({ type: 'info', message: 'Info' }, Infinity); + }, 3000); + }, []); + const widgets = useMemo( () => // Adding announcement widget to the layout when announcements are present From d4581aeb57856c55747a30ef7bc173547c14c4e9 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Wed, 23 Oct 2024 18:28:14 +0530 Subject: [PATCH 24/39] update alert animation issue --- .../ui/src/components/AlertBar/AlertBar.tsx | 2 +- .../src/components/AlertBar/alert-bar.style.less | 15 --------------- .../src/components/PageLayoutV1/PageLayoutV1.tsx | 8 ++------ .../main/resources/ui/src/hooks/useAlertStore.ts | 10 ++-------- .../ui/src/styles/layout/page-layout.less | 1 - .../src/main/resources/ui/src/styles/temp.css | 3 +-- 6 files changed, 6 insertions(+), 33 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx index 0526965ebd4a..165616337d6c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx @@ -68,12 +68,12 @@ const AlertBar = ({ type, message }: AlertBarProps): JSX.Element => { } description={message} icon={icon} type={type} - onClose={resetAlert} /> ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less index dbe166838a08..c11bbc6784d3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less @@ -22,17 +22,6 @@ } } -@keyframes resize-hide-animation { - from { - height: 64px; - padding: 20px; - } - to { - height: 0; - padding: 0 20px; - } -} - .alert-container { width: 100%; display: flex; @@ -45,10 +34,6 @@ animation: resize-show-animation 1.2s ease-in-out forwards; } - &.hide-alert { - animation: resize-hide-animation 1.2s ease-out forwards; - } - &.info { background-color: #f6f8ff; color: #0950c5; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx index e8b1b028def2..ae65b261dbe4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx @@ -103,12 +103,8 @@ const PageLayoutV1: FC = ({ {leftPanel} )} - - {alert && ( - - - - )} + + {alert && } ()((set) => ({ if (autoCloseTimer !== Infinity) { setTimeout(() => { - set({ animationClass: 'hide-alert' }); - setTimeout(() => { - set({ alert: undefined }); - }, 300); + set({ alert: undefined }); }, autoCloseTimer); } }, resetAlert: () => { - set({ animationClass: 'hide-alert' }); - setTimeout(() => { - set({ alert: undefined }); - }, 300); + set({ alert: undefined }); }, })); diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less b/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less index fea21d847c0d..4d2cea492ece 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less +++ b/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less @@ -18,7 +18,6 @@ height: calc(100vh - @om-navbar-height); overflow-y: auto; overflow-x: hidden; - transition: height 1.2s ease-in-out; } .page-layout-v1-left-panel { diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css index b627b3d7c45f..0f97f437bd94 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css +++ b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css @@ -816,7 +816,6 @@ body .list-option.rdw-option-active { --ant-navbar-height: 64px; } -:root .extra-banner, -:root .alert-banner { +:root .extra-banner { --ant-navbar-height: 128px; } From 046f15a0c20d9a6b7f68182a92bff8a7827d7cb7 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Thu, 24 Oct 2024 11:34:55 +0530 Subject: [PATCH 25/39] update alert position in page layout --- .../ui/src/components/PageLayoutV1/PageLayoutV1.tsx | 2 +- .../ui/src/pages/MyDataPage/MyDataPage.component.tsx | 8 -------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx index ae65b261dbe4..95a3c8d37778 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx @@ -104,7 +104,6 @@ const PageLayoutV1: FC = ({ )} - {alert && } = ({ flex={contentWidth} offset={center ? 3 : 0} span={center ? 18 : 24}> + {alert && } {children} {rightPanel && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx index 7ffef858a556..96e541a15516 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx @@ -36,7 +36,6 @@ import { Thread } from '../../generated/entity/feed/thread'; import { PageType } from '../../generated/system/ui/page'; import { EntityReference } from '../../generated/type/entityReference'; import LimitWrapper from '../../hoc/LimitWrapper'; -import { useAlertStore } from '../../hooks/useAlertStore'; import { useApplicationStore } from '../../hooks/useApplicationStore'; import { useGridLayoutDirection } from '../../hooks/useGridLayoutDirection'; import { getDocumentByFQN } from '../../rest/DocStoreAPI'; @@ -64,7 +63,6 @@ const MyDataPage = () => { useState(true); const [announcements, setAnnouncements] = useState([]); const storageData = localStorage.getItem(LOGGED_IN_USER_STORAGE_KEY); - const { addAlert } = useAlertStore(); const loggedInUserName = useMemo(() => { return currentUser?.name ?? ''; @@ -143,12 +141,6 @@ const MyDataPage = () => { } }, [currentUser]); - useEffect(() => { - setTimeout(() => { - addAlert({ type: 'info', message: 'Info' }, Infinity); - }, 3000); - }, []); - const widgets = useMemo( () => // Adding announcement widget to the layout when announcements are present From 132e519e7b652154c2aacc500dcdf04f6f08c0e5 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Thu, 24 Oct 2024 16:29:18 +0530 Subject: [PATCH 26/39] update as per feedbacks --- .../e2e/Features/ActivityFeed.spec.ts | 18 +++---- .../e2e/Features/TeamsHierarchy.spec.ts | 3 +- .../e2e/Flow/ApiServiceRest.spec.ts | 2 +- .../e2e/Flow/CustomizeLandingPage.spec.ts | 6 +-- .../playwright/e2e/Flow/PersonaFlow.spec.ts | 3 +- .../DataInsightReportApplication.spec.ts | 26 ++-------- .../e2e/Pages/DataInsightSettings.spec.ts | 8 +--- .../e2e/Pages/DataQualityAndProfiler.spec.ts | 10 ++-- .../e2e/Pages/LoginConfiguration.spec.ts | 6 +-- .../e2e/Pages/SearchIndexApplication.spec.ts | 26 ++-------- .../ui/playwright/e2e/Pages/Teams.spec.ts | 2 +- .../ui/playwright/e2e/Pages/TestSuite.spec.ts | 3 +- .../VersionPages/EntityVersionPages.spec.ts | 2 +- .../ServiceEntityVersionPage.spec.ts | 2 +- .../entity/ingestion/MySqlIngestionClass.ts | 6 +-- .../ingestion/PostgresIngestionClass.ts | 6 +-- .../RedshiftWithDBTIngestionClass.ts | 6 +-- .../entity/ingestion/ServiceBaseClass.ts | 12 +---- .../resources/ui/playwright/utils/alert.ts | 4 +- .../main/resources/ui/playwright/utils/bot.ts | 4 +- .../resources/ui/playwright/utils/common.ts | 2 +- .../ui/playwright/utils/customMetric.ts | 3 +- .../playwright/utils/customizeLandingPage.ts | 3 +- .../resources/ui/playwright/utils/dragDrop.ts | 2 +- .../resources/ui/playwright/utils/entity.ts | 6 +-- .../resources/ui/playwright/utils/glossary.ts | 18 ++----- .../ui/playwright/utils/serviceIngestion.ts | 6 +-- .../resources/ui/playwright/utils/task.ts | 4 +- .../resources/ui/playwright/utils/team.ts | 4 +- .../resources/ui/playwright/utils/user.ts | 20 +++----- .../resources/ui/src/assets/svg/ic-error.svg | 6 +-- .../ui/src/assets/svg/ic-info-tag.svg | 6 +-- .../ui/src/assets/svg/ic-success.svg | 2 +- .../ui/src/assets/svg/ic-warning-tag.svg | 6 +-- .../ui/src/components/AlertBar/AlertBar.tsx | 48 ++----------------- .../components/AlertBar/alert-bar.style.less | 38 ++++++++++----- .../components/AppContainer/AppContainer.tsx | 3 -- .../components/PageLayoutV1/PageLayoutV1.tsx | 42 ++++++++-------- .../resources/ui/src/hooks/useAlertStore.ts | 5 +- .../pages/MyDataPage/MyDataPage.component.tsx | 8 ++++ .../resources/ui/src/styles/variables.less | 4 ++ .../main/resources/ui/src/utils/ToastUtils.ts | 39 +++++++++++++++ 42 files changed, 180 insertions(+), 250 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts index 514f1f1801bf..2aff12c389b4 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts @@ -204,13 +204,13 @@ test.describe('Activity feed', () => { await page.getByText('Accept Suggestion').click(); - await toastNotification(page, /Task resolved successfully/, 'success'); + await toastNotification(page, /Task resolved successfully/); // Task 1 - Request to update tag to be resolved await page.getByText('Accept Suggestion').click(); - await toastNotification(page, /Task resolved successfully/, 'success'); + await toastNotification(page, /Task resolved successfully/); await checkTaskCount(page, 0, 2); }); @@ -363,13 +363,13 @@ test.describe('Activity feed', () => { await page.getByText('OK').click(); await resolveTask; - await toastNotification(page, /Task resolved successfully/, 'success'); + await toastNotification(page, /Task resolved successfully/); // Task 1 - Resolved the task await page.getByText('Accept Suggestion').click(); - await toastNotification(page, /Task resolved successfully/, 'success'); + await toastNotification(page, /Task resolved successfully/); await checkTaskCount(page, 0, 2); }); @@ -433,7 +433,7 @@ test.describe('Activity feed', () => { await page.getByRole('menuitem', { name: 'close' }).click(); await commentWithCloseTask; - await toastNotification(page, 'Task closed successfully.', 'success'); + await toastNotification(page, 'Task closed successfully.'); await checkTaskCount(page, 0, 1); }); @@ -485,7 +485,7 @@ test.describe('Activity feed', () => { await page.getByRole('menuitem', { name: 'close' }).click(); await commentWithCloseTask; - await toastNotification(page, 'Task closed successfully.', 'success'); + await toastNotification(page, 'Task closed successfully.'); // open task count after closing one task await checkTaskCount(page, 1, 1); @@ -742,7 +742,7 @@ base.describe('Activity feed with Data Consumer User', () => { await page2.getByText('Accept Suggestion').click(); - await toastNotification(page2, /Task resolved successfully/, 'success'); + await toastNotification(page2, /Task resolved successfully/); await page2.waitForLoadState('networkidle'); @@ -893,7 +893,7 @@ base.describe('Activity feed with Data Consumer User', () => { await page2.getByText('OK').click(); - await toastNotification(page2, /Task resolved successfully/, 'success'); + await toastNotification(page2, /Task resolved successfully/); // Accept the description task @@ -915,7 +915,7 @@ base.describe('Activity feed with Data Consumer User', () => { await page2.getByText('OK').click(); - await toastNotification(page2, /Task resolved successfully/, 'success'); + await toastNotification(page2, /Task resolved successfully/); await afterActionUser2(); } diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/TeamsHierarchy.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/TeamsHierarchy.spec.ts index fbe6b4bf214a..93fe4330c270 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/TeamsHierarchy.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/TeamsHierarchy.spec.ts @@ -139,8 +139,7 @@ test.describe('Add Nested Teams and Test TeamsSelectable', () => { await toastNotification( page, - `"${businessTeamName}" deleted successfully!`, - 'success' + `"${businessTeamName}" deleted successfully!` ); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/ApiServiceRest.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/ApiServiceRest.spec.ts index 58280b711ac7..22c9cd195f5b 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/ApiServiceRest.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/ApiServiceRest.spec.ts @@ -94,6 +94,6 @@ test.describe('API service', () => { await deleteResponse; - await toastNotification(page, /deleted successfully!/, 'success'); + await toastNotification(page, /deleted successfully!/); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/CustomizeLandingPage.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/CustomizeLandingPage.spec.ts index f9f9bf859306..b44f9ff31731 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/CustomizeLandingPage.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/CustomizeLandingPage.spec.ts @@ -239,11 +239,7 @@ test.describe('Customize Landing Page Flow', () => { .click(); // Verify the toast notification - await toastNotification( - adminPage, - 'Page layout updated successfully.', - 'success' - ); + await toastNotification(adminPage, 'Page layout updated successfully.'); // Check if all widgets are present after resetting the layout await checkAllDefaultWidgets(adminPage, true); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/PersonaFlow.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/PersonaFlow.spec.ts index 1b65587f1983..7bd48c50c546 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/PersonaFlow.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/PersonaFlow.spec.ts @@ -250,8 +250,7 @@ test.describe.serial('Persona operations', () => { await toastNotification( page, - `"${PERSONA_DETAILS.displayName}" deleted successfully!`, - 'success' + `"${PERSONA_DETAILS.displayName}" deleted successfully!` ); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataInsightReportApplication.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataInsightReportApplication.spec.ts index a8e9ee66f07a..bd702fb47683 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataInsightReportApplication.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataInsightReportApplication.spec.ts @@ -65,11 +65,7 @@ test.describe.serial('Data Insight Report Application', () => { await page.click('[data-value="5"]'); await page.click('[data-testid="deploy-button"]'); - await toastNotification( - page, - 'Application installed successfully', - 'success' - ); + await toastNotification(page, 'Application installed successfully'); await expect( page.locator('[data-testid="data-insights-report-application-card"]') @@ -87,7 +83,7 @@ test.describe.serial('Data Insight Report Application', () => { await page.click('[data-testid="hour-options"]'); await page.click('[title="01"]'); await page.click('.ant-modal-body [data-testid="deploy-button"]'); - await toastNotification(page, 'Schedule saved successfully', 'success'); + await toastNotification(page, 'Schedule saved successfully'); // Validate update config in the application await expect(page.locator('[data-testid="cron-string"]')).toContainText( @@ -99,11 +95,7 @@ test.describe.serial('Data Insight Report Application', () => { await page.click('#root\\/sendToTeams'); await page.click('[data-testid="submit-btn"]'); - await toastNotification( - page, - 'Configuration saved successfully', - 'success' - ); + await toastNotification(page, 'Configuration saved successfully'); // Validate update config in the application @@ -117,11 +109,7 @@ test.describe.serial('Data Insight Report Application', () => { ); await page.click('[data-testid="run-now-button"]'); - await toastNotification( - page, - 'Application triggered successfully', - 'success' - ); + await toastNotification(page, 'Application triggered successfully'); const { apiContext } = await getApiContext(page); @@ -161,11 +149,7 @@ test.describe.serial('Data Insight Report Application', () => { await page.click('[data-testid="uninstall-button-title"]'); await page.click('[data-testid="save-button"]'); - await toastNotification( - page, - 'Application uninstalled successfully', - 'success' - ); + await toastNotification(page, 'Application uninstalled successfully'); await expect( page.locator('[data-testid="data-insights-report-application-card"]') diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataInsightSettings.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataInsightSettings.spec.ts index cc31322b004e..db7aeae50fc4 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataInsightSettings.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataInsightSettings.spec.ts @@ -72,7 +72,7 @@ test.describe.serial( // Click on deploy button await page.click('.ant-modal-body [data-testid="deploy-button"]'); - await toastNotification(page, 'Schedule saved successfully', 'success'); + await toastNotification(page, 'Schedule saved successfully'); // Verify cron string await expect(page.locator('[data-testid="cron-string"]')).toContainText( @@ -101,11 +101,7 @@ test.describe.serial( // Click on the save button await page.click('[data-testid="save-button"]'); - await toastNotification( - page, - 'Application uninstalled successfully', - 'success' - ); + await toastNotification(page, 'Application uninstalled successfully'); await expect( page.locator('[data-testid="data-insights-application-card"]') diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataQualityAndProfiler.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataQualityAndProfiler.spec.ts index 9586684186b2..13017484b9e8 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataQualityAndProfiler.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataQualityAndProfiler.spec.ts @@ -148,7 +148,7 @@ test('Table test case', PLAYWRIGHT_INGESTION_TAG_OBJ, async ({ page }) => { ); await page.locator('button').filter({ hasText: 'Submit' }).click(); await updateTestCaseResponse; - await toastNotification(page, 'Test case updated successfully.', 'success'); + await toastNotification(page, 'Test case updated successfully.'); await page.click(`[data-testid="edit-${NEW_TABLE_TEST_CASE.name}"]`); await page.waitForSelector('#tableTestForm_params_columnName'); @@ -232,7 +232,7 @@ test('Column test case', PLAYWRIGHT_INGESTION_TAG_OBJ, async ({ page }) => { ); await page.locator('button').getByText('Submit').click(); await updateTestCaseResponse; - await toastNotification(page, 'Test case updated successfully.', 'success'); + await toastNotification(page, 'Test case updated successfully.'); await page.click(`[data-testid="edit-${NEW_COLUMN_TEST_CASE.name}"]`); await page.waitForSelector('#tableTestForm_params_minLength'); @@ -464,11 +464,7 @@ test( await page.locator('#tableTestForm_displayName').clear(); await page.fill('#tableTestForm_displayName', 'Updated display name'); await page.click('.ant-modal-footer >> text=Submit'); - await toastNotification( - page, - 'Test case updated successfully.', - 'success' - ); + await toastNotification(page, 'Test case updated successfully.'); await expect( page.locator(`[data-testid="${testCaseName}"]`) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/LoginConfiguration.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/LoginConfiguration.spec.ts index fe1ffbb06ec4..a90da17b68ca 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/LoginConfiguration.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/LoginConfiguration.spec.ts @@ -68,11 +68,7 @@ test.describe('Login configuration', () => { // Click the save button await page.click('[data-testid="save-button"]'); - await toastNotification( - page, - 'Login Configuration updated successfully.', - 'success' - ); + await toastNotification(page, 'Login Configuration updated successfully.'); // Assert the updated values await expect( diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/SearchIndexApplication.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/SearchIndexApplication.spec.ts index 81adcf9a1dcc..f8ade277ef41 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/SearchIndexApplication.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/SearchIndexApplication.spec.ts @@ -96,7 +96,7 @@ test('Search Index Application', async ({ page }) => { await page.click('.ant-modal-body [data-testid="deploy-button"]'); await deployResponse; - await toastNotification(page, 'Schedule saved successfully', 'success'); + await toastNotification(page, 'Schedule saved successfully'); expect(await page.innerText('[data-testid="schedule-type"]')).toContain( 'None' @@ -119,11 +119,7 @@ test('Search Index Application', async ({ page }) => { await page.click('[data-testid="submit-btn"]'); await responseAfterSubmit; - await toastNotification( - page, - 'Configuration saved successfully', - 'success' - ); + await toastNotification(page, 'Configuration saved successfully'); }); await test.step('Uninstall application', async () => { @@ -136,11 +132,7 @@ test('Search Index Application', async ({ page }) => { await page.click('[data-testid="save-button"]'); await deleteRequest; - await toastNotification( - page, - 'Application uninstalled successfully', - 'success' - ); + await toastNotification(page, 'Application uninstalled successfully'); const card1 = page.locator( '[data-testid="search-indexing-application-card"]' @@ -174,11 +166,7 @@ test('Search Index Application', async ({ page }) => { await page.click('[data-testid="deploy-button"]'); await installApplicationResponse; - await toastNotification( - page, - 'Application installed successfully', - 'success' - ); + await toastNotification(page, 'Application installed successfully'); const card = page.locator( '[data-testid="search-indexing-application-card"]' @@ -202,11 +190,7 @@ test('Search Index Application', async ({ page }) => { await triggerPipelineResponse; - await toastNotification( - page, - 'Application triggered successfully', - 'success' - ); + await toastNotification(page, 'Application triggered successfully'); await page.reload(); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Teams.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Teams.spec.ts index ebc7ce7a61ce..1d43dd213b43 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Teams.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Teams.spec.ts @@ -201,7 +201,7 @@ test.describe('Teams Page', () => { // Click on join teams button await page.locator('[data-testid="join-teams"]').click(); - await toastNotification(page, 'Team joined successfully!', 'success'); + await toastNotification(page, 'Team joined successfully!'); // Verify leave team button exists await expect( diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TestSuite.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TestSuite.spec.ts index 9442f40e682b..45addd132221 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TestSuite.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TestSuite.spec.ts @@ -219,8 +219,7 @@ test('Logical TestSuite', async ({ page }) => { await deleteResponse; await toastNotification( page, - `"${NEW_TEST_SUITE.name}" deleted successfully!`, - 'success' + `"${NEW_TEST_SUITE.name}" deleted successfully!` ); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/VersionPages/EntityVersionPages.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/VersionPages/EntityVersionPages.spec.ts index cdf892e82460..0f820128d263 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/VersionPages/EntityVersionPages.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/VersionPages/EntityVersionPages.spec.ts @@ -237,7 +237,7 @@ entities.forEach((EntityClass) => { await deleteResponse; - await toastNotification(page, /deleted successfully!/, 'success'); + await toastNotification(page, /deleted successfully!/); await page.reload(); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/VersionPages/ServiceEntityVersionPage.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/VersionPages/ServiceEntityVersionPage.spec.ts index e562734b1aaf..c71d80a9f0c7 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/VersionPages/ServiceEntityVersionPage.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/VersionPages/ServiceEntityVersionPage.spec.ts @@ -202,7 +202,7 @@ entities.forEach((EntityClass) => { await deleteResponse; - await toastNotification(page, /deleted successfully!/, 'success'); + await toastNotification(page, /deleted successfully!/); await page.reload(); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/MySqlIngestionClass.ts b/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/MySqlIngestionClass.ts index 3f9ecf985d92..1a222ae717ed 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/MySqlIngestionClass.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/MySqlIngestionClass.ts @@ -133,11 +133,7 @@ class MysqlIngestionClass extends ServiceBaseClass { ); await page.getByTestId('run-button').click(); - await toastNotification( - page, - `Pipeline triggered successfully!`, - 'success' - ); + await toastNotification(page, `Pipeline triggered successfully!`); // need manual wait to make sure we are awaiting on latest run results await page.waitForTimeout(2000); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/PostgresIngestionClass.ts b/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/PostgresIngestionClass.ts index a8af6fc7d4c7..fcd54f59cff4 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/PostgresIngestionClass.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/PostgresIngestionClass.ts @@ -139,11 +139,7 @@ class PostgresIngestionClass extends ServiceBaseClass { await page.getByTestId('run-button').click(); - await toastNotification( - page, - `Pipeline triggered successfully!`, - 'success' - ); + await toastNotification(page, `Pipeline triggered successfully!`); // need manual wait to make sure we are awaiting on latest run results await page.waitForTimeout(2000); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/RedshiftWithDBTIngestionClass.ts b/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/RedshiftWithDBTIngestionClass.ts index f40d9d5bdc4b..959a9cdc0de5 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/RedshiftWithDBTIngestionClass.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/RedshiftWithDBTIngestionClass.ts @@ -160,11 +160,7 @@ class RedshiftWithDBTIngestionClass extends ServiceBaseClass { ); await page.getByTestId('run-button').click(); - await toastNotification( - page, - `Pipeline triggered successfully!`, - 'success' - ); + await toastNotification(page, `Pipeline triggered successfully!`); // need manual wait to make sure we are awaiting on latest run results await page.waitForTimeout(2000); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/ServiceBaseClass.ts b/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/ServiceBaseClass.ts index 953ebef1d35f..2962c525ebfd 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/ServiceBaseClass.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/ServiceBaseClass.ts @@ -183,11 +183,7 @@ class ServiceBaseClass { await page.getByTestId('more-actions').first().click(); await page.getByTestId('run-button').click(); - await toastNotification( - page, - `Pipeline triggered successfully!`, - 'success' - ); + await toastNotification(page, `Pipeline triggered successfully!`); // need manual wait to make sure we are awaiting on latest run results await page.waitForTimeout(2000); @@ -453,11 +449,7 @@ class ServiceBaseClass { await page.getByTestId('more-actions').first().click(); await page.getByTestId('run-button').click(); - await toastNotification( - page, - `Pipeline triggered successfully!`, - 'success' - ); + await toastNotification(page, `Pipeline triggered successfully!`); // need manual wait to make sure we are awaiting on latest run results await page.waitForTimeout(2000); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/alert.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/alert.ts index d43a5a77f1d5..5c450db653c5 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/alert.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/alert.ts @@ -127,7 +127,7 @@ export const deleteAlertSteps = async (page: Page, name: string) => { await page.click('[data-testid="confirm-button"]'); await deleteAlert; - await toastNotification(page, `"${name}" deleted successfully!`, 'success'); + await toastNotification(page, `"${name}" deleted successfully!`); }; export const addOwnerFilter = async ({ @@ -765,7 +765,7 @@ export const saveAlertAndVerifyResponse = async (page: Page) => { expect(response.status()).toEqual(201); }); - await toastNotification(page, 'Alerts created successfully.', 'success'); + await toastNotification(page, 'Alerts created successfully.'); // Check if the alert details page is visible await getAlertDetails; diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/bot.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/bot.ts index dc7a74df55dd..3e0c01b48083 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/bot.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/bot.ts @@ -93,7 +93,7 @@ export const createBot = async (page: Page) => { await expect(page.getByTestId('token-expiry')).toBeVisible(); - await toastNotification(page, 'Bot created successfully.', 'success'); + await toastNotification(page, 'Bot created successfully.'); }; export const deleteBot = async (page: Page) => { @@ -112,7 +112,7 @@ export const deleteBot = async (page: Page) => { await deleteResponse; - await toastNotification(page, /deleted successfully!/, 'success'); + await toastNotification(page, /deleted successfully!/); await expect(page.getByTestId('page-layout-v1')).not.toContainText(botName); }; diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts index 2a86bf8598ce..93112eaa71ae 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts @@ -114,7 +114,7 @@ export const getEntityTypeSearchIndexMapping = (entityType: string) => { export const toastNotification = async ( page: Page, message: string | RegExp, - type: 'info' | 'success' | 'warning' | 'error' + type: 'info' | 'success' | 'warning' | 'error' = 'success' ) => { await expect(page.locator(`.alert-container.${type}`)).toHaveText(message); diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/customMetric.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/customMetric.ts index e17a5866b892..e8cda5d48f75 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/customMetric.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/customMetric.ts @@ -121,8 +121,7 @@ export const createCustomMetric = async ({ await toastNotification( page, - new RegExp(`${metric.name} created successfully.`), - 'success' + new RegExp(`${metric.name} created successfully.`) ); // verify the created custom metric diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/customizeLandingPage.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/customizeLandingPage.ts index 4446dadc3714..cd1090fde057 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/customizeLandingPage.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/customizeLandingPage.ts @@ -145,7 +145,6 @@ export const saveCustomizeLayoutPage = async ( await toastNotification( page, - `Page layout ${isCreated ? 'created' : 'updated'} successfully.`, - 'success' + `Page layout ${isCreated ? 'created' : 'updated'} successfully.` ); }; diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/dragDrop.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/dragDrop.ts index a50ec954eace..8fc97411c1b3 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/dragDrop.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/dragDrop.ts @@ -59,5 +59,5 @@ export const confirmationDragAndDropTeam = async ( await page.locator('.ant-modal-footer > .ant-btn-primary').click(); await patchResponse; - await toastNotification(page, 'Team moved successfully!', 'success'); + await toastNotification(page, 'Team moved successfully!'); }; diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/entity.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/entity.ts index 9a76a429659b..d05fcdb268c4 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/entity.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/entity.ts @@ -1167,7 +1167,7 @@ export const restoreEntity = async (page: Page) => { await page.click('[data-testid="restore-button"]'); await page.click('button:has-text("Restore")'); - await toastNotification(page, /restored successfully/, 'success'); + await toastNotification(page, /restored successfully/); const exists = await page .locator('[data-testid="deleted-badge"]') @@ -1206,7 +1206,7 @@ export const softDeleteEntity = async ( await deleteResponse; - await toastNotification(page, /deleted successfully!/, 'success'); + await toastNotification(page, /deleted successfully!/); await page.reload(); @@ -1271,7 +1271,7 @@ export const hardDeleteEntity = async ( await page.click('[data-testid="confirm-button"]'); await deleteResponse; - await toastNotification(page, /deleted successfully!/, 'success'); + await toastNotification(page, /deleted successfully!/); }; export const checkDataAssetWidget = async ( diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts index 20136b3cfa24..c5b7e7e2ea16 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts @@ -501,7 +501,7 @@ export const approveGlossaryTermTask = async ( await taskResolve; // Display toast notification - await toastNotification(page, /Task resolved successfully/, 'success'); + await toastNotification(page, /Task resolved successfully/); }; export const validateGlossaryTerm = async ( @@ -727,17 +727,9 @@ export const deleteGlossaryOrGlossaryTerm = async ( await deleteRes; if (isGlossaryTerm) { - await toastNotification( - page, - /"Glossary Term" deleted successfully!/, - 'success' - ); + await toastNotification(page, /"Glossary Term" deleted successfully!/); } else { - await toastNotification( - page, - /"Glossary" deleted successfully!/, - 'success' - ); + await toastNotification(page, /"Glossary" deleted successfully!/); } }; @@ -903,7 +895,7 @@ export const createDescriptionTaskForGlossary = async ( } await page.click('button[type="submit"]'); - await toastNotification(page, /Task created successfully./, 'success'); + await toastNotification(page, /Task created successfully./); }; export const createTagTaskForGlossary = async ( @@ -974,7 +966,7 @@ export const createTagTaskForGlossary = async ( await page.click('button[type="submit"]'); - await toastNotification(page, /Task created successfully./, 'success'); + await toastNotification(page, /Task created successfully./); }; export const approveTagsTask = async ( diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/serviceIngestion.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/serviceIngestion.ts index c8a7825a0871..7d9b1390b240 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/serviceIngestion.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/serviceIngestion.ts @@ -111,11 +111,7 @@ export const deleteService = async ( await deleteResponse; // Closing the toast notification - await toastNotification( - page, - `"${serviceName}" deleted successfully!`, - 'success' - ); + await toastNotification(page, `"${serviceName}" deleted successfully!`); await page.waitForSelector(`[data-testid="service-name-${serviceName}"]`, { state: 'hidden', diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts index 48f2e43aff18..07129203dde7 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/task.ts @@ -80,7 +80,7 @@ export const createDescriptionTask = async ( } await page.click('button[type="submit"]'); - await toastNotification(page, /Task created successfully./, 'success'); + await toastNotification(page, /Task created successfully./); }; export const createTagTask = async ( @@ -148,7 +148,7 @@ export const createTagTask = async ( await page.click('button[type="submit"]'); - await toastNotification(page, /Task created successfully./, 'success'); + await toastNotification(page, /Task created successfully./); }; export const checkTaskCount = async ( diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/team.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/team.ts index 2762ee2e8050..4ffa5541332d 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/team.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/team.ts @@ -74,7 +74,7 @@ export const softDeleteTeam = async (page: Page) => { await deleteResponse; - await toastNotification(page, /deleted successfully!/, 'success'); + await toastNotification(page, /deleted successfully!/); }; export const hardDeleteTeam = async (page: Page) => { @@ -100,7 +100,7 @@ export const hardDeleteTeam = async (page: Page) => { await deleteResponse; - await toastNotification(page, /deleted successfully!/, 'success'); + await toastNotification(page, /deleted successfully!/); }; export const getNewTeamDetails = (teamName: string) => { diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/user.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/user.ts index a21bddd00206..25c21d866fe9 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/user.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/user.ts @@ -138,7 +138,7 @@ export const softDeleteUserProfilePage = async ( await deleteResponse; - await toastNotification(page, /deleted successfully!/, 'success'); + await toastNotification(page, /deleted successfully!/); await deletedUserChecks(page); }; @@ -161,7 +161,7 @@ export const restoreUserProfilePage = async (page: Page, fqn: string) => { await restoreResponse; - await toastNotification(page, /User restored successfully/, 'success'); + await toastNotification(page, /User restored successfully/); await nonDeletedUserChecks(page); }; @@ -189,7 +189,7 @@ export const hardDeleteUserProfilePage = async ( await deleteResponse; - await toastNotification(page, /deleted successfully!/, 'success'); + await toastNotification(page, /deleted successfully!/); }; export const editDisplayName = async (page: Page, editedUserName: string) => { @@ -355,11 +355,7 @@ export const softDeleteUser = async ( await deleteResponse; await fetchUpdatedUsers; - await toastNotification( - page, - `"${displayName}" deleted successfully!`, - 'success' - ); + await toastNotification(page, `"${displayName}" deleted successfully!`); // Wait for the loader to disappear await page.waitForSelector('[data-testid="loader"]', { state: 'hidden' }); @@ -413,7 +409,7 @@ export const restoreUser = async ( await page.click('.ant-modal-footer > .ant-btn-primary'); await restoreUserResponse; - await toastNotification(page, 'User restored successfully', 'success'); + await toastNotification(page, 'User restored successfully'); }; export const permanentDeleteUser = async ( @@ -459,11 +455,7 @@ export const permanentDeleteUser = async ( await hardDeleteUserResponse; await reFetchUsers; - await toastNotification( - page, - `"${displayName}" deleted successfully!`, - 'success' - ); + await toastNotification(page, `"${displayName}" deleted successfully!`); // Wait for the loader to disappear await page.waitForSelector('[data-testid="loader"]', { state: 'hidden' }); diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-error.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-error.svg index 571f68c76e5e..b321359d7d38 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-error.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-error.svg @@ -1,8 +1,8 @@ - - - + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-info-tag.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-info-tag.svg index ed5f693f4d0f..0874efa5b7d6 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-info-tag.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-info-tag.svg @@ -1,8 +1,8 @@ - - - + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-success.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-success.svg index 55f35d7c54cf..53c6a0b63ecd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-success.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-success.svg @@ -1,6 +1,6 @@ - + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-warning-tag.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-warning-tag.svg index 27215bc1f127..00f5761b5e5b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-warning-tag.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-warning-tag.svg @@ -1,8 +1,8 @@ - - - + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx index 165616337d6c..6ffb58766394 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx @@ -14,54 +14,16 @@ import { Alert } from 'antd'; import classNames from 'classnames'; import React, { useMemo } from 'react'; import { ReactComponent as CrossIcon } from '../../assets/svg/ic-cross.svg'; -import { ReactComponent as ErrorIcon } from '../../assets/svg/ic-error.svg'; -import { ReactComponent as InfoIcon } from '../../assets/svg/ic-info-tag.svg'; -import { ReactComponent as SuccessIcon } from '../../assets/svg/ic-success.svg'; -import { ReactComponent as WarningIcon } from '../../assets/svg/ic-warning-tag.svg'; import { useAlertStore } from '../../hooks/useAlertStore'; +import { getIconAndClassName } from '../../utils/ToastUtils'; import './alert-bar.style.less'; import { AlertBarProps } from './AlertBar.interface'; const AlertBar = ({ type, message }: AlertBarProps): JSX.Element => { const { resetAlert, animationClass } = useAlertStore(); - const { icon, className, crossIconColor } = useMemo(() => { - switch (type) { - case 'info': - return { - icon: , - className: 'info', - crossIconColor: '#0950c5', - }; - - case 'success': - return { - icon: , - className: 'success', - crossIconColor: '#1D7C4D', - }; - - case 'warning': - return { - icon: , - className: 'warning', - crossIconColor: '#F59638', - }; - - case 'error': - return { - icon: , - className: 'error', - crossIconColor: '#CB2531', - }; - - default: - return { - icon: null, - className: '', - crossIconColor: '', - }; - } + const { icon: AlertIcon, className } = useMemo(() => { + return getIconAndClassName(type); }, [type]); return ( @@ -70,9 +32,9 @@ const AlertBar = ({ type, message }: AlertBarProps): JSX.Element => { showIcon afterClose={resetAlert} className={classNames(className, 'alert-container', animationClass)} - closeIcon={} + closeIcon={} description={message} - icon={icon} + icon={AlertIcon && } type={type} /> ); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less index c11bbc6784d3..c632279e50c7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less @@ -11,6 +11,8 @@ * limitations under the License. */ +@import (reference) url('../../styles/variables.less'); + @keyframes resize-show-animation { from { height: 0; @@ -22,42 +24,52 @@ } } +@keyframes resize-hide-animation { + from { + height: 64px; + padding: 20px; + } + to { + height: 0; + padding: 0 20px; + } +} + .alert-container { - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - font-size: 16px; overflow-y: scroll; &.show-alert { animation: resize-show-animation 1.2s ease-in-out forwards; } + &.hide-alert { + animation: resize-hide-animation 1.2s ease-in-out forwards; + } + &.info { - background-color: #f6f8ff; - color: #0950c5; + background-color: @info-bg-color; + color: @info-color; border: none; border-radius: 0px; } &.success { - background-color: #f5fbf8; - color: #1d7c4d; + background-color: @success-bg-color; + color: @success-color; border: none; border-radius: 0px; } &.warning { - background-color: #fff5eb; - color: #f59638; + background-color: @warning-bg-color; + color: @warning-color; border: none; border-radius: 0px; } &.error { - background-color: #fcf0f1; - color: #cb2531; + background-color: @error-bg-color; + color: @error-color; border: none; border-radius: 0px; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx index 26929e428d87..10f23fa300eb 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppContainer/AppContainer.tsx @@ -16,7 +16,6 @@ import classNames from 'classnames'; import React, { useCallback, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useLimitStore } from '../../context/LimitsProvider/useLimitsStore'; -import { useAlertStore } from '../../hooks/useAlertStore'; import { useApplicationStore } from '../../hooks/useApplicationStore'; import { getLimitConfig } from '../../rest/limitsAPI'; import applicationRoutesClass from '../../utils/ApplicationRoutesClassBase'; @@ -31,7 +30,6 @@ const AppContainer = () => { const { i18n } = useTranslation(); const { Header, Sider, Content } = Layout; const { currentUser } = useApplicationStore(); - const { alert } = useAlertStore(); const { applications } = useApplicationsProvider(); const AuthenticatedRouter = applicationRoutesClass.getRouteElements(); const ApplicationExtras = applicationsClassBase.getApplicationExtension(); @@ -71,7 +69,6 @@ const AppContainer = () => { = ({ )} - + + {alert && } + {children} + + {rightPanel && ( - {alert && } - {children} + className="page-layout-rightpanel page-layout-v1-vertical-scroll" + flex={rightPanelWidth + 'px'} + id="right-panelV1"> + {rightPanel} - {rightPanel && ( - - {rightPanel} - - )} - + )} diff --git a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts index 2ddf3c31ee1a..b0b37da384f1 100644 --- a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts +++ b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts @@ -36,7 +36,10 @@ export const useAlertStore = create()((set) => ({ if (autoCloseTimer !== Infinity) { setTimeout(() => { - set({ alert: undefined }); + set({ animationClass: 'hide-alert' }); + setTimeout(() => { + set({ alert: undefined }); + }, 1000); }, autoCloseTimer); } }, diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx index 96e541a15516..40c3b91cd698 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx @@ -36,6 +36,7 @@ import { Thread } from '../../generated/entity/feed/thread'; import { PageType } from '../../generated/system/ui/page'; import { EntityReference } from '../../generated/type/entityReference'; import LimitWrapper from '../../hoc/LimitWrapper'; +import { useAlertStore } from '../../hooks/useAlertStore'; import { useApplicationStore } from '../../hooks/useApplicationStore'; import { useGridLayoutDirection } from '../../hooks/useGridLayoutDirection'; import { getDocumentByFQN } from '../../rest/DocStoreAPI'; @@ -63,6 +64,7 @@ const MyDataPage = () => { useState(true); const [announcements, setAnnouncements] = useState([]); const storageData = localStorage.getItem(LOGGED_IN_USER_STORAGE_KEY); + const { addAlert } = useAlertStore(); const loggedInUserName = useMemo(() => { return currentUser?.name ?? ''; @@ -141,6 +143,12 @@ const MyDataPage = () => { } }, [currentUser]); + useEffect(() => { + setTimeout(() => { + addAlert({ type: 'success', message: 'Message' }, Infinity); + }, 3000); + }, []); + const widgets = useMemo( () => // Adding announcement widget to the layout when announcements are present diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less b/openmetadata-ui/src/main/resources/ui/src/styles/variables.less index 7dca17058688..cc7f32d23db2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less +++ b/openmetadata-ui/src/main/resources/ui/src/styles/variables.less @@ -105,6 +105,10 @@ @team-avatar-bg: #0950c51a; @om-navbar-height: ~'var(--ant-navbar-height)'; @sidebar-width: 60px; +@error-bg-color: rgb(from @error-color r g b / 0.1); +@success-bg-color: rgb(from @success-color r g b / 0.1); +@warning-bg-color: rgb(from @warning-color r g b / 0.1); +@info-bg-color: rgb(from @info-color r g b / 0.1); // Sizing @page-height: calc(100vh - @om-navbar-height); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ToastUtils.ts b/openmetadata-ui/src/main/resources/ui/src/utils/ToastUtils.ts index 460d1dd1e083..6adbe9a17871 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/ToastUtils.ts +++ b/openmetadata-ui/src/main/resources/ui/src/utils/ToastUtils.ts @@ -11,14 +11,53 @@ * limitations under the License. */ +import { AlertProps } from 'antd'; import { AxiosError } from 'axios'; import { isEmpty, isString } from 'lodash'; import React from 'react'; +import { ReactComponent as ErrorIcon } from '../assets/svg/ic-error.svg'; +import { ReactComponent as InfoIcon } from '../assets/svg/ic-info-tag.svg'; +import { ReactComponent as SuccessIcon } from '../assets/svg/ic-success.svg'; +import { ReactComponent as WarningIcon } from '../assets/svg/ic-warning-tag.svg'; import { ClientErrors } from '../enums/Axios.enum'; import { useAlertStore } from '../hooks/useAlertStore'; import i18n from './i18next/LocalUtil'; import { getErrorText } from './StringsUtils'; +export const getIconAndClassName = (type: AlertProps['type']) => { + switch (type) { + case 'info': + return { + icon: InfoIcon, + className: 'info', + }; + + case 'success': + return { + icon: SuccessIcon, + className: 'success', + }; + + case 'warning': + return { + icon: WarningIcon, + className: 'warning', + }; + + case 'error': + return { + icon: ErrorIcon, + className: 'error', + }; + + default: + return { + icon: null, + className: '', + }; + } +}; + export const hashCode = (str: string) => { let hash = 0, i, From f524134a8a959535aa662d5f53e0563eb506ccfe Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Thu, 24 Oct 2024 17:41:40 +0530 Subject: [PATCH 27/39] fix tests failure --- .../resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts | 2 +- .../src/main/resources/ui/playwright/utils/common.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts index 2aff12c389b4..7e59e441c1e8 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts @@ -415,7 +415,7 @@ test.describe('Activity feed', () => { await toastNotification( page, 'Task cannot be closed without a comment.', - 'warning' + 'error' ); // Close the task from the Button.Group, with comment is added. diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts index 93112eaa71ae..fe1bbd1a45e3 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts @@ -120,7 +120,7 @@ export const toastNotification = async ( await expect(page.locator('.ant-alert-icon')).toBeVisible(); - await page.locator('.alert-container .ant-alert-close-icon').click(); + await page.locator('.alert-container button').click(); }; export const clickOutside = async (page: Page) => { From ef5d462c8dcbf51b8137d8320066f7ee7a6c4522 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Thu, 24 Oct 2024 19:28:09 +0530 Subject: [PATCH 28/39] update test for toast --- .../src/main/resources/ui/playwright/utils/common.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts index fe1bbd1a45e3..c38ea012a884 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts @@ -120,7 +120,7 @@ export const toastNotification = async ( await expect(page.locator('.ant-alert-icon')).toBeVisible(); - await page.locator('.alert-container button').click(); + await expect(page.locator('.alert-container button')).toBeVisible(); }; export const clickOutside = async (page: Page) => { From 78c9f477512e8e6a88d3d1b0079961fa2f90cc56 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Fri, 25 Oct 2024 12:38:16 +0530 Subject: [PATCH 29/39] remove dummy alert bar --- .../ui/src/pages/MyDataPage/MyDataPage.component.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx index 40c3b91cd698..96e541a15516 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx @@ -36,7 +36,6 @@ import { Thread } from '../../generated/entity/feed/thread'; import { PageType } from '../../generated/system/ui/page'; import { EntityReference } from '../../generated/type/entityReference'; import LimitWrapper from '../../hoc/LimitWrapper'; -import { useAlertStore } from '../../hooks/useAlertStore'; import { useApplicationStore } from '../../hooks/useApplicationStore'; import { useGridLayoutDirection } from '../../hooks/useGridLayoutDirection'; import { getDocumentByFQN } from '../../rest/DocStoreAPI'; @@ -64,7 +63,6 @@ const MyDataPage = () => { useState(true); const [announcements, setAnnouncements] = useState([]); const storageData = localStorage.getItem(LOGGED_IN_USER_STORAGE_KEY); - const { addAlert } = useAlertStore(); const loggedInUserName = useMemo(() => { return currentUser?.name ?? ''; @@ -143,12 +141,6 @@ const MyDataPage = () => { } }, [currentUser]); - useEffect(() => { - setTimeout(() => { - addAlert({ type: 'success', message: 'Message' }, Infinity); - }, 3000); - }, []); - const widgets = useMemo( () => // Adding announcement widget to the layout when announcements are present From f3207b3c92b2bcc717c886f766ad401f7c56f535 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Fri, 25 Oct 2024 15:04:27 +0530 Subject: [PATCH 30/39] made alert fixed to top --- .../src/components/AlertBar/alert-bar.style.less | 5 +++++ .../src/components/PageLayoutV1/PageLayoutV1.tsx | 9 +++++++-- .../main/resources/ui/src/hooks/useAlertStore.ts | 5 +---- .../ui/src/styles/layout/page-layout.less | 14 ++++++++++++++ 4 files changed, 27 insertions(+), 6 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less index c632279e50c7..c139ba7cbe2d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less @@ -37,9 +37,14 @@ .alert-container { overflow-y: scroll; + backdrop-filter: blur(500px); &.show-alert { animation: resize-show-animation 1.2s ease-in-out forwards; + position: fixed; + top: 64px; + z-index: 20; + width: 96%; } &.hide-alert { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx index 55862dfa6661..f5e8ebdacbbe 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx @@ -115,8 +115,13 @@ const PageLayoutV1: FC = ({ flex={contentWidth} offset={center ? 3 : 0} span={center ? 18 : 24}> - {alert && } - {children} +
+ {alert && } +
+ {children} +
+
{rightPanel && ( ()((set) => ({ if (autoCloseTimer !== Infinity) { setTimeout(() => { - set({ animationClass: 'hide-alert' }); - setTimeout(() => { - set({ alert: undefined }); - }, 1000); + set({ animationClass: 'hide-alert', alert: undefined }); }, autoCloseTimer); } }, diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less b/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less index 4d2cea492ece..acd866f1333e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less +++ b/openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less @@ -20,6 +20,20 @@ overflow-x: hidden; } +.alert-page-container { + position: relative; +} + +.page-content { + position: relative; + top: 0; + transition: top 1s ease-in-out; +} + +.page-content-shifted { + top: 64px; +} + .page-layout-v1-left-panel { border: @global-border; border-radius: @border-radius-base; From 31d7a7537083bc0dd266ce2a6341a93cb654fc05 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Mon, 28 Oct 2024 11:46:13 +0530 Subject: [PATCH 31/39] fix check failing issue --- openmetadata-ui/src/main/resources/ui/playwright/utils/alert.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/alert.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/alert.ts index 5c450db653c5..2046e6230ecd 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/utils/alert.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/alert.ts @@ -765,7 +765,6 @@ export const saveAlertAndVerifyResponse = async (page: Page) => { expect(response.status()).toEqual(201); }); - await toastNotification(page, 'Alerts created successfully.'); // Check if the alert details page is visible await getAlertDetails; From 0fb436cb461c732342ec57b4d0cd59a469bc075f Mon Sep 17 00:00:00 2001 From: Ashish Gupta Date: Tue, 29 Oct 2024 16:50:52 +0530 Subject: [PATCH 32/39] fix activity feed playwright test issue --- .../ui/playwright/e2e/Features/ActivityFeed.spec.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts index 7e59e441c1e8..467bf511d006 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts @@ -363,13 +363,15 @@ test.describe('Activity feed', () => { await page.getByText('OK').click(); await resolveTask; - await toastNotification(page, /Task resolved successfully/); + await toastNotification(page, /Task resolved successfully/, 'success'); // Task 1 - Resolved the task + const resolveTask2 = page.waitForResponse('/api/v1/feed/tasks/*/resolve'); await page.getByText('Accept Suggestion').click(); + await resolveTask2; - await toastNotification(page, /Task resolved successfully/); + await toastNotification(page, /Task resolved successfully/, 'success'); await checkTaskCount(page, 0, 2); }); From cfde10c3ff409c1c89ba3ace88aa1479d52e3cbb Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Tue, 5 Nov 2024 14:11:23 +0530 Subject: [PATCH 33/39] update test --- .../ui/playwright/e2e/Pages/DataQualityAndProfiler.spec.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataQualityAndProfiler.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataQualityAndProfiler.spec.ts index 13017484b9e8..2727bd73a6a5 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataQualityAndProfiler.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataQualityAndProfiler.spec.ts @@ -464,7 +464,6 @@ test( await page.locator('#tableTestForm_displayName').clear(); await page.fill('#tableTestForm_displayName', 'Updated display name'); await page.click('.ant-modal-footer >> text=Submit'); - await toastNotification(page, 'Test case updated successfully.'); await expect( page.locator(`[data-testid="${testCaseName}"]`) From b436d8af796291b0a519de3604b8badecba2231c Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Mon, 18 Nov 2024 13:13:19 +0530 Subject: [PATCH 34/39] fix test issues --- .../ui/playwright/e2e/Pages/Domains.spec.ts | 6 +- .../Domain/DomainPage.component.tsx | 75 +++++----- .../resources/ui/src/hooks/useAlertStore.ts | 3 +- .../GlossaryPage/GlossaryPage.component.tsx | 43 +++--- .../Persona/PersonaListPage/PersonaPage.tsx | 128 +++++++++--------- 5 files changed, 130 insertions(+), 125 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Domains.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Domains.spec.ts index ef6d563b7d0a..622514a95520 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Domains.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Domains.spec.ts @@ -84,7 +84,11 @@ test.describe('Domains', () => { await deleteRes; await expect( - page.getByText(`"${domain.data.displayName}" deleted`) + page.getByText( + `"${ + domain.data.displayName ?? domain.data.name + }" deleted successfully!` + ) ).toBeVisible(); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainPage.component.tsx index 4a3d3202cd49..92b11c970639 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainPage.component.tsx @@ -37,6 +37,7 @@ import { getDomainPath } from '../../utils/RouterUtils'; import { showErrorToast } from '../../utils/ToastUtils'; import Loader from '../common/Loader/Loader'; import ResizableLeftPanels from '../common/ResizablePanels/ResizableLeftPanels'; +import PageLayoutV1 from '../PageLayoutV1/PageLayoutV1'; import './domain.less'; import DomainDetailsPage from './DomainDetailsPage/DomainDetailsPage.component'; import DomainsLeftPanel from './DomainLeftPanel/DomainLeftPanel.component'; @@ -176,10 +177,6 @@ const DomainPage = () => { } }, [rootDomains, domainFqn]); - if (domainLoading) { - return ; - } - if (!(viewBasicDomainPermission || viewAllDomainPermission)) { return ( { ); } - if (isEmpty(rootDomains)) { - return ( - - {t('message.domains-not-configured')} - - ); - } - return ( - , - }} - pageTitle={t('label.domain')} - secondPanel={{ - children: domainPageRender, - className: 'content-resizable-panel-container p-t-sm', - minWidth: 800, - flex: 0.87, - }} - /> + + {isEmpty(rootDomains) ? ( + + {t('message.domains-not-configured')} + + ) : ( + , + }} + pageTitle={t('label.domain')} + secondPanel={{ + children: domainPageRender, + className: 'content-resizable-panel-container p-t-sm', + minWidth: 800, + flex: 0.87, + }} + /> + )} + + {domainLoading && } + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts index 751b2f000ebc..73c96c008203 100644 --- a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts +++ b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts @@ -31,8 +31,7 @@ export const useAlertStore = create()((set) => ({ addAlert: (alert: AlertType, timer?: number) => { set({ alert, animationClass: 'show-alert' }); - const autoCloseTimer = - timer !== undefined ? timer : alert.type === 'error' ? Infinity : 5000; + const autoCloseTimer = timer ?? (alert.type === 'error' ? Infinity : 5000); if (autoCloseTimer !== Infinity) { setTimeout(() => { diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx index 2839a2b47274..bb87b9e61fe6 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx @@ -29,6 +29,7 @@ import { ModifiedGlossary, useGlossaryStore, } from '../../../components/Glossary/useGlossary.store'; +import PageLayoutV1 from '../../../components/PageLayoutV1/PageLayoutV1'; import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants'; import { PAGE_SIZE_LARGE, ROUTES } from '../../../constants/constants'; import { GLOSSARIES_DOCS } from '../../../constants/docs.constants'; @@ -348,24 +349,6 @@ const GlossaryPage = () => { return ; } - if (glossaries.length === 0 && !isLoading) { - return ( - - ); - } - const glossaryElement = (
{isRightPanelLoading ? ( @@ -433,7 +416,29 @@ const GlossaryPage = () => { /> ); - return <>{resizableLayout}; + return ( + <> + + {glossaries.length === 0 && !isLoading ? ( + + ) : ( + resizableLayout + )} + + + ); }; export default GlossaryPage; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaListPage/PersonaPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaListPage/PersonaPage.tsx index f9d90a85db96..db991db7d3c6 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaListPage/PersonaPage.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaListPage/PersonaPage.tsx @@ -120,75 +120,73 @@ export const PersonaPage = () => { } }; - if (isEmpty(persona) && !isLoading) { - return ( - <> - {errorPlaceHolder} - {Boolean(addEditPersona) && ( - - )} - - ); - } - return ( - - - - - - - - - - - - - - {isLoading - ? [1, 2, 3].map((key) => ( - - - - - - )) - : persona?.map((persona) => ( - - - - ))} - - {showPagination && ( - - + {errorPlaceHolder} + {Boolean(addEditPersona) && ( + + )} + + ) : ( + + + + + + - )} - {Boolean(addEditPersona) && ( - - )} - + + + + + + + {isLoading + ? [1, 2, 3].map((key) => ( + + + + + + )) + : persona?.map((persona) => ( + + + + ))} + + {showPagination && ( + + + + )} + {Boolean(addEditPersona) && ( + + )} + + )} ); }; From 939fa6d243538adfbe4f53a7f9e4493384150651 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Mon, 18 Nov 2024 14:05:30 +0530 Subject: [PATCH 35/39] update page layout --- .../ui/src/components/Domain/DomainPage.component.tsx | 2 +- .../pages/Glossary/GlossaryPage/GlossaryPage.component.tsx | 2 +- .../ui/src/pages/Persona/PersonaListPage/PersonaPage.tsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainPage.component.tsx index 92b11c970639..77056259df37 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Domain/DomainPage.component.tsx @@ -191,7 +191,7 @@ const DomainPage = () => { {isEmpty(rootDomains) ? ( { {glossaries.length === 0 && !isLoading ? ( { return ( {isEmpty(persona) && !isLoading ? ( - <> +
{errorPlaceHolder} {Boolean(addEditPersona) && ( { onSave={handlePersonaAddEditSave} /> )} - +
) : ( From eedaaf692fbc218ffbcfe1fea85156a1b0e13f22 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Mon, 18 Nov 2024 15:39:09 +0530 Subject: [PATCH 36/39] fix sonar cloud failure --- .../ui/src/pages/Glossary/GlossaryPage/GlossaryPage.test.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.test.tsx index 8c1b0f7e52f6..afe1abc31070 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.test.tsx @@ -21,6 +21,8 @@ import { } from '../../../rest/glossaryAPI'; import GlossaryPage from './GlossaryPage.component'; +jest.useFakeTimers(); + jest.mock('react-router-dom', () => ({ useHistory: () => ({ push: jest.fn(), From f9452fad2a3f7cbee86f2fa40185f4863dc1f78e Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Mon, 18 Nov 2024 18:10:00 +0530 Subject: [PATCH 37/39] fix sonar cloud failure --- .../pages/Glossary/GlossaryPage/GlossaryPage.test.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.test.tsx index afe1abc31070..b542c7cd88bf 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.test.tsx @@ -21,8 +21,6 @@ import { } from '../../../rest/glossaryAPI'; import GlossaryPage from './GlossaryPage.component'; -jest.useFakeTimers(); - jest.mock('react-router-dom', () => ({ useHistory: () => ({ push: jest.fn(), @@ -48,6 +46,15 @@ jest.mock('../../../context/PermissionProvider/PermissionProvider', () => { }; }); +jest.mock('../../../components/PageLayoutV1/PageLayoutV1', () => { + return jest.fn(({ children, pageTitle }) => ( +
+

{pageTitle}

+
{children}
+
+ )); +}); + jest.mock('../../../components/Glossary/GlossaryV1.component', () => { return jest.fn().mockImplementation((props) => (
From 8829ce04ed2716f5c54585d37240518027d54000 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Mon, 18 Nov 2024 18:43:21 +0530 Subject: [PATCH 38/39] fix test issues --- .../ui/playwright/e2e/Pages/TestCases.spec.ts | 19 +-- .../src/pages/DataQuality/DataQualityPage.tsx | 141 +++++++++--------- .../GlossaryPage/GlossaryPage.component.tsx | 40 +++-- 3 files changed, 95 insertions(+), 105 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TestCases.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TestCases.spec.ts index ddea17619c86..33a90720eaf5 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TestCases.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/TestCases.spec.ts @@ -16,6 +16,7 @@ import { descriptionBox, getApiContext, redirectToHomePage, + toastNotification, } from '../../utils/common'; import { deleteTestCase, visitDataQualityTab } from '../../utils/testCases'; @@ -133,11 +134,7 @@ test('Table difference test case', async ({ page }) => { await page.getByTitle('name', { exact: true }).click(); await page.getByRole('button', { name: 'Submit' }).click(); - await expect(page.getByRole('alert')).toContainText( - 'Test case updated successfully.' - ); - - await page.getByLabel('close', { exact: true }).click(); + await toastNotification(page, 'Test case updated successfully.'); }); await test.step('Delete', async () => { @@ -233,11 +230,7 @@ test('Custom SQL Query', async ({ page }) => { await page.getByPlaceholder('Enter a Threshold').fill('244'); await page.getByRole('button', { name: 'Submit' }).click(); - await expect(page.getByRole('alert')).toContainText( - 'Test case updated successfully.' - ); - - await page.getByLabel('close', { exact: true }).click(); + await toastNotification(page, 'Test case updated successfully.'); }); await test.step('Delete', async () => { @@ -334,11 +327,7 @@ test('Column Values To Be Not Null', async ({ page }) => { await page.keyboard.type(' update'); await page.getByRole('button', { name: 'Submit' }).click(); - await expect(page.getByRole('alert')).toContainText( - 'Test case updated successfully.' - ); - - await page.getByLabel('close', { exact: true }).click(); + await toastNotification(page, 'Test case updated successfully.'); }); await test.step('Delete', async () => { diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.tsx index 40e5719231db..811345939365 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.tsx @@ -24,6 +24,7 @@ import { import LeftPanelCard from '../../components/common/LeftPanelCard/LeftPanelCard'; import ResizableLeftPanels from '../../components/common/ResizablePanels/ResizableLeftPanels'; import TabsLabel from '../../components/common/TabsLabel/TabsLabel.component'; +import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1'; import { ROUTES } from '../../constants/constants'; import { getDataQualityPagePath } from '../../utils/RouterUtils'; import './data-quality-page.less'; @@ -68,76 +69,78 @@ const DataQualityPage = () => { }; return ( - - - - ), - }} - pageTitle="Quality" - secondPanel={{ - children: ( - - - - - {t('label.data-quality')} - - - {t('message.page-sub-header-for-data-quality')} - - - - - {tabDetailsComponent.map((tab) => ( - - ))} + + + + + ), + }} + pageTitle="Quality" + secondPanel={{ + children: ( + + + + + {t('label.data-quality')} + + + {t('message.page-sub-header-for-data-quality')} + + + + + {tabDetailsComponent.map((tab) => ( + + ))} - - - - - - - - ), - className: 'content-resizable-panel-container p-t-sm', - minWidth: 800, - flex: 0.87, - }} - /> + + + + + + + + ), + className: 'content-resizable-panel-container p-t-sm', + minWidth: 800, + flex: 0.87, + }} + /> + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx index 87b27814c893..a565feae5e9b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx @@ -417,27 +417,25 @@ const GlossaryPage = () => { ); return ( - <> - - {glossaries.length === 0 && !isLoading ? ( - - ) : ( - resizableLayout - )} - - + + {glossaries.length === 0 && !isLoading ? ( + + ) : ( + resizableLayout + )} + ); }; From ae75bbb5baa749253ab22faa4a74c3b2e5a9277d Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla Date: Tue, 19 Nov 2024 10:33:06 +0530 Subject: [PATCH 39/39] resolve sonar issue --- .../ui/src/pages/DataQuality/DataQualityPage.test.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.test.tsx index ce6f706cb070..318bc94530cc 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.test.tsx @@ -63,6 +63,10 @@ jest.mock('../../components/common/ResizablePanels/ResizableLeftPanels', () => { )); }); +jest.mock('../../components/PageLayoutV1/PageLayoutV1', () => { + return jest.fn().mockImplementation(({ children }) =>
{children}
); +}); + jest.mock('react-router-dom', () => { return { ...jest.requireActual('react-router-dom'),