@imposium-hub/components 2.3.10 → 2.4.0-0

package/src/components/assets/AssetsUploadMenu.tsx

@@ -1,11 +1,17 @@
 import * as React from 'react';
 import { assets as copy } from '../../constants/copy';
 import CheckboxField from '../checkbox-field/CheckboxField';
+import { DeterminateLoader } from '../determinate-loader/DeterminateLoader';
 import {
+    toggleAssignToStory,
     cancelAssetUpload,
-    uploadingAsset,
-    updateUploadTags,
-    cancelNonUploadedAssets
+    toggleTagFileName,
+    setDelimiter,
+    toggleTagDelimiter,
+    toggleManualTagging,
+    addManualTag,
+    deleteManualTag,
+    deleteManualTags
 } from '../../redux/actions/asset-uploads';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -18,58 +24,27 @@ import AssetsTableTagsPivot from './AssetsTableTagsPivot';
 import Tag from '../tag/Tag';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEraser } from '@fortawesome/free-solid-svg-icons';
-import { ICON_TIMES, ICON_UPLOAD } from '../../constants/icons';
-import AssetsTableDropzone from './AssetsTableDropzone';
 
 interface IAssetsUploadMenuProps {
-    editor: any;
     assetUploads: any;
     assetTags: string[];
     api: any;
+    editor: any;
+    toggleAutoTag: (toggle: boolean) => any;
+    toggleTagFileName: (toggle: boolean) => any;
+    toggleAssignToStory: (toggle: boolean) => any;
+    toggleTagDelimiter: (togglle: boolean) => any;
+    setDelimiter: (delimiter: string) => any;
+    toggleManualTagging: (togglle: boolean) => any;
+    addManualTag: (tag: string) => any;
+    deleteManualTag: (tag: string) => any;
+    deleteManualTags: () => void;
     cancelAssetUpload: (fileName: string, api: IImposiumAPI) => any;
-    cancelNonUploadedAssets: (api: IImposiumAPI) => any;
-    updateEditorConfig(c): void;
-    uploadingAsset: (api: IImposiumAPI) => void;
-    updateUploadTags: () => void;
-    onDrop: (i, m) => any;
-    show: boolean;
-    onMenuHover: (o) => void;
-    toggleRef?: any;
-    onOutsideClick: (...args) => any;
-    tableHover: boolean;
 }
 
