Sort fork form namespaces alphabetically

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

Changelog: changed

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);

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', () => {