.version-controller-bar {
- display: flex;
- height: 70px;
- border-bottom: 1px solid $silver;
- background-color: transparent;
-
- .group-name-wrapper {
- width: 245px;
- .group-name {
- @include heading-4-emphasis;
- @include ellipsis;
- display: block;
- padding: 24px 12px 13px 20px;
- background-color: $white;
- }
- }
-
- .vc-container {
- display: flex;
- flex: 1;
- align-self: center;
- background-color: transparent;
- justify-content: space-between;
- align-items: center;
- padding-left: 16px;
- padding-right: 100px;
- border-left: 1px solid #eaeaea;
- height: 45px;
-
- .vc-separator {
- border-left: 1px solid $silver;
- height: 37px;
- }
-
- .version-status-container {
- display: flex;
- align-items: center;
- .version-selector-more-versions {
- @include body-1-emphasis;
- color: $blue;
- cursor: pointer;
- }
-
- .version-selector {
- margin-top: 0;
- padding-right: 10px;
- margin-right: 15px;
- margin-left: 10px;
- border-color: $light-gray;
- border-radius: 2px;
- width: 243px;
- height: 30px;
- @include body-1;
- }
-
- .version-section {
- .form-group {
- margin-right: 20px;
-
- .input-options {
- border: none;
-
- .input-options-select {
- padding-top: 4px;
- }
- }
- }
- }
-
- .vc-status {
- display: flex;
- padding-left: 20px;
- border-left: $light-gray thin solid;
-
- .status-text {
- align-self: center;
- margin-top: 2px;
- @include heading-5;
- color: $dark-gray;
- }
- }
- }
-
- .save-submit-cancel-container {
- display: flex;
- align-items: center;
- height: 100%;
-
- .action-buttons, .select-action-buttons, .vc-save-section, .vc-submit-section {
- display: flex;
- align-items: center;
- height: 100%;
- cursor: $cursor-pointer;
-
- .vc-submit-button {
- border: 1px solid $dark-gray;
- width: 94px;
- height: 30px;
- border-radius: 2px;
- padding-top: 5px;
- padding-left: 10px;
- margin-left: 10px;
- margin-right: 10px;
-
- &:hover:not(.disabled) {
- cursor: pointer;
- background-color: $silver;
- }
-
- &.disabled {
- border-color: $light-gray;
- }
-
- .vc-v-submit {
- width: 11px;
- height: 8px;
- margin-right: 10px;
- position: relative;
- top: -1px;
- }
- }
-
- .certifyBtn {
- margin-left: 20px;
- }
-
- .version-control-buttons {
- display: flex;
- }
-
- .action-button-wrapper {
- display: flex;
- align-items: center;
- height: 70px;
- padding: 10px;
-
- &:hover {
- background-color: $silver;
- }
-
- &:active {
- background-color: $light-gray;
- }
-
- .action-buttons-svg {
- padding-left: 10px;
- padding-right: 10px;
-
- .svg-icon {
- fill: $text-black;
- height: 20px;
-
- &, &.__version-controller-save { width: 20px; }
- &.__version-controller-permissions { width: 32px; }
- &.__version-controller-undo, &.__version-controller-revert { width: 20px; }
- &.__version-controller-sync, &.__version-controller-commit { width: 28px; }
- }
- }
-
- }
-
- .action-button-label {
- @include body-4;
- display: block;
- height: 1em;
- margin-top: 5px;
- margin-bottom: 0;
- }
-
- }
- }
- }
+ display: flex;
+ height: 70px;
+ border-bottom: 1px solid $silver;
+ background-color: transparent;
+ justify-content: space-between;
+ .group-name-wrapper {
+ width: 245px;
+ .group-name {
+ @include heading-4-emphasis;
+ @include ellipsis;
+ display: block;
+ padding: 24px 12px 13px 20px;
+ background-color: $white;
+ }
+ }
+
+ .vc-container {
+ display: flex;
+ flex: 1;
+ align-self: center;
+ background-color: transparent;
+ justify-content: space-between;
+ align-items: center;
+ padding-left: 16px;
+ padding-right: 100px;
+ border-left: 1px solid #eaeaea;
+ height: 45px;
+ &.vs-container-operation {
+ flex: inherit;
+ }
+ .vc-separator {
+ border-left: 1px solid $silver;
+ height: 37px;
+ }
+
+ .version-status-container {
+ display: flex;
+ align-items: center;
+ .version-selector-more-versions {
+ @include body-1-emphasis;
+ color: $blue;
+ cursor: pointer;
+ }
+
+ .version-selector {
+ margin-top: 0;
+ padding-right: 10px;
+ margin-right: 15px;
+ margin-left: 10px;
+ border-color: $light-gray;
+ border-radius: 2px;
+ width: 243px;
+ height: 30px;
+ @include body-1;
+ }
+
+ .version-section {
+ .form-group {
+ margin-right: 20px;
+
+ .input-options {
+ border: none;
+
+ .input-options-select {
+ padding-top: 4px;
+ }
+ }
+ }
+ }
+
+ .vc-status {
+ display: flex;
+ padding-left: 20px;
+ border-left: $light-gray thin solid;
+
+ .status-text {
+ align-self: center;
+ margin-top: 2px;
+ @include heading-5;
+ color: $dark-gray;
+ }
+ }
+ }
+
+ .save-submit-cancel-container {
+ display: flex;
+ align-items: center;
+ height: 100%;
+
+ .action-buttons,
+ .select-action-buttons,
+ .vc-save-section,
+ .vc-submit-section {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ cursor: $cursor-pointer;
+
+ .vc-submit-button {
+ border: 1px solid $dark-gray;
+ width: 94px;
+ height: 30px;
+ border-radius: 2px;
+ padding-top: 5px;
+ padding-left: 10px;
+ margin-left: 10px;
+ margin-right: 10px;
+
+ &:hover:not(.disabled) {
+ cursor: pointer;
+ background-color: $silver;
+ }
+
+ &.disabled {
+ border-color: $light-gray;
+ }
+
+ .vc-v-submit {
+ width: 11px;
+ height: 8px;
+ margin-right: 10px;
+ position: relative;
+ top: -1px;
+ }
+ }
+
+ .certifyBtn {
+ margin-left: 20px;
+ }
+
+ .version-control-buttons {
+ display: flex;
+ }
+
+ .action-button-wrapper {
+ display: flex;
+ align-items: center;
+ height: 70px;
+ padding: 10px;
+
+ &:hover {
+ background-color: $silver;
+ }
+
+ &:active {
+ background-color: $light-gray;
+ }
+
+ .action-buttons-svg {
+ padding-left: 10px;
+ padding-right: 10px;
+
+ .svg-icon {
+ fill: $text-black;
+ height: 20px;
+
+ &,
+ &.__version-controller-save {
+ width: 20px;
+ }
+ &.__version-controller-permissions {
+ width: 32px;
+ }
+ &.__version-controller-undo,
+ &.__version-controller-revert {
+ width: 20px;
+ }
+ &.__version-controller-sync,
+ &.__version-controller-commit {
+ width: 28px;
+ }
+ }
+ .vs-back-btn {
+ height: '35px';
+ width: '35px';
+ .svg-icon {
+ height: '35px';
+ width: '35px';
+ transform: rotate(90deg);
+ }
+ }
+ }
+ }
+
+ .action-button-label {
+ @include body-4;
+ display: block;
+ height: 1em;
+ margin-top: 5px;
+ margin-bottom: 0;
+ }
+ }
+ }
+ }
}
import { hot } from 'react-hot-loader';
import React, { Component } from 'react';
-import { Route } from 'react-router-dom';
+import { Route, withRouter } from 'react-router-dom';
import qs from 'qs';
-
+import { connect } from 'react-redux';
import { PluginPubSub } from 'shared/pubsub/plugin-pubsub';
import 'resources/scss/style.scss';
import 'bpmn-js-properties-panel/styles/properties.less';
import { routes } from 'wfapp/routes';
import { USER_ID } from 'wfapp/appConstants';
-
+import { getVersionsAction } from 'features/workflow/overview/overviewConstansts';
+import { setOperationModeAction } from 'features/version/versionConstants';
+import { setPluginContext } from './pluginContext/pluginContextActions';
+import { notificationType } from 'wfapp/pluginContext/pluginContextConstants';
const RouteWithSubRoutes = route => (
<Route
path={route.path}
/>
);
+function mapActionsToProps(dispatch) {
+ return {
+ getOverview: workflowId => {
+ dispatch(getVersionsAction(workflowId));
+ dispatch(setOperationModeAction());
+ },
+ setPluginContext: payload => dispatch(setPluginContext(payload))
+ };
+}
+
class App extends Component {
constructor(props) {
super(props);
componentDidMount() {
if (this.searchParams) {
- const { eventsClientId, parentUrl } = this.searchParams;
+ const {
+ eventsClientId,
+ parentUrl,
+ workflowId,
+ versionId
+ } = this.searchParams;
if (eventsClientId && parentUrl) {
+ this.props.setPluginContext({
+ eventsClientId,
+ parentUrl
+ });
const client = new PluginPubSub(eventsClientId, parentUrl);
-
- client.notify('READY');
+ client.notify(notificationType.READY);
+ }
+ if (workflowId && versionId) {
+ this.props.getOverview(workflowId);
+ this.props.history.push(
+ `/workflow/${workflowId}/version/${versionId}/composition`
+ );
}
}
}
}
}
-export default hot(module)(App);
+export default hot(module)(
+ withRouter(
+ connect(
+ null,
+ mapActionsToProps
+ )(App)
+ )
+);
import VersionView from 'features/version/VersionView';
import { workflowVersionFetchRequestedAction } from 'features/version/versionConstants';
+const mapStateToProps = ({ currentVersion: { operationMode } }) => {
+ return {
+ operationMode
+ };
+};
+
const mapDispatchToProps = dispatch => ({
loadSelectedVersion: payload =>
dispatch(workflowVersionFetchRequestedAction(payload))
});
export default connect(
- null,
+ mapStateToProps,
mapDispatchToProps
)(VersionView);
};
render() {
- const { match, routes, history } = this.props;
+ const { match, routes, history, operationMode } = this.props;
const groups = this.getGroups();
const activeItemId = this.getActiveItemIdProps();
return (
<div className="version-wrapper">
<VersionController
+ operationMode={operationMode}
history={history}
match={match}
key="versionControllerView"
/>
- <div className="workflow-view" key="workflowView">
- <div className="workflow-navigation-side-bar">
- <NavigationSideBar
- groups={groups}
- activeItemId={activeItemId}
- onSelect={this.onSelect}
- />
- </div>
+
+ <div
+ className={`${operationMode ? '' : 'workflow-view'}`}
+ key="workflowView">
+ {!operationMode && (
+ <div className="workflow-navigation-side-bar">
+ <NavigationSideBar
+ groups={groups}
+ activeItemId={activeItemId}
+ onSelect={this.onSelect}
+ />
+ </div>
+ )}
{routes.map((route, i) => (
<Route
key={`Version.route.${i}`}
location: PropTypes.object,
match: PropTypes.object,
routes: PropTypes.array,
- loadSelectedVersion: PropTypes.func
+ loadSelectedVersion: PropTypes.func,
+ operationMode: PropTypes.bool
};
export default VersionView;
businessObject.name = name;
}
- if (businessObject.id === PROCESS_DEFAULT_ID) {
+ if (businessObject.id === PROCESS_DEFAULT_ID || !businessObject.id) {
businessObject.id = name.toLowerCase().replace(/\s/g, '_');
}
};
export const DETAILS_CHANGED = 'workflow/version/DETAILS_CHANGED';
export const FETCH_REQUESTED_FAILED = 'workflow/version/FETCH_REQUESTED_FAILED';
export const VERSION_STATE_CHANGED = 'workflow/version/VERSION_STATE_CHANGED';
+export const SET_OPERRATION_MODE = 'workflow/version/SET_OPERRATION_MODE';
export const workflowVersionFetchRequestedAction = createAction(
FETCH_REQUESTED
payload => payload
);
+export const setOperationModeAction = createAction(SET_OPERRATION_MODE);
+
export const versionState = {
DRAFT: 'draft',
CERTIFIED: 'certified'
import { getIsCertified } from 'features/version/general/generalSelectors';
import { getIOErrors } from 'features/version/inputOutput/inputOutputSelectors';
import { getCompositionHasErrors } from 'features/version/composition/compositionSelectors';
-
+import { pluginContextSelector } from 'wfapp/pluginContext/pluginContextSelector';
function mapStateToProps(state) {
return {
workflowName: getWorkflowName(state),
hasErrors: getIOErrors(state) || getCompositionHasErrors(state),
isCertifyDisable: getIsCertified(state),
isArchive: isWorkflowArchive(state),
- currentWorkflowVersion: state.currentVersion.general
+ currentWorkflowVersion: state.currentVersion.general,
+ pluginContext: pluginContextSelector(state)
};
}
import PropTypes from 'prop-types';
import ActionButtons from 'features/version/versionController/views/ActionButtons';
+import OperationModeButtons from 'features/version/versionController/views/OperationModeButtons';
import VersionContainer from 'features/version/versionController/views/VersionsContainer';
import WorkflowTitle from 'features/version/versionController/views/WorkflowTitle';
-
+import { PluginPubSub } from 'shared/pubsub/plugin-pubsub.ts';
+import { notificationType } from 'wfapp/pluginContext/pluginContextConstants';
export default class VersionControllerView extends Component {
static propTypes = {
location: PropTypes.object,
changeVersion: PropTypes.func,
isCertifyDisable: PropTypes.bool,
hasErrors: PropTypes.bool,
- isArchive: PropTypes.bool
+ isArchive: PropTypes.bool,
+ operationMode: PropTypes.bool,
+ pluginContext: PropTypes.object
};
constructor(props) {
} = this.props;
saveParamsToServer({ params: savedParams, workflowId, workflowName });
};
-
+ handleSendMsgToCatalog = isCompeleted => {
+ const {
+ pluginContext: { eventsClientId, parentUrl }
+ } = this.props;
+ const client = new PluginPubSub(eventsClientId, parentUrl);
+ client.notify(notificationType.CLOSE, { isCompleted: isCompeleted });
+ };
certifyVersion = () => {
const {
certifyVersion,
versionsList,
hasErrors,
isCertifyDisable,
- isArchive
+ isArchive,
+ operationMode
} = this.props;
const isReadonly = isCertifyDisable || hasErrors || isArchive;
return (
<div className="version-controller-bar">
<WorkflowTitle workflowName={workflowName} />
- <div className="vc-container">
- <VersionContainer
- currentWorkflowVersion={currentWorkflowVersion}
- viewableVersions={versionsList}
- onOverviewClick={this.routeToOverview}
- onVersionSelectChange={this.versionChangeCallback}
- isArchive={isArchive}
- />
- <ActionButtons
- saveDisabled={isReadonly}
- onSaveClick={this.sendSaveParamsToServer}
- certifyDisabled={isReadonly}
- onCertifyClick={this.certifyVersion}
- onUndoClick={this.undoClickCallback}
- />
+ <div
+ className={`vc-container ${
+ operationMode ? 'vs-container-operation' : ''
+ }`}>
+ {!operationMode && (
+ <VersionContainer
+ currentWorkflowVersion={currentWorkflowVersion}
+ viewableVersions={versionsList}
+ onOverviewClick={this.routeToOverview}
+ onVersionSelectChange={this.versionChangeCallback}
+ isArchive={isArchive}
+ />
+ )}
+ {operationMode && (
+ <OperationModeButtons
+ sendMsgToCatalog={this.handleSendMsgToCatalog}
+ saveDisabled={isReadonly}
+ onSaveClick={this.sendSaveParamsToServer}
+ />
+ )}
+ {!operationMode && (
+ <ActionButtons
+ saveDisabled={isReadonly}
+ onSaveClick={this.sendSaveParamsToServer}
+ certifyDisabled={isReadonly}
+ onCertifyClick={this.certifyVersion}
+ onUndoClick={this.undoClickCallback}
+ />
+ )}
</div>
</div>
);
</div>
</div>
<div
- className="vc-container"
+ className="vc-container "
>
<div
className="version-section-wrapper"
onUndoClick,
saveDisabled
} = props;
+
return (
<div className="save-submit-cancel-container">
<div className="action-buttons">
disabled={saveDisabled}
onClick={onSaveClick}
/>
+
<div className={'separator vc-separator'} />
+
<SvgButton
dataTestId="vc-undo-btn"
name="version-controller-undo"
disabled={certifyDisabled}
onClick={onUndoClick}
/>
+
<div className={'separator vc-separator'} />
+
<Button
className="certifyBtn"
btnType="primary"
--- /dev/null
+/*
+* Copyright © 2018 European Support Limited
+*
+* 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.
+*/
+
+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 OperationModeButtons = props => {
+ const { onSaveClick, saveDisabled, sendMsgToCatalog } = props;
+ const handleCompleteMsgToCatalog = () => sendMsgToCatalog(true);
+ const handleGoBackMsgToCatalog = () => sendMsgToCatalog();
+ return (
+ <div className="save-submit-cancel-container">
+ <div className="action-buttons">
+ <div className="select-action-buttons">
+ <SvgButton
+ dataTestId="vc-save-btn"
+ name="version-controller-save"
+ tooltipText={I18n.t('buttons.saveBtn')}
+ disabled={saveDisabled}
+ onClick={onSaveClick}
+ />
+
+ <Button
+ className="certifyBtn"
+ btnType="primary"
+ onClick={handleCompleteMsgToCatalog}>
+ {I18n.t('buttons.completeBtn')}
+ </Button>
+
+ <SvgButton
+ tooltipText={I18n.t('buttons.backToCatalog')}
+ className="vs-back-btn"
+ dataTestId="vc-back-btn"
+ name="upload"
+ onClick={handleGoBackMsgToCatalog}
+ />
+ </div>
+ </div>
+ </div>
+ );
+};
+
+OperationModeButtons.propTypes = {
+ onSaveClick: PropTypes.func,
+ saveDisabled: PropTypes.bool,
+ sendMsgToCatalog: PropTypes.func
+};
+
+export default OperationModeButtons;
const SvgButton = props => {
const {
+ className = '',
name,
tooltipText,
disabled,
onClick={onClickAction}>
<div className="action-buttons-svg">
<SVGIcon
+ className={className}
label={tooltipText}
labelPosition="bottom"
labelClassName="action-button-label"
disabled: PropTypes.bool,
onClick: PropTypes.func,
dataTestId: PropTypes.string,
- actiontype: PropTypes.string
+ actiontype: PropTypes.string,
+ className: PropTypes.string
};
export default SvgButton;
--- /dev/null
+import { SET_OPERRATION_MODE } from './versionConstants';
+
+export default (state = false, action) => {
+ switch (action.type) {
+ case SET_OPERRATION_MODE:
+ return true;
+ default:
+ return state;
+ }
+};
"createBtn": "Create",
"cancelBtn": "Cancel",
"certifyBtn": "Certify",
+ "completeBtn": "Complete",
"undoBtn": "Undo",
"closeBtn": "Close",
- "okBtn": "Ok"
+ "okBtn": "Ok",
+ "backToCatalog": "Catalog"
},
"form": {
"name": "Name",
--- /dev/null
+/*
+* Copyright © 2018 European Support Limited
+*
+* 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.
+*/
+import { SET_CONTEXT } from './pluginContextConstants';
+
+export const setPluginContext = payload => ({
+ type: SET_CONTEXT,
+ payload
+});
--- /dev/null
+/*
+* Copyright © 2018 European Support Limited
+*
+* 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.
+*/
+export const SET_CONTEXT = 'pluginContext/SET_CONTEXT';
+
+export const notificationType = {
+ READY: 'READY',
+ CLOSE: 'CLOSE'
+};
--- /dev/null
+/*
+* Copyright © 2018 European Support Limited
+*
+* 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.
+*/
+import { SET_CONTEXT } from './pluginContextConstants';
+export default (state = {}, action) => {
+ switch (action.type) {
+ case SET_CONTEXT: {
+ return action.payload;
+ }
+ default:
+ return state;
+ }
+};
--- /dev/null
+/*
+* Copyright © 2018 European Support Limited
+*
+* 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.
+*/
+export const pluginContextSelector = state => state && state.pluginContext;
import workflowReducer from 'features/workflow/workflowReducer';
import compositionReducer from 'features/version/composition/compositionReducer';
import activitiesReducer from 'features/activities/activitiesReducer';
+import operationModeReducer from 'features/version/versionModeReducer';
+import pluginContextReducer from './pluginContext/pluginContextReducer';
export default combineReducers({
i18n: i18nReducer,
currentVersion: combineReducers({
general: versionReducer,
inputOutput,
- composition: compositionReducer
+ composition: compositionReducer,
+ operationMode: operationModeReducer
}),
workflow: combineReducers({
data: workflowReducer,
versions: overviewReducer
}),
+ pluginContext: pluginContextReducer,
activities: activitiesReducer,
loader,
modal
Code Review / sdc / sdc-workflow-designer.git / commitdiff