@odigos/ui-kit 0.0.24 → 0.0.25

package/lib/{index-D3sp5Hx7.js → index-HOKGoci6.js}

@@ -1,7 +1,7 @@
 import { SignalType, ActionType, InstrumentationRuleType } from './types.js';
-import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-C7Y1tYdc.js';
+import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-C0N2DFBu.js';
 import 'react';
-import './index-DiTtXTRm.js';
+import './index-CK8tITRA.js';
 import 'styled-components';
 
 const ACTION_OPTIONS = [
@@ -125,4 +125,94 @@ const MONITORS_OPTIONS = [
     },
 ];
 
-export { ACTION_OPTIONS as A, INSTRUMENTATION_RULE_OPTIONS as I, MONITORS_OPTIONS as M };
+const FORM_ALERTS = {
+    REQUIRED_FIELDS: 'Required fields are missing',
+    FIELD_IS_REQUIRED: 'This field is required',
+    FORBIDDEN: 'Forbidden',
+    ENTERPRISE_ONLY: (str = 'This') => `${str} is an Enterprise feature. Please upgrade your plan.`,
+    CANNOT_EDIT_RULE: 'Cannot edit a system-managed instrumentation rule',
+    CANNOT_DELETE_RULE: 'Cannot delete a system-managed instrumentation rule',
+    LATENCY_HTTP_ROUTE: 'HTTP route must start with a forward slash "/"',
+    READONLY_WARNING: "You're not allowed to create/update/delete in readonly mode",
+};
+const DISPLAY_TITLES = {
+    NAMESPACE: 'Namespace',
+    NAME: 'Name',
+    KIND: 'Kind',
+    CONNECTION: 'Connection',
+    CONNECTIONS: 'Connections',
+    ACTION: 'Action',
+    ACTIONS: 'Actions',
+    ADD_ACTION: 'Add Action',
+    ACTION_DETAILS: 'Action Details',
+    INSTRUMENTATION_RULE: 'Instrumentation Rule',
+    INSTRUMENTATION_RULES: 'Instrumentation Rules',
+    ADD_INSTRUMENTATION_RULE: 'Add Instrumentation Rule',
+    INSTRUMENTATION_RULE_DETAILS: 'Instrumentation Rule Details',
+    DESTINATION: 'Destination',
+    DESTINATIONS: 'Destinations',
+    ADD_DESTINATION: 'Add Destination',
+    ADD_DESTINATIONS: 'Add Destinations',
+    ADD_DESTINATION_DESCRIPTION: 'Add a destination to send your telemetry data to. You can add multiple destinations.',
+    DESTINATION_DETAILS: 'Destination Details',
+    SELECTED_DESTINATIONS: 'Selected Destinations',
+    SOURCE: 'Source',
+    SOURCES: 'Sources',
+    ADD_SOURCE: 'Add Source',
+    SOURCE_DETAILS: 'Source Details',
+    SELECT_SOURCES: 'Select Sources',
+    SELECTED_SOURCES: 'Selected Sources',
+    SELECT_SOURCES_DESCRIPTION: 'Select apps to monitor in each namespace. Odigos will instrument them and send telemetry data to your destinations.',
+    NO_SOURCES: 'No sources',
+    NO_SOURCES_GO_BACK: 'No sources selected. Please go back to select sources.',
+    PLEASE_ADD_SOURCE: 'Please add a source',
+    NO_SOURCES_NAMESPACE: 'No sources available in this namespace',
+    TRY_SEARCH_OR_OTHER_NAMESPACE: 'Try searching again or select another namespace.',
+    PLEASE_MAKE_SURE_UNIGNORED_NAMESPACES: 'Please make sure your cluster has unignored namespaces',
+    SUMMARY: 'Summary',
+    TYPE: 'Type',
+    NOTES: 'Notes',
+    STATUS: 'Status',
+    READONLY: 'Readonly',
+    LANGUAGE: 'Language',
+    MONITORS: 'Monitors',
+    SIGNALS_FOR_PROCESSING: 'Signals for Processing',
+    MANAGED_BY_PROFILE: 'Managed by Profile',
+    API_TOKEN: 'API Token',
+    API_TOKENS: 'API Tokens',
+    DESCRIBE_ODIGOS: 'Describe Odigos',
+    DESCRIBE_SOURCE: 'Describe Source',
+    DETECTED_CONTAINERS: 'Detected Containers',
+    DETECTED_CONTAINERS_DESCRIPTION: 'The system automatically instruments the containers it detects with a supported programming language.',
+    CONTAINER_NAME: 'Container Name',
+    FILTERED_COUNT_TOOLTIP: 'Represents filtered amount, out of total amount',
+    STREAM_NAME: 'Name your Data Stream',
+    STREAM_NAME_PLACEHOLDER: 'e.g. Highest priority',
+    STREAM_DESCRIPTION: 'Provide a clear and descriptive name for your pipeline to ensure its purpose is easily understood by you and your team.',
+    STREAM_CONFIRM: 'Confirm your new Data Stream',
+    SEARCH_NAMESPACES: 'Search Namespaces',
+    SHOW_SELECTED_ONLY: 'Show selected only',
+    TO_COLLECT_OTEL_DATA: 'To collect OpenTelemetry data',
+    TO_MONITOR_OTEL_DATA: 'To monitor OpenTelemetry data',
+    TO_MODIFY_OTEL_DATA: 'To modify OpenTelemetry data',
+    QUICK_BACK_TO_SUMMARY: 'When you finish editing you can quickly go back to the summary.',
+    GO_TO_SUMMARY: 'Go to summary',
+};
+const BUTTON_TEXTS = {
+    ADD: 'Add',
+    ADD_NEW: 'Add New',
+    NEW: 'New',
+    CREATE: 'Create',
+    UPDATE: 'Update',
+    EDIT: 'Edit',
+    DELETE: 'Delete',
+    CANCEL: 'Cancel',
+    DONE: 'Done',
+    SAVE: 'Save',
+    BACK: 'Back',
+    NEXT: 'Next',
+    TEST: 'Test',
+    TEST_CONNECTION: 'Test Connection',
+};
+
+export { ACTION_OPTIONS as A, BUTTON_TEXTS as B, DISPLAY_TITLES as D, FORM_ALERTS as F, INSTRUMENTATION_RULE_OPTIONS as I, MONITORS_OPTIONS as M };

