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

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

@@ -164,7 +164,7 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
             );
             if (org) {
                 initialOrganizationId = org.id;
-            } else {
+            } else if (firstOrg) {
                 initialOrganizationId = firstOrg.id;
             }
         }
@@ -177,34 +177,52 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
                 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 (firstOrg) {
+                    initialOrganizationId = firstOrg.id;
+                    const story = firstOrg.stories[0];
+                    if (story) {
+                        initialStoryId = story.id;
+                    } else {
+                        initialStoryId = null;
+                    }
+                } else {
+                    initialOrganizationId = null;
+                    initialStoryId = null;
+                }
             }
         }
 
-        SessionService.buildFreshSession(freshIdentity, initialOrganizationId, initialStoryId);
-        onAuthenticated(initialOrganizationId, initialStoryId);
+        // If at least one org was found, propagate that
+        if (initialOrganizationId) {
+            SessionService.buildFreshSession(freshIdentity, initialOrganizationId, initialStoryId);
+            onAuthenticated(initialOrganizationId, initialStoryId);
+
+            if (this.state.blockRender) {
+                this.setState({ blockRender: false });
+            }
 
-        if (this.state.blockRender) {
-            this.setState({ blockRender: false });
+            // If not, show the no-orgs interface
+        } else {
+            this.setState({ restrictAccess: true, blockRender: false });
         }
     };
 
     /*
         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();
-        }
+    private handleCheckSessionFailure = (e: Error, sub?: string): void => {
+        if (sub) {
+            if (this.props.storyId) {
+                SessionService.cacheStoryId(this.props.storyId, sub);
+            } else {
+                SessionService.clearCachedStoryId(sub);
+            }
 
-        if (this.props.organizationId) {
-            SessionService.cacheOrgId(this.props.organizationId);
-        } else {
-            SessionService.clearCachedOrgId();
+            if (this.props.organizationId) {
+                SessionService.cacheOrgId(this.props.organizationId, sub);
+            } else {
+                SessionService.clearCachedOrgId(sub);
+            }
         }
 
         this.props.clearCachedAuth();
@@ -222,9 +240,10 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
         }
         AuthService.checkSession()
             .then((freshIdentity: IIdentity) => {
+                const sub = freshIdentity.idTokenPayload.sub;
                 const orgId = this.props.organizationId
                     ? this.props.organizationId
-                    : SessionService.getCachedOrgId();
+                    : SessionService.getCachedOrgId(sub);
                 SessionService.getAccessData(freshIdentity.accessToken, baseUrl, false, orgId)
                     .then((freshAccess: any) => {
                         this.props.setAccessData(freshAccess);
@@ -233,11 +252,10 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
                     })
                     .catch((e: Error) => {
                         console.error(e);
-                        this.handleCheckSessionFailure(e);
+                        this.handleCheckSessionFailure(e, sub);
                     });
             })
             .catch((e: Error) => {
-                console.error(e);
                 this.handleCheckSessionFailure(e);
             });
     };

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

@@ -36,9 +36,10 @@ class AuthGate extends React.PureComponent<IAuthGateProps> {
         } else {
             AuthService.parseIdFromHash(auth0Hash)
                 .then((freshIdentity: IIdentity) => {
+                    const sub = freshIdentity.idTokenPayload.sub;
                     // Use the cached org ID and story ID if it exists
-                    const orgId = SessionService.getCachedOrgId() || null;
-                    const storyId = SessionService.getCachedStoryId() || null;
+                    const orgId = SessionService.getCachedOrgId(sub) || null;
+                    const storyId = SessionService.getCachedStoryId(sub) || null;
 
                     SessionService.getAccessData(freshIdentity.accessToken, baseUrl, false, orgId)
                         .then((freshAccess: any) => {

package/src/components/header/Header.tsx

@@ -9,6 +9,8 @@ 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;
@@ -16,6 +18,7 @@ export interface IHeaderProps {
     activeStory?: string;
     hideStoryPicker?: boolean;
     hideOrgPicker?: boolean;
+    setAccessData(access: any): void;
     onOrganizationChange?: (orgId: any) => any;
     onStoryChange?: (story: any) => any;
     logout: (...args) => any;
@@ -40,7 +43,6 @@ export interface IHeaderState {
     activeFirstChar: string;
     order: string;
     orderDirection: string;
-    accessData: any;
     dataLoading: boolean;
 }
 
@@ -150,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();
@@ -160,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 => {
@@ -310,13 +304,12 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
         this.setState({ dataLoading: true });
 
-        SessionService.getAccessData(accessToken, 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);
             });
     };
@@ -331,10 +324,10 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             hideOrgPicker,
             additionalButtons,
             showFTLogo,
-            hideDocs
+            hideDocs,
+            access
         } = this.props;
         const {
-            accessData,
             showAccountDropdown,
             servicesByOrganization,
             activeServiceBlob,
@@ -373,7 +366,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             </button>
         );
 
-        if (accessData) {
+        if (access) {
             activeService = servicesByOrganization.find((s: any) =>
                 window.location.href.includes(s.url)
             );
@@ -463,21 +456,22 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 </button>
             );
 
-            accountDropdownToggle = !hideOrgPicker ? (
-                <button
-                    id='btn-toggle-orgs'
-                    className='btn-toggle-orgs'
-                    ref={this.orgsToggleRef}
-                    style={{ backgroundColor: dropdownToggleColor }}
-                    onClick={() => this.toggleAccountDropdown(!showAccountDropdown)}>
-                    {activeFirstChar}
-                </button>
-            ) : (
-                btnLogout
-            );
+            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
@@ -491,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
@@ -641,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,
@@ -649,4 +652,4 @@ const mapStateToProps = (state): any => {
     };
 };
 
-export default connect(mapStateToProps, null)(ImposiumHeader);
+export default connect(mapStateToProps, mapDispatchToProps)(ImposiumHeader);

package/src/index.ts

@@ -80,7 +80,13 @@ import {
     clearStoryPublishStatus,
     getStoryPublishStatus
 } from './redux/actions/publish';
-import { storyAdded, storyNameMutated, orgNameMutated, storyDeleted } from './redux/actions/access';
+import {
+    storyAdded,
+    storyNameMutated,
+    orgNameMutated,
+    storyDeleted,
+    setAccessData
+} from './redux/actions/access';
 import { resetFilters, updateFilters } from './redux/actions/asset-filters';
 import {
     getAssets,
@@ -228,6 +234,7 @@ export {
     login,
     clearCachedAuth,
     access,
+    setAccessData,
     storyAdded,
     storyNameMutated,
     orgNameMutated,

package/src/services/Session.ts

@@ -9,9 +9,9 @@ export interface IHubSession {
 }
 
 export default class SessionService {
-    private static readonly LOGIN_STORY_ID_CACHE: string = 'imp_hub_last_story_id';
+    private static readonly LOGIN_STORY_ID_CACHE: string = 'imp_hub_last_story_id-';
 
-    private static readonly LOGIN_ORG_ID_CACHE: string = 'imp_hub_last_org_id';
+    private static readonly LOGIN_ORG_ID_CACHE: string = 'imp_hub_last_org_id-';
 
     private static readonly SESSION_COOKIE_NAME: string = 'auth_state';
 
@@ -93,28 +93,28 @@ export default class SessionService {
         Cookies.set(SessionService.SESSION_COOKIE_NAME, cookieData, { domain, expires: expiry });
     };
 
-    public static cacheOrgId = (organizationId: string): void => {
-        localStorage.setItem(SessionService.LOGIN_ORG_ID_CACHE, organizationId);
+    public static cacheOrgId = (organizationId: string, sub): void => {
+        localStorage.setItem(SessionService.LOGIN_ORG_ID_CACHE + sub, organizationId);
     };
 
-    public static clearCachedOrgId = () => {
-        localStorage.removeItem(SessionService.LOGIN_ORG_ID_CACHE);
+    public static clearCachedOrgId = (sub) => {
+        localStorage.removeItem(SessionService.LOGIN_ORG_ID_CACHE + sub);
     };
 
-    public static getCachedOrgId = (): string => {
-        return localStorage.getItem(SessionService.LOGIN_ORG_ID_CACHE);
+    public static getCachedOrgId = (sub): string => {
+        return localStorage.getItem(SessionService.LOGIN_ORG_ID_CACHE + sub);
     };
 
-    public static cacheStoryId = (storyId: string): void => {
-        localStorage.setItem(SessionService.LOGIN_STORY_ID_CACHE, storyId);
+    public static cacheStoryId = (storyId: string, sub): void => {
+        localStorage.setItem(SessionService.LOGIN_STORY_ID_CACHE + sub, storyId);
     };
 
-    public static clearCachedStoryId = (): void => {
-        localStorage.removeItem(SessionService.LOGIN_STORY_ID_CACHE);
+    public static clearCachedStoryId = (sub): void => {
+        localStorage.removeItem(SessionService.LOGIN_STORY_ID_CACHE + sub);
     };
 
-    public static getCachedStoryId = (): string => {
-        return localStorage.getItem(SessionService.LOGIN_STORY_ID_CACHE);
+    public static getCachedStoryId = (sub): string => {
+        return localStorage.getItem(SessionService.LOGIN_STORY_ID_CACHE + sub);
     };
 
     public static updateSession = (values: any, auth0Expiry: number): void => {