From e50ce1b101fc2c6805415b00193b108ab045d820 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 9 Oct 2024 07:24:20 -0700
Subject: [PATCH] chore(clerk-js): Update `OrganizationSwitcher` popover action
 to include label (#4304)

---
 .changeset/lemon-terms-begin.md                 |  5 +++++
 .../OrganizationSwitcherPopover.tsx             | 17 +----------------
 2 files changed, 6 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/lemon-terms-begin.md

diff --git a/.changeset/lemon-terms-begin.md b/.changeset/lemon-terms-begin.md
new file mode 100644
index 0000000000..f15bf18817
--- /dev/null
+++ b/.changeset/lemon-terms-begin.md
@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Update `OrganizationSwitcher` popover action to include label
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index 7edecbf80e..523a35552d 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -8,7 +8,6 @@ import { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';
 import { descriptors, Flex, localizationKeys } from '../../customizables';
 import {
   Actions,
-  ExtraSmallAction,
   OrganizationPreview,
   PersonalWorkspacePreview,
   PopoverCard,
@@ -105,20 +104,6 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
       });
     };
 
-    const manageOrganizationSmallIconButton = (
-      <ExtraSmallAction
-        elementDescriptor={descriptors.organizationSwitcherPopoverActionButton}
-        elementId={descriptors.organizationSwitcherPopoverActionButton.setId('manageOrganization')}
-        iconBoxElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIconBox}
-        iconBoxElementId={descriptors.organizationSwitcherPopoverActionButtonIconBox.setId('manageOrganization')}
-        iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}
-        iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('manageOrganization')}
-        icon={CogFilled}
-        onClick={() => handleItemClick()}
-        trailing={<NotificationCountBadgeManageButton />}
-      />
-    );
-
     const manageOrganizationButton = (
       <SmallAction
         elementDescriptor={descriptors.organizationSwitcherPopoverActionButton}
@@ -195,7 +180,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
               padding: `${t.space.$4} ${t.space.$5}`,
             })}
           />
-          <Actions role='menu'>{manageOrganizationSmallIconButton}</Actions>
+          <Actions role='menu'>{manageOrganizationButton}</Actions>
         </Flex>
       );