@imposium-hub/components 2.2.40-6 → 2.2.41-0

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

@@ -7,11 +7,10 @@ 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 { checkStoryId, getLastModifiedStoryInOrg, validateAccessLevel } from '../../Util';
 
 export interface IAppWrapperProps {
     children: React.ReactChildren;
-    auth0Domain: string;
     auth0ClientId: string;
     organizationId: string;
     baseUrl: string;
@@ -50,13 +49,6 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
         />
     );
 
-    private static readonly NO_ORGS: JSX.Element = (
-        <NoAccess
-            key='restriction-msg'
-            type='no-orgs'
-        />
-    );
-
     constructor(p: IAppWrapperProps) {
         super(p);
 
@@ -67,24 +59,10 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
     }
 
     public componentDidMount = (): void => {
-        const { auth, access, auth0ClientId, auth0Domain, isFreshUser } = this.props;
+        const { auth, access, auth0ClientId, isFreshUser } = this.props;
         const session: IHubSession = SessionService.getSession();
 
-        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 });
-        }
-
-        if (this.state.restrictAccess && validAccessLevel) {
-            this.setState({ restrictAccess: false });
-        }
+        AuthService.bindToClient(auth0ClientId);
 
         // If cookie, auth or access data is missing / mismatched,
         // silently check auth0 session and refresh flow on success
