@imposium-hub/components 2.2.45-0 → 2.2.46-0

package/src/components/assets/AssetsUploadMenu.tsx

@@ -1,17 +1,11 @@
 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,
-    toggleTagFileName,
-    setDelimiter,
-    toggleTagDelimiter,
-    toggleManualTagging,
-    addManualTag,
-    deleteManualTag,
-    deleteManualTags
+    uploadingAsset,
+    updateUploadTags,
+    cancelNonUploadedAssets
 } from '../../redux/actions/asset-uploads';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -24,27 +18,58 @@ 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;
 }
 
-class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
+interface IAssetsUploadMenuState {
+    assetOver: boolean;
+}
+
+class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAssetsUploadMenuState> {
+    private menuRef: any = null;
+
+    private clickHandler: any = (e) => this.detectOutsideClick(e);
+
     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) {
@@ -52,82 +77,180 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
         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,
-                assignToStory,
-                tagByFileName,
-                tagByDelimiter,
-                delimiter,
-                tagManually,
-                manualTags
+            assetUploads: { uploads },
+            editor: {
+                showUploadsMenu,
+                assetUploads: {
+                    tagByDelimiter,
+                    delimiter,
+                    assignToStory,
+                    tagByFileName,
+                    tagManually,
+                    manualTags
+                }
             },
-            assetTags,
-            editor: { fromCrM }
+            assetTags
         } = 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 } = u;
-                const loader =
-                    percent < 100 ? (
-                        <DeterminateLoader progress={u.percent} />
-                    ) : (
-                        <span>{copy.uploads.preparePhase}</span>
+                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 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}
+
+                    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>
                         </div>
-                        {loader}
-                    </div>
-                );
+                    );
+                } else {
+                    uploading.push(true);
+                }
             });
         } 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.props.setDelimiter(c)}
+                onChange={(c) => {
+                    this.uploadsSetting({ delimiter: c });
+                }}
             />
         );
+
         const tagsArray = [...new Set(manualTags)];
+
         const tagsMarkup = tagsArray.map((tag: string) => (
             <Tag
                 key={tag}
                 copy={tag}
                 colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
-                removeHandler={() => this.props.deleteManualTag(tag)}
+                removeHandler={() => {
+                    this.deleteManualTag(tag);
+                }}
             />
         ));
+
         const removeTagsBtn =
             tagsArray.length > 0 ? (
                 <Button
                     tooltip='Remove All Tags'
                     style='sublte'
-                    onClick={() => this.props.deleteManualTags()}>
+                    onClick={() => {
+                        this.uploadsSetting({ manualTags: [] });
+                    }}>
                     <FontAwesomeIcon icon={faEraser} />
                 </Button>
             ) : null;
+
         const tagsColumn = tagManually && (
             <div className='tags-column'>
                 <TextField
@@ -136,48 +259,103 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
                     suggestions={assetTags}
                     label={copy.tags.add}
                     width={AssetsTableTagsPivot.ADD_TAG_INPUT_WIDTH}
-                    doSubmit={(t) => this.props.addManualTag(t)}
+                    doSubmit={(t) => {
+                        this.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 (
-            <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 && (
+            <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 })}
+                        />
                         <CheckboxField
                             width='50%'
                             label={copy.uploads.assignToProjectInput}
                             info={copy.uploads.assignToProjectInfo}
-                            value={assignToStory}
-                            onChange={() => this.props.toggleAssignToStory(!assignToStory)}
+                            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
+                                })
+                            }
                         />
-                    )}
+                        <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>
-                {tagsColumn}
-                <div className='uploads-list'>{uploadsListInner}</div>
-            </div>
+            </AssetsTableDropzone>
         );
     }
 }
