From 1bbb0676bfe2a8ad66e83c1813c9a1bf69969af7 Mon Sep 17 00:00:00 2001
From: dganesh05 <divya.ganesh@codepath.org>
Date: Sun, 26 Oct 2025 15:03:40 -0400
Subject: [PATCH] feat(TagsList): sort tags alphabetically and update related
 logic

---
 .gitignore                                    |  2 ++
 .../src/components/Tags/TagsList.tsx          | 25 ++++++++++++-------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/.gitignore b/.gitignore
index b3ef8b6db115..56a0086730eb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -126,3 +126,5 @@ docker/*local*
 test-report.html
 superset/static/stats/statistics.html
 .aider*
+
+.cursor
\ No newline at end of file
diff --git a/superset-frontend/src/components/Tags/TagsList.tsx b/superset-frontend/src/components/Tags/TagsList.tsx
index 3e7dd4099eb0..9ac8929c085d 100644
--- a/superset-frontend/src/components/Tags/TagsList.tsx
+++ b/superset-frontend/src/components/Tags/TagsList.tsx
@@ -57,22 +57,29 @@ const TagsList = ({
 
   const collapse = () => setTempMaxTags(maxTags);
 
+  // Sort tags alphabetically by name (case-insensitive) with memoization
+  const sortedTags = useMemo(() => {
+    return [...tags].sort((a, b) =>
+      a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+    );
+  }, [tags]);
+
   const tagsIsLong: boolean | null = useMemo(
-    () => (tempMaxTags ? tags.length > tempMaxTags : null),
-    [tags.length, tempMaxTags],
+    () => (tempMaxTags ? sortedTags.length > tempMaxTags : null),
+    [sortedTags.length, tempMaxTags],
   );
 
   const extraTags: number | null = useMemo(
     () =>
-      typeof tempMaxTags === 'number' ? tags.length - tempMaxTags + 1 : null,
-    [tagsIsLong, tags.length, tempMaxTags],
+      typeof tempMaxTags === 'number' ? sortedTags.length - tempMaxTags + 1 : null,
+    [tagsIsLong, sortedTags.length, tempMaxTags],
   );
 
   return (
     <TagsDiv className="tag-list">
       {tagsIsLong && typeof tempMaxTags === 'number' ? (
         <>
-          {tags.slice(0, tempMaxTags - 1).map((tag: TagType, index) => (
+          {sortedTags.slice(0, tempMaxTags - 1).map((tag: TagType, index) => (
             <Tag
               id={tag.id}
               key={tag.id}
@@ -82,17 +89,17 @@ const TagsList = ({
               editable={editable}
             />
           ))}
-          {tags.length > tempMaxTags ? (
+          {sortedTags.length > tempMaxTags ? (
             <Tag
               name={`+${extraTags}...`}
               onClick={expand}
-              toolTipTitle={tags.map(t => t.name).join(', ')}
+              toolTipTitle={sortedTags.map(t => t.name).join(', ')}
             />
           ) : null}
         </>
       ) : (
         <>
-          {tags.map((tag: TagType, index) => (
+          {sortedTags.map((tag: TagType, index) => (
             <Tag
               id={tag.id}
               key={tag.id}
@@ -103,7 +110,7 @@ const TagsList = ({
             />
           ))}
           {maxTags ? (
-            tags.length > maxTags ? (
+            sortedTags.length > maxTags ? (
               <Tag name="..." onClick={collapse} />
             ) : null
           ) : null}