feat: upgrade sso (#8813)

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 (
+        <Wrapper>
+            <MainContent>
+                <StyledImage
+                    src={formatAssetPath(upgradeSso)}
+                    alt='Single sign-on'
+                />
+                <MainText>
+                    <p>
+                        Streamline access and account management, reduce setup
+                        time and enhance security with <b>Single Sign-On</b> and{' '}
+                        <b>Automatic User Provisioning via SCIM</b>.
+                    </p>
+                    <StyledLink
+                        href='https://www.getunleash.io/upgrade-unleash?utm_source=sso'
+                        target='_blank'
+                    >
+                        View our Enterprise offering
+                    </StyledLink>
+                </MainText>
+            </MainContent>
+            <Tooltip title='Dismiss' arrow>
+                <StyledCloseButton
+                    aria-label='dismiss'
+                    onClick={() => {
+                        setSsoUpgrade('closed');
+                    }}
+                    size='small'
+                >
+                    <Close fontSize='inherit' />
+                </StyledCloseButton>
+            </Tooltip>
+        </Wrapper>
+    );
+};

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 ? <UpgradeSSO /> : null}
         </PageContent>
     );
 };