Merge pull request #4165 from ProjectMirador/pluginTarget

Allow pluginTarget to be passed as a prop to WindowTopBarPluginMenu

Author: jcoyne

__tests__/src/components/WindowTopBarPluginMenu.test.js

@@ -62,4 +62,24 @@ describe('WindowTopBarPluginMenu', () => {
       expect(screen.queryByRole('menu')).not.toBeInTheDocument();
     });
   });
+
+  describe('pluginTarget prop', () => {
+    it('passes the pluginTarget to usePlugins', () => {
+      const spy = vi.mocked(usePlugins);
+      spy.mockReturnValue({ PluginComponents: [mockComponentA] });
+
+      render(<Subject pluginTarget="CustomPluginTarget" />);
+
+      expect(spy).toHaveBeenCalledWith('CustomPluginTarget');
+    });
+
+    it('defaults pluginTarget to WindowTopBarPluginMenu if not provided', () => {
+      const spy = vi.mocked(usePlugins);
+      spy.mockReturnValue({ PluginComponents: [mockComponentA] });
+
+      render(<Subject />);
+
+      expect(spy).toHaveBeenCalledWith('WindowTopBarPluginMenu');
+    });
+  });
 });

src/components/WindowTopBarPluginMenu.jsx

@@ -7,20 +7,19 @@ import MiradorMenuButton from '../containers/MiradorMenuButton';
 import { PluginHook } from './PluginHook';
 import WorkspaceContext from '../contexts/WorkspaceContext';
 import { usePlugins } from '../extend/usePlugins';
-
 /**
  *
  */
 export function WindowTopBarPluginMenu({
-  windowId, menuIcon = <MoreVertIcon />,
+  windowId, menuIcon = <MoreVertIcon />, pluginTarget = 'WindowTopBarPluginMenu', 
 }) {
   const { t } = useTranslation();
   const container = useContext(WorkspaceContext);
   const pluginProps = arguments[0]; // eslint-disable-line prefer-rest-params
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
   const windowPluginMenuId = useId();
-  const { PluginComponents } = usePlugins('WindowTopBarPluginMenu');
+  const { PluginComponents } = usePlugins(pluginTarget);
 
   /** */
   const handleMenuClick = (event) => {
@@ -63,7 +62,7 @@ export function WindowTopBarPluginMenu({
         open={open}
         onClose={handleMenuClose}
       >
-        <PluginHook targetName="WindowTopBarPluginMenu" handleClose={handleMenuClose} {...pluginProps} />
+        <PluginHook targetName={pluginTarget} handleClose={handleMenuClose} {...pluginProps} />
       </Menu>
     </>
   );
@@ -74,5 +73,6 @@ WindowTopBarPluginMenu.propTypes = {
   container: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   menuIcon: PropTypes.element,
   open: PropTypes.bool,
+  pluginTarget: PropTypes.string,
   windowId: PropTypes.string.isRequired,
 };