MINOR : change whats new modal ui and added timer for github modal to appear (#14993)

* change whats new modal ui and added timer for github modal to appear

* remove un-used gif file

* added constant for milli seconds

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

@@ -20,7 +20,12 @@ import { Link, useLocation } 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';
-import { BLACK_COLOR, ROUTES, STAR_OMD_USER } from '../../constants/constants';
+import {
+  BLACK_COLOR,
+  ROUTES,
+  STAR_OMD_USER,
+  TWO_MINUTE_IN_MILLISECOND,
+} from '../../constants/constants';
 import { OMD_REPOSITORY_LINK } from '../../constants/docs.constants';
 import { getRepositoryData } from '../../rest/commonAPI';
 import { getReleaseVersionExpiry } from '../../utils/WhatsNewModal.util';
@@ -71,28 +76,40 @@ const GithubStarCard = () => {
     }
   };
 
-  const updateGithubPopup = useCallback(
-    (show: boolean) => {
-      if (loggedInUserName && show) {
-        fetchOpenMetaData();
-        cookieStorage.setItem(userCookieName, 'true', {
-          expires: getReleaseVersionExpiry(),
-        });
-      }
-      setShowGithubStarPopup(show);
-    },
-    [
-      loggedInUserName,
-      usernameExistsInCookie,
-      userCookieName,
-      getReleaseVersionExpiry,
-    ]
-  );
-
   const handleCancel = useCallback(() => {
     setShowGithubStarPopup(false);
   }, []);
 
+  const handleClosePopup = useCallback(() => {
+    cookieStorage.setItem(userCookieName, 'true', {
+      expires: getReleaseVersionExpiry(),
+    });
+    handleCancel();
+  }, [userCookieName, handleCancel]);
+
+  const githubPopup = useCallback(
+    (show: boolean) => {
+      if (loggedInUserName && show) {
+        fetchOpenMetaData();
+      }
+      setShowGithubStarPopup(show);
+    },
+    [loggedInUserName, userCookieName]
+  );
+
+  const updateGithubPopup = useCallback(
+    (show: boolean) => {
+      if (isWhatNewAlertVisible) {
+        setTimeout(() => {
+          githubPopup(show);
+        }, TWO_MINUTE_IN_MILLISECOND);
+      } else {
+        githubPopup(show);
+      }
+    },
+    [isWhatNewAlertVisible, githubPopup]
+  );
+
   useEffect(() => {
     updateGithubPopup(!usernameExistsInCookie);
 
@@ -122,7 +139,7 @@ const GithubStarCard = () => {
             data-testid="close-whats-new-alert"
             icon={<CloseIcon color={BLACK_COLOR} height={12} width={12} />}
             type="text"
-            onClick={handleCancel}
+            onClick={handleClosePopup}
           />
         </Space>
 

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

@@ -15,7 +15,6 @@ import { CookieStorage } from 'cookie-storage';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
-import UpdateLoaderGif from '../../../../assets/gif/whats-new-loader.gif';
 import { ReactComponent as CloseIcon } from '../../../../assets/svg/close.svg';
 import { ReactComponent as RightArrowIcon } from '../../../../assets/svg/ic-arrow-right-full.svg';
 import { ReactComponent as PlayIcon } from '../../../../assets/svg/ic-play-button.svg';
@@ -112,10 +111,6 @@ const WhatsNewAlert = () => {
                 </Space>
               </Col>
             </Row>
-
-            <div className="update-icon-container">
-              <img className="update-icon" src={UpdateLoaderGif} />
-            </div>
           </Card>
         </Affix>
       )}

openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/whats-new-modal.less

@@ -59,11 +59,6 @@
     padding: 12px;
     border-radius: 14px;
     border: 1px solid @primary-color;
-    background: linear-gradient(
-      0.9turn,
-      rgba(9, 80, 197, 0.2),
-      rgba(255, 255, 255) 40%
-    );
     overflow: hidden;
   }
 
@@ -115,19 +110,6 @@
       }
     }
   }
-
-  .update-icon-container {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    transform: translate(35%, 55%) scaleX(-1);
-    opacity: 0.1;
-
-    .update-icon {
-      transform: rotate(180deg);
-      width: 160px;
-    }
-  }
 }
 
 .feature-carousal-container {

openmetadata-ui/src/main/resources/ui/src/constants/constants.ts

@@ -68,6 +68,7 @@ export const DESCRIPTION_MAX_PREVIEW_CHARACTERS = 350;
 export const MAX_CHAR_LIMIT_ENTITY_SUMMARY = 130;
 export const SMALL_TABLE_LOADER_SIZE = 3;
 export const ONE_MINUTE_IN_MILLISECOND = 60000;
+export const TWO_MINUTE_IN_MILLISECOND = 120000;
 export const LOCALSTORAGE_RECENTLY_VIEWED = `recentlyViewedData_${COOKIE_VERSION}`;
 export const LOCALSTORAGE_RECENTLY_SEARCHED = `recentlySearchedData_${COOKIE_VERSION}`;
 export const LOCALSTORAGE_USER_PROFILES = 'userProfiles';