From 5fffc40d44a40588873cc390eb8cca6099cfb3bb Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 30 Jul 2023 16:03:56 +0300
Subject: [PATCH 1/3] add new action menu

---
 frontend/webapp/components/overview/index.tsx |  1 +
 .../sources.action.menu.styled.tsx            | 12 +++++++++
 .../action.menu/sources.action.menu.tsx       | 25 +++++++++++++++++++
 .../sources.manage.styled.tsx                 |  3 +--
 .../overview/sources/sources.styled.tsx       |  4 +++
 .../containers/overview/sources/sources.tsx   | 12 +++++++--
 frontend/webapp/utils/constants/string.tsx    |  1 +
 7 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
 create mode 100644 frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx

diff --git a/frontend/webapp/components/overview/index.tsx b/frontend/webapp/components/overview/index.tsx
index 799574495..d6c9f8384 100644
--- a/frontend/webapp/components/overview/index.tsx
+++ b/frontend/webapp/components/overview/index.tsx
@@ -2,3 +2,4 @@ export { OverviewHeader } from "./overview.header/overview.header";
 export { ManageDestination } from "./destination/manage.destination/manage.destination";
 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";
diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
new file mode 100644
index 000000000..9d6007d42
--- /dev/null
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const SourcesMenuWrapper = styled.div`
+  width: 100%;
+  height: 68px;
+  padding-top: 88px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const InputsWrapper = styled.div``;
diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
new file mode 100644
index 000000000..2f373f499
--- /dev/null
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import {
+  InputsWrapper,
+  SourcesMenuWrapper,
+} from "./sources.action.menu.styled";
+import { KeyvalButton, KeyvalText } from "@/design.system";
+import { Plus } from "@/assets/icons/overview";
+import { OVERVIEW } from "@/utils/constants";
+import theme from "@/styles/palette";
+const BUTTON_STYLES = { gap: 10, height: 40 };
+export function SourcesActionMenu() {
+  return (
+    <SourcesMenuWrapper>
+      <InputsWrapper>
+        <Plus />
+      </InputsWrapper>
+      <KeyvalButton style={BUTTON_STYLES}>
+        <Plus />
+        <KeyvalText size={16} weight={700} color={theme.text.dark_button}>
+          {OVERVIEW.ADD_NEW_SOURCE}
+        </KeyvalText>
+      </KeyvalButton>
+    </SourcesMenuWrapper>
+  );
+}
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
index 12350c2a4..ffbdffed2 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
@@ -27,7 +27,7 @@ export const EmptyListWrapper = styled.div`
 `;
 
 export const ManagedListWrapper = styled.div`
-  height: 80%;
+  height: 75%;
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
@@ -38,6 +38,5 @@ export const ManagedListWrapper = styled.div`
 export const ManagedContainer = styled.div`
   width: 100%;
   height: 100%;
