systemview 1.1.1 → 1.2.2

package/src/molecules/ServerModulesList/styles.scss

@@ -1,28 +0,0 @@
-.server-module {
-  &__methods {
-    display: flex;
-    &--selected-true {
-      background: linear-gradient(90deg, #deefe8 69%, white 100%);
-      background: linear-gradient(90deg, #d8d7e9 69%, white 100%);
-      border-radius: 5px 2px 2px 5px;
-      font-weight: bold;
-      & > a {
-        color: #575fc1;
-      }
-    }
-  }
-
-  &__docs-icon {
-    display: inline;
-    margin-left: auto;
-    & img {
-      width: 23px !important;
-    }
-  }
-  &__name {
-    &--plugin a {
-      color: #4caf50;
-      font-weight: bold;
-    }
-  }
-}

package/src/molecules/TargetSelector/TargetSelector.js

@@ -1,34 +0,0 @@
-import React from "react";
-import AutoCompleteBox from "../AutoCompleteBox/AutoCompleteBox";
-import "./styles.scss";
-
-const TargetSelector = ({
-  controller,
-  target_namespace,
-  testIndex,
-  arg_index,
-  className,
-  target_index,
-}) => {
-  const submit = (value) => {
-    controller.setTargetValue(testIndex, arg_index, target_index, value, ["input"], 0);
-  };
-  //gather suggestions
-  //create a onchange fn to update target value as user types
-  //submit fn should fill text box (already automatic) and then update target value
-  return (
-    <div className={`target-selector`}>
-      <AutoCompleteBox
-        className={`target-selector__auto-complete ${className}`}
-        suggestions={controller.getTargetSuggestions(testIndex)}
-        onSubmit={submit}
-        onChange={submit}
-        value={target_namespace}
-        placeholder={"beforeTest.Action1.results..."}
-        requireSelection={false}
-      />
-    </div>
-  );
-};
-
-export default TargetSelector;

package/src/molecules/TestCaption/TestCaption.js

@@ -1,26 +0,0 @@
-import React from "react";
-import "./styles.scss";
-
-const TestCaption = ({ caption, useInput = false, onChange, title }) => {
-  const className = "test-caption";
-  const clickHandle = (e) => {
-    typeof onChange === "function" && onChange(e.target.value);
-  };
-  return (
-    <div className={`${className}`}>
-      <span className={`${className}__title`}>{caption}</span>
-      <span
-        className={`${className}__description-input ${className}__description-input--visible-${useInput}`}
-      >
-        <input
-          value={title}
-          type="text"
-          placeholder="describe the test..."
-          onChange={clickHandle}
-        />
-      </span>
-    </div>
-  );
-};
-
-export default TestCaption;

package/src/molecules/TestCaption/styles.scss

@@ -1,40 +0,0 @@
-.test-caption {
-  padding: 0 8px;
-  font-size: 16px;
-  margin: 0 4px;
-  width: 100%;
-  display: flex;
-  font-weight: 400;
-  font-family: sans-serif;
-  align-items: center;
-
-  &__title {
-    color: #0d8065;
-  }
-  &__description-input {
-    flex: 1;
-    padding-left: 5px;
-    & input {
-      width: 104%;
-      border: none;
-      color: #5a77e5;
-      text-overflow: ellipsis;
-      font-size: 16px;
-      text-indent: 10px;
-      background: #e9e9e9;
-      /* font-weight: 600; */
-      /* font-style: italic; */
-      border-radius: 41px;
-      line-height: 19px;
-      color: #676767;
-      &::placeholder {
-        font-weight: 400;
-        font-style: italic;
-        color: #bebebe;
-      }
-    }
-    &--visible-false {
-      display: none;
-    }
-  }
-}

package/src/molecules/TestSummary/index.js

@@ -1,212 +0,0 @@
-import React, { useEffect, useState } from "react";
-import Count from "../../atoms/Count";
-import TestCaption from "../TestCaption/TestCaption";
-import CHECK from "../../assets/check.svg";
-import ERROR from "../../assets/error.svg";
-import ARROW from "../../assets/arrow.png";
-import LOADING from "../../assets/loading.gif";
-import "./styles.scss";
-import ExpandIcon from "../../atoms/ExpandableIcon/ExpandableIcon";
-import { Argument } from "../Args/Args";
-import ValidationMessage from "../ValidationInput/ValidationMessages";
-
-const CLASS_NAME = "test-summary";
-export default function TestSummary({ testSection = [], section, isTesting }) {
-  const [open, setOpen] = useState(false);
-  const toggleExpansion = () => {
-    setOpen((state) => !state);
-  };
-
-  const validationCount = testSection.reduce((sum, test) => {
-    test.totalValidations = test.savedEvaluations.reduce(
-      (sum, { type, expected_type, namespace, validations }) => {
-        sum.push({
-          name: "typeError",
-          expected: expected_type,
-          received: type,
-          namespace,
-        });
-
-        return sum.concat(
-          validations.map(({ name, value }) => ({ name, expected: value, namespace }))
-        );
-      },
-      []
-    );
-
-    return (sum += test.totalValidations.length);
-  }, 0);
-
-  const errorCount = testSection.reduce((sum, { errors }) => (sum += errors.length), 0);
-
-  useEffect(() => {
-    setOpen(true);
-  }, [isTesting]);
-  return (
-    <section className={`${CLASS_NAME}`}>
-      <div className={`${CLASS_NAME}__header`}>
-        <ExpandIcon color="#0d8065" isOpen={open} onClick={toggleExpansion} />
-
-        <TestCaption
-          caption={
-            <div className={`${CLASS_NAME}__caption--${section}`}>
-              <span>{section + " Test"}:</span>
-              <span>
-                <Count count={testSection.length} stat="actions" />
-                <Count
-                  count={validationCount}
-                  stat="validations"
-                  type={!!validationCount && "caution"}
-                />
-              </span>
-              <span>
-                <Count count={errorCount} stat="errors" type={!!errorCount && "error"} />
-              </span>
-            </div>
-          }
-        />
-      </div>
-      {open && (
-        <div>
-          {testSection.map((test, i) => (
-            <Test key={i} {...test} />
-          ))}
-        </div>
-      )}
-    </section>
-  );
-}
-function Test({
-  title,
-  errors = [],
-  namespace,
-  args,
-  results,
-  test_end,
-  test_start,
-  response_type,
-  totalValidations,
-}) {
-  const filterPassingValidations = (tv) =>
-    tv.filter(
-      (v) => !errors.find((e) => e.namespace === v.namespace && e.name === v.name)
-    );
-
-  const [open, setOpen] = useState(false);
-  const toggleExpansion = () => {
-    setOpen((state) => !state);
-  };
-
-  return (
-    <div>
-      <div className={`${CLASS_NAME}__actions`}>
-        <span className={`${CLASS_NAME}__action-text`}>
-          <ExpandIcon color="black" onClick={toggleExpansion} isOpen={open} /> {title}
-        </span>
-        {!!test_start && !test_end && (
-          <img src={LOADING} alt="check" style={{ width: "18px" }} />
-        )}
-        {/* <img src={LOADING} alt="check" style={{ width: "18px" }} /> */}
-
-        {!!test_end && (
-          <>
-            {errors.length ? (
-              <img src={ERROR} alt="check" style={{ width: "18px" }} />
-            ) : (
-              <img src={CHECK} alt="check" style={{ width: "18px" }} />
-            )}
-          </>
-        )}
-      </div>
-      {open && (
-        <>
-          <TestMethod namespace={namespace} args={args} />
-          {!!test_end && (
-            <>
-              <TestResponse results={results} response_type={response_type} />
-              {!!errors.length && (
-                <TestValidations title={"failing validations"} validations={errors} />
-              )}
-            </>
-          )}
-
-          <TestValidations
-            title={`${!test_end ? "total" : "passing"} validations`}
-            validations={filterPassingValidations(totalValidations)}
-            isError={false}
-          />
-        </>
-      )}
-    </div>
-  );
-}
-
-function TestMethod({ namespace, args }) {
-  const { serviceId, moduleName, methodName } = namespace;
-  return (
-    <div className={`${CLASS_NAME}__method`}>
-      <img className={`${CLASS_NAME}__arrow`} src={ARROW} alt="arrow" />
-      <span
-        className={`${CLASS_NAME}__namespace`}
-      >{`${serviceId}.${moduleName}.${methodName}`}</span>
-      <span className={`${CLASS_NAME}__parentheses`}>(</span>
-      {args.map(({ data_type, value, targetValues }, i) => (
-        <React.Fragment key={i}>
-          <span className={`${CLASS_NAME}__parameter`}>
-            {!!targetValues.length && "tv:"}
-            <Argument value={value()} data_type={data_type} />
-          </span>
-          {i < args.length - 1 && <span className={`${CLASS_NAME}__comma`}>,</span>}
-        </React.Fragment>
-      ))}
-      <span className={`${CLASS_NAME}__parentheses`}>)</span>
-    </div>
-  );
-}
-
-function TestResponse({ results = mock, response_type = "results" }) {
-  return (
-    <div className={`${CLASS_NAME}__method`}>
-      <img className={`${CLASS_NAME}__arrow`} src={ARROW} alt="arrow" />
-      <span className={`${CLASS_NAME}__results`}>{response_type}:</span>
-      <Argument value={results} />
-    </div>
-  );
-}
-
-function TestValidations({ validations = [], isError = true, title }) {
-  // const color = ;
-  const color = isError ? "#f44336" : "#2aa198";
-  const [open, setOpen] = useState(isError);
-  const toggleExpansion = () => {
-    setOpen((state) => !state);
-  };
-
-  return (
-    <div>
-      <div className={`${CLASS_NAME}__method ${CLASS_NAME}__validations`}>
-        <img className={`${CLASS_NAME}__arrow`} src={ARROW} alt="arrow" />
-        <span style={{ color }} className={`${CLASS_NAME}__results`}>
-          {validations.length} {title}:
-        </span>
-        <ExpandIcon onClick={toggleExpansion} isOpen={open} color={"#2aa198"} size={10} />
-      </div>
-      {open && (
-        <>
-          {validations.map((error, i) => {
-            return <ValidationMessage key={i} {...error} error={isError} />;
-          })}
-        </>
-      )}
-    </div>
-  );
-}
-
-const mock = {
-  host: "localhost",
-  route: "/bu/api/basketball",
-  port: 4100,
-  serviceUrl: "http://localhost:4100/bu/api/basketball",
-  namespace: "http://localhost:2923/vRwTJOske",
-  SystemLynxService: true,
-};

package/src/molecules/TestSummary/styles.scss

@@ -1,83 +0,0 @@
-.test-summary {
-  padding: 8px 5px;
-  border: 1px solid #dfdfdf;
-  border-top: none;
-  border-bottom: 1px solid #e8e8e8;
-  &:last-child {
-    border-bottom: 1px solid #dfdfdf;
-  }
-  &__actions {
-    padding: 3px 0px;
-    display: flex;
-    font-weight: 300;
-  }
-  &__action-text {
-    flex: 1;
-  }
-  &__method {
-    font-family: "FS Mono", monospace;
-    margin-left: 10px;
-    margin-bottom: 10px;
-    color: #223a95;
-    color: #a954ff;
-    font-weight: 500;
-    display: flex;
-    align-items: flex-start;
-    flex-wrap: wrap;
-    & span.collapsed-icon {
-      position: relative;
-      top: 2px;
-      left: 7px;
-    }
-  }
-  &__validations {
-    & .expandable-icon {
-      align-self: flex-end;
-      margin-left: 3px;
-    }
-  }
-  &__failed-validations {
-    padding: 4px 25px;
-    color: #ff5722;
-    font-family: monospace;
-    &--namespace {
-      color: #a954ff;
-      font-weight: 700;
-    }
-  }
-  &__header {
-    display: flex;
-    align-items: center;
-  }
-  &__parameter {
-    display: inline-flex;
-    border-radius: 4px;
-    background: white;
-    border: 1px solid #fce8ff;
-  }
-  &__comma {
-    font-weight: bold;
-    color: green;
-    font-size: 17;
-    margin-right: 3px;
-    align-self: flex-end;
-  }
-  &__parentheses {
-    font-weight: bolder;
-    font-size: 15px;
-    position: relative;
-    top: -1px;
-    align-self: flex-end;
-  }
-
-  &__results {
-    color: #a954ff;
-    font-weight: 700;
-  }
-  &__arrow {
-    margin-right: 10px;
-  }
-  &__caption--Main {
-    font-weight: bold;
-  }
-}

package/src/molecules/TextWith2Links/TextWith2Links.js

@@ -1,10 +0,0 @@
-import React from "react";
-import "./styles.scss";
-import Text from "../../atoms/Text/Text";
-import Link from "../../atoms/Link/Link";
-
-const TextWith2Links = () => {
-  return <div>TextWith2Links</div>;
-};
-
-export default TextWith2Links;

package/src/molecules/ValidationInput/ValidationInput.js

@@ -1,64 +0,0 @@
-import React, { useState } from "react";
-import Selector from "../../atoms/Selector/Selector";
-import Toggle from "../../atoms/Toggle/Toggle";
-import options from "./ValidationOptions";
-import "./styles.scss";
-
-const ValidationInput = ({
-  type,
-  name,
-  value,
-  className = "",
-  onSelect,
-  onInputChanged,
-}) => {
-  const [inputType, setType] = useState(
-    options[type].inputs[Math.max(options[type].values.indexOf(name), 0)]
-  );
-
-  const select = (e) => {
-    const validation_type = e.target.value;
-    const i = options[type].values.findIndex((v) => v === validation_type);
-    setType(options[type].inputs[i]);
-
-    onSelect(e.target.value);
-  };
-  const inputChanged = (e) => {
-    if (e.target.type === "number") onInputChanged(parseInt(e.target.value));
-    else if (e.target.type === "checkbox") onInputChanged(e.target.checked);
-    else onInputChanged(e.target.value);
-  };
-  const classname = "validation-input";
-  return (
-    <div className={`validation-input ${className}`}>
-      <Selector
-        className={`${classname}__selector`}
-        options={options[type].options}
-        values={options[type].values}
-        controlledOption={name}
-        onSelect={select}
-      />
-      {type !== "boolean" ? (
-        <input
-          className={`${classname}__input`}
-          type={inputType}
-          name="validtion-input"
-          autoComplete="off"
-          value={value}
-          onChange={inputChanged}
-        />
-      ) : (
-        <>
-          <Toggle isChecked={value} onChange={inputChanged} round={true} />{" "}
-          <span
-            className={`${classname}__value--boolean ${classname}__value--boolean--${value}`}
-          >
-            {(value === true) + ""}
-          </span>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default ValidationInput;

package/src/molecules/ValidationInput/ValidationMessages.js

@@ -1,178 +0,0 @@
-import moment from "moment/moment";
-
-const vowels = ["a", "e", "i", "o", "u"];
-const isVowel = (str) => vowels.includes((str + "").toLowerCase());
-const an = (word) =>
-  word + "" === "undefined" ? "" : isVowel((word + "")[0]) ? "an" : "a";
-const className = "error-message";
-
-export default function ValidationMessage({
-  name,
-  namespace,
-  expected,
-  error = true,
-  received,
-}) {
-  const PRETEXT = error ? "Expected" : "Expecting";
-  return (
-    <div className={`${className}`}>
-      {ErrorMessages[name](namespace, expected, PRETEXT, error && received)}
-    </div>
-  );
-}
-
-const typeError = (namespace, expected, pretext, received, amendment) => {
-  return (
-    <div className={`${className}__message`}>
-      {pretext} <span className={`${className}__namespace`}>{namespace}</span> to be{" "}
-      {an(expected)} <span className={`${className}__expected`}>{expected} </span>
-      {received && (
-        <span>
-          (received {an(received)} {received})
-        </span>
-      )}
-      {amendment && amendment}
-    </div>
-  );
-};
-const lengthEquals = (namespace, expected, PRETEXT, received) => (
-  <div className={`${className}__message`}>
-    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to have a
-    length of <span className={`${className}__expected`}>{expected}</span>
-    {received && <span> (received {received})</span>}
-  </div>
-);
-const maxLength = (namespace, expected, PRETEXT, received) => (
-  <div className={`${className}__message`}>
-    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to have a
-    maximum length of <span className={`${className}__expected`}>{expected}</span>
-    {received && <span> (received {received})</span>}
-  </div>
-);
-const minLength = (namespace, expected, PRETEXT, received) => (
-  <div className={`${className}__message`}>
-    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to have a
-    minimum length of <span className={`${className}__expected`}>{expected}</span>
-    {received && <span> (received {received})</span>}
-  </div>
-);
-const includes = (namespace, expected, PRETEXT) => (
-  <div className={`${className}__message`}>
-    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to include
-    the following value: <span className={`${className}__expected`}>{expected}</span>
-  </div>
-);
-const isLike = (namespace, expected, PRETEXT) => (
-  <div className={`${className}__message`}>
-    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to be like
-    the following expression: <span className={`${className}__expected`}>{expected}</span>
-  </div>
-);
-const isOneOf = (namespace, expected, PRETEXT) => (
-  <div className={`${className}__message`}>
-    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to be one of
-    the following values: <span className={`${className}__expected`}>{expected}</span>
-  </div>
-);
-const strEquals = (namespace, expected, PRETEXT) => (
-  <div className={`${className}__message`}>
-    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to equal{" "}
-    <span className={`${className}__expected`}>"{expected}"</span>
-  </div>
-);
-const numEquals = (namespace, expected, PRETEXT, received) => (
-  <div className={`${className}__message`}>
-    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to equal{" "}
-    <span className={`${className}__expected`}>{parseInt(expected)} </span>
-    {received && <span> (received {received})</span>}
-  </div>
-);
-const max = (namespace, expected, PRETEXT, received) => (
-  <div className={`${className}__message-container`}>
-    {typeError(
-      namespace,
-      "number",
-      PRETEXT,
-      undefined,
-      <span>
-        less than <span className={`${className}__expected`}>{expected}</span>
-        {received && <span> (received {received})</span>}
-      </span>
-    )}
-  </div>
-);
-const min = (namespace, expected, PRETEXT, received) => (
-  <div className={`${className}__message-container`}>
-    {typeError(
-      namespace,
-      "number",
-      PRETEXT,
-      undefined,
-      <span>
-        greater than <span className={`${className}__expected`}>{expected}</span>
-        {received && <span> (received {received})</span>}
-      </span>
-    )}
-  </div>
-);
-const boolEquals = (namespace, expected, PRETEXT, received) => (
-  <div className={`${className}__message`}>
-    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to be{" "}
-    {expected.toString()} {received && <span> (received {received})</span>}
-  </div>
-);
-const dateEquals = (namespace, expected, PRETEXT) => (
-  <div className={`${className}__message`}>
-    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to be
-    {moment(expected).format("L LTS")}
-  </div>
-);
-const minDate = (namespace, expected, PRETEXT) => (
-  <div className={`${className}__message`}>
-    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to be a
-    date/time later than <span className={`${className}__expected`}>{expected}</span>
-  </div>
-);
-const maxDate = (namespace, expected, PRETEXT) => (
-  <div className={`${className}__message`}>
-    {PRETEXT} <span className={`${className}__namespace`}>{namespace}</span> to be a
-    date/time earlier than <span className={`${className}__expected`}>{expected}</span>
-  </div>
-);
-export const ErrorMessages = {
-  typeError,
-  lengthEquals,
-  maxLength,
-  minLength,
-  includes,
-  isLike,
-  isOneOf,
-  strEquals,
-  numEquals,
-  max,
-  min,
-  boolEquals,
-  dateEquals,
-  minDate,
-  maxDate,
-};
-// export const errorMessages = {
-//   typeError= (namespace, expected) => {
-//     const a = isVowel(e) ? "an" : "a";
-//     return `Expected ${namespace}to be ${a} ${expected}`;
-//   },
-//   lengthEquals= (namespace, expected) => `Expected ${namespace} to have a length of ${expected}`,
-//   maxLength= (namespace, expected) => `Expected ${namespace} to have a maximum length of ${expected}`,
-//   minLength= (namespace, expected) => `Expected ${namespace} to have a minimum length of ${expected}`,
-//   includes= (namespace, expected) => `Expected ${namespace} to include the following value: ${expected}`,
-//   isLike= (namespace, expected) => `Expected ${namespace} to be like the following expression: ${expected}`,
-//   isOneOf= (namespace, expected) => `Expected ${namespace} to be one of the following values: ${expected}`,
-//   strEquals= (namespace, expected) => `Expected ${namespace} to equal "${expected}"`,
-//   numEquals= (namespace, expected) => `Expected ${namespace} to equal ${expected}`,
-//   max= (namespace, expected) => `Expected ${namespace} to be less than ${expected}`,
-//   min= (namespace, expected) => `Expected ${namespace} to be greater than ${expected}`,
-//   boolEquals= (namespace, expected) => `Expected ${namespace} to be ${e.toString()}`,
-//   dateEquals= (namespace, expected) => `Expected ${namespace} to be ${moment(e).format()}`,
-//   minDate= (namespace, expected) => `Expected ${namespace} to be a date/time later than ${expected}`,
-//   maxDate= (namespace, expected) => `Expected ${namespace} to be a date/time earlier than ${expected}`,
-// };