use makeIconClass for widgets, add 'brands' support (#920)

Author: sawka

frontend/app/workspace/workspace.tsx

@@ -80,20 +80,6 @@ async function handleWidgetSelect(blockDef: BlockDef) {
     createBlock(blockDef);
 }
 
-function isIconValid(icon: string): boolean {
-    if (util.isBlank(icon)) {
-        return false;
-    }
-    return icon.match(iconRegex) != null;
-}
-
-function getIconClass(icon: string): string {
-    if (!isIconValid(icon)) {
-        return "fa fa-regular fa-browser fa-fw";
-    }
-    return `fa fa-solid fa-${icon} fa-fw`;
-}
-
 const Widget = React.memo(({ widget }: { widget: WidgetConfigType }) => {
     return (
         <div
@@ -102,7 +88,7 @@ const Widget = React.memo(({ widget }: { widget: WidgetConfigType }) => {
             title={widget.description || widget.label}
         >
             <div className="widget-icon" style={{ color: widget.color }}>
-                <i className={getIconClass(widget.icon)}></i>
+                <i className={util.makeIconClass(widget.icon, true, { defaultIcon: "browser" })}></i>
             </div>
             {!util.isBlank(widget.label) ? <div className="widget-label">{widget.label}</div> : null}
         </div>

frontend/util/util.ts

@@ -81,8 +81,11 @@ function jsonDeepEqual(v1: any, v2: any): boolean {
     return false;
 }
 
-function makeIconClass(icon: string, fw: boolean, opts?: { spin: boolean }): string {
-    if (icon == null) {
+function makeIconClass(icon: string, fw: boolean, opts?: { spin?: boolean; defaultIcon?: string }): string {
+    if (isBlank(icon)) {
+        if (opts?.defaultIcon != null) {
+            return makeIconClass(opts.defaultIcon, fw, { spin: opts?.spin });
+        }
         return null;
     }
     if (icon.match(/^(solid@)?[a-z0-9-]+$/)) {
@@ -95,6 +98,14 @@ function makeIconClass(icon: string, fw: boolean, opts?: { spin: boolean }): str
         icon = icon.replace(/^regular@/, "");
         return clsx(`fa fa-sharp fa-regular fa-${icon}`, fw ? "fa-fw" : null, opts?.spin ? "fa-spin" : null);
     }
+    if (icon.match(/^brands@[a-z0-9-]+$/)) {
+        // strip off the "brands@" prefix if it exists
+        icon = icon.replace(/^brands@/, "");
+        return clsx(`fa fa-brands fa-${icon}`, fw ? "fa-fw" : null, opts?.spin ? "fa-spin" : null);
+    }
+    if (opts?.defaultIcon != null) {
+        return makeIconClass(opts.defaultIcon, fw, { spin: opts?.spin });
+    }
     return null;
 }