@@ -150,16 +128,9 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
     private propagateCreds = (): void => {
         const { auth, access, storyId, onAuthenticated } = this.props;
         const activeOrgId: string = this.determineActiveOrganization(auth, access);
-        let activeStoryId: string = SessionService.getSession().story_id;
-        let activeOrg: any;
-
-        if (this.props.storyId) {
-            activeOrg = access.organizations.find((o: any) => o.id === activeOrgId);
-
-            if (activeOrg && activeOrg.stories.find((s: any) => s.id === storyId)) {
-                activeStoryId = storyId;
-            }
-        }
+        const activeStoryId: string = checkStoryId(storyId, activeOrgId, access)
+            ? storyId
+            : getLastModifiedStoryInOrg(activeOrgId, access);
 
         onAuthenticated(activeOrgId, activeStoryId);
 
@@ -294,18 +265,9 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
         let innerContent: any;
 
         if (!blockRender && restrictAccess) {
-            const showNoOrgs =
-                this.props.access &&
-                this.props.access.organizations &&
-                this.props.access.organizations.length === 0;
-            const errorIndicator = showNoOrgs
-                ? AppWrapper.NO_ORGS
-                : showRequestAccess
-                ? AppWrapper.RESTRICTED_REQUEST
-                : AppWrapper.RESTRICTED_BLOCK;
             innerContent = [
                 typeof children[0] === 'object' && children[0].type === Header && children[0],
-                errorIndicator
+                showRequestAccess ? AppWrapper.RESTRICTED_REQUEST : AppWrapper.RESTRICTED_BLOCK
             ];
         }
 

package/src/components/assets/AssetsTableDateCell.tsx

@@ -18,8 +18,6 @@ const AssetsTableDateCell: React.FC<IAssetsTableDateCell> = (p: IAssetsTableDate
         return <div>{formatDateDefault(values.date_created)}</div>;
     } else if (values.date_modified) {
         return <div>{formatDateDefault(values.date_modified)}</div>;
-    } else if (values.date_updated) {
-        return <div>{formatDateDefault(values.date_updated)}</div>;
     } else {
         return null;
     }

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

@@ -9,7 +9,6 @@ import { cacheAccessData } from '../../redux/actions/access';
 
 interface IAuthGateProps {
     auth0ClientId: string;
-    auth0Domain: string;
     auth0Hash: string;
     onAuthenticated: () => any;
     baseUrl?: string;
@@ -25,9 +24,9 @@ class AuthGate extends React.PureComponent<IAuthGateProps> {
     }
 
     public componentDidMount = (): void => {
-        const { auth0ClientId, auth0Hash, auth0Domain, onAuthenticated, baseUrl } = this.props;
+        const { auth0ClientId, auth0Hash, onAuthenticated, baseUrl } = this.props;
 
-        AuthService.bindToClient(auth0ClientId, auth0Domain);
+        AuthService.bindToClient(auth0ClientId);
 
         if (!auth0Hash) {
             AuthService.login();

package/src/components/button-menu/ButtonMenu.tsx

@@ -1,18 +1,15 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
 
 interface IButtonMenuProps {
     button: any;
     items: any;
     position: string;
     isOpen?: boolean;
-    isPortal?: boolean;
     onClick?: (e) => string | void;
 }
 
 interface IButtonMenuState {
     open: boolean;
-    rect: any;
 }
 
 class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState> {
@@ -25,8 +22,7 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
     constructor(props) {
         super(props);
         this.state = {
-            open: false,
-            rect: null
+            open: false
         };
 
         this.evtHandlers = {
@@ -69,15 +65,13 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
 
     public toggleMenu(e) {
         const { onClick } = this.props;
-        const rect = this.toggleRef.current.getBoundingClientRect();
         const newState = !this.state.open;
         if (onClick) {
             onClick(newState);
         }
         this.setState(
             {
-                open: newState,
-                rect
+                open: newState
             },
             () => {
                 if (this.state.open) {
@@ -116,40 +110,11 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
     }
 
     public renderMenu() {
-        const { position, isPortal } = this.props;
-        const { open, rect } = this.state;
-
-        const top = rect?.top + rect?.height;
-        const left = rect?.left + rect?.width - 20;
+        const { position } = this.props;
+        const { open } = this.state;
 
         if (open) {
-            const menuStyle: React.CSSProperties = {
-                background: '#161616',
-                position: 'absolute',
-                top: `${top}px`,
-                minWidth: '125px',
-                padding: '3px',
-                zIndex: 1000,
-                left: `${left}px`,
-                fontSize: '12px'
-            };
-
-            const menu = (
-                <div
-                    className={`menu ${position}`}
-                    style={isPortal ? menuStyle : null}>
-                    {this.renderItems()}
-                </div>
-            );
-
-            const PortalContextComponent = () =>
-                ReactDOM.createPortal(menu, document.querySelector('.imposium-header'));
-
-            if (isPortal) {
-                return <PortalContextComponent />;
-            } else {
-                return menu;
-            }
+            return <div className={`menu ${position}`}>{this.renderItems()}</div>;
         }
     }
 

package/src/components/header/Header.tsx

@@ -457,10 +457,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             );
         }
 
-        if (accessData && accessData.organizations && accessData.organizations.length === 0) {
-            storyToggle = null;
-        }
-
         if (accessData && activeOrganizationBlob && !hideStoryPicker) {
             currentStory = activeOrganizationBlob.stories.find((s: any) => s.id === activeStory);
             storyToggle = (

package/src/components/no-access/NoAccess.tsx

@@ -4,22 +4,20 @@ import { faUserLock } from '@fortawesome/free-solid-svg-icons/faUserLock';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
 
 interface INoAccessProps {
-    type: 'request' | 'restrict' | 'no-orgs';
+    type: 'request' | 'restrict';
 }
 
 const MAIL_TO: string = 'mailto:info@imposium.com?subject=My access to Imposium is restricted';
 const REQUEST_ACCESS_TITLE: string = "You don't have access to Imposium yet";
 const REQUEST_HREF_COPY: string = 'Request Access';
 const RESTRICTED_ACCESS_TITLE: string = 'Service not found';
-const NO_ORGS_TITLE = 'No organizations found';
 
 const NoAccess: React.FC<INoAccessProps> = (p: INoAccessProps) => {
     if (!p.type) {
-        throw new Error('NoAccess requires a type of either: request or restrict or no-orgs');
+        throw new Error('NoAccess requires a type of either: request or restrict');
     }
 
     const isRequest: boolean = p.type === 'request';
-    const isNoOrgs: boolean = p.type === 'no-orgs';
 
     return (
         <div className='no-access'>
@@ -37,17 +35,8 @@ const NoAccess: React.FC<INoAccessProps> = (p: INoAccessProps) => {
 
             <div className='no-access-copy'>
                 <h1 className='no-access-heading'>
-                    {isRequest
-                        ? REQUEST_ACCESS_TITLE
-                        : isNoOrgs
-                        ? NO_ORGS_TITLE
-                        : RESTRICTED_ACCESS_TITLE}
+                    {isRequest ? REQUEST_ACCESS_TITLE : RESTRICTED_ACCESS_TITLE}
                 </h1>
-                <p>
-                    {isNoOrgs
-                        ? 'Please request access from an admin already on the organization'
-                        : null}
-                </p>
                 {isRequest && <a href={MAIL_TO}>{REQUEST_HREF_COPY}</a>}
             </div>
         </div>

package/src/components/story-previewer/StoryPreviewer.tsx

@@ -585,10 +585,16 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     }
 
     private createExperience() {
-        const { storyId, onNotification, onError, api, onExperienceCreated, useWorkingCopy } =
-            this.props;
+        const {
+            storyId,
+            onNotification,
+            onError,
+            api,
+            onExperienceCreated,
+            useWorkingCopy,
+            editor: { fastRender }
+        } = this.props;
 
-        const fastRender = this.props.editor?.fastRender || false;
         const compId = this.getCompId();
 
         this.resetState(false, () => {
@@ -654,9 +660,11 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     private renderViewerContent() {
         const { rendering, experience, timeElapsed, activeOutput, isTimeOut } = this.state;
 
-        const { api, onError } = this.props;
-
-        const playbackRate = this.props.editor?.playbackRate || 1;
+        const {
+            api,
+            onError,
+            editor: { playbackRate }
+        } = this.props;
 
         if (rendering) {
             return (
@@ -832,21 +840,23 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     }
 
     private changePlaybackRate() {
-        const playbackRate = this.props.editor?.playbackRate || 1;
+        const {
+            editor: { playbackRate }
+        } = this.props;
         let newRate = playbackRate + 0.5;
 
         if (newRate > this.maxPlaybackRate) {
             newRate = 1;
         }
 
-        if (this.props.updateEditorConfig) {
-            this.props.updateEditorConfig({ playbackRate: newRate });
-        }
+        this.props.updateEditorConfig({ playbackRate: newRate });
     }
 
     public render() {
-        const { allowCompOverride } = this.props;
-        const playbackRate = this.props.editor?.playbackRate || 1;
+        const {
+            allowCompOverride,
+            editor: { playbackRate }
+        } = this.props;
         const { rendering, experience, activeOutput, experienceId, error } = this.state;
         const { storyId } = this.props;
         const renderCopy = experience ? copy.btnReRender : copy.btnRender;

package/src/index.ts

@@ -146,9 +146,7 @@ import {
     formatDateDefault,
     validateAccessLevel,
     formattedTime,
-    getSMPTE,
-    checkStoryId,
-    IMAGE_EXTENSIONS
+    getSMPTE
 } from './Util';
 import PublishStatusIndicator from './components/publish-wizard/publish/PublishStatusIndicator';
 import { getMediaPreviewStyle } from './utils/assets';
@@ -286,7 +284,6 @@ export {
     filterHotkeys,
     mimetypeConformsToOverlay,
     validateAssetMimetype,
-    IMAGE_EXTENSIONS,
     toFixed,
     getSMPTE,
     padStart,
@@ -307,7 +304,6 @@ export {
     FontPicker,
     cancelAssetUpload,
     getLastModifiedStoryInOrg,
-    checkStoryId,
     renderTooltipProps,
     renderTooltip,
     ContextMenu,

package/src/services/API.ts

@@ -130,7 +130,7 @@ export interface IImposiumAPI {
         compositionData: any,
         name?: string
     ): Promise<any | Error>;
-    createHTMLAsset(storyId: string, htmlData: any, name?: string): Promise<any | Error>;
+    createHTMLAsset(storyId: string, htmlData: any): Promise<any | Error>;
     getAccountInfo(orgId: string): Promise<any | Error>;
     saveQueueAssoc(queueId: string, storyId: string, distributed: boolean);
     createDataset(storyId: string, data: File, name: string);
@@ -540,11 +540,7 @@ export default class API {
         });
     };
 
-    public createHTMLAsset = (
-        storyId: string,
-        htmlData: any,
-        name: string = 'New HTML Asset'
-    ): Promise<any | Error> => {
+    public createHTMLAsset = (storyId: string, htmlData: any): Promise<any | Error> => {
         const formData = new FormData();
 
         formData.append('story_id', storyId);
@@ -553,7 +549,7 @@ export default class API {
 
         formData.append('type', 'html');
 
-        formData.append('name', name);
+        formData.append('name', 'New HTML Asset');
 
         return this.doRequest({
             method: 'POST',

package/src/services/Auth0.ts

@@ -11,6 +11,7 @@ export interface IIdentity {
 
 export default class AuthService {
     private static readonly IMPOSIUM_APP_DEFAULTS: any = {
+        domain: 'imposium.auth0.com',
         scope: 'openid',
         responseType: 'token id_token',
         redirectUri: `${window.location.origin}/auth`
@@ -22,10 +23,9 @@ export default class AuthService {
     /*
         Initialize the auth0 web client with client ID for a given app-wrapper
      */
-    public static bindToClient = (clientID: string, domain: string): void => {
+    public static bindToClient = (clientID: string): void => {
         AuthService.auth0Client = new auth0.WebAuth({
             clientID,
-            domain,
             ...AuthService.IMPOSIUM_APP_DEFAULTS
         });
     };

package/src/services/Session.ts

@@ -98,7 +98,6 @@ export default class SessionService {
         if (
             cachedStoryId &&
             organizationId &&
-            activeOrg.stories &&
             activeOrg.stories.find((s: any) => s.id === cachedStoryId)
         ) {
             activeStoryId = cachedStoryId;
@@ -117,8 +116,6 @@ export default class SessionService {
         // Same for story id if the cache was missing / belonging to a different org
         if (
             !activeStoryId &&
-            organizations &&
-            organizations[0] &&
             organizations[0].stories.length > 0 &&
             typeof organizations[0].stories[0] === 'object' &&
             organizations[0].stories[0].hasOwnProperty('id')