diff --git a/openmetadata-ui/src/main/resources/ui/cypress/common/common.js b/openmetadata-ui/src/main/resources/ui/cypress/common/common.js index 3c0ad49a877..9fa493abaca 100644 --- a/openmetadata-ui/src/main/resources/ui/cypress/common/common.js +++ b/openmetadata-ui/src/main/resources/ui/cypress/common/common.js @@ -979,6 +979,10 @@ export const login = (username, password) => { cy.visit('/'); cy.get('[id="email"]').should('be.visible').clear().type(username); cy.get('[id="password"]').should('be.visible').clear().type(password); + + // Don't want to show any popup in the tests + cy.setCookie(`STAR_OMD_USER_${username.split('@')[0]}`, 'true'); + cy.get('.ant-btn').contains('Login').should('be.visible').click(); }; diff --git a/openmetadata-ui/src/main/resources/ui/cypress/support/commands.js b/openmetadata-ui/src/main/resources/ui/cypress/support/commands.js index 617f35eeb4e..0c43150d0f9 100644 --- a/openmetadata-ui/src/main/resources/ui/cypress/support/commands.js +++ b/openmetadata-ui/src/main/resources/ui/cypress/support/commands.js @@ -120,6 +120,9 @@ Cypress.Commands.add('storeSession', (username, password) => { .click(); verifyResponseStatusCode('@login', 200); cy.url().should('not.eq', `${BASE_URL}/signin`); + + // Don't want to show any popup in the tests + cy.setCookie(`STAR_OMD_USER_admin`, 'true'); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GithubStarCard/GithubStarCard.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GithubStarCard/GithubStarCard.component.tsx new file mode 100644 index 00000000000..4792056c7a6 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/GithubStarCard/GithubStarCard.component.tsx @@ -0,0 +1,153 @@ +/* + * Copyright 2023 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. + */ +import Icon from '@ant-design/icons/lib/components/Icon'; +import { Affix, Button, Card, Skeleton, Space, Typography } from 'antd'; +import ButtonGroup from 'antd/lib/button/button-group'; +import { CookieStorage } from 'cookie-storage'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Link, useLocation } from 'react-router-dom'; +import { ReactComponent as StarGithubIcon } from '../../assets/svg/ic-star-github.svg'; +import { ReactComponent as StarIcon } from '../../assets/svg/ic-start-filled-github.svg'; +import { ROUTES, STAR_OMD_USER } from '../../constants/constants'; +import { OMD_REPOSITORY_LINK } from '../../constants/docs.constants'; +import { getRepositoryData } from '../../rest/commonAPI'; +import { getReleaseVersionExpiry } from '../../utils/WhatsNewModal.util'; +import { useAuthContext } from '../Auth/AuthProviders/AuthProvider'; +import { COOKIE_VERSION } from '../Modals/WhatsNewModal/whatsNewData'; +import './github-star-card.style.less'; + +const cookieStorage = new CookieStorage(); + +const GithubStarCard = () => { + const { t } = useTranslation(); + const location = useLocation(); + const { currentUser } = useAuthContext(); + const [showGithubStarPopup, setShowGithubStarPopup] = useState(false); + const [starredCount, setStarredCount] = useState(0); + const [isLoading, setIsLoading] = useState(true); + + const loggedInUserName = useMemo(() => currentUser?.name, [currentUser]); + + const isWhatNewAlertVisible = useMemo( + () => cookieStorage.getItem(COOKIE_VERSION) !== 'true', + [cookieStorage] + ); + + const userCookieName = useMemo( + () => `${STAR_OMD_USER}_${loggedInUserName}`, + [loggedInUserName] + ); + + const isHomePage = useMemo( + () => location.pathname.includes(ROUTES.MY_DATA), + [location.pathname] + ); + + const usernameExistsInCookie = useMemo( + () => Boolean(cookieStorage.getItem(userCookieName)), + [userCookieName] + ); + + const fetchOpenMetaData = async () => { + try { + const res = await getRepositoryData(); + setStarredCount(res.stargazers_count); + } catch (err) { + // Error + } finally { + setIsLoading(false); + } + }; + + const updateGithubPopup = useCallback( + (show: boolean) => { + if (loggedInUserName && show) { + fetchOpenMetaData(); + cookieStorage.setItem(userCookieName, 'true', { + expires: getReleaseVersionExpiry(), + }); + } + setShowGithubStarPopup(show); + }, + [ + loggedInUserName, + usernameExistsInCookie, + userCookieName, + getReleaseVersionExpiry, + ] + ); + + useEffect(() => { + updateGithubPopup(!usernameExistsInCookie); + + return () => setShowGithubStarPopup(false); + }, [usernameExistsInCookie, updateGithubPopup]); + + return showGithubStarPopup && isHomePage ? ( + + + + + + + {t('label.star-us-on-github')} + + + + + {t('message.star-on-github-description')} + + + + + + + + + + + + + + ) : null; +}; + +export default GithubStarCard; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GithubStarCard/github-star-card.style.less b/openmetadata-ui/src/main/resources/ui/src/components/GithubStarCard/github-star-card.style.less new file mode 100644 index 00000000000..b4589b1c919 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/GithubStarCard/github-star-card.style.less @@ -0,0 +1,101 @@ +/* + * Copyright 2023 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. + */ + +@import (reference) url('../../styles/variables.less'); + +.github-star-popup-card { + border: none; + text-align: center; + position: fixed; + right: 30px; + bottom: -100%; + z-index: 1; + background: #fff; + + .ant-card { + position: relative; + width: 342px; + overflow: hidden; + border-radius: 14px; + box-shadow: @box-shadow-base; + } + + .github-star-icon { + width: 24px; + vertical-align: sub; + color: @yellow-2; + } + + .github-star-popup-header { + color: @primary-color; + font-size: 20px; + font-weight: 500; + } + + .github-star-popup-description { + margin-top: 10px; + color: @text-grey-muted; + font-size: 14px; + font-weight: 400; + } + + .github-action-button-group { + border-radius: 4px; + border: @global-border; + overflow: hidden; + + .github-modal-action-button { + border: none; + + &:hover { + color: initial; + border: none; + } + &:focus { + color: initial; + border: none; + } + } + + .github-star-button { + background: linear-gradient(0.5turn, rgba(0, 0, 0, 0.2), transparent); + border-right: @global-border; + + &:hover { + border-right: @global-border; + } + } + } +} + +.github-star-popup-card-with-alert { + animation: scrollInWithAlert 2s normal forwards ease-in-out; + animation-delay: 1s; +} + +.github-star-popup-card-without-alert { + animation: scrollInWithoutAlert 2s normal forwards ease-in-out; + animation-delay: 1s; +} + +@keyframes scrollInWithAlert { + to { + bottom: 200px; + } +} + +@keyframes scrollInWithoutAlert { + to { + bottom: 24px; + } +} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/GithubStarModal/GithubStarModal.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/GithubStarModal/GithubStarModal.component.tsx deleted file mode 100644 index 0b8e875a7e6..00000000000 --- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/GithubStarModal/GithubStarModal.component.tsx +++ /dev/null @@ -1,168 +0,0 @@ -/* - * Copyright 2023 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. - */ -import { Button, Card, Modal, Skeleton, Typography } from 'antd'; -import { CookieStorage } from 'cookie-storage'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { useTranslation } from 'react-i18next'; -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 Icon from '@ant-design/icons/lib/components/Icon'; -import ButtonGroup from 'antd/lib/button/button-group'; -import { - ROUTES, - STAR_OMD_USER, - TEXT_GREY_MUTED, -} from '../../../constants/constants'; -import { getRepositoryData } from '../../../rest/commonAPI'; -import { getReleaseVersionExpiry } from '../../../utils/WhatsNewModal.util'; -import { useAuthContext } from '../../Auth/AuthProviders/AuthProvider'; -import './github-star-modal.style.less'; - -const cookieStorage = new CookieStorage(); - -const GithubStarModal = () => { - const { t } = useTranslation(); - const location = useLocation(); - const { currentUser } = useAuthContext(); - const [showGithubStarPopup, setShowGithubStarPopup] = useState(false); - const [starredCount, setStarredCount] = useState(0); - const [isLoading, setIsLoading] = useState(true); - - const loggedInUserName = useMemo(() => currentUser?.name, [currentUser]); - - const userCookieName = useMemo( - () => `${STAR_OMD_USER}_${loggedInUserName}`, - [loggedInUserName] - ); - - const isHomePage = useMemo( - () => location.pathname.includes(ROUTES.MY_DATA), - [location.pathname] - ); - - const usernameExistsInCookie = useMemo( - () => Boolean(cookieStorage.getItem(userCookieName)), - [userCookieName] - ); - - const fetchOpenMetaData = async () => { - try { - const res = await getRepositoryData(); - setStarredCount(res.stargazers_count); - } catch (err) { - // Error - } finally { - setIsLoading(false); - } - }; - - const updateGithubPopup = useCallback( - (show: boolean) => { - if (loggedInUserName && show) { - fetchOpenMetaData(); - cookieStorage.setItem(userCookieName, 'true', { - expires: getReleaseVersionExpiry(), - }); - } - setShowGithubStarPopup(show); - }, - [ - loggedInUserName, - usernameExistsInCookie, - userCookieName, - getReleaseVersionExpiry, - ] - ); - - useEffect(() => { - updateGithubPopup(!usernameExistsInCookie); - - return () => setShowGithubStarPopup(false); - }, [usernameExistsInCookie, updateGithubPopup]); - - return ( - <> - {showGithubStarPopup && isHomePage && ( - setShowGithubStarPopup(false)} - /> - } - data-testid="github-star-popup-modal" - footer={null} - maskClosable={false} - width={440} - onCancel={() => setShowGithubStarPopup(false)}> - - - - - {t('label.star-us-on-github')} - - - - {t('message.star-on-github-description')} - - - - - - - - - - - - - - )} - - ); -}; - -export default GithubStarModal; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/GithubStarModal/github-star-modal.style.less b/openmetadata-ui/src/main/resources/ui/src/components/Modals/GithubStarModal/github-star-modal.style.less deleted file mode 100644 index c04edc77e3e..00000000000 --- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/GithubStarModal/github-star-modal.style.less +++ /dev/null @@ -1,65 +0,0 @@ -/* - * Copyright 2023 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. - */ - -@import (reference) url('../../../styles/variables.less'); - -.github-star-popup-modal { - .github-star-popup-card { - border: none; - text-align: center; - - .github-star-icon { - display: block; - margin: 24px auto; - width: 50px; - color: @yellow-2; - } - - .github-star-popup-header { - color: @primary-color; - font-size: 20px; - font-weight: 500; - } - - .github-star-popup-description { - margin-top: 10px; - color: @text-grey-muted; - font-size: 14px; - font-weight: 400; - } - - .github-action-button-group { - border-radius: 4px; - border: @global-border; - overflow: hidden; - - .github-star-button { - background: linear-gradient(0.5turn, rgba(0, 0, 0, 0.2), transparent); - border-right: @global-border !important; - } - - .github-modal-action-button { - border: none; - - &:hover { - color: initial; - border: none; - } - &:focus { - color: initial; - border: none; - } - } - } - } -} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewAlert/WhatsNewAlert.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewAlert/WhatsNewAlert.component.tsx index 5f134aa1674..d852ee809f0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewAlert/WhatsNewAlert.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewAlert/WhatsNewAlert.component.tsx @@ -21,6 +21,7 @@ import { ReactComponent as RightArrowIcon } from '../../../../assets/svg/ic-arro 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 { OMD_REPOSITORY_LINK } from '../../../../constants/docs.constants'; import { useAuth } from '../../../../hooks/authHooks'; import { getReleaseVersionExpiry } from '../../../../utils/WhatsNewModal.util'; import { COOKIE_VERSION, LATEST_VERSION_ID, WHATS_NEW } from '../whatsNewData'; @@ -123,7 +124,7 @@ const WhatsNewAlert = () => { component={Typography.Link} target="_blank" to={{ - pathname: 'https://github.com/open-metadata/OpenMetadata', + pathname: OMD_REPOSITORY_LINK, }}> {t('label.star-open-metadata')} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/NavBar/NavBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/NavBar/NavBar.tsx index e83ab74dfcf..725ccdd551a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/NavBar/NavBar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/NavBar/NavBar.tsx @@ -74,14 +74,13 @@ import BrandImage from '../common/BrandImage/BrandImage'; import CmdKIcon from '../common/CmdKIcon/CmdKIcon.component'; import { useDomainProvider } from '../Domain/DomainProvider/DomainProvider'; import { useGlobalSearchProvider } from '../GlobalSearchProvider/GlobalSearchProvider'; -import GithubStarModal from '../Modals/GithubStarModal/GithubStarModal.component'; -import WhatsNewAlert from '../Modals/WhatsNewModal/WhatsNewAlert/WhatsNewAlert.component'; import WhatsNewModal from '../Modals/WhatsNewModal/WhatsNewModal'; import NotificationBox from '../NotificationBox/NotificationBox.component'; import { UserProfileIcon } from '../Users/UserProfileIcon/UserProfileIcon.component'; import { useWebSocketConnector } from '../WebSocketProvider/WebSocketProvider'; import './nav-bar.less'; import { NavBarProps } from './NavBar.interface'; +import popupAlertsCardsClassBase from './PopupAlertClassBase'; const cookieStorage = new CookieStorage(); @@ -120,6 +119,16 @@ const NavBar = ({ useState(false); const [activeTab, setActiveTab] = useState('Task'); + const renderAlertCards = useMemo(() => { + const cardList = popupAlertsCardsClassBase.alertsCards(); + + return cardList.map(({ key, component }) => { + const Component = component; + + return ; + }); + }, []); + const entitiesSelect = useMemo( () => (