@devtron-labs/devtron-fe-common-lib 0.3.11 → 0.3.13

package/dist/Common/Constants.d.ts

@@ -286,3 +286,4 @@ export declare const VULNERABILITIES_SORT_PRIORITY: {
     low: number;
     unknown: number;
 };
+export declare const IS_PLATFORM_MAC_OS: boolean;

package/dist/Common/CustomInput/CustomInput.d.ts

@@ -1,2 +1,2 @@
 import { CustomInputProps } from './Types';
-export declare const CustomInput: ({ name, value, error, onChange, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, autoComplete, helperText, handleOnBlur, readOnly, noTrim, onKeyPress, defaultValue, onKeyDown, required, additionalErrorInfo, inputWrapClassName, inputProps, }: CustomInputProps) => JSX.Element;
+export declare const CustomInput: ({ name, value, error, onChange, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, autoComplete, helperText, onBlur, readOnly, noTrim, onKeyPress, defaultValue, onKeyDown, required, additionalErrorInfo, inputWrapClassName, inputProps, }: CustomInputProps) => JSX.Element;

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

@@ -17,7 +17,7 @@ export interface CustomInputProps {
     rootClassName?: string;
     error?: string[] | string;
     helperText?: ReactNode;
-    handleOnBlur?: (e: any) => void;
+    onBlur?: (e: any) => void;
     readOnly?: boolean;
     noTrim?: boolean;
     onKeyPress?: (e: any) => void;

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

@@ -1,5 +1,8 @@
 export interface DeleteComponentProps {
-    setDeleting: (boolean: any) => void;
+    /**
+     * @deprecated - Delete component internally handles loading for the `Delete Button`.
+     */
+    setDeleting?: (boolean: any) => void;
     toggleConfirmation: any;
     deleteComponent: (any: any) => Promise<any>;
     title: string;

package/dist/Common/Helper.d.ts

@@ -22,12 +22,6 @@ export declare const refresh: () => void;
 export declare const reportIssue: () => void;
 export declare function useEffectAfterMount(cb: any, dependencies: any): void;
 export declare function getCookie(sKey: any): string;
-export declare function useForm(stateSchema: any, validationSchema: {}, callback: any): {
-    state: any;
-    disable: boolean;
-    handleOnChange: (event: any) => void;
-    handleOnSubmit: (event: any) => void;
-};
 export declare function handleUTCTime(ts: string, isRelativeTime?: boolean): string;
 export declare function useSearchString(): UseSearchString;
 export declare const closeOnEscKeyPressed: (e: any, actionClose: () => void) => void;

package/dist/Common/Tooltip/ShortcutKeyComboTooltipContent.d.ts

@@ -0,0 +1,3 @@
+import { TooltipProps } from './types';
+declare const ShortcutKeyComboTooltipContent: ({ text, combo }: TooltipProps["shortcutKeyCombo"]) => JSX.Element;
+export default ShortcutKeyComboTooltipContent;

package/dist/Common/Tooltip/Tooltip.d.ts

@@ -1,3 +1,3 @@
 import { TooltipProps } from './types';
-declare const Tooltip: ({ alwaysShowTippyOnHover, showOnTruncate, wordBreak, children: child, ...rest }: TooltipProps) => JSX.Element;
+declare const Tooltip: ({ shortcutKeyCombo, alwaysShowTippyOnHover, showOnTruncate, wordBreak, children: child, ...rest }: TooltipProps) => JSX.Element;
 export default Tooltip;

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

@@ -1,2 +1,3 @@
 export { default as Tooltip } from './Tooltip';
+export type { SupportedKeyboardKeysType } from './types';
 export { TOOLTIP_CONTENTS } from './constants';

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

@@ -1,4 +1,11 @@
 import { TippyProps } from '@tippyjs/react';
+export declare const KEYBOARD_KEYS_MAP: {
+    readonly Control: "⌘" | "Ctrl";
+    readonly Shift: "⇧";
+    readonly F: "F";
+    readonly E: "E";
+};
+export type SupportedKeyboardKeysType = keyof typeof KEYBOARD_KEYS_MAP;
 type BaseTooltipProps = {
     /**
      * If true, show tippy on truncate
@@ -10,6 +17,12 @@ type BaseTooltipProps = {
      * @default false
      */
     alwaysShowTippyOnHover?: never;
+    /**
+     * If true, use the common styling for shortcuts
+     * @default undefined
+     */
+    shortcutKeyCombo?: never;
+    content: TippyProps['content'];
 } | {
     /**
      * If alwaysShowTippyOnHover is defined this prop doesn't work
@@ -18,9 +31,35 @@ type BaseTooltipProps = {
     showOnTruncate?: never;
     /**
      * If true, wrap with tippy irrespective of other options
+     * @default true
+     */
+    alwaysShowTippyOnHover: boolean;
+    /**
+     * If true, use the common styling for shortcuts
+     * @default undefined
+     */
+    shortcutKeyCombo?: never;
+    content: TippyProps['content'];
+} | {
+    /**
+     * If true, show tippy on truncate
+     * @default false
+     */
+    showOnTruncate?: never;
+    /**
+     * If showOnTruncate is defined this prop doesn't work
      * @default false
      */
     alwaysShowTippyOnHover?: boolean;
+    /**
+     * If true, use the common styling for shortcuts
+     * @default undefined
+     */
+    shortcutKeyCombo: {
+        text: string;
+        combo: SupportedKeyboardKeysType[];
+    };
+    content?: never;
 };
 export type TooltipProps = BaseTooltipProps & TippyProps & {
     /**

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

@@ -82,7 +82,7 @@ export type ButtonProps = ({
     /**
      * Props for tooltip
      */
-    tooltipProps: Omit<TooltipProps, 'alwaysShowTippyOnHover' | 'showOnTruncate'>;
+    tooltipProps: Omit<TooltipProps, 'alwaysShowTippyOnHover' | 'showOnTruncate' | 'shortcutKeyCombo'> | (Omit<TooltipProps, 'alwaysShowTippyOnHover' | 'showOnTruncate' | 'content'> & Required<Pick<TooltipProps, 'shortcutKeyCombo'>>);
 } | {
     showTooltip?: never;
     tooltipProps?: never;

package/dist/Shared/Components/CICDHistory/History.components.d.ts

@@ -1,4 +1,57 @@
+import { IWithShortcut } from 'react-keybind';
 import { GitChangesType, LogResizeButtonType, ScrollerType } from './types';
-export declare const LogResizeButton: ({ fullScreenView, setFullScreenView }: LogResizeButtonType) => JSX.Element;
+export declare const LogResizeButton: {
+    new (props: Readonly<LogResizeButtonType & IWithShortcut>): {
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LogResizeButtonType & IWithShortcut>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<LogResizeButtonType & IWithShortcut> & Readonly<{
+            children?: import('react').ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import('react').ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<LogResizeButtonType & IWithShortcut>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import('react').ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<LogResizeButtonType & IWithShortcut>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<LogResizeButtonType & IWithShortcut>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<LogResizeButtonType & IWithShortcut>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<LogResizeButtonType & IWithShortcut>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<LogResizeButtonType & IWithShortcut>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<LogResizeButtonType & IWithShortcut>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: LogResizeButtonType & IWithShortcut, context?: any): {
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LogResizeButtonType & IWithShortcut>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<LogResizeButtonType & IWithShortcut> & Readonly<{
+            children?: import('react').ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import('react').ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<LogResizeButtonType & IWithShortcut>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import('react').ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<LogResizeButtonType & IWithShortcut>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<LogResizeButtonType & IWithShortcut>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<LogResizeButtonType & IWithShortcut>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<LogResizeButtonType & IWithShortcut>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<LogResizeButtonType & IWithShortcut>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<LogResizeButtonType & IWithShortcut>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextType?: import('react').Context<any> | undefined;
+};
 export declare const Scroller: ({ scrollToTop, scrollToBottom, style }: ScrollerType) => JSX.Element;
 export declare const GitChanges: ({ gitTriggers, ciMaterials, artifact, userApprovalMetadata, triggeredByEmail, ciPipelineId, artifactId, imageComment, imageReleaseTags, appReleaseTagNames, tagsEditable, hideImageTaggingHardDelete, appliedFilters, appliedFiltersTimestamp, promotionApprovalMetadata, selectedEnvironmentName, renderCIListHeader, }: GitChangesType) => JSX.Element;

package/dist/Shared/Components/CICDHistory/LogsRenderer.d.ts

@@ -1,3 +1,56 @@
+import { IWithShortcut } from 'react-keybind';
 import { LogsRendererType } from './types';
-export declare const LogsRenderer: ({ triggerDetails, isBlobStorageConfigured, parentType, fullScreenView, }: LogsRendererType) => JSX.Element;
-export default LogsRenderer;
+declare const _default: {
+    new (props: Readonly<LogsRendererType & IWithShortcut>): {
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LogsRendererType & IWithShortcut>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<LogsRendererType & IWithShortcut> & Readonly<{
+            children?: import('react').ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import('react').ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<LogsRendererType & IWithShortcut>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import('react').ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<LogsRendererType & IWithShortcut>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<LogsRendererType & IWithShortcut>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<LogsRendererType & IWithShortcut>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<LogsRendererType & IWithShortcut>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<LogsRendererType & IWithShortcut>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<LogsRendererType & IWithShortcut>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: LogsRendererType & IWithShortcut, context?: any): {
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LogsRendererType & IWithShortcut>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<LogsRendererType & IWithShortcut> & Readonly<{
+            children?: import('react').ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import('react').ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<LogsRendererType & IWithShortcut>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import('react').ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<LogsRendererType & IWithShortcut>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<LogsRendererType & IWithShortcut>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<LogsRendererType & IWithShortcut>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<LogsRendererType & IWithShortcut>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<LogsRendererType & IWithShortcut>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<LogsRendererType & IWithShortcut>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextType?: import('react').Context<any> | undefined;
+};
+export default _default;

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

@@ -10,7 +10,7 @@ export * from './service';
 export * from './History.components';
 export * from './utils';
 export * from './TriggerOutput';
-export * from './LogsRenderer';
+export { default as LogsRenderer } from './LogsRenderer';
 export * from './DeploymentHistoryDiff';
 export * from './CiPipelineSourceConfig';
 export * from './StatusFilterButtonComponent';

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement } from 'react';
-import { OptionType, UserApprovalMetadataType, ReleaseTag, ImageComment, PromotionApprovalMetadataType, FilterConditionsListType, DeploymentAppTypes, ResponseType, PaginationProps, useScrollable, SortingOrder } from '../../../Common';
+import { OptionType, UserApprovalMetadataType, ReleaseTag, ImageComment, PromotionApprovalMetadataType, FilterConditionsListType, DeploymentAppTypes, ResponseType, PaginationProps, useScrollable, SortingOrder, SupportedKeyboardKeysType } from '../../../Common';
 import { DeploymentStageType } from '../../constants';
 import { AggregationKeys, GitTriggers, Node, NodeType, ResourceKindType, ResourceVersionType } from '../../types';
 export declare enum HistoryComponentType {
@@ -14,6 +14,16 @@ export declare enum FetchIdDataStatus {
     SUSPEND = "SUSPEND"
 }
 export interface LogResizeButtonType {
+    /**
+     * If given, that shortcut combo will be bound to the button
+     * @default null
+     */
+    shortcutCombo?: SupportedKeyboardKeysType[];
+    /**
+     * If true, only show the button when location.pathname contains '/logs'
+     * @default true
+     */
+    showOnlyWhenPathIncludesLogs?: boolean;
     fullScreenView: boolean;
     setFullScreenView: React.Dispatch<React.SetStateAction<boolean>>;
 }

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

@@ -1,3 +1,4 @@
 export * from './UsePrompt';
 export * from './useGetResourceKindsOptions';
 export * from './UseDownload';
+export * from './useForm';

package/dist/Shared/Hooks/useForm/index.d.ts

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

package/dist/Shared/Hooks/useForm/useForm.d.ts

@@ -0,0 +1,71 @@
+import { ChangeEvent, FormEvent } from 'react';
+import { UseFormSubmitHandler, UseFormValidations } from './useForm.types';
+/**
+ * A custom hook to manage form state, validation, and submission handling.
+ *
+ * @param options - Optional configuration object for the form.
+ * @returns The form state and utility methods
+ */
+export declare const useForm: <T extends Record<keyof T, any> = {}>(options?: {
+    /** An object containing validation rules for each form field. */
+    validations?: UseFormValidations<T>;
+    /** An object representing the initial values for the form fields. */
+    initialValues?: Partial<T>;
+    /** Defines when validation should occur:
+     * - 'onChange': Validation occurs when the user modifies the input
+     * - 'onBlur': Validation occurs when the input loses focus.
+     *  @default 'onChange'
+     */
+    validationMode?: "onChange" | "onBlur";
+}) => {
+    /** The current form data. */
+    data: T;
+    /** An object containing validation errors for each form field. */
+    errors: Partial<Record<keyof T, string | string[]>>;
+    /**
+     * Registers form input fields with onChange, onBlur and onFocus handlers.
+     *
+     * @param name - The key of the form field to register.
+     * @param sanitizeFn - An optional function to sanitize the input value.
+     * @returns An object containing form field `name`, `onChange`, `onBlur` and `onFocus` event handlers.
+     */
+    register: <V extends unknown = string, S extends unknown = unknown>(name: keyof T, sanitizeFn?: (value: V) => S, registerOptions?: {
+        /**
+         * Prevents the input value from being trimmed.
+         *
+         * If `noTrim` is set to true, the input value will not be automatically trimmed.\
+         * This can be useful when whitespace is required for certain inputs.
+         *
+         * @default false - By default, the input will be trimmed.
+         */
+        noTrim?: boolean;
+    }) => {
+        onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+        onBlur: () => void;
+        onFocus: () => void;
+        name: keyof T;
+    };
+    /**
+     * Handles form submission, validates all form fields, and calls the provided `onValid` function if valid.
+     *
+     * @param onValid - A function to handle valid form data on submission.
+     * @returns The event handler for form submission.
+     */
+    handleSubmit: (onValid: UseFormSubmitHandler<T>) => (e: FormEvent<HTMLFormElement>) => void;
+    /**
+     * Manually triggers validation for specific form fields.
+     *
+     * @param name - The key(s) of the form field(s) to validate.
+     * @returns The validation error(s), if any.
+     */
+    trigger: (name: keyof T | (keyof T)[]) => (string | string[]) | (string | string[])[];
+    /** An object representing additional form state. */
+    formState: {
+        /** An object indicating which fields have been touched (interacted with). */
+        touchedFields: Partial<Record<keyof T, boolean>>;
+        /** An object indicating which fields have been modified. */
+        dirtyFields: Partial<Record<keyof T, boolean>>;
+        /** A boolean indicating if any field has been modified. */
+        isDirty: boolean;
+    };
+};

package/dist/Shared/Hooks/useForm/useForm.types.d.ts

@@ -0,0 +1,69 @@
+import { FormEvent } from 'react';
+/**
+ * Describes the "required" validation rule.
+ * It can be a simple boolean or an object containing a boolean value and an error message.
+ */
+type ValidationRequired = boolean | {
+    value: boolean;
+    message: string;
+};
+/**
+ * Describes the "pattern" validation rule, which ensures a value matches a specific regular expression.
+ * It can be a single validation object or an array of multiple patterns.
+ */
+type ValidationPattern = {
+    value: RegExp;
+    message: string;
+} | {
+    value: RegExp;
+    message: string;
+}[];
+/**
+ * Describes custom validation logic.
+ * It checks if a value passes a custom validation function, which returns a boolean.
+ * If validation fails, an error message is provided.
+ */
+type ValidationCustom = {
+    isValid: (value: string) => boolean;
+    message: string;
+} | {
+    isValid: (value: string) => boolean;
+    message: string;
+}[];
+/**
+ * Defines the validation rules for form fields.
+ * Includes `required`, `pattern`, and `custom` validation types.
+ */
+export interface UseFormValidation {
+    required?: ValidationRequired;
+    pattern?: ValidationPattern;
+    custom?: ValidationCustom;
+}
+/**
+ * Represents the structure for form validation errors.
+ * Maps each field to an error message or an array of error messages.
+ */
+export type UseFormErrors<T> = Partial<Record<keyof T, string | string[]>>;
+/**
+ * Represents the fields that have been modified ("dirty") in the form.
+ * Maps each field to a boolean value indicating whether it has been changed.
+ */
+export type DirtyFields<T> = Partial<Record<keyof T, boolean>>;
+/**
+ * Represents the fields that have been interacted with ("touched") in the form.
+ * Maps each field to a boolean value indicating whether it has been focused or interacted with.
+ */
+export type TouchedFields<T> = Partial<Record<keyof T, boolean>>;
+/**
+ * Defines the structure for form validations.
+ * Maps each form field to its corresponding validation rules.
+ */
+export type UseFormValidations<T extends {}> = Partial<Record<keyof T, UseFormValidation>>;
+/**
+ * Describes the function signature for handling form submission.
+ *
+ * @param data - The form data collected during submission.
+ * @param e - The form event, optionally passed when the form is submitted.
+ */
+export type UseFormSubmitHandler<T extends {}> = (data: T, e?: FormEvent<HTMLFormElement>) => void;
+export {};

package/dist/Shared/Hooks/useForm/useForm.utils.d.ts

@@ -0,0 +1,10 @@
+import { UseFormValidation } from './useForm.types';
+/**
+ * Validates a form field based on the provided validation rules.
+ *
+ * @template T - A record type representing form data.
+ * @param value - The value of the form field to be validated.
+ * @param validation - The validation rules for the form field.
+ * @returns Returns error message(s) or null if valid.
+ */
+export declare const checkValidation: <T extends Record<keyof T, any> = {}>(value: T[keyof T], validation: UseFormValidation) => string | string[] | null;