@odigos/ui-kit 0.0.24 → 0.0.26

package/lib/{useSourceSelectionFormData-Bec4Ubm7.js → useSourceSelectionFormData-plxXIM0Q.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-DMXaEyAB.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-B6FywnIf.js';
+import { b as useGenericForm } from './useTransition-BPxqZqXu.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.dataStreamNames?.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-BPxqZqXu.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-B6FywnIf.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.24",
+  "version": "0.0.26",
   "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",
@@ -78,7 +84,7 @@
     "zustand": "^5.0.3"
   },
   "dependencies": {
-    "@xyflow/react": "^12.5.5",
+    "@xyflow/react": "^12.6.3",
     "javascript-time-ago": "^2.5.11",
     "lottie-react": "^2.4.1",
     "prism-react-renderer": "^2.4.1",
@@ -86,13 +92,13 @@
     "react-dom": "^19.1.0",
     "react-error-boundary": "^5.0.0",
     "styled-components": "6.1.15",
-    "zustand": "^5.0.3"
+    "zustand": "^5.0.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.27.0",
+    "@babel/core": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
@@ -100,20 +106,20 @@
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
     "@storybook/react": "^8.6.12",
     "@storybook/react-webpack5": "^8.6.12",
-    "@types/node": "^22.14.0",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.2",
+    "@types/node": "^22.15.18",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
     "@types/react-lottie": "^1.2.10",
-    "@typescript-eslint/eslint-plugin": "^8.29.1",
-    "@typescript-eslint/parser": "^8.29.1",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "@typescript-eslint/parser": "^8.32.1",
     "babel-loader": "^10.0.0",
     "babel-plugin-styled-components": "^2.1.4",
-    "eslint": "^9.24.0",
+    "eslint": "^9.26.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-storybook": "^0.12.0",
     "html-webpack-plugin": "^5.6.3",
     "postcss": "^8.5.3",
-    "rollup": "^4.39.0",
+    "rollup": "^4.40.2",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
     "storybook": "^8.6.12",

package/lib/containers/destination-modal/choose-destination/potential-destinations-list/index.d.ts

@@ -1,8 +0,0 @@
-import { type FC } from 'react';
-import { type DestinationOption } from '@/types';
-interface PotentialDestinationsListProps {
-    items: DestinationOption[];
-    setSelectedItem: (item: DestinationOption) => void;
-}
-declare const PotentialDestinationsList: FC<PotentialDestinationsListProps>;
-export { PotentialDestinationsList, type PotentialDestinationsListProps };

package/lib/containers/destination-selection-form/configured-list/index.d.ts

@@ -1,5 +0,0 @@
-import { type FC } from 'react';
-interface ConfiguredListProps {
-}
-declare const ConfiguredList: FC<ConfiguredListProps>;
-export { ConfiguredList, type ConfiguredListProps };

package/lib/containers/source-selection-form/controls/index.d.ts

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-import type { UseSourceSelectionFormData } from '@/hooks';
-interface ControlsProps extends UseSourceSelectionFormData {
-    isModal?: boolean;
-}
-declare const Controls: FC<ControlsProps>;
-export { Controls, type ControlsProps };

package/lib/containers/source-selection-form/list/index.d.ts

@@ -1,9 +0,0 @@
-import { type FC } from 'react';
-import type { UseSourceSelectionFormData } from '@/hooks';
-interface ListProps extends UseSourceSelectionFormData {
-    isModal?: boolean;
-    selectedNamespace: string;
-    onSelectNamespace: (namespace: string) => void;
-}
-declare const List: FC<ListProps>;
-export { List, type ListProps };

package/lib/index-C_0J5P9M.js

@@ -1,45 +0,0 @@
-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',
-    Action: 'Action',
-    Actions: 'Actions',
-    ACTION_DETAILS: 'Action Details',
-    InstrumentationRule: 'Instrumentation Rule',
-    InstrumentationRules: 'Instrumentation Rules',
-    INSTRUMENTATION_RULE_DETAILS: 'Instrumentation Rule Details',
-    Destination: 'Destination',
-    Destinations: 'Destinations',
-    DESTINATION_DETAILS: 'Destination Details',
-    Source: 'Source',
-    Sources: 'Sources',
-    SOURCE_DETAILS: 'Source Details',
-    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',
-};
-
-export { DISPLAY_TITLES as D, FORM_ALERTS as F };