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

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

@@ -4,9 +4,21 @@ import { registerEvent, callHideEvent } from './registerEvent';
 import AnimateComponent from './AnimateComponent';
 import { throttle } from './helper';
 
-const ContextMenu = ({
-    children,
+interface IContextMenuProps {
+    id: string;
+    appendTo: string;
+    hideOnLeave?: boolean;
+    onMouseLeave?: (e: any) => void;
+    onHide?: () => void;
+    onShow?: () => void;
+    preventHideOnScroll?: boolean;
+    preventHideOnResize?: boolean;
+    animation?: string;
+}
+
+const ContextMenu: React.FC<IContextMenuProps> = ({
     id,
+    children,
     appendTo,
     hideOnLeave,
     onMouseLeave,
@@ -14,7 +26,6 @@ const ContextMenu = ({
     onShow,
     preventHideOnScroll,
     preventHideOnResize,
-    attributes,
     animation
 }) => {
     const contextMenuEl = useRef(null);
@@ -116,7 +127,7 @@ const ContextMenu = ({
         }
     }, [isVisible, clientPosition]);
 
-    const childrenWithProps = React.Children.map(children, (child) =>
+    const childrenWithProps = React.Children.map(children, (child: any) =>
         React.cloneElement(child, { id })
     );
 
@@ -126,8 +137,7 @@ const ContextMenu = ({
                 className={`contextmenu`}
                 ref={contextMenuEl}
                 style={{ top, left }}
-                onMouseLeave={handleMouseLeave}
-                {...attributes}>
+                onMouseLeave={handleMouseLeave}>
                 {childrenWithProps}
             </div>
         );
@@ -168,8 +178,6 @@ ContextMenu.defaultProps = {
     hideOnLeave: false,
     preventHideOnResize: false,
     preventHideOnScroll: false,
-    attributes: {},
-    className: '',
     animation: 'fade',
     onMouseLeave: () => null,
     onHide: () => null,

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

@@ -1,7 +1,18 @@
 import React, { useCallback, useRef } from 'react';
 import { callHideEvent } from './registerEvent';
 
-const ContextMenuItem = ({ children, onClick, disabled, preventClose, attributes, className }) => {
+interface IContextMenuItemProps {
+    onClick?(e: React.MouseEvent): void;
+    disabled?: boolean;
+    preventClose?: boolean;
+}
+
+const ContextMenuItem: React.FC<IContextMenuItemProps> = ({
+    children,
+    onClick,
+    disabled,
+    preventClose
+}) => {
     const contextMenuItem = useRef(null);
 
     const handleClickEvent = useCallback((e) => {
@@ -15,7 +26,6 @@ const ContextMenuItem = ({ children, onClick, disabled, preventClose, attributes
         <div
             className={`${disabled ? 'contextmenu__item--disabled' : 'contextmenu__item'}`}
             onClick={handleClickEvent}
-            {...attributes}
             ref={contextMenuItem}>
             {children}
         </div>
@@ -23,12 +33,3 @@ const ContextMenuItem = ({ children, onClick, disabled, preventClose, attributes
 };
 
 export default ContextMenuItem;
-
-ContextMenuItem.defaultProps = {
-    disabled: false,
-    preventClose: false,
-    attributes: {},
-    className: '',
-    onClick: () => null,
-    onItemHover: () => null
-};

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

@@ -1,7 +1,18 @@
 import React, { useRef, useCallback } from 'react';
 import { callShowEvent, callHideEvent } from './registerEvent';
 
-const ContextMenuTrigger = ({ children, id, disableWhileShiftPressed, attributes, disable }) => {
+interface IContextMenuTriggerProps {
+    id: string;
+    disableWhileShiftPressed?: boolean;
+    disable?: boolean;
+}
+
+const ContextMenuTrigger: React.FC<IContextMenuTriggerProps> = ({
+    children,
+    id,
+    disableWhileShiftPressed,
+    disable
+}) => {
     const menuTrigger = useRef(null);
 
     const handleContextMenu = useCallback((e) => {
@@ -29,7 +40,6 @@ const ContextMenuTrigger = ({ children, id, disableWhileShiftPressed, attributes
         <div
             className='menu-trigger'
             ref={menuTrigger}
-            {...attributes}
             onContextMenu={(e) => handleContextMenu(e)}>
             {children}
         </div>
@@ -37,11 +47,3 @@ const ContextMenuTrigger = ({ children, id, disableWhileShiftPressed, attributes
 };
 
 export default ContextMenuTrigger;
-
-ContextMenuTrigger.defaultProps = {
-    attributes: {},
-    disable: false,
-    renderTag: 'div',
-    disableWhileShiftPressed: false,
-    className: ''
-};

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

@@ -1,7 +1,11 @@
 import React, { useCallback, useState, useRef } from 'react';
 import ContextMenuItem from './ContextMenuItem';
 
-const Submenu = ({ children, title, attributes, className }) => {
+interface ISubmenuProps {
+    title: string;
+}
+
+const Submenu: React.FC<ISubmenuProps> = ({ children, title }) => {
     const [submenuStyle, setSubmenuStyle] = useState(null);
     const submenuEl = useRef(null);
     const submenuItem = useRef(null);
@@ -49,8 +53,7 @@ const Submenu = ({ children, title, attributes, className }) => {
             onMouseOut={() => hideSubmenu()}
             onFocus={() => null}
             onBlur={() => null}
-            ref={submenuItem}
-            {...attributes}>
+            ref={submenuItem}>
             <ContextMenuItem>{title}</ContextMenuItem>
             <div
                 className='submenu__item'
@@ -63,8 +66,3 @@ const Submenu = ({ children, title, attributes, className }) => {
 };
 
 export default Submenu;
-
-Submenu.defaultProps = {
-    title: 'Sub Menu',
-    className: ''
-};

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

@@ -11,27 +11,40 @@ import {
 import { assets as copy } from '../../constants/copy';
 let textInputTimeout: number;
 
-const Paginator: React.FC<any> = ({
-    manualPagination,
+interface IPaginatorProps {
+    pageCount: number;
+    pageIndex: number;
+    pageSize: number;
+    pageOptions: any;
+    totalItems: number;
+    canPreviousPage: boolean;
+    canNextPage: boolean;
+    gotoPage: (page: number, pageSize: number) => void;
+    previousPage: () => void;
+    nextPage: () => void;
+    setPageSize: (size: number) => void;
+    itemsPerPage: number;
+    onItemsPerPage: (size: number) => void;
+}
+
+const Paginator: React.FC<IPaginatorProps> = ({
     pageCount,
     pageIndex,
     pageSize,
-    pageOptions,
     totalItems,
     canPreviousPage,
     canNextPage,
     gotoPage,
     previousPage,
     nextPage,
-    setPageSize,
     itemsPerPage,
     onItemsPerPage
 }) => {
     const [getPageIndex, setPageIndex] = React.useState<number>(pageIndex);
     const [getItemsPerPage, setItemsPerPage] = React.useState<number>(itemsPerPage);
     const [getPageCount, setPageCount] = React.useState<number>(pageCount);
-    const [inputPageIndex, setInputPageIndex] = React.useState<string>('');
-    const [inputItemsPerPage, setInputItemsPerPage] = React.useState<string>('');
+    const [inputPageIndex, setInputPageIndex] = React.useState<any>('');
+    const [inputItemsPerPage, setInputItemsPerPage] = React.useState<any>('');
 
     React.useEffect(() => {
         if (pageCount === 0) {

package/src/components/font-picker/font-manager/constants.ts

@@ -5,3 +5,8 @@ export const LIST_BASE_URL = 'https://www.googleapis.com/webfonts/v1/webfonts';
 export const FONT_FACE_REGEX = /@font-face {([\s\S]*?)}/gm;
 
 export const FONT_FAMILY_DEFAULT = 'Open Sans';
+
+export const API_AUTH_TYPES = {
+    TOKEN: 'TOKEN',
+    ACCESS_KEY: 'ACCESS_KEY'
+};

package/src/components/header/Header.tsx

@@ -9,29 +9,29 @@ 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 {
     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 +53,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 +101,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 +159,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 +286,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 +298,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             hideDocs,
             access,
             api,
-            access: { organizations }
+            access: { organizations },
+            errorState
         } = this.props;
         const {
             showAccountDropdown,
@@ -339,9 +308,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             activeOrganizationBlob,
             activeFirstChar,
             dropdownToggleColor,
-            showServiceDropdown,
-            order,
-            orderDirection
+            showServiceDropdown
         } = this.state;
 
         let currentStory: any;
@@ -352,9 +319,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 +402,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 +451,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 +463,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 = [];
@@ -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'