@imposium-hub/components 2.3.11-0 → 2.4.0-1

package/src/components/header/Header.tsx

@@ -9,18 +9,25 @@ import _ from 'lodash';
 import DataTable from '../data-table/DataTable';
 import AssetsTableDateCell from '../assets/AssetsTableDateCell';
 import SessionService, { IHubSession } from '../../services/Session';
+import { setAccessData } from '../../redux/actions/access';
+import { bindActionCreators } from 'redux';
 
 export interface IHeaderProps {
     email?: string;
     activeOrganization: string;
     activeStory?: string;
     hideStoryPicker?: boolean;
+    hideOrgPicker?: boolean;
+    setAccessData(access: any): void;
     onOrganizationChange?: (orgId: any) => any;
     onStoryChange?: (story: any) => any;
     logout: (...args) => any;
+    additionalButtons?: any[];
     auth: any;
     story: any;
     baseUrl: any;
+    hideDocs?: boolean;
+    showFTLogo?: boolean;
     access: any;
 }
 
@@ -36,7 +43,6 @@ export interface IHeaderState {
     activeFirstChar: string;
     order: string;
     orderDirection: string;
-    accessData: any;
     dataLoading: boolean;
 }
 
@@ -146,8 +152,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             activeFirstChar: '',
             order: 'date_modified',
             orderDirection: 'desc',
-            accessData: null,
-            dataLoading: true
+            dataLoading: false
         };
 
         this.serviceToggleRef = React.createRef();
