From 42d0c48b583762875a90491f2e915ee20d2317e3 Mon Sep 17 00:00:00 2001
From: Charles <charles.bourque96@gmail.com>
Date: Tue, 2 Jan 2024 11:42:01 -0500
Subject: [PATCH] [WIFI-13259] Fixed potential crash in field explanations

Signed-off-by: Charles <charles.bourque96@gmail.com>
---
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 .../ConfigurationFieldExplanation/index.jsx   | 42 ---------------
 .../ConfigurationFieldExplanation/index.tsx   | 51 +++++++++++++++++++
 4 files changed, 54 insertions(+), 45 deletions(-)
 delete mode 100644 src/components/FormFields/ConfigurationFieldExplanation/index.jsx
 create mode 100644 src/components/FormFields/ConfigurationFieldExplanation/index.tsx

diff --git a/package-lock.json b/package-lock.json
index c94eee88..320360ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "wlan-cloud-owprov-ui",
-  "version": "3.0.0(5)",
+  "version": "3.0.0(6)",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "wlan-cloud-owprov-ui",
-      "version": "3.0.0(5)",
+      "version": "3.0.0(6)",
       "license": "ISC",
       "dependencies": {
         "@chakra-ui/anatomy": "^2.1.1",
diff --git a/package.json b/package.json
index ee580009..b1033449 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/FormFields/ConfigurationFieldExplanation/index.jsx b/src/components/FormFields/ConfigurationFieldExplanation/index.jsx
deleted file mode 100644
index 18e090c6..00000000
--- a/src/components/FormFields/ConfigurationFieldExplanation/index.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { useMemo } from 'react';
-import { InfoIcon } from '@chakra-ui/icons';
-import { Tooltip } from '@chakra-ui/react';
-import PropTypes from 'prop-types';
-import { useAuth } from 'contexts/AuthProvider';
-
-const findDefinition = (definitionKey, CONFIGURATION_DESCRIPTIONS) => {
-  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;
-};
-
-const propTypes = {
-  definitionKey: PropTypes.string,
-};
-
-const defaultProps = {
-  definitionKey: null,
-};
-
-const ConfigurationFieldExplanation = ({ definitionKey }) => {
-  const { configurationDescriptions } = useAuth();
-  const definition = useMemo(
-    () => findDefinition(definitionKey, configurationDescriptions),
-    [configurationDescriptions],
-  );
-  if (!definition) return null;
-
-  return (
-    <Tooltip hasArrow label={definition}>
-      <InfoIcon ml={2} mb="2px" />
-    </Tooltip>
-  );
-};
-
-ConfigurationFieldExplanation.propTypes = propTypes;
-ConfigurationFieldExplanation.defaultProps = defaultProps;
-export default React.memo(ConfigurationFieldExplanation);
diff --git a/src/components/FormFields/ConfigurationFieldExplanation/index.tsx b/src/components/FormFields/ConfigurationFieldExplanation/index.tsx
new file mode 100644
index 00000000..112cd3d1
--- /dev/null
+++ b/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);