@imposium-hub/components 2.6.0-0 → 2.6.0-2

package/src/components/header/Header.tsx

@@ -9,29 +9,30 @@ import {
     ICON_UP_RIGHT_FROM_SQUARE
 } from '../../constants/icons';
 import { connect } from 'react-redux';
-import _ from 'lodash';
-import DataTable from '../data-table/DataTable';
-import AssetsTableDateCell from '../assets/AssetsTableDateCell';
 import Button from '../button/Button';
 import Select, { createFilter } from 'react-select';
 import { setAccessData } from '../../redux/actions/access';
 import { bindActionCreators } from 'redux';
-import { StoryTableTotalRendersCell } from '../assets/StoryTableTotalRendersCell';
-import StoryTableNameFilter from '../assets/StoryTableNameFilter';
 import { updateStoryFilter } from '../../redux/actions/story-filter';
 import { IImposiumAPI } from '../../services/API';
-
+import { pushRoute } from '../../utils/routing';
+import { openConfirmModal } from '../../utils/modal';
+import { header } from '../../constants/copy';
+import { ProjectDropdown } from './ProjectDropdown';
+import { APP_WRAPPER_ERROR_STATES } from '../app-wrapper/AppWrapper';
 export interface IHeaderProps {
+    email: string;
     auth0: any;
     api: IImposiumAPI;
+    errorState?: string;
     activeServiceId: string;
     activeOrganization: string;
     activeStory?: string;
     hideStoryPicker?: boolean;
     hideOrgPicker?: boolean;
     setAccessData(access: any): void;
-    onOrganizationChange?: (orgId: string, storyId: string) => any;
-    onStoryChange?: (story: any) => any;
+    unsavedChanges: boolean;
+    saveStory();
     onLogout();
     additionalButtons?: any[];
     CrMLink?: string;
@@ -53,9 +54,6 @@ export interface IHeaderState {
     showServiceDropdown: boolean;
     dropdownToggleColor: string;
     activeFirstChar: string;
-    order: string;
-    orderDirection: string;
-    totalRendersLoading: boolean;
 }
 
 class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
@@ -104,10 +102,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             showStoriesDropdown: false,
             showServiceDropdown: false,
             dropdownToggleColor: ImposiumHeader.DEFAULT_ACCOUNT_TOGGLE_COLOR,
-            activeFirstChar: '',
-            order: 'date_modified',
-            orderDirection: 'desc',
-            totalRendersLoading: false
+            activeFirstChar: ''
         };
 
         this.serviceToggleRef = React.createRef();
@@ -165,42 +160,80 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         });
     };
 
