@imposium-hub/components 2.9.0-0 → 2.9.0-10

package/less/components/assets.less

@@ -116,44 +116,6 @@
     }
 }
 
-// .assetUploads {
-//     .imposium-dropdown {
-//         border: unset;
-
-//         .uploads-dropzone{
-//             position: absolute;
-//             top: 0;
-//             height: 100%;
-//             z-index: 2;
-//             display: none;
-
-//             &.asset-over {
-//                 .uploads-menu{
-//                     opacity: .3;
-//                 }
-//                 .overlay {
-//                     border-style: dashed;
-//                     border-color: hsl(225, 100%, 50%);
-//                     border-width: medium;
-//                     position: absolute;
-//                     top: 50%;
-//                     left: 50%;
-//                     transform: translate(-50%, -50%);
-//                     -ms-transform: translate(-50%, -50%);
-//                     text-align: center;
-//                     height: 98%;
-//                     width: 99%;
-//                     display: flex;
-//                     z-index: 1;
-//                     p {
-//                         vertical-align: middle;
-//                         margin: auto;
-//                     }
-//                 }
-//             }
-//         }
-//     }
-// }
 .uploads-menu {
     height: 100%;
     overflow-y: auto;
@@ -331,7 +293,7 @@
         width: 173px;
         z-index: 1001;
     }
-} 
+}
 
 .asset-details .rta .rta__autocomplete {
     width: 362px;
@@ -388,6 +350,10 @@
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
+    .upload-icon {
+        padding-left: 2px;
+        padding-right: 2px;
+    }
     .tags-column {
         width: unset;
         padding: unset;

package/less/components/button-menu.less

@@ -22,6 +22,7 @@
 
         &.left{
             right: 0;
+            z-index: 2000;
         }
     }
 }

package/less/components/button.less

@@ -166,22 +166,60 @@
 }
 
 .confirm-modal {
-	position: relative;
-	align-items: center;
-	display: flex;
-	flex-direction: column;
-	top: calc(50% - 38px);
-	p{
-		text-align: center;
-		padding-bottom: 5px;
-	}
-	.confirm-buttons {
-		.imposium-btn {
-			width: 76px;
-
-			.btn-bold{
-				border: 1px solid #2D8CEA;
-			}
-		}
-	}
-}
+    top: calc(50% - 38px);
+    p {
+        text-align: center;
+        padding-bottom: 5px;
+    }
+    .confirm-buttons {
+        .imposium-btn {
+            width: 76px;
+
+            .btn-bold {
+                border: 1px solid #2d8cea;
+            }
+        }
+    }
+}
+
+.replace-files-modal,
+.confirm-modal {
+    position: relative;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    .confirm-buttons,
+    .replace-files-buttons {
+        .imposium-btn {
+            width: 76px;
+
+            .btn-bold {
+                border: 1px solid #2d8cea;
+            }
+        }
+    }
+}
+.replace-files-modal {
+    text-align: center;
+}
+
+.replace-files-buttons {
+    width: 100%;
+    margin-top: 10px;
+    .checkbox {
+        float: left;
+        padding-left: 10px;
+        position: relative;
+        top: 6px;
+        .label-left {
+            width: fit-content;
+        }
+        .checkbox {
+            top: 0px;
+        }
+    }
+    .buttons {
+        float: right;
+        padding-right: 10px;
+    }
+}

package/less/components/form-field.less

@@ -131,6 +131,14 @@
 	}
 }
 
