Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Nov 4, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
/docker

# Assets
*.gif
*.svg
*.png
*.ico
Expand Down
1 change: 1 addition & 0 deletions openmetadata-ui/src/main/resources/ui/.prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ src/generated/


# Assets
*.gif
*.svg
*.png
*.ico
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
15 changes: 15 additions & 0 deletions openmetadata-ui/src/main/resources/ui/src/@types/gif.d.ts
Original file line number Diff line number Diff line change
@@ -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';
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

This file was deleted.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -373,7 +373,7 @@ export const ActivityFeedTab = ({
}}>
{' '}
<CheckIcon className="m-r-xss" width={14} /> {closedTasks}{' '}
{t('label.close')}
{t('label.closed')}
</Typography.Text>
</div>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
)}
Expand Down
Loading
Loading