Fix(ui) : Release dialog flash (#22776)

* fixed release dialog flash

* optimized approach to remove release dialog flash

* fixed sonar

* fixed github redirect

* updated tests

openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewAlert/WhatsNewAlert.component.tsx

@@ -18,7 +18,6 @@ import { useTranslation } from 'react-i18next';
 import { ReactComponent as CloseIcon } from '../../../../assets/svg/close.svg';
 import { ReactComponent as RocketIcon } from '../../../../assets/svg/rocket.svg';
 import { ROUTES, VERSION } from '../../../../constants/constants';
-import { useAuth } from '../../../../hooks/authHooks';
 import { useApplicationStore } from '../../../../hooks/useApplicationStore';
 import useCustomLocation from '../../../../hooks/useCustomLocation/useCustomLocation';
 import brandClassBase from '../../../../utils/BrandData/BrandClassBase';
@@ -31,13 +30,14 @@ const cookieStorage = new CookieStorage();
 const WhatsNewAlert = () => {
   const { t } = useTranslation();
   const location = useCustomLocation();
-  const { isFirstTimeUser } = useAuth();
   const { appVersion } = useApplicationStore();
   const [showWhatsNew, setShowWhatsNew] = useState({
     alert: false,
     modal: false,
   });
-  const cookieKey = getVersionedStorageKey(VERSION, appVersion);
+  const cookieKey = useMemo(() => {
+    return appVersion ? getVersionedStorageKey(VERSION, appVersion) : null;
+  }, [appVersion]);
 
   const { releaseLink, blogLink, isMajorRelease } = useMemo(() => {
     return {
@@ -63,18 +63,22 @@ const WhatsNewAlert = () => {
   );
 
   const handleCancel = useCallback(() => {
-    cookieStorage.setItem(cookieKey, 'true', {
-      expires: getReleaseVersionExpiry(),
-    });
+    if (cookieKey) {
+      cookieStorage.setItem(cookieKey, 'true', {
+        expires: getReleaseVersionExpiry(),
+      });
+    }
     onModalCancel();
   }, [cookieStorage, onModalCancel, getReleaseVersionExpiry, cookieKey]);
 
   useEffect(() => {
-    setShowWhatsNew({
-      alert: cookieStorage.getItem(cookieKey) !== 'true',
-      modal: false,
-    });
-  }, [isFirstTimeUser, cookieKey]);
+    if (cookieKey) {
+      setShowWhatsNew((prev) => ({
+        ...prev,
+        alert: cookieStorage.getItem(cookieKey) !== 'true',
+      }));
+    }
+  }, [cookieKey]);
 
   return (
     <>

openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewAlert/WhatsNewAlert.test.tsx

@@ -209,9 +209,10 @@ describe('WhatsNewAlert', () => {
       appVersion: undefined,
     }));
 
-    const { findByText } = render(<WhatsNewAlert />);
+    const { queryByTestId } = render(<WhatsNewAlert />);
 
-    expect(await findByText('Version')).toBeInTheDocument();
+    // Should not render the alert when appVersion is undefined
+    expect(queryByTestId('whats-new-alert-card')).not.toBeInTheDocument();
   });
 
   it('should call brandClassBase methods with correct version', () => {

openmetadata-ui/src/main/resources/ui/src/components/MyData/GithubStarCard/GithubStarCard.component.tsx

@@ -16,7 +16,6 @@ import ButtonGroup from 'antd/lib/button/button-group';
 import { CookieStorage } from 'cookie-storage';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
 import { ReactComponent as CloseIcon } from '../../../assets/svg/close.svg';
 import { ReactComponent as StarGithubIcon } from '../../../assets/svg/ic-star-github.svg';
 import { ReactComponent as StarIcon } from '../../../assets/svg/ic-start-filled-github.svg';
@@ -150,23 +149,15 @@ const GithubStarCard = () => {
         </Typography.Paragraph>
 
         <ButtonGroup className="github-action-button-group">
-          <Link
-            target="_blank"
-            to={{
-              pathname: OMD_REPOSITORY_LINK,
-            }}>
+          <Typography.Link href={OMD_REPOSITORY_LINK} target="_blank">
             <Button
               className="github-star-button github-modal-action-button"
               icon={<Icon component={StarGithubIcon} size={12} />}>
               {t('label.star')}
             </Button>
-          </Link>
+          </Typography.Link>
 
-          <Link
-            target="_blank"
-            to={{
-              pathname: OMD_REPOSITORY_LINK,
-            }}>
+          <Typography.Link href={OMD_REPOSITORY_LINK} target="_blank">
             <Button className="github-modal-action-button">
               {isLoading ? (
                 <div data-testid="skeleton-loader">
@@ -176,7 +167,7 @@ const GithubStarCard = () => {
                 starredCount
               )}
             </Button>
-          </Link>
+          </Typography.Link>
         </ButtonGroup>
       </Card>
     </Affix>

openmetadata-ui/src/main/resources/ui/src/components/MyData/GithubStarCard/GithubStarCard.test.tsx

@@ -16,20 +16,10 @@ import { TWO_MINUTE_IN_MILLISECOND } from '../../../constants/constants';
 import useCustomLocation from '../../../hooks/useCustomLocation/useCustomLocation';
 import GithubStarCard from './GithubStarCard.component';
 
-const mockLinkButton = jest.fn();
-
 jest.mock('../../../hooks/useCustomLocation/useCustomLocation', () => {
   return jest.fn().mockImplementation(() => ({ pathname: '/my-data' }));
 });
 
-jest.mock('react-router-dom', () => ({
-  Link: jest.fn().mockImplementation(({ children, ...rest }) => (
-    <a {...rest} onClick={mockLinkButton}>
-      {children}
-    </a>
-  )),
-}));
-
 jest.mock('../../../utils/WhatsNewModal.util', () => ({
   getReleaseVersionExpiry: jest.fn().mockImplementation(() => new Date()),
 }));
@@ -72,21 +62,26 @@ describe('GithubStarCard', () => {
     expect(screen.getByRole('button', { name: '10' })).toBeInTheDocument();
   });
 
-  it('check redirect buttons', async () => {
+  it('check redirect buttons have correct links', async () => {
     render(<GithubStarCard />);
     jest.advanceTimersByTime(TWO_MINUTE_IN_MILLISECOND);
 
-    const starTextButton = await screen.findByRole('button', {
-      name: 'label.star',
-    });
+    await screen.findByTestId('github-star-popup-card');
 
-    fireEvent.click(starTextButton);
+    // Check that both links point to the correct GitHub repository
+    const links = screen.getAllByRole('link');
 
-    const countButton = screen.getByRole('button', { name: '10' });
-
-    fireEvent.click(countButton);
-
-    expect(mockLinkButton).toHaveBeenCalledTimes(2);
+    expect(links).toHaveLength(2);
+    expect(links[0]).toHaveAttribute(
+      'href',
+      'https://star-us.open-metadata.org/'
+    );
+    expect(links[0]).toHaveAttribute('target', '_blank');
+    expect(links[1]).toHaveAttribute(
+      'href',
+      'https://star-us.open-metadata.org/'
+    );
+    expect(links[1]).toHaveAttribute('target', '_blank');
   });
 
   it('should close the alert when the close button is clicked', async () => {