sources list display

odigos-io · Jul 30, 2023 · 5504348 · 5504348
1 parent fbaa04c
commit 5504348
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 25 deletions.
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
@@ -28,7 +28,7 @@ export default function SourceManagedCard({
   return (
     <CardWrapper>
       <KeyvalImage
-        src={SOURCES_LOGOS[item?.languages[0].language || ""]}
+        src={SOURCES_LOGOS[item?.languages?.[0].language || ""]}
         width={56}
         height={56}
         style={LOGO_STYLE}
@@ -39,7 +39,7 @@ export default function SourceManagedCard({
       </KeyvalText>
       <KeyvalTag
         title={item?.kind || ""}
-        color={KIND_COLORS[item?.kind.toLowerCase() || DEPLOYMENT]}
+        color={KIND_COLORS[item?.kind?.toLowerCase() || DEPLOYMENT]}
       />
       <KeyvalText size={14} color={theme.text.light_grey} style={TEXT_STYLE}>
         {item?.namespace}

diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
@@ -1,24 +1,35 @@
 import React from "react";
-import { ManagedListWrapper, EmptyListWrapper } from "./sources.manage.styled";
+import {
+  ManagedListWrapper,
+  EmptyListWrapper,
+  ManagedContainer,
+} from "./sources.manage.styled";
 import Empty from "@/assets/images/empty-list.svg";
 import SourceManagedCard from "./sources.manage.card";
+import { ManagedSource } from "@/types/sources";
+import { KeyvalText } from "@/design.system";
+import { OVERVIEW } from "@/utils/constants";
 
-export function SourcesManagedList({ data = [1, 1, 1, 1] }) {
-  function renderDestinations() {
-    return data.map((source: any) => <SourceManagedCard />);
+interface SourcesManagedListProps {
+  data: ManagedSource[];
+}
+
+export function SourcesManagedList({ data = [] }: SourcesManagedListProps) {
+  function renderSources() {
+    return data.map((source: ManagedSource) => (
+      <SourceManagedCard item={source} />
+    ));
   }
 
-  return (
-    <>
-      <ManagedListWrapper>
-        {data?.length === 0 ? (
-          <EmptyListWrapper>
-            <Empty />
-          </EmptyListWrapper>
-        ) : (
-          renderDestinations()
-        )}
-      </ManagedListWrapper>
-    </>
+  return data?.length === 0 ? (
+    <EmptyListWrapper>
+      <Empty />
+    </EmptyListWrapper>
+  ) : (
+    <ManagedContainer>
+      <KeyvalText>{`${data.length} ${OVERVIEW.MENU.SOURCES}`}</KeyvalText>
+      <br />
+      <ManagedListWrapper>{renderSources()}</ManagedListWrapper>
+    </ManagedContainer>
   );
 }
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
@@ -12,10 +12,10 @@ export const CardWrapper = styled.div`
   align-items: center;
   flex-direction: column;
   gap: 10px;
-  cursor: pointer;
+  /* cursor: pointer;
   &:hover {
     background: var(--dark-mode-dark-1, #07111a81);
-  }
+  } */
 `;
 
 export const EmptyListWrapper = styled.div`
@@ -27,12 +27,17 @@ export const EmptyListWrapper = styled.div`
 `;
 
 export const ManagedListWrapper = styled.div`
-  width: 100%;
+  height: 80%;
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
+  padding: 0 36px 0 0;
   overflow-y: scroll;
+`;
+
+export const ManagedContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  margin-top: 120px;
   padding: 0px 36px;
-  padding-bottom: 50px;
-  margin-top: 88px;
 `;
diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx
@@ -3,5 +3,5 @@ import styled from "styled-components";
 export const SourcesContainerWrapper = styled.div`
   height: 100vh;
   width: 100%;
-  overflow-y: scroll;
+  overflow: hidden;
 `;
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -21,7 +21,7 @@ export function SourcesContainer() {
   return (
     <SourcesContainerWrapper>
       <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
-      <SourcesManagedList />
+      <SourcesManagedList data={sources} />
     </SourcesContainerWrapper>
   );
 }