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",