systemview 1.0.1 → 1.1.1

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;
+}

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;
+    });
+  });
+};