diff options
Diffstat (limited to 'app/assets/javascripts/projects/settings')
6 files changed, 135 insertions, 17 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> diff --git a/app/assets/javascripts/projects/settings/repository/branch_rules/components/branch_rule.vue b/app/assets/javascripts/projects/settings/repository/branch_rules/components/branch_rule.vue new file mode 100644 index 00000000000..68750318029 --- /dev/null +++ b/app/assets/javascripts/projects/settings/repository/branch_rules/components/branch_rule.vue @@ -0,0 +1,61 @@ +<script> +import { GlBadge } from '@gitlab/ui'; +import { s__ } from '~/locale'; + +export const i18n = { + defaultLabel: s__('BranchRules|default'), + protectedLabel: s__('BranchRules|protected'), +}; + +export default { + name: 'BranchRule', + i18n, + components: { + GlBadge, + }, + props: { + name: { + type: String, + required: true, + }, + isDefault: { + type: Boolean, + required: false, + default: false, + }, + isProtected: { + type: Boolean, + required: false, + default: false, + }, + approvalDetails: { + type: Array, + required: false, + default: () => [], + }, + }, + computed: { + hasApprovalDetails() { + return this.approvalDetails && this.approvalDetails.length; + }, + }, +}; +</script> + +<template> + <div class="gl-border-b gl-pt-5 gl-pb-5"> + <strong class="gl-font-monospace">{{ name }}</strong> + + <gl-badge v-if="isDefault" variant="info" size="sm" class="gl-ml-2">{{ + $options.i18n.defaultLabel + }}</gl-badge> + + <gl-badge v-if="isProtected" variant="success" size="sm" class="gl-ml-2">{{ + $options.i18n.protectedLabel + }}</gl-badge> + + <ul v-if="hasApprovalDetails" class="gl-pl-6 gl-mt-2 gl-mb-0 gl-text-gray-500"> + <li v-for="(detail, index) in approvalDetails" :key="index">{{ detail }}</li> + </ul> + </div> +</template> diff --git a/app/assets/javascripts/projects/settings/repository/branch_rules/graphql/queries/branch_rules.query.graphql b/app/assets/javascripts/projects/settings/repository/branch_rules/graphql/queries/branch_rules.query.graphql new file mode 100644 index 00000000000..104a0c25a80 --- /dev/null +++ b/app/assets/javascripts/projects/settings/repository/branch_rules/graphql/queries/branch_rules.query.graphql @@ -0,0 +1,10 @@ +query getBranchRules($projectPath: ID!) { + project(fullPath: $projectPath) { + id + branchRules { + nodes { + name + } + } + } +} diff --git a/app/assets/javascripts/projects/settings/repository/branch_rules/mount_branch_rules.js b/app/assets/javascripts/projects/settings/repository/branch_rules/mount_branch_rules.js index abe0b93081e..35322e2e466 100644 --- a/app/assets/javascripts/projects/settings/repository/branch_rules/mount_branch_rules.js +++ b/app/assets/javascripts/projects/settings/repository/branch_rules/mount_branch_rules.js @@ -1,13 +1,28 @@ import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; import BranchRulesApp from '~/projects/settings/repository/branch_rules/app.vue'; +Vue.use(VueApollo); + +const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), +}); + export default function mountBranchRules(el) { if (!el) return null; + const { projectPath } = el.dataset; + return new Vue({ el, + apolloProvider, render(createElement) { - return createElement(BranchRulesApp); + return createElement(BranchRulesApp, { + props: { + projectPath, + }, + }); }, }); } diff --git a/app/assets/javascripts/projects/settings/topics/components/topics_token_selector.vue b/app/assets/javascripts/projects/settings/topics/components/topics_token_selector.vue index 9c8de9bef2d..3d553e71f71 100644 --- a/app/assets/javascripts/projects/settings/topics/components/topics_token_selector.vue +++ b/app/assets/javascripts/projects/settings/topics/components/topics_token_selector.vue @@ -2,7 +2,7 @@ import { GlTokenSelector, GlAvatarLabeled } from '@gitlab/ui'; import { s__ } from '~/locale'; import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants'; -import searchProjectTopics from '../queries/project_topics_search.query.graphql'; +import searchProjectTopics from '~/graphql_shared/queries/project_topics_search.query.graphql'; export default { components: { diff --git a/app/assets/javascripts/projects/settings/topics/queries/project_topics_search.query.graphql b/app/assets/javascripts/projects/settings/topics/queries/project_topics_search.query.graphql deleted file mode 100644 index 0c0a874d950..00000000000 --- a/app/assets/javascripts/projects/settings/topics/queries/project_topics_search.query.graphql +++ /dev/null @@ -1,10 +0,0 @@ -query searchProjectTopics($search: String) { - topics(search: $search) { - nodes { - id - name - title - avatarUrl - } - } -} |