diff options
Diffstat (limited to 'workflow-designer-ui/src/main')
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> ); |