[features] Add NewEvent component, and routing event

.env.exmaple

@@ -0,0 +1,7 @@
+SD_BACKEND_URL=""
+
+SD_CLIENT_ID=""
+SD_AUTHORITY=""
+SD_REDIRECT=""
+SD_LOGOUT_REDIRECT=""
+SD_AUTH_SECRET=""

package.json

@@ -27,9 +27,9 @@
   },
   "devDependencies": {
     "@farmfe/cli": "^1.0.4",
-    "@farmfe/core": "^1.4.1",
+    "@farmfe/core": "^1.4.2",
     "@farmfe/js-plugin-postcss": "^1.9.0",
-    "@farmfe/plugin-react": "^1.2.4",
+    "@farmfe/plugin-react": "^1.2.6",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/lodash": "^4.17.13",

src/Components/History/EventItem.tsx

@@ -36,14 +36,6 @@ export function EventItem({ Prev, Curr }: IEventItem) {
     }
   }, [label.current]);
 
-  const status = useMemo(() => {
-    return chain(Array.from(Curr.Histories))
-      .orderBy(x => x.Created, "desc")
-      .map(x => x.Status)
-      .first()
-      .value() ?? EventStatus.Investigating;
-  }, [Curr.Histories]);
-
   const services = useMemo(() => {
     return chain(Array.from(Curr.RegionServices))
       .map(x => x.Service)
@@ -73,7 +65,7 @@ export function EventItem({ Prev, Curr }: IEventItem) {
 
   let color: any;
 
-  switch (status) {
+  switch (Curr.Status) {
     case EventStatus.Investigating:
     case EventStatus.Fixing:
     case EventStatus.Monitoring:
@@ -112,7 +104,7 @@ export function EventItem({ Prev, Curr }: IEventItem) {
 
         <div className="flex gap-x-2.5">
           <ScaleTag color={color}>
-            {status}
+            {Curr.Status}
           </ScaleTag>
 
           {services.slice(0, 3).map(service => (

src/Pages/NewEvent.tsx

@@ -0,0 +1,29 @@
+import { Helmet } from "react-helmet";
+import { Authorized } from "~/Components/Auth/With";
+
+/**
+ * The `NewEvent` component is responsible for rendering the interface
+ * for creating a new event within the OTC Status Dashboard application.
+ *
+ * This component is wrapped with the `Authorized` component to ensure
+ * that only authorized users can access the functionality provided.
+ *
+ * The main content of the component includes a heading that indicates
+ * the purpose of the page, which is to create a new event.
+ *
+ * @author Aloento
+ * @since 1.0.0
+ * @version 0.1.0
+ */
+export function NewEvent() {
+  return (
+    <Authorized>
+      <Helmet>
+        <title>New Event - OTC Status Dashboard</title>
+      </Helmet>
+
+      <h3 className="text-3xl font-medium text-slate-800">Create New Event</h3>
+
+    </Authorized>
+  )
+}

src/Pages/index.tsx

@@ -8,6 +8,7 @@ import { Availability } from "./Availability";
 import { Event } from "./Event";
 import { History } from "./History";
 import { Home } from "./Home";
+import { NewEvent } from "./NewEvent";
 
 /**
  * @author Aloento
@@ -20,9 +21,12 @@ export function Layout() {
 
   const match = useMemo(() => {
     switch (path) {
-      case "Login":
+      case "signin-oidc":
         return <ScaleLoadingSpinner size="large" text="Login Redirecting..." />;
 
+      case "signout-callback-oidc":
+        return <ScaleLoadingSpinner size="large" text="Logout Redirecting..." />;
+
       case "Reload":
         return <ScaleLoadingSpinner size="large" text="Reloading..." />;
 
@@ -35,6 +39,9 @@ export function Layout() {
       case "Availability":
         return <Availability />;
 
+      case "NewEvent":
+        return <NewEvent />;
+
       case "":
       case undefined:
         return <Home />;

src/Services/Status.tsx

@@ -184,20 +184,18 @@ export function StatusContext({ children }: { children: JSX.Element }) {
   const [db, setDB] = useState(DB);
 
   const url = process.env.SD_BACKEND_URL;
-  const uri = process.env.SD_BACKEND_API;
-  const file = process.env.SD_BACKEND_FILE === "true";
 
   useRequest(
     async () => {
       log.info(`Loading status data from v2...`);
 
-      const compLink = file ? "/mock.json" : `${url}${uri}/components`;
+      const compLink = `${url}/components`;
       const compRes = await fetch(compLink);
       const compData = await compRes.json();
 
       log.debug("Components Status loaded.", compData);
 
-      const eventLink = file ? "/event.json" : `${url}${uri}/incidents`;
+      const eventLink = `${url}/incidents`;
       const eventRes = await fetch(eventLink);
       const eventData = (await eventRes.json()).data;
 

test/newevent.test.tsx

@@ -0,0 +1,25 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { App } from "~/App";
+
+describe("NewEvent", () => {
+  const url = new URL('http://otc.com/NewEvent');
+
+  Object.defineProperty(window, 'location', {
+    value: {
+      ...window.location,
+      href: url.href,
+      hostname: url.hostname,
+      pathname: url.pathname,
+    },
+    writable: true,
+  });
+
+  it("should not render without Auth", async () => {
+    const { getByRole } = render(<App />);
+    const mainElement = getByRole('main');
+
+    expect(mainElement).toBeInTheDocument();
+    expect(mainElement).toHaveTextContent('Authenticating...');
+  }, 6000);
+});