-    private closeStoriesDropDown() {
-        this.setState({ showStoriesDropdown: false }, () =>
-            this.props.updateStoryFilter({ name: '' })
-        );
-    }
-
     private changeStory = (story: any): void => {
-        const { onStoryChange, activeOrganization, api, activeServiceId } = this.props;
+        const { activeOrganization, api, activeServiceId, unsavedChanges } = this.props;
 
-        if (typeof onStoryChange === 'function') {
-            onStoryChange(story);
+        const changeStory = () => {
+            pushRoute(`/${activeOrganization}/${story.id}`);
             api.cacheActiveStory(activeServiceId, activeOrganization, story.id);
-            this.closeStoriesDropDown();
+        };
+
+        if (unsavedChanges) {
+            const onYes = () => {
+                if (this.props.saveStory) {
+                    this.props.saveStory();
+                }
+                changeStory();
+            };
+
+            openConfirmModal({
+                showCancel: true,
+                noLabel: header.noSave,
+                onNo: () => changeStory(),
+                yesLabel: header.onSave,
+                onYes: () => onYes(),
+                title: header.checkUnsaved
+            });
+        } else {
+            changeStory();
         }
     };
 
     private toggleAccountDropdown = (toggle: boolean, orgId: string = ''): void => {
-        const { onOrganizationChange, api, activeServiceId } = this.props;
+        const { api, activeServiceId, unsavedChanges } = this.props;
         if (toggle) {
             this.setState({ showAccountDropdown: true });
         } else {
             this.setState({ showAccountDropdown: false });
-            const lastModified = getLastModifiedStoryInOrg(orgId, this.props.access);
-
-            if (orgId && onOrganizationChange) {
-                let storyId = lastModified;
-                api.getCachedStoryForOrg(activeServiceId, orgId)
-                    .then((res) => {
-                        storyId = res.story_id ? res.story_id : lastModified;
-                        onOrganizationChange(orgId, storyId);
-                    })
-                    .catch((e) => {
-                        console.error('Error getting cached storyID for Org');
-                        onOrganizationChange(orgId, storyId);
+
+            if (orgId) {
+                const lastModified = getLastModifiedStoryInOrg(orgId, this.props.access);
+                const changeOrg = () => {
+                    let storyId = lastModified;
+                    api.getCachedStoryForOrg(activeServiceId, orgId)
+                        .then((res) => {
+                            storyId = res.story_id ? res.story_id : lastModified;
+                            if (storyId) {
+                                pushRoute(`/${orgId}/${storyId}`);
+                                api.cacheActiveStory(activeServiceId, orgId, storyId);
+                            } else {
+                                pushRoute(`/${orgId}`);
+                            }
+                        })
+                        .catch((e) => {
+                            console.error('Error getting cached storyID for Org');
+                            pushRoute(`/${orgId}/${storyId}`);
+                            api.cacheActiveStory(activeServiceId, orgId, storyId);
+                        });
+                };
+
+                if (unsavedChanges) {
+                    const onYes = () => {
+                        this.props.saveStory();
+                        changeOrg();
+                    };
+
+                    openConfirmModal({
+                        showCancel: true,
+                        noLabel: header.noSave,
+                        onNo: () => changeOrg(),
+                        yesLabel: header.onSave,
+                        onYes: () => onYes(),
+                        title: header.checkUnsaved
                     });
-                api.cacheActiveStory(activeServiceId, orgId, storyId);
+                } else {
+                    changeOrg();
+                }
             }
         }
     };
@@ -254,70 +287,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         </div>
     );
 
-    private getStoriesColumns() {
-        return [
-            {
-                accessor: 'name',
-                Header: 'Name',
-                width: 115,
-                minWidth: 115,
-                Search: () => <StoryTableNameFilter />,
-                disableSortBy: false
-            },
-            {
-                accessor: 'total_renders',
-                Header: 'Total Renders',
-                width: 60,
-                minWidth: 60,
-                maxWidth: 60,
-                disableSortBy: false,
-                Cell: (cell: any) => (
-                    <StoryTableTotalRendersCell
-                        loading={this.state.totalRendersLoading}
-                        cell={cell}
-                        date_created={false}
-                    />
-                )
-            },
-            {
-                accessor: 'last_modified_by',
-                Header: 'Last Modified By',
-                width: 60,
-                minWidth: 60,
-                maxWidth: 60,
-                disableSortBy: true
-            },
-            {
-                accessor: 'date_modified',
-                Header: 'Last Modified',
-                width: 65,
-                minWidth: 65,
-                maxWidth: 65,
-                disableSortBy: false,
-                Cell: (cell: any) => (
-                    <AssetsTableDateCell
-                        cell={cell}
-                        date_created={false}
-                    />
-                )
-            },
-            {
-                accessor: 'date_created',
-                Header: 'Created Date',
-                width: 65,
-                minWidth: 65,
-                maxWidth: 65,
-                disableSortBy: false,
-                Cell: (cell: any) => (
-                    <AssetsTableDateCell
-                        cell={cell}
-                        date_created={true}
-                    />
-                )
-            }
-        ];
-    }
-
     public render() {
         const {
             activeOrganization,
@@ -330,7 +299,9 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             hideDocs,
             access,
             api,
-            access: { organizations }
+            access: { organizations },
+            errorState,
+            email
         } = this.props;
         const {
             showAccountDropdown,
@@ -339,9 +310,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             activeOrganizationBlob,
             activeFirstChar,
             dropdownToggleColor,
-            showServiceDropdown,
-            order,
-            orderDirection
+            showServiceDropdown
         } = this.state;
 
         let currentStory: any;
@@ -352,9 +321,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         let privateAnchors: JSX.Element[];
         let accountDropdownToggle: JSX.Element;
         let storyToggle: JSX.Element;
-        let storyMenuInner: JSX.Element = (
-            <div className='no-stories-dialog'>{ImposiumHeader.NO_STORIES_COPY}</div>
-        );
         let serviceDropdownToggle: JSX.Element;
         let serviceDropdownMenu: JSX.Element;
 
@@ -438,21 +404,22 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 </div>
             );
 
-            serviceDropdownToggle = (
-                <button
-                    id='btn-toggle-services'
-                    className='btn-toggle-services'
-                    style={serviceDropdownColor}
-                    ref={this.serviceToggleRef}
-                    onClick={() =>
-                        this.setState({ showServiceDropdown: !this.state.showServiceDropdown })
-                    }>
-                    <span>
-                        {activeService ? activeService.name : ImposiumHeader.SERVICE_MESH_ALIAS}
-                    </span>
-                    {this.renderDropdownChevron(showServiceDropdown)}
-                </button>
-            );
+            serviceDropdownToggle =
+                errorState !== APP_WRAPPER_ERROR_STATES.UNAUTHORIZED_ORG ? (
+                    <button
+                        id='btn-toggle-services'
+                        className='btn-toggle-services'
+                        style={serviceDropdownColor}
+                        ref={this.serviceToggleRef}
+                        onClick={() =>
+                            this.setState({ showServiceDropdown: !this.state.showServiceDropdown })
+                        }>
+                        <span>
+                            {activeService ? activeService.name : ImposiumHeader.SERVICE_MESH_ALIAS}
+                        </span>
+                        {this.renderDropdownChevron(showServiceDropdown)}
+                    </button>
+                ) : null;
 
             accountDropdownToggle =
                 !hideOrgPicker && access.organizations.length > 0 ? (
@@ -486,21 +453,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                     className='btn-toggle-story'
                     ref={this.storyToggleRef}
                     onClick={() => {
-                        this.setState({ showStoriesDropdown: !showStoriesDropdown }, () => {
-                            if (showStoriesDropdown === false) {
-                                this.props.updateStoryFilter({ name: '' });
-                                this.setState({ totalRendersLoading: true });
-                                api.getAccessData(true)
-                                    .then((res) => {
-                                        this.props.setAccessData(res);
-                                        this.setState({ totalRendersLoading: false });
-                                    })
-                                    .catch((e) => {
-                                        console.error(e);
-                                        console.error('Error getting access data from Header');
-                                    });
-                            }
-                        });
+                        this.setState({ showStoriesDropdown: !showStoriesDropdown });
                     }}>
                     <div className='story-name'>
                         {currentStory
@@ -512,48 +465,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                     {this.renderDropdownChevron(showStoriesDropdown)}
                 </button>
             );
-
-            if (activeOrganizationBlob.stories.length !== 0) {
-                const sortBy =
-                    order && orderDirection
-                        ? [{ id: order, desc: orderDirection === 'desc' }]
-                        : undefined;
-
-                let sortedStories = _.orderBy(
-                    activeOrganizationBlob.stories,
-                    ['date_modified'],
-                    ['desc']
-                );
-
-                if (this.props.storyFilter && this.props.storyFilter?.name) {
-                    const storyFilter = this.props.storyFilter.name.toLowerCase();
-
-                    sortedStories = sortedStories.filter((stories) =>
-                        stories.name.toLowerCase().includes(storyFilter)
-                    );
-
-                    const sortById = sortedStories.filter((stories) =>
-                        stories.id.includes(storyFilter)
-                    );
-
-                    if (sortById.length > 0) {
-                        sortedStories = sortById;
-                    }
-                }
-
-                storyMenuInner = (
-                    <DataTable
-                        columns={this.getStoriesColumns()}
-                        data={sortedStories}
-                        sortBy={sortBy}
-                        noDataText={ImposiumHeader.NO_STORIES_COPY}
-                        itemsPerPage={activeOrganizationBlob.stories.length}
-                        hidePaginator={true}
-                        onRowClick={this.changeStory}
-                        keyboardNav={true}
-                    />
-                );
-            }
         }
 
         const orgOptions = [];
@@ -565,8 +476,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             });
         }
 
