feat: release candidate v0.45.0

[AbhishekA1509]

Description

This pull request introduces several enhancements and fixes across the common component library, focusing on improved UI flexibility, API utilities, and bug fixes. The most notable changes include a major refactor of the DraggableWrapper component for better positioning and usability, the addition of new minimal API endpoints for autocomplete features, and expanded support for button variants and tooltips in UI components.

UI Component Improvements:

• Refactored DraggableWrapper in src/Common/DraggableWrapper/DraggableWrapper.tsx to use fixed positioning at the viewport's top-left, removed legacy layout fixes, updated boundary gap handling to accept { x, y }, and improved default positioning logic for various variants. The component now uses defaultPosition and bounds to the main app container, and is exported as a named export. [1] [2] [3] [4] [5]
• Added a new borderLess variant to ClipboardButton and updated its aria-label for accessibility. Also improved tooltip handling and button rendering logic. [1] [2] [3]
• Enhanced SortableTableHeaderCell to support an optional info tooltip icon beside the header label, improving usability and documentation for table columns. [1] [2] [3] [4]

API and Utility Enhancements:

• Added new minimal API endpoints: getDockerRegistriesListMin and getGitProvidersListMin in src/Common/Common.service.ts, and corresponding route constants in src/Common/Constants.ts for autocomplete functionality. [1] [2] [3]
• Improved request header logic in CoreAPI to conditionally set Content-Type: application/json only when appropriate, preventing issues with multipart requests.
• Extended reactQueryHooks with a new useInfiniteQuery hook and fixed useMutation to return the correct generic type, enabling better integration with React Query. [1] [2]

Constants and Patterns Updates:

• Added new URL and route constants for external app types and Athena, and introduced a stricter app name pattern in PATTERNS. [1] [2] [3]

Miscellaneous:

• Bumped package version to 1.23.0 in package.json.
• Fixed .eslintignore to remove the ignored DraggableWrapper.tsx test file, ensuring linting coverage.

These changes collectively improve the flexibility, accessibility, and developer experience of the common component library.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

• Test A
• Test B

Checklist

• The title of the PR states what changed and the related issues number (used for the release note).
• Does this PR require documentation updates?
• I've updated documentation as required by this PR.
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas

[Copilot]

Pull request overview

This pull request is a release candidate (v0.45.0/v1.23.0) that introduces substantial enhancements to the common component library, focusing on improved UI flexibility, API utilities, and type definitions. The changes include a major refactor of the DraggableWrapper component for better viewport positioning, new minimal API endpoints for autocomplete features, expanded table functionality with expandable rows, and enhanced AI/debugging context management.

Changes:

• Refactored DraggableWrapper to use fixed positioning at viewport top-left with improved default positioning logic, changed boundaryGap from number to {x, y} object, and removed deprecated layoutFixDelta parameter
• Added expandable rows feature to Table component with keyboard shortcuts (ArrowLeft/Right), expand/collapse functionality, and support for row start icons
• Enhanced AI agent context types with structured data models for different app types (Devtron, Helm, Argo, Flux) and added debug agent context support
• Added new minimal API endpoints (getDockerRegistriesListMin, getGitProvidersListMin) and constants for external app types
• Improved CoreAPI to conditionally set Content-Type header, added useInfiniteQuery hook, and extended useMutation type flexibility
• Added multiple new icons for AI features, notifications, and integrations
• Various component enhancements including SortableTableHeaderCell info tooltips, ClipboardButton borderless variant, and Textarea auto-height fixes

Reviewed changes

