@odigos/ui-kit 0.0.15 → 0.0.17

package/lib/{useTransition-CFmm4scp.js → useTimeAgo-weEj7br6.js}

@@ -1,8 +1,11 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import './index-CJKFedQi.js';
-import { f as useNotificationStore } from './index-DYEcdkUF.js';
-import { CodeAttributesKeyTypes, PayloadCollectionKeyTypes } from './types.js';
-import styled from 'styled-components';
+import { c as useNotificationStore, b as useModalStore, u as useDrawerStore, a as useEntityStore, d as useSetupStore } from './useSetupStore-CoYx1UQw.js';
+import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
+import { F as FORM_ALERTS } from './index-C_0J5P9M.js';
+import { A as ActionType, C as CodeAttributesKeyTypes, P as PayloadCollectionKeyTypes } from './index-RBS1MqCQ.js';
+import { S as StatusType, E as EntityTypes, F as FieldTypes } from './index-BVVVevuY.js';
+import { A as AddNodeTypes } from './index-B72aw6tI.js';
+import { g as getIdFromSseTarget } from './index-Hz7AAE0t.js';
+import { useState, useEffect, useCallback } from 'react';
 
 const useGenericForm = (initialFormData) => {
     function copyInitial() {
@@ -61,69 +64,341 @@ const useGenericForm = (initialFormData) => {
     };
 };
 
-const useContainerSize = () => {
-    const ref = useRef(null);
-    const [width, setWidth] = useState(0);
-    const [height, setHeight] = useState(0);
-    useEffect(() => {
-        const resize = () => {
-            if (ref.current) {
-                const { width, height } = ref.current.getBoundingClientRect();
-                setWidth(width);
-                setHeight(height);
+const INITIAL$3 = {
+    // @ts-ignore (TS complains about empty string because we expect an "ActionsType", but it's fine)
+    type: '',
+    name: '',
+    notes: '',
+    signals: [],
+    disabled: false,
+    clusterAttributes: null,
+    renames: null,
+    attributeNamesToDelete: null,
+    piiCategories: null,
+    fallbackSamplingRatio: null,
+    samplingPercentage: null,
+    endpointsFilters: null,
+};
+const useActionFormData = () => {
+    const { addNotification } = useNotificationStore();
+    const { formData, formErrors, handleFormChange, handleErrorChange, resetFormData } = useGenericForm(INITIAL$3);
+    const validateForm = (params) => {
+        const errors = {};
+        let ok = true;
+        Object.entries(formData).forEach(([k, v]) => {
+            switch (k) {
+                case 'type':
+                case 'signals':
+                    if (isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case 'clusterAttributes':
+                    if (formData.type === ActionType.AddClusterInfo && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case 'renames':
+                    if (formData.type === ActionType.RenameAttributes && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case 'attributeNamesToDelete':
+                    if (formData.type === ActionType.DeleteAttributes && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case 'piiCategories':
+                    if (formData.type === ActionType.PiiMasking && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case 'fallbackSamplingRatio':
+                    if (formData.type === ActionType.ErrorSampler && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case 'samplingPercentage':
+                    if (formData.type === ActionType.ProbabilisticSampler && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case 'endpointsFilters':
+                    if (formData.type === ActionType.LatencySampler) {
+                        if (isEmpty(v))
+                            errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                        v?.forEach((endpoint) => {
+                            if (endpoint.httpRoute.charAt(0) !== '/')
+                                errors[k] = FORM_ALERTS.LATENCY_HTTP_ROUTE;
+                        });
+                    }
+                    break;
             }
+        });
+        ok = !Object.values(errors).length;
+        if (!ok && params?.withAlert) {
+            addNotification({
+                type: StatusType.Warning,
+                title: params.alertTitle,
+                message: FORM_ALERTS.REQUIRED_FIELDS,
+                hideFromHistory: true,
+            });
+        }
+        handleErrorChange(undefined, undefined, errors);
+        return ok;
+    };
+    const loadFormWithDrawerItem = ({ type, spec }) => {
+        const updatedData = {
+            ...INITIAL$3,
+            type,
         };
-        resize();
-        window.addEventListener('resize', resize);
-        return () => window.removeEventListener('resize', resize);
-    }, []);
+        Object.entries(spec).forEach(([k, v]) => {
+            if (!!v) {
+                switch (k) {
+                    case 'actionName': {
+                        updatedData['name'] = v;
+                        break;
+                    }
+                    case 'type':
+                    case 'notes':
+                    case 'signals':
+                    case 'disabled':
+                    case 'collectContainerAttributes':
+                    case 'collectWorkloadId':
+                    case 'collectClusterId':
+                    case 'labelsAttributes':
+                    case 'annotationsAttributes':
+                    case 'clusterAttributes':
+                    case 'attributeNamesToDelete':
+                    case 'renames':
+                    case 'piiCategories':
+                    case 'fallbackSamplingRatio':
+                    case 'samplingPercentage':
+                    case 'endpointsFilters': {
+                        // @ts-ignore
+                        updatedData[k] = v;
+                        break;
+                    }
+                }
+            }
+        });
+        handleFormChange(undefined, undefined, updatedData);
+    };
     return {
-        containerRef: ref,
-        containerWidth: width,
-        containerHeight: height,
+        formData,
+        formErrors,
+        handleFormChange,
+        resetFormData,
+        validateForm,
+        loadFormWithDrawerItem,
     };
 };
 
-const useCopy = () => {
-    const [isCopied, setIsCopied] = useState(false);
-    const [copiedIndex, setCopiedIndex] = useState(-1);
-    const clickCopy = async (str, idx) => {
-        if (!isCopied) {
-            setIsCopied(true);
-            if (idx !== undefined)
-                setCopiedIndex(idx);
-            if (navigator?.clipboard && navigator.clipboard.writeText) {
-                try {
-                    await navigator.clipboard.writeText(str);
-                }
-                catch (err) {
-                    console.error('Clipboard write failed:', err);
-                }
+const useClickNode = () => {
+    const { setCurrentModal } = useModalStore();
+    const { setDrawerType, setDrawerEntityId } = useDrawerStore();
+    const onClickNode = (_, object) => {
+        const { data: { id, type }, } = object;
+        switch (type) {
+            case EntityTypes.Source:
+            case EntityTypes.Destination:
+            case EntityTypes.Action:
+            case EntityTypes.InstrumentationRule:
+                setDrawerType(type);
+                setDrawerEntityId(id);
+                break;
+            case AddNodeTypes.AddSource:
+                setCurrentModal(EntityTypes.Source);
+                break;
+            case AddNodeTypes.AddDestination:
+                setCurrentModal(EntityTypes.Destination);
+                break;
+            case AddNodeTypes.AddAction:
+                setCurrentModal(EntityTypes.Action);
+                break;
+            case AddNodeTypes.AddRule:
+                setCurrentModal(EntityTypes.InstrumentationRule);
+                break;
+            default:
+                console.warn('Unhandled node click', object);
+                break;
+        }
+    };
+    return { onClickNode };
+};
+
+const useClickNotification = () => {
+    const { setDrawerType, setDrawerEntityId } = useDrawerStore();
+    const { markAsDismissed, markAsSeen } = useNotificationStore();
+    const onClickNotification = (notif, options) => {
+        const { id, crdType, target } = notif;
+        const { dismissToast } = options || {};
+        if (crdType && target) {
+            switch (crdType) {
+                case EntityTypes.InstrumentationRule:
+                    setDrawerType(EntityTypes.InstrumentationRule);
+                    setDrawerEntityId(getIdFromSseTarget(target, EntityTypes.InstrumentationRule));
+                    break;
+                case EntityTypes.Source:
+                case 'InstrumentationConfig':
+                case 'InstrumentationInstance':
+                    setDrawerType(EntityTypes.Source);
+                    setDrawerEntityId(getIdFromSseTarget(target, EntityTypes.Source));
+                    break;
+                case EntityTypes.Action:
+                    setDrawerType(EntityTypes.Action);
+                    setDrawerEntityId(getIdFromSseTarget(target, EntityTypes.Action));
+                    break;
+                case EntityTypes.Destination:
+                case 'Destination':
+                    setDrawerType(EntityTypes.Destination);
+                    setDrawerEntityId(getIdFromSseTarget(target, EntityTypes.Destination));
+                    break;
+                default:
+                    console.warn('notif click not handled for:', { crdType, target });
+                    break;
             }
-            else {
-                // Fallback: Create a temporary textarea
-                const textArea = document.createElement('textarea');
-                textArea.value = str;
-                document.body.appendChild(textArea);
-                textArea.select();
-                try {
-                    document.execCommand('copy');
-                }
-                catch (err) {
-                    console.error('execCommand copy failed:', err);
+        }
+        markAsSeen(id);
+        if (dismissToast)
+            markAsDismissed(id);
+    };
+    return { onClickNotification };
+};
+
+const INITIAL$2 = {
+    // @ts-ignore form should be initialized with empty values
+    type: '',
+    name: '',
+    exportedSignals: {
+        logs: false,
+        metrics: false,
+        traces: false,
+    },
+    fields: [],
+};
+const buildFormDynamicFields = (fields) => {
+    return fields
+        .filter((f) => !!f)
+        .map((f) => {
+        const { name, componentType, componentProperties, displayName, initialValue, renderCondition } = f;
+        switch (componentType) {
+            case FieldTypes.Dropdown: {
+                const componentPropertiesJson = safeJsonParse(componentProperties, {});
+                const options = Array.isArray(componentPropertiesJson.values)
+                    ? componentPropertiesJson.values.map((value) => ({
+                        id: value,
+                        value,
+                    }))
+                    : Object.entries(componentPropertiesJson.values).map(([key, value]) => ({
+                        id: key,
+                        value,
+                    }));
+                return {
+                    name,
+                    componentType: componentType,
+                    title: displayName,
+                    value: initialValue,
+                    placeholder: componentPropertiesJson.placeholder || 'Select an option',
+                    options,
+                    renderCondition,
+                    ...componentPropertiesJson,
+                };
+            }
+            default: {
+                const componentPropertiesJson = safeJsonParse(componentProperties, {});
+                return {
+                    name,
+                    componentType,
+                    title: displayName,
+                    value: initialValue,
+                    renderCondition,
+                    ...componentPropertiesJson,
+                };
+            }
+        }
+    });
+};
+const useDestinationFormData = (params) => {
+    const { supportedSignals, preLoadedFields } = params || {};
+    const { addNotification } = useNotificationStore();
+    const { formData, formErrors, handleFormChange, handleErrorChange, resetFormData } = useGenericForm(INITIAL$2);
+    const [yamlFields, setYamlFields] = useState([]);
+    const [dynamicFields, setDynamicFields] = useState([]);
+    useEffect(() => {
+        if (yamlFields) {
+            setDynamicFields(buildFormDynamicFields(yamlFields).map((field) => {
+                // if we have preloaded fields, we need to set the value of the field
+                // (this can be from an odigos-detected-destination during create, or from an existing destination during edit/update)
+                if (!!preLoadedFields) {
+                    const parsedFields = typeof preLoadedFields === 'string' ? safeJsonParse(preLoadedFields, {}) : preLoadedFields;
+                    if (field.name in parsedFields) {
+                        return {
+                            ...field,
+                            // @ts-ignore
+                            value: parsedFields[field.name],
+                        };
+                    }
                 }
-                document.body.removeChild(textArea);
+                return field;
+            }));
+        }
+        else {
+            setDynamicFields([]);
+        }
+    }, [yamlFields, preLoadedFields]);
+    useEffect(() => {
+        handleFormChange('fields', dynamicFields.map((field) => ({
+            key: field.name,
+            value: field.value,
+        })));
+    }, [dynamicFields]);
+    useEffect(() => {
+        const { logs, metrics, traces } = supportedSignals || {};
+        handleFormChange('exportedSignals', {
+            logs: logs?.supported || false,
+            metrics: metrics?.supported || false,
+            traces: traces?.supported || false,
+        });
+    }, [supportedSignals]);
+    const validateForm = (params) => {
+        const errors = {};
+        let ok = true;
+        dynamicFields.forEach(({ name, value, required }) => {
+            if (required && !value) {
+                ok = false;
+                errors[name] = FORM_ALERTS.FIELD_IS_REQUIRED;
             }
-            setTimeout(() => {
-                setIsCopied(false);
-                setCopiedIndex(-1);
-            }, 1000);
+        });
+        if (!ok && params?.withAlert) {
+            addNotification({
+                type: StatusType.Warning,
+                title: params.alertTitle,
+                message: FORM_ALERTS.REQUIRED_FIELDS,
+                hideFromHistory: true,
+            });
         }
+        handleErrorChange(undefined, undefined, errors);
+        return ok;
+    };
+    const loadFormWithDrawerItem = ({ destinationType: { type }, name, exportedSignals, fields }) => {
+        const updatedData = {
+            ...INITIAL$2,
+            type,
+            name,
+            exportedSignals,
+            fields: Object.entries(safeJsonParse(fields, {})).map(([key, value]) => ({ key, value })),
+        };
+        handleFormChange(undefined, undefined, updatedData);
+    };
+    return {
+        formData,
+        formErrors,
+        handleFormChange,
+        resetFormData,
+        validateForm,
+        loadFormWithDrawerItem,
+        yamlFields,
+        setYamlFields,
+        dynamicFields,
+        setDynamicFields,
     };
-    return { isCopied, copiedIndex, clickCopy };
 };
 
-const INITIAL = {
+const INITIAL$1 = {
     ruleName: '',
     notes: '',
     disabled: false,
@@ -146,7 +421,7 @@ const INITIAL = {
 };
 const useInstrumentationRuleFormData = () => {
     const { addNotification } = useNotificationStore();
-    const { formData, formErrors, handleFormChange, handleErrorChange, resetFormData } = useGenericForm(INITIAL);
+    const { formData, formErrors, handleFormChange, handleErrorChange, resetFormData } = useGenericForm(INITIAL$1);
     const validateForm = (params) => {
         const errors = {};
         let ok = true;
@@ -155,7 +430,7 @@ const useInstrumentationRuleFormData = () => {
     };
     const loadFormWithDrawerItem = ({ ruleName, notes, disabled, payloadCollection, codeAttributes }) => {
         const updatedData = {
-            ...INITIAL,
+            ...INITIAL$1,
             ruleName,
             notes,
             disabled,
@@ -190,44 +465,222 @@ const useInstrumentationRuleFormData = () => {
     };
 };
 
-const useKeyDown = ({ active, key, withAltKey, withCtrlKey, withShiftKey, withMetaKey }, callback) => {
-    useEffect(() => {
-        const handleKeyDown = (e) => {
-            if (active &&
-                key === e.key &&
-                (!withAltKey || (withAltKey && e.altKey)) &&
-                (!withCtrlKey || (withCtrlKey && e.ctrlKey)) &&
-                (!withShiftKey || (withShiftKey && e.shiftKey)) &&
-                (!withMetaKey || (withMetaKey && e.metaKey))) {
-                e.preventDefault();
-                e.stopPropagation();
-                callback(e);
-            }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown);
+const INITIAL = {
+    otelServiceName: '',
+};
+const useSourceFormData = () => {
+    const { addNotification } = useNotificationStore();
+    const { formData, formErrors, handleFormChange, handleErrorChange, resetFormData } = useGenericForm(INITIAL);
+    const validateForm = (params) => {
+        const errors = {};
+        let ok = true;
+        handleErrorChange(undefined, undefined, errors);
+        return ok;
+    };
+    const loadFormWithDrawerItem = ({ otelServiceName, name }) => {
+        const updatedData = {
+            ...INITIAL,
+            otelServiceName: otelServiceName || name || '',
         };
-    }, [key, active, withAltKey, withCtrlKey, withShiftKey, withMetaKey, callback]);
-    return null;
+        handleFormChange(undefined, undefined, updatedData);
+    };
+    return {
+        formData,
+        formErrors,
+        handleFormChange,
+        resetFormData,
+        validateForm,
+        loadFormWithDrawerItem,
+    };
 };
 
-const useOnClickOutside = (ref, handler) => {
+const useSourceSelectionFormData = (params) => {
+    const { namespaces } = useEntityStore();
+    const { selectedNamespace, onSelectNamespace, namespace } = params || {};
+    // 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 [selectedSources, setSelectedSources] = useState(configuredSources);
+    const [selectedFutureApps, setSelectedFutureApps] = useState(configuredFutureApps);
+    useEffect(() => {
+        if (!!namespaces?.length) {
+            // initialize all states (to avoid undefined errors)
+            setRecordedInitialSources((prev) => {
+                const payload = { ...prev };
+                namespaces.forEach(({ name }) => (payload[name] = payload[name] || []));
+                return payload;
+            });
+            setSelectedSources((prev) => {
+                const payload = { ...prev };
+                namespaces.forEach(({ name }) => (payload[name] = payload[name] || []));
+                return payload;
+            });
+            setSelectedFutureApps((prev) => {
+                const payload = { ...prev };
+                namespaces.forEach(({ name, selected }) => (payload[name] = payload[name] || selected || false));
+                return payload;
+            });
+        }
+    }, [namespaces]);
     useEffect(() => {
-        const listener = (event) => {
-            // Do nothing if clicking ref's element or descendent elements
-            if (!ref.current || ref.current.contains(event.target)) {
-                return;
+        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 : '');
             }
-            handler();
-        };
-        document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
-        return () => {
-            document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
-        };
-    }, [ref, handler]);
+            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 onSelectSource = (source, namespace) => {
+        const id = namespace || selectedNamespace;
+        if (!id)
+            return;
+        const arr = [...(selectedSources[id] || [])];
+        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 };
+            arr[foundIdx] = updatedItem;
+        }
+        else {
+            arr.push({ ...source, selected: true });
+        }
+        setSelectedSources((prev) => ({ ...prev, [id]: arr }));
+    };
+    const onSelectFutureApps = (bool, namespace) => {
+        const id = namespace || selectedNamespace;
+        if (!id)
+            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));
+    };
+    // 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 = {};
+        Object.entries(selectedSources).forEach(([namespace, sources]) => {
+            sources.forEach((source) => {
+                const foundInitial = recordedInitialSources[namespace]?.find((initialSource) => initialSource.name === source.name && initialSource.kind === source.kind);
+                if (foundInitial?.selected !== source.selected) {
+                    if (!payload[namespace])
+                        payload[namespace] = [];
+                    payload[namespace].push({
+                        name: source.name,
+                        kind: source.kind,
+                        selected: source.selected,
+                    });
+                }
+            });
+        });
+        return payload;
+    };
+    // This is to filter the user-specific-selections, therebey minimizing the amount of data sent to the API on "persist namespaces".
+    const getApiFutureAppsPayload = () => {
+        const payload = {};
+        Object.entries(selectedFutureApps).forEach(([namespace, selected]) => {
+            const foundInitial = namespaces?.find((ns) => ns.name === namespace);
+            if (foundInitial?.selected !== selected) {
+                payload[namespace] = selected;
+            }
+        });
+        return payload;
+    };
+    return {
+        recordedInitialSources,
+        filterNamespaces,
+        filterSources,
+        getApiSourcesPayload,
+        getApiFutureAppsPayload,
+        selectedSources,
+        onSelectSource,
+        selectedFutureApps,
+        onSelectFutureApps,
+        onSelectAll,
+        searchText,
+        setSearchText,
+        showSelectedOnly,
+        setShowSelectedOnly,
+    };
 };
 
 // Fallback locale.
@@ -3468,26 +3921,4 @@ const useTimeAgo = () => {
     return timeAgo;
 };
 
-const useTransition = ({ container, animateIn, animateOut, duration = 300 }) => {
-    const Animated = styled(container) `
-    animation-name: ${({ $isEntering, $isLeaving }) => ($isEntering ? animateIn : $isLeaving ? animateOut : 'none')};
-    animation-duration: ${duration}ms;
-    animation-fill-mode: forwards;
-  `;
-    // !! Do not deprecate this "useCallback" hook, it is necessary for the transition to work properly
-    const Transition = useCallback(({ children, enter, ...props }) => {
-        const [mounted, setMounted] = useState(false);
-        useEffect(() => {
-            const t = setTimeout(() => setMounted(enter), duration + 50); // +50ms to ensure the animation is finished
-            return () => clearTimeout(t);
-        }, [enter, duration]);
-        if (!enter && !mounted)
-            return null;
-        return (React.createElement(Animated, { "$isEntering": enter, "$isLeaving": !enter && mounted, ...props }, children));
-    }, 
-    // !! Do not add dependencies here, it will cause re-renders which we want to avoid
-    []);
-    return Transition;
-};
-
-export { useCopy as a, useGenericForm as b, useInstrumentationRuleFormData as c, useKeyDown as d, useOnClickOutside as e, useTimeAgo as f, useTransition as g, useContainerSize as u };
+export { useClickNode as a, useClickNotification as b, useDestinationFormData as c, useGenericForm as d, useInstrumentationRuleFormData as e, useSourceFormData as f, useSourceSelectionFormData as g, useTimeAgo as h, useActionFormData as u };