[TASK-844] chore(frontend): bugs party (#1129)

this pr contains bug fixes and UX improvements
odigos-io · Apr 24, 2024 · a7576c3 · a7576c3
1 parent e73578b
commit a7576c3
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 16 deletions.
diff --git a/frontend/webapp/components/lists/empty.list/empty.list.tsx b/frontend/webapp/components/lists/empty.list/empty.list.tsx
@@ -15,6 +15,7 @@ const EmptyListWrapper = styled.div`
  width: 100%;
  margin-top: 130px;
  display: flex;
+ gap: 6px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
@@ -26,9 +27,7 @@ export function EmptyList({ title, btnTitle, btnAction }: EmptyListProps) {
  <Empty />
  {title && (
  <>
- <br />
  <KeyvalText size={14}>{title}</KeyvalText>
- <br />
  </>
  )}
  {btnAction && (

diff --git a/frontend/webapp/containers/overview/destinations/managed/index.tsx b/frontend/webapp/containers/overview/destinations/managed/index.tsx
@@ -55,8 +55,8 @@ export function DestinationContainer() {
  <Container>
  {!destinationList?.length ? (
  <EmptyList
- title={OVERVIEW.EMPTY_ACTION}
- btnTitle={OVERVIEW.ADD_NEW_ACTION}
+ title={OVERVIEW.EMPTY_DESTINATION}
+ btnTitle={OVERVIEW.ADD_NEW_DESTINATION}
  btnAction={handleAddDestination}
  />
  ) : (

diff --git a/frontend/webapp/containers/overview/overview/data.flow/index.tsx b/frontend/webapp/containers/overview/overview/data.flow/index.tsx
@@ -1,5 +1,6 @@
 'use client';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
 import { OverviewDataFlowWrapper } from './styled';
 import { KeyvalDataFlow, KeyvalLoader } from '@/design.system';
 import { useActions, useDestinations, useSources } from '@/hooks';
@@ -24,20 +25,25 @@ interface FlowEdge {
  data?: any;
 }
 
+const POLL_DATA = 'poll';
+const POLL_INTERVAL = 2000; // Interval in milliseconds between polls
+const MAX_ATTEMPTS = 5; // Maximum number of polling attempts
+
 export function DataFlowContainer() {
  const [nodes, setNodes] = useState<FlowNode[]>();
  const [edges, setEdges] = useState<FlowEdge[]>();
+ const [pollingAttempts, setPollingAttempts] = useState(0);
 
- const { sources } = useSources();
  const { actions } = useActions();
- const { destinationList } = useDestinations();
+ const { sources, refetchSources } = useSources();
+ const { destinationList, refetchDestinations } = useDestinations();
 
+ const useSearch = useSearchParams();
+ const intervalId = useRef<NodeJS.Timer>();
  useEffect(() => {
  if (!sources || !destinationList || !actions) return;
 
- const filteredActions = actions.filter(
- (action) => action.spec.disabled !== true
- );
+ const filteredActions = actions.filter((action) => !action.spec.disabled);
 
  const { nodes, edges } = buildFlowNodesAndEdges(
  sources,
@@ -48,6 +54,28 @@ export function DataFlowContainer() {
  setEdges(edges);
  }, [actions, destinationList, sources]);
 
+ useEffect(() => {
+ const pullData = useSearch.get(POLL_DATA);
+ if (pullData) {
+ intervalId.current = setInterval(() => {
+ Promise.all([refetchSources(), refetchDestinations()])
+ .then(() => {})
+ .catch(console.error);
+
+ setPollingAttempts((prev) => prev + 1);
+ }, POLL_INTERVAL);
+
+ return () => clearInterval(intervalId.current);
+ }
+ }, [refetchDestinations, refetchSources, pollingAttempts, useSearch]);
+
+ useEffect(() => {
+ if (pollingAttempts >= MAX_ATTEMPTS) {
+ clearInterval(intervalId.current);
+ return;
+ }
+ }, [pollingAttempts]);
+
  if (!nodes || !edges) {
  return <KeyvalLoader />;
  }

diff --git a/frontend/webapp/containers/setup/sources/sources.section.styled.tsx b/frontend/webapp/containers/setup/sources/sources.section.styled.tsx
@@ -8,4 +8,5 @@ export const SectionContainerWrapper = styled.div`
  max-height: 100%;
  padding: 24px 32px;
  overflow: scroll;
+ overflow-x: hidden;
 `;
diff --git a/frontend/webapp/hooks/destinations/useDestinations.ts b/frontend/webapp/hooks/destinations/useDestinations.ts
@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react';
 import { getDestinations, getDestinationsTypes } from '@/services';
 
 export function useDestinations() {
- const { isLoading, data, isError, error } = useQuery(
+ const { isLoading, data } = useQuery(
  [QUERIES.API_DESTINATION_TYPES],
  getDestinationsTypes
  );

diff --git a/frontend/webapp/hooks/setup/useConnect.ts b/frontend/webapp/hooks/setup/useConnect.ts
@@ -32,7 +32,7 @@ export function useConnect() {
  });
 
  await mutateAsync(body, {
- onSuccess: () => router.push(ROUTES.OVERVIEW),
+ onSuccess: () => router.push(`${ROUTES.OVERVIEW}?poll=true`),
  onError: (error) => handleError(error),
  });
  } catch (error) {

diff --git a/frontend/webapp/hooks/sources/useSources.ts b/frontend/webapp/hooks/sources/useSources.ts
@@ -13,10 +13,11 @@ export function useSources() {
  const [instrumentedNamespaces, setInstrumentedNamespaces] = useState<
  Namespace[]
  >([]);
- const { data: sources, isLoading } = useQuery<ManagedSource[]>(
- [QUERIES.API_SOURCES],
- getSources
- );
+ const {
+ data: sources,
+ isLoading,
+ refetch: refetchSources,
+ } = useQuery<ManagedSource[]>([QUERIES.API_SOURCES], getSources);
 
  const { data: namespaces } = useQuery<{ namespaces: Namespace[] }>(
  [QUERIES.API_NAMESPACES],
@@ -118,6 +119,7 @@ export function useSources() {
 
  return {
  upsertSources,
+ refetchSources,
  sources: sortedSources || [],
  isLoading,
  sortSources,