diff options
Diffstat (limited to 'app/assets/javascripts/projects/settings/repository/branch_rules/app.vue')
-rw-r--r-- | app/assets/javascripts/projects/settings/repository/branch_rules/app.vue | 52 |
1 files changed, 47 insertions, 5 deletions
diff --git a/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue b/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue index ada951f6867..e8eaf0a70b2 100644 --- a/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue +++ b/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue @@ -1,16 +1,58 @@ <script> -import { __ } from '~/locale'; +import { s__ } from '~/locale'; +import createFlash from '~/flash'; +import branchRulesQuery from './graphql/queries/branch_rules.query.graphql'; +import BranchRule from './components/branch_rule.vue'; + +export const i18n = { + queryError: s__( + 'ProtectedBranch|An error occurred while loading branch rules. Please try again.', + ), + emptyState: s__( + 'ProtectedBranch|Protected branches, merge request approvals, and status checks will appear here once configured.', + ), +}; export default { name: 'BranchRules', - i18n: { heading: __('Branch') }, + i18n, + components: { + BranchRule, + }, + apollo: { + branchRules: { + query: branchRulesQuery, + variables() { + return { + projectPath: this.projectPath, + }; + }, + update(data) { + return data.project?.branchRules?.nodes || []; + }, + error() { + createFlash({ message: this.$options.i18n.queryError }); + }, + }, + }, + props: { + projectPath: { + type: String, + required: true, + }, + }, + data() { + return { + branchRules: [], + }; + }, }; </script> <template> - <div> - <strong>{{ $options.i18n.heading }}</strong> + <div class="settings-content"> + <branch-rule v-for="rule in branchRules" :key="rule.name" :name="rule.name" /> - <!-- TODO - List branch rules (https://gitlab.com/gitlab-org/gitlab/-/issues/362217) --> + <span v-if="!branchRules.length" data-testid="empty">{{ $options.i18n.emptyState }}</span> </div> </template> |