feat: use Table in DevtronAppList #3034

Elessar1802 · 2026-01-05T16:49:46Z

No description provided.

github-actions · 2026-01-05T16:50:06Z

Some linked issues are invalid. Please update the issue links:\nIssue # in is not found or invalid (HTTP }404).\n

Copilot

Pull request overview

This PR refactors the DevtronAppList component to use a generic Table component from the common library instead of a custom implementation. The change simplifies the codebase by removing custom expand/collapse logic and leveraging the Table component's built-in features for expandable rows, pagination, and filtering.

Migrates from custom list rendering to using the generic Table component with built-in pagination and expandable row support
Removes custom expanded row component and related state management (expandedRow, isAllExpanded, isAllExpandable)
Refactors cell rendering into modular CellComponent functions that handle both regular and expanded rows

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
src/components/app/list/types.tsx	Removes DevtronAppExpandedState interface and adds TableAdditionalPropsType for Table component props
src/components/app/list/list.scss	Removes custom cell styling classes and adds generic-table row padding classes
src/components/app/list/expandedRow/types.tsx	Deletes file - no longer needed with Table component
src/components/app/list/expandedRow/expandedRow.css	Deletes file - styling now handled by Table component
src/components/app/list/expandedRow/ExpandedRow.tsx	Deletes file - expanded row logic integrated into Table component
src/components/app/list/constants.tsx	Deletes file - INITIAL_EXPANDED_STATE no longer needed
src/components/app/list/DevtronAppListContainer.tsx	Complete refactor to use Table component with cell components for rendering, removes manual expand/collapse logic and pagination handling

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

Copilot · 2026-01-05T16:55:27Z

src/components/app/list/DevtronAppListContainer.tsx

+                    status={isExpandedRow ? env.status : app.defaultEnv.appStatus}
+                    isVirtualEnv={isExpandedRow ? env.isVirtualEnvironment : app.defaultEnv.isVirtualEnvironment}


Inconsistent null safety handling for app.defaultEnv. Line 194 and 195 access app.defaultEnv.appStatus and app.defaultEnv.isVirtualEnvironment without null checking, but the defaultEnv type is nullable (Environment | null). This could cause a runtime error if defaultEnv is null. Consider using optional chaining like the code does on lines 202, 214 (app.defaultEnv?.clusterName, app.defaultEnv?.namespace).

Copilot · 2026-01-05T16:55:27Z

src/components/app/list/DevtronAppListContainer.tsx

-                })
-            }
+    if (field === AppListSortableKeys.LAST_DEPLOYED) {
+        const lastDeployedTime = isExpandedRow ? env.lastDeployedTime : app.defaultEnv.lastDeployedTime


Potential null reference error. The code accesses app.defaultEnv.lastDeployedTime without null checking, but defaultEnv is nullable (Environment | null according to the types). This could cause a runtime error if defaultEnv is null. Consider using optional chaining: app.defaultEnv?.lastDeployedTime

Suggested change

const lastDeployedTime = isExpandedRow ? env.lastDeployedTime : app.defaultEnv.lastDeployedTime

const lastDeployedTime = isExpandedRow ? env.lastDeployedTime : app.defaultEnv?.lastDeployedTime

Copilot · 2026-01-05T16:55:27Z

src/components/app/list/DevtronAppListContainer.tsx

+                totalRows: totalCount,
+            }
+        },
+        [syncListData, JSON.stringify(filterConfig)],


The dependency array uses JSON.stringify(filterConfig) which can be inefficient and may cause unnecessary re-renders. JSON.stringify is not recommended for dependency arrays because it creates a new string on every render even if the object content hasn't changed. Consider using individual dependencies from filterConfig (like searchKey, offset, pageSize, appStatus, etc.) or using a more efficient deep comparison approach.

Suggested change

[syncListData, JSON.stringify(filterConfig)],

[syncListData, filterConfig],

Copilot · 2026-01-05T16:55:28Z

src/components/app/list/DevtronAppListContainer.tsx

+                    data: app,
+                    id: String(app.id),
+                    expandableRows:
+                        app.defaultEnv.name && app.environments.length


Potential null reference error. Line 408 accesses app.defaultEnv.name without null checking. Since defaultEnv is nullable (Environment | null), this could cause a runtime error if defaultEnv is null. Consider using optional chaining: app.defaultEnv?.name

Suggested change

app.defaultEnv.name && app.environments.length

app.defaultEnv?.name && app.environments.length

Copilot · 2026-01-05T16:55:28Z

src/components/app/list/DevtronAppListContainer.tsx

