@odigos/ui-kit 0.0.51 → 0.0.53

package/lib/hooks.js

@@ -1,8 +1,615 @@
-export { u as useActionFormData, a as useClickNotification, b as useDataStreamFormData, c as useDestinationFormData, d as useSessionStorage, e as useSourceFormData, f as useSourceSelectionFormData } from './useSourceSelectionFormData-CwggurLH.js';
-export { u as useClickNode, a as useContainerSize, b as useCopy, c as useGenericForm, d as useInstrumentationRuleFormData, e as useKeyDown, f as useOnClickOutside, g as usePopup, h as useTimeAgo, i as useTransition } from './useTransition-DmHfJSEP.js';
-import './types.js';
-import './index-BC03UmY5.js';
-import 'react';
+import { ActionKeyTypes, ActionType, StatusType, EntityTypes, FieldTypes } from './types.js';
+import { V as useNotificationStore, F as FORM_ALERTS, O as useDrawerStore, W as useEntityStore, Y as useDataStreamStore, _ as useSetupStore } from './index-118aa476.js';
+import { useState, useEffect, useMemo } from 'react';
 import 'styled-components';
-import './index-BnvrwbRB.js';
-import './index-BlZKWuxe.js';
+import { i as isEmpty, s as safeJsonParse } from './index-ec555530.js';
+import { i as useGenericForm } from './useTransition-53e46214.js';
+export { c as useClickNode, b as useContainerSize, h as useCopy, e as useInstrumentationRuleFormData, u as useKeyDown, a as useOnClickOutside, d as usePopup, g as useTimeAgo, f as useTransition } from './useTransition-53e46214.js';
+import { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-6a6bea6e.js';
+
+const INITIAL$2 = {
+    // @ts-expect-error - we know that the field name is in the parsedFields
+    type: '',
+    name: '',
+    notes: '',
+    signals: [],
+    disabled: false,
+    clusterAttributes: null,
+    renames: null,
+    attributeNamesToDelete: null,
+    piiCategories: null,
+    fallbackSamplingRatio: null,
+    samplingPercentage: null,
+    endpointsFilters: null,
+    servicesNameFilters: null,
+    attributeFilters: null,
+};
+const useActionFormData = () => {
+    const { addNotification } = useNotificationStore();
+    const { formData, formErrors, handleFormChange, handleErrorChange, resetFormData } = useGenericForm(INITIAL$2);
+    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 ActionKeyTypes.ClusterAttributes:
+                    if (formData.type === ActionType.AddClusterInfo && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case ActionKeyTypes.Renames:
+                    if (formData.type === ActionType.RenameAttributes && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case ActionKeyTypes.AttributeNamesToDelete:
+                    if (formData.type === ActionType.DeleteAttributes && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case ActionKeyTypes.PiiCategories:
+                    if (formData.type === ActionType.PiiMasking && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case ActionKeyTypes.FallbackSamplingRatio:
+                    if (formData.type === ActionType.ErrorSampler && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case ActionKeyTypes.SamplingPercentage:
+                    if (formData.type === ActionType.ProbabilisticSampler && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    break;
+                case ActionKeyTypes.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;
+                case ActionKeyTypes.ServicesNameFilters:
+                    if (formData.type === ActionType.ServiceNameSampler) {
+                        if (isEmpty(v))
+                            errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                        v?.forEach((objV) => {
+                            if (isEmpty(objV))
+                                errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                        });
+                    }
+                    break;
+                case ActionKeyTypes.AttributeFilters:
+                    if (formData.type === ActionType.SpanAttributeSampler && isEmpty(v))
+                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                    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$2,
+            type,
+        };
+        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 ActionKeyTypes.CollectContainerAttributes:
+                    case ActionKeyTypes.CollectReplicaSetAttributes:
+                    case ActionKeyTypes.CollectWorkloadId:
+                    case ActionKeyTypes.CollectClusterId:
+                    case ActionKeyTypes.LabelsAttributes:
+                    case ActionKeyTypes.AnnotationsAttributes:
+                    case ActionKeyTypes.ClusterAttributes:
+                    case ActionKeyTypes.AttributeNamesToDelete:
+                    case ActionKeyTypes.Renames:
+                    case ActionKeyTypes.PiiCategories:
+                    case ActionKeyTypes.FallbackSamplingRatio:
+                    case ActionKeyTypes.SamplingPercentage:
+                    case ActionKeyTypes.EndpointsFilters:
+                    case ActionKeyTypes.ServicesNameFilters:
+                    case ActionKeyTypes.AttributeFilters: {
+                        // @ts-expect-error - we know that the field name is in the parsedFields
+                        updatedData[k] = v;
+                        break;
+                    }
+                }
+            }
+        });
+        handleFormChange(undefined, undefined, updatedData);
+    };
+    return {
+        formData,
+        formErrors,
+        handleFormChange,
+        resetFormData,
+        validateForm,
+        loadFormWithDrawerItem,
+    };
+};
+
+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;
+            }
+        }
+        markAsSeen(id);
+        if (dismissToast)
+            markAsDismissed(id);
+    };
+    return { onClickNotification };
+};
+
+const useDataStreamFormData = (initialFormData) => {
+    const { addNotification } = useNotificationStore();
+    const { formData, handleFormChange, formErrors, handleErrorChange, resetFormData } = useGenericForm(initialFormData);
+    const validateForm = (params) => {
+        const errors = {};
+        let isValid = true;
+        if (!formData['name']) {
+            isValid = false;
+            errors['name'] = FORM_ALERTS.FIELD_IS_REQUIRED;
+        }
+        else if (!isLegalK8sLabel(formData['name'])) {
+            isValid = false;
+            errors['name'] = FORM_ALERTS.ILLEGAL_K8S_LABEL;
+        }
+        else {
+            errors['name'] = undefined;
+        }
+        if (!isValid && params?.withAlert) {
+            addNotification({
+                type: StatusType.Warning,
+                title: params.alertTitle,
+                message: FORM_ALERTS.REQUIRED_FIELDS,
+                hideFromHistory: true,
+            });
+        }
+        handleErrorChange(undefined, undefined, errors);
+        return isValid;
+    };
+    const loadFormWithDrawerItem = ({ name }) => {
+        const updatedData = {
+            ...initialFormData,
+            name,
+        };
+        handleFormChange(undefined, undefined, updatedData);
+    };
+    return {
+        formData,
+        formErrors,
+        handleFormChange,
+        resetFormData,
+        validateForm,
+        loadFormWithDrawerItem,
+    };
+};
+
+const INITIAL$1 = {
+    // @ts-expect-error - 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$1);
+    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-expect-error - we know that the field name is in the parsedFields
+                            value: parsedFields[field.name],
+                        };
+                    }
+                }
+                return field;
+            }));
+        }
+        else {
+            setDynamicFields([]);
+        }
+    }, [yamlFields, preLoadedFields]);
+    useEffect(() => {
+        if (dynamicFields) {
+            const mapped = dynamicFields.map((field) => ({
+                key: field.name,
+                value: field.value,
+            }));
+            handleFormChange('fields', mapped);
+        }
+    }, [dynamicFields]);
+    useEffect(() => {
+        if (supportedSignals && mapExportedSignals(formData.exportedSignals).length === 0) {
+            const { logs, metrics, traces } = supportedSignals;
+            handleFormChange('exportedSignals', {
+                logs: logs.supported,
+                metrics: metrics.supported,
+                traces: traces.supported,
+            });
+        }
+    }, [supportedSignals, formData]);
+    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;
+            }
+        });
+        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$1,
+            type,
+            name,
+            exportedSignals,
+            fields: Object.entries(safeJsonParse(fields, {})).map(([key, value]) => ({ key, value })),
+        };
+        handleFormChange(undefined, undefined, updatedData);
+        return updatedData;
+    };
+    return {
+        formData,
+        formErrors,
+        handleFormChange,
+        resetFormData,
+        validateForm,
+        loadFormWithDrawerItem,
+        yamlFields,
+        setYamlFields,
+        dynamicFields,
+        setDynamicFields,
+    };
+};
+
+const useSessionStorage = () => {
+    const getItemSS = (key, defaultValue) => {
+        const item = sessionStorage.getItem(key);
+        return item ? safeJsonParse(item, defaultValue) : defaultValue;
+    };
+    const setItemSS = (key, value) => {
+        sessionStorage.setItem(key, JSON.stringify(value));
+    };
+    const removeItemSS = (key) => {
+        sessionStorage.removeItem(key);
+    };
+    return { getItemSS, setItemSS, removeItemSS };
+};
+
+const INITIAL = {
+    otelServiceName: '',
+    currentStreamName: '',
+};
+const useSourceFormData = () => {
+    const { formData, formErrors, handleFormChange, handleErrorChange, resetFormData } = useGenericForm(INITIAL);
+    const validateForm = () => {
+        // We don't have any specific validations for this form yet
+        handleErrorChange(undefined, undefined, {});
+        return true;
+    };
+    const loadFormWithDrawerItem = ({ otelServiceName, name }) => {
+        const updatedData = {
+            ...INITIAL,
+            otelServiceName: otelServiceName || name || '',
+        };
+        handleFormChange(undefined, undefined, updatedData);
+    };
+    return {
+        formData,
+        formErrors,
+        handleFormChange,
+        resetFormData,
+        validateForm,
+        loadFormWithDrawerItem,
+    };
+};
+
+const mapToAvailableSource = (source, selectedStreamName, selectAll) => {
+    const isBooleanOverride = typeof selectAll === 'boolean';
+    const isInCurrentStream = source.dataStreamNames?.includes(selectedStreamName) || source.currentStreamName === selectedStreamName;
+    const selected = (isBooleanOverride ? selectAll : source.selected) || false;
+    return {
+        namespace: source.namespace,
+        name: source.name,
+        kind: source.kind,
+        selected: isInCurrentStream || isBooleanOverride ? selected : false,
+        numberOfInstances: source.numberOfInstances,
+    };
+};
+const mapToSelectedSource = (source, selectedStreamName, selectAll) => {
+    return {
+        ...mapToAvailableSource(source, selectedStreamName, selectAll),
+        currentStreamName: selectedStreamName,
+    };
+};
+const mapToSelectedNamespace = (ns, selectedStreamName, selectAll) => {
+    const isBooleanOverride = typeof selectAll === 'boolean';
+    const isInCurrentStream = ns.dataStreamNames?.includes(selectedStreamName);
+    const selected = (isBooleanOverride ? selectAll : ns.selected) || false;
+    return {
+        namespace: ns.name,
+        selected: isInCurrentStream || isBooleanOverride ? selected : false,
+        currentStreamName: selectedStreamName,
+    };
+};
+const mergeAvailableAndSelectedSources = (available, selected, currentStreamName) => {
+    const payload = {};
+    Object.entries(available).forEach(([namespace, sources]) => {
+        payload[namespace] = sources.map((s) => mapToSelectedSource(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 = mapToSelectedSource(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: 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 [availableSources, setRecordedInitialSources] = useState(availableSourcesFromStore);
+    const [selectedNamespace, setSelectedNamespace] = useState('');
+    const [selectedFutureApps, setSelectedFutureApps] = useState(configuredFutureApps);
+    const [selectedSources, setSelectedSources] = useState(mergeAvailableAndSelectedSources(availableSourcesFromStore, configuredSources, selectedStreamName));
+    const fetchAndSetThisNamespace = async (ns, selectAll) => {
+        if (fetchSingleNamespace) {
+            const { data } = await fetchSingleNamespace({ variables: { namespaceName: ns.name } });
+            const { name, sources = [] } = data?.computePlatform?.k8sActualNamespace || {};
+            if (!name)
+                return;
+            setRecordedInitialSources((prev) => ({
+                ...prev,
+                [name]: sources.map((s) => mapToAvailableSource(s, selectedStreamName)),
+            }));
+            setSelectedSources((prev) => ({
+                ...prev,
+                [name]: typeof selectAll !== 'boolean' && prev[name]?.length ? prev[name] : sources.map((s) => mapToSelectedSource(s, selectedStreamName, selectAll)),
+            }));
+        }
+    };
+    useEffect(() => {
+        if (!!namespaces?.length) {
+            // initialize empty 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((ns) => (payload[ns.name] = payload[ns.name] || mapToSelectedNamespace(ns, selectedStreamName)));
+                return payload;
+            });
+            (async () => {
+                for await (const ns of namespaces)
+                    await fetchAndSetThisNamespace(ns);
+            })();
+        }
+    }, [namespaces, selectedStreamName]);
+    // form filters
+    const [searchText, setSearchText] = useState('');
+    const [searchBy, setSearchBy] = useState(EntityTypes.Source);
+    const [showSelectedOnly, setShowSelectedOnly] = useState(false);
+    const onSelectNamespace = (nsName, selectAll) => {
+        const ns = namespaces.find((namespace) => namespace.name === nsName);
+        if (ns) {
+            setSelectedNamespace((prev) => (prev === nsName && typeof selectAll !== 'boolean' ? '' : nsName));
+            fetchAndSetThisNamespace(ns, selectAll);
+        }
+    };
+    const onSelectSource = (source, nsName) => {
+        const id = nsName || 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, currentStreamName: selectedStreamName };
+            arr[foundIdx] = updatedItem;
+        }
+        else {
+            arr.push({ ...source, selected: true, currentStreamName: selectedStreamName });
+        }
+        setSelectedSources((prev) => ({ ...prev, [id]: arr }));
+    };
+    const onSelectFutureApps = (bool, nsName) => {
+        const id = nsName || selectedNamespace;
+        if (!id)
+            return;
+        const ns = namespaces.find((namespace) => namespace.name === nsName);
+        if (ns)
+            setSelectedFutureApps((prev) => ({ ...prev, [id]: mapToSelectedNamespace(ns, selectedStreamName, bool) }));
+    };
+    const filteredNamespacesAndSources = useMemo(() => {
+        const isSearchOk = (targetText, entityType) => !searchText || searchBy !== entityType || (searchBy === entityType && targetText.toLowerCase().includes(searchText));
+        const isOnlySelectedOk = (source) => !showSelectedOnly || source.selected;
+        const payload = {};
+        const filteredNamespacesMatrix = Object.entries(selectedSources).filter(([ns]) => {
+            return isSearchOk(ns, EntityTypes.Namespace);
+        });
+        filteredNamespacesMatrix.forEach(([ns, srcs]) => {
+            payload[ns] = srcs.filter((src) => isSearchOk(src.name, EntityTypes.Source) && isOnlySelectedOk(src));
+        });
+        return payload;
+    }, [selectedSources, searchText, searchBy, 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 = {};
+        Object.entries(selectedSources).forEach(([namespace, sources]) => {
+            sources.forEach((source) => {
+                const foundInitial = availableSources[namespace]?.find((src) => src.name === source.name && src.kind === source.kind);
+                if (foundInitial?.selected !== source.selected) {
+                    if (!payload[namespace])
+                        payload[namespace] = [];
+                    payload[namespace].push(source);
+                }
+            });
+        });
+        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, obj]) => {
+            const foundInitial = namespaces?.find((ns) => ns.name === namespace);
+            if ((obj.selected && !foundInitial?.dataStreamNames?.includes(selectedStreamName)) || (!obj.selected && foundInitial?.dataStreamNames?.includes(selectedStreamName))) {
+                payload[namespace] = obj;
+            }
+        });
+        return payload;
+    };
+    return {
+        availableSources,
+        filteredNamespacesAndSources,
+        getApiSourcesPayload,
+        getApiFutureAppsPayload,
+        selectedNamespace,
+        onSelectNamespace,
+        selectedSources,
+        onSelectSource,
+        selectedFutureApps,
+        onSelectFutureApps,
+        searchText,
+        setSearchText,
+        searchBy,
+        setSearchBy,
+        showSelectedOnly,
+        setShowSelectedOnly,
+    };
+};
+
+export { useActionFormData, useClickNotification, useDataStreamFormData, useDestinationFormData, useGenericForm, useSessionStorage, useSourceFormData, useSourceSelectionFormData };

