systemview 1.0.1 → 1.1.2

package/src/organisms/SavedTests/SavedTests.js

@@ -0,0 +1,209 @@
+import React, { useEffect, useState } from "react";
+import { Client } from "systemlynx";
+import Count from "../../atoms/Count";
+import ExpandIcon from "../../atoms/ExpandableIcon/ExpandableIcon";
+import RunTestIcon, { EditIcon, XButton } from "../../atoms/RunTestIcon";
+import ExpandableSection from "../../molecules/ExpandableSection/ExpandableSection";
+import TestCaption from "../../molecules/TestCaption/TestCaption";
+import TestSummary from "../../molecules/TestSummary";
+import FullTestController from "../TestPanel/components/FullTestController";
+import { resetSavedTests, resetFullTest } from "./transformTests";
+import "./styles.scss";
+import { ClearButton } from "../../atoms/Button/Button";
+
+window.Client = Client;
+const CLASSNAME = "test-saved-section";
+
+const SavedTests = ({
+  savedTests = [],
+  connectedServices,
+  setFullTest,
+  Plugin,
+  fetchTests,
+}) => {
+  const [open, setOpen] = useState(false);
+  const toggleExpansion = () => setOpen((state) => !state);
+  const [openAll, setOpenAll] = useState(false);
+  const [closeAll, setCloseAll] = useState(false);
+  const [savedTestList, setTests] = useState(
+    resetSavedTests(savedTests, connectedServices)
+  );
+  window.savedTestList = savedTestList;
+  window.savedTests = savedTests;
+
+  const updateTests = (i, FullTest) => {
+    savedTestList[i] = { ...FullTest };
+    setTests([...savedTestList]);
+  };
+  const clearTests = () => {
+    setTests(resetSavedTests(savedTests, connectedServices));
+    setCloseAll((state) => !state);
+  };
+
+  const runAllTests = async () => {
+    setOpen(true);
+    setOpenAll((state) => !state);
+    // await Promise.all(savedTestList.map((FullTest, i) => runTest(i, FullTest)));
+    await new Promise((resolve) => {
+      function recursiveRunTest(tests, i = 0) {
+        if (i === tests.length) resolve();
+        else runTest(i, tests[i]).then(() => recursiveRunTest(tests, i + 1));
+      }
+      recursiveRunTest(savedTestList);
+    });
+  };
+
+  const runTest = async (index, { Before, Main, Events, After }) => {
+    const { runFullTest } = new FullTestController({
+      FullTest: [Before, Main, Events, After],
+      connectedServices,
+    });
+
+    const [B, M, E, A] = await runFullTest();
+    const { title, namespace } = Main[0];
+    updateTests(index, { Before: B, Main: M, Events: E, After: A, title, namespace });
+  };
+  useEffect(() => {
+    setTests(resetSavedTests(savedTests, connectedServices));
+  }, [savedTests]);
+  return (
+    <section className={`${CLASSNAME}`}>
+      <ExpandableSection
+        toggleExpansion={toggleExpansion}
+        open={open}
+        title={
+          <>
+            <TestCaption
+              caption={
+                <span>
+                  {"Saved"}{" "}
+                  {savedTestList.length > 0 && <Count count={savedTestList.length} />}
+                </span>
+              }
+            />
+            <div className={`${CLASSNAME}__buttons ${CLASSNAME}__top-buttons`}>
+              <ClearButton onClick={clearTests} />
+              <RunTestIcon onClick={runAllTests} />
+            </div>
+          </>
+        }
+      >
+        {savedTestList.length ? (
+          <div className="test-saved-section__test-container">
+            {savedTestList.map((FullTest, i) => (
+              <TestDetails
+                key={i}
+                {...FullTest}
+                index={i}
+                isOpen={open}
+                openAll={openAll}
+                closeAll={closeAll}
+                runTest={runTest.bind({}, i, FullTest)}
+                setFullTest={setFullTest}
+                connectedServices={connectedServices}
+                Plugin={Plugin}
+                fetchTests={fetchTests}
+              />
+            ))}
+          </div>
+        ) : (
+          <div className="test-saved-section__test-data">
+            <span>no saved tests</span>
+          </div>
+        )}
+      </ExpandableSection>
+    </section>
+  );
+};
+
+function TestDetails({
+  title,
+  index,
+  Before,
+  Main,
+  Events,
+  After,
+  namespace,
+  runTest,
+  openAll,
+  closeAll,
+  setFullTest,
+  connectedServices,
+  Plugin,
+  fetchTests,
+}) {
+  const [open, setOpen] = useState(true);
+  const [showDeleteMsg, setDeleteMsg] = useState(false);
+  const toggleExpansion = () => {
+    setOpen((state) => !state);
+  };
+  const editTest = () => {
+    Main[0].index = index;
+    const Tests = resetFullTest([Before, Main, Events, After], connectedServices);
+    setFullTest(Tests);
+  };
+  const hideDelete = () => setDeleteMsg(false);
+  const showDelete = () => setDeleteMsg(true);
+  const deleteTest = async () => {
+    if (Plugin) {
+      await Plugin.deleteTest(namespace, index);
+      hideDelete();
+      fetchTests();
+    }
+  };
+  const runTestHandler = () => {
+    setOpen(true);
+    runTest();
+  };
+  useEffect(() => {
+    setOpen(true);
+  }, [openAll]);
+  useEffect(() => {
+    setOpen(false);
+  }, [closeAll]);
+  useEffect(() => {
+    setOpen(false);
+  }, [namespace.serviceId, namespace.moduleName, namespace.methodName]);
+  return (
+    <div className={`${CLASSNAME}__test-container`}>
+      <div className={`${CLASSNAME}__test-row`}>
+        <ExpandIcon color="#4caf50" onClick={toggleExpansion} isOpen={open} />
+        <span className={`${CLASSNAME}__test-index`}>Test {index + 1}:</span>
+        {showDeleteMsg ? (
+          <span className={`${CLASSNAME}__delete-prompt ${CLASSNAME}__test-title`}>
+            Delete test?{"  "}
+            <span
+              onClick={deleteTest}
+              className={`${CLASSNAME}__delete-btn ${CLASSNAME}__delete-btn--yes btn`}
+            >
+              Yes
+            </span>
+            <span
+              onClick={hideDelete}
+              className={`${CLASSNAME}__delete-btn ${CLASSNAME}__delete-btn--no btn`}
+            >
+              No
+            </span>
+          </span>
+        ) : (
+          <span className={`${CLASSNAME}__test-title`}>{title}</span>
+        )}
+
+        <span className={`${CLASSNAME}__buttons`}>
+          <RunTestIcon onClick={runTestHandler} />
+          <EditIcon onClick={editTest} />
+          <XButton onClick={showDelete} />
+        </span>
+      </div>
+      {open && (
+        <>
+          {!!Before.length && <TestSummary testSection={Before} section="Before" />}
+          {!!Main.length && <TestSummary testSection={Main} section="Main" />}
+          {!!Events.length && <TestSummary testSection={Events} section="Events" />}
+          {!!After.length && <TestSummary testSection={After} section="After" />}
+        </>
+      )}
+    </div>
+  );
+}
+export default SavedTests;

