[arvados-workbench2] updated: 2.7.0-233-gad6090e4
git repository hosting
git at public.arvados.org
Mon Dec 4 14:15:24 UTC 2023
Summary of changes:
.../multiselect-toolbar/MultiselectToolbar.tsx | 53 +++++++++++++---------
src/store/multiselect/multiselect-actions.tsx | 20 +++++++-
src/store/multiselect/multiselect-reducer.tsx | 8 +++-
.../public-favorites/public-favorites-actions.ts | 4 ++
4 files changed, 60 insertions(+), 25 deletions(-)
via ad6090e461361094bb43d7171fea060e556b8f36 (commit)
from bf7a90e5d5d606456e0ec51cc2709d2f1da76d7d (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit ad6090e461361094bb43d7171fea060e556b8f36
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Mon Dec 4 09:15:18 2023 -0500
21128: Added button disable during async actions Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/src/components/multiselect-toolbar/MultiselectToolbar.tsx b/src/components/multiselect-toolbar/MultiselectToolbar.tsx
index 6470cb80..56c363af 100644
--- a/src/components/multiselect-toolbar/MultiselectToolbar.tsx
+++ b/src/components/multiselect-toolbar/MultiselectToolbar.tsx
@@ -33,7 +33,7 @@ import { getProcess } from "store/processes/process";
import { Process } from "store/processes/process";
import { PublicFavoritesState } from "store/public-favorites/public-favorites-reducer";
-type CssRules = "root" | "button";
+type CssRules = "root" | "button" | "iconContainer";
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
@@ -49,13 +49,17 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
width: "2.5rem",
height: "2.5rem ",
},
+ iconContainer: {
+ height: '100%'
+ }
});
export type MultiselectToolbarProps = {
checkedList: TCheckedList;
- selectedUuid: string | null
+ singleSelectedUuid: string | null
iconProps: IconProps
user: User | null
+ disabledButtons: Set<string>
executeMulti: (action: ContextMenuAction, checkedList: TCheckedList, resources: ResourcesState) => void;
};
@@ -70,35 +74,37 @@ export const MultiselectToolbar = connect(
mapDispatchToProps
)(
withStyles(styles)((props: MultiselectToolbarProps & WithStyles<CssRules>) => {
- const { classes, checkedList, selectedUuid: singleSelectedUuid, iconProps, user } = props;
+ const { classes, checkedList, singleSelectedUuid, iconProps, user , disabledButtons} = props;
const singleResourceKind = singleSelectedUuid ? [resourceToMsResourceKind(singleSelectedUuid, iconProps.resources, user)] : null
const currentResourceKinds = singleResourceKind ? singleResourceKind : Array.from(selectedToKindSet(checkedList));
const currentPathIsTrash = window.location.pathname === "/trash";
-
+
const actions =
- currentPathIsTrash && selectedToKindSet(checkedList).size
- ? [msToggleTrashAction]
- : selectActionsByKind(currentResourceKinds as string[], multiselectActionsFilters)
- .filter((action) => (singleSelectedUuid === null ? action.isForMulti : true));
-
+ currentPathIsTrash && selectedToKindSet(checkedList).size
+ ? [msToggleTrashAction]
+ : selectActionsByKind(currentResourceKinds as string[], multiselectActionsFilters)
+ .filter((action) => (singleSelectedUuid === null ? action.isForMulti : true));
+
return (
<React.Fragment>
<Toolbar
className={classes.root}
style={{ width: `${(actions.length * 2.5) + 1}rem` }}
- >
+ >
{actions.length ? (
actions.map((action, i) =>
- action.hasAlts ? (
- <Tooltip
- className={classes.button}
- title={currentPathIsTrash || action.useAlts(singleSelectedUuid, iconProps) ? action.altName : action.name}
- key={i}
- disableFocusListener
- >
- <IconButton onClick={() => props.executeMulti(action, checkedList, iconProps.resources)}>
- {currentPathIsTrash || action.useAlts(singleSelectedUuid, iconProps) ? action.altIcon && action.altIcon({}) : action.icon({})}
- </IconButton>
+ action.hasAlts ? (
+ <Tooltip
+ className={classes.button}
+ title={currentPathIsTrash || action.useAlts(singleSelectedUuid, iconProps) ? action.altName : action.name}
+ key={i}
+ disableFocusListener
+ >
+ <span className={classes.iconContainer}>
+ <IconButton disabled={disabledButtons.has(action.name)} onClick={() => props.executeMulti(action, checkedList, iconProps.resources)}>
+ {currentPathIsTrash || action.useAlts(singleSelectedUuid, iconProps) ? action.altIcon && action.altIcon({}) : action.icon({})}
+ </IconButton>
+ </span>
</Tooltip>
) : (
<Tooltip
@@ -107,7 +113,9 @@ export const MultiselectToolbar = connect(
key={i}
disableFocusListener
>
- <IconButton onClick={() => props.executeMulti(action, checkedList, iconProps.resources)}>{action.icon({})}</IconButton>
+ <span className={classes.iconContainer}>
+ <IconButton onClick={() => props.executeMulti(action, checkedList, iconProps.resources)}>{action.icon({})}</IconButton>
+ </span>
</Tooltip>
)
)
@@ -275,8 +283,9 @@ export const isExactlyOneSelected = (checkedList: TCheckedList) => {
function mapStateToProps({auth, multiselect, resources, favorites, publicFavorites}: RootState) {
return {
checkedList: multiselect.checkedList as TCheckedList,
- selectedUuid: isExactlyOneSelected(multiselect.checkedList),
+ singleSelectedUuid: isExactlyOneSelected(multiselect.checkedList),
user: auth && auth.user ? auth.user : null,
+ disabledButtons: new Set<string>(multiselect.disabledButtons),
iconProps: {
resources,
favorites,
diff --git a/src/store/multiselect/multiselect-actions.tsx b/src/store/multiselect/multiselect-actions.tsx
index 80ff543f..091d3ef6 100644
--- a/src/store/multiselect/multiselect-actions.tsx
+++ b/src/store/multiselect/multiselect-actions.tsx
@@ -11,7 +11,9 @@ export const multiselectActionContants = {
SELECT_ONE: 'SELECT_ONE',
DESELECT_ONE: "DESELECT_ONE",
TOGGLE_ONE: 'TOGGLE_ONE',
- SET_SELECTED_UUID: 'SET_SELECTED_UUID'
+ SET_SELECTED_UUID: 'SET_SELECTED_UUID',
+ ADD_DISABLED: 'ADD_DISABLED',
+ REMOVE_DISABLED: 'REMOVE_DISABLED',
};
export const toggleMSToolbar = (isVisible: boolean) => {
@@ -51,11 +53,25 @@ export const setSelectedUuid = (uuid: string | null) => {
};
};
+export const setDisabledButton = (buttonName: string) => {
+ return dispatch => {
+ dispatch({ type: multiselectActionContants.ADD_DISABLED, payload: buttonName });
+ };
+};
+
+export const removeDisabledButton = (buttonName: string) => {
+ return dispatch => {
+ dispatch({ type: multiselectActionContants.REMOVE_DISABLED, payload: buttonName });
+ };
+};
+
export const multiselectActions = {
toggleMSToolbar,
setCheckedListOnStore,
selectOne,
deselectOne,
toggleOne,
- setSelectedUuid
+ setSelectedUuid,
+ setDisabledButton,
+ removeDisabledButton,
};
diff --git a/src/store/multiselect/multiselect-reducer.tsx b/src/store/multiselect/multiselect-reducer.tsx
index 27f6b692..26b85393 100644
--- a/src/store/multiselect/multiselect-reducer.tsx
+++ b/src/store/multiselect/multiselect-reducer.tsx
@@ -9,15 +9,17 @@ type MultiselectToolbarState = {
isVisible: boolean;
checkedList: TCheckedList;
selectedUuid: string;
+ disabledButtons: string[]
};
const multiselectToolbarInitialState = {
isVisible: false,
checkedList: {},
selectedUuid: '',
+ disabledButtons: []
};
-const { TOGGLE_VISIBLITY, SET_CHECKEDLIST, SELECT_ONE, DESELECT_ONE, TOGGLE_ONE, SET_SELECTED_UUID } = multiselectActionContants;
+const { TOGGLE_VISIBLITY, SET_CHECKEDLIST, SELECT_ONE, DESELECT_ONE, TOGGLE_ONE, SET_SELECTED_UUID, ADD_DISABLED, REMOVE_DISABLED } = multiselectActionContants;
export const multiselectReducer = (state: MultiselectToolbarState = multiselectToolbarInitialState, action) => {
switch (action.type) {
@@ -33,6 +35,10 @@ export const multiselectReducer = (state: MultiselectToolbarState = multiselectT
return { ...state, checkedList: { ...state.checkedList, [action.payload]: !state.checkedList[action.payload] } };
case SET_SELECTED_UUID:
return {...state, selectedUuid: action.payload || ''}
+ case ADD_DISABLED:
+ return { ...state, disabledButtons: [...state.disabledButtons, action.payload]}
+ case REMOVE_DISABLED:
+ return { ...state, disabledButtons: state.disabledButtons.filter((button) => button !== action.payload) };
default:
return state;
}
diff --git a/src/store/public-favorites/public-favorites-actions.ts b/src/store/public-favorites/public-favorites-actions.ts
index 2d4539ad..7fb08788 100644
--- a/src/store/public-favorites/public-favorites-actions.ts
+++ b/src/store/public-favorites/public-favorites-actions.ts
@@ -9,6 +9,8 @@ import { checkPublicFavorite } from "./public-favorites-reducer";
import { snackbarActions, SnackbarKind } from "store/snackbar/snackbar-actions";
import { ServiceRepository } from "services/services";
import { progressIndicatorActions } from "store/progress-indicator/progress-indicator-actions";
+import { setDisabledButton, removeDisabledButton } from "store/multiselect/multiselect-actions";
+import { MultiSelectMenuActionNames } from "views-components/multiselect-toolbar/ms-menu-actions";
export const publicFavoritesActions = unionize({
TOGGLE_PUBLIC_FAVORITE: ofType<{ resourceUuid: string }>(),
@@ -21,6 +23,7 @@ export type PublicFavoritesAction = UnionOf<typeof publicFavoritesActions>;
export const togglePublicFavorite = (resource: { uuid: string; name: string }) =>
(dispatch: Dispatch, getState: () => RootState, services: ServiceRepository): Promise<any> => {
dispatch(progressIndicatorActions.START_WORKING("togglePublicFavorite"));
+ dispatch<any>(setDisabledButton(MultiSelectMenuActionNames.ADD_TO_PUBLIC_FAVORITES))
const uuidPrefix = getState().auth.config.uuidPrefix;
const uuid = `${uuidPrefix}-j7d0g-publicfavorites`;
dispatch(publicFavoritesActions.TOGGLE_PUBLIC_FAVORITE({ resourceUuid: resource.uuid }));
@@ -47,6 +50,7 @@ export const togglePublicFavorite = (resource: { uuid: string; name: string }) =
hideDuration: 2000,
kind: SnackbarKind.SUCCESS
}));
+ dispatch<any>(removeDisabledButton(MultiSelectMenuActionNames.ADD_TO_PUBLIC_FAVORITES))
dispatch(progressIndicatorActions.STOP_WORKING("togglePublicFavorite"));
})
.catch((e: any) => {
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list