package/lib/{data → mock-data}/sources/index.d.ts

@@ -4,6 +4,7 @@ export declare const MOCK_SOURCE_JAEGER: {
     namespace: string;
     name: string;
     kind: K8sResourceKind;
+    streamNames: never[];
     selected: boolean;
     otelServiceName: string;
     numberOfInstances: number;

package/lib/snippets/add-button/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { type ButtonProps } from '@/components';
+interface AddButtonProps extends ButtonProps {
+    label?: string;
+}
+declare const AddButton: FC<AddButtonProps>;
+export { AddButton, type AddButtonProps };

package/lib/snippets/edit-button/index.d.ts

@@ -0,0 +1,7 @@
+import { type FC } from 'react';
+import { type ButtonProps } from '@/components';
+interface EditButtonProps extends ButtonProps {
+    label?: string;
+}
+declare const EditButton: FC<EditButtonProps>;
+export { EditButton, type EditButtonProps };

package/lib/snippets/index.d.ts

@@ -0,0 +1,3 @@
+export * from './add-button/index';
+export * from './edit-button/index';
+export * from './note-back-to-summary/index';

package/lib/snippets/note-back-to-summary/index.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface NoteBackToSummaryProps {
+    onClick: () => void;
+}
+declare const NoteBackToSummary: FC<NoteBackToSummaryProps>;
+export { NoteBackToSummary, type NoteBackToSummaryProps };

package/lib/snippets/note-back-to-summary/note-back-to-summary.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type NoteBackToSummaryProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<NoteBackToSummaryProps>;
+};
+export default _default;
+export declare const Default: StoryFn<NoteBackToSummaryProps>;

package/lib/snippets.js

