@imposium-hub/components 2.6.0-0 → 2.6.0-2

package/src/Util.ts

@@ -51,17 +51,14 @@ export const getLastModifiedStoryInOrg = (orgId: string, access: any): string =>
     }
 };
 
-export const scrapeEmail = (auth: any): string => {
-    if (auth && auth.idTokenPayload) {
-        if (auth.idTokenPayload['https://imposium.com/email']) {
-            return auth.idTokenPayload['https://imposium.com/email'];
-        } else if (auth.idTokenPayload['userEmail']) {
-            return auth.idTokenPayload['userEmail'];
-        } else {
-            return '';
+export const getOrgIdFromStory = (storyId: string, access: any): string => {
+    for (const org of access.organizations) {
+        const stories = org.stories;
+        for (const story in stories) {
+            if (stories[story].id === storyId) {
+                return org.id;
+            }
         }
-    } else {
-        return '';
     }
 };
 
@@ -75,19 +72,16 @@ export const parameterizeServiceUrl = (
         switch (id) {
             case 1:
             case 2:
-                return `${url}/${activeStory}?organization_id=${activeOrg}`;
-            case 3:
-                return `${url}/dashboard/live/${activeStory}?organization_id=${activeOrg}`;
             case 4:
             case 5:
             case 6:
             case 8:
-                return `${url}/${activeStory}?organization_id=${activeOrg}`;
+                return `${url}/${activeOrg}/${activeStory}`;
             default:
-                return `${url}?organization_id=${activeOrg}`;
+                return `${url}/${activeOrg}`;
         }
     } else if (activeOrg && !activeStory) {
-        return `${url}?organization_id=${activeOrg}`;
+        return `${url}/${activeOrg}`;
     } else {
         return url;
     }

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

@@ -2,19 +2,25 @@ import * as React from 'react';
 import Header from '../header/Header';
 import { validateAccessLevel } from '../../Util';
 import { ConfirmModal } from '../confirm-modal/ConfirmModal';
-import API, { IImposiumAPI } from '../../services/API';
+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';
+import { initPendo } from '../../utils/pendo';
 
 export interface IAppWrapperProps {
+    appLabel: string;
+    environment: string;
     baseUrl: string;
     api: IImposiumAPI;
-    children?: any;
     organizationId: string;
     serviceId: number;
+    unsavedChanges?: boolean;
     setAccessData(getAccessData): void;
-    onAuthenticated: (token: string, activeOrgId: string, activeStoryId: string) => any;
-    onStoryChange(storyId: string): any;
-    onOrganizationChange(orgId: string, storyId: string): any;
+    onAuthenticated: (orgId: string, storyId?: string) => any;
+    allowNoStories?: boolean;
+    saveStory?(): void;
     storyId?: string;
     CrMLink?: string;
     hideStoryPicker?: boolean;
@@ -22,12 +28,15 @@ export interface IAppWrapperProps {
     hideOrgPicker?: boolean;
 }
 
-const APP_WRAPPER_ERROR_STATES = {
+export const APP_WRAPPER_ERROR_STATES = {
     UNAUTHORIZED_ORG: 'UNAUTHORIZED_ORG',
-    UNAUTHORIZED_APP: 'UNAUTHORIZED_APP'
+    NO_ORGS_FOUND: 'NO_ORGS_FOUND',
+    NO_STORIES: 'NO_STORIES',
+    UNAUTHORIZED_APP: 'UNAUTHORIZED_APP',
+    STORY_NOT_FOUND: 'STORY_NOT_FOUND'
 };
 
-export const AppWrapper = (props: IAppWrapperProps) => {
+export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
     const [blockRender, setBlockRender] = React.useState(true);
     const {
         children,
@@ -39,16 +48,31 @@ export const AppWrapper = (props: IAppWrapperProps) => {
         CrMLink,
         baseUrl,
         api,
-        serviceId
+        serviceId,
+        unsavedChanges,
+        saveStory,
+        environment,
+        appLabel,
+        allowNoStories
     } = props;
-    const { isAuthenticated, isLoading, getAccessTokenSilently, loginWithRedirect, logout } =
+    const { isAuthenticated, isLoading, getAccessTokenSilently, loginWithRedirect, logout, user } =
         useAuth0();
     const [errorState, setErrorState] = React.useState(null);
 
+    React.useEffect(() => {
+        if (user) {
+            initPendo(appLabel, environment, user);
+        }
+    }, [user]);
+
     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) {
@@ -59,8 +83,27 @@ export const AppWrapper = (props: IAppWrapperProps) => {
         }
     };
 
-    const propagateCreds = (freshAccess, token): void => {
-        const { storyId: initialStoryId, organizationId: initialOrganizationId } = props;
+    const validateStoryExists = (freshAccess, oId, sId) => {
+        const org = freshAccess.organizations.find((o) => o.id === oId);
+        if (!org) {
+            return false;
+        }
+
+        const story = org.stories.find((s) => s.id === sId);
+
+        if (!story) {
+            return false;
+        }
+
+        return true;
+    };
+
+    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) {
@@ -72,20 +115,68 @@ export const AppWrapper = (props: IAppWrapperProps) => {
             );
 
             if (validAccessLevel) {
-                props.onAuthenticated(token, initialOrganizationId, initialStoryId);
+                // Check to see if the story exists, if not, show the error state
+                const storyExists = validateStoryExists(
+                    freshAccess,
+                    initialOrganizationId,
+                    initialStoryId
+                );
+                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;
             }
 
             // If no orgID or storyID was passed in from the URL use the cached orgID and story ID on the service
-        } else {
+        } else if (!initialOrganizationId && !initialStoryId) {
             const { story_id, organization_id } = getCachedStoryAndOrgForService(
                 freshAccess,
                 serviceId
             );
-            props.onAuthenticated(token, organization_id, story_id);
-            setBlockRender(false);
+
+            // No org was found to show the user
+            if (!organization_id) {
+                setErrorState(APP_WRAPPER_ERROR_STATES.NO_ORGS_FOUND);
+                return;
+            }
+
+            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 {
+                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 {
+                    setErrorState(APP_WRAPPER_ERROR_STATES.UNAUTHORIZED_APP);
+                }
+            } else {
+                setErrorState(APP_WRAPPER_ERROR_STATES.NO_STORIES);
+            }
         }
     };
 
@@ -99,22 +190,19 @@ export const AppWrapper = (props: IAppWrapperProps) => {
 
         // 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();
+                await getAccessTokenSilently();
             } catch (e) {
                 // Trigger a logout if we can't get the access token
                 onLogout();
             }
 
             const orgId = organizationId ? organizationId : null;
-
-            const tempAPI = new API(baseUrl, token, orgId);
-            tempAPI
-                .getAccessData(false)
+            api.init(baseUrl, getAccessTokenSilently, orgId);
+            api.getAccessData(false)
                 .then((freshAccess: any) => {
                     props.setAccessData(freshAccess);
-                    propagateCreds(freshAccess, token);
+                    propagateCreds(freshAccess);
                 })
                 .catch((e: Error) => {
                     setErrorState(APP_WRAPPER_ERROR_STATES.UNAUTHORIZED_ORG);
@@ -136,7 +224,12 @@ export const AppWrapper = (props: IAppWrapperProps) => {
     let innerContent: any;
 
     if (errorState) {
-        innerContent = errorState;
+        innerContent = (
+            <AppWrapperErrors
+                error={errorState}
+                email={user.userEmail}
+            />
+        );
     } else if (!blockRender) {
         innerContent = children;
     }
@@ -146,10 +239,14 @@ export const AppWrapper = (props: IAppWrapperProps) => {
             id='app'
             className='app'>
             <Header
+                email={user?.userEmail}
+                errorState={errorState}
+                saveStory={saveStory}
                 onLogout={onLogout}
                 activeServiceId={serviceId}
                 baseUrl={baseUrl}
                 api={api}
+                unsavedChanges={unsavedChanges}
                 activeOrganization={organizationId}
                 activeStory={storyId}
                 hideStoryPicker={hideStoryPicker}
@@ -157,11 +254,55 @@ export const AppWrapper = (props: IAppWrapperProps) => {
                 showFTLogo={false}
                 hideOrgPicker={hideOrgPicker}
                 CrMLink={CrMLink}
-                onStoryChange={props.onStoryChange}
-                onOrganizationChange={props.onOrganizationChange}
             />
             {innerContent}
             <ConfirmModal />
         </div>
     );
 };
+
+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 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/context-menu/AnimateComponent.tsx

@@ -1,7 +1,18 @@
 import React from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 
-const AnimateComponent = ({ children, isVisible, timeout, className }) => {
+interface IAnimateComponentProps {
+    isVisible: boolean;
+    timeout: number;
+    className: string;
+}
+
+const AnimateComponent: React.FC<IAnimateComponentProps> = ({
+    children,
+    isVisible,
+    timeout,
+    className
+}) => {
     const nodeRef = React.useRef(null);
 
     return (

package/src/components/context-menu/ContextMenu.tsx

@@ -4,9 +4,21 @@ import { registerEvent, callHideEvent } from './registerEvent';
 import AnimateComponent from './AnimateComponent';
 import { throttle } from './helper';
 
-const ContextMenu = ({
-    children,
+interface IContextMenuProps {
+    id: string;
+    appendTo: string;
+    hideOnLeave?: boolean;
+    onMouseLeave?: (e: any) => void;
+    onHide?: () => void;
+    onShow?: () => void;
+    preventHideOnScroll?: boolean;
+    preventHideOnResize?: boolean;
+    animation?: string;
+}
+
+const ContextMenu: React.FC<IContextMenuProps> = ({
     id,
+    children,
     appendTo,
     hideOnLeave,
     onMouseLeave,
@@ -14,7 +26,6 @@ const ContextMenu = ({
     onShow,
     preventHideOnScroll,
     preventHideOnResize,
-    attributes,
     animation
 }) => {
     const contextMenuEl = useRef(null);
@@ -116,7 +127,7 @@ const ContextMenu = ({
         }
     }, [isVisible, clientPosition]);
 
-    const childrenWithProps = React.Children.map(children, (child) =>
+    const childrenWithProps = React.Children.map(children, (child: any) =>
         React.cloneElement(child, { id })
     );
 
@@ -126,8 +137,7 @@ const ContextMenu = ({
                 className={`contextmenu`}
                 ref={contextMenuEl}
                 style={{ top, left }}
-                onMouseLeave={handleMouseLeave}
-                {...attributes}>
+                onMouseLeave={handleMouseLeave}>
                 {childrenWithProps}
             </div>
         );
@@ -168,8 +178,6 @@ ContextMenu.defaultProps = {
     hideOnLeave: false,
     preventHideOnResize: false,
     preventHideOnScroll: false,
-    attributes: {},
-    className: '',
     animation: 'fade',
     onMouseLeave: () => null,
     onHide: () => null,

package/src/components/context-menu/ContextMenuItem.tsx

@@ -1,7 +1,18 @@
 import React, { useCallback, useRef } from 'react';
 import { callHideEvent } from './registerEvent';
 
-const ContextMenuItem = ({ children, onClick, disabled, preventClose, attributes, className }) => {
+interface IContextMenuItemProps {
+    onClick?(e: React.MouseEvent): void;
+    disabled?: boolean;
+    preventClose?: boolean;
+}
+
+const ContextMenuItem: React.FC<IContextMenuItemProps> = ({
+    children,
+    onClick,
+    disabled,
+    preventClose
+}) => {
     const contextMenuItem = useRef(null);
 
     const handleClickEvent = useCallback((e) => {
@@ -15,7 +26,6 @@ const ContextMenuItem = ({ children, onClick, disabled, preventClose, attributes
         <div
             className={`${disabled ? 'contextmenu__item--disabled' : 'contextmenu__item'}`}
             onClick={handleClickEvent}
-            {...attributes}
             ref={contextMenuItem}>
             {children}
         </div>
@@ -23,12 +33,3 @@ const ContextMenuItem = ({ children, onClick, disabled, preventClose, attributes
 };
 
 export default ContextMenuItem;
-
-ContextMenuItem.defaultProps = {
-    disabled: false,
-    preventClose: false,
-    attributes: {},
-    className: '',
-    onClick: () => null,
-    onItemHover: () => null
-};

package/src/components/context-menu/ContextMenuTrigger.tsx

@@ -1,7 +1,18 @@
 import React, { useRef, useCallback } from 'react';
 import { callShowEvent, callHideEvent } from './registerEvent';
 
-const ContextMenuTrigger = ({ children, id, disableWhileShiftPressed, attributes, disable }) => {
+interface IContextMenuTriggerProps {
+    id: string;
+    disableWhileShiftPressed?: boolean;
+    disable?: boolean;
+}
+
+const ContextMenuTrigger: React.FC<IContextMenuTriggerProps> = ({
+    children,
+    id,
+    disableWhileShiftPressed,
+    disable
+}) => {
     const menuTrigger = useRef(null);
 
     const handleContextMenu = useCallback((e) => {
@@ -29,7 +40,6 @@ const ContextMenuTrigger = ({ children, id, disableWhileShiftPressed, attributes
         <div
             className='menu-trigger'
             ref={menuTrigger}
-            {...attributes}
             onContextMenu={(e) => handleContextMenu(e)}>
             {children}
         </div>
@@ -37,11 +47,3 @@ const ContextMenuTrigger = ({ children, id, disableWhileShiftPressed, attributes
 };
 
 export default ContextMenuTrigger;
-
-ContextMenuTrigger.defaultProps = {
-    attributes: {},
-    disable: false,
-    renderTag: 'div',
-    disableWhileShiftPressed: false,
-    className: ''
-};

package/src/components/context-menu/SubMenu.tsx

@@ -1,7 +1,11 @@
 import React, { useCallback, useState, useRef } from 'react';
 import ContextMenuItem from './ContextMenuItem';
 
-const Submenu = ({ children, title, attributes, className }) => {
+interface ISubmenuProps {
+    title: string;
+}
+
+const Submenu: React.FC<ISubmenuProps> = ({ children, title }) => {
     const [submenuStyle, setSubmenuStyle] = useState(null);
     const submenuEl = useRef(null);
     const submenuItem = useRef(null);
@@ -49,8 +53,7 @@ const Submenu = ({ children, title, attributes, className }) => {
             onMouseOut={() => hideSubmenu()}
             onFocus={() => null}
             onBlur={() => null}
-            ref={submenuItem}
-            {...attributes}>
+            ref={submenuItem}>
             <ContextMenuItem>{title}</ContextMenuItem>
             <div
                 className='submenu__item'
@@ -63,8 +66,3 @@ const Submenu = ({ children, title, attributes, className }) => {
 };
 
 export default Submenu;
-
-Submenu.defaultProps = {
-    title: 'Sub Menu',
-    className: ''
-};

package/src/components/data-table/Paginator.tsx

@@ -11,27 +11,40 @@ import {
 import { assets as copy } from '../../constants/copy';
 let textInputTimeout: number;
 
-const Paginator: React.FC<any> = ({
-    manualPagination,
+interface IPaginatorProps {
+    pageCount: number;
+    pageIndex: number;
+    pageSize: number;
+    pageOptions: any;
+    totalItems: number;
+    canPreviousPage: boolean;
+    canNextPage: boolean;
+    gotoPage: (page: number, pageSize: number) => void;
+    previousPage: () => void;
+    nextPage: () => void;
+    setPageSize: (size: number) => void;
+    itemsPerPage: number;
+    onItemsPerPage: (size: number) => void;
+}
+
+const Paginator: React.FC<IPaginatorProps> = ({
     pageCount,
     pageIndex,
     pageSize,
-    pageOptions,
     totalItems,
     canPreviousPage,
     canNextPage,
     gotoPage,
     previousPage,
     nextPage,
-    setPageSize,
     itemsPerPage,
     onItemsPerPage
 }) => {
     const [getPageIndex, setPageIndex] = React.useState<number>(pageIndex);
     const [getItemsPerPage, setItemsPerPage] = React.useState<number>(itemsPerPage);
     const [getPageCount, setPageCount] = React.useState<number>(pageCount);
-    const [inputPageIndex, setInputPageIndex] = React.useState<string>('');
-    const [inputItemsPerPage, setInputItemsPerPage] = React.useState<string>('');
+    const [inputPageIndex, setInputPageIndex] = React.useState<any>('');
+    const [inputItemsPerPage, setInputItemsPerPage] = React.useState<any>('');
 
     React.useEffect(() => {
         if (pageCount === 0) {

package/src/components/font-picker/font-manager/constants.ts

@@ -5,3 +5,8 @@ export const LIST_BASE_URL = 'https://www.googleapis.com/webfonts/v1/webfonts';
 export const FONT_FACE_REGEX = /@font-face {([\s\S]*?)}/gm;
 
 export const FONT_FAMILY_DEFAULT = 'Open Sans';
+
+export const API_AUTH_TYPES = {
+    TOKEN: 'TOKEN',
+    ACCESS_KEY: 'ACCESS_KEY'
+};