React Chronos Navigation

Installation

npm i chronoscloud-navigation

How To Use

First import this component where you want to use it

import ChronosCloudNavigationBar from "chronoscloud-navigation"

Then just renders it

<ChronosCloudNavigationBar />

Props

| Prop | Description | Default value | | ------ | :-------------------: | :-------------: | | alias | Profile Alias | null | |application|Application Title| null | |appServices|Application Subscribed Services| null | |currentUser|User Profile| null | |hasCreateInvitePermission|Is invite permision link on profile menu visible| false | |hasMultiView|Is MultiView in App Switcher visible| false | |hasCoreAnalytics|Is Core Analytics in App Switcher visible| false | |hasSearch|Is Search bar visible| false | | host | ChronosCloud Host | null | |logo|Application Logo| null | |main|Main Title|null| |onLogout|On logout method| null | |returnToHome|Return To Homemethod| null | |protocol|ChronosCloud Protocol | null | |searchInput|Search Textbox area| null |

Example

import React, { Component } from "react";
import ChronosCloudNavigationBar from "chronoscloud-navigation";

import { userManager } from '../auth';
import { CHRONOSCLOUD_PROTOCOL, CHRONOSCLOUD_HOST, APP_ASSET_URL, APP_AUTH_IMAGE, APP_AUTH_URL, APP_CORE_IMAGE, APP_CORE_URL, APP_EDGE_IMAGE, APP_EDGE_URL, APP_TRACKER_IMAGE, APP_TRACKER_URL, APP_OV_URL, APP_ANALYTICS_IMAGE, APP_MULTIVIEW_IMAGE} from '../environment';

import SearchInput from '../components/Navigation/search';

class App extends Component {
  onLogoutButtonClick(event) { // Used to handle logout event
    event.preventDefault();
    userManager.signoutRedirect();
  }

  render() {
    const { profile } = this.props.subscription.data || {},
    alias = profile ? profile.account_alias || profile.account : '',
    currentPath = window.location.pathname,
    currentUser = this.props.currentUser ? this.props.currentUser.profile || {} : null,
    hasCreateInvitePermission = currentUser ? (currentUser.permissions.includes("AUTH.MANAGE_INVITATIONS")) : false,
    hasCoreAnalytics = currentUser ? (currentUser.permissions.includes("CORE.ANALYTICS")) : false;

    let services = {},
    APP_MULTIVIEW_URL;

    let services = {},
    APP_MULTIVIEW_URL;

    if(currentUser){
      const PUBLIC_URL =  `${CHRONOSCLOUD_PROTOCOL}//${currentUser.account_alias}.${CHRONOSCLOUD_HOST}`,
      APP_ANALYTICS_URL = `${PUBLIC_URL}/analytics`;
      APP_MULTIVIEW_URL = `${PUBLIC_URL}/multi_view`;

      services = {
        "AUTH": {
          name: "Accounts",
          icon: APP_AUTH_IMAGE,
          link: APP_AUTH_URL
        },
        "CORE": {
          name: "Enterprise",
          icon: APP_CORE_IMAGE,
          link: APP_CORE_URL
        },
        "EDGE": {
          name: "Edge",
          icon: APP_EDGE_IMAGE,
          link: APP_EDGE_URL
        },
        "TRACKER": {
          name: "Tracker",
          icon: APP_TRACKER_IMAGE,
          link: APP_TRACKER_URL
        },
        "VERIFIER": {
          name: "Order Verifier",
          icon: APP_CORE_IMAGE,
          link: APP_OV_URL
        },
        "CORE.ANALYTICS": {
          name: "Analytics",
          icon: APP_ANALYTICS_IMAGE,
          link: APP_ANALYTICS_URL
        },
        "MULTI.VIEW": {
          name: "Multi View",
          icon: APP_MULTIVIEW_IMAGE,
          link: APP_MULTIVIEW_URL
        }
      }
    }

    returnToHome(){
      this.props.history.push(`/`);
    }

    return (
        <ChronosCloudNavigationBar
          alias={alias} 
          protocol={CHRONOSCLOUD_PROTOCOL} 
          host={CHRONOSCLOUD_HOST} 
          currentUser={this.props.currentUser}
          onLogout={this.onLogoutButtonClick}true
          hasSearch={true}
          hasCreateInvitePermission={hasCreateInvitePermission}
          hasMultiView={true}
          hasCoreAnalytics={hasCoreAnalytics}
          main='ChronosCloud'
          application='Enterprise'
          appServices={services}
          logo={`${APP_ASSET_URL}/scm-logo.png`}
          returnToHome={returnToHome}
          searchInput={<SearchInput className="chronos-navbar-search" {...this.props} /> } 
        />
    );
  }
}

export default App;