add pen icon and danger zone

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

@@ -1,28 +1,56 @@
 "use client";
+import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header";
 import { getSources } from "@/services";
-import { QUERIES } from "@/utils/constants";
-import { useSearchParams } from "next/navigation";
+import { QUERIES, SETUP } from "@/utils/constants";
+import { useRouter, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { 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";
 
 const SOURCE = "source";
 
 export default function ManageSourcePage() {
-  const [currentSource, setCurrentSource] = useState(null);
+  const [currentSource, setCurrentSource] = useState<ManagedSource | null>(
+    null
+  );
   const searchParams = useSearchParams();
-
+  const router = useRouter();
   const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources);
 
   useEffect(onPageLoad, [sources]);
+
   function onPageLoad() {
     const search = searchParams.get(SOURCE);
     const source = sources?.find((item) => item.name === search);
     source && setCurrentSource(source);
   }
 
   return (
-    <>
-      <div>{currentSource?.name}</div>
-    </>
+    <ManageSourcePageContainer>
+      <BackButtonWrapper onClick={() => router.back()}>
+        <Back width={14} />
+        <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
+      </BackButtonWrapper>
+      {currentSource && (
+        <ManageSourceHeader
+          display_name={currentSource?.name}
+          image_url={
+            LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
+          }
+        />
+      )}
+      <DeleteSource
+        onDelete={() => {}}
+        name={currentSource?.name}
+        image_url={
+          LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
+        }
+      />
+    </ManageSourcePageContainer>
   );
 }

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

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const ManageSourcePageContainer = styled.div`
+  padding: 32px;
+`;
+
+export const BackButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  p {
+    cursor: pointer !important;
+  }
+`;

frontend/webapp/assets/icons/overview/index.tsx

@@ -1,6 +1,7 @@
 import KeyvalMiddleware from "./middleware.svg";
 import Folder from "./folder.svg";
 import Plus from "./plus.svg";
+import Pen from "./pen.svg";
 import Back from "./back.svg";
 
-export { KeyvalMiddleware, Folder, Plus, Back };
+export { KeyvalMiddleware, Folder, Plus, Back, Pen };

frontend/webapp/components/overview/index.tsx

@@ -3,3 +3,4 @@ export { ManageDestination } from "./destination/manage.destination/manage.desti
 export { DestinationsManagedList } from "./destination/destination.list/destinations.managed.list";
 export { SourcesManagedList } from "./sources/sources.manage.list/sources.manage.list";
 export { SourcesActionMenu } from "./sources/action.menu/sources.action.menu";
+export { DeleteSource } from "./sources/delete.source/delete.source";

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

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { styled } from "styled-components";
+import { ConnectionsIcons } from "@/components/setup";
+import { DangerZone, KeyvalModal, KeyvalText } from "@/design.system";
+import { ModalPositionX, ModalPositionY } from "@/design.system/modal/types";
+import theme from "@/styles/palette";
+import { OVERVIEW } from "@/utils/constants";
+
+const FieldWrapper = styled.div`
+  margin-top: 32px;
+  width: 348px;
+`;
+
+const IMAGE_STYLE = { border: "solid 1px #ededed" };
+export function DeleteSource({
+  onDelete,
+  name,
+  image_url,
+}: {
+  onDelete: () => void;
+  name: string | undefined;
+  image_url: string;
+}) {
+  const [showModal, setShowModal] = useState(false);
+
+  const modalConfig = {
+    title: OVERVIEW.DELETE_SOURCE,
+    showHeader: true,
+    showOverlay: true,
+    positionX: ModalPositionX.center,
+    positionY: ModalPositionY.center,
+    padding: "20px",
+    footer: {
+      primaryBtnText: OVERVIEW.CONFIRM_SOURCE_DELETE,
+      primaryBtnAction: () => {
+        setShowModal(false);
+      },
+    },
+  };
+
+  return (
+    <>
+      <FieldWrapper>
+        <DangerZone
+          title={OVERVIEW.SOURCE_DANGER_ZONE_TITLE}
+          subTitle={OVERVIEW.SOURCE_DANGER_ZONE_SUBTITLE}
+          btnText={OVERVIEW.DELETE}
+          onClick={() => setShowModal(true)}
+        />
+      </FieldWrapper>
+      {showModal && (
+        <KeyvalModal
+          show={showModal}
+          closeModal={() => setShowModal(false)}
+          config={modalConfig}
+        >
+          <br />
+          <ConnectionsIcons icon={image_url} imageStyle={IMAGE_STYLE} />
+          <br />
+          <KeyvalText color={theme.text.primary} size={20} weight={600}>
+            {`${OVERVIEW.DELETE} ${name}`}
+          </KeyvalText>
+        </KeyvalModal>
+      )}
+    </>
+  );
+}

frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { KeyvalImage, KeyvalText, KeyvalTooltip } from "@/design.system";
+import { Pen } from "@/assets/icons/overview";
+
+const ManageSourceHeaderWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  height: 104px;
+  align-items: center;
+  border-radius: 25px;
+  margin: 24px 0;
+  background: radial-gradient(
+      78.09% 72.18% at 100% -0%,
+      rgba(150, 242, 255, 0.4) 0%,
+      rgba(150, 242, 255, 0) 61.91%
+    ),
+    linear-gradient(180deg, #2e4c55 0%, #303355 100%);
+`;
+
+const TextWrapper = styled.div`
+  margin-left: 12px;
+  margin-right: 12px;
+`;
+
+const EditIconWrapper = styled.div`
+  width: 20px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+
+  :hover {
+    cursor: pointer;
+    fill: ${({ theme }) => theme.colors.secondary};
+  }
+`;
+const IMAGE_STYLE: React.CSSProperties = {
+  backgroundColor: "#fff",
+  padding: 4,
+  marginRight: 16,
+  marginLeft: 16,
+};
+
+export function ManageSourceHeader({ image_url, display_name }) {
+  const [showEditInput, setShowEditInput] = useState(true);
+  return (
+    <ManageSourceHeaderWrapper>
+      <KeyvalImage src={image_url} style={IMAGE_STYLE} />
+      <TextWrapper>
+        <KeyvalText size={24} weight={700}>
+          {display_name}
+        </KeyvalText>
+      </TextWrapper>
+      {showEditInput ? (
+        <EditIconWrapper onClick={() => setShowEditInput(false)}>
+          <Pen width={16} height={16} />
+        </EditIconWrapper>
+      ) : null}
+    </ManageSourceHeaderWrapper>
+  );
+}

frontend/webapp/utils/constants/string.tsx

@@ -73,10 +73,15 @@ export const OVERVIEW = {
   MANAGE: "Manage",
   DELETE: "Delete",
   DELETE_DESTINATION: "Delete Destination",
+  DELETE_SOURCE: "Delete Source",
+  SOURCE_DANGER_ZONE_TITLE: "Delete this source",
+  SOURCE_DANGER_ZONE_SUBTITLE:
+    "This action cannot be undone. This will permanently delete the source and all associated data.",
   DELETE_MODAL_TITLE: "Delete this destination",
   DELETE_MODAL_SUBTITLE:
     "This action cannot be undone. This will permanently delete the destination and all associated data.",
   DELETE_BUTTON: "I want to delete this destination",
+  CONFIRM_SOURCE_DELETE: "I want to delete this source",
   CONNECT: "Connect",
 };