wangchunlin
/
cvat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added upgrade button (#5610)

Browse Source
main
Kirill Lakhov 3 years ago committed by GitHub
parent a0b70fcc40
commit 6e0b8b6043
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 84 additions and 38 deletions
Show Stats Download Patch File Download Diff File

3
cvat-ui/src/assets/upgrade-icon.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="20px" height="16px" viewBox="4 -2 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.3333 9C17.3333 4.39751 13.6025 0.666672 8.99996 0.666672C4.39746 0.666672 0.666626 4.39751 0.666626 9C0.666626 13.6025 4.39746 17.3333 8.99996 17.3333C13.6025 17.3333 17.3333 13.6025 17.3333 9ZM8.16663 13.1667V7.67834L6.25579 9.58917L5.07746 8.41084L8.99996 4.48834L12.9225 8.41084L11.7441 9.58917L9.83329 7.67834V13.1667H8.16663Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 468 B

29
cvat-ui/src/components/header/header.tsx
Unescape Escape View File

@ -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 = (
<Menu.Item
className='cvat-menu-item-highlighted'
icon={<UpgradeIcon />}
key='upgrade'
onClick={() => window.open(upgradeLink, '_self')}
>
{upgradeText}
</Menu.Item>
);
}
const userMenu = (
<Menu className='cvat-header-menu'>
{user.isStaff && (
@ -345,6 +365,9 @@ function HeaderContainer(props: Props): JSX.Element {
>
Settings
</Menu.Item>
{
upgradeMenuItem
}
<Menu.Item icon={<InfoCircleOutlined />} key='about' onClick={() => showAboutModal()}>
About
</Menu.Item>

67
cvat-ui/src/components/organization-page/top-bar.tsx
Unescape Escape View File

@ -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: (
<div className='cvat-remove-organization-submit'>
<Text type='warning'>
To remove the organization,
enter its short name below
</Text>
<Input
onChange={
(event: React.ChangeEvent<HTMLInputElement>) => {
modal.update({
okButtonProps: {
disabled: event.target.value !== organizationInstance.slug,
danger: true,
},
});
}
}
/>
</div>
),
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 ? (
<Menu.Item
key={MenuActions.REMOVE_ORGANIZATION}
onClick={() => {
const modal = Modal.confirm({
onOk: () => {
dispatch(removeOrganizationAsync(organizationInstance));
},
content: (
<div className='cvat-remove-organization-submit'>
<Text type='warning'>
To remove the organization,
enter its short name below
</Text>
<Input
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
modal.update({
okButtonProps: {
disabled:
event.target.value !== organizationInstance.slug,
danger: true,
},
});
}}
/>
</div>
),
okButtonProps: {
disabled: true,
danger: true,
},
okText: 'Remove',
});
}}
onClick={onRemove}
>
Remove organization
</Menu.Item>

6
cvat-ui/src/config.tsx
Unescape Escape View File

@ -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,

4
cvat-ui/src/icons.tsx
Unescape Escape View File

@ -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 => <SVGCVATLogo />);
export const CVATMinimalisticLogo = React.memo((): JSX.Element => <SVGCVATMinimalisticLogo />);
@ -124,3 +125,4 @@ export const ClearIcon = React.memo((): JSX.Element => <SVGClearIcon />);
export const ShowPasswordIcon = React.memo((): JSX.Element => <SVGShowPasswordIcon />);
export const PlusIcon = React.memo((): JSX.Element => <SVGPlusIcon />);
export const CheckIcon = React.memo((): JSX.Element => <SVGCheckIcon />);
export const UpgradeIcon = React.memo((): JSX.Element => <SVGUpgradeIcon />);

13
cvat-ui/src/styles.scss
Unescape Escape View File

@ -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;

Write Preview
Loading…
Cancel
Save