2439 improve command menu item display in right panel (#21020)

## Before

<img width="1512" height="389" alt="image"
src="https://github.com/user-attachments/assets/33274356-fb99-4a02-baa7-c324e6d151c6"
/>


## After

<img width="1512" height="357" alt="image"
src="https://github.com/user-attachments/assets/c0affb71-e920-4d64-b2f0-1bed53209ea5"
/>
This commit is contained in:
martmull
2026-05-29 13:37:27 +02:00
committed by GitHub
parent 10c0bed462
commit 4e5d47168c
9 changed files with 102 additions and 24 deletions
@@ -1,3 +1,5 @@
import { AppMenuItem } from '@/applications/components/AppMenuItem';
import { useIsThirdPartyApplication } from '@/applications/hooks/useIsThirdPartyApplication';
import { CommandMenuContext } from '@/command-menu-item/contexts/CommandMenuContext';
import { CommandListItemLoader } from '@/command-menu-item/display/components/CommandListItemLoader';
import { interpolateCommandMenuItemFields } from '@/command-menu-item/display/utils/interpolateCommandMenuItemFields';
@@ -101,6 +103,8 @@ const CommandMenuItemSelectableRenderer = ({
selectableListInstanceId,
);
const isThirdPartyApp = useIsThirdPartyApplication(item.applicationId);
const onItemClick = () => {
if (disabled) {
return;
@@ -108,6 +112,20 @@ const CommandMenuItemSelectableRenderer = ({
handleClick();
};
if (isThirdPartyApp) {
return (
<SelectableListItem itemId={item.id} onEnter={onItemClick}>
<AppMenuItem
applicationId={item.applicationId}
text={getCommandMenuItemLabel(label)}
onClick={disabled ? undefined : handleClick}
focused={!disabled && isSelectedItemId}
disabled={disabled}
/>
</SelectableListItem>
);
}
if (displayType === 'listItem') {
const loaderComponent =
disabled && showDisabledLoader ? (
@@ -3,6 +3,7 @@ import { gql } from '@apollo/client';
export const COMMAND_MENU_ITEM_FRAGMENT = gql`
fragment CommandMenuItemFields on CommandMenuItem {
id
applicationId
workflowVersionId
frontComponentId
frontComponent {