systemview 1.0.0 → 1.1.1

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;