summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx')
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx201
1 files changed, 132 insertions, 69 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
index f8417fafbf..7f7af8130f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
@@ -22,81 +22,144 @@ import Button from 'sdc-ui/lib/react/Button.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import featureToggle from 'sdc-app/features/featureToggle.js';
-const DepricateButton = ({depricateAction, title}) => (
- <div className='depricate-btn-wrapper'>
- <Button data-test-id='depricate-action-btn' className='depricate-btn' onClick={depricateAction}>{title}</Button>
- </div>
+const DepricateButton = ({ depricateAction, title }) => (
+ <div className="depricate-btn-wrapper">
+ <Button
+ data-test-id="depricate-action-btn"
+ className="depricate-btn"
+ onClick={depricateAction}>
+ {title}
+ </Button>
+ </div>
);
-const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')(DepricateButton);
+const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')(DepricateButton);
-const VersionPageTitle = ({itemName, depricatedTitle, isArchived, onRestore, onArchive}) => {
- return (
- <div className='version-page-header'>
- <div className='versions-page-title'>{`${i18n('Available Versions')} - ${itemName} ${depricatedTitle}`}</div>
- <FeatureDepricatedButton depricateAction={isArchived ? () => onRestore() : () => onArchive() } title={i18n(isArchived ? 'RESTORE' : 'ARCHIVE')}/>
- </div>
- );
+const VersionPageTitle = ({
+ itemName,
+ depricatedTitle,
+ isArchived,
+ onRestore,
+ onArchive
+}) => {
+ return (
+ <div className="version-page-header">
+ <div className="versions-page-title">{`${i18n(
+ 'Available Versions'
+ )} - ${itemName} ${depricatedTitle}`}</div>
+ <FeatureDepricatedButton
+ depricateAction={
+ isArchived ? () => onRestore() : () => onArchive()
+ }
+ title={i18n(isArchived ? 'RESTORE' : 'ARCHIVE')}
+ />
+ </div>
+ );
};
class VersionsPage extends React.Component {
- state = {
- showExpanded : false
- }
- render() {
- let { versions, owner, contributors, currentUser, isCollaborator, itemName = '', viewers, onSelectVersion, onNavigateToVersion,
- onTreeFullScreen, onManagePermissions, onCreateVersion, selectedVersion, onModalNodeClick, isManual, isArchived, onArchive, onRestore} = this.props;
- const depricatedTitle = isArchived ? i18n('(Archived)') : '';
- return (
- <div className='versions-page-view'>
- <VersionPageTitle
- itemName={itemName}
- depricatedTitle={depricatedTitle}
- onArchive={onArchive}
- isArchived={isArchived}
- onRestore={onRestore}/>
- <PermissionsView
- owner={owner}
- contributors={contributors}
- viewers={viewers}
- currentUser={currentUser}
- isManual={isManual}
- onManagePermissions={onManagePermissions}/>
- <div className='versions-page-list-and-tree'>
- <div className='version-tree-wrapper'>
- <div className='version-tree-title-container'>
- <div className='version-tree-title'>{i18n('Version Tree')}</div>
- {this.state.showExpanded && <SVGIcon name='expand' className='version-tree-full-screen' onClick={() => onTreeFullScreen({
- name: 'versions-tree-popup',
- width: 798,
- height: 500,
- nodes: versions.map(version => ({id: version.id, name: version.name, parent: version.baseId || ''})),
- onNodeClick: (version) => onModalNodeClick({version}),
- selectedNodeId: selectedVersion,
- scrollable: true,
- toWiden: true
- })} />}
- </div>
- <Tree
- name={'versions-tree'}
- width={200}
- allowScaleWidth={false}
- nodes={versions.map(version => ({id: version.id, name: version.name, parent: version.baseId || ''}))}
- onNodeClick={version => onSelectVersion({version})}
- onRenderedBeyondWidth={() => {this.setState({showExpanded : true});}}
- selectedNodeId={selectedVersion}/>
- </div>
- <VersionList
- versions={versions}
- onSelectVersion={onSelectVersion}
- onNavigateToVersion={onNavigateToVersion}
- onCreateVersion={isArchived ? false : onCreateVersion}
- selectedVersion={selectedVersion}
- isCollaborator={isCollaborator} />
- </div>
- </div>
- );
- }
+ state = {
+ showExpanded: false
+ };
+ render() {
+ let {
+ versions,
+ owner,
+ contributors,
+ currentUser,
+ isCollaborator,
+ itemName = '',
+ viewers,
+ onSelectVersion,
+ onNavigateToVersion,
+ onTreeFullScreen,
+ onManagePermissions,
+ onCreateVersion,
+ selectedVersion,
+ onModalNodeClick,
+ isManual,
+ isArchived,
+ onArchive,
+ onRestore
+ } = this.props;
+ const depricatedTitle = isArchived ? i18n('(Archived)') : '';
+ return (
+ <div className="versions-page-view">
+ <VersionPageTitle
+ itemName={itemName}
+ depricatedTitle={depricatedTitle}
+ onArchive={onArchive}
+ isArchived={isArchived}
+ onRestore={onRestore}
+ />
+ <PermissionsView
+ owner={owner}
+ contributors={contributors}
+ viewers={viewers}
+ currentUser={currentUser}
+ isManual={isManual}
+ onManagePermissions={onManagePermissions}
+ />
+ <div className="versions-page-list-and-tree">
+ <div className="version-tree-wrapper">
+ <div className="version-tree-title-container">
+ <div className="version-tree-title">
+ {i18n('Version Tree')}
+ </div>
+ {this.state.showExpanded && (
+ <SVGIcon
+ name="expand"
+ className="version-tree-full-screen"
+ onClick={() =>
+ onTreeFullScreen({
+ name: 'versions-tree-popup',
+ width: 798,
+ height: 500,
+ nodes: versions.map(version => ({
+ id: version.id,
+ name: version.name,
+ parent: version.baseId || ''
+ })),
+ onNodeClick: version =>
+ onModalNodeClick({ version }),
+ selectedNodeId: selectedVersion,
+ scrollable: true,
+ toWiden: true
+ })
+ }
+ />
+ )}
+ </div>
+ <Tree
+ name={'versions-tree'}
+ width={200}
+ allowScaleWidth={false}
+ nodes={versions.map(version => ({
+ id: version.id,
+ name: version.name,
+ parent: version.baseId || ''
+ }))}
+ onNodeClick={version =>
+ onSelectVersion({ version })
+ }
+ onRenderedBeyondWidth={() => {
+ this.setState({ showExpanded: true });
+ }}
+ selectedNodeId={selectedVersion}
+ />
+ </div>
+ <VersionList
+ versions={versions}
+ onSelectVersion={onSelectVersion}
+ onNavigateToVersion={onNavigateToVersion}
+ onCreateVersion={isArchived ? false : onCreateVersion}
+ selectedVersion={selectedVersion}
+ isCollaborator={isCollaborator}
+ />
+ </div>
+ </div>
+ );
+ }
}
export default VersionsPage;