nitinandGitHub
4649736d49
https://github.com/user-attachments/assets/fe1461c7-0d5c-4c6f-8c2e-2cf569e7de90 ## What Fix `RECORD_SELECTION` items leaking into the command menu when nothing is selected, and unify how the menu renders in normal vs edit mode. ## The bug `RECORD_SELECTION`-availability items were showing up even when `numberOfSelectedRecords === 0`. New util `doesCommandMenuItemMatchSelectionState` gates them, applied consistently in the runtime provider and the editor. ## The refactor `PinnedCommandMenuItemButtonsEditMode` was a 140-line near-duplicate of `PinnedCommandMenuItemButtons` with its own (drifting) filter logic. Killed it. Edit mode now flows through the same `CommandMenuContextProvider` with a new `isInPreviewMode` flag — one filter chain, one rendering path. ## Behavior in edit mode **Header (pinned buttons in page header):** - Runs the full filter chain — object metadata, page type, selection state, page layout, *and the conditional availability expression* - Buttons render at full styling but are inert via `pointer-events: none` + `cursor: not-allowed` - Preview now reflects exactly what users will see on the live page (not a grayed-out approximation) **Side panel editor:** - New `useEditableCommandMenuItems` hook - Same filters as runtime *minus* the conditional availability expression and `FALLBACK` items — so it surfaces everything that's actually configurable for this page context - Still gates on selection state — if no records selected, `RECORD_SELECTION` items are hidden from the editor too. Open to feedback if we'd rather always show them so users can pin them ahead of time. ## Misc - `usePinnedCommandMenuItemsInlineLayout` — visible count now waits until every item is measured before committing. Fixes a flash of wrong counts on mount/resize - Renamed `useCommandMenuContextApi` → `useCurrentCommandMenuContextApi` — name now conveys it reads from the *current* scoped context store - Copy: "Records selected" → "Record(s) selected"
39 lines
2.1 KiB
TypeScript
39 lines
2.1 KiB
TypeScript
import { commandMenuItemsDraftState } from '@/command-menu-item/edit/states/commandMenuItemsDraftState';
|
|
import { useCurrentCommandMenuContextApi } from '@/command-menu-item/hooks/useCurrentCommandMenuContextApi';
|
|
import { doesCommandMenuItemMatchObjectMetadataId } from '@/command-menu-item/utils/doesCommandMenuItemMatchObjectMetadataId';
|
|
import { doesCommandMenuItemMatchPageLayoutId } from '@/command-menu-item/utils/doesCommandMenuItemMatchPageLayoutId';
|
|
import { doesCommandMenuItemMatchPageType } from '@/command-menu-item/utils/doesCommandMenuItemMatchPageType';
|
|
import { doesCommandMenuItemMatchSelectionState } from '@/command-menu-item/utils/doesCommandMenuItemMatchSelectionState';
|
|
import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState';
|
|
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
|
|
import { useMemo } from 'react';
|
|
import { CommandMenuItemAvailabilityType } from '~/generated-metadata/graphql';
|
|
|
|
export const useEditableCommandMenuItems = () => {
|
|
const commandMenuContextApi = useCurrentCommandMenuContextApi();
|
|
const commandMenuItemsDraft = useAtomStateValue(commandMenuItemsDraftState);
|
|
const currentPageLayoutId = useAtomStateValue(currentPageLayoutIdState);
|
|
|
|
return useMemo(() => {
|
|
const currentObjectMetadataItemId =
|
|
commandMenuContextApi.objectMetadataItem.id;
|
|
const hasSelectedRecords =
|
|
commandMenuContextApi.numberOfSelectedRecords > 0;
|
|
|
|
return (commandMenuItemsDraft ?? [])
|
|
.filter(
|
|
doesCommandMenuItemMatchObjectMetadataId(currentObjectMetadataItemId),
|
|
)
|
|
.filter(doesCommandMenuItemMatchPageType(commandMenuContextApi.pageType))
|
|
.filter(doesCommandMenuItemMatchSelectionState(hasSelectedRecords))
|
|
.filter(
|
|
(item) =>
|
|
item.availabilityType !== CommandMenuItemAvailabilityType.FALLBACK,
|
|
)
|
|
.filter(doesCommandMenuItemMatchPageLayoutId(currentPageLayoutId))
|
|
.sort(
|
|
(firstItem, secondItem) => firstItem.position - secondItem.position,
|
|
);
|
|
}, [commandMenuItemsDraft, commandMenuContextApi, currentPageLayoutId]);
|
|
};
|