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

package/project/client/components/middle/start/middle-start-toolbar.jsx

@@ -0,0 +1,134 @@
+
+'use strict';
+
+import PlusServicesStore from '../../../stores/plus-services-store';
+import ButtonNew from 'z-abs-complayer-bootstrap-client/client/button-new';
+import {RouterContext} from 'z-abs-complayer-router-client/client/react-component/router-context';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleStartToolbar extends ReactComponentStore {
+  constructor(props) {
+    super(props, [PlusServicesStore]);
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.PlusServicesStore.plusServices, nextState.PlusServicesStore.plusServices);
+  }
+  
+  renderStageButton() {
+    return (
+      <ButtonNew id="start_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});
+        }}
+      />
+    );
+  }
+    
+  renderDocumentationButton() {
+    return (
+      <ButtonNew id="start_documentation" colorMark="markup_color" icon="icon-doc-documentation" size="aj_btn_sm" heading="Goto" content="Documentation" aria-label="Documentation"
+        onClick={(e) => {
+          this.context.history(`/documentation`, {global: true});
+        }}
+      />
+    );
+  }
+  
+  renderEducationButton() {
+    return (
+      <ButtonNew id="start_education" colorMark="markup_color" icon="icon-doc-education" size="aj_btn_sm" heading="Goto" content="Education" aria-label="Education"
+        onClick={(e) => {
+          this.context.history(`/education`, {global: true});
+        }}
+      />
+    );
+  }
+  
+  renderWorkshopButton() {
+    return (
+      <ButtonNew id="start_workshop" colorMark="markup_color" icon="icon-doc-workshop" size="aj_btn_sm" heading="Goto" content="Workshop" aria-label="Workshop"
+        onClick={(e) => {
+          this.context.history(`/workshop`, {global: true});
+        }}
+      />
+    );
+  }
+  
+  renderVideosButton() {
+    return (
+      <ButtonNew id="start_video" colorMark="markup_color" icon="icon-not-implemented" size="aj_btn_sm" heading="Goto" content="Videos" aria-label="Videos"
+        onClick={(e) => {
+          this.context.history(`/videos`, {global: true});
+        }}
+      />
+    );
+  }
+    
+  renderPlusServiceCodeEditor() {
+    return null;
+    /*return (
+      <ButtonNew id="start_plus_services_code_editor" colorMark="markup_color" icon="icon-not-implemented" size="aj_btn_sm" heading="Goto" content="Plus Service - Code Editor"
+        onClick={(e) => {
+          this.context.history('/code-editor', {global: true});
+        }}
+      >
+    );*/
+  }
+  
+  renderLocalDocumentationButton(repoName) {
+    return (
+      <ButtonNew id={`start_local_documentation_${repoName}`} colorMark="markup_color" icon="icon-doc-docs" size="aj_btn_sm" heading="Goto" content="Plus Service - Docs" aria-label="Plus Service - Docs"
+        onClick={(e) => {
+          this.context.history(`/local-documentation-${repoName}`, {global: true});
+        }}
+      />
+    );
+  }
+  
+  renderLocalDocumentationButtons() {
+    if(PlusServicesStore.isLoaded('docs')) {
+      return this.renderLocalDocumentationButton('Local');
+    }
+  }
+  
+  renderPlusServiceTeamButton() {
+    if(PlusServicesStore.isLoaded('team')) {
+       return (
+        <ButtonNew id={`start_plus_service_team`} colorMark="markup_color" icon="icon-stage" size="aj_btn_sm" heading="Goto" content="Plus Service - Team" aria-label="Plus Service - Team"
+          onClick={(e) => {
+            this.context.history('/plus-services/team', {global: true});
+          }}
+        />
+      );
+    }
+  }
+  
+  render() {
+    return (
+      <div className="middle_toolbar">
+        <div className="toolbar" role="toolbar"  aria-label="...">
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderDocumentationButton()}
+            {this.renderEducationButton()}
+            {this.renderWorkshopButton()}
+            {/*this.renderVideosButton()*/}
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderPlusServiceCodeEditor()}
+            {this.renderLocalDocumentationButtons()}
+          </div>
+          <div className="aj_btn_group pull-right" role="group" aria-label="...">
+            {this.renderStageButton()}
+            {/*{this.renderPlusServiceTeamButton()}*/}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+
+MiddleStartToolbar.contextType = RouterContext;

package/project/client/components/middle/start/middle-start-view.jsx