@@ -0,0 +1,17 @@
+export { A as AddButton } from './index-CYUrArTm.js';
+export { E as EditButton, N as NoteBackToSummary } from './index-DE7A6Q_i.js';
+import 'react';
+import './theme.js';
+import './index-CK8tITRA.js';
+import './types.js';
+import 'styled-components';
+import './index-BJxaoI0G.js';
+import './index-BZS1ijMm.js';
+import './index-HOKGoci6.js';
+import './index-C0N2DFBu.js';
+import './index-DGel4E-Z.js';
+import './index-C2m4uddS.js';
+import './index-IKusBlIE.js';
+import './useTransition-DvT5YNul.js';
+import 'react-dom';
+import './index-CWbxXTof.js';

package/lib/store/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useDarkMode';
+export * from './useDataStreamStore';
 export * from './useDrawerStore';
 export * from './useEntityStore';
 export * from './useFilterStore';

package/lib/store/useDataStreamStore.d.ts

@@ -0,0 +1,16 @@
+import type { DataStream } from '@/types';
+interface IDataStreamState {
+    dataStreamsLoading: boolean;
+    dataStreams: DataStream[];
+    selectedStreamName: string;
+}
+interface IDataStreamStateSetters {
+    setDataStreamsLoading: (bool: boolean) => void;
+    setDataStreams: (dataStreams: DataStream[]) => void;
+    addDataStreams: (dataStreams: DataStream[]) => void;
+    removeDataStreams: (dataStreams: DataStream[]) => void;
+    setSelectedStreamName: (streamName: string) => void;
+    resetDataStreamStore: () => void;
+}
+export declare const useDataStreamStore: import("zustand").UseBoundStore<import("zustand").StoreApi<IDataStreamState & IDataStreamStateSetters>>;
+export {};

package/lib/store/useSetupStore.d.ts

@@ -1,44 +1,30 @@
-import { type Destination, type DestinationFormData, DestinationTypes, type Source } from '@/types';
+import type { Destination, Source } from '@/types';
+export type AvailableSource = Pick<Source, 'name' | 'kind' | 'selected' | 'numberOfInstances'>;
 export interface AvailableSourcesByNamespace {
-    [namespace: string]: Pick<Source, 'name' | 'kind' | 'selected' | 'numberOfInstances'>[];
+    [namespace: string]: AvailableSource[];
 }
+export type SelectedSource = AvailableSource & {
+    currentStreamName: string;
+};
 export interface SourceSelectionFormData {
-    [namespace: string]: Pick<Source, 'name' | 'kind' | 'selected'>[];
+    [namespace: string]: SelectedSource[];
 }
 export interface NamespaceSelectionFormData {
     [namespace: string]: boolean;
 }
-export interface StoredSetupDestination {
-    type: DestinationTypes;
-    displayName: string;
-    category: string;
-    exportedSignals: Destination['exportedSignals'];
-    destinationTypeDetails: {
-        title: string;
-        value: string;
-    }[];
-}
 export interface ISetupState {
     availableSources: AvailableSourcesByNamespace;
     configuredSources: SourceSelectionFormData;
     configuredFutureApps: NamespaceSelectionFormData;
-    configuredDestinations: {
-        stored: StoredSetupDestination;
-        form: DestinationFormData;
-    }[];
+    configuredDestinations: Destination[];
 }
 interface ISetupStateSetters {
     setAvailableSources: (payload: ISetupState['availableSources']) => void;
     setConfiguredSources: (payload: ISetupState['configuredSources']) => void;
     setConfiguredFutureApps: (payload: ISetupState['configuredFutureApps']) => void;
     setConfiguredDestinations: (payload: ISetupState['configuredDestinations']) => void;
-    addConfiguredDestination: (payload: {
-        stored: StoredSetupDestination;
-        form: DestinationFormData;
-    }) => void;
-    removeConfiguredDestination: (payload: {
-        type: string;
-    }) => void;
+    addConfiguredDestination: (payload: Destination) => void;
+    removeConfiguredDestination: (payload: Destination) => void;
     resetState: () => void;
 }
 export declare const useSetupStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ISetupState & ISetupStateSetters>>;

package/lib/store.js

