pulled new updates, workbench running, hrms pending

egovernments · Feb 15, 2024 · a0d8835 · a0d8835
1 parent 562dd01
commit a0d8835
Show file tree

Hide file tree

Showing 10 changed files with 153 additions and 45 deletions.
diff --git a/micro-ui/web/lerna.json b/micro-ui/web/lerna.json
@@ -5,6 +5,7 @@
     "packages/core",
     "packages/workbench",
     "packages/ui-core",
+    "packages/hrms",
     "packages/app1"
   ],
   "command": {

diff --git a/micro-ui/web/packages/core/src/modules/registerRemotes.js b/micro-ui/web/packages/core/src/modules/registerRemotes.js
@@ -6,12 +6,22 @@ import { registerApplication,start } from "single-spa";
 
 export default (queryClient) => {
 
+  // registerApplication({
+  //   name: "Workbench",
+  //   app: () => import("workbench/WorkbenchModule"),
+  //   activeWhen: "/workbench-ui/employee/workbench",
+  //   customProps: {
+  //     title: "Workbench is running on host",
+  //     queryClient,
+  //   },
+  // });
+
   registerApplication({
-    name: "Workbench",
-    app: () => import("workbench/WorkbenchModule"),
-    activeWhen: "/workbench-ui/employee/workbench",
+    name: "hrms",
+    app: () => import("hrms/HrmsModule"),
+    activeWhen: "/workbench-ui/employee/hrms",
     customProps: {
-      title: "Workbench is running on host",
+      title: "HRMS is running on host",
       queryClient,
     },
   });

diff --git a/micro-ui/web/packages/core/webpack.dev.js b/micro-ui/web/packages/core/webpack.dev.js
@@ -43,8 +43,8 @@ module.exports = () => {
           // auth: "auth@http://localhost:8082/remoteEntry.js",
           // header: "header@http://localhost:8083/remoteEntry.js",
           // dashboard: "dashboard@http://localhost:8084/remoteEntry.js",
-          // hrms: "hrms@https://localhost:8085/remoteEntry.js",
-          workbench: "workbench@https://localhost:8086/remoteEntry.js",
+          hrms: "hrms@https://localhost:8085/remoteEntry.js",
+          // workbench: "workbench@https://localhost:8086/remoteEntry.js",
           // app1: "app1@https://localhost:8001/remoteEntry.js",
           // dss: "dss@https://localhost:8087/remoteEntry.js",
           // measurement : "measurement@https://localhost:8088/remoteEntry.js"

diff --git a/micro-ui/web/packages/hrms/package.json b/micro-ui/web/packages/hrms/package.json
@@ -23,12 +23,13 @@
     "@babel/preset-env":"7.23.9"
   },
   "dependencies": {
+    "single-spa-react": "^4.6.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-router-dom": "5.2.0",
     "rxjs": "6.6.3",
-    "@digit-ui/digit-ui-libraries-mfe": "1.0.7",
-    "@egovernments/digit-ui-react-components":"1.4.107",
+    "@digit-ui/digit-ui-libraries-mfe": "1.0.6",
+    "@egovernments/digit-ui-react-components":"1.4.106",
     "@digit-ui/digit-ui-module-core-base":"1.0.8",
     "react-hook-form": "6.15.8",
     "react-i18next": "11.16.2",

diff --git a/micro-ui/web/packages/hrms/public/index.html b/micro-ui/web/packages/hrms/public/index.html
@@ -4,7 +4,14 @@
     <title>Hrms Page</title>
     <link rel="preconnect" href="https://fonts.gstatic.com" />
     <script src="https://s3.ap-south-1.amazonaws.com/egov-dev-assets/globalConfigsWorkbench.js"></script>
-
+    <script type="systemjs-importmap">
+      {
+        "imports": {
+          "react": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js",
+          "react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"
+        }
+      }
+    </script>
     <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
 
     <link

diff --git a/micro-ui/web/packages/hrms/src/HRMSWrapper.js b/micro-ui/web/packages/hrms/src/HRMSWrapper.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { QueryClientProvider } from 'react-query';
+import { Switch, useLocation, BrowserRouter as Router } from 'react-router-dom';
+import { initHRMSComponents } from './Module';
+import EmployeeApp from './pages';
+
+const App = ({ queryClient, title }) => {
+    console.log("qc in remote hrms",queryClient);
+initHRMSComponents();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Router>
+        <EmployeeApp path={'/workbench-ui/employee/hrms/'} />
+      </Router>
+    </QueryClientProvider>
+  );
+};
+
+export default App;
diff --git a/micro-ui/web/packages/hrms/src/SIngleSpaEntry.js b/micro-ui/web/packages/hrms/src/SIngleSpaEntry.js
@@ -0,0 +1,25 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import singleSpaReact from "single-spa-react";
+import App from "./HRMSWrapper";
+const appLifeCycles = singleSpaReact({
+  React,
+  ReactDOM,
+  rootComponent: App,
+  errorBoundary() {
+    // https://reactjs.org/docs/error-boundaries.html
+    return <div>This renders when a catastrophic error occurs</div>;
+  },
+});
+
+export function bootstrap(props) {
+  return appLifeCycles.bootstrap(props);
+}
+
+export function mount(props) {
+  return appLifeCycles.mount(props);
+}
+
+export function unmount(props) {
+  return appLifeCycles.unmount(props);
+}
diff --git a/micro-ui/web/packages/hrms/src/pages/index.js b/micro-ui/web/packages/hrms/src/pages/index.js
@@ -1,10 +1,15 @@
 import { PrivateRoute } from "@egovernments/digit-ui-react-components";
-import React,{ useEffect } from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, Switch, useLocation } from "react-router-dom";
+import {
+  Link,
+  Switch,
+  useLocation,
+  BrowserRouter as Router,
+} from "react-router-dom";
 import { SVG } from "@egovernments/digit-ui-react-components";
 
-const {SixFtApart,Rotate360}=SVG;
+const { SixFtApart, Rotate360 } = SVG;
 const EmployeeApp = ({ path, url, userType }) => {
   const { t } = useTranslation();
   const location = useLocation();
@@ -16,46 +21,84 @@ const EmployeeApp = ({ path, url, userType }) => {
     },
   };
 
-  const HRMSResponse = Digit?.ComponentRegistryService?.getComponent("HRMSResponse");
-  const HRMSDetails = Digit?.ComponentRegistryService?.getComponent("HRMSDetails");
+  const HRMSResponse =
+    Digit?.ComponentRegistryService?.getComponent("HRMSResponse");
+  const HRMSDetails =
+    Digit?.ComponentRegistryService?.getComponent("HRMSDetails");
   const Inbox = Digit?.ComponentRegistryService?.getComponent("HRInbox");
-  const CreateEmployee = Digit?.ComponentRegistryService?.getComponent("HRCreateEmployee");
-  const EditEmpolyee = Digit?.ComponentRegistryService?.getComponent("HREditEmpolyee");
+  const CreateEmployee =
+    Digit?.ComponentRegistryService?.getComponent("HRCreateEmployee");
+  const EditEmpolyee =
+    Digit?.ComponentRegistryService?.getComponent("HREditEmpolyee");
 
   const employeeCreateSession = Digit.Hooks.useSessionStorage("NEW_EMPLOYEE_CREATE", {});
   const [sessionFormData,setSessionFormData, clearSessionFormData] = employeeCreateSession;
 
   // remove session form data if user navigates away from the estimate create screen
-  useEffect(()=>{
-    if (!window.location.href.includes("/hrms/create") && sessionFormData && Object.keys(sessionFormData) != 0) {
-    clearSessionFormData();
-    }
-},[location]);
+    useEffect(()=>{
+      if (!window.location.href.includes("/hrms/create") && sessionFormData && Object.keys(sessionFormData) != 0) {
+      clearSessionFormData();
+      }
+  },[location]);
 
   return (
-    <Switch>
-      <React.Fragment>
-        <div className="ground-container">
-          <p className="breadcrumb" style={{ marginLeft: mobileView ? "1vw" : "0px" }}>
-            <Link to= {`/${window?.contextPath}/employee`} style={{ cursor: "pointer", color: "#666" }}>
-              {t("HR_COMMON_BUTTON_HOME")}
-            </Link>{" "}
-            / <span>{location.pathname ===  `/${window?.contextPath}/employee/hrms/inbox` ? t("HR_COMMON_HEADER") : t("HR_COMMON_HEADER")}</span>
-          </p>
-          <PrivateRoute
-            path={`${path}/inbox`}
-            component={() => (
-              <Inbox parentRoute={path} businessService="hrms" filterComponent="HRMS_INBOX_FILTER" initialStates={inboxInitialState} isInbox={true} />
-            )}
-          />
-          <PrivateRoute path={`${path}/create`} component={() => <CreateEmployee />} />
-          <PrivateRoute path={`${path}/response`} component={(props) => <HRMSResponse {...props} parentRoute={path} />} />
-          <PrivateRoute path={`${path}/details/:tenantId/:id`} component={() => <HRMSDetails />} />
-          <PrivateRoute path={`${path}/edit/:tenantId/:id`} component={() => <EditEmpolyee />} />
-        </div>
-      </React.Fragment>
-    </Switch>
+    <React.Fragment>
+      <Router>
+        <Switch>
+          <div className="ground-container">
+            <p
+              className="breadcrumb"
+              style={{ marginLeft: mobileView ? "1vw" : "0px" }}
+            >
+              <Link
+                to={`/${window?.contextPath}/employee`}
+                style={{ cursor: "pointer", color: "#666" }}
+              >
+                {t("HR_COMMON_BUTTON_HOME")}
+              </Link>{" "}
+              /{" "}
+              <span>
+                {location.pathname ===
+                `/${window?.contextPath}/employee/hrms/inbox`
+                  ? t("HR_COMMON_HEADER")
+                  : t("HR_COMMON_HEADER")}
+              </span>
+            </p>
+            <PrivateRoute
+              path={`${path}/inbox`}
+              component={() => (
+                <Inbox
+                  parentRoute={path}
+                  businessService="hrms"
+                  filterComponent="HRMS_INBOX_FILTER"
+                  initialStates={inboxInitialState}
+                  isInbox={true}
+                />
+              )}
+            />
+            <PrivateRoute
+              path={`${path}/create`}
+              component={() => <CreateEmployee />}
+            />
+            <PrivateRoute
+              path={`${path}/response`}
+              component={(props) => (
+                <HRMSResponse {...props} parentRoute={path} />
+              )}
+            />
+            <PrivateRoute
+              path={`${path}/details/:tenantId/:id`}
+              component={() => <HRMSDetails />}
+            />
+            <PrivateRoute
+              path={`${path}/edit/:tenantId/:id`}
+              component={() => <EditEmpolyee />}
+            />
+          </div>
+        </Switch>
+      </Router>
+    </React.Fragment>
   );
 };
 
-export default EmployeeApp;
+export default EmployeeApp;
diff --git a/micro-ui/web/packages/hrms/webpack.dev.js b/micro-ui/web/packages/hrms/webpack.dev.js
@@ -41,7 +41,7 @@ module.exports = () => {
         name: "hrms",
         filename: "remoteEntry.js",
         exposes: {
-          "./HrmsModule": "./src/bootstrap",
+          "./HrmsModule": "./src/SingleSpaEntry",
         },
         shared: packageJson.dependencies,
       }),

diff --git a/micro-ui/web/packages/hrms/webpack.prod.js b/micro-ui/web/packages/hrms/webpack.prod.js
@@ -24,3 +24,4 @@ module.exports = () => {
 
   return merge(commonConfig, prodConfig);
 
+};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,3 +24,4 @@ module.exports = () => {

		return merge(commonConfig, prodConfig);

		};