@@ -0,0 +1,335 @@
+
+'use strict';
+
+
+import { ActionReposAnalyzeLocalReposGet, ActionReposClone, ActionReposVerifyGit } from '../../../actions/action-repos/action-repos';
+import ToolVersionsStore from 'z-abs-complayer-toolversions-client/client/stores/tool-versions-store';
+import ReposStore from '../../../stores/repos-store';
+import Popover from 'z-abs-complayer-bootstrap-client/client/popover';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleStartView extends ReactComponentStore {
+  constructor(props) {
+    super(props, [ToolVersionsStore, ReposStore], {
+      useRepoSetup: false,
+      localDataRepo: '',
+      localContentRepo: '',
+      newDataRepo: false,
+      newContentRepo: false
+    });
+    this.inputDataRepoRef = React.createRef();
+    this.inputContentRepoRef = React.createRef();
+  }
+  
+  didMount() {
+    this.dispatch(ReposStore, new ActionReposAnalyzeLocalReposGet());
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.useRepoSetup, nextState.useRepoSetup)
+      || !this.shallowCompare(this.state.localDataRepo, nextState.localDataRepo)
+      || !this.shallowCompare(this.state.localContentRepo, nextState.localContentRepo)
+      || !this.shallowCompare(this.state.newDataRepo, nextState.newDataRepo)
+      || !this.shallowCompare(this.state.newContentRepo, nextState.newContentRepo)
+      || !this.shallowCompare(this.state.ToolVersionsStore.tools.git, nextState.ToolVersionsStore.tools.git)
+      || !this.shallowCompare(this.state.ReposStore, nextState.ReposStore);
+  }
+  
+  renderInputRepo(type, inputRef, valueState, url, exists) {
+    const inputClass = `col-sm-6 input_column ${exists ? 'has-success' : 'has-warning'} has-feedback`;
+    const inputId = `middle_start_${type}_repo`;
+    const inputSpanId = `${inputId}_status`;
+    //const feedbackSpanClass = `glyphicon ${exists ? 'glyphicon-ok' : 'glyphicon-warning-sign'} form-control-feedback`;
+    const stateObject = {};
+    return (
+      <div className="form-group">
+        <div className="row" style={{textAlign:'right',paddingTop:'12px'}}>
+          <div className="col-sm-4 input_column">
+            <label htmlFor={inputId} className="control-label">{`${type}, repo url:`}</label>
+          </div>
+          <div className={inputClass}>
+            <input ref={inputRef} type="text" id={inputId} className="form-control input-sm" placeholder="git remote url" value={url ? url : valueState} aria-describedby={inputSpanId} disabled={exists}
+              onChange={(e) => {
+                if('actorjs-data-local' === type) {
+                  this.updateState({localDataRepo: {$set: e.target.value}});
+                }
+                else if('actorjs-content-local' === type) {
+                  this.updateState({localContentRepo: {$set: e.target.value}});
+                }
+              }}
+            />
+            {/*<span className={feedbackSpanClass} aria-hidden="true" style={{right:'4px'}}></span>*/}
+            <span id={inputSpanId} className="sr-only">(success)</span>
+          </div>
+        </div>
+        <div className="row" style={{textAlign:'right',paddingTop:'12px'}}>
+          <div className="col-sm-4 input_column"></div>
+          {this.renderRadio(type, exists, true)}
+          {this.renderRadio(type, exists, false)}
+        </div>
+      </div>
+    );
+  }
+  
+  renderRadio(type, exists, existingOrNew) {
+    if(exists) {
+      return null;
+    }
+    const wantNewOrExisting = 'actorjs-data-local' === type ? this.state.newDataRepo : this.state.newContentRepo;
+    const radioId = `radio_${type}`;
+    return (
+      <>
+        <div className="col-sm-2 input_column" style={{textAlign:'left',paddingTop:'5px'}}>
+           <input type="radio" id={radioId} style={{position:'relative',top:'1px'}} aria-label="..." checked={existingOrNew ? !wantNewOrExisting : wantNewOrExisting} onChange={(e) => {
+             if('actorjs-data-local' === type) {
+               this.updateState({newDataRepo: {$set: existingOrNew ? !e.target.checked : e.target.checked}});
+             }
+             else if('actorjs-content-local' === type) {
+               this.updateState({newContentRepo: {$set: existingOrNew ? !e.target.checked : e.target.checked}});
+             }
+           }}/>
+           <label htmlFor={radioId} style={{paddingLeft:'4px'}}>{existingOrNew ? 'Existing Repo' : 'New Repo'}</label>
+        </div>
+      </>
+    );
+  }
+  
+  renderDataRepo(dataExists) {
+    return (
+      <div style={{textAlign:'left',padding:'0px 8px'}}>
+        {this.renderInputRepo('actorjs-data-local', this.inputDataRepoRef, this.state.localDataRepo, this.state.ReposStore.localDataUrl, dataExists)}
+      </div>
+    );
+  }
+    
+  renderContentRepo(dataExists, contentExists) {
+    if(!dataExists) {
+      return null;
+    }
+    if(!contentExists) {
+      return (
+        <div style={{textAlign:'left',padding:'0px 8px'}}>
+          {this.renderInputRepo('actorjs-content-local', this.inputContentRepoRef, this.state.localContentRepo, this.state.ReposStore.localContentUrl, contentExists)}
+        </div>
+      );
+    }
+  }
+  
+  renderHandleRepos() {
+    const button = !this.state.ReposStore.actorjsDataLocalExists ? (this.state.newDataRepo ? 'Push' : 'Clone') : (!this.state.ReposStore.actorjsContentLocalExists ? (this.state.newContentRepo ? 'Push' : 'Clone') : '');
+    return (
+      <>
+        <p className="start_welcome">With this wizard, you can connect either to an existing repo or a new, empty repo. Using ssh is preferable to using https. The repo must have its default branch set to main.
+The wizard is not guaranteed to work in all setups, especially in the case of older Git versions.</p>
+        <p className="start_welcome"><strong>Existing Repo:</strong>&nbsp;Set the repo url to the url of the existing repo. This will overwrite all local  data and content and will replace it with the data/content in the existing repo. If you want to keep your changes, you must make a copy manually through the file system.</p>
+        <p className="start_welcome"><strong>New Repo:</strong>&nbsp;Create a new repo and make sure it is 100 % empty. Set the repo url to the url of the new repo. This will make the first commit with auto-generated data plus data you have added so far.</p>
+        {this.renderDataRepo(this.state.ReposStore.actorjsDataLocalExists)}
+        {this.renderContentRepo(this.state.ReposStore.actorjsDataLocalExists, this.state.ReposStore.actorjsContentLocalExists)}
+        <div className="middle_start_clone">
+          <Popover placement="bottom" heading={button} content="local repo" shortcut="Enter" style={{display:'inline-block'}}>
+            <button id="middle_start_clone_button" type="button" className="btn btn-primary" disabled={(!this.state.ReposStore.localDataUrl && !this.state.localDataRepo) || this.state.ReposStore.progress.clone}
+              onClick={(e) => {
+                if(!this.state.ReposStore.actorjsDataLocalExists) {
+                  this.dispatch(ReposStore, new ActionReposClone('actorjs-data-local', this.state.localDataRepo, this.state.newDataRepo));
+                }
+                else if(!this.state.ReposStore.actorjsContentLocalExists) {
+                  this.dispatch(ReposStore, new ActionReposClone('actorjs-content-local', this.state.localContentRepo ? this.state.localContentRepo : this.state.ReposStore.localContentUrl, this.state.newContentRepo));
+                }
+              }}
+            >{button}</button>
+          </Popover>
+        </div>
+      </>
+    );
+  }
+  
+  renderError() {
+    if(this.state.ReposStore.error.error) {
+      const errorDivStyle = {
+        float: 'left',
+        textAlign: 'left',
+        marginLeft: '-10px'
+      };
+      const labelStyle = {
+        position: 'relative'
+      };
+      return (
+        <>
+          <div className="col-sm-4 input_column" />
+          <div className="col-sm-6 input_column" style={errorDivStyle}>
+            <label className="text-danger control-label" style={labelStyle}>{this.state.ReposStore.error.text}</label>
+          </div>
+        </>
+      );
+    }
+    else {
+      return null;
+    }
+  }
+  
+  renderVerifyGitConfigValue(gitConfig, index) {
+    const inputClass = gitConfig.expected ? 'alert-success' : 'alert-warning';
+    const style= {
+      textAlign: 'left',
+      padding: '0px 0px 0px 5px',
+      marginBottom: '5px',
+      margin: '0px 5px 0px 5px'
+    };
+    return (
+      <div key={`git-config-value-${index}`} className="row" style={{paddingTop:'0px'}}>
+        <div className="col-sm-3 input_column" role="alert" style={{textAlign:'right'}}>
+          <label className="control-label">{gitConfig.name}</label>
+        </div>
+        <div className={`col-sm-4 input_column alert ${inputClass}`} role="alert" style={style}>
+          <p className="control-label">{gitConfig.value}</p>
+        </div>
+        <div className="col-sm-3 input_column alert alert-info" role="alert" style={style}>
+          <p className="control-label">{gitConfig.expectedValue}</p>
+        </div>
+      </div>
+    );
+  }
+  
+  renderVerifyGitConfigValues() {
+    if(0 === this.state.ReposStore.gitConfigs.length) {
+      return null;
+    }
+    const rows = this.state.ReposStore.gitConfigs.map((gitConfig, index) => {
+      return this.renderVerifyGitConfigValue(gitConfig, index);
+    });
+    return (
+      <>
+        <div key={`git-config-header`} className="row" style={{paddingTop:'0px'}}>
+          <div className="col-sm-3 input_column" role="alert" style={{textAlign:'right'}}>
+            <label className="control-label">name</label>
+          </div>
+          <div className="col-sm-4 input_column" role="alert" style={{textAlign:'left',marginLeft:'4px'}}>
+            <label className="control-label">value</label>
+          </div>
+          <div className="col-sm-3 input_column" role="alert" style={{textAlign:'left',marginLeft:'8px'}}>
+            <label className="control-label">expected value</label>
+          </div>
+        </div>
+        {rows}
+      </>
+    );
+  }
+  
+  renderVerifyGitConfigs() {
+    return (
+      <div>
+        <h3 className="start_welcome"><strong>Verify git config</strong></h3>
+        <p className="start_welcome">ActorJs needs certain git configs to work properly. To determine whether you have set these configs, click the Verify button to display recommended settings (you decide whether you want to use these settings).</p>
+        {this.renderVerifyGitConfigValues()}
+        <div className="middle_start_clone">
+          <Popover placement="bottom" heading="Verify" content="git config" shortcut="Enter" style={{display:'inline-block'}}>
+            <button id="middle_start_clone_button" type="button" className="btn btn-primary"
+              onClick={(e) => {
+                this.dispatch(ReposStore, new ActionReposVerifyGit());
+              }}
+            >Verify</button>
+          </Popover>
+        </div>
+      </div>
+    );
+  }
+  
+  renderRepoSetup() {
+    return (
+      <>
+        <h3 className="start_welcome"><strong>Set up your private repos</strong></h3>
+        <p className="start_welcome">When you use ActorJs, your work will be placed in your own private git repos. It is a good idea to set up the repos from the start, so you do not have to do this manually later. Read more about the ActorJs repo structure in&#160; 
+          <a href="/documentation/abstractions/repo">Repo Abstraction</a>.
+        </p>
+        <p className="start_welcome">There are two mandatory repos:</p>
+        <ul className="repo_list">
+          <li><strong>actorjs-data-local:</strong> actorjs-data-local: A text repo to store Repo configurations, Systems Under Test configurations, Test Suites, Test Cases, Stacks, Actors, Test Data, and Content configurations.</li>
+          <li><strong>actorjs-content-local:</strong> A binary repo to store content used by Actors in Test Cases.</li>
+        </ul>
+      </>
+    );
+  }
+  
+  renderWithGit() {
+    if(4 !== this.state.ToolVersionsStore.tools.git.status) {
+      return (
+        <>
+          {this.renderVerifyGitConfigs()}
+          {this.renderRepoSetup()}
+          {this.renderHandleRepos()}
+          {this.renderError()}
+        </>
+      );
+    }
+  }
+  
+  renderWithoutGit() {
+    if(4 === this.state.ToolVersionsStore.tools.git.status) {
+      return (
+        <>
+          <h3 className="start_welcome"><strong>Install git</strong></h3>
+          <p className="start_welcome">When you use ActorJs, your work will be placed in your own, private git repos. It is a good idea to install git and set up the repos from the start, so you don't have to do this manually later. Read more about the ActorJs repo structure in&#160; 
+          <a href="/documentation/abstractions/repo">Repo Abstraction</a>.
+          </p>
+        </>
+      );
+    }
+  }
+  
+  renderRepoWizard() {
+    let key = 0;
+    return (
+      <div className="start_info">
+        <div className="start_menu_outer">
+          <div key={++key} className="start_menu_inner">
+            <h3 className="start_info_heading">Repo wizard</h3>
+            <p className="start_info_text">Getting help to set up your own repos.</p>
+            <button type="button" className="btn btn-primary start_info_button"
+              onClick={(e) => {
+                this.updateState({useRepoSetup: {$set: true}});
+              }}
+            >Wizard</button>
+          </div>
+        </div>      
+      </div>
+    );
+  }
+  
+  renderContent() {
+    if(this.state.ReposStore.handleRepos || this.state.ReposStore.error.error) {
+      if(this.state.useRepoSetup) {
+        return (
+          <>
+            <div className="middle_start_repo_setup_outer">
+              <div className="middle_start_repo_setup_inner">
+                <h1 className="start_welcome"><strong>Welcome to ActorJs</strong></h1>
+                  {this.renderWithGit()}
+                  {this.renderWithoutGit()}
+              </div>
+            </div>
+          </>
+        );
+      }
+      else {
+        return (
+          <>
+            {this.renderRepoWizard()}
+          </>
+        );
+      }
+    }
+    else {
+      return null;
+    }
+  }
+  
+  render() {
+    return (
+      <div className="middle_view start_menu">
+        {this.renderContent()}
+      </div>
+    );
+  }
+}

