ui: importing brand logo with classBase approach (#13582)

openmetadata-ui/src/main/resources/ui/src/components/common/BrandImage/BrandImage.tsx

@@ -10,10 +10,9 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
-import MonoGram from '../../../assets/svg/logo-monogram.svg';
-import Logo from '../../../assets/svg/logo.svg';
 import { useApplicationConfigContext } from '../../../components/ApplicationConfigProvider/ApplicationConfigProvider';
+import brandImageClassBase from '../../../utils/BrandImage/BrandImageClassBase';
 
 interface BrandImageProps {
   dataTestId?: string;
@@ -32,6 +31,14 @@ const BrandImage: FC<BrandImageProps> = ({
   className,
   isMonoGram = false,
 }) => {
+  const { MonoGram, Logo } = useMemo(
+    () => ({
+      MonoGram: brandImageClassBase.getMonogram().src,
+      Logo: brandImageClassBase.getLogo().src,
+    }),
+    []
+  );
+
   const { customLogoUrlPath = '', customMonogramUrlPath = '' } =
     useApplicationConfigContext();
 

openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx

@@ -38,7 +38,6 @@ import AppState from '../../AppState';
 import { ReactComponent as DropDownIcon } from '../../assets/svg/DropDown.svg';
 import { ReactComponent as DomainIcon } from '../../assets/svg/ic-domain.svg';
 import { ReactComponent as Help } from '../../assets/svg/ic-help.svg';
-import Logo from '../../assets/svg/logo-monogram.svg';
 import { ActivityFeedTabs } from '../../components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface';
 import SearchOptions from '../../components/AppBar/SearchOptions';
 import Suggestions from '../../components/AppBar/Suggestions';
@@ -52,6 +51,7 @@ import {
   SOCKET_EVENTS,
 } from '../../constants/constants';
 import { EntityTabs, EntityType } from '../../enums/entity.enum';
+import brandImageClassBase from '../../utils/BrandImage/BrandImageClassBase';
 import {
   hasNotificationPermission,
   shouldRequestPermission,
@@ -98,6 +98,7 @@ const NavBar = ({
 }: NavBarProps) => {
   const { searchCriteria, updateSearchCriteria } = useGlobalSearchProvider();
   const searchContainerRef = useRef<HTMLDivElement>(null);
+  const Logo = useMemo(() => brandImageClassBase.getMonogram().src, []);
 
   const history = useHistory();
   const { domainOptions, activeDomain, updateActiveDomain } =

openmetadata-ui/src/main/resources/ui/src/pages/SignUp/SignUpPage.tsx

@@ -14,11 +14,10 @@
 import { Button, Card, Form, FormProps, Input, Space, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { CookieStorage } from 'cookie-storage';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import appState from '../../AppState';
-import { ReactComponent as OMDLogo } from '../../assets/svg/logo-monogram.svg';
 import { useAuthContext } from '../../components/authentication/auth-provider/AuthProvider';
 import { UserProfile } from '../../components/authentication/auth-provider/AuthProvider.interface';
 import TeamsSelectable from '../../components/TeamsSelectable/TeamsSelectable';
@@ -29,6 +28,7 @@ import {
 } from '../../constants/constants';
 import { createUser } from '../../rest/userAPI';
 import { getNameFromUserData } from '../../utils/AuthProvider.util';
+import brandImageClassBase from '../../utils/BrandImage/BrandImageClassBase';
 import { getImages, Transi18next } from '../../utils/CommonUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 
@@ -45,6 +45,7 @@ const SignUp = () => {
   } = useAuthContext();
 
   const [loading, setLoading] = useState<boolean>(false);
+  const OMDLogo = useMemo(() => brandImageClassBase.getMonogram().svg, []);
 
   const handleCreateNewUser: FormProps['onFinish'] = async (data) => {
     setLoading(true);

openmetadata-ui/src/main/resources/ui/src/utils/BrandImage/BrandImageClassBase.ts

@@ -0,0 +1,31 @@
+/*
+ *  Copyright 2023 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 MonogramSrc, {
+  ReactComponent as Monogram,
+} from '../../assets/svg/logo-monogram.svg';
+import LogoSrc, { ReactComponent as Logo } from '../../assets/svg/logo.svg';
+
+class BrandImageClassBase {
+  public getMonogram() {
+    return { src: MonogramSrc, svg: Monogram };
+  }
+
+  public getLogo() {
+    return { src: LogoSrc, svg: Logo };
+  }
+}
+
+const brandImageClassBase = new BrandImageClassBase();
+
+export default brandImageClassBase;
+export { BrandImageClassBase };