UN-3154 [FEAT] Card based layout to list Pipelines and API Deployments (#1769)

* UN-3154 [FEAT] Add execution status tracking and list enhancements

- Add WorkflowExecution.get_last_run_statuses() method to fetch last N
  executions with PARTIAL_SUCCESS computed dynamically
- Add last_5_run_statuses, run_count, last_run_time to API deployment serializer
- Add last_5_run_statuses, next_run_time to pipeline serializer
- Add source/destination instance names to pipeline representation
- Enable pagination (CustomPagination) for both pipelines and deployments
- Add search filter by name for both endpoints

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FEAT] Add reusable CardGridView component

- Create CardGridView widget for displaying items in card/list layouts
- Add CardItem component with expand/collapse, status badges, actions
- Add LoadingSkeleton for loading states
- Support pagination, search, scroll restoration, and card configuration
- Add dateFormatter helper for consistent date formatting

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FEAT] Refactor API Deployments to use CardGridView

- Add ApiDeploymentCardConfig for card layout configuration
- Refactor ApiDeployment to use CardGridView with pagination
- Update api-deployments-service with pagination and search support
- Refactor Body component to use CardGridView instead of Table
- Add search functionality to Header component
- Update Layout to pass card configuration and pagination props

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FEAT] Refactor Pipelines to use CardGridView

- Add PipelineCardConfig with StatusPills component for execution status
- Display source/destination connector icons and instance names
- Show last 5 run statuses with clickable navigation to execution logs
- Add schedule display, next run time, and run count
- Support pagination and search functionality

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FEAT] Improve navigation with scroll restoration

- Update MenuLayout to forward scrollToCardId state on back navigation
- Pass scrollToCardId from workflow links in card configs
- Add back route with state to ExecutionLogs for scroll restoration
- Remove redundant back button from DetailedLogs header
- Add previousRoute and previousRouteState props to ToolNavBar

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FIX] Address CodeRabbit review comments

- Remove unused variables: type, filteredData, copyUrl, handleStatusRefresh,
  getPipelineData, sessionDetails
- Wrap cronstrue.toString() in try-catch for invalid cron expressions
- Use current pagination when refreshing after pipeline enable/disable
- Use String() coercion for type-safe ID comparison in CardGridView
- Update PropTypes to accept string or number for IDs
- Improve shortenApiEndpoint to strip query/hash and handle edge cases
- Merge state properly in MenuLayout back navigation

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FIX] Address SonarQube issues and reduce code duplication

- Fix HIGH severity: Remove orphaned setFilteredData references in Pipelines.jsx
- Fix LOW severity: Add keyboard listeners to clickable spans for accessibility
  - PipelineCardConfig.jsx: Add role, tabIndex, onKeyDown to status badge
  - CardItem.jsx: Add keyboard handlers to action spans and expand chevron
- Reduce code duplication between ApiDeploymentCardConfig and PipelineCardConfig
  - Extract shared components to CardFieldComponents.jsx:
    CardActionBox, OwnerFieldRow, LastRunFieldRow, Last5RunsFieldRow,
    WorkflowFieldRow, ApiEndpointSection, CardHeaderRow
  - Net reduction: -289 lines in existing files

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FIX] Address SonarCloud ReDoS security hotspot

Replace regex /\/+$/ with iterative string manipulation to strip
trailing slashes, avoiding potential ReDoS concerns flagged by
SonarCloud security scanner.

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FIX] Fix function argument mismatch in clearFileMarkers

Update clearFileMarkers to accept optional workflowId parameter
to match the call site that passes pipeline.workflow_id.

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FIX] Fix SonarQube issues and improve code quality

- Remove unused useSessionStore import in DetailedLogs.jsx
- Add search term persistence across pagination in Pipelines.jsx
- Fix stale closure in pipelineCardConfig useMemo dependencies
- Add keyboard accessibility (role, tabIndex, onKeyDown) to action icons
- Guard against undefined orgName in WorkflowFieldRow link rendering

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FIX] Address SonarCloud code quality issues

- Fix array index keys in PipelineCardConfig.jsx and LoadingSkeleton.jsx
- Replace role="button" with native <button> elements for accessibility
- Fix text contrast ratios to meet WCAG AA (4.5:1 minimum)
- Fix unexpected negated conditions in pagination handlers
- Use globalThis instead of window for better portability
- Add proper button reset styles in CSS

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FIX] Revert status pill colors and fix pipeline sorting

- Revert status badge colors to vibrant originals (pre-SonarCloud fix)
- Fix pipeline list sorting with nulls_last for last_run_time
- Add index fallback to React key in StatusPills to prevent duplicates
- Simplify enableDisablePipeline by removing unnecessary .then()
- Remove unused pagination deps from useMemo

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FIX] Restore full list context on back navigation from logs

- Pass listContext (page, pageSize, searchTerm) through StatusPills navigation
- Restore pagination and search state in useEffect before scrolling
- Add listContext prop to Last5RunsFieldRow and StatusPills components
- Update useMemo dependencies to include pagination state

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FIX] Replace native elements with AntD components per PR review

- Replace native buttons with AntD Button type="text" in CardActionBox
- Replace native button with AntD Button for expand chevron in CardItem
- Use AntD Space for status badges container in StatusPills
- Use AntD Tag instead of native button/span for status badges
- Fix require() inside component body → static import in Pipelines.jsx
- Update CSS to support both native and AntD component selectors
- Add missing listContext prop type to StatusPills

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FIX] Address CodeRabbit PR review comments from #1769

