@imposium-hub/components 2.5.18 → 2.6.0-0

package/src/components/header/Header.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ImposiumDropdown from '../dropdown/Dropdown';
 import ServiceIcon from '../service-icon/ServiceIcon';
-import { string2HexCode, parameterizeServiceUrl } from '../../Util';
+import { string2HexCode, parameterizeServiceUrl, getLastModifiedStoryInOrg } from '../../Util';
 import {
     ICON_CHEVRON_DOWN,
     ICON_CHEVRON_UP,
@@ -9,11 +9,9 @@ import {
     ICON_UP_RIGHT_FROM_SQUARE
 } from '../../constants/icons';
 import { connect } from 'react-redux';
-import Spinner from '../spinner/Spinner';
 import _ from 'lodash';
 import DataTable from '../data-table/DataTable';
 import AssetsTableDateCell from '../assets/AssetsTableDateCell';
-import SessionService, { IHubSession } from '../../services/Session';
 import Button from '../button/Button';
 import Select, { createFilter } from 'react-select';
 import { setAccessData } from '../../redux/actions/access';
@@ -21,22 +19,24 @@ import { bindActionCreators } from 'redux';
 import { StoryTableTotalRendersCell } from '../assets/StoryTableTotalRendersCell';
 import StoryTableNameFilter from '../assets/StoryTableNameFilter';
 import { updateStoryFilter } from '../../redux/actions/story-filter';
+import { IImposiumAPI } from '../../services/API';
 
 export interface IHeaderProps {
-    email?: string;
+    auth0: any;
+    api: IImposiumAPI;
+    activeServiceId: string;
     activeOrganization: string;
     activeStory?: string;
     hideStoryPicker?: boolean;
     hideOrgPicker?: boolean;
     setAccessData(access: any): void;
-    onOrganizationChange?: (orgId: any) => any;
+    onOrganizationChange?: (orgId: string, storyId: string) => any;
     onStoryChange?: (story: any) => any;
-    logout: (...args) => any;
+    onLogout();
     additionalButtons?: any[];
     CrMLink?: string;
     auth: any;
     story: any;
-    baseUrl: any;
     hideDocs?: boolean;
     showFTLogo?: boolean;
     access: any;
@@ -47,7 +47,6 @@ export interface IHeaderProps {
 export interface IHeaderState {
     inactiveOrganizations: any[];
     servicesByOrganization: any[];
-    activeServiceBlob: any;
     activeOrganizationBlob: any;
     showAccountDropdown: boolean;
     showStoriesDropdown: boolean;
@@ -100,7 +99,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         this.state = {
             inactiveOrganizations: [],
             servicesByOrganization: [],
-            activeServiceBlob: undefined,
             activeOrganizationBlob: undefined,
             showAccountDropdown: false,
             showStoriesDropdown: false,
@@ -136,28 +134,20 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
     private parseAccessData = (accessData: any, activeOrganization: string): void => {
         const { organizations, services } = accessData;
 
-        let activeOrgId = activeOrganization;
-        if (activeOrgId === 'undefined') {
-            const session: IHubSession = SessionService.getSession();
-            activeOrgId = session.organization_id;
-        }
-        const activeOrganizationBlob: any = activeOrgId
-            ? accessData.organizations.find((org) => org.id === activeOrgId)
+        const activeOrganizationBlob: any = activeOrganization
+            ? accessData.organizations.find((org) => org.id === activeOrganization)
             : undefined;
 
         const inactiveOrganizations: any[] =
-            organizations.length > 1 ? organizations.filter((o) => o.id !== activeOrgId) : [];
+            organizations.length > 1
+                ? organizations.filter((o) => o.id !== activeOrganization)
+                : [];
 
         const servicesByOrganization: any[] =
             services && activeOrganizationBlob
                 ? services.filter((s: any) => activeOrganizationBlob.services.includes(s.id))
                 : [];
 
-        const activeServiceBlob: any =
-            servicesByOrganization.length > 1
-                ? services.find((s: any) => window.location.href.includes(s.url))
-                : undefined;
-
         let dropdownToggleColor: string = ImposiumHeader.DEFAULT_ACCOUNT_TOGGLE_COLOR;
         let activeFirstChar: string = '';
 
@@ -168,7 +158,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
         this.setState({
             servicesByOrganization,
-            activeServiceBlob,
             inactiveOrganizations,
             activeOrganizationBlob,
             dropdownToggleColor,
@@ -183,51 +172,42 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
     }
 
     private changeStory = (story: any): void => {
-        const { onStoryChange } = this.props;
+        const { onStoryChange, activeOrganization, api, activeServiceId } = this.props;
 
         if (typeof onStoryChange === 'function') {
             onStoryChange(story);
+            api.cacheActiveStory(activeServiceId, activeOrganization, story.id);
             this.closeStoriesDropDown();
         }
     };
 
-    private toggleAccountDropdown = (toggle: boolean, newId: string = ''): void => {
-        const { onOrganizationChange } = this.props;
-
+    private toggleAccountDropdown = (toggle: boolean, orgId: string = ''): void => {
+        const { onOrganizationChange, api, activeServiceId } = this.props;
         if (toggle) {
             this.setState({ showAccountDropdown: true });
         } else {
             this.setState({ showAccountDropdown: false });
-
-            // Propagate handler if supplied (more useful in react / redux flow)
-            if (newId && onOrganizationChange) {
-                onOrganizationChange(newId);
+            const lastModified = getLastModifiedStoryInOrg(orgId, this.props.access);
+
+            if (orgId && onOrganizationChange) {
+                let storyId = lastModified;
+                api.getCachedStoryForOrg(activeServiceId, orgId)
+                    .then((res) => {
+                        storyId = res.story_id ? res.story_id : lastModified;
+                        onOrganizationChange(orgId, storyId);
+                    })
+                    .catch((e) => {
+                        console.error('Error getting cached storyID for Org');
+                        onOrganizationChange(orgId, storyId);
+                    });
+                api.cacheActiveStory(activeServiceId, orgId, storyId);
             }
-
-            // V1 Default behavior - redirect to hub on org change
-            if (newId && !onOrganizationChange) {
-                window.location.replace(`${this.getHomeUrl()}?organization_id=${newId}`);
-            }
-        }
-    };
-
-    private getHomeUrl = (): string => {
-        const {
-            location: { hostname, host }
-        } = window;
-
-        if (hostname === 'localhost') {
-            return 'http://localhost:3036';
-        } else if (host.includes('.staging.')) {
-            return 'https://launchpad.staging.imposium.com';
-        } else {
-            return 'https://launchpad.imposium.com';
         }
     };
 
     private doLogout = (): void => {
         this.setState({ showAccountDropdown: false });
-        this.props.logout();
+        this.props.onLogout();
     };
 
     private pullFirstChar = (s: string): string => {
@@ -274,25 +254,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         </div>
     );
 
-    private getAccessDataHandler = () => {
-        const {
-            auth: { accessToken },
-            baseUrl,
-            activeOrganization
-        } = this.props;
-
-        this.setState({ totalRendersLoading: true });
-
-        SessionService.getAccessData(accessToken, baseUrl, true, activeOrganization)
-            .then((res) => {
-                this.props.setAccessData(res);
-                this.setState({ totalRendersLoading: false });
-            })
-            .catch((e) => {
-                console.error(e);
-            });
-    };
-
     private getStoriesColumns() {
         return [
             {
@@ -359,7 +320,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
     public render() {
         const {
-            email,
             activeOrganization,
             activeStory,
             hideStoryPicker,
@@ -369,12 +329,12 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             showFTLogo,
             hideDocs,
             access,
+            api,
             access: { organizations }
         } = this.props;
         const {
             showAccountDropdown,
             servicesByOrganization,
-            activeServiceBlob,
             showStoriesDropdown,
             activeOrganizationBlob,
             activeFirstChar,
@@ -391,7 +351,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         let serviceAnchors: JSX.Element[];
         let privateAnchors: JSX.Element[];
         let accountDropdownToggle: JSX.Element;
-        let storyToggle: JSX.Element = !hideStoryPicker ? <Spinner /> : null;
+        let storyToggle: JSX.Element;
         let storyMenuInner: JSX.Element = (
             <div className='no-stories-dialog'>{ImposiumHeader.NO_STORIES_COPY}</div>
         );
@@ -407,8 +367,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         );
 
         if (access) {
-            activeService = servicesByOrganization.find((s: any) =>
-                window.location.href.includes(s.url)
+            activeService = servicesByOrganization.find(
+                (s: any) => s.id === this.props.activeServiceId
             );
 
             if (activeService) {
@@ -488,9 +448,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                         this.setState({ showServiceDropdown: !this.state.showServiceDropdown })
                     }>
                     <span>
-                        {activeServiceBlob
-                            ? activeServiceBlob.name
-                            : ImposiumHeader.SERVICE_MESH_ALIAS}
+                        {activeService ? activeService.name : ImposiumHeader.SERVICE_MESH_ALIAS}
                     </span>
                     {this.renderDropdownChevron(showServiceDropdown)}
                 </button>
@@ -515,7 +473,12 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             storyToggle = null;
         }
 
-        if (access && activeOrganizationBlob && !hideStoryPicker) {
+        if (
+            access &&
+            activeOrganizationBlob &&
+            !hideStoryPicker &&
+            activeOrganizationBlob.stories.length > 0
+        ) {
             currentStory = activeOrganizationBlob.stories.find((s: any) => s.id === activeStory);
             storyToggle = (
                 <button
@@ -526,7 +489,16 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                         this.setState({ showStoriesDropdown: !showStoriesDropdown }, () => {
                             if (showStoriesDropdown === false) {
                                 this.props.updateStoryFilter({ name: '' });
-                                this.getAccessDataHandler();
+                                this.setState({ totalRendersLoading: true });
+                                api.getAccessData(true)
+                                    .then((res) => {
+                                        this.props.setAccessData(res);
+                                        this.setState({ totalRendersLoading: false });
+                                    })
+                                    .catch((e) => {
+                                        console.error(e);
+                                        console.error('Error getting access data from Header');
+                                    });
                             }
                         });
                     }}>
@@ -593,6 +565,9 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             });
         }
 
+        const email = '';
+        // const email = scrapeEmail(auth);
+        // TODO: plug this back in
         const orgSelect = () => {
             return (
                 <>

package/src/components/modal/Modal.tsx

@@ -8,7 +8,7 @@ interface IModalProps {
     isOpen: boolean;
     style?: any;
     wrapperStyle?: any;
-    onRequestClose?(e): void;
+    onRequestClose(e): void;
 }
 
 class Modal extends React.PureComponent<IModalProps> {
@@ -49,14 +49,7 @@ class Modal extends React.PureComponent<IModalProps> {
     }
 
     public render() {
-        const { isOpen, style, wrapperStyle, onRequestClose } = this.props;
-        const btnClose = onRequestClose ? (
-            <Button
-                onClick={this.evtHandlers.onClose}
-                customStyles={this.closeStyles}>
-                {ICON_TIMES}
-            </Button>
-        ) : null;
+        const { isOpen, style, wrapperStyle } = this.props;
 
         if (isOpen) {
             return (
@@ -71,7 +64,11 @@ class Modal extends React.PureComponent<IModalProps> {
                         className='modal-container'
                         style={style}>
                         <div className='modal-content'>{this.props.children}</div>
-                        {btnClose}
+                        <Button
+                            onClick={this.evtHandlers.onClose}
+                            customStyles={this.closeStyles}>
+                            {ICON_TIMES}
+                        </Button>
                     </div>
                 </div>
             );

package/src/index.ts

@@ -1,8 +1,6 @@
 /*
     React Components
  */
-import AppWrapper from './components/app-wrapper/AppWrapper';
-import AuthGate from './components/auth-gate/AuthGate';
 import ImposiumHeader from './components/header/Header';
 import ImposiumDropdown from './components/dropdown/Dropdown';
 import Button from './components/button/Button';
@@ -74,8 +72,6 @@ import SMPTEField from './components/smpte-field/SMPTEField';
 /*
     Redux Handlers / Thunks
  */
-import auth from './redux/reducers/auth';
-import { login, clearCachedAuth } from './redux/actions/auth';
 import access from './redux/reducers/access';
 import publish from './redux/reducers/publish';
 import {
@@ -118,8 +114,6 @@ import batchActions from './redux/actions/active-batch';
 /*
     Statics / Services
  */
-import AuthService, { IIdentity } from './services/Auth0';
-import SessionService, { IHubSession } from './services/Session';
 import API, { IImposiumAPI } from './services/API';
 import LegacyAPI from './services/API-Legacy';
 import StorageService from './services/Storage';
@@ -164,10 +158,10 @@ import AssetsTableAssetIdCell from './components/assets/AssetsTableAssetIdCell';
 import { resetStoryFilter, updateStoryFilter } from './redux/actions/story-filter';
 import storyFilter from './redux/reducers/story-filter';
 import StoryTableNameFilter from './components/assets/StoryTableNameFilter';
+import { AppWrapper } from './components/app-wrapper/AppWrapper';
 
 export {
     AppWrapper,
-    AuthGate,
     ImposiumHeader,
     ImposiumDropdown,
     Button,
@@ -239,9 +233,6 @@ export {
     DroppableAssetRenderer,
     PreviewNotAvailable,
     IStaticComposition,
-    auth,
-    login,
-    clearCachedAuth,
     access,
     setAccessData,
     storyAdded,
@@ -276,10 +267,6 @@ export {
     assetActions,
     activeBatch,
     batchActions,
-    AuthService,
-    IIdentity,
-    SessionService,
-    IHubSession,
     API,
     IImposiumAPI,
     LegacyAPI,

package/src/redux/actions/asset-uploads.ts

@@ -410,7 +410,6 @@ const pollAssetJobs = (api, ongoingJobs: any[], timeout: number): void => {
                             );
                         }
                     }
-                    // TODO: handle errored out
                 });
 
                 if (ongoingJobs.length > 0) {

package/src/services/API.ts

@@ -8,10 +8,8 @@ import axios, {
 } from 'axios';
 import { isObjEmpty } from '../Util';
 import { JOB_TYPES } from '../constants/api';
-import { assets as copy } from '../constants/copy';
 
 export interface IImposiumAPI {
-    updateProjectVersion(storyId: string);
     getAssets(filters: any, storyId: string, unprocessed?: boolean, showVariables?: boolean);
     getAssetItem(assetId: string);
     uploadAsset(
@@ -147,6 +145,9 @@ export interface IImposiumAPI {
     getAssetMap(storyId: string);
     clearStoryCache(storyId: string);
     debugId(id: string);
+    cacheActiveStory(serviceId: string, orgId: string, storyId: string);
+    getCachedStoryForOrg(serviceId: string, orgId: string);
+    getAccessData(includeTotalRenders?: boolean, orgId?: string);
 }
 
 interface ITTSOptions {
@@ -184,14 +185,19 @@ export default class API {
 
     constructor(baseURL: string, idToken: string, organizationId?: string) {
         // JWT
+        const headers = {
+            'Authorization': `Bearer ${idToken}`,
+            'X-Imposium-API-Version': '2.0.2'
+            // 'X-Imposium-Account-Id': organizationId || ''
+        };
+
         if (organizationId) {
+            headers['X-Imposium-Account-Id'] = organizationId;
+        }
+        if (idToken) {
             this.http = axios.create({
                 baseURL,
-                headers: {
-                    'Authorization': `Bearer ${idToken}`,
-                    'X-Imposium-API-Version': '2.0.2',
-                    'X-Imposium-Account-Id': organizationId || ''
-                }
+                headers
             });
 
             // Basic Access Key
@@ -222,21 +228,11 @@ export default class API {
                     if (!axios.isCancel(e) && reqAlias) {
                         this.clearCache(reqAlias);
                     }
-                    if (e.response && (e.response.status === 403 || e.response.status === 401)) {
-                        alert(copy.sessionExpired);
-                    }
                     reject(e);
                 });
         });
     };
 
-    public updateProjectVersion = (storyId: string): Promise<any | Error> => {
-        return this.doRequest({
-            method: 'POST',
-            url: `/story/${storyId}/update-project-version`
-        });
-    };
-
     public saveQueueAssoc = (
         queueId: string,
         storyId: string,
@@ -1657,4 +1653,39 @@ export default class API {
             method: 'GET'
         });
     };
+
+    public cacheActiveStory = (serviceId, orgId, storyId): Promise<any | Error> => {
+        const route = `/service/${serviceId}/${orgId}/active`;
+
+        return this.doRequest({
+            method: 'POST',
+            url: route,
+            data: {
+                story_id: storyId,
+                organization_id: orgId
+            }
+        });
+    };
+
+    public getCachedStoryForOrg = (serviceId, orgId): Promise<any | Error> => {
+        const route = `/service/${serviceId}/${orgId}/last_active`;
+
+        return this.doRequest({
+            method: 'GET',
+            url: route
+        });
+    };
+
+    public getAccessData = (getTotalRenders: boolean = false): Promise<any | Error> => {
+        let route = `/access`;
+
+        if (getTotalRenders) {
+            route += '?include_total_renders=true';
+        }
+
+        return this.doRequest({
+            method: 'GET',
+            url: route
+        });
+    };
 }

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

@@ -1,84 +0,0 @@
-import * as React from 'react';
-import ScaleLoader from 'react-spinners/ScaleLoader';
-import SessionService from '../../services/Session';
-import AuthService, { IIdentity } from '../../services/Auth0';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { login } from '../../redux/actions/auth';
-import { setAccessData } from '../../redux/actions/access';
-
-interface IAuthGateProps {
-    auth0ClientId: string;
-    auth0Domain: string;
-    auth0Hash: string;
-    onAuthenticated: (storyId, orgId) => any;
-    storyId: string;
-    organizationId: string;
-    baseUrl?: string;
-    setAccessData(accessData: any): any;
-    login: (id: IIdentity) => any;
-}
-
-class AuthGate extends React.PureComponent<IAuthGateProps> {
-    private static readonly LOADER_COLOR: string = '#2d8ceb';
-
-    constructor(p: IAuthGateProps) {
-        super(p);
-    }
-
-    public componentDidMount = (): void => {
-        const { auth0ClientId, auth0Hash, auth0Domain, onAuthenticated, baseUrl } = this.props;
-
-        AuthService.bindToClient(auth0ClientId, auth0Domain);
-
-        if (!auth0Hash) {
-            console.info('No hash found, redirecting to login');
-            AuthService.login();
-        } else {
-            AuthService.parseIdFromHash(auth0Hash)
-                .then((freshIdentity: IIdentity) => {
-                    // Use the cached org ID and story ID if it exists
-                    const orgId = SessionService.getCachedOrgId() || null;
-                    const storyId = SessionService.getCachedStoryId() || null;
-
-                    SessionService.getAccessData(freshIdentity.accessToken, baseUrl, false, orgId)
-                        .then((freshAccess: any) => {
-                            this.props.login(freshIdentity);
-                            this.props.setAccessData(freshAccess);
-                            SessionService.buildFreshSession(freshIdentity, orgId, storyId);
-                            onAuthenticated(storyId, orgId);
-                        })
-                        .catch((e) => {
-                            console.error('Error getting access data, redirecting to root');
-                            console.error(e);
-                            onAuthenticated(null, null);
-                        });
-                })
-                .catch((e) => {
-                    console.error('Error parsing ID from hash, redirecting to login');
-                    console.error(e);
-                    AuthService.login();
-                });
-        }
-    };
-
-    public render = (): JSX.Element => {
-        return (
-            <div className='auth-gate'>
-                <ScaleLoader color={AuthGate.LOADER_COLOR} />
-            </div>
-        );
-    };
-}
-
-const mapDispatchToProps = (dispatch) => {
-    return bindActionCreators(
-        {
-            login,
-            setAccessData
-        },
-        dispatch
-    );
-};
-
-export default connect(null, mapDispatchToProps)(AuthGate);

package/src/redux/actions/auth.ts

@@ -1,30 +0,0 @@
-import { IIdentity } from '../../services/Auth0';
-
-export const AUTH_CACHE_KEY: string = 'imposium_hub_creds';
-
-export const login = (auth: IIdentity): any => {
-    try {
-        localStorage.setItem(AUTH_CACHE_KEY, JSON.stringify(auth));
-    } catch (e) {
-        console.warn('Failed to cache auth creds...');
-    }
-
-    return { type: actions.LOGIN, auth };
-};
-
-export const clearCachedAuth = (): any => {
-    try {
-        localStorage.removeItem(AUTH_CACHE_KEY);
-    } catch (e) {
-        console.warn('Failed to remove cached creds');
-    }
-
-    return { type: actions.CLEAR };
-};
-
-const actions = {
-    LOGIN: 'auth/LOGIN',
-    CLEAR: 'auth/CLEAR'
-};
-
-export default actions;

package/src/redux/reducers/auth.ts

@@ -1,33 +0,0 @@
-import actions, { AUTH_CACHE_KEY } from '../actions/auth';
-import AuthService, { IIdentity } from '../../services/Auth0';
-
-let initialState: IIdentity = null;
-
-try {
-    const cachedAuth: IIdentity = JSON.parse(localStorage.getItem(AUTH_CACHE_KEY));
-
-    if (cachedAuth) {
-        const {
-            idTokenPayload: { exp }
-        } = cachedAuth;
-
-        if (AuthService.checkExpiry(exp)) {
-            initialState = cachedAuth;
-        }
-    }
-} catch (e) {
-    console.warn('Cached credentials were malformed or missing, redirected to login.');
-}
-
-const auth = (state = initialState, action) => {
-    switch (action.type) {
-        case actions.LOGIN:
-            return { ...action.auth };
-        case actions.CLEAR:
-            return null;
-        default:
-            return state;
-    }
-};
-
-export default auth;