-  margin-top: 120px;
   padding: 0px 36px;
 `;
diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx
index c361682ec..d65459093 100644
--- a/frontend/webapp/containers/overview/sources/sources.styled.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.styled.tsx
@@ -5,3 +5,7 @@ export const SourcesContainerWrapper = styled.div`
   width: 100%;
   overflow: hidden;
 `;
+
+export const MenuWrapper = styled.div`
+  padding: 0 32px;
+`;
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index 784be7026..256c57981 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -4,8 +4,12 @@ import { KeyvalLoader } from "@/design.system";
 import { OVERVIEW, QUERIES } from "@/utils/constants";
 import { useQuery } from "react-query";
 import { getSources } from "@/services";
-import { OverviewHeader, SourcesManagedList } from "@/components/overview";
-import { SourcesContainerWrapper } from "./sources.styled";
+import {
+  OverviewHeader,
+  SourcesActionMenu,
+  SourcesManagedList,
+} from "@/components/overview";
+import { SourcesContainerWrapper, MenuWrapper } from "./sources.styled";
 
 export function SourcesContainer() {
   const {
@@ -21,6 +25,10 @@ export function SourcesContainer() {
   return (
     <SourcesContainerWrapper>
       <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
+      <MenuWrapper>
+        <SourcesActionMenu />
+      </MenuWrapper>
+
       <SourcesManagedList data={sources} />
     </SourcesContainerWrapper>
   );
diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
index b16b6a9eb..8591b7e1a 100644
--- a/frontend/webapp/utils/constants/string.tsx
+++ b/frontend/webapp/utils/constants/string.tsx
@@ -62,6 +62,7 @@ export const OVERVIEW = {
     SOURCES: "Sources",
     DESTINATIONS: "Destinations",
   },
+  ADD_NEW_SOURCE: "Add New Source",
   ADD_NEW_DESTINATION: "Add New Destination",
   DESTINATION_UPDATE_SUCCESS: "Destination updated successfully",
   DESTINATION_CREATED_SUCCESS: "Destination created successfully",

From 18cd5c427a5c29f2d22d0cfaf08e0e9f770203d2 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 30 Jul 2023 17:25:10 +0300
Subject: [PATCH 2/3] on add btn click

---
 .../sources.action.menu.styled.tsx            |  3 +--
 .../action.menu/sources.action.menu.tsx       | 12 ++++-----
 .../overview/sources/new.source.flow.tsx      | 27 +++++++++++++++++++
 .../overview/sources/sources.styled.tsx       | 14 ++++++++++
 .../containers/overview/sources/sources.tsx   | 24 ++++++++++++-----
 5 files changed, 66 insertions(+), 14 deletions(-)
 create mode 100644 frontend/webapp/containers/overview/sources/new.source.flow.tsx

diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
index 9d6007d42..610dedddb 100644
--- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
@@ -2,10 +2,9 @@ import styled from "styled-components";
 
 export const SourcesMenuWrapper = styled.div`
   width: 100%;
-  height: 68px;
+  margin-top: 32px;
   padding-top: 88px;
   display: flex;
-  align-items: center;
   justify-content: space-between;
 `;
 
diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
index 2f373f499..7d13296f9 100644
--- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
@@ -7,14 +7,14 @@ import { KeyvalButton, KeyvalText } from "@/design.system";
 import { Plus } from "@/assets/icons/overview";
 import { OVERVIEW } from "@/utils/constants";
 import theme from "@/styles/palette";
-const BUTTON_STYLES = { gap: 10, height: 40 };
-export function SourcesActionMenu() {
+
+const BUTTON_STYLES = { gap: 10, height: 36 };
+
+export function SourcesActionMenu({ onAddClick }) {
   return (
     <SourcesMenuWrapper>
-      <InputsWrapper>
-        <Plus />
-      </InputsWrapper>
-      <KeyvalButton style={BUTTON_STYLES}>
+      <InputsWrapper></InputsWrapper>
+      <KeyvalButton onClick={onAddClick} style={BUTTON_STYLES}>
         <Plus />
         <KeyvalText size={16} weight={700} color={theme.text.dark_button}>
           {OVERVIEW.ADD_NEW_SOURCE}
diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
new file mode 100644
index 000000000..79657962d
--- /dev/null
+++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { useSectionData } from "@/hooks";
+import { SourcesSectionWrapper, ButtonWrapper } from "./sources.styled";
+import { SourcesSection } from "@/containers/setup/sources/sources.section";
+import { KeyvalButton, KeyvalText } from "@/design.system";
+import theme from "@/styles/palette";
+import { SETUP } from "@/utils/constants";
+
+export function NewSourceFlow() {
+  const { sectionData, setSectionData, totalSelected } = useSectionData({});
+  return (
+    <SourcesSectionWrapper>
+      <ButtonWrapper>
+        <KeyvalText>{`${totalSelected} ${SETUP.SELECTED}`}</KeyvalText>
+        <KeyvalButton style={{ width: 110 }}>
+          <KeyvalText weight={600} color={theme.text.dark_button}>
+            Connect
+          </KeyvalText>
+        </KeyvalButton>
+      </ButtonWrapper>
+      <SourcesSection
+        sectionData={sectionData}
+        setSectionData={setSectionData}
+      />
+    </SourcesSectionWrapper>
+  );
+}
diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx
index d65459093..c3fa07df0 100644
--- a/frontend/webapp/containers/overview/sources/sources.styled.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.styled.tsx
@@ -9,3 +9,17 @@ export const SourcesContainerWrapper = styled.div`
 export const MenuWrapper = styled.div`
   padding: 0 32px;
 `;
