cluedin-widget/widget/launchPad/index.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { Component } from 'react';
import { register } from '../../core/registry';
import { connect } from 'react-redux';
import { fetchGenericLastTools } from '../../core/action/tool';
import Widget from '../../core/components/generics/widget.jsx';
import { providers, location } from '../../core/config';
import Plus from 'material-ui/svg-icons/content/add';
import Radium from 'radium';
import Tooltip from 'rc-tooltip';
import RefreshIndicator from 'material-ui/RefreshIndicator';

const ProviderTileStyle = {
  wrapper: {
    display: 'inline-block',
    marginRight: '15px',
    width: '64px',
    height: '64px',
    border: '1px solid #ccc',
    borderRadius: '5px',
    padding: '5px',
    marginBottom: '15px',
    marginTop: '5px',
    color: '#ccc',
    cursor: 'pointer',
    ':hover': {
      borderColor: '#555',
    },
  },
  image: {
    width: '100%',
  },
};

class ProviderPlus extends Component {
  render() {
    return (
      <Tooltip
        placement="bottom"
        destroyTooltipOnHide={true}
        overlay={<div>Add Integration</div>}
      >
        <a target="__blank" href={location.goToAppProvider()} style={ProviderTileStyle.wrapper}>
          <Plus style={{ width: '100%', height: '100%' }}/>
        </a>
      </Tooltip>
    );
  }
}

const ProviderPlusWithStyle = Radium(ProviderPlus);

class ProviderTile extends Component {
  render() {
    const { entity } = this.props;

    const providerConfig = providers[entity.name.replace(/ /g, '').toLowerCase()];

    if (!providerConfig) {
      return (<span></span>);
    }

    return (
      <Tooltip
        placement="bottom"
        destroyTooltipOnHide={true}
        overlay={<div>{entity.name}</div>}
      >
        <a title={entity.name} href={entity.data.uri} target="__blank" style={ProviderTileStyle.wrapper}>
          <img style={ProviderTileStyle.image} src={providerConfig.icon}/>
        </a>
      </Tooltip>
    );
  }
}

const ProviderTileWithStyle = Radium(ProviderTile);

const style = {
  container: {
    position: 'relative',
  },
  refresh: {
    display: 'inline-block',
    position: 'relative',
    marginLeft: '50%',
  },
}
class LaunchPad extends Component {

  constructor(props) {
    super(props);
    this.state = {
      timestamp: Date.now()
    };
  }

  componentWillMount() {
    this.fetch();
  }

  fetch() {
    this.props.dispatch(fetchGenericLastTools(this.state.timestamp));
  }

  render() {
    const { isFetching, entities, isAdmin, layoutPosition, isFake, pageNumber } = this.props;
    let content;

    let entityType = '/Provider/Root';
    let isAdminContent;

    if (isFetching || !entities || entities.length === 0) {
      content = (<div style={style.container}>
        <RefreshIndicator
          size={50}
          left={-50}
          top={0}
          status="loading"
          style={style.refresh}
        />
      </div>);
    } else {
      if (isAdmin) {
        isAdminContent = (<ProviderPlusWithStyle />);
      }
      content = <div>
        {entities.map((entity, index) => {
          return (<ProviderTileWithStyle key={index} entity={entity}/>);
        })}
        {isAdminContent}
      </div>;
    }

    return (
      <Widget title="Launchpad">
        {content}
      </Widget>
    );
  }
}

function select(state) {
  return {
    entities: state.tool.currentTools,
    pageNumber: state.tool.pageNumber,
    isFetching: state.tool.isFetchingGenericTools,
    isFake: state.tool.isFakeGenericTools
  };
}

register('LaunchPad', connect(select)(LaunchPad), {
  name: 'LaunchPad',
  displayName: 'LaunchPad',
  description: 'All your integrations in one place.',
  relatedProviders: [
    'all',
  ],
  tags: [],
  requireEntity: false,
});