[ARVADOS-WORKBENCH2] updated: 2.4.0-10-gf8033266
Git user
git at public.arvados.org
Tue Apr 12 14:34:48 UTC 2022
Summary of changes:
.../refresh-button/refresh-button.test.tsx | 4 +-
src/components/refresh-button/refresh-button.tsx | 5 ++
.../data-explorer/data-explorer.tsx | 7 +-
.../main-content-bar/main-content-bar.tsx | 77 ++++++++++------------
4 files changed, 49 insertions(+), 44 deletions(-)
via f8033266caeae9bdfd77331c716a852eb6fd4725 (commit)
from 20acf4ed80f85a315cc21b555a6101fac95f8532 (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 f8033266caeae9bdfd77331c716a852eb6fd4725
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Tue Apr 12 11:32:41 2022 -0300
18972: Records the last refresh click on localStorage for others to act on.
Adding timestamps on the store isn't recommended as the reducers should be
only pure functions so I opted to use the localStorage for this application.
The DataExplorer code now also checks if the last Refresh button click
timestamp changed to decide if it should show the "loading, please wait"
message.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/components/refresh-button/refresh-button.test.tsx b/src/components/refresh-button/refresh-button.test.tsx
index f9fa32d2..3a9292e6 100644
--- a/src/components/refresh-button/refresh-button.test.tsx
+++ b/src/components/refresh-button/refresh-button.test.tsx
@@ -6,7 +6,7 @@ import React from "react";
import { Button } from "@material-ui/core";
import { shallow, configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
-import { RefreshButton } from './refresh-button';
+import { LAST_REFRESH_TIMESTAMP, RefreshButton } from './refresh-button';
configure({ adapter: new Adapter() });
@@ -31,6 +31,7 @@ describe('<RefreshButton />', () => {
});
it('should pass window location to router', () => {
+ expect(localStorage.getItem(LAST_REFRESH_TIMESTAMP)).toBeFalsy();
// setup
const wrapper = shallow(<RefreshButton {...props} />);
@@ -39,5 +40,6 @@ describe('<RefreshButton />', () => {
// then
expect(props.history.replace).toHaveBeenCalledWith('/');
+ expect(localStorage.getItem(LAST_REFRESH_TIMESTAMP)).not.toBeFalsy();
});
});
diff --git a/src/components/refresh-button/refresh-button.tsx b/src/components/refresh-button/refresh-button.tsx
index 9971547b..e2fe5484 100644
--- a/src/components/refresh-button/refresh-button.tsx
+++ b/src/components/refresh-button/refresh-button.tsx
@@ -26,12 +26,17 @@ interface RefreshButtonProps {
onClick?: () => void;
}
+export const LAST_REFRESH_TIMESTAMP = 'lastRefreshTimestamp';
+
export const RefreshButton = ({ history, classes, onClick }: RouteComponentProps & WithStyles<CssRules> & RefreshButtonProps) =>
<Button
color="primary"
size="small"
variant="contained"
onClick={() => {
+ // Notify interested parties that the refresh button was clicked.
+ const now = (new Date()).getTime();
+ localStorage.setItem(LAST_REFRESH_TIMESTAMP, now.toString());
history.replace(window.location.pathname);
if (onClick) {
onClick();
diff --git a/src/views-components/data-explorer/data-explorer.tsx b/src/views-components/data-explorer/data-explorer.tsx
index 8db551e8..97e20b0d 100644
--- a/src/views-components/data-explorer/data-explorer.tsx
+++ b/src/views-components/data-explorer/data-explorer.tsx
@@ -11,6 +11,7 @@ import { dataExplorerActions } from "store/data-explorer/data-explorer-action";
import { DataColumn } from "components/data-table/data-column";
import { DataColumns } from "components/data-table/data-table";
import { DataTableFilters } from 'components/data-table-filters/data-table-filters-tree';
+import { LAST_REFRESH_TIMESTAMP } from "components/refresh-button/refresh-button";
interface Props {
id: string;
@@ -18,10 +19,10 @@ interface Props {
onContextMenu?: (event: React.MouseEvent<HTMLElement>, item: any, isAdmin?: boolean) => void;
onRowDoubleClick: (item: any) => void;
extractKey?: (item: any) => React.Key;
- working?: boolean;
}
let prevRoute = '';
+let prevRefresh = '';
let routeChanged = false;
let isWorking = false;
@@ -29,11 +30,13 @@ const mapStateToProps = (state: RootState, { id }: Props) => {
const progress = state.progressIndicator.find(p => p.id === id);
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;
- if (currentRoute !== prevRoute) {
+ if (currentRoute !== prevRoute || currentRefresh !== prevRefresh) {
routeChanged = true;
prevRoute = currentRoute;
+ prevRefresh = currentRefresh;
}
if (progress?.working) {
isWorking = true;
diff --git a/src/views-components/main-content-bar/main-content-bar.tsx b/src/views-components/main-content-bar/main-content-bar.tsx
index a460a518..271d77c1 100644
--- a/src/views-components/main-content-bar/main-content-bar.tsx
+++ b/src/views-components/main-content-bar/main-content-bar.tsx
@@ -13,6 +13,7 @@ import * as Routes from 'routes/routes';
import { toggleDetailsPanel } from 'store/details-panel/details-panel-action';
import RefreshButton from "components/refresh-button/refresh-button";
import { loadSidePanelTreeProjects } from "store/side-panel-tree/side-panel-tree-actions";
+import { Dispatch } from "redux";
type CssRules = "infoTooltip";
@@ -44,46 +45,40 @@ const isButtonVisible = ({ router }: RootState) => {
Routes.matchAllProcessesRoute(pathname) ||
Routes.matchTrashRoute(pathname) ||
Routes.matchFavoritesRoute(pathname);
-
- /* return !Routes.matchWorkflowRoute(pathname) && !Routes.matchUserVirtualMachineRoute(pathname) &&
- * !Routes.matchAdminVirtualMachineRoute(pathname) && !Routes.matchRepositoriesRoute(pathname) &&
- * !Routes.matchSshKeysAdminRoute(pathname) && !Routes.matchSshKeysUserRoute(pathname) &&
- * !Routes.matchSiteManagerRoute(pathname) &&
- * !Routes.matchKeepServicesRoute(pathname) && !Routes.matchComputeNodesRoute(pathname) &&
- * !Routes.matchApiClientAuthorizationsRoute(pathname) && !Routes.matchUsersRoute(pathname) &&
- * !Routes.matchMyAccountRoute(pathname) && !Routes.matchLinksRoute(pathname); */
};
-export const MainContentBar =
- connect((state: RootState) => ({
- buttonVisible: isButtonVisible(state),
- projectUuid: state.detailsPanel.resourceUuid,
- }), (dispatch) => ({
- onDetailsPanelToggle: () => dispatch<any>(toggleDetailsPanel()),
- onRefreshButtonClick: (id) => {
- dispatch<any>(loadSidePanelTreeProjects(id));
- }
- }))(
- withStyles(styles)(
- (props: MainContentBarProps & WithStyles<CssRules> & any) =>
- <Toolbar>
- <Grid container>
- <Grid container item xs alignItems="center">
- <Breadcrumbs />
- </Grid>
- <Grid item>
- <RefreshButton onClick={() => {
- props.onRefreshButtonClick(props.projectUuid);
- }} />
- </Grid>
- <Grid item>
- {props.buttonVisible && <Tooltip title="Additional Info">
- <IconButton data-cy="additional-info-icon" color="inherit" className={props.classes.infoTooltip} onClick={props.onDetailsPanelToggle}>
- <DetailsIcon />
- </IconButton>
- </Tooltip>}
- </Grid>
- </Grid>
- </Toolbar>
- )
- );
+const mapStateToProps = (state: RootState) => ({
+ buttonVisible: isButtonVisible(state),
+ projectUuid: state.detailsPanel.resourceUuid,
+});
+
+const mapDispatchToProps = () => (dispatch: Dispatch) => ({
+ onDetailsPanelToggle: () => dispatch<any>(toggleDetailsPanel()),
+ onRefreshButtonClick: (id) => {
+ dispatch<any>(loadSidePanelTreeProjects(id));
+ }
+});
+
+export const MainContentBar = connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(
+ (props: MainContentBarProps & WithStyles<CssRules> & any) =>
+ <Toolbar><Grid container>
+ <Grid container item xs alignItems="center">
+ <Breadcrumbs />
+ </Grid>
+ <Grid item>
+ <RefreshButton onClick={() => {
+ props.onRefreshButtonClick(props.projectUuid);
+ }} />
+ </Grid>
+ <Grid item>
+ {props.buttonVisible && <Tooltip title="Additional Info">
+ <IconButton data-cy="additional-info-icon"
+ color="inherit"
+ className={props.classes.infoTooltip}
+ onClick={props.onDetailsPanelToggle}>
+ <DetailsIcon />
+ </IconButton>
+ </Tooltip>}
+ </Grid>
+ </Grid></Toolbar>
+));
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list