package/lib/icons/common/index.d.ts

@@ -21,5 +21,6 @@ export * from './sort-arrows-icon/index';
 export * from './terminal-icon/index';
 export * from './trash-icon/index';
 export * from './user-group-icon/index';
+export * from './user-settings-icon/index';
 export * from './user-icon/index';
 export * from './x-icon/index';

package/lib/icons/common/user-settings-icon/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const UserSettingsIcon: SVG;

package/lib/icons.js

@@ -1,10 +1,10 @@
-import { T as Theme } from './index-BC03UmY5.js';
-export { r as AddClusterInfoIcon, z as CPlusPlusLogo, E as CSharpLogo, C as CodeAttributesIcon, x as CustomInstrumentationIcon, s as DeleteAttributeIcon, G as DotnetLogo, J as ElixirLogo, N as GoLogo, H as HeadersCollectionIcon, v as ImageErrorIcon, O as JavaLogo, K as K8sLogo, w as KafkaLogo, Q as MysqlLogo, U as NginxLogo, V as NodejsLogo, y as PayloadCollectionIcon, W as PhpLogo, P as PiiMaskingIcon, X as PostgresLogo, Y as PythonLogo, Z as RedisLogo, R as RenameAttributeIcon, _ as RubyLogo, $ as RustLogo, t as SamplerIcon, a0 as SwiftLogo } from './index-BC03UmY5.js';
-export { C as CheckCircledIcon, E as ErrorTriangleIcon, I as InfoIcon, L as LogsIcon, M as MetricsIcon, O as OdigosLogo, T as TracesIcon, W as WarningTriangleIcon } from './index-H8TwBQHm.js';
-export { C as CrossCircledIcon, D as DataStreamsIcon, F as FilterIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, R as RetryIcon, S as SlackLogo, T as TerminalIcon, U as UserIcon } from './index-LgzkJ05H.js';
-export { A as ArrowIcon, h as CheckIcon, C as CodeIcon, a as CopyIcon, i as CrossIcon, E as EditIcon, b as EditedIcon, c as ExtendArrowIcon, f as EyeClosedIcon, g as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, d as NotebookIcon, P as PlusIcon, S as SearchIcon, e as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-CyHOJpMl.js';
+import { T as Theme } from './index-118aa476.js';
+export { f as AddClusterInfoIcon, n as CPlusPlusLogo, o as CSharpLogo, C as CodeAttributesIcon, l as CustomInstrumentationIcon, h as DeleteAttributeIcon, p as DotnetLogo, E as ElixirLogo, G as GoLogo, H as HeadersCollectionIcon, j as ImageErrorIcon, J as JavaLogo, K as K8sLogo, k as KafkaLogo, q as MysqlLogo, N as NginxLogo, r as NodejsLogo, m as PayloadCollectionIcon, s as PhpLogo, P as PiiMaskingIcon, t as PostgresLogo, u as PythonLogo, v as RedisLogo, R as RenameAttributeIcon, w as RubyLogo, x as RustLogo, i as SamplerIcon, y as SwiftLogo } from './index-118aa476.js';
+export { C as CheckCircledIcon, E as ErrorTriangleIcon, I as InfoIcon, L as LogsIcon, M as MetricsIcon, O as OdigosLogo, T as TracesIcon, W as WarningTriangleIcon } from './index-974c5344.js';
+export { C as CrossCircledIcon, D as DataStreamsIcon, F as FilterIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, R as RetryIcon, S as SlackLogo, T as TerminalIcon, U as UserIcon } from './index-f64b0a7d.js';
+export { A as ArrowIcon, h as CheckIcon, C as CodeIcon, a as CopyIcon, i as CrossIcon, E as EditIcon, b as EditedIcon, c as ExtendArrowIcon, f as EyeClosedIcon, g as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, d as NotebookIcon, P as PlusIcon, S as SearchIcon, e as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-f40b593d.js';
 import React from 'react';
-export { a3 as ActionsIcon, A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, c as AwsCloudwatchLogo, d as AwsS3Logo, e as AwsXrayLogo, f as AxiomLogo, B as BetterStackLogo, g as BlobStorageLogo, h as BonreeLogo, C as CauselyLogo, i as ChecklyLogo, j as ChronosphereLogo, k as ClickhouseLogo, l as CoralogixLogo, D as Dash0Logo, m as DatadogLogo, a4 as DestinationsIcon, n as DynatraceLogo, E as ElasticApmLogo, o as ElasticSearchLogo, G as GigapipeLogo, p as GoogleCloudPlatformLogo, q as GrafanaLogo, r as GreptimeLogo, s as GroundcoverLogo, H as HoneycombLogo, t as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, u as LightstepLogo, v as LogzioLogo, w as LokiLogo, x as LumigoLogo, M as MiddlewareLogo, a5 as NamespacesIcon, N as NewRelicLogo, O as ObserveLogo, y as OneUptimeLogo, z as OpenObserveLogo, F as OpenTelemetryLogo, P as OpsVerseLogo, Q as OracleLogo, R as PrometheusLogo, S as QrynLogo, T as QuickwitLogo, a6 as RulesIcon, U as SeqLogo, W as SignozLogo, a7 as SourcesIcon, X as SplunkLogo, Y as SumoLogicLogo, Z as TelemetryHubLogo, _ as TempoLogo, $ as TingyunLogo, a0 as TraceloopLogo, a1 as UptraceLogo, a2 as VictoriaMetricsLogo, V as VmLogo } from './index-CMsBAVAn.js';
+export { a3 as ActionsIcon, A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, c as AwsCloudwatchLogo, d as AwsS3Logo, e as AwsXrayLogo, f as AxiomLogo, B as BetterStackLogo, g as BlobStorageLogo, h as BonreeLogo, C as CauselyLogo, i as ChecklyLogo, j as ChronosphereLogo, k as ClickhouseLogo, l as CoralogixLogo, D as Dash0Logo, m as DatadogLogo, a4 as DestinationsIcon, n as DynatraceLogo, E as ElasticApmLogo, o as ElasticSearchLogo, G as GigapipeLogo, p as GoogleCloudPlatformLogo, q as GrafanaLogo, r as GreptimeLogo, s as GroundcoverLogo, H as HoneycombLogo, t as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, u as LightstepLogo, v as LogzioLogo, w as LokiLogo, x as LumigoLogo, M as MiddlewareLogo, a5 as NamespacesIcon, N as NewRelicLogo, O as ObserveLogo, y as OneUptimeLogo, z as OpenObserveLogo, F as OpenTelemetryLogo, P as OpsVerseLogo, Q as OracleLogo, R as PrometheusLogo, S as QrynLogo, T as QuickwitLogo, a6 as RulesIcon, U as SeqLogo, W as SignozLogo, a7 as SourcesIcon, X as SplunkLogo, Y as SumoLogicLogo, Z as TelemetryHubLogo, _ as TempoLogo, $ as TingyunLogo, a0 as TraceloopLogo, a1 as UptraceLogo, a2 as VictoriaMetricsLogo, V as VmLogo } from './index-b833b336.js';
 import './types.js';
 import 'styled-components';
 
@@ -43,6 +43,13 @@ const UserGroupIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, strokeWidth: '1', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M5.09178 10.5161C3.84575 9.83853 3 8.51792 3 6.99978C3 5.48163 3.84576 4.16101 5.09182 3.4834M3.02937 15.4169C1.82391 16.0405 1 17.2989 1 18.7498C1 19.7863 1.70087 20.6591 2.65456 20.9201M21.3454 20.9201C22.2991 20.6591 23 19.7863 23 18.7498C23 17.2989 22.1761 16.0406 20.9706 15.417M18.9082 10.5161C20.1543 9.83853 21 8.51792 21 6.99978C21 5.48162 20.1542 4.16101 18.9082 3.4834M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7ZM8.25 21H15.75C16.9926 21 18 19.9926 18 18.75C18 16.6789 16.3211 15 14.25 15H9.75C7.67893 15 6 16.6789 6 18.75C6 19.9926 7.00736 21 8.25 21Z' })));
 };
 
+const UserSettingsIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
+    const theme = Theme.useTheme();
+    const fill = f || theme.text.secondary;
+    return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+        React.createElement("path", { stroke: fill, strokeWidth: '1', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M11.1758 15H8C5.79086 15 4 16.7909 4 19C4 20.1046 4.89543 21 6 21H11.1758M18 18H18.01M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7ZM18 14L19.1787 15.1545L20.8284 15.1716L20.8455 16.8213L22 18L20.8455 19.1787L20.8284 20.8284L19.1787 20.8455L18 22L16.8213 20.8455L15.1716 20.8284L15.1545 19.1787L14 18L15.1545 16.8213L15.1716 15.1716L16.8213 15.1545L18 14Z' })));
+};
+
 const GoogleCloudStorageLogo = ({ size = 16, fill, rotate = 0, onClick }) => {
     return (React.createElement("svg", { width: size, height: size * (65 / 81), viewBox: '0 0 81 65', xmlns: 'http://www.w3.org/2000/svg', fill: '#ffffff', fillRule: 'evenodd', stroke: '#000000', strokeLinecap: 'round', strokeLinejoin: 'round', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
         React.createElement("defs", null,
@@ -137,4 +144,4 @@ const ErrorRoundIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
         React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M7 8.33673V6.00339M7 10.3055V10.3061M12.25 7.97266C12.25 10.8722 9.89949 13.2227 7 13.2227C4.1005 13.2227 1.75 10.8721 1.75 7.97265C1.75 5.07316 4.10051 2.72266 7 2.72266C9.8995 2.72266 12.25 5.07316 12.25 7.97266Z' })));
 };
 
-export { AvatarIcon, CodeBracketsIcon, CommandIcon, ConnectionsIcon, ErrorRoundIcon, FolderIcon, GoogleCloudStorageLogo, LightOffIcon, LightOnIcon, MinusCircledIcon, MoonIcon, PlusCircledIcon, SentryLogo, ServiceMapIcon, SunIcon, TraceViewIcon, UserGroupIcon };
+export { AvatarIcon, CodeBracketsIcon, CommandIcon, ConnectionsIcon, ErrorRoundIcon, FolderIcon, GoogleCloudStorageLogo, LightOffIcon, LightOnIcon, MinusCircledIcon, MoonIcon, PlusCircledIcon, SentryLogo, ServiceMapIcon, SunIcon, TraceViewIcon, UserGroupIcon, UserSettingsIcon };