revamp(ui): whats new alert box popup

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/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/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 { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
+import UpdateIcon from '../../../../assets/img/update.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';
@@ -77,32 +79,57 @@ const WhatsNewAlert = () => {
     <>
       {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>
 
+            <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.what-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>
+
             {latestVersion?.shortSummary ? (
               <Typography.Paragraph
                 className="whats-new-alert-description"
@@ -112,6 +139,10 @@ const WhatsNewAlert = () => {
             ) : (
               ''
             )}
+
+            <div className="update-icon-container">
+              <img className="update-icon" src={UpdateIcon} />
+            </div>
           </Card>
         </Affix>
       )}

openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewModal.styles.less

@@ -37,27 +37,101 @@
   background: @white;
 }
 
+@keyframes scrollIn {
+  to {
+    bottom: 24px;
+  }
+}
+
 .whats-new-alert-container {
   position: fixed;
-  bottom: 24px;
+  bottom: -100%;
   right: 30px;
   z-index: 1;
+  background: @white;
+  animation: scrollIn 1s normal forwards ease-in-out;
+  animation-delay: 2s;
 
   .ant-card {
+    position: relative;
     width: 338px;
-  }
-  .ant-card-body {
-    background-color: @primary-color;
-    border-radius: @border-radius-base;
+    box-shadow: 0 0 20px rgba(117, 117, 117, 0.3);
+    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;
   }
 
   .whats-new-alert-header {
-    color: @white;
+    color: @primary-color;
     font-weight: 600;
     font-size: 16px;
   }
-  .whats-new-alert-description {
-    color: @white;
+
+  .whats-new-alert-content {
+    .whats-new-alert-sub-header,
+    .show-more,
+    a[href]:not(.button-comp):not(.no-underline):not(.link-text-info),
+    .link-text {
+      color: @black;
+      font-weight: 500;
+      font-size: 12px;
+    }
+
+    .whats-new-alert-content-icon-container {
+      padding: 0 4px;
+      border-radius: 4px;
+
+      .whats-new-alert-content-icon {
+        color: @primary-color;
+        vertical-align: middle;
+        width: 15px;
+        height: 15px;
+      }
+    }
+
+    .whats-new-alert-content-icon-arrow {
+      display: none;
+      width: 16px;
+      height: 16px;
+      color: @text-grey-muted;
+    }
+
+    &:hover {
+      .whats-new-alert-sub-header,
+      a[href]:not(.button-comp):not(.no-underline):not(.link-text-info),
+      .link-text {
+        text-decoration: underline;
+        color: @primary-color;
+      }
+
+      .whats-new-alert-content-icon-container {
+        background-color: rgba(9, 80, 197, 0.1);
+        transition: 0.3s ease-in-out;
+      }
+
+      .whats-new-alert-content-icon-arrow {
+        display: block;
+      }
+    }
+  }
+
+  .update-icon-container {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    transform: translate(35%, 45%) scaleX(-1);
+    opacity: 0.1;
+
+    .update-icon {
+      transform: rotate(180deg);
+      width: 160px;
+    }
   }
 }
 

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -689,6 +689,7 @@
     "open-lowercase": "open",
     "open-metadata": "OpenMetadata",
     "open-metadata-logo": "OpenMetadata Logo",
+    "open-metadata-updated": "OpenMetadata Updated !",
     "open-metadata-url": "OpenMetadata URL",
     "operation-plural": "Operations",
     "option": "Option",
@@ -940,6 +941,7 @@
     "sql-uppercase-query": "SQL Query",
     "sso-uppercase": "SSO",
     "stage-file-location": "Stage File Location",
+    "star-open-metadata": "Star OpenMetadata",
     "star-us-on-github": "Star us on Github",
     "start-date-time-zone": "Start Date: ({{timeZone}})",
     "start-elasticsearch-docker": "Start Elasticsearch Docker",
@@ -1132,6 +1134,7 @@
     "wednesday": "Wednesday",
     "week": "Week",
     "weekly-usage": "Weekly Usage",
+    "what-new-version": " What's New ({{version}})",
     "whats-new": "What's New",
     "widget": "Widget",
     "widget-lowercase": "widget",