@imposium-hub/components 2.5.18 → 2.6.0-1

package/src/components/header/Header.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ImposiumDropdown from '../dropdown/Dropdown';
 import ServiceIcon from '../service-icon/ServiceIcon';
-import { string2HexCode, parameterizeServiceUrl } from '../../Util';
+import { string2HexCode, parameterizeServiceUrl, getLastModifiedStoryInOrg } from '../../Util';
 import {
     ICON_CHEVRON_DOWN,
     ICON_CHEVRON_UP,
@@ -9,34 +9,34 @@ import {
     ICON_UP_RIGHT_FROM_SQUARE
 } from '../../constants/icons';
 import { connect } from 'react-redux';
-import Spinner from '../spinner/Spinner';
-import _ from 'lodash';
-import DataTable from '../data-table/DataTable';
-import AssetsTableDateCell from '../assets/AssetsTableDateCell';
-import SessionService, { IHubSession } from '../../services/Session';
 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: any) => any;
-    onStoryChange?: (story: any) => any;
-    logout: (...args) => any;
+    unsavedChanges: boolean;
+    saveStory();
+    onLogout();
     additionalButtons?: any[];
     CrMLink?: string;
     auth: any;
     story: any;
-    baseUrl: any;
     hideDocs?: boolean;
     showFTLogo?: boolean;
     access: any;
@@ -47,16 +47,12 @@ export interface IHeaderProps {
 export interface IHeaderState {
     inactiveOrganizations: any[];
     servicesByOrganization: any[];
-    activeServiceBlob: any;
     activeOrganizationBlob: any;
     showAccountDropdown: boolean;
     showStoriesDropdown: boolean;
     showServiceDropdown: boolean;
     dropdownToggleColor: string;
     activeFirstChar: string;
-    order: string;
-    orderDirection: string;
-    totalRendersLoading: boolean;
 }
 
 class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
@@ -100,16 +96,12 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         this.state = {
             inactiveOrganizations: [],
             servicesByOrganization: [],
-            activeServiceBlob: undefined,
             activeOrganizationBlob: undefined,
             showAccountDropdown: false,
             showStoriesDropdown: false,
             showServiceDropdown: false,
             dropdownToggleColor: ImposiumHeader.DEFAULT_ACCOUNT_TOGGLE_COLOR,
-            activeFirstChar: '',
-            order: 'date_modified',
-            orderDirection: 'desc',
-            totalRendersLoading: false
+            activeFirstChar: ''
         };
 
         this.serviceToggleRef = React.createRef();
@@ -136,28 +128,20 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
     private parseAccessData = (accessData: any, activeOrganization: string): void => {
         const { organizations, services } = accessData;
 
-        let activeOrgId = activeOrganization;
-        if (activeOrgId === 'undefined') {
-            const session: IHubSession = SessionService.getSession();
-            activeOrgId = session.organization_id;
-        }
-        const activeOrganizationBlob: any = activeOrgId
-            ? accessData.organizations.find((org) => org.id === activeOrgId)
+        const activeOrganizationBlob: any = activeOrganization
+            ? accessData.organizations.find((org) => org.id === activeOrganization)
             : undefined;
 
         const inactiveOrganizations: any[] =
-            organizations.length > 1 ? organizations.filter((o) => o.id !== activeOrgId) : [];
+            organizations.length > 1
+                ? organizations.filter((o) => o.id !== activeOrganization)
+                : [];
 
         const servicesByOrganization: any[] =
             services && activeOrganizationBlob
                 ? services.filter((s: any) => activeOrganizationBlob.services.includes(s.id))
                 : [];
 
-        const activeServiceBlob: any =
-            servicesByOrganization.length > 1
-                ? services.find((s: any) => window.location.href.includes(s.url))
-                : undefined;
-
         let dropdownToggleColor: string = ImposiumHeader.DEFAULT_ACCOUNT_TOGGLE_COLOR;
         let activeFirstChar: string = '';
 
@@ -168,7 +152,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
         this.setState({
             servicesByOrganization,
-            activeServiceBlob,
             inactiveOrganizations,
             activeOrganizationBlob,
             dropdownToggleColor,
@@ -176,58 +159,87 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         });
     };
 
-    private closeStoriesDropDown() {
-        this.setState({ showStoriesDropdown: false }, () =>
-            this.props.updateStoryFilter({ name: '' })
-        );
-    }
-
     private changeStory = (story: any): void => {
-        const { onStoryChange } = this.props;
+        const { activeOrganization, api, activeServiceId, unsavedChanges } = this.props;
+
+        const changeStory = () => {
+            pushRoute(`/${activeOrganization}/${story.id}`);
+            api.cacheActiveStory(activeServiceId, activeOrganization, story.id);
+        };
 
-        if (typeof onStoryChange === 'function') {
-            onStoryChange(story);
-            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, newId: string = ''): void => {
-        const { onOrganizationChange } = this.props;
-
+    private toggleAccountDropdown = (toggle: boolean, orgId: string = ''): void => {
+        const { api, activeServiceId, unsavedChanges } = this.props;
         if (toggle) {
             this.setState({ showAccountDropdown: true });
         } else {
             this.setState({ showAccountDropdown: false });
 
-            // Propagate handler if supplied (more useful in react / redux flow)
-            if (newId && onOrganizationChange) {
-                onOrganizationChange(newId);
-            }
-
-            // V1 Default behavior - redirect to hub on org change
-            if (newId && !onOrganizationChange) {
-                window.location.replace(`${this.getHomeUrl()}?organization_id=${newId}`);
+            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
+                    });
+                } else {
+                    changeOrg();
+                }
             }
         }
     };
 
