From f4ea24ec7dd3631483fdcdc026b1c4a5e861a411 Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Thu, 10 Aug 2023 14:13:58 +0300
Subject: [PATCH] Task 219 fixed UI issues (#394)

The changes made in this pull request aim to enhance the overall user
experience.
---
 .../destination.list.styled.tsx               |  7 +++--
 .../sources.manage.styled.tsx                 | 28 +++++++++++++++----
 .../destination.card.styled.tsx               |  5 ++++
 .../destination.card/destination.card.tsx     |  4 +--
 .../destination.list.styled.tsx               |  7 +++--
 .../destination.list/destination.list.tsx     | 13 ++++-----
 .../sources.list/sources.list.styled.tsx      |  3 +-
 .../destinations/destinations.styled.tsx      |  5 ++++
 .../destination.section.styled.tsx            |  5 ++++
 .../setup/destination/destination.section.tsx | 20 ++++++++++++-
 .../setup/setup.header/setup.header.tsx       |  2 +-
 .../setup/setup.section/setup.section.tsx     | 10 +++++--
 frontend/webapp/design.system/card/card.tsx   |  2 +-
 go.work.sum                                   |  5 ++--
 14 files changed, 86 insertions(+), 30 deletions(-)

diff --git a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
index ceb5afeb1e..a161d7f176 100644
--- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
@@ -2,10 +2,11 @@ import { styled } from "styled-components";
 
 export const ManagedListWrapper = styled.div`
   display: grid;
-  gap: 24px;
+  grid-gap: 24px;
   padding: 0px 36px;
   padding-bottom: 50px;
   grid-template-columns: repeat(4, 1fr);
+  overflow-y: scroll;
   ::-webkit-scrollbar {
     display: none;
   }
@@ -17,6 +18,7 @@ export const ManagedListWrapper = styled.div`
   }
   @media screen and (max-width: 1450px) {
     grid-template-columns: repeat(2, 1fr);
+    height: 75%;
   }
 `;
 
@@ -30,6 +32,7 @@ export const MenuWrapper = styled.div`
 export const CardWrapper = styled.div`
   display: flex;
   width: 366px;
+  height: 190px;
   padding-top: 32px;
   padding-bottom: 24px;
   flex-direction: column;
@@ -42,7 +45,7 @@ export const CardWrapper = styled.div`
   flex-direction: column;
   cursor: pointer;
   &:hover {
-    background: var(--dark-mode-dark-1, #07111a81);
+    border: ${({ theme }) => `1px solid  ${theme.colors.secondary}`};
   }
 `;
 
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 9a36b4efa7..eef639f380 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
@@ -13,8 +13,9 @@ export const CardWrapper = styled.div`
   flex-direction: column;
   gap: 10px;
   cursor: pointer;
+
   &:hover {
-    background: var(--dark-mode-dark-1, #07111a81);
+    border: ${({ theme }) => `1px solid  ${theme.colors.secondary}`};
   }
 `;
 
@@ -27,12 +28,27 @@ export const EmptyListWrapper = styled.div`
 `;
 
 export const ManagedListWrapper = styled.div`
-  max-height: 72%;
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
   gap: 24px;
-  padding: 0 36px 0 0;
-  overflow-y: scroll;
+  overflow: scroll;
+  grid-template-columns: repeat(5, 1fr);
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  @media screen and (max-width: 1800px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  @media screen and (max-width: 1500px) {
+    grid-template-columns: repeat(3, 1fr);
+    height: 680px;
+  }
+  @media screen and (max-width: 1200px) {
+    grid-template-columns: repeat(2, 1fr);
+    height: 650px;
+  }
 `;
 
 export const ManagedContainer = styled.div`
diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx
index 17e6a2a891..b0ab56a32f 100644
--- a/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx
+++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx
@@ -7,6 +7,11 @@ export const DestinationCardWrapper = styled.div`
   flex-direction: column;
   gap: 14px;
   cursor: pointer;
+  border: 1px solid transparent;
+  &:hover {
+    border-radius: 24px;
+    border: ${({ theme }) => `1px solid  ${theme.colors.secondary}`};
+  }
 `;
 
 export const ApplicationNameWrapper = styled.div`
diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
index 316f81939e..851127e45e 100644
--- a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
+++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
@@ -27,13 +27,11 @@ type Destination = {
 type DestinationCardProps = {
   item: Destination;
   onClick: () => void;
-  focus: boolean;
 };
 
 export function DestinationCard({
   item: { supported_signals, image_url, display_name },
   onClick,
-  focus,
 }: DestinationCardProps) {
   const monitors = useMemo(() => {
     return Object.entries(supported_signals).reduce((acc, [key, value]) => {
@@ -50,7 +48,7 @@ export function DestinationCard({
   }, [JSON.stringify(supported_signals)]);
 
   return (
-    <KeyvalCard focus={focus}>
+    <KeyvalCard>
       <DestinationCardWrapper onClick={onClick}>
         <KeyvalImage
           src={image_url}
diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
index fcc749e550..8802d0155f 100644
--- a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
@@ -8,16 +8,19 @@ export const DestinationTypeTitleWrapper = styled.div`
   margin: 24px 0;
 `;
 
-export const DestinationListWrapper = styled.div`
+export const DestinationListWrapper = styled.div<{ repeat: number }>`
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: ${({ repeat }) => `repeat(${repeat},1fr)`};
   gap: 24px;
   ::-webkit-scrollbar {
     display: none;
   }
   -ms-overflow-style: none;
   scrollbar-width: none;
+  @media screen and (max-width: 1700px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
 
   @media screen and (max-width: 1500px) {
     grid-template-columns: repeat(3, 1fr);
diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx
index 7f84d463b5..8f838552ca 100644
--- a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx
+++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx
@@ -8,21 +8,18 @@ import {
 import { capitalizeFirstLetter } from "@/utils/functions";
 import { ROUTES } from "@/utils/constants";
 
-export function DestinationList({
-  data: { items, name },
-  onItemClick,
-  sectionData,
-}: any) {
+export function DestinationList({ data: { items, name }, onItemClick }: any) {
   function renderList() {
     return items?.map((item: any, index: number) => (
       <DestinationCard
         key={index}
         item={item}
         onClick={() => onItemClick(item)}
-        focus={sectionData?.type === item?.type}
       />
     ));
   }
+  const getNumberOfItemsRepeated = () =>
+    window.location.pathname.includes(ROUTES.CREATE_DESTINATION) ? 5 : 4;
 
   return items?.length ? (
     <>
@@ -31,7 +28,9 @@ export function DestinationList({
           name
         )}`}</KeyvalText>
       </DestinationTypeTitleWrapper>
-      <DestinationListWrapper>{renderList()}</DestinationListWrapper>
+      <DestinationListWrapper repeat={getNumberOfItemsRepeated()}>
+        {renderList()}
+      </DestinationListWrapper>
     </>
   ) : null;
 }
