Skip to content

Commit

Permalink
Update PRO plan menu (#4409)
Browse files Browse the repository at this point in the history 
<!-- Thanks for creating a PR! To make it easier for reviewers and
everyone else to understand what your changes relate to, please add some
relevant content to the headings below. Feel free to ignore or delete
sections that you don't think are relevant. Thank you! ❤️ -->

## About the changes
Update menu for Pro customers - show enterprise options with plan
upgrade suggestion page.


![image](https://github.com/Unleash/unleash/assets/2625371/0b670b48-a2fc-4973-89ce-5d0b0c36b81a)
  • Loading branch information
@Tymek
Tymek committed Aug 4, 2023
1 parent ad1f5ff commit 87e75d1
Show file tree
Hide file tree
Showing 10 changed files with 376 additions and 204 deletions.
95 changes: 64 additions & 31 deletions frontend/src/component/admin/Admin.tsx
View file
Expand Up @@ -12,42 +12,75 @@ import { GroupsAdmin } from './groups/GroupsAdmin';
import { InstanceAdmin } from './instance-admin/InstanceAdmin';
import { InstancePrivacy } from './instance-privacy/InstancePrivacy';
import { MaintenanceAdmin } from './maintenance';
import AdminMenu from './menu/AdminMenu';
import { AdminTabsMenu } from './menu/AdminTabsMenu';
import { Network } from './network/Network';
import { Roles } from './roles/Roles';
import { ServiceAccounts } from './serviceAccounts/ServiceAccounts';
import CreateUser from './users/CreateUser/CreateUser';
import EditUser from './users/EditUser/EditUser';
import { InviteLink } from './users/InviteLink/InviteLink';
import UsersAdmin from './users/UsersAdmin';
import { EnterpriseFeatureUpgradePage } from 'component/common/EnterpriseFeatureUpgradePage/EnterpriseFeatureUpgradePage';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';

export const Admin = () => (
<>
<AdminMenu />
<Routes>
<Route path="users" element={<UsersAdmin />} />
<Route path="api" element={<ApiTokenPage />} />
<Route path="api/create-token" element={<CreateApiToken />} />
<Route path="users/:id/edit" element={<EditUser />} />
<Route path="service-accounts" element={<ServiceAccounts />} />
<Route path="create-user" element={<CreateUser />} />
<Route path="invite-link" element={<InviteLink />} />
<Route path="groups" element={<GroupsAdmin />} />
<Route path="groups/create-group" element={<CreateGroup />} />
<Route
path="groups/:groupId/edit"
element={<EditGroupContainer />}
/>
<Route path="groups/:groupId" element={<Group />} />
<Route path="roles/*" element={<Roles />} />
<Route path="instance" element={<InstanceAdmin />} />
<Route path="network/*" element={<Network />} />
<Route path="maintenance" element={<MaintenanceAdmin />} />
<Route path="cors" element={<CorsAdmin />} />
<Route path="auth" element={<AuthSettings />} />
<Route path="admin-invoices" element={<FlaggedBillingRedirect />} />
<Route path="billing" element={<Billing />} />
<Route path="instance-privacy" element={<InstancePrivacy />} />
</Routes>
</>
);
export const Admin = () => {
const { isEnterprise } = useUiConfig();

return (
<>
<AdminTabsMenu />
<Routes>
<Route path="users" element={<UsersAdmin />} />
<Route path="api" element={<ApiTokenPage />} />
<Route path="api/create-token" element={<CreateApiToken />} />
<Route path="users/:id/edit" element={<EditUser />} />
<Route
path="service-accounts"
element={
isEnterprise() ? (
<ServiceAccounts />
) : (
<EnterpriseFeatureUpgradePage
title="Service accounts"
link="https://docs.getunleash.io/reference/service-accounts"
/>
)
}
/>
<Route path="create-user" element={<CreateUser />} />
<Route path="invite-link" element={<InviteLink />} />
<Route path="groups" element={<GroupsAdmin />} />
<Route path="groups/create-group" element={<CreateGroup />} />
<Route
path="groups/:groupId/edit"
element={<EditGroupContainer />}
/>
<Route path="groups/:groupId" element={<Group />} />
<Route
path="roles/*"
element={
isEnterprise() ? (
<Roles />
) : (
<EnterpriseFeatureUpgradePage
title="Project roles"
link="https://docs.getunleash.io/reference/rbac#custom-project-roles"
/>
)
}
/>
<Route path="instance" element={<InstanceAdmin />} />
<Route path="network/*" element={<Network />} />
<Route path="maintenance" element={<MaintenanceAdmin />} />
<Route path="cors" element={<CorsAdmin />} />
<Route path="auth" element={<AuthSettings />} />
<Route
path="admin-invoices"
element={<FlaggedBillingRedirect />}
/>
<Route path="billing" element={<Billing />} />
<Route path="instance-privacy" element={<InstancePrivacy />} />
</Routes>
</>
);
};
146 changes: 0 additions & 146 deletions frontend/src/component/admin/menu/AdminMenu.tsx
View file

This file was deleted.

141 changes: 141 additions & 0 deletions frontend/src/component/admin/menu/AdminTabsMenu.tsx
View file
@@ -0,0 +1,141 @@
import { useLocation } from 'react-router-dom';
import { Box, Paper, styled, Tab, Tabs } from '@mui/material';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useInstanceStatus } from 'hooks/api/getters/useInstanceStatus/useInstanceStatus';
import { CenteredNavLink } from './CenteredNavLink';
import { VFC } from 'react';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge';

const StyledPaper = styled(Paper)(({ theme }) => ({
marginBottom: '1rem',
borderRadius: `${theme.shape.borderRadiusLarge}px`,
boxShadow: 'none',
padding: theme.spacing(0, 2),
}));

const StyledBadgeContainer = styled('div')(({ theme }) => ({
marginLeft: theme.spacing(1),
display: 'flex',
alignItems: 'center',
}));

export const AdminTabsMenu: VFC = () => {
const { uiConfig, isEnterprise, isPro } = useUiConfig();
const { pathname } = useLocation();
const { isBilling } = useInstanceStatus();
const { flags, networkViewEnabled } = uiConfig;

const activeTab = pathname.split('/')[2];

const showEnterpriseFeaturesInPro =
uiConfig?.flags?.frontendNavigationUpdate;

const tabs = [
{
value: 'users',
label: 'Users',
link: '/admin/users',
},
{
value: 'service-accounts',
label: 'Service accounts',
link: '/admin/service-accounts',
condition:
isEnterprise() || (isPro() && showEnterpriseFeaturesInPro),
showEnterpriseBadge: true,
},
{
value: 'groups',
label: 'Groups',
link: '/admin/groups',
condition: flags.UG,
},
{
value: 'roles',
label: 'Roles',
link: '/admin/roles',
condition:
isEnterprise() || (isPro() && showEnterpriseFeaturesInPro),
showEnterpriseBadge: true,
},
{
value: 'api',
label: 'API access',
link: '/admin/api',
},
{
value: 'cors',
label: 'CORS origins',
link: '/admin/cors',
condition: uiConfig.flags.embedProxyFrontend,
},
{
value: 'auth',
label: 'Single sign-on',
link: '/admin/auth',
},
{
value: 'instance',
label: 'Instance stats',
link: '/admin/instance',
},
{
value: 'network',
label: 'Network',
link: '/admin/network',
condition: networkViewEnabled,
},
{
value: 'maintenance',
label: 'Maintenance',
link: '/admin/maintenance',
},
{
value: 'instance-privacy',
label: 'Instance privacy',
link: '/admin/instance-privacy',
},
{
value: 'billing',
label: 'Billing',
link: '/admin/billing',
condition: isBilling,
},
];

return (
<StyledPaper>
<Tabs
value={activeTab}
variant="scrollable"
scrollButtons="auto"
allowScrollButtonsMobile
>
{tabs
.filter(tab => tab.condition || tab.condition === undefined)
.map(tab => (
<Tab
key={tab.value}
value={tab.value}
label={
<CenteredNavLink to={tab.link}>
{tab.label}
<ConditionallyRender
condition={Boolean(
tab.showEnterpriseBadge
)}
show={
<StyledBadgeContainer>
<EnterpriseBadge size={16} />
</StyledBadgeContainer>
}
/>
</CenteredNavLink>
}
/>
))}
</Tabs>
</StyledPaper>
);
};

0 comments on commit 87e75d1

Please sign in to comment.