@imposium-hub/components 1.45.5 → 1.46.0

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

@@ -1,45 +1,49 @@
 import * as React from 'react';
 import NoAccess from '../no-access/NoAccess';
 import Header from '../header/Header';
-import SessionService, {IHubSession} from '../../services/Session';
-import AuthService, {IIdentity} from '../../services/Auth0';
+import SessionService, { IHubSession } 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 { cacheAccessData, clearCachedAccessList } from '../../redux/actions/access';
 import { validateAccessLevel } from '../../Util';
-import { ArrayFormat } from 'react-moveable';
 
 export interface IAppWrapperProps {
-    children : React.ReactChildren;
-    auth0ClientId : string;
-    organizationId : string;
-    baseUrl : string;
-    storyId? : string;
-    serviceId : number;
-    access : any;
-    auth : any;
-    isFreshUser : boolean;
-    allowUnauthenticatedRender : boolean;
-    onAuthenticated : (activeOrgId : string, activeStoryId : string) => any;
-    onAuthenticationFailure : (e : Error) => any;
-    showRequestAccess? : boolean;
-    login : (id : IIdentity) => any;
-    clearCachedAuth : () => any;
-    cacheAccessData : (accessData : any) => any;
-    clearCachedAccessList : () => any;
+    children: React.ReactChildren;
+    auth0ClientId: string;
+    organizationId: string;
+    baseUrl: string;
+    storyId?: string;
+    serviceId: number;
+    access: any;
+    auth: any;
+    isFreshUser: boolean;
+    allowUnauthenticatedRender: boolean;
+    onAuthenticated: (activeOrgId: string, activeStoryId: string) => any;
+    onAuthenticationFailure: (e: Error) => any;
+    showRequestAccess?: boolean;
+    login: (id: IIdentity) => any;
+    clearCachedAuth: () => any;
+    cacheAccessData: (accessData: any) => any;
+    clearCachedAccessList: () => any;
 }
 
 export interface IAppWrapperState {
-    blockRender : boolean;
-    restrictAccess : boolean;
+    blockRender: boolean;
+    restrictAccess: 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'/>);
+    private static readonly RESTRICTED_REQUEST: JSX.Element = (
+        <NoAccess key='restriction-msg' type='request' />
+    );
 
-    constructor(p : IAppWrapperProps) {
+    private static readonly RESTRICTED_BLOCK: JSX.Element = (
+        <NoAccess key='restriction-msg' type='restrict' />
+    );
+
+    constructor(p: IAppWrapperProps) {
         super(p);
 
         this.state = {
@@ -48,9 +52,9 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
         };
     }
 
-    public componentDidMount = () : void => {
-        const {auth, access, auth0ClientId, isFreshUser} = this.props;
-        const session : IHubSession = SessionService.getSession();
+    public componentDidMount = (): void => {
+        const { auth, access, auth0ClientId, isFreshUser } = this.props;
+        const session: IHubSession = SessionService.getSession();
 
         AuthService.bindToClient(auth0ClientId);
 
@@ -70,21 +74,23 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
         } else {
             this.doCheckSession(true);
         }
-    }
+    };
 
     /*
         Check the auth0 session expiry
      */
     public componentDidUpdate = (
-        prevProps : Readonly<IAppWrapperProps>,
-        prevState : Readonly<IAppWrapperState>
-    ) : void => {
-        const {auth} = this.props;
-        let validAccessLevel : boolean;
+        prevProps: Readonly<IAppWrapperProps>,
+        prevState: Readonly<IAppWrapperState>
+    ): void => {
+        const { auth } = this.props;
+        let validAccessLevel: boolean;
 
         if (auth) {
-            const {idTokenPayload: {exp}} = auth;
-            const validSession : boolean = AuthService.checkExpiry(exp);
+            const {
+                idTokenPayload: { exp }
+            } = auth;
+            const validSession: boolean = AuthService.checkExpiry(exp);
 
             if (!validSession) {
                 this.props.clearCachedAuth();
@@ -101,28 +107,28 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
             );
 
             if (!this.state.restrictAccess && !validAccessLevel) {
-                this.setState({restrictAccess: true});
+                this.setState({ restrictAccess: true });
             }
 
             if (this.state.restrictAccess && validAccessLevel) {
-                this.setState({restrictAccess: false});
+                this.setState({ restrictAccess: false });
             }
         }
-    }
+    };
 
     /*
         Emit creds to React parent
      */
