show and hide button depends on url

Feature #14137

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>

diff --git a/src/views-components/side-panel-button/side-panel-button.tsx b/src/views-components/side-panel-button/side-panel-button.tsx
index 2781d4790ec81f8a970d81a9f2e9f8bf211ad6c7..80b3163f8f2e93e16888d11a1e0fa03ad14c729f 100644 (file)
--- a/src/views-components/side-panel-button/side-panel-button.tsx
+++ b/src/views-components/side-panel-button/side-panel-button.tsx
@@ -13,6 +13,7 @@ import { StyleRulesCallback, WithStyles, withStyles, Toolbar, Grid, Button, Menu
 import { AddIcon, CollectionIcon, ProcessIcon, ProjectIcon } from '~/components/icon/icon';
 import { openProjectCreateDialog } from '~/store/projects/project-create-actions';
 import { openCollectionCreateDialog } from '~/store/collections/collection-create-actions';
+import { matchProjectRoute } from '~/routes/routes';
 
 type CssRules = 'button' | 'menuItem' | 'icon';
 
@@ -33,6 +34,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 
 interface SidePanelDataProps {
     currentItemId: string;
+    showButton: boolean;
 }
 
 interface SidePanelState {
@@ -41,9 +43,21 @@ interface SidePanelState {
 
 type SidePanelProps = SidePanelDataProps & DispatchProp & WithStyles<CssRules>;
 
+const transformOrigin: PopoverOrigin = {
+    vertical: -50,
+    horizontal: 45
+};
+
+const checkButtonVisibility = ({ router }: RootState) => {
+    const pathname = router.location ? router.location.pathname : '';
+    const match = matchProjectRoute(pathname);
+    return match ? true : false;
+};
+
 export const SidePanelButton = withStyles(styles)(
     connect((state: RootState) => ({
-        currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties)
+        currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties),
+        showButton: checkButtonVisibility(state)
     }))(
         class extends React.Component<SidePanelProps> {
 
@@ -51,16 +65,11 @@ export const SidePanelButton = withStyles(styles)(
                 anchorEl: undefined
             };
 
-            transformOrigin: PopoverOrigin = {
-                vertical: -50,
-                horizontal: 45
-            };
-
             render() {
-                const { classes } = this.props;
+                const { classes, showButton } = this.props;
                 const { anchorEl } = this.state;
                 return <Toolbar>
-                    <Grid container>
+                    {showButton && <Grid container>
                         <Grid container item xs alignItems="center" justify="center">
                             <Button variant="contained" color="primary" size="small" className={classes.button}
                                 aria-owns={anchorEl ? 'aside-menu-list' : undefined}
@@ -75,7 +84,7 @@ export const SidePanelButton = withStyles(styles)(
                                 open={Boolean(anchorEl)}
                                 onClose={this.handleClose}
                                 onClick={this.handleClose}
-                                transformOrigin={this.transformOrigin}>
+                                transformOrigin={transformOrigin}>
                                 <MenuItem className={classes.menuItem} onClick={this.handleNewCollectionClick}>
                                     <CollectionIcon className={classes.icon} /> New collection
                                 </MenuItem>
@@ -87,7 +96,7 @@ export const SidePanelButton = withStyles(styles)(
                                 </MenuItem>
                             </Menu>
                         </Grid>
-                    </Grid>
+                    </Grid> }
                 </Toolbar>;
             }
 

diff --git a/src/views/process-log-panel/process-log-panel.tsx b/src/views/process-log-panel/process-log-panel.tsx
index 2b2d6842774fdc168a200864df22dc7df15bfe48..b467a14e38bd6c5b750f9a08a3c6bda963c26b7c 100644 (file)
--- a/src/views/process-log-panel/process-log-panel.tsx
+++ b/src/views/process-log-panel/process-log-panel.tsx
@@ -8,7 +8,6 @@ import { connect } from 'react-redux';
 import { getProcess } from '~/store/processes/process';
 import { Dispatch } from 'redux';
 import { openProcessContextMenu } from '~/store/context-menu/context-menu-actions';
-import { matchProcessLogRoute } from '~/routes/routes';
 import { ProcessLogPanelRootDataProps, ProcessLogPanelRootActionProps, ProcessLogPanelRoot } from './process-log-panel-root';
 import { getProcessPanelLogs } from '~/store/process-logs-panel/process-logs-panel';
 import { setProcessLogsPanelFilter } from '~/store/process-logs-panel/process-logs-panel-actions';