[ui] Add a chip to indicate pro features

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 { UpgradeNotification } from './UpgradeNotification';
 
 interface AuthProviderOption {
   name: string;
@@ -153,7 +153,9 @@ export function AppAuthenticationEditor() {
                 <Checkbox checked={authProviders.indexOf(value as appDom.AuthProvider) > -1} />
                 {icon}
                 <Typography mx={1}>{name}</Typography>
-                {hasRoles && !isPaidPlan ? <UpgradeAlert type="warning" feature={name} /> : null}
+                {hasRoles && !isPaidPlan ? (
+                  <UpgradeNotification variant="alert" type="warning" feature={name} />
+                ) : null}
               </Stack>
             </MenuItem>
           ))}
@@ -184,19 +186,22 @@ export function AppAuthenticationEditor() {
           placeholder="example.com"
         />
       ))}
-      {!isPaidPlan ? (
-        <UpgradeAlert
-          type="info"
-          feature="Using authentication with a few specific providers (Azure AD)"
-          sx={{ position: 'absolute', bottom: (theme) => theme.spacing(4) }}
-        />
-      ) : (
-        <UpgradeAlert
-          type="warning"
-          warning="You are using features that are not covered by our MIT License. You will have to buy a license to use them in production."
-          sx={{ position: 'absolute', bottom: (theme) => theme.spacing(4) }}
-        />
-      )}
+      <div style={{ position: 'absolute', bottom: 0 }}>
+        {!isPaidPlan ? (
+          <UpgradeNotification
+            variant="alert"
+            type="info"
+            feature="Using authentication with a few specific providers (Azure AD)"
+            action
+          />
+        ) : (
+          <UpgradeNotification
+            variant="alert"
+            type="warning"
+            warning="You are using features that are not covered by our MIT License. You will have to buy a license to use them in production."
+          />
+        )}
+      </div>
     </Stack>
   );
 }
@@ -713,7 +718,7 @@ export default function AppAuthorizationDialog({ open, onClose }: AppAuthorizati
               ) : null}
             </TabList>
           </Box>
-          <DialogContent sx={{ minHeight: 480 }}>
+          <DialogContent sx={{ minHeight: 480, position: 'relative' }}>
             <TabPanel disableGutters value="authentication">
               <AppAuthenticationEditor />
             </TabPanel>
@@ -729,7 +734,11 @@ export default function AppAuthorizationDialog({ open, onClose }: AppAuthorizati
                     <AppRolesEditor onRowUpdateError={handleRowUpdateError} />
                   </React.Fragment>
                 ) : (
-                  <UpgradeAlert type="info" feature="Role based access control" />
+                  <UpgradeNotification
+                    variant="alert"
+                    type="info"
+                    feature="Role based access control"
+                  />
                 )}
               </TabPanel>
               <TabPanel disableGutters value="roleMappings">
@@ -744,7 +753,7 @@ export default function AppAuthorizationDialog({ open, onClose }: AppAuthorizati
                     />
                   </React.Fragment>
                 ) : (
-                  <UpgradeAlert type="info" feature="Role mapping" />
+                  <UpgradeNotification variant="alert" type="info" feature="Role mapping" />
                 )}
               </TabPanel>
             </React.Fragment>

packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/PageOptionsPanel.tsx

@@ -1,5 +1,4 @@
 import {
-  Chip,
   Stack,
   Tooltip,
   Typography,
@@ -21,6 +20,7 @@ import UrlQueryEditor from './UrlQueryEditor';
 import NodeNameEditor from '../NodeNameEditor';
 import PageTitleEditor from '../PageTitleEditor';
 import PageDisplayNameEditor from '../PageDisplayNameEditor';
+import { UpgradeNotification } from '../UpgradeNotification';
 
 const PAGE_DISPLAY_OPTIONS: { value: appDom.PageDisplayMode; label: string }[] = [
   { value: 'shell', label: 'App shell' },
@@ -124,34 +124,7 @@ export default function PageOptionsPanel() {
       <div>
         <Typography variant="overline">
           Authorization{' '}
-          {!isPaidPlan ? (
-            <Tooltip
-              title={
-                <Typography variant="inherit">
-                  Only available in paid plans. Click to learn more.
-                </Typography>
-              }
-            >
-              <Chip
-                variant="outlined"
-                color="primary"
-                component={'a'}
-                href="https://mui.com/toolpad/studio/concepts/rbac/"
-                target="_blank"
-                rel="noopener"
-                sx={{
-                  height: '1.5rem',
-                  fontSize: 'inherit',
-                  verticalAlign: 'inherit',
-                  mx: '0.2rem',
-                  '& :hover': {
-                    cursor: 'pointer',
-                  },
-                }}
-                label="Pro"
-              />
-            </Tooltip>
-          ) : null}
+          {!isPaidPlan ? <UpgradeNotification variant="chip" feature="Authorization" /> : null}
         </Typography>
 
         {isPaidPlan ? (

packages/toolpad-studio/src/toolpad/AppEditor/UpgradeNotification.tsx

@@ -0,0 +1,80 @@
+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, Theme } from '@mui/system';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { UPGRADE_URL } from '../../constants';
+
+export function UpgradeNotification({
+  type,
+  feature,
+  warning,
+  variant,
+  action,
+  sx,
+}: {
+  type?: AlertColor;
+  feature?: string;
+  warning?: string;
+  variant?: 'alert' | 'chip';
+  action?: boolean;
+  sx?: SxProps<Theme>;
+}) {
+  let message = `This feature requires a paid plan.`;
+
+  if (warning) {
+    message = warning;
+  }
+  if (feature) {
+    message = `${feature} requires a paid plan.`;
+  }
+
+  if (variant === 'alert') {
+    return (
+      <Alert
+        severity={type ?? 'info'}
+        sx={{ '.MuiAlert-action': { pt: 0 }, ...sx }}
+        action={
+          action ? (
+            <Button
+              variant="text"
+              sx={{ fontSize: 'inherit' }}
+              href={UPGRADE_URL}
+              target="_blank"
+              rel="noopener"
+              endIcon={<OpenInNewIcon fontSize="small" />}
+            >
+              Upgrade
+            </Button>
+          ) : null
+        }
+      >
+        {message}
+      </Alert>
+    );
+  }
+  if (variant === 'chip') {
+    return (
+      <Tooltip title={`${message} Click to learn more.`}>
+        <Chip
+          variant="outlined"
+          color="primary"
+          component="a"
+          href={UPGRADE_URL}
+          target="_blank"
+          rel="noopener"
+          clickable
+          sx={{
+            height: '1.5rem',
+            fontSize: 'inherit',
+            verticalAlign: 'inherit',
+            mx: '0.2rem',
+          }}
+          label="Pro"
+        />
+      </Tooltip>
+    );
+  }
+}