-    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;
+    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));
+            activeOrg = access.organizations.find((o: any) => o.id === activeOrgId);
 
-            if (activeOrg && activeOrg.stories.find((s : any) => (s.id === storyId))) {
+            if (activeOrg && activeOrg.stories.find((s: any) => s.id === storyId)) {
                 activeStoryId = storyId;
             }
         }
@@ -130,59 +136,69 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
         onAuthenticated(activeOrgId, activeStoryId);
 
         if (this.state.blockRender) {
-            this.setState({blockRender: false});
+            this.setState({ blockRender: false });
         }
-    }
+    };
 
     /*
         Bust cached creds if exist, invoke auth failure handler
      */
-    private handleCheckSessionFailure = (e : Error) : void => {
+    private handleCheckSessionFailure = (e: Error): void => {
         this.props.clearCachedAuth();
         this.props.clearCachedAccessList();
         this.props.onAuthenticationFailure(e);
-    }
+    };
 
     /*
         Check auth0 session, pull Imposium access creds on success and initialize app-wrapper
     */
-    private doCheckSession = (blockRender : boolean = false) : void => {
-        const {onAuthenticationFailure, baseUrl} = this.props;
+    private doCheckSession = (blockRender: boolean = false): void => {
+        const { baseUrl } = this.props;
 
         if (blockRender) {
-            this.setState({blockRender: true});
+            this.setState({ blockRender: true });
         }
 
         AuthService.checkSession()
-            .then((freshIdentity : IIdentity) => {
+            .then((freshIdentity: IIdentity) => {
                 SessionService.getAccessData(freshIdentity.idToken, baseUrl)
-                    .then((freshAccess : any) => {
+                    .then((freshAccess: any) => {
                         this.props.login(freshIdentity);
                         this.props.cacheAccessData(freshAccess);
                         SessionService.buildFreshSession(freshIdentity, freshAccess);
                         this.propagateCreds();
                     })
-                    .catch((e : Error) => {
+                    .catch((e: Error) => {
                         console.error(e);
                         this.handleCheckSessionFailure(e);
                     });
             })
-            .catch((e : Error) => {
+            .catch((e: Error) => {
                 console.error(e);
                 this.handleCheckSessionFailure(e);
             });
-    }
-
-    private determineActiveOrganizationIn(auth : IIdentity, session : IHubSession, organizationIds : string[]) {
-        const {organizationId} = this.props;
-        const {idTokenPayload: {exp}} = auth;
+    };
+
+    private determineActiveOrganizationIn(
+        auth: IIdentity,
+        session: IHubSession,
+        organizationIds: string[]
+    ) {
+        const { organizationId } = this.props;
+        const {
+            idTokenPayload: { exp }
+        } = auth;
 
         if (organizationIds.length > 0) {
             if (organizationId && organizationIds.indexOf(organizationId) > -1) {
                 return this.setActiveOrganization(organizationId, exp, session);
             }
 
-            if (session && session.organization_id && organizationIds.indexOf(session.organization_id) > -1) {
+            if (
+                session &&
+                session.organization_id &&
+                organizationIds.indexOf(session.organization_id) > -1
+            ) {
                 return session.organization_id;
             }
 
@@ -195,46 +211,64 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
     /*
         Figure out what the active org should be based on app-wrapper configuration
      */
-    private determineActiveOrganization = (auth : IIdentity, access : any) : string => {
-        const {serviceId} = this.props;
-        const {organizations} = access;
-        const session : IHubSession = SessionService.getSession();
-        const allOrgIdsFlattened : string[] = organizations.map((o : any) => (o.id));
-
-        const activeOrgId : string = this.determineActiveOrganizationIn(auth, session, allOrgIdsFlattened);
-        const activeOrg : any = organizations.find((o) => (o.id === activeOrgId));
+    private determineActiveOrganization = (auth: IIdentity, access: any): string => {
+        const { serviceId } = this.props;
+        const { organizations } = access;
+        const session: IHubSession = SessionService.getSession();
+        const allOrgIdsFlattened: string[] = organizations.map((o: any) => o.id);
+
+        const activeOrgId: string = this.determineActiveOrganizationIn(
+            auth,
+            session,
+            allOrgIdsFlattened
+        );
+        const activeOrg: any = organizations.find((o) => o.id === activeOrgId);
 
         if (activeOrg && !activeOrg.services.includes(serviceId)) {
-            this.setState({restrictAccess: true});
+            this.setState({ restrictAccess: true });
         }
 
         return activeOrgId;
-    }
+    };
 
     /*
         Update session if no session exists or diff in org id
      */
-    private setActiveOrganization = (organizationId : string, exp : number, sharedSession : IHubSession) : string => {
-        if (!sharedSession || !sharedSession.organization_id || sharedSession.organization_id !== organizationId) {
-            const activeOrg : any = this.props.access.organizations.find((o : any) => (o.id === organizationId));
-            const firstStoryId : string = (typeof activeOrg.stories[0] === 'object') ? activeOrg.stories[0].id : '';
+    private setActiveOrganization = (
+        organizationId: string,
+        exp: number,
+        sharedSession: IHubSession
+    ): string => {
+        if (
+            !sharedSession ||
+            !sharedSession.organization_id ||
+            sharedSession.organization_id !== organizationId
+        ) {
+            const activeOrg: any = this.props.access.organizations.find(
+                (o: any) => o.id === organizationId
+            );
+            const firstStoryId: string =
+                typeof activeOrg.stories[0] === 'object' ? activeOrg.stories[0].id : '';
 
-            SessionService.updateSession({organization_id: organizationId, story_id: firstStoryId}, exp);
+            SessionService.updateSession(
+                { organization_id: organizationId, story_id: firstStoryId },
+                exp
+            );
         }
 
         return organizationId;
-    }
+    };
 
-    public render = () : JSX.Element => {
-        const {blockRender, restrictAccess} = this.state;
-        const {children, showRequestAccess, allowUnauthenticatedRender} = this.props;
+    public render = (): JSX.Element => {
+        const { blockRender, restrictAccess } = this.state;
+        const { children, showRequestAccess, allowUnauthenticatedRender } = this.props;
 
-        let innerContent : any;
+        let innerContent: any;
 
         if (!blockRender && restrictAccess) {
             innerContent = [
-                (typeof children[0] === 'object' && children[0].type === Header) && children[0],
-                (showRequestAccess) ? AppWrapper.RESTRICTED_REQUEST : AppWrapper.RESTRICTED_BLOCK,
+                typeof children[0] === 'object' && children[0].type === Header && children[0],
+                showRequestAccess ? AppWrapper.RESTRICTED_REQUEST : AppWrapper.RESTRICTED_BLOCK
             ];
         }
 
@@ -247,17 +281,23 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
                 {innerContent}
             </div>
         );
-    }
+    };
 }
 
 const mapDispatchToProps = (dispatch) => {
-    return bindActionCreators({
-        login, clearCachedAuth, cacheAccessData, clearCachedAccessList
-    }, dispatch);
+    return bindActionCreators(
+        {
+            login,
+            clearCachedAuth,
+            cacheAccessData,
+            clearCachedAccessList
+        },
+        dispatch
+    );
 };
 
-const mapStateToProps = (state) : any => {
-    return {auth: state.auth, access: state.access};
+const mapStateToProps = (state): any => {
+    return { auth: state.auth, access: state.access };
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(AppWrapper);

package/src/components/asset-details/AssetDetails.tsx

@@ -8,107 +8,116 @@ import { connect } from 'react-redux';
 import { assets as copy } from '../../constants/copy';
 
 interface IAssetDetailsProps {
-    asset : any;
-    columns : number;
-    newAsset : boolean;
-    onNameChange(n : any) : void;
-    onAddTag(t : any) : void;
-    onRemoveTag(t : any) : void;
-    assetTags : string[];
-    headerButtons? : JSX.Element[];
+    asset: any;
+    columns: number;
+    newAsset: boolean;
+    onNameChange(n: any): void;
+    onAddTag(t: any): void;
+    onRemoveTag(t: any): void;
+    assetTags: string[];
+    headerButtons?: JSX.Element[];
 }
 
 interface IAssetDetailsState {
-    newTag : string;
+    newTag: string;
 }
 
 class AssetDetails extends React.Component<IAssetDetailsProps, IAssetDetailsState> {
-
-    constructor(p : IAssetDetailsProps) {
+    constructor(p: IAssetDetailsProps) {
         super(p);
 
         this.state = {
-            newTag: '',
+            newTag: ''
         };
     }
 
     private renderTags() {
-
-        const { asset: {tags}} = this.props;
+        const {
+            asset: { tags }
+        } = this.props;
         const tagsArray = [...new Set(tags)];
-        const tagsMarkup : JSX.Element[] = tagsArray.map((tag : string) => (
+        const tagsMarkup: JSX.Element[] = tagsArray.map((tag: string) => (
             <Tag
-                key = {tag}
-                copy = {tag}
-                removeHandler = {() => this.props.onRemoveTag(tag)}
-                colorize = {true}/>
+                key={tag}
+                copy={tag}
+                removeHandler={() => this.props.onRemoveTag(tag)}
+                colorize={true}
+            />
         ));
 
         return tagsMarkup;
     }
 
-    public render = () : JSX.Element => {
-
+    public render = (): JSX.Element => {
         const { asset, columns, newAsset, assetTags } = this.props;
 
         if (!asset) {
             return null;
         }
 
-        const title = (newAsset) ? copy.newDetails : copy.details;
+        const title = newAsset ? copy.newDetails : copy.details;
         const formattedDate = formatDateDefault(asset.date_created);
-        const isTwoCol = (columns === 2);
-
-        const nameSubmit = (!newAsset) ? (e) => this.props.onNameChange(e) : undefined;
-        const nameChange = (newAsset) ? (e) => this.props.onNameChange(e) : undefined;
-
-        const nameField = <TextField
-            label = {copy.name}
-            controlled = {(!newAsset)}
-            width = {(isTwoCol) ? '50%' : '100%'}
-            onSubmit= {nameSubmit}
-            onChange= {nameChange}
-            value = {asset.name}/>;
-
-        const dateField = <TextField
-            readOnly = {true}
-            label = {copy.date}
-            width = {(isTwoCol) ? '50%' : '100%'}
-            value = {formattedDate}/>;
-
-        const newTag = <TextField
-            submittable = {true}
-            submittableType = 'add'
-            label = {copy.addTag}
-            suggestions = {assetTags}
-            doSubmit = {(t) => this.props.onAddTag(t)}
-            width = {(isTwoCol) ? '50%' : '100%'}
-            buttons = {[
-            ]}
-            value = {this.state.newTag}/>;
-
-        const tags = <FieldWrapper
-            label = {copy.assetTag}
-            width = {(isTwoCol) ? '50%' : '100%'}>
-
-            {this.renderTags()}
-        </FieldWrapper>;
-
-        return <div className = 'asset-details'>
-            <h2>{title}</h2>
-            <div className = 'header-buttons'>{this.props.headerButtons}</div>
-            <HRule/>
-            {nameField}
-            {dateField}
-            {newTag}
-            {tags}
-        </div>;
-    }
+        const isTwoCol = columns === 2;
+
+        const nameSubmit = !newAsset ? (e) => this.props.onNameChange(e) : undefined;
+        const nameChange = newAsset ? (e) => this.props.onNameChange(e) : undefined;
+
+        const nameField = (
+            <TextField
+                label={copy.name}
+                controlled={!newAsset}
+                width={isTwoCol ? '50%' : '100%'}
+                onSubmit={nameSubmit}
+                onChange={nameChange}
+                value={asset.name}
+            />
+        );
+
+        const dateField = (
+            <TextField
+                readOnly={true}
+                label={copy.date}
+                width={isTwoCol ? '50%' : '100%'}
+                value={formattedDate}
+            />
+        );
+
+        const newTag = (
+            <TextField
+                submittable={true}
+                submittableType='add'
+                label={copy.addTag}
+                suggestions={assetTags}
+                doSubmit={(t) => this.props.onAddTag(t)}
+                width={isTwoCol ? '50%' : '100%'}
+                buttons={[]}
+                value={this.state.newTag}
+            />
+        );
+
+        const tags = (
+            <FieldWrapper label={copy.assetTag} width={isTwoCol ? '50%' : '100%'}>
+                {this.renderTags()}
+            </FieldWrapper>
+        );
+
+        return (
+            <div className='asset-details'>
+                <h2>{title}</h2>
+                <div className='header-buttons'>{this.props.headerButtons}</div>
+                <HRule />
+                {nameField}
+                {dateField}
+                {newTag}
+                {tags}
+            </div>
+        );
+    };
 }
 
-const mapStateToProps = (state) : any => {
+const mapStateToProps = (state): any => {
     return {
-        assetTags: state.assetTags,
+        assetTags: state.assetTags
     };
 };