mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 18:35:07 +03:00
## What kind of change does this PR introduce? Studio UI and interaction polish. This is the second PR in the Pipelines review stack and depends on #50251. ## What is the current behaviour? Pipeline rows require a separate view action, cannot be sorted, and present lifecycle, lag, and destination terminology inconsistently. ## What is the new behaviour? Makes rows navigable with link-like mouse and keyboard behaviour, adds Name and Status sorting, reuses cached status queries, and moves row actions into the overflow menu. It also clarifies pipeline terminology, adds Docs and feedback actions, and standardises state, error, lag, and loading presentation with accessible announcements. | Before | After | | --- | --- | | <img width="1280" height="1323" alt="Replication Database ETL BigTable ETL Team Supabase" src="https://github.com/user-attachments/assets/53a62283-0e58-4408-8409-2b87a38af159" /> | <img width="1280" height="1323" alt="Replication Database Agua Basket Supabase" src="https://github.com/user-attachments/assets/ba4de1e0-4a84-43b4-8975-ca05a3056bcf" /> | ## To test 1. Open `/project/<ref>/database/replication`. 2. Sort by Name and Status, then confirm failed and stopped pipelines surface first when Status is ascending. 3. Click a row, use Enter or Space, and modifier-click or middle-click to verify link behaviour. 4. Open the row overflow menu and confirm it does not navigate. 5. Check loading, initial sync, caught up, numeric lag, unavailable lag, and table-error states where available. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added sortable pipeline lists with clearer loading, empty, and error states. - Pipeline rows now support direct navigation, detail viewing, status indicators, lag progress, and table error summaries. - Added initial-sync progress indicators and accessible status announcements. - Added documentation and feedback links. - Improved pipeline version update and enable/disable dialogs. - **Bug Fixes** - Prevented right-clicks from triggering navigation. - Improved unavailable lag and initial-sync handling. - **Style** - Standardized replication terminology and confirmation messaging around pipelines. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
138 lines
4.0 KiB
TypeScript
138 lines
4.0 KiB
TypeScript
import { PipelineStatusName } from './Replication.constants'
|
|
import { ReplicationPipelineStatusData } from '@/data/replication/pipeline-status-query'
|
|
import { PipelineStatusRequestStatus } from '@/state/replication-pipeline-request-status'
|
|
|
|
export const getStatusName = (
|
|
status: ReplicationPipelineStatusData['status'] | undefined
|
|
): PipelineStatusName | undefined => {
|
|
if (!status || typeof status !== 'object' || !('name' in status)) return undefined
|
|
return normalizePipelineStatusName(status.name)
|
|
}
|
|
|
|
export const normalizePipelineStatusName = (statusName?: string): PipelineStatusName | undefined =>
|
|
typeof statusName === 'string' &&
|
|
(Object.values(PipelineStatusName) as string[]).includes(statusName)
|
|
? (statusName as PipelineStatusName)
|
|
: undefined
|
|
|
|
export const PIPELINE_ENABLE_ALLOWED_FROM: PipelineStatusName[] = [PipelineStatusName.STOPPED]
|
|
export const PIPELINE_DISABLE_ALLOWED_FROM: PipelineStatusName[] = [
|
|
PipelineStatusName.STARTED,
|
|
PipelineStatusName.FAILED,
|
|
]
|
|
export const PIPELINE_ACTIONABLE_STATES: PipelineStatusName[] = [
|
|
PipelineStatusName.FAILED,
|
|
PipelineStatusName.STARTED,
|
|
PipelineStatusName.STOPPED,
|
|
]
|
|
|
|
export type PipelineDisplayStateKey =
|
|
| 'starting'
|
|
| 'stopping'
|
|
| 'restarting'
|
|
| 'failed'
|
|
| 'stopped'
|
|
| 'running'
|
|
| 'unknown'
|
|
|
|
export type PipelineDisplayType = 'failure' | 'loading' | 'success' | 'idle'
|
|
|
|
export interface PipelineDisplayState {
|
|
key: PipelineDisplayStateKey
|
|
label: string
|
|
title: string
|
|
message: string
|
|
badge: string
|
|
type: PipelineDisplayType
|
|
}
|
|
|
|
const PIPELINE_DISPLAY_STATES: Record<PipelineDisplayStateKey, PipelineDisplayState> = {
|
|
starting: {
|
|
key: 'starting',
|
|
label: 'Starting',
|
|
title: 'Starting pipeline',
|
|
message: 'Starting the pipeline. Replication will resume once running.',
|
|
badge: 'Starting',
|
|
type: 'loading',
|
|
},
|
|
stopping: {
|
|
key: 'stopping',
|
|
label: 'Stopping',
|
|
title: 'Stopping pipeline',
|
|
message: 'Stopping replication. Data transfer will stop after in-flight work finishes.',
|
|
badge: 'Stopping',
|
|
type: 'loading',
|
|
},
|
|
restarting: {
|
|
key: 'restarting',
|
|
label: 'Restarting',
|
|
title: 'Restarting pipeline',
|
|
message: 'Applying settings and restarting the pipeline',
|
|
badge: 'Restarting',
|
|
type: 'loading',
|
|
},
|
|
failed: {
|
|
key: 'failed',
|
|
label: 'Failed',
|
|
title: 'Pipeline failed',
|
|
message: 'Replication has encountered an error',
|
|
badge: 'Failed',
|
|
type: 'failure',
|
|
},
|
|
stopped: {
|
|
key: 'stopped',
|
|
label: 'Stopped',
|
|
title: 'Pipeline stopped',
|
|
message: 'Replication is stopped. Start the pipeline to resume data synchronization.',
|
|
badge: 'Stopped',
|
|
type: 'idle',
|
|
},
|
|
running: {
|
|
key: 'running',
|
|
label: 'Running',
|
|
title: 'Pipeline running',
|
|
message: 'Replication is active and processing changes',
|
|
badge: 'Running',
|
|
type: 'success',
|
|
},
|
|
unknown: {
|
|
key: 'unknown',
|
|
label: 'Unknown',
|
|
title: 'Pipeline status unknown',
|
|
message: 'Unable to determine pipeline status',
|
|
badge: 'Unknown',
|
|
type: 'idle',
|
|
},
|
|
}
|
|
|
|
export const getPipelineDisplayState = (
|
|
requestStatus?: PipelineStatusRequestStatus,
|
|
statusName?: PipelineStatusName
|
|
): PipelineDisplayState => {
|
|
if (requestStatus === PipelineStatusRequestStatus.RestartRequested) {
|
|
return PIPELINE_DISPLAY_STATES.restarting
|
|
}
|
|
if (requestStatus === PipelineStatusRequestStatus.StartRequested) {
|
|
return PIPELINE_DISPLAY_STATES.starting
|
|
}
|
|
if (requestStatus === PipelineStatusRequestStatus.StopRequested) {
|
|
return PIPELINE_DISPLAY_STATES.stopping
|
|
}
|
|
|
|
switch (statusName) {
|
|
case PipelineStatusName.STARTING:
|
|
return PIPELINE_DISPLAY_STATES.starting
|
|
case PipelineStatusName.FAILED:
|
|
return PIPELINE_DISPLAY_STATES.failed
|
|
case PipelineStatusName.STOPPED:
|
|
return PIPELINE_DISPLAY_STATES.stopped
|
|
case PipelineStatusName.STARTED:
|
|
return PIPELINE_DISPLAY_STATES.running
|
|
case PipelineStatusName.STOPPING:
|
|
return PIPELINE_DISPLAY_STATES.stopping
|
|
case PipelineStatusName.UNKNOWN:
|
|
default:
|
|
return PIPELINE_DISPLAY_STATES.unknown
|
|
}
|
|
}
|