refactor(DeviceSettings): extracted ReadTheDocsInfo

fixes https://codebeat.co/projects/github-com-nurikk-zigbee2mqtt-frontend-dev/pull_requests/734366
nurikk · May 14, 2024 · 080e707 · 080e707
1 parent f9ee9ba
commit 080e707
Showing 1 changed file with 25 additions and 14 deletions.
diff --git a/src/components/device-page/DeviceSettings.tsx b/src/components/device-page/DeviceSettings.tsx
@@ -6,6 +6,28 @@ import { DescriptionField, TitleField } from '../../i18n/rjsf-translation-fields
 import merge from 'lodash/merge';
 import { DeviceSettingsProps, DeviceSettingsState, Form, ParamValue } from './settings';
 
+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>
+    );
+};
+
 const genericUiSchema: UiSchema = {
     'ui:order': ['friendly_name', 'disabled', 'retain', 'retention', 'qos', 'filtered_attributes', '*'],
 };
@@ -55,20 +77,9 @@ export class DeviceSettings extends Component<DeviceSettingsProps, DeviceSetting
         const { schema, data, uiSchema } = this.getSchemaAndConfig();
         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="https://www.zigbee2mqtt.io/guide/configuration/devices-groups.html#common-device-options"
-                            target="_blank"
-                            rel="noreferrer"
-                            className="alert-link align-middle"
-                        >
-                            Read about this in the documentation…
-                        </a>
-                    </div>
-                </div>
+                <ReadTheDocsInfo
+                    docsUrl={'https://www.zigbee2mqtt.io/guide/configuration/devices-groups.html#common-device-options'}
+                />
 
                 <Form
                     schema={schema}