feat(DeviceSettings): info alert with a link to the documentation

Allows the user to quickly find what are the settings options for. I personally was looking for what is "Disabled" option actually doing. The info icon generated using: * https://getbootstrap.com/docs/5.0/components/alerts/#icons * https://icons.getbootstrap.com/icons/info-circle-fill/
MacDada · May 11, 2024 · abc0b6e · abc0b6e
1 parent a4b6bc2
commit abc0b6e
Showing 1 changed file with 35 additions and 8 deletions.
diff --git a/src/components/device-page/DeviceSettings.tsx b/src/components/device-page/DeviceSettings.tsx
@@ -54,14 +54,41 @@ export class DeviceSettings extends Component<DeviceSettingsProps, DeviceSetting
     render(): ReactNode {
         const { schema, data, uiSchema } = this.getSchemaAndConfig();
         return (
-            <Form
-                schema={schema}
-                formData={data}
-                onSubmit={this.updateConfig}
-                onChange={this.onFormChange}
-                uiSchema={uiSchema}
-                fields={{ TitleField, DescriptionField }}
-            />
+            <div>
+                <div className="card alert alert-info" role="alert">
+                    <div className="card-body">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="24"
+                            height="24"
+                            fill="currentColor"
+                            className="bi bi-info-circle-fill flex-shrink-0 me-2"
+                            viewBox="0 0 16 16"
+                        >
+                            <path
+                                d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"
+                            />
+                        </svg>
+
+                        <a
+                            href="https://www.zigbee2mqtt.io/guide/configuration/devices-groups.html#common-device-options"
+                            target="_blank"
+                            className="alert-link"
+                        >
+                            Read about this in the documentation…
+                        </a>
+                    </div>
+                </div>
+
+                <Form
+                    schema={schema}
+                    formData={data}
+                    onSubmit={this.updateConfig}
+                    onChange={this.onFormChange}
+                    uiSchema={uiSchema}
+                    fields={{ TitleField, DescriptionField }}
+                />
+            </div>
         );
     }
 }