feat: Show favorites first in the attribute sidebar (#625)

* Show favorites first in the attribute sidebar

* Fix test

Author: joey-grafana

src/components/Explore/AttributesSidebar.test.tsx

@@ -866,6 +866,126 @@ describe('AttributesSidebar', () => {
     });
   });
 
+  describe('Favorites First in Scope Tabs', () => {
+    it('should show favorites first in Resource tab', () => {
+      mockUseFavoriteAttributes.mockReturnValue({
+        favoriteAttributes: ['resource.namespace', 'resource.cluster'], // These are favorites
+        toggleFavorite: jest.fn(),
+        reorderFavorites: jest.fn(),
+      });
+
+      const { container } = render(
+        <AttributesSidebar
+          options={sampleOptions}
+          selected={undefined}
+          onAttributeChange={mockOnAttributeChange}
+          model={mockModel}
+          showFavorites={true}
+        />
+      );
+
+      fireEvent.click(screen.getByText('Resource'));
+
+      const items = container.querySelectorAll('li[title]');
+      const labels = Array.from(items).map((item) => item.textContent);
+
+      // Favorites should be first (namespace, cluster), then non-favorites alphabetically (service.name)
+      expect(labels[0]).toContain('namespace');
+      expect(labels[1]).toContain('cluster');
+      expect(labels[2]).toContain('service.name');
+    });
+
+    it('should show favorites first in Span tab', () => {
+      mockUseFavoriteAttributes.mockReturnValue({
+        favoriteAttributes: ['span.db.system', 'span.http.method'], // These are favorites
+        toggleFavorite: jest.fn(),
+        reorderFavorites: jest.fn(),
+      });
+
+      const { container } = render(
+        <AttributesSidebar
+          options={sampleOptions}
+          selected={undefined}
+          onAttributeChange={mockOnAttributeChange}
+          model={mockModel}
+          showFavorites={true}
+        />
+      );
+
+      fireEvent.click(screen.getByText('Span'));
+
+      const items = container.querySelectorAll('li[title]');
+      const labels = Array.from(items).map((item) => item.textContent);
+
+      // Favorites should be first in custom order (db.system, http.method), then non-favorites (http.status_code)
+      expect(labels[0]).toContain('db.system');
+      expect(labels[1]).toContain('http.method');
+      expect(labels[2]).toContain('http.status_code');
+    });
+
+    it('should NOT show favorites first in All tab', () => {
+      mockUseFavoriteAttributes.mockReturnValue({
+        favoriteAttributes: ['span.db.system', 'resource.namespace'],
+        toggleFavorite: jest.fn(),
+        reorderFavorites: jest.fn(),
+      });
+
+      const { container } = render(
+        <AttributesSidebar
+          options={sampleOptions}
+          selected={undefined}
+          onAttributeChange={mockOnAttributeChange}
+          model={mockModel}
+          showFavorites={true}
+        />
+      );
+
+      fireEvent.click(screen.getByText('All'));
+
+      const items = container.querySelectorAll('li[title]');
+      const labels = Array.from(items).map((item) => item.textContent);
+
+      // Should be in alphabetical order, not favorites first
+      // Alphabetical: cluster, db.system, http.method, http.status_code, namespace, service.name
+      expect(labels[0]).toContain('cluster');
+      expect(labels[1]).toContain('db.system');
+      expect(labels[2]).toContain('http.method');
+    });
+
+    it('should apply search filter to favorites-first ordering in Resource tab', () => {
+      mockUseFavoriteAttributes.mockReturnValue({
+        favoriteAttributes: ['resource.cluster', 'resource.namespace'],
+        toggleFavorite: jest.fn(),
+        reorderFavorites: jest.fn(),
+      });
+
+      const { container } = render(
+        <AttributesSidebar
+          options={sampleOptions}
+          selected={undefined}
+          onAttributeChange={mockOnAttributeChange}
+          model={mockModel}
+          showFavorites={true}
+        />
+      );
+
+      fireEvent.click(screen.getByText('Resource'));
+
+      // Search for 'c'
+      const searchInput = screen.getByPlaceholderText('Search attributes...');
+      fireEvent.change(searchInput, { target: { value: 'c' } });
+
+      const items = container.querySelectorAll('li[title]');
+      const labels = Array.from(items).map((item) => item.textContent);
+
+      // Should show favorites first (both contain 'c'), then non-favorites
+      // 'cluster' contains 'c', 'namespace' contains 'c' at the end, both are favorites
+      expect(labels[0]).toContain('cluster');
+      expect(labels[1]).toContain('namespace');
+      expect(labels[2]).toContain('service.name'); // non-favorite that contains 'c'
+    });
+  });
+
   describe('Edge Cases', () => {
     it('should handle empty options array', () => {
       render(

src/components/Explore/AttributesSidebar.tsx

@@ -137,7 +137,7 @@ export function AttributesSidebar({
       return favoritesItems.filter((item) => matchesSearchValue(item.label, searchValue));
     }
 
-    return attributeItems.filter((item) => {
+    const matchingItems = attributeItems.filter((item) => {
       // Filter by search text
       const matchesSearch = matchesSearchValue(item.label, searchValue);
 
@@ -146,6 +146,32 @@ export function AttributesSidebar({
 
       return matchesSearch && matchesScope;
     });
+
+    // For Resource and Span tabs, show favorites first
+    if (selectedScope === 'Resource' || selectedScope === 'Span') {
+      const favorites: AttributeItem[] = [];
+      const nonFavorites: AttributeItem[] = [];
+
+      matchingItems.forEach((item) => {
+        if (favoriteAttributes.includes(item.value)) {
+          favorites.push(item);
+        } else {
+          nonFavorites.push(item);
+        }
+      });
+
+      favorites.sort((a, b) => {
+        const indexA = favoriteAttributes.indexOf(a.value);
+        const indexB = favoriteAttributes.indexOf(b.value);
+        return indexA - indexB;
+      });
+
+      // Non-favorites are already sorted alphabetically from attributeItems
+      return [...favorites, ...nonFavorites];
+    }
+
+    // For "All" tab, return items in their original alphabetical order
+    return matchingItems;
   }, [attributeItems, searchValue, selectedScope, favoriteAttributes, matchesSearchValue]);
 
   // Select the next favorite attribute if the selected attribute is in the filters (single mode only)