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

src/components/ReadTheDocsInfo.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const ReadTheDocsInfo = (props: { docsUrl: string }): JSX.Element => {
+    const { docsUrl } = props;
+    return (
+        <div className="card alert alert-info" role="alert">
+            <div className="card-body">
+                <i className="fa-solid fa-circle-info fa-2xl me-2"></i>
+
+                <a href={docsUrl} target="_blank" rel="noreferrer" className="alert-link align-middle">
+                    Read about this in the documentation…
+                </a>
+            </div>
+        </div>
+    );
+};

src/components/device-page/DeviceSettings.tsx

@@ -5,6 +5,7 @@ import { ISubmitEvent, UiSchema } from '@rjsf/core';
 import { DescriptionField, TitleField } from '../../i18n/rjsf-translation-fields';
 import merge from 'lodash/merge';
 import { DeviceSettingsProps, DeviceSettingsState, Form, ParamValue } from './settings';
+import { ReadTheDocsInfo } from '../ReadTheDocsInfo';
 
 const genericUiSchema: UiSchema = {
     'ui:order': ['friendly_name', 'disabled', 'retain', 'retention', 'qos', 'filtered_attributes', '*'],
@@ -54,14 +55,20 @@ 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 }}
-            />
+            <>
+                <ReadTheDocsInfo
+                    docsUrl={'https://www.zigbee2mqtt.io/guide/configuration/devices-groups.html#common-device-options'}
+                />
+
+                <Form
+                    schema={schema}
+                    formData={data}
+                    onSubmit={this.updateConfig}
+                    onChange={this.onFormChange}
+                    uiSchema={uiSchema}
+                    fields={{ TitleField, DescriptionField }}
+                />
+            </>
         );
     }
 }