Skip to content

Commit 700082c

Browse files
Copilotastandrik
Copilot
and
astandrik
committed
Add PR analysis findings to existing documentation structure
Co-authored-by: astandrik <[email protected]>
1 parent 55e8e6e commit 700082c

File tree

3 files changed

+459
-770
lines changed

3 files changed

+459
-770
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 87 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
# GitHub Copilot Instructions for YDB Embedded UI
22

3-
> **Purpose**: Optimized guidance for GitHub Copilot when assisting with YDB Embedded UI development.
4-
> Derived from AGENTS.md but structured for Copilot's code suggestion patterns.
3+
> **Note**: This file contains project-specific instructions for GitHub Copilot code review and assistance.
4+
> These instructions are derived from AGENTS.md but formatted specifically for Copilot's consumption.
5+
> When updating project conventions, update both AGENTS.md (for human developers) and this file (for Copilot).
56
6-
## Quick Context
7+
## Project Overview
78

8-
**Project**: React-based monitoring interface for YDB clusters
9-
**Key Tech**: React 18.3 + TypeScript 5.x + Redux Toolkit 2.x + Gravity UI 7.x + React Router v5
9+
This is a React-based monitoring and management interface for YDB clusters. The codebase follows specific patterns and conventions that must be maintained.
1010

11-
## Critical Rules (Prevent 67% of Bugs)
11+
## Tech Stack Requirements
1212

13-
> Based on analysis of 267 code review comments - these prevent production issues.
13+
- Use React 18.3 with TypeScript 5.x
14+
- Use Redux Toolkit 2.x with RTK Query for state management
15+
- Use Gravity UI (@gravity-ui/uikit) 7.x for UI components
16+
- Use React Router v5 (NOT v6) for routing
17+
- Use Monaco Editor 0.52 for code editing features
1418

