Test suite page

docker-compose.yml

@@ -107,10 +107,11 @@ services:
       - POSTGRES_USER=root
       - POSTGRES_PASSWORD=root
       - POSTGRES_DB=orca
+      # - PGDATA=/var/lib/postgresql/data/some_name/
     ports:
       - "5433:5432"
     volumes:
-      - ./data:/var/lib/postgresql/data
+      - ./data/pg-data:/var/lib/postgresql/data
     container_name: postgres-ser
 
   ### Redis ################################################

web/package.json

@@ -4,6 +4,10 @@
   "private": true,
   "dependencies": {
     "@dagrejs/dagre": "^1.0.4",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@headlessui/react": "^1.6.6",
     "@heroicons/react": "^2.0.18",
     "@hookform/resolvers": "^3.3.4",

web/src/core/components/dropdown/dropdown.css

@@ -0,0 +1,100 @@
+.dropdown {
+    position: relative;
+    color: #333;
+    cursor: default;
+  }
+
+  .dropdown .arrow {
+    border-color: #999 transparent transparent;
+    border-style: solid;
+    border-width: 5px 5px 0;
+    content: " ";
+    display: block;
+    height: 0;
+    margin-top: 0.3rem;
+    position: absolute;
+    right: 10px;
+    top: 14px;
+    width: 0;
+  }
+
+  .dropdown .arrow.open {
+    border-color: transparent transparent #999;
+    border-width: 0 5px 5px;
+  }
+
+ .input {
+    line-height: 1.5;
+    font-size: 1rem;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    box-sizing: border-box;
+    cursor: default;
+    outline: none;
+    padding: 8px 52px 8px 10px;
+    transition: all 200ms ease;
+    width: 100%;
+  }
+
+  .dropdown .options {
+    display: none;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+    box-sizing: border-box;
+    margin-top: -1px;
+    max-height: 200px;
+    overflow-y: auto;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    z-index: 1000;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .dropdown .options.open {
+    display: block;
+  }
+
+  .dropdown .option {
+    box-sizing: border-box;
+    color: rgba(51, 51, 51, 0.8);
+    cursor: pointer;
+    display: block;
+    padding: 8px 10px;
+  }
+
+  .dropdown .option.selected,
+  .dropdown .option:hover {
+    background-color: #f2f9fc;
+    color: #333;
+  }
+
+  .close {
+    position: absolute;
+    right: 40px;
+    top: 14px;
+    width: 16px;
+    height: 16px;
+    opacity: 0.3;
+  }
+  .close:hover {
+    opacity: 1;
+  }
+  .close:before, .close:after {
+    position: absolute;
+    left: 15px;
+    content: ' ';
+    height: 16px;
+    width: 2px;
+    background-color: #333;
+  }
+  .close:before {
+    transform: rotate(45deg);
+  }
+  .close:after {
+    transform: rotate(-45deg);
+  }
+
+

web/src/core/components/dropdown/index.jsx

@@ -0,0 +1,97 @@
+import { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import "./dropdown.css";
+
+
+
+export const SearchableDropdown = ({
+  options,
+  label,
+  id,
+  selectedValue,
+  handleChange
+}) => {
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    document.addEventListener("click", toggle);
+    return () => document.removeEventListener("click", toggle);
+  }, []);
+
+  const selectOption = (option) => {
+    setQuery(() => "");
+    handleChange(option);
+    setIsOpen((isOpen) => !isOpen);
+  };
+
+  function toggle(e) {
+    setIsOpen(e && e.target === inputRef.current);
+  }
+
+  const getDisplayValue = () => {
+    if (query) return query;
+    if (selectedValue) return selectedValue[label] || "";
+
+    return "";
+  };
+
+  const filter = (options) => {
+    return options.filter(
+      (option) => option[label].toLowerCase().indexOf(query.toLowerCase()) > -1
+    );
+  };
+
+  return (
+    <div className="dropdown">
+      <div className="control">
+        <div className="selected-value">
+          <input
+            ref={inputRef}
+            className="input"
+            type="text"
+            value={getDisplayValue()}
+            name="searchTerm"
+            onChange={(e) => {
+              setQuery(e.target.value);
+              handleChange(null);
+            }}
+            onClick={toggle}
+          />
+        </div>
+        {selectedValue[label] && <div className="close" onClick={() => handleChange({})}/>}
+        <div className={`arrow ${isOpen ? "open" : ""}`}></div>
+      </div>
+
+      <div className={`options ${isOpen ? "open" : ""}`}>
+        {filter(options).map((option, index) => {
+          return (
+            <div
+              role="option"
+              onClick={() => selectOption(option)}
+              className={`option ${
+                option === selectedValue ? "selected" : ""
+              }`}
+              key={`${id}-${index}`}
+            >
+              {option[label]}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+SearchableDropdown.propTypes = {
+    options: PropTypes.arrayOf(PropTypes.object),
+    label: PropTypes.string,
+    id: PropTypes.string,
+    selectedValue: PropTypes.object,
+    handleChange: PropTypes.func
+  };
+
+
+

web/src/core/components/flow/components/new.tsx

@@ -11,21 +11,21 @@ import { shallow } from "zustand/shallow";
 
 export const New: React.FC<any> = () => {
   let options = [
-    {
-      key: "loop",
-      label: "Loop",
-      icon: <ArrowPathRoundedSquareIcon className="h-5 w-5 text-gray-400" />
-    },
-    {
-      key: "ifcondition",
-      label: "If Condidion",
-      icon: <HashtagIcon className="h-5 w-5 text-gray-400" />
-    },
-    {
-      key: "block",
-      label: "Block",
-      icon: <CodeBracketSquareIcon className="h-5 w-5 text-gray-400" />
-    },
+    // {
+    //   key: "loop",
+    //   label: "Loop",
+    //   icon: <ArrowPathRoundedSquareIcon className="h-5 w-5 text-gray-400" />
+    // },
+    // {
+    //   key: "ifcondition",
+    //   label: "If Condidion",
+    //   icon: <HashtagIcon className="h-5 w-5 text-gray-400" />
+    // },
+    // {
+    //   key: "block",
+    //   label: "Block",
+    //   icon: <CodeBracketSquareIcon className="h-5 w-5 text-gray-400" />
+    // },
     {
       key: "action_group",
       label: "Action group",