diff --git a/frontend/src/assets/img/upgradeSso.png b/frontend/src/assets/img/upgradeSso.png new file mode 100644 index 000000000000..a8ccb6767aa5 Binary files /dev/null and b/frontend/src/assets/img/upgradeSso.png differ diff --git a/frontend/src/component/admin/users/UsersList/UpgradeSSO.tsx b/frontend/src/component/admin/users/UsersList/UpgradeSSO.tsx new file mode 100644 index 000000000000..b3242e88a79a --- /dev/null +++ b/frontend/src/component/admin/users/UsersList/UpgradeSSO.tsx @@ -0,0 +1,90 @@ +import { Box, IconButton, Link, styled, Tooltip } from '@mui/material'; +import upgradeSso from 'assets/img/upgradeSso.png'; +import { formatAssetPath } from 'utils/formatPath'; +import Close from '@mui/icons-material/Close'; +import { useLocalStorageState } from 'hooks/useLocalStorageState'; + +const Wrapper = styled(Box)(({ theme }) => ({ + marginTop: theme.spacing(10), + width: '100%', + backgroundColor: theme.palette.background.elevation1, + borderRadius: theme.shape.borderRadiusMedium, + padding: theme.spacing(2), + display: 'flex', + justifyContent: 'center', + position: 'relative', +})); + +const StyledLink = styled(Link)(({ theme }) => ({ + textDecoration: 'none', + fontWeight: theme.typography.fontWeightBold, +})); + +const StyledImage = styled('img')(({ theme }) => ({ + width: theme.spacing(14), +})); + +const StyledCloseButton = styled(IconButton)(({ theme }) => ({ + position: 'absolute', + top: theme.spacing(1.25), + right: theme.spacing(1.5), +})); + +const MainContent = styled(Box)(({ theme }) => ({ + display: 'flex', + gap: theme.spacing(3), + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), +})); + +const MainText = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + gap: theme.spacing(1), + maxWidth: theme.spacing(60), +})); + +export const UpgradeSSO = () => { + const [ssoUpgrade, setSsoUpgrade] = useLocalStorageState<'open' | 'closed'>( + 'upgrade-sso:v1', + 'open', + ); + + if (ssoUpgrade === 'closed') return null; + + return ( + + + + +

+ Streamline access and account management, reduce setup + time and enhance security with Single Sign-On and{' '} + Automatic User Provisioning via SCIM. +

+ + View our Enterprise offering + +
+
+ + { + setSsoUpgrade('closed'); + }} + size='small' + > + + + +
+ ); +}; diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx index bdda4a0a7be4..ec9bb4d040f6 100644 --- a/frontend/src/component/admin/users/UsersList/UsersList.tsx +++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx @@ -40,10 +40,11 @@ import { useUiFlag } from 'hooks/useUiFlag'; import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig'; import { useScimSettings } from 'hooks/api/getters/useScimSettings/useScimSettings'; import { UserSessionsCell } from './UserSessionsCell/UserSessionsCell'; +import { UpgradeSSO } from './UpgradeSSO'; const UsersList = () => { const navigate = useNavigate(); - const { isEnterprise } = useUiConfig(); + const { isEnterprise, isOss } = useUiConfig(); const { users, roles, refetch, loading } = useUsers(); const { setToastData, setToastApiError } = useToast(); const { removeUser, userLoading, userApiErrors } = useAdminUsersApi(); @@ -59,6 +60,7 @@ const UsersList = () => { }); const userAccessUIEnabled = useUiFlag('userAccessUIEnabled'); const showUserDeviceCount = useUiFlag('showUserDeviceCount'); + const showSSOUpgrade = isOss() && users.length > 3; const { settings: { enabled: scimEnabled }, @@ -426,6 +428,8 @@ const UsersList = () => { /> } /> + + {showSSOUpgrade ? : null} ); };