Help needed: porting classic admin plugin that hides toolbar buttons → Pimcore Studio UI (React + TypeScript)

[Chauhan-Mukesh]

Hi everyone

I have a working classic-admin JS plugin (ExtJS) that hides Save / Save & Publish / Unpublish / Delete / Trace buttons for published master data objects. I tried to port it to Studio UI (React + TypeScript) using componentRegistry.registerToSlot(...) and a DOM-based HideToolbarButton component, but it “works somehow” and feels fragile. I’m asking the Pimcore / Studio UI crowd for recommended patterns, correct extension points, and fixes for the TypeScript implementation (avoid brittle DOM hacks, proper lifecycle, preferred APIs to control toolbar/menu items).

---

Environment

• Pimcore 12
• Studio UI bundle: Studio UI 2025.2

---

What I want

When opening a DataObject editor:

• If object is a “master/top-level product class” (server flags via /getGenericTypeAllowed?id= returns false) and object is published === true, hide toolbar actions: Save, Save & Publish, Unpublish, Delete (and context menu Delete/Rename).
• Keep normal behavior for unpublished objects and for non-master classes.

---

Classic admin code (works in “admin classic” ExtJS)

/* 
This is custom plugin to hide the save and publish, unpublished and 
Trace/Delete button for the master data objects which are published.
Intention is to restrict the user to make any changes to the master data object 
which is already Published.
*/
pimcore.registerNS("pimcore.plugin.masterDataEvent");

pimcore.plugin.masterDataEvent = Class.create({
    initialize: function () {

        this.accessConfig = [];
        this.roles = [];

        document.addEventListener(
            pimcore.events.postOpenObject,
            this.postOpenObject.bind(this)
        );
    },


    postOpenObject: function (e) {
        // Validate event details: Must be an object type and contain data.
        if(e?.detail?.type !== "object" || e?.detail?.object?.data === undefined)
        {
            return;
        }

        const currentObject = e.detail.object;
        const className = e.detail.object.data.general.className;
        const reqURL = ["/getGenericTypeAllowed?id=", className].join("");
        /*
            Ajax request to check if the object is top level product claas or not.
            based on the object, responseText will contain true or false.
            if responseText is false, then it will not a top level product class 
            and buttons will be hide based on the published status of the object.
        */

        // Parse the object's full path into an array.
        const objectPath = currentObject.data.general.fullpath;
        let pathArray = objectPath.split('/').filter(item => item !== '');

        let mainParentFolder = "";
        if(pathArray.length > 2){
            mainParentFolder = pathArray[1];
        }
    
        // Verify user permission to delete the object.
        let deletePermission = this.varifyObjectPermission(mainParentFolder, 'delete');

        // Determine workflow status.
        let workflowStatus = false;

        if(currentObject.data?.data?.workflowStatus){
            const workflowStatusText = currentObject.data.data.workflowStatus;
            if(workflowStatusText == 'working' || workflowStatusText == 'Not Applicable'){
                workflowStatus = true;
            }
        }

        // Ensure that published property exists before proceeding.
        if (currentObject?.edit?.object?.data?.general?.published === undefined ) { 
            return;
        }
        const isPublished = currentObject.edit.object.data.general.published;

        // Loop through the toolbar buttons and hide those that match.
        const toolbar = e.detail.object.toolbar;
        const buttons = toolbar.items.items;

        // Make the Ajax request (synchronously).
        Ext.Ajax.request({
            url: reqURL,
            method: "GET",
            scope: this,
            async: false,
            success: function (response) {
                if(response.responseText == "false" && currentObject.edit.object.data.general.published == true)
                {
                    // List of buttons that may need to be hidden.
                    let buttonsTobeHide = ["Save", "Save & Publish", "Unpublish", "Delete"];

                    // Adjust buttons to hide based on delete permission and working state.
                    if (isPublished) {
                        // Only hide "Delete" if the user lacks permission or working state is not enabled.
                        if (!deletePermission || !workflowStatus) {
                            buttonsTobeHide = buttonsTobeHide.filter(item => item !== "Delete");
                        }
                    }
                    
                    // Loop through the toolbar buttons and hide those that match.
                    const buttons = e.detail.object.toolbar.items.items;
                    for (let i = 0; i < buttons.length; i++) {
                        if(buttons[i].initialConfig.text != 'undefined' && buttonsTobeHide.includes(buttons[i].initialConfig.text))
                        {
                            buttons[i].hide();
                        }
                        else if(buttonsTobeHide.includes(buttons[i].initialConfig.tooltip))
                        {
                            buttons[i].hide();
                        }
                    }
                }
            },
        });
    },


    getRoles: function () {
        Ext.Ajax.request({
            url: '/admin/get-pimcore-roles',
            method: "GET",
            async: false, // Synchronous request
            success: (response) => {
                const res = Ext.decode(response.responseText);
                this.roles = res.roles;
            },
            failure: (error) => {
                console.error("Error retrieving roles list:", error);
            }
        });
    },
});

