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

package/src/components/publish-wizard/publish/EmailWorkflow.tsx

@@ -488,12 +488,7 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
     }
 
     public renderLabel() {
-        const {
-            isExport,
-            batchJobs,
-            publishDataset,
-            batchesList: { error }
-        } = this.props;
+        const { isExport, batchJobs, publishDataset } = this.props;
         const { renderedBatch, selectedBatchId, uploading, uploadComplete } = this.state;
 
         if (
@@ -512,10 +507,6 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             );
         }
 
-        if (batchJobs.failed && error[selectedBatchId]) {
-            return <>{error[selectedBatchId].error}</>;
-        }
-
         if (uploading) {
             const uploadingCopy = isExport
                 ? copy.publish.importingData
@@ -670,9 +661,14 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             batchError,
             creativeManagerOverrides
         } = this.state;
+
         const {
             isExport,
             batchJobs: { missing, renders, failed },
+            batchesList: {
+                error,
+                selected: { name }
+            },
             isCrM,
             publishDataset
         } = this.props;
@@ -776,13 +772,49 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         const title = publishDataset
             ? copy.publish.datasetTitle.replace('[dataset_name]', this.props.activeDataset?.name)
             : copy.publish.emailTitle;
+
         const desc = publishDataset ? '' : copy.publish.emailDesc;
 
