Skip to content

feat(content-explorer): Disable selection while editing #4317

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mergify merged 1 commit into from
Oct 9, 2025
Merged

feat(content-explorer): Disable selection while editing #4317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@
"@box/languages": "^1.0.0",
"@box/metadata-editor": "^0.122.12",
"@box/metadata-filter": "^1.30.1",
"@box/metadata-view": "^0.54.0",
"@box/metadata-view": "^0.59.0",
"@box/react-virtualized": "^9.22.3-rc-box.10",
"@box/types": "^0.2.1",
"@box/unified-share-modal": "^0.52.0",
Expand Down Expand Up @@ -307,7 +307,7 @@
"@box/item-icon": "^0.27.1",
"@box/metadata-editor": "^0.122.12",
"@box/metadata-filter": "^1.30.1",
"@box/metadata-view": "^0.54.0",
"@box/metadata-view": "^0.59.0",
"@box/react-virtualized": "^9.22.3-rc-box.10",
"@box/types": "^0.2.1",
"@box/unified-share-modal": "^0.52.0",
Expand Down
6 changes: 3 additions & 3 deletions src/elements/common/sub-header/SubHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export interface SubHeaderProps {
onGridViewSliderChange?: (newSliderValue: number) => void;
onItemClick: (id: string | null, triggerNavigationEvent: boolean | null) => void;
onSortChange: (sortBy: string, sortDirection: string) => void;
onMetadataSidePanelToggle?: () => void;
onSidePanelToggle?: () => void;
onUpload: () => void;
onViewModeChange?: (viewMode: ViewMode) => void;
portalElement?: HTMLElement;
Expand All @@ -57,7 +57,7 @@ const SubHeader = ({
onCreate,
onItemClick,
onSortChange,
onMetadataSidePanelToggle,
onSidePanelToggle,
onUpload,
onViewModeChange,
portalElement,
Expand Down Expand Up @@ -115,7 +115,7 @@ const SubHeader = ({
onCreate={onCreate}
onGridViewSliderChange={onGridViewSliderChange}
onSortChange={onSortChange}
onMetadataSidePanelToggle={onMetadataSidePanelToggle}
onSidePanelToggle={onSidePanelToggle}
onUpload={onUpload}
onViewModeChange={onViewModeChange}
portalElement={portalElement}
Expand Down
6 changes: 3 additions & 3 deletions src/elements/common/sub-header/SubHeaderRight.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export interface SubHeaderRightProps {
onCreate: () => void;
onGridViewSliderChange: (newSliderValue: number) => void;
onSortChange: (sortBy: SortBy, sortDirection: SortDirection) => void;
onMetadataSidePanelToggle?: () => void;
onSidePanelToggle?: () => void;
onUpload: () => void;
onViewModeChange?: (viewMode: ViewMode) => void;
portalElement?: HTMLElement;
Expand All @@ -53,7 +53,7 @@ const SubHeaderRight = ({
onCreate,
onGridViewSliderChange,
onSortChange,
onMetadataSidePanelToggle,
onSidePanelToggle,
onUpload,
onViewModeChange,
portalElement,
Expand Down Expand Up @@ -107,7 +107,7 @@ const SubHeaderRight = ({
{bulkItemActions && bulkItemActions.length > 0 && (
<BulkItemActionMenu actions={bulkItemActions} selectedItemIds={selectedItemIds} />
)}
<Button icon={Pencil} size="large" variant="primary" onClick={onMetadataSidePanelToggle}>
<Button icon={Pencil} size="large" variant="primary" onClick={onSidePanelToggle}>
{formatMessage(messages.metadata)}
</Button>
</>
Expand Down
5 changes: 4 additions & 1 deletion src/elements/content-explorer/Content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,15 @@ export interface ContentProps extends Required<ItemEventHandlers>, Required<Item
features?: FeatureConfig;
fieldsToShow?: FieldsToShow;
gridColumnCount?: number;
isEditing?: boolean;
isMedium: boolean;
isSmall: boolean;
isTouch: boolean;
itemActions?: ItemAction[];
metadataTemplate?: MetadataTemplate;
metadataViewProps?: Omit<
MetadataViewContainerProps,
'hasError' | 'currentCollection' | 'metadataTemplate' | 'onMetadataFilter'
'hasError' | 'currentCollection' | 'metadataTemplate' | 'onMetadataFilter' | 'isEditing'
>;
onMetadataFilter?: (fields: ExternalFilterValues) => void;
onMetadataUpdate: (
Expand All @@ -59,6 +60,7 @@ const Content = ({
features,
fieldsToShow = [],
gridColumnCount,
isEditing = false,
metadataTemplate,
metadataViewProps,
onMetadataFilter,
Expand Down Expand Up @@ -94,6 +96,7 @@ const Content = ({
currentCollection={currentCollection}
isLoading={percentLoaded !== 100}
hasError={view === VIEW_ERROR}
isEditing={isEditing}
metadataTemplate={metadataTemplate}
onMetadataFilter={onMetadataFilter}
onSortChange={onSortChange}
Expand Down
105 changes: 65 additions & 40 deletions src/elements/content-explorer/ContentExplorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,12 @@ export interface ContentExplorerProps {
uploadHost?: string;
}

enum SidePanelState {
CLOSED = 'CLOSED',
OPEN = 'OPEN',
EDITING = 'EDITING',
}

type State = {
currentCollection: Collection;
currentOffset: number;
Expand All @@ -182,7 +188,6 @@ type State = {
isCreateFolderModalOpen: boolean;
isDeleteModalOpen: boolean;
isLoading: boolean;
isMetadataSidePanelOpen: boolean;
isPreviewModalOpen: boolean;
isRenameModalOpen: boolean;
isShareModalOpen: boolean;
Expand All @@ -194,6 +199,7 @@ type State = {
searchQuery: string;
selected?: BoxItem;
selectedItemIds: Selection;
sidePanelState: SidePanelState;
sortBy: SortBy | string;
sortDirection: SortDirection;
view: View;
Expand Down Expand Up @@ -310,7 +316,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
isCreateFolderModalOpen: false,
isDeleteModalOpen: false,
isLoading: false,
isMetadataSidePanelOpen: false,
sidePanelState: SidePanelState.CLOSED,
isPreviewModalOpen: false,
isRenameModalOpen: false,
isShareModalOpen: false,
Expand Down Expand Up @@ -1024,21 +1030,17 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
validateSelectedItemIds = (items: BoxItem[]): void => {
const { selectedItemIds } = this.state;

if (selectedItemIds === 'all' || selectedItemIds.size === 0) {
// If all/none items are selected, no need to change anything
return;
}

const validSelectedIds = new Set<string>();
let validSelectedIds = new Set<string>();

items.forEach(item => {
if (selectedItemIds.has(item.id)) {
validSelectedIds.add(item.id);
}
});
if (selectedItemIds === 'all') {
validSelectedIds = new Set(items.map(item => item.id));
} else if (selectedItemIds.size > 0) {
validSelectedIds = new Set(items.filter(item => selectedItemIds.has(item.id)).map(item => item.id));
}

if (!isEqual(validSelectedIds, selectedItemIds)) {
this.setState({ selectedItemIds: validSelectedIds });
this.handleSelectedIdsChange(validSelectedIds, true);
this.closeSidePanel();
}
};

Expand Down Expand Up @@ -1511,6 +1513,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
isShareModalOpen: false,
isUploadModalOpen: false,
isPreviewModalOpen: false,
sidePanelState: SidePanelState.CLOSED,
});

const {
Expand Down Expand Up @@ -1652,22 +1655,14 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
'hasError' | 'currentCollection' | 'metadataTemplate'
> => {
const { metadataViewProps } = this.props;
const { onSelectionChange } = metadataViewProps ?? {};
const { currentPageNumber, markers, selectedItemIds } = this.state;
const hasNextMarker: boolean = !!markers[currentPageNumber + 1];
const hasPrevMarker: boolean = currentPageNumber === 1 || !!markers[currentPageNumber - 1];

return {
...metadataViewProps,
selectedKeys: selectedItemIds,
onSelectionChange: (ids: Selection) => {
onSelectionChange?.(ids);
const isSelectionEmpty = ids !== 'all' && ids.size === 0;
this.setState({
selectedItemIds: ids,
...(isSelectionEmpty && { isMetadataSidePanelOpen: false }),
});
},
onSelectionChange: this.handleSelectedIdsChange,
paginationProps: {
onMarkerBasedPageChange: this.markerBasedPaginate,
hasNextMarker,
Expand Down Expand Up @@ -1754,11 +1749,28 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
});
};

clearSelectedItemIds = () => {
handleSelectedIdsChange = (ids: Selection, allowDuringEditing: boolean = false) => {
const { metadataViewProps } = this.props;
const { onSelectionChange: onSelectionChangeExternal } = metadataViewProps;

if (!allowDuringEditing && this.state.sidePanelState === SidePanelState.EDITING) {
return;
}

onSelectionChangeExternal?.(ids);

this.setState({
selectedItemIds: new Set(),
isMetadataSidePanelOpen: false,
selectedItemIds: ids,
});

const isSelectionEmpty = ids !== 'all' && ids.size === 0;
if (isSelectionEmpty) {
this.closeSidePanel();
}
};

clearSelectedItemIds = () => {
this.handleSelectedIdsChange(new Set(), true);
};

/**
Expand All @@ -1767,20 +1779,27 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
* @private
* @return {void}
*/
onMetadataSidePanelToggle = () => {
onSidePanelToggle = () => {
this.setState(prevState => ({
isMetadataSidePanelOpen: !prevState.isMetadataSidePanelOpen,
sidePanelState:
prevState.sidePanelState === SidePanelState.CLOSED ? SidePanelState.OPEN : SidePanelState.CLOSED,
}));
};

/**
* Close metadata side panel
*
* @private
* @return {void}
*/
closeMetadataSidePanel = () => {
this.setState({ isMetadataSidePanelOpen: false });
closeSidePanel = () => {
this.setState({
sidePanelState: SidePanelState.CLOSED,
});
};

onSidePanelEditingChange = (isEditing: boolean) => {
const { sidePanelState } = this.state;

if (sidePanelState !== SidePanelState.CLOSED) {
this.setState({
sidePanelState: isEditing ? SidePanelState.EDITING : SidePanelState.OPEN,
});
}
};

filterMetadata = (fields: ExternalFilterValues) => {
Expand Down Expand Up @@ -1848,7 +1867,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
isCreateFolderModalOpen,
isDeleteModalOpen,
isLoading,
isMetadataSidePanelOpen,
sidePanelState,
isPreviewModalOpen,
isRenameModalOpen,
isShareModalOpen,
Expand Down Expand Up @@ -1878,6 +1897,9 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {

const metadataViewProps = this.getMetadataViewProps();

const isSidePanelOpen = sidePanelState !== SidePanelState.CLOSED;
const isEditing = sidePanelState === SidePanelState.EDITING;

/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
return (
Expand Down Expand Up @@ -1911,7 +1933,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
onGridViewSliderChange={this.onGridViewSliderChange}
onItemClick={this.fetchFolder}
onSortChange={this.sort}
onMetadataSidePanelToggle={this.onMetadataSidePanelToggle}
onSidePanelToggle={this.onSidePanelToggle}
onViewModeChange={this.changeViewMode}
portalElement={this.rootElement}
selectedItemIds={selectedItemIds}
Expand All @@ -1927,6 +1949,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
currentCollection={currentCollection}
features={features}
gridColumnCount={Math.min(gridColumnCount, maxGridColumnCount)}
isEditing={isEditing}
isMedium={isMedium}
isSmall={isSmall}
isTouch={isTouch}
Expand Down Expand Up @@ -1964,11 +1987,13 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
</Footer>
)}
</div>
{isDefaultViewMetadata && isMetadataViewV2Feature && isMetadataSidePanelOpen && (
{isDefaultViewMetadata && isMetadataViewV2Feature && isSidePanelOpen && (
<MetadataSidePanel
currentCollection={currentCollection}
isEditing={isEditing}
metadataTemplate={metadataTemplate}
onClose={this.closeMetadataSidePanel}
onClose={this.closeSidePanel}
onEditingChange={this.onSidePanelEditingChange}
onUpdate={this.updateMetadataV2}
refreshCollection={this.refreshCollection}
selectedItemIds={selectedItemIds}
Expand Down
13 changes: 8 additions & 5 deletions src/elements/content-explorer/MetadataSidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ import './MetadataSidePanel.scss';
export interface MetadataSidePanelProps {
currentCollection: Collection;
metadataTemplate: MetadataTemplate;
isEditing: boolean;
onEditingChange: (isEditing: boolean) => void;
onClose: () => void;
onUpdate: (
items: BoxItem[],
Expand All @@ -41,14 +43,15 @@ export interface MetadataSidePanelProps {
const MetadataSidePanel = ({
currentCollection,
metadataTemplate,
isEditing,
onEditingChange,
onClose,
onUpdate,
refreshCollection,
selectedItemIds,
}: MetadataSidePanelProps) => {
const { addNotification } = useNotification();
const { formatMessage } = useIntl();
const [isEditing, setIsEditing] = useState<boolean>(false);
const [isUnsavedChangesModalOpen, setIsUnsavedChangesModalOpen] = useState<boolean>(false);

const selectedItemText = useSelectedItemText(currentCollection, selectedItemIds);
Expand All @@ -59,16 +62,16 @@ const MetadataSidePanel = ({
const templateInstance = useTemplateInstance(metadataTemplate, selectedItems, isEditing);

const handleMetadataInstanceEdit = () => {
setIsEditing(true);
onEditingChange(true);
};

const handleMetadataInstanceFormCancel = () => {
setIsEditing(false);
onEditingChange(false);
};

const handleMetadataInstanceFormDiscardUnsavedChanges = () => {
setIsUnsavedChangesModalOpen(false);
setIsEditing(false);
onEditingChange(false);
};

const handleUpdateMetadataSuccess = () => {
Expand All @@ -81,7 +84,7 @@ const MetadataSidePanel = ({
typeIconAriaLabel: formatMessage(messages.success),
variant: 'success',
});
setIsEditing(false);
onEditingChange(false);
refreshCollection();
};

Expand Down
Loading