Secrets Manager 프론트엔드는 Vue Router와 Apollo를 사용하는 Vue 애플리케이션입니다. ee/app/assets/javascripts/ci/secrets/에 있으며, index.js가 components/secrets_app.vue를 마운트합니다.

코드 구성#

• components/secrets_table/, components/secret_form/, components/secret_details/에 기능 컴포넌트가 있습니다.
• graphql/queries/와 graphql/mutations/에는 애플리케이션과 같은 위치에 둔 GraphQL 문서가 있습니다.
• router.js는 라우트를 정의하고, constants.js와 context_config.js는 공유 구성을 담고 있습니다.
• 설정 토글 컴포넌트는 이 트리 밖의 ee/app/assets/javascripts/pages/projects/shared/permissions/secrets_manager/에 있습니다.
• New secret은 사용자의 OpenBao 권한이 시크릿 생성을 허용할 때만 표시되며, 이는 Secrets Manager 상태 쿼리의 userPermissions.createSecrets에서 가져옵니다.
• 그룹이나 프로젝트가 차단되었거나, 데이터베이스가 엄격한 읽기 전용 모드이거나, Secrets Manager 상태 쿼리가 writeDenialReason을 반환하면 UI는 읽기 전용입니다. TRIAL_REQUIRED인 경우에는 누군가 체험판을 시작하거나 애드온을 활성화하기 전까지 Secrets Manager가 비활성화되어 있다는 경고도 표시합니다.

프론트엔드 테스트#

스펙은 소스 구성을 그대로 반영하여 ee/spec/frontend/ci/secrets/에 있습니다. 다음 명령으로 실행합니다.

yarn jest ee/spec/frontend/ci/secrets/

스펙은 createMockApollo로 GraphQL 계층을 목(mock) 처리하므로 OpenBao, 라이선스, 등록이 필요하지 않습니다. 일반 GitLab Development Kit(GDK)에서 전체 스위트를 실행할 수 있습니다. 공유 픽스처는 ee/spec/frontend/ci/secrets/mock_data.js에 있습니다.

스펙이 아니라 브라우저에서 기능을 직접 확인하려면 여전히 전체 백엔드 설정이 필요합니다. 자세한 내용은 Secrets Manager 로컬 설정을 참조합니다.

더 일반적인 프론트엔드 안내는 다음을 참조합니다.

• 프론트엔드 개발 가이드라인
• 프론트엔드 테스트 가이드