package/src/organisms/SavedTests/styles.scss

@@ -0,0 +1,76 @@
+.test-saved-section {
+  width: 100%;
+  border-top: 1px solid #e9e9e9;
+  padding-top: 10px;
+  &__test-data {
+    background: gainsboro;
+    padding: 12px 15px;
+    width: 100%;
+  }
+
+  &__test-container {
+    margin: 5px 0;
+  }
+  &__test-row {
+    background: #e9e9e9;
+    padding: 4px 5px;
+    display: flex;
+    align-items: center;
+    border: 1px solid #e9e9e9;
+  }
+
+  &__test-index {
+    color: #4caf50;
+    color: #3d3d3d;
+    font-size: 14px;
+    padding: 0 8px;
+    font-weight: 600;
+    flex: 1;
+  }
+  &__test-title {
+    color: #236382;
+    flex: 5;
+  }
+  &__buttons {
+    flex: 2;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+  }
+  &__top-buttons {
+    width: 77px;
+    flex: none;
+  }
+  &__clear-button {
+    background: #607d8b;
+    padding: 0px 8px;
+    color: white;
+    border-radius: 17px;
+    font-weight: 600;
+    align-self: flex-end;
+    & > img {
+      width: 13px;
+      padding-top: 2px;
+    }
+  }
+  &__delete-prompt {
+    color: #c02a2a;
+    font-weight: 700;
+  }
+  &__delete-btn {
+    margin: 0 5px;
+    background: gray;
+    padding: 0px 6px;
+    border-radius: 4px;
+    color: white;
+    &--yes:hover {
+      color: #c02a2a;
+    }
+  }
+}
+
+.react-json-view {
+  font-size: 14px;
+}

