cluedin-widget/core/components/entities/issue.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 EntityAuthors from "../entityRelated/EntityAuthors.jsx";
import { makeNoValueRow, makePropHtml, findFromKey, makeBadgeHtml } from "../../helpers/properties.jsx";
import EntityValueRow from "../entityRelated/EntityValueRow.jsx";
import EntityDefaultHeader from "../entityRelated/EntityDefaultHeader.jsx";

let noStatus   = makeNoValueRow( 'Status' );
let noPriority = makeNoValueRow( 'Priority' );
let noUrl      = makeNoValueRow( 'Url' );
let noChannel  = makeNoValueRow( 'Channel' );
let noMailProp = makeNoValueRow( 'From Email' );
let noNameProp = makeNoValueRow( 'From Name' );

export default class Issue extends Component {
    render() {
        const { entity } = this.props;

        let statusProp = findFromKey( entity.properties, 'status' );
        let channel    = findFromKey( entity.properties, 'channel' );

        let statusHtml  = statusProp ? makeBadgeHtml( statusProp ) : noStatus;
        let channelHtml = channel ? makePropHtml( channel ) : noChannel;

        return (
            <div className="cluedIn_entity_row">
                <EntityDefaultHeader entity={entity}></EntityDefaultHeader>

                <div className="cluedIn_row cluedIn_row_notCentered cluedIn_entity_table">
                    <div className="cluedIn_col s6">
                        <EntityValueRow name="Author(s)">
                            <EntityAuthors entity={entity}></EntityAuthors>
                        </EntityValueRow>
                    </div>
                    <div className="cluedIn_col s6">
                        <EntityValueRow name="Creation Date">
                            {entity.data.createdDateFormatted}
                        </EntityValueRow>
                    </div>
                </div>
                <div className="cluedIn_row cluedIn_row_notCentered cluedIn_entity_table">
                    <div className="cluedIn_col s6">
                        {statusHtml}
                    </div>
                    <div className="cluedIn_col s6">
                        {channelHtml}
                    </div>
                </div>
            </div>
        );
    }
}