fix: sort templates alphabetically

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   "eslint.enable": true,
   "prettier.enable": true,

src/components/block-list/block-list.js

@@ -439,7 +439,15 @@ export class BlockList extends LitElement {
       // Wait for all block loading promises to resolve
       await Promise.all(promises);
 
-      // Sort results alphabetically
+      // Sort the templates alphabetically
+      if (templatesParentItem) {
+        const sortedTemplateChildren = Array.from(templatesParentItem.children)
+          .sort((a, b) => a.getAttribute('label').localeCompare(b.getAttribute('label')));
+
+        sortedTemplateChildren?.forEach(child => templatesParentItem.appendChild(child));
+      }
+
+      // Sort top level menu items alphabetically
       sideNav.append(...blockParentItems.sort((a, b) => {
         const labelA = a.getAttribute('label').toLowerCase();
         const labelB = b.getAttribute('label').toLowerCase();

test/components/block-list/block-list.test.js

@@ -186,5 +186,42 @@ describe('BlockRenderer', () => {
       navItemResults = sideNav.querySelectorAll('sp-sidenav-item:not([aria-hidden])');
       expect(navItemResults.length).to.equal(2);
     });
+
+    it('templates sorted alphabetically', async () => {
+      const template1 = {
+        ...TEMPLATE_LIBRARY_ITEM,
+        name: 'A Template',
+      };
+
+      const template2 = {
+        ...TEMPLATE_LIBRARY_ITEM,
+        name: 'x Template',
+      };
+
+      const template3 = {
+        ...TEMPLATE_LIBRARY_ITEM,
+        name: '1 Template',
+      };
+
+      const template4 = {
+        ...TEMPLATE_LIBRARY_ITEM,
+        name: 'f Template',
+      };
+
+      blockList.loadBlocks([template1, template2, template3, template4], container);
+      await waitUntil(
+        () => recursiveQuery(blockList, 'sp-sidenav'),
+        'Element did not render children',
+      );
+
+      const sideNav = recursiveQuery(blockList, 'sp-sidenav');
+      const templatesSideNavItem = sideNav.querySelector('sp-sidenav-item[label="Templates"]');
+      const childTemplates = templatesSideNavItem.querySelectorAll('sp-sidenav-item');
+
+      expect(childTemplates[0].getAttribute('label')).to.equal('1 Template');
+      expect(childTemplates[1].getAttribute('label')).to.equal('A Template');
+      expect(childTemplates[2].getAttribute('label')).to.equal('f Template');
+      expect(childTemplates[3].getAttribute('label')).to.equal('x Template');
+    });
   });
 });

test/fixtures/libraries.js

@@ -37,7 +37,7 @@ export const COMPOUND_BLOCK_LIBRARY_ITEM = {
 };
 
 export const TEMPLATE_LIBRARY_ITEM = {
-  name: 'Blog Post',
+  name: 'Blog Post Template',
   path: '/tools/sidekick/blocks/blog-post/blog-post',
   url: 'https://example.hlx.test/tools/sidekick/blocks/blog-post/blog-post',
 };

test/fixtures/stubs/template.js

@@ -47,10 +47,6 @@ export const TEMPLATE_STUB = createTag('div', {}, /* html */`
          <div>type</div>
          <div>template</div>
       </div>
-      <div>
-         <div>name</div>
-         <div>Blog Post Template</div>
-      </div>
       <div>
          <div>searchtags</div>
          <div>foo, bar</div>