+.filterable-cell-wrapper .form-field-buttons{
+	position:absolute;
+	height: 18px;
+	top:4px;
+	right:0px;
+	background:@inputBackground;
+	z-index: 1000;
+}
 
 .checkbox-field{
 	
@@ -215,6 +223,10 @@
 	input{
 		width:calc(100% - @sliderValWidth);
 		margin:0px;
+
+		&.toggle{
+			width:calc(100% - @sliderValWidth - 18px);
+		}
 	}
 
 	.val{
@@ -231,6 +243,21 @@
 		box-sizing:border-box;
 		background:lighten(@inputBackground, 4%);
 	}
+
+	.checkbox{
+		.inputMixin;
+		line-height: 10px;
+		border: 1px solid @backgroundLight;
+		border-radius: 2px;
+		width:18px;
+		height:18px;
+		padding:2px;
+		cursor: pointer;
+
+		.fa-check {
+			margin-left: 1px;
+		}
+	}
 }
 
 .color-field{

package/less/components/story-previewer.less

@@ -222,7 +222,7 @@
             padding-left:4px;
             height:@storyViewerHeaderHeight;
             background:darken(@background, 1%);
-            z-index: 2000;
+            z-index: 1000;
 
             .output{
                 margin-top:4px;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.9.0-0",
+    "version": "2.9.0-10",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -58,7 +58,7 @@
         "@fortawesome/pro-solid-svg-icons": "^6.1.1",
         "@fortawesome/react-fontawesome": "^0.1.18",
         "@imposium-hub/react-textarea-autocomplete": "^4.9.13-6",
-        "axios": "^0.21.1",
+        "axios": "^1.9.0",
         "hotkeys-js": "^3.6.12",
         "localforage": "^1.7.3",
         "react": "^17.0.1",
@@ -68,14 +68,13 @@
         "react-dropzone": "^10.1.6",
         "react-redux": "^5.0.7",
         "react-resize-detector": "^6.7.1",
+        "react-router": "^3.2.6",
         "react-spinners": "^0.6.1",
         "react-table": "^7.7.0",
         "react-tooltip": "^5.27.0",
-        "react-router": "^3.2.6",
         "smpte-timecode": "^1.2.3"
     },
     "devDependencies": {
-        "react-router": "^3.2.6",
         "@auth0/auth0-react": "^2.3.0",
         "@fortawesome/fontawesome-svg-core": "^6.7.1",
         "@fortawesome/free-brands-svg-icons": "^6.7.1",
@@ -101,7 +100,7 @@
         "@types/resize-observer-browser": "^0.1.5",
         "@typescript-eslint/eslint-plugin": "^5.26.0",
         "@typescript-eslint/parser": "^5.26.0",
-        "axios": "^0.21.1",
+        "axios": "^1.9.0",
         "concurrently": "^7.1.0",
         "eslint": "^8.14.0",
         "eslint-config-prettier": "^8.5.0",
@@ -122,6 +121,7 @@
         "react-dropzone": "^10.1.6",
         "react-redux": "^5.0.7",
         "react-resize-detector": "^6.7.1",
+        "react-router": "^3.2.6",
         "react-spinners": "^0.6.1",
         "react-table": "^7.7.0",
         "react-tooltip": "^5.27.1",

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

@@ -8,6 +8,8 @@ import { replaceRoute } from '../../utils/routing';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/pro-light-svg-icons';
 import { initPendo } from '../../utils/pendo';
+import { EditGuideModal } from '../edit-guide-modal/EditGuideModal';
+import { ReplaceFilesModal } from '../replace-files-modal/ReplaceFilesModal';
 
 export interface IAppWrapperProps {
     appLabel: string;
@@ -228,6 +230,12 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
                 })
                 .catch((e: Error) => {
                     setErrorState(APP_WRAPPER_ERROR_STATES.UNAUTHORIZED_ORG);
+
+                    // Attempt to get the access data again without the org ID, so we can at least shoe the user the org dropdown
+                    api.init(baseUrl, getAccessTokenSilently, null);
+                    api.getAccessData(false).then((freshAccess: any) => {
+                        props.setAccessData(freshAccess);
+                    });
                 });
 
             // If we're not loading, and we're not authenticated, call login, and cache story + org ID from URL if it's there
@@ -279,6 +287,8 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
             />
             {innerContent}
             <ConfirmModal />
+            <EditGuideModal />
+            <ReplaceFilesModal />
         </div>
     );
 };

package/src/components/assets/AssetsTableAssetIdFilter.tsx

@@ -20,6 +20,7 @@ class AssetsTableAssetIdFilter extends React.PureComponent<IAssetsTableAssetIdFi
                 submittableType='search'
                 value={assetFilters.id}
                 doSubmit={(n) => this.props.updateFilters({ id: n })}
+                header={true}
             />
         );
     };

package/src/components/assets/AssetsTableNameFilter.tsx

@@ -20,6 +20,7 @@ class AssetsTableNameFilter extends React.PureComponent<IAssetsTableNameFilterPr
                 submittableType='search'
                 value={assetFilters.name}
                 doSubmit={(n) => this.props.updateFilters({ name: n })}
+                header={true}
             />
         );
     };

package/src/components/assets/AssetsTableTagsFilter.tsx

@@ -19,6 +19,7 @@ class AssetsTableTagsFilter extends React.PureComponent<IAssetsTableTagsFilterPr
                 submittableType='search'
                 value={assetFilters.tags}
                 doSubmit={(t) => this.props.updateFilters({ tags: t })}
+                header={true}
             />
         );
     };

package/src/components/assets/AssetsUploadMenu.tsx