package/src/organisms/SavedTests/transformTests.js

@@ -0,0 +1,51 @@
+import Argument from "../TestPanel/components/Argument.class";
+import Test from "../TestPanel/components/Test.class";
+
+export function resetSavedTests(savedTests, connectedServices) {
+  return savedTests.map((ft) => {
+    // context matters
+    const newTests = [];
+    const { title, namespace } = ft;
+
+    const Before = ft.Before.map((test) =>
+      resetTest(test, newTests, connectedServices, false)
+    );
+    const Main = ft.Main.map((test) =>
+      resetTest(test, newTests, connectedServices, false)
+    );
+    const Events = ft.Events.map((test) =>
+      resetTest(test, newTests, connectedServices, false)
+    );
+    const After = ft.After.map((test) =>
+      resetTest(test, newTests, connectedServices, false)
+    );
+    newTests.push(Before);
+    newTests.push(Main);
+    newTests.push(Events);
+    newTests.push(After);
+    return { Before, Main, Events, After, title, namespace };
+  });
+}
+
+export const resetTest = (test, FullTest, connectedServices, editMode) => {
+  return new Test({
+    ...test,
+    args: test.args.map(
+      (arg) =>
+        new Argument(arg.name, FullTest, arg.input_type, arg.input, arg.targetValues)
+    ),
+    editMode,
+  }).getConnection(connectedServices);
+};
+
+export const resetFullTest = (FullTest, connectedServices, editMode) => {
+  //context matters
+  const newTests = [[], [], [], []];
+  return FullTest.map((section, i) => {
+    return section.map((test) => {
+      const newTest = resetTest(test, newTests, connectedServices, editMode);
+      newTests[i].push(newTest);
+      return newTest;
+    });
+  });
+};

package/src/organisms/ScratchPad/ScratchPad.js