diff --git a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
index 39d6b8fe98..100317447c 100644
--- a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
+++ b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
@@ -25,7 +25,6 @@ export const SourcesListWrapper = styled.div<{ repeat: number }>`
   overflow-y: scroll;
   scrollbar-width: none;
   -ms-overflow-style: none;
-
   display: grid;
   grid-template-columns: ${({ repeat }) => `repeat(${repeat},1fr)`};
 
@@ -46,7 +45,7 @@ export const SourcesListWrapper = styled.div<{ repeat: number }>`
 `;
 
 export const EmptyListWrapper = styled.div`
-  width: 100%;
+  width: 1168px;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/frontend/webapp/containers/overview/destinations/destinations.styled.tsx b/frontend/webapp/containers/overview/destinations/destinations.styled.tsx
index 008ad16f73..993600da7d 100644
--- a/frontend/webapp/containers/overview/destinations/destinations.styled.tsx
+++ b/frontend/webapp/containers/overview/destinations/destinations.styled.tsx
@@ -2,6 +2,11 @@ import styled from "styled-components";
 
 export const NewDestinationContainer = styled.div`
   padding: 20px 36px;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 `;
 
 export const ManageDestinationWrapper = styled.div`
diff --git a/frontend/webapp/containers/setup/destination/destination.section.styled.tsx b/frontend/webapp/containers/setup/destination/destination.section.styled.tsx
index 000d3870c5..8e6409f0ff 100644
--- a/frontend/webapp/containers/setup/destination/destination.section.styled.tsx
+++ b/frontend/webapp/containers/setup/destination/destination.section.styled.tsx
@@ -6,6 +6,11 @@ export const DestinationListContainer = styled.div`
   padding-bottom: 300px;
   margin-top: 24px;
   overflow: scroll;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 `;
 
 export const EmptyListWrapper = styled.div`
