Task 219 fixed UI issues (#394)

The changes made in this pull request aim to enhance the overall user experience.
odigos-io · Aug 10, 2023 · f4ea24e · f4ea24e
1 parent b97342e
commit f4ea24e
Show file tree

Hide file tree

Showing 14 changed files with 86 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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=