@devtron-labs/devtron-fe-common-lib 1.2.5-beta-11 → 1.2.5-beta-13

package/dist/{@common-rjsf-CzIa4Fr9.js → @common-rjsf-BBfFhcwN.js}

@@ -2,7 +2,7 @@ import { j as n, J as A } from "./@vendor-DI8rS9OQ.js";
 import E, { forwardRef as $ } from "react";
 import L, { getDefaultRegistry as k } from "@rjsf/core";
 import D from "@rjsf/validator-ajv8";
-import { T as y, c as H, a as J, d as w } from "./@code-editor-Dmahpc3a.js";
+import { T as y, c as H, a as J, d as w } from "./@code-editor-CzAjJrLY.js";
 import M, { components as O } from "react-select";
 import { getUiOptions as B, getTemplate as I, getSubmitButtonOptions as U, ADDITIONAL_PROPERTY_FLAG as P, errorId as W, englishStringTranslator as V, TranslatableString as q, titleId as K, canExpand as Y, deepEquals as z } from "@rjsf/utils";
 import { ReactComponent as G } from "./assets/ic-chevron-down.fc70d7a7.svg";

package/dist/Common/CustomTagSelector/ResizableTagTextArea.d.ts

@@ -1,2 +1,2 @@
 import { ResizableTagTextAreaProps } from './Types';
-export declare const ResizableTagTextArea: ({ className, minHeight, maxHeight, value, onChange, onBlur, onFocus, placeholder, tabIndex, refVar, dependentRef, dataTestId, handleKeyDown, disabled, disableOnBlurResizeToMinHeight, }: ResizableTagTextAreaProps) => JSX.Element;
+export declare const ResizableTagTextArea: ({ value, minHeight, maxHeight, onBlur, onFocus, refVar, dependentRef, dependentRefs, className, disableOnBlurResizeToMinHeight, id, ...restProps }: ResizableTagTextAreaProps) => JSX.Element;

package/dist/Common/CustomTagSelector/Types.d.ts