var masterDataEventPlugin = new pimcore.plugin.masterDataEvent();

---

What I already attempted in Studio UI (React + TS)

(index.ts, module registration, module file and component below)

index.ts

import { type IAbstractPlugin } from '@pimcore/studio-ui-bundle'
import { HideDataObjectToolbarButtonsExtension } from './modules/-hide-data-object-toolbar-button-extension'

export const DataObjectToolbarPlugin: IAbstractPlugin = {
  name: 'DataObjectToolbarPlugin',

  onStartup ({ moduleSystem }) {
    moduleSystem.registerModule(HideDataObjectToolbarButtonsExtension)
  }
}

hideModule.ts

import { type AbstractModule, container } from '@pimcore/studio-ui-bundle'
import { serviceIds } from '@pimcore/studio-ui-bundle/app'
import { componentConfig, type ComponentRegistry } from '@pimcore/studio-ui-bundle/modules/app'
import HideToolbarButton from '../components/-hide-toolbar-button'
import { Toolbar } from '@pimcore/studio-ui-bundle/components'

export const HideDataObjectToolbarButtonsExtension: AbstractModule = {
  onInit () {
    const componentRegistry = container.get<ComponentRegistry>(serviceIds['App/ComponentRegistry/ComponentRegistry'])
    // We register into BOTH slots so we can affect context menu (left) and save buttons (right)
    const leftSlot = componentConfig.dataObject.editor.toolbar.slots.left.name
    const rightSlot = componentConfig.dataObject.editor.toolbar.slots.right.name

    // Highest priority so effect runs after everything rendered
    componentRegistry.registerToSlot(leftSlot, {
      name: '-hide-data-object-toolbar-button-left',
      component: HideToolbarButton,
      priority: Number.MAX_SAFE_INTEGER
    })

    componentRegistry.registerToSlot(rightSlot, {
      name: '-hide-data-object-toolbar-button-right',
      component: HideToolbarButton,
      priority: Number.MAX_SAFE_INTEGER
    })
  }
}

hideComponent.tsx

import React, { useEffect, useRef } from 'react'
import { useDataObject, useDataObjectDraft } from '@pimcore/studio-ui-bundle/modules/data-object'
import { useTranslation } from 'react-i18next'

const HideToolbarButton: React.FC = () => {
  const { id } = useDataObject()
  const { dataObject } = useDataObjectDraft(id ?? 0)
  const { t } = useTranslation()
  const isPublished = dataObject?.published === true

  // Translation (fallback to key if missing)
  const saveDraftText = t('toolbar.save-draft')
  const observerRef = useRef<MutationObserver | null>(null)

  useEffect(() => {
    if (!isPublished) {
      // On unpublish show back anything we hid earlier
      showPreviouslyHidden()
      disconnectObserver()
      return
    }

    // Published -> set observer
    applyInitialHide()
    connectObserver()

    return () => {
      disconnectObserver()
    }
  }, [isPublished, saveDraftText])

  function connectObserver (): void {
    disconnectObserver()
    observerRef.current = new MutationObserver(mutations => {
      for (const m of mutations) {
        console.log('Mutation observed:', m)
        if (m.type === 'childList' && (m.addedNodes.length > 0)) {
          scanAndHide()
        }
      }
    })
    observerRef.current.observe(document.body, { childList: true, subtree: true })
  }

  function disconnectObserver (): void {
    if (observerRef.current) {
      observerRef.current.disconnect()
      observerRef.current = null
    }
  }

  function applyInitialHide (): void {
    scanAndHide()
  }

  function showPreviouslyHidden (): void {
    document.querySelectorAll('[data-hide="true"]').forEach(el => {
      (el as HTMLElement).style.display = ''
      el.removeAttribute('data-hide')
    })
  }

  function hideEl (el: Element | null | undefined): void {
    if (el && el instanceof HTMLElement && el.style.display !== 'none') {
      el.style.display = 'none'
      el.setAttribute('data-hide', 'true')
    }
  }

  const targetActionKeys = ['delete', 'rename']

  console.log('targetActionKeys=', targetActionKeys)

  function isDeleteOrRenameNode (node: HTMLElement): boolean {
    const dataMenuId = node.getAttribute('data-menu-id') || node.getAttribute('data-key')
    if (dataMenuId && targetActionKeys.includes(dataMenuId)) return true
    const text = normalizeText(node.innerText)
    // Fallback: match translated labels if available
    if (targetActionKeys.some(k => text.includes(k))) return true
    if (text.includes(t('delete')) || text.includes(t('rename'))) return true
    return false
  }

  function normalizeText (txt: string): string {
    return (txt || '').toLowerCase().trim()
  }

  function scanAndHide (): void {
    document.querySelectorAll('li[role="menuitem"], div[role="menuitem"]').forEach(el => {
      const h = el as HTMLElement
      if (isDeleteOrRenameNode(h)) {
        hideEl(h)
      }
    })

    // Save Draft button(s)
    const saveDraftNormalized = normalizeText(saveDraftText)
    document.querySelectorAll('button').forEach(btn => {
      const text = normalizeText(btn.textContent || '')
      // Accept both translated text and raw key (if i18n missing)
      if (text === saveDraftNormalized || text === 'toolbar.save-draft') {
        hideEl(btn)
      }
    })
  }

  return null
}

export default HideToolbarButton

Problem with the React/TS attempt:

• It “works sometimes” — but:
  • It relies on global MutationObserver and fragile string matching of labels.
  • Uses DOM style.display = 'none' (not ideal).
  • It does synchronous server calls in classic, but my Studio UI code currently doesn’t fetch the /getGenericTypeAllowed check (I plan to add that).
  • I’m not sure if there is a better extension point: maybe a proper API to modify toolbar config or a clean way to register a “filter” for toolbar/menu items instead of DOM hacking.

---

Questions / requests for the community

1. Is there a recommended Studio UI API to hide or disable toolbar buttons and context menu items programmatically (preferably without DOM mutation)? If yes, pointer to docs or examples appreciated.
2. Should I be using componentRegistry.override / replace (or a different API) instead of registering a component to the toolbar slot and then mutating DOM?
3. Is componentConfig.dataObject.editor.toolbar.slots.* the right place to register a UI extension for toolbar buttons? Any pitfalls I missed?
4. If DOM observation remains the only practical approach, what are best practices to make it robust and performant? (exact selectors, avoid global observe, debounce, restore state reliably)
5. How should I perform the server-side check (/getGenericTypeAllowed?id=) in Studio UI — which service is recommended for HTTP calls? (container-provided client, or fetch is OK?)
6. Any suggestions for matching the right toolbar buttons / context menu items reliably (data attributes to prefer, i18n-safe keys, menu ids in Studio UI)?
7. If you need code snippets (fixed/cleaned TSX), I can paste my improved version — would appreciate review.

---

What I’d like help with

• Is there a cleaner way to directly control toolbar items in Studio UI (e.g. via toolbar API or component override) so I don’t need any MutationObserver at all?
• If DOM matching is necessary, are there known stable attributes (data-key / data-menu-id / data-action / aria-label) I should rely on in Studio UI?
• Any reviewers willing to point out edge-cases in the improved TSX above?

If anyone has a short example showing how to override a toolbar button visibility with componentRegistry or moduleSystem (not a DOM hack), please paste it — that’s exactly what I want.

Thanks — I’ll paste any follow-ups or additional logs if needed.