Fix/open layouts by alphabetic order (#223)

**User-Facing Changes**
If no layout was previously selected and new layouts are uploaded, the
first layout in alphabetical order will be automatically selected.

**Description**
Layouts are sorted alphabetically before selecting the imported ones.

**Checklist**
- [x] The desktop version was tested and it is running ok
- [x] This change is covered by unit tests

packages/suite-base/src/providers/CurrentLayoutProvider/index.test.tsx

@@ -57,7 +57,7 @@ function makeMockLayoutManager() {
     setError: jest.fn(/*noop*/),
     setOnline: jest.fn(/*noop*/),
     getLayouts: jest.fn(),
-    getLayout: jest.fn().mockImplementation(mockThrow("getLayout")),
+    getLayout: jest.fn(),
     saveNewLayout: jest.fn().mockImplementation(mockThrow("saveNewLayout")),
     updateLayout: jest.fn().mockImplementation(mockThrow("updateLayout")),
     deleteLayout: jest.fn().mockImplementation(mockThrow("deleteLayout")),
@@ -121,6 +121,10 @@ function renderTest({
 }
 
 describe("CurrentLayoutProvider", () => {
+  afterEach(() => {
+    (console.warn as jest.Mock).mockClear();
+  });
+
   it("uses currentLayoutId from UserProfile to load from LayoutStorage", async () => {
     const expectedState: LayoutData = {
       layout: "Foo!bar",
@@ -161,7 +165,6 @@ describe("CurrentLayoutProvider", () => {
         },
       },
     ]);
-    (console.warn as jest.Mock).mockClear();
   });
 
   it("refuses to load an incompatible layout", async () => {
@@ -199,7 +202,6 @@ describe("CurrentLayoutProvider", () => {
       { selectedLayout: undefined },
       { selectedLayout: undefined },
     ]);
-    (console.warn as jest.Mock).mockClear();
   });
 
   it("keeps identity of action functions when modifying layout", async () => {
@@ -238,6 +240,42 @@ describe("CurrentLayoutProvider", () => {
     });
 
     expect(result.current.actions.savePanelConfigs).toBe(actions.savePanelConfigs);
-    (console.warn as jest.Mock).mockClear();
+  });
+
+  it("selects the first layout in alphabetic order, when there is no selected layout", async () => {
+    const mockLayoutManager = makeMockLayoutManager();
+    mockLayoutManager.getLayout.mockImplementation(async () => undefined);
+    mockLayoutManager.getLayouts.mockImplementation(async () => {
+      return [
+        {
+          id: "layout1",
+          name: "LAYOUT 1",
+          data: { data: TEST_LAYOUT },
+        },
+        {
+          id: "layout2",
+          name: "ABC Layout 2",
+          data: { data: TEST_LAYOUT },
+        },
+      ];
+    });
+
+    const mockUserProfile = makeMockUserProfile();
+    mockUserProfile.getUserProfile.mockResolvedValue({ currentLayoutId: undefined });
+
+    const { result, all } = renderTest({
+      mockLayoutManager,
+      mockUserProfile,
+    });
+
+    await act(async () => {
+      await result.current.childMounted;
+    });
+
+    const selectedLayout = all.find((item) => item.layoutState.selectedLayout?.id)?.layoutState
+      .selectedLayout?.id;
+
+    expect(selectedLayout).toBeDefined();
+    expect(selectedLayout).toBe("layout2");
   });
 });

packages/suite-base/src/providers/CurrentLayoutProvider/index.tsx

@@ -280,8 +280,9 @@ export default function CurrentLayoutProvider({
     }
 
     const layouts = await layoutManager.getLayouts();
-    if (layouts[0]) {
-      await setSelectedLayoutId(layouts[0].id);
+    if (layouts.length > 0) {
+      const sortedLayouts = [...layouts].sort((a, b) => a.name.localeCompare(b.name));
+      await setSelectedLayoutId(sortedLayouts[0]!.id);
       return;
     }