@@ -18,7 +18,7 @@ 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 { ICON_FILE_ADD, ICON_FILE_REPLACE, ICON_TIMES, ICON_UPLOAD } from '../../constants/icons';
 import AssetsTableDropzone from './AssetsTableDropzone';
 
 interface IAssetsUploadMenuProps {
@@ -148,7 +148,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
 
     public render() {
         const {
-            assetUploads: { uploads },
+            assetUploads,
             editor: {
                 fromCrM,
                 showUploadsMenu,
@@ -163,10 +163,13 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
             },
             assetTags
         } = this.props;
+
+        const uploads = assetUploads?.uploads || [];
         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;
@@ -182,18 +185,27 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
                         </Button>
                     );
 
-                    const fileTags = tags.map((tag: string) => (
-                        <Tag
-                            key={tag}
-                            copy={tag}
-                            colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
-                        />
-                    ));
+                    const fileTags =
+                        tags && !u.assetId
+                            ? 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'>
+                                {u.assetId ? (
+                                    <div className='upload-icon'>{ICON_FILE_REPLACE}</div>
+                                ) : (
+                                    <div className='upload-icon'>{ICON_FILE_ADD}</div>
+                                )}
                                 <input
                                     className='upload-filename'
                                     value={filename}

package/src/components/confirm-modal/ConfirmModal.tsx

@@ -4,6 +4,7 @@ import Modal from '../modal/Modal';
 import Button from '../button/Button';
 import { confirm as copy } from '../../constants/copy';
 import Section from '../section/Section';
+import { confirmModalEvent } from '../../utils/modal';
 
 export interface IConfirmModalProps {
     onYes: () => void;
@@ -65,9 +66,9 @@ export const ConfirmModal = () => {
     );
 
     useEffect(() => {
-        window.addEventListener('openconfirmmodal', onOpen);
+        window.addEventListener(confirmModalEvent, onOpen);
         return () => {
-            window.removeEventListener('openconfirmmodal', onOpen);
+            window.removeEventListener(confirmModalEvent, onOpen);
         };
     }, []);
 

package/src/components/edit-guide-modal/EditGuideModal.tsx

@@ -0,0 +1,110 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import Modal from '../modal/Modal';
+import Button from '../button/Button';
+import Section from '../section/Section';
+import NumberField from '../number-field/NumberField';
+
+export interface IEditGuideModalProps {
+    guide: number;
+    onClose: () => any;
+    onContinue: (e) => any;
+    isHorizontal: boolean;
+}
+
+export const EditGuideModal = () => {
+    const [props, setProps] = useState<IEditGuideModalProps>(null);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const [guide, setGuide] = useState<number>(null);
+
+    const onOpen = (event) => {
+        setProps({
+            ...event.detail
+        });
+        setIsOpen(true);
+    };
+
+    const onClose = () => setIsOpen(false);
+
+    useEffect(() => {
+        window.addEventListener('openeditguidemodal', onOpen);
+        return () => {
+            window.removeEventListener('openeditguidemodal', onOpen);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (props?.guide) {
+            setGuide(props.guide);
+        }
+    }, [props?.guide]);
+
+    const onKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            onContinue(guide);
+        }
+    };
+
+    useEffect(() => {
+        if (isOpen) {
+            window.addEventListener('keypress', onKeyDown);
+        } else {
+            window.removeEventListener('keypress', onKeyDown);
+        }
+        return () => {
+            window.removeEventListener('keypress', onKeyDown);
+        };
+    }, [isOpen, onKeyDown]);
+
+    const onContinue = useCallback(
+        (e) => {
+            if (e) {
+                props.onContinue(e);
+                onClose();
+            }
+        },
+        [isOpen]
+    );
+
+    const modal = isOpen && (
+        <Modal
+            onRequestClose={onClose}
+            style={{
+                width: '200px',
+                height: '110px',
+                top: '25%',
+                left: '55%'
+            }}
+            isOpen={true}>
+            <Section
+                title={`Edit ${props.isHorizontal ? 'Horizontal Guide' : 'Vertical Guide'}`}
+                style={{ padding: '10px' }}>
+                <NumberField
+                    label={'Guide Position'}
+                    labelPosition='top'
+                    onChange={(e) => setGuide(Number(e))}
+                    focusOnMount={true}
+                    value={guide}
+                />
+                <Button
+                    onClick={onClose}
+                    style='bold'
+                    color='secondary'>
+                    Cancel
+                </Button>
+                <Button
+                    onClick={() => onContinue(guide)}
+                    style='bold'
+                    color='primary'>
+                    Ok
+                </Button>
+            </Section>
+        </Modal>
+    );
+
+    const PortalContextComponent = () =>
+        ReactDOM.createPortal(modal, document.querySelector('#react-root'));
+
+    return <PortalContextComponent />;
+};

package/src/components/field-wrapper/FieldWrapper.tsx

@@ -14,6 +14,7 @@ interface IFieldWrapperProps {
     width?: string | number;
     labelPosition?: string;
     labelWidth?: string | number;
+    header?: boolean;
 }
 
 interface IFieldWrapperState {
@@ -87,7 +88,7 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
     }
 
     public render() {
-        const { label, width, customClass } = this.props;
+        const { label, width, customClass, header } = this.props;
         const labelJSX = this.renderLabel();
 
         const style = {};
@@ -100,19 +101,22 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
         }
 
         return (
-            <div
-                className={`form-field ${customClass} ${this.getLabelClass()}`}
-                style={style}>
-                {labelJSX}
+            <>
+                {header && this.renderButtons()}
                 <div
-                    className={`form-field-content ${this.getLabelClass()}`}
-                    {...fieldProps}>
-                    {this.props.children}
-                    {this.renderButtons()}
+                    className={`form-field ${customClass} ${this.getLabelClass()}`}
+                    style={style}>
+                    {labelJSX}
+                    <div
+                        className={`form-field-content ${this.getLabelClass()}`}
+                        {...fieldProps}>
+                        {this.props.children}
+                        {!header && this.renderButtons()}
+                    </div>
+                    {renderTooltip(this.tooltipId, this.props.tooltip)}
+                    {this.renderInfo()}
                 </div>
-                {renderTooltip(this.tooltipId, this.props.tooltip)}
-                {this.renderInfo()}
-            </div>
+            </>
         );
     }
 