@@ -156,26 +161,19 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
     }
 
     public componentDidMount = (): void => {
-        this.getAccessDataHandler();
+        if (this.props.access && this.props.activeOrganization) {
+            this.parseAccessData(this.props.access, this.props.activeOrganization);
+        }
     };
 
     public componentDidUpdate(prevProps: Readonly<IHeaderProps>): void {
-        const { accessData } = this.state;
         const { activeOrganization, access } = this.props;
 
-        if (activeOrganization !== prevProps.activeOrganization) {
-            if (accessData !== null) {
-                this.parseAccessData(accessData, activeOrganization);
-            } else {
-                this.getAccessDataHandler();
+        if (activeOrganization !== prevProps.activeOrganization || access !== prevProps.access) {
+            if (access !== null) {
+                this.parseAccessData(access, activeOrganization);
             }
         }
-
-        if (!_.isEqual(access, accessData)) {
-            this.setState({ accessData: access }, () =>
-                this.parseAccessData(access, activeOrganization)
-            );
-        }
     }
 
     private parseAccessData = (accessData: any, activeOrganization: string): void => {
@@ -299,28 +297,37 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
     private getAccessDataHandler = () => {
         const {
-            auth: { idToken },
+            auth: { accessToken },
             baseUrl,
             activeOrganization
         } = this.props;
 
         this.setState({ dataLoading: true });
 
-        SessionService.getAccessData(idToken, baseUrl)
+        SessionService.getAccessData(accessToken, baseUrl, false, activeOrganization)
             .then((res) => {
-                this.setState({ dataLoading: false, accessData: res }, () =>
-                    this.parseAccessData(res, activeOrganization)
-                );
+                this.setState({ dataLoading: false });
+                this.props.setAccessData(res);
             })
-            .catch((e: Error) => {
+            .catch((e) => {
                 console.error(e);
             });
     };
 
     public render() {
-        const { email, activeOrganization, activeStory, hideStoryPicker, story } = this.props;
         const {
-            accessData,
+            email,
+            activeOrganization,
+            activeStory,
+            hideStoryPicker,
+            story,
+            hideOrgPicker,
+            additionalButtons,
+            showFTLogo,
+            hideDocs,
+            access
+        } = this.props;
+        const {
             showAccountDropdown,
             servicesByOrganization,
             activeServiceBlob,
@@ -351,7 +358,15 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         let serviceDropdownToggle: JSX.Element;
         let serviceDropdownMenu: JSX.Element;
 
-        if (accessData) {
+        const btnLogout = (
+            <button
+                className='btn-logout'
+                onClick={() => this.doLogout()}>
+                {ImposiumHeader.LOGOUT_COPY}
+            </button>
+        );
+
+        if (access) {
             activeService = servicesByOrganization.find((s: any) =>
                 window.location.href.includes(s.url)
             );
@@ -369,6 +384,36 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 .filter((s: any) => !s.private && ImposiumHeader.PRIVATE_IDS.indexOf(s.id) > -1)
                 .map((s: any) => this.renderServiceAnchor(s, activeOrganization, activeStory));
 
+            const docsSection = !hideDocs ? (
+                <section className='service-menu-section'>
+                    <div className='service-menu-heading'>{ImposiumHeader.DOCS_HEADER}</div>
+
+                    <div className='service-menu-anchors'>
+                        <div className='anchor-wrapper doc'>
+                            <a
+                                target='__blank'
+                                href={ImposiumHeader.API_DOCS_LINK}>
+                                <div className='icon-fixed'>
+                                    <ServiceIcon iconName='FaCogs' />
+                                </div>
+                                {ImposiumHeader.API_DOCS_LINK_COPY}
+                            </a>
+                        </div>
+
+                        <div className='anchor-wrapper doc'>
+                            <a
+                                target='__blank'
+                                href={ImposiumHeader.SDK_DOCS_LINK}>
+                                <div className='icon-fixed'>
+                                    <ServiceIcon iconName='FaJsSquare' />
+                                </div>
+                                {ImposiumHeader.SDK_DOCS_LINK_COPY}
+                            </a>
+                        </div>
+                    </div>
+                </section>
+            ) : null;
+
             serviceDropdownMenu = (
                 <div className='service-menu'>
                     <section className='service-menu-section'>
@@ -389,33 +434,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                         </section>
                     )}
 
-                    <section className='service-menu-section'>
-                        <div className='service-menu-heading'>{ImposiumHeader.DOCS_HEADER}</div>
-
-                        <div className='service-menu-anchors'>
-                            <div className='anchor-wrapper doc'>
-                                <a
-                                    target='__blank'
-                                    href={ImposiumHeader.API_DOCS_LINK}>
-                                    <div className='icon-fixed'>
-                                        <ServiceIcon iconName='FaCogs' />
-                                    </div>
-                                    {ImposiumHeader.API_DOCS_LINK_COPY}
-                                </a>
-                            </div>
-
-                            <div className='anchor-wrapper doc'>
-                                <a
-                                    target='__blank'
-                                    href={ImposiumHeader.SDK_DOCS_LINK}>
-                                    <div className='icon-fixed'>
-                                        <ServiceIcon iconName='FaJsSquare' />
-                                    </div>
-                                    {ImposiumHeader.SDK_DOCS_LINK_COPY}
-                                </a>
-                            </div>
-                        </div>
-                    </section>
+                    {docsSection}
                 </div>
             );
 
@@ -437,19 +456,22 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 </button>
             );
 
-            accountDropdownToggle = (
-                <button
-                    id='btn-toggle-orgs'
-                    className='btn-toggle-orgs'
-                    ref={this.orgsToggleRef}
-                    style={{ backgroundColor: dropdownToggleColor }}
-                    onClick={() => this.toggleAccountDropdown(!showAccountDropdown)}>
-                    {activeFirstChar}
-                </button>
-            );
+            accountDropdownToggle =
+                !hideOrgPicker && access.organizations.length > 0 ? (
+                    <button
+                        id='btn-toggle-orgs'
+                        className='btn-toggle-orgs'
+                        ref={this.orgsToggleRef}
+                        style={{ backgroundColor: dropdownToggleColor }}
+                        onClick={() => this.toggleAccountDropdown(!showAccountDropdown)}>
+                        {activeFirstChar}
+                    </button>
+                ) : (
+                    btnLogout
+                );
         }
 
-        if (accessData && activeOrganizationBlob) {
+        if (access && activeOrganizationBlob) {
             activePanel = (
                 <div className='orgs-menu-active-org'>
                     <div
@@ -463,11 +485,11 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             );
         }
 
-        if (accessData && accessData.organizations && accessData.organizations.length === 0) {
+        if (access && access.organizations && access.organizations.length === 0) {
             storyToggle = null;
         }
 
-        if (accessData && activeOrganizationBlob && !hideStoryPicker) {
+        if (access && activeOrganizationBlob && !hideStoryPicker) {
             currentStory = activeOrganizationBlob.stories.find((s: any) => s.id === activeStory);
             storyToggle = (
                 <button
@@ -538,6 +560,19 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             );
         }
 
+        const logo = showFTLogo ? (
+            <>
+                <div className='ft-logo' />
+                &nbsp;&nbsp;|&nbsp;&nbsp;
+                <h1 className='heading'>{ImposiumHeader.DEFAULT_TITLE}</h1>
+            </>
+        ) : (
+            <>
+                <div className='logo' />
+                <h1 className='heading'>{ImposiumHeader.DEFAULT_TITLE}</h1>
+            </>
+        );
+
         return (
             <nav
                 id='imposium-header'
@@ -545,16 +580,13 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 style={headerBorder}>
                 <div className='inner-content'>
                     <span className='inner-left'>
-                        <div className='title'>
-                            <div className='logo' />
-                            <h1 className='heading'>{ImposiumHeader.DEFAULT_TITLE}</h1>
-                        </div>
-
+                        <div className='title'>{logo}</div>
                         {serviceDropdownToggle}
                     </span>
 
                     <span className='inner-right'>
                         {storyToggle}
+                        <div className='additional-buttons'>{additionalButtons}</div>
                         {accountDropdownToggle}
                         <a
                             href='https://support.flashtalking.com/hc/en-us/sections/25515903148819-Imposium'
@@ -594,11 +626,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
                         <div className='orgs-menu-footer'>
                             <div className='email'>{email}</div>
-                            <button
-                                className='btn-logout'
-                                onClick={() => this.doLogout()}>
-                                {ImposiumHeader.LOGOUT_COPY}
-                            </button>
+                            {btnLogout}
                         </div>
                     </div>
                 </ImposiumDropdown>
@@ -607,6 +635,15 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
     }
 }
 
+const mapDispatchToProps = (dispatch) => {
+    return bindActionCreators(
+        {
+            setAccessData
+        },
+        dispatch
+    );
+};
+
 const mapStateToProps = (state): any => {
     return {
         auth: state.auth,
@@ -615,4 +652,4 @@ const mapStateToProps = (state): any => {
     };
 };
 
-export default connect(mapStateToProps, null)(ImposiumHeader);
+export default connect(mapStateToProps, mapDispatchToProps)(ImposiumHeader);

package/src/components/list-field/ListField.tsx

@@ -10,7 +10,7 @@ import { ICON_PLUS } from '../../constants/icons';
 interface IListFieldProps {
     buttons?: any;
     disabled?: boolean;
-    label?: any;
+    label?: string;
     options: any;
     placeholder?: string;
     tooltip?: IToolTipConfig | string;

package/src/components/number-field/NumberField.tsx

@@ -4,7 +4,7 @@ import { IToolTipConfig } from '../Tooltip';
 
 interface INumberFieldProps {
     buttons?: any;
-    label?: any;
+    label?: string;
     placeholder?: string;
     readOnly?: boolean;
     value: number;