From 8d46bca952e74ba1b81bc01eeb27ef2a17167e77 Mon Sep 17 00:00:00 2001 From: Sweta Agarwalla <105535990+sweta1308@users.noreply.github.com> Date: Mon, 3 Mar 2025 14:51:32 +0530 Subject: [PATCH] Update page title (#20035) * update page title * update title * update titles * updated locales * update titles * update locales * update mocks for DocumentTitle * update keys * update key * update test * fix sonar issue --- .../OidcAuthenticator.test.tsx | 7 + .../WhatsNewAlert/WhatsNewAlert.component.tsx | 9 +- .../WelcomeScreen/WelcomeScreen.component.tsx | 16 +- .../WelcomeScreen/welcome-screen.style.less | 4 + .../ui/src/components/NavBar/NavBar.tsx | 4 +- .../common/BrandImage/BrandImage.tsx | 7 +- .../common/DocumentTitle/DocumentTitle.tsx | 10 +- .../ui/src/constants/PageHeaders.constant.ts | 5 +- .../ui/src/locale/languages/de-de.json | 10 +- .../ui/src/locale/languages/en-us.json | 10 +- .../ui/src/locale/languages/es-es.json | 10 +- .../ui/src/locale/languages/fr-fr.json | 10 +- .../ui/src/locale/languages/gl-es.json | 10 +- .../ui/src/locale/languages/he-he.json | 10 +- .../ui/src/locale/languages/ja-jp.json | 10 +- .../ui/src/locale/languages/ko-kr.json | 10 +- .../ui/src/locale/languages/mr-in.json | 10 +- .../ui/src/locale/languages/nl-nl.json | 10 +- .../ui/src/locale/languages/pr-pr.json | 10 +- .../ui/src/locale/languages/pt-br.json | 10 +- .../ui/src/locale/languages/pt-pt.json | 10 +- .../ui/src/locale/languages/ru-ru.json | 10 +- .../ui/src/locale/languages/th-th.json | 10 +- .../ui/src/locale/languages/zh-cn.json | 10 +- .../ForgotPassword.component.tsx | 2 + .../ForgotPassword/ForgotPassword.test.tsx | 4 + .../src/pages/LoginPage/SignInPage.test.tsx | 4 + .../ui/src/pages/LoginPage/SignInPage.tsx | 246 ++++++++-------- .../ResetPassword/ResetPassword.component.tsx | 2 + .../ResetPassword/ResetPassword.test.tsx | 4 + .../pages/SignUp/BasicSignup.component.tsx | 268 +++++++++--------- .../ui/src/pages/SignUp/SignUpPage.tsx | 4 +- .../BrandClassBase.ts} | 18 +- .../ui/src/utils/GlobalSettingsClassBase.ts | 21 +- 34 files changed, 453 insertions(+), 342 deletions(-) rename openmetadata-ui/src/main/resources/ui/src/utils/{BrandImage/BrandImageClassBase.ts => BrandData/BrandClassBase.ts} (71%) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Auth/AppAuthenticators/OidcAuthenticator.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Auth/AppAuthenticators/OidcAuthenticator.test.tsx index 67d0360e799..91dd3f98fff 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Auth/AppAuthenticators/OidcAuthenticator.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Auth/AppAuthenticators/OidcAuthenticator.test.tsx @@ -48,6 +48,13 @@ jest.mock('react-router-dom', () => ({ }), })); +jest.mock('react-helmet-async', () => ({ + HelmetProvider: ({ children }: { children: React.ReactNode }) => ( + <>{children} + ), + Helmet: ({ children }: { children: React.ReactNode }) => <>{children}, +})); + describe('OidcAuthenticator - Silent SignIn Tests', () => { const mockUpdateAxiosInterceptors = jest.fn(); const mockTokenServiceInstance = { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewAlert/WhatsNewAlert.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewAlert/WhatsNewAlert.component.tsx index 122bcd3bd05..45b261b06fb 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewAlert/WhatsNewAlert.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewAlert/WhatsNewAlert.component.tsx @@ -20,6 +20,7 @@ import { ReactComponent as PlayIcon } from '../../../../assets/svg/ic-play-butto import { BLACK_COLOR, ROUTES } from '../../../../constants/constants'; import { useAuth } from '../../../../hooks/authHooks'; import useCustomLocation from '../../../../hooks/useCustomLocation/useCustomLocation'; +import brandClassBase from '../../../../utils/BrandData/BrandClassBase'; import { getReleaseVersionExpiry } from '../../../../utils/WhatsNewModal.util'; import { COOKIE_VERSION, WHATS_NEW } from '../whatsNewData'; import WhatsNewModal from '../WhatsNewModal'; @@ -76,6 +77,10 @@ const WhatsNewAlert = () => { }); }, [isFirstTimeUser]); + const title = useMemo(() => { + return brandClassBase.getPageTitle(); + }, []); + return ( <> {showWhatsNew.alert && isHomePage && ( @@ -85,7 +90,9 @@ const WhatsNewAlert = () => { - {t('label.open-metadata-updated')} + {t('label.brand-updated', { + brandName: title, + })} - - {loginError && ( -
-
-
- -
-

- {loginError} -

-
-
- )} - {!isAuthProviderLDAP && ( - <> -
- - {t('label.forgot-password')} - -
- {authConfig?.enableSelfSignup && ( - <> - - - {t('label.or-lowercase')} - - + form={form} + layout="vertical" + validateMessages={VALIDATION_MESSAGES} + onFinish={handleSubmit}> + + + + + + -
- - {t('message.new-to-the-platform')} - - + + + {loginError && ( +
+
+
+
- - )} - - )} -
- ) : ( -
{getSignInButton()}
- )} -
- - -
- Login Background -
+

