systemview 1.0.1 → 1.1.2

package/src/molecules/ValidationInput/styles.scss

@@ -0,0 +1,74 @@
+.error-message {
+  padding: 4px 25px;
+  color: #ff5722;
+  word-break: break-word;
+  font-family: monospace;
+  &__message-container {
+    background: #ededed;
+  }
+  &__message {
+    padding: 6px 23px;
+    background: #ededed;
+    border-radius: 5px;
+  }
+  &__namespace {
+    color: #b136c6;
+    font-weight: 600;
+  }
+  &__expected {
+    color: #0b8b22;
+    font-weight: 700;
+  }
+}
+
+.validation-input {
+  margin: 3px 0;
+  display: flex;
+  &__input,
+  &__selector {
+    background: none;
+    border: none;
+    font-family: monospace;
+    font-size: 14px;
+  }
+  &__selector {
+    padding: 3px;
+    outline: none;
+    border-right: none;
+    appearance: none;
+    cursor: pointer;
+    font-weight: bold;
+    color: #009688;
+    text-indent: 5px;
+    &:hover {
+      background: #b3c1e8;
+      border-radius: 33px;
+      // color: #f1f1f1;
+    }
+  }
+
+  &__input {
+    padding: 4px;
+    outline: none;
+    color: #0d8065;
+  }
+  &__value {
+    &--boolean {
+      &--true {
+        color: #207844;
+      }
+      &--false {
+        color: #cf1515;
+      }
+      position: relative;
+      top: 7px;
+      font-weight: bold;
+    }
+  }
+}
+input:-webkit-autofill {
+  border: 3px solid blue;
+}
+input:autofill {
+  border: 3px solid blue;
+}

package/src/molecules/ValidationInput/validator.js

