diff --git a/cvat-ui/src/assets/upgrade-icon.svg b/cvat-ui/src/assets/upgrade-icon.svg new file mode 100644 index 00000000..e53f8a44 --- /dev/null +++ b/cvat-ui/src/assets/upgrade-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/cvat-ui/src/components/header/header.tsx b/cvat-ui/src/components/header/header.tsx index 933ff40b..7e5806ff 100644 --- a/cvat-ui/src/components/header/header.tsx +++ b/cvat-ui/src/components/header/header.tsx @@ -1,5 +1,5 @@ // Copyright (C) 2020-2022 Intel Corporation -// Copyright (C) 2022 CVAT.ai Corporation +// Copyright (C) 2022-2023 CVAT.ai Corporation // // SPDX-License-Identifier: MIT @@ -33,7 +33,7 @@ import Select from 'antd/lib/select'; import { getCore } from 'cvat-core-wrapper'; import config from 'config'; -import { CVATLogo } from 'icons'; +import { CVATLogo, UpgradeIcon } from 'icons'; import ChangePasswordDialog from 'components/change-password-modal/change-password-modal'; import CVATTooltip from 'components/common/cvat-tooltip'; import { switchSettingsDialog as switchSettingsDialogAction } from 'actions/settings-actions'; @@ -163,7 +163,7 @@ function HeaderContainer(props: Props): JSX.Element { } = props; const { - CHANGELOG_URL, LICENSE_URL, GITTER_URL, GITHUB_URL, GUIDE_URL, DISCORD_URL, + CHANGELOG_URL, LICENSE_URL, GITTER_URL, GITHUB_URL, GUIDE_URL, DISCORD_URL, CVAT_BILLING_URL, } = config; const history = useHistory(); @@ -245,6 +245,26 @@ function HeaderContainer(props: Props): JSX.Element { } }; + let upgradeMenuItem = null; + if (CVAT_BILLING_URL) { + let upgradeText = 'Upgrade to Pro'; + let upgradeLink = `${CVAT_BILLING_URL}/?type=personal`; + if (currentOrganization) { + upgradeText = 'Upgrade to Team'; + upgradeLink = `${CVAT_BILLING_URL}/?type=organization&orgId=${currentOrganization.id}`; + } + upgradeMenuItem = ( + } + key='upgrade' + onClick={() => window.open(upgradeLink, '_self')} + > + {upgradeText} + + ); + } + const userMenu = ( {user.isStaff && ( @@ -345,6 +365,9 @@ function HeaderContainer(props: Props): JSX.Element { > Settings + { + upgradeMenuItem + } } key='about' onClick={() => showAboutModal()}> About diff --git a/cvat-ui/src/components/organization-page/top-bar.tsx b/cvat-ui/src/components/organization-page/top-bar.tsx index b92dd8ca..69ffc1e1 100644 --- a/cvat-ui/src/components/organization-page/top-bar.tsx +++ b/cvat-ui/src/components/organization-page/top-bar.tsx @@ -1,5 +1,5 @@ // Copyright (C) 2021-2022 Intel Corporation -// Copyright (C) 2022 CVAT.ai Corporation +// Copyright (C) 2022-2023 CVAT.ai Corporation // // SPDX-License-Identifier: MIT @@ -69,6 +69,39 @@ function OrganizationTopBar(props: Props): JSX.Element { }; }); + const onRemove = (): void => { + const modal = Modal.confirm({ + onOk: () => { + dispatch(removeOrganizationAsync(organizationInstance)); + }, + content: ( +
+ + To remove the organization, + enter its short name below + + ) => { + modal.update({ + okButtonProps: { + disabled: event.target.value !== organizationInstance.slug, + danger: true, + }, + }); + } + } + /> +
+ ), + okButtonProps: { + disabled: true, + danger: true, + }, + okText: 'Remove', + }); + }; + let organizationName = name; let organizationDescription = description; let organizationContacts = contact; @@ -105,37 +138,7 @@ function OrganizationTopBar(props: Props): JSX.Element { {owner && userID === owner.id ? ( { - const modal = Modal.confirm({ - onOk: () => { - dispatch(removeOrganizationAsync(organizationInstance)); - }, - content: ( -
- - To remove the organization, - enter its short name below - - ) => { - modal.update({ - okButtonProps: { - disabled: - event.target.value !== organizationInstance.slug, - danger: true, - }, - }); - }} - /> -
- ), - okButtonProps: { - disabled: true, - danger: true, - }, - okText: 'Remove', - }); - }} + onClick={onRemove} > Remove organization diff --git a/cvat-ui/src/config.tsx b/cvat-ui/src/config.tsx index d13a0bd5..883b4d78 100644 --- a/cvat-ui/src/config.tsx +++ b/cvat-ui/src/config.tsx @@ -108,7 +108,8 @@ const DEFAULT_GOOGLE_CLOUD_STORAGE_LOCATIONS: string[][] = [ ['NAM4', 'US-CENTRAL1 and US-EAST1'], ]; -const HEALTH_CHECK_RETRIES = 10; +const CVAT_BILLING_URL = process.env.CVAT_BILLING_HOST; +const HEALH_CHECK_RETRIES = 10; const HEALTH_CHECK_PERIOD = 3000; // ms const HEALTH_CHECK_REQUEST_TIMEOUT = 5000; // ms @@ -135,7 +136,8 @@ export default { DEFAULT_GOOGLE_CLOUD_STORAGE_LOCATIONS, OUTSIDE_PIC_URL, DATASET_MANIFEST_GUIDE_URL, - HEALTH_CHECK_RETRIES, + CVAT_BILLING_URL, + HEALH_CHECK_RETRIES, HEALTH_CHECK_PERIOD, HEALTH_CHECK_REQUEST_TIMEOUT, SERVER_UNAVAILABLE_COMPONENT, diff --git a/cvat-ui/src/icons.tsx b/cvat-ui/src/icons.tsx index ae3553b3..1f7c9e77 100644 --- a/cvat-ui/src/icons.tsx +++ b/cvat-ui/src/icons.tsx @@ -1,5 +1,5 @@ // Copyright (C) 2020-2022 Intel Corporation -// Copyright (C) 2022 CVAT.ai Corporation +// Copyright (C) 2022-2023 CVAT.ai Corporation // // SPDX-License-Identifier: MIT @@ -64,6 +64,7 @@ import SVGClearIcon from './assets/clear-icon.svg'; import SVGShowPasswordIcon from './assets/show-password.svg'; import SVGPlusIcon from './assets/plus-icon.svg'; import SVGCheckIcon from './assets/check-icon.svg'; +import SVGUpgradeIcon from './assets/upgrade-icon.svg'; export const CVATLogo = React.memo((): JSX.Element => ); export const CVATMinimalisticLogo = React.memo((): JSX.Element => ); @@ -124,3 +125,4 @@ export const ClearIcon = React.memo((): JSX.Element => ); export const ShowPasswordIcon = React.memo((): JSX.Element => ); export const PlusIcon = React.memo((): JSX.Element => ); export const CheckIcon = React.memo((): JSX.Element => ); +export const UpgradeIcon = React.memo((): JSX.Element => ); diff --git a/cvat-ui/src/styles.scss b/cvat-ui/src/styles.scss index 5ff6e92a..78536d98 100644 --- a/cvat-ui/src/styles.scss +++ b/cvat-ui/src/styles.scss @@ -1,9 +1,13 @@ // Copyright (C) 2020-2022 Intel Corporation +// Copyright (C) 2022-2023 CVAT.ai Corporation // // SPDX-License-Identifier: MIT @import './base.scss'; +$highlight-color: #1890ff; +$highlight-active: #40a9ff; + hr { border: none; border-top: 1px solid $border-color-1; @@ -111,6 +115,15 @@ hr { } } +.cvat-menu-item-highlighted { + color: white; + background: $highlight-color; + + &:hover { + background: $highlight-active; + } +} + .ant-notification-notice { p { margin-bottom: 0;