15-
### API & State Management
16-
- **NEVER** call APIs directly → use `window.api.module.method()` pattern
17-
- **NEVER** mutate Redux state → return new objects/arrays
18-
- **ALWAYS** wrap `window.api` calls in RTK Query with `injectEndpoints`
19+
## Critical Bug Prevention Patterns
20+
21+
> Based on analysis of 267 code review comments - these prevent 67% of production issues.
1922
2023
### React Performance (MANDATORY)
2124
- **ALWAYS** use `useMemo` for expensive computations, object/array creation
@@ -41,106 +44,96 @@ const handleClick = useCallback(() => {
4144
- **NEVER** expose authentication tokens in logs or console
4245
- **ALWAYS** validate user input before processing
4346
- **NEVER** skip error handling for async operations
44-
## Internationalization (MANDATORY)
45-
46-
- **NEVER** hardcode user-facing strings
47-
- **ALWAYS** create i18n entries in component's `i18n/` folder
48-
- Follow key format: `<context>_<content>` (e.g., `action_save`, `field_name`)
49-
- Register keysets with `registerKeysets()` using unique component name
5047

51-
```typescript
52-
// ✅ CORRECT
53-
const b = cn('component-name');
54-
<Button>{i18n('action_save')}</Button>
48+
## Critical Coding Rules
5549

56-
// ❌ WRONG
57-
<Button>Save</Button>
58-
```
50+
### API Architecture
5951

60-
## Component Patterns
52+
- NEVER call APIs directly - always use `window.api.module.method()` pattern
53+
- Use RTK Query's `injectEndpoints` pattern for API endpoints
54+
- Wrap `window.api` calls in RTK Query for proper state management
6155

62-
### Class Names (BEM)
63-
```typescript
64-
const b = cn('component-name');
65-
<div className={b()}>
66-
<div className={b('element')}>
67-
<span className={b('element', {modifier: true})}>
68-
```
56+
### Component Patterns
6957

70-
### Tables & Data Display
58+
- Use BEM naming with `cn()` utility: `const b = cn('component-name')`
7159
- Use `PaginatedTable` component for all data tables
7260
- Tables require: columns, fetchData function, and unique tableName
7361
- Use virtual scrolling for large datasets
7462

75-
### Error Handling
76-
```typescript
77-
// ✅ REQUIRED - All async operations
78-
try {
79-
const result = await apiCall();
80-
return result;
81-
} catch (error) {
82-
return <ResponseError error={error} />;
83-
}
84-
```
63+
### Internationalization (MANDATORY)
8564

86-
### Forms
87-
```typescript
88-
// ✅ REQUIRED - Clear errors on input, validate before submit
89-
const handleInputChange = (field, value) => {
90-
setValue(field, value);
91-
if (errors[field]) {
92-
setErrors(prev => ({ ...prev, [field]: null }));
93-
}
94-
};
95-
```
65+
- NEVER hardcode user-facing strings
66+
- ALWAYS create i18n entries in component's `i18n/` folder
67+
- Follow key format: `<context>_<content>` (e.g., `action_save`, `field_name`)
68+
- Register keysets with `registerKeysets()` using unique component name
69+
70+
### State Management
71+
72+
- Use Redux Toolkit with domain-based organization
73+
- NEVER mutate state in RTK Query - return new objects/arrays
74+
- Clear errors on user input in forms
75+
- Always handle loading states in UI
9676

97-
## Quality Gates (Before Every Commit)
98-
99-
1. ✅ Run `npm run lint` and `npm run typecheck` - NO exceptions
100-
2. ✅ Verify ALL user-facing strings use i18n (search for hardcoded text)
101-
3. ✅ Check ALL useEffect hooks have proper cleanup functions
102-
4. ✅ Ensure memoization for ALL expensive operations
103-
5. ✅ Validate error handling for ALL async operations
104-
6. ✅ Confirm NO authentication tokens exposed in logs
105-
7. ✅ Test mathematical expressions for edge cases (zero division)
106-
107-
## Code Suggestions Context
108-
109-
### Common Patterns to Suggest
110-
- `const b = cn('component-name')` for new components
111-
- `useMemo` for any array/object creation or filtering
112-
- `useCallback` for event handlers in dependencies
113-
- `i18n('key_name')` instead of hardcoded strings
114-
- `Number(value) || 0` instead of `Number(value)`
115-
- `condition > 0 ? calculation : 0` for divisions
116-
117-
### Avoid Suggesting
118-
- Direct API calls (suggest `window.api` instead)
119-
- Hardcoded strings (suggest i18n keys)
120-
- State mutations (suggest immutable returns)
121-
- Missing cleanup in useEffect
122-
- Missing error boundaries for async operations
77+
### UI Components
78+
79+
- Prefer Gravity UI components over custom implementations
80+
- Use `createToast` for notifications
81+
- Use `ResponseError` component for API errors
82+
- Use `Loader` and `TableSkeleton` for loading states
83+
84+
### Form Handling
85+
86+
- Always use controlled components with validation
87+
- Clear errors on user input
88+
- Validate before submission
89+
- Use Gravity UI form components with error states
90+
91+
### Dialog/Modal Patterns
92+
93+
- Use `@ebay/nice-modal-react` for complex modals
94+
- Use Gravity UI `Dialog` for simple dialogs
95+
- Always include loading states
12396

12497
### Type Conventions
125-
- API types: `TTenantInfo`, `TClusterInfo` (T prefix)
126-
- Located in `src/types/api/`
127-
- Use strict TypeScript, avoid `any`
98+
99+
- API types prefixed with 'T' (e.g., `TTenantInfo`, `TClusterInfo`)
100+
- Types located in `src/types/api/` directory
101+
102+
### Performance Requirements
103+
104+
- Use React.memo for expensive renders
105+
- Lazy load Monaco Editor
106+
- Batch API requests when possible
107+
- Use virtual scrolling for tables
108+
109+
### Testing Patterns
110+
111+
- Unit tests colocated in `__test__` directories
112+
- E2E tests use Playwright with page objects pattern
113+
- Use CSS class selectors for E2E element selection
128114

129115
### Navigation (React Router v5)
130-
- Use `useHistory`, `useParams` (NOT v6 hooks)
116+
117+
- Use React Router v5 hooks (`useHistory`, `useParams`)
131118
- Always validate route params exist before use
132119

133-
## Common Utilities for Suggestions
120+
## Common Utilities
134121

135-
- **Formatters**: `formatBytes()`, `formatDateTime()` from `src/utils/dataFormatters/`
136-
- **Class Names**: `cn()` from `src/utils/cn`
137-
- **Time Parsing**: utilities in `src/utils/timeParsers/`
138-
- **Query Helpers**: `src/utils/query.ts` for SQL/YQL
122+
- Formatters: `formatBytes()`, `formatDateTime()` from `src/utils/dataFormatters/`
123+
- Time parsing: utilities in `src/utils/timeParsers/`
124+
- Query utilities: `src/utils/query.ts` for SQL/YQL helpers
139125

140-
## Performance Requirements
126+
## Before Making Changes
141127

142-
When suggesting code changes:
143-
- Always consider React performance impact
144-
- Suggest memoization for expensive operations
145-
- Consider rendering performance for large datasets
146-
- Prefer Gravity UI components over custom implementations
128+
- Run `npm run lint` and `npm run typecheck` before committing
129+
- Follow conventional commit message format
130+
- Use conventional commit format for PR titles with lowercase subjects (e.g., "fix: update api endpoints", "feat: add new component", "chore: update dependencies")
131+
- PR title subjects must be lowercase (no proper nouns, sentence-case, start-case, pascal-case, or upper-case)
132+
- Ensure all user-facing text is internationalized
133+
- Test with a local YDB instance when possible
134+
135+
## Debugging Helpers
136+
137+
- `window.api` - Access API methods in browser console
138+
- `window.ydbEditor` - Monaco editor instance
139+
- Enable request tracing with `DEV_ENABLE_TRACING_FOR_ALL_REQUESTS`

0 commit comments

Comments
 (0)