revamp(ui): whats new alert box popup (#13835)

* revamp whats new popup alert box

* changes as per comments

* added await for whats-new-alert in cypress and slow down gif loader

* changes as per comments

* minor changes

openmetadata-ui/src/main/resources/ui/.licenseheaderignore

@@ -23,6 +23,7 @@
 /docker
 
 # Assets
+*.gif
 *.svg
 *.png
 *.ico

openmetadata-ui/src/main/resources/ui/.prettierignore

@@ -50,6 +50,7 @@ src/generated/
 
 
 # Assets
+*.gif
 *.svg
 *.png
 *.ico

openmetadata-ui/src/main/resources/ui/cypress/support/commands.js

@@ -81,7 +81,9 @@ Cypress.Commands.add('goToHomePage', (doNotNavigate) => {
   interceptURL('GET', '/api/v1/feed*', 'feed');
   interceptURL('GET', '/api/v1/users/*?fields=*', 'userProfile');
   !doNotNavigate && cy.visit('/');
-  cy.get('[data-testid="whats-new-alert-card"]').should('be.visible');
+  cy.get('[data-testid="whats-new-alert-card"]', {
+    timeout: 500, // need to add timeout as alert pop-oup card has an 1s of animation to appear on screen
+  }).should('be.visible');
   cy.get('[data-testid="close-whats-new-alert"]').click();
   cy.get('[data-testid="whats-new-alert-card"]').should('not.exist');
   //   verifyResponseStatusCode('@feed', 200);

openmetadata-ui/src/main/resources/ui/src/@types/gif.d.ts

@@ -0,0 +1,15 @@
+/*
+ *  Copyright 2022 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.
+ */
+
+// Module declaration to allow importing PNG files
+declare module '*.gif';

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx

@@ -376,7 +376,7 @@ export const ActivityFeedTab = ({
               }}>
               {' '}
               <CheckIcon className="m-r-xss" width={14} /> {closedTasks}{' '}
-              {t('label.close')}
+              {t('label.closed')}
             </Typography.Text>
           </div>
         )}

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

@@ -10,16 +10,18 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Affix, Button, Card, Space, Typography } from 'antd';
+import { Affix, Button, Card, Col, Row, Space, Typography } from 'antd';
 import { CookieStorage } from 'cookie-storage';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
+import { Link, 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 RocketIcon } from '../../../../assets/svg/rocket.svg';
-import { ROUTES } from '../../../../constants/constants';
+import { ReactComponent as RightArrowIcon } from '../../../../assets/svg/ic-arrow-right-full.svg';
+import { ReactComponent as PlayIcon } from '../../../../assets/svg/ic-play-button.svg';
+import { ReactComponent as StarIcon } from '../../../../assets/svg/ic-star.svg';
+import { BLACK_COLOR, ROUTES } from '../../../../constants/constants';
 import { useAuth } from '../../../../hooks/authHooks';
-import { Transi18next } from '../../../../utils/CommonUtils';
 import { COOKIE_VERSION, LATEST_VERSION_ID, WHATS_NEW } from '../whatsNewData';
 import WhatsNewModal from '../WhatsNewModal';
 import '../WhatsNewModal.styles.less';
@@ -45,73 +47,96 @@ const WhatsNewAlert = () => {
     [location.pathname]
   );
 
+  const onAlertCardClick = useCallback(
+    () =>
+      setShowWhatsNew({
+        alert: false,
+        modal: true,
+      }),
+    []
+  );
+
+  const onModalCancel = useCallback(
+    () =>
+      setShowWhatsNew({
+        alert: false,
+        modal: false,
+      }),
+    []
+  );
+
+  const handleCancel = useCallback(() => {
+    cookieStorage.setItem(COOKIE_VERSION, 'true', {
+      expires: getReleaseVersionExpiry(),
+    });
+    onModalCancel();
+  }, [cookieStorage, onModalCancel, getReleaseVersionExpiry]);
+
   useEffect(() => {
     setShowWhatsNew({
       alert: cookieStorage.getItem(COOKIE_VERSION) !== 'true',
       modal: false,
     });
   }, [isFirstTimeUser]);
 
-  const onAlertCardClick = () => {
-    setShowWhatsNew({
-      alert: false,
-      modal: true,
-    });
-  };
-  const onModalCancel = () => {
-    setShowWhatsNew({
-      alert: false,
-      modal: false,
-    });
-  };
-  const handleCancel = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    cookieStorage.setItem(COOKIE_VERSION, 'true', {
-      expires: getReleaseVersionExpiry(),
-    });
-    onModalCancel();
-  };
-
   return (
     <>
       {showWhatsNew.alert && isHomePage && (
         <Affix className="whats-new-alert-container">
-          <Card
-            className="cursor-pointer"
-            data-testid="whats-new-alert-card"
-            onClick={onAlertCardClick}>
+          <Card className="cursor-pointer" data-testid="whats-new-alert-card">
             <Space align="start" className="d-flex justify-between">
-              <Space size={14}>
-                <RocketIcon color="#fff" height={42} width={42} />
-                <Typography.Text className="whats-new-alert-header">
-                  <Transi18next
-                    i18nKey="message.version-released-try-now"
-                    renderElement={<div />}
-                    values={{
-                      version: latestVersion.version,
-                    }}
-                  />
-                </Typography.Text>
-              </Space>
+              <Typography.Text className="whats-new-alert-header">
+                {t('label.open-metadata-updated')}
+              </Typography.Text>
               <Button
                 className="flex-center m--t-xss"
                 data-testid="close-whats-new-alert"
-                icon={<CloseIcon color="#fff" height={12} width={12} />}
+                icon={<CloseIcon color={BLACK_COLOR} height={12} width={12} />}
                 type="text"
                 onClick={handleCancel}
               />
             </Space>
 
-            {latestVersion?.shortSummary ? (
-              <Typography.Paragraph
-                className="whats-new-alert-description"
-                style={{ marginBottom: 0, marginTop: '8px' }}>
-                {latestVersion?.shortSummary}
-              </Typography.Paragraph>
-            ) : (
-              ''
-            )}
+            <Row className="m-t-sm" gutter={[0, 12]}>
+              <Col className="whats-new-alert-content" span={24}>
+                <Space align="center" size={12} onClick={onAlertCardClick}>
+                  <div className="whats-new-alert-content-icon-container">
+                    <PlayIcon className="whats-new-alert-content-icon" />
+                  </div>
+
+                  <Typography.Text className="whats-new-alert-sub-header">
+                    {t('label.whats-new-version', {
+                      version: latestVersion.version,
+                    })}
+                  </Typography.Text>
+
+                  <RightArrowIcon className="whats-new-alert-content-icon-arrow" />
+                </Space>
+              </Col>
+
+              <Col className="whats-new-alert-content" span={24}>
+                <Space align="center" size={12}>
+                  <div className="whats-new-alert-content-icon-container">
+                    <StarIcon className="whats-new-alert-content-icon" />
+                  </div>
+                  <Link
+                    className="whats-new-alert-sub-header"
+                    component={Typography.Link}
+                    target="_blank"
+                    to={{
+                      pathname: 'https://github.com/open-metadata/OpenMetadata',
+                    }}>
+                    {t('label.star-open-metadata')}
+                  </Link>
+
+                  <RightArrowIcon className="whats-new-alert-content-icon-arrow" />
+                </Space>
+              </Col>
+            </Row>
+
+            <div className="update-icon-container">
+              <img className="update-icon" src={UpdateLoaderGif} />
+            </div>
           </Card>
         </Affix>
       )}