diff --git a/frontend/webapp/containers/setup/destination/destination.section.tsx b/frontend/webapp/containers/setup/destination/destination.section.tsx
index 854edd7795..18952e541b 100644
--- a/frontend/webapp/containers/setup/destination/destination.section.tsx
+++ b/frontend/webapp/containers/setup/destination/destination.section.tsx
@@ -19,14 +19,27 @@ import { KeyvalLoader } from "@/design.system";
 import { useNotification } from "@/hooks";
 import { getDestinationsTypes } from "@/services";
 
+interface DestinationTypes {
+  image_url: string;
+  display_name: string;
+  supported_signals: {
+    [key: string]: {
+      supported: boolean;
+    };
+  };
+  type: string;
+}
+
 type DestinationSectionProps = {
   sectionData?: any;
   setSectionData: (data: any) => void;
+  onSelectItem?: () => void;
 };
 
 export function DestinationSection({
   sectionData,
   setSectionData,
+  onSelectItem,
 }: DestinationSectionProps) {
   const [searchFilter, setSearchFilter] = useState<string>("");
   const [dropdownData, setDropdownData] = useState<any>(null);
@@ -47,6 +60,11 @@ export function DestinationSection({
       });
   }, [isError]);
 
+  function handleSelectItem(item: DestinationTypes) {
+    setSectionData(item);
+    onSelectItem && onSelectItem();
+  }
+
   function renderDestinationLists() {
     sortDestinationList(data);
     const list = filterDataByMonitorsOption(
@@ -73,7 +91,7 @@ export function DestinationSection({
             sectionData={sectionData}
             key={category.name}
             data={category}
-            onItemClick={(item: any) => setSectionData(item)}
+            onItemClick={(item: DestinationTypes) => handleSelectItem(item)}
           />
         )
       );
diff --git a/frontend/webapp/containers/setup/setup.header/setup.header.tsx b/frontend/webapp/containers/setup/setup.header/setup.header.tsx
index 6155e889a7..f7ca311040 100644
--- a/frontend/webapp/containers/setup/setup.header/setup.header.tsx
+++ b/frontend/webapp/containers/setup/setup.header/setup.header.tsx
@@ -80,7 +80,7 @@ export function SetupHeader({
               <KeyvalText>{SETUP.SELECTED}</KeyvalText>
             </TotalSelectedWrapper>
           )}
-        {currentStep?.id !== SETUP.STEPS.ID.CREATE_CONNECTION && (
+        {currentStep?.id === SETUP.STEPS.ID.CHOOSE_SOURCE && (
           <KeyvalButton
             disabled={totalSelected === 0}
             onClick={onNextClick}
diff --git a/frontend/webapp/containers/setup/setup.section/setup.section.tsx b/frontend/webapp/containers/setup/setup.section/setup.section.tsx
index 3c422b9376..c0578d1e3c 100644
--- a/frontend/webapp/containers/setup/setup.section/setup.section.tsx
+++ b/frontend/webapp/containers/setup/setup.section/setup.section.tsx
@@ -17,7 +17,7 @@ import { setNamespaces } from "@/services";
 import { useSearchParams } from "next/navigation";
 import { useMutation } from "react-query";
 import { SelectedSources } from "@/types/sources";
-import { RightArrow } from "@/assets/icons/app";
+import { WhiteArrow } from "@/assets/icons/app";
 
 const STATE = "state";
 
@@ -52,7 +52,11 @@ export function SetupSection() {
   function renderCurrentSection() {
     const Component = sectionComponents[currentStep?.id];
     return Component ? (
-      <Component sectionData={sectionData} setSectionData={setSectionData} />
+      <Component
+        sectionData={sectionData}
+        setSectionData={setSectionData}
+        onSelectItem={onNextClick}
+      />
     ) : null;
   }
 
@@ -110,7 +114,7 @@ export function SetupSection() {
       <SetupSectionContainer>
         {currentStep.index !== 1 && (
           <BackButtonWrapper onClick={onBackClick}>
-            <RightArrow />
+            <WhiteArrow />
             <KeyvalText size={14} weight={600}>
               {SETUP.BACK}
             </KeyvalText>
diff --git a/frontend/webapp/design.system/card/card.tsx b/frontend/webapp/design.system/card/card.tsx
index 9867a5ae3e..9d8110c75c 100644
--- a/frontend/webapp/design.system/card/card.tsx
+++ b/frontend/webapp/design.system/card/card.tsx
@@ -5,5 +5,5 @@ interface CardProps {
   focus?: any;
 }
 export function KeyvalCard(props: CardProps) {
-  return <Card>{props.children}</Card>;
+  return <Card {...props}>{props.children}</Card>;
 }
diff --git a/go.work.sum b/go.work.sum
index d1575bbee8..f4405e992b 100644
--- a/go.work.sum
+++ b/go.work.sum
@@ -244,6 +244,7 @@ github.com/alecthomas/units v0.0.0-20190924025748-f65c72e2690d/go.mod h1:rBZYJk5
 github.com/alecthomas/units v0.0.0-20211218093645-b94a6e3cc137/go.mod h1:OMCwj8VM1Kc9e19TLln2VL61YJF0x1XFtfdL4JdbSyE=
 github.com/antlr/antlr4/runtime/Go/antlr v1.4.10/go.mod h1:F7bn7fEU90QkQ3tnmaTx3LTKLEDqnwWODIYppRQ5hnY=
 github.com/armon/go-socks5 v0.0.0-20160902184237-e75332964ef5/go.mod h1:wHh0iHkYZB8zMSxRWpUBQtwG5a7fFgvEO+odwuTv2gs=
+github.com/benbjohnson/clock v1.3.0/go.mod h1:J11/hYXuz8f4ySSvYwY0FKfm+ezbsZBKZxNJlLklBHA=
 github.com/blang/semver/v4 v4.0.0/go.mod h1:IbckMUScFkM3pff0VJDNKRiT6TG/YpiHIM2yvyW5YoQ=
 github.com/buger/jsonparser v1.1.1/go.mod h1:6RYKKt7H4d4+iWqouImQ9R2FZql3VbhNgx27UK13J/0=
 github.com/cenkalti/backoff/v4 v4.1.3/go.mod h1:scbssz8iZGpm3xbr14ovlUdkxfGXNInqkPWOWmG2CLw=
@@ -293,8 +294,6 @@ github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730053900-d53d
 github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730062110-e61bd9fd998e/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo=
 github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730063239-1359423cb703/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo=
 github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730071335-e3ae9a524206/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo=
-github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730104422-ed0d5aa81b08 h1:pbl9g6FIHZrGQzcRU/Yt6g3WIqAbqbsXK728ztyJRYk=
-github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730104422-ed0d5aa81b08/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo=
 github.com/emicklei/go-restful v0.0.0-20170410110728-ff4f55a20633 h1:H2pdYOb3KQ1/YsqVWoWNLQO+fusocsw354rqGTZtAgw=
 github.com/emicklei/go-restful/v3 v3.8.0/go.mod h1:6n3XBCmQQb25CM2LCACGz8ukIrRry+4bhvbpWn3mrbc=
 github.com/emicklei/go-restful/v3 v3.10.2 h1:hIovbnmBTLjHXkqEBUz3HGpXZdM7ZrE9fJIZIqlJLqE=
@@ -425,7 +424,9 @@ go.opentelemetry.io/otel/trace v1.10.0/go.mod h1:Sij3YYczqAdz+EhmGhE6TpTxUO5/F/A
 go.opentelemetry.io/proto/otlp v1.0.0 h1:T0TX0tmXU8a3CbNXzEKGeU5mIVOdf0oykP+u2lIVU/I=
 go.opentelemetry.io/proto/otlp v1.0.0/go.mod h1:Sy6pihPLfYHkr3NkUbEhGHFhINUSI/v80hjKIs5JXpM=
 go.uber.org/goleak v1.1.10/go.mod h1:8a7PlsEVH3e/a/GLqe5IIrQx6GzcnRmZEufDUTk4A7A=
+go.uber.org/goleak v1.2.0/go.mod h1:XJYK+MuIchqpmGmUSAzotztawfKvYLUIgg7guXrwVUo=
 go.uber.org/goleak v1.2.1/go.mod h1:qlT2yGI9QafXHhZZLxlSuNsMw3FFLxBr+tBRlmO1xH4=
+go.uber.org/multierr v1.10.0/go.mod h1:20+QtiLqy0Nd6FdQB9TLXag12DsQkrbs3htMFfDN80Y=
 go.uber.org/zap v1.19.0/go.mod h1:xg/QME4nWcxGxrpdeYfq7UvYrLh66cuVKdrbD1XF/NI=
 golang.org/x/arch v0.4.0/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=