diff --git a/docs/data/toolpad/studio/concepts/authentication.md b/docs/data/toolpad/studio/concepts/authentication.md index 5ca78aa4de9..4d379bddce0 100644 --- a/docs/data/toolpad/studio/concepts/authentication.md +++ b/docs/data/toolpad/studio/concepts/authentication.md @@ -63,7 +63,7 @@ In the Google OAuth client settings screen, under the **Authorized redirect URIs ### Azure Active Directory (now Entra ID) :::warning -The Azure AD authentication provider will be a paid feature of Toolpad Studio very soon, so it's only available for free for a limited time. +The Azure AD authentication provider is a paid feature of Toolpad Studio. ::: | environment variable name                  | description | diff --git a/docs/data/toolpad/studio/concepts/rbac.md b/docs/data/toolpad/studio/concepts/rbac.md index 1e79dfdfd0b..9ef69b40581 100644 --- a/docs/data/toolpad/studio/concepts/rbac.md +++ b/docs/data/toolpad/studio/concepts/rbac.md @@ -3,7 +3,7 @@

Restrict pages in Toolpad Studio application to users with certain roles only.

:::warning -Role-based access control will be a paid feature of Toolpad Studio very soon, so it's only available for free for a limited time. +Role-based access control is a paid feature of Toolpad Studio. ::: You can configure pages in a Toolpad Studio application so that users must have certain roles within specific authentication providers in order to access them. diff --git a/packages/toolpad-studio/public/pro.svg b/packages/toolpad-studio/public/pro.svg new file mode 100644 index 00000000000..dbde67ddbf2 --- /dev/null +++ b/packages/toolpad-studio/public/pro.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/toolpad-studio/src/components/HelpTooltipIcon.tsx b/packages/toolpad-studio/src/components/HelpTooltipIcon.tsx index 43ae3963954..7cf475d39dd 100644 --- a/packages/toolpad-studio/src/components/HelpTooltipIcon.tsx +++ b/packages/toolpad-studio/src/components/HelpTooltipIcon.tsx @@ -4,12 +4,13 @@ import HelpOutlineIcon from '@mui/icons-material/HelpOutline'; export interface HelpTooltipIconProps extends Omit { helpText: React.ReactNode; + iconSx?: React.CSSProperties; } -export default function HelpTooltipIcon({ helpText, ...props }: HelpTooltipIconProps) { +export default function HelpTooltipIcon({ helpText, iconSx, ...props }: HelpTooltipIconProps) { return ( - + ); } diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/AppAuthorizationEditor.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/AppAuthorizationEditor.tsx index 5f0dddcb3df..d35f3a637ab 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/AppAuthorizationEditor.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/AppAuthorizationEditor.tsx @@ -42,7 +42,7 @@ import invariant from 'invariant'; import { useAppState, useAppStateApi } from '../AppState'; import TabPanel from '../../components/TabPanel'; import AzureIcon from '../../components/icons/AzureIcon'; -import { UpgradeAlert } from './UpgradeAlert'; +import { UpgradeAlert } from './UpgradeNotification'; interface AuthProviderOption { name: string; @@ -153,7 +153,9 @@ export function AppAuthenticationEditor() { -1} /> {icon} {name} - {hasRoles && !isPaidPlan ? : null} + {hasRoles && !isPaidPlan ? ( + + ) : null} ))} @@ -184,20 +186,20 @@ export function AppAuthenticationEditor() { placeholder="example.com" /> ))} - {!isPaidPlan ? ( - theme.spacing(4) }} - /> - ) : ( - theme.spacing(4) }} - /> - )} +
+ {!isPaidPlan ? ( + + ) : ( + + )} +
); } @@ -714,7 +716,7 @@ export default function AppAuthorizationDialog({ open, onClose }: AppAuthorizati ) : null} - + @@ -730,7 +732,10 @@ export default function AppAuthorizationDialog({ open, onClose }: AppAuthorizati ) : ( - + )} @@ -745,7 +750,7 @@ export default function AppAuthorizationDialog({ open, onClose }: AppAuthorizati /> ) : ( - + )} diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/PageOptionsPanel.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/PageOptionsPanel.tsx index b06261ce155..d5c511c1e78 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/PageOptionsPanel.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/PageOptionsPanel.tsx @@ -1,8 +1,8 @@ import { Stack, + Tooltip, Typography, Divider, - Tooltip, Link, ToggleButtonGroup, ToggleButton, @@ -19,8 +19,8 @@ import { usePageEditorState } from './PageEditorProvider'; import UrlQueryEditor from './UrlQueryEditor'; import NodeNameEditor from '../NodeNameEditor'; import PageTitleEditor from '../PageTitleEditor'; -import { UpgradeAlert } from '../UpgradeAlert'; import PageDisplayNameEditor from '../PageDisplayNameEditor'; +import { UpgradeChip } from '../UpgradeNotification'; const PAGE_DISPLAY_OPTIONS: { value: appDom.PageDisplayMode; label: string }[] = [ { value: 'shell', label: 'App shell' }, @@ -79,14 +79,14 @@ export default function PageOptionsPanel() { return ( - Page: + Page
- Display mode: + Display mode
- Authorization: + + Authorization + {!isPaidPlan ? ( + + ) : null} + + {isPaidPlan ? ( - ) : ( - - )} + ) : null}
{appDom.isCodePage(page) ? null : (
- Page State: + Page State
)} diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/UpgradeAlert.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/UpgradeAlert.tsx deleted file mode 100644 index 33ecb2a1a03..00000000000 --- a/packages/toolpad-studio/src/toolpad/AppEditor/UpgradeAlert.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import Alert, { AlertColor } from '@mui/material/Alert'; -import { SxProps, Theme } from '@mui/system'; -import Button from '@mui/material/Button'; -import OpenInNewIcon from '@mui/icons-material/OpenInNew'; -import { UPGRADE_URL } from '../../constants'; - -export function UpgradeAlert({ - type, - feature, - warning, - hideAction, - sx, -}: { - type?: AlertColor; - feature?: string; - warning?: string; - hideAction?: boolean; - sx?: SxProps; -}) { - let alert = `This feature requires a paid plan.`; - if (warning) { - alert = warning; - } - if (feature) { - alert = `${feature} requires a paid plan.`; - } - - return ( - - Upgrade - - - ) - } - > - {alert} - - ); -} diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/UpgradeNotification.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/UpgradeNotification.tsx new file mode 100644 index 00000000000..6e5e50e8a7b --- /dev/null +++ b/packages/toolpad-studio/src/toolpad/AppEditor/UpgradeNotification.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; +import Alert, { AlertColor } from '@mui/material/Alert'; +import Button from '@mui/material/Button'; +import Chip from '@mui/material/Chip'; +import Tooltip from '@mui/material/Tooltip'; +import { SxProps } from '@mui/system'; +import OpenInNewIcon from '@mui/icons-material/OpenInNew'; +import { UPGRADE_URL } from '../../constants'; + +export interface UpgradeAlertProps { + sx?: SxProps; + type?: AlertColor; + action?: boolean; + message?: string; +} + +export function UpgradeAlert({ sx, type, action, message }: UpgradeAlertProps) { + return ( + } + > + Upgrade + + ) : null + } + > + {message} + + ); +} + +export interface UpgradeChipProps { + sx?: SxProps; + message?: string; + url?: string; +} + +export function UpgradeChip({ + sx, + message = `This feature requires a paid plan.`, + url = UPGRADE_URL, +}: UpgradeChipProps) { + return ( + + + + ); +}