From 84ffe27f71769fe6b4700092aefbf0137c09793b Mon Sep 17 00:00:00 2001
From: Juan Cabanas <juan.cabanas@grafana.com>
Date: Tue, 15 Apr 2025 00:08:49 -0300
Subject: [PATCH] Invite User: Add invite user button in quick add dropdown
 menu (#104004)

---
 .../AppChrome/QuickAdd/QuickAdd.tsx           | 38 +++++++++++++++----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx b/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx
index a7e5e6ac5fe..269ce8f9471 100644
--- a/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx
+++ b/public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx
@@ -2,9 +2,11 @@ import { useMemo, useState } from 'react';
 
 import { reportInteraction } from '@grafana/runtime';
 import { Menu, Dropdown, ToolbarButton } from '@grafana/ui';
+import { getExternalUserMngLinkUrl } from 'app/features/users/utils';
 import { useSelector } from 'app/types';
 
 import { t } from '../../../internationalization';
+import { performInviteUserClick, shouldRenderInviteUserButton } from '../../InviteUserButton/utils';
 import { NavToolbarSeparator } from '../NavToolbar/NavToolbarSeparator';
 
 import { findCreateActions } from './utils';
@@ -14,7 +16,23 @@ export interface Props {}
 export const QuickAdd = ({}: Props) => {
   const navBarTree = useSelector((state) => state.navBarTree);
   const [isOpen, setIsOpen] = useState(false);
-  const createActions = useMemo(() => findCreateActions(navBarTree), [navBarTree]);
+  const createActions = useMemo(() => {
+    const actions = findCreateActions(navBarTree);
+
+    if (shouldRenderInviteUserButton) {
+      actions.push({
+        text: t('navigation.invite-user.invite-new-member-button', 'Invite new member'),
+        url: getExternalUserMngLinkUrl('invite-user-top-bar'),
+        target: '_blank',
+        isCreateAction: true,
+        onClick: () => {
+          performInviteUserClick('quick_add_button', 'invite-user-quick-add-button');
+        },
+      });
+    }
+
+    return actions;
+  }, [navBarTree]);
   const showQuickAdd = createActions.length > 0;
 
   if (!showQuickAdd) {
@@ -25,12 +43,18 @@ export const QuickAdd = ({}: Props) => {
     return (
       <Menu>
         {createActions.map((createAction, index) => (
-          <Menu.Item
-            key={index}
-            url={createAction.url}
-            label={createAction.text}
-            onClick={() => reportInteraction('grafana_menu_item_clicked', { url: createAction.url, from: 'quickadd' })}
-          />
+          <div key={index}>
+            {shouldRenderInviteUserButton && index === createActions.length - 1 && <Menu.Divider />}
+            <Menu.Item
+              url={createAction.url}
+              label={createAction.text}
+              target={createAction.target}
+              onClick={() => {
+                reportInteraction('grafana_menu_item_clicked', { url: createAction.url, from: 'quickadd' });
+                createAction.onClick?.();
+              }}
+            />
+          </div>
         ))}
       </Menu>
     );