Add latest changes from gitlab-org/gitlab@master

7 files changed, 151 insertions, 10 deletions

diff --git a/app/assets/javascripts/ci/catalog/components/details/ci_resource_header.vue b/app/assets/javascripts/ci/catalog/components/details/ci_resource_header.vue
index b9d6173a777..929175b964f 100644
--- a/app/assets/javascripts/ci/catalog/components/details/ci_resource_header.vue
+++ b/app/assets/javascripts/ci/catalog/components/details/ci_resource_header.vue
@@ -49,7 +49,7 @@ export default {
       return getIdFromGraphQLId(this.resource.id);
     },
     hasLatestVersion() {
-      return this.latestVersion?.tagName;
+      return this.latestVersion?.name;
     },
     hasPipelineStatus() {
       return this.pipelineStatus?.text;
@@ -58,7 +58,7 @@ export default {
       return this.resource.latestVersion;
     },
     versionBadgeText() {
-      return this.latestVersion.tagName;
+      return this.latestVersion.name;
     },
     webPath() {
       return cleanLeadingSeparator(this.resource?.webPath);
@@ -92,7 +92,7 @@ export default {
             v-if="hasLatestVersion"
             size="sm"
             class="gl-ml-3 gl-my-1"
-            :href="latestVersion.tagPath"
+            :href="latestVersion.path"
           >
             {{ versionBadgeText }}
           </gl-badge>
diff --git a/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue b/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue
index 57d19af614f..42f8cea8727 100644
--- a/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue
+++ b/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue
@@ -67,8 +67,8 @@ export default {
     releasedAt() {
       return getTimeago().format(this.latestVersion?.releasedAt);
     },
-    tagName() {
-      return this.latestVersion?.tagName || this.$options.i18n.unreleased;
+    name() {
+      return this.latestVersion?.name || this.$options.i18n.unreleased;
     },
     webPath() {
       return cleanLeadingSeparator(this.resource?.webPath);
@@ -117,7 +117,7 @@ export default {
           <b> {{ resource.name }}</b>
         </gl-link>
         <div class="gl-display-flex gl-flex-grow-1 gl-md-justify-content-space-between">
-          <gl-badge size="sm" class="gl-h-5 gl-align-self-center">{{ tagName }}</gl-badge>
+          <gl-badge size="sm" class="gl-h-5 gl-align-self-center">{{ name }}</gl-badge>
           <span class="gl-display-flex gl-align-items-center gl-ml-5">
             <span
               v-gl-tooltip.top
diff --git a/app/assets/javascripts/ci/catalog/graphql/fragments/catalog_resource.fragment.graphql b/app/assets/javascripts/ci/catalog/graphql/fragments/catalog_resource.fragment.graphql
index b3a750e9604..316308e96d7 100644
--- a/app/assets/javascripts/ci/catalog/graphql/fragments/catalog_resource.fragment.graphql
+++ b/app/assets/javascripts/ci/catalog/graphql/fragments/catalog_resource.fragment.graphql
@@ -7,8 +7,8 @@ fragment CatalogResourceFields on CiCatalogResource {
   starCount
   latestVersion {
     id
-    tagName
-    tagPath
+    name
+    path
     releasedAt
     author {
       id
diff --git a/app/assets/javascripts/ci/catalog/graphql/queries/get_ci_catalog_resource_details.query.graphql b/app/assets/javascripts/ci/catalog/graphql/queries/get_ci_catalog_resource_details.query.graphql
index a77e8f12d03..efc8aa777d4 100644
--- a/app/assets/javascripts/ci/catalog/graphql/queries/get_ci_catalog_resource_details.query.graphql
+++ b/app/assets/javascripts/ci/catalog/graphql/queries/get_ci_catalog_resource_details.query.graphql
@@ -22,7 +22,7 @@ query getCiCatalogResourceDetails($fullPath: ID!) {
             }
           }
         }
-        tagName
+        name
         releasedAt
       }
     }
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 7d9ad83a1c6..cb6bea76762 100644
--- a/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue
+++ b/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue
@@ -1,9 +1,20 @@
 <script>
-import { GlButton, GlModal, GlModalDirective, GlCard, GlIcon } from '@gitlab/ui';
+import {
+  GlButton,
+  GlModal,
+  GlModalDirective,
+  GlCard,
+  GlIcon,
+  GlDisclosureDropdown,
+  GlCollapsibleListbox,
+  GlFormGroup,
+} from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import branchRulesQuery from 'ee_else_ce/projects/settings/repository/branch_rules/graphql/queries/branch_rules.query.graphql';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { expandSection } from '~/settings_panels';
 import { scrollToElement } from '~/lib/utils/common_utils';
+import createBranchRuleMutation from './graphql/mutations/create_branch_rule.mutation.graphql';
 import BranchRule from './components/branch_rule.vue';
 import { I18N, PROTECTED_BRANCHES_ANCHOR, BRANCH_PROTECTION_MODAL_ID } from './constants';
 
@@ -14,12 +25,16 @@ export default {
     BranchRule,
     GlButton,
     GlModal,
+    GlFormGroup,
     GlCard,
     GlIcon,
+    GlCollapsibleListbox,
+    GlDisclosureDropdown,
   },
   directives: {
     GlModal: GlModalDirective,
   },
+  mixins: [glFeatureFlagsMixin()],
   apollo: {
     branchRules: {
       query: branchRulesQuery,
@@ -38,18 +53,87 @@ export default {
   },
   inject: {
     projectPath: { default: '' },
+    branchRulesPath: { default: '' },
   },
   data() {
     return {
       branchRules: [],
+      branchRuleName: '',
+      searchQuery: '',
     };
   },
+  computed: {
+    addRuleItems() {
+      return [{ text: this.$options.i18n.branchName, action: () => this.openCreateRuleModal() }];
+    },
+    createRuleItems() {
+      return this.isWildcardAvailable ? [this.wildcardItem] : this.filteredOpenBranches;
+    },
+    filteredOpenBranches() {
+      const openBranches = window.gon.open_branches.map((item) => ({
+        text: item.text,
+        value: item.text,
+      }));
+      return openBranches.filter((item) => item.text.includes(this.searchQuery));
+    },
+    wildcardItem() {
+      return { text: this.$options.i18n.createWildcard, value: this.searchQuery };
+    },
+    isWildcardAvailable() {
+      return this.searchQuery.includes('*');
+    },
+    createRuleText() {
+      return this.branchRuleName || this.$options.i18n.branchNamePlaceholder;
+    },
+    branchRuleEditPath() {
+      return `${this.branchRulesPath}?branch=${encodeURIComponent(this.branchRuleName)}`;
+    },
+    primaryProps() {
+      return {
+        text: this.$options.i18n.createProtectedBranch,
+        attributes: {
+          variant: 'confirm',
+          disabled: !this.branchRuleName,
+        },
+      };
+    },
+    cancelProps() {
+      return {
+        text: this.$options.i18n.createBranchRule,
+      };
+    },
+  },
   methods: {
     showProtectedBranches() {
       // Protected branches section is on the same page as the branch rules section.
       expandSection(this.$options.protectedBranchesAnchor);
       scrollToElement(this.$options.protectedBranchesAnchor);
     },
+    openCreateRuleModal() {
+      this.$refs[this.$options.modalId].show();
+    },
+    handleBranchRuleSearch(query) {
+      this.searchQuery = query;
+    },
+    addBranchRule() {
+      this.$apollo
+        .mutate({
+          mutation: createBranchRuleMutation,
+          variables: {
+            projectPath: this.projectPath,
+            name: this.branchRuleName,
+          },
+        })
+        .then(() => {
+          window.location.assign(this.branchRuleEditPath);
+        })
+        .catch(() => {
+          createAlert({ message: this.$options.i18n.createBranchRuleError });
+        });
+    },
+    selectBranchRuleName(branchName) {
+      this.branchRuleName = branchName;
+    },
   },
   modalId: BRANCH_PROTECTION_MODAL_ID,
   protectedBranchesAnchor: PROTECTED_BRANCHES_ANCHOR,
@@ -72,7 +156,15 @@ export default {
           {{ branchRules.length }}
         </div>
       </div>
+      <gl-disclosure-dropdown
+        v-if="glFeatures.addBranchRule"
+        :toggle-text="$options.i18n.addBranchRule"
+        :items="addRuleItems"
+        size="small"
+        no-caret
+      />
       <gl-button
+        v-else
         v-gl-modal="$options.modalId"
         size="small"
         class="gl-ml-3"
@@ -99,6 +191,37 @@ export default {
       </div>
     </ul>
     <gl-modal
+      v-if="glFeatures.addBranchRule"
+      :ref="$options.modalId"
+      :modal-id="$options.modalId"
+      :title="$options.i18n.createBranchRule"
+      :action-primary="primaryProps"
+      :action-cancel="cancelProps"
+      @primary="addBranchRule"
+      @change="searchQuery = ''"
+    >
+      <gl-form-group
+        :label="$options.i18n.branchName"
+        :description="$options.i18n.branchNameDescription"
+      >
+        <gl-collapsible-listbox
+          v-model="branchRuleName"
+          searchable
+          :items="createRuleItems"
+          :toggle-text="createRuleText"
+          block
+          @search="handleBranchRuleSearch"
+          @select="selectBranchRuleName"
+        >
+          <template v-if="isWildcardAvailable" #list-item="{ item }">
+            {{ item.text }}
+            <code>{{ searchQuery }}</code>
+          </template>
+        </gl-collapsible-listbox>
+      </gl-form-group>
+    </gl-modal>
+    <gl-modal
+      v-else
       :ref="$options.modalId"
       :modal-id="$options.modalId"
       :title="$options.i18n.addBranchRule"
diff --git a/app/assets/javascripts/projects/settings/repository/branch_rules/constants.js b/app/assets/javascripts/projects/settings/repository/branch_rules/constants.js
index 4413d8eab4e..d16894e7d6f 100644
--- a/app/assets/javascripts/projects/settings/repository/branch_rules/constants.js
+++ b/app/assets/javascripts/projects/settings/repository/branch_rules/constants.js
@@ -15,6 +15,16 @@ export const I18N = {
     'BranchRules|After a protected branch is created, it will show up in the list as a branch rule.',
   ),
   createProtectedBranch: s__('BranchRules|Create protected branch'),
+  createBranchRule: s__('BranchRules|Create branch rule'),
+  branchName: s__('BranchRules|Branch name or pattern'),
+  branchNamePlaceholder: s__('BranchRules|Select Branch or create wildcard'),
+  branchNameDescription: s__(
+    'BranchRules|Wildcards such as *-stable or production/* are supported',
+  ),
+  createBranchRuleError: s__('BranchRules|Something went wrong while creating branch rule.'),
+  createBranchRuleSuccess: s__('BranchRules|Branch rule created.'),
+  createWildcard: s__('BranchRules|Create wildcard'),
+  cancel: s__('BranchRules|Cancel'),
 };
 
 export const PROTECTED_BRANCHES_ANCHOR = '#js-protected-branches-settings';
diff --git a/app/assets/javascripts/projects/settings/repository/branch_rules/graphql/mutations/create_branch_rule.mutation.graphql b/app/assets/javascripts/projects/settings/repository/branch_rules/graphql/mutations/create_branch_rule.mutation.graphql
new file mode 100644
index 00000000000..e5fb79e0176
--- /dev/null
+++ b/app/assets/javascripts/projects/settings/repository/branch_rules/graphql/mutations/create_branch_rule.mutation.graphql
@@ -0,0 +1,8 @@
+mutation createBranchRule($projectPath: ID!, $name: String!) {
+  branchRuleCreate(input: { projectPath: $projectPath, name: $name }) {
+    errors
+    branchRule {
+      name
+    }
+  }
+}