cluedin-widget/widget/entity/entityFrame/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 Widget from '../../../core/components/generics/widget.jsx';
import { connect } from 'react-redux';
import iso from '../../../iso';

class EntityFrame extends Component {
  render() {
    const { entity, isFetchingEntity, url, name, height } = this.props;
    let result;
    const tmp = iso.string.template(url);
    let heightFrame = `${height}px` || '400px';

    if (entity) {
      result = tmp(entity);
    } else {
      result = tmp({});
    }

    return (
      <Widget loading={isFetchingEntity} title={name || url}>
        <iframe style={{border: 0, margin:0, padding:0, width:'100%', height:heightFrame, }} src={result}></iframe>
      </Widget>
    );
  }
}

function select(state) {
  return {
    entity: state.entity.selectedEntity,
    isFetchingEntity: state.entity.isFetchingEntity,
  };
}

register('EntityFrame', connect(select)(EntityFrame), {
  name: 'EntityFrame',
  displayName: 'Frame Loader',
  description: 'Load an page inside a CluedIn Widget.',
  fields: [{
    displayName: 'Name',
    name: 'name',
    type: 'input',
    required: true,
    errorMessage: 'Please, choose a valid name.',
  },
    {
      displayName: 'Frame Url',
      name: 'url',
      type: 'input',
      required: true,
      errorMessage: 'Please, choose a valid URL.',
    },
    {
      displayName: 'Frame Height (a number)',
      name: 'height',
      type: 'input',
      required: false,
      errorMessage: 'Please, choose a valid heigth.',
    }],
  relatedProviders: [
    'dropbox',
    'office365',
    'googledrive',
    'box',
    'dropbox',
    'slack',
    'sharepoint',
  ],
  tags: [
    'support',
    'sales',
    'marketing',
  ],
  requireEntity: false,
  allowMultiplePerPage: true,
});