Skip to content

feat(connectors): add Data Source Connectors landing page - #1269

Open
Niranjan-J-Joshi wants to merge 7 commits into
IBM:mainfrom
Niranjan-J-Joshi:connectors
Open

feat(connectors): add Data Source Connectors landing page#1269
Niranjan-J-Joshi wants to merge 7 commits into
IBM:mainfrom
Niranjan-J-Joshi:connectors

Conversation

@Niranjan-J-Joshi

Copy link
Copy Markdown
Contributor

Summary

Adds a new Connectors page and DataSourceConnectorsTable component to display data source connectors. The page currently uses mock data until the backend API is available.

Changes

New: DataSourceConnectorsTable

Location:
ui/catalog/src/components/DataSourceConnectorsTable/

A Carbon DataTable with:

  • Pagination
  • Search across connector fields (name, status, type, services, messages)
  • Column visibility management with reset option
  • CSV export (exports only visible columns and respects search filters)
  • Auto-refresh every 2 minutes
  • Loading skeleton during initial load
  • Empty states for errors, no data, and no search results
  • Status sorting that shows offline connectors first

Updated: CellRenderers.tsx

Added support for:

  • connected
  • offline

statuses in the shared StatusCell.

Shared Components Used

The Connectors table is built using the shared table framework and reuses:

  • useAutoRefresh
  • useCSVExport
  • useExportToastAutoDismiss
  • TableToolbarActions
  • TableToasts
  • TableEmptyStates
  • ExportModal
  • handleSharedTableAction
  • isSharedTableAction
  • filterRowsBySearch
  • getVisibleHeaders

Screenshots

image image image image image image image

Signed-off-by: Niranjan Joshi <Niranjan.Joshi1@ibm.com>
Comment thread ui/catalog/src/pages/Connectors/datasource-connectors-mock-data.json Outdated
Signed-off-by: Niranjan Joshi <Niranjan.Joshi1@ibm.com>
Comment thread ui/catalog/src/api/connectors.api.ts Outdated

const visibleHeaders = getVisibleHeaders(HEADERS, state.visibleColumns);

const paginatedRows = filteredRows;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

What is the purpose of this const? it's just an alias to filtered rows and creates a new variable with the same data.

@@ -0,0 +1,48 @@
import type {

@ryanmarc ryanmarc Aug 19, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

The layering of this seems inverted. The

This file imports its types from components/DataSourceConnectorsTable/types. If these are API responses, should they be moved to types/api.types?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Moved types related to api responses to api.types.ts

Signed-off-by: Niranjan Joshi <Niranjan.Joshi1@ibm.com>
Signed-off-by: Niranjan Joshi <Niranjan.Joshi1@ibm.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants