[UI] Sort components alphabetically in flat widgets

ui/src/app/shared/components/edge/edgeconfig.ts

@@ -1,6 +1,7 @@
 import { TranslateService } from "@ngx-translate/core";
 import { ChannelAddress } from "../../shared";
 import { Widgets } from "../../type/widgets";
+import { ArrayUtils } from "../../utils/array/array.utils";
 import { Edge } from "./edge";
 
 export interface CategorizedComponents {
@@ -410,7 +411,7 @@ export class EdgeConfig {
         for (const componentId of componentIds) {
             result.push(this.components[componentId]);
         }
-        return result;
+        return result.sort(ArrayUtils.alphabetically(c => c.alias));
     }
 
     /**
@@ -475,7 +476,7 @@ export class EdgeConfig {
                 result.push(...this.getComponentsImplementingNature("io.openems.edge.meter.api.SymmetricMeter"));
         }
 
-        return result;
+        return result.sort(ArrayUtils.alphabetically(c => c.alias));
     }
 
     /**

ui/src/app/shared/utils/array/array.utils.spec.ts

@@ -25,6 +25,13 @@ describe("Array-Utils", () => {
         expect(() => ArrayUtils.sortedAlphabetically(inputArr, null)).toThrow();
     });
 
+    it("+alphabetically comparator", () => {
+        const inputArr = ["A", null, "C", undefined, "B", "a", "1"];
+        const sortedArr = ["1", "A", "a", "B", "C", null, undefined];
+
+        expect([...inputArr].sort(ArrayUtils.alphabetically(a => a))).toEqual(sortedArr);
+    });
+
     describe("ReducerFunctions", () => {
 
         it("+sum", () => {

ui/src/app/shared/utils/array/array.utils.ts

@@ -62,7 +62,20 @@ export namespace ArrayUtils {
      * @returns sorted array
      */
     export function sortedAlphabetically<T>(array: T[], fn: (arg: T) => string): T[] {
-        return array.sort((a: T, b: T) => {
+        return array.sort(alphabetically(fn));
+    }
+
+    /**
+     * Creates a comparator that sorts items alphabetically by a string key returned from `fn`.
+     *
+     * The comparator places falsy keys (null, undefined or empty string) after non-falsy keys;
+     * two falsy keys compare as equal.
+     *
+     * @param fn to get a string to sort by
+     * @returns A comparator `(a, b) => number` suitable for `Array.sort`.
+     */
+    export function alphabetically<T>(fn: (arg: T) => string): (a: T, b: T) => number {
+        return (a: T, b: T) => {
             const aVal = fn(a);
             const bVal = fn(b);
             if (!aVal) {
@@ -71,7 +84,7 @@ export namespace ArrayUtils {
                 return -1;
             }
             return aVal.localeCompare(bVal, undefined, { sensitivity: "accent" });
-        });
+        };
     }
 
     /**