[WIFI-13259] Fixed potential crash in field explanations

Signed-off-by: Charles <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wlan-cloud-owprov-ui",
-  "version": "3.0.0(5)",
+  "version": "3.0.0(6)",
   "description": "",
   "main": "index.tsx",
   "scripts": {

src/components/FormFields/ConfigurationFieldExplanation/index.tsx

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import { InfoIcon } from '@chakra-ui/icons';
+import { Tooltip } from '@chakra-ui/react';
+import { useAuth } from 'contexts/AuthProvider';
+
+const findDefinition = (
+  definitionKey?: string,
+  CONFIGURATION_DESCRIPTIONS?: {
+    [key: string]: { properties?: { [key: string]: { description: string } } };
+  },
+) => {
+  try {
+    if (!definitionKey || !CONFIGURATION_DESCRIPTIONS) return null;
+    const split = definitionKey.split('.');
+    const { length } = split;
+    if (length < 2) return null;
+    const start = split.slice(0, length - 1);
+    const end = split[length - 1];
+    return (
+      CONFIGURATION_DESCRIPTIONS[start.slice(0, length - 1).join('.')]?.properties?.[end ?? '']?.description ?? null
+    );
+  } catch (e) {
+    return null;
+  }
+};
+
+interface ConfigurationFieldExplanationProps {
+  definitionKey?: string;
+}
+const ConfigurationFieldExplanation: React.FC<ConfigurationFieldExplanationProps> = ({ definitionKey }) => {
+  const { configurationDescriptions } = useAuth();
+  const definition = useMemo(
+    () =>
+      findDefinition(
+        definitionKey,
+        configurationDescriptions as {
+          [key: string]: { properties: { [key: string]: { description: string } } };
+        },
+      ),
+    [configurationDescriptions],
+  );
+  if (!definition) return null;
+
+  return (
+    <Tooltip hasArrow label={definition}>
+      <InfoIcon ml={2} mb="2px" />
+    </Tooltip>
+  );
+};
+
+export default React.memo(ConfigurationFieldExplanation);