+
+export const SourcesSectionWrapper = styled(MenuWrapper)`
+  margin-top: 88px;
+  position: relative;
+`;
+
+export const ButtonWrapper = styled.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  right: 32px;
+  top: 40px;
+`;
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index 256c57981..1849c2c33 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import { KeyvalLoader } from "@/design.system";
 import { OVERVIEW, QUERIES } from "@/utils/constants";
 import { useQuery } from "react-query";
@@ -10,14 +10,21 @@ import {
   SourcesManagedList,
 } from "@/components/overview";
 import { SourcesContainerWrapper, MenuWrapper } from "./sources.styled";
+import { NewSourceFlow } from "./new.source.flow";
 
 export function SourcesContainer() {
+  const [newFlow, setNewFlow] = useState(false);
+
   const {
     data: sources,
     refetch,
     isLoading,
   } = useQuery([QUERIES.API_SOURCES], getSources);
 
+  function renderNewSourceFlow() {
+    return <NewSourceFlow />;
+  }
+
   if (isLoading) {
     return <KeyvalLoader />;
   }
@@ -25,11 +32,16 @@ export function SourcesContainer() {
   return (
     <SourcesContainerWrapper>
       <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
-      <MenuWrapper>
-        <SourcesActionMenu />
-      </MenuWrapper>
-
-      <SourcesManagedList data={sources} />
+      {newFlow ? (
+        renderNewSourceFlow()
+      ) : (
+        <>
+          <MenuWrapper>
+            <SourcesActionMenu onAddClick={() => setNewFlow(true)} />
+          </MenuWrapper>
+          <SourcesManagedList data={sources} />
+        </>
+      )}
     </SourcesContainerWrapper>
   );
 }

From ab642bdbe3c4b4eeed1ac9442365f2ed0a56a81d Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 30 Jul 2023 17:30:19 +0300
Subject: [PATCH 3/3] WIP

---
 .../overview/sources/new.source.flow.tsx      |  1 +
 .../containers/overview/sources/sources.tsx   | 24 ++++++++++---------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
index 79657962d..c77035124 100644
--- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx
+++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
@@ -8,6 +8,7 @@ import { SETUP } from "@/utils/constants";
 
 export function NewSourceFlow() {
   const { sectionData, setSectionData, totalSelected } = useSectionData({});
+
   return (
     <SourcesSectionWrapper>
       <ButtonWrapper>
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index 1849c2c33..2d3af77cb 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -13,7 +13,7 @@ import { SourcesContainerWrapper, MenuWrapper } from "./sources.styled";
 import { NewSourceFlow } from "./new.source.flow";
 
 export function SourcesContainer() {
-  const [newFlow, setNewFlow] = useState(false);
+  const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState(false);
 
   const {
     data: sources,
@@ -25,6 +25,17 @@ export function SourcesContainer() {
     return <NewSourceFlow />;
   }
 
+  function renderSources() {
+    return (
+      <>
+        <MenuWrapper>
+          <SourcesActionMenu onAddClick={() => setDisplayNewSourceFlow(true)} />
+        </MenuWrapper>
+        <SourcesManagedList data={sources} />
+      </>
+    );
+  }
+
   if (isLoading) {
     return <KeyvalLoader />;
   }
@@ -32,16 +43,7 @@ export function SourcesContainer() {
   return (
     <SourcesContainerWrapper>
       <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
-      {newFlow ? (
-        renderNewSourceFlow()
-      ) : (
-        <>
-          <MenuWrapper>
-            <SourcesActionMenu onAddClick={() => setNewFlow(true)} />
-          </MenuWrapper>
-          <SourcesManagedList data={sources} />
-        </>
-      )}
+      {displayNewSourceFlow ? renderNewSourceFlow() : renderSources()}
     </SourcesContainerWrapper>
   );
 }