From 727106f000c40f0963cb2549ecb45260222720fa Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Wed, 30 Jun 2021 12:38:56 -0700
Subject: [PATCH] Sort fork form namespaces alphabetically

This will ensure the namespaces are
displayed in alphabetical order by its name.

Changelog: changed
---
 .../projects/forks/new/components/fork_form.vue    | 10 +++++++++-
 .../forks/new/components/fork_form_spec.js         | 14 ++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
index ccdcd3c94e7120..cc46c793bd3dec 100644
--- a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
+++ b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
@@ -39,6 +39,14 @@ const initFormField = ({ value, required = true, skipValidation = false }) => ({
   feedback: null,
 });
 
+function sortNamespaces(namespaces) {
+  if (!namespaces || !namespaces?.length) {
+    return namespaces;
+  }
+
+  return namespaces.sort((a, b) => a.name.localeCompare(b.name));
+}
+
 export default {
   components: {
     GlForm,
@@ -206,7 +214,7 @@ export default {
   methods: {
     async fetchNamespaces() {
       const { data } = await axios.get(this.endpoint);
-      this.namespaces = data.namespaces;
+      this.namespaces = sortNamespaces(data.namespaces);
     },
     isVisibilityLevelDisabled(visibility) {
       return !this.allowedVisibilityLevels.includes(visibility);
diff --git a/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js b/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
index f9be0796546521..9fd9722b922bf3 100644
--- a/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
+++ b/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
@@ -181,6 +181,20 @@ describe('ForkForm component', () => {
       expect(optionsArray.at(1).text()).toBe(MOCK_NAMESPACES_RESPONSE[0].name);
       expect(optionsArray.at(2).text()).toBe(MOCK_NAMESPACES_RESPONSE[1].name);
     });
+
+    it('set namespaces in alphabetical order', async () => {
+      const namespace = {
+        name: 'aaa',
+        id: 3,
+      };
+      mockGetRequest({
+        namespaces: [...MOCK_NAMESPACES_RESPONSE, namespace],
+      });
+      createComponent();
+      await axios.waitForAll();
+
+      expect(wrapper.vm.namespaces).toEqual([namespace, ...MOCK_NAMESPACES_RESPONSE]);
+    });
   });
 
   describe('project slug', () => {
-- 
GitLab