systemview 1.1.1 → 1.2.2

package/src/organisms/SavedTests/SavedTests.js

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

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

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

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

@@ -1,100 +0,0 @@
-.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;
-}