@@ -0,0 +1,244 @@
+import moment from "moment";
+import {
+  arr,
+  obj,
+  parseIndex,
+  mapNamespace,
+  replaceLastIndex,
+  switchArrayIndices,
+} from "../../organisms/TestPanel/components/test-helpers";
+
+export function evaluate(value, namespace, savedEval = {}, shouldSave) {
+  const type = getType(value);
+  const validations = savedEval.validations || [];
+  const expected_type = savedEval.expected_type || type;
+  const save = shouldSave || !!savedEval.save;
+  const indexed = savedEval.indexed;
+  const errors = getErrors({ type, value, validations, expected_type });
+  return {
+    namespace,
+    expected_type,
+    validations,
+    save,
+    indexed,
+    type,
+    value,
+    errors,
+  };
+}
+
+export function validateResults() {
+  const { results, response_type, savedEvaluations, editMode } = this;
+  const savedEvalClone = [...savedEvaluations];
+  const shouldSave = !savedEvaluations.length;
+  const evaluations = [];
+  const errors = [];
+
+  function getSavedIndices(data, nsp) {
+    const randomIndex = () => {
+      // get all matching indices and rename them
+      // so they can be found later during getSavedEval
+      const index = arr(data).randomIndex();
+      const new_nsp = replaceLastIndex(nsp, index);
+      savedEvalClone.forEach((e) => {
+        if (!e.indexed) e.namespace = switchArrayIndices(e.namespace, new_nsp);
+      });
+      return index;
+    };
+    const savedIndices = savedEvalClone
+      .filter(({ namespace }) => {
+        return replaceLastIndex(namespace) === nsp;
+      })
+      .map((e) => {
+        if (e.indexed) {
+          return parseIndex(e.namespace);
+        } else {
+          return randomIndex();
+        }
+      });
+    return savedIndices.length ? savedIndices : [randomIndex()];
+  }
+  const getSavedEval = (nsp) => {
+    const i = savedEvalClone.findIndex(({ namespace }) => {
+      return replaceLastIndex(namespace) === replaceLastIndex(nsp);
+    });
+    return i > -1 ? savedEvalClone.splice(i, 1)[0] : {};
+  };
+  const addEvaluation = (evaluation) => {
+    evaluation.errors.forEach(
+      (e) => evaluation.save && errors.push({ ...e, namespace: evaluation.namespace })
+    );
+    evaluations.push(evaluation);
+  };
+
+  //evaluate based on the result only in edit mode
+  if (editMode)
+    (function recursiveEval(data, namespace) {
+      const evaluation = evaluate(data, namespace, getSavedEval(namespace), shouldSave);
+      addEvaluation(evaluation);
+      if (evaluation.type === "object") {
+        Object.getOwnPropertyNames(data).forEach((prop) => {
+          recursiveEval(data[prop], `${namespace}.${prop}`);
+        });
+      } else if (evaluation.type === "array") {
+        const indices = getSavedIndices(data, `${namespace}[0]`);
+        indices.forEach((index) => recursiveEval(data[index], `${namespace}[${index}]`));
+      }
+    })(results, response_type);
+
+  //evaluate based on the saved evaluations
+
+  // if (!editMode) {
+  const objParser = new obj({ [response_type]: results });
+  savedEvalClone.forEach(({ namespace, ...e }) => {
+    const value = objParser.valueAtNsp(namespace);
+    if (e.save) addEvaluation(evaluate(value, namespace, e));
+  });
+  // }
+
+  Object.assign(this, {
+    evaluations: evaluations.sort((e1, e2) => e1.namespace.localeCompare(e2.namespace)),
+    errors,
+  });
+}
+
+export function getErrors({ type, value, validations, expected_type }) {
+  if (type !== expected_type && expected_type !== "mixed")
+    return [{ name: "typeError", expected: expected_type, received: type }];
+
+  switch (type) {
+    case "number":
+      return validateNumber(value, validations);
+    case "date":
+      return validateDate(value, validations);
+    case "string":
+      return validateString(value, validations);
+    case "array":
+      return validateArray(value, validations);
+    case "boolean":
+      return validateBoolean(value, validations);
+    case "null":
+    case "undefined":
+    default:
+      return [];
+  }
+}
+
+export function getType(value) {
+  switch (true) {
+    case typeof value === "object":
+      if (!value) return "null";
+      else if (Array.isArray(value)) return "array";
+      else return "object";
+    case typeof value === "string":
+      if (moment(value).isValid()) return "date";
+      else return "string";
+    case typeof value === "number":
+      return "number";
+    case typeof value === "boolean":
+      return "boolean";
+    case typeof value === "undefined":
+      return "undefined";
+    default:
+      return "?";
+  }
+}
+
+export const defaultValue = (data_type) => {
+  switch (data_type) {
+    case "string":
+      return "";
+    case "number":
+      return 0;
+    case "date":
+      return moment().toJSON();
+    case "boolean":
+      return false;
+    case "array":
+      return [];
+    case "object":
+      return {};
+    case "null":
+      return null;
+    case "target":
+      return "";
+    case "undefined":
+    default:
+      return undefined;
+  }
+};
+
+const validateLength = (item, validations) =>
+  validations.reduce((errors, { name, value }) => {
+    if (name === "lengthEquals" && item.length !== value)
+      return errors.concat({ name, expected: value, received: item.length });
+    if (name === "maxLength" && item.length > value)
+      return errors.concat({ name, expected: value, received: item.length });
+    if (name === "minLength" && item.length < value)
+      return errors.concat({ name, expected: value, received: item.length });
+    return errors;
+  }, []);
+
+const validateArray = (arr, validations) =>
+  validations.reduce((errors, { name, value }) => {
+    if (name === "includes" && !arr.includes(value))
+      return errors.concat({ name, expected: value, received: arr });
+    return errors;
+  }, validateLength(arr, validations));
+
+const validateString = (str, validations) =>
+  validations.reduce((errors, { name, value }) => {
+    if (name === "strEquals" && str !== value)
+      return errors.concat({ name, expected: value, received: str });
+    //str.match() returns null when there is no match
+    if ((name === "isLike") & !str.match(new RegExp(value, "gi")))
+      return errors.concat({ name, expected: value, received: str });
+    if (
+      name === "isOneOf" &&
+      typeof value === "string" &&
+      !value
+        .split(",")
+        .map((v) => v.trim())
+        .includes(str)
+    )
+      return errors.concat({ name, expected: value, received: str });
+    return errors;
+  }, validateLength(str, validations));
+
+const validateNumber = (num, validations) =>
+  validations.reduce((errors, { name, value }) => {
+    if (name === "numEquals" && num !== value)
+      return errors.concat({ name, expected: value, received: num });
+    if (name === "max" && num > value)
+      return errors.concat({ name, expected: value, received: num });
+    if (name === "min" && num < value)
+      return errors.concat({ name, expected: value, received: num });
+    if (
+      name === "isOneOf" &&
+      typeof value === "string" &&
+      !value
+        .split(",")
+        .map((v) => parseInt(v))
+        .includes(num)
+    )
+      return errors.concat({ name, expected: value, received: num });
+    return errors;
+  }, []);
+
+const validateBoolean = (bool, validations) =>
+  validations.reduce((errors, { name, value }) => {
+    if (name === "boolEquals" && bool !== value)
+      return errors.concat({ name, expected: value, received: bool });
+    return errors;
+  }, []);
+
+const validateDate = (datetime, validations) =>
+  validations.reduce((errors, { name, value }) => {
+    if (name === "dateEquals" && !moment(datetime).isSame(value))
+      return errors.concat({ name, expected: value, received: datetime });
+    if (name === "maxDate" && moment(datetime).isAfter(value))
+      return errors.concat({ name, expected: value, received: datetime });
+    if (name === "minDate" && moment(datetime).isBefore(value))
+      return errors.concat({ name, expected: value, received: datetime });
+    return errors;
+  }, []);

