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

)

* 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/

* fix(DeviceSettings): "noreferrer" link

* fix(DeviceSettings): fixed code style

prettier --check -w "./**/*.{js,jsx,tsx}"

* feat(DeviceSettings): styling of docs info alert

Centering vertically (perfectionist hell :D)

* fix(DeviceSettings): docs info alert icon

https://github.com/nurikk/zigbee2mqtt-frontend/pull/2020/commits/
abc0b6e#r1599289271

* style(DeviceSettings): removed unnecessary <div>

* refactor(DeviceSettings): extracted ReadTheDocsInfo

fixes https://codebeat.co/projects/github-com-nurikk-zigbee2mqtt-frontend-dev/pull_requests/734366

* refactor(DeviceSettings): extracted ReadTheDocsInfo.tsx

fixes https://github.com/nurikk/zigbee2mqtt-frontend/actions/runs/9082086095/job/24957557514?pr=2020

* style(DeviceSettings): whitespace

`prettier --check "./**/*.{js,jsx,tsx}" -w`

fixes https://github.com/nurikk/zigbee2mqtt-frontend/actions/runs/9082225515/job/24958031689

I actually think it's more readable with the code being split into multiply lines…
Not sure why the `prettier` did not like it ;p

* fix(ReadTheDocsInfo): i18n

fixes https://github.com/nurikk/zigbee2mqtt-frontend/pull/2020/commits/
5e27780#r1604031584

src/components/ReadTheDocsInfo.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const ReadTheDocsInfo = (props: { docsUrl: string }): JSX.Element => {
+    const { docsUrl } = props;
+    const { t } = useTranslation('common');
+    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">
+                    {t('read_the_docs_info')}
+                </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 }}
+                />
+            </>
         );
     }
 }

src/i18n/locales/en.json

@@ -29,7 +29,8 @@
     "the_only_endpoint": "The only endpoint",
     "unbind": "Unbind",
     "write": "Write",
-    "destination_endpoint": "Destination endpoint"
+    "destination_endpoint": "Destination endpoint",
+    "read_the_docs_info": "Read about this in the documentation…"
   },
   "devicePage": {
     "about": "About",