@@ -185,15 +363,10 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
 const mapDispatchToProps = (dispatch): any => {
     return bindActionCreators(
         {
-            toggleAssignToStory,
-            toggleTagFileName,
             cancelAssetUpload,
-            toggleTagDelimiter,
-            setDelimiter,
-            toggleManualTagging,
-            addManualTag,
-            deleteManualTag,
-            deleteManualTags
+            cancelNonUploadedAssets,
+            uploadingAsset,
+            updateUploadTags
         },
         dispatch
     );
@@ -202,8 +375,8 @@ const mapDispatchToProps = (dispatch): any => {
 const mapStateToProps = (state): any => {
     return {
         assetUploads: state.assetUploads,
-        editor: state.editor,
-        assetTags: state.assetTags
+        assetTags: state.assetTags,
+        editor: state.editor
     };
 };
 

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

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

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

@@ -12,7 +12,7 @@ interface IButtonGroupOption {
 }
 
 interface IButtonGroupFieldProps {
-    label?: string;
+    label?: any;
     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?: string;
+    label?: any;
     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 'react-color';
+import { SketchPicker } from '@imposium-hub/react-color';
 
 interface IColorFieldProps {
     buttons?: any;
-    label?: string;
+    label?: any;
     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/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center`;
+    private transparentBg = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADBJREFUOE9jPHPmzH8GPMDY2BifNAPjqAHDIgz+//+PNx2cPXsWfzoYNYCBceiHAQD1OVMJc/dYeAAAAABJRU5ErkJggg==") left center`;
 
     constructor(props) {
         super(props);

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

@@ -19,6 +19,8 @@ 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) => {
@@ -107,8 +109,8 @@ const ContextMenu = ({
             if (windowInnerHeight < clientY + elemHeight) newClientY = clientY - elemHeight;
             if (windowInnerWidth < clientX + elemWidth) newClientX = clientX - elemWidth;
 
-            contextMenuEl.current.style.top = `${newClientY + 2}px`;
-            contextMenuEl.current.style.left = `${newClientX + 2}px`;
+            setTop(`${newClientY + 2}px`);
+            setLeft(`${newClientX + 2}px`);
 
             if (onShow) onShow();
         }
@@ -118,15 +120,18 @@ const ContextMenu = ({
         React.cloneElement(child, { id })
     );
 
-    const ContextComponent = () => (
-        <div
-            className={`contextmenu`}
-            ref={contextMenuEl}
-            onMouseLeave={handleMouseLeave}
-            {...attributes}>
-            {childrenWithProps}
-        </div>
-    );
+    const ContextComponent = () => {
+        return (
+            <div
+                className={`contextmenu`}
+                ref={contextMenuEl}
+                style={{ top, left }}
+                onMouseLeave={handleMouseLeave}
+                {...attributes}>
+                {childrenWithProps}
+            </div>
+        );
+    };
 
     const PortalContextComponent = () =>
         ReactDOM.createPortal(<ContextComponent />, document.querySelector(appendTo));

package/src/components/copy-prop-id-button/CopyPropIdButton.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ICON_CLIPBOARD } from '../../constants/icons';
+import Button from '../button/Button';
+import { compositions as copy } from '../../constants/copy';
+
+interface ICopyPropIdButtonProps {
+    copyPropId: string;
+    onNotification?(e): void;
+    onError?(e): void;
+}
+
+class CopyPropIdButton extends React.PureComponent<ICopyPropIdButtonProps, undefined> {
+    private clickHandler = () => this.copyPropId();
+
+    private copyPropId() {
+        const { onNotification, onError, copyPropId } = this.props;
+        navigator.clipboard.writeText(copyPropId).then(
+            () => {
+                if (onNotification) {
+                    onNotification(`Property ID copied to clipboard.`);
+                }
+            },
+            () => {
+                if (onError) {
+                    onError('Error copying property ID to clipboard.');
+                }
+            }
+        );
+    }
+
+    public render() {
+        return (
+            <Button
+                tooltip={copy.tooltipPropId}
+                onClick={this.clickHandler}
+                size='small'
+                style='subtle'>
+                {ICON_CLIPBOARD}
+            </Button>
+        );
+    }
+}
+
+export default CopyPropIdButton;