feat(features): Adds icons next to the feature selection

docs/new-features/index.md

@@ -26,7 +26,10 @@ followed by one dedicated section per enabled feature with more insights.
 ### Example Feature
 
 Create a new file at `src/features/my-platform.tsx`. Every feature file
-must export exactly three things: `FeatureID`, `FeatureName` and `Component`
+must export exactly three things: `FeatureID`, `FeatureName` and `Component`.
+
+`FeatureIcon` is optional and can be set as a URL for a small icon or as
+text/emoji to display as an icon.
 
 Here is an example feature to start:
 
@@ -41,8 +44,9 @@ import {
 import { usePersistentState } from "../lib/usePersistentState.ts";
 
 // Required constants
-export const FeatureID = "my-platform";     // unique lowercase slug
-export const FeatureName = "My Platform";   // display name shown in the wizard
+export const FeatureID = "my-platform";    // unique lowercase slug
+export const FeatureName = "My Platform";  // display name shown in the wizard
+export const FeatureIcon = "";             // Either URL or text to display as icon, can be emoji!
 
 // The component that will be used when enabled to display the form
 export function Component({ goBack, goForward, setDashboardPanels }) {

package.json

@@ -13,8 +13,8 @@
     "moment": "^2.30.1",
     "oidc-client-ts": "^3.5.0",
     "primereact": "^10.9.7",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "react-oidc-context": "^3.3.1"
   },
   "devDependencies": {

src/Wizard.tsx

@@ -33,6 +33,7 @@ const DEFAULT_DASHBOARD_DATA = {
       enabled: false,
       id: feat.FeatureID,
       name: feat.FeatureName,
+      icon: feat?.FeatureIcon,
       component: feat.Component,
       overviewPanels: [],
       panels: [],

src/components/features.tsx

@@ -49,6 +49,8 @@ function renderFeatureToggle(featId, feat, toggleFeature){
           />
           <span className="toggle-slider"></span>
         </div>
+        {feat.icon.startsWith("http") && <img src={feat.icon} style={{width: '1.5em', height: '1.5em'}} />}
+        {!feat.icon.startsWith("http") && <span style={{width: '1.5em', height: '1.5em'}}>{ feat.icon }</span>}
         <span style={{fontWeight: '500'}}>{feat.name}</span>
       </label>
       <div className="form-hint"></div>

src/features/edge.tsx

@@ -8,6 +8,7 @@ import { useEnv } from '../components/env.tsx';
 
 export const FeatureID = "edge";
 export const FeatureName = "Edge Services";
+export const FeatureIcon = "https://www.rabbitmq.com/assets/files/rabbitmq-logo-e91cacd38fcef5219149bc5cfa10b384.svg";
 
 type Rabbit = {
   rabbitmq_cluster: string;

src/features/logs.tsx

@@ -15,6 +15,7 @@ import { usePersistentState } from '../lib/usePersistentState.ts';
 
 export const FeatureID = "logs";
 export const FeatureName = "Logs";
+export const FeatureIcon = "https://raw.githubusercontent.com/grafana/loki/refs/heads/main/docs/sources/logo.png";
 
 const ROW_BANNER = new TextPanelBuilder()
   .title("")

src/features/metrics.tsx

@@ -9,6 +9,7 @@ import { usePersistentState } from '../lib/usePersistentState.ts';
 
 export const FeatureID = "metrics";
 export const FeatureName = "Custom Metrics";
+export const FeatureIcon = "https://raw.githubusercontent.com/grafana/mimir/refs/heads/main/images/logo.png";
 
 const ROW_BANNER = new TextPanelBuilder()
   .title("")

src/features/novus.tsx

@@ -27,6 +27,7 @@ import { queryPrometheus } from "../lib/prometheusQuerier.ts";
 
 export const FeatureID = "novus";
 export const FeatureName = "Novus Runtime Information";
+export const FeatureIcon = "https://raw.githubusercontent.com/kubernetes/kubernetes/refs/heads/master/logo/logo.svg";
 
 // Boilerplate library panel definitions for Novus.
 // Replace UIDs with the actual library panel UIDs from your Grafana instance.

src/features/slo.tsx

@@ -16,6 +16,7 @@ import { usePersistentState } from '../lib/usePersistentState.ts';
 
 export const FeatureID = "slo";
 export const FeatureName = "Service Level Objective";
+export const FeatureIcon = "🚨";
 
 const ROW_BANNER = new TextPanelBuilder()
   .title("")