diff --git a/frontend/src/assets/img/upgradeHosted.png b/frontend/src/assets/img/upgradeHosted.png new file mode 100644 index 0000000000..6428a740db Binary files /dev/null and b/frontend/src/assets/img/upgradeHosted.png differ diff --git a/frontend/src/component/personalDashboard/InfoSection.tsx b/frontend/src/component/personalDashboard/InfoSection.tsx new file mode 100644 index 0000000000..407fcd3031 --- /dev/null +++ b/frontend/src/component/personalDashboard/InfoSection.tsx @@ -0,0 +1,155 @@ +import { IconButton, styled, Tooltip, Typography } from '@mui/material'; +import { ReactComponent as ProPlanIcon } from 'assets/icons/pro-enterprise-feature-badge.svg'; +import { ReactComponent as ProPlanIconLight } from 'assets/icons/pro-enterprise-feature-badge-light.svg'; +import type { FC } from 'react'; +import { ThemeMode } from 'component/common/ThemeMode/ThemeMode'; +import { Button } from '@mui/material'; +import CloseIcon from '@mui/icons-material/Close'; +import { useLocalStorageState } from 'hooks/useLocalStorageState'; +import { formatAssetPath } from 'utils/formatPath'; +import upgradeHosted from 'assets/img/upgradeHosted.png'; + +type InfoSectionProps = {}; + +const StyledContainer = styled('div')(({ theme }) => ({ + display: 'flex', + flexFlow: 'column nowrap', + gap: theme.spacing(2), + padding: theme.spacing(3, 4), + border: `1px solid ${theme.palette.divider}`, + borderRadius: theme.shape.borderRadiusMedium, + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + position: 'relative', +})); + +const StyledContent = styled('div')(({ theme }) => ({ + display: 'flex', + gap: theme.spacing(2), + alignItems: 'center', +})); + +const StyledText = styled('div')(({ theme }) => ({ + display: 'flex', + flexFlow: 'column nowrap', + gap: theme.spacing(1), +})); + +const StyledTitle = styled('h2')(({ theme }) => ({ + margin: theme.spacing(0, 0, 0.5), + fontSize: theme.typography.body1.fontSize, + fontWeight: theme.typography.fontWeightBold, + display: 'flex', + alignItems: 'center', + gap: theme.spacing(1), +})); + +const StyledList = styled('ul')(({ theme }) => ({ + listStyle: 'none', + padding: 0, + margin: 0, + fontSize: theme.typography.body2.fontSize, + '& li': {}, +})); + +const StyledListItem = styled('li')(({ theme }) => ({ + position: 'relative', + paddingLeft: theme.spacing(2.5), + marginBottom: theme.spacing(0.5), + '&::before': { + content: '""', + position: 'absolute', + left: 0, + top: theme.spacing(0.375), + width: theme.spacing(1.5), + height: theme.spacing(1.5), + borderRadius: theme.spacing(0.5), + backgroundColor: theme.palette.primary.main, + }, +})); + +const StyledCloseButton = styled(IconButton)(({ theme }) => ({ + position: 'absolute', + top: theme.spacing(1), + right: theme.spacing(1), +})); + +const StyledImage = styled('img')(({ theme }) => ({ + width: 235, + margin: theme.spacing(1), + [theme.breakpoints.down('md')]: { + display: 'none', + }, +})); + +export const InfoSection: FC = () => { + const [dashboardUpgrade, setDashboardUpgrade] = useLocalStorageState< + 'open' | 'closed' + >('upgrade-dashboard:v1', 'open'); + + if (dashboardUpgrade === 'closed') { + return null; + } + + const onDismiss = () => { + setDashboardUpgrade('closed'); + }; + + return ( + + + + + + + + + + } + lightmode={} + /> + Explore our Enterprise solution + + + Increase efficiency and improve the development process + in your company with the full experience of Unleash with + some key advantages like: + + + + Unlimited projects and environments + + + Priority support for managed and self-hosted options + + + SSO/SCIM - streamlined access and account management + + + RBAC - precise access control + + + Change requests - reduce error risk with + pull-request like experience + + +
+ +
+
+ + +
+
+ ); +}; diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx index afc6bbe74f..1e629c1d6c 100644 --- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx +++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx @@ -21,6 +21,8 @@ import { MyFlags } from './MyFlags'; import { usePageTitle } from 'hooks/usePageTitle'; import { fromPersonalDashboardProjectDetailsOutput } from './RemoteData'; import { useEffect } from 'react'; +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; +import { InfoSection } from './InfoSection'; const WelcomeSection = styled('div')(({ theme }) => ({ display: 'flex', @@ -105,6 +107,7 @@ export const PersonalDashboard = () => { const { trackEvent } = usePlausibleTracker(); const { setSplashSeen } = useSplashApi(); const { splash } = useAuthSplash(); + const { isOss } = useUiConfig(); const name = user?.name || ''; usePageTitle(name ? `Dashboard: ${name}` : 'Dashboard'); @@ -146,6 +149,8 @@ export const PersonalDashboard = () => { return ( + {isOss() ? : null} + Welcome {name}