aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary')
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx29
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js35
2 files changed, 44 insertions, 20 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx
index 730ccb33f1..3d81aa5d5c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/ListButtons.jsx
@@ -15,19 +15,26 @@
*/
import React from 'react';
import {selectedButton} from '../LicenseModelOverviewConstants.js';
+import Tabs from 'sdc-ui/lib/react/Tabs.js';
+import Tab from 'sdc-ui/lib/react/Tab.js';
+import i18n from 'nfvo-utils/i18n/i18n.js';
-function ListButtons ({onTabSelect, selectedInUse}) {
+function ListButtons ({onTabSelect, selectedTab}) {
return (
- <div className='overview-buttons-section'>
- <div onClick={()=>onTabSelect(selectedButton.VLM_LIST_VIEW)}
- className={selectedInUse ? 'button-vlm-list-view vlm-list-icon selected' : 'button-vlm-list-view vlm-list-icon' }
- data-test-id='vlm-overview-vlmlist-tab'></div>
- <div onClick={()=>onTabSelect(selectedButton.NOT_IN_USE)}
- className={selectedInUse ? 'button-vlm-list-view entities-list-icon' : 'button-vlm-list-view entities-list-icon selected' }
- data-test-id='vlm-overview-orphans-tab' >
- </div>
-
- </div>
+ <Tabs
+ onTabClick={(tabId) => onTabSelect(tabId)}
+ activeTab={selectedTab}
+ className='overview-buttons-section'
+ type='header' >
+ <Tab
+ tabId={selectedButton.VLM_LIST_VIEW}
+ title={i18n('Connections List')}
+ data-test-id='vlm-overview-vlmlist-tab' />
+ <Tab
+ tabId={selectedButton.NOT_IN_USE}
+ title={i18n('Orphans List')}
+ data-test-id='vlm-overview-orphans-tab' />
+ </Tabs>
);
}
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
index 1d65ab9869..87559901b3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
@@ -13,9 +13,11 @@
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
-import React from 'react';
+import React, {Component} from 'react';
import {connect} from 'react-redux';
+import Tooltip from 'react-bootstrap/lib/Tooltip.js';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
import licenseModelOverviewActionHelper from '../licenseModelOverviewActionHelper.js';
import LicenseModelActionHelper from '../../LicenseModelActionHelper.js';
@@ -46,9 +48,7 @@ const mapActionsToProps = (dispatch) => {
};
};
-
-
-export class VendorDataView extends React.Component {
+export class VendorDataView extends Component {
render() {
let {data: {vendorName}, description, isReadOnlyMode} = this.props;
return (
@@ -62,13 +62,16 @@ export class VendorDataView extends React.Component {
);
}
+
renderDescription() {
let {data: {description}, onVendorDescriptionEdit, isReadOnlyMode} = this.props;
return (
- <div onClick={() => {if (!isReadOnlyMode) {onVendorDescriptionEdit(description);}}} className={!isReadOnlyMode ? 'vendor-description' : 'vendor-description-readonly'}>
- <div className='description-data' data-test-id='vlm-summary-vendor-description'>
- {description}
- </div>
+ <div onClick={() => {if (!isReadOnlyMode) {onVendorDescriptionEdit(description);}}} className={!isReadOnlyMode ? 'vendor-description' : 'vendor-description-readonly'}>
+ {this.renderOverlay(
+ <div className='description-data' data-test-id='vlm-summary-vendor-description'>
+ {description}
+ </div>
+ )}
</div>
);
}
@@ -80,7 +83,21 @@ export class VendorDataView extends React.Component {
);
}
+ renderOverlay(children) {
+ let {data: {description}, isReadOnlyMode} = this.props;
+ if (isReadOnlyMode) {
+ return (
+ <OverlayTrigger
+ placement='bottom'
+ overlay={<Tooltip className='vendor-description-tooltip' id='tooltip-bottom'>{description}</Tooltip>}
+ delayShow={400}>
+ {children}
+ </OverlayTrigger>
+ );
+ }
+ return children;
+ }
+
}
export default connect(mapStateToProps, mapActionsToProps)(VendorDataView);
-