@imposium-hub/components 2.5.18 → 2.6.0-1

package/dist/styles.less

@@ -816,7 +816,6 @@ body{
 .boldButton(@color){
 	background:@color;
 	color:@buttonTextDefault;
-	border:1px solid @color;
 	&:hover, &.active{
 		background:darken(@color, 10%);
 	}

package/less/components/button.less

@@ -53,7 +53,6 @@
 .boldButton(@color){
 	background:@color;
 	color:@buttonTextDefault;
-	border:1px solid @color;
 	&:hover, &.active{
 		background:darken(@color, 10%);
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.5.18",
+    "version": "2.6.0-1",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -36,7 +36,6 @@
     "dependencies": {
         "@imposium-hub/react-color": "^2.19.4",
         "ansi_up": "^5.1.0",
-        "auth0-js": "^9.11.3",
         "cogo-toast": "^4.2.3",
         "export-to-csv": "^0.2.1",
         "file-saver": "^2.0.5",
@@ -51,6 +50,7 @@
         "react-transition-group": "^4.4.5"
     },
     "peerDependencies": {
+        "@auth0/auth0-react": "^2.3.0",
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
         "@fortawesome/free-brands-svg-icons": "^6.1.1",
         "@fortawesome/free-solid-svg-icons": "^6.1.1",
@@ -71,9 +71,12 @@
         "react-spinners": "^0.6.1",
         "react-table": "^7.7.0",
         "react-tooltip": "^5.27.0",
+        "react-router": "^3.2.6",
         "smpte-timecode": "^1.2.3"
     },
     "devDependencies": {
+        "react-router": "^3.2.6",
+        "@auth0/auth0-react": "^2.3.0",
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
         "@fortawesome/free-brands-svg-icons": "^6.1.1",
         "@fortawesome/free-solid-svg-icons": "^6.1.1",

package/src/Util.ts

@@ -264,8 +264,7 @@ export const IMAGE_EXTENSIONS = [
     'jb2',
     'jpc',
     'xbm',
-    'wbmp',
-    'webp'
+    'wbmp'
 ];
 
 export const isFont = (mimeType, extension) => {

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

@@ -1,308 +1,296 @@
 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 { IImposiumAPI } from '../../services/API';
+import { useAuth0 } from '@auth0/auth0-react';
+import { replaceRoute } from '../../utils/routing';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExclamationTriangle } from '@fortawesome/pro-light-svg-icons';
 
 export interface IAppWrapperProps {
-    children: React.ReactChildren;
-    auth0Domain: string;
-    auth0ClientId: string;
-    organizationId: string;
     baseUrl: string;
-    storyId?: string;
+    api: IImposiumAPI;
+    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;
+    unsavedChanges: boolean;
+    setAccessData(getAccessData): void;
+    onAuthenticated: (orgId: string, storyId?: string) => any;
+    allowNoStories?: boolean;
+    saveStory?(): void;
+    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 });
-        }
+export const APP_WRAPPER_ERROR_STATES = {
+    UNAUTHORIZED_ORG: 'UNAUTHORIZED_ORG',
+    NO_ORGS_FOUND: 'NO_ORGS_FOUND',
+    NO_STORIES: 'NO_STORIES',
+    UNAUTHORIZED_APP: 'UNAUTHORIZED_APP',
+    STORY_NOT_FOUND: 'STORY_NOT_FOUND'
+};
 
-        if (this.state.restrictAccess && validAccessLevel) {
-            this.setState({ restrictAccess: false });
+export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
+    const [blockRender, setBlockRender] = React.useState(true);
+    const {
+        children,
+        organizationId,
+        storyId,
+        hideStoryPicker,
+        hideDocs,
+        hideOrgPicker,
+        CrMLink,
+        baseUrl,
+        api,
+        serviceId,
+        unsavedChanges,
+        saveStory,
+        allowNoStories
+    } = props;
+    const { isAuthenticated, isLoading, getAccessTokenSilently, loginWithRedirect, logout, user } =
+        useAuth0();
+    const [errorState, setErrorState] = React.useState(null);
+
+    React.useEffect(() => {
+        void doCheckSession(true);
+    }, [isAuthenticated, isLoading]);
+
+    React.useEffect(() => {
+        void doCheckSession(false);
+    }, [organizationId, storyId]);
+
+    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);
-
-            if (!validSession) {
-                this.props.clearCachedAuth();
-                this.doCheckSession();
-            }
+    const validateStoryExists = (freshAccess, oId, sId) => {
+        const org = freshAccess.organizations.find((o) => o.id === oId);
+        if (!org) {
+            return false;
         }
 
-        if (
-            this.props.organizationId !== prevProps.organizationId ||
-            this.props.access !== prevProps.access
-        ) {
-            validAccessLevel = validateAccessLevel(
-                this.props.organizationId,
-                this.props.serviceId,
-                this.props.access
-            );
-
-            if (!this.state.restrictAccess && !validAccessLevel) {
-                this.setState({ restrictAccess: true });
-            }
+        const story = org.stories.find((s) => s.id === sId);
 
-            if (this.state.restrictAccess && validAccessLevel) {
-                this.setState({ restrictAccess: false });
-            }
+        if (!story) {
+            return false;
         }
-    };
 
-    /*
-        Emit creds to React parent
-     */
-    private propagateCreds = (freshAccess, freshIdentity): void => {
-        const { storyId, organizationId, onAuthenticated } = this.props;
-
-        let initialStoryId = storyId;
-        let initialOrganizationId = organizationId;
+        return true;
+    };
 
-        const firstOrg = freshAccess.organizations[0];
+    const propagateCreds = (freshAccess): void => {
+        const {
+            storyId: initialStoryId,
+            organizationId: initialOrganizationId,
+            onAuthenticated
+        } = props;
+
+        // 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
+            );
 
-        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 (validAccessLevel) {
+                // Check to see if the story exists, if not, show the error state
+                const storyExists = validateStoryExists(
+                    freshAccess,
+                    initialOrganizationId,
+                    initialStoryId
                 );
-                if (org) {
-                    const story = org.stories.find((s: any) => s.id === session.story_id);
-                    if (story) {
-                        return { orgId: org.id, storyId: story.id };
-                    }
+                if (!storyExists) {
+                    setErrorState(APP_WRAPPER_ERROR_STATES.STORY_NOT_FOUND);
+                    return;
                 }
+
+                api.init(baseUrl, getAccessTokenSilently, initialOrganizationId);
+                onAuthenticated(initialOrganizationId, initialStoryId);
+                setBlockRender(false);
+                setErrorState(null);
+            } else {
+                setErrorState(APP_WRAPPER_ERROR_STATES.UNAUTHORIZED_APP);
+                return;
             }
-            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 no orgID or storyID was passed in from the URL use the cached orgID and story ID on the service
+        } else if (!initialOrganizationId && !initialStoryId) {
+            const { story_id, organization_id } = getCachedStoryAndOrgForService(
+                freshAccess,
+                serviceId
             );
-            if (org) {
-                initialOrganizationId = org.id;
-            } else if (firstOrg) {
-                initialOrganizationId = firstOrg.id;
+
+            // No org was found to show the user
+            if (!organization_id) {
+                setErrorState(APP_WRAPPER_ERROR_STATES.NO_ORGS_FOUND);
+                return;
             }
-        }
 
-        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;
+            const validAccessLevel = validateAccessLevel(organization_id, serviceId, freshAccess);
+
+            if (validAccessLevel) {
+                api.init(baseUrl, getAccessTokenSilently, organization_id);
+                onAuthenticated(organization_id, story_id);
+                replaceRoute(`/${organization_id}/${story_id}`);
+                setBlockRender(false);
+                setErrorState(null);
             } 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;
-                    }
+                setErrorState(APP_WRAPPER_ERROR_STATES.UNAUTHORIZED_APP);
+            }
+        } else if (initialOrganizationId) {
+            if (allowNoStories) {
+                const validAccessLevel = validateAccessLevel(
+                    initialOrganizationId,
+                    serviceId,
+                    freshAccess
+                );
+                if (validAccessLevel) {
+                    api.init(baseUrl, getAccessTokenSilently, initialOrganizationId);
+                    onAuthenticated(initialOrganizationId, null);
+                    setBlockRender(false);
+                    setErrorState(null);
                 } else {
-                    initialOrganizationId = null;
-                    initialStoryId = null;
+                    setErrorState(APP_WRAPPER_ERROR_STATES.UNAUTHORIZED_APP);
                 }
+            } else {
+                setErrorState(APP_WRAPPER_ERROR_STATES.NO_STORIES);
             }
         }
-
-        // 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);
-        } else {
-            SessionService.clearCachedStoryId();
-        }
-
-        if (this.props.organizationId) {
-            SessionService.cacheOrgId(this.props.organizationId);
-        } else {
-            SessionService.clearCachedOrgId();
-        }
-
-        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 we're authenticated, get the access token, pull the access data, and propagate back to the parent component
+        if (isAuthenticated) {
+            try {
+                await getAccessTokenSilently();
+            } catch (e) {
+                // Trigger a logout if we can't get the access token
+                onLogout();
+            }
 
-        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
-            ];
+            const orgId = organizationId ? organizationId : null;
+            api.init(baseUrl, getAccessTokenSilently, orgId);
+            api.getAccessData(false)
+                .then((freshAccess: any) => {
+                    props.setAccessData(freshAccess);
+                    propagateCreds(freshAccess);
+                })
+                .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 }
+            });
         }
