Invite User: Add invite user button in mega menu and command palette (#103934)

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(
               ))}
             </ul>
           </ScrollContainer>
+          {shouldRenderInviteUserButton && (
+            <div className={styles.inviteNewMemberButton}>
+              <InviteUserButton />
+            </div>
+          )}
         </nav>
       </div>
     );
@@ -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',

public/app/core/components/AppChrome/TopBar/InviteUserButton.tsx

@@ -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) ? (
-    <Box paddingLeft={1} gap={2} alignItems="center" display="flex">
-      <Button
-        icon="add-user"
-        size="sm"
-        variant="secondary"
-        fill="solid"
-        onClick={() => {
-          reportInteraction('invite_user_button_clicked', {
-            placement: 'top_bar_right',
-          });
-
-          const url = getExternalUserMngLinkUrl('invite-user-top-bar');
-          window.open(url.toString(), '_blank');
-        }}
-        tooltip={t('navigation.invite-user.invite-tooltip', 'Invite new member')}
-      >
-        {t('navigation.invite-user.invite-button', 'Invite')}
-      </Button>
-      <NavToolbarSeparator />
-    </Box>
-  ) : null;
-}

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({
             </Dropdown>
           )}
           <NavToolbarSeparator />
-          {config.featureToggles.inviteUserExperimental && !isSmallScreen && <InviteUserButton />}
           {config.featureToggles.extensionSidebar && !isSmallScreen && <ExtensionToolbarItem />}
           {!showToolbarLevel && actions}
           {!contextSrv.user.isSignedIn && <SignInLink />}

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 (
+    <Button
+      icon="add-user"
+      size="sm"
+      variant="secondary"
+      fill="solid"
+      fullWidth
+      onClick={() => {
+        performInviteUserClick('bottom_mega_menu', 'invite-user-bottom-mega-menu');
+      }}
+    >
+      {t('navigation.invite-user.invite-new-member-button', 'Invite new member')}
+    </Button>
+  );
+}

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');
+};

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];
 };

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