systemview 1.0.1 → 1.1.1

package/src/molecules/ExpandableSection/ExpandableSection.js

@@ -0,0 +1,36 @@
+import React from "react";
+import "./styles.scss";
+import ExpandIcon from "../../atoms/ExpandableIcon/ExpandableIcon";
+
+const ExpandableSection = ({
+  children,
+  title,
+  color = "#2aa198",
+  open,
+  lock,
+  toggleExpansion,
+}) => {
+  return (
+    <div className="expandable-section">
+      <div className="expandable-section__title">
+        <span
+          className={`expandable-section__btn expandable-section__btn--hide-${lock}`}
+          onClick={toggleExpansion}
+        >
+          <ExpandIcon color={color} isOpen={open} />
+        </span>
+        {title}
+      </div>
+
+      <div
+        className={`expandable-section__items expandable-section__items--${
+          !open ? "hidden" : ""
+        }`}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default ExpandableSection;

package/src/molecules/ExpandableSection/styles.scss

@@ -0,0 +1,22 @@
+.expandable-section {
+  width: 100%;
+  margin-bottom: 6px;
+  &__items {
+    &--hidden {
+      display: none;
+    }
+  }
+  &__title {
+    margin-bottom: 7px;
+    display: flex;
+    position: relative;
+    &__btn {
+      cursor: pointer;
+    }
+  }
+  &__btn {
+    &--hide-true {
+      visibility: hidden;
+    }
+  }
+}

package/src/molecules/ServerModulesList/ServerModulesList.js

@@ -0,0 +1,75 @@
+import React from "react";
+import "./styles.scss";
+import ExpandableList from "../ExpandableList/ExpandableList";
+import MyLink from "../../atoms/Link/Link";
+import DocIcon from "../../atoms/DocsIcon/DocsIcon";
+import TestsIcon from "../../atoms/TestsIcon/TestsIcon";
+
+const ServerModulesList = ({
+  projectCode,
+  serviceId,
+  modules,
+  selectedModuleName,
+  selectedMethodName,
+  specList,
+}) => {
+  const className = "server-module";
+
+  return (
+    <React.Fragment>
+      {modules.map(({ name, methods }, i) => {
+        const isSelected = selectedModuleName === name;
+        const isSaved = specList.docs.includes(`${name}.md`);
+        return (
+          <ExpandableList
+            open={selectedModuleName === name}
+            key={i}
+            title={
+              <span
+                className={`system-nav__link system-nav__link--selected-${
+                  !selectedMethodName && isSelected
+                } ${name === "Plugin" && className + "__name--plugin"}`}
+              >
+                <MyLink link={`/${projectCode}/${serviceId}/${name}`} text={name} />
+                <span className={`${className}__docs-icon`}>
+                  <DocIcon isSaved={isSaved} />
+                </span>
+              </span>
+            }
+          >
+            {methods.map(({ fn }, i) => {
+              const isSavedDoc = !!specList.docs.includes(`${name}.${fn}.md`);
+              const isSavedTest = !!specList.tests.includes(`${name}.${fn}.json`);
+              return (
+                <div
+                  key={i}
+                  className={`${className}__methods system-nav__link--selected-${
+                    fn === selectedMethodName && isSelected
+                  }`}
+                >
+                  <MyLink
+                    key={i}
+                    link={`/${projectCode}/${serviceId}/${name}/${fn}`}
+                    text={
+                      <span>
+                        {`.${fn}(`}
+                        <span style={{ fontWeight: "bold" }}>...</span>
+                        {")"}
+                      </span>
+                    }
+                  />
+                  <div className={`${className}__docs-icon`}>
+                    <DocIcon isSaved={isSavedDoc} />
+                    <TestsIcon isSaved={isSavedTest} />
+                  </div>
+                </div>
+              );
+            })}
+          </ExpandableList>
+        );
+      })}
+    </React.Fragment>
+  );
+};
+
+export default ServerModulesList;

package/src/molecules/ServerModulesList/styles.scss

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

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

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

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

@@ -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;