+    };
 
-        if ((!blockRender && !restrictAccess) || allowUnauthenticatedRender) {
-            innerContent = children;
-        }
+    const onLogout = () => {
+        setBlockRender(true);
+        void logout({ logoutParams: { returnTo: window.location.origin } });
+    };
 
-        return (
-            <div
-                id='app'
-                className='app'>
-                {innerContent}
-                <ConfirmModal />
-            </div>
+    let innerContent: any;
+
+    if (errorState) {
+        innerContent = (
+            <AppWrapperErrors
+                error={errorState}
+                email={user.userEmail}
+            />
         );
-    };
-}
+    } else if (!blockRender) {
+        innerContent = children;
+    }
 
-const mapDispatchToProps = (dispatch) => {
-    return bindActionCreators(
-        {
-            login,
-            setAccessData,
-            clearCachedAuth
-        },
-        dispatch
+    return (
+        <div
+            id='app'
+            className='app'>
+            <Header
+                errorState={errorState}
+                saveStory={saveStory}
+                onLogout={onLogout}
+                activeServiceId={serviceId}
+                baseUrl={baseUrl}
+                api={api}
+                unsavedChanges={unsavedChanges}
+                activeOrganization={organizationId}
+                activeStory={storyId}
+                hideStoryPicker={hideStoryPicker}
+                hideDocs={hideDocs}
+                showFTLogo={false}
+                hideOrgPicker={hideOrgPicker}
+                CrMLink={CrMLink}
+            />
+            {innerContent}
+            <ConfirmModal />
+        </div>
     );
 };
 
-const mapStateToProps = (state): any => {
-    return { auth: state.auth, access: state.access };
+export const ERROR_HEADINGS = {
+    [APP_WRAPPER_ERROR_STATES.UNAUTHORIZED_ORG]: 'Organization Not Found',
+    [APP_WRAPPER_ERROR_STATES.NO_ORGS_FOUND]: 'No Organizations Found',
+    [APP_WRAPPER_ERROR_STATES.UNAUTHORIZED_APP]: 'Service Not Found',
+    [APP_WRAPPER_ERROR_STATES.NO_STORIES]: 'No Projects Found',
+    [APP_WRAPPER_ERROR_STATES.STORY_NOT_FOUND]: 'Project Not Found'
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(AppWrapper);
+export const ERROR_DESCRIPTIONS = {
+    [APP_WRAPPER_ERROR_STATES.UNAUTHORIZED_ORG]:
+        'Your user "[email]" does not have access to this organization. Please request access from an admin already on the organization.',
+    [APP_WRAPPER_ERROR_STATES.NO_ORGS_FOUND]:
+        'Your user "[email]" has not been added to any organizations. Please request access from an admin.',
+    [APP_WRAPPER_ERROR_STATES.UNAUTHORIZED_APP]:
+        'Your user "[email]" does not have access to this serivce. Please request access from an admin.',
+    [APP_WRAPPER_ERROR_STATES.NO_STORIES]: 'There are no projects on this organization.',
+    [APP_WRAPPER_ERROR_STATES.STORY_NOT_FOUND]:
+        'The Project cound not be found. Please check the URL and try again.'
+};
+
+export interface AppWrappeErrorProps {
+    error: string;
+    email: string;
+    onCreateStory?: () => void;
+}
+
+export const AppWrapperErrors: React.FC<AppWrappeErrorProps> = ({
+    error,
+    email,
+    onCreateStory
+}) => {
+    return (
+        <div className='no-access'>
+            <FontAwesomeIcon
+                icon={faExclamationTriangle}
+                size='6x'
+            />
+
+            <div className='no-access-copy'>
+                <h1 className='no-access-heading'>{ERROR_HEADINGS[error]}</h1>
+                <p>{ERROR_DESCRIPTIONS[error].replace('[email]', email)}</p>
+            </div>
+        </div>
+    );
+};

package/src/components/assets/StoryTableNameFilter.tsx

@@ -1,40 +1,24 @@
 import * as React from 'react';
 import TextField from '../text-field/TextField';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { updateStoryFilter } from '../../redux/actions/story-filter';
 
 interface IStoryTableNameFilterProps {
-    storyFilter: any;
-    updateStoryFilter: (filters: any) => any;
+    filter: any;
+    updateFilter: (filters: any) => any;
 }
 
 class StoryTableNameFilter extends React.PureComponent<IStoryTableNameFilterProps> {
     public render = (): JSX.Element => {
-        const { storyFilter } = this.props;
+        const { filter } = this.props;
 
         return (
             <TextField
                 className='story-name'
                 focusOnMount
-                value={storyFilter}
-                onChange={(n) => this.props.updateStoryFilter({ name: n })}
+                value={filter}
+                onChange={(n) => this.props.updateFilter({ name: n })}
             />
         );
     };
 }
 
-const mapDispatchToProps = (dispatch): any => {
-    return bindActionCreators({ updateStoryFilter }, dispatch);
-};
-
-const mapStateToProps = (state): any => {
-    return { storyFilter: state.storyFilter.name };
-};
-
-const StoryTableNameFilterMemoized = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(React.memo(StoryTableNameFilter));
-
-export default StoryTableNameFilterMemoized;
+export default StoryTableNameFilter;

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();
         }
     }