package/project/client/components/middle/start/middle-start.jsx

@@ -0,0 +1,36 @@
+
+'use strict';
+
+import MiddleSidebar from '../middle_sidebar';
+import MiddleStartToolbar from './middle-start-toolbar';
+import MiddleStartView from './middle-start-view';
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import React from 'react';
+
+
+export default class MiddleStart extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+    this.setTitle(() => {
+      return {
+        isPath: false,
+        text: 'Start'
+      };
+    });
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return false;
+  }
+  
+  render() {
+    return (
+      <div className="middle middle_start">
+        <MiddleStartToolbar />
+        <MiddleSidebar />
+        <MiddleStartView />
+      </div>
+    );
+  }
+}
+

package/project/client/components/middle/system-under-test/middle-system-under-test-toolbar.jsx

@@ -0,0 +1,171 @@
+
+'use strict';
+
+import MiddleFilter from '../middle-sut-fut-filter';
+import FilterStore from '../../../stores/filter-store';
+import SystemUnderTestStore from '../../../stores/system-under-test-store';
+import { ActionSystemUnderTestAdd, ActionSystemUnderTestDelete, ActionSystemUnderTestUpdate, ActionSystemUnderTestClearResult, ActionSystemUnderTestRepoAdd, ActionSystemUnderTestRepoGet } from '../../../actions/action-system-under-test/action-system-under-test';
+import { ActionShowFilter } from '../../../actions/action-sut-fut-filter';
+import ButtonNew from 'z-abs-complayer-bootstrap-client/client/button-new';
+import ModalDialogAbstractionAdd from 'z-abs-complayer-modaldialog-client/client/modal-dialog-abstraction-add';
+import Link from 'z-abs-complayer-router-client/client/react-component/link';
+import ReactComponentStore from 'z-abs-corelayer-client/client/react-component/react-component-store';
+import React from 'react';
+
+
+export default class MiddleSystemUnderTestToolbar extends ReactComponentStore {
+  constructor(props) {
+    super(props, [SystemUnderTestStore, FilterStore]);
+    this._modalDialogAbstractionRepoAdd = null;
+    this._modalDialogAbstractionAdd = 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_REPO = {
+    markup: `#### ***Add a new Repo***
+  
+***Set the Repo name.***`,
+    markupStyle: {
+      padding:'13px 0px 0px 14px'
+    }
+  };
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.state.FilterStore.show, nextState.FilterStore.show)
+      || !this.shallowCompare(this.state.SystemUnderTestStore, nextState.SystemUnderTestStore);
+  }  
+  
+  setStatus(status) {
+    let systemUnderTests = this.state.SystemUnderTestStore.systemUnderTests.filter((sut) => {
+      return this.state.SystemUnderTestStore.systemUnderTestsChecked.has(`${sut.repo}_${sut.name}`);
+    });
+    systemUnderTests.forEach((sut) => {
+      sut.status = status;
+    });
+    this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestUpdate(systemUnderTests));
+  }
+  
+  renderAddRepo() {
+    return (
+      <ButtonNew id="sut_add_repo" colorMark="markup_color" icon="icon-repo" size="aj_btn_sm" placement="bottom" heading="Add" content="Repo"
+        onClick={(e) => {
+          this._modalDialogAbstractionRepoAdd.show();
+        }}
+      />
+    );
+  }
+  
+  renderShowHiddenButton() {
+    return (
+      <ButtonNew id="sut_show_hidden" icon="icon-filter" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Show Hidden" content="System Under Test" active={!this.state.FilterStore.show}
+        onClick={(e) => {
+          this.dispatch(FilterStore, new ActionShowFilter(!this.state.FilterStore.show));
+        }}
+      />
+    );
+  }
+  
+  renderShowButton() {
+    return (
+      <ButtonNew id="sut_show" icon="icon-filter-show" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Show" content="System Under Test" disabled={!this.state.SystemUnderTestStore.checkedHiddens}
+        onClick={(e) => {
+          this.setStatus(SystemUnderTestStore.VISIBLE());
+        }}
+      />
+    );
+  }
+  
+  renderHideButton() {
+    return (
+      <ButtonNew id="sut_hidden" icon="icon-filter-hide" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Hide" content="System Under Test" disabled={!this.state.SystemUnderTestStore.checkedVisibles}
+        onClick={(e) => {
+          this.setStatus(SystemUnderTestStore.HIDDEN());
+        }}
+      />
+    );
+  }
+  
+  renderNew() {
+    return (
+      <ButtonNew id="sut_new" colorMark="markup_color" icon="icon-file-new" text="sut" size="aj_btn_sm" placement="bottom" heading="Add" content="System Under Test" disabled={0 !== this.state.SystemUnderTestStore.systemUnderTestsChecked.size}
+        onClick={(e) => {
+          this._modalDialogAbstractionAdd.show();
+        }}
+      />
+    );
+  }
+  
+  renderRemove() {
+    return (
+      <ButtonNew id="sut_remove" icon="icon-file-delete" size="aj_btn_sm" colorMark="markup_color" placement="bottom" heading="Remove" content="System Under Test" disabled={0 === this.state.SystemUnderTestStore.systemUnderTestsChecked.size}
+        onClick={(e) => {
+          const suts = this.state.SystemUnderTestStore.systemUnderTests.filter((sut) => {
+            return this.state.SystemUnderTestStore.systemUnderTestsChecked.has(`${sut.repo}_${sut.name}`);
+          });
+          this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestDelete(suts));
+        }}
+      />
+    );
+  }
+  
+  renderModalDialogRepoAdd() {
+    return (
+      <ModalDialogAbstractionAdd id="system_under_test_repo_add" ref={(c) => this._modalDialogAbstractionRepoAdd = c} type="repo" specialName="repo" defaultMarkup={MiddleSystemUnderTestToolbar.DEFAULT_MARKUP_REPO} result={'success'} capitalFirst={false} heading="Add a new Repo" nameplaceholder="The name of the Repo" descriptionplaceholder="A description of the Repo"
+        onAdd={(name, description) => {
+          this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestRepoAdd(name, description));
+        }}
+        onClear={() => {
+//          this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestClearResult());
+        }}
+      />
+    );
+  }
+  
+  renderModalDialogAbstractionAdd() {
+    return (
+      <ModalDialogAbstractionAdd id="system_under_test_abstraction_add" ref={(c) => this._modalDialogAbstractionAdd = c} type="sut" specialName="sut" defaultMarkup={MiddleSystemUnderTestToolbar.DEFAULT_MARKUP_SUT} result={'success'} repos={this.state.SystemUnderTestStore.repos} heading="Add a new System Under Test" nameplaceholder="The name of the System Under Test" descriptionplaceholder="A description of the System Under Test"
+        onLoad={() => {
+          this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestRepoGet());
+        }}
+        onAdd={(name, description, repo) => {
+          this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestAdd(repo, name, description));
+        }}
+        onClear={() => {
+          this.dispatch(SystemUnderTestStore, new ActionSystemUnderTestClearResult());
+        }}
+      />
+    );
+  }
+  
+  render() {
+    return (
+      <div className="middle_toolbar middle_system_under_test_toolbar">
+        {this.renderModalDialogRepoAdd()}
+        {this.renderModalDialogAbstractionAdd()}
+        <div className="toolbar" role="toolbar"  aria-label="...">
+          <MiddleFilter sut />
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderAddRepo()}
+          </div>  
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderShowHiddenButton()}
+            {this.renderShowButton()}
+            {this.renderHideButton()}
+          </div>
+          <div className="aj_btn_group" role="group" aria-label="...">
+            {this.renderNew()}
+            {this.renderRemove()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}