systemview 1.0.0 → 1.1.1

package/src/molecules/TestSummary/index.js

@@ -0,0 +1,212 @@
+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

@@ -0,0 +1,83 @@
+.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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,178 @@
+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}`,
+// };

package/src/molecules/ValidationInput/ValidationOptions.js

@@ -0,0 +1,113 @@
+const string = {
+  options: [
+    "Equals:",
+    "Min Length:",
+    "Max Length:",
+    "Length Equals:",
+    "Is Like:",
+    "Is One Of:",
+  ],
+  values: ["strEquals", "minLength", "maxLength", "lengthEquals", "isLike", "isOneOf"],
+  inputs: ["text", "number", "number", "number", "text", "text"],
+};
+const number = {
+  options: ["Equals:", "Min:", "Max:", "Is One Of:"],
+  values: ["numEquals", "min", "max", "isOneOf"],
+  inputs: ["number", "number", "number", "text"],
+};
+const array = {
+  options: ["Min Length:", "Max Length:", "Length Equals:", "Includes:"],
+  values: ["minLength", "maxLength", "lengthEquals", "includes"],
+  inputs: ["number", "number", "number", "text"],
+};
+const date = {
+  options: ["Equals:", "Min:", "Max:"],
+  values: ["dateEquals", "minDate", "maxDate"],
+  inputs: ["datetime-local", "datetime-local", "datetime-local"],
+};
+const boolean = { options: ["Equals:"], values: ["boolEquals"], inputs: ["checkbox"] };
+const object = { options: [], values: [], inputs: [] };
+const target = {
+  options: [
+    //string
+    "Equals (str):",
+    "Min Length (str):",
+    "Max Length (str):",
+    "Length Equals (str):",
+    "Is Like:",
+    "Is One Of (str):",
+    //number
+    "Equals (num):",
+    "Min (num):",
+    "Max (num):",
+    "Is One Of (num):",
+    //array
+    "Min Length (arr):",
+    "Max Length (arr):",
+    "Length Equals (arr):",
+    "Includes:",
+    //date
+    "Date Equals:",
+    "Min Date:",
+    "Max Date:",
+    //boolean
+    "Equals (bool)",
+  ],
+  values: [
+    //string
+    "strEquals",
+    "minLength",
+    "maxLength",
+    "lengthEquals",
+    "isLike",
+    "isOneOf",
+    //number
+    "numEquals",
+    "min",
+    "max",
+    "isOneOf",
+    //array
+    "minLength",
+    "maxLength",
+    "lengthEquals",
+    "includes",
+    //date
+    "dateEquals",
+    "minDate",
+    "maxDate",
+    //boolean
+    "boolEquals",
+  ],
+  inputs: [
+    //string
+    "text",
+    "number",
+    "number",
+    "number",
+    //number
+    "text",
+    "text",
+    "number",
+    "number",
+    "number",
+    "text",
+    //array
+    "number",
+    "number",
+    "number",
+    "text",
+    //date
+    "datetime-local",
+    "datetime-local",
+    "datetime-local",
+    "checkbox",
+  ],
+};
+const options = { array, number, date, boolean, string, object, target };
+export default options;
+export const inputToTypes = {
+  text: "string",
+  number: "number",
+  "datetime-local": "date",
+  checkbox: "boolean",
+};