diff --git a/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx b/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx
index 3dedb1ea0d5..88d61ad0665 100644
--- a/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx
+++ b/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx
@@ -13,6 +13,9 @@ import { setBookmark } from 'app/core/reducers/navBarTree';
import { usePatchUserPreferencesMutation } from 'app/features/preferences/api/index';
import { useDispatch, useSelector } from 'app/types';
+import { InviteUserButton } from '../../InviteUserButton/InviteUserButton';
+import { shouldRenderInviteUserButton } from '../../InviteUserButton/utils';
+
import { MegaMenuHeader } from './MegaMenuHeader';
import { MegaMenuItem } from './MegaMenuItem';
import { usePinnedItems } from './hooks';
@@ -125,6 +128,11 @@ export const MegaMenu = memo(
))}
+ {shouldRenderInviteUserButton && (
+
+
+
+ )}
);
@@ -162,6 +170,11 @@ const getStyles = (theme: GrafanaTheme2) => {
width: MENU_WIDTH,
},
}),
+ inviteNewMemberButton: css({
+ display: 'flex',
+ padding: theme.spacing(1.5, 1, 1.5, 1),
+ borderTop: `1px solid ${theme.colors.border.weak}`,
+ }),
dockMenuButton: css({
display: 'none',
position: 'relative',
diff --git a/public/app/core/components/AppChrome/TopBar/InviteUserButton.tsx b/public/app/core/components/AppChrome/TopBar/InviteUserButton.tsx
deleted file mode 100644
index 452e899ca47..00000000000
--- a/public/app/core/components/AppChrome/TopBar/InviteUserButton.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { reportInteraction } from '@grafana/runtime';
-import { Box, Button } from '@grafana/ui';
-import { config } from 'app/core/config';
-import { t } from 'app/core/internationalization';
-import { contextSrv } from 'app/core/services/context_srv';
-import { getExternalUserMngLinkUrl } from 'app/features/users/utils';
-import { AccessControlAction } from 'app/types';
-
-import { NavToolbarSeparator } from '../NavToolbar/NavToolbarSeparator';
-
-export function InviteUserButton() {
- return config.externalUserMngLinkUrl && contextSrv.hasPermission(AccessControlAction.OrgUsersAdd) ? (
-
-
-
-
- ) : null;
-}
diff --git a/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx b/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx
index 5db53ff730e..4ef7b20ce85 100644
--- a/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx
+++ b/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx
@@ -24,7 +24,6 @@ import { enrichHelpItem } from '../MegaMenu/utils';
import { NavToolbarSeparator } from '../NavToolbar/NavToolbarSeparator';
import { QuickAdd } from '../QuickAdd/QuickAdd';
-import { InviteUserButton } from './InviteUserButton';
import { ProfileButton } from './ProfileButton';
import { SignInLink } from './SignInLink';
import { SingleTopBarActions } from './SingleTopBarActions';
@@ -104,7 +103,6 @@ export const SingleTopBar = memo(function SingleTopBar({
)}
- {config.featureToggles.inviteUserExperimental && !isSmallScreen && }
{config.featureToggles.extensionSidebar && !isSmallScreen && }
{!showToolbarLevel && actions}
{!contextSrv.user.isSignedIn && }
diff --git a/public/app/core/components/InviteUserButton/InviteUserButton.tsx b/public/app/core/components/InviteUserButton/InviteUserButton.tsx
new file mode 100644
index 00000000000..6417bb2a066
--- /dev/null
+++ b/public/app/core/components/InviteUserButton/InviteUserButton.tsx
@@ -0,0 +1,21 @@
+import { Button } from '@grafana/ui';
+import { t } from 'app/core/internationalization';
+
+import { performInviteUserClick } from './utils';
+
+export function InviteUserButton() {
+ return (
+
+ );
+}
diff --git a/public/app/core/components/InviteUserButton/utils.ts b/public/app/core/components/InviteUserButton/utils.ts
new file mode 100644
index 00000000000..708e5ff88d5
--- /dev/null
+++ b/public/app/core/components/InviteUserButton/utils.ts
@@ -0,0 +1,19 @@
+import { reportInteraction } from '@grafana/runtime';
+import { config } from 'app/core/config';
+import { contextSrv } from 'app/core/services/context_srv';
+import { getExternalUserMngLinkUrl } from 'app/features/users/utils';
+import { AccessControlAction } from 'app/types';
+
+export const shouldRenderInviteUserButton =
+ config.featureToggles.inviteUserExperimental &&
+ config.externalUserMngLinkUrl &&
+ contextSrv.hasPermission(AccessControlAction.OrgUsersAdd);
+
+export const performInviteUserClick = (placement: string, cnt: string) => {
+ reportInteraction('invite_user_button_clicked', {
+ placement,
+ });
+
+ const url = getExternalUserMngLinkUrl(cnt);
+ window.open(url.toString(), '_blank');
+};
diff --git a/public/app/features/commandPalette/actions/staticActions.ts b/public/app/features/commandPalette/actions/staticActions.ts
index ca70c8f7c1f..5dd1415a822 100644
--- a/public/app/features/commandPalette/actions/staticActions.ts
+++ b/public/app/features/commandPalette/actions/staticActions.ts
@@ -1,5 +1,6 @@
import { NavModelItem } from '@grafana/data';
import { enrichHelpItem } from 'app/core/components/AppChrome/MegaMenu/utils';
+import { performInviteUserClick, shouldRenderInviteUserButton } from 'app/core/components/InviteUserButton/utils';
import { t } from 'app/core/internationalization';
import { changeTheme } from 'app/core/services/theme';
@@ -99,5 +100,17 @@ export default (navBarTree: NavModelItem[], extensionActions: CommandPaletteActi
const navBarActions = navTreeToActions(navBarTree);
+ if (shouldRenderInviteUserButton) {
+ navBarActions.push({
+ id: 'invite-user',
+ name: t('navigation.invite-user.invite-new-member-button', 'Invite new member'),
+ section: t('command-palette.section.actions', 'Actions'),
+ priority: ACTIONS_PRIORITY,
+ perform: () => {
+ performInviteUserClick('command_palette_actions', 'invite-user-command-palette');
+ },
+ });
+ }
+
return [...globalActions, ...extensionActions, ...navBarActions];
};
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index b2384475698..81e27ce8e1f 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -6012,8 +6012,7 @@
"aria-label": "Help"
},
"invite-user": {
- "invite-button": "Invite",
- "invite-tooltip": "Invite new member"
+ "invite-new-member-button": "Invite new member"
},
"item": {
"add-bookmark": "Add to Bookmarks",