+        const namespace = isExpandedRow ? env.namespace : app.defaultEnv?.namespace ?? ''
+        return (
+            <div className="flex left">
+                <p data-testid={`${namespace}-namespace`} className="dc__truncate-text  m-0">


Extra whitespace detected. There's double spacing between 'dc__truncate-text' and 'm-0' in the className. This should be a single space for consistency.

Copilot · 2026-01-05T16:55:28Z

src/components/app/list/DevtronAppListContainer.tsx

+                        placement="top"
+                        content={moment(lastDeployedTime).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)}
+                    >
+                        <p className="dc__truncate-text  m-0" data-testid="last-deployed-time">


Extra whitespace detected. There's double spacing between 'dc__truncate-text' and 'm-0' in the className. This should be a single space for consistency.

Copilot · 2026-01-05T16:55:28Z

src/components/app/list/DevtronAppListContainer.tsx

+    const isEnvConfigured = app.defaultEnv.name

-    const isSearchOrFilterApplied =
-        searchKey || appStatus.length || project.length || environment.length || namespace.length || cluster.length
+    if (!envCount || isRowInExpandState) {
+        return null
+    }

-    const abortControllerRef = useRef<AbortController>(new AbortController())
-    const [appListResponseLoading, appListResponse, appListError, appListReload] = useAsync(
-        () =>
-            abortPreviousRequests(
-                () =>
-                    getAppList(getDevtronAppListPayload(filterConfig, environmentList, namespaceList), {
-                        signal: abortControllerRef.current.signal,
-                    }),
-                abortControllerRef,
-            ),
-        [filterConfig, syncListData],
-        !appFiltersResponseLoading, // We need to wait until environment filters are created from cluster and namespace
+    return (
+        <div className="flex left dc__gap-6">
+            <span
+                data-testid={`${app.defaultEnv.name}-environment`}
+                className={`dc__truncate cn-9 ${isEnvConfigured ? '' : 'cn5'}`}
+            >
+                {isEnvConfigured ? app.defaultEnv.name : 'Not configured'}


Potential null reference error. Lines 75, 84, and 87 access app.defaultEnv.name without null checking, but defaultEnv is nullable (Environment | null according to the types). This could cause a runtime error if defaultEnv is null. Consider using optional chaining: app.defaultEnv?.name

Copilot · 2026-01-05T16:55:29Z

src/components/app/list/DevtronAppListContainer.tsx

+    const { name } = app
+
+    const onClick = () => {
+        push(redirectToAppDetails(app, app.defaultEnv.id))


Potential null reference error. Line 144 accesses app.defaultEnv.id without null checking. Since defaultEnv is nullable (Environment | null), this could cause a runtime error if defaultEnv is null. Consider using optional chaining and a fallback value: app.defaultEnv?.id ?? 0

Suggested change

push(redirectToAppDetails(app, app.defaultEnv.id))

push(redirectToAppDetails(app, app.defaultEnv?.id ?? 0))

Copilot · 2026-01-05T16:55:29Z

src/components/app/list/DevtronAppListContainer.tsx

+        return () => {
+            signals.removeEventListener(TableSignalEnum.ENTER_PRESSED, handleEnterPressed)
+        }
+    }, [])


Missing dependencies in useEffect. The effect uses 'id' and 'signals' but the dependency array is empty. This could lead to stale closures where the effect references outdated values. Consider adding 'id' and 'signals' to the dependency array.

Suggested change

}, [])

}, [id, signals])

Copilot · 2026-01-05T16:55:29Z

src/components/app/list/DevtronAppListContainer.tsx

