Merge pull request #348 from alonkeyval/TASK-143-add-new-source-btn

Task 143 add new source btn

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";

frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const SourcesMenuWrapper = styled.div`
+  width: 100%;
+  margin-top: 32px;
+  padding-top: 88px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const InputsWrapper = styled.div``;

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: 36 };
+
+export function SourcesActionMenu({ onAddClick }) {
+  return (
+    <SourcesMenuWrapper>
+      <InputsWrapper></InputsWrapper>
+      <KeyvalButton onClick={onAddClick} style={BUTTON_STYLES}>
+        <Plus />
+        <KeyvalText size={16} weight={700} color={theme.text.dark_button}>
+          {OVERVIEW.ADD_NEW_SOURCE}
+        </KeyvalText>
+      </KeyvalButton>
+    </SourcesMenuWrapper>
+  );
+}

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;
 `;

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

@@ -0,0 +1,28 @@
+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>
+  );
+}

frontend/webapp/containers/overview/sources/sources.styled.tsx

@@ -5,3 +5,21 @@ export const SourcesContainerWrapper = styled.div`
   width: 100%;
   overflow: hidden;
 `;
+
+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;
+`;

frontend/webapp/containers/overview/sources/sources.tsx

@@ -1,27 +1,49 @@
 "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";
 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";
+import { NewSourceFlow } from "./new.source.flow";
 
 export function SourcesContainer() {
+  const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState(false);
+
   const {
     data: sources,
     refetch,
     isLoading,
   } = useQuery([QUERIES.API_SOURCES], getSources);
 
+  function renderNewSourceFlow() {
+    return <NewSourceFlow />;
+  }
+
+  function renderSources() {
+    return (
+      <>
+        <MenuWrapper>
+          <SourcesActionMenu onAddClick={() => setDisplayNewSourceFlow(true)} />
+        </MenuWrapper>
+        <SourcesManagedList data={sources} />
+      </>
+    );
+  }
+
   if (isLoading) {
     return <KeyvalLoader />;
   }
 
   return (
     <SourcesContainerWrapper>
       <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
-      <SourcesManagedList data={sources} />
+      {displayNewSourceFlow ? renderNewSourceFlow() : renderSources()}
     </SourcesContainerWrapper>
   );
 }

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",