1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from 'react';
6 import { Tooltip, IconButton } from '@material-ui/core';
7 import { connect } from 'react-redux';
8 import { toggleSidePanel } from "store/side-panel/side-panel-action";
9 import { RootState } from 'store/store';
11 type collapseButtonProps = {
13 toggleSidePanel: (collapsedState: boolean) => void
16 export const COLLAPSE_ICON_SIZE = 35
18 const SidePanelToggle = (props: collapseButtonProps) => {
19 const collapseButtonIconStyles = {
21 width: `${COLLAPSE_ICON_SIZE}px`,
22 height: `${COLLAPSE_ICON_SIZE}px`,
33 return <Tooltip disableFocusListener title="Toggle Side Panel">
34 <IconButton data-cy="side-panel-toggle" style={collapseButtonIconStyles.root} onClick={() => { props.toggleSidePanel(props.isCollapsed) }}>
37 <img style={{...collapseButtonIconStyles.icon, marginLeft:'0.25rem'}} src='/mui-start-icon.svg' alt='an arrow pointing right'/>
39 <img style={{ ...collapseButtonIconStyles.icon, transform: "rotate(180deg)"}} src='/mui-start-icon.svg' alt='an arrow pointing right'/>}
45 const mapStateToProps = (state: RootState) => {
47 isCollapsed: state.sidePanel.collapsedState
51 const mapDispatchToProps = (dispatch) => {
53 toggleSidePanel: (collapsedState) => {
54 return dispatch(toggleSidePanel(collapsedState))
59 export default connect(mapStateToProps, mapDispatchToProps)(SidePanelToggle)