aboutsummaryrefslogtreecommitdiffstats
path: root/workflow-designer-ui/src/main
diff options
context:
space:
mode:
Diffstat (limited to 'workflow-designer-ui/src/main')
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/_common.scss3
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss82
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss5
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss8
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss6
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss2
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss8
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss2
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss10
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss6
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss58
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/version/general/GeneralView.js5
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx10
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionControllerView.jsx2
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap7
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/ActionButtons.js13
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionsContainer.js1
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflow.js7
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflowView.jsx15
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowConstants.js5
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowSelector.js4
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/workflow/overview/OverviewView.jsx53
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/__snapshots__/OverviewView_snapshot-test.js.snap269
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/workflow/overview/views/WorkflowDetails.jsx32
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/workflow/workflowReducer.js12
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/workflow/workflowSelectors.js2
-rw-r--r--workflow-designer-ui/src/main/frontend/src/i18n/languages.json7
-rw-r--r--workflow-designer-ui/src/main/frontend/src/shared/components/VersionInfo/index.js2
28 files changed, 313 insertions, 323 deletions
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss b/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss
index cd5e6db5..edde536f 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss
@@ -1,4 +1,5 @@
+@import '../../node_modules/sdc-ui/lib/style/scss/common/typography.scss';
@import '../../node_modules/sdc-ui/lib/style/scss/common/variables.scss';
-@import 'common/customVariables';
@import 'common/fonts';
@import 'common/utils';
+@import 'common/customVariables';
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss
index 9472fe68..1a532c88 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss
@@ -1,90 +1,16 @@
$cursor-disabled: not-allowed !default;
$cursor-pointer: pointer;
-$heading-font-1: 28px;
-$heading-font-2: 24px;
-$heading-font-3: 20px;
-$heading-font-4: 16px;
-$heading-font-5: 14px;
-
-$body-font-1: 14px;
-$body-font-2: 13px;
-$body-font-3: 12px;
-$body-font-4: 10px;
-
-@mixin regular-font() {
- font-family: OpenSans-Regular, Arial, sans-serif;
- font-style: normal;
- font-weight: 400;
-}
-
-@mixin italic-font() {
- font-family: OpenSans-Italic, OpenSans-Regular, Arial, sans-serif;
- font-style: italic;
- font-weight: 400;
-}
-
-@mixin semibold-font() {
- font-family: OpenSans-Semibold, Arial, sans-serif;
- font-style: normal;
- font-weight: 600;
-}
-
-@mixin body-1() {
- @include regular-font;
- font-size: $body-font-1;
-}
-
-@mixin body-1-semibold() {
- @include semibold-font;
+@mixin body-1-emphasis() {
+ @include base-font-semibold;
font-size: $body-font-1;
}
-@mixin body-2() {
- @include regular-font;
- font-size: $body-font-2;
-}
-
-@mixin body-2-semibold() {
- @include semibold-font;
- font-size: $body-font-2;
-}
-
-@mixin body-3() {
- @include regular-font;
- font-size: $body-font-3;
-}
-
-@mixin body-4() {
- @include regular-font;
- font-size: $body-font-4;
-}
-
-@mixin heading-1() {
- @include regular-font;
- font-size: $heading-font-1;
-}
-
-@mixin heading-1-semibold() {
- @include semibold-font;
+@mixin heading-1-emphasis() {
+ @include base-font-semibold;
font-size: $heading-font-1;
}
-@mixin heading-4() {
- @include regular-font;
- font-size: $heading-font-4;
-}
-
-@mixin heading-4-semibold() {
- @include semibold-font;
- font-size: $heading-font-4;
-}
-
-@mixin heading-5() {
- @include regular-font;
- font-size: $heading-font-5;
-}
-
.flex {
display: flex;
flex: 1;
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss
index 3cf90bc9..7a35b38c 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss
@@ -74,6 +74,11 @@ $browserPrefixes: webkit moz o ms;
@include prefix(box-shadow, $value, $box-shadow-radius-prefix);
}
+@mixin sticky($value) {
+ position: sticky;
+ top: $value;
+}
+
@mixin text-shadow($value) {
@include prefix(text-shadow, $value, $text-shadow-radius-prefix);
}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss
index c0cc1091..6862d554 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss
@@ -23,4 +23,12 @@
pointer-events: none;
opacity: 0.4;
}
+
+ .selectable {
+ user-select: text;
+ }
+
+ .separator {
+ border-left: 1px solid $silver;
+ }
}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss
index 6cff0561..c830c028 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss
@@ -16,7 +16,7 @@
flex-direction: column;
background-color: $light-silver;
.group-name {
- @include heading-4-semibold;
+ @include heading-4-emphasis;
@include ellipsis;
display: block;
padding: 24px 12px 13px 40px;
@@ -45,13 +45,13 @@
@include ellipsis;
white-space: normal;
&.selected {
- @include body-1-semibold;
+ @include body-1-emphasis;
border-left: 4px solid $blue;
padding-left: 18px;
color: $blue;
}
&.bold-name {
- @include body-1-semibold;
+ @include body-1-emphasis;
}
}
}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss
index 6e1e9795..58f1f995 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss
@@ -22,7 +22,7 @@
text {
text-anchor: end;
- @include body-2-semibold;
+ @include body-2-emphasis;
fill: $blue;
}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss
index 45985a65..4fa8d841 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss
@@ -7,10 +7,10 @@
.group-name-wrapper {
width: 245px;
.group-name {
- @include heading-4-semibold;
+ @include heading-4-emphasis;
@include ellipsis;
display: block;
- padding: 24px 12px 13px 40px;
+ padding: 24px 12px 13px 20px;
background-color: $white;
}
}
@@ -25,6 +25,7 @@
padding-left: 16px;
padding-right: 100px;
border-left: 1px solid #eaeaea;
+ height: 45px;
.vc-separator {
border-left: 1px solid $silver;
@@ -33,12 +34,13 @@
.version-status-container {
.version-selector-more-versions {
+ @include body-1-emphasis;
color: $blue;
cursor: pointer;
}
.version-selector {
- margin-top: 0px;
+ margin-top: 0;
padding-right: 10px;
margin-right: 15px;
margin-left: 10px;
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss
index 76f3f658..ea5bba28 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss
@@ -80,7 +80,7 @@
}
&__label {
text-transform: uppercase;
- @include body-1-semibold;
+ @include body-1-emphasis;
}
&:hover {
color: $blue;
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss
index 6e8b3522..f11c2c0a 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss
@@ -1,19 +1,19 @@
.general-page {
@include body-1;
- padding: 0 131px 20px 100px;
+ padding: 35px 90px 0 50px;
background-color: #fff;
.general-page-title {
height: 110px;
line-height: 110px;
- @include heading-1-semibold;
+ @include heading-1-emphasis;
color: $dark-gray;
}
.general-page-content {
display: grid;
- grid-template-columns: 50% 50%;
- grid-gap: 30px;
+ grid-template-columns: 60% 40%;
+ grid-gap: 40px;
color: #444;
.description-part textarea {
@@ -24,7 +24,7 @@
.version-info-part {
background-color: $light-silver;
height: 200px;
- margin-top: 25px;
+ margin-top: 22px;
padding: 20px;
box-sizing: border-box;
.label {
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
index 8625403f..bc12a150 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
@@ -10,7 +10,7 @@
&__title {
height: 110px;
line-height: 110px;
- @include heading-1-semibold;
+ @include heading-1-emphasis;
color: $dark-gray;
}
@@ -26,7 +26,7 @@
&__tab {
padding: 12px;
- @include body-1-semibold;
+ @include body-1-emphasis;
@include border(1px, 1px, 0, 1px);
background-color: $light-silver;
color: $gray;
@@ -50,7 +50,7 @@
overflow-y: auto;
&__thead {
background-color: $silver;
- @include body-1-semibold;
+ @include body-1-emphasis;
position: -webkit-sticky;
position: sticky;
top: 0px;
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss
index 67883fbb..24f632db 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss
@@ -1,19 +1,32 @@
.overview-page {
@include body-1;
- padding: 25px;
+ color: $dark-gray;
+ overflow-y: auto;
+ height: 100vh;
.overview-content {
display: flex;
flex-wrap: wrap;
+ min-height: 775px;
+
+ .overview-separator {
+ border-left: 1px solid $silver;
+ }
.workflow-details {
@extend .flex;
- padding: 20px 0 0 60px;
+ @media (min-width: 1076px) {
+ @include sticky(30px);
+ }
+ max-height: 600px;
+ padding: 0 45px 0 56px;
flex-direction: column;
- .description-part textarea{
- height: 200px;
- padding-top: 5px;
+ .description-part {
+ padding-top: 20px;
+ textarea{
+ height: 200px;
+ }
}
.save-description {
@@ -31,7 +44,10 @@
margin-bottom: 5px;
}
.value {
- margin-bottom: 10px;
+ margin-bottom: 20px;
+ &:last-child {
+ margin-bottom: 0;
+ }
}
}
}
@@ -45,7 +61,7 @@
.overview-header {
@include heading-1;
text-transform: uppercase;
- margin: 35px 0 35px 60px;
+ margin: 63px 0 35px 56px;
color: $blue;
}
@@ -56,24 +72,16 @@
@mixin version-page-sub-title(){
color: $text-black;
text-transform: uppercase;
- //background-color: $white;
border-bottom: 1px solid $light-gray;
padding: 12px 0 10px 45px;
}
.versions-page-view {
- height: 100%;
- overflow: auto;
- padding: 0 35px 0 90px;
+ padding: 0 56px 0 45px;
display: flex;
flex: 2;
flex-direction: column;
- .svg-icon-wrapper {
- justify-content: flex-start;
- margin: 5px;
- }
-
.create-new-version {
@extend .text-uppercase;
display: flex;
@@ -104,7 +112,7 @@
.versions-page-list-and-tree {
display: flex;
- margin-top: 20px;
+ margin-top: 10px;
.version-tree-wrapper {
display: flex;
@@ -113,7 +121,10 @@
@include version-page-box-shadow();
.version-tree-title-container {
- @include body-1-semibold();
+ @include body-1-emphasis();
+ @media (min-width: 1076px) {
+ @include sticky(1px);
+ }
background-color: $light-silver;
display: flex;
align-items: center;
@@ -143,7 +154,6 @@
.version-list {
@extend .flex;
- color: $text-black;
flex-direction: column;
.version-list-items {
@@ -170,6 +180,7 @@
padding: 15px 30px;
@include version-page-box-shadow();
height: 70px;
+ max-height: 70px;
&:hover {
background-color: $row-hover-color;
@@ -187,8 +198,10 @@
&.header-row {
height: 40px;
background-color: $light-silver;
-
- @include body-1-semibold();
+ @media (min-width: 1076px) {
+ @include sticky(1px);
+ }
+ @include body-1-emphasis();
@include version-page-sub-title();
padding: 15px 27px;
@@ -214,11 +227,10 @@
&.item-description, &.item-last-edited {
@include body-1;
- color: $dark-gray;
}
&.item-description, &.header-description {
- flex: 2 1 0;
+ flex: 1 1 0;
}
&.item-description > .description-text {
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/general/GeneralView.js b/workflow-designer-ui/src/main/frontend/src/features/version/general/GeneralView.js
index 71d5d7d8..9b020b5a 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/general/GeneralView.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/general/GeneralView.js
@@ -16,7 +16,7 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { I18n, Translate } from 'react-redux-i18n';
+import { I18n } from 'react-redux-i18n';
import Description from 'shared/components/Description';
import { VersionInfo, LabeledValue } from 'shared/components/VersionInfo';
@@ -31,9 +31,6 @@ const GeneralView = ({ onDataChange, versionInfo, isCertified }) => {
return (
<div className="general-page">
- <div className="general-page-title">
- <Translate value="workflow.general.headerTitle" />
- </div>
<div className="general-page-content">
<Description
description={versionInfo.description}
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx
index 2ef9ef7f..82b02c6c 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx
@@ -91,7 +91,7 @@ class InputOutputView extends React.Component {
if (name.replace(/\s+/g, '')) {
const title = I18n.t('workflow.inputOutput.DELETE');
- const body = I18n.t('workflow.inputOutput.confirmDlete', {
+ const body = I18n.t('workflow.inputOutput.confirmDelete', {
name: name.replace(/s+$/g, '')
});
const closeButtonText = I18n.t('workflow.inputOutput.CANCEL');
@@ -126,11 +126,13 @@ class InputOutputView extends React.Component {
error.invalidCharacters &&
error.invalidCharacters.includes(i)
) {
- errorMessage = I18n.t('workflow.inputOutput.invalidCharacters');
+ errorMessage = I18n.t(
+ 'workflow.errorMessages.invalidCharacters'
+ );
} else if (error.alreadyExists && error.alreadyExists.includes(i)) {
- errorMessage = I18n.t('workflow.inputOutput.alreadyExists');
+ errorMessage = I18n.t('workflow.errorMessages.alreadyExists');
} else if (error.emptyName && error.emptyName.includes(i)) {
- errorMessage = I18n.t('workflow.inputOutput.emptyName');
+ errorMessage = I18n.t('workflow.errorMessages.emptyName');
}
return (
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionControllerView.jsx b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionControllerView.jsx
index 38321c31..d0188875 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionControllerView.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionControllerView.jsx
@@ -104,7 +104,7 @@ export default class VersionControllerView extends Component {
<ActionButtons
saveDisabled={isCertifyDisable || getIOErrors}
onSaveClick={this.sendSaveParamsToServer}
- certifyDisabled={isCertifyDisable}
+ certifyDisabled={isCertifyDisable || getIOErrors}
onCertifyClick={this.certifyVersion}
onUndoClick={this.undoClickCallback}
/>
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap
index f0263773..ce3cd37c 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap
@@ -26,6 +26,7 @@ exports[`Version Controller View Snapshot renders correctly 1`] = `
<div
className="version-status-container"
>
+ version
<select
className="version-selector"
data-test-id="vc-versions-select-box"
@@ -51,7 +52,7 @@ exports[`Version Controller View Snapshot renders correctly 1`] = `
className="select-action-buttons"
>
<div
- className="vc-separator"
+ className="separator vc-separator"
/>
<div
className="action-button-wrapper clickable"
@@ -78,7 +79,7 @@ exports[`Version Controller View Snapshot renders correctly 1`] = `
</div>
</div>
<div
- className="vc-separator"
+ className="separator vc-separator"
/>
<div
className="action-button-wrapper clickable"
@@ -105,7 +106,7 @@ exports[`Version Controller View Snapshot renders correctly 1`] = `
</div>
</div>
<div
- className="vc-separator"
+ className="separator vc-separator"
/>
<button
className="sdc-button sdc-button__primary certifyBtn "
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/ActionButtons.js b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/ActionButtons.js
index 224b249a..71f41406 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/ActionButtons.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/ActionButtons.js
@@ -5,22 +5,21 @@
* 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
+* http://www.apache.org/licenses/LICENSE-2.0
*
- * Unless required by applicable law or agreed to in writing, software
+* 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.
*/
+
import React from 'react';
import { I18n } from 'react-redux-i18n';
import { Button } from 'sdc-ui/lib/react';
import PropTypes from 'prop-types';
import SvgButton from 'features/version/versionController/views/SvgButton';
-const Separator = () => <div className="vc-separator" />;
-
const ActionButtons = props => {
const {
onSaveClick,
@@ -33,7 +32,7 @@ const ActionButtons = props => {
<div className="save-submit-cancel-container">
<div className="action-buttons">
<div className="select-action-buttons">
- <Separator />
+ <div className={'separator vc-separator'} />
<SvgButton
dataTestId="vc-save-btn"
name="version-controller-save"
@@ -41,7 +40,7 @@ const ActionButtons = props => {
disabled={saveDisabled}
onClick={onSaveClick}
/>
- <Separator />
+ <div className={'separator vc-separator'} />
<SvgButton
dataTestId="vc-undo-btn"
name="version-controller-undo"
@@ -49,7 +48,7 @@ const ActionButtons = props => {
disabled={certifyDisabled}
onClick={onUndoClick}
/>
- <Separator />
+ <div className={'separator vc-separator'} />
<Button
className="certifyBtn"
btnType="primary"
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionsContainer.js b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionsContainer.js
index 13266954..374e565a 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionsContainer.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionsContainer.js
@@ -29,6 +29,7 @@ const VersionContainer = props => {
return (
<div className="version-section-wrapper">
<div className="version-status-container">
+ {I18n.t('workflow.version')}
<VersionSelect
currentWorkflowVersion={currentWorkflowVersion}
viewableVersions={viewableVersions}
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflow.js b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflow.js
index ece4e5e1..e7b3c325 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflow.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflow.js
@@ -26,7 +26,8 @@ import {
} from 'features/workflow/workflowSelectors';
import {
inputChangeAction,
- submitWorkflowAction
+ submitWorkflowAction,
+ putNameError
} from 'features/workflow/create/createWorkflowConstants';
function mapStateToProps(state) {
@@ -34,7 +35,8 @@ function mapStateToProps(state) {
translation: i18nSelector(state),
workflowDescription: getWorkflowDescription(state),
workflowName: getWorkflowName(state),
- workflowParams: getWorkflowParams(state)
+ workflowParams: getWorkflowParams(state),
+ errorMessage: state.workflow.data.error
};
}
@@ -45,6 +47,7 @@ function mapDispatchToProps(dispatch) {
dispatch(hideModalAction());
},
closeCreateWorkflowModal: () => dispatch(hideModalAction()),
+ putNameError: () => dispatch(putNameError()),
workflowInputChange: payload => dispatch(inputChangeAction(payload))
};
}
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflowView.jsx b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflowView.jsx
index de6089d4..5b091322 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflowView.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflowView.jsx
@@ -27,12 +27,18 @@ const CreateWorkflowView = props => {
submitWorkflow,
closeCreateWorkflowModal,
workflowParams,
- history
+ history,
+ errorMessage,
+ putNameError
} = props;
function handleSubmitForm(e) {
e.preventDefault();
- submitWorkflow({ ...workflowParams, history });
+ if (workflowParams.name) {
+ submitWorkflow({ ...workflowParams, history });
+ } else {
+ putNameError();
+ }
}
return (
@@ -49,6 +55,7 @@ const CreateWorkflowView = props => {
name: val
})
}
+ errorMessage={errorMessage}
isRequired
/>
<Description
@@ -79,7 +86,9 @@ CreateWorkflowView.propTypes = {
workflowName: PropTypes.string,
closeCreateWorkflowModal: PropTypes.func,
workflowParams: PropTypes.object,
- history: PropTypes.object
+ history: PropTypes.object,
+ errorMessage: PropTypes.string,
+ putNameError: PropTypes.func
};
CreateWorkflowView.defaultProps = {
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowConstants.js b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowConstants.js
index a36e7efc..fc67605f 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowConstants.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowConstants.js
@@ -20,6 +20,7 @@ export const NEW_VERSION = {
};
export const WORKFLOW_INPUT_CHANGE = 'createWorkflow/INPUT_CHANGE';
export const SUBMIT_WORKFLOW = 'createWorkflow/SUBMIT_WORKFLOW';
+export const EMPTY_NAME_ERROR = 'createWorkflow/EMPTY_NAME_ERROR';
export const inputChangeAction = payload => ({
type: WORKFLOW_INPUT_CHANGE,
@@ -30,3 +31,7 @@ export const submitWorkflowAction = payload => ({
type: SUBMIT_WORKFLOW,
payload
});
+
+export const putNameError = () => ({
+ type: EMPTY_NAME_ERROR
+});
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowSelector.js b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowSelector.js
index ee947f8d..01f52fc6 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowSelector.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowSelector.js
@@ -15,12 +15,12 @@
*/
import { createSelector } from 'reselect';
import {
- getWorkflowName,
+ getTrimWorkflowName,
getWorkflowDescription
} from 'features/workflow/workflowSelectors';
export const getWorkflowParams = createSelector(
- getWorkflowName,
+ getTrimWorkflowName,
getWorkflowDescription,
(name, description) => {
return {
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/OverviewView.jsx b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/OverviewView.jsx
index f02b40b0..d0bbdef5 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/OverviewView.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/OverviewView.jsx
@@ -34,7 +34,8 @@ class OverviewView extends Component {
isVersionsCertifies: PropTypes.bool,
location: PropTypes.object,
match: PropTypes.object,
- updateWorkflow: PropTypes.func
+ updateWorkflow: PropTypes.func,
+ workflowInputChange: PropTypes.func
};
constructor(props) {
@@ -67,6 +68,11 @@ class OverviewView extends Component {
updateWorkflow({ ...workflow, ...payload });
};
+ workflowDetailsChanged = payload => {
+ const { workflowInputChange } = this.props;
+ workflowInputChange({ ...payload });
+ };
+
render() {
const {
versions,
@@ -80,28 +86,29 @@ class OverviewView extends Component {
parent: version.baseId || ''
}));
return (
- <div>
- <div className="overview-page">
- <WorkflowHeader name={workflow.name} />
- <div className="overview-content">
- <WorkflowDetails
- name={workflow.name}
- description={workflow.description}
- modified={workflow.modified}
- created={workflow.created}
- workflowId={workflow.id}
- versionId={selectedVersion}
- updateWorkflow={this.onUpdateWorkflow}
- />
- <WorkflowVersions
- nodeVersions={nodeVersions}
- versions={versions}
- onCreateVersion={this.onCreateNewVersionFromTable}
- onSelectVersion={this.onSelectVersionFromTable}
- selectedVersion={selectedVersion}
- isVersionsCertifies={isVersionsCertifies}
- />
- </div>
+ <div className="overview-page">
+ <WorkflowHeader name={workflow.name} />
+ <div className="overview-content">
+ <WorkflowDetails
+ name={workflow.name}
+ description={workflow.description}
+ modified={workflow.modified}
+ created={workflow.created}
+ workflowId={workflow.id}
+ versionId={selectedVersion}
+ workflowDetailsChanged={this.workflowDetailsChanged}
+ updateWorkflow={this.onUpdateWorkflow}
+ />
+
+ <div className={'separator overview-separator'} />
+ <WorkflowVersions
+ nodeVersions={nodeVersions}
+ versions={versions}
+ onCreateVersion={this.onCreateNewVersionFromTable}
+ onSelectVersion={this.onSelectVersionFromTable}
+ selectedVersion={selectedVersion}
+ isVersionsCertifies={isVersionsCertifies}
+ />
</div>
</div>
);
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/__snapshots__/OverviewView_snapshot-test.js.snap b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/__snapshots__/OverviewView_snapshot-test.js.snap
index 1014e4b6..dea9c1c5 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/__snapshots__/OverviewView_snapshot-test.js.snap
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/__snapshots__/OverviewView_snapshot-test.js.snap
@@ -1,190 +1,191 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`OverviewView Snapshot renders correctly 1`] = `
-<div>
+<div
+ className="overview-page"
+>
<div
- className="overview-page"
+ className="overview-header"
+ >
+ wf1
+ -
+ title
+ </div>
+ <div
+ className="overview-content"
>
<div
- className="overview-header"
- >
- wf1
- -
- title
- </div>
- <div
- className="overview-content"
+ className="workflow-details"
>
- <div
- className="workflow-details"
+ <form
+ onSubmit={[Function]}
>
- <form
- onSubmit={[Function]}
+ <div
+ className="sdc-input "
>
- <div
- className="sdc-input "
+ <label
+ className="sdc-input__label required"
+ htmlFor="workflowName"
>
- <label
- className="sdc-input__label required"
- htmlFor="workflowName"
- >
- name
- </label>
- <input
- className="sdc-input__input "
- data-test-id={undefined}
- disabled={true}
- id="workflowName"
- name="workflowName"
- onBlur={[Function]}
- onChange={[Function]}
- onKeyDown={[Function]}
- placeholder={undefined}
- readOnly={false}
- type="text"
- value="wf1"
- />
- </div>
+ name
+ </label>
+ <input
+ className="sdc-input__input "
+ data-test-id={undefined}
+ disabled={true}
+ id="workflowName"
+ name="workflowName"
+ onBlur={[Function]}
+ onChange={[Function]}
+ onKeyDown={[Function]}
+ placeholder={undefined}
+ readOnly={false}
+ type="text"
+ value="wf1"
+ />
+ </div>
+ <div
+ className="description-part"
+ >
<div
- className="description-part"
+ className="sdc-input"
>
<div
- className="sdc-input"
+ className="sdc-input__label"
>
- <div
- className="sdc-input__label"
- >
- description
- </div>
- <textarea
- className="custom-textarea field-section sdc-input__input"
- data-test-id="description"
- disabled={false}
- onChange={[Function]}
- value="desc 1"
- />
+ description
</div>
- </div>
- <div
- className="save-description"
- >
- <button
- className="sdc-button sdc-button__primary "
+ <textarea
+ className="custom-textarea field-section sdc-input__input"
+ data-test-id="description"
disabled={false}
- onClick={undefined}
- >
- saveBtn
- </button>
+ onChange={[Function]}
+ value="desc 1"
+ />
</div>
- </form>
+ </div>
<div
- className="version-info-part"
+ className="save-description"
>
-
- <div
- className="label"
- >
- Invariant UUID
- </div>
- <div
- className="value"
+ <button
+ className="sdc-button sdc-button__primary "
+ disabled={false}
+ onClick={undefined}
>
- id1
- </div>
+ saveBtn
+ </button>
+ </div>
+ </form>
+ <div
+ className="version-info-part"
+ >
+
+ <div
+ className="label"
+ >
+ Invariant UUID
+ </div>
+ <div
+ className="value selectable"
+ >
+ id1
</div>
</div>
+ </div>
+ <div
+ className="separator overview-separator"
+ />
+ <div
+ className="workflow-versions"
+ >
<div
- className="workflow-versions"
+ className="versions-page-view"
>
<div
- className="versions-page-view"
+ className="create-new-version newVersionDisabled"
>
<div
- className="create-new-version newVersionDisabled"
+ className="create-item-plus-icon"
+ onClick={[Function]}
>
<div
- className="create-item-plus-icon"
- onClick={[Function]}
+ className="svg-icon-wrapper __secondary bottom"
+ disabled={undefined}
+ onClick={undefined}
+ >
+ <test-file-stub
+ className="svg-icon __plus"
+ />
+
+ </div>
+ newVersion
+ </div>
+ </div>
+ <div
+ className="versions-page-list-and-tree"
+ >
+ <div
+ className="version-tree-wrapper"
+ >
+ <div
+ className="version-tree-title-container"
>
<div
- className="svg-icon-wrapper __secondary bottom"
- disabled={undefined}
- onClick={undefined}
+ className="version-tree-title"
>
- <test-file-stub
- className="svg-icon __plus"
- />
-
+ Version Tree
</div>
- newVersion
+ </div>
+ <div
+ className="tree-view versions-tree-container "
+ >
+ <svg
+ className="versions-tree"
+ width={200}
+ />
</div>
</div>
<div
- className="versions-page-list-and-tree"
+ className="version-list"
>
<div
- className="version-tree-wrapper"
+ className="version-item-row header-row "
+ data-test-id="version-item-row"
+ onClick={[Function]}
>
<div
- className="version-tree-title-container"
+ className="version-item-field header-field item-version"
>
- <div
- className="version-tree-title"
- >
- Version Tree
- </div>
+ Version
</div>
<div
- className="tree-view versions-tree-container "
+ className="version-item-field header-field item-status"
>
- <svg
- className="versions-tree"
- width={200}
- />
+ Status
</div>
- </div>
- <div
- className="version-list"
- >
<div
- className="version-item-row header-row "
- data-test-id="version-item-row"
- onClick={[Function]}
+ className="version-item-field header-field"
>
- <div
- className="version-item-field header-field item-version"
- >
- Version
- </div>
- <div
- className="version-item-field header-field item-status"
- >
- Status
- </div>
- <div
- className="version-item-field header-field"
+ <span
+ className={undefined}
+ style={undefined}
>
- <span
- className={undefined}
- style={undefined}
- >
- lastEdited
- </span>
- </div>
+ lastEdited
+ </span>
+ </div>
+ <div
+ className="version-item-field header-field"
+ >
<div
- className="version-item-field header-field"
+ className="description-text"
>
- <div
- className="description-text"
- >
- Description
- </div>
+ Description
</div>
</div>
- <div
- className="version-list-items"
- />
</div>
+ <div
+ className="version-list-items"
+ />
</div>
</div>
</div>
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/views/WorkflowDetails.jsx b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/views/WorkflowDetails.jsx
index 493ad650..f98368ca 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/views/WorkflowDetails.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/views/WorkflowDetails.jsx
@@ -22,24 +22,20 @@ import Description from 'shared/components/Description';
import { VersionInfo, LabeledValue } from 'shared/components/VersionInfo';
class WorkflowDetails extends Component {
- constructor(props) {
- super(props);
- this.state = {
- editWorkflow: ''
- };
- }
-
- workflowDetailsChanged = val => {
- this.setState({ editWorkflow: val });
- };
-
handleSubmitForm = e => {
e.preventDefault();
- this.props.updateWorkflow(this.state.editWorkflow);
+ const { description } = this.props;
+ this.props.updateWorkflow(description);
};
render() {
- const { name, description, workflowId, versionId } = this.props;
+ const {
+ name,
+ workflowId,
+ versionId,
+ description,
+ workflowDetailsChanged
+ } = this.props;
return (
<div className="workflow-details">
<form onSubmit={this.handleSubmitForm}>
@@ -52,10 +48,8 @@ class WorkflowDetails extends Component {
disabled
/>
<Description
- description={
- this.state.editWorkflow.description || description
- }
- onDataChange={this.workflowDetailsChanged}
+ description={description}
+ onDataChange={workflowDetailsChanged}
/>
<div className="save-description">
<Button btnType="primary">
@@ -79,9 +73,11 @@ WorkflowDetails.propTypes = {
created: PropTypes.string,
modified: PropTypes.string,
description: PropTypes.string,
+ defaultDescription: PropTypes.string,
workflowId: PropTypes.string,
versionId: PropTypes.string,
- updateWorkflow: PropTypes.func
+ updateWorkflow: PropTypes.func,
+ workflowDetailsChanged: PropTypes.func
};
export default WorkflowDetails;
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowReducer.js b/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowReducer.js
index 09e0b499..3b7e17b4 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowReducer.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowReducer.js
@@ -13,7 +13,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { WORKFLOW_INPUT_CHANGE } from 'features/workflow/create/createWorkflowConstants';
+
+import { I18n } from 'react-redux-i18n';
+import {
+ WORKFLOW_INPUT_CHANGE,
+ EMPTY_NAME_ERROR
+} from 'features/workflow/create/createWorkflowConstants';
import {
SET_WORKFLOW,
CLEAR_WORKFLOW_DATA
@@ -32,6 +37,11 @@ function workflowReducer(state = {}, action) {
return {
...action.payload
};
+ case EMPTY_NAME_ERROR:
+ return {
+ ...state,
+ error: I18n.t('workflow.errorMessages.emptyName')
+ };
default:
return state;
}
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowSelectors.js b/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowSelectors.js
index 140599b8..bef67c2f 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowSelectors.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowSelectors.js
@@ -15,6 +15,8 @@
*/
export const getWorkflowName = state =>
+ state && state.workflow.data.name && state.workflow.data.name;
+export const getTrimWorkflowName = state =>
state && state.workflow.data.name && state.workflow.data.name.trim();
export const getWorkflowId = state => state && state.workflow.data.id;
export const getWorkflowDescription = state =>
diff --git a/workflow-designer-ui/src/main/frontend/src/i18n/languages.json b/workflow-designer-ui/src/main/frontend/src/i18n/languages.json
index 7aabadae..96e64ae6 100644
--- a/workflow-designer-ui/src/main/frontend/src/i18n/languages.json
+++ b/workflow-designer-ui/src/main/frontend/src/i18n/languages.json
@@ -33,6 +33,7 @@
"created": "Created",
"modified": "Modified"
},
+ "version": "Version",
"sideBar": {
"general": "General",
"inputOutput": "Input / Output",
@@ -56,10 +57,12 @@
"outputs": "Outputs",
"DELETE": "DELETE",
"CANCEL": "CANCEL",
- "confirmDlete": "Are you sure you want to delete \"%{name}\"?",
+ "confirmDelete": "Are you sure you want to delete \"%{name}\"?"
+ },
+ "errorMessages": {
"alreadyExists": "Already exists",
"invalidCharacters": "Alphanumeric and underscore only",
- "emptyName": "Empty Name"
+ "emptyName": "Field is required"
},
"composition": {
"bpmnError" : "BPMN.IO Error"
diff --git a/workflow-designer-ui/src/main/frontend/src/shared/components/VersionInfo/index.js b/workflow-designer-ui/src/main/frontend/src/shared/components/VersionInfo/index.js
index ea2752a5..2c6bba24 100644
--- a/workflow-designer-ui/src/main/frontend/src/shared/components/VersionInfo/index.js
+++ b/workflow-designer-ui/src/main/frontend/src/shared/components/VersionInfo/index.js
@@ -18,7 +18,7 @@ import PropTypes from 'prop-types';
export const LabeledValue = ({ title, value }) => (
<React.Fragment>
<div className="label">{title}</div>
- <div className="value">{value}</div>
+ <div className="value selectable">{value}</div>
</React.Fragment>
);