-interface IAssetsUploadMenuState {
-    assetOver: boolean;
-}
-
-class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAssetsUploadMenuState> {
-    private menuRef: any = null;
-
-    private clickHandler: any = (e) => this.detectOutsideClick(e);
-
+class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
     constructor(props: IAssetsUploadMenuProps) {
         super(props);
-
-        this.state = {
-            assetOver: false
-        };
-
-        this.menuRef = React.createRef();
-    }
-
-    public componentDidUpdate(prevProps: IAssetsUploadMenuProps) {
-        if (this.props.show && !prevProps.show) {
-            window.addEventListener('mousedown', this.clickHandler);
-        }
-
-        if (!this.props.show && prevProps.show) {
-            window.removeEventListener('mousedown', this.clickHandler);
-        }
-    }
-
-    public componentWillUnmount(): void {
-        window.removeEventListener('mousedown', this.clickHandler);
     }
 
     private handleCancelAssetUpload(fileName: string) {
@@ -77,180 +52,82 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
         this.props.cancelAssetUpload(fileName, api);
     }
 
-    private uploadFileHandler() {
-        const { api } = this.props;
-        this.props.uploadingAsset(api);
-        this.props.updateEditorConfig({ showUploadsDropdown: false });
-    }
-
-    private cancelUploadHandler(remove: boolean) {
-        const { api } = this.props;
-        if (!remove) {
-            this.props.cancelNonUploadedAssets(api);
-        }
-        this.props.updateEditorConfig({ showUploadsDropdown: false });
-    }
-
-    private uploadsSetting(state) {
-        const currState = this.props.editor.assetUploads;
-
-        const newState = { ...currState, ...state };
-        this.props.updateEditorConfig({
-            assetUploads: newState
-        });
-        this.props.updateUploadTags();
-    }
-
-    private deleteManualTag(tag) {
-        const { manualTags } = this.props.editor.assetUploads;
-        const updatedManualTags = manualTags.filter((t: string) => t !== tag);
-        this.uploadsSetting({ manualTags: updatedManualTags });
-    }
-
-    private addManualTag(tag) {
-        const { manualTags } = this.props.editor.assetUploads;
-        const updatedManualTags = manualTags ? manualTags : [];
-        updatedManualTags.push(tag);
-        this.uploadsSetting({ manualTags: updatedManualTags });
-    }
-
-    private checkHover(monitor) {
-        const isOver = monitor.isOver();
-        if (isOver !== this.state.assetOver) {
-            this.setState({ assetOver: isOver }, () => this.props.onMenuHover(isOver));
-        }
-    }
-
-    private detectOutsideClick = (e: any): void => {
-        const { toggleRef } = this.props;
-        const { target } = e;
-
-        const isResizing = target.classList.contains('Resizer') ? true : false;
-        const clickInside =
-            this.menuRef.current && this.menuRef.current.contains(target) ? true : false;
-        const clickOnToggle =
-            toggleRef && toggleRef.current && toggleRef.current.contains(target) ? true : false;
-
-        if (!isResizing && !clickInside && !clickOnToggle) {
-            this.cancelRender(true);
-        }
-    };
-
-    private cancelRender = (forced: boolean = false): void => {
-        const { onOutsideClick } = this.props;
-
-        window.removeEventListener('mousedown', this.clickHandler);
-
-        if (forced) {
-            onOutsideClick();
-        }
-    };
-
     public render() {
         const {
-            assetUploads: { uploads },
-            editor: {
-                showUploadsMenu,
-                assetUploads: {
-                    tagByDelimiter,
-                    delimiter,
-                    assignToStory,
-                    tagByFileName,
-                    tagManually,
-                    manualTags
-                }
+            assetUploads: {
+                uploads,
+                assignToStory,
+                tagByFileName,
+                tagByDelimiter,
+                delimiter,
+                tagManually,
+                manualTags
             },
-            assetTags
+            assetTags,
+            editor: { fromCrM }
         } = this.props;
-        const disable = uploads.length > 0 ? false : true;
-
         let uploadsListInner;
-        const uploading = [];
         if (uploads.length > 0) {
             uploadsListInner = uploads.map((u: any) => {
-                const { filename, percent, tags } = u;
-
-                if (percent === 0) {
-                    const closeButton = (
-                        <Button
-                            key='btn-cancel'
-                            onClick={() => this.handleCancelAssetUpload(filename)}
-                            style='subtle'
-                            size='small'>
-                            {ICON_TIMES}
-                        </Button>
+                const { filename, percent } = u;
+                const loader =
+                    percent < 100 ? (
+                        <DeterminateLoader progress={u.percent} />
+                    ) : (
+                        <span>{copy.uploads.preparePhase}</span>
                     );
-
-                    const fileTags = tags.map((tag: string) => (
-                        <Tag
-                            key={tag}
-                            copy={tag}
-                            colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
-                        />
-                    ));
-                    return (
-                        <div
-                            className='ongoing-upload'
-                            key={filename}>
-                            <div className='ongoing-upload-inner'>
-                                <input
-                                    className='upload-filename'
-                                    value={filename}
-                                    readOnly
-                                />
-                                <div className='tags-column'>{fileTags}</div>
-                                {closeButton}
-                            </div>
+                const closeButton = percent < 100 && (
+                    <Button
+                        key='btn-cancel'
+                        onClick={() => this.handleCancelAssetUpload(filename)}
+                        style='subtle'
+                        size='small'>
+                        {copy.uploads.cancelButton}
+                    </Button>
+                );
+
+                return (
+                    <div
+                        className='ongoing-upload'
+                        key={filename}>
+                        <div className='ongoing-upload-inner'>
+                            <div className='upload-filename'>{filename}</div>
+                            {closeButton}
                         </div>
-                    );
-                } else {
-                    uploading.push(true);
-                }
+                        {loader}
+                    </div>
+                );
             });
         } else {
             uploadsListInner = <div className='no-ongoing-uploads'>{copy.uploads.noUploads}</div>;
         }
 
-        if (uploading.length === uploads.length) {
-            uploadsListInner = <div className='no-ongoing-uploads'>{copy.uploads.noUploads}</div>;
-        }
-
         const delimiterSelector = tagByDelimiter && (
             <SelectField
                 width='35%'
                 options={DELIMITER_OPTIONS}
                 value={delimiter}
-                onChange={(c) => {
-                    this.uploadsSetting({ delimiter: c });
-                }}
+                onChange={(c) => this.props.setDelimiter(c)}
             />
         );
-
         const tagsArray = [...new Set(manualTags)];
-
         const tagsMarkup = tagsArray.map((tag: string) => (
             <Tag
                 key={tag}
                 copy={tag}
                 colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
-                removeHandler={() => {
-                    this.deleteManualTag(tag);
-                }}
+                removeHandler={() => this.props.deleteManualTag(tag)}
             />
         ));
-
         const removeTagsBtn =
             tagsArray.length > 0 ? (
                 <Button
                     tooltip='Remove All Tags'
                     style='sublte'
-                    onClick={() => {
-                        this.uploadsSetting({ manualTags: [] });
-                    }}>
+                    onClick={() => this.props.deleteManualTags()}>
                     <FontAwesomeIcon icon={faEraser} />
                 </Button>
             ) : null;
-
         const tagsColumn = tagManually && (
             <div className='tags-column'>
                 <TextField
@@ -259,103 +136,48 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
                     suggestions={assetTags}
                     label={copy.tags.add}
                     width={AssetsTableTagsPivot.ADD_TAG_INPUT_WIDTH}
-                    doSubmit={(t) => {
-                        this.addManualTag(t);
-                    }}
+                    doSubmit={(t) => this.props.addManualTag(t)}
                 />
                 {tagsMarkup}
                 {removeTagsBtn}
             </div>
         );
 
-        const modifier = this.state.assetOver ? 'asset-over' : '';
-        const show = this.props.show ? 'show' : '';
-        const tableHover = this.props.tableHover ? 'table-hover' : '';
-        const width = document.getElementsByClassName('assetUploads')[0]?.clientWidth;
-
         return (
-            <AssetsTableDropzone
-                className={`uploads-dropzone ${show} ${tableHover} ${modifier}`}
-                onDrop={(i, m) => {
-                    this.props.onDrop(i, m);
-                }}
-                onExternalCollect={(o) => this.checkHover(o)}>
-                <div className='overlay'>
-                    <p style={{ display: this.state.assetOver ? 'block' : 'none' }}>
-                        {copy.dropAsset}
-                    </p>
-                </div>
-                <div
-                    className='uploads-menu'
-                    style={{ width }}
-                    ref={this.menuRef}>
-                    <div className='uploads-controls'>
-                        <CheckboxField
-                            width='50%'
-                            label={copy.uploads.autoTagDelimiter}
-                            value={tagByDelimiter}
-                            onChange={() =>
-                                this.uploadsSetting({ tagByDelimiter: !tagByDelimiter })
-                            }
-                        />
-                        {delimiterSelector}
-                        <CheckboxField
-                            width='50%'
-                            label={copy.uploads.manualTagging}
-                            value={tagManually}
-                            onChange={() => this.uploadsSetting({ tagManually: !tagManually })}
-                        />
-                        <CheckboxField
-                            width='50%'
-                            label={copy.uploads.autoTagFilname}
-                            value={tagByFileName}
-                            onChange={() => this.uploadsSetting({ tagByFileName: !tagByFileName })}
-                        />
+            <div className='uploads-menu'>
+                <div className='uploads-controls'>
+                    <CheckboxField
+                        width='50%'
+                        label={copy.uploads.autoTagDelimiter}
+                        value={tagByDelimiter}
+                        onChange={() => this.props.toggleTagDelimiter(!tagByDelimiter)}
+                    />
+                    {delimiterSelector}
+                    <CheckboxField
+                        width='50%'
+                        label={copy.uploads.manualTagging}
+                        value={tagManually}
+                        onChange={() => this.props.toggleManualTagging(!tagManually)}
+                    />
+                    <CheckboxField
+                        width='50%'
+                        label={copy.uploads.autoTagFilname}
+                        value={tagByFileName}
+                        onChange={() => this.props.toggleTagFileName(!tagByFileName)}
+                    />
+                    {!fromCrM && (
                         <CheckboxField
                             width='50%'
                             label={copy.uploads.assignToProjectInput}
                             info={copy.uploads.assignToProjectInfo}
-                            value={!assignToStory}
-                            onChange={() => this.uploadsSetting({ assignToStory: !assignToStory })}
-                        />
-                    </div>
-                    {tagsColumn}
-                    <div className='uploads-list'>{uploadsListInner}</div>
-                    <div className='uploads-confirm'>
-                        <CheckboxField
-                            label={`Don't show again`}
-                            value={!showUploadsMenu}
-                            onChange={() =>
-                                this.props.updateEditorConfig({
-                                    showUploadsMenu: !showUploadsMenu
-                                })
-                            }
+                            value={assignToStory}
+                            onChange={() => this.props.toggleAssignToStory(!assignToStory)}
                         />
-                        <Button
-                            key='cancel-upload'
-                            onClick={() => this.cancelUploadHandler(disable)}
-                            customStyles={{
-                                color: 'black'
-                            }}
-                            style='bold'
-                            color='secondary'
-                            width='60px'
-                            size='small'>
-                            Cancel
-                        </Button>
-                        <Button
-                            key='upload-file'
-                            disabled={disable}
-                            onClick={() => this.uploadFileHandler()}
-                            style='bold'
-                            color='primary'
-                            width='80px'
-                            size='small'>
-                            Upload {ICON_UPLOAD}
-                        </Button>
-                    </div>
+                    )}
                 </div>
-            </AssetsTableDropzone>
+                {tagsColumn}
+                <div className='uploads-list'>{uploadsListInner}</div>
+            </div>
         );
     }
 }
@@ -363,10 +185,15 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
 const mapDispatchToProps = (dispatch): any => {
     return bindActionCreators(
         {
+            toggleAssignToStory,
+            toggleTagFileName,
             cancelAssetUpload,
-            cancelNonUploadedAssets,
-            uploadingAsset,
-            updateUploadTags
+            toggleTagDelimiter,
+            setDelimiter,
+            toggleManualTagging,
+            addManualTag,
+            deleteManualTag,
+            deleteManualTags
         },
         dispatch
     );
@@ -375,8 +202,8 @@ const mapDispatchToProps = (dispatch): any => {
 const mapStateToProps = (state): any => {
     return {
         assetUploads: state.assetUploads,
-        assetTags: state.assetTags,
-        editor: state.editor
+        editor: state.editor,
+        assetTags: state.assetTags
     };
 };
 

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

@@ -5,16 +5,18 @@ import AuthService, { IIdentity } from '../../services/Auth0';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { login } from '../../redux/actions/auth';
-import { cacheAccessData } from '../../redux/actions/access';
+import { setAccessData } from '../../redux/actions/access';
 
 interface IAuthGateProps {
     auth0ClientId: string;
     auth0Domain: string;
     auth0Hash: string;
-    onAuthenticated: () => any;
+    onAuthenticated: (storyId, orgId) => any;
+    storyId: string;
+    organizationId: string;
     baseUrl?: string;
+    setAccessData(accessData: any): any;
     login: (id: IIdentity) => any;
-    cacheAccessData: (accessData: any) => any;
 }
 
 class AuthGate extends React.PureComponent<IAuthGateProps> {
@@ -34,12 +36,16 @@ class AuthGate extends React.PureComponent<IAuthGateProps> {
         } else {
             AuthService.parseIdFromHash(auth0Hash)
                 .then((freshIdentity: IIdentity) => {
-                    SessionService.getAccessData(freshIdentity.idToken, baseUrl)
+                    // 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.cacheAccessData(freshAccess);
-                            SessionService.buildFreshSession(freshIdentity, freshAccess);
-                            onAuthenticated();
+                            this.props.setAccessData(freshAccess);
+                            SessionService.buildFreshSession(freshIdentity, orgId, storyId);
+                            onAuthenticated(storyId, orgId);
                         })
                         .catch((e) => {
                             AuthService.login();
@@ -64,7 +70,7 @@ const mapDispatchToProps = (dispatch) => {
     return bindActionCreators(
         {
             login,
-            cacheAccessData
+            setAccessData
         },
         dispatch
     );

package/src/components/button-group-field/ButtonGroupField.tsx

@@ -12,7 +12,7 @@ interface IButtonGroupOption {
 }
 
 interface IButtonGroupFieldProps {
-    label?: any;
+    label?: string;
     width?: string | number;
     value: string | boolean;
     options: IButtonGroupOption[];

package/src/components/checkbox-field/CheckboxField.tsx

@@ -4,7 +4,7 @@ import { IToolTipConfig } from '../Tooltip';
 import { ICON_CHECK } from '../../constants/icons';
 
 interface ICheckboxFieldProps {
-    label?: any;
+    label?: string;
     value: boolean;
     width?: string | number;
     tooltip?: IToolTipConfig | string;

package/src/components/color-field/ColorField.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
-import { SketchPicker } from '@imposium-hub/react-color';
+import { SketchPicker } from 'react-color';
 
 interface IColorFieldProps {
     buttons?: any;
-    label?: any;
+    label?: string;
     placeholder?: string;
     readOnly?: boolean;
     value: string;
@@ -29,7 +29,7 @@ class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState>
 
     private picker: any;
 
-    private transparentBg = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADBJREFUOE9jPHPmzH8GPMDY2BifNAPjqAHDIgz+//+PNx2cPXsWfzoYNYCBceiHAQD1OVMJc/dYeAAAAABJRU5ErkJggg==") left center`;
+    private transparentBg = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center`;
 
     constructor(props) {
         super(props);

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

@@ -19,8 +19,6 @@ const ContextMenu = ({
 }) => {
     const contextMenuEl = useRef(null);
     const [isVisible, setVisible] = useState(false);
-    const [top, setTop] = useState('');
-    const [left, setLeft] = useState('');
     const [clientPosition, setClientPosition] = useState(null);
 
     const showMenu = (e) => {
@@ -109,8 +107,8 @@ const ContextMenu = ({
             if (windowInnerHeight < clientY + elemHeight) newClientY = clientY - elemHeight;
             if (windowInnerWidth < clientX + elemWidth) newClientX = clientX - elemWidth;
 
-            setTop(`${newClientY + 2}px`);
-            setLeft(`${newClientX + 2}px`);
+            contextMenuEl.current.style.top = `${newClientY + 2}px`;
+            contextMenuEl.current.style.left = `${newClientX + 2}px`;
 
             if (onShow) onShow();
         }
@@ -120,18 +118,15 @@ const ContextMenu = ({
         React.cloneElement(child, { id })
     );
 
-    const ContextComponent = () => {
-        return (
-            <div
-                className={`contextmenu`}
-                ref={contextMenuEl}
-                style={{ top, left }}
-                onMouseLeave={handleMouseLeave}
-                {...attributes}>
-                {childrenWithProps}
-            </div>
-        );
-    };
+    const ContextComponent = () => (
+        <div
+            className={`contextmenu`}
+            ref={contextMenuEl}
+            onMouseLeave={handleMouseLeave}
+            {...attributes}>
+            {childrenWithProps}
+        </div>
+    );
 
     const PortalContextComponent = () =>
         ReactDOM.createPortal(<ContextComponent />, document.querySelector(appendTo));

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

@@ -265,7 +265,7 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                                                 {...column.getHeaderProps()}
                                                 className={`ip-table-header ${
                                                     column.canSort ? 'ip-sortable' : ''
-                                                } ${column.pin ? 'pin' : ''}`}>
+                                                }`}>
                                                 {!searchable && (
                                                     <div
                                                         {...toggleProps}
@@ -371,7 +371,7 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                                 {...cell.getCellProps()}
                                 className={`ip-table-col ${
                                     cell.column.overflowVisible ? 'overflow-visible' : ''
-                                } ${cell.column.pin ? 'pin' : ''}`.trim()}>
+                                }`.trim()}>
                                 {cell.render('Cell')}
                             </td>
                         ));