+        const showBatchError = () => {
+            if (failed && error && error[selectedBatchId]) {
+                let errorMsg: JSX.Element = <></>;
+                let errorExpMsg: JSX.Element = <></>;
+                if (error[selectedBatchId]) {
+                    const { experience } = error[selectedBatchId];
+                    errorMsg = <span className='error-title'>{error[selectedBatchId].error}</span>;
+                    errorExpMsg = experience?.error ? <div>{experience.error}</div> : <></>;
+                }
+
+                return (
+                    <div className='batch-job-error'>
+                        <h2>{`Batch "${name}" stopped due to errors.`}</h2>
+                        <table>
+                            <thead></thead>
+                            <tbody>
+                                <tr>
+                                    <td>Batch ID:</td>
+                                    <td>{selectedBatchId}</td>
+                                </tr>
+                                <tr>
+                                    <td>First Error:</td>
+                                    <td>
+                                        {errorMsg}
+                                        <br />
+                                        {errorExpMsg}
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                );
+            }
+        };
         const uploadCSV = (
             <div>
                 <h2>{title}</h2>
                 <HRule />
                 <p>{desc}</p>
+                {showBatchError()}
                 <input
                     type='file'
                     style={{ display: 'none' }}

package/src/components/select-field/SelectField.tsx

@@ -7,7 +7,7 @@ import { copying } from '../../constants/copy';
 
 interface ISelectFieldProps {
     buttons?: any;
-    label?: string;
+    label?: any;
     selectRef?: any;
     options: any;
     disable?: boolean;
@@ -61,6 +61,9 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
         }
 
         this.props.onChange(val);
+        if (this.props.selectRef?.current) {
+            this.props.selectRef.current.blur();
+        }
     }
 
     public render() {

package/src/components/slider-field/SliderField.tsx

@@ -3,7 +3,7 @@ import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
 
 interface ISliderFieldProps {
-    label?: string;
+    label?: any;
     value: number;
     width?: string | number;
     min: number;

package/src/components/smpte-field/SMPTEField.tsx

@@ -5,7 +5,7 @@ import { TIMECODE } from '../../constants/timecode';
 import { getSMPTE } from '../../Util';
 
 interface ISMPTEFieldProps {
-    label?: string;
+    label?: any;
     placeholder?: string;
     readOnly?: boolean;
     tooltip?: IToolTipConfig | string;

package/src/components/text-area-field/TextAreaField.tsx

@@ -9,7 +9,7 @@ interface ITextAreaFieldProps {
     buttons?: any;
     controlled?: boolean;
     disabled?: boolean;
-    label?: string;
+    label?: any;
     placeholder?: string;
     readOnly?: boolean;
     value: string;

package/src/components/text-field/TextField.tsx

@@ -23,7 +23,7 @@ interface ITextFieldProps {
     disabled?: boolean;
     submittable?: boolean;
     focusOnMount?: boolean;
-    label?: string;
+    label?: any;
     placeholder?: string;
     readOnly?: boolean;
     value?: string;

package/src/constants/copy.ts

@@ -1,6 +1,7 @@
 export const assets = {
     tooltipFilter: 'Filter by Asset type',
     previewNotAvailable: 'Preview Not Available for this Asset Type',
+    dropAsset: 'Drop file(s) here.',
     iconTypes: {
         filter: 'Filter By Type',
         lut: 'LUT',
@@ -17,15 +18,15 @@ export const assets = {
         after_effects: 'After Effects'
     },
     uploads: {
-        noUploads: 'There are currently no assets uploading...',
+        noUploads: 'No files selected, drag and drop files here to begin.',
         preparePhase: 'Preparing asset...',
         autoTagFilname: 'Tag by file name',
         autoTagDelimiter: 'Tag by Delimiter',
         delimiterOptions: 'Delimiter Options',
         manualTagging: 'Tag Manually',
-        assignToProjectInput: 'Assign to Project',
+        assignToProjectInput: 'Make Global',
         assignToProjectInfo:
-            'If selected, any assets uploaded will only be available to use with the currently selected project.',
+            'If selected, any assets uploaded will be available to use with all projects on the current organization.',
         uploadButton: 'Upload',
         cancelButton: 'Cancel'
     },
@@ -76,6 +77,7 @@ export const previewer = {
 };
 
 export const compositions = {
+    tooltipPropId: 'Copy Property ID',
     name: 'Name',
     width: 'Width',
     height: 'Height',
@@ -115,9 +117,6 @@ export const compositions = {
 };
 
 export const publish = {
-    publishInProgress: 'Publish to Creative Manager in progress',
-    btnRunTestBatch: 'Run Test Batch',
-    btnCrM: 'Creative Manager',
     creativeLibraryId: 'Creative Library ID',
     creativeId: 'Creative ID',
     email: 'Notification Email',
@@ -138,11 +137,8 @@ export const publish = {
 
     // distribute
     distributeStepTitle: 'STEP 2: How do you want your users to view their video?',
-    distributeStepTitleFromCrM: 'STEP 2: Run a test batch or return to Creative Manager?',
     distributeStepDesc:
         'Select which Composition you want to deliver, access credentials you want to use, and distribution channel.',
-    distributeStepDescFromCrM:
-        'You can run a test batch to preview a sample data set, or return to Creative Manager where you can publish the final version set.',
     compositionError: 'Please Select Composition',
 
     // webpage

package/src/constants/icons.tsx

@@ -37,7 +37,6 @@ import { faFont } from '@fortawesome/free-solid-svg-icons/faFont';
 import { faAlignLeft } from '@fortawesome/free-solid-svg-icons/faAlignLeft';
 import { faAlignRight } from '@fortawesome/free-solid-svg-icons/faAlignRight';
 import { faAlignCenter } from '@fortawesome/free-solid-svg-icons/faAlignCenter';
-import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons/faUpRightFromSquare';
 import { faBars } from '@fortawesome/free-solid-svg-icons/faBars';
 import { faArrowToTop } from '@fortawesome/pro-light-svg-icons/faArrowToTop';
 import { faArrowToBottom } from '@fortawesome/pro-light-svg-icons/faArrowToBottom';
@@ -213,5 +212,3 @@ export const ICON_CENTER_ANCHOR = <FontAwesomeIcon icon={faCircleSmall} />;
 export const ICON_CLAPPERBOARD_PLAY = <FontAwesomeIcon icon={faClapperboardPlay} />;
 
 export const ICON_CODE = <FontAwesomeIcon icon={faCode} />;
-
-export const ICON_UP_RIGHT_FROM_SQUARE = <FontAwesomeIcon icon={faUpRightFromSquare} />;

package/src/index.ts

@@ -46,6 +46,7 @@ import AssetsTableTagsFilter from './components/assets/AssetsTableTagsFilter';
 import AssetsTableTagsPivot from './components/assets/AssetsTableTagsPivot';
 import AssetsTableComplexTagCell from './components/assets/AssetsTableComplexTagCell';
 import AssetsTableTypeCell from './components/assets/AssetsTableTypeCell';
+import AssetsTableGlobalCell from './components/assets/AssetsTableGlobalCell';
 import AssetsTableStatusCell from './components/assets/AssetsTableStatusCell';
 import AssetsTableTypeFilter from './components/assets/AssetsTableTypeFilter';
 import AssetsTypeIcon from './components/assets/AssetsTypeIcon';
@@ -80,7 +81,14 @@ import {
     clearStoryPublishStatus,
     getStoryPublishStatus
 } from './redux/actions/publish';
-import { storyAdded, storyNameMutated, orgNameMutated, storyDeleted } from './redux/actions/access';
+import {
+    cacheAccessData,
+    clearCachedAccessList,
+    storyAdded,
+    storyNameMutated,
+    orgNameMutated,
+    storyDeleted
+} from './redux/actions/access';
 import { resetFilters, updateFilters } from './redux/actions/asset-filters';
 import {
     getAssets,
@@ -96,12 +104,7 @@ import {
     updateAssetStory
 } from './redux/actions/asset-list';
 import { getAssetTagList, addAssetTagToList } from './redux/actions/asset-tags';
-import {
-    cancelAssetUpload,
-    toggleTagFileName,
-    uploadAssets,
-    replaceAsset
-} from './redux/actions/asset-uploads';
+import { cancelAssetUpload, uploadAssets, replaceAsset } from './redux/actions/asset-uploads';
 import { selectAsset, deselectAsset, resetSelection } from './redux/actions/selected-assets';
 import assetFilters from './redux/reducers/asset-filters';
 import assetList from './redux/reducers/asset-list';
@@ -153,6 +156,7 @@ import AssetsTableRateCell from './components/assets/AssetsTableRateCell';
 import ContextMenu from './components/context-menu/ContextMenu';
 import ContextMenuItem from './components/context-menu/ContextMenuItem';
 import ContextMenuTrigger from './components/context-menu/ContextMenuTrigger';
+import CopyPropIdButton from './components/copy-prop-id-button/CopyPropIdButton';
 import Submenu from './components/context-menu/SubMenu';
 
 export {
@@ -209,6 +213,7 @@ export {
     AssetsTableSelectCell,
     AssetsTableTypeFilter,
     AssetsTableTypeCell,
+    AssetsTableGlobalCell,
     AssetsTableStatusCell,
     AssetsTableNameFilter,
     AssetsTableNameCell,
@@ -228,6 +233,8 @@ export {
     login,
     clearCachedAuth,
     access,
+    cacheAccessData,
+    clearCachedAccessList,
     storyAdded,
     storyNameMutated,
     orgNameMutated,
@@ -242,7 +249,6 @@ export {
     updateAssetName,
     updateAssetData,
     doAssetTableHydration,
-    toggleTagFileName,
     uploadAssets,
     replaceAsset,
     selectAsset,
@@ -304,5 +310,6 @@ export {
     ContextMenu,
     ContextMenuItem,
     ContextMenuTrigger,
-    Submenu
+    Submenu,
+    CopyPropIdButton
 };

package/src/redux/actions/access.ts

@@ -1,7 +1,29 @@
+import SessionService from '../../services/Session';
+
+export const ACCESS_CACHE_KEY: string = 'imposium_access_list';
+
+export const cacheAccessData = (accessData: any): any => {
+    doCacheAccessData(accessData);
+    return { type: actions.SET, accessData };
+};
+
+export const clearCachedAccessList = (): any => {
+    try {
+        localStorage.removeItem(ACCESS_CACHE_KEY);
+    } catch (e) {
+        console.warn('Failed to clear access list cache from local storage.');
+    }
+
+    return { type: actions.CLEAR };
+};
+
 export const storyAdded = (storyId: string, storyName: string): any => {
     return (dispatch, getStore) => {
         const {
             access,
+            auth: {
+                idTokenPayload: { exp }
+            },
             routing: {
                 locationBeforeTransitions: { query }
             }
@@ -27,13 +49,24 @@ export const storyAdded = (storyId: string, storyName: string): any => {
                 return o;
             })
         };
+
+        SessionService.updateSession(
+            { stories_hash: SessionService.generateStoriesHash(accessData) },
+            exp
+        );
+        doCacheAccessData(accessData);
         dispatch({ type: actions.STORY_ADDED, accessData });
     };
 };
 
 export const orgNameMutated = (orgId: string, newOrgName: string): any => {
     return (dispatch, getStore) => {
-        const { access } = getStore();
+        const {
+            access,
+            auth: {
+                idTokenPayload: { exp }
+            }
+        } = getStore();
 
         const accessData: any = {
             ...access,
@@ -48,6 +81,12 @@ export const orgNameMutated = (orgId: string, newOrgName: string): any => {
                 return o;
             })
         };
+
+        SessionService.updateSession(
+            { stories_hash: SessionService.generateOrgsHash(accessData) },
+            exp
+        );
+        doCacheAccessData(accessData);
         dispatch({ type: actions.ORG_NAME_MUTATION, accessData });
     };
 };
@@ -56,6 +95,9 @@ export const storyNameMutated = (storyId: string, newStoryName: string): any =>
     return (dispatch, getStore) => {
         const {
             access,
+            auth: {
+                idTokenPayload: { exp }
+            },
             routing: {
                 locationBeforeTransitions: { query }
             }
@@ -81,6 +123,12 @@ export const storyNameMutated = (storyId: string, newStoryName: string): any =>
                 return o;
             })
         };
+
+        SessionService.updateSession(
+            { stories_hash: SessionService.generateOrgsHash(accessData) },
+            exp
+        );
+        doCacheAccessData(accessData);
         dispatch({ type: actions.STORY_NAME_MUTATION, accessData });
     };
 };
@@ -89,6 +137,9 @@ export const storyDeleted = (storyId: string): any => {
     return (dispatch, getStore) => {
         const {
             access,
+            auth: {
+                idTokenPayload: { exp }
+            },
             routing: {
                 locationBeforeTransitions: { query }
             }
@@ -108,14 +159,25 @@ export const storyDeleted = (storyId: string): any => {
                 return o;
             })
         };
+
+        SessionService.updateSession(
+            {
+                story_id: '',
+                stories_hash: SessionService.generateStoriesHash(accessData)
+            },
+            exp
+        );
+        doCacheAccessData(accessData);
         dispatch({ type: actions.STORY_DELETED, accessData });
     };
 };
 
-export const setAccessData = (accessData: any): any => {
-    return (dispatch) => {
-        dispatch({ type: actions.SET, accessData });
-    };
+const doCacheAccessData = (accessData: any): any => {
+    try {
+        localStorage.setItem(ACCESS_CACHE_KEY, JSON.stringify(accessData));
+    } catch (e) {
+        console.warn('Failed to cache access list in local storage.');
+    }
 };
 
 const actions = {