@imposium-hub/components 2.2.45-0 → 2.2.45

package/src/components/app-wrapper/AppWrapper.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import NoAccess from '../no-access/NoAccess';
 import Header from '../header/Header';
-import SessionService from '../../services/Session';
+import SessionService, { IHubSession } from '../../services/Session';
 import AuthService, { IIdentity } from '../../services/Auth0';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { login, clearCachedAuth } from '../../redux/actions/auth';
+import { cacheAccessData, clearCachedAccessList } from '../../redux/actions/access';
 import { validateAccessLevel } from '../../Util';
-import { setAccessData } from '../../redux/actions/access';
 
 export interface IAppWrapperProps {
     children: React.ReactChildren;
@@ -20,13 +20,14 @@ export interface IAppWrapperProps {
     access: any;
     auth: any;
     isFreshUser: boolean;
-    setAccessData(accessData: any): any;
     allowUnauthenticatedRender: boolean;
     onAuthenticated: (activeOrgId: string, activeStoryId: string) => any;
     onAuthenticationFailure: (e: Error) => any;
     showRequestAccess?: boolean;
     login: (id: IIdentity) => any;
     clearCachedAuth: () => any;
+    cacheAccessData: (accessData: any) => any;
+    clearCachedAccessList: () => any;
 }
 
 export interface IAppWrapperState {
@@ -66,7 +67,8 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
     }
 
     public componentDidMount = (): void => {
-        const { auth0ClientId, auth0Domain } = this.props;
+        const { auth, access, auth0ClientId, auth0Domain, isFreshUser } = this.props;
+        const session: IHubSession = SessionService.getSession();
 
         AuthService.bindToClient(auth0ClientId, auth0Domain);
 
@@ -84,8 +86,22 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
             this.setState({ restrictAccess: false });
         }
 
-        // Always check the session
-        this.doCheckSession(true);
+        // If cookie, auth or access data is missing / mismatched,
+        // silently check auth0 session and refresh flow on success
+        if (
+            !isFreshUser &&
+            auth !== null &&
+            access !== null &&
+            typeof session === 'object' &&
+            typeof session.sub === 'string' &&
+            session.sub === auth.idTokenPayload.sub &&
+            session.stories_hash === SessionService.generateStoriesHash(access) &&
+            session.orgs_hash === SessionService.generateOrgsHash(access)
+        ) {
+            this.propagateCreds();
+        } else {
+            this.doCheckSession(true);
+        }
     };
 
     /*
@@ -106,14 +122,12 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
 
             if (!validSession) {
                 this.props.clearCachedAuth();
+                this.props.clearCachedAccessList();
                 this.doCheckSession();
             }
         }
 
-        if (
-            this.props.organizationId !== prevProps.organizationId ||
-            this.props.access !== prevProps.access
-        ) {
+        if (this.props.organizationId !== prevProps.organizationId) {
             validAccessLevel = validateAccessLevel(
                 this.props.organizationId,
                 this.props.serviceId,
@@ -133,58 +147,16 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
     /*
         Emit creds to React parent
      */
-    private propagateCreds = (freshAccess, freshIdentity): void => {
-        const { storyId, organizationId, onAuthenticated } = this.props;
-
-        let initialStoryId = storyId;
-        let initialOrganizationId = organizationId;
-
-        const firstOrg = freshAccess.organizations[0];
-
-        const getIDsFromSession = () => {
-            const session = SessionService.getSession();
-            if (session && session.story_id && session.organization_id) {
-                const org = freshAccess.organizations.find(
-                    (o: any) => o.id === session.organization_id
-                );
-                if (org) {
-                    const story = org.stories.find((s: any) => s.id === session.story_id);
-                    if (story) {
-                        return { orgId: org.id, storyId: story.id };
-                    }
-                }
-            }
-            return null;
-        };
-
-        // If the org ID is not provided, but the storyID is provided, find the org ID if we can, if not, use the first org ID found and we'll show the story not found interface
-        if (!initialOrganizationId && initialStoryId) {
-            const org = freshAccess.organizations.find((o: any) =>
-                o.stories.find((s: any) => s.id === initialStoryId)
-            );
-            if (org) {
-                initialOrganizationId = org.id;
-            } else {
-                initialOrganizationId = firstOrg.id;
-            }
-        }
+    private propagateCreds = (): void => {
+        const { auth, access, storyId, onAuthenticated } = this.props;
+        const activeOrgId: string = this.determineActiveOrganization(auth, access);
+        let activeStoryId: string = SessionService.getSession().story_id;
 
-        if (!initialStoryId) {
-            // If storyID is not provided, try to use the one from the previous session
-            const sessionIds = getIDsFromSession();
-            if (sessionIds) {
-                initialOrganizationId = sessionIds.orgId;
-                initialStoryId = sessionIds.storyId;
-            } else {
-                // If that doesn't work - default to the first org & story
-                const story = firstOrg.stories[0];
-                initialOrganizationId = firstOrg.id;
-                initialStoryId = story.id;
-            }
+        if (storyId) {
+            activeStoryId = storyId;
         }
 
-        SessionService.buildFreshSession(freshIdentity, initialOrganizationId, initialStoryId);
-        onAuthenticated(initialOrganizationId, initialStoryId);
+        onAuthenticated(activeOrgId, activeStoryId);
 
         if (this.state.blockRender) {
             this.setState({ blockRender: false });
@@ -195,19 +167,8 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
         Bust cached creds if exist, invoke auth failure handler
      */
     private handleCheckSessionFailure = (e: Error): void => {
-        if (this.props.storyId) {
-            SessionService.cacheStoryId(this.props.storyId);
-        } else {
-            SessionService.clearCachedStoryId();
-        }
-
-        if (this.props.organizationId) {
-            SessionService.cacheOrgId(this.props.organizationId);
-        } else {
-            SessionService.clearCachedOrgId();
-        }
-
         this.props.clearCachedAuth();
+        this.props.clearCachedAccessList();
         this.props.onAuthenticationFailure(e);
     };
 
@@ -220,16 +181,15 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
         if (blockRender) {
             this.setState({ blockRender: true });
         }
+
         AuthService.checkSession()
             .then((freshIdentity: IIdentity) => {
-                const orgId = this.props.organizationId
-                    ? this.props.organizationId
-                    : SessionService.getCachedOrgId();
-                SessionService.getAccessData(freshIdentity.idToken, baseUrl, false, orgId)
+                SessionService.getAccessData(freshIdentity.idToken, baseUrl)
                     .then((freshAccess: any) => {
-                        this.props.setAccessData(freshAccess);
                         this.props.login(freshIdentity);
-                        this.propagateCreds(freshAccess, freshIdentity);
+                        this.props.cacheAccessData(freshAccess);
+                        SessionService.buildFreshSession(freshIdentity, freshAccess);
+                        this.propagateCreds();
                     })
                     .catch((e: Error) => {
                         console.error(e);
@@ -242,6 +202,86 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
             });
     };
 
+    private determineActiveOrganizationIn(
+        auth: IIdentity,
+        session: IHubSession,
+        organizationIds: string[]
+    ) {
+        const { organizationId } = this.props;
+        const {
+            idTokenPayload: { exp }
+        } = auth;
+
+        if (organizationIds.length > 0) {
+            if (organizationId && organizationIds.indexOf(organizationId) > -1) {
+                return this.setActiveOrganization(organizationId, exp, session);
+            }
+
+            if (
+                session &&
+                session.organization_id &&
+                organizationIds.indexOf(session.organization_id) > -1
+            ) {
+                return session.organization_id;
+            }
+
+            return this.setActiveOrganization(organizationIds[0], exp, session);
+        }
+
+        return '';
+    }
+
+    /*
+        Figure out what the active org should be based on app-wrapper configuration
+     */
+    private determineActiveOrganization = (auth: IIdentity, access: any): string => {
+        const { serviceId } = this.props;
+        const { organizations } = access;
+        const session: IHubSession = SessionService.getSession();
+        const allOrgIdsFlattened: string[] = organizations.map((o: any) => o.id);
+
+        const activeOrgId: string = this.determineActiveOrganizationIn(
+            auth,
+            session,
+            allOrgIdsFlattened
+        );
+        const activeOrg: any = organizations.find((o) => o.id === activeOrgId);
+
+        if (activeOrg && !activeOrg.services.includes(serviceId)) {
+            this.setState({ restrictAccess: true });
+        }
+
+        return activeOrgId;
+    };
+
+    /*
+        Update session if no session exists or diff in org id
+     */
+    private setActiveOrganization = (
+        organizationId: string,
+        exp: number,
+        sharedSession: IHubSession
+    ): string => {
+        if (
+            !sharedSession ||
+            !sharedSession.organization_id ||
+            sharedSession.organization_id !== organizationId
+        ) {
+            const activeOrg: any = this.props.access.organizations.find(
+                (o: any) => o.id === organizationId
+            );
+            const firstStoryId: string =
+                typeof activeOrg.stories[0] === 'object' ? activeOrg.stories[0].id : '';
+
+            SessionService.updateSession(
+                { organization_id: organizationId, story_id: firstStoryId },
+                exp
+            );
+        }
+
+        return organizationId;
+    };
+
     public render = (): JSX.Element => {
         const { blockRender, restrictAccess } = this.state;
         const { children, showRequestAccess, allowUnauthenticatedRender } = this.props;
@@ -282,8 +322,9 @@ const mapDispatchToProps = (dispatch) => {
     return bindActionCreators(
         {
             login,
-            setAccessData,
-            clearCachedAuth
+            clearCachedAuth,
+            cacheAccessData,
+            clearCachedAccessList
         },
         dispatch
     );

package/src/components/assets/AssetsTableNameCell.tsx

@@ -10,7 +10,6 @@ import { DeterminateLoader } from '../determinate-loader/DeterminateLoader';
 interface IAssetsTableNameCell {
     cell: any;
     api: IImposiumAPI;
-    disabled: boolean;
     updateAssetName: (api: any, id: string, name: string, delay?: boolean) => any;
 }
 
@@ -21,8 +20,7 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
             row: {
                 original: { name, id, percent: uploadProgress }
             }
-        },
-        disabled
+        }
     } = props;
 
     const [localName, setLocalName] = useState(name);
@@ -60,7 +58,6 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
             <TextField
                 value={localName}
                 width={'100%'}
-                disabled={disabled}
                 onChange={(n) => onUpdate(n)}
             />
         );

package/src/components/assets/AssetsUploadMenu.tsx

@@ -29,7 +29,6 @@ interface IAssetsUploadMenuProps {
     assetUploads: any;
     assetTags: string[];
     api: any;
-    editor: any;
     toggleAutoTag: (toggle: boolean) => any;
     toggleTagFileName: (toggle: boolean) => any;
     toggleAssignToStory: (toggle: boolean) => any;
@@ -63,8 +62,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
                 tagManually,
                 manualTags
             },
-            assetTags,
-            editor: { fromCrM }
+            assetTags
         } = this.props;
         let uploadsListInner;
         if (uploads.length > 0) {
@@ -165,15 +163,13 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
                         value={tagByFileName}
                         onChange={() => this.props.toggleTagFileName(!tagByFileName)}
                     />
-                    {!fromCrM && (
-                        <CheckboxField
-                            width='50%'
-                            label={copy.uploads.assignToProjectInput}
-                            info={copy.uploads.assignToProjectInfo}
-                            value={assignToStory}
-                            onChange={() => this.props.toggleAssignToStory(!assignToStory)}
-                        />
-                    )}
+                    <CheckboxField
+                        width='50%'
+                        label={copy.uploads.assignToProjectInput}
+                        info={copy.uploads.assignToProjectInfo}
+                        value={assignToStory}
+                        onChange={() => this.props.toggleAssignToStory(!assignToStory)}
+                    />
                 </div>
                 {tagsColumn}
                 <div className='uploads-list'>{uploadsListInner}</div>
@@ -202,7 +198,6 @@ const mapDispatchToProps = (dispatch): any => {
 const mapStateToProps = (state): any => {
     return {
         assetUploads: state.assetUploads,
-        editor: state.editor,
         assetTags: state.assetTags
     };
 };

package/src/components/auth-gate/AuthGate.tsx

@@ -5,18 +5,16 @@ import AuthService, { IIdentity } from '../../services/Auth0';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { login } from '../../redux/actions/auth';
-import { setAccessData } from '../../redux/actions/access';
+import { cacheAccessData } from '../../redux/actions/access';
 
 interface IAuthGateProps {
     auth0ClientId: string;
     auth0Domain: string;
     auth0Hash: string;
-    onAuthenticated: (storyId, orgId) => any;
-    storyId: string;
-    organizationId: string;
+    onAuthenticated: () => any;
     baseUrl?: string;
-    setAccessData(accessData: any): any;
     login: (id: IIdentity) => any;
+    cacheAccessData: (accessData: any) => any;
 }
 
 class AuthGate extends React.PureComponent<IAuthGateProps> {
@@ -36,16 +34,12 @@ class AuthGate extends React.PureComponent<IAuthGateProps> {
         } else {
             AuthService.parseIdFromHash(auth0Hash)
                 .then((freshIdentity: IIdentity) => {
-                    // Use the cached org ID and story ID if it exists
-                    const orgId = SessionService.getCachedOrgId() || null;
-                    const storyId = SessionService.getCachedStoryId() || null;
-
-                    SessionService.getAccessData(freshIdentity.idToken, baseUrl, false, orgId)
+                    SessionService.getAccessData(freshIdentity.idToken, baseUrl)
                         .then((freshAccess: any) => {
                             this.props.login(freshIdentity);
-                            this.props.setAccessData(freshAccess);
-                            SessionService.buildFreshSession(freshIdentity, orgId, storyId);
-                            onAuthenticated(storyId, orgId);
+                            this.props.cacheAccessData(freshAccess);
+                            SessionService.buildFreshSession(freshIdentity, freshAccess);
+                            onAuthenticated();
                         })
                         .catch((e) => {
                             AuthService.login();
@@ -70,7 +64,7 @@ const mapDispatchToProps = (dispatch) => {
     return bindActionCreators(
         {
             login,
-            setAccessData
+            cacheAccessData
         },
         dispatch
     );

package/src/components/header/Header.tsx

@@ -15,16 +15,12 @@ export interface IHeaderProps {
     activeOrganization: string;
     activeStory?: string;
     hideStoryPicker?: boolean;
-    hideOrgPicker?: boolean;
     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;
 }
 
@@ -310,7 +306,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
         this.setState({ dataLoading: true });
 
-        // SessionService.getAccessData(idToken, baseUrl, true, activeOrganization)
         SessionService.getAccessData(idToken, baseUrl)
             .then((res) => {
                 this.setState({ dataLoading: false, accessData: res }, () =>
@@ -323,17 +318,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
     };
 
     public render() {
-        const {
-            email,
-            activeOrganization,
-            activeStory,
-            hideStoryPicker,
-            story,
-            hideOrgPicker,
-            additionalButtons,
-            showFTLogo,
-            hideDocs
-        } = this.props;
+        const { email, activeOrganization, activeStory, hideStoryPicker, story } = this.props;
         const {
             accessData,
             showAccountDropdown,
@@ -366,14 +351,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         let serviceDropdownToggle: JSX.Element;
         let serviceDropdownMenu: JSX.Element;
 
-        const btnLogout = (
-            <button
-                className='btn-logout'
-                onClick={() => this.doLogout()}>
-                {ImposiumHeader.LOGOUT_COPY}
-            </button>
-        );
-
         if (accessData) {
             activeService = servicesByOrganization.find((s: any) =>
                 window.location.href.includes(s.url)
@@ -392,36 +369,6 @@ 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'>
@@ -442,7 +389,33 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                         </section>
                     )}
 
-                    {docsSection}
+                    <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>
                 </div>
             );
 
@@ -464,7 +437,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 </button>
             );
 
-            accountDropdownToggle = !hideOrgPicker ? (
+            accountDropdownToggle = (
                 <button
                     id='btn-toggle-orgs'
                     className='btn-toggle-orgs'
@@ -473,8 +446,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                     onClick={() => this.toggleAccountDropdown(!showAccountDropdown)}>
                     {activeFirstChar}
                 </button>
-            ) : (
-                btnLogout
             );
         }
 
@@ -567,19 +538,6 @@ 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'
@@ -587,13 +545,16 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 style={headerBorder}>
                 <div className='inner-content'>
                     <span className='inner-left'>
-                        <div className='title'>{logo}</div>
+                        <div className='title'>
+                            <div className='logo' />
+                            <h1 className='heading'>{ImposiumHeader.DEFAULT_TITLE}</h1>
+                        </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'
@@ -633,7 +594,11 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
                         <div className='orgs-menu-footer'>
                             <div className='email'>{email}</div>
-                            {btnLogout}
+                            <button
+                                className='btn-logout'
+                                onClick={() => this.doLogout()}>
+                                {ImposiumHeader.LOGOUT_COPY}
+                            </button>
                         </div>
                     </div>
                 </ImposiumDropdown>