andwati/zitadel

Fork 0

mirror of https://github.com/andwati/zitadel.git synced 2026-10-18 05:52:51 +00:00

Files

T

History

dd9dcf9f72 feat(console): improve org search performance in create project grant page #11121 (#12057 )

<!--
Please inform yourself about the contribution guidelines on submitting a
PR here:
https://github.com/zitadel/zitadel/blob/main/CONTRIBUTING.md#submit-a-pull-request-pr.
Take note of how PR/commit titles should be written and replace the
template texts in the sections below. Don't remove any of the sections.
It is important that the commit history clearly shows what is changed
and why.
Important: By submitting a contribution you agree to the terms from our
Licensing Policy as described here:
https://github.com/zitadel/zitadel/blob/main/LICENSING.md#community-contributions.
-->

# Which Problems Are Solved

When creating a new Project Grant in the Zitadel console, the UI becomes
extremely sluggish/unusable. The issue appears tied to the organization
search dropdown attempting to load a very large dataset.

# How the Problems Are Solved

The refactored `SearchOrgAutocompleteComponent` uses server side
filtering and ondemand loading using infinite scrolling. This makes sure
on a subset of organizations is ever loaded on the client.

# Additional Changes

- Added tailwindcss for easier styling
- Removed build warnings
- Removed some of the SCSS syntax warnings

# Additional Context
- Closes #11121

---------

Co-authored-by: Max Peintner <[email protected]>

2026-04-22 11:46:27 +02:00

scripts

fix(console): update protoc-gen-js (#12046 )

2026-04-13 10:59:04 +02:00

src

feat(console): improve org search performance in create project grant page #11121 (#12057 )

2026-04-22 11:46:27 +02:00

.editorconfig

feat(console): integrate frontend (#95 )

2020-05-13 14:41:43 +02:00

.env.dev

chore: rehaul DevX (#10571 )

2025-10-08 10:27:02 +02:00

.postcssrc.json

feat(console): improve org search performance in create project grant page #11121 (#12057 )

2026-04-22 11:46:27 +02:00

.prettierignore

chore(e2e): formatting with prettier (#4385 )

2022-09-19 19:49:46 +02:00

.prettierrc

fix(console): use authService for auth user page (#5233 )

2023-02-27 12:03:44 +01:00

AGENTS.md

chore(build): enhance proto caching and install binary plugins for improved performance, remove reliance on BSR (#11634 )

2026-02-19 08:04:17 +00:00

angular.json

feat(console): improve org search performance in create project grant page #11121 (#12057 )

2026-04-22 11:46:27 +02:00

buf.gen.yaml

chore(build): enhance proto caching and install binary plugins for improved performance, remove reliance on BSR (#11634 )

2026-02-19 08:04:17 +00:00

eslint.config.mjs

chore: standardised the eslint config structure accross the project (#11814 )

2026-03-12 11:02:52 +01:00

karma.conf.js

feat(console): integrate frontend (#95 )

2020-05-13 14:41:43 +02:00

ngsw-config.json

fix: update assets in ngsw-config.json (#1027 )

2020-11-27 16:32:14 +01:00

package.json

feat(console): improve org search performance in create project grant page #11121 (#12057 )

2026-04-22 11:46:27 +02:00

prebuild.development.js

chore(dev): fix fetching http env json (#5921 )

2023-05-24 13:07:55 +00:00

project.json

chore(build): enhance proto caching and install binary plugins for improved performance, remove reliance on BSR (#11634 )

2026-02-19 08:04:17 +00:00

README.md

chore: rename configuration to settings (#11568 )

2026-02-18 14:25:42 +01:00

tsconfig.app.json

chore(console): Angular 20 #10690 (#10768 )

2025-10-08 07:10:50 +00:00

tsconfig.json

chore: deps update (#11968 )

2026-04-02 15:53:08 +02:00

tsconfig.spec.json

chore(console): dependency update (#5653 )

2023-04-18 15:42:29 +02:00

README.md

Zitadel Management Console

The Management Console is Zitadel's management UI.

It is built using Angular and part of the Zitadel monorepo.

To get started follow the contributing quick start.

Building

To build for production:

pnpm nx run @zitadel/console:build

This will:

Generate proto files (via prebuild script)
Build the Angular app with production optimizations

Linting

To run linting and formatting checks:

pnpm nx @zitadel/console:lint

To auto-fix formatting issues:

pnpm nx @zitadel/console:lint-fix

Project Structure

src/app/proto/generated/ - Generated proto files (Angular-specific format)
buf.gen.yaml - Local proto generation configuration
project.json - Nx orchestration and caching for builds and tests
prebuild.development.js - Development environment settings script

Dependency Chain

The Management Console app has the following build dependencies managed by Nx:

@zitadel/proto:generate - Generates the protobuf stubs
@zitadel/client:build - Builds the TypeScript gRPC client library
@zitadel/console:generate - Generates Management Console-specific protobuf stubs
@zitadel/console:build - Creates a production build from Management Console

This ensures that the Management Console always has access to the latest client library and protobuf definitions.

Proto Generation Details

@zitadel/proto generation: Modern ES modules with @bufbuild/protobuf for v2 APIs
Local buf.gen.yaml generation: Traditional protobuf JavaScript classes for v1 APIs

The Management Console app calls Zitadel v1 and v2 APIs. As long as the Management Console still calls v1 APIs, it needs to import client stubs from separate sources:

Source outputs from direct buf generation for v1 APIs
@zitadel/client for v2 APIs

Legacy v1 API (Traditional Protobuf)

Uses local buf.gen.yaml configuration
Generates traditional Google protobuf JavaScript classes extending jspb.Message
Uses plugins: protocolbuffers/js, grpc/web, grpc-ecosystem/openapiv2
Output: src/app/proto/generated/
Used for: Most existing Management Console functionality

Modern v2 API (ES Modules)

Uses @zitadel/proto package generation
Generates modern ES modules with @bufbuild/protobuf
Uses plugin: @bufbuild/es with ES modules and JSON types
Output: login/packages/zitadel-proto/
Used for: New user v2 API and services

Dependency Management

The Management Console's project.json ensures proper execution order:

@zitadel/proto:generate runs first (modern ES modules)
Management Console's local generation runs second (traditional protobuf)
Build/lint/start tasks depend on both generations being complete

This approach allows the Management Console app to use both v1 and v2 APIs while maintaining proper build dependencies.

Legacy Information

This project was originally generated with Angular CLI version 8.3.20 and has been updated over time.