@@ -0,0 +1,128 @@
+import React, { useContext, useEffect, useState } from "react";
+import AutoCompleteBox from "../../molecules/AutoCompleteBox/AutoCompleteBox";
+import Args, { Argument } from "../../molecules/Args/Args";
+import ServiceContext from "../../ServiceContext";
+import "./styles.scss";
+import RunTestIcon from "../../atoms/RunTestIcon";
+import Evaluations from "../TestPanel/Evaluations";
+import EVAL_ICON from "../../assets/eval-icon.svg";
+
+const ScratchPad = ({
+  TestController,
+  test,
+  testIndex = 0,
+  dynamic = false,
+  staticArguments = false,
+}) => {
+  const placeholder = "service.module.method ";
+  const { projectCode, serviceId, moduleName, methodName } = test.namespace;
+  const [nsp, setNsp] = useState(
+    methodName ? `${serviceId}.${moduleName}.${methodName}` : ""
+  );
+  const [text_length, setLength] = useState(placeholder.length + 0.4);
+  const [test_suggestions, setSuggestions] = useState([]);
+  const { connectedServices } = useContext(ServiceContext);
+  const [testResults, setTestResults] = useState(test.results);
+
+  const runTest = async () => {
+    TestController.runTest(testIndex);
+  };
+  const createSuggestions = () => {
+    const new_suggestions = [];
+    connectedServices.forEach((service) => {
+      service.system.connectionData.modules.forEach((mod) => {
+        mod.methods.forEach((method) => {
+          new_suggestions.push(`${service.serviceId}.${mod.name}.${method.fn}()`);
+        });
+      });
+    });
+    setSuggestions(new_suggestions);
+  };
+
+  const changeConnection = (namespaces) => {
+    //remove open-close parentheses
+    namespaces = namespaces.slice(0, -2);
+    const [serviceId, moduleName, methodName] = namespaces.split(".");
+    TestController.updateNamespace(testIndex, { serviceId, moduleName, methodName });
+  };
+
+  const clearResponse = () => {
+    TestController.resetResults(testIndex);
+  };
+  const resetLength = () => setLength(placeholder.length + 0.4);
+
+  const toggleValidationStatus = () => {
+    TestController.updateValidationStatus(testIndex);
+  };
+  useEffect(() => {
+    setTestResults(test.results);
+  }, [test.results]);
+  useEffect(() => createSuggestions(), [projectCode, connectedServices]);
+  useEffect(() => {
+    const new_namespace = methodName ? `${serviceId}.${moduleName}.${methodName}` : "";
+    setNsp(new_namespace);
+    setLength((new_namespace || placeholder).length + 0.4);
+  }, [test.namespace, connectedServices]);
+
+  const style = { "--text-length": text_length ? text_length + "ch" : "auto" };
+  return (
+    <div className="scratchpad" style={style}>
+      <div className="scratchpad__test-data-container">
+        <div className="scratchpad__btn-container">
+          <span className="scratchpad__run-test-btn btn" onClick={runTest}>
+            <RunTestIcon />
+          </span>
+        </div>
+        <div className="scratchpad__test-data">
+          <AutoCompleteBox
+            className="scratchpad__test-method-input"
+            suggestions={test_suggestions}
+            onSubmit={changeConnection}
+            value={`${nsp}`}
+            disabled={!dynamic}
+            placeholder={placeholder}
+            onBlur={resetLength}
+          />
+          <span className="scratchpad__test-data__parentheses">{"("}</span>
+          <Args
+            args={test.args}
+            controller={TestController}
+            testIndex={testIndex}
+            locked={staticArguments}
+          />
+          <span className="scratchpad__test-data__parentheses">{")"}</span>
+        </div>
+        <div
+          className={`scratchpad__response-data scratchpad__response-data--visible-${
+            test.test_end !== null
+          }`}
+        >
+          <span
+            onClick={clearResponse}
+            className={`scratchpad__response-data__clear-btn btn`}
+          >
+            x
+          </span>
+          <span onClick={toggleValidationStatus} className={`scratchpad__eval-btn btn`}>
+            {test.shouldValidate ? (
+              <img style={{ width: 12 }} src={EVAL_ICON} alt="eval" />
+            ) : (
+              " + "
+            )}
+          </span>
+
+          <div className="scratchpad__response-value">
+            <span className={`scratchpad__response-type`}>{test.response_type}:</span>
+            <Argument value={testResults} />
+          </div>
+        </div>
+        <Evaluations
+          updateTests={TestController.updateTests.bind({}, testIndex)}
+          test={test}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ScratchPad;

package/src/organisms/ScratchPad/styles.scss

@@ -0,0 +1,100 @@
+.scratchpad {
+  --text-length: auto;
+  width: 100%;
+  overflow-wrap: anywhere;
+
+  &__test-data-container {
+    position: relative;
+
+    width: 100%;
+  }
+  &__test-data {
+    background: #e9e9e9;
+    padding: 25px 15px 25px 15px;
+    border-radius: 5px 5px 0px 0px;
+
+    &__parentheses {
+      font-size: 19px;
+    }
+  }
+  &__response-data {
+    padding: 12px 15px;
+    background: #ffffff;
+    position: relative;
+    border-left: 1px solid #e9e9e9;
+    border-right: 1px solid #e9e9e9;
+    &--visible-false {
+      display: none;
+    }
+
+    &__clear-btn {
+      position: absolute;
+      right: 9px;
+      top: 5px;
+      color: #c50000;
+      font-family: sans-serif;
+    }
+  }
+  &__response-value {
+    font-family: "FS Mono", monospace;
+    margin-left: 10px;
+    margin: 5px 0 0 5px;
+    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;
+    }
+  }
+  &__response-type {
+    color: #a954ff;
+    font-weight: 700;
+    font-size: 15px;
+  }
+  &__btn-container {
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    & > span {
+      margin: 0 5px;
+    }
+  }
+  &__run-test-btn {
+    cursor: pointer;
+  }
+
+  &__test-method-input {
+    font-family: "SF Mono", monospace;
+    background: none;
+    border: none;
+    font-size: 17px;
+    width: var(--text-length);
+    text-indent: 0;
+    text-overflow: clip;
+    max-width: 100%;
+    color: #223a95;
+    &:focus {
+      background: white;
+    }
+    &:disabled {
+      //color: initial;
+    }
+  }
+  &__eval-btn {
+    position: absolute;
+    right: 7px;
+    bottom: 3px;
+    color: #3f51b5;
+    font-weight: bold;
+    font-size: 15px;
+  }
+}
+
+.react-json-view {
+  font-size: 14px;
+}