Skip to content

design(service-catalog): create service catalog blueprint flows#2656

Draft
TheoGrandin74 wants to merge 289 commits into
stagingfrom
design/service-catalog
Draft

design(service-catalog): create service catalog blueprint flows#2656
TheoGrandin74 wants to merge 289 commits into
stagingfrom
design/service-catalog

Conversation

@TheoGrandin74
Copy link
Copy Markdown
Contributor

Add the design-stage UI for the Service Catalog feature: catalog grid with blueprints alongside Qovery default services, blueprint detail modal, 2-step provisioning wizard (Configuration + Summary), update review modal with conditional new-setup phase, service overview catalog context card, settings blueprint section, and a fake service demo page to preview the overview/settings additions in isolation. Mock catalog data lives in blueprints.ts pending the public-catalog API wiring.

Summary

Issue:

Screenshots / Recordings

Testing

  • Changes tested locally in the relevant Console's pages and Storybooks
  • yarn test or yarn test -u (if you need to regenerate snapshots)
  • yarn format
  • yarn lint

PR Checklist

  • I followed naming, styling, and TypeScript rules (see .cursor/rules)
  • I performed a self-review (diff inspected, dead code removed)
  • I titled the PR using Conventional Commits with a scope when possible (e.g. feat(service): add new Terraform service) - required for semantic-release
  • I only kept necessary comments, written in English (watch for useless AI comments)
  • I involved a designer to validate UI changes if I am not a designer
  • I covered new business logic with tests (unit)
  • I confirmed CI is green (Codecov red can be accepted)
  • I reviewed and executed locally any AI-assisted code

rmnbrd and others added 30 commits January 22, 2026 17:03
* refactor(date-picker): update styles for date picker component, removing dark mode styles and improving color tokens for better consistency

* feat(date-picker): refactoring the DatePicker component + adding enhanced functionality and styling

* refactor(date-picker): simplify files

* refactor(date-picker): update showTimeInput prop to showDateTimeInputs across components + file architecture
…nticated (#2334)

fix(new-navigation): redirection to login page when user is not
authenticated
* refactor(dropdown-menu): update styles for dropdown items and content, enhance CopyToClipboard hover effect, and improve Dropzone and EmptyState components' styling

* style(ui): tokens added to simple components from A to B

* feat(callout, description-list): enhance styling and add color options for Callout component

* styling(components): new component batch of tokenization + invert variant added to tw config + retina modifier added

* style(ui): update component styles for tokenization
* feat(new-nav): basis for Project overview page

* impr: remove duplicated component

* impr: UI tweaks for 'Dismiss' modal

* impr: add data for 'Last update' column

* feat: implement new environment overview API endpoint

* impr: add last operation to environment table

* impr(new-nav): add actions to table

* impr: add new icons and statuses for "last operation"

* impr: corrected TS warnings

* feat: add monochrome and size variants for StatusChip

* impr: UI tweaks

* impr: deploy icon UI tweaks

* impr: responsiveness of the table

* impr: change demo cluster icon

* impr: split components

* impr: add sorting logic for environment table sections

* impr: table UI tweaks
* feat: add basis for Project variables view

* impr: UI tweaks
#2346)

refactor(ui): remove ActionToolbar usage in env list and update button styles across components
)

style(multiple-selector): tokenization adding + small design improvments
* refactor(cluster): update cluster UI components and design improvments

* style(container-registry-form): correct HR styling
style(variables): fixing UI and adding missing tokens
* feat(new-nav): add settings for Environment

* impr: moved component

* chore: delete old pages

* feat(env settings): added page for the new nav, tokenization and removed all pages

* chore(graph): remove graph.json file containing project configuration

---------

Co-authored-by: Théo Grandin <theo.grandin74@gmail.com>
* feat(variables): add new settings and variables tabs in project environment

* feat(variables): add import functionality for environment variables and update UI components

* style(variables): update button and dropdown styles for improved UI consistency

* style(variables): update button icon and remove import option

* refactor(variables): format, refactor and clean-up

* chore(variables): renamed text, updated tests and snapshots
* style(code-editor):  code editor tokenization and light/dark mode compatibiliy

