@imposium-hub/components 2.5.17 → 2.6.0-0

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

@@ -1,308 +1,167 @@
 import * as React from 'react';
-import NoAccess from '../no-access/NoAccess';
 import Header from '../header/Header';
-import SessionService 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 { validateAccessLevel } from '../../Util';
-import { setAccessData } from '../../redux/actions/access';
 import { ConfirmModal } from '../confirm-modal/ConfirmModal';
+import API, { IImposiumAPI } from '../../services/API';
+import { useAuth0 } from '@auth0/auth0-react';
 
 export interface IAppWrapperProps {
-    children: React.ReactChildren;
-    auth0Domain: string;
-    auth0ClientId: string;
-    organizationId: string;
     baseUrl: string;
-    storyId?: string;
+    api: IImposiumAPI;
+    children?: any;
+    organizationId: string;
     serviceId: number;
-    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;
-}
-
-export interface IAppWrapperState {
-    blockRender: boolean;
-    restrictAccess: boolean;
+    setAccessData(getAccessData): void;
+    onAuthenticated: (token: string, activeOrgId: string, activeStoryId: string) => any;
+    onStoryChange(storyId: string): any;
+    onOrganizationChange(orgId: string, storyId: string): any;
+    storyId?: string;
+    CrMLink?: string;
+    hideStoryPicker?: boolean;
+    hideDocs?: boolean;
+    hideOrgPicker?: boolean;
 }
 
-class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
-    private static readonly RESTRICTED_REQUEST: JSX.Element = (
-        <NoAccess
-            key='restriction-msg'
-            type='request'
-        />
-    );
-
-    private static readonly RESTRICTED_BLOCK: JSX.Element = (
-        <NoAccess
-            key='restriction-msg'
-            type='restrict'
-        />
-    );
-
-    constructor(p: IAppWrapperProps) {
-        super(p);
-
-        this.state = {
-            blockRender: true,
-            restrictAccess: false
-        };
-    }
-
-    public componentDidMount = (): void => {
-        const { auth0ClientId, auth0Domain } = this.props;
-
-        AuthService.bindToClient(auth0ClientId, auth0Domain);
-
-        const validAccessLevel = validateAccessLevel(
-            this.props.organizationId,
-            this.props.serviceId,
-            this.props.access
-        );
-
-        if (!this.state.restrictAccess && !validAccessLevel) {
-            this.setState({ restrictAccess: true });
-        }
+const APP_WRAPPER_ERROR_STATES = {
+    UNAUTHORIZED_ORG: 'UNAUTHORIZED_ORG',
+    UNAUTHORIZED_APP: 'UNAUTHORIZED_APP'
+};
 
-        if (this.state.restrictAccess && validAccessLevel) {
-            this.setState({ restrictAccess: false });
+export const AppWrapper = (props: IAppWrapperProps) => {
+    const [blockRender, setBlockRender] = React.useState(true);
+    const {
+        children,
+        organizationId,
+        storyId,
+        hideStoryPicker,
+        hideDocs,
+        hideOrgPicker,
+        CrMLink,
+        baseUrl,
+        api,
+        serviceId
+    } = props;
+    const { isAuthenticated, isLoading, getAccessTokenSilently, loginWithRedirect, logout } =
+        useAuth0();
+    const [errorState, setErrorState] = React.useState(null);
+
+    React.useEffect(() => {
+        void doCheckSession(true);
+    }, [isAuthenticated, isLoading]);
+
+    const getCachedStoryAndOrgForService = (freshAccess, sId) => {
+        const service = freshAccess.services.find((s) => s.id === sId);
+        if (service) {
+            return {
+                story_id: service.story_id,
+                organization_id: service.organization_id
+            };
         }
-
-        // Always check the session
-        this.doCheckSession(true);
     };
 
-    /*
-        Check the auth0 session expiry
-     */
-    public componentDidUpdate = (prevProps): void => {
-        const { auth } = this.props;
-        let validAccessLevel: boolean;
-
-        if (auth) {
-            const {
-                idTokenPayload: { exp }
-            } = auth;
-            const validSession: boolean = AuthService.checkExpiry(exp);
+    const propagateCreds = (freshAccess, token): void => {
+        const { storyId: initialStoryId, organizationId: initialOrganizationId } = props;
 
-            if (!validSession) {
-                this.props.clearCachedAuth();
-                this.doCheckSession();
-            }
-        }
-
-        if (
-            this.props.organizationId !== prevProps.organizationId ||
-            this.props.access !== prevProps.access
-        ) {
-            validAccessLevel = validateAccessLevel(
-                this.props.organizationId,
-                this.props.serviceId,
-                this.props.access
+        // If an org and story ID was passed in, we're following a deeplink. Verify we have access to it, and if so, propagate those IDs and set them on the service
+        if (initialOrganizationId && initialStoryId) {
+            // Validate the user has access to the orgId and storyID passed in, if not, show the "Unauthorized" interface
+            const validAccessLevel = validateAccessLevel(
+                initialOrganizationId,
+                serviceId,
+                freshAccess
             );
 
-            if (!this.state.restrictAccess && !validAccessLevel) {
-                this.setState({ restrictAccess: true });
-            }
-
-            if (this.state.restrictAccess && validAccessLevel) {
-                this.setState({ restrictAccess: false });
-            }
-        }
-    };
-
-    /*
-        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 if (firstOrg) {
-                initialOrganizationId = firstOrg.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;
+            if (validAccessLevel) {
+                props.onAuthenticated(token, initialOrganizationId, initialStoryId);
+                setBlockRender(false);
             } else {
-                // If that doesn't work - default to the first org & story
-                if (firstOrg) {
-                    initialOrganizationId = firstOrg.id;
-                    const story = firstOrg.stories[0];
-                    if (story) {
-                        initialStoryId = story.id;
-                    } else {
-                        initialStoryId = null;
-                    }
-                } else {
-                    initialOrganizationId = null;
-                    initialStoryId = null;
-                }
+                setErrorState(APP_WRAPPER_ERROR_STATES.UNAUTHORIZED_APP);
             }
-        }
-
-        // 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 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);
+            // If no orgID or storyID was passed in from the URL use the cached orgID and story ID on the service
         } else {
-            SessionService.clearCachedStoryId();
-        }
-
-        if (this.props.organizationId) {
-            SessionService.cacheOrgId(this.props.organizationId);
-        } else {
-            SessionService.clearCachedOrgId();
+            const { story_id, organization_id } = getCachedStoryAndOrgForService(
+                freshAccess,
+                serviceId
+            );
+            props.onAuthenticated(token, organization_id, story_id);
+            setBlockRender(false);
         }
-
-        this.props.clearCachedAuth();
-        this.props.onAuthenticationFailure(e);
     };
 
     /*
         Check auth0 session, pull Imposium access creds on success and initialize app-wrapper
     */
-    private doCheckSession = (blockRender: boolean = false): void => {
-        const { baseUrl } = this.props;
-
-        if (blockRender) {
-            this.setState({ blockRender: true });
+    const doCheckSession = async (doBlockRender: boolean = false) => {
+        if (doBlockRender) {
+            setBlockRender(true);
         }
-        AuthService.checkSession()
-            .then((freshIdentity: IIdentity) => {
-                const orgId = this.props.organizationId
-                    ? this.props.organizationId
-                    : SessionService.getCachedOrgId();
-                SessionService.getAccessData(freshIdentity.accessToken, baseUrl, false, orgId)
-                    .then((freshAccess: any) => {
-                        this.props.setAccessData(freshAccess);
-                        this.props.login(freshIdentity);
-                        this.propagateCreds(freshAccess, freshIdentity);
-                    })
-                    .catch((e: Error) => {
-                        this.setState({ restrictAccess: true, blockRender: false });
-                    });
-            })
-            .catch((e: Error) => {
-                this.handleCheckSessionFailure(e);
-            });
-    };
-
-    public render = (): JSX.Element => {
-        const { blockRender, restrictAccess } = this.state;
-        const { children, showRequestAccess, allowUnauthenticatedRender } = this.props;
-
-        let innerContent: any;
 
-        if (!blockRender && restrictAccess) {
-            const showNoOrgs =
-                this.props.access &&
-                this.props.access.organizations &&
-                this.props.access.organizations.length === 0;
-            const errorIndicator = showNoOrgs ? (
-                <NoAccess
-                    email={this.props.auth.idTokenPayload.userEmail}
-                    key='restriction-msg'
-                    type='no-orgs'
-                />
-            ) : showRequestAccess ? (
-                AppWrapper.RESTRICTED_REQUEST
-            ) : (
-                AppWrapper.RESTRICTED_BLOCK
-            );
-            innerContent = [
-                typeof children[0] === 'object' && children[0].type === Header && children[0],
-                errorIndicator
-            ];
-        }
+        // If we're authenticated, get the access token, pull the access data, and propagate back to the parent component
+        if (isAuthenticated) {
+            let token;
+            try {
+                token = await getAccessTokenSilently();
+            } catch (e) {
+                // Trigger a logout if we can't get the access token
+                onLogout();
+            }
 
-        if ((!blockRender && !restrictAccess) || allowUnauthenticatedRender) {
-            innerContent = children;
+            const orgId = organizationId ? organizationId : null;
+
+            const tempAPI = new API(baseUrl, token, orgId);
+            tempAPI
+                .getAccessData(false)
+                .then((freshAccess: any) => {
+                    props.setAccessData(freshAccess);
+                    propagateCreds(freshAccess, token);
+                })
+                .catch((e: Error) => {
+                    setErrorState(APP_WRAPPER_ERROR_STATES.UNAUTHORIZED_ORG);
+                });
+
+            // If we're not loading, and we're not authenticated, call login, and cache story + org ID from URL if it's there
+        } else if (!isLoading && !isAuthenticated) {
+            void loginWithRedirect({
+                appState: { returnTo: window.location.href }
+            });
         }
+    };
 
-        return (
-            <div
-                id='app'
-                className='app'>
-                {innerContent}
-                <ConfirmModal />
-            </div>
-        );
+    const onLogout = () => {
+        setBlockRender(true);
+        void logout({ logoutParams: { returnTo: window.location.origin } });
     };
-}
 
-const mapDispatchToProps = (dispatch) => {
-    return bindActionCreators(
-        {
-            login,
-            setAccessData,
-            clearCachedAuth
-        },
-        dispatch
-    );
-};
+    let innerContent: any;
 
-const mapStateToProps = (state): any => {
-    return { auth: state.auth, access: state.access };
-};
+    if (errorState) {
+        innerContent = errorState;
+    } else if (!blockRender) {
+        innerContent = children;
+    }
 
-export default connect(mapStateToProps, mapDispatchToProps)(AppWrapper);
+    return (
+        <div
+            id='app'
+            className='app'>
+            <Header
+                onLogout={onLogout}
+                activeServiceId={serviceId}
+                baseUrl={baseUrl}
+                api={api}
+                activeOrganization={organizationId}
+                activeStory={storyId}
+                hideStoryPicker={hideStoryPicker}
+                hideDocs={hideDocs}
+                showFTLogo={false}
+                hideOrgPicker={hideOrgPicker}
+                CrMLink={CrMLink}
+                onStoryChange={props.onStoryChange}
+                onOrganizationChange={props.onOrganizationChange}
+            />
+            {innerContent}
+            <ConfirmModal />
+        </div>
+    );
+};

package/src/components/compositions/TextLayer.tsx

@@ -122,7 +122,6 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
                 this.fontReady();
             }
         } else if (font_type === FONT_TYPES.STANDARD) {
-            // TODO: check this?
             this.fontReady();
         }
     }