1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-02 20:35:25 +02:00

feat(upgrade): show subtle banner [EE-5017] (#8489)

This commit is contained in:
Chaim Lev-Ari 2023-02-19 09:47:50 +05:30 committed by GitHub
parent 631503fc1b
commit 9a8e95d017
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 217 additions and 90 deletions

View file

@ -1,5 +1,6 @@
import { ArrowRight } from 'lucide-react';
import { ArrowUpCircle } from 'lucide-react';
import { useState } from 'react';
import clsx from 'clsx';
import { useAnalytics } from '@/angulartics.matomo/analytics-services';
import { useNodesCount } from '@/react/portainer/system/useNodesCount';
@ -7,9 +8,10 @@ import {
ContainerPlatform,
useSystemInfo,
} from '@/react/portainer/system/useSystemInfo';
import { useUser } from '@/react/hooks/useUser';
import { useCurrentUser } from '@/react/hooks/useUser';
import { withEdition } from '@/react/portainer/feature-flags/withEdition';
import { withHideOnExtension } from '@/react/hooks/withHideOnExtension';
import { useUser } from '@/portainer/users/queries/useUser';
import { useSidebarState } from '../useSidebarState';
@ -25,15 +27,21 @@ const enabledPlatforms: Array<ContainerPlatform> = [
];
function UpgradeBEBanner() {
const { isAdmin } = useUser();
const {
isAdmin,
user: { Id },
} = useCurrentUser();
const { trackEvent } = useAnalytics();
const { isOpen: isSidebarOpen } = useSidebarState();
const nodesCountQuery = useNodesCount();
const systemInfoQuery = useSystemInfo();
const userQuery = useUser(Id);
const [isOpen, setIsOpen] = useState(false);
if (!nodesCountQuery.isSuccess || !systemInfoQuery.data) {
if (!nodesCountQuery.isSuccess || !systemInfoQuery.data || !userQuery.data) {
return null;
}
@ -49,19 +57,42 @@ function UpgradeBEBanner() {
agents: systemInfo.agents,
};
if (!enabledPlatforms.includes(systemInfo.platform)) {
if (
!enabledPlatforms.includes(systemInfo.platform) &&
process.env.NODE_ENV !== 'development'
) {
return null;
}
const subtleButton = userQuery.data.ThemeSettings.subtleUpgradeButton;
return (
<>
<button
type="button"
className="flex w-full items-center justify-center gap-3 border-0 bg-warning-5 py-2 font-semibold text-warning-9"
className={clsx(
'flex w-full items-center justify-center gap-1 py-2 pr-2 hover:underline',
{
'border-0 bg-warning-5 font-semibold text-warning-9': !subtleButton,
'border border-solid border-blue-9 bg-[#023959] font-medium text-white th-dark:border-[#343434] th-dark:bg-black':
subtleButton,
},
'th-highcontrast:border th-highcontrast:border-solid th-highcontrast:border-white th-highcontrast:bg-black th-highcontrast:font-medium th-highcontrast:text-white'
)}
onClick={handleClick}
>
<ArrowUpCircle
className={clsx(
'lucide text-lg',
{
'fill-warning-9 stroke-warning-5': !subtleButton,
'fill-warning-6 stroke-[#023959] th-dark:stroke-black':
subtleButton,
},
'th-highcontrast:fill-warning-6 th-highcontrast:stroke-black'
)}
/>
{isSidebarOpen && <>Upgrade to Business Edition</>}
<ArrowRight className="lucide text-lg" />
</button>
{isOpen && <UpgradeDialog onDismiss={() => setIsOpen(false)} />}