-    private getHomeUrl = (): string => {
-        const {
-            location: { hostname, host }
-        } = window;
-
-        if (hostname === 'localhost') {
-            return 'http://localhost:3036';
-        } else if (host.includes('.staging.')) {
-            return 'https://launchpad.staging.imposium.com';
-        } else {
-            return 'https://launchpad.imposium.com';
-        }
-    };
-
     private doLogout = (): void => {
         this.setState({ showAccountDropdown: false });
-        this.props.logout();
+        this.props.onLogout();
     };
 
     private pullFirstChar = (s: string): string => {
@@ -274,92 +286,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         </div>
     );
 
-    private getAccessDataHandler = () => {
-        const {
-            auth: { accessToken },
-            baseUrl,
-            activeOrganization
-        } = this.props;
-
-        this.setState({ totalRendersLoading: true });
-
-        SessionService.getAccessData(accessToken, baseUrl, true, activeOrganization)
-            .then((res) => {
-                this.props.setAccessData(res);
-                this.setState({ totalRendersLoading: false });
-            })
-            .catch((e) => {
-                console.error(e);
-            });
-    };
-
-    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 {
-            email,
             activeOrganization,
             activeStory,
             hideStoryPicker,
@@ -369,19 +297,18 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             showFTLogo,
             hideDocs,
             access,
-            access: { organizations }
+            api,
+            access: { organizations },
+            errorState
         } = this.props;
         const {
             showAccountDropdown,
             servicesByOrganization,
-            activeServiceBlob,
             showStoriesDropdown,
             activeOrganizationBlob,
             activeFirstChar,
             dropdownToggleColor,
-            showServiceDropdown,
-            order,
-            orderDirection
+            showServiceDropdown
         } = this.state;
 
         let currentStory: any;
@@ -391,10 +318,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         let serviceAnchors: JSX.Element[];
         let privateAnchors: JSX.Element[];
         let accountDropdownToggle: JSX.Element;
-        let storyToggle: JSX.Element = !hideStoryPicker ? <Spinner /> : null;
-        let storyMenuInner: JSX.Element = (
-            <div className='no-stories-dialog'>{ImposiumHeader.NO_STORIES_COPY}</div>
-        );
+        let storyToggle: JSX.Element;
         let serviceDropdownToggle: JSX.Element;
         let serviceDropdownMenu: JSX.Element;
 
@@ -407,8 +331,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         );
 
         if (access) {
-            activeService = servicesByOrganization.find((s: any) =>
-                window.location.href.includes(s.url)
+            activeService = servicesByOrganization.find(
+                (s: any) => s.id === this.props.activeServiceId
             );
 
             if (activeService) {
@@ -478,23 +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>
-                        {activeServiceBlob
-                            ? activeServiceBlob.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 ? (
@@ -515,7 +438,12 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             storyToggle = null;
         }
 
-        if (access && activeOrganizationBlob && !hideStoryPicker) {
+        if (
+            access &&
+            activeOrganizationBlob &&
+            !hideStoryPicker &&
+            activeOrganizationBlob.stories.length > 0
+        ) {
             currentStory = activeOrganizationBlob.stories.find((s: any) => s.id === activeStory);
             storyToggle = (
                 <button
@@ -523,12 +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.getAccessDataHandler();
-                            }
-                        });
+                        this.setState({ showStoriesDropdown: !showStoriesDropdown });
                     }}>
                     <div className='story-name'>
                         {currentStory
@@ -540,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 = [];
@@ -593,6 +474,9 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             });
         }
 
+        const email = '';
+        // const email = scrapeEmail(auth);
+        // TODO: plug this back in
         const orgSelect = () => {
             return (
                 <>
@@ -678,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'