@imposium-hub/components 1.60.22 → 1.61.0

package/dist/styles.css

@@ -1691,55 +1691,18 @@ body a {
   color: #4D8C71;
 }
 .imposium-header .stories-menu {
-  width: 240px;
+  width: 510px;
   max-height: 400px;
   display: flex;
   flex-direction: column;
   overflow: auto;
 }
-.imposium-header .stories-menu .no-stories-dialog {
-  font-family: 'OswaldHeader', 'Oswald', sans-serif;
-  text-transform: uppercase;
-  color: white;
-  font-size: 12px;
-  text-align: center;
-  padding: 0.3em;
-}
-.imposium-header .stories-menu .btn-change-story {
-  padding: 0;
-  border: none;
-  font: inherit;
-  color: inherit;
-  background-color: transparent;
+.imposium-header .stories-menu .ip-table-body {
   cursor: pointer;
-  outline: none;
-  box-sizing: border-box;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  font-family: 'OswaldHeader', 'Oswald', sans-serif;
-  text-transform: uppercase;
-  color: white;
-  white-space: nowrap;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  min-height: 35px;
-  font-size: 12px;
-  border-bottom: 1px solid #494949;
-  box-sizing: content-box;
-  margin: 0;
-  border-radius: 0;
-  padding: 0 5px;
+  height: 244px;
 }
-.imposium-header .stories-menu .btn-change-story:last-child {
-  border-bottom: unset;
-}
-.imposium-header .stories-menu .btn-change-story:hover {
-  background-color: #494949;
+.imposium-header .stories-menu .ip-table-body .ip-table-row:hover .ip-table-col {
+  background-color: #393939;
 }
 .imposium-header .orgs-menu {
   width: 240px;

package/dist/styles.less

@@ -1656,38 +1656,19 @@ body{
     }
 
     .stories-menu {
-        width: 240px;
+        width: 510px;
         max-height: 400px;
         display: flex;
         flex-direction: column;
         overflow: auto;
-
-        .no-stories-dialog {
-            .font-style;
-            font-size: 12px;
-            text-align: center;
-            padding: 0.3em;
-        }
-
-        .btn-change-story {
-            .btn-reset;
-            .ellipsis;
-            max-width: 100%;
-            min-height: 35px;
-            font-size: 12px;
-            border-bottom: 1px solid #494949;
-            box-sizing: content-box;
-            margin: 0;
-            border-radius: 0;
-            padding: 0 5px;
-
-            &:last-child {
-                border-bottom: unset;
-            }
-
-            &:hover {
-                background-color: #494949;
-            }
+        .ip-table-body {
+            cursor: pointer;
+            height: 244px;
+            .ip-table-row:hover{
+                .ip-table-col {
+                  background-color: darken(@backgroundHighlight, 15%);
+                }
+              }
         }
     }
 

package/less/components/header.less

@@ -271,38 +271,19 @@
     }
 
     .stories-menu {
-        width: 240px;
+        width: 510px;
         max-height: 400px;
         display: flex;
         flex-direction: column;
         overflow: auto;
-
-        .no-stories-dialog {
-            .font-style;
-            font-size: 12px;
-            text-align: center;
-            padding: 0.3em;
-        }
-
-        .btn-change-story {
-            .btn-reset;
-            .ellipsis;
-            max-width: 100%;
-            min-height: 35px;
-            font-size: 12px;
-            border-bottom: 1px solid #494949;
-            box-sizing: content-box;
-            margin: 0;
-            border-radius: 0;
-            padding: 0 5px;
-
-            &:last-child {
-                border-bottom: unset;
-            }
-
-            &:hover {
-                background-color: #494949;
-            }
+        .ip-table-body {
+            cursor: pointer;
+            height: 244px;
+            .ip-table-row:hover{
+                .ip-table-col {
+                  background-color: darken(@backgroundHighlight, 15%);
+                }
+              }
         }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "1.60.22",
+    "version": "1.61.0",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",

package/src/components/asset-details/AssetDetails.tsx

@@ -12,6 +12,7 @@ import SMPTEField from '../smpte-field/SMPTEField';
 
 interface IAssetDetailsProps {
     asset: any;
+    assetList: any;
     columns: number;
     newAsset: boolean;
     onNameChange(n: any): void;
@@ -23,6 +24,7 @@ interface IAssetDetailsProps {
 
 interface IAssetDetailsState {
     newTag: string;
+    tags: any;
 }
 
 class AssetDetails extends React.Component<IAssetDetailsProps, IAssetDetailsState> {
@@ -30,14 +32,40 @@ class AssetDetails extends React.Component<IAssetDetailsProps, IAssetDetailsStat
         super(p);
 
         this.state = {
-            newTag: ''
+            newTag: '',
+            tags: null
         };
     }
 
-    private renderTags() {
+    componentDidMount(): void {
+        this.setState({ tags: this.getTagsHandler() });
+    }
+
+    componentDidUpdate(): void {
+        const tags = this.getTagsHandler();
+        if (tags !== this.state.tags) {
+            this.setState({ tags });
+        }
+    }
+
+    private getTagsHandler() {
         const {
-            asset: { tags }
+            assetList: { assets },
+            asset,
+            asset: { id },
+            newAsset
         } = this.props;
+
+        let tags = assets.find((i) => i.id === id).tags;
+
+        if (newAsset) {
+            tags = asset.tags;
+        }
+        return tags;
+    }
+
+    private renderTags() {
+        const { tags } = this.state;
         const tagsArray = [...new Set(tags)];
         const tagsMarkup: JSX.Element[] = tagsArray.map((tag: string) => (
             <Tag
@@ -178,7 +206,8 @@ class AssetDetails extends React.Component<IAssetDetailsProps, IAssetDetailsStat
 
 const mapStateToProps = (state): any => {
     return {
-        assetTags: state.assetTags
+        assetTags: state.assetTags,
+        assetList: state.assetList
     };
 };
 

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

@@ -131,7 +131,7 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
     const doubleClickEnabled: boolean = typeof props.onRowDoubleClick === 'function';
 
     const initialTableState = {
-        sortBy: manualSortBy ? props.sortBy : [],
+        sortBy: props.sortBy ? props.sortBy : [],
         pageIndex: manualPagination ? props.currentPage - 1 : undefined,
         pageSize: props.itemsPerPage,
         autoResetExpanded: false
@@ -173,7 +173,7 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
             manualFilters: true, // always true
             disableMultiSorting: true, // always true
             autoResetExpanded: false,
-            disableSortRemove: manualSortBy,
+            disableSortRemove: true,
             pageCount: props.totalPages,
             pageSize: props.itemsPerPage
         },

package/src/components/header/Header.tsx

@@ -1,18 +1,24 @@
 import * as React from 'react';
-import ImposiumDropdown from '../dropdown/Dropdown';
+import ImposiumDropdown from '../dropdown/dropdown';
 import ServiceIcon from '../service-icon/ServiceIcon';
 import { string2HexCode, parameterizeServiceUrl } from '../../Util';
 import { ICON_CHEVRON_DOWN, ICON_CHEVRON_UP, ICON_HELP } from '../../constants/icons';
+import { connect } from 'react-redux';
+import axios, { AxiosResponse, AxiosError } from 'axios';
+import Spinner from '../spinner/Spinner';
+import _ from 'lodash';
+import DataTable from '../data-table/DataTable';
 
 export interface IHeaderProps {
     email?: string;
-    accessData: any;
     activeOrganization: string;
     activeStory?: string;
     hideStoryPicker?: boolean;
     onOrganizationChange?: (orgId: any) => any;
     onStoryChange?: (story: any) => any;
     logout: (...args) => any;
+    auth: any;
+    baseUrl: any;
 }
 
 export interface IHeaderState {
@@ -25,9 +31,13 @@ export interface IHeaderState {
     showServiceDropdown: boolean;
     dropdownToggleColor: string;
     activeFirstChar: string;
+    order: string;
+    orderDirection: string;
+    accessData: any;
+    dataLoading: boolean;
 }
 
-export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
+class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
     private static readonly DEFAULT_TITLE: string = 'imposium';
 
     private static readonly SERVICE_MESH_ALIAS: string = 'services';
@@ -44,8 +54,6 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
 
     private static readonly SDK_DOCS_LINK: string = 'https://docs.imposium.com/js-sdk/';
 
-    private static readonly DEFAULT_SERVICE_TOGGLE_COPY: string = 'stories';
-
     private static readonly DEFAULT_ACCOUNT_TOGGLE_COLOR: string = 'royalblue';
 
     private static readonly NO_STORIES_COPY: string = 'No stories were found';
@@ -66,6 +74,41 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
 
     private readonly orgsToggleRef: any = null;
 
+    private readonly COLUMNS: any[] = [
+        {
+            accessor: 'name',
+            Header: 'Name',
+            width: 75,
+            minWidth: 75,
+            maxWidth: 75,
+            disableSortBy: false
+        },
+        {
+            accessor: 'lastModified',
+            Header: 'Last Modified',
+            width: 45,
+            minWidth: 45,
+            maxWidth: 45,
+            disableSortBy: false
+        },
+        {
+            accessor: 'createdDate',
+            Header: 'Created Date',
+            width: 45,
+            minWidth: 45,
+            maxWidth: 45,
+            disableSortBy: false
+        },
+        {
+            accessor: 'lastModifiedBy',
+            Header: 'Last Modified By',
+            width: 50,
+            minWidth: 50,
+            maxWidth: 50,
+            disableSortBy: true
+        }
+    ];
+
     constructor(p: IHeaderProps) {
         super(p);
 
@@ -78,7 +121,11 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
             showStoriesDropdown: false,
             showServiceDropdown: false,
             dropdownToggleColor: ImposiumHeader.DEFAULT_ACCOUNT_TOGGLE_COLOR,
-            activeFirstChar: ''
+            activeFirstChar: '',
+            order: 'lastModified',
+            orderDirection: 'desc',
+            accessData: null,
+            dataLoading: true
         };
 
         this.serviceToggleRef = React.createRef();
@@ -87,33 +134,19 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
     }
 
     public componentDidMount = (): void => {
-        const { accessData, activeOrganization } = this.props;
-
-        if (accessData) {
-            this.parseAccessData(accessData, activeOrganization);
-        }
+        this.getAccessData();
     };
 
-    public componentDidUpdate = (prevProps: IHeaderProps): void => {
-        const { accessData: currAccess, activeOrganization: currActive } = this.props;
-        const { accessData: prevAccess, activeOrganization: prevActive } = prevProps;
-
-        if (currAccess && currAccess !== prevAccess) {
-            this.parseAccessData(currAccess, currActive);
-        }
-
-        if (
-            typeof currActive === 'string' &&
-            currActive.length === ImposiumHeader.UUID_LENGTH &&
-            currActive !== prevActive
-        ) {
-            this.parseAccessData(currAccess, currActive);
+    public componentDidUpdate(prevProps: Readonly<IHeaderProps>): void {
+        const { accessData } = this.state;
+        const { activeOrganization } = this.props;
+        if (activeOrganization !== prevProps.activeOrganization) {
+            this.parseAccessData(accessData, activeOrganization);
         }
-    };
+    }
 
     private parseAccessData = (accessData: any, activeOrganization: string): void => {
         const { organizations, services } = accessData;
-
         const activeOrganizationBlob: any = activeOrganization
             ? accessData.organizations.find((org) => org.id === activeOrganization)
             : undefined;
@@ -227,10 +260,34 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
         </div>
     );
 
-    public render() {
-        const { email, accessData, activeOrganization, activeStory, hideStoryPicker } = this.props;
+    private getAccessData = () => {
+        const {
+            auth: { idToken },
+            baseUrl,
+            activeOrganization
+        } = this.props;
+
+        const accessUrl = `${baseUrl}/access`;
+
+        this.setState({ dataLoading: true });
+        axios
+            .get(accessUrl, { headers: { Authorization: `Bearer ${idToken}` } })
+            .then((res: AxiosResponse) => {
+                if (res.data) {
+                    this.setState({ dataLoading: false, accessData: res.data }, () =>
+                        this.parseAccessData(res.data, activeOrganization)
+                    );
+                }
+            })
+            .catch((e: AxiosError) => {
+                console.error(e);
+            });
+    };
 
+    public render() {
+        const { email, activeOrganization, activeStory, hideStoryPicker } = this.props;
         const {
+            accessData,
             showAccountDropdown,
             servicesByOrganization,
             activeServiceBlob,
@@ -239,7 +296,10 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
             activeOrganizationBlob,
             activeFirstChar,
             dropdownToggleColor,
-            showServiceDropdown
+            showServiceDropdown,
+            order,
+            orderDirection,
+            dataLoading
         } = this.state;
 
         let currentStory: any;
@@ -250,9 +310,11 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
         let privateAnchors: JSX.Element[];
         let accountDropdownToggle: JSX.Element;
         let activePanel: JSX.Element;
-        let storyToggle: JSX.Element;
+        let storyToggle: JSX.Element = <Spinner />;
         let orgPicker: JSX.Element;
-        let storyMenuInner: JSX.Element;
+        let storyMenuInner: JSX.Element = (
+            <div className='no-stories-dialog'>{ImposiumHeader.NO_STORIES_COPY}</div>
+        );
         let serviceDropdownToggle: JSX.Element;
         let serviceDropdownMenu: JSX.Element;
 
@@ -370,37 +432,45 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
 
         if (accessData && activeOrganizationBlob && !hideStoryPicker) {
             currentStory = activeOrganizationBlob.stories.find((s: any) => s.id === activeStory);
-
             storyToggle = (
                 <button
                     id='btn-toggle-story'
                     className='btn-toggle-story'
                     ref={this.storyToggleRef}
                     onClick={() => {
-                        this.setState({ showStoriesDropdown: !this.state.showStoriesDropdown });
+                        this.setState({ showStoriesDropdown: !showStoriesDropdown }, () => {
+                            if (showStoriesDropdown === false) this.getAccessData();
+                        });
                     }}>
-                    <div className='story-name'>
-                        {currentStory
-                            ? currentStory.name
-                            : ImposiumHeader.DEFAULT_SERVICE_TOGGLE_COPY}
-                    </div>
+                    <div className='story-name'>{currentStory ? currentStory.name : ''}</div>
                     {this.renderDropdownChevron(showStoriesDropdown)}
                 </button>
             );
 
-            if (activeOrganizationBlob.stories.length === 0) {
+            if (activeOrganizationBlob.stories.length !== 0) {
+                const sortBy =
+                    order && orderDirection
+                        ? [{ id: order, desc: orderDirection === 'desc' }]
+                        : undefined;
+
+                const sortedStories = _.orderBy(
+                    activeOrganizationBlob.stories,
+                    ['lastModified'],
+                    ['desc']
+                );
+
                 storyMenuInner = (
-                    <div className='no-stories-dialog'>{ImposiumHeader.NO_STORIES_COPY}</div>
+                    <DataTable
+                        columns={this.COLUMNS}
+                        data={sortedStories}
+                        showInterstitial={dataLoading}
+                        sortBy={sortBy}
+                        noDataText={ImposiumHeader.NO_STORIES_COPY}
+                        itemsPerPage={activeOrganizationBlob.stories.length}
+                        hidePaginator={true}
+                        onRowClick={this.changeStory}
+                    />
                 );
-            } else {
-                storyMenuInner = activeOrganizationBlob.stories.map((s: any) => (
-                    <button
-                        key={s.id}
-                        className='btn-change-story'
-                        onClick={() => this.changeStory(s)}>
-                        {s.name}
-                    </button>
-                ));
             }
         }
 
@@ -499,3 +569,11 @@ export default class ImposiumHeader extends React.PureComponent<IHeaderProps, IH
         );
     }
 }
+
+const mapStateToProps = (state): any => {
+    return {
+        auth: state.auth
+    };
+};
+
+export default connect(mapStateToProps, null)(ImposiumHeader);