Topaz Console

A modern web console for Topaz

📋 Prerequisites

• Node.js (LTS version recommended)

🛠️ Installation

1. Clone the repository:

git clone [email protected]:aserto-dev/topaz-console.git
cd topaz-console

2. Install dependencies:

yarn install

ENV

Check the .env` file

VITE_REACT_APP_DISCOVERY_SERVICE_URL #topaz console service gateway address

🚀 Development

To start the development server:

yarn dev

The application will be available at http://localhost:3000

📦 Build

To create a production build:

yarn build

The build output will be in the dist directory.

🧪 Available Scripts

• yarn dev - Start development server
• yarn build - Create production build
• yarn preview - Preview production build
• yarn lint - Run ESLint
• yarn check - TypeScript type checking
• yarn generate:rest - Generate REST API types
• yarn detect-unused-exports - Detect unused exports

🧪 Testing

The project uses Vitest for testing and MSW (Mock Service Worker) for API mocking.

Running Tests

# Run tests in watch mode
yarn test

# Run tests once
yarn test:ci

# Run tests with coverage
yarn test:coverage

Test Structure

• Tests are located alongside components in *.test.tsx files
• API mocks are generated using Orval and located in src/api/*.msw.ts
• Test utilities and custom render functions are in src/testing/

Component Tests

• Use renderWithProviders from src/testing/render for consistent test setup
• Mock API calls using MSW handlers
• Test both success and error scenarios

🛠️ Tech Stack

• Framework: React 19
• Language: TypeScript
• Build Tool: Vite
• Styling: Styled Components, Bootstrap
• State Management: React Query
• Routing: React Router
• API Client: Orval
• Linting: ESLint
• Formatting: Prettier

📚 Documentation

• Topaz
• React Documentation
• TypeScript Documentation
• Vite Documentation
• React Query Documentation
• Styled Components Documentation

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the Apache License - see the LICENSE file for details.