-        const email = '';
-        // const email = scrapeEmail(auth);
         // TODO: plug this back in
         const orgSelect = () => {
             return (
@@ -653,14 +562,18 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                     {serviceDropdownMenu}
                 </ImposiumDropdown>
 
-                <ImposiumDropdown
-                    key='stories-dropdown'
-                    position='bottomright'
-                    show={showStoriesDropdown}
-                    toggleRef={this.storyToggleRef}
-                    onOutsideClick={() => this.closeStoriesDropDown()}>
-                    <div className='stories-menu'>{storyMenuInner}</div>
-                </ImposiumDropdown>
+                {activeOrganizationBlob && (
+                    <ProjectDropdown
+                        api={api}
+                        position='bottomright'
+                        setAccessData={this.props.setAccessData}
+                        storiesArray={activeOrganizationBlob.stories}
+                        show={this.state.showStoriesDropdown}
+                        onClose={() => this.setState({ showStoriesDropdown: false })}
+                        changeStory={this.changeStory}
+                        toggleRef={this.storyToggleRef}
+                    />
+                )}
 
                 <ImposiumDropdown
                     key='org-dropdown'

package/src/components/header/ProjectDropdown.tsx

@@ -0,0 +1,174 @@
+import { useEffect, useState } from 'react';
+import ImposiumDropdown from '../dropdown/Dropdown';
+import StoryTableNameFilter from '../assets/StoryTableNameFilter';
+import { StoryTableTotalRendersCell } from '../assets/StoryTableTotalRendersCell';
+import React from 'react';
+import AssetsTableDateCell from '../assets/AssetsTableDateCell';
+import DataTable from '../data-table/DataTable';
+import { ImposiumHeader } from '../..';
+import _ from 'lodash';
+
+interface IProjectDropdownProps {
+    position: any;
+    api: any;
+    toggleRef: any;
+    show: boolean;
+    storiesArray: any;
+    changeStory(storyRow: any): void;
+    setAccessData(data): void;
+    onClose(): void;
+}
+
+export const ProjectDropdown = (props: IProjectDropdownProps) => {
+    const { toggleRef, changeStory, storiesArray, show, onClose, setAccessData, api, position } =
+        props;
+
+    const [storyFilter, setStoryFilter] = useState({
+        name: ''
+    });
+    const [totalRendersLoading, setTotalRendersLoading] = useState(false);
+    const [order] = useState('date_modified');
+    const [orderDirection] = useState('desc');
+
+    if (!storiesArray) {
+        return null;
+    }
+
+    useEffect(() => {
+        if (show) {
+            setTotalRendersLoading(true);
+            api.getAccessData(true).then((data) => {
+                setAccessData(data);
+                setTotalRendersLoading(false);
+            });
+        }
+    }, [show]);
+
+    const closeProjectDropdown = () => {
+        setStoryFilter({
+            name: ''
+        });
+        onClose();
+    };
+
+    const getStoriesColumns = () => {
+        return [
+            {
+                accessor: 'name',
+                Header: 'Name',
+                width: 115,
+                minWidth: 115,
+                Search: () => (
+                    <StoryTableNameFilter
+                        filter={storyFilter.name}
+                        updateFilter={setStoryFilter}
+                    />
+                ),
+                disableSortBy: false
+            },
+            {
+                accessor: 'total_renders',
+                Header: 'Total Renders',
+                width: 60,
+                minWidth: 60,
+                maxWidth: 60,
+                disableSortBy: false,
+                Cell: (cell: any) => (
+                    <StoryTableTotalRendersCell
+                        loading={totalRendersLoading}
+                        cell={cell}
+                        date_created={false}
+                    />
+                )
+            },
+            {
+                accessor: 'last_modified_by',
+                Header: 'Last Modified By',
+                width: 60,
+                minWidth: 60,
+                maxWidth: 60,
+                disableSortBy: true
+            },
+            {
+                accessor: 'date_modified',
+                Header: 'Last Modified',
+                width: 65,
+                minWidth: 65,
+                maxWidth: 65,
+                disableSortBy: false,
+                Cell: (cell: any) => (
+                    <AssetsTableDateCell
+                        cell={cell}
+                        date_created={false}
+                    />
+                )
+            },
+            {
+                accessor: 'date_created',
+                Header: 'Created Date',
+                width: 65,
+                minWidth: 65,
+                maxWidth: 65,
+                disableSortBy: false,
+                Cell: (cell: any) => (
+                    <AssetsTableDateCell
+                        cell={cell}
+                        date_created={true}
+                    />
+                )
+            }
+        ];
+    };
+
+    const sortBy =
+        order && orderDirection ? [{ id: order, desc: orderDirection === 'desc' }] : undefined;
+
+    let sortedStories = _.orderBy(storiesArray, ['date_modified'], ['desc']);
+
+    if (storyFilter.name) {
+        const storyFilterLowercase = storyFilter.name.toLowerCase();
+
+        sortedStories = sortedStories.filter((stories) =>
+            stories.name.toLowerCase().includes(storyFilterLowercase)
+        );
+
+        const sortById = sortedStories.filter((stories) =>
+            stories.id.includes(storyFilterLowercase)
+        );
+
+        if (sortById.length > 0) {
+            sortedStories = sortById;
+        }
+    }
+
+    const onRowClick = (r: any) => {
+        onClose();
+        changeStory(r);
+    };
+
+    return (
+        <>
+            <ImposiumDropdown
+                key='stories-dropdown'
+                position={position}
+                show={show}
+                toggleRef={toggleRef}
+                onOutsideClick={closeProjectDropdown}>
+                <div className='stories-menu'>
+                    {
+                        <DataTable
+                            columns={getStoriesColumns()}
+                            data={sortedStories}
+                            sortBy={sortBy}
+                            noDataText={ImposiumHeader.NO_STORIES_COPY}
+                            itemsPerPage={storiesArray.length}
+                            hidePaginator={true}
+                            onRowClick={onRowClick}
+                            keyboardNav={true}
+                        />
+                    }
+                </div>
+            </ImposiumDropdown>
+        </>
+    );
+};

package/src/components/portal/Portal.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, ReactPortal } from 'react';
+import { ReactPortal } from 'react';
 import { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -7,7 +7,6 @@ import { createPortal } from 'react-dom';
 // Just wrap desired element in <Portal>{YourElement}</Portal>
 
 interface IPortalProps {
-    children: ReactNode;
     id: string;
 }
 

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

@@ -779,7 +779,7 @@ export const BigButton: React.FC<IBigButtonProps> = (p) => (
     </div>
 );
 
-export const TabContent = ({ children }) => (
+export const TabContent: React.FC = ({ children }) => (
     <div className='tab-content'>
         <div className='settings-tab'>
             <div className='integration-details'>{children}</div>

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

@@ -876,7 +876,13 @@ const mapStateToProps = (state): any => {
     };
 };
 
-const CrMOptions = ({ options, onChange, errorCopy = '' }) => {
+interface ICrMOptionsProps {
+    options: any;
+    onChange(options: any): void;
+    errorCopy: string;
+}
+
+const CrMOptions: React.FC<ICrMOptionsProps> = ({ options, onChange, errorCopy = '' }) => {
     const onInputChange = (key, val) => {
         const newOpts = { ...options };
         newOpts[key] = val;

package/src/constants/copy.ts

@@ -238,6 +238,9 @@ export const integration = {
 };
 
 export const header = {
+    noSave: `Don't Save`,
+    onSave: 'Save',
+    checkUnsaved: 'You have unsaved changes, would you like to save and continue?',
     publishing: 'Publishing...',
     working: 'Using Working Copy',
     statusError: 'Error getting project status',

package/src/index.ts

@@ -129,7 +129,6 @@ import {
     toFixed,
     padStart,
     parameterizeServiceUrl,
-    scrapeEmail,
     fitToContainer,
     filterHotkeys,
     mimetypeConformsToOverlay,
@@ -139,7 +138,8 @@ import {
     formattedTime,
     getSMPTE,
     checkStoryId,
-    IMAGE_EXTENSIONS
+    IMAGE_EXTENSIONS,
+    getOrgIdFromStory
 } from './Util';
 import PublishStatusIndicator from './components/publish-wizard/publish/PublishStatusIndicator';
 import { getMediaPreviewStyle } from './utils/assets';
@@ -159,8 +159,13 @@ import { resetStoryFilter, updateStoryFilter } from './redux/actions/story-filte
 import storyFilter from './redux/reducers/story-filter';
 import StoryTableNameFilter from './components/assets/StoryTableNameFilter';
 import { AppWrapper } from './components/app-wrapper/AppWrapper';
+import { pushRoute, replaceRoute } from './utils/routing';
+import { ProjectDropdown } from './components/header/ProjectDropdown';
 
 export {
+    ProjectDropdown,
+    pushRoute,
+    replaceRoute,
     AppWrapper,
     ImposiumHeader,
     ImposiumDropdown,
@@ -276,8 +281,8 @@ export {
     getFirstStoryInOrg,
     string2HexCode,
     parameterizeServiceUrl,
-    scrapeEmail,
     fitToContainer,
+    getOrgIdFromStory,
     formattedTime,
     filterHotkeys,
     mimetypeConformsToOverlay,