@kumologica/sdk 3.0.0

package/src/app/ui/editor-client/src/sass/tab-test.scss

@@ -0,0 +1,257 @@
+.sidebar-test {
+  height: 100%;
+  overflow: hidden;
+  .sidebar-node-info-stack {
+    height: 100%;
+    overflow: hidden;
+  }
+  .testcase-info-traces {
+    // height: 65vh;
+    // overflow-y: auto;
+  }
+}
+#test-sidebar-header {
+  display: flex;
+  flex-direction: column;
+  padding: 0px 10px 0px 10px;
+
+  #test-sidebar-header-wrapper-left {
+    width: 60%;
+    margin-top: 1px;
+    padding-right: 10px;
+  }
+  #test-sidebar-header-wrapper-right {
+    width: 40%;
+    text-align:right;
+  }
+  #properties-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    margin-bottom: 5px;
+    #switchPropertiesBtn {
+      font-size: 16px;
+      margin-top: 5px;
+      padding: 0 4px;
+      text-align: right;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+    #propertiesLabel {
+      margin-left: 5px;
+      margin-bottom: 4px;
+    }
+
+    #table-properties {
+      display: flex;
+      flex-direction: column;
+      border: 1px solid #ddd;
+    }
+    .table-row {
+      display: flex;
+      border-bottom: 1px solid #ddd;
+    }
+    #table-row-append {
+      display: flex;
+      margin-top: 6px;
+    }
+    .table-cell {
+      display: flex;
+      width: 48%;
+      &:first-child {
+        border-right: 1px solid #ddd;
+      }
+      &:hover {
+        cursor: pointer;
+      }
+    }
+    .table-cell-btn {
+      display: flex;
+      padding: 4px 6px;
+      width: 4%;
+      font-size: 10px;
+      justify-content: center;
+      align-items: center;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+    .wrong-value {
+      background-color: #ffd6d8;
+    }
+  }
+  #debugger-wrapper {
+    display: flex;
+    justify-content: space-around;
+    padding: 0;
+    margin-bottom: 10px;
+  }
+  .debugger-button {
+    display: flex;
+    width: 90px;
+    height: 25px;
+    padding: 0 3px;
+
+  }
+  .debug-button-label{
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    margin-left: 5px;
+  }
+}
+
+#test-results-wrapper {
+  height: 87%;
+  overflow-y: auto;
+
+  #testcase-info-response-bodyheaders {
+    display: flex;
+    width: 111px;
+    background: #ecebeb;
+    padding: 4px 6px;
+    border-radius: 4px;
+    border: 1px solid lightgrey;
+  }
+  .testcase-info-response-bodyformat-container{
+    display: flex;
+    width:95px;
+    .testcase-info-response-bodyformat {
+      outline: none;
+      background: #ecebeb;
+      margin: 0px 0px 0px 10px;
+      font-size: 13px;
+      padding: 0px 10px;
+    }
+  }
+  .testcase-info-copypaste-container{
+    background: #ecebeb;
+    padding: 6px 11px;
+    border-radius: 4px;
+    margin: 0px 0px 0px 5px;
+    border: 1px solid lightgrey;
+  }
+  .testcase-info-wrap-container{
+    background: #ecebeb;
+    padding: 6px 13px;
+    border-radius: 4px;
+    margin: 0px 0px 0px 5px;
+    border: 1px solid lightgrey;
+  }
+
+  #testcase-wrap-btn{
+    color: darkslategrey;
+  }
+  .testcase-wrap-btn-clazz {
+    color: darkslategrey !important;
+  }
+  
+  .palette-category {
+    // height: 100%;
+    //overflow: auto;
+  }
+  .selectable {
+    user-select: text;
+  }
+  div.testcase-info-selector {
+    margin-left: 13px;
+  }
+  div#testcase-info-response-header {
+    display: flex;
+    padding: 6px 10px;
+    align-items: center;
+    margin-bottom: -6px;
+    margin-top: -6px;
+  }
+  div.tab-content-bh {
+    display: none;
+    padding: 7px 10px;
+    &.selected {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  span.tab-label-bh {
+    color: darkgrey!important;
+    padding: 2px 2px;
+    font-size: 13px;
+    cursor: pointer;
+    &.selected {
+      color: black !important;
+      
+    }
+  }
+  span.testcase-resp-status {
+    font-size: 12px;
+    padding-right: 2px;
+    color: grey !important;
+  }
+  div#testcase-resp-body {
+    padding: 5px 9px;
+    background: white;
+  }
+  button.testcase-tab {
+    background: none;
+    padding: 0 10px;
+    border: none;
+    &:focus {
+      outline: none;
+    }
+
+    &.selected {
+      background-color: white;
+      border-radius: 3px 3px 0 0;
+      border: 1px solid lightgrey;
+      border-bottom: none;
+    }
+  }
+  div.testcase-info-selector {
+    margin-bottom: -1px;
+  }
+  div.testcase-info-container {
+    border: 1px solid lightgrey;
+    background-color: white !important;
+    padding: 6px 4px;
+    overflow-wrap: break-word;
+    height: 100%;
+  }
+
+  div.testcase-info {
+    display: none;
+
+    &.selected {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  // TestCase header
+  div.failed {
+    border-left: 8px solid #ff333a;
+    div.palette-header {
+      span {
+        color: red;
+      }
+    }
+  }
+  div.passed {
+    border-left: 8px solid #1ac567;
+    div.palette-header {
+      span {
+        color: #093;
+      }
+    }
+  }
+  // }
+
+  // The assertion section
+  .assertion {
+    padding: 4px 10px;
+  }
+  .assertion-passed {
+    color: green;
+  }
+  .assertion-failed {
+    color: red;
+  }
+}

package/src/app/ui/editor-client/src/sass/tabs.scss

@@ -0,0 +1,395 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * 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.
+ **/
+
+// Do not display the tabs of the editor tray
+.editor-tray-body .red-ui-tabs {
+  display: none;
+}
+.red-ui-tabs {
+  display: flex;
+  //width: 100%;
+  //justify-content: space-between;
+  //background: #fff;
+  box-sizing: border-box;
+
+  .red-ui-tabs-scroll-container {
+    overflow-x: scroll;
+    overflow-y: hidden;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  & ul {
+    //background: #9999ff;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    display: block;
+    height: 33px;
+    box-sizing: border-box;
+    //border-bottom: 1px solid $primary-border-color;
+    white-space: nowrap;
+    @include disable-selection;
+
+    li {
+      //border-top-right-radius: 7px;
+      //border-top-left-radius: 7px;
+      //box-sizing: border-box;
+      display: inline-block;
+      //border-left: 1px solid $primary-border-color;
+      //border-top: 1px solid $primary-border-color;
+      //border-right: 1px solid $primary-border-color;
+      //border-bottom: 3px solid $primary-border-color;
+      //background: $tab-background-inactive;
+      //margin: 3px 3px 0 3px;
+      height: 34px;
+      line-height: 34px;
+      //max-width: 200px;
+      width: 14%;
+      overflow: hidden;
+      white-space: nowrap;
+      position: relative;
+      &.red-ui-tabs-closeable:hover {
+        .red-ui-tabs-badges {
+          display: none;
+        }
+        .red-ui-tab-close {
+          display: block;
+        }
+      }
+      a.red-ui-tab-label {
+        text-align: center;
+        display: block;
+        font-size: 14px;
+        // padding-left: 12px;
+        width: 100%;
+        height: 100%;
+        color: #666;
+      }
+      a:hover {
+        text-decoration: none;
+      }
+      a:focus {
+        text-decoration: none;
+      }
+
+      &:not(.active) a:hover + a.red-ui-tab-close {
+        background: $tab-background-hover;
+      }
+      &.active {
+        //background: $tab-background-active;
+        font-weight: bold;
+        border-bottom: 3px solid #333;
+        z-index: 2;
+
+        a {
+          color: #333;
+        }
+        a.red-ui-tab-close {
+          color: #aaa;
+          background: $tab-background-active;
+          &:hover {
+            background: $workspace-button-background-hover !important;
+            color: $workspace-button-color-hover;
+          }
+        }
+        img.red-ui-tab-icon {
+          opacity: 0.2;
+        }
+      }
+      &.selected {
+        &:not(.active) {
+          background: $tab-background-selected;
+        }
+        font-weight: bold;
+        .red-ui-tabs-badge-selected {
+          display: inline;
+          background: white;
+        }
+        .red-ui-tabs-badge-changed {
+          display: none;
+        }
+      }
+      &:not(.active) a:hover {
+        color: $workspace-button-color-hover;
+        background: $tab-background-hover;
+      }
+    }
+  }
+
+  &.red-ui-tabs-scrollable {
+    padding-left: 21px;
+    padding-right: 21px;
+  }
+  &.red-ui-tabs-search {
+    display: none;
+  }
+  &.red-ui-tabs-add {
+    display: none;
+    padding-right: 35px;
+  }
+  &.red-ui-tabs-add.red-ui-tabs-scrollable {
+    display: none;
+    padding-right: 59px;
+  }
+  &.red-ui-tabs-add.red-ui-tabs-search.red-ui-tabs-scrollable {
+    display: none;
+    padding-right: 95px;
+  }
+
+  &.red-ui-tabs-collapsible {
+    li:not(.active) {
+      display: none;
+      &.red-ui-tab-pinned {
+        a {
+          padding-left: 0;
+          text-align: center;
+        }
+        span {
+          display: none;
+        }
+        width: 32px;
+      }
+    }
+  }
+
+  &.red-ui-tabs-vertical {
+    box-sizing: border-box;
+    height: 100%;
+    border-right: 1px solid $primary-border-color;
+    margin: 0;
+    background: #f3f3f3;
+    overflow: visible;
+
+    .red-ui-tabs-scroll-container {
+      height: auto;
+      overflow-x: visible;
+      overflow-y: scroll;
+    }
+
+    & ul {
+      padding: 0;
+      height: auto;
+      border: none;
+      width: calc(100% + 1px);
+      li {
+        width: 100%;
+        display: block;
+        margin: 0;
+        border: none;
+        border-right: 1px solid $primary-border-color;
+        height: auto;
+        &:not(:first-child) {
+          border-top: 1px solid $secondary-border-color;
+        }
+        &:last-child {
+          border-bottom: 1px solid $secondary-border-color;
+        }
+
+        a.red-ui-tab-label {
+          padding: 9px;
+        }
+
+        &.active {
+          border-right: 1px solid #fff;
+        }
+      }
+    }
+  }
+  .red-ui-tabs-select {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0.4;
+    background: red;
+  }
+}
+.red-ui-tab-button {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  height: 35px;
+  background: #fff;
+  border-bottom: 1px solid $primary-border-color;
+  z-index: 2;
+
+  a {
+    @include workspace-button;
+    line-height: 32px;
+    height: 32px;
+    width: 32px;
+    margin-top: 3px;
+    margin-right: 3px;
+    margin-left: 3px;
+    border: 1px solid $primary-border-color;
+    z-index: 2;
+  }
+}
+.red-ui-tab-link-buttons {
+  text-decoration: none;
+  display: flex;
+  width: 100%;
+  text-align: center;
+  font-size: 16px;
+  a {
+    //@include workspace-button-toggle;
+    //color: $editor-button-background-primary; //selected
+    //border-right: 4px solid $editor-button-background-primary;
+    //background: #e0e0e0;
+    text-decoration: none;
+    width: 86px;
+    display: block;
+    //height: 28px;
+    padding: 1px 14px;
+    z-index: 2;
+    &.red-ui-tab-link-button {
+      &:not(.active) {
+        background: #d3d3d3;
+        color: $editor-button-color;
+        border-right: 0.5px solid rgba(60, 60, 60, 0.2);
+        border-left: 0.5px solid rgba(60, 60, 60, 0.2);
+        //border: none; // not selected
+      }
+    }
+    &.red-ui-tab-link-button {
+      &.active {
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        background: #f3f3f3;
+        // color: $editor-button-color;
+        color: #2979ff;
+        //border: none; // not selected
+      }
+    }
+    &.red-ui-tab-link-button-menu {
+      border-color: white;
+    }
+  }
+}
+.red-ui-tab-scroll {
+  display: none;
+  width: 21px;
+  top: 0;
+  a {
+    height: 35px;
+    width: 21px;
+    display: block;
+    color: $link-color;
+    font-size: 22px;
+    text-align: center;
+    margin: 0;
+    border-left: none;
+    border-right: none;
+    border-top: none;
+  }
+}
+.red-ui-tab-scroll-left {
+  left: 0;
+  a {
+    border-right: 1px solid $primary-border-color;
+    // box-shadow: 8px 0px 5px -2px rgba(0,0,0,0.1);
+  }
+}
+.red-ui-tab-scroll-right {
+  right: 0px;
+  a {
+    border-left: 1px solid $primary-border-color;
+    // box-shadow: -8px 0px 5px -2px rgba(0,0,0,0.1);
+  }
+}
+.red-ui-tabs.red-ui-tabs-add .red-ui-tab-scroll-right {
+  display: none;
+  right: 38px;
+}
+
+.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search .red-ui-tab-scroll-right {
+  display: none;
+  right: 76px;
+}
+.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search .red-ui-tabs-add {
+  display: none;
+  right: 38px;
+}
+
+img.red-ui-tab-icon {
+  margin-left: -8px;
+  margin-right: 3px;
+  margin-top: -2px;
+  opacity: 0.1;
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+}
+i.red-ui-tab-icon {
+  opacity: 0.7;
+  width: 18px;
+  height: 20px;
+}
+
+.red-ui-tabs-badges {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 20px;
+  pointer-events: none;
+  display: block;
+  height: 30px;
+  line-height: 28px;
+  text-align: center;
+  padding: 0px;
+  color: #aaa;
+}
+
+.red-ui-tabs-badges i {
+  display: none;
+}
+
+.red-ui-tab.node_changed img.node_changed {
+  //display: inline-block;
+  display: none; // no point to show the node is dirty if we autodeploying
+}
+.red-ui-tab.node_error img.node_error {
+  display: inline-block;
+}
+
+.red-ui-tabs-badges img {
+  width: 10px;
+  height: 10px;
+  margin-right: 2px;
+  vertical-align: top;
+}
+
+.red-ui-tab-close {
+  display: none;
+  background: $tab-background-inactive;
+  opacity: 0.8;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  width: 20px;
+  height: 30px;
+  line-height: 28px;
+  text-align: center;
+  padding: 0px;
+  color: #aaa;
+  &:hover {
+    background: $workspace-button-background-hover !important;
+    opacity: 1;
+  }
+}