FE: Upsell new permissions (#21408)

* feature permissions upsell

* update link

enterprise/frontend/src/metabase-enterprise/feature_level_permissions/index.ts

 import { hasPremiumFeature } from "metabase-enterprise/settings";
 import { PLUGIN_FEATURE_LEVEL_PERMISSIONS } from "metabase/plugins";
+import { DATA_PERMISSIONS_TOOLBAR_CONTENT } from "metabase/admin/permissions/pages/DataPermissionsPage/DataPermissionsPage";
 import { canAccessDataModel, canAccessDatabaseManagement } from "./utils";
 
 import { getFeatureLevelDataPermissions } from "./permission-management";
@@ -16,6 +17,7 @@ if (hasPremiumFeature("advanced_permissions")) {
 
   PLUGIN_FEATURE_LEVEL_PERMISSIONS.getFeatureLevelDataPermissions = getFeatureLevelDataPermissions;
   PLUGIN_FEATURE_LEVEL_PERMISSIONS.dataColumns = DATA_COLUMNS;
+
   PLUGIN_FEATURE_LEVEL_PERMISSIONS.getDownloadWidgetMessageOverride = getDownloadWidgetMessageOverride;
   PLUGIN_FEATURE_LEVEL_PERMISSIONS.canDownloadResults = canDownloadResults;
 
@@ -26,4 +28,6 @@ if (hasPremiumFeature("advanced_permissions")) {
   PLUGIN_FEATURE_LEVEL_PERMISSIONS.databaseQueryProps = {
     exclude_uneditable: true,
   };
+
+  DATA_PERMISSIONS_TOOLBAR_CONTENT.length = 0;
 }

frontend/src/metabase/admin/permissions/components/PermissionsPageLayout/PermissionsPageLayout.jsx

@@ -4,6 +4,7 @@ import _ from "underscore";
 import { t } from "ttag";
 import { connect } from "react-redux";
 import { push } from "react-router-redux";
+import { withRouter } from "react-router";
 
 import Button from "metabase/core/components/Button";
 import fitViewport from "metabase/hoc/FitViewPort";
@@ -15,16 +16,15 @@ import {
   FullHeightContainer,
   TabsContainer,
   PermissionPageRoot,
-  HelpButton,
   PermissionPageContent,
   PermissionPageSidebar,
   CloseSidebarButton,
+  ToolbarButtonsContainer,
 } from "./PermissionsPageLayout.styled";
 import { PermissionsEditBar } from "./PermissionsEditBar";
 import { useLeaveConfirmation } from "../../hooks/use-leave-confirmation";
-import { withRouter } from "react-router";
 import { clearSaveError } from "../../permissions";
-import Icon from "metabase/components/Icon";
+import { ToolbarButton } from "../ToolbarButton";
 
 const mapDispatchToProps = {
   navigateToTab: tab => push(`/admin/permissions/${tab}`),
@@ -53,6 +53,7 @@ const propTypes = {
   route: PropTypes.object,
   navigateToTab: PropTypes.func.isRequired,
   helpContent: PropTypes.node,
+  toolbarRightContent: PropTypes.node,
 };
 
 function PermissionsPageLayout({
@@ -68,6 +69,7 @@ function PermissionsPageLayout({
   route,
   navigateToLocation,
   navigateToTab,
+  toolbarRightContent,
   helpContent,
 }) {
   const [shouldShowHelp, setShouldShowHelp] = useState(false);
@@ -107,12 +109,16 @@ function PermissionsPageLayout({
 
         <TabsContainer className="border-bottom">
           <PermissionsTabs tab={tab} onChangeTab={navigateToTab} />
-          {helpContent && !shouldShowHelp && (
-            <HelpButton onClick={() => setShouldShowHelp(prev => !prev)}>
-              <Icon name="info" size={20} mr={1} />
-              {t`Permission help`}
-            </HelpButton>
-          )}
+          <ToolbarButtonsContainer>
+            {toolbarRightContent}
+            {helpContent && !shouldShowHelp && (
+              <ToolbarButton
+                text={t`Permission help`}
+                icon="info"
+                onClick={() => setShouldShowHelp(prev => !prev)}
+              />
+            )}
+          </ToolbarButtonsContainer>
         </TabsContainer>
 
         <FullHeightContainer>{children}</FullHeightContainer>

frontend/src/metabase/admin/permissions/components/PermissionsPageLayout/PermissionsPageLayout.styled.jsx

@@ -38,17 +38,6 @@ export const FullHeightContainer = styled.div`
   overflow: hidden;
 `;
 
-export const HelpButton = styled.button`
-  font-family: var(--default-font-family);
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  color: ${color("text-dark")};
-  padding: 0.25rem 1.5rem;
-  font-size: 14px;
-  font-weight: 700;
-`;
-
 export const CloseSidebarButton = styled(Icon)`
   top: 24px;
   right: 24px;
@@ -63,3 +52,9 @@ export const CloseSidebarButton = styled(Icon)`
 `;
 
 CloseSidebarButton.defaultProps = { name: "close" };
+
+export const ToolbarButtonsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 0 1rem;
+`;

frontend/src/metabase/admin/permissions/components/ToolbarButton/ToolbarButton.styled.tsx

+import styled from "@emotion/styled";
+import Icon from "metabase/components/Icon";
+import { color } from "metabase/lib/colors";
+
+export const ToolbarButtonRoot = styled.button`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: ${color("text-dark")};
+  padding: 0.25rem 0.75rem;
+  font-weight: 700;
+  transition: color 200ms;
+
+  &:hover {
+    color: ${color("accent7")};
+  }
+`;
+
+export const ToolbarButtonIcon = styled(Icon)`
+  margin-right: 0.5rem;
+`;

frontend/src/metabase/admin/permissions/components/ToolbarButton/ToolbarButton.tsx

+import React from "react";
+import { ToolbarButtonIcon, ToolbarButtonRoot } from "./ToolbarButton.styled";
+
+interface ToolbarButtonProps {
+  text: string;
+  icon: string;
+  onClick?: () => void;
+}
+
+export const ToolbarButton = ({ onClick, text, icon }: ToolbarButtonProps) => {
+  return (
+    <ToolbarButtonRoot onClick={onClick}>
+      <ToolbarButtonIcon name={icon} size={20} />
+      {text}
+    </ToolbarButtonRoot>
+  );
+};

frontend/src/metabase/admin/permissions/components/ToolbarButton/index.ts

+export * from "./ToolbarButton";

frontend/src/metabase/admin/permissions/components/ToolbarUpsell/ToolbarUpsell.styled.tsx

+import styled from "@emotion/styled";
+
+export const UpsellContent = styled.div`
+  padding: 1rem 1.5rem;
+  line-height: 24px;
+  max-width: 344px;
+`;

frontend/src/metabase/admin/permissions/components/ToolbarUpsell/ToolbarUpsell.tsx

+import React from "react";
+import _ from "underscore";
+import { jt, t } from "ttag";
+
+import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
+import ExternalLink from "metabase/core/components/ExternalLink";
+import MetabaseSettings from "metabase/lib/settings";
+
+import { ToolbarButton } from "../ToolbarButton";
+import { UpsellContent } from "./ToolbarUpsell.styled";
+
+export const ToolbarUpsell = () => {
+  return (
+    <PopoverWithTrigger
+      triggerElement={<ToolbarButton text={t`Get more control`} icon="bolt" />}
+      placement="bottom-end"
+    >
+      <UpsellContent>
+        {jt`${(
+          <ExternalLink href={MetabaseSettings.upgradeUrl()}>
+            {t`Upgrade to Pro or Enterprise`}
+          </ExternalLink>
+        )} and disable download results, control access to the data model, ${(
+          <ExternalLink
+            href={MetabaseSettings.docsUrl(
+              "administration-guide/05-setting-permissions",
+            )}
+          >
+            and more
+          </ExternalLink>
+        )}.`}
+      </UpsellContent>
+    </PopoverWithTrigger>
+  );
+};

frontend/src/metabase/admin/permissions/components/ToolbarUpsell/index.ts

+export * from "./ToolbarUpsell";

frontend/src/metabase/admin/permissions/pages/DataPermissionsPage/DataPermissionsPage.jsx

@@ -15,6 +15,11 @@ import {
 } from "../../permissions";
 import PermissionsPageLayout from "../../components/PermissionsPageLayout/PermissionsPageLayout";
 import { DataPermissionsHelp } from "../../components/DataPermissionsHelp";
+import { ToolbarUpsell } from "../../components/ToolbarUpsell";
+
+export const DATA_PERMISSIONS_TOOLBAR_CONTENT = [
+  <ToolbarUpsell key="upsell" />,
+];
 
 const mapDispatchToProps = {
   loadPermissions: loadDataPermissions,
@@ -76,6 +81,7 @@ function DataPermissionsPage({
       diff={diff}
       isDirty={isDirty}
       route={route}
+      toolbarRightContent={DATA_PERMISSIONS_TOOLBAR_CONTENT}
       helpContent={<DataPermissionsHelp />}
     >
       {children}

frontend/src/metabase/admin/permissions/pages/DataPermissionsPage/index.js

+export { default } from "./DataPermissionsPage";

frontend/src/metabase/admin/permissions/routes.jsx

@@ -6,7 +6,7 @@ import { t } from "ttag";
 import CollectionPermissionsPage from "./pages/CollectionPermissionsPage/CollectionPermissionsPage";
 import DatabasesPermissionsPage from "./pages/DatabasePermissionsPage/DatabasesPermissionsPage";
 import GroupsPermissionsPage from "./pages/GroupDataPermissionsPage/GroupsPermissionsPage";
-import DataPermissionsPage from "./pages/DataPermissionsPage/DataPermissionsPage";
+import DataPermissionsPage from "./pages/DataPermissionsPage";
 import {
   PLUGIN_ADMIN_PERMISSIONS_TABLE_ROUTES,
   PLUGIN_ADMIN_PERMISSIONS_TABLE_GROUP_ROUTES,