Copilot reviewed 40 out of 59 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/Common/Constants.ts	Added APP_NAME pattern, new URL constants for external app types, and ATHENA route
src/Common/DraggableWrapper/*	Major refactor with fixed viewport positioning, boundaryGap type change, and PARENT_BOTTOM_RIGHT variant addition
src/Common/API/CoreAPI.ts	Conditional Content-Type header logic for multipart requests
src/Common/API/reactQueryHooks.ts	Added useInfiniteQuery hook and improved useMutation typing
src/Common/ClipboardButton/*	Added borderLess variant support
src/Common/SortableTableHeaderCell/*	Added infoTooltipText prop for header tooltips
src/Shared/Components/Table/*	Major feature: expandable rows with keyboard navigation and visual tree lines
src/Shared/Components/Textarea/*	Fixed auto-height calculation logic
src/Shared/Components/FloatingVariablesSuggestions/*	Integrated DraggableWrapper with new boundaryGap API
src/Shared/Components/Header/PageHeader.tsx	Replaced hardcoded Ask Devtron button with component from context
src/Shared/Components/AppStatusModal/*	Added debugAgentContext support for AI debugging
src/Shared/Components/Icon/Icon.tsx	Added 20+ new icons for various features
src/Shared/Providers/MainContextProvider/types.ts	Added comprehensive AIAgentContextType and DebugAgentContextType definitions
src/Shared/validations.tsx	Added validateAppName function
src/index.ts	Replaced FEATURE_ASK_DEVTRON_EXPERT with FEATURE_ATHENA_DEBUG_MODE_ENABLE
package.json	Bumped version to 1.23.0
.eslintignore	Removed DraggableWrapper.tsx from ignore list

Comments suppressed due to low confidence (3)

src/Common/DraggableWrapper/DraggableWrapper.tsx:97

• The new DraggablePositionVariant.PARENT_BOTTOM_RIGHT is added to the enum but there's no case for it in the switch statement in getDefaultPosition(). When this variant is used, it will fall through to the default case (SCREEN_BOTTOM_CENTER), which may not be the intended behavior. Either implement the case or remove the variant from the enum.

        switch (positionVariant) {
            case DraggablePositionVariant.PARENT_BOTTOM_CENTER: {
                // center div to middle of the parent rect and then add the left offset of the parent rect
                const x = (parentRect.width - nodeRefWidth) / 2 + parentRect.left
                if (parentRect.height > windowSize.height) {
                    // since the parent itself overflows, we use windowSize for calculations
                    return { x, y: windowSize.height - boundaryGap.y - nodeRefHeight }
                }
                // y = parentRect.bottom will place the widget at the extreme bottom of the parent,
                // therefore need to offset it to the top by boundary and its own height
                const y = parentRect.bottom - nodeRefHeight - boundaryGap.y
                return { x, y }
            }
            case DraggablePositionVariant.SCREEN_BOTTOM_RIGHT: {
                // x = windowSize.width will place the widget at the extreme right,
                // therefore need to offset it to the left by boundary and its own width
                const x = windowSize.width - nodeRefWidth - boundaryGap.x
                // y = windowSize.height will place the widget at the extreme bottom,
                // therefore need to offset it to the top by boundary and its own height
                const y = windowSize.height - nodeRefHeight - boundaryGap.y

                return { x, y }
            }
            // Add more cases for other variants if needed
            default: {
                // we need to first place the start of the widget at (windowSize.width / 2)
                // followed by moving it half of its own width to the left such that center of widget
                // aligns with the central axis of the screen
                const x = (windowSize.width - nodeRefWidth) / 2
                // y = windowSize.height will place the widget at the extreme bottom,
                // therefore need to offset it to the top by boundary and its own height
                const y = windowSize.height - nodeRefHeight - boundaryGap.y

                return { x, y }
            }
        }

src/Common/API/CoreAPI.ts:75

• There's a logic inconsistency in the fetch call. When isMultipartRequest is true, the code builds an options object with conditional headers (lines 54-65), but then on line 70 it checks !isMultipartRequest and either uses the constructed options OR creates a new object with only method and body. This means when isMultipartRequest is true, the signal and credentials from options are lost. The isMultipartRequest handling should either be unified or the signal and credentials should be included in the multipart request object.

        const options: RequestInit = {
            method: type,
            signal,
            body: data ? JSON.stringify(data) : undefined,
            ...(data && !isMultipartRequest
                ? {
                      headers: {
                          'Content-Type': 'application/json',
                      },
                  }
                : {}),
        }
        // eslint-disable-next-line dot-notation
        options['credentials'] = 'include' as RequestCredentials
        return fetch(
            `${isProxyHost ? '/proxy' : this.host}/${url}`,
            !isMultipartRequest
                ? options
                : ({
                      method: type,
                      body: data,
                  } as RequestInit),

src/Common/DraggableWrapper/types.ts:39

• The boundaryGap prop type has changed from number (optional) to Record<'x' | 'y', number> (optional). This is a breaking change for any consumers passing a number value for boundaryGap. While a default value { x: 16, y: 16 } is provided for backward compatibility when not specified, any external code explicitly passing boundaryGap as a number will break. Consider documenting this as a breaking change or providing a migration path.

    boundaryGap?: Record<'x' | 'y', number>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.