@@ -1,4 +1,4 @@
-export { u as useDarkMode, a as useDrawerStore, b as useEntityStore, c as useFilterStore, d as useInstrumentStore, e as useModalStore, f as useNotificationStore, g as usePendingStore, h as useSelectedStore, i as useSetupStore } from './index-DiTtXTRm.js';
+export { u as useDarkMode, a as useDataStreamStore, b as useDrawerStore, c as useEntityStore, d as useFilterStore, e as useInstrumentStore, f as useModalStore, g as useNotificationStore, h as usePendingStore, i as useSelectedStore, j as useSetupStore } from './index-CK8tITRA.js';
 import './types.js';
 import 'react';
 import 'styled-components';

package/lib/theme.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { u as useDarkMode, j as animations } from './index-DiTtXTRm.js';
+import { u as useDarkMode, l as animations } from './index-CK8tITRA.js';
 import { ThemeProvider, useTheme } from 'styled-components';
 import './types.js';
 

package/lib/types/data-streams/index.d.ts

@@ -0,0 +1,3 @@
+export interface DataStream {
+    name: string;
+}

package/lib/types/destinations/index.d.ts

@@ -1,6 +1,6 @@
 import type { Comparison } from '@/functions';
 import type { DropdownProps } from '@/components';
-import { type Condition, FieldTypes } from '../common';
+import { type Condition, FieldTypes, SVG } from '../common';
 export declare enum DestinationTypes {
     Alauda = "alauda",
     AlibabaCloud = "alibabacloud",
@@ -67,6 +67,7 @@ export declare enum DestinationTypes {
 export interface Destination {
     id: string;
     name: string;
+    streamNames: string[];
     exportedSignals: {
         traces: boolean;
         metrics: boolean;
@@ -107,6 +108,8 @@ export interface DestinationYamlProperties {
     }[];
 }
 export interface DestinationOption {
+    id?: string;
+    selected?: boolean;
     type: Destination['destinationType']['type'];
     displayName: Destination['destinationType']['displayName'];
     supportedSignals: Destination['destinationType']['supportedSignals'];
@@ -114,13 +117,15 @@ export interface DestinationOption {
     fields: DestinationYamlProperties[];
 }
 export type DestinationCategories = {
-    name: 'managed' | 'self hosted';
+    icon?: SVG;
+    name: string;
     description: string;
     items: DestinationOption[];
 }[];
 export interface DestinationFormData {
     type: Destination['destinationType']['type'];
     name: Destination['destinationType']['displayName'];
+    currentStreamName: string;
     exportedSignals: Destination['exportedSignals'];
     fields: {
         key: string;
@@ -138,4 +143,11 @@ export interface DestinationDynamicField {
     placeholder?: string;
     options?: DropdownProps['options'];
 }
+export interface TestConnectionResponse {
+    succeeded: boolean;
+    message: string;
+    reason: string;
+    destinationType?: DestinationTypes;
+}
+export type TestConnectionFunc = (payload: DestinationFormData) => Promise<TestConnectionResponse | undefined>;
 export {};

package/lib/types/index.d.ts

@@ -2,6 +2,7 @@ export * from './actions';
 export * from './common';
 export * from './connection';
 export * from './data-flow';
+export * from './data-streams';
 export * from './describe';
 export * from './destinations';
 export * from './instrumentation-rules';

package/lib/types/namespaces/index.d.ts

@@ -4,3 +4,16 @@ export interface Namespace {
     selected: boolean;
     sources?: Source[];
 }
+export type FetchSingleNamespace = (payload: {
+    variables: {
+        namespaceName: string;
+    };
+}) => Promise<{
+    loading: boolean;
+    error?: string;
+    data?: {
+        computePlatform?: {
+            k8sActualNamespace?: Namespace;
+        };
+    };
+}>;

package/lib/types/sources/index.d.ts

@@ -1,3 +1,4 @@
+import { SelectedSource } from '@/store';
 import { type Condition, ProgrammingLanguages } from '../common';
 export declare enum K8sResourceKind {
     Deployment = "Deployment",
@@ -13,6 +14,7 @@ export interface Source extends WorkloadId {
     selected: boolean;
     otelServiceName: string;
     numberOfInstances?: number;
+    streamNames: string[];
     containers: {
         containerName: string;
         language: ProgrammingLanguages;
@@ -25,9 +27,10 @@ export interface Source extends WorkloadId {
 }
 export interface SourceFormData {
     otelServiceName: string;
+    currentStreamName: string;
 }
 export type PersistSources = (selectAppsList: {
-    [namespace: string]: Pick<Source, 'name' | 'kind' | 'selected'>[];
+    [namespace: string]: SelectedSource[];
 }, futureSelectAppsList: {
     [namespace: string]: boolean;
 }) => void;

package/lib/{useSourceSelectionFormData-Bec4Ubm7.js → useSourceSelectionFormData-Bxm0NBIy.js}

@@ -1,11 +1,10 @@
 import { ActionType, StatusType, AddNodeTypes, EntityTypes, FieldTypes } from './types.js';
-import { useState, useEffect, useCallback } from 'react';
-import { f as useNotificationStore, e as useModalStore, a as useDrawerStore, b as useEntityStore, i as useSetupStore } from './index-DiTtXTRm.js';
+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-CK8tITRA.js';
 import 'styled-components';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
-import './index-D3sp5Hx7.js';
-import { F as FORM_ALERTS } from './index-C_0J5P9M.js';
-import { b as useGenericForm } from './useTransition-D0ykOLrk.js';
+import { F as FORM_ALERTS } from './index-HOKGoci6.js';
+import { b as useGenericForm } from './useTransition-DvT5YNul.js';
 import { g as getIdFromSseTarget } from './index-7-KCQK-x.js';
 
 const INITIAL$2 = {
@@ -345,6 +344,7 @@ const useDestinationFormData = (params) => {
 
 const INITIAL = {
     otelServiceName: '',
+    currentStreamName: '',
 };
 const useSourceFormData = () => {
     const { addNotification } = useNotificationStore();
@@ -372,17 +372,48 @@ const useSourceFormData = () => {
     };
 };
 
+const mapSourceToAvailableSource = (source, selectedStreamName, selectAll) => {
+    return {
+        name: source.name,
+        kind: source.kind,
+        selected: typeof selectAll === 'boolean' ? selectAll : source.selected && source.streamNames?.includes(selectedStreamName) ? source.selected : false,
+        numberOfInstances: source.numberOfInstances,
+    };
+};
+const mapSourceToSelectedSource = (source, selectedStreamName, selectAll) => {
+    return {
+        ...mapSourceToAvailableSource(source, selectedStreamName, selectAll),
+        currentStreamName: selectedStreamName,
+    };
+};
 const useSourceSelectionFormData = (params) => {
+    const { fetchSingleNamespace } = params || {};
     const { namespaces } = useEntityStore();
-    const { selectedNamespace, onSelectNamespace, namespace } = params || {};
+    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();
     // 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 [selectAllForNamespace, setSelectAllForNamespace] = useState('');
+    const [selectedNamespace, setSelectedNamespace] = useState('');
     const [selectedSources, setSelectedSources] = useState(configuredSources);
     const [selectedFutureApps, setSelectedFutureApps] = useState(configuredFutureApps);
+    const fetchAndSetThisNamespace = (ns, selectAll) => {
+        fetchSingleNamespace?.({ variables: { namespaceName: ns } }).then(({ data }) => {
+            const { name, sources = [] } = data?.computePlatform?.k8sActualNamespace || {};
+            if (!name)
+                return;
+            // initialize sources for this namespace
+            setRecordedInitialSources((prev) => ({
+                ...prev,
+                [name]: sources.map((s) => mapSourceToAvailableSource(s, selectedStreamName)),
+            }));
+            setSelectedSources((prev) => ({
+                ...prev,
+                [name]: typeof selectAll !== 'boolean' && prev[name]?.length ? prev[name] : sources.map((s) => mapSourceToSelectedSource(s, selectedStreamName, selectAll)),
+            }));
+        });
+    };
     useEffect(() => {
         if (!!namespaces?.length) {
             // initialize all states (to avoid undefined errors)
@@ -401,81 +432,16 @@ const useSourceSelectionFormData = (params) => {
                 namespaces.forEach(({ name, selected }) => (payload[name] = payload[name] || selected || false));
                 return payload;
             });
+            namespaces.forEach(({ name }) => fetchAndSetThisNamespace(name));
         }
     }, [namespaces]);
-    useEffect(() => {
-        if (!!namespace) {
-            // initialize sources for this namespace
-            const { name, sources = [] } = namespace;
-            setRecordedInitialSources((prev) => ({
-                ...prev,
-                [name]: sources.map(({ name, kind, selected, numberOfInstances }) => ({
-                    name,
-                    kind,
-                    selected,
-                    numberOfInstances,
-                })),
-            }));
-            setSelectedSources((prev) => ({
-                ...prev,
-                [name]: !!prev[name].length
-                    ? prev[name]
-                    : sources.map(({ name, kind, selected, numberOfInstances }) => ({
-                        name,
-                        kind,
-                        selected,
-                        numberOfInstances,
-                    })),
-            }));
-        }
-    }, [namespace]);
     // form filters
     const [searchText, setSearchText] = useState('');
     const [showSelectedOnly, setShowSelectedOnly] = useState(false);
-    const onSelectAll = useCallback((selected, ns, selectionsByNamespace) => {
-        // When clicking "select all" on a single namespace
-        if (!!ns) {
-            if (!selectionsByNamespace) {
-                // If the sources are not loaded yet, call the onSelectNamespace to load the sources
-                onSelectNamespace?.(selected ? ns : '');
-                // Set the state, so the interval would be able to use the namespace
-                setSelectAllForNamespace(selected ? ns : '');
-            }
-            else if (!!selectionsByNamespace?.[ns]?.length) {
-                // Clear the state, so the interval would stop
-                setSelectAllForNamespace('');
-            }
-            // Set the selected sources
-            setSelectedSources((prev) => ({
-                ...prev,
-                [ns]: selectionsByNamespace?.[ns]?.map((source) => ({
-                    ...source,
-                    selected,
-                })) || [],
-            }));
-            // setSelectedFutureApps((prev) => ({
-            //   ...prev,
-            //   [ns]: !!selectionsByNamespace?.[ns]?.length ? selected : false,
-            // }))
-        }
-        // When clicking "select all" on all namespaces
-        else {
-            setSelectedSources((prev) => {
-                const payload = { ...prev };
-                Object.entries(payload).forEach(([key, sources]) => {
-                    payload[key] = sources.map((source) => ({ ...source, selected }));
-                });
-                return payload;
-            });
-        }
-    }, [selectedSources]);
-    // This is to keep trying "select all" per namespace, until the sources are loaded (allows for 1-click, better UX).
-    useEffect(() => {
-        if (!!selectAllForNamespace) {
-            const interval = setInterval(() => onSelectAll(true, selectAllForNamespace, selectedSources), 100);
-            return () => clearInterval(interval);
-        }
-    }, [selectAllForNamespace, onSelectAll]);
+    const onSelectNamespace = (ns, selectAll) => {
+        setSelectedNamespace((prev) => (prev === ns && typeof selectAll !== 'boolean' ? '' : ns));
+        fetchAndSetThisNamespace(ns, selectAll);
+    };
     const onSelectSource = (source, namespace) => {
         const id = namespace || selectedNamespace;
         if (!id)
@@ -484,11 +450,11 @@ const useSourceSelectionFormData = (params) => {
         const foundIdx = arr.findIndex(({ name, kind }) => name === source.name && kind === source.kind);
         if (foundIdx !== -1) {
             // Replace the item with a new object to avoid mutating a possibly read-only object
-            const updatedItem = { ...arr[foundIdx], selected: !arr[foundIdx].selected };
+            const updatedItem = { ...arr[foundIdx], selected: !arr[foundIdx].selected, currentStreamName: selectedStreamName };
             arr[foundIdx] = updatedItem;
         }
         else {
-            arr.push({ ...source, selected: true });
+            arr.push({ ...source, selected: true, currentStreamName: selectedStreamName });
         }
         setSelectedSources((prev) => ({ ...prev, [id]: arr }));
     };
@@ -498,21 +464,17 @@ const useSourceSelectionFormData = (params) => {
             return;
         setSelectedFutureApps((prev) => ({ ...prev, [id]: bool }));
     };
-    const filterNamespaces = (options) => {
-        const { cancelSearch } = options || {};
-        const namespaces = Object.entries(selectedSources);
-        const isSearchOk = (targetText) => cancelSearch || !searchText || targetText.toLowerCase().includes(searchText);
-        return namespaces.filter(([namespace]) => isSearchOk(namespace));
-    };
-    const filterSources = (namespace, options) => {
-        const { cancelSearch, cancelSelected } = options || {};
-        const id = namespace || selectedNamespace;
-        if (!id)
-            return [];
-        const isSearchOk = (targetText) => cancelSearch || !searchText || targetText.toLowerCase().includes(searchText);
-        const isOnlySelectedOk = (sources, compareKey, target) => cancelSelected || !showSelectedOnly || !!sources.find((item) => item[compareKey] === target && item.selected);
-        return selectedSources[id].filter((source) => isSearchOk(source.name) && isOnlySelectedOk(selectedSources[id], 'name', source.name));
-    };
+    const filteredNamespacesAndSources = useMemo(() => {
+        const isSearchOk = (targetText) => !searchText || targetText.toLowerCase().includes(searchText);
+        const isOnlySelectedOk = (source) => !showSelectedOnly || source.selected;
+        const payload = {};
+        const filteredNamespacesMatrix = Object.entries(selectedSources).filter(([ns]) => isSearchOk(ns));
+        filteredNamespacesMatrix.forEach(([ns, srcs]) => {
+            const filteredSources = srcs.filter((src) => isOnlySelectedOk(src));
+            payload[ns] = filteredSources;
+        });
+        return payload;
+    }, [selectedSources, searchText, showSelectedOnly]);
     // This is to filter the user-specific-selections, therebey minimizing the amount of data sent to the API on "persist sources".
     const getApiSourcesPayload = () => {
         const payload = {};
@@ -522,11 +484,7 @@ const useSourceSelectionFormData = (params) => {
                 if (foundInitial?.selected !== source.selected) {
                     if (!payload[namespace])
                         payload[namespace] = [];
-                    payload[namespace].push({
-                        name: source.name,
-                        kind: source.kind,
-                        selected: source.selected,
-                    });
+                    payload[namespace].push(source);
                 }
             });
         });
@@ -545,15 +503,15 @@ const useSourceSelectionFormData = (params) => {
     };
     return {
         recordedInitialSources,
-        filterNamespaces,
-        filterSources,
+        filteredNamespacesAndSources,
         getApiSourcesPayload,
         getApiFutureAppsPayload,
+        selectedNamespace,
+        onSelectNamespace,
         selectedSources,
         onSelectSource,
         selectedFutureApps,
         onSelectFutureApps,
-        onSelectAll,
         searchText,
         setSearchText,
         showSelectedOnly,

package/lib/{useTransition-D0ykOLrk.js → useTransition-DvT5YNul.js}

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import './index-D3sp5Hx7.js';
-import { f as useNotificationStore } from './index-DiTtXTRm.js';
+import './index-HOKGoci6.js';
+import { g as useNotificationStore } from './index-CK8tITRA.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.24",
+  "version": "0.0.25",
   "author": "Odigos",
   "repository": {
     "type": "git",
@@ -9,7 +9,8 @@
   "scripts": {
     "dev": "storybook dev -p 6006",
     "prebuild": "rm -rf lib",
-    "build": "rollup -c --bundleConfigAsCjs"
+    "build": "rollup -c --bundleConfigAsCjs",
+    "watch": "rollup -c --bundleConfigAsCjs -w"
   },
   "release": {
     "branches": [
@@ -50,6 +51,11 @@
       "import": "./lib/icons.js",
       "require": "./lib/icons.js"
     },
+    "./snippets": {
+      "types": "./lib/snippets/index.d.ts",
+      "import": "./lib/snippets.js",
+      "require": "./lib/snippets.js"
+    },
     "./store": {
       "types": "./lib/store/index.d.ts",
       "import": "./lib/store.js",