odigos-io · alonkeyval · Aug 3, 2023 · Jul 31, 2023 · Jul 31, 2023 · Jul 31, 2023
diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import theme from "@/styles/palette";
 import { QueryClient, QueryClientProvider } from "react-query";
+import Head from "next/head";
 
 const LAYOUT_STYLE: React.CSSProperties = {
   margin: 0,
@@ -30,6 +31,9 @@ export default function RootLayout({
     <html lang="en">
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
+          <Head>
+            <title>Odigos</title>
+          </Head>
           <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
             {children}
           </body>

diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
@@ -0,0 +1,111 @@
+"use client";
+import React, { useEffect } from "react";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { useMutation, useQuery } from "react-query";
+import {
+  getDestination,
+  getDestinationsTypes,
+  setDestination,
+} from "@/services";
+import { ManageDestination, OverviewHeader } from "@/components/overview";
+import { useNotification, useSectionData } from "@/hooks";
+import { useRouter, useSearchParams } from "next/navigation";
+import { styled } from "styled-components";
+
+const DEST = "dest";
+
+const NewDestinationContainer = styled.div`
+  padding: 20px 36px;
+`;
+
+export default function NewDestinationFlow() {
+  const { sectionData, setSectionData } = useSectionData(null);
+  const { show, Notification } = useNotification();
+  const { mutate } = useMutation((body) => setDestination(body));
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const { data: destinationType } = useQuery(
+    [QUERIES.API_DESTINATION_TYPE, sectionData?.type],
+    () => getDestination(sectionData?.type),
+    {
+      enabled: !!sectionData,
+    }
+  );
+
+  const { data: destinationsList } = useQuery(
+    [QUERIES.API_DESTINATION_TYPES],
+    getDestinationsTypes
+  );
+
+  useEffect(onPageLoad, [destinationsList]);
+
+  function onPageLoad() {
+    const search = searchParams.get(DEST);
+    if (!destinationsList || !search) return;
+
+    let currentData = null;
+
+    for (const category of destinationsList.categories) {
+      if (currentData) {
+        break;
+      }
+      const filterItem = category.items.filter(({ type }) => type === search);
+      if (filterItem.length) {
+        currentData = filterItem[0];
+      }
+    }
+
+    setSectionData(currentData);
+  }
+
+  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message,
+    });
+  }
+
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
+  function onSubmit(newDestination) {
+    const destination = {
+      ...newDestination,
+      type: sectionData.type,
+    };
+
+    mutate(destination, {
+      onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS),
+      onError,
+    });
+  }
+
+  function handleBackPress() {
+    router.back();
+  }
+
+  return (
+    <>
+      <OverviewHeader
+        title={OVERVIEW.MENU.DESTINATIONS}
+        onBackClick={handleBackPress}
+      />
+      {destinationType && sectionData && (
+        <NewDestinationContainer>
+          <ManageDestination
+            destinationType={destinationType}
+            selectedDestination={sectionData}
+            onSubmit={onSubmit}
+          />
+        </NewDestinationContainer>
+      )}
+      <Notification />
+    </>
+  );
+}
diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx
@@ -0,0 +1,7 @@
+"use client";
+import React from "react";
+import { NewDestinationFlow } from "@/containers/overview";
+
+export default function CreateDestinationPage() {
+  return <NewDestinationFlow />;
+}
diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx
@@ -0,0 +1,67 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { useNotification } from "@/hooks";
+import { useSearchParams } from "next/navigation";
+import UpdateDestinationFlow from "@/containers/overview/destination/update.destination.flow";
+import { getDestinations } from "@/services";
+import { useQuery } from "react-query";
+import { KeyvalLoader } from "@/design.system";
+
+const DEST = "dest";
+
+export default function ManageDestinationPage() {
+  const [selectedDestination, setSelectedDestination] = useState<any>(null);
+  const { show, Notification } = useNotification();
+
+  const {
+    isLoading: destinationLoading,
+    data: destinationList,
+    refetch,
+  } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
+
+  const searchParams = useSearchParams();
+
+  useEffect(onPageLoad, [searchParams, destinationList]);
+
+  function onPageLoad() {
+    const search = searchParams.get(DEST);
+    const currentDestination = destinationList?.filter(
+      ({ id }) => id === search
+    );
+    if (currentDestination?.length) {
+      setSelectedDestination(currentDestination[0]);
+    }
+  }
+
+  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
+    refetch();
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message,
+    });
+  }
+
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
+  if (destinationLoading || !selectedDestination) {
+    return <KeyvalLoader />;
+  }
+
+  return (
+    <>
+      <UpdateDestinationFlow
+        selectedDestination={selectedDestination}
+        onSuccess={onSuccess}
+        onError={onError}
+      />
+      <Notification />
+    </>
+  );
+}
diff --git a/frontend/webapp/app/overview/destinations/page.tsx b/frontend/webapp/app/overview/destinations/page.tsx
@@ -1,11 +1,22 @@
 "use client";
 import { DestinationContainer } from "@/containers/overview";
 import React from "react";
