sdnr/wt/odlux/apps/helpApp/src/components/helpStatus.tsx

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18 import * as React from 'react';
  19
  20 import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
  21 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';  // select app icon
  22
  23 import connect, { Connect } from '../../../../framework/src/flux/connect';
  24 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
  25
  26 import Typography from '@material-ui/core/Typography';
  27 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  28 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
  29 import { withRouter, RouteComponentProps } from 'react-router';
  30
  31 const styles = (theme: Theme) => createStyles({
  32   icon: {
  33     marginLeft: 8,
  34     marginRight: 8
  35   },
  36   disabled: {
  37     color: theme.palette.grey[400]
  38   },
  39   link: {
  40     cursor: "pointer",
  41     '&:hover': {
  42       textDecoration: "underline"
  43     }
  44   }
  45 });
  46
  47 const mapProps = (state: IApplicationStoreState) => ({
  48   appId: state.framework.applicationState.appId,
  49   toc: state.help.toc
  50 });
  51
  52
  53 type HelpStatusComponentProps = & RouteComponentProps & WithStyles<typeof styles> & Connect<typeof mapProps>;
  54
  55 class HelpStatusComponent extends React.Component<HelpStatusComponentProps> {
  56   render() {
  57     const { classes, history, toc, appId } = this.props;
  58     const rootNode = toc && toc.find(t => t.id === "sdnr");
  59     const helpNode = appId
  60       ? rootNode && rootNode.nodes && rootNode.nodes.find(n => n.id === appId || n.id === appId + "App")
  61       : rootNode;
  62     return helpNode
  63       ? (
  64         <Typography variant="body1" color="inherit" className={classes.link} onClick={(event) => { event.stopPropagation(); history.push(`/help/${helpNode.uri}`) }} >
  65           <FontAwesomeIcon className={classes.icon} icon={faQuestionCircle} />
  66           Help
  67         </Typography>
  68       )
  69       : (
  70         <Typography variant="body1" className={classes.disabled}>
  71           <FontAwesomeIcon className={classes.icon} icon={faQuestionCircle} />
  72           Help
  73         </Typography>
  74       );
  75   };
  76
  77 }
  78
  79 export const HelpStatus = withRouter(withStyles(styles)(connect(mapProps)(HelpStatusComponent) as any) as any);
  80 export default HelpStatus;