@odigos/ui-kit 0.0.27 → 0.0.28

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [0.0.28](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.27...ui-kit-v0.0.28) (2025-05-19)
+
+
+### Bug Fixes
+
+* state of source selection ([#118](https://github.com/odigos-io/ui-kit/issues/118)) ([7b73ae3](https://github.com/odigos-io/ui-kit/commit/7b73ae34778d6576a9a3c6645a434ae2ec4a2674))
+* stream name input to include initial value, and validated as required ([#119](https://github.com/odigos-io/ui-kit/issues/119)) ([31a7f97](https://github.com/odigos-io/ui-kit/commit/31a7f9791def013cf1b99dcb36e043d6fa77021a))
+
 ## [0.0.27](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.26...ui-kit-v0.0.27) (2025-05-19)
 
 

package/lib/components/auto-complete-input/index.d.ts

@@ -16,6 +16,7 @@ interface AutocompleteInputProps extends InputHTMLAttributes<HTMLInputElement> {
     onTextChange?: (text: string) => void;
     style?: CSSProperties;
     disabled?: boolean;
+    errorMessage?: string;
 }
 declare const AutocompleteInput: FC<AutocompleteInputProps>;
 export { AutocompleteInput, type AutocompleteInputProps };

package/lib/components.js

@@ -1,6 +1,6 @@
-import { B as Button } from './index-QaNawEGJ.js';
-export { a as AutocompleteInput, b as Badge, a1 as CenterThis, C as Checkbox, c as Code, d as ConditionDetails, D as DataCard, f as DataCardFieldTypes, e as DataCardFields, g as DataTab, h as Divider, i as DocsButton, j as Drawer, l as DrawerFooter, k as DrawerHeader, m as Dropdown, E as ExtendArrow, F as FadeLoader, n as FieldError, o as FieldLabel, a0 as FlexColumn, $ as FlexRow, H as Header, I as IconButton, p as IconGroup, q as IconTitleBadge, r as IconWrapped, s as IconsNav, t as ImageControlled, u as Input, v as InputList, w as InputTable, x as InteractiveTable, K as KeyValueInputsList, M as Modal, a4 as ModalBody, y as MonitorsCheckboxes, z as MonitorsIcons, N as NavigationButtons, G as NoDataFound, J as NotificationNote, a3 as Overlay, S as ScrollX, L as SectionTitle, O as Segment, P as SelectionButton, Q as SkeletonLoader, R as Status, U as Stepper, a5 as TableContainer, a6 as TableTitleWrap, a7 as TableWrap, V as Text, W as TextArea, X as Toggle, T as ToggleCodeComponent, Y as Tooltip, Z as TraceLoader, a2 as VerticalScroll, _ as WarningModal } from './index-QaNawEGJ.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-DlCB8lqz.js';
+import { B as Button } from './index-CX75oR-h.js';
+export { a as AutocompleteInput, b as Badge, a1 as CenterThis, C as Checkbox, c as Code, d as ConditionDetails, D as DataCard, f as DataCardFieldTypes, e as DataCardFields, g as DataTab, h as Divider, i as DocsButton, j as Drawer, l as DrawerFooter, k as DrawerHeader, m as Dropdown, E as ExtendArrow, F as FadeLoader, n as FieldError, o as FieldLabel, a0 as FlexColumn, $ as FlexRow, H as Header, I as IconButton, p as IconGroup, q as IconTitleBadge, r as IconWrapped, s as IconsNav, t as ImageControlled, u as Input, v as InputList, w as InputTable, x as InteractiveTable, K as KeyValueInputsList, M as Modal, a4 as ModalBody, y as MonitorsCheckboxes, z as MonitorsIcons, N as NavigationButtons, G as NoDataFound, J as NotificationNote, a3 as Overlay, S as ScrollX, L as SectionTitle, O as Segment, P as SelectionButton, Q as SkeletonLoader, R as Status, U as Stepper, a5 as TableContainer, a6 as TableTitleWrap, a7 as TableWrap, V as Text, W as TextArea, X as Toggle, T as ToggleCodeComponent, Y as Tooltip, Z as TraceLoader, a2 as VerticalScroll, _ as WarningModal } from './index-CX75oR-h.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-8BSRffGz.js';
 import React, { Component, createElement, createContext } from 'react';
 import Theme from './theme.js';
 import 'styled-components';

package/lib/containers/data-stream-selection-form/index.d.ts

@@ -4,6 +4,7 @@ interface DataStreamSelectionFormProps {
     onClickSummary?: () => void;
 }
 interface DataStreamSelectionFormRef {
+    validateForm: () => boolean;
     getFormValues: () => {
         name: string;
     };

package/lib/containers.js

@@ -1,23 +1,23 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, memo, useContext, createContext, useCallback, useLayoutEffect, Fragment } from 'react';
 import styled, { css } from 'styled-components';
-import { D as DISPLAY_TITLES, A as ACTION_OPTIONS, M as MONITORS_OPTIONS, B as BUTTON_TEXTS, I as INSTRUMENTATION_RULE_OPTIONS, F as FORM_ALERTS } from './index-CTgLYGo-.js';
+import { D as DISPLAY_TITLES, A as ACTION_OPTIONS, M as MONITORS_OPTIONS, B as BUTTON_TEXTS, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-CTgLYGo-.js';
 import { ActionType, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, AddNodeTypes, EdgeTypes, FieldTypes, SignalType, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType } from './types.js';
-import { f as DataCardFieldTypes, o as FieldLabel, C as Checkbox, n as FieldError, u as Input, w as InputTable, K as KeyValueInputsList, v as InputList, V as Text, O as Segment, L as SectionTitle, i as DocsButton, y as MonitorsCheckboxes, W as TextArea, j as Drawer, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a4 as ModalBody, a as AutocompleteInput, h as Divider, R as Status, $ as FlexRow, Y as Tooltip, r as IconWrapped, z as MonitorsIcons, a5 as TableContainer, a6 as TableTitleWrap, q as IconTitleBadge, a7 as TableWrap, x as InteractiveTable, a1 as CenterThis, G as NoDataFound, a0 as FlexColumn, Z as TraceLoader, b as Badge, E as ExtendArrow, a2 as VerticalScroll, P as SelectionButton, B as Button, m as Dropdown, a8 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, A as AddButton$1, J as NotificationNote, U as Stepper, I as IconButton, e as DataCardFields, s as IconsNav, p as IconGroup } from './index-QaNawEGJ.js';
+import { f as DataCardFieldTypes, o as FieldLabel, C as Checkbox, n as FieldError, u as Input, w as InputTable, K as KeyValueInputsList, v as InputList, V as Text, O as Segment, L as SectionTitle, i as DocsButton, y as MonitorsCheckboxes, W as TextArea, j as Drawer, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a4 as ModalBody, a as AutocompleteInput, h as Divider, R as Status, $ as FlexRow, Y as Tooltip, r as IconWrapped, z as MonitorsIcons, a5 as TableContainer, a6 as TableTitleWrap, q as IconTitleBadge, a7 as TableWrap, x as InteractiveTable, a1 as CenterThis, G as NoDataFound, a0 as FlexColumn, Z as TraceLoader, b as Badge, E as ExtendArrow, a2 as VerticalScroll, P as SelectionButton, B as Button, m as Dropdown, a8 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, A as AddButton$1, J as NotificationNote, U as Stepper, I as IconButton, e as DataCardFields, s as IconsNav, p as IconGroup } from './index-CX75oR-h.js';
 import { h as usePendingStore, g as useNotificationStore, b as useDrawerStore, c as useEntityStore, f as useModalStore, d as useFilterStore, s as styleInject, i as useSelectedStore, e as useInstrumentStore, a as useDataStreamStore, k as getEntityId, j as useSetupStore, u as useDarkMode } from './index-DMXaEyAB.js';
 import Theme from './theme.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
 import { i as CheckCircledIcon, O as OdigosLogo } from './index-IKusBlIE.js';
 import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, N as NotificationIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-CamnKrev.js';
 import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-CFnxjzaW.js';
-import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-DAxuVELF.js';
-import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-BSKilkmZ.js';
+import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-CoaXePS_.js';
+import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, b as useGenericForm, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-BSKilkmZ.js';
 import { E as EditIcon } from './index-CWbxXTof.js';
 import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, f as CheckIcon, A as ArrowIcon, a as CopyIcon, g as CrossIcon } from './index-BJxaoI0G.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-DlCB8lqz.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-8BSRffGz.js';
 import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-CJs4RDHU.js';
 import { f as filterActions, i as getConditionsBooleans, n as getEntityLabel, m as getEntityIcon, v as sleep$1, p as getPlatformIcon, q as getPlatformLabel, h as formatBytes, k as getContainersIcons, r as getValueForRange, l as getDestinationIcon, u as mapExportedSignals, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, c as compareCondition, d as deepClone, o as getMetricForEntity, s as getWorkloadId, j as getContainersInstrumentedCount, t as isOverTime } from './index-BfatCMWq.js';
 import { createPortal } from 'react-dom';
-import { N as NoteBackToSummary, E as EditButton } from './index-KyiD2AtF.js';
+import { N as NoteBackToSummary, E as EditButton } from './index-R9xRto5r.js';
 import { D as DESTINATION_CATEGORIES } from './index-Dqief9td.js';
 import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-BRW_Nl-n.js';
 import './index-DGel4E-Z.js';
@@ -13999,19 +13999,30 @@ const DataFlowActionsMenu = ({ addEntity, onClickNewDataStream }) => {
 };
 
 const DataStreamSelectionForm = forwardRef(({ isModal, onClickSummary }, ref) => {
-    const { dataStreams } = useDataStreamStore();
-    const [nameInput, setNameInput] = useState('');
+    const { selectedStreamName, dataStreams } = useDataStreamStore();
+    const { formData, handleFormChange, formErrors, handleErrorChange } = useGenericForm({
+        name: selectedStreamName,
+    });
     useImperativeHandle(ref, () => ({
-        getFormValues: () => ({
-            name: nameInput,
-        }),
+        validateForm: () => {
+            let isValid = true;
+            if (!formData['name']) {
+                isValid = false;
+                handleErrorChange('name', FORM_ALERTS.FIELD_IS_REQUIRED);
+            }
+            else {
+                handleErrorChange('name', undefined);
+            }
+            return isValid;
+        },
+        getFormValues: () => formData,
     }));
     const dataStreamOptions = useMemo(() => dataStreams.map(({ name }) => ({ label: name })), [dataStreams]);
     return (React.createElement(ModalBody, { "$isNotModal": !isModal, "$minHeight": '70vh' },
         React.createElement(FlexColumn, { "$gap": 24 },
             onClickSummary && React.createElement(NoteBackToSummary, { onClick: onClickSummary }),
             React.createElement(SectionTitle, { title: DISPLAY_TITLES.NAME_YOUR_STREAM, description: DISPLAY_TITLES.STREAM_DESCRIPTION }),
-            React.createElement(AutocompleteInput, { placeholder: DISPLAY_TITLES.NAME_YOUR_STREAM_PLACEHOLDER, autoFocus: true, options: dataStreamOptions, defaultText: nameInput, onTextChange: setNameInput }))));
+            React.createElement(AutocompleteInput, { placeholder: DISPLAY_TITLES.NAME_YOUR_STREAM_PLACEHOLDER, required: true, autoFocus: true, options: dataStreamOptions, defaultText: formData['name'], onTextChange: (v) => handleFormChange('name', v), errorMessage: formErrors['name'] }))));
 });
 
 const buildMonitorsList = (exportedSignals) => Object.keys(exportedSignals)
@@ -15763,10 +15774,10 @@ const SearchWrapper = styled.div `
 `;
 const SourceSelectionForm = forwardRef(({ isModal, fetchSingleNamespace, onClickSummary }, ref) => {
     const formState = useSourceSelectionFormData({ fetchSingleNamespace });
-    const { recordedInitialSources, selectedSources, getApiSourcesPayload, getApiFutureAppsPayload, searchText, setSearchText, showSelectedOnly, setShowSelectedOnly } = formState;
+    const { availableSources, selectedSources, getApiSourcesPayload, getApiFutureAppsPayload, searchText, setSearchText, showSelectedOnly, setShowSelectedOnly } = formState;
     useImperativeHandle(ref, () => ({
         getFormValues: () => ({
-            initial: recordedInitialSources,
+            initial: availableSources,
             apps: getApiSourcesPayload(),
             futureApps: getApiFutureAppsPayload(),
         }),

package/lib/hooks/useSourceSelectionFormData.d.ts

@@ -6,7 +6,7 @@ interface UseSourceFormDataParams {
     fetchSingleNamespace: FetchSingleNamespace;
 }
 export interface UseSourceSelectionFormData {
-    recordedInitialSources: AvailableSourcesByNamespace;
+    availableSources: AvailableSourcesByNamespace;
     filteredNamespacesAndSources: AvailableSourcesByNamespace;
     getApiSourcesPayload: () => SourceSelectionFormData;
     getApiFutureAppsPayload: () => NamespaceSelectionFormData;

package/lib/hooks.js

@@ -1,4 +1,4 @@
-export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDestinationFormData, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-DAxuVELF.js';
+export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDestinationFormData, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-CoaXePS_.js';
 export { u as useContainerSize, a as useCopy, b as useGenericForm, c as useInstrumentationRuleFormData, d as useKeyDown, e as useOnClickOutside, f as useTimeAgo, g as useTransition } from './useTransition-BSKilkmZ.js';
 import './types.js';
 import 'react';

package/lib/{index-DlCB8lqz.js → index-8BSRffGz.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { _ as WarningModal } from './index-QaNawEGJ.js';
+import { _ as WarningModal } from './index-CX75oR-h.js';
 import { StatusType, EntityTypes } from './types.js';
 import './index-DMXaEyAB.js';
 import 'styled-components';

package/lib/{index-QaNawEGJ.js → index-CX75oR-h.js}

@@ -26,6 +26,18 @@ const Text = ({ children, color, size, weight, align, family, opacity, decoratio
     return (React.createElement(TextWrapper$2, { "$color": color, "$size": size, "$weight": weight, "$align": align, "$family": family, "$opacity": opacity, "$decoration": decoration, ...props }, children));
 };
 
+const ErrorWrapper = styled.div `
+  padding: 4px 0 0 0;
+`;
+const ErrorMessage = styled(Text) `
+  font-size: 12px;
+  color: ${({ theme }) => theme.text.error};
+`;
+const FieldError = ({ children }) => {
+    return (React.createElement(ErrorWrapper, null,
+        React.createElement(ErrorMessage, null, children)));
+};
+
 const AutocompleteContainer = styled.div `
   position: relative;
   width: 100%;
@@ -39,13 +51,13 @@ const InputWrapper$2 = styled.div `
   padding-left: 12px;
   transition: border-color 0.3s;
   border-radius: 32px;
-  border: 1px solid ${({ theme }) => theme.colors.border};
+  border: 1px solid ${({ theme, $hasError }) => ($hasError ? theme.text.error : theme.colors.border)};
 
   &:hover {
-    border-color: ${({ theme }) => theme.colors.secondary};
+    border-color: ${({ theme, $hasError }) => ($hasError ? theme.text.error_secondary : theme.colors.secondary)};
   }
   &:focus-within {
-    border-color: ${({ theme }) => theme.colors.secondary};
+    border-color: ${({ theme, $hasError }) => ($hasError ? theme.text.error_secondary : theme.colors.secondary)};
   }
 `;
 const StyledInput$1 = styled.input `
@@ -146,7 +158,7 @@ const filterOptions = (optionsList, input) => {
         return acc;
     }, []);
 };
-const AutocompleteInput = ({ placeholder = 'Type to search...', options, selectedOption, onOptionSelect, defaultText, onTextChange, style, disabled, ...props }) => {
+const AutocompleteInput = ({ placeholder = 'Type to search...', options, selectedOption, onOptionSelect, defaultText, onTextChange, style, disabled, errorMessage, ...props }) => {
     const [query, setQuery] = useState(selectedOption?.label || defaultText || '');
     const [filteredOptions, setFilteredOptions] = useState(filterOptions(options, query));
     const [showOptions, setShowOptions] = useState(false);
@@ -178,10 +190,11 @@ const AutocompleteInput = ({ placeholder = 'Type to search...', options, selecte
         return;
     };
     return (React.createElement(AutocompleteContainer, { style: style },
-        React.createElement(InputWrapper$2, null,
+        React.createElement(InputWrapper$2, { "$hasError": !!errorMessage },
             Icon && React.createElement(Icon, null),
             React.createElement(StyledInput$1, { type: 'text', value: query, placeholder: placeholder, onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, onBlur: () => !disabled && setShowOptions(false), onFocus: () => !disabled && setShowOptions(true), ...props })),
-        showOptions && filteredOptions.length ? (React.createElement(OptionsList, null, filteredOptions.map((option) => (React.createElement(OptionItem, { key: option.type || option.label, option: option, onClick: handleOptionClick }))))) : null));
+        showOptions && filteredOptions.length ? (React.createElement(OptionsList, null, filteredOptions.map((option) => (React.createElement(OptionItem, { key: option.type || option.label, option: option, onClick: handleOptionClick }))))) : null,
+        errorMessage && React.createElement(FieldError, null, errorMessage)));
 };
 const OptionItem = ({ option, renderIcon = true, onClick }) => {
     const hasSubItems = !!option.items && option.items.length > 0;
@@ -455,18 +468,6 @@ const Popup = forwardRef(({ top, left, children }, ref) => {
     return ReactDOM.createPortal(React.createElement(PopupContainer, { ref: ref, "$top": top, "$left": left }, children), document.body);
 });
 
-const ErrorWrapper = styled.div `
-  padding: 4px 0 0 0;
-`;
-const ErrorMessage = styled(Text) `
-  font-size: 12px;
-  color: ${({ theme }) => theme.text.error};
-`;
-const FieldError = ({ children }) => {
-    return (React.createElement(ErrorWrapper, null,
-        React.createElement(ErrorMessage, null, children)));
-};
-
 const Container$t = styled.div `
   display: flex;
   align-items: center;

package/lib/{index-KyiD2AtF.js → index-R9xRto5r.js}

@@ -2,7 +2,7 @@ import React from 'react';
 import Theme from './theme.js';
 import { E as EditIcon } from './index-CWbxXTof.js';
 import { B as BUTTON_TEXTS, D as DISPLAY_TITLES } from './index-CTgLYGo-.js';
-import { B as Button, V as Text, J as NotificationNote } from './index-QaNawEGJ.js';
+import { B as Button, V as Text, J as NotificationNote } from './index-CX75oR-h.js';
 import { StatusType } from './types.js';
 import './index-DMXaEyAB.js';
 import 'styled-components';

package/lib/snippets.js

@@ -1,5 +1,5 @@
-export { A as AddButton } from './index-QaNawEGJ.js';
-export { E as EditButton, N as NoteBackToSummary } from './index-KyiD2AtF.js';
+export { A as AddButton } from './index-CX75oR-h.js';
+export { E as EditButton, N as NoteBackToSummary } from './index-R9xRto5r.js';
 import 'react';
 import './theme.js';
 import './index-DMXaEyAB.js';

package/lib/{useSourceSelectionFormData-DAxuVELF.js → useSourceSelectionFormData-CoaXePS_.js}

@@ -373,10 +373,12 @@ const useSourceFormData = () => {
 };
 
 const mapSourceToAvailableSource = (source, selectedStreamName, selectAll) => {
+    const sourceIsInCurrentStream = source.dataStreamNames?.includes(selectedStreamName) || source.currentStreamName === selectedStreamName;
+    const selected = typeof selectAll === 'boolean' ? selectAll : sourceIsInCurrentStream ? source.selected : false;
     return {
         name: source.name,
         kind: source.kind,
-        selected: typeof selectAll === 'boolean' ? selectAll : source.selected && source.dataStreamNames?.includes(selectedStreamName) ? source.selected : false,
+        selected,
         numberOfInstances: source.numberOfInstances,
     };
 };
@@ -386,18 +388,37 @@ const mapSourceToSelectedSource = (source, selectedStreamName, selectAll) => {
         currentStreamName: selectedStreamName,
     };
 };
+const mergeAvailableAndSelectedSources = (available, selected, currentStreamName) => {
+    const payload = {};
+    Object.entries(available).forEach(([namespace, sources]) => {
+        payload[namespace] = sources.map((s) => mapSourceToSelectedSource(s, currentStreamName));
+    });
+    Object.entries(selected).forEach(([namespace, sources]) => {
+        sources.forEach((s) => {
+            const foundIdx = payload[namespace].findIndex((src) => src.name === s.name && src.kind === s.kind);
+            const mapped = mapSourceToSelectedSource(s, currentStreamName);
+            if (foundIdx !== -1) {
+                payload[namespace][foundIdx] = mapped;
+            }
+            else {
+                payload[namespace].push(mapped);
+            }
+        });
+    });
+    return payload;
+};
 const useSourceSelectionFormData = (params) => {
     const { fetchSingleNamespace } = params || {};
     const { namespaces } = useEntityStore();
     const { selectedStreamName } = useDataStreamStore();
     // only for "onboarding" - get unsaved values and set to state
     // (this is to persist the values when user navigates back to this page)
-    const { configuredSources, configuredFutureApps, availableSources } = useSetupStore();
+    const { configuredSources, configuredFutureApps, availableSources: availableSourcesFromStore } = useSetupStore();
     // Keeps intial values fetched from API, so we can later filter the user-specific-selections, therebey minimizing the amount of data sent to the API on "persist sources".
-    const [recordedInitialSources, setRecordedInitialSources] = useState(availableSources);
+    const [availableSources, setRecordedInitialSources] = useState(availableSourcesFromStore);
     const [selectedNamespace, setSelectedNamespace] = useState('');
-    const [selectedSources, setSelectedSources] = useState(configuredSources);
     const [selectedFutureApps, setSelectedFutureApps] = useState(configuredFutureApps);
+    const [selectedSources, setSelectedSources] = useState(mergeAvailableAndSelectedSources(availableSourcesFromStore, configuredSources, selectedStreamName));
     const fetchAndSetThisNamespace = (ns, selectAll) => {
         fetchSingleNamespace?.({ variables: { namespaceName: ns } }).then(({ data }) => {
             const { name, sources = [] } = data?.computePlatform?.k8sActualNamespace || {};
@@ -480,7 +501,7 @@ const useSourceSelectionFormData = (params) => {
         const payload = {};
         Object.entries(selectedSources).forEach(([namespace, sources]) => {
             sources.forEach((source) => {
-                const foundInitial = recordedInitialSources[namespace]?.find((initialSource) => initialSource.name === source.name && initialSource.kind === source.kind);
+                const foundInitial = availableSources[namespace]?.find((initialSource) => initialSource.name === source.name && initialSource.kind === source.kind);
                 if (foundInitial?.selected !== source.selected) {
                     if (!payload[namespace])
                         payload[namespace] = [];
@@ -502,7 +523,7 @@ const useSourceSelectionFormData = (params) => {
         return payload;
     };
     return {
-        recordedInitialSources,
+        availableSources,
         filteredNamespacesAndSources,
         getApiSourcesPayload,
         getApiFutureAppsPayload,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "author": "Odigos",
   "repository": {
     "type": "git",