- ApiDeployment: Use explicit null check instead of falsy check for data.count
- CardFieldComponents: Add URL scheme validation to prevent javascript: URLs
- PipelineCardConfig: Add keyboard accessibility to status badges
- CardGridView.css: Increase max-height from 200px to 500px for expanded content
- CardItem: Add setTimeout cleanup with clearTimeout to prevent memory leaks
- CardItem: Use isExpanded prop instead of expanded for grid mode support

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FIX] ESLint eqeqeq error and add loading state to logs modal

- Fixed ESLint eqeqeq error: Changed != null to !== null && !== undefined check
- Added loading state to LogsModal to display spinner while fetching logs
- Updated fetchExecutionLogs to support optional setIsLoading callback
- Wired up isFetchingLogs state in both Pipelines and ApiDeployment components

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FIX] Resolve card grid rendering issues and UI glitches

Fix card grid toggle flashing by memoizing CardItem and using optimistic updates. Prevent edit list from disappearing by using inline updates instead of refetch. Restore scroll position on back navigation using location.key. Remove unnecessary success alert on pipeline update. Keep share button always visible for consistency with workflows.

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FIX] Remove ineffective CSS hover overrides for action icons

Remove background overrides that don't work due to AntD CSS-in-JS
specificity. Action icons will now show AntD's default hover state.

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [FIX] Backend sorting and share modal improvements

- Add backend ordering by last_run_time for API deployments using
  Subquery annotation with nulls_last for "Never" entries
- Fix share modal by passing deployment directly to avoid stale state
- Add robust response handling for different API response structures
- Remove Tooltip wrappers from action buttons to fix shadow issues

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* UN-3154 [REFACTOR] Extract shared hooks to reduce duplication in Pipelines and ApiDeployment

Extract duplicated logic into 4 reusable hooks (useExecutionLogs,
usePaginatedList, useScrollRestoration, useShareModal) and wire them
into both components. Also fixes a bug where ApiDeployment lost
searchTerm when changing pages or deleting items.

Co-Authored-By: Claude Opus 4.6 <[email protected]>

* MISC [FIX] Suppress eslint import/no-unresolved for Webpack url import

Co-Authored-By: Claude Opus 4.6 <[email protected]>

* UN-3154 [FIX] Replace native elements with AntD components per PR review

Address Vishnu's review comments on PR #1769:
- Field rows: div/span → Flex + Typography.Text + Space
- img → AntD Avatar for WorkflowIcon
- a/span → Typography.Link / Typography.Text in ApiEndpointSection
- Header wrappers → Flex in CardHeaderRow and CardItem
- Actions container → Space in CardItem
- CSS: display block on subtitle, endpoint link targets .ant-typography-link

Co-Authored-By: Claude Opus 4.6 <[email protected]>

* [FIX] Make Vite optional plugin emit throw instead of empty export

The empty module (`export default undefined`) made plugin imports
succeed silently, bypassing catch blocks and causing a login loop
in OSS mode.

Co-Authored-By: Claude Opus 4.6 <[email protected]>

* [MISC] Fix biome v2 lint and format issues in card grid view files

Sort imports, wrap single-line if/return in block statements,
add trailing commas, and fix CSS formatting.

Co-Authored-By: Claude Opus 4.6 <[email protected]>

* UN-3154 [REFACTOR] Replace divs/spans with AntD components, remove duplicate CSS

- Replaced raw HTML elements with Ant Design components (Flex, Space, Typography.Text, Avatar, Tag)
- Removed ~80 lines of custom CSS that duplicated AntD native functionality
- Fixed API endpoint Card padding/border specificity issues
- Fixed copy button padding in pipeline cards
- Addresses PR #1769 review feedback

Co-Authored-By: Claude Opus 4.6 <[email protected]>

* UN-3154 [FIX] Fix tooltip icon colors, move lazy imports to top-level

Preserve green/red icon colors in status pill tooltips where
`color: inherit` was making them white on dark background.
Move unnecessary lazy imports to top-level across dashboard_metrics,
pipeline_v2 and workflow_manager modules.

Co-Authored-By: Claude Opus 4.6 <[email protected]>

* UN-3154 [FIX] Fix SonarCloud code smells in card grid view and related files

- Extract helpers to reduce function nesting depth (S2004)
- Replace nested ternary with nullish coalescing (S3358)
- Remove unused imports in DetailedLogs (S1128)
- Move PostHog try-catch into usePostHogEvents hook (S2486)
- Use globalThis over window (S7764)
- Fix non-native interactive element in CardItem (S6848)
- Use stable keys instead of array index in LoadingSkeleton (S6479)
- Improve contrast ratio for success status badge (S7924)

Co-Authored-By: Claude Opus 4.6 <[email protected]>

---------

Co-authored-by: Claude Opus 4.5 <[email protected]>

Author: 2 people

frontend/src/components/logging/detailed-logs/DetailedLogs.jsx

@@ -1,5 +1,4 @@
 import {
-  ArrowLeftOutlined,
   CalendarOutlined,
   ClockCircleOutlined,
   CloseCircleFilled,
@@ -29,7 +28,6 @@ import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { useAxiosPrivate } from "../../../hooks/useAxiosPrivate";
 import { useExceptionHandler } from "../../../hooks/useExceptionHandler";
 import { useAlertStore } from "../../../store/alert-store";
-import { useSessionStore } from "../../../store/session-store";
 import "./DetailedLogs.css";
 import {
   formattedDateTime,