@aj-shadow/actorjs-app 0.0.0-aj-beta.221

package/project/client/components/middle/test-cases/middle-test-cases-toolbar.jsx

@@ -0,0 +1,804 @@
+
+'use strict';
+
+import MiddleFilter from '../middle-sut-fut-filter';
+import LoginStore from '../../../stores/login-store';
+import TestCasesStore from '../../../stores/test-cases-store';
+import TestCaseStore from '../../../stores/test-case-store';
+import FunctionUnderTestStore from '../../../stores/function-under-test-store';
+import SystemUnderTestStore from '../../../stores/system-under-test-store';
+import { ActionSystemUnderTestAdd, ActionSystemUnderTestDelete, ActionSystemUnderTestRepoGet } from '../../../actions/action-system-under-test/action-system-under-test';
+import { ActionFunctionUnderTestAdd, ActionFunctionUnderTestDelete } from '../../../actions/action-function-under-test';
+import { ActionTestCaseAdd, ActionTestCaseDelete, ActionTestCaseRename, ActionTestCaseMarkup, ActionTestCaseMarkupSave, ActionTestCaseMarkupCancel, ActionTestCaseMarkupCopy, ActionTestCaseExecutionStart, ActionTestCaseExecutionStop, ActionTestCaseDebugStart, ActionTestCaseClear, ActionTestCaseButtonsUpdate } from '../../../actions/action-test-case/action-test-case';
+import { ActionTestCasesSutClear, ActionTestCasesFutClear, ActionTestCasesTcClear } from '../../../actions/action-test-cases';
+import Icon from 'z-abs-complayer-bootstrap-client/client/icons-inline/icon';
+import ButtonNew from 'z-abs-complayer-bootstrap-client/client/button-new';
+import Popover from 'z-abs-complayer-bootstrap-client/client/popover';
+import ModalDialogAbstractionAdd from 'z-abs-complayer-modaldialog-client/client/modal-dialog-abstraction-add';
+import ModalDialogAbstractionProperties from 'z-abs-complayer-modaldialog-client/client/modal-dialog-abstraction-properties';
+import {RouterContext} from 'z-abs-complayer-router-client/client/react-component/router-context';
+import ReactComponentRealtime from 'z-abs-corelayer-client/client/react-component/react-component-realtime';
+import React from 'react';
+
+
+export default class MiddleTestCasesToolbar extends ReactComponentRealtime {
+  constructor(props) {
+    super(props, [TestCaseStore, TestCasesStore, SystemUnderTestStore, LoginStore]);
+    this._modalDialogAbstractionAdd = null;
+    this._modalDialogAbstractionProperties = null;
+    this.boundKeyDown = this._keyDown.bind(this);
+    this.markupDisabledOpen = false;
+    this.markupDisabledSave = true;
+    this.markupDisabledHelp = false;
+    this.markupDisabledCancel = true;
+    this.repo = null;
+  }
+  
+  static DEFAULT_MARKUP_SUT = {
+    markup: `#### ***Add a new SUT***
+  
+***Set the SUT name and select the repo in which to put it.***`,
+    markupStyle: {
+      padding:'13px 8px 0px 11px'
+    }
+  };
+  
+  static DEFAULT_MARKUP_FUT = {
+    markup: `#### ***Add a new FUT***
+  
+***Set the FUT name.***`,
+    markupStyle: {
+      padding:'13px 0px 0px 18px'
+    }
+  };
+  
+  static DEFAULT_MARKUP_TC = {
+    markup: `#### ***Add a Test Case***
+  
+***Add Actors and TestData on your own.***`,
+    markupStyle: {
+      padding:'18px 8px 0px 14px'
+    }
+  };
+  
+  didMount() {
+    window.addEventListener('keydown', this.boundKeyDown, true);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.tab, nextProps.tab)
+      || !this.shallowCompare(this.props.sut, nextProps.sut)
+      || !this.shallowCompare(this.props.fut, nextProps.fut)
+      || !this.shallowCompare(this.props.tc, nextProps.tc)
+      || !this.shallowCompare(this.state.TestCaseStore.markup, nextState.TestCaseStore.markup)
+      || !this.shallowCompare(this.state.TestCaseStore.execution, nextState.TestCaseStore.execution)
+      || !this.shallowCompare(this.state.TestCaseStore.realtimeConnection, nextState.TestCaseStore.realtimeConnection)
+      || !this.shallowCompare(this.state.TestCaseStore.buttons.debug, nextState.TestCaseStore.buttons.debug)
+      || !this.shallowCompare(this.state.TestCaseStore.buttons.general, nextState.TestCaseStore.buttons.general)
+      || !this.shallowCompare(this.state.TestCasesStore, nextState.TestCasesStore)
+      || !this.deepCompare(this.state.SystemUnderTestStore.systemUnderTests, nextState.SystemUnderTestStore.systemUnderTests)
+      || !this.shallowCompareArrayValues(this.state.SystemUnderTestStore.repos, nextState.SystemUnderTestStore.repos)
+      || !this.shallowCompare(this.state.LoginStore.login, nextState.LoginStore.login);
+  }
+  
+  willUnmount() {
+    window.removeEventListener('keydown', this.boundKeyDown, true);
+  }
+  
+  _markupOpen() {
+    this.dispatch(TestCaseStore, new ActionTestCaseMarkup());
+    this.tabNavigation('definition');
+  }
+  
+  _markupSave() {
+    this.dispatch(TestCaseStore, new ActionTestCaseMarkupSave(this.repo, this.props.sut, this.props.fut, this.props.tc));
+    this.tabNavigation('definition');
+  }
+  
+  _markupHelp() {
+    this.context.history('../documentation/markup/markup-test-case');
+  }
+  
+  _markupCancel() {
+    this.dispatch(TestCaseStore, new ActionTestCaseMarkupCancel());
+    this.tabNavigation('definition');
+  }
+  
+  _keyDown(e) {
+    if(e.ctrlKey && 'o' === e.key) {
+      if(!this.markupDisabledOpen) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        this._markupOpen();
+      }
+    }
+    else if(e.ctrlKey && e.shiftKey && '?' === e.key) {
+      if(!this.markupDisabledHelp) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        this._markupHelp();
+      }
+    }
+    else if(e.ctrlKey && e.shiftKey && 'C' === e.key) {
+      if(!this.markupDisabledCancel) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        this._markupCancel();
+      }
+    }
+    else if(e.ctrlKey && 's' === e.key) {
+      if(!this.markupDisabledSave) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        this._markupSave();
+      }
+    }
+    else if(!e.ctrlKey && 'F5' === e.key) {
+      if(TestCaseStore.EXECUTION_NOT_RUNNING === this.state.TestCaseStore.execution) {
+        const breakOnEnterRun = this.state.TestCaseStore.buttons.debug.breakOnEnterRun;
+        const breakOnLeaveRun = this.state.TestCaseStore.buttons.debug.breakOnLeaveRun;
+        const breakOnIpEvent = this.state.TestCaseStore.buttons.debug.breakOnIpEvent;
+        const breakOnGuiEvent = this.state.TestCaseStore.buttons.debug.breakOnGuiEvent;
+        const debugType = this.state.TestCaseStore.buttons.debug.debugType;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        const breakOnLines = [];
+        if(breakOnEnterRun || breakOnLeaveRun) {
+          this._getAutoBreakeLines(breakOnLines, breakOnEnterRun, breakOnLeaveRun);
+        }
+        this.dispatch(TestCaseStore, new ActionTestCaseDebugStart(this.repo, this.props.sut, this.props.fut, this.props.tc, this.state.LoginStore.login.systemUnderTestInstance, this.state.LoginStore.login.nodes, {slow:false,asService:false,breakOnEnterRun:breakOnEnterRun,breakOnLeaveRun:breakOnLeaveRun,breakOnLines:breakOnLines,breakOnIpEvent:breakOnIpEvent,breakOnGuiEvent:breakOnGuiEvent,debugType:debugType}));
+        this.tabNavigation('debug');
+      }
+    }
+    else if(e.ctrlKey && e.shiftKey && 'A' === e.key) {
+      const disabled = 'tc' === this.state.TestCasesStore.current.view;
+      if(!disabled) {
+        e.preventDefault();
+        this._add(e);
+      }
+    }
+    else if(e.ctrlKey && e.shiftKey && 'D' === e.key) {
+      const disabled = 0 === this.state.TestCasesStore.systemUnderTestsChecked.size && 0 === this.state.TestCasesStore.functionUnderTestsChecked.size && 0 === this.state.TestCasesStore.testCasesChecked.size;
+      if(!disabled) {
+        e.preventDefault();
+        this._delete(e);
+      }
+    }
+  }
+  
+  getShortText() {
+    if('none' === this.state.TestCasesStore.current.view) {
+      return 'sut';
+    }
+    else if('sut' === this.state.TestCasesStore.current.view) {
+      return 'fut';
+    }
+    else if('fut' === this.state.TestCasesStore.current.view) {
+      return 'tc';
+    } 
+  }
+  
+  getText() {
+    if('none' === this.state.TestCasesStore.current.view) {
+      return 'System Under Test';
+    }
+    else if('sut' === this.state.TestCasesStore.current.view) {
+      return 'Function Under Test';
+    }
+    else if('fut' === this.state.TestCasesStore.current.view) {
+      return 'Test Case';
+    }     
+  }
+  
+  _add(e) {
+    this._modalDialogAbstractionAdd.show();
+  }
+  
+  _delete(e) {
+    const suts = [];
+    this.state.TestCasesStore.systemUnderTestsChecked.forEach((sut) => {
+      suts.push(sut);
+    });
+    const futs = [];
+    this.state.TestCasesStore.functionUnderTestsChecked.forEach((fut) => {
+      const found = suts.find((sut) => {
+        return sut.repo === fut.repo && sut.name === fut.sut;
+      });
+      if(!found) {
+        futs.push(fut);
+      }
+    });
+    const tcs = [];
+    this.state.TestCasesStore.testCasesChecked.forEach((tc) => {
+      const found = suts.find((sut) => {
+        return sut.name === tc.sut;
+      });
+      if(!found) {
+        const foundFut = futs.find((fut) => {
+          return fut.repo === tc.repo && fut.sut === tc.sut && fut.fut === tc.fut;
+        });
+        if(!foundFut) {
+          tcs.push(tc);
+        }
+      }
+    });
+    const isCurrentSut = suts.some((sut) => {
+      return sut.name === this.props.sut;
+    });
+    const isCurrentFut = futs.some((fut) => {
+      return fut.repo === this.repo && fut.sut === this.props.sut && fut.fut === this.props.fut;
+    });
+    this.dispatch(TestCasesStore, new ActionTestCasesSutClear());
+    this.dispatch(TestCasesStore, new ActionTestCasesFutClear());
+    this.dispatch(TestCasesStore, new ActionTestCasesTcClear());
+    if(0 !== suts.length) {
+      this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestDelete(suts));
+      if(isCurrentSut) {
+        return this.context.history('');
+      }
+    }
+    if(0 !== futs.length) {
+      this.dispatch(FunctionUnderTestStore, new ActionFunctionUnderTestDelete(this.repo, this.props.sut, futs));
+      if(isCurrentFut) {
+        return this.context.history(`${this.props.sut}`);
+      }
+    }
+    if(0 !== tcs.length) {
+      this.dispatch(TestCaseStore, new ActionTestCaseDelete(tcs));
+    }
+  }
+  
+  renderNewButton() {
+    if('tc' !== this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_new" icon="icon-file-new" size="aj_btn_sm" text={this.getShortText()} colorMark="markup_color"  placement="bottom" heading="Add" content={this.getText()} shortcut="Ctrl+Shift+A" disabled={!(0 === this.state.TestCasesStore.systemUnderTestsChecked.size && 0 === this.state.TestCasesStore.functionUnderTestsChecked.size && 0 === this.state.TestCasesStore.testCasesChecked.size)}
+          onClick={(e) => {
+            this._add(e);
+          }}
+        />
+      );
+    }
+  }
+  
+  renderRemoveButton() {
+    if('tc' !== this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_remove" icon="icon-file-delete" size="aj_btn_sm" text={this.getShortText()} colorMark="markup_color" placement="bottom" heading="Delete" content={this.getText()} shortcut="Ctrl+Shift+D" disabled={0 === this.state.TestCasesStore.systemUnderTestsChecked.size && 0 === this.state.TestCasesStore.functionUnderTestsChecked.size && 0 === this.state.TestCasesStore.testCasesChecked.size}
+          onClick={(e) => {
+            this._delete(e);
+          }}
+        />
+      );
+    }
+  }
+  
+  renderButtonProperties() {
+    const enabled = (0 === this.state.TestCasesStore.systemUnderTestsChecked.size && 0 === this.state.TestCasesStore.functionUnderTestsChecked.size && 1 === this.state.TestCasesStore.testCasesChecked.size);
+    if('tc' !== this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_properties" icon="icon-file-property" size="aj_btn_sm" text={this.getShortText()} colorMark="markup_color" placement="bottom" heading="Properties" content="Test Case" shortcut="Ctrl+Shift+R" disabled={!enabled}
+          onClick={(e) => {
+            this._modalDialogAbstractionProperties.show();
+          }}
+        />
+      );
+    }
+  }
+  
+  renderButtonCopy() {
+    const enabled = (0 === this.state.TestCasesStore.systemUnderTestsChecked.size && 0 === this.state.TestCasesStore.functionUnderTestsChecked.size && 1 === this.state.TestCasesStore.testCasesChecked.size);
+    if('tc' !== this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_copy" icon="icon-markup-copy" size="aj_btn_sm" text={this.getShortText()} colorMark="markup_color" placement="bottom" heading="Copy" content="Test Case" shortcut="Ctrl+Shift+R" disabled={!enabled}
+          onClick={(e) => {
+            //this._modalDialogAbstractionProperties.show(this.state.ActorEditorStore.current.file);
+          }}
+        />
+      );
+    }
+  }
+  
+  renderMarkupOpenButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      this.markupDisabledOpen = this.state.TestCaseStore.realtimeConnection !== TestCaseStore.REALTIME_CONNECTION_OPEN || this.state.TestCaseStore.markup.definition || (TestCaseStore.EXECUTION_NOT_RUNNING !== this.state.TestCaseStore.execution);
+      return (
+        <ButtonNew id="test_case_markup_open" icon="icon-markup-open" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Open" content="Markup" shortcut="Ctrl+O" disabled={this.markupDisabledOpen}
+          onClick={(e) => {
+            this._markupOpen();
+          }}
+        />
+      );
+    }
+  }
+  
+  renderMarkupSaveButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      this.markupDisabledSave = this.state.TestCaseStore.realtimeConnection !== TestCaseStore.REALTIME_CONNECTION_OPEN || this.state.TestCaseStore.markup.content === this.state.TestCaseStore.markup.contentOriginal;
+      return (
+        <ButtonNew id="test_case_markup_save" icon="icon-markup-save" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Save" content="Markup" shortcut="Ctrl+S" disabled={this.markupDisabledSave}
+          onClick={(e) => {
+            this._markupSave();
+          }}
+        />
+      );
+    }
+  }
+  
+  renderMarkupHelpButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      this.markupDisabledHelp = this.state.TestCaseStore.markup.definition;
+      return (
+        <ButtonNew id="test_case_markup_help" icon="icon-markup-help" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Help" content="Markup" shortcut="Ctrl+?" disabled={this.markupDisabledHelp}
+          onClick={(e) => {
+            this._markupHelp();
+          }}
+        />
+      );
+    }
+  }
+  
+  renderMarkupCancelButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      this.markupDisabledCancel = !this.state.TestCaseStore.markup.definition;
+      return (
+        <ButtonNew id="test_case_markup_clear" icon="icon-markup-close" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Cancel" content="Markup" shortcut="Ctrl+Shift+C" disabled={this.markupDisabledCancel}
+          onClick={(e) => {
+            this._markupCancel();
+          }}
+        />
+      );
+    }
+  }
+  
+  renderMarkupCopyButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      this.markupDisabledCopy = this.state.TestCaseStore.realtimeConnection !== TestCaseStore.REALTIME_CONNECTION_OPEN || this.state.TestCaseStore.markup.definition || (TestCaseStore.EXECUTION_NOT_RUNNING !== this.state.TestCaseStore.execution);
+      return (
+        <ButtonNew id="test_case_markup_copy" icon="icon-markup-copy" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Copy" content="Markup" disabled={this.markupDisabledCopy}
+          onClick={(e) => {
+            this.dispatch(TestCaseStore, new ActionTestCaseMarkupCopy());
+          }}
+        />
+      );
+    }
+  }
+  
+  renderStartButton(tab, debug=false) {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      const asService = this.state.TestCaseStore.buttons.general.asService;
+      const slow = this.state.TestCaseStore.buttons.general.asService;
+      const breakOnEnterRun = debug && this.state.TestCaseStore.buttons.debug.breakOnEnterRun;
+      const breakOnLeaveRun = debug && this.state.TestCaseStore.buttons.debug.breakOnLeaveRun;
+      const breakOnIpEvent = this.state.TestCaseStore.buttons.debug.breakOnIpEvent;
+      const breakOnGuiEvent = this.state.TestCaseStore.buttons.debug.breakOnGuiEvent;
+      const debugType = this.state.TestCaseStore.buttons.debug.debugType;
+      const shortcut = debug ? 'F5' : undefined;
+      const content = `in the ${tab} tab${asService ? ', as a service' : ''}`;
+      return (
+        <ButtonNew id={`test_case_start_${tab}`} colorMark={`test_case_start_${tab}`} icon="icon-execution-play" size="aj_btn_sm" placement="bottom" heading="Run" content={content} shortcut={shortcut} disabled={this._isRunning() || this.state.LoginStore.login.systemUnderTest !== this.props.sut}
+          onClick={(e) => {
+            if(!debug) {
+              this.dispatch(TestCaseStore, new ActionTestCaseExecutionStart(this.repo, this.props.sut, this.props.fut, this.props.tc, this.state.LoginStore.login.systemUnderTestInstance, this.state.LoginStore.login.nodes, {slow:false,asService:asService}));
+            }
+            else {
+              const breakOnLines = [];
+              if(breakOnEnterRun || breakOnLeaveRun) {
+                this._getAutoBreakeLines(breakOnLines, breakOnEnterRun, breakOnLeaveRun);
+              }
+              this.dispatch(TestCaseStore, new ActionTestCaseDebugStart(this.repo, this.props.sut, this.props.fut, this.props.tc, this.state.LoginStore.login.systemUnderTestInstance, this.state.LoginStore.login.nodes, {slow:false,asService:asService,breakOnEnterRun:breakOnEnterRun,breakOnLeaveRun:breakOnLeaveRun,breakOnLines:breakOnLines,breakOnIpEvent:breakOnIpEvent,breakOnGuiEvent:breakOnGuiEvent,debugType:debugType}));
+            }
+            this.tabNavigation(tab);
+          }}
+        />
+      );
+    }
+  }
+  
+  renderPauseOnEnterRunButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_debug_enter" colorMark="test_case_debug_enter" icon="icon-debug-enter" size="aj_btn_xxs" active={this.state.TestCaseStore.buttons.debug.breakOnEnterRun} placement="bottom" heading="Break" content={'on enter *run()'}
+          onClick={(e) => {
+            if(!this._isRunning()) {
+              this.dispatch(TestCaseStore, new ActionTestCaseButtonsUpdate('debug', 'breakOnEnterRun', !this.state.TestCaseStore.buttons.debug.breakOnEnterRun));
+            }
+          }}
+        />
+      );
+    }
+  }
+  
+  renderPauseOnLeaveRunButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_debug_leave" colorMark="test_case_debug_leave" icon="icon-debug-leave" size="aj_btn_xxs" active={this.state.TestCaseStore.buttons.debug.breakOnLeaveRun} placement="bottom" heading="Break" content={'on leave *run()'}
+          onClick={(e) => {
+            if(!this._isRunning()) {
+              this.dispatch(TestCaseStore, new ActionTestCaseButtonsUpdate('debug', 'breakOnLeaveRun', !this.state.TestCaseStore.buttons.debug.breakOnLeaveRun));
+            }
+          }}
+        />
+      );
+    }
+  }
+  
+  renderPauseOnIpEventButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_debug_ip" colorMark="test_case_debug_ip" icon="icon-debug-ip" size="aj_btn_xxs" active={this.state.TestCaseStore.buttons.debug.breakOnIpEvent} placement="bottom" heading="Break" content={'on ip event'}
+          onClick={(e) => {
+            if(!this._isRunning()) {
+              this.dispatch(TestCaseStore, new ActionTestCaseButtonsUpdate('debug', 'breakOnIpEvent', !this.state.TestCaseStore.buttons.debug.breakOnIpEvent));
+            }
+          }}
+        />
+      );
+    }
+  }
+  
+  renderPauseOnGuiEventButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_debug_gui" colorMark="test_case_debug_gui" icon="icon-debug-gui" size="aj_btn_xxs" active={this.state.TestCaseStore.buttons.debug.breakOnGuiEvent} placement="bottom" heading="Break" content={'on gui event'}
+          onClick={(e) => {
+            if(!this._isRunning()) {
+              this.dispatch(TestCaseStore, new ActionTestCaseButtonsUpdate('debug', 'breakOnGuiEvent', !this.state.TestCaseStore.buttons.debug.breakOnGuiEvent));
+            }
+          }}
+        />
+      );
+    }
+  }
+  
+  renderDebugLocalButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew active={TestCaseStore.DEBUG_LOCAL === this.state.TestCaseStore.buttons.debug.debugType} size="aj_btn_xxs" placement="bottom" heading="Debugger" content={'local'}
+          onClick={(e) => {
+            if(!this._isRunning()) {
+              this.dispatch(TestCaseStore, new ActionTestCaseButtonsUpdate('debug', 'debugType', TestCaseStore.DEBUG_LOCAL));
+            }
+          }}
+        />
+      );
+    }
+  }
+  
+  renderDebugRemoteButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew active={TestCaseStore.DEBUG_REMOTE === this.state.TestCaseStore.buttons.debug.debugType} size="aj_btn_xxs" placement="bottom" heading="Debugger" content={'remote'}
+          onClick={(e) => {
+            if(!this._isRunning()) {
+              this.dispatch(TestCaseStore, new ActionTestCaseButtonsUpdate('debug', 'debugType', TestCaseStore.DEBUG_REMOTE));
+            }
+          }}
+        />
+      );
+    }
+  }
+  
+  renderAsServiceButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_as_service" colorMark="test_case_as_service" icon="icon-execution-as-service" size="aj_btn_xxs" active={this.state.TestCaseStore.buttons.general.asService} size="aj_btn_xxs" placement="bottom" heading="Execute" content={'as a service'}
+          onClick={(e) => {
+            if(!this._isRunning()) {
+              this.dispatch(TestCaseStore, new ActionTestCaseButtonsUpdate('general', 'asService', !this.state.TestCaseStore.buttons.general.asService));
+            }
+          }}
+        />
+      );
+    }
+  }
+  
+  renderWithLogsButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_logs" colorMark="test_case_logs" icon="icon-execution-logs" size="aj_btn_xxs" active={this.state.TestCaseStore.buttons.general.withLogs} size="aj_btn_xxs" placement="bottom" heading="Execute" content={'with logs'}
+          onClick={(e) => {
+            if(!this._isRunning()) {
+              this.dispatch(TestCaseStore, new ActionTestCaseButtonsUpdate('general', 'withLogs', !this.state.TestCaseStore.buttons.general.withLogs));
+            }
+          }}
+        />
+      );
+    }
+  }
+  
+  renderStartSlowMotionButton(tab, debug=false) {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      const breakOnEnterRun = debug && this.state.TestCaseStore.buttons.debug.breakOnEnterRun;
+      const breakOnLeaveRun = debug && this.state.TestCaseStore.buttons.debug.breakOnLeaveRun;
+      const breakOnIpEvent = this.state.TestCaseStore.buttons.debug.breakOnIpEvent;
+      const breakOnGuiEvent = this.state.TestCaseStore.buttons.debug.breakOnGuiEvent;
+      const slowOnIpEvent = this.state.TestCaseStore.buttons.general.slowOnIpEvent;
+      const slowOnGuiEvent = this.state.TestCaseStore.buttons.general.slowOnGuiEvent;
+      return (
+        <ButtonNew id={`test_case_start_slow_motion_${tab}`} colorMark={`test_case_start_${tab}`} icon="icon-execution-play-slow" size="aj_btn_sm" placement="bottom" heading="Run Slow Motion" content="in current tab" disabled={this._isRunning() || this.state.LoginStore.login.systemUnderTest !== this.props.sut}
+          onClick={(e) => {
+            //if(!debug) {
+              this.dispatch(TestCaseStore, new ActionTestCaseExecutionStart(this.repo, this.props.sut, this.props.fut, this.props.tc, this.state.LoginStore.login.systemUnderTestInstance, this.state.LoginStore.login.nodes, {slow:true,asService:false,slowOnIpEvent:slowOnIpEvent,slowOnGuiEvent:slowOnGuiEvent}));
+            /*}
+            else {
+              const breakOnLines = [];
+               if(breakOnEnterRun || breakOnLeaveRun) {
+                this._getAutoBreakeLines(breakOnLines, breakOnEnterRun, breakOnLeaveRun);
+              }
+              this.dispatch(TestCaseStore, new ActionTestCaseDebugStart(this.repo, this.props.sut, this.props.fut, this.props.tc, this.state.LoginStore.login.systemUnderTestInstance, this.state.LoginStore.login.nodes, {slow:true,asService:false,breakOnEnterRun:breakOnEnterRun,breakOnLeaveRun:breakOnLeaveRun,breakOnLines:breakOnLines,breakOnIpEvent:breakOnIpEvent,breakOnGuiEvent:breakOnGuiEvent}));
+            }*/
+          }}
+        />
+      );
+    }
+  }
+  
+  renderSlowOnIpEventButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_start_ip_slow_motion" colorMark="test_case_ip_slow" icon="icon-execution-ip-slow" size="aj_btn_xxs" active={this.state.TestCaseStore.buttons.general.slowOnIpEvent} placement="bottom" heading="Slow" content={'on ip events'}
+          onClick={(e) => {
+            if(!this._isRunning()) {
+              this.dispatch(TestCaseStore, new ActionTestCaseButtonsUpdate('general', 'slowOnIpEvent', !this.state.TestCaseStore.buttons.general.slowOnIpEvent));
+            }
+          }}
+        />
+      );
+    }
+  }
+  
+  renderSlowOnGuiEventButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_start_gui_slow_motion" colorMark="test_case_gui_slow" icon="icon-execution-gui-slow" size="aj_btn_xxs" active={this.state.TestCaseStore.buttons.general.slowOnGuiEvent} placement="bottom" heading="Slow" content={'on gui events'}
+          onClick={(e) => {
+            if(!this._isRunning()) {
+              this.dispatch(TestCaseStore, new ActionTestCaseButtonsUpdate('general', 'slowOnGuiEvent', !this.state.TestCaseStore.buttons.general.slowOnGuiEvent));
+            }
+          }}
+        />
+      );
+    }
+  }
+  
+  renderStopButton(tab) {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_stop" colorMark="test_case_stop" icon="icon-execution-stop" size="aj_btn_sm" placement="bottom" heading="Stop" content="in current tab" disabled={this.state.TestCaseStore.realtimeConnection !== TestCaseStore.REALTIME_CONNECTION_OPEN || this.state.TestCaseStore.markup.definition || (1 !== this.state.TestCaseStore.execution)}
+          onClick={(e) => {
+            this.dispatch(TestCaseStore, new ActionTestCaseExecutionStop());
+          }}
+        />
+      );
+    }
+  }
+  
+  renderClearButton(tab) {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id={`test_case_clear_${tab}`} colorMark={`test_case_clear_${tab}`} icon="icon-execution-clear" size="aj_btn_sm" placement="bottom" heading="Clear" content={`In the ${tab} tab`} disabled={this.state.TestCaseStore.markup.definition || (0 !== this.state.TestCaseStore.execution)}
+          onClick={(e) => {
+            this.dispatch(TestCaseStore, new ActionTestCaseClear(tab));
+            this.tabNavigation(tab);
+          }}
+        />
+      );
+    }
+  }
+  
+  renderClearAllButton() {
+    if('tc' === this.state.TestCasesStore.current.view) {
+      return (
+        <ButtonNew id="test_case_clear_all" icon="icon-execution-clear" size="aj_btn_sm" placement="bottom" heading="Clear" content="all" disabled={this.state.TestCaseStore.markup.definition || (0 !== this.state.TestCaseStore.execution)}
+          onClick={(e) => {
+            this.dispatch(TestCaseStore, new ActionTestCaseClear('execution'));
+            this.dispatch(TestCaseStore, new ActionTestCaseClear('log'));
+            this.dispatch(TestCaseStore, new ActionTestCaseClear('sequence-diagram'));
+          }}
+        />
+      );
+    }
+  }
+  
+  renderRealtimeInfo() {
+    let colorMark = '';
+    if(0 === this.state.TestCaseStore.realtimeConnection) {
+      colorMark += 'red';
+    }
+    else if(1 === this.state.TestCaseStore.realtimeConnection) {
+      colorMark += 'green';
+    }
+    const style = {
+      position: 'relative',
+      width: '26px',
+      height: '28px',
+      top: '2px'
+    };
+    return (
+      <Popover placement="bottom" heading="Realtime Connection" style={style}>
+        <Icon name="icon-line-next-line" colorMark={colorMark} />
+      </Popover>
+    );
+  }
+  
+  renderStageButton() {
+    return (
+      <ButtonNew id="test_case_stage" colorMark="markup_color" icon="icon-stage" size="aj_btn_sm" placement="bottom" heading="Goto" content="Stage" aria-label="Stage"
+        onClick={(e) => {
+          this.context.history(`/stage`, {global: true});
+        }}
+      />
+    );
+  }
+  
+  renderModalDialogAbstractionAdd() {
+    if('none' === this.state.TestCasesStore.current.view) {
+      return (
+        <ModalDialogAbstractionAdd id="test_cases_sut_add" ref={(c) => {this._modalDialogAbstractionAdd = c;}} type="sut" defaultMarkup={MiddleTestCasesToolbar.DEFAULT_MARKUP_SUT} result={'success'} capitalFirst={true} repos={this.state.SystemUnderTestStore.repos} heading={`Add a new ${this.getText()}`} nameplaceholder={`The name of the ${this.getText()}`} descriptionplaceholder={`A description of the ${this.getText()}`}
+          onLoad={() => {
+            this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestRepoGet());
+          }}
+          onAdd={(name, description, repo) => {
+            this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestAdd(repo, name, description));
+          }}
+          onTemplate={(templateName) => {
+          }}
+          onClear={() => {
+          }}
+        />
+      );
+    }
+    else if('sut' === this.state.TestCasesStore.current.view) {
+      return (
+        <ModalDialogAbstractionAdd id="test_cases_fut_add" ref={(c) => {this._modalDialogAbstractionAdd = c;}} type="fut" defaultMarkup={MiddleTestCasesToolbar.DEFAULT_MARKUP_FUT} result={'success'} capitalFirst={true} heading={`Add a new ${this.getText()}`} nameplaceholder={`The name of the ${this.getText()}`} descriptionplaceholder={`A description of the ${this.getText()}`}
+          onAdd={(name, description) => {
+            this.dispatch(FunctionUnderTestStore, new ActionFunctionUnderTestAdd(this.repo, this.props.sut, name, description));
+          }}
+          onClear={() => {
+          }}
+        />
+      );
+    }
+    else if('fut' === this.state.TestCasesStore.current.view) {
+      return (
+        <ModalDialogAbstractionAdd id="test_cases_tc_add" ref={(c) => {this._modalDialogAbstractionAdd = c;}} type="tc" wizardNames={this.state.TestCaseStore.wizard.stacks} templates={this.state.TestCaseStore.wizard.stackTemplates} defaultMarkup={MiddleTestCasesToolbar.DEFAULT_MARKUP_TC} result={'success'} capitalFirst={true} heading={`Add a new ${this.getText()}`} nameplaceholder={`The name of the ${this.getText()}`} descriptionplaceholder={`A description of the ${this.getText()}`}
+          onAdd={(name, description, stackName, templateName, testData) => {
+            this.dispatch(TestCaseStore, new ActionTestCaseAdd(this.repo, this.props.sut, this.props.fut, name, description, stackName, templateName, testData));
+          }}
+          onClear={() => {
+          }}
+        />
+      );
+    }
+  }
+  
+  renderModalDialogAbstractionProperties() {
+    let currentName = '';
+    let currentDescription = '';
+    const tc = this.state.TestCasesStore.testCasesChecked.forEach((tc) => {
+      currentName = tc.tc;
+      currentDescription = tc.description;
+    });
+    return (
+      <ModalDialogAbstractionProperties ref={(c) => this._modalDialogAbstractionProperties = c} name={currentName} description={currentDescription} heading="Test Case Properties" capitalFirst result={'result'}
+        onAdd={(newName, description) => {
+          this.dispatch(TestCaseStore, new ActionTestCaseRename(this.repo, this.props.sut, this.props.fut, currentName, newName, description));
+        }}
+        onClear={() => {
+          this.dispatch(TestCasesStore, new ActionTestCasesTcClear());
+        }}
+      />
+    );
+  }
+  
+  render() {
+    const sut = !this.props.sut ? undefined : this.state.SystemUnderTestStore.systemUnderTests.find((sut) => {
+      return sut.name === this.props.sut;
+    });
+    this.repo = sut ? sut.repo : null;
+    return (
+      <div className="middle_toolbar">
+        {this.renderModalDialogAbstractionAdd()}
+        {this.renderModalDialogAbstractionProperties()}
+        <div className="toolbar" role="toolbar" aria-label="...">
+          <MiddleFilter sut fut disabled={'tc' === this.state.TestCasesStore.current.view}/>  
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderNewButton()}
+            {this.renderRemoveButton()}
+            {this.renderButtonProperties()}
+            {this.renderButtonCopy()}
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderMarkupOpenButton()}
+            {this.renderMarkupSaveButton()}
+            {this.renderMarkupHelpButton()}
+            {this.renderMarkupCancelButton()}
+            {this.renderMarkupCopyButton()}
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderStartButton('execution')}
+            {this.renderClearButton('execution')}
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderStartButton('log')}
+            {this.renderClearButton('log')}
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderStartButton('sequence-diagram')}
+            {this.renderClearButton('sequence-diagram')}
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderStartButton('debug', true)}
+            <div className="aj_btn_group_2 aj_btn_group_xxs_2">
+              {this.renderPauseOnEnterRunButton()}
+              {this.renderPauseOnLeaveRunButton()}
+            </div>
+            <div className="aj_btn_group_2 aj_btn_group_xxs_2">
+              {this.renderPauseOnIpEventButton()}
+              {this.renderPauseOnGuiEventButton()}
+            </div>
+            <div className="aj_btn_group_2 aj_btn_group_xxs_2">
+              {this.renderDebugLocalButton()}
+              {this.renderDebugRemoteButton()}
+            </div>
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderStartSlowMotionButton()}
+            <div className="aj_btn_group_2 aj_btn_group_xxs_2">
+              {this.renderSlowOnIpEventButton()}
+              {this.renderSlowOnGuiEventButton()}
+            </div>
+            {this.renderStopButton()}
+            {this.renderClearAllButton()}
+            <div className="aj_btn_group_2 aj_btn_group_xxs_2">
+              {this.renderAsServiceButton()}
+              {this.renderWithLogsButton()}
+            </div>
+          </div>
+          <div className="aj_btn_group pull-right" role="group" aria-label="...">
+            {this.renderRealtimeInfo()}
+          </div>
+          <div className="aj_btn_group pull-right" role="group" aria-label="...">
+            {this.renderStageButton()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+  
+  tabNavigation(tab) {
+    if(tab !== this.props.tab) {
+      this.context.history(`${this.props.sut}/${this.props.fut}/${this.props.tc}/${tab}`, {replace: true});
+    }
+  }
+  
+  _getAutoBreakeLines(breakOnLines, breakOnEnterRun, breakOnLeaveRun) {
+    this.state.TestCaseStore.dbugger.actorFiles.forEach((actorFile) => {
+      if(breakOnEnterRun && -1 !== actorFile.lineRunEnter) {
+        breakOnLines.push({
+          name: actorFile.path + '/' + actorFile.title,
+          title: actorFile.title,
+          pauseOnBreak: true,
+          lineNumber: actorFile.lineRunEnter,
+          url: ''
+        });
+      }
+      if(breakOnLeaveRun && -1 !== actorFile.lineRunLeave) {
+        breakOnLines.push({
+          name: actorFile.path + '/' + actorFile.title,
+          title: actorFile.title,
+          pauseOnBreak: true,
+          lineNumber: actorFile.lineRunLeave,
+          url: ''
+        });
+      }
+    });
+  }
+  
+  _isRunning() {
+    return this.state.TestCaseStore.realtimeConnection !== TestCaseStore.REALTIME_CONNECTION_OPEN || this.state.TestCaseStore.markup.definition || (0 !== this.state.TestCaseStore.execution);
+  }
+}
+
+
+MiddleTestCasesToolbar.contextType = RouterContext;