systemview 1.0.1 → 1.1.1

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

package/src/organisms/SystemNavigator/SystemNavigator.js

@@ -0,0 +1,148 @@
+import React, { useEffect, useContext } from "react";
+import { useHistory } from "react-router-dom";
+import ServiceContext from "../../ServiceContext";
+import TextBox from "../../atoms/Textbox/Textbox";
+import Link from "../../atoms/Link/Link";
+import ExpandableList from "../../molecules/ExpandableList/ExpandableList";
+import ServerModulesList from "../../molecules/ServerModulesList/ServerModulesList";
+import DocIcon from "../../atoms/DocsIcon/DocsIcon";
+import "./styles.scss";
+import { Client } from "systemlynx";
+
+const SystemNav = ({ projectCode, serviceId, moduleName, methodName }) => {
+  const { SystemViewService, setConnectedServices, connectedServices } =
+    useContext(ServiceContext);
+  const serviceData = connectedServices.find(
+    (serviceData) =>
+      serviceData.serviceId === serviceId && serviceData.projectCode === projectCode
+  );
+  const { Plugin } = serviceData
+    ? Client.createService(serviceData.system.connectionData)
+    : {};
+  const { SystemView } = SystemViewService;
+
+  const fetchProject = async (pc = projectCode) => {
+    console.log("fetchProject------->");
+    try {
+      const results = await SystemView.getServices(pc);
+      setConnectedServices(results);
+      return results;
+    } catch (error) {
+      console.error(error);
+      setConnectedServices([]);
+    }
+  };
+
+  const history = useHistory();
+  const SearchInputSubmit = async (e) => {
+    const project = await fetchProject(e.target.value);
+    if (project.length)
+      if (project[0].projectCode) history.push(`/${project[0].projectCode}`);
+  };
+
+  useEffect(() => {
+    if (connectedServices.length)
+      SystemView.on(
+        `spec-list-updated:${projectCode}`,
+        function updateSpecList({ specList, serviceId }) {
+          const serviceData = connectedServices.find(
+            (serviceData) =>
+              serviceData.serviceId === serviceId &&
+              serviceData.projectCode === projectCode
+          );
+          if (serviceData) {
+            serviceData.specList = specList;
+            setConnectedServices([...connectedServices]);
+          }
+        }
+      );
+  }, [projectCode, connectedServices]);
+  useEffect(() => {
+    if (projectCode) fetchProject(projectCode);
+  }, []);
+  useEffect(() => {
+    if (Plugin) Plugin.on(`reconnect`, fetchProject);
+  }, [Plugin, connectedServices]);
+  return (
+    <section className="system-nav">
+      <div className="container">
+        <div className="row system-nav__section">
+          <div className="col-12">
+            <TextBox
+              defaultText={projectCode}
+              placeholderText="projectCode"
+              TextboxSubmit={SearchInputSubmit}
+            />
+          </div>
+        </div>
+        <div className="row system-nav__section">
+          <div className="col-12 ">
+            <NavigationLinks
+              connectedServices={connectedServices}
+              projectCode={projectCode}
+              selectedServiceId={serviceId}
+              selectedModuleName={moduleName}
+              selectedMethodName={methodName}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="scroll-buffer"></div>
+    </section>
+  );
+};
+
+const NavigationLinks = ({
+  connectedServices,
+  projectCode,
+  selectedServiceId,
+  selectedModuleName,
+  selectedMethodName,
+}) => {
+  return connectedServices.map(({ system, serviceId, specList }, i) => {
+    const { serviceUrl } = system.connectionData;
+    const isSaved = specList.docs.includes(`${serviceId}.md`);
+    const isSelected = selectedServiceId === serviceId;
+    return (
+      <ExpandableList
+        open={isSelected}
+        key={i}
+        title={
+          <span
+            className={`system-nav__link system-nav__link--selected-${
+              !selectedModuleName && isSelected
+            }`}
+          >
+            <>
+              <Link link={`/${projectCode}/${serviceId}`} text={serviceId} />
+              <span>
+                <a
+                  className="system-nav__service-url"
+                  href={serviceUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {serviceUrl}
+                </a>
+              </span>
+            </>
+            <span className="server-module__docs-icon">
+              <DocIcon isSaved={isSaved} />
+            </span>
+          </span>
+        }
+      >
+        <ServerModulesList
+          selectedModuleName={selectedModuleName}
+          selectedMethodName={selectedMethodName}
+          projectCode={projectCode}
+          serviceId={serviceId}
+          modules={system.connectionData.modules}
+          specList={specList}
+        />
+      </ExpandableList>
+    );
+  });
+};
+
+export default SystemNav;

package/src/organisms/SystemNavigator/SystemNavigator.test.js

@@ -0,0 +1,24 @@
+/* eslint-disable jest/valid-expect */
+import React from "react";
+import ReactDom from "react-dom";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import SystemNavigator from "./SystemNavigator";
+
+const mockService = (fn, name, serviceId) => {
+  return {
+    serviceId,
+    system_modules: [{ methods: [{ fn }], name }],
+  };
+};
+describe("<SystemNavigator/>", () => {
+  it("renders without crashing", () => {
+    const div = document.createElement("div");
+    ReactDom.render(
+      <SystemNavigator
+        servicesList={[mockService("test_fn", "test_name", "test_serviceId")]}
+      />,
+      div
+    );
+  });
+});

package/src/organisms/SystemNavigator/styles.scss

@@ -0,0 +1,38 @@
+.system-nav {
+  padding: 3rem 1rem;
+  overflow: auto;
+  max-height: 100vh;
+  &__section {
+    margin: 21px 10px;
+  }
+  &__object-title {
+    display: inline;
+  }
+
+  &__service-url {
+    color: #3f51b5;
+    color: #607d8b !important;
+    text-decoration: none;
+    /* font-weight: bold; */
+    font-size: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block !important;
+    width: 230px;
+  }
+  &__link {
+    width: 100%;
+    margin-left: 3px;
+    &--selected-true {
+      background: linear-gradient(90deg, #deefe8 69%, white 100%);
+      background: linear-gradient(90deg, #d8d7e9 69%, white 100%);
+      border-radius: 5px 2px 2px 5px;
+
+      & > a {
+        font-weight: bold;
+        color: #575fc1 !important;
+      }
+    }
+  }
+}

package/src/organisms/TestContainer/TestContainer.js

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from "react";
+import ExpandableSection from "../../molecules/ExpandableSection/ExpandableSection";
+import TestCaption from "../../molecules/TestCaption/TestCaption";
+import ScratchPad from "../ScratchPad/ScratchPad";
+
+import "./styles.scss";
+
+const TestContainer = ({
+  open: _open,
+  title,
+  children,
+  dynamic,
+  TestController,
+  test,
+  testIndex,
+  title_color,
+  staticArguments,
+  multiTest,
+}) => {
+  const className = "test-container";
+  const [open, setOpen] = useState(_open);
+
+  const toggleExpansion = () => {
+    setOpen((state) => !state);
+  };
+  const deleteTest = () => {
+    TestController.deleteTest(testIndex);
+  };
+
+  const updateTitle = (text) => {
+    TestController.updateTitle(testIndex, text);
+  };
+  useEffect(() => {}, [test.title]);
+  return (
+    <section className={className}>
+      <ExpandableSection
+        toggleExpansion={toggleExpansion}
+        open={open}
+        title_color={title_color || "#0d8065"}
+        title={
+          <>
+            <TestCaption
+              onChange={updateTitle}
+              caption={<b>{title}</b>}
+              useInput={true}
+              title={test.title || ""}
+            />
+            {multiTest && (
+              <span
+                className={`${className}__delete-btn btn delete-btn`}
+                onClick={deleteTest}
+              >
+                x
+              </span>
+            )}
+          </>
+        }
+      >
+        <ScratchPad
+          TestController={TestController}
+          test={test}
+          testIndex={testIndex}
+          dynamic={dynamic}
+          staticArguments={staticArguments}
+        />
+        {children}
+      </ExpandableSection>
+    </section>
+  );
+};
+
+export default TestContainer;

package/src/organisms/TestContainer/styles.scss

@@ -0,0 +1,20 @@
+.test-container {
+  &__title-section {
+    padding: 0 8px;
+    font-size: 16px;
+    margin: 0 4px;
+    width: 100%;
+    display: flex;
+  }
+  &__test-description-input {
+    flex: 1;
+    & input {
+      width: 105%;
+      background: none;
+      border: none;
+      color: #5a77e5;
+      text-overflow: ellipsis;
+      font-weight: bold;
+    }
+  }
+}

package/src/organisms/TestPanel/AfterTest/AfterTest.js

@@ -0,0 +1,16 @@
+import React from "react";
+import MultiTestSection from "../../MultiTestSection/MultiTestSection";
+import "./styles.scss";
+
+const AfterTest = ({ TestSection, TestController }) => {
+  return (
+    <MultiTestSection
+      dynamic={true}
+      TestSection={TestSection}
+      TestController={TestController}
+      caption="After"
+    />
+  );
+};
+
+export default AfterTest;

package/src/organisms/TestPanel/BeforeTest/BeforeTest.js

@@ -0,0 +1,16 @@
+import React from "react";
+import MultiTestSection from "../../MultiTestSection/MultiTestSection";
+import "./styles.scss";
+
+const BeforeTest = ({ TestSection, TestController }) => {
+  return (
+    <MultiTestSection
+      dynamic={true}
+      TestSection={TestSection}
+      TestController={TestController}
+      caption="Before"
+    />
+  );
+};
+
+export default BeforeTest;