manage delete source

frontend/webapp/app/overview/sources/create/page.tsx

@@ -11,9 +11,16 @@ import { useRouter } from "next/navigation";
 export default function CreateNewSourcesPage() {
   const { show, Notification } = useNotification();
   const router = useRouter();
-  const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources);
+  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,

frontend/webapp/app/overview/sources/manage/page.tsx

@@ -1,16 +1,24 @@
 "use client";
 import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header";
 import { getSources } from "@/services";
-import { QUERIES, SETUP } from "@/utils/constants";
+import {
+  NOTIFICATION,
+  OVERVIEW,
+  QUERIES,
+  ROUTES,
+  SETUP,
+} from "@/utils/constants";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { useQuery } from "react-query";
+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";
 
@@ -20,15 +28,49 @@ export default function ManageSourcePage() {
   );
   const searchParams = useSearchParams();
   const router = useRouter();
-  const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources);
-
+  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]);
 
   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>
@@ -45,12 +87,13 @@ export default function ManageSourcePage() {
         />
       )}
       <DeleteSource
-        onDelete={() => {}}
+        onDelete={onDelete}
         name={currentSource?.name}
         image_url={
           LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
         }
       />
+      <Notification />
     </ManageSourcePageContainer>
   );
 }

frontend/webapp/components/overview/sources/delete.source/delete.source.tsx

@@ -34,6 +34,7 @@ export function DeleteSource({
       primaryBtnText: OVERVIEW.CONFIRM_SOURCE_DELETE,
       primaryBtnAction: () => {
         setShowModal(false);
+        onDelete();
       },
     },
   };

frontend/webapp/containers/overview/sources/new.source.flow.tsx

@@ -17,7 +17,9 @@ export function NewSourceFlow({ onSuccess, sources }) {
   const { show, Notification } = useNotification();
 
   function updateSectionDataWithSources() {
-    const sourceNamesSet = new Set(sources.map((source) => source.name));
+    const sourceNamesSet = new Set(
+      sources.map((source: SelectedSources) => source.name)
+    );
     const updatedSectionData: SelectedSources = {};
 
     for (const key in sectionData) {
@@ -50,6 +52,7 @@ export function NewSourceFlow({ onSuccess, sources }) {
       <ButtonWrapper>
         <KeyvalText>{`${totalSelected} ${SETUP.SELECTED}`}</KeyvalText>
         <KeyvalButton
+          disabled={totalSelected === 0}
           onClick={updateSectionDataWithSources}
           style={{ width: 110 }}
         >
@@ -58,6 +61,7 @@ export function NewSourceFlow({ onSuccess, sources }) {
           </KeyvalText>
         </KeyvalButton>
       </ButtonWrapper>
+
       <SourcesSection
         sectionData={sectionData}
         setSectionData={setSectionData}

frontend/webapp/services/sources.tsx

@@ -1,5 +1,5 @@
 import { API } from "@/utils/constants";
-import { get, post } from "./api";
+import { get, post, httpDelete } from "./api";
 import { SelectedSources } from "@/types/sources";
 
 export async function getNamespaces() {
@@ -17,3 +17,13 @@ export async function setNamespaces(body: SelectedSources): Promise<void> {
 export async function getSources() {
   return await get(API.SOURCES);
 }
+
+export async function deleteSource(
+  namespace: string,
+  kind: string,
+  name: string
+) {
+  return await httpDelete(
+    `${API.SOURCES}/namespace/${namespace}/kind/${kind}/name/${name}`
+  );
+}