cluedin-widget/core/components/Layouts/AppWithTabs.jsx

This is the project for creating and managing widgets in CluedIn.

import React, { Component } from 'react'
import Grid from './Grid.jsx'
import localStorage from 'store'
import ReactTabs from 'react-tabs'
import userProfile from '../../userProfile/index'

const Tab      = ReactTabs.Tab;
const Tabs     = ReactTabs.Tabs;
const TabList  = ReactTabs.TabList;
const TabPanel = ReactTabs.TabPanel;

export default class AppWithTabs extends Component {
    buildTabMenu( tab, index ) {
        return ( <Tab key={index}>{tab.name}</Tab>);
    }

    buildSuggestedSearchWidget( suggestedSearches ) {

        const { index, type } = this.props;

        var result = [];
        suggestedSearches.forEach( ( search, i ) => {

            result.push( {
                name: 'EntitySuggestedSearch',
                place: 'Content',
                size: 4,
                parameters: {
                    search: search,
                    index: i,
                    layoutIndex: index,
                    type: type
                }
            } );
        } );

        return result;
    }

    filterAdminWidget( w ) {
        const { currentUser } = this.props;

        if ( w.onlyAdmin ) {
            return currentUser.client.IsAdmin;
        }

        return true;
    }

    filterBasedOnUserSettings( w ) {
        const { type } = this.props;

        let excludedWidgets = userProfile.getExcludedWidgets( type );

        return !(excludedWidgets.indexOf( w.name ) > -1);
    }

    addParamToWidget( w ) {
        const { entityId } = this.props;

        w.parameters          = w.parameters || {};
        w.parameters.entityId = entityId;
    }

    filterWidget( widgets ) {
        const { entityId } = this.props;

        widgets = widgets.filter( this.filterBasedOnUserSettings, this ).filter( this.filterAdminWidget, this );

        if ( entityId ) {
            widgets.forEach( this.addParamToWidget, this );
        }

        return widgets;
    }

    filterSuggestedSearches( suggestedSearches, filterSuggestedSearches ) {

        suggestedSearches = suggestedSearches || [];

        if ( !filterSuggestedSearches || filterSuggestedSearches.length === 0 ) {
            return suggestedSearches;
        }

        return suggestedSearches.filter( ( s ) => {
            return filterSuggestedSearches.find( ( include ) => {
                return ( include.key === s.DisplayName );
            } );
        } );
    }

    buildTabs( tab, tabIndex ) {
        const { entityId, entity, type, layout, isFetchingEntity, index, currentUser } = this.props;

        let singleLayout                = layout[ index ];
        let widgets                     = this.filterWidget( tab.widgets.slice( 0 ) );
        let currentTabLayoutInformation = {
            layoutIndex: index,
            tabIndex: tabIndex,
            type: type
        };

        if ( entityId && entity && !isFetchingEntity && tab.includeSuggestedSearches ) {

            let suggestedSearches = this.filterSuggestedSearches( entity.SuggestedSearches, tab.suggestedSearchFilter );

            let widgetsForSuggestedSearch = this.buildSuggestedSearchWidget( suggestedSearches );

            if ( widgetsForSuggestedSearch && widgetsForSuggestedSearch.length > 0 ) {
                widgetsForSuggestedSearch.forEach( ( w )=> {
                    if ( singleLayout.includeSuggestedSearchesBefore ) {
                        widgets.shift( w );
                    } else {
                        widgets.push( w );
                    }
                } );
            }
        }

        return (<TabPanel key={tabIndex}>
            <div className="cluedIn_container">
                <Grid layoutInformation={currentTabLayoutInformation}
                      isAdmin={currentUser.client.IsAdmin} widgets={widgets}></Grid>
            </div>
        </TabPanel>);
    }

    render() {
        const {  layout, index, type, currentUser } = this.props;
        let tabs;
        let tabsTitles;
        let tabsContent;
        let singleLayout = layout[ index ];

        let sharedWidgetLayoutInformation = {
            layoutIndex: index,
            tabIndex: -1,
            type: type
        };

        tabs = singleLayout.tabs.slice( 0 );

        tabsTitles  = tabs.map( this.buildTabMenu, this );
        tabsContent = tabs.map( this.buildTabs, this );

        return ( <div className="cluedIn_generic_tabs">
            <div className="cluedIn_row">
                <div className="cluedIn_col s12">
                    <Grid layoutInformation={sharedWidgetLayoutInformation}
                          isAdmin={currentUser.client.IsAdmin}
                          widgets={singleLayout.sharedWidgets}></Grid>
                </div>
                <div className="cluedIn_col s12">
                    <Tabs>
                        <TabList>
                            {tabsTitles}
                        </TabList>
                        {tabsContent}
                    </Tabs>
                </div>
            </div>
        </div>);
    }
}