[TASK-736] fix: select sources from setup override data (#952)

odigos-io · Feb 5, 2024 · fe5c59c · fe5c59c
1 parent 3b72dd1
commit fe5c59c
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 77 deletions.
diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
@@ -11,6 +11,7 @@ const LAYOUT_STYLE: React.CSSProperties = {
   scrollbarWidth: 'none',
   width: '100vw',
   height: '100vh',
+  backgroundColor: theme.colors.dark,
 };
 
 export default function RootLayout({

diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx
@@ -1,24 +1,41 @@
 'use client';
-import { useQuery } from 'react-query';
 import { useEffect } from 'react';
-import { getConfig } from '@/services/config';
+import { useQuery } from 'react-query';
 import { useRouter } from 'next/navigation';
+import { getDestinations } from '@/services';
+import { getConfig } from '@/services/config';
+import { Loader } from '@keyval-dev/design-system';
 import { ROUTES, CONFIG, QUERIES } from '@/utils/constants';
 
 export default function App() {
   const router = useRouter();
-  const { data } = useQuery([QUERIES.API_CONFIG], getConfig);
-
+  const { data, isLoading: isConfigLoading } = useQuery(
+    [QUERIES.API_CONFIG],
+    getConfig
+  );
+  const { isLoading: isDestinationLoading, data: destinationList } = useQuery(
+    [QUERIES.API_DESTINATIONS],
+    getDestinations
+  );
   useEffect(() => {
-    data && renderCurrentPage();
-  }, [data]);
+    if (isConfigLoading || isDestinationLoading) return;
+
+    renderCurrentPage();
+  }, [data, destinationList]);
 
   function renderCurrentPage() {
     const { installation } = data;
+
+    if (destinationList.length > 0) {
+      router.push(ROUTES.OVERVIEW);
+      return;
+    }
+
     const state =
       installation === CONFIG.APPS_SELECTED
         ? `?state=${CONFIG.APPS_SELECTED}`
         : '';
+
     switch (installation) {
       case CONFIG.NEW:
       case CONFIG.APPS_SELECTED:
@@ -28,4 +45,6 @@ export default function App() {
         router.push(ROUTES.OVERVIEW);
     }
   }
+
+  return <Loader />;
 }
diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
@@ -1,49 +1,22 @@
 import React from 'react';
 import theme from '@/styles/palette';
-import { setNamespaces } from '@/services';
-import { SelectedSources } from '@/types/sources';
-import { useNotification, useSectionData } from '@/hooks';
 import { KeyvalButton, KeyvalText } from '@/design.system';
 import { NOTIFICATION, OVERVIEW, SETUP } from '@/utils/constants';
+import { useNotification, useSectionData, useSources } from '@/hooks';
 import { SourcesSectionWrapper, ButtonWrapper } from './sources.styled';
 import { SourcesSection } from '@/containers/setup/sources/sources.section';
-import { useMutation } from 'react-query';
 
-export function NewSourcesList({ onSuccess, sources }) {
+export function NewSourcesList({ onSuccess }) {
   const { sectionData, setSectionData, totalSelected } = useSectionData({});
-  const { mutate } = useMutation((body: SelectedSources) =>
-    setNamespaces(body)
-  );
-  const { show, Notification } = useNotification();
-
-  function updateSectionDataWithSources() {
-    const sourceNamesSet = new Set(
-      sources.map((source: SelectedSources) => source.name)
-    );
-    const updatedSectionData: SelectedSources = {};
+  const { upsertSources } = useSources();
 
-    for (const key in sectionData) {
-      const { objects, ...rest } = sectionData[key];
-      const updatedObjects = objects.map((item) => ({
-        ...item,
-        selected: item?.selected || sourceNamesSet.has(item.name),
-      }));
-
-      updatedSectionData[key] = {
-        ...rest,
-        objects: updatedObjects,
-      };
-    }
+  const { show, Notification } = useNotification();
 
-    mutate(updatedSectionData, {
-      onSuccess,
-      onError: ({ response }) => {
-        const message = response?.data?.message || SETUP.ERROR;
-        show({
-          type: NOTIFICATION.ERROR,
-          message,
-        });
-      },
+  function onError({ response }) {
+    const message = response?.data?.message || SETUP.ERROR;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
     });
   }
 
@@ -53,7 +26,7 @@ export function NewSourcesList({ onSuccess, sources }) {
         <KeyvalText>{`${totalSelected} ${SETUP.SELECTED}`}</KeyvalText>
         <KeyvalButton
           disabled={totalSelected === 0}
-          onClick={updateSectionDataWithSources}
+          onClick={() => upsertSources({ sectionData, onSuccess, onError })}
           style={{ width: 110 }}
         >
           <KeyvalText weight={600} color={theme.text.dark_button}>

diff --git a/frontend/webapp/containers/overview/sources/sources.list.container.tsx b/frontend/webapp/containers/overview/sources/sources.list.container.tsx
@@ -25,7 +25,7 @@ export function SourcesListContainer() {
         title={OVERVIEW.MENU.SOURCES}
         onBackClick={() => router.back()}
       />
-      <NewSourcesList onSuccess={onNewSourceSuccess} sources={sources} />
+      <NewSourcesList onSuccess={onNewSourceSuccess} />
       <Notification />
     </>
   );

diff --git a/frontend/webapp/containers/setup/setup.header/setup.header.tsx b/frontend/webapp/containers/setup/setup.header/setup.header.tsx
@@ -81,11 +81,7 @@ export function SetupHeader({
             </TotalSelectedWrapper>
           )}
         {currentStep?.id === SETUP.STEPS.ID.CHOOSE_SOURCE && (
-          <KeyvalButton
-            disabled={totalSelected === 0}
-            onClick={onNextClick}
-            style={{ gap: 10, width: 120 }}
-          >
+          <KeyvalButton onClick={onNextClick} style={{ gap: 10, width: 120 }}>
             <KeyvalText size={20} weight={600} color={theme.text.dark_button}>
               {SETUP.NEXT}
             </KeyvalText>

diff --git a/frontend/webapp/containers/setup/setup.section/setup.section.tsx b/frontend/webapp/containers/setup/setup.section/setup.section.tsx
@@ -1,24 +1,21 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { STEPS, Step } from './utils';
+import { WhiteArrow } from '@/assets/icons/app';
+import { useSearchParams } from 'next/navigation';
+import { KeyvalText, Steps } from '@/design.system';
+import { SetupHeader } from '../setup.header/setup.header';
+import { SourcesSection } from '../sources/sources.section';
+import { CONFIG, NOTIFICATION, SETUP } from '@/utils/constants';
+import { ConnectionSection } from '../connection/connection.section';
+import { useSectionData, useNotification, useSources } from '@/hooks';
+import { DestinationSection } from '../destination/destination.section';
+
 import {
   SetupContentWrapper,
   SetupSectionContainer,
   StepListWrapper,
   BackButtonWrapper,
 } from './setup.section.styled';
-import { SetupHeader } from '../setup.header/setup.header';
-import { DestinationSection } from '../destination/destination.section';
-import { ConnectionSection } from '../connection/connection.section';
-import { SourcesSection } from '../sources/sources.section';
-import { KeyvalText, Steps } from '@/design.system';
-import { CONFIG, NOTIFICATION, SETUP } from '@/utils/constants';
-import { useSectionData, useNotification } from '@/hooks';
-import { STEPS, Step } from './utils';
-import { setNamespaces } from '@/services';
-import { useSearchParams } from 'next/navigation';
-import { useMutation } from 'react-query';
-import { SelectedSources } from '@/types/sources';
-import { WhiteArrow } from '@/assets/icons/app';
-
 const STATE = 'state';
 
 const sectionComponents = {
@@ -29,11 +26,10 @@ const sectionComponents = {
 
 export function SetupSection() {
   const [currentStep, setCurrentStep] = useState<Step>(STEPS[0]);
-  const { sectionData, setSectionData, totalSelected } = useSectionData({});
-  const { mutate } = useMutation((body: SelectedSources) =>
-    setNamespaces(body)
-  );
+
+  const { upsertSources } = useSources();
   const { show, Notification } = useNotification();
+  const { sectionData, setSectionData, totalSelected } = useSectionData({});
 
   const searchParams = useSearchParams();
   const search = searchParams.get(STATE);
@@ -78,7 +74,9 @@ export function SetupSection() {
 
     if (currentStep?.id === SETUP.STEPS.ID.CHOOSE_SOURCE) {
       previousSourceState.current = sectionData;
-      mutate(sectionData, {
+
+      upsertSources({
+        sectionData,
         onSuccess: () => {
           setCurrentStep(nextStep);
           setSectionData({});

diff --git a/frontend/webapp/containers/setup/sources/sources.section.tsx b/frontend/webapp/containers/setup/sources/sources.section.tsx
@@ -7,11 +7,6 @@ import { NOTIFICATION, QUERIES } from '@/utils/constants';
 import { KeyvalLoader } from '@/design.system';
 import { useNotification } from '@/hooks';
 
-const DEFAULT_CONFIG = {
-  selected_all: false,
-  future_selected: false,
-};
-
 const DEFAULT = 'default';
 
 export function SourcesSection({ sectionData, setSectionData }: any) {
@@ -55,6 +50,7 @@ export function SourcesSection({ sectionData, setSectionData }: any) {
 
   const sourceData = useMemo(() => {
     let namespace = sectionData[currentNamespace?.name];
+
     //filter by search query
     namespace = searchFilter
       ? namespace?.objects.filter((item: any) =>

diff --git a/frontend/webapp/hooks/index.tsx b/frontend/webapp/hooks/index.tsx
@@ -1,4 +1,5 @@
-export { useSectionData } from "./useSectionData";
-export { useNotification } from "./useNotification";
-export { useOnClickOutside } from "./useOnClickOutside";
-export { useKeyDown } from "./useKeyDown";
+export { useSectionData } from './useSectionData';
+export { useNotification } from './useNotification';
+export { useOnClickOutside } from './useOnClickOutside';
+export { useKeyDown } from './useKeyDown';
+export * from './sources';
diff --git a/frontend/webapp/hooks/sources/index.ts b/frontend/webapp/hooks/sources/index.ts
@@ -0,0 +1 @@
+export * from './useSources';
diff --git a/frontend/webapp/hooks/sources/useSources.ts b/frontend/webapp/hooks/sources/useSources.ts
@@ -0,0 +1,39 @@
+import { QUERIES } from '@/utils/constants';
+import { SelectedSources } from '@/types/sources';
+import { useMutation, useQuery } from 'react-query';
+import { getSources, setNamespaces } from '@/services';
+
+export function useSources() {
+  const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources);
+
+  const { mutate } = useMutation((body: SelectedSources) =>
+    setNamespaces(body)
+  );
+
+  function upsertSources({ sectionData, onSuccess, onError }) {
+    const sourceNamesSet = new Set(
+      sources.map((source: SelectedSources) => source.name)
+    );
+    const updatedSectionData: SelectedSources = {};
+
+    for (const key in sectionData) {
+      const { objects, ...rest } = sectionData[key];
+      const updatedObjects = objects.map((item) => ({
+        ...item,
+        selected: item?.selected || sourceNamesSet.has(item.name),
+      }));
+
+      updatedSectionData[key] = {
+        ...rest,
+        objects: updatedObjects,
+      };
+    }
+
+    mutate(updatedSectionData, {
+      onSuccess,
+      onError,
+    });
+  }
+
+  return { upsertSources };
+}