+ {loginError} +

+
+ + )} + {!isAuthProviderLDAP && ( + <> +
+ + {t('label.forgot-password')} + +
+ {authConfig?.enableSelfSignup && ( + <> + + + {t('label.or-lowercase')} + + - - - +
+ + {t('message.new-to-the-platform')} + + +
+ + )} + + )} + + ) : ( +
{getSignInButton()}
+ )} + + + +
+ Login Background +
+ + + + + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ResetPassword/ResetPassword.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ResetPassword/ResetPassword.component.tsx index f32dff2ec9b..b633b069b8a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/ResetPassword/ResetPassword.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/ResetPassword/ResetPassword.component.tsx @@ -19,6 +19,7 @@ import { useTranslation } from 'react-i18next'; import { useHistory } from 'react-router-dom'; import { useBasicAuth } from '../../components/Auth/AuthProviders/BasicAuthProvider'; import BrandImage from '../../components/common/BrandImage/BrandImage'; +import DocumentTitle from '../../components/common/DocumentTitle/DocumentTitle'; import { ROUTES, VALIDATION_MESSAGES } from '../../constants/constants'; import { passwordRegex } from '../../constants/regex.constants'; import { PasswordResetRequest } from '../../generated/auth/passwordResetRequest'; @@ -69,6 +70,7 @@ const ResetPassword = () => { return (
+ { }; }); +jest.mock('../../components/common/DocumentTitle/DocumentTitle', () => { + return jest.fn().mockReturnValue(

DocumentTitle

); +}); + describe('ResetPassword', () => { it('should render correctly', async () => { render(); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/SignUp/BasicSignup.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/SignUp/BasicSignup.component.tsx index 78b45249740..a8af586386e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/SignUp/BasicSignup.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/SignUp/BasicSignup.component.tsx @@ -19,6 +19,7 @@ import { useHistory } from 'react-router-dom'; import loginBG from '../../assets/img/login-bg.png'; import { useBasicAuth } from '../../components/Auth/AuthProviders/BasicAuthProvider'; import BrandImage from '../../components/common/BrandImage/BrandImage'; +import DocumentTitle from '../../components/common/DocumentTitle/DocumentTitle'; import { ROUTES, VALIDATION_MESSAGES } from '../../constants/constants'; import { passwordRegex } from '../../constants/regex.constants'; import { AuthProvider } from '../../generated/settings/settings'; @@ -66,146 +67,151 @@ const BasicSignUp = () => { const handleLogin = () => history.push(ROUTES.SIGNIN); return ( - - -
- - - {t('message.om-description')} - + <> + + + +
+ + + {t('message.om-description')} + - {isAuthProviderBasic ? ( -
-
- - + + - - - + + + - - - - - - - - { - if (isEmpty(password)) { - return Promise.reject( - t('label.please-password-type-first') - ); - } - if (value !== password) { - return Promise.reject(t('label.password-not-match')); - } - - return Promise.resolve(); + name="lastName" + rules={[{ whitespace: true, required: true }]}> + + + + + + - - + { + pattern: passwordRegex, + message: t('message.password-error-message'), + }, + ]}> + + + { + if (isEmpty(password)) { + return Promise.reject({ + message: t('label.please-password-type-first'), + }); + } + if (value !== password) { + return Promise.reject({ + message: t('label.password-not-match'), + }); + } - + return Promise.resolve(); + }, + }, + ]}> + + - - - {t('label.or-lowercase')} - - - -
- - {t('message.already-a-user')} - - -
-
-
- ) : null} -
- - -
- bg-image -
+ + + {t('label.or-lowercase')} + + - - - +
+ + {t('message.already-a-user')} + + +
+ +
+ ) : null} +
+ + + +
+ bg-image +
+ + + + + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/SignUp/SignUpPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/SignUp/SignUpPage.tsx index 9a677ff42e6..82b966cb45a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/SignUp/SignUpPage.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/SignUp/SignUpPage.tsx @@ -32,7 +32,7 @@ import { getNameFromUserData, setUrlPathnameExpiryAfterRoute, } from '../../utils/AuthProvider.util'; -import brandImageClassBase from '../../utils/BrandImage/BrandImageClassBase'; +import brandClassBase from '../../utils/BrandData/BrandClassBase'; import { getImages, Transi18next } from '../../utils/CommonUtils'; import { showErrorToast } from '../../utils/ToastUtils'; @@ -52,7 +52,7 @@ const SignUp = () => { } = useApplicationStore(); const [loading, setLoading] = useState(false); - const OMDLogo = useMemo(() => brandImageClassBase.getMonogram().svg, []); + const OMDLogo = useMemo(() => brandClassBase.getMonogram().svg, []); const handleCreateNewUser: FormProps['onFinish'] = async (data) => { setLoading(true); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/BrandImage/BrandImageClassBase.ts b/openmetadata-ui/src/main/resources/ui/src/utils/BrandData/BrandClassBase.ts similarity index 71% rename from openmetadata-ui/src/main/resources/ui/src/utils/BrandImage/BrandImageClassBase.ts rename to openmetadata-ui/src/main/resources/ui/src/utils/BrandData/BrandClassBase.ts index dacbeece9ef..4bbe34c05af 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/BrandImage/BrandImageClassBase.ts +++ b/openmetadata-ui/src/main/resources/ui/src/utils/BrandData/BrandClassBase.ts @@ -10,12 +10,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { t } from 'i18next'; +import WelcomeScreenSrc from '../../assets/img/welcome-screen.png'; import MonogramSrc, { ReactComponent as Monogram, } from '../../assets/svg/logo-monogram.svg'; import LogoSrc, { ReactComponent as Logo } from '../../assets/svg/logo.svg'; -class BrandImageClassBase { +class BrandClassBase { public getMonogram() { return { src: MonogramSrc, svg: Monogram }; } @@ -23,9 +25,17 @@ class BrandImageClassBase { public getLogo() { return { src: LogoSrc, svg: Logo }; } + + public getPageTitle() { + return t('label.open-metadata'); + } + + public getWelcomeScreenImg() { + return WelcomeScreenSrc; + } } -const brandImageClassBase = new BrandImageClassBase(); +const brandClassBase = new BrandClassBase(); -export default brandImageClassBase; -export { BrandImageClassBase }; +export default brandClassBase; +export { BrandClassBase }; diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/GlobalSettingsClassBase.ts b/openmetadata-ui/src/main/resources/ui/src/utils/GlobalSettingsClassBase.ts index 32752d6d491..36e3a520e3a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/GlobalSettingsClassBase.ts +++ b/openmetadata-ui/src/main/resources/ui/src/utils/GlobalSettingsClassBase.ts @@ -62,6 +62,7 @@ import { UIPermission, } from '../context/PermissionProvider/PermissionProvider.interface'; import { userPermissions } from '../utils/PermissionsUtils'; +import brandClassBase from './BrandData/BrandClassBase'; class GlobalSettingsClassBase { settingCategories: Record = { @@ -109,6 +110,14 @@ class GlobalSettingsClassBase { this.settingCategories = categories; } + public getServiceIcon() { + return ServiceIcon; + } + + public getPreferenceIcon() { + return OpenMetadataIcon; + } + /** * getSidebarItems */ @@ -120,7 +129,7 @@ class GlobalSettingsClassBase { { category: t('label.service-plural'), key: GlobalSettingsMenuCategory.SERVICES, - icon: ServiceIcon, + icon: this.getServiceIcon(), description: t('message.service-description'), items: [ { @@ -243,7 +252,9 @@ class GlobalSettingsClassBase { category: t('label.team-user-management'), key: GlobalSettingsMenuCategory.MEMBERS, icon: ManagementIcon, - description: t('message.member-description'), + description: t('message.team-member-management-description', { + brandName: brandClassBase.getPageTitle(), + }), items: [ { label: t('label.team-plural'), @@ -302,8 +313,10 @@ class GlobalSettingsClassBase { { category: t('label.preference-plural'), key: GlobalSettingsMenuCategory.PREFERENCES, - icon: OpenMetadataIcon, - description: t('message.customize-open-metadata-description'), + icon: this.getPreferenceIcon(), + description: t('message.customize-brand-description', { + brandName: brandClassBase.getPageTitle(), + }), items: [ { label: t('label.theme'),