webuipoc: integrate code formatter

addOns/webuipoc/src/main/pocs/reactWebUI/.github/workflows/ci.yml

@@ -0,0 +1,31 @@
+name: Lint and Check Formatting
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.0.0'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run ESLint
+        run: npm run lint
+
+      - name: Check formatting with Prettier
+        run: npm run check-format

addOns/webuipoc/src/main/pocs/reactWebUI/package.json

@@ -20,10 +20,14 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "PUBLIC_URL=/reactWebUI/ BUILD_PATH=./dist react-scripts build",
+    "build": "npm run check-format && PUBLIC_URL=/reactWebUI/ BUILD_PATH=./dist react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "eslint"
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
+    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
+    "check-format": "prettier --check 'src/**/*.{js,jsx,ts,tsx}'"
+
+
   },
   "browserslist": {
     "production": [
@@ -43,6 +47,9 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "nth-check": ">=2.0.1",
+    "prettier": "3.3.3",
     "tailwindcss": "^3.4.3"
   }
+
+
 }

addOns/webuipoc/src/main/pocs/reactWebUI/src/App.js

@@ -9,7 +9,6 @@ import { sendChildNode } from "./Utilities/requests";
 import SearchBar from "./Components/SearchBar/SearchBar";
 
 const App = () => {
-
   return (
     <div className="flex mt-16 overflow-auto">
       <HeaderBase />
@@ -23,16 +22,16 @@ const App = () => {
             <div className=" w-1/3 p-4 font-serif text-center ">
               ID | Method | Host | Path | URI
             </div>
-          </div>
-          <div className="flex flex-row  justify-center text-center">
-            <div className=" p-4">
-              <p className="font-mono "></p>
-              {/* {childNode &&
+            <div className="flex flex-row  justify-center text-center">
+              <div className=" p-4">
+                <p className="font-mono "></p>
+                {/* {childNode &&
                 childNode.map((node) => (
                   <p className="" key={childNode}>
                     {node.hrefId}
                   </p>
                 ))} */}
+              </div>
             </div>
           </div>
         </div>

addOns/webuipoc/src/main/pocs/reactWebUI/src/App.test.js

@@ -1,7 +1,7 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Accordion/AccordionData.jsx

@@ -1,57 +1,47 @@
 import React, { useState } from "react";
 
 const Accordion = ({ site, fetchChildren }) => {
-    const [isAccordionOpen, setAccordionOpen] = useState(false);
-    const [children, setChildren] = useState([])
+  const [isAccordionOpen, setAccordionOpen] = useState(false);
+  const [children, setChildren] = useState([]);
 
-    const handleExpand = async () => {
-        if (isAccordionOpen == false && site.isLeaf == false) {
-            const childNodes = await fetchChildren(site.name)
-            setChildren(childNodes)
-        }
-        setAccordionOpen(!isAccordionOpen);
+  const handleExpand = async () => {
+    if (isAccordionOpen == false && site.isLeaf == false) {
+      const childNodes = await fetchChildren(site.name);
+      setChildren(childNodes);
     }
-
+    setAccordionOpen(!isAccordionOpen);
+  };
 
   return (
     <div className="py-1 w-[380px]">
-      <button
-        onClick={handleExpand}
-        className="flex justify-between w-full"
-      >
-
+      <button onClick={handleExpand} className="flex justify-between w-full">
         <span className="pl-2">
-        {site.isLeaf? (
-          <span className="mr-3">-</span>
-        ) : (
-<> 
-      {!isAccordionOpen ? (
-          <span className="mr-3">▶</span>
-      ) : (
-        <span className="mr-3">▼</span>
-      )}
-    </>
-        )}
+          {site.isLeaf ? (
+            <span className="mr-3">-</span>
+          ) : (
+            <>
+              {!isAccordionOpen ? (
+                <span className="mr-3">▶</span>
+              ) : (
+                <span className="mr-3">▼</span>
+              )}
+            </>
+          )}
           <span className="" key={site}>
             {site.name}
           </span>
         </span>
       </button>
-     {
-              isAccordionOpen && (
-                  <div>
-                    <p className="text-blue-200 break-all">
-                      {
-                          children.map((child) => (
-                              <Accordion site={child} fetchChildren={fetchChildren}/>
-                          )) 
-                      }
-                      </p>
-                      </div>
-              )
-          }
-      </div>
-
+      {isAccordionOpen && (
+        <div>
+          <p className="text-blue-200 break-all">
+            {children.map((child) => (
+              <Accordion site={child} fetchChildren={fetchChildren} />
+            ))}
+          </p>
+        </div>
+      )}
+    </div>
   );
 };
 

addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Header/HeaderBase.jsx

@@ -1,17 +1,18 @@
-import React from 'react';
+import React from "react";
 
 const Header = () => {
-    return (
-        <div className="fixed top-0 h-16 left-0 w-full bg-gray-900 text-white z-10">
-            <div className="px-4 py-4">
-                <div className="flex justify-between items-center">
-                    <div className="text-xl font-bold">ZAP</div>
-                    <button className="px-3 py-1 bg-green-600 text-white font-bold ounded-md hover:bg-blue-600">Login</button>
-                </div>
-
-            </div>
+  return (
+    <div className="fixed top-0 h-16 left-0 w-full bg-gray-900 text-white z-10">
+      <div className="px-4 py-4">
+        <div className="flex justify-between items-center">
+          <div className="text-xl font-bold">ZAP</div>
+          <button className="px-3 py-1 bg-green-600 text-white font-bold ounded-md hover:bg-blue-600">
+            Login
+          </button>
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+};
 
 export default Header;

addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/HistoryBar.js

@@ -1,13 +1,9 @@
-import React from 'react'
+import React from "react";
 
 function HistoryBar() {
-  return (
-     <div className="w-full bg-gray-400 text-white h-[250px]">
-              History
-            </div>
-  )
+  return <div className="w-full bg-gray-400 text-white h-[250px]">History</div>;
 }
 
-export default HistoryBar
+export default HistoryBar;
 
-// WIP 
+// WIP

addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx

@@ -1,36 +1,31 @@
-import React from 'react';
+import React from "react";
 
 function ResponseBar() {
   return (
     <div className="w-full bg-gray-600 text-white mt-2">
-
-      <div className="flex flex-row mr-2"> 
-
-
-        <div className='h-[594px] w-1/2 ml-2 bg-gray-700 rounded-lg'>
+      <div className="flex flex-row mr-2">
+        <div className="h-[594px] w-1/2 ml-2 bg-gray-700 rounded-lg">
           <div className="flex flex-row text-center justify-center ">
             <div className="w-1/3 p-4 font-serif text-center">Request</div>
-          </div>            
+          </div>
           <div className="flex justify-center text-center">
             <div className="p-4">
-              <p className='font-mono'>############</p>
+              <p className="font-mono">############</p>
             </div>
           </div>
         </div>
-
-
-        <div className='h-[594px] w-1/2 ml-2 bg-gray-700 rounded-lg'>
+
+        <div className="h-[594px] w-1/2 ml-2 bg-gray-700 rounded-lg">
           <div className="flex flex-row text-center justify-center">
             <div className="w-1/3 p-4 font-serif text-center">Response</div>
-          </div>            
+          </div>
           <div className="flex justify-center text-center">
             <div className="p-4">
-              <p className='font-mono'>#############</p>
+              <p className="font-mono">#############</p>
             </div>
           </div>
         </div>
-
-      </div> 
+      </div>
     </div>
   );
 }

addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/SearchBar/SearchBar.jsx

@@ -1,15 +1,19 @@
-import React from 'react';
+import React from "react";
 
 function SearchBar() {
   return (
-       <div class="w-full mx-auto bg-gray-600 overflow-hidden p-4">
-    <div class="flex items-center border border-black  overflow-hidden">
-        <input type="text" placeholder="Search..." class="text-black w-full py-2 px-3 focus:outline-none" />
+    <div class="w-full mx-auto bg-gray-600 overflow-hidden p-4">
+      <div class="flex items-center border border-black  overflow-hidden">
+        <input
+          type="text"
+          placeholder="Search..."
+          class="text-black w-full py-2 px-3 focus:outline-none"
+        />
         <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2">
-            Search
+          Search
         </button>
+      </div>
     </div>
-</div>
   );
 }
 

addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Sidebar/Sidebar.jsx

@@ -1,21 +1,24 @@
-import React from 'react';
-import { SidebarData } from './SidebarData';
+import React from "react";
+import { SidebarData } from "./SidebarData";
 
 function Sidebar() {
   return (
-    <div className='Sidebar w-10 bg-gray-800 '>
-      <ul className='SidebarList h-auto p-0 w-full '>
+    <div className="Sidebar w-10 bg-gray-800 ">
+      <ul className="SidebarList h-auto p-0 w-full ">
         {SidebarData.map((val, key) => {
           return (
-            <li 
-            key={key}
-               className="row w-full h-10  text-white list-none m-0 flex  items-center  justify-left  hover:bg-gray-700"
+            <li
+              key={key}
+              className="row w-full h-10  text-white list-none m-0 flex  items-center  justify-left  hover:bg-gray-700"
               onClick={() => {
-                window.location.pathname =val.ink
-              }}>
-
-             <div className='SidebarIcon flex  justify-center items-center ml-2' > {val.icon}</div>
-             <div className='SidebarTitle ml-2'> {val.title}</div>
+                window.location.pathname = val.ink;
+              }}
+            >
+              <div className="SidebarIcon flex  justify-center items-center ml-2">
+                {" "}
+                {val.icon}
+              </div>
+              <div className="SidebarTitle ml-2"> {val.title}</div>
             </li>
           );
         })}