@odigos/ui-kit 0.0.26 → 0.0.28

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # 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)
+
+
+### Bug Fixes
+
+* checkbox for already configured destinations ([#117](https://github.com/odigos-io/ui-kit/issues/117)) ([1ec9ee7](https://github.com/odigos-io/ui-kit/commit/1ec9ee7b10c3fcc5ab258b5e6fdf5c0ff7b53af8))
+* remove dest in setup ([#116](https://github.com/odigos-io/ui-kit/issues/116)) ([2c346c0](https://github.com/odigos-io/ui-kit/commit/2c346c02984a90bbf974cc8adb95b124e66861e8))
+
 ## [0.0.26](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.25...ui-kit-v0.0.26) (2025-05-15)
 
 

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,19 +1,19 @@
-import { B as Button } from './index-C_LWKMnO.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-C_LWKMnO.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-ByO2rgKy.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';
 import './index-BJxaoI0G.js';
 import './types.js';
 import './index-BZS1ijMm.js';
-import './index-B6FywnIf.js';
+import './index-CTgLYGo-.js';
 import './index-CFnxjzaW.js';
 import './index-DGel4E-Z.js';
 import './index-DMXaEyAB.js';
 import './index-CJs4RDHU.js';
 import './index-IKusBlIE.js';
-import './useTransition-BPxqZqXu.js';
+import './useTransition-BSKilkmZ.js';
 import 'react-dom';
 
 const ErrorBoundaryContext = createContext(null);

package/lib/constants/strings/index.d.ts

@@ -79,6 +79,7 @@ export declare const BUTTON_TEXTS: {
     ADD: string;
     ADD_NEW: string;
     NEW: string;
+    SELECT: string;
     CREATE: string;
     UPDATE: string;
     EDIT: string;

package/lib/constants.js

@@ -1,4 +1,4 @@
-export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, D as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, M as MONITORS_OPTIONS } from './index-B6FywnIf.js';
+export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, D as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, M as MONITORS_OPTIONS } from './index-CTgLYGo-.js';
 export { D as DESTINATION_CATEGORIES } from './index-Dqief9td.js';
 import './types.js';
 import './index-CFnxjzaW.js';

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-B6FywnIf.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-C_LWKMnO.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-plxXIM0Q.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-BPxqZqXu.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-ByO2rgKy.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-CWufhl9G.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)
@@ -14325,19 +14336,22 @@ const ListsWrapper = styled.div `
   gap: 12px;
 `;
 const DestinationsList = ({ items, onSelectOption, onSelectConfigured }) => {
+    const { configuredDestinationsUpdateOnly } = useSetupStore();
     return items.map((category) => {
         const isAlreadyExisting = category.name === DESTINATION_CATEGORIES['EXISTS']['TITLE'];
         return (React.createElement(ListsWrapper, { key: `category-${category.name}` },
             React.createElement(SectionTitle, { size: 'small', icon: category.icon, title: capitalizeFirstLetter(category.name), description: category.description }),
             category.items.map((item) => {
+                // Following replaceAll() is to create a "legal" data-id (no spaces) for Cypress testing
+                const key = `select-${category.name.replaceAll(' ', '')}-destination-${item.type}`;
+                const isChecked = item.selected || configuredDestinationsUpdateOnly.some((dest) => dest.id === item.id);
+                const monitors = Object.keys(item.supportedSignals).filter((signal) => item.supportedSignals[signal].supported);
+                const onClick = isAlreadyExisting ? () => onSelectConfigured(item.id) : () => onSelectOption(item);
                 const { icon, iconSrc } = getDestinationIcon(item.type);
-                return (React.createElement(DataTab, { key: `select-${category.name}-destination-${item.type}`, "data-id": `select-${category.name}-destination-${item.type}`, title: item.displayName, hoverText: 'SELECT', onClick: () => (isAlreadyExisting ? onSelectConfigured(item.id) : onSelectOption(item)), iconProps: { icon, iconSrc }, checkboxProps: {
+                return (React.createElement(DataTab, { key: key, "data-id": key, title: item.displayName, hoverText: BUTTON_TEXTS.SELECT, onClick: onClick, iconProps: { icon, iconSrc }, visualProps: { monitors, monitorsWithLabels: true }, checkboxProps: {
                         withCheckbox: isAlreadyExisting,
-                        isChecked: item.selected,
+                        isChecked,
                         onCheckboxChange: () => onSelectConfigured(item.id),
-                    }, visualProps: {
-                        monitors: Object.keys(item.supportedSignals).filter((signal) => item.supportedSignals[signal].supported),
-                        monitorsWithLabels: true,
                     } }));
             })));
     });
@@ -14480,7 +14494,7 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
             });
         }
         return {
-            id: alreadyConfigDest?.id || formData.type,
+            id: alreadyConfigDest?.id || '',
             name: alreadyConfigDest?.name || formData.name,
             dataStreamNames: alreadyConfigDest?.dataStreamNames || [],
             conditions: alreadyConfigDest?.conditions || [],
@@ -14589,9 +14603,9 @@ const DestinationList = ({ withDelete }) => {
     return (React.createElement(Container$7, null, configuredDestinations.concat(configuredDestinationsUpdateOnly).map((dest, idx) => (React.createElement(ListItem, { key: `configured-destination-${dest.destinationType.type}-${idx}`, "data-id": `configured-destination-${dest.destinationType.type}`, item: dest, isLastItem: configuredDestinations.length + configuredDestinationsUpdateOnly.length === 1, withDelete: withDelete })))));
 };
 const ListItem = ({ item, isLastItem, withDelete }) => {
-    const { removeConfiguredDestination } = useSetupStore();
     const [deleteWarning, setDeleteWarning] = useState(false);
     const { icon, iconSrc } = getDestinationIcon(item.destinationType.type);
+    const { removeConfiguredDestination, removeConfiguredDestinationUpdateOnly } = useSetupStore();
     const mappedFields = useMemo(() => Object.entries(safeJsonParse(item.fields, {})).map(([k, v]) => ({ title: k, value: v })) || [], [item.fields]);
     return (React.createElement(React.Fragment, null,
         React.createElement(DataTab, { title: item.destinationType.displayName || item.name, subTitle: item.destinationType.type, iconProps: { icon, iconSrc }, visualProps: {
@@ -14604,7 +14618,14 @@ const ListItem = ({ item, isLastItem, withDelete }) => {
                 ? () => (React.createElement(IconButton, { onClick: () => setDeleteWarning(true) },
                     React.createElement(TrashIcon, null)))
                 : undefined }),
-        withDelete && (React.createElement(DeleteWarning, { isOpen: deleteWarning, name: item.destinationType.displayName || item.name, type: EntityTypes.Destination, isLastItem: isLastItem, onApprove: () => removeConfiguredDestination(item), onDeny: () => setDeleteWarning(false) }))));
+        withDelete && (React.createElement(DeleteWarning, { isOpen: deleteWarning, name: item.destinationType.displayName || item.name, type: EntityTypes.Destination, isLastItem: isLastItem, onApprove: () => {
+                if (item.id) {
+                    removeConfiguredDestinationUpdateOnly(item);
+                }
+                else {
+                    removeConfiguredDestination(item);
+                }
+            }, onDeny: () => setDeleteWarning(false) }))));
 };
 
 const LargeAndWideAddButton = styled(Button) `
@@ -15753,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,11 +1,11 @@
-export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDestinationFormData, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-plxXIM0Q.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-BPxqZqXu.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';
 import './index-DMXaEyAB.js';
 import 'styled-components';
 import './index-BZS1ijMm.js';
-import './index-B6FywnIf.js';
+import './index-CTgLYGo-.js';
 import './index-CFnxjzaW.js';
 import './index-DGel4E-Z.js';
 import './theme.js';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { _ as WarningModal } from './index-C_LWKMnO.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-B6FywnIf.js → index-CTgLYGo-.js}

@@ -206,6 +206,7 @@ const BUTTON_TEXTS = {
     ADD: 'Add',
     ADD_NEW: 'Add New',
     NEW: 'New',
+    SELECT: 'Select',
     CREATE: 'Create',
     UPDATE: 'Update',
     EDIT: 'Edit',

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

@@ -4,10 +4,10 @@ import styled, { css } from 'styled-components';
 import { M as MinusIcon, f as CheckIcon, L as ListIcon, C as CodeIcon, E as ExtendArrowIcon, c as SortArrowsIcon, a as CopyIcon, b as NotebookIcon, X as XIcon, d as EyeClosedIcon, e as EyeOpenIcon, N as NoDataIcon, g as CrossIcon, S as SearchIcon, P as PlusIcon, T as TrashIcon, A as ArrowIcon } from './index-BJxaoI0G.js';
 import { StatusType, OtherStatus, SortDirection, ProgrammingLanguages } from './types.js';
 import { s as safeJsonParse, i as isEmpty } from './index-BZS1ijMm.js';
-import { M as MONITORS_OPTIONS, B as BUTTON_TEXTS } from './index-B6FywnIf.js';
+import { M as MONITORS_OPTIONS, B as BUTTON_TEXTS } from './index-CTgLYGo-.js';
 import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, c as capitalizeFirstLetter, g as getMonitorIcon, p as parseJsonStringToPrettyString, a as getProgrammingLanguageIcon, d as splitCamelString } from './index-CJs4RDHU.js';
 import './index-DMXaEyAB.js';
-import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-BPxqZqXu.js';
+import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-BSKilkmZ.js';
 import { I as ImageErrorIcon } from './index-DGel4E-Z.js';
 import ReactDOM from 'react-dom';
 import { I as InfoIcon } from './index-IKusBlIE.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-CWufhl9G.js → index-R9xRto5r.js}

@@ -1,8 +1,8 @@
 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-B6FywnIf.js';
-import { B as Button, V as Text, J as NotificationNote } from './index-C_LWKMnO.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-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-C_LWKMnO.js';
-export { E as EditButton, N as NoteBackToSummary } from './index-CWufhl9G.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';
@@ -7,11 +7,11 @@ import './types.js';
 import 'styled-components';
 import './index-BJxaoI0G.js';
 import './index-BZS1ijMm.js';
-import './index-B6FywnIf.js';
+import './index-CTgLYGo-.js';
 import './index-CFnxjzaW.js';
 import './index-DGel4E-Z.js';
 import './index-CJs4RDHU.js';
 import './index-IKusBlIE.js';
-import './useTransition-BPxqZqXu.js';
+import './useTransition-BSKilkmZ.js';
 import 'react-dom';
 import './index-CWbxXTof.js';

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

@@ -3,8 +3,8 @@ import { useState, useEffect, useMemo } from 'react';
 import { g as useNotificationStore, f as useModalStore, b as useDrawerStore, c as useEntityStore, a as useDataStreamStore, j as useSetupStore } from './index-DMXaEyAB.js';
 import 'styled-components';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
-import { F as FORM_ALERTS } from './index-B6FywnIf.js';
-import { b as useGenericForm } from './useTransition-BPxqZqXu.js';
+import { F as FORM_ALERTS } from './index-CTgLYGo-.js';
+import { b as useGenericForm } from './useTransition-BSKilkmZ.js';
 import { g as getIdFromSseTarget } from './index-7-KCQK-x.js';
 
 const INITIAL$2 = {
@@ -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/lib/{useTransition-BPxqZqXu.js → useTransition-BSKilkmZ.js}

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import './index-B6FywnIf.js';
+import './index-CTgLYGo-.js';
 import { g as useNotificationStore } from './index-DMXaEyAB.js';
 import { CodeAttributesKeyTypes, PayloadCollectionKeyTypes } from './types.js';
 import styled from 'styled-components';

package/package.json

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