public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[v10.0.x] NestedFolders: Fix select all in folder view selecting items out of folder (#69783)

Browse Source 
NestedFolders: Fix select all in folder view selecting items out of folder (#69780)

* NestedFolders: Fix select all selecting items outside of folder when viewing a folder

* fix lint errors

(cherry picked from commit ff89217d66)
This commit is contained in:
Josh Hunt
2023-06-14 06:00:52 -04:00
committed by GitHub
parent c5bfe516df
commit 2569ab8d71
6 changed files with 62 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/browse-dashboards/BrowseDashboardsPage.tsx
+1
View File
@@ -45,6 +45,7 @@ const BrowseDashboardsPage = memo(({ match }: Props) => {
dispatch(
setAllSelection({
isSelected: false,
folderUID: undefined,
})
);
}, [dispatch, folderUID, stateManager]);
public/app/features/browse-dashboards/components/BrowseActions/BrowseActions.tsx
+2 -5
View File
@@ -38,11 +38,8 @@ export function BrowseActions() {
const isSearching = stateManager.hasSearchFilters();
const onActionComplete = (parentsToRefresh: Set<string | undefined>) => {
dispatch(
setAllSelection({
isSelected: false,
})
);
dispatch(setAllSelection({ isSelected: false, folderUID: undefined }));
if (isSearching) {
// Redo search query
stateManager.doSearchWithDebounce();
public/app/features/browse-dashboards/components/BrowseView.tsx
+1 -1
View File
@@ -128,7 +128,7 @@ export function BrowseView({ folderUID, width, height, canSelect }: BrowseViewPr
height={height}
isSelected={isSelected}
onFolderClick={handleFolderClick}
onAllSelectionChange={(newState) => dispatch(setAllSelection({ isSelected: newState }))}
onAllSelectionChange={(newState) => dispatch(setAllSelection({ isSelected: newState, folderUID }))}
onItemSelectionChange={handleItemSelectionChange}
/>
);
public/app/features/browse-dashboards/components/SearchView.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ export function SearchView({ width, height, canSelect }: SearchViewProps) {
);
const clearSelection = useCallback(() => {
dispatch(setAllSelection({ isSelected: false }));
dispatch(setAllSelection({ isSelected: false, folderUID: undefined }));
}, [dispatch]);
const handleItemSelectionChange = useCallback(
public/app/features/browse-dashboards/state/reducers.test.ts
+36 -18
View File
@@ -252,15 +252,15 @@ describe('browse-dashboards reducers', () => {
});
describe('setAllSelection', () => {
it('selects all loaded items', () => {
const state = createInitialState();
let seed = 1;
const topLevelDashboard = wellFormedDashboard(seed++).item;
const topLevelFolder = wellFormedFolder(seed++).item;
const childDashboard = wellFormedDashboard(seed++, {}, { parentUID: topLevelFolder.uid }).item;
const childFolder = wellFormedFolder(seed++, {}, { parentUID: topLevelFolder.uid }).item;
const grandchildDashboard = wellFormedDashboard(seed++, {}, { parentUID: childFolder.uid }).item;
let seed = 1;
const topLevelDashboard = wellFormedDashboard(seed++).item;
const topLevelFolder = wellFormedFolder(seed++).item;
const childDashboard = wellFormedDashboard(seed++, {}, { parentUID: topLevelFolder.uid }).item;
const childFolder = wellFormedFolder(seed++, {}, { parentUID: topLevelFolder.uid }).item;
const grandchildDashboard = wellFormedDashboard(seed++, {}, { parentUID: childFolder.uid }).item;
it('selects all items in the root folder', () => {
const state = createInitialState();
state.rootItems = [topLevelFolder, topLevelDashboard];
state.childrenByParentUID[topLevelFolder.uid] = [childDashboard, childFolder];
@@ -269,7 +269,7 @@ describe('browse-dashboards reducers', () => {
state.selectedItems.folder[childFolder.uid] = false;
state.selectedItems.dashboard[grandchildDashboard.uid] = true;
setAllSelection(state, { type: 'setAllSelection', payload: { isSelected: true } });
setAllSelection(state, { type: 'setAllSelection', payload: { isSelected: true, folderUID: undefined } });
expect(state.selectedItems).toEqual({
$all: true,
@@ -286,16 +286,9 @@ describe('browse-dashboards reducers', () => {
});
});
it('deselects all items', () => {
it('selects all items when viewing a folder', () => {
const state = createInitialState();
let seed = 1;
const topLevelDashboard = wellFormedDashboard(seed++).item;
const topLevelFolder = wellFormedFolder(seed++).item;
const childDashboard = wellFormedDashboard(seed++, {}, { parentUID: topLevelFolder.uid }).item;
const childFolder = wellFormedFolder(seed++, {}, { parentUID: topLevelFolder.uid }).item;
const grandchildDashboard = wellFormedDashboard(seed++, {}, { parentUID: childFolder.uid }).item;
state.rootItems = [topLevelFolder, topLevelDashboard];
state.childrenByParentUID[topLevelFolder.uid] = [childDashboard, childFolder];
state.childrenByParentUID[childFolder.uid] = [grandchildDashboard];
@@ -303,7 +296,32 @@ describe('browse-dashboards reducers', () => {
state.selectedItems.folder[childFolder.uid] = false;
state.selectedItems.dashboard[grandchildDashboard.uid] = true;
setAllSelection(state, { type: 'setAllSelection', payload: { isSelected: false } });
setAllSelection(state, { type: 'setAllSelection', payload: { isSelected: true, folderUID: topLevelFolder.uid } });
expect(state.selectedItems).toEqual({
$all: true,
dashboard: {
[childDashboard.uid]: true,
[grandchildDashboard.uid]: true,
},
folder: {
[childFolder.uid]: true,
},
panel: {},
});
});
it('deselects all items', () => {
const state = createInitialState();
state.rootItems = [topLevelFolder, topLevelDashboard];
state.childrenByParentUID[topLevelFolder.uid] = [childDashboard, childFolder];
state.childrenByParentUID[childFolder.uid] = [grandchildDashboard];
state.selectedItems.folder[childFolder.uid] = false;
state.selectedItems.dashboard[grandchildDashboard.uid] = true;
setAllSelection(state, { type: 'setAllSelection', payload: { isSelected: false, folderUID: undefined } });
// Deselecting only sets selection = false for things already selected
expect(state.selectedItems).toEqual({
public/app/features/browse-dashboards/state/reducers.ts
+21 -8
View File
@@ -90,8 +90,11 @@ export function setItemSelectionState(
state.selectedItems.$all = state.rootItems?.every((v) => state.selectedItems[v.kind][v.uid]) ?? false;
}
export function setAllSelection(state: BrowseDashboardsState, action: PayloadAction<{ isSelected: boolean }>) {
const { isSelected } = action.payload;
export function setAllSelection(
state: BrowseDashboardsState,
action: PayloadAction<{ isSelected: boolean; folderUID: string | undefined }>
) {
const { isSelected, folderUID: folderUIDArg } = action.payload;
state.selectedItems.$all = isSelected;
@@ -102,17 +105,27 @@ export function setAllSelection(state: BrowseDashboardsState, action: PayloadAct
// redux, so we just need to iterate over the selected items to flip them to false
if (isSelected) {
for (const folderUID in state.childrenByParentUID) {
const children = state.childrenByParentUID[folderUID] ?? [];
// Recursively select the children of the folder in view
function selectChildrenOfFolder(folderUID: string | undefined) {
const collection = folderUID ? state.childrenByParentUID[folderUID] : state.rootItems;
for (const child of children) {
// Bail early if the collection isn't found (not loaded yet)
if (!collection) {
return;
}
for (const child of collection) {
state.selectedItems[child.kind][child.uid] = isSelected;
if (child.kind !== 'folder') {
continue;
}
selectChildrenOfFolder(child.uid);
}
}
for (const child of state.rootItems ?? []) {
state.selectedItems[child.kind][child.uid] = isSelected;
}
selectChildrenOfFolder(folderUIDArg);
} else {
// if deselecting only need to loop over what we've already selected
for (const kind in state.selectedItems) {