+
+        return (
+            <div className="flex left">
+                <p data-testid={`${clusterName}-cluster`} className="dc__truncate-text  m-0">


Extra whitespace detected. There's double spacing between 'dc__truncate-text' and 'm-0' in the className. This should be a single space for consistency.

github-actions · 2026-01-07T12:00:32Z

Some linked issues are invalid. Please update the issue links:\nIssue # in is not found or invalid (HTTP }404).\n

github-actions · 2026-01-07T12:59:51Z

Some linked issues are invalid. Please update the issue links:\nIssue # in is not found or invalid (HTTP }404).\n

AbhishekA1509 · 2026-01-08T07:09:43Z

src/components/app/list/DevtronAppListContainer.tsx

-    })
-
-    const [expandedState, setExpandedState] = useState<DevtronAppExpandedState>(INITIAL_EXPANDED_STATE)
+const EnvironmentCellComponent = ({


Pls move into separate files CellComponents

AbhishekA1509 · 2026-01-08T07:14:03Z

src/components/app/list/DevtronAppListContainer.tsx

-    }
+    const columns = useMemo(
+        () => [
+            {


Move to utils

AbhishekA1509 · 2026-01-08T07:15:35Z

src/components/app/list/DevtronAppListContainer.tsx

+                CellComponent,
+            },
+            {
+                field: AppListSortableKeys.LAST_DEPLOYED,


Should this be conditional? Pls verify with deleted ExpandedRow.tsx

AbhishekA1509 · 2026-01-08T07:17:22Z

src/components/app/list/DevtronAppListContainer.tsx

-            {renderPagination()}
-        </>
+        <Table<App, FiltersTypeEnum.URL, TableAdditionalPropsType>
+            key={JSON.stringify({ syncListData, filterConfig })}


Should there be this big key?

AbhishekA1509 · 2026-01-08T07:22:13Z

src/components/app/list/DevtronAppListContainer.tsx

+        searchKey || appStatus.length || project.length || environment.length || namespace.length || cluster.length
+
+    const redirectToAppDetails = (app, envId: number): string => {
+        setCurrentAppName(app.name)


I think we don't need this since its set in AppHeader, can you confirm? since otherwise should add this in HoverComponent redirection as well?

AbhishekA1509 · 2026-01-08T07:31:55Z

src/components/app/list/DevtronAppListContainer.tsx

-        event.stopPropagation()
-        event.preventDefault()
-        expandRow(event.currentTarget.dataset.key)
+    const app = data as App


We should fix this by taking additional type param and based on that and isExpandedRow if its true type for row should toggle

AbhishekA1509 · 2026-01-08T07:32:53Z

src/components/app/list/DevtronAppListContainer.tsx

+        return (
+            <div className="flex left">
+                {lastDeployedTime && (
+                    <Tippy


Use Tooltip with alwaysShowOnHover

AbhishekA1509 · 2026-01-08T07:34:22Z

src/components/app/list/DevtronAppListContainer.tsx

-        setExpandedState((prevState) => ({ ...prevState, expandedRow: { ...prevState.expandedRow, [id]: true } }))
+    return (
+        <div className="flex left dc__gap-4 dc__visible-hover dc__visible-hover--parent">
+            <Tooltip content={name}>


Should this be on span?

github-actions · 2026-01-12T09:06:35Z

Some linked issues are invalid. Please update the issue links:\nIssue # in is not found or invalid (HTTP }404).\n

github-actions · 2026-01-12T10:51:17Z

Some linked issues are invalid. Please update the issue links:\nIssue # in is not found or invalid (HTTP }404).\n

sonarqubecloud · 2026-01-12T10:52:10Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

feat: use Table in DevtronAppList

0424a3a

Copilot AI review requested due to automatic review settings January 5, 2026 16:49

Elessar1802 requested review from vikramdevtron and vivek-devtron as code owners January 5, 2026 16:49

github-actions bot added the PR:Issue-verification-failed PR:Issue-verification-failed label Jan 5, 2026

Copilot started reviewing on behalf of Elessar1802 January 5, 2026 16:50 View session

Copilot AI reviewed Jan 5, 2026

View reviewed changes

fix: uat changes

da8ada3

fix: filters & update btn

01d29ca

AbhishekA1509 reviewed Jan 8, 2026

View reviewed changes

src/components/app/list/DevtronAppListContainer.tsx

}

const columns = useMemo(

() => [

{

Copy link

Member

AbhishekA1509 Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move to utils

AbhishekA1509 reviewed Jan 8, 2026

View reviewed changes

feat: expand row on envCount click

75b47a7

fix: uat

b9d5412

		status={isExpandedRow ? env.status : app.defaultEnv.appStatus}
		isVirtualEnv={isExpandedRow ? env.isVirtualEnvironment : app.defaultEnv.isVirtualEnvironment}

	const lastDeployedTime = isExpandedRow ? env.lastDeployedTime : app.defaultEnv.lastDeployedTime
	const lastDeployedTime = isExpandedRow ? env.lastDeployedTime : app.defaultEnv?.lastDeployedTime

	[syncListData, JSON.stringify(filterConfig)],
	[syncListData, filterConfig],

	app.defaultEnv.name && app.environments.length
	app.defaultEnv?.name && app.environments.length

	push(redirectToAppDetails(app, app.defaultEnv.id))
	push(redirectToAppDetails(app, app.defaultEnv?.id ?? 0))

feat: use Table in DevtronAppList #3034

Are you sure you want to change the base?

feat: use Table in DevtronAppList #3034

Uh oh!

Conversation

Elessar1802 commented Jan 5, 2026

Uh oh!

github-actions bot commented Jan 5, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 5, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 5, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 5, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 7, 2026

Uh oh!

github-actions bot commented Jan 7, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AbhishekA1509 Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 12, 2026

Uh oh!

github-actions bot commented Jan 12, 2026

Uh oh!

sonarqubecloud bot commented Jan 12, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

AbhishekA1509 Jan 8, 2026 •

edited

Loading