+import { styled } from "styled-components";
+
+const DestinationContainerWrapper = styled.div`
+  height: 100vh;
+  overflow-y: hidden;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+`;
 
 export default function DestinationDashboardPage() {
   return (
-    <>
+    <DestinationContainerWrapper>
       <DestinationContainer />
-    </>
+    </DestinationContainerWrapper>
   );
 }
diff --git a/frontend/webapp/app/overview/layout.tsx b/frontend/webapp/app/overview/layout.tsx
@@ -1,6 +1,7 @@
-"use client";
+// "use client";
 import { Menu } from "@/components/side.menu";
 import theme from "@/styles/palette";
+import { Metadata } from "next";
 import React from "react";
 
 const LAYOUT_STYLE = {
@@ -14,6 +15,9 @@ const CHILDREN_STYLE = {
   width: "100%",
   height: "93%",
 };
+export const metadata: Metadata = {
+  title: "Odigos",
+};
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (

diff --git a/frontend/webapp/app/overview/sources/create/page.tsx b/frontend/webapp/app/overview/sources/create/page.tsx
@@ -0,0 +1,40 @@
+"use client";
+import React from "react";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { OverviewHeader } from "@/components/overview";
+import { useNotification } from "@/hooks";
+import { useQuery } from "react-query";
+import { getSources } from "@/services";
+import { NewSourceFlow } from "@/containers/overview/sources/new.source.flow";
+import { useRouter } from "next/navigation";
+
+export default function CreateNewSourcesPage() {
+  const { show, Notification } = useNotification();
+  const router = useRouter();
+  const { data: sources, refetch } = useQuery(
+    [QUERIES.API_SOURCES],
+    getSources
+  );
+
+  function onNewSourceSuccess() {
+    setTimeout(() => {
+      router.back();
+      refetch();
+    }, 1000);
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message: OVERVIEW.SOURCE_CREATED_SUCCESS,
+    });
+  }
+
+  return (
+    <>
+      <OverviewHeader
+        title={OVERVIEW.MENU.SOURCES}
+        onBackClick={() => router.back()}
+      />
+      <NewSourceFlow onSuccess={onNewSourceSuccess} sources={sources} />
+      <Notification />
+    </>
+  );
+}
diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx
@@ -0,0 +1,103 @@
+"use client";
+import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header";
+import { getSources } from "@/services";
+import {
+  NOTIFICATION,
+  OVERVIEW,
+  QUERIES,
+  ROUTES,
+  SETUP,
+} from "@/utils/constants";
+import { useRouter, useSearchParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { useMutation, useQuery } from "react-query";
+import { ManageSourcePageContainer, BackButtonWrapper } from "./styled";
+import { LANGUAGES_LOGOS } from "@/assets/images";
+import { Back } from "@/assets/icons/overview";
+import { KeyvalText } from "@/design.system";
+import { ManagedSource } from "@/types/sources";
+import { DeleteSource } from "@/components/overview";
+import { deleteSource } from "@/services/sources";
+import { useNotification } from "@/hooks";
+
+const SOURCE = "source";
+
+export default function ManageSourcePage() {
+  const [currentSource, setCurrentSource] = useState<ManagedSource | null>(
+    null
+  );
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const { data: sources, refetch } = useQuery(
+    [QUERIES.API_SOURCES],
+    getSources
+  );
+  const { show, Notification } = useNotification();
+  const { mutate } = useMutation(() =>
+    deleteSource(
+      currentSource?.namespace || "",
+      currentSource?.kind || "",
+      currentSource?.name || ""
+    )
+  );
+  useEffect(onPageLoad, [sources]);
+
+  useEffect(() => {
+    console.log({ currentSource });
+  }, [currentSource]);
+
+  function onPageLoad() {
+    const search = searchParams.get(SOURCE);
+    const source = sources?.find((item) => item.name === search);
+    source && setCurrentSource(source);
+  }
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
+  function onSuccess() {
+    setTimeout(() => {
+      router.back();
+      refetch();
+    }, 1000);
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message: OVERVIEW.SOURCE_DELETED_SUCCESS,
+    });
+  }
+  function onDelete() {
+    mutate(undefined, {
+      onSuccess,
+      onError,
+    });
+  }
+
+  return (
+    <ManageSourcePageContainer>
+      <BackButtonWrapper onClick={() => router.back()}>
+        <Back width={14} />
+        <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
+      </BackButtonWrapper>
+      {currentSource && (
+        <ManageSourceHeader
+          name={currentSource?.name}
+          image_url={
+            LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
+          }
+        />
+      )}
+      <DeleteSource
+        onDelete={onDelete}
+        name={currentSource?.name}
+        image_url={
+          LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
+        }
+      />
+      <Notification />
+    </ManageSourcePageContainer>
+  );
+}