From 43012e226d7cf37a7b434f8e79cf2b9d63bb64e7 Mon Sep 17 00:00:00 2001
From: Dylan Depass <dylandepass@gmail.com>
Date: Wed, 31 Jan 2024 09:46:24 -0500
Subject: [PATCH] fix: sort templates alphabetically

---
 .vscode/settings.json                         |  4 +-
 src/components/block-list/block-list.js       | 10 ++++-
 test/components/block-list/block-list.test.js | 37 +++++++++++++++++++
 test/fixtures/libraries.js                    |  2 +-
 test/fixtures/stubs/template.js               |  4 --
 5 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index b186058..1e13e7c 100644
--- a/.vscode/settings.json
+++ b/.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,
diff --git a/src/components/block-list/block-list.js b/src/components/block-list/block-list.js
index b7cecf6..64fbe27 100644
--- a/src/components/block-list/block-list.js
+++ b/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();
diff --git a/test/components/block-list/block-list.test.js b/test/components/block-list/block-list.test.js
index 0966467..691f678 100644
--- a/test/components/block-list/block-list.test.js
+++ b/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');
+    });
   });
 });
diff --git a/test/fixtures/libraries.js b/test/fixtures/libraries.js
index 7fd4712..4261234 100644
--- a/test/fixtures/libraries.js
+++ b/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',
 };
diff --git a/test/fixtures/stubs/template.js b/test/fixtures/stubs/template.js
index a44a0a0..98fee55 100644
--- a/test/fixtures/stubs/template.js
+++ b/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>