package/src/components/header/Header.tsx

@@ -73,7 +73,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
     private static readonly SDK_DOCS_LINK: string = 'https://docs.imposium.com/js-sdk/';
 
-    private static readonly DEFAULT_ACCOUNT_TOGGLE_COLOR: string = 'royalblue';
+    private static readonly DEFAULT_ACCOUNT_TOGGLE_COLOR: string = '#AF1126';
 
     private static readonly NO_STORIES_COPY: string = 'No stories were found';
 
@@ -144,7 +144,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 : [];
 
         let dropdownToggleColor: string = ImposiumHeader.DEFAULT_ACCOUNT_TOGGLE_COLOR;
-        let activeFirstChar: string = '';
+        let activeFirstChar: string = 'X';
 
         if (activeOrganizationBlob && activeOrganizationBlob.hasOwnProperty('name')) {
             dropdownToggleColor = string2HexCode(activeOrganizationBlob.name);
@@ -164,6 +164,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         const { activeOrganization, api, activeServiceId, unsavedChanges } = this.props;
 
         const changeStory = () => {
+            api.cancelAllPendingRequests();
             pushRoute(`/${activeOrganization}/${story.id}`);
             api.cacheActiveStory(activeServiceId, activeOrganization, story.id);
         };
@@ -178,6 +179,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
             openConfirmModal({
                 showCancel: true,
+                showNo: true,
                 noLabel: header.noSave,
                 onNo: () => changeStory(),
                 yesLabel: header.onSave,
@@ -197,8 +199,9 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             this.setState({ showAccountDropdown: false });
 
             if (orgId) {
-                const lastModified = getLastModifiedStoryInOrg(orgId, this.props.access);
                 const changeOrg = () => {
+                    api.cancelAllPendingRequests();
+                    const lastModified = getLastModifiedStoryInOrg(orgId, this.props.access);
                     let storyId = lastModified;
                     api.getCachedStoryForOrg(activeServiceId, orgId)
                         .then((res) => {
@@ -225,6 +228,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
                     openConfirmModal({
                         showCancel: true,
+                        showNo: true,
                         noLabel: header.noSave,
                         onNo: () => changeOrg(),
                         yesLabel: header.onSave,

package/src/components/number-field/NumberField.tsx

@@ -17,6 +17,7 @@ interface INumberFieldProps {
     min?: number;
     max?: number;
     onBlur?(e): void;
+    focusOnMount?: boolean;
 }
 
 interface INumberFieldState {
@@ -37,6 +38,9 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
     }
 
     public componentDidMount(): void {
+        if (this.props.focusOnMount && this.inputRef.current) {
+            this.inputRef.current.focus();
+        }
         this.setState({
             error: false,
             value: this.props.value
@@ -70,8 +74,8 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
 
     private onChange(e) {
         let val = e.target.value;
-        if (val === '') {
-            val = null;
+        if (val === '' || val === null) {
+            val = this.props.min;
         } else {
             val = parseFloat(val);
         }