package/src/organisms/Documentation/Documentation.js

@@ -0,0 +1,128 @@
+import React, { useState, useContext, useEffect } from "react";
+import "./styles.scss";
+import DescriptionBox from "../../atoms/DescriptionBox/DescriptionBox";
+import EditBox from "../../molecules/EditBox/EditBox";
+import Title from "../../atoms/Title/Title";
+import Markdown from "../../atoms/Markdown/Markdown";
+import ServiceContext from "../../ServiceContext";
+import { Client } from "systemlynx";
+
+export default function Documentation({
+  projectCode,
+  serviceId,
+  moduleName,
+  methodName,
+}) {
+  const { connectedServices } = useContext(ServiceContext);
+
+  const service = connectedServices.find(
+    (service) => service.serviceId === serviceId && service.projectCode === projectCode
+  );
+  const { Plugin } = service ? Client.createService(service.system.connectionData) : {};
+
+  const [doc, setDocument] = useState({
+    documentation: "",
+    namespace: { serviceId, moduleName, methodName },
+  });
+
+  const fetchDocument = async (Plugin) => {
+    setDocument({
+      documentation: "",
+      namespace: { serviceId, moduleName, methodName },
+    });
+    try {
+      if (Plugin) {
+        const results = await Plugin.getDoc({
+          serviceId,
+          moduleName,
+          methodName,
+        });
+        setDocument(results);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    fetchDocument(Plugin);
+  }, [methodName, moduleName, serviceId, Plugin]);
+
+  useEffect(() => {
+    // if (Plugin) Plugin.on(`reconnect`, fetchDocument.bind({}, Plugin));
+  }, [Plugin]);
+  return (
+    <section className="documentation">
+      <div className="documentation-view">
+        <div className="row">
+          <DocTitle
+            serviceId={serviceId}
+            moduleName={moduleName}
+            methodName={methodName}
+          />
+        </div>
+        <div className="row documentation-view__data-table">
+          <DocDescription doc={doc} setDocument={setDocument} Plugin={Plugin} />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const DocTitle = ({ serviceId, moduleName, methodName, variable_name = "..." }) => {
+  return (
+    <Title
+      style={{ marginBottom: "5px" }}
+      text={
+        <span className="documentation-view__title">
+          {methodName && moduleName && serviceId ? (
+            <>
+              {`${serviceId}.${moduleName}.${methodName}`}
+              <span className="documentation-view__parentheses">(</span>
+              <span className="documentation-view__parameter btn">{variable_name}</span>
+              <span className="documentation-view__parentheses">)</span>
+            </>
+          ) : moduleName && serviceId ? (
+            <>{`${serviceId}.${moduleName}`}</>
+          ) : (
+            serviceId && <>{`${serviceId}`}</>
+          )}
+        </span>
+      }
+    />
+  );
+};
+
+const DocDescription = ({ doc, setDocument, Plugin }) => {
+  const { serviceId, methodName, moduleName } = doc;
+  const [text, setText] = useState(doc.documentation);
+  const saveDocument = async (setFormDisplay) => {
+    if (Plugin) {
+      try {
+        const results = await Plugin.saveDoc({ ...doc, documentation: text });
+        setDocument(results);
+        setFormDisplay(false);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  };
+
+  const updateDoc = (documentation) => setText(documentation);
+  const cancel = () => setText(doc.documentation);
+
+  useEffect(() => {
+    setText(doc.documentation);
+  }, [doc]);
+  return (
+    <EditBox
+      mainObject={
+        <Markdown children={text || "Use markdown to create your documentation here"} />
+      }
+      hiddenForm={<DescriptionBox text={text || ""} setValue={updateDoc} />}
+      formSubmit={saveDocument}
+      stateChange={[serviceId, methodName, moduleName]}
+      onCancel={cancel}
+    />
+  );
+};

package/src/organisms/Documentation/styles.scss

@@ -0,0 +1,22 @@
+.documentation-view {
+  padding-top: 2rem;
+  color: black;
+
+  &__parameter {
+    color: #3dceac;
+    font-weight: bold;
+  }
+
+  &__data-table {
+    margin-bottom: 30px;
+  }
+  &__title {
+    color: #454c69;
+    display: flex;
+    align-items: flex-start;
+    margin-left: 4px;
+  }
+  &__parentheses {
+    font-size: 26px;
+  }
+}

package/src/organisms/MultiTestSection/MultiTestSection.js

@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import ExpandableSection from "../../molecules/ExpandableSection/ExpandableSection";
+import TestCaption from "../../molecules/TestCaption/TestCaption";
+import TestContainer from "../TestContainer/TestContainer";
+import Argument from "../TestPanel/components/Argument.class";
+
+import "./styles.scss";
+import Count from "../../atoms/Count";
+
+const MultiTestSection = ({
+  caption,
+  TestController,
+  TestSection,
+  dynamic,
+  namespace,
+  arg = {},
+  staticArguments,
+}) => {
+  const className = "multi-test-section";
+  const [open, setOpen] = useState(false);
+
+  const toggleExpansion = () => {
+    setOpen((state) => !state);
+  };
+
+  const addTest = () => {
+    TestController.addTest(
+      namespace,
+      arg.name && [new Argument(arg.name, arg.FullTest, arg.input_type)]
+    );
+    TestSection.length === 1 && setOpen(true);
+  };
+  return (
+    <section className={className}>
+      <ExpandableSection
+        toggleExpansion={toggleExpansion}
+        open={open}
+        title={
+          <>
+            <TestCaption
+              caption={
+                <span>
+                  {caption}{" "}
+                  {TestSection.length > 0 && <Count count={TestSection.length} />}
+                </span>
+              }
+            />
+            <AddButton onClick={addTest} className={className} />
+          </>
+        }
+        title_color="#0d8065"
+      >
+        <div className={`${className}__test-data`}>
+          {TestSection.length > 0 ? (
+            TestSection.map((test, i) => (
+              <TestContainer
+                key={i}
+                TestController={TestController}
+                test={test}
+                testIndex={i}
+                title={`${i + 1}:`}
+                title_color={"#4b53b3"}
+                dynamic={dynamic}
+                open={true}
+                staticArguments={staticArguments}
+                multiTest
+              />
+            ))
+          ) : (
+            <span>no actions</span>
+          )}
+        </div>
+      </ExpandableSection>
+    </section>
+  );
+};
+
+const AddButton = ({ onClick, className }) => {
+  return (
+    <span className={`${className}__add-btn btn`} onClick={onClick}>
+      +
+    </span>
+  );
+};
+export default MultiTestSection;

package/src/organisms/MultiTestSection/styles.scss

@@ -0,0 +1,22 @@
+.multi-test-section {
+  width: 100%;
+  &__test-data {
+    background: #dadada;
+    padding: 12px 15px;
+    width: 100%;
+    border-radius: 5px;
+  }
+  &__add-btn {
+    padding: 0px 4px;
+    border-radius: 21px;
+    font-weight: bold;
+    color: #5960b6;
+    font-size: 16px;
+    background: #cecee3;
+    font-family: monospace;
+  }
+}
+
+.react-json-view {
+  font-size: 14px;
+}