@@ -1,3 +1,4 @@
+import { DetailedHTMLProps, MutableRefObject, TextareaHTMLAttributes } from 'react';
 import { KEY_VALUE } from '../Constants';
 import { OptionType } from '../Types';
 export interface SuggestedTagOptionType extends OptionType {
@@ -48,24 +49,16 @@ export interface TagLabelValueSelectorType {
     tagInputType?: KEY_VALUE;
     placeholder?: string;
     tabIndex?: number;
-    refVar?: React.MutableRefObject<HTMLTextAreaElement>;
-    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>;
+    refVar?: MutableRefObject<HTMLTextAreaElement>;
+    dependentRef?: MutableRefObject<HTMLTextAreaElement>;
     noBackDrop?: boolean;
 }
-export interface ResizableTagTextAreaProps {
-    className?: string;
+export interface ResizableTagTextAreaProps extends Omit<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'value'> {
     minHeight?: number;
     maxHeight?: number;
-    value?: string;
-    onChange?: (e: any) => void;
-    onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
-    placeholder?: string;
-    tabIndex?: number;
-    refVar?: React.MutableRefObject<HTMLTextAreaElement>;
-    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>;
-    dataTestId?: string;
-    handleKeyDown?: any;
-    disabled?: boolean;
+    value: string;
+    refVar?: MutableRefObject<HTMLTextAreaElement>;
+    dependentRef?: MutableRefObject<HTMLTextAreaElement>;
+    dependentRefs?: Record<string | number, MutableRefObject<HTMLTextAreaElement>>;
     disableOnBlurResizeToMinHeight?: boolean;
 }

package/dist/Common/Helper.d.ts

@@ -2,6 +2,7 @@ import { default as React, SyntheticEvent } from 'react';
 import { JSONPathOptions } from 'jsonpath-plus';
 import { AsyncOptions, UseSearchString } from './Types';
 import { scrollableInterface } from '../Shared';
+import * as Sentry from '@sentry/browser';
 export declare function showError(serverError: any, showToastOnUnknownError?: boolean, hideAccessError?: boolean): void;
 interface ConditionalWrapper<T> {
     condition: boolean;
@@ -45,7 +46,7 @@ export declare const getUrlWithSearchParams: <T extends string | number = string
 /**
  * Custom exception logger function for logging errors to sentry
  */
-export declare const logExceptionToSentry: any;
+export declare const logExceptionToSentry: typeof Sentry.captureException;
 export declare const customStyles: {
     control: (base: any, state: any) => any;
     indicatorSeparator: (base: any, state: any) => any;

package/dist/Common/SegmentedControl/SegmentedControl.component.d.ts

@@ -0,0 +1,3 @@
+import { SegmentedControlProps } from './types';
+declare const SegmentedControl: ({ tabs, initialTab, onChange, tooltips, disabled, rootClassName, variant, }: SegmentedControlProps) => JSX.Element;
+export default SegmentedControl;

package/dist/Common/SegmentedControl/index.d.ts

@@ -0,0 +1,2 @@
+export { type SegmentedControlProps, SegmentedControlVariant } from './types';
+export { default as SegmentedControl } from './SegmentedControl.component';

package/dist/Common/SegmentedControl/types.d.ts

@@ -0,0 +1,14 @@
+import { OptionType } from '../Types';
+export declare enum SegmentedControlVariant {
+    GRAY_ON_WHITE = "gui-yaml-switch",
+    WHITE_ON_GRAY = "gui-yaml-switch-window-bg"
+}
+export interface SegmentedControlProps {
+    tabs: OptionType[];
+    initialTab: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    tooltips?: string[];
+    disabled?: boolean;
+    rootClassName?: string;
+    variant?: SegmentedControlVariant;
+}

package/dist/Common/Types.d.ts

@@ -1,4 +1,5 @@
 import { default as React, ReactNode, CSSProperties, ReactElement, MutableRefObject } from 'react';
+import { TippyProps } from '@tippyjs/react';
 import { Placement } from 'tippy.js';
 import { UserGroupDTO } from '../Pages/GlobalConfigurations';
 import { ImageComment, ReleaseTag } from './ImageTags.Types';
@@ -65,7 +66,7 @@ export interface CheckboxProps {
     id?: string;
     dataTestId?: string;
 }
-export interface TippyCustomizedProps {
+export interface TippyCustomizedProps extends Pick<TippyProps, 'appendTo'> {
     theme: TippyTheme;
     visible?: boolean;
     heading?: ReactNode | string;

package/dist/Common/index.d.ts

@@ -53,3 +53,4 @@ export * from './SegmentedBarChart';
 export * from './CodeEditor';
 export * from './AppStatus';
 export * from './Tooltip';
+export * from './SegmentedControl';

package/dist/Shared/Components/ConfirmationModal/types.d.ts

@@ -33,12 +33,7 @@ type CustomInputConfigOrChildrenType = {
     customInputConfig?: never;
     children?: never;
 };
-export type ConfirmationModalProps = {
-    title: string;
-    subtitle: ReactNode;
-    handleClose: (e?: SyntheticEvent) => void;
-    showConfirmationModal: boolean;
-} & ({
+type ButtonConfigAndVariantType = {
     variant: Exclude<ConfirmationModalVariantType, ConfirmationModalVariantType.custom>;
     Icon?: never;
     buttonConfig: ButtonConfig<Pick<ButtonProps, 'isLoading' | 'disabled'>, Pick<ButtonProps, 'disabled'>>;
@@ -46,5 +41,12 @@ export type ConfirmationModalProps = {
     variant: ConfirmationModalVariantType.custom;
     Icon: FunctionComponent<SVGProps<SVGSVGElement>>;
     buttonConfig: ButtonConfig<Pick<ButtonProps, 'isLoading' | 'disabled' | 'style'>, Pick<ButtonProps, 'disabled' | 'style'>>;
-}) & CustomInputConfigOrChildrenType;
+};
+export type ConfirmationModalProps = {
+    title: string;
+    subtitle: ReactNode;
+    handleClose: (e?: SyntheticEvent) => void;
+    showConfirmationModal: boolean;
+} & ButtonConfigAndVariantType & CustomInputConfigOrChildrenType;
+export type ConfirmationModalBodyProps = Omit<ConfirmationModalProps, 'showConfirmationModal'>;
 export {};

package/dist/Shared/Components/DynamicDataTable/DynamicDataTable.d.ts

@@ -0,0 +1,2 @@
+import { DynamicDataTableProps } from './types';
+export declare const DynamicDataTable: <K extends string, CustomStateType = Record<string, unknown>>({ headers, ...props }: DynamicDataTableProps<K, CustomStateType>) => JSX.Element;

package/dist/Shared/Components/DynamicDataTable/DynamicDataTableHeader.d.ts

@@ -0,0 +1,2 @@
+import { DynamicDataTableHeaderProps } from './types';
+export declare const DynamicDataTableHeader: <K extends string, CustomStateType = Record<string, unknown>>({ headers, rows, sortingConfig, onRowAdd, readOnly, isAdditionNotAllowed, isDeletionNotAllowed, headerComponent, actionButtonConfig, }: DynamicDataTableHeaderProps<K, CustomStateType>) => JSX.Element;

package/dist/Shared/Components/DynamicDataTable/DynamicDataTableRow.d.ts

@@ -0,0 +1,2 @@
+import { DynamicDataTableRowProps } from './types';
+export declare const DynamicDataTableRow: <K extends string, CustomStateType = Record<string, unknown>>({ rows, headers, readOnly, isDeletionNotAllowed, cellError, actionButtonConfig, onRowEdit, onRowDelete, leadingCellIcon, trailingCellIcon, buttonCellWrapComponent, }: DynamicDataTableRowProps<K, CustomStateType>) => JSX.Element;

package/dist/Shared/Components/DynamicDataTable/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const ACTION_BUTTON_DEFAULT_WIDTH = "33px";
+export declare const DELETE_BUTTON_WIDTH = "33px";

package/dist/Shared/Components/DynamicDataTable/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DynamicDataTable';
+export * from './types';

package/dist/Shared/Components/DynamicDataTable/types.d.ts

@@ -0,0 +1,162 @@
+import { DetailedHTMLProps, ReactElement, ReactNode } from 'react';
+import { ResizableTagTextAreaProps } from '../../../Common/CustomTagSelector';
+import { UseStateFiltersReturnType } from '../../../Common/Hooks';
+import { TooltipProps } from '@Common/Tooltip/types';
+import { SelectPickerOptionType, SelectPickerProps } from '../SelectPicker';
+import { SelectTextAreaProps } from '../SelectTextArea';
+/**
+ * Interface representing header for a dynamic data table.
+ * @template K - A string representing the key type.
+ */
+export type DynamicDataTableHeaderType<K extends string> = {
+    /** The display label of the header, shown in the table's column header. */
+    label: string;
+    /** The unique key associated with the header, used to map the column to data fields. */
+    key: K;
+    /** The width of the column, defined as a CSS string (e.g., "100px", "10%", "1fr", or "auto"). */
+    width: string;
+    /** An optional boolean indicating whether the column is sortable. */
+    isSortable?: boolean;
+    /** An optional boolean to control the visibility of the column. */
+    isHidden?: boolean;
+};
+export declare enum DynamicDataTableRowDataType {
+    TEXT = "text",
+    DROPDOWN = "dropdown",
+    SELECT_TEXT = "select-text",
+    BUTTON = "button"
+}
+export type DynamicDataTableCellPropsMap = {
+    [DynamicDataTableRowDataType.TEXT]: Omit<ResizableTagTextAreaProps, 'id' | 'className' | 'minHeight' | 'maxHeight' | 'value' | 'onChange' | 'disabled' | 'disableOnBlurResizeToMinHeight' | 'refVar' | 'dependentRef'>;
+    [DynamicDataTableRowDataType.DROPDOWN]: Omit<SelectPickerProps<string, false>, 'inputId' | 'value' | 'onChange' | 'fullWidth' | 'isDisabled'>;
+    [DynamicDataTableRowDataType.SELECT_TEXT]: Omit<SelectTextAreaProps, 'value' | 'onChange' | 'inputId' | 'isDisabled' | 'dependentRef' | 'refVar' | 'textAreaProps'> & {
+        textAreaProps?: Omit<SelectTextAreaProps['textAreaProps'], 'className' | 'disableOnBlurResizeToMinHeight' | 'minHeight' | 'maxHeight'>;
+    };
+    [DynamicDataTableRowDataType.BUTTON]: Pick<DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'onClick'> & {
+        icon?: ReactNode;
+        text: string;
+    };
+};
+type DynamicDataTableCellData<T extends keyof DynamicDataTableCellPropsMap = keyof DynamicDataTableCellPropsMap> = T extends keyof DynamicDataTableCellPropsMap ? {
+    type: T;
+    props: DynamicDataTableCellPropsMap[T];
+} : never;
+/**
+ * Type representing a key-value row.
+ * @template K - A string representing the key type.
+ */
+export type DynamicDataTableRowType<K extends string, CustomStateType = Record<string, unknown>> = {
+    data: {
+        [key in K]: {
+            value: string;
+            disabled?: boolean;
+            /** An optional boolean indicating if an asterisk should be shown. */
+            required?: boolean;
+            /** An optional tooltip to show when hovering over cell. */
+            tooltip?: Partial<Pick<TooltipProps, 'content' | 'className'>>;
+        } & DynamicDataTableCellData;
+    };
+    id: string | number;
+    /** */
+    customState?: CustomStateType;
+    /** An optional boolean indicating if row deletion is disabled. */
+    disableDelete?: boolean;
+};
+/**
+ * Represents the validation state of a cell in a dynamic data table.
+ */
+export type DynamicDataTableCellValidationState = {
+    isValid: boolean;
+    errorMessages: string[];
+};
+/**
+ * Defines the structure of validation errors for a cell.
+ *
+ * `K` represents the column `key` of the cell (i.e., the column identifiers).
+ */
+export type DynamicDataTableCellErrorType<K extends string> = {
+    [rowId: string | number]: Partial<Record<K, DynamicDataTableCellValidationState>>;
+};
+type DynamicDataTableCellIcon<K extends string, CustomStateType = Record<string, unknown>> = {
+    [key in K]?: (row: DynamicDataTableRowType<K, CustomStateType>) => ReactNode;
+};
+/**
+ * Interface representing the properties for the dynamic data table component.
+ * @template K - A string representing the key type.
+ */
+export type DynamicDataTableProps<K extends string, CustomStateType = Record<string, unknown>> = {
+    /**
+     * An array containing the headers for the data table. \
+     * Each header defines a column with its label, key, width, and optional settings.
+     */
+    headers: DynamicDataTableHeaderType<K>[];
+    /**
+     * An array of rows where each row contains data corresponding to the table headers.
+     */
+    rows: DynamicDataTableRowType<K, CustomStateType>[];
+    /** Optional configuration for sorting the table. */
+    sortingConfig?: Pick<UseStateFiltersReturnType<K>, 'sortBy' | 'sortOrder' | 'handleSorting'>;
+    /** Optional configuration for displaying an icon in the leading position of a cell. */
+    leadingCellIcon?: DynamicDataTableCellIcon<K, CustomStateType>;
+    /** Optional configuration for displaying an icon in the trailing position of a cell. */
+    trailingCellIcon?: DynamicDataTableCellIcon<K, CustomStateType>;
+    /** An optional function to render a custom wrapper component for the type `DynamicDataTableRowDataType.BUTTON`. */
+    buttonCellWrapComponent?: (row: DynamicDataTableRowType<K, CustomStateType>) => ReactElement;
+    /** An optional React node for a custom header component. */
+    headerComponent?: ReactNode;
+    /** When true, data addition field will not be shown. */
+    isAdditionNotAllowed?: boolean;
+    /** When true, data addition field will not be shown. */
+    isDeletionNotAllowed?: boolean;
+    /** When true, data add or update is disabled. */
+    readOnly?: boolean;
+    /** Function to handle the addition of a new row to the table. */
+    onRowAdd: () => void;
+    /**
+     * Function to handle changes in the table rows.
+     * @param row - The row that changed.
+     * @param headerKey - The key of the header that changed.
+     * @param value - The value of the cell.
+     * @param extraData - Additional data, such as a selected value for dropdowns.
+     */
+    onRowEdit: (row: DynamicDataTableRowType<K, CustomStateType>, headerKey: K, value: string, extraData: {
+        selectedValue?: SelectPickerOptionType<string>;
+    }) => void;
+    /**
+     * Function to handle row deletions.
+     * @param row - The row that was deleted.
+     */
+    onRowDelete: (row: DynamicDataTableRowType<K, CustomStateType>) => void;
+    /** Optional configuration for rendering a custom action button in a row. */
+    actionButtonConfig?: {
+        /**
+         * Function to render the action button.
+         * @param row - The current row being rendered.
+         * @returns A React node representing the action button.
+         */
+        renderer: (row: DynamicDataTableRowType<K, CustomStateType>) => ReactNode;
+        /**
+         * This represents under which header key the action button will be rendered.
+         */
+        key: K;
+        /**
+         * The width of the action button.
+         * @default '33px'
+         */
+        width?: string;
+        /**
+         * The position of the action button under the header key.
+         * @default 'start'
+         */
+        position?: 'start' | 'end';
+    };
+    /**
+     * Validation state for a specific cell in a dynamic data table.
+     */
+    cellError?: DynamicDataTableCellErrorType<K>;
+};
+export interface DynamicDataTableHeaderProps<K extends string, CustomStateType = Record<string, unknown>> extends Pick<DynamicDataTableProps<K, CustomStateType>, 'headers' | 'rows' | 'headerComponent' | 'sortingConfig' | 'onRowAdd' | 'readOnly' | 'isAdditionNotAllowed' | 'isDeletionNotAllowed' | 'actionButtonConfig'> {
+}
+export interface DynamicDataTableRowProps<K extends string, CustomStateType = Record<string, unknown>> extends Pick<DynamicDataTableProps<K, CustomStateType>, 'rows' | 'headers' | 'isAdditionNotAllowed' | 'isDeletionNotAllowed' | 'readOnly' | 'onRowEdit' | 'onRowDelete' | 'actionButtonConfig' | 'cellError' | 'leadingCellIcon' | 'trailingCellIcon' | 'buttonCellWrapComponent'> {
+}
+export {};

package/dist/Shared/Components/DynamicDataTable/utils.d.ts

@@ -0,0 +1,5 @@
+import { DynamicDataTableHeaderType, DynamicDataTableProps, DynamicDataTableRowDataType } from './types';
+export declare const getActionButtonPosition: <K extends string, CustomStateType = Record<string, unknown>>({ headers, actionButtonConfig, }: Pick<DynamicDataTableProps<K, CustomStateType>, "headers" | "actionButtonConfig">) => number;
+export declare const getHeaderGridTemplateColumn: <K extends string, CustomStateType = Record<string, unknown>>(headers: DynamicDataTableHeaderType<K>[], actionButtonConfig: DynamicDataTableProps<K, CustomStateType>["actionButtonConfig"], noDeleteBtn: boolean) => string;
+export declare const getRowGridTemplateColumn: <K extends string, CustomStateType = Record<string, unknown>>(headers: DynamicDataTableHeaderType<K>[], actionButtonConfig: DynamicDataTableProps<K, CustomStateType>["actionButtonConfig"], noDeleteBtn: boolean) => string;
+export declare const rowTypeHasInputField: (type: DynamicDataTableRowDataType) => boolean;

package/dist/Shared/Components/InvalidYAMLTippy/utils.d.ts

@@ -1,2 +1,4 @@
 import { InvalidYAMLTippyWrapperProps } from './types';
-export declare const getInvalidTippyContent: ({ parsingError, restoreLastSavedYAML, }: Pick<InvalidYAMLTippyWrapperProps, "parsingError" | "restoreLastSavedYAML">) => JSX.Element;
+export declare const getInvalidTippyContent: ({ type, parsingError, restoreLastSavedYAML, }: Pick<InvalidYAMLTippyWrapperProps, "parsingError" | "restoreLastSavedYAML"> & {
+    type?: "yaml" | "json";
+}) => JSX.Element;

package/dist/Shared/Components/KeyValueTable/KeyValueTable.types.d.ts

@@ -18,7 +18,7 @@ export interface KeyValueHeader<K extends string> {
  */
 export type KeyValueRow<K extends string> = {
     data: {
-        [key in K]: Pick<ResizableTagTextAreaProps, 'value' | 'dataTestId' | 'disabled' | 'tabIndex'> & {
+        [key in K]: Pick<ResizableTagTextAreaProps, 'value' | 'disabled' | 'tabIndex'> & {
             /** An optional boolean indicating if an asterisk should be shown. */
             required?: boolean;
         };

package/dist/Shared/Components/SelectTextArea/SelectTextArea.d.ts

@@ -0,0 +1,2 @@
+import { SelectTextAreaProps } from './types';
+export declare const SelectTextArea: ({ value, Icon, onChange, options, inputId, placeholder, refVar, dependentRefs, disabled, selectPickerProps, textAreaProps, }: SelectTextAreaProps) => JSX.Element;

package/dist/Shared/Components/SelectTextArea/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SelectTextArea';
+export * from './types';

package/dist/Shared/Components/SelectTextArea/types.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import { ResizableTagTextAreaProps } from '../../../Common/CustomTagSelector';
+import { SelectPickerOptionType, SelectPickerProps } from '../SelectPicker';
+export type SelectTextAreaProps = Pick<SelectPickerProps<string, false>, 'inputId' | 'options'> & Pick<ResizableTagTextAreaProps, 'refVar' | 'dependentRefs'> & {
+    value: string;
+    Icon?: ReactElement;
+    onChange?: (selectedValue: SelectPickerOptionType<string>) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    textAreaProps?: Omit<ResizableTagTextAreaProps, 'refVar' | 'dependentRef' | 'id' | 'value' | 'onChange' | 'placeholder' | 'disabled'>;
+    selectPickerProps?: Omit<SelectPickerProps<string, false>, 'inputId' | 'options' | 'isDisabled' | 'onChange' | 'variant' | 'value' | 'placeholder' | 'fullWidth' | 'selectRef' | 'onCreateOption' | 'isMulti'>;
+};

package/dist/Shared/Components/index.d.ts

@@ -43,3 +43,4 @@ export * from './Button';
 export * from './InvalidYAMLTippy';
 export * from './ConfirmationModal';
 export * from './DiffViewer';
+export * from './DynamicDataTable';

package/dist/Shared/Store/IndexStore.d.ts

@@ -9,6 +9,7 @@ export declare const IndexStore: {
     getEnvDetails: () => EnvDetails;
     getEnvDetailsObservable: () => import('rxjs').Observable<EnvDetails>;
     publishAppDetails: (data: AppDetails, appType: AppType) => void;
+    clearAppDetails(): void;
     getAppDetails: () => AppDetails;
     getAppDetailsObservable: () => import('rxjs').Observable<AppDetails>;
     getAppDetailsNodes: () => Node[];

package/dist/Shared/types.d.ts

@@ -585,6 +585,7 @@ export declare enum ConfigurationType {
     GUI = "GUI",
     YAML = "YAML"
 }
+export declare const CONFIGURATION_TYPE_OPTIONS: OptionType<ConfigurationType, ConfigurationType>[];
 export interface BaseURLParams {
     appId: string;
     envId: string;