* style(code-editor): refactor + formatting
style(modals): modals tokenization and quick fixes
…ture setup (#2378)

* chore(dependencies): update @awesome.me/kit package and adjust related imports + set up settings structure

* feat(general): added settings general, update test
* feat(cluster): add features step in the creation flow

* style(vpc-features): update color classes for improved UI consistency
* feat(cluster): add summary step in cluster creation flow

* fix(cluster): improve form submission logic in step features

* fix(cluster-delete-modal): update navigation and improve UI consistency

* style(cluster-delete-modal): update snapshot styles for improved UI consistency

* feat(cluster): enhance organization route with deployment progress card and cluster status handling

* style(cluster-deployment-progress-card): update stroke colors for improved UI consistency

* feat(routeTree): update route imports for enhanced organization and structure in the console application
…ted buttons props (#2379)

* feat(settings-labels-annotations): added new page to console-v5, updated buttons

* feat(settings-labels-annotations): remove dead code

* feat(settings): refactor organization settings components and update modal behavior

* refactor(settings): rename PageOrganizationGeneralFeature to SettingsGeneral and update import in organization settings

* fix(routeTree): reorder and clean up imports for organization cluster routes
…2381)

chore(workflows): update pull request trigger and adjust build commands for better flexibility

- Changed pull request trigger to accept any branch.
- Updated build commands to differentiate between pull request and other flows, enhancing the build process for the console-v5 application.
- Added new route imports in routeTree.gen.ts for improved routing structure.
* feat(tests): enhance mock implementations and update snapshots for cluster components

- Updated mock implementations in tests to include additional parameters and improve accuracy.
- Refactored test snapshots for cluster components to reflect recent UI changes and ensure consistency.
- Adjusted test cases to utilize new mock structures and improve test reliability.

* feat(tests): update snapshots and improve UI consistency across components

- Updated snapshots for various components to reflect recent UI changes, including button styles and layout adjustments.
- Enhanced test cases for cluster and application settings to ensure accurate rendering and functionality.
- Improved class names for better alignment with design specifications and consistency across the application.

* refactor(tests): fix domain organizations

* refactor(tests): fix domain observability

* refactor(tests): fix shared feature spotlight

* refactor(workflows): streamline parallel command execution in CI configuration

* refactor(settings): update iconStyle handling in organization settings route and import environment variable modal

* refactor(tests): fix domains-onboarding-feature
RemiBonnet and others added 27 commits April 22, 2026 15:47
* Add basis for new creation flow for jobs (new NX lib and "general" step)

* Add Dockerfile step

* Add all form steps

* Add introduction step

* Add CRON job creation flow

* Fix Lint issue

* Update snapshots

* Fix unit tests

* Add support for templates

* Fix defautl form state issue when there is no template

* Remove useless comment

* Remove old pages

* Update summary color tokens

* Fix git icon color

* Fix opacity value

* Update SVG images for job creation flow introduction step

* Bring back TemplateFormSync component

* UI fixes for variables section

* Move SummaryValue component to shared/ui and use it in the summary steps of creation flows

* UI tweaks for summary buttons

* Refactor navigation paths in StepSummary component to use jobURL for dynamic routing

* Fix job creation flow test to match implementation

* Correct data-testid attr

* Fxi auto_deploy value

* Correct jobCreationSteps value

* Update typo in Jest config

* Lint fix

* Update snapshot

---------

Co-authored-by: Théo Grandin <theo.grandin74@gmail.com>
* feat(new-nav): add Dockerfile settings section

* Fix color token

* Post-review fixes

* Move components to "service-job" NX lib

* Lint fix

* Fix erroring import statement
* feat(assistant): add component

* refactor(dot-status): update background colors for status indicators

* refactor(assistant-panel): simplify portal target handling and clean up class names

* refactor(mintlify-hit): update class names for improved styling and consistency

* refactor(assistant-panel): update animation properties for smoother transitions

* refactor(assistant-panel): adjust top offset and animation durations for improved layout and transitions

* feat(assistant): introduce AssistantProvider and refactor context management for improved state handling

* refactor(header): update Header component to use assistantPanelTopOffset prop and integrate useStickyBottomOffset hook for improved layout management

* fix(header): remove assistantPanelTopOffset prop and simplify Header component structure for improved clarity

* refactor(assistant-panel): enhance search input focus behavior and improve animation handling

* refactor(organization-route): reorder class names for improved readability and consistency
…x service table re-rendering issue (#2625)

* Remove deprecated checkRunningStatusClosed query

* Fix table re-rendering issue

* Fix lint issue

* Fix checkbox issue and update snapshot

* Fix unit tests
* fix(new-nav): cluster mirroring registry data not loaded

* Bring back previous loader size
* fix(environment-action-toolbar): implement delete environment functionality with navigation redirect

* feat(sentry): integrate Sentry for error tracking and user identification in production environment

* refactor(terraform-variables-table): update source handling to use formatSource function and clean up state management

* feat(job-statuses-callout): add JobStatusesCallout component and integrate it into ServiceOverview for job service status notifications

* feat(docker): add NX_PUBLIC_INSTATUS_APP_ID environment variable to Dockerfile

* refactor(main): replace useState with useRef for router initialization and update Sentry integration

* refactor(terraform-variables-table): remove unused state for variable popover management

* refactor(service-overview): move JobStatusesCallout integration to the appropriate section for job services
* fix(clusters): refine EKS Anywhere credentials and creation UI

- filter credentials list/new credential to EKS Anywhere types in EKS Anywhere flow
- hide Kubernetes version badge on PARTIALLY_MANAGED cluster cards
- keep eu-west-3 as default but allow region selection for EKS Anywhere creation

* feat(cluster): get cluster JWT for eks anywhere clyster

* feat(cluster): do not show deploy action for eksanywhere cluster
* feat(empty-state): enhance EmptyState component with small size variant and update related tests

* feat(input-select): harmonize label behavior on both text input and select, update hover state, re-aligned labels when not focused/filled

* refactor(annotation-label-settings): standardize spacing and update tooltip icon styles for improved UI consistency

* chore(snapshots): update snapshot files to reflect changes in component styles and label positioning across various components for improved UI consistency

* refactor(empty-state): update size prop from 'small' to 'sm' for consistency across components

---------

Co-authored-by: RemiBonnet <bonnet.rem@gmail.com>
* impr(new-nav): order database versions

* Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* chore(console): remove legacy pages stack

* chore(console): rename console-v5 app

* test: fix several CI errors

* refactor(cluster-actions): update TypeScript ignore comments and add utility function for key-value extraction

* fix(networking-port-setting-modal): update onSubmit promise to resolve with undefined

* feat(service-overview): cycles add JobStatusesCallout from props

* fix(add-credit-card-modal): move to organization domain

* fix(github-application-callback): move to organization domain

* fix(database-settings): move to service-settings domain

* fix(console-shared): remove layout-logs component

* fix(console-shared): remove deprecated CreditCardForm component

* fix(force-run-modal): move to services domain

* fix(interfaces): remove deprecated code

* refactor(interfaces): remove unused interfaces and update related types

* fix(console-shared): remove deprecated flow-create-port components

* chore(routeTree): update route imports to include new organization settings and login routes

* fix(entrypoint-cmd-inputs): move services domain

* fix(shared-util-tests): update userEvent setup to advance timers with jest

* fix(helm-repository-create-edit-modal): enable real timers in tests

* Update ESlint and Prettier config

---------

Co-authored-by: Romain Billard <billard.rom@gmail.com>
…n flows pages (#2635)

* fix(clusters): hide clusters installation popover on logs and creation flows pages

* Add pre-check-logs route to exclusion list

* Cast hiddenProgressCardRouteIds var
…d toast library (#2632)

* chore(toast): migrate from react-hot-toast to sonner and remove shared toast library

* refactor(toast): simplify toast status handling by removing ts-pattern and using a mapping object

* fix(toast): address PR feedback and restore status icon colors

* fix(shared-ui): use twMerge from util-js in toast
* feat(agents): add qovery-ui design skill system

Introduces a structured design skill for AI agents working on the Qovery Console. Includes an always-loaded context file (.claude/design.md) and an invokable skill (.agents/skills/qovery-ui/) with seven reference guides covering colors, typography, spacing, components, copy, motion, anti-patterns, and accessibility.

Adds /audit, /polish, /component, /copy, /motion, and /craft commands. Updates AGENTS.md to surface the skill for discoverability. Symlinked under .claude/skills/ and .cursor/skills/.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Update skill and typography reference

* chore(format): fix format CI red

* refactor(qovery-ui): update spacing references and remove deprecated spacing.md

* feat(qovery-ui): add invert color tokens for dark surfaces

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Add the design-stage UI for the Service Catalog feature: catalog grid
with blueprints alongside Qovery default services, blueprint detail
modal, 2-step provisioning wizard (Configuration + Summary), update
review modal with conditional new-setup phase, service overview catalog
context card, settings blueprint section, and a fake service demo page
to preview the overview/settings additions in isolation. Mock catalog
data lives in blueprints.ts pending the public-catalog API wiring.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Base automatically changed from new-navigation to staging May 11, 2026 07:15
…ilities, improve layout in service creation and update flows
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants