diff --git a/app/assets/javascripts/projects/settings/branch_rules/components/view/constants.js b/app/assets/javascripts/projects/settings/branch_rules/components/view/constants.js
index 9cc75f82737f9e19fb3cde8fc2e7bfe9e1777af4..e5322d6aaba5da9427e301c24f7100e1f5e084f6 100644
--- a/app/assets/javascripts/projects/settings/branch_rules/components/view/constants.js
+++ b/app/assets/javascripts/projects/settings/branch_rules/components/view/constants.js
@@ -5,8 +5,8 @@ export const I18N = {
deleteRule: s__('BranchRules|Delete rule'),
manageProtectionsLinkTitle: s__('BranchRules|Manage in protected branches'),
targetBranch: s__('BranchRules|Target branch'),
+ ruleTarget: s__('BranchRules|Rule target'),
branchNameOrPattern: s__('BranchRules|Branch name or pattern'),
- branch: s__('BranchRules|Target branch'),
allBranches: s__('BranchRules|All branches'),
matchingBranchesLinkTitle: s__('BranchRules|%{total} matching %{subject}'),
protectBranchTitle: s__('BranchRules|Protect branch'),
@@ -45,7 +45,6 @@ export const I18N = {
'BranchRules|Are you sure you want to delete this branch rule? This action cannot be undone.',
),
deleteRuleModalDeleteText: s__('BranchRules|Delete branch rule'),
- targetRule: s__('BranchRules|Target branch'),
updateTargetRule: s__('BranchRules|Update target branch'),
update: s__('BranchRules|Update'),
edit: s__('BranchRules|Edit'),
diff --git a/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue b/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue
index 975a094764829500a4c6c5258b514a4608bd6daa..7b49c02adb4b0c681b846e7b39cf0d6bf6e4c64c 100644
--- a/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue
+++ b/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue
@@ -162,14 +162,6 @@ export default {
allBranches() {
return this.branch === ALL_BRANCHES_WILDCARD;
},
- allBranchesLabel() {
- return this.$options.i18n.allBranches;
- },
- branchTitle() {
- return this.allBranches
- ? this.$options.i18n.targetBranch
- : this.$options.i18n.branchNameOrPattern;
- },
matchingBranchesLinkHref() {
return mergeUrlParams({ state: 'all', search: `^${this.branch}$` }, this.branchesPath);
},
@@ -237,42 +229,45 @@ export default {
<template>
<div>
<div class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
- <h3 class="gl-mb-5">{{ $options.i18n.pageTitle }}</h3>
+ <h1 class="h3 gl-mb-5">{{ $options.i18n.pageTitle }}</h1>
<gl-button
v-if="glFeatures.editBranchRules && branchRule"
v-gl-modal="$options.deleteModalId"
data-testid="delete-rule-button"
category="secondary"
variant="danger"
+ :disabled="$apollo.loading"
>{{ $options.i18n.deleteRule }}
</gl-button>
</div>
- <gl-loading-icon v-if="$apollo.loading" />
+ <gl-loading-icon v-if="$apollo.loading" size="lg" />
<div v-else-if="!branchRule">{{ $options.i18n.noData }}</div>
<div v-else>
- <gl-card>
+ <gl-card
+ class="gl-new-card"
+ header-class="gl-new-card-header"
+ body-class="gl-new-card-body gl-p-5"
+ >
<template #header>
- <div class="gl-display-flex gl-justify-content-space-between">
- <strong>{{ $options.i18n.targetRule }}</strong>
- <gl-button
- v-if="glFeatures.addBranchRule || glFeatures.editBranchRules"
- v-gl-modal="$options.editModalId"
- data-testid="edit-rule-button"
- size="small"
- >{{ $options.i18n.edit }}</gl-button
- >
- </div>
+ <strong>{{ $options.i18n.ruleTarget }}</strong>
+ <gl-button
+ v-if="glFeatures.addBranchRule || glFeatures.editBranchRules"
+ v-gl-modal="$options.editModalId"
+ data-testid="edit-rule-button"
+ size="small"
+ >{{ $options.i18n.edit }}</gl-button
+ >
</template>
<div v-if="allBranches" class="gl-mt-2" data-testid="all-branches">
- {{ allBranchesLabel }}
+ {{ $options.i18n.allBranches }}
</div>
- <code v-else class="gl-mt-2" data-testid="branch">{{ branch }}</code>
+ <code v-else class="gl-bg-none p-0 gl-font-base" data-testid="branch">{{ branch }}</code>
<p v-if="matchingBranchesCount" class="gl-mt-3 gl-mb-0">
<gl-link :href="matchingBranchesLinkHref">{{ matchingBranchesLinkTitle }}</gl-link>
</p>
</gl-card>
- <h4 class="gl-mb-1 gl-mt-5">{{ $options.i18n.protectBranchTitle }}</h4>
+ <h2 class="h4 gl-mb-1 gl-mt-5">{{ $options.i18n.protectBranchTitle }}</h2>
<gl-sprintf :message="$options.i18n.protectBranchDescription">
<template #link="{ content }">
<gl-link :href="$options.protectedBranchesHelpDocLink">
@@ -280,121 +275,121 @@ export default {
</gl-link>
</template>
</gl-sprintf>
- </div>
-
- <!-- Allowed to push -->
- <protection
- class="gl-mt-3"
- :header="allowedToPushHeader"
- :header-link-title="$options.i18n.manageProtectionsLinkTitle"
- :header-link-href="protectedBranchesPath"
- :roles="pushAccessLevels.roles"
- :users="pushAccessLevels.users"
- :groups="pushAccessLevels.groups"
- data-testid="allowed-to-push-content"
- />
- <!-- Allowed to merge -->
- <protection
- :header="allowedToMergeHeader"
- :header-link-title="$options.i18n.manageProtectionsLinkTitle"
- :header-link-href="protectedBranchesPath"
- :roles="mergeAccessLevels.roles"
- :users="mergeAccessLevels.users"
- :groups="mergeAccessLevels.groups"
- data-testid="allowed-to-merge-content"
- />
-
- <!-- Force push -->
- <div class="gl-display-flex gl-align-items-center">
- <gl-icon
- :size="14"
- data-testid="force-push-icon"
- :name="forcePushAttributes.icon"
- :class="forcePushAttributes.iconClass"
+ <!-- Allowed to push -->
+ <protection
+ class="gl-mt-3"
+ :header="allowedToPushHeader"
+ :header-link-title="$options.i18n.manageProtectionsLinkTitle"
+ :header-link-href="protectedBranchesPath"
+ :roles="pushAccessLevels.roles"
+ :users="pushAccessLevels.users"
+ :groups="pushAccessLevels.groups"
+ data-testid="allowed-to-push-content"
/>
- <strong class="gl-ml-2">{{ forcePushAttributes.title }}</strong>
- </div>
- <div class="gl-text-gray-400 gl-mb-2">{{ $options.i18n.forcePushDescription }}</div>
+ <!-- Allowed to merge -->
+ <protection
+ :header="allowedToMergeHeader"
+ :header-link-title="$options.i18n.manageProtectionsLinkTitle"
+ :header-link-href="protectedBranchesPath"
+ :roles="mergeAccessLevels.roles"
+ :users="mergeAccessLevels.users"
+ :groups="mergeAccessLevels.groups"
+ data-testid="allowed-to-merge-content"
+ />
- <!-- EE start -->
- <!-- Code Owners -->
- <div v-if="showCodeOwners">
+ <!-- Force push -->
<div class="gl-display-flex gl-align-items-center">
<gl-icon
- data-testid="code-owners-icon"
:size="14"
- :name="codeOwnersApprovalAttributes.icon"
- :class="codeOwnersApprovalAttributes.iconClass"
+ data-testid="force-push-icon"
+ :name="forcePushAttributes.icon"
+ :class="forcePushAttributes.iconClass"
/>
- <strong class="gl-ml-2">{{ codeOwnersApprovalAttributes.title }}</strong>
+ <strong class="gl-ml-2">{{ forcePushAttributes.title }}</strong>
</div>
- <div class="gl-text-gray-400">{{ codeOwnersApprovalAttributes.description }}</div>
- </div>
+ <div class="gl-text-gray-400 gl-mb-2">{{ $options.i18n.forcePushDescription }}</div>
- <!-- Approvals -->
- <template v-if="showApprovers">
- <h4 class="gl-mb-1 gl-mt-5">{{ $options.i18n.approvalsTitle }}</h4>
- <gl-sprintf :message="$options.i18n.approvalsDescription">
- <template #link="{ content }">
- <gl-link :href="$options.approvalsHelpDocLink">
- {{ content }}
- </gl-link>
- </template>
- </gl-sprintf>
+ <!-- EE start -->
+ <!-- Code Owners -->
+ <div v-if="showCodeOwners">
+ <div class="gl-display-flex gl-align-items-center">
+ <gl-icon
+ data-testid="code-owners-icon"
+ :size="14"
+ :name="codeOwnersApprovalAttributes.icon"
+ :class="codeOwnersApprovalAttributes.iconClass"
+ />
+ <strong class="gl-ml-2">{{ codeOwnersApprovalAttributes.title }}</strong>
+ </div>
- <approval-rules-app
- :is-mr-edit="false"
- :is-branch-rules-edit="true"
- @submitted="$apollo.queries.project.refetch()"
- >
- <template #rules>
- <project-rules :is-branch-rules-edit="true" />
- </template>
- </approval-rules-app>
- </template>
+ <div class="gl-text-gray-400">{{ codeOwnersApprovalAttributes.description }}</div>
+ </div>
- <!-- Status checks -->
- <template v-if="showStatusChecks">
- <h4 class="gl-mb-1 gl-mt-5">{{ $options.i18n.statusChecksTitle }}</h4>
- <gl-sprintf :message="$options.i18n.statusChecksDescription">
- <template #link="{ content }">
- <gl-link :href="$options.statusChecksHelpDocLink">
- {{ content }}
- </gl-link>
- </template>
- </gl-sprintf>
+ <!-- Approvals -->
+ <template v-if="showApprovers">
+ <h2 class="h4 gl-mb-1 gl-mt-5">{{ $options.i18n.approvalsTitle }}</h2>
+ <gl-sprintf :message="$options.i18n.approvalsDescription">
+ <template #link="{ content }">
+ <gl-link :href="$options.approvalsHelpDocLink">
+ {{ content }}
+ </gl-link>
+ </template>
+ </gl-sprintf>
- <protection
- class="gl-mt-3"
- :header="statusChecksHeader"
- :header-link-title="$options.i18n.statusChecksLinkTitle"
- :header-link-href="statusChecksPath"
- :status-checks="statusChecks"
- />
- </template>
- <!-- EE end -->
- <gl-modal
- v-if="glFeatures.editBranchRules"
- :ref="$options.deleteModalId"
- :modal-id="$options.deleteModalId"
- :title="$options.i18n.deleteRuleModalTitle"
- :ok-title="$options.i18n.deleteRuleModalDeleteText"
- ok-variant="danger"
- @ok="deleteBranchRule"
- >
- <p>{{ $options.i18n.deleteRuleModalText }}</p>
- </gl-modal>
+ <approval-rules-app
+ :is-mr-edit="false"
+ :is-branch-rules-edit="true"
+ @submitted="$apollo.queries.project.refetch()"
+ >
+ <template #rules>
+ <project-rules :is-branch-rules-edit="true" />
+ </template>
+ </approval-rules-app>
+ </template>
+
+ <!-- Status checks -->
+ <template v-if="showStatusChecks">
+ <h2 class="h4 gl-mb-1 gl-mt-5">{{ $options.i18n.statusChecksTitle }}</h2>
+ <gl-sprintf :message="$options.i18n.statusChecksDescription">
+ <template #link="{ content }">
+ <gl-link :href="$options.statusChecksHelpDocLink">
+ {{ content }}
+ </gl-link>
+ </template>
+ </gl-sprintf>
+
+ <protection
+ class="gl-mt-3"
+ :header="statusChecksHeader"
+ :header-link-title="$options.i18n.statusChecksLinkTitle"
+ :header-link-href="statusChecksPath"
+ :status-checks="statusChecks"
+ />
+ </template>
+ <!-- EE end -->
+ <gl-modal
+ v-if="glFeatures.editBranchRules"
+ :ref="$options.deleteModalId"
+ :modal-id="$options.deleteModalId"
+ :title="$options.i18n.deleteRuleModalTitle"
+ :ok-title="$options.i18n.deleteRuleModalDeleteText"
+ ok-variant="danger"
+ @ok="deleteBranchRule"
+ >
+ <p>{{ $options.i18n.deleteRuleModalText }}</p>
+ </gl-modal>
- <branch-rule-modal
- v-if="glFeatures.editBranchRules"
- :id="$options.editModalId"
- :ref="$options.editModalId"
- :title="$options.i18n.updateTargetRule"
- :action-primary-text="$options.i18n.update"
- @primary="editBranchRule({ name: $event })"
- />
+ <branch-rule-modal
+ v-if="glFeatures.editBranchRules"
+ :id="$options.editModalId"
+ :ref="$options.editModalId"
+ :title="$options.i18n.updateTargetRule"
+ :action-primary-text="$options.i18n.update"
+ @primary="editBranchRule({ name: $event })"
+ />
+ </div>
</div>
</template>
diff --git a/app/assets/javascripts/projects/settings/branch_rules/components/view/protection.vue b/app/assets/javascripts/projects/settings/branch_rules/components/view/protection.vue
index 813c667dcdd2ae06aa70c30dbb4adcdb398ad816..ee920cf3f19ff1569d8ae0e06206ff4af6682c14 100644
--- a/app/assets/javascripts/projects/settings/branch_rules/components/view/protection.vue
+++ b/app/assets/javascripts/projects/settings/branch_rules/components/view/protection.vue
@@ -64,12 +64,14 @@ export default {
</script>
<template>
- <gl-card class="gl-mb-5" body-class="gl-py-0">
+ <gl-card
+ class="gl-new-card gl-mb-5"
+ header-class="gl-new-card-header"
+ body-class="gl-new-card-body gl-px-5"
+ >
<template #header>
- <div class="gl-display-flex gl-justify-content-space-between">
- <strong>{{ header }}</strong>
- <gl-link :href="headerLinkHref">{{ headerLinkTitle }}</gl-link>
- </div>
+ <strong>{{ header }}</strong>
+ <gl-link :href="headerLinkHref">{{ headerLinkTitle }}</gl-link>
</template>
<!-- Roles -->
diff --git a/app/assets/javascripts/projects/settings/branch_rules/components/view/protection_row.vue b/app/assets/javascripts/projects/settings/branch_rules/components/view/protection_row.vue
index 366c69556f247411c34aedf8d5044ede45c8a45c..aac180f1eab28a75f5ec112673ceb7838539ccd2 100644
--- a/app/assets/javascripts/projects/settings/branch_rules/components/view/protection_row.vue
+++ b/app/assets/javascripts/projects/settings/branch_rules/components/view/protection_row.vue
@@ -94,7 +94,12 @@ export default {
:href="avatar.webUrl"
:title="avatar.name"
>
- <gl-avatar :src="avatar.avatarUrl" :label="avatar.name" :size="$options.AVATAR_SIZE" />
+ <gl-avatar
+ :src="avatar.avatarUrl"
+ :label="avatar.name"
+ :alt="avatar.name"
+ :size="$options.AVATAR_SIZE"
+ />
</gl-avatar-link>
</template>
</gl-avatars-inline>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index c53183109699386436c45807f34e35d3a7b4b6f8..a1e15724a79dd9f2681a7bf72098a73e588700d4 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -9037,6 +9037,9 @@ msgstr ""
msgid "BranchRules|Roles"
msgstr ""
+msgid "BranchRules|Rule target"
+msgstr ""
+
msgid "BranchRules|Select Branch or create wildcard"
msgstr ""