diff options
Diffstat (limited to 'openecomp-ui')
71 files changed, 808 insertions, 644 deletions
diff --git a/openecomp-ui/package.json b/openecomp-ui/package.json index ef44bfb2b8..f18dd75329 100644 --- a/openecomp-ui/package.json +++ b/openecomp-ui/package.json @@ -18,7 +18,7 @@ "storyshots": "jest storyshots.test.js", "build-storybook": "build-storybook -c .storybook -o .storybook-dist && gulp copy-storybook-fonts && gulp copy-storybook-resources-prod" }, - "dependencies": { + "dependencies": { "classnames": "^2.2.5", "core-js": "^2.4.0", "d3": "^3.5.16", @@ -40,7 +40,7 @@ "react-sortable": "^1.2.0", "redux": "^3.3.1", "restful-js": "^0.7.0", - "sdc-ui": "1.6.0", + "sdc-ui": "1.6.2", "uuid-js": "^0.7.5", "validator": "^4.3.0" }, @@ -110,6 +110,7 @@ "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test-utils/fileMock.js", "\\.(css|scss)$": "<rootDir>/test-utils/styleMock.js", "^nfvo-utils/RestAPIUtil.js$": "<rootDir>/test-utils/MockRest.js", + "^sdc-ui/lib/react/SVGIcon.js$": "<rootDir>/test-utils/MockSVGIcon.js", "^nfvo-utils(.*)$": "<rootDir>/src/nfvo-utils$1", "^nfvo-components(.*)$": "<rootDir>/src/nfvo-components$1", "^sdc-app(.*)$": "<rootDir>/src/sdc-app$1", diff --git a/openecomp-ui/pom.xml b/openecomp-ui/pom.xml index 0e98b7c9c3..77313092c6 100644 --- a/openecomp-ui/pom.xml +++ b/openecomp-ui/pom.xml @@ -56,11 +56,11 @@ <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.4</version> - + <configuration> <installDirectory>${project.parent.parent.basedir}</installDirectory> - </configuration> - + </configuration> + <executions> <execution> @@ -73,7 +73,7 @@ <npmVersion>3.10.10</npmVersion> </configuration> </execution> - + <execution> <id>npm set progress off</id> <goals> @@ -83,7 +83,7 @@ <arguments>set progress=false</arguments> </configuration> </execution> - + <execution> <id>npm install in dox-sequence-diagram-ui</id> <goals> @@ -94,7 +94,7 @@ <arguments>install</arguments> </configuration> </execution> - + <execution> <id>npm install</id> <goals> @@ -104,14 +104,14 @@ <arguments>install</arguments> </configuration> </execution> - + <execution> <id>npm run build</id> <goals> <goal>npm</goal> </goals> <configuration> - <arguments>run build -- --version=${version}</arguments> + <arguments>run build</arguments> </configuration> </execution> </executions> diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss index c70b914187..7c726aa8dd 100644 --- a/openecomp-ui/resources/scss/_components.scss +++ b/openecomp-ui/resources/scss/_components.scss @@ -16,7 +16,6 @@ @import "components/submitErrorResponse"; @import "components/expandableInput"; @import "components/grid"; -@import "components/icon"; @import "components/activityLog"; @import "components/selectActionTable"; @import "components/datepicker"; diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss index 2162b0b1b0..3a3178c6b0 100644 --- a/openecomp-ui/resources/scss/common/_variables.scss +++ b/openecomp-ui/resources/scss/common/_variables.scss @@ -47,14 +47,23 @@ $desktop-min-width: 1824px; /* Textures */ $images-folder-name: "../images"; +/* +$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg"; +$interface-icon: $images-folder-name + "/interface.svg"; +$sdc-logo: $images-folder-name + "/logo.svg"; +$warning-icon: $images-folder-name + "/warning.svg"; +*/ /* Icons */ $icons-folder: "../images/icons"; -$artifacts-icon: $images-folder-name + "/artifacts_icon.png"; -$check-icon: $images-folder-name + "/v_icon.png"; -$base-module-icon: $images-folder-name + "/base_icon.png"; -$module-icon: $images-folder-name + "/module_icon.png"; +/* +$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg"; +$interface-icon: $images-folder-name + "/interface.svg"; +$sdc-logo: $images-folder-name + "/logo.svg"; +$warning-icon: $images-folder-name + "/warning.svg"; +*/ $pencil-icon: $images-folder-name + "/pencil_icon-01.svg"; +/* $vc-check-in-icon: $icons-folder + "/checked_in.png"; $vc-checkout-icon: $icons-folder + "/checked_out.png"; $vc-revert-icon: $icons-folder + "/reverticon.png"; @@ -66,11 +75,12 @@ $vc-submit-disabled-icon: $icons-folder + "/submit_icon_disable.png"; $trash-icon: $images-folder-name + "/trash_icon.png"; $download-icon: $images-folder-name + "/download_icon.png"; $upload-icon: $images-folder-name + "/upload_icon.png"; +*/ - -/* catalog icons */ +/***** +// catalog icons $back-icon: $icons-folder + "/back_icon.png"; -/* validation icons */ +// validation icons $artifacts-selected-icon: $icons-folder + "/artifacts_blue_icon.png"; $artifacts-regular-icon: $icons-folder + "/artifacts_grey_icon.png"; $chevron_down: $icons-folder + "/down_chevron.png"; @@ -93,7 +103,7 @@ $heat-selected-icon: $icons-folder + "/nested_HEAT_icon_blue.png"; $env-icon: $icons-folder + "/env_icon.png"; $env-selected-icon: $icons-folder + "/env_icon_blue.png"; -/* vlm summary icons */ +// vlm summary icons $vlm-summary-plus-blue: $icons-folder + "/plus_vlm_summary_icon_blue.png"; $vlm-summary-plus: $icons-folder + "/plus_vlm_summary_icon.png"; @@ -102,4 +112,5 @@ $vlm-summary-orphans: $icons-folder + "/orphans_grey_icon.png"; $vlm-summary-orphans-blue: $icons-folder + "/orphans_blue_icon-n.png"; $vlm-summary-used: $icons-folder + "/vlm_list_view_grey_icon.png"; $vlm-summary-used-blue: $icons-folder + "/vlm_list_view_blue_icon.png"; +*****/ diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss index 9ada804934..5e9418ed7d 100644 --- a/openecomp-ui/resources/scss/components/_activityLog.scss +++ b/openecomp-ui/resources/scss/components/_activityLog.scss @@ -39,11 +39,7 @@ $message-info-icon-size: 16px; .svg-icon-wrapper { float: right; } - .checkCircle { - fill: $green; - width: 16px; - height: 16px; - } + .status-icon.false:after { @include status-icon-class; float: right; diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss index 52b72d7c91..2484a73e8a 100644 --- a/openecomp-ui/resources/scss/components/_expandableInput.scss +++ b/openecomp-ui/resources/scss/components/_expandableInput.scss @@ -1,24 +1,21 @@ .expandable-input-top { display: flex; height: 22px; - .svg-icon-wrapper { - height: 17px; - width: 17px; - } .expandable-input-wrapper { display: flex; - .svg-icon.search { - height: 17px; - width: 17px; - } &.closed { - .svg-icon.search { - transition: fill 0.5s ease-in; - fill: $blue; - cursor: pointer; - &:hover { + .svg-icon + { + &.__search { + height: 17px; + width: 17px; transition: fill 0.5s ease-in; - fill: $dark-blue; + fill: $blue; + cursor: pointer; + &:hover { + transition: fill 0.5s ease-in; + fill: $dark-blue; + } } } } @@ -26,17 +23,21 @@ .svg-icon-wrapper { margin-left: 3px; } - .svg-icon.search { - fill: $dark-blue; + .svg-icon { + &.__search { + height: 17px; + width: 17px; + fill: $dark-blue; + } } - .svg-icon.close { - margin-left: 7px; - height: 10px; - width: 10px; - opacity: 0.6; - fill: $dark-gray; - &:hover { - opacity: 1; + .svg-icon { + &.__close { + margin-left: 7px; + opacity: 0.6; + fill: $dark-gray; + &:hover { + opacity: 1; + } } } } diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss index 79a5432ef1..fa8eb3110c 100644 --- a/openecomp-ui/resources/scss/components/_selectActionTable.scss +++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss @@ -1,15 +1,13 @@ .select-action-table-view { .svg-icon-wrapper { flex-direction: row; - - &::before { - content:""; - } .svg-icon { - margin-left: 5px; - margin-right: 5px; - width:16px; - height:16px; + &:not(.__plus) { + margin-left: 5px; + margin-right: 5px; + width:16px; + height:16px; + } } } .dummy-icon { @@ -57,21 +55,6 @@ display: flex; flex-direction: row; margin-bottom: 14px; - .svg-icon-wrapper.trashO { - .svg-icon { - fill: $dark-gray; - } - } - .svg-icon-wrapper.errorCircle { - .svg-icon { - fill: $red; - } - } - .svg-icon-wrapper.checkCircle { - .svg-icon { - fill: $green; - } - } .svg-icon-wrapper.hideDelete { .svg-icon { fill: $white; diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss index b917dfefeb..f045038193 100644 --- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss +++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss @@ -26,14 +26,19 @@ background-color: $tlv-gray; padding: 5px; cursor: pointer; - .chevronDown { - width:10px; - height:10px; - margin-right: 10px; - &.right { - transform: rotate(270deg); + .svg-icon { + &.__chevronDown { + margin-right: 10px; } } + .collapse-right { + .svg-icon { + &.__chevronDown { + transform: rotate(270deg); + } + } + + } } .error-code-list-item { diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss index e4aac32b74..e1adb5650f 100644 --- a/openecomp-ui/resources/scss/components/_validationForm.scss +++ b/openecomp-ui/resources/scss/components/_validationForm.scss @@ -75,7 +75,7 @@ form { flex: 0.2; content: ' '; } - @media (min-width: 1349px) { + @media (min-width: 1389px) { &.add-line-break { .control-label { &:after { diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss index b454d3496b..57610986c3 100644 --- a/openecomp-ui/resources/scss/components/_versionController.scss +++ b/openecomp-ui/resources/scss/components/_versionController.scss @@ -59,56 +59,33 @@ margin-right: 20px; padding-bottom: 5px; - .versionControllerLockClosed { + + .svg-icon { fill: $dark-gray; - width: 21px; - height: 23px; - margin-top: -3px; - &.disabled { - fill: $light-gray; - } &:hover { fill: $black; } - } - .versionControllerLockOpen { - fill: $dark-gray; - width: 24px; - height: 28px; - margin-top: -6px; - &:hover { - fill: $black; + &.__versionControllerLockClosed { + margin-top: -3px; } - } - .versionControllerSubmit { - fill: $blue; - &.disabled { - fill: $light-gray; + &.__versionControllerLockOpen { + margin-top: -6px; } - &:hover { - fill: $dark-blue; + &.__versionControllerSubmit { + fill: $blue; + &:hover { + fill: $dark-blue; + } + &.disabled { + fill: $dark-gray; + } } } - - .versionControllerRevert { - fill: $dark-gray; - &.disabled { - fill: $light-gray; - } - &:hover { - fill: $black; - } - } - .versionControllerSave { - fill: $dark-gray; - &.disabled { - fill: $light-gray; - } - &:hover { - fill: $black; - } } - } + + + + } .vc-nav-item-close { display: flex; diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss index 9d395f98c8..5f98ed2c05 100644 --- a/openecomp-ui/resources/scss/modules/_featureGroup.scss +++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss @@ -1,23 +1,37 @@ .feature-groups-list-editor { - .list-editor-view-list { - .list-editor-item-view { - min-height: 110px; - height: 110px; - } - .list-editor-item-view-field { - .feature-groups-count-field { - display: inline-block; - &:first-child { - margin-right: 95px; - } - } - .feature-groups-count-ep { - @extend .heading-1; - color: $light-blue; + .list-editor-view{ + .list-editor-view-list { + .list-editor-item-view { + min-height: 110px; + height: 110px; } - .feature-groups-count-lk { - @extend .heading-1; - color: $light-green; + .list-editor-item-view-content { + .list-editor-item-view-field { + &.smaller-field { + flex: 0.35; + } + .feature-groups-count-field { + display: inline-block; + &:first-child { + margin-right: 95px; + } + } + .feature-groups-count-ep { + @extend .heading-1; + color: $light-blue; + } + .feature-groups-mrn-ep { + @extend .body-1; + color: $light-blue; + } + .feature-groups-count-lk { + @extend .heading-1; + color: $light-green; + } + .title-no-wrap { + white-space: nowrap; + } + } } } } @@ -39,7 +53,7 @@ .nav.nav-tabs { padding-left: 50px; } - + .tab-content { padding: 50px; .field-section { diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss index 1c133a1dce..15bb9a7033 100644 --- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss +++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss @@ -61,26 +61,34 @@ $lkg-ep-color: $light-blue; &:not(.read-only) .vendor-description { border: 1px solid transparent; + width: 100%; padding: 2px 0 2px 6px; margin-top: 10px; - + position: relative; + .svg-icon-wrapper { + position: absolute;; + right:0; + top:0; + opacity: 0; + } $hover-padding-right: 16px; @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover &:hover { padding-right: $hover-padding-right; - width: 100%; border: 1px solid $light-gray; cursor: pointer; - background-position: calc(100% - 4px) 4px; - background-size: 14px; - background-image: url($pencil-icon); - background-repeat: no-repeat; - background-color: white; - + background-color: $white; + .svg-icon-wrapper { + opacity: 1; + z-index: 10; + } .description-data:after { background: white; } + .description-data { + width: 100%; + } } } @@ -167,20 +175,23 @@ $lkg-ep-color: $light-blue; flex-grow: 2; margin-left: 5px; } - .add-button { - cursor: pointer; - font-size: larger; - background-image: url($vlm-summary-plus); - background-size: 20px; - background-repeat: no-repeat; - width:20px; - height:20px; - margin-top: 3px; - margin-left: auto; - &:hover { - cursor: pointer; - background-image: url($vlm-summary-plus-blue); - } + .summary-name-and-count { + width: 100%; + } + .svg-icon-wrapper { + + .svg-icon { + &.__plusCircle { + width: 20px; + height: 20px; + margin-top: 3px; + margin-left: auto; + fill: $dark-gray; + &:hover { + fill: $blue; + } + } + } } .summary-name-and-count { @@ -205,7 +216,7 @@ $lkg-ep-color: $light-blue; } } .vlm-list-tab-panel { - + @extend .flex; margin-bottom: 7px; .section-title { @@ -221,6 +232,7 @@ $lkg-ep-color: $light-blue; margin-left:10px; cursor: pointer; } + /** .vlm-list-icon { background-size: 32px; background-repeat: no-repeat; @@ -237,7 +249,7 @@ $lkg-ep-color: $light-blue; background-image: url($vlm-summary-orphans-blue); } } - + **/ } } @@ -260,7 +272,7 @@ $lkg-ep-color: $light-blue; .vlm-list-item.orphan-list-item { @include overview-tile-shadow(); margin-left: 0; - + .vlm-list-item-title { .item-name { @@ -304,7 +316,7 @@ $lkg-ep-color: $light-blue; .clickable { cursor: pointer; } - + .list-item-section { .count-value { @extend .body-3; @@ -365,7 +377,7 @@ $lkg-ep-color: $light-blue; } .arrow-icon { align-self: center; - + } .vlm-item-info { flex: 1; @@ -424,7 +436,7 @@ $lkg-ep-color: $light-blue; @include create-circle($circle-icon-size,$fg-color,'FG'); color: $white; } - + .vlm-list-item-title { .item-name { color: $fg-color; @@ -465,7 +477,7 @@ $lkg-ep-color: $light-blue; margin-left: 52px; } } - + } &.vlm-list-item-lkg { margin-top: 10px; diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss index bab2872691..0e092dd8bb 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss @@ -22,20 +22,7 @@ right: 40px; top: 15px; display: flex; - .icon-label { - color: $dark-gray; - } - .go-to-overview-icon { - .icon-label { - color: $blue; - } - &.disabled { - .icon-label { - color: $gray; - } - } - } .icon-component { margin-right: 30px; @@ -104,6 +91,11 @@ z-index: 1; padding-right: 20px; .counter { + .svg-icon { + &.__exclamationTriangleLine { + fill :$orange; + } + } display: flex; &:first-child { margin-right: 20px; @@ -145,8 +137,8 @@ justify-content: space-between; height: 40px; align-items: center; - .svg-icon-wrapper.chevronDown, .svg-icon-wrapper.chevronUp { - .svg-icon { + .svg-icon { + &.__chevronUp, &.__chevronDown { height: 10px; width: 10px; } @@ -224,6 +216,13 @@ .error-item { display: flex; margin: 10px 0; + .large { + .svg-icon { + width: 20px; + height: 20px; + fill: $orange; + } + } .error-item-file-type { margin-left: 15px; } @@ -231,6 +230,9 @@ @extend .body-1-semibold; margin-right: 5px; } + + + } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss index 068404fcb6..dad837f356 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss @@ -16,6 +16,12 @@ } } +.vsp-components-image-editor { + .note-text { + color: $red; + } +} + .image-modal-edit, .image-modal-new { .modal-body { padding: 0; diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss index 56860101b2..9b0375d24a 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss @@ -28,21 +28,19 @@ .missing-license { display: flex; align-items: baseline; - .svg-icon-wrapper.exclamationTriangleFull .svg-icon{ - fill: $orange; + .svg-icon{ + margin-right: 7px; + margin-left: 3px; + &.__exclamationTriangleFull { + fill: $orange; + width: 17px; + height: 17px; + } } .warning-text { position: relative; top: -2px; } - .svg-icon-wrapper { - margin-right: 7px; - margin-left: 3px; - .svg-icon { - height: 17px; - width: 17px; - } - } } } .name { diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss index ceae4a00de..d1f3f488bd 100644 --- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss +++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss @@ -1,13 +1,7 @@ .vsp-components-load-balancing { .svg-icon-wrapper { position: relative; - top: -3px; - &.chevronUp, &.chevronDown { - .svg-icon { - width: 10px; - height: 10px; - } - } + top: -4px; } .halb-data { diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss index 4bcf7940eb..bda8512f36 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss @@ -1,6 +1,6 @@ .vsp-component-monitoring { - .snmp-dropzone { + .dropzone { .section-title { padding-bottom: 20px; } @@ -22,7 +22,7 @@ } .drag-text { color: $blue; - @extend .body-1-semibold; + @extend .body-1-semibold } .or-text { margin-top: 10px; @@ -30,6 +30,20 @@ } } + .monitoring-file { + display: flex; + .filename { + opacity: 1; + width: auto; + border-right-style: none; + } + .delete { + display: flex; + width: 30px; + justify-content: center; + align-items: center; + } + } } .delete-button { diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss index 75d96b4c85..bd216c794b 100644 --- a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss +++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss @@ -24,10 +24,12 @@ position: relative; top: -2px; } + .modules-list-wrapper { - padding-bottom: 20px; - margin-bottom: 20px; - border-bottom: 1px solid $tlv-light-gray; + &.modules-list-wrapper-divider { + border-bottom: 1px solid $tlv-light-gray; + } + ul { .undefined-dragging { opacity: 0.5; @@ -36,7 +38,7 @@ display: flex; justify-content: space-between; flex-wrap: wrap; - + padding-bottom: 3px; .Select-value-label { @include ellipsis(85%); } @@ -55,24 +57,6 @@ } } - .modules-list-controllers { - text-align: right; - .btn-link { - &[disabled] { - color: $gray; - } - @extend .body-1; - color: $blue; - &:last-child { - padding-right: 0; - } - &:hover { - color: $dark-blue; - text-decoration: none; - } - } - } - .modules-list-item-controllers { display: flex; justify-content: space-between; @@ -82,16 +66,15 @@ min-width: 0; } - .svg-icon-wrapper.trashO { - .svg-icon { - fill: $dark-gray; - height: 18px; - width: 18px; - &:hover { - fill: $black; + .svg-icon { + &.__trashO { + fill: $dark-gray; + &:hover { + fill: $black; + } } - } } + .module-title-by-type { @extend .heading-5-semibold; margin-right: 3px; @@ -100,15 +83,15 @@ display: flex; align-items: center; - .svg-icon-wrapper.pencil { - .svg-icon { - height: 15px; - width: 15px; + .svg-icon { + &.__pencil { + margin-left: 3px; + opacity: 0; } - margin-left: 3px; - opacity: 0; } + + .filename-text { @extend .heading-5-semibold; @@ -144,14 +127,16 @@ border-color: transparent; } } - .svg-icon-wrapper.pencil { - margin-left: 10px; - opacity: 1; - .svg-icon { - stroke: $dark-gray; - &:hover { - stroke: $black; - } + .svg-icon { + &.__pencil { + margin-left: 10px; + opacity: 1; + .svg-icon { + stroke: $dark-gray; + &:hover { + stroke: $black; + } + } } } } @@ -173,23 +158,8 @@ } } .add-or-delete-volumes { - .svg-icon-wrapper { - margin-right: 8px; - .svg-icon { - height: 10px; - width: 10px; - fill: $blue; - } - } - cursor: pointer; - color: $blue; + margin-right: 8px; margin-bottom: 11px; - &:hover { - color: $dark-blue; - .svg-icon { - fill: $dark-blue; - } - } } &:before { content: "\00B7\00B7\00B7\00B7\00B7\00B7"; @@ -208,7 +178,9 @@ .artifact-files { @include modules-and-artifacts-list-items; - margin-top: 20px; + &.with-list-items { + margin-top: 10px; + } &.nested { .nested-list { @@ -238,21 +210,20 @@ display: flex; } - .add-all-unassigned { - @extend .body-1; - margin-bottom: 0; - color: $blue; - cursor: pointer; - &:hover { - color: $dark-blue; - } - } } } } + .modules-list-header { + height: 30px; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-end; + align-items: baseline; + } + .unassigned-files { - margin-top: 30px; border: 1px solid $light-gray; background-color: $white; height: 250px; @@ -283,26 +254,12 @@ @extend .heading-4; margin-bottom: 10px; } - .link { - color: $blue; - cursor: pointer; - display: flex; - align-items: center; + .svg-icon-wrapper { margin-bottom: 10px; - .svg-icon-wrapper.angleRight { - .svg-icon { - height: 10px; - width: 10px; - margin-left: 7px; - fill: $blue; - } - } - &:hover { - color: $dark-blue; - .svg-icon-wrapper.angleRight { - .svg-icon { - fill: $dark-blue; - } + .svg-icon { + &.__angleRight { + width: 10px; + height: 10px; } } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss index 87a852f755..612ec495cd 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss @@ -79,36 +79,22 @@ width: 58px; margin-left: 122px; background-repeat: no-repeat; - .svg-icon-wrapper { - &.vendor { - .svg-icon { + .svg-icon { + &.__vendor { fill: $dark-gray; - width: 53px; - height: 47px; &:hover { fill: $dark-gray; } - } margin-top: 22px; - } - &.vsp { - .svg-icon { + &.__vsp { fill: $light-blue; - width: 60px; - height: 40px; } margin-top: 18px; margin-left: 3px; - } - &.vlm { + &.__vlm { margin-top: 18px; - .svg-icon { fill: $purple; - - width: 45px; - height: 53px; - } } } } @@ -121,13 +107,11 @@ margin-top: 2px; padding-bottom: 3px; @extend .body-2-semibold; - .svg-icon-wrapper { - &.plus { - .svg-icon { - height: 9px; - width: 9px; + .svg-icon { + &.__plus { + width: 20px; + height: 20px; fill: $blue; - } } } .catalog-tile-item-details { @@ -136,6 +120,13 @@ .catalog-tile-add-new-vsp { color: $blue; + .svg-icon { + &.__plus { + width: 20px; + height: 20px; + + } + } margin-left: 40px; } .catalog-tile-locking-user-name { @@ -143,18 +134,12 @@ @include ellipsis(auto, inline-block, 180px); } .catalog-tile-check-in-status { - .svg-icon-wrapper { - &.locked { - .svg-icon { - width: 11px; + .svg-icon { + &.__locked { fill: $gray; - } } - &.unlocked { - .svg-icon { - width: 11px; + &.__unlocked { fill: $gray; - } } } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss index aa3cf04c4f..d17dcdd685 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss @@ -37,12 +37,14 @@ } } .create-item-plus-icon{ - width: 19px; - height: 19px; - margin: -5px 12px 0 0; - .svg-icon.plus { - height: 19px; - width: 19px; + margin: -5px 12px 0 0; + height: 19px; + width: 19px; + .svg-icon { + &.__plus { + width: 19px; + height: 19px; + } } } &.vlm-type { diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss index b49a7cb423..94dc223be3 100644 --- a/openecomp-ui/resources/scss/onboarding.scss +++ b/openecomp-ui/resources/scss/onboarding.scss @@ -23,14 +23,14 @@ div[data-reactroot].customized-date-picker-calendar { width: 12px; height: 12px; margin-top: 2px; - content: url(../images/angle-left.svg); + content: url(../../node_modules/sdc-ui/assets/icons/angleLeft.svg); } .react-datepicker__navigation--next { border: none; width: 12px; height: 12px; margin-top: 2px; - content: url(../images/angle-right.svg); + content: url(../../node_modules/sdc-ui/assets/icons/angleRight.svg); } .react-datepicker__month-container { .react-datepicker__header { diff --git a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx index 5fe592a663..1488c6c0bb 100644 --- a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx +++ b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx @@ -17,7 +17,6 @@ import React, {Component} from 'react'; import ListGroupItem from 'react-bootstrap/lib/ListGroupItem.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; -import Icon from 'nfvo-components/icon/Icon.jsx'; import {Collapse} from 'react-bootstrap'; /** * parsing and showing the following Java Response object @@ -145,8 +144,7 @@ class ErrorBlock extends React.Component { const ErrorHeader = ({errorType, collapsed, onClick}) => { return( <div onClick={onClick} className='error-block-header'> - <SVGIcon iconClassName={collapsed ? '' : 'right' } name='chevronDown'/> - {errorType} + <SVGIcon iconClassName={collapsed ? '' : 'collapse-right' } name='chevronDown' label={errorType} labelPosition='right'/> </div> ); }; @@ -154,7 +152,7 @@ const ErrorHeader = ({errorType, collapsed, onClick}) => { const ErrorMessage = ({error, warning}) => { return ( <ListGroupItem className='error-code-list-item'> - <Icon image={warning ? 'warning' : 'error'} label={error}/> + <SVGIcon name={warning ? 'warning' : 'error'} label={error} labelPosition='right' color={warning ? 'warning' : 'negative'} labelClassName='icon-label'/> </ListGroupItem> ); }; diff --git a/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx b/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx new file mode 100644 index 0000000000..629b9449a2 --- /dev/null +++ b/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx @@ -0,0 +1,46 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ +/** + * The HTML structure here is aligned with bootstrap HTML structure for form elements. + * In this way we have proper styling and it is aligned with other form elements on screen. + * + * Select and MultiSelect options: + * + * label - the label to be shown which paired with the input + * + * all other "react-select" props - as documented on + * http://jedwatson.github.io/react-select/ + * or + * https://github.com/JedWatson/react-select + */ +import React, {Component} from 'react'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +import Button from 'sdc-ui/lib/react/Button.js'; + +class DraggableUploadFileBox extends Component { + render() { + let {className, onClick, dataTestId, isReadOnlyMode} = this.props; + return ( + <div + className={`${className}${isReadOnlyMode ? ' disabled' : ''}`}> + <div className={`${'drag-text'}${isReadOnlyMode ? ' disabled' : ''}`}>{i18n('Drag & drop for upload')}</div> + <div className='or-text'>{i18n('or')}</div> + <Button type='button' data-test-id={dataTestId} btnType='outline' onClick={onClick} disabled={isReadOnlyMode === true}>{i18n('Select File')}</Button> + </div> + ); + } +} +export default DraggableUploadFileBox; diff --git a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx index 7bbafa3696..23af72a26a 100644 --- a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx +++ b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx @@ -41,6 +41,7 @@ class ToggleInput extends React.Component { render() { let {label, disabled} = this.props; let checked = this.status() === 'on'; + //TODO check onclick return ( <div className='toggle-input-wrapper form-group' onClick={!disabled && this.click}> <div className='toggle-input-label'>{label}</div> diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx index cc805e9ada..df7d69b4ff 100644 --- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx +++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import Button from 'sdc-ui/lib/react/Button.js'; import classnames from 'classnames'; import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx'; @@ -21,11 +22,9 @@ const ListEditorHeader = ({onAdd, isReadOnlyMode, title, plusButtonTitle}) => { return ( <div className='list-editor-view-header'> {title && <div className='list-editor-view-title'>{title}</div>} - <div className={`list-editor-view-add-controller${isReadOnlyMode ? ' disabled' : ''}`}> + <div> { onAdd && - <div className='list-editor-view-add-title' data-test-id='add-button' onClick={onAdd}> - <span>{`+ ${plusButtonTitle}`}</span> - </div> + <Button data-test-id='add-button' iconName='plusThin' btnType='link' onClick={onAdd} disabled={isReadOnlyMode === true}>{plusButtonTitle}</Button> } </div> </div> diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js index 825cc609a8..e05c2ac616 100644 --- a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js +++ b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js @@ -31,21 +31,35 @@ const typeClass = { success: 'positive' }; +const type2HeaderColor = { + 'default': 'primary', + error: 'danger', + warning: 'warning', + success: 'success' +}; + -const ModalFooter = ({type, onConfirmed, onDeclined, onClose, confirmationButtonText, cancelButtonText}) => +const ModalFooter = ({type, onConfirmed, onDeclined, onClose, confirmationButtonText, cancelButtonText}) => { + let myPropsForNoConfirmed = {}; + if (onConfirmed) { + myPropsForNoConfirmed.btnType = 'outline'; + } + return ( <Modal.Footer> <div className='sdc-modal-footer'> {onConfirmed && <Button color={typeClass[type]} onClick={() => { onConfirmed(); onClose(); }}>{confirmationButtonText}</Button>} - <Button btnType='outline' color={typeClass[type]} onClick={onDeclined ? () => { + <Button {...myPropsForNoConfirmed} color={typeClass[type]} onClick={onDeclined ? () => { onDeclined(); onClose();} : () => onClose()}> {cancelButtonText} </Button> </div> - </Modal.Footer>; + </Modal.Footer> + ); +}; ModalFooter.defaultProps = { type: 'default', @@ -93,7 +107,7 @@ export class GlobalModalView extends React.Component { modalClassName, msg, onConfirmed, onDeclined, confirmationButtonText, cancelButtonText, onClose} = this.props; const ComponentToRender = modalContentComponents[modalComponentName]; return ( - <Modal show={show} bsSize={modalComponentProps && modalComponentProps.size} className={`onborading-modal ${modalClassName || ''} ${typeClass[type]}`}> + <Modal show={show} bsSize={modalComponentProps && modalComponentProps.size} className={`onborading-modal ${modalClassName || ''} ${type2HeaderColor[type]}`}> <Modal.Header> <Modal.Title>{title}</Modal.Title> </Modal.Header> diff --git a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx index 3b89137090..fb3b71f0c8 100644 --- a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx +++ b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx @@ -109,6 +109,7 @@ function NavigationMenuItem(props) { function NavigationLink(props) { const {item, activeItemId, onClick} = props; + // todo should this be button return ( <div key={'navAction_' + item.id} diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx index ecfe7df116..922db05282 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx +++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx @@ -154,7 +154,7 @@ function VCButton({name, tooltipText, isDisabled, onClick, dataTestId}) { return ( <OverlayTrigger placement='top' overlay={<Tooltip id='vc-tooltip'>{tooltipText}</Tooltip>}> <div disabled={disabled} className='action-buttons-svg'> - <SVGIcon data-test-id={dataTestId} iconClassName={disabled} onClick={onClickAction ? onClickAction : undefined} name={name}/> + <SVGIcon data-test-id={dataTestId} disabled={isDisabled} onClick={onClickAction ? onClickAction : undefined} name={name}/> </div> </OverlayTrigger> ); diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx index 12e9a06623..3f8dbba53a 100644 --- a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx +++ b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx @@ -1,6 +1,7 @@ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; +import Button from 'sdc-ui/lib/react/Button.js'; import uuid from 'uuid-js'; export default class SelectActionTable extends React.Component { @@ -10,13 +11,14 @@ export default class SelectActionTable extends React.Component { return ( <div className={`select-action-table-view ${isReadOnlyMode ? 'disabled' : ''}`}> <div className='select-action-table-controllers'> - {onAdd && onAddItem && <div data-test-id='select-action-table-add' onClick={onAdd}>{onAddItem}</div>} + {onAdd && onAddItem && + <Button btnType='link' disabled={isReadOnlyMode === true} color='primary' iconName='plus' data-test-id='select-action-table-add' onClick={onAdd}>{onAddItem}</Button>} <SVGIcon name='trashO' className='dummy-icon' /> </div> <div className='select-action-table'> <div className='select-action-table-headers'> {columns.map(column => <div key={uuid.create()} className='select-action-table-header'>{i18n(column)}</div>)} - {Array(numOfIcons).fill().map((e, i) => <SVGIcon name='trashO' key={i} className='dummy-icon' />)} + {Array(numOfIcons).fill().map((e, i) => <SVGIcon name='trash-o' key={i} className='dummy-icon' />)} </div> <div className='select-action-table-body'> {children} diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx index 7df7d532e8..a03f8441a4 100644 --- a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx +++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx @@ -11,7 +11,7 @@ function tooltip (msg) { const IconWithOverlay = ({overlayMsg}) => ( <OverlayTrigger placement='bottom' overlay={tooltip(overlayMsg)}> - <SVGIcon name='errorCircle'/> + <SVGIcon name='errorCircle' color='negative'/> </OverlayTrigger> ); @@ -21,10 +21,10 @@ function renderErrorOrCheck({hasError, overlayMsg}) { } if (hasError) { - return overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> : <SVGIcon name='errorCircle'/>; + return overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> : <SVGIcon color='negative' name='errorCircle'/>; } - return <SVGIcon name='checkCircle'/>; + return <SVGIcon name='checkCircle' color='positive'/>; } const SelectActionTableRow = ({children, onDelete, hasError, hasErrorIndication, overlayMsg, showDelete}) => ( @@ -32,7 +32,7 @@ const SelectActionTableRow = ({children, onDelete, hasError, hasErrorIndication, <div className={`select-action-table-row ${hasError ? 'has-error' : ''}`}> {children} </div> - {onDelete && <SVGIcon name='trashO' iconClassName={(showDelete) ? '' : 'hideDelete'} data-test-id='select-action-table-delete' onClick={(showDelete) ? onDelete : null} />} + {onDelete && <SVGIcon color='secondary' name='trashO' data-test-id='select-action-table-delete' onClick={onDelete} iconClassName={(showDelete) ? '' : 'hideDelete'}/>} {hasErrorIndication && renderErrorOrCheck({hasError, overlayMsg})} </div> ); diff --git a/openecomp-ui/src/nfvo-utils/getValue.js b/openecomp-ui/src/nfvo-utils/getValue.js index e6871c094d..101655bf31 100644 --- a/openecomp-ui/src/nfvo-utils/getValue.js +++ b/openecomp-ui/src/nfvo-utils/getValue.js @@ -19,14 +19,26 @@ function getValueFromObject(element) { return element.choices && element.choices.length > 0 && element.choices[0] !== '' && element.choices[0] !== optionInputOther.OTHER || element.other && element.choices[0] === optionInputOther.OTHER ? element : undefined; -} +} function getValueFromVariable(variable) { return variable ? variable : undefined; } let getValue = element => { - return typeof element === 'object' ? getValueFromObject(element) : getValueFromVariable(element); + return typeof element === 'object' ? getValueFromObject(element) : getValueFromVariable(element); }; - export default getValue;
\ No newline at end of file +export function getStrValue(choiceObject) { + if (!choiceObject) { + return undefined; + } + if (choiceObject.choice && choiceObject.choice !== '' && choiceObject.choice !== optionInputOther.OTHER) { + return choiceObject.choice; + } + else if (choiceObject.other && choiceObject.choice === optionInputOther.OTHER) { + return choiceObject.other; + } +} + + export default getValue; diff --git a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogView.jsx b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogView.jsx index 19ab570fd9..9abddea542 100644 --- a/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogView.jsx +++ b/openecomp-ui/src/sdc-app/common/activity-log/ActivityLogView.jsx @@ -22,6 +22,7 @@ import i18n from 'nfvo-utils/i18n/i18n.js'; import LogDetails from './LogixUtil.jsx'; function ActivityLogSortableCellHeader({isHeader, data, isDes, onSort}) { + //TODO check icon sdc-ui if (isHeader) { return ( <span className='date-header' onClick={onSort}> @@ -51,7 +52,7 @@ function ActivityLogStatus({status, isHeader}) { return ( <span> <span className={`status-icon ${success}`}>{`${success ? i18n('Success') : i18n('Failure')}`}</span> - {success && <SVGIcon name='checkCircle'/>} + {success && <SVGIcon name='checkCircle' color='positive'/>} {!success && <OverlayTrigger placement='bottom' overlay={<Tooltip className='activity-log-message-tooltip' id={'activity-log-message-tooltip'}> <div className='message-block'>{message}</div> </Tooltip>}> diff --git a/openecomp-ui/src/sdc-app/common/helpers/ValidationHelper.js b/openecomp-ui/src/sdc-app/common/helpers/ValidationHelper.js index 51dfcf9a67..cfa675278f 100644 --- a/openecomp-ui/src/sdc-app/common/helpers/ValidationHelper.js +++ b/openecomp-ui/src/sdc-app/common/helpers/ValidationHelper.js @@ -51,10 +51,11 @@ class ValidationHelper { }); } - static qValidateForm(dispatch, qName){ + static qValidateForm(dispatch, qName, customValidations){ dispatch({ type: qcommonActionTypes.VALIDATE_FORM, - qName + qName, + customValidations }); } diff --git a/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducer.js b/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducer.js index 35b2f936ce..916f724b40 100644 --- a/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducer.js +++ b/openecomp-ui/src/sdc-app/common/reducers/JSONSchemaReducer.js @@ -99,8 +99,8 @@ function updateSchemaDataAndValidateReducer (state = {}, action, questionnaireNa genericFieldInfoClone = {...state.qgenericFieldInfo}; let formReady = true; forOwn(state.qgenericFieldInfo,(value, key) => { - let val = state.data[key] ? state.data[key] : ''; - let result = Validator.validate(key, val, state.qgenericFieldInfo[key].validations, state, {}); + let val = state.dataMap[key] ? state.dataMap[key] : ''; + let result = Validator.validate(key, val, state.qgenericFieldInfo[key].validations, state, action.customValidations); genericFieldInfoClone[key] = {...genericFieldInfoClone[key], isValid: result.isValid, errorText: result.errorText}; if (!result.isValid) { formReady = false; diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js index dad930127b..24ba05e303 100644 --- a/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js @@ -275,6 +275,13 @@ export default { version }); setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES, {softwareProductId, version, componentId}); + }, + + updateCurrentScreenVersion(dispatch, version) { + dispatch({ + type: actionTypes.SET_CURRENT_SCREEN_VERSION, + version + }); } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js index 0fff513cc5..1ce8605b63 100644 --- a/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js @@ -19,7 +19,8 @@ export const DATE_FORMAT = 'MM/DD/YYYY'; export const actionTypes = keyMirror({ SET_CURRENT_SCREEN: null, - SET_CURRENT_LICENSE_MODEL: null + SET_CURRENT_LICENSE_MODEL: null, + SET_CURRENT_SCREEN_VERSION: null, }); export const enums = keyMirror({ diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js index 46fc58db95..e63bcb16af 100644 --- a/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js +++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js @@ -16,9 +16,19 @@ import {actionTypes, enums} from './OnboardingConstants.js'; export const currentScreenReducer = (state = {forceBreadCrumbsUpdate: false, screen: enums.SCREEN.ONBOARDING_CATALOG, props: {}}, action) => { - if (action.type === actionTypes.SET_CURRENT_SCREEN) { - return action.currentScreen; - } - return state; + switch (action.type) { + case actionTypes.SET_CURRENT_SCREEN: + return action.currentScreen; + case actionTypes.SET_CURRENT_SCREEN_VERSION: + return { + ...state, + props: { + ...state.props, + version: action.version + } + }; + default: + return state; + } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js index 186f1cbc7b..788528fd75 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js @@ -23,6 +23,7 @@ import LicenseAgreementActionHelper from './licenseAgreement/LicenseAgreementAct import FeatureGroupsActionHelper from './featureGroups/FeatureGroupsActionHelper.js'; import EntitlementPoolsActionHelper from './entitlementPools/EntitlementPoolsActionHelper.js'; import LicenseKeyGroupsActionHelper from './licenseKeyGroups/LicenseKeyGroupsActionHelper.js'; +import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js'; function baseUrl() { const restPrefix = Configuration.get('restPrefix'); @@ -140,6 +141,8 @@ const LicenseModelActionHelper = { newVersionId = adjustMajorVersion(version.label, 1); } + OnboardingActionHelper.updateCurrentScreenVersion(dispatch, {label: newVersionId, id: newVersionId}); + LicenseModelActionHelper.fetchLicenseModelById(dispatch, {licenseModelId, version:{id: newVersionId, label: newVersionId}}); return Promise.resolve({id: newVersionId, label: newVersionId}); }); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js index a371d5635e..ce4327d810 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js @@ -18,7 +18,7 @@ import Configuration from 'sdc-app/config/Configuration.js'; import {actionTypes as entitlementPoolsActionTypes } from './EntitlementPoolsConstants.js'; import LicenseModelActionHelper from 'sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js'; import {actionTypes as limitEditorActions} from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js'; -import getValue from 'nfvo-utils/getValue.js'; +import {default as getValue, getStrValue} from 'nfvo-utils/getValue.js'; function baseUrl(licenseModelId, version) { const restPrefix = Configuration.get('restPrefix'); @@ -26,17 +26,16 @@ function baseUrl(licenseModelId, version) { return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/entitlement-pools`; } -function fetchEntitlementPoolsList(licenseModelId, version) { +function fetchEntitlementPoolsList(licenseModelId, version) { return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`); } -function postEntitlementPool(licenseModelId, entitlementPool, version) { +function postEntitlementPool(licenseModelId, entitlementPool, version) { return RestAPIUtil.post(baseUrl(licenseModelId, version), { name: entitlementPool.name, description: entitlementPool.description, thresholdValue: entitlementPool.thresholdValue, thresholdUnits: getValue(entitlementPool.thresholdUnits), - entitlementMetric: entitlementPool.entitlementMetric, increments: entitlementPool.increments, operationalScope: getValue(entitlementPool.operationalScope), time: entitlementPool.time, @@ -47,13 +46,12 @@ function postEntitlementPool(licenseModelId, entitlementPool, version) { function putEntitlementPool(licenseModelId, previousEntitlementPool, entitlementPool, version) { - + return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${entitlementPool.id}`, { name: entitlementPool.name, description: entitlementPool.description, thresholdValue: entitlementPool.thresholdValue, thresholdUnits: getValue(entitlementPool.thresholdUnits), - entitlementMetric: entitlementPool.entitlementMetric, increments: entitlementPool.increments, operationalScope: getValue(entitlementPool.operationalScope), time: entitlementPool.time, @@ -66,39 +64,39 @@ function deleteEntitlementPool(licenseModelId, entitlementPoolId, version) { return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}`); } -function fetchLimitsList(licenseModelId, entitlementPoolId, version) { +function fetchLimitsList(licenseModelId, entitlementPoolId, version) { return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits`); } -function deleteLimit(licenseModelId, entitlementPoolId, version, limitId) { +function deleteLimit(licenseModelId, entitlementPoolId, version, limitId) { return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits/${limitId}`); } -function postLimit(licenseModelId, entitlementPoolId, version, limit) { +function postLimit(licenseModelId, entitlementPoolId, version, limit) { return RestAPIUtil.post(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits`, { name: limit.name, type: limit.type, description: limit.description, - metric: limit.metric, + metric: getStrValue(limit.metric), value: limit.value, - unit: limit.unit, + unit: getStrValue(limit.unit), aggregationFunction: getValue(limit.aggregationFunction), time: getValue(limit.time) }); } function putLimit(licenseModelId, entitlementPoolId, version, limit) { - + return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits/${limit.id}`, { name: limit.name, type: limit.type, description: limit.description, - metric: limit.metric, + metric: getStrValue(limit.metric), value: limit.value, - unit: limit.unit, + unit: getStrValue(limit.unit), aggregationFunction: getValue(limit.aggregationFunction), time: getValue(limit.time) - }); + }); } export default { @@ -191,10 +189,10 @@ export default { type: entitlementPoolsActionTypes.entitlementPoolsEditor.LIMITS_LIST_LOADED, response }); - }); + }); }, - submitLimit(dispatch, {licenseModelId, version, entitlementPool, limit}) { + submitLimit(dispatch, {licenseModelId, version, entitlementPool, limit}) { const propmise = limit.id ? putLimit(licenseModelId,entitlementPool.id, version, limit) : postLimit(licenseModelId,entitlementPool.id, version, limit); return propmise.then(() => { @@ -202,12 +200,12 @@ export default { type: limitEditorActions.CLOSE }); this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool}); - }); + }); }, - deleteLimit(dispatch, {licenseModelId, version, entitlementPool, limit}) { + deleteLimit(dispatch, {licenseModelId, version, entitlementPool, limit}) { return deleteLimit(licenseModelId,entitlementPool.id, version, limit.id).then(() => { - this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool}); - }); + this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool}); + }); } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx index 9844290a25..497c29d14c 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx @@ -97,24 +97,23 @@ class FeatureGroupListEditorView extends React.Component { <div className='text name'>{name}</div> </div> - <div className='list-editor-item-view-field'> + <div className='list-editor-item-view-field smaller-field'> <div className='feature-groups-count-field'> - <div className='title'>{i18n('Entitlement')}</div> - <div className='title'>{i18n('Pools')}</div> + <div className='title'>{i18n('EP')}</div> <div className='feature-groups-count-ep'>{entitlementPoolsIds.length || 0}</div> </div> + </div> + <div className='list-editor-item-view-field smaller-field'> <div className='feature-groups-count-field'> - <div className='title'>{i18n('License key')}</div> - <div className='title'>{i18n('Groups')}</div> + <div className='title'>{i18n('LKG')}</div> <div className='feature-groups-count-lk'>{licenseKeyGroupsIds.length || 0}</div> </div> </div> <div className='list-editor-item-view-field'> <div className='feature-groups-count-field'> - <div className='title'>{i18n('Manufacturer Reference')}</div> - <div className='title'>{i18n('Number')}</div> - <div className='feature-groups-count-ep'>{manufacturerReferenceNumber}</div> + <div className='title title-no-wrap'>{i18n('Manufacturer Reference Number')}</div> + <div className='feature-groups-mrn-ep'>{manufacturerReferenceNumber}</div> </div> </div> @@ -122,8 +121,8 @@ class FeatureGroupListEditorView extends React.Component { <div className='title'>{i18n('Description')}</div> <div className='text description'>{description}</div> </div> - - + + </ListEditorItemView> ); diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js index f5017f6d7a..f22080a75c 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js @@ -18,7 +18,7 @@ import Configuration from 'sdc-app/config/Configuration.js'; import {actionTypes as licenseKeyGroupsConstants} from './LicenseKeyGroupsConstants.js'; import LicenseModelActionHelper from 'sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js'; import {actionTypes as limitEditorActions} from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js'; -import getValue from 'nfvo-utils/getValue.js'; +import {default as getValue, getStrValue} from 'nfvo-utils/getValue.js'; function baseUrl(licenseModelId, version) { const restPrefix = Configuration.get('restPrefix'); @@ -75,9 +75,9 @@ function postLimit(licenseModelId, licenseKeyGroupId, version, limit) { name: limit.name, type: limit.type, description: limit.description, - metric: limit.metric, + metric: getStrValue(limit.metric), value: limit.value, - unit: limit.unit, + unit: getStrValue(limit.unit), aggregationFunction: getValue(limit.aggregationFunction), time: getValue(limit.time) }); @@ -89,9 +89,9 @@ function putLimit(licenseModelId, licenseKeyGroupId, version, limit) { name: limit.name, type: limit.type, description: limit.description, - metric: limit.metric, + metric: getStrValue(limit.metric), value: limit.value, - unit: limit.unit, + unit: getStrValue(limit.unit), aggregationFunction: getValue(limit.aggregationFunction), time: getValue(limit.time) }); @@ -181,8 +181,8 @@ export default { dispatch({ type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.LIMITS_LIST_LOADED, response - }); - }); + }); + }); }, submitLimit(dispatch, {licenseModelId, version, licenseKeyGroup, limit}) { @@ -193,13 +193,13 @@ export default { type: limitEditorActions.CLOSE }); this.fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup}); - }); + }); }, deleteLimit(dispatch, {licenseModelId, version, licenseKeyGroup, limit}) { return deleteLimit(licenseModelId,licenseKeyGroup.id, version, limit.id).then(() => { this.fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup}); - }); + }); } diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx index f70f917725..5c4e50d673 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx @@ -7,16 +7,24 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx'; import {LIMITS_FORM_NAME, selectValues} from './LimitEditorConstants.js'; import Button from 'sdc-ui/lib/react/Button.js'; import Validator from 'nfvo-utils/Validator.js'; +import {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx'; +import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx'; const LimitPropType = React.PropTypes.shape({ id: React.PropTypes.string, name: React.PropTypes.string, description: React.PropTypes.string, - metric: React.PropTypes.string, - value: React.PropTypes.number, + metric: React.PropTypes.shape({ + choice: React.PropTypes.string, + other: React.PropTypes.string + }), + value: React.PropTypes.string, aggregationFunction: React.PropTypes.string, time: React.PropTypes.string, - unit: React.PropTypes.number + unit: React.PropTypes.shape({ + choice: React.PropTypes.string, + other: React.PropTypes.string + }) }); class LimitEditor extends React.Component { @@ -33,8 +41,8 @@ class LimitEditor extends React.Component { onCancel: React.PropTypes.func.isRequired }; - componentDidUpdate(prevProps) { - if (this.props.formReady && this.props.formReady !== prevProps.formReady) { + componentDidUpdate(prevProps) { + if (this.props.formReady && this.props.formReady !== prevProps.formReady) { this.submit(); } } @@ -44,21 +52,21 @@ class LimitEditor extends React.Component { let {name, description, metric, value, aggregationFunction, time, unit} = data; return ( <div className='limit-editor'> - {!data.id && + {!data.id && <div className='limit-editor-title'> {data.name ? data.name : i18n('NEW LIMIT')} </div>} { - genericFieldInfo && + genericFieldInfo && <Form ref='validationForm' - hasButtons={false} + hasButtons={false} isValid={isFormValid} formReady={formReady} onValidateForm={() => onValidateForm(LIMITS_FORM_NAME) } labledButtons={false} isReadOnlyMode={isReadOnlyMode} - className='limit-editor-form'> + className='limit-editor-form'> <GridSection className='limit-editor-form-grid-section'> <GridItem colSpan={2}> <Input @@ -83,24 +91,23 @@ class LimitEditor extends React.Component { type='text'/> </GridItem> <GridItem colSpan={2}> - <Input - onChange={e => { - const selectedIndex = e.target.selectedIndex; - const val = e.target.options[selectedIndex].value; - onDataChanged({metric: val}, LIMITS_FORM_NAME);} - } + <InputOptions + onInputChange={()=>{}} + isMultiSelect={false} isRequired={true} - value={metric} + onEnumChange={metric => onDataChanged({metric:{choice: metric, other: ''}}, + LIMITS_FORM_NAME, {metric: this.validateChoiceWithOther})} + onOtherChange={metric => onDataChanged({metric:{choice: optionInputOther.OTHER, + other: metric}}, LIMITS_FORM_NAME, {metric: this.validateChoiceWithOther})} label={i18n('Metric')} data-test-id='limit-editor-metric' + type='select' + required={true} + selectedEnum={metric && metric.choice} + otherValue={metric && metric.other} + values={selectValues.METRIC} isValid={genericFieldInfo.metric.isValid} - errorText={genericFieldInfo.metric.errorText} - groupClassName='bootstrap-input-options' - className='input-options-select' - type='select' > - {selectValues.METRIC.map(mtype => - <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)} - </Input> + errorText={genericFieldInfo.metric.errorText} /> </GridItem> <GridItem> <Input @@ -111,22 +118,30 @@ class LimitEditor extends React.Component { isValid={genericFieldInfo.value.isValid} errorText={genericFieldInfo.value.errorText} isRequired={true} - type='number'/> + type='text'/> </GridItem> <GridItem> - <Input - onChange={unit => onDataChanged({unit}, LIMITS_FORM_NAME)} + <InputOptions + onInputChange={()=>{}} + isMultiSelect={false} + isRequired={false} + onEnumChange={unit => onDataChanged({unit:{choice: unit, other: ''}}, + LIMITS_FORM_NAME)} + onOtherChange={unit => onDataChanged({unit:{choice: optionInputOther.OTHER, + other: unit}}, LIMITS_FORM_NAME)} label={i18n('Units')} data-test-id='limit-editor-units' - value={unit} + type='select' + required={false} + selectedEnum={unit && unit.choice} + otherValue={unit && unit.other} + values={selectValues.UNIT} isValid={genericFieldInfo.unit.isValid} - errorText={genericFieldInfo.unit.errorText} - isRequired={false} - type='number'/> + errorText={genericFieldInfo.unit.errorText} /> </GridItem> <GridItem colSpan={2}> <Input - onChange={e => { + onChange={e => { const selectedIndex = e.target.selectedIndex; const val = e.target.options[selectedIndex].value; onDataChanged({aggregationFunction: val}, LIMITS_FORM_NAME);} @@ -145,7 +160,7 @@ class LimitEditor extends React.Component { </GridItem> <GridItem> <Input - onChange={e => { + onChange={e => { const selectedIndex = e.target.selectedIndex; const val = e.target.options[selectedIndex].value; onDataChanged({time: val}, LIMITS_FORM_NAME);} @@ -160,15 +175,15 @@ class LimitEditor extends React.Component { type='select' > {selectValues.TIME.map(mtype => <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)} - </Input> + </Input> </GridItem> </GridSection> <GridSection className='limit-editor-buttons'> - <Button btnType='outline' disabled={!isFormValid} onClick={() => this.submit()} type='reset'>{i18n('Save')}</Button> + <Button btnType='outline' disabled={!isFormValid} onClick={() => this.submit()} type='reset'>{i18n('Save')}</Button> <Button btnType='outline' color='gray' onClick={onCancel} type='reset'>{i18n('Cancel')}</Button> - </GridSection> - </Form> - } + </GridSection> + </Form> + } </div> ); } @@ -181,6 +196,24 @@ class LimitEditor extends React.Component { {isValid: false, errorText: i18n('Limit by the name \'' + value + '\' already exists. Limit name must be unique')}; } + validateChoiceWithOther(value) { + let chosen = value.choice; + // if we have an empty multiple select we have a problem since it's required + if (value.choices) { + if (value.choices.length === 0) { + return Validator.validate('field', '', [{type: 'required', data: true}]); + } else { + // continuing validation with the first chosen value in case we have the 'Other' field + chosen = value.choices[0]; + } + } + if (chosen !== optionInputOther.OTHER) { + return Validator.validate('field', chosen, [{type: 'required', data: true}]); + } else { // when 'Other' was chosen, validate other value + return Validator.validate('field', value.other, [{type: 'required', data: true}]); + } + } + submit() { if (!this.props.formReady) { this.props.onValidateForm(LIMITS_FORM_NAME); @@ -190,4 +223,4 @@ class LimitEditor extends React.Component { } } -export default LimitEditor;
\ No newline at end of file +export default LimitEditor; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js index 09c64ada62..8ac845a1a7 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js @@ -14,17 +14,41 @@ * permissions and limitations under the License. */ -import {actionTypes} from './LimitEditorConstants.js'; +import {actionTypes, selectValues} from './LimitEditorConstants.js'; +import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx'; const LimitEditorActionHelper = { openLimitsEditor(dispatch, {limit}) { - dispatch({type: actionTypes.OPEN, limitItem: limit}); + let modifiedLimit = {...limit}; + if (limit && limit.metric) { + modifiedLimit.metric = LimitEditorActionHelper.createChoiceObject(modifiedLimit.metric, selectValues.METRIC); + } + if (limit && limit.unit) { + modifiedLimit.unit = LimitEditorActionHelper.createChoiceObject(modifiedLimit.unit, selectValues.UNIT); + } + dispatch({type: actionTypes.OPEN, limitItem: modifiedLimit}); }, closeLimitsEditor(dispatch) { dispatch({type: actionTypes.CLOSE}); + }, + + createChoiceObject(value, optionsList) { + let option = optionsList.find(function(item) { return item.enum === value; }); + if (!option) { + return { + choice: optionInputOther.OTHER, + other: value + }; + } + else { + return { + choice: value, + other: '' + }; + } } }; -export default LimitEditorActionHelper;
\ No newline at end of file +export default LimitEditorActionHelper; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js index 1bef286442..9829e696c3 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js @@ -13,18 +13,25 @@ export const LIMITS_FORM_NAME = 'LIMITSFORM'; export const selectValues = { METRIC: [ {enum: '', title: i18n('please select…')}, - {enum: 'Software_Instances_Count', title: 'Software Instances'}, - {enum: 'Core', title: 'Core'}, - {enum: 'CPU', title: 'CPU'}, - {enum: 'Trunks', title: 'Trunks'}, - {enum: 'User', title: 'User'}, - {enum: 'Subscribers', title: 'Subscribers'}, - {enum: 'Tenants', title: 'Tenants'}, - {enum: 'Tokens', title: 'Tokens'}, - {enum: 'Seats', title: 'Seats'}, - {enum: 'Units_TB', title: 'Units-TB'}, - {enum: 'Units_GB', title: 'Units-GB'}, - {enum: 'Units_MB', title: 'Units-MB'} + {enum: 'BWTH', title: 'BWTH'}, + {enum: 'Country', title: 'Country'}, + {enum: 'Session', title: 'Session'}, + {enum: 'LoB', title: 'LoB'}, + {enum: 'Site', title: 'Site'}, + {enum: 'Usage', title: 'Usage'} + ], + UNIT: [ + {enum: '', title: i18n('please select…')}, + {enum: 'trunk', title: 'Trunks'}, + {enum: 'user', title: 'Users'}, + {enum: 'subscriber', title: 'Subscribers'}, + {enum: 'session', title: 'Sessions'}, + {enum: 'tenant', title: 'Tenants'}, + {enum: 'token', title: 'Tokens'}, + {enum: 'seats', title: 'Seats'}, + {enum: 'TB', title: 'TB'}, + {enum: 'GB', title: 'GB'}, + {enum: 'MB', title: 'MB'} ], AGGREGATION_FUNCTION: [ {enum: '', title: i18n('please select…')}, @@ -33,11 +40,14 @@ export const selectValues = { ], TIME: [ {enum: '', title: i18n('please select…')}, - {enum: 'Hour', title: 'Hour'}, {enum: 'Day', title: 'Day'}, - {enum: 'Month', title: 'Month'} + {enum: 'Month', title: 'Month'}, + {enum: 'Hour', title: 'Hour'}, + {enum: 'Minute', title: 'Minute'}, + {enum: 'Second', title: 'Second'}, + {enum: 'Milli-Second', title: 'Milli-Second'} ] - + }; export const limitType = { @@ -46,7 +56,9 @@ export const limitType = { }; export const defaultState = { - LIMITS_EDITOR_DATA: {} + LIMITS_EDITOR_DATA: { + metric: {choice: '', other: ''}, + } }; -export const NEW_LIMIT_TEMP_ID = 'NEW_LIMIT_TEMP_ID';
\ No newline at end of file +export const NEW_LIMIT_TEMP_ID = 'NEW_LIMIT_TEMP_ID'; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js index 2499093af2..de9e7c8c38 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js @@ -20,7 +20,7 @@ export default (state = {}, action) => { switch (action.type) { case actionTypes.OPEN: return { - ...state, + ...state, data: action.limitItem ? {...action.limitItem} : defaultState.LIMITS_EDITOR_DATA, formReady: null, formName: LIMITS_FORM_NAME, @@ -38,17 +38,17 @@ export default (state = {}, action) => { 'metric' : { isValid: true, errorText: '', - validations: [{type: 'required', data: true}] + validations: [] }, 'value' : { isValid: true, errorText: '', - validations: [{type: 'required', data: true}, {type: 'numeric', data: true}, {type: 'minimum', data: 0}] + validations: [{type: 'required', data: true}] }, 'unit' : { isValid: true, errorText: '', - validations: [{type: 'numeric', data: true}] + validations: [] }, 'aggregationFunction' : { isValid: true, @@ -67,4 +67,4 @@ export default (state = {}, action) => { default: return state; } -};
\ No newline at end of file +}; diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx index ec5a1dff72..b144f63968 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx @@ -17,40 +17,43 @@ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; -import LimitEditor from './LimitEditor.js'; +import LimitEditor from './LimitEditor.js'; import {NEW_LIMIT_TEMP_ID, selectValues} from './LimitEditorConstants.js'; const LimitItem = ({isReadOnlyMode, limit, onDelete, onSelect}) => { - const {name, description, metric, value, aggregationFunction = '', time = ''} = limit; + const {name, description, value, metric, aggregationFunction = '', time = ''} = limit; const timeLabel = time ? `per ${time}` : ''; + let metricOption = selectValues.METRIC.find(item => item.enum === metric); + metricOption = metricOption ? metricOption.title : metric; + return ( - <ListEditorItemView + <ListEditorItemView onDelete={onDelete} onSelect={onSelect} isReadOnlyMode={isReadOnlyMode}> - <div className='list-editor-item-view-field limit-name'> + <div className='list-editor-item-view-field limit-name'> <div className='text name'>{name}</div> </div> - <div className='list-editor-item-view-field limit-description'> + <div className='list-editor-item-view-field limit-description'> <div className='text description'>{description}</div> </div> - <div className='list-editor-item-view-field limit-metric-details'> - <div className='text description'>{`${selectValues.METRIC.find(item => item.enum === metric).title} ${value} ${aggregationFunction} ${timeLabel}`}</div> - </div> + <div className='list-editor-item-view-field limit-metric-details'> + <div className='text description'>{`${metricOption} ${value} ${aggregationFunction} ${timeLabel}`}</div> + </div> </ListEditorItemView> ); }; class Limits extends React.Component { - + state = { localFilter: '' }; - render() { + render() { const {isReadOnlyMode = false, limitEditor, limitsList = [], onCloseLimitEditor, selectedLimit} = this.props; let limitsNames = {}; for (let i = 0; i < limitsList.length; i++) { @@ -66,26 +69,26 @@ class Limits extends React.Component { {limitsList.length === 0 && !limitEditor.data && <div className='no-limits-text'>{i18n('There are no limits')}</div>} {limitsList.map(limit => <div key={limit.id} className='limit-item-wrapper'> - <LimitItem - onDelete={() => this.delete(limit)} + <LimitItem + onDelete={() => this.deleteLimit(limit)} onSelect={selectedLimit ? undefined : () => this.props.onSelectLimit(limit)} - clickable={!selectedLimit} - isReadOnlyMode={isReadOnlyMode} + clickable={!selectedLimit} + isReadOnlyMode={isReadOnlyMode} limit={limit}/> {limit.id === selectedLimit && limitEditor.data && <LimitEditor limitsNames={limitsNames} onCancel={onCloseLimitEditor} onSubmit={ () => this.submit()}/>} </div> )} </ListEditorView> - + </div> ); } submit() { - let {onSubmit, onCloseLimitEditor, parent, limitEditor, licenseModelId, version, limitType} = this.props; + let {onSubmit, onCloseLimitEditor, parent, limitEditor, licenseModelId, version, limitType} = this.props; onSubmit({type: limitType, ...limitEditor.data}, parent, licenseModelId, version).then(() => onCloseLimitEditor()); } - delete(limit) { + deleteLimit(limit) { let {onDelete, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit} = this.props; onDelete({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit}); } diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx index 0c0103fc10..9232402b75 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx @@ -18,6 +18,7 @@ import Input from 'nfvo-components/input/validation/Input.jsx'; class LicenseModelDescriptionEdit extends React.Component { render() { + //TODO check if buttons let {onDataChanged, description, genericFieldInfo} = this.props; let saveButtonClassName = (genericFieldInfo.description.isValid) ? 'description-save' : 'description-save disabled'; return( diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx index 66f2cc6838..6ec84e16ca 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx @@ -14,15 +14,17 @@ * permissions and limitations under the License. */ import React from 'react'; +import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; function SummaryCountItem ({name, counter, onAdd, onNavigate, isReadOnlyMode}) { + //TODO check for buttons return( <div className='summary-count-item'> <div className='summary-name-and-count' onClick={onNavigate}> <span className='item-name' onClick={onNavigate}>{name}</span> <span className='item-count' onClick={onNavigate} data-test-id={'vlm-summary-vendor-counter-' + name.toLowerCase().replace(/\s/g,'-')}>({counter})</span> </div> - <div className={isReadOnlyMode ? 'add-button disabled' : 'add-button'} onClick={onAdd} data-test-id={'vlm-summary-vendor-add-btn-' + name.toLowerCase().replace(/\s/g,'-')}/> + <SVGIcon name='plusCircle' disabled={isReadOnlyMode} color='secondary' onClick={onAdd} data-test-id={'vlm-summary-vendor-add-btn-' + name.toLowerCase().replace(/\s/g,'-')}/> </div> ); } 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 87559901b3..deb4550347 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 @@ -18,6 +18,7 @@ import {connect} from 'react-redux'; import Tooltip from 'react-bootstrap/lib/Tooltip.js'; import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; +import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js'; import licenseModelOverviewActionHelper from '../licenseModelOverviewActionHelper.js'; import LicenseModelActionHelper from '../../LicenseModelActionHelper.js'; @@ -70,6 +71,7 @@ export class VendorDataView extends Component { {this.renderOverlay( <div className='description-data' data-test-id='vlm-summary-vendor-description'> {description} + <SVGIcon name='pencil'/> </div> )} </div> diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx index 51702e6d36..7664f6abaa 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx @@ -40,6 +40,7 @@ const CatalogList = ({children, onAddVLM, onAddVSP, vendorPageOptions}) => ( ); const CreateItemTile = ({onClick, dataTestId, title, className = ''}) => { + //TODO check for buttons return ( <div className={'create-catalog-item tile ' + className} onClick={() => onClick()} data-test-id={dataTestId}> <div className='create-item-plus-icon'><SVGIcon name='plus' /></div> diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js index 90a2bb8f2e..d4bee0a876 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js @@ -409,6 +409,7 @@ const SoftwareProductActionHelper = { } }); const newVersionId = adjustMajorVersion(version.label, 1); + OnboardingActionHelper.updateCurrentScreenVersion(dispatch, {label: newVersionId, id: newVersionId}); SoftwareProductActionHelper.fetchSoftwareProduct(dispatch,{softwareProductId, version: {id: newVersionId}}); return Promise.resolve({newVersion: {id: newVersionId}}); }); @@ -438,6 +439,7 @@ const SoftwareProductActionHelper = { newVersionId = adjustMinorVersion(version.label, -1); break; } + OnboardingActionHelper.updateCurrentScreenVersion(dispatch, {label: newVersionId, id: newVersionId}); SoftwareProductActionHelper.fetchSoftwareProduct(dispatch,{softwareProductId, version:{id: newVersionId}}); return Promise.resolve({newVersion: {id: newVersionId}}); }); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx index ef4aecf568..3da26cc20f 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx @@ -18,7 +18,7 @@ import Tabs from 'react-bootstrap/lib/Tabs.js'; import Tab from 'react-bootstrap/lib/Tab.js'; import {tabsMapping} from './SoftwareProductAttachmentsConstants.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import Icon from 'nfvo-components/icon/Icon.jsx'; +import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import HeatValidation from './validation/HeatValidation.js'; class HeatScreenView extends Component { @@ -38,27 +38,32 @@ class HeatScreenView extends Component { <div className='vsp-attachments-view'> <div className='attachments-view-controllers'> {(this.state.activeTab === tabsMapping.SETUP) && - <Icon - iconClassName={heatDataExist ? '' : 'disabled'} - className={heatDataExist ? '' : 'disabled'} - image='download' + <SVGIcon + disabled={heatDataExist ? false : true} + name='download' + className='icon-component' label={i18n('Download HEAT')} + labelPosition='right' + color='secondary' onClick={heatDataExist ? () => onDownload({heatCandidate: heatSetup, isReadOnlyMode, version}) : undefined} data-test-id='download-heat'/>} {(this.state.activeTab === tabsMapping.VALIDATION && softwareProductId) && - <Icon - iconClassName={this.props.goToOverview ? '' : 'disabled'} - className={`go-to-overview-icon ${this.props.goToOverview ? '' : 'disabled'}`} - labelClassName='go-to-overview-label' + <SVGIcon + disabled={this.props.goToOverview !== true} onClick={this.props.goToOverview ? () => onGoToOverview({version}) : undefined} - image='go-to-overview' + name='proceedToOverview' + className='icon-component' label={i18n('Go to Overview')} + labelPosition='right' + color={this.props.goToOverview ? 'primary' : 'secondary'} data-test-id='go-to-overview'/>} - <Icon - image='upload' + <SVGIcon + name='upload' + className='icon-component' label={i18n('Upload New HEAT')} - className={isReadOnlyMode ? 'disabled' : ''} - iconClassName={isReadOnlyMode ? 'disabled' : ''} + labelPosition='right' + color='secondary' + disabled={isReadOnlyMode} onClick={evt => {this.refs.hiddenImportFileInput.click(evt);}} data-test-id='upload-heat'/> <input @@ -87,9 +92,9 @@ class HeatScreenView extends Component { } handleTabPress(key) { - let {heatSetup, heatSetupCache, onProcessAndValidate, isReadOnlyMode, version} = this.props; + let {heatSetup, heatSetupCache, onProcessAndValidate, isReadOnlyMode, version} = this.props; switch (key) { - case tabsMapping.VALIDATION: + case tabsMapping.VALIDATION: onProcessAndValidate({heatData: heatSetup, heatDataCache: heatSetupCache, isReadOnlyMode, version}).then( () => this.setState({activeTab: tabsMapping.VALIDATION}) ); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx index 901a583e24..17b3179d01 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx @@ -20,7 +20,6 @@ import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; import FormControl from 'react-bootstrap/lib/FormControl.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import SelectInput from 'nfvo-components/input/SelectInput.jsx'; -import Icon from 'nfvo-components/icon/Icon.jsx'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import {fileTypes} from './HeatSetupConstants.js'; import {tabsMapping} from '../SoftwareProductAttachmentsConstants.js'; @@ -52,7 +51,7 @@ class SortableModuleFileList extends Component { render() { - let {unassigned, onModuleRename, onModuleDelete, onModuleAdd, onBaseAdd, onModuleFileTypeChange, isBaseExist} = this.props; + let {unassigned, onModuleRename, onModuleDelete, onModuleAdd, onBaseAdd, onModuleFileTypeChange, isBaseExist, isReadOnlyMode} = this.props; const childProps = module => ({ module, onModuleRename, @@ -68,19 +67,17 @@ class SortableModuleFileList extends Component { items={this.state.data} draggingIndex={this.state.draggingIndex} sortId={i} - outline='list'><ModuleFile {...childProps(item)} /></SortableListItem> + outline='list'><ModuleFile {...childProps(item)} isReadOnlyMode={this.props.isReadOnlyMode} /></SortableListItem> ); }, this); return ( - <div className='modules-list-wrapper'> + <div className={`modules-list-wrapper ${(listItems.length > 0) ? 'modules-list-wrapper-divider' : ''}`}> <div className='modules-list-header'> - <div className='modules-list-controllers'> - {!isBaseExist && <Button btnType='link' onClick={onBaseAdd} disabled={unassigned.length === 0}>{i18n('Add Base')}</Button>} - <Button btnType='link' onClick={onModuleAdd} disabled={unassigned.length === 0}>{i18n('Add Module')}</Button> - </div> + {!isBaseExist && <div><Button btnType='link' onClick={onBaseAdd} disabled={isReadOnlyMode || unassigned.length === 0}>{i18n('Add Base')}</Button></div>} + <div><Button btnType='link' onClick={onModuleAdd} disabled={isReadOnlyMode || unassigned.length === 0}>{i18n('Add Module')}</Button></div> </div> - <ul>{listItems}</ul> + {(listItems.length > 0) && <ul>{listItems}</ul>} </div> ); } @@ -89,20 +86,24 @@ class SortableModuleFileList extends Component { const tooltip = (name) => <Tooltip id='tooltip-bottom'>{name}</Tooltip>; const UnassignedFileList = (props) => { return ( - <div className='unassigned-files'> + <div> + <div className='modules-list-header'/> + <div className='unassigned-files'> <div className='unassigned-files-title'>{i18n('UNASSIGNED FILES')}</div> <div className='unassigned-files-list'>{props.children}</div> + </div> </div> ); }; const EmptyListContent = props => { - let {onClick, heatDataExist} = props; + let {onClick, heatDataExist, isReadOnlyMode} = props; let displayText = heatDataExist ? 'All Files Are Assigned' : ''; return ( <div className='go-to-validation-button-wrapper'> <div className='all-files-assigned'>{i18n(displayText)}</div> - {heatDataExist && <div className={'link'} onClick={onClick} data-test-id='go-to-validation'>{i18n('Proceed To Validation')}<SVGIcon name='angleRight'/></div>} + {heatDataExist && <SVGIcon disabled={isReadOnlyMode} name='angleRight' onClick={onClick} + data-test-id='go-to-validation' label={i18n('Proceed To Validation')} labelPosition='left' color='primary'/>} </div> ); }; @@ -112,14 +113,11 @@ const UnassignedFile = (props) => ( </OverlayTrigger> ); -const AddOrDeleteVolumeFiels = ({add = true, onAdd, onDelete}) => { +const AddOrDeleteVolumeFiles = ({add = true, onAdd, onDelete, isReadOnlyMode}) => { const displayText = add ? 'Add Volume Files' : 'Delete Volume Files'; const action = add ? onAdd : onDelete; return ( - <div className='add-or-delete-volumes' onClick={action}> - <SVGIcon name={add ? 'plus' : 'close'} /> - <span>{i18n(displayText)}</span> - </div> + <Button disabled={isReadOnlyMode} onClick={action} btnType='link' className='add-or-delete-volumes' iconName={add ? 'plus' : 'close'}>{i18n(displayText)}</Button> ); }; @@ -195,14 +193,14 @@ class ModuleFile extends Component { } render() { - const {module: {name, isBase, yaml, env, vol, volEnv}, onModuleDelete, files, onModuleFileTypeChange} = this.props; + const {module: {name, isBase, yaml, env, vol, volEnv}, onModuleDelete, files, onModuleFileTypeChange, isReadOnlyMode} = this.props; const {displayVolumes} = this.state; const moduleType = isBase ? 'BASE' : 'MODULE'; return ( <div className='modules-list-item' data-test-id='module-item'> <div className='modules-list-item-controllers'> <div className='modules-list-item-filename'> - <Icon image={isBase ? 'base' : 'module'} iconClassName='heat-setup-module-icon' /> + <SVGIcon name={isBase ? 'base' : 'module'} color='primary' iconClassName='heat-setup-module-icon' /> <span className='module-title-by-type'>{`${moduleType}: `}</span> <div className={`text-and-icon ${this.state.isInNameEdit ? 'in-edit' : ''}`}> {this.renderNameAccordingToEditState()} @@ -235,7 +233,7 @@ class ModuleFile extends Component { files={files} selected={volEnv} onChange={onModuleFileTypeChange}/>} - <AddOrDeleteVolumeFiels onAdd={() => this.setState({displayVolumes: true})} onDelete={() => this.deleteVolumeFiles()} add={!displayVolumes}/> + <AddOrDeleteVolumeFiles isReadOnlyMode={isReadOnlyMode} onAdd={() => this.setState({displayVolumes: true})} onDelete={() => this.deleteVolumeFiles()} add={!displayVolumes}/> </div> </div> ); @@ -245,15 +243,15 @@ class ModuleFile extends Component { class ArtifactOrNestedFileList extends Component { render() { - let {type, title, selected, options, onSelectChanged, onAddAllUnassigned} = this.props; + let {type, title, selected, options, onSelectChanged, onAddAllUnassigned, isReadOnlyMode, headerClassName} = this.props; return ( - <div className={`artifact-files ${type === 'nested' ? 'nested' : ''}`}> + <div className={`artifact-files ${type === 'nested' ? 'nested' : ''} ${headerClassName} `}> <div className='artifact-files-header'> <span> - {type === 'artifact' && (<Icon image='artifacts' iconClassName='heat-setup-module-icon' />)} + {type === 'artifact' && (<SVGIcon color='primary' name='artifacts' iconClassName='heat-setup-module-icon' />)} {`${title}`} </span> - {type === 'artifact' && <span className='add-all-unassigned' onClick={onAddAllUnassigned}>{i18n('Add All Unassigned Files')}</span>} + {type === 'artifact' && <Button disabled={isReadOnlyMode} btnType='link' className='add-all-unassigned' onClick={onAddAllUnassigned}>{i18n('Add All Unassigned Files')}</Button>} </div> {type === 'nested' ? ( <ul className='nested-list'>{selected.map(nested => @@ -294,6 +292,7 @@ class SoftwareProductHeatSetupView extends Component { <div className='heat-setup-view-modules-and-artifacts'> <SortableModuleFileList {...this.props} + isReadOnlyMode={this.props.isReadOnlyMode} artifacts={formattedArtifacts} unassigned={formattedUnassigned}/> <ArtifactOrNestedFileList @@ -302,11 +301,14 @@ class SoftwareProductHeatSetupView extends Component { options={formattedUnassigned} selected={formattedArtifacts} onSelectChanged={onArtifactListChange} + isReadOnlyMode={this.props.isReadOnlyMode} + headerClassName={(modules && modules.length > 0) ? 'with-list-items' : ''} onAddAllUnassigned={onAddAllUnassigned}/> <ArtifactOrNestedFileList type={'nested'} title={i18n('NESTED HEAT FILES')} options={[]} + isReadOnlyMode={this.props.isReadOnlyMode} selected={nested}/> </div> <UnassignedFileList> @@ -316,6 +318,7 @@ class SoftwareProductHeatSetupView extends Component { : (<EmptyListContent heatDataExist={heatDataExist} + isReadOnlyMode={this.props.isReadOnlyMode} onClick={() => this.processAndValidateHeat({modules, unassigned, artifacts, nested}, heatSetupCache)}/>) } </UnassignedFileList> diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx index f2d5de4dff..62dcb82db1 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx @@ -16,19 +16,18 @@ import React, {Component, PropTypes} from 'react'; import classNames from 'classnames'; import Collapse from 'react-bootstrap/lib/Collapse.js'; -import Icon from 'nfvo-components/icon/Icon.jsx'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import {mouseActions, errorLevels, nodeFilters} from './HeatValidationConstants.js'; const leftPanelWidth = 250; const typeToIcon = Object.freeze({ - heat: 'heat', - volume: 'volume', + heat: 'nestedHeat', + volume: 'base', network: 'network', - artifact: 'validation-artifacts', + artifact: 'artifacts', env: 'env', - other: 'validation-other' + other: 'other' }); @@ -74,7 +73,7 @@ function HeatFileTreeRow(props) { { <span className='tree-node-icon'> - <Icon image={typeToIcon[node.type]} iconClassName={selectedNode === node.name ? 'selected' : ''}/> + <SVGIcon name={typeToIcon[node.type]} color={selectedNode === node.name ? 'primary' : 'secondary'}/> </span> } { @@ -94,7 +93,7 @@ function HeatFileTreeHeader(props) { <div onClick={() => props.selectNode(nodeFilters.ALL)} className={classNames({'attachments-tree-header': true, 'header-selected' : props.selectedNode === nodeFilters.ALL})} data-test-id='validation-tree-header'> <div className='tree-header-title' > - <Icon image='zip' iconClassName={classNames(props.selectedNode === nodeFilters.ALL ? 'selected' : '', 'header-icon')} /> + <SVGIcon name='zip' color={props.selectedNode === nodeFilters.ALL ? 'primary' : ''} iconClassName='header-icon' /> <span className={classNames({'tree-header-title-text' : true, 'tree-header-title-selected' : props.selectedNode === nodeFilters.ALL})}>{i18n(`HEAT${hasErrors ? ' (Draft)' : ''}`)}</span> </div> @@ -200,12 +199,13 @@ class HeatMessageBoard extends Component { } renderError(error) { let rand = Math.random() * (3000 - 1) + 1; + console.log(this.props.selectedNode ); return ( <div key={error.name + error.errorMessage + error.parentName + rand} className='error-item' data-test-id='validation-error'> {error.level === errorLevels.WARNING ? - <SVGIcon name='exclamationTriangleLine' iconClassName='large' /> : <Icon image='error-lg' /> } + <SVGIcon name='exclamationTriangleLine' iconClassName='large' color='warning' /> : <SVGIcon iconClassName='large' color='negative' /> } <span className='error-item-file-type'> { (this.props.selectedNode === nodeFilters.ALL) ? @@ -217,7 +217,7 @@ class HeatMessageBoard extends Component { {i18n(error.errorMessage)} </span> </span> : - i18n(error.errorMesage) + i18n(error.errorMessage) } </span> </div> @@ -234,18 +234,14 @@ class ErrorsAndWarningsCount extends Component { if (!errors) { return null; } - let errIcon = 'error'; let {size} = this.props; - if (size && size === 'large') { - errIcon += '-lg'; - } return (<div className='counters'> {(errors.errorCount > 0) && <div className='counter'> - <Icon image={errIcon} iconClassName='counter-icon'/> - <div className={'error-text ' + (size ? size : '')} data-test-id='validation-error-count'>{errors.errorCount}</div> + <SVGIcon name='error' color='negative' iconClassName={size}/> + <div className={'error-text ' + (size ? size : '')} data-test-id='validation-error-count'>={errors.errorCount}</div> </div>} {(errors.warningCount > 0) && <div className='counter'> - <SVGIcon name='exclamationTriangleLine' iconClassName={size} /> + <SVGIcon name='exclamationTriangleLine' iconClassName={size} color='warning'/> <div className={'warning-text ' + (size ? size : '')} data-test-id='validation-warning-count'>{errors.warningCount}</div> </div>} </div>); diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js new file mode 100644 index 0000000000..2483d0aaa2 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js @@ -0,0 +1,6 @@ + +import Validator from 'nfvo-utils/Validator.js'; + +export const imageCustomValidations = { + 'version': value => Validator.validate('version', value, [{type: 'required', data: true}]) +}; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js index 49d891c9df..5c81f05e80 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js @@ -54,9 +54,12 @@ const mapActionsToProps = (dispatch, {softwareProductId, componentId, version}) onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.IMAGE_EDIT_FORM}), onSubmit: ({data, qdata}) => SoftwareProductComponentsImageActionHelper.saveImageDataAndQuestionnaire(dispatch, {softwareProductId, componentId, version, data, qdata}), onCancel: () => SoftwareProductComponentsImageActionHelper.closeImageEditor(dispatch), - onValidateForm: () => ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM), - onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, - qName: IMAGE_QUESTIONNAIRE}), + onValidateForm: customValidations => { + ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM); + ValidationHelper.qValidateForm(dispatch, IMAGE_QUESTIONNAIRE, customValidations); + }, + onQDataChanged: (deltaData, customValidations) => ValidationHelper.qDataChanged(dispatch, {deltaData, + qName: IMAGE_QUESTIONNAIRE, customValidations}), }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js index 0ab785a97f..7c357429e5 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js @@ -30,7 +30,7 @@ export default (state = {}, action) => { 'fileName' : { isValid: true, errorText: '', - validations: [{type: 'required', data: true}, {type: 'validateName', data: true}] + validations: [{type: 'required', data: true}] } }, formName: forms.IMAGE_EDIT_FORM diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx index 300f8edcc3..7c1a3f5b55 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx @@ -20,6 +20,7 @@ import Form from 'nfvo-components/input/validation/Form.jsx'; import FileDetails from './imagesEditorComponents/FileDetails.jsx'; import ImageDetails from './imagesEditorComponents/ImageDetails.jsx'; +import {imageCustomValidations} from './ImageValidations.js'; class SoftwareProductComponentsImageEditorView extends React.Component { static propTypes = { @@ -44,7 +45,7 @@ class SoftwareProductComponentsImageEditorView extends React.Component { isValid={isFormValid} formReady={formReady} submitButtonText={editingMode ? i18n('Save') : i18n('Create')} - onValidateForm={() => onValidateForm() } + onValidateForm={() => onValidateForm(imageCustomValidations) } className='vsp-components-image-editor'> <div className='editor-data'> <FileDetails @@ -56,7 +57,7 @@ class SoftwareProductComponentsImageEditorView extends React.Component { isManual={isManual} dataMap={dataMap} onQDataChanged={onQDataChanged}/> - {editingMode && <ImageDetails dataMap={dataMap}qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>} + {editingMode && <ImageDetails dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>} </div> </Form>} </div> diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx index ca58b697a2..2e9ab417d8 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx @@ -40,6 +40,7 @@ const FileDetails = ({editingMode, fileName, onDataChanged, isManual, dataMap, o type='text' className='image-filename'/> </GridItem> + {!editingMode && <div className='note-text'>{i18n('After image creation you must go to Edit Image and add File Version')}</div>} {editingMode && <Version isManual={isManual} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>} {editingMode && <Format isManual={isManual} qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged}/>} </GridSection> diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx index 3cac9a51b8..7dd577b8c9 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx @@ -17,6 +17,7 @@ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Input from 'nfvo-components/input/validation/Input.jsx'; import GridItem from 'nfvo-components/grid/GridItem.jsx'; +import {imageCustomValidations} from '../ImageValidations.js'; const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => { @@ -28,7 +29,8 @@ const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => { type='text' className='image-version' label={i18n('Version')} - onChange={(version) => onQDataChanged({'version' : version})} + isRequired={true} + onChange={(version) => onQDataChanged({'version' : version}, {'version' : imageCustomValidations['version']})} isValid={qgenericFieldInfo['version'].isValid} errorText={qgenericFieldInfo['version'].errorText} value={dataMap['version']}/> diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx index 9ae9e359b0..8a82f54901 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx @@ -50,6 +50,7 @@ const pointers = [ added: 'Please describe.' } ]; +//TODO check for buttons const TextAreaItem = ({item, toggle, expanded, genericFieldInfo, dataMap, onQDataChanged}) => ( <GridItem colSpan={3} key={item.key} > diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx index 36c1728ef3..2d5a965c40 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx @@ -15,10 +15,8 @@ */ import React, {Component, PropTypes} from 'react'; import Dropzone from 'react-dropzone'; -import ButtonGroup from 'react-bootstrap/lib/ButtonGroup.js'; -import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar.js'; -import Button from 'react-bootstrap/lib/Button.js'; -import i18n from 'nfvo-utils/i18n/i18n.js'; +import Button from 'sdc-ui/lib/react/Button.js'; +import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx'; import {fileTypes, type2Title, type2Name} from './SoftwareProductComponentsMonitoringConstants.js'; @@ -59,7 +57,7 @@ class SoftwareProductComponentsMonitoringView extends Component { let typeDisplayName = type2Title[type]; return ( <Dropzone - className={`snmp-dropzone ${this.state.dragging ? 'active-dragging' : ''}`} + className={`dropzone ${this.state.dragging ? 'active-dragging' : ''}`} onDrop={(acceptedFiles, rejectedFiles) => this.handleImport(acceptedFiles, rejectedFiles, {isReadOnlyMode, type, refAndName})} onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)} onDragLeave={() => this.setState({dragging:false})} @@ -71,7 +69,7 @@ class SoftwareProductComponentsMonitoringView extends Component { disabled> <div className='draggable-wrapper'> <div className='section-title'>{typeDisplayName}</div> - {fileName ? this.renderUploadedFileName(fileName, type) : this.renderUploadButton(refAndName)} + {fileName ? this.renderUploadedFileName(fileName, type, isReadOnlyMode) : this.renderUploadButton(refAndName)} </div> </Dropzone> ); @@ -80,25 +78,32 @@ class SoftwareProductComponentsMonitoringView extends Component { renderUploadButton(refAndName) { let {isReadOnlyMode} = this.props; return ( - <div - className={`software-product-landing-view-top-block-col-upl${isReadOnlyMode ? ' disabled' : ''}`}> - <div className='drag-text'>{i18n('Drag & drop for upload')}</div> - <div className='or-text'>{i18n('or')}</div> - <div className='upload-btn primary-btn' data-test-id={`monitoring-upload-${refAndName}`} onClick={() => this.refs[refAndName].open()}> - <span className='primary-btn-text'>{i18n('Select file')}</span> - </div> - </div> + <DraggableUploadFileBox + dataTestId={`monitoring-upload-${refAndName}`} + className='software-product-landing-view-top-block-col-upl' + isReadOnlyMode={isReadOnlyMode} + onClick={() => this.refs[refAndName].open()}/> ); } - renderUploadedFileName(filename, type) { + renderUploadedFileName(filename, type, isReadOnlyMode) { return ( - <ButtonToolbar> - <ButtonGroup> - <Button disabled>{filename}</Button> - <Button data-test-id={`monitoring-delete-${type}`} className='delete-button' onClick={()=>this.props.onDeleteFile(type)}>X</Button> - </ButtonGroup> - </ButtonToolbar> + <div className='monitoring-file'> + <Button + color='white' + disabled={true} + className='filename'> + {filename} + </Button> + + <Button + color='gray' + data-test-id={`monitoring-delete-${type}`} + disabled={isReadOnlyMode} + onClick={()=>this.props.onDeleteFile(type)} + iconName='close' + className='delete'/> + </div> ); } diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx index 18f2ee129c..87abaf4978 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx @@ -17,6 +17,7 @@ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Dropzone from 'react-dropzone'; +import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx'; import {optionsInputValues as ComponentProcessesOptionsInputValues} from './SoftwareProductComponentProcessesConstants.js'; import Form from 'nfvo-components/input/validation/Form.jsx'; import Input from 'nfvo-components/input/validation/Input.jsx'; @@ -31,17 +32,6 @@ const SoftwareProductProcessEditorPropType = React.PropTypes.shape({ type: React.PropTypes.string }); -const FileUploadBox = ({onClick}) => { - return ( - <div className='file-upload-box'> - <div className='drag-text'>{i18n('Drag & drop for upload')}</div> - <div className='or-text'>{i18n('or')}</div> - <div className='upload-btn primary-btn' onClick={onClick}> - <span className='primary-btn-text'>{i18n('Select file')}</span> - </div> - </div> - ); -}; class SoftwareProductProcessesEditorView extends React.Component { @@ -99,7 +89,7 @@ class SoftwareProductProcessesEditorView extends React.Component { type='text'/> </GridItem> <GridItem colSpan={2}> - <FileUploadBox onClick={() => this.refs.processEditorFileInput.open()} /> + <DraggableUploadFileBox isReadOnlyMode={isReadOnlyMode} className='file-upload-box' onClick={() => this.refs.processEditorFileInput.open()} /> </GridItem> </GridSection> <GridSection> diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx index d3738e3ea4..7ffbeda4dc 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx @@ -19,7 +19,7 @@ import Dropzone from 'react-dropzone'; import i18n from 'nfvo-utils/i18n/i18n.js'; - +import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import SoftwareProductComponentsList from '../components/SoftwareProductComponentsList.js'; @@ -128,14 +128,11 @@ class SoftwareProductLandingPageView extends React.Component { </div> </div> </div> - <div - className={classnames('software-product-landing-view-top-block-col-upl', {'disabled': isReadOnlyMode})}> - <div className='drag-text'>{i18n('Drag & drop for upload')}</div> - <div className='or-text'>{i18n('or')}</div> - <div data-test-id='upload-btn' className='upload-btn primary-btn' onClick={() => this.refs.fileInput.open()}> - <span className='primary-btn-text'>{i18n('Select file')}</span> - </div> - </div> + <DraggableUploadFileBox + dataTestId='upload-btn' + isReadOnlyMode={isReadOnlyMode} + className={classnames('software-product-landing-view-top-block-col-upl', {'disabled': isReadOnlyMode})} + onClick={() => this.refs.fileInput.open()}/> </div> </div> ); @@ -229,7 +226,7 @@ const ProductSummary = ({currentSoftwareProduct, onDetailsSelect}) => { const LicenseAgreement = ({licenseAgreementName}) => { if (!licenseAgreementName) { - return (<div className='missing-license'><SVGIcon name='exclamationTriangleFull'/><div className='warning-text'>{i18n('Missing')}</div></div>); + return (<div className='missing-license'><SVGIcon color='warning' name='exclamationTriangleFull'/><div className='warning-text'>{i18n('Missing')}</div></div>); } return <div>{licenseAgreementName}</div>; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx index 137e4a2b4e..0df36cf65d 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx @@ -17,6 +17,7 @@ import React from 'react'; import Dropzone from 'react-dropzone'; import classnames from 'classnames'; +import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx'; import i18n from 'nfvo-utils/i18n/i18n.js'; import {optionsInputValues as ProcessesOptionsInputValues} from './SoftwareProductProcessesConstants.js'; import Form from 'nfvo-components/input/validation/Form.jsx'; @@ -32,17 +33,6 @@ const SoftwareProductProcessEditorPropType = React.PropTypes.shape({ type: React.PropTypes.string }); -const FileUploadBox = ({onClick}) => { - return ( - <div className='file-upload-box'> - <div className='drag-text'>{i18n('Drag & drop for upload')}</div> - <div className='or-text'>{i18n('or')}</div> - <div className='upload-btn primary-btn' onClick={onClick}> - <span className='primary-btn-text'>{i18n('Select file')}</span> - </div> - </div> - ); -}; class SoftwareProductProcessesEditorView extends React.Component { @@ -101,7 +91,7 @@ class SoftwareProductProcessesEditorView extends React.Component { type='text'/> </GridItem> <GridItem colSpan={2}> - <FileUploadBox onClick={() => this.refs.processEditorFileInput.open()}/> + <DraggableUploadFileBox isReadOnlyMode={isReadOnlyMode} className='file-upload-box' onClick={() => this.refs.processEditorFileInput.open()}/> </GridItem> </GridSection> <GridSection> diff --git a/openecomp-ui/test-utils/MockSVGIcon.js b/openecomp-ui/test-utils/MockSVGIcon.js new file mode 100644 index 0000000000..6ce76cf91a --- /dev/null +++ b/openecomp-ui/test-utils/MockSVGIcon.js @@ -0,0 +1,17 @@ +import React from 'react'; +//import ReactDOMServer from 'react-dom/server'; + +const SVGIcon = ({name, onClick, label, className, iconClassName, labelClassName, labelPosition, color, disabled, ...other}) => { + let colorClass = (color !== '') ? '__' + color : ''; + let classes = `svg-icon-wrapper ${iconClassName} ${className} ${colorClass} ${onClick ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${labelPosition}`; + + let iconMock = ( + <div {...other} onClick={onClick} className={classes}> + <span className={`svg-icon __${name} ${disabled ? 'disabled' : ''}`} /> + {label && <span className={`svg-icon-label ${labelClassName}`}>{label}</span>} + </div> + ); +// console.log(ReactDOMServer.renderToStaticMarkup(iconMock)); + return iconMock; +}; +export default SVGIcon; diff --git a/openecomp-ui/test-utils/factories/licenseModel/LimitFactories.js b/openecomp-ui/test-utils/factories/licenseModel/LimitFactories.js index a08e7e6355..5ad8b12228 100644 --- a/openecomp-ui/test-utils/factories/licenseModel/LimitFactories.js +++ b/openecomp-ui/test-utils/factories/licenseModel/LimitFactories.js @@ -19,20 +19,20 @@ import {limitType} from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConst import IdMixin from 'test-utils/factories/mixins/IdMixin.js'; Factory.define('LimitBaseFactory') - .attrs({ + .attrs({ name: 'SpLimit1', type: limitType.SERVICE_PROVIDER, description: 'fgfg', - metric: 'CPU', value: 45, - unit: 55, aggregationFunction: 'Peak', - time: 'Day' + time: 'Day' }); export const LimitPostFactory = new Factory() + .attrs({metric: {choice: 'BWDT', other: ''}, unit: {choice: 'GB', other: ''}}) .extend('LimitBaseFactory'); export const LimitItemFactory = new Factory() + .attrs({metric: 'BWDT', unit: 'GB'}) .extend('LimitBaseFactory') - .extend(IdMixin); + .extend(IdMixin); diff --git a/openecomp-ui/test/licenseModel/entitlementPools/test.js b/openecomp-ui/test/licenseModel/entitlementPools/test.js index 911fb011f4..f5415239ad 100644 --- a/openecomp-ui/test/licenseModel/entitlementPools/test.js +++ b/openecomp-ui/test/licenseModel/entitlementPools/test.js @@ -21,6 +21,7 @@ import EntitlementPoolsActionHelper from 'sdc-app/onboarding/licenseModel/entitl import {EntitlementPoolStoreFactory, EntitlementPoolPostFactory} from 'test-utils/factories/licenseModel/EntitlementPoolFactories.js'; import VersionControllerUtilsFactory from 'test-utils/factories/softwareProduct/VersionControllerUtilsFactory.js'; import {LimitItemFactory, LimitPostFactory} from 'test-utils/factories/licenseModel/LimitFactories.js'; +import {getStrValue} from 'nfvo-utils/getValue.js'; describe('Entitlement Pools Module Tests', function () { @@ -165,7 +166,7 @@ describe('Entitlement Pools Module Tests', function () { it('Load Limits List', () => { - const limitsList = LimitItemFactory.buildList(3); + const limitsList = LimitItemFactory.buildList(3); deepFreeze(limitsList); const store = storeCreator(); deepFreeze(store.getState()); @@ -190,8 +191,12 @@ describe('Entitlement Pools Module Tests', function () { deepFreeze(store.getState()); const limitToAdd = LimitPostFactory.build(); + let limitFromBE = {...limitToAdd}; + limitFromBE.metric = getStrValue(limitFromBE.metric); + limitFromBE.unit = getStrValue(limitFromBE.unit); deepFreeze(limitToAdd); + deepFreeze(limitFromBE); const LimitIdFromResponse = 'ADDED_ID'; const limitAddedItem = {...limitToAdd, id: LimitIdFromResponse}; @@ -202,7 +207,7 @@ describe('Entitlement Pools Module Tests', function () { mockRest.addHandler('post', ({data, options, baseUrl}) => { expect(baseUrl).toEqual(`/onboarding-api/v1.0/vendor-license-models/${LICENSE_MODEL_ID}/versions/${version.id}/entitlement-pools/${entitlementPool.id}/limits`); - expect(data).toEqual(limitToAdd); + expect(data).toEqual(limitFromBE); expect(options).toEqual(undefined); return { returnCode: 'OK', @@ -220,7 +225,7 @@ describe('Entitlement Pools Module Tests', function () { return EntitlementPoolsActionHelper.submitLimit(store.dispatch, { licenseModelId: LICENSE_MODEL_ID, - version, + version, entitlementPool, limit: limitToAdd } @@ -232,9 +237,9 @@ describe('Entitlement Pools Module Tests', function () { it('Delete Limit', () => { - const limitsList = LimitItemFactory.buildList(1); + const limitsList = LimitItemFactory.buildList(1); deepFreeze(limitsList); - + const store = storeCreator({ licenseModel: { entitlementPool: { @@ -279,7 +284,7 @@ describe('Entitlement Pools Module Tests', function () { it('Update Limit', () => { - const limitsList = LimitItemFactory.buildList(1); + const limitsList = LimitItemFactory.buildList(1); deepFreeze(limitsList); const entitlementPool = EntitlementPoolStoreFactory.build(); const store = storeCreator({ @@ -294,16 +299,20 @@ describe('Entitlement Pools Module Tests', function () { deepFreeze(store.getState()); - + const previousData = limitsList[0]; + deepFreeze(previousData); const limitId = limitsList[0].id; - - const updatedLimit = {...previousData, name: 'updatedLimit'}; - deepFreeze(updatedLimit); + + let updatedLimit = {...previousData, name: 'updatedLimit'}; + const updatedLimitForPut = {...updatedLimit, id: undefined}; + updatedLimit.metric = {choice: updatedLimit.metric, other: ''}; + updatedLimit.unit = {choice: updatedLimit.unit, other: ''}; + deepFreeze(updatedLimit); - const expectedStore = cloneAndSet(store.getState(), 'licenseModel.entitlementPool.entitlementPoolEditor.limitsList', [updatedLimit]); + const expectedStore = cloneAndSet(store.getState(), 'licenseModel.entitlementPool.entitlementPoolEditor.limitsList', [updatedLimitForPut]); mockRest.addHandler('put', ({data, options, baseUrl}) => { @@ -317,13 +326,13 @@ describe('Entitlement Pools Module Tests', function () { expect(baseUrl).toEqual(`/onboarding-api/v1.0/vendor-license-models/${LICENSE_MODEL_ID}/versions/${version.id}/entitlement-pools/${entitlementPool.id}/limits`); expect(data).toEqual(undefined); expect(options).toEqual(undefined); - return {results: [updatedLimit]}; + return {results: [updatedLimitForPut]}; }); return EntitlementPoolsActionHelper.submitLimit(store.dispatch, { licenseModelId: LICENSE_MODEL_ID, - version, + version, entitlementPool, limit: updatedLimit } diff --git a/openecomp-ui/test/licenseModel/licenseKeyGroups/test.js b/openecomp-ui/test/licenseModel/licenseKeyGroups/test.js index 77fcc00694..739e266d7f 100644 --- a/openecomp-ui/test/licenseModel/licenseKeyGroups/test.js +++ b/openecomp-ui/test/licenseModel/licenseKeyGroups/test.js @@ -22,6 +22,7 @@ import {LicenseKeyGroupStoreFactory, LicenseKeyGroupPostFactory} from 'test-util import LicenseKeyGroupsActionHelper from 'sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js'; import VersionControllerUtilsFactory from 'test-utils/factories/softwareProduct/VersionControllerUtilsFactory.js'; import {LimitItemFactory, LimitPostFactory} from 'test-utils/factories/licenseModel/LimitFactories.js'; +import {getStrValue} from 'nfvo-utils/getValue.js'; describe('License Key Groups Module Tests', function () { @@ -160,7 +161,7 @@ describe('License Key Groups Module Tests', function () { it('Load Limits List', () => { - const limitsList = LimitItemFactory.buildList(3); + const limitsList = LimitItemFactory.buildList(3); deepFreeze(limitsList); const store = storeCreator(); deepFreeze(store.getState()); @@ -185,8 +186,12 @@ describe('License Key Groups Module Tests', function () { deepFreeze(store.getState()); const limitToAdd = LimitPostFactory.build(); + let limitFromBE = {...limitToAdd}; + limitFromBE.metric = getStrValue(limitFromBE.metric); + limitFromBE.unit = getStrValue(limitFromBE.unit); deepFreeze(limitToAdd); + deepFreeze(limitFromBE); const LimitIdFromResponse = 'ADDED_ID'; const limitAddedItem = {...limitToAdd, id: LimitIdFromResponse}; @@ -197,7 +202,7 @@ describe('License Key Groups Module Tests', function () { mockRest.addHandler('post', ({data, options, baseUrl}) => { expect(baseUrl).toEqual(`/onboarding-api/v1.0/vendor-license-models/${LICENSE_MODEL_ID}/versions/${version.id}/license-key-groups/${licenseKeyGroup.id}/limits`); - expect(data).toEqual(limitToAdd); + expect(data).toEqual(limitFromBE); expect(options).toEqual(undefined); return { returnCode: 'OK', @@ -215,7 +220,7 @@ describe('License Key Groups Module Tests', function () { return LicenseKeyGroupsActionHelper.submitLimit(store.dispatch, { licenseModelId: LICENSE_MODEL_ID, - version, + version, licenseKeyGroup, limit: limitToAdd } @@ -226,9 +231,9 @@ describe('License Key Groups Module Tests', function () { it('Delete Limit', () => { - const limitsList = LimitItemFactory.buildList(1); + const limitsList = LimitItemFactory.buildList(1); deepFreeze(limitsList); - + const store = storeCreator({ licenseModel: { entitlementPool: { @@ -273,7 +278,7 @@ describe('License Key Groups Module Tests', function () { it('Update Limit', () => { - const limitsList = LimitItemFactory.buildList(1); + const limitsList = LimitItemFactory.buildList(1); deepFreeze(limitsList); const licenseKeyGroup = LicenseKeyGroupStoreFactory.build(); const store = storeCreator({ @@ -288,16 +293,18 @@ describe('License Key Groups Module Tests', function () { deepFreeze(store.getState()); - + const previousData = limitsList[0]; deepFreeze(previousData); const limitId = limitsList[0].id; - - const updatedLimit = {...previousData, name: 'updatedLimit'}; - deepFreeze(updatedLimit); + + let updatedLimit = {...previousData, name: 'updatedLimit'}; const updatedLimitForPut = {...updatedLimit, id: undefined}; + updatedLimit.metric = {choice: updatedLimit.metric, other: ''}; + updatedLimit.unit = {choice: updatedLimit.unit, other: ''}; + deepFreeze(updatedLimit); - const expectedStore = cloneAndSet(store.getState(), 'licenseModel.licenseKeyGroup.licenseKeyGroupsEditor.limitsList', [updatedLimit]); + const expectedStore = cloneAndSet(store.getState(), 'licenseModel.licenseKeyGroup.licenseKeyGroupsEditor.limitsList', [updatedLimitForPut]); mockRest.addHandler('put', ({data, options, baseUrl}) => { @@ -311,13 +318,13 @@ describe('License Key Groups Module Tests', function () { expect(baseUrl).toEqual(`/onboarding-api/v1.0/vendor-license-models/${LICENSE_MODEL_ID}/versions/${version.id}/license-key-groups/${licenseKeyGroup.id}/limits`); expect(data).toEqual(undefined); expect(options).toEqual(undefined); - return {results: [updatedLimit]}; + return {results: [updatedLimitForPut]}; }); return LicenseKeyGroupsActionHelper.submitLimit(store.dispatch, { licenseModelId: LICENSE_MODEL_ID, - version, + version, licenseKeyGroup, limit: updatedLimit } diff --git a/openecomp-ui/test/nfvo-components/listEditor/listEditor.test.js b/openecomp-ui/test/nfvo-components/listEditor/listEditor.test.js index 029ea31889..b1127386f7 100644 --- a/openecomp-ui/test/nfvo-components/listEditor/listEditor.test.js +++ b/openecomp-ui/test/nfvo-components/listEditor/listEditor.test.js @@ -40,7 +40,7 @@ describe('listEditor Module Tests', function () { </ListEditorView> ); expect(itemView).toBeTruthy(); - let sliderIcon = TestUtils.findRenderedDOMComponentWithClass(itemView, 'sliders'); + let sliderIcon = TestUtils.findRenderedDOMComponentWithClass(itemView, '__sliders'); TestUtils.Simulate.click(sliderIcon); }); @@ -60,7 +60,7 @@ describe('listEditor Module Tests', function () { </ListEditorItemView> ); expect(itemView).toBeTruthy(); - let sliderIcon = TestUtils.findRenderedDOMComponentWithClass(itemView, 'sliders'); + let sliderIcon = TestUtils.findRenderedDOMComponentWithClass(itemView, '__sliders'); TestUtils.Simulate.click(sliderIcon); }); @@ -71,7 +71,7 @@ describe('listEditor Module Tests', function () { </ListEditorItemView> ); expect(itemView).toBeTruthy(); - let sliderIcon = TestUtils.findRenderedDOMComponentWithClass(itemView, 'trashO'); + let sliderIcon = TestUtils.findRenderedDOMComponentWithClass(itemView, '__trashO'); TestUtils.Simulate.click(sliderIcon); }); @@ -82,7 +82,8 @@ describe('listEditor Module Tests', function () { </ListEditorItemView> ); expect(itemView).toBeTruthy(); - let trashIcon = TestUtils.scryRenderedDOMComponentsWithClass(itemView, 'fa-trash-o'); + let trashIcon = TestUtils.scryRenderedDOMComponentsWithClass(itemView, '__trashOq'); expect(trashIcon).toEqual([]); }); + }); diff --git a/openecomp-ui/test/nfvo-components/panel/VersionController/versionController.test.js b/openecomp-ui/test/nfvo-components/panel/VersionController/versionController.test.js index 7d4d57eb35..e14e9b76f5 100644 --- a/openecomp-ui/test/nfvo-components/panel/VersionController/versionController.test.js +++ b/openecomp-ui/test/nfvo-components/panel/VersionController/versionController.test.js @@ -16,7 +16,7 @@ import React from 'react'; - +import ReactDOMServer from 'react-dom/server'; import TestUtils from 'react-addons-test-utils'; import {mount} from 'enzyme'; import VersionController from 'nfvo-components/panel/versionController/VersionController.jsx'; @@ -131,21 +131,21 @@ describe('versionController UI Component', () => { let callVCActionProps = { ...props, version: '1.0', callVCAction: function(){} }; let versionController = mount(<VersionController isCheckedOut={true} status={statusEnum.CHECK_OUT_STATUS} {...callVCActionProps} />); let elem = versionController.find('[data-test-id="vc-checkout-btn"]'); - let svgIcon = versionController.find('.versionControllerLockClosed'); + expect(elem).toBeTruthy(); expect(elem.length).toEqual(1); - expect(svgIcon.hasClass('disabled')).toBe(true); + expect(elem.find('.svg-icon').length).toEqual(1); + expect(elem.find('.svg-icon').hasClass('disabled')).toBe(true); }); it('Doesn\'t show the checkout button', () => { let callVCActionProps = { ...props, version: '1.0', callVCAction: function(){} }; let versionController = mount(<VersionController isCheckedOut={false} status={statusEnum.CHECK_IN_STATUS} {...callVCActionProps} />); let elem = versionController.find('[data-test-id="vc-checkout-btn"]'); - let svgIcon = versionController.find('.versionControllerLockClosed'); - expect(elem).toBeTruthy(); expect(elem.length).toBe(1); - expect(svgIcon.hasClass('disabled')).toBe(true); + expect(elem.find('.svg-icon').length).toEqual(1); + expect(elem.find('.svg-icon').hasClass('disabled')).toBe(true); }); |