From f50cf0fda2c66fb16238b22bbf87f2e8cdfb574b Mon Sep 17 00:00:00 2001 From: Lisa Knox Date: Wed, 22 Nov 2023 10:43:27 -0500 Subject: [PATCH] 21128: multiselect vs details panel resolved Arvados-DCO-1.1-Signed-off-by: Lisa Knox --- .../multiselect-toolbar/MultiselectToolbar.tsx | 2 +- src/store/multiselect/multiselect-actions.tsx | 13 ++++++++++++- src/store/multiselect/multiselect-reducer.tsx | 6 +++++- .../data-explorer/data-explorer.tsx | 3 ++- .../details-panel/details-panel.tsx | 7 +++++-- .../all-processes-panel/all-processes-panel.tsx | 2 ++ src/views/favorite-panel/favorite-panel.tsx | 2 ++ src/views/project-panel/project-panel.tsx | 2 ++ .../shared-with-me-panel/shared-with-me-panel.tsx | 2 ++ src/views/trash-panel/trash-panel.tsx | 2 ++ 10 files changed, 35 insertions(+), 6 deletions(-) diff --git a/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/src/components/multiselect-toolbar/MultiselectToolbar.tsx index cb884932b3..f2aeb9e92b 100644 --- a/src/components/multiselect-toolbar/MultiselectToolbar.tsx +++ b/src/components/multiselect-toolbar/MultiselectToolbar.tsx @@ -184,7 +184,7 @@ function selectActionsByKind(currentResourceKinds: Array, filterSet: TMu }); } -const isExactlyOneSelected = (checkedList: TCheckedList) => { +export const isExactlyOneSelected = (checkedList: TCheckedList) => { let tally = 0; let current = ''; for (const uuid in checkedList) { diff --git a/src/store/multiselect/multiselect-actions.tsx b/src/store/multiselect/multiselect-actions.tsx index 6eef131dab..80ff543f2d 100644 --- a/src/store/multiselect/multiselect-actions.tsx +++ b/src/store/multiselect/multiselect-actions.tsx @@ -3,13 +3,15 @@ // SPDX-License-Identifier: AGPL-3.0 import { TCheckedList } from "components/data-table/data-table"; +import { isExactlyOneSelected } from "components/multiselect-toolbar/MultiselectToolbar"; export const multiselectActionContants = { TOGGLE_VISIBLITY: "TOGGLE_VISIBLITY", SET_CHECKEDLIST: "SET_CHECKEDLIST", SELECT_ONE: 'SELECT_ONE', DESELECT_ONE: "DESELECT_ONE", - TOGGLE_ONE: 'TOGGLE_ONE' + TOGGLE_ONE: 'TOGGLE_ONE', + SET_SELECTED_UUID: 'SET_SELECTED_UUID' }; export const toggleMSToolbar = (isVisible: boolean) => { @@ -20,6 +22,7 @@ export const toggleMSToolbar = (isVisible: boolean) => { export const setCheckedListOnStore = (checkedList: TCheckedList) => { return dispatch => { + dispatch(setSelectedUuid(isExactlyOneSelected(checkedList))) dispatch({ type: multiselectActionContants.SET_CHECKEDLIST, payload: checkedList }); }; }; @@ -42,9 +45,17 @@ export const toggleOne = (uuid: string) => { }; }; +export const setSelectedUuid = (uuid: string | null) => { + return dispatch => { + dispatch({ type: multiselectActionContants.SET_SELECTED_UUID, payload: uuid }); + }; +}; + export const multiselectActions = { toggleMSToolbar, setCheckedListOnStore, selectOne, deselectOne, + toggleOne, + setSelectedUuid }; diff --git a/src/store/multiselect/multiselect-reducer.tsx b/src/store/multiselect/multiselect-reducer.tsx index 099a1b5bf8..27f6b69224 100644 --- a/src/store/multiselect/multiselect-reducer.tsx +++ b/src/store/multiselect/multiselect-reducer.tsx @@ -8,14 +8,16 @@ import { TCheckedList } from "components/data-table/data-table"; type MultiselectToolbarState = { isVisible: boolean; checkedList: TCheckedList; + selectedUuid: string; }; const multiselectToolbarInitialState = { isVisible: false, checkedList: {}, + selectedUuid: '', }; -const { TOGGLE_VISIBLITY, SET_CHECKEDLIST, SELECT_ONE, DESELECT_ONE, TOGGLE_ONE } = multiselectActionContants; +const { TOGGLE_VISIBLITY, SET_CHECKEDLIST, SELECT_ONE, DESELECT_ONE, TOGGLE_ONE, SET_SELECTED_UUID } = multiselectActionContants; export const multiselectReducer = (state: MultiselectToolbarState = multiselectToolbarInitialState, action) => { switch (action.type) { @@ -29,6 +31,8 @@ export const multiselectReducer = (state: MultiselectToolbarState = multiselectT return { ...state, checkedList: { ...state.checkedList, [action.payload]: false } }; case TOGGLE_ONE: return { ...state, checkedList: { ...state.checkedList, [action.payload]: !state.checkedList[action.payload] } }; + case SET_SELECTED_UUID: + return {...state, selectedUuid: action.payload || ''} default: return state; } diff --git a/src/views-components/data-explorer/data-explorer.tsx b/src/views-components/data-explorer/data-explorer.tsx index 55a254aba7..6c9aeb0600 100644 --- a/src/views-components/data-explorer/data-explorer.tsx +++ b/src/views-components/data-explorer/data-explorer.tsx @@ -27,7 +27,8 @@ const mapStateToProps = (state: RootState, { id }: Props) => { const dataExplorerState = getDataExplorer(state.dataExplorer, id); const currentRoute = state.router.location ? state.router.location.pathname : ""; const currentRefresh = localStorage.getItem(LAST_REFRESH_TIMESTAMP) || ""; - const currentItemUuid = currentRoute === "/workflows" ? state.properties.workflowPanelDetailsUuid : state.detailsPanel.resourceUuid; + const isDetailsResourceChecked = state.multiselect.checkedList[state.detailsPanel.resourceUuid] + const currentItemUuid = currentRoute === "/workflows" ? state.properties.workflowPanelDetailsUuid : isDetailsResourceChecked ? state.detailsPanel.resourceUuid : state.multiselect.selectedUuid; const isMSToolbarVisible = state.multiselect.isVisible; return { ...dataExplorerState, diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx index e9175f57ba..672d678f5b 100644 --- a/src/views-components/details-panel/details-panel.tsx +++ b/src/views-components/details-panel/details-panel.tsx @@ -83,8 +83,11 @@ const getItem = (res: DetailsResource): DetailsData => { } }; -const mapStateToProps = ({ auth, detailsPanel, resources, collectionPanelFiles }: RootState) => { - const resource = getResource(detailsPanel.resourceUuid)(resources) as DetailsResource | undefined; +const mapStateToProps = ({ auth, detailsPanel, resources, collectionPanelFiles, multiselect, router }: RootState) => { + const isDetailsResourceChecked = multiselect.checkedList[detailsPanel.resourceUuid] + const currentRoute = router.location ? router.location.pathname : ""; + const currentItemUuid = isDetailsResourceChecked ? detailsPanel.resourceUuid : multiselect.selectedUuid || currentRoute.split('/')[2]; + const resource = getResource(currentItemUuid)(resources) as DetailsResource | undefined || ''; const file = resource ? undefined : getNode(detailsPanel.resourceUuid)(collectionPanelFiles); diff --git a/src/views/all-processes-panel/all-processes-panel.tsx b/src/views/all-processes-panel/all-processes-panel.tsx index ee53f99c3f..e63ccae9ba 100644 --- a/src/views/all-processes-panel/all-processes-panel.tsx +++ b/src/views/all-processes-panel/all-processes-panel.tsx @@ -31,6 +31,7 @@ import { createTree } from "models/tree"; import { getInitialProcessStatusFilters, getInitialProcessTypeFilters } from "store/resource-type-filters/resource-type-filters"; import { getProcess } from "store/processes/process"; import { ResourcesState } from "store/resources/resources"; +import { selectOne } from "store/multiselect/multiselect-actions"; type CssRules = "toolbar" | "button" | "root"; @@ -143,6 +144,7 @@ export const AllProcessesPanel = withStyles(styles)( }; handleRowClick = (uuid: string) => { + this.props.dispatch(selectOne(uuid)) this.props.dispatch(loadDetailsPanel(uuid)); }; diff --git a/src/views/favorite-panel/favorite-panel.tsx b/src/views/favorite-panel/favorite-panel.tsx index 2392d6fda0..16af9c084a 100644 --- a/src/views/favorite-panel/favorite-panel.tsx +++ b/src/views/favorite-panel/favorite-panel.tsx @@ -38,6 +38,7 @@ import { GroupClass, GroupResource } from 'models/group'; import { getProperty } from 'store/properties/properties'; import { PROJECT_PANEL_CURRENT_UUID } from 'store/project-panel/project-panel-action'; import { CollectionResource } from 'models/collection'; +import { selectOne } from 'store/multiselect/multiselect-actions'; type CssRules = "toolbar" | "button" | "root"; @@ -171,6 +172,7 @@ export const FavoritePanel = withStyles(styles)( } handleRowClick = (uuid: string) => { + this.props.dispatch(selectOne(uuid)) this.props.dispatch(loadDetailsPanel(uuid)); } diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx index 2cc751bffd..a85455276f 100644 --- a/src/views/project-panel/project-panel.tsx +++ b/src/views/project-panel/project-panel.tsx @@ -52,6 +52,7 @@ import { CollectionResource } from 'models/collection'; import { resourceIsFrozen } from 'common/frozen-resources'; import { ProjectResource } from 'models/project'; import { NotFoundView } from 'views/not-found-panel/not-found-panel'; +import { selectOne } from 'store/multiselect/multiselect-actions'; type CssRules = 'root' | 'button'; @@ -323,6 +324,7 @@ export const ProjectPanel = withStyles(styles)( }; handleRowClick = (uuid: string) => { + this.props.dispatch(selectOne(uuid)) this.props.dispatch(loadDetailsPanel(uuid)); }; } diff --git a/src/views/shared-with-me-panel/shared-with-me-panel.tsx b/src/views/shared-with-me-panel/shared-with-me-panel.tsx index e6cfccd269..ece94ee247 100644 --- a/src/views/shared-with-me-panel/shared-with-me-panel.tsx +++ b/src/views/shared-with-me-panel/shared-with-me-panel.tsx @@ -18,6 +18,7 @@ import { resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions'; import { GroupContentsResource } from 'services/groups-service/groups-service'; +import { selectOne } from 'store/multiselect/multiselect-actions'; type CssRules = "toolbar" | "button" | "root"; @@ -82,6 +83,7 @@ export const SharedWithMePanel = withStyles(styles)( } handleRowClick = (uuid: string) => { + this.props.dispatch(selectOne(uuid)) this.props.dispatch(loadDetailsPanel(uuid)); } } diff --git a/src/views/trash-panel/trash-panel.tsx b/src/views/trash-panel/trash-panel.tsx index 3502075105..7b79143423 100644 --- a/src/views/trash-panel/trash-panel.tsx +++ b/src/views/trash-panel/trash-panel.tsx @@ -35,6 +35,7 @@ import { getTrashPanelTypeFilters } from 'store/resource-type-filters/resource-type-filters'; import { CollectionResource } from 'models/collection'; +import { selectOne } from 'store/multiselect/multiselect-actions'; type CssRules = "toolbar" | "button" | "root"; @@ -178,6 +179,7 @@ export const TrashPanel = withStyles(styles)( } handleRowClick = (uuid: string) => { + this.props.dispatch(selectOne(uuid)) this.props.dispatch(loadDetailsPanel(uuid)); } } -- 2.39.5