Convert ReactObjectTableViewer to tsx, remove horizontal option

jsx/package.json

@@ -37,7 +37,6 @@
     "react-dom": "^17.0.1",
     "react-icons": "^4.1.0",
     "react-multi-select-component": "^3.0.7",
-    "react-object-table-viewer": "^1.0.7",
     "react-redux": "^7.2.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

jsx/src/components/ReactObjectTableViewer/ReactObjectTableViewer.jsx

@@ -0,0 +1,63 @@
+// Originally copied from
+// https://github.com/jinkwon/react-object-table-viewer/blob/f29827028fad547a0a17e044567cf1486849fb7a/src/ReactObjectTableViewer.tsx
+import React from "react";
+import PropTypes from "prop-types";
+
+const ReactObjectTableViewer = (props) => {
+  const opt = props;
+
+  const data = opt.data;
+  const keys = Object.keys(data || {}) || [];
+
+  return (
+    <table
+      className={opt.className}
+      style={{
+        ...opt.style,
+      }}
+    >
+      <tbody>
+        {keys.map((k, key) => {
+          const val = data[k];
+          const isObject = typeof val === "object";
+
+          return (
+            <tr key={key}>
+              <th
+                style={{
+                  ...opt.keyStyle,
+                }}
+              >
+                {k}
+              </th>
+              {isObject && (
+                <td>
+                  <ReactObjectTableViewer {...opt} data={val} />
+                </td>
+              )}
+              {!isObject && (
+                <td
+                  style={{
+                    whiteSpace: "nowrap",
+                    ...opt.valueStyle,
+                  }}
+                >{`${val}`}</td>
+              )}
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+ReactObjectTableViewer.propTypes = {
+  data: PropTypes.object,
+  style: PropTypes.CSSProperties,
+  keyStyle: PropTypes.CSSProperties,
+  valueStyle: PropTypes.CSSProperties,
+  className: PropTypes.string,
+  layout: PropTypes.string,
+};
+
+export default ReactObjectTableViewer;

jsx/src/components/ReactObjectTableViewer/ReactObjectTableViewer.tsx

@@ -1,89 +0,0 @@
-import React, {
-  CSSProperties,
-  FC
-} from 'react';
-import { TableViewerLayoutType } from './types';
-
-export interface PropTypes {
-  data?: Record<string, unknown>;
-  style?: CSSProperties;
-  keyStyle?: CSSProperties;
-  valueStyle?: CSSProperties;
-  className?: string;
-  layout?: TableViewerLayoutType;
-}
-
-const ReactObjectTableViewer: FC<PropTypes> = (props: PropTypes) => {
-  const opt = {
-    layout: 'vertical' as TableViewerLayoutType,
-    ...props,
-  };
-
-  const data: any = opt.data;
-  const keys: string[] = Object.keys(data || {}) || [];
-
-  return (
-    <table
-      className={opt.className}
-      style={{
-        ...opt.style,
-      }}
-    >
-      {opt.layout === 'vertical' && (
-        <tbody>
-        {keys.map((k, key) => {
-          const val: any = data[k];
-          const isObject: boolean = typeof val === 'object';
-
-          return <tr key={key}>
-            <th
-              style={{
-                ...opt.keyStyle,
-              }}
-            >{k}</th>
-            {isObject && <td><ReactObjectTableViewer {...opt} data={val}/></td>}
-            {!isObject && <td
-              style={{
-                whiteSpace: 'nowrap',
-                ...opt.valueStyle,
-              }}
-            >{`${val}`}</td>}
-          </tr>;
-        })}
-        </tbody>
-      )}
-
-      {opt.layout === 'horizontal' && (
-        <tbody>
-          <tr>
-          {keys.map((k, key) => (<th
-            key={key}
-            style={{
-              ...opt.keyStyle,
-            }}
-          >{k}</th>))}
-          </tr>
-          <tr>
-          {keys.map((k, key) => {
-            const val: any = data[k];
-            const isObject: boolean = typeof val === 'object';
-
-            return <React.Fragment key={key}>
-              {isObject && <td><ReactObjectTableViewer {...opt} data={val}/></td>}
-              {!isObject && <td
-                key={key}
-                style={{
-                  whiteSpace: 'nowrap',
-                  ...opt.valueStyle,
-                }}
-              >{`${val}`}</td>}
-            </React.Fragment>;
-          })}
-          </tr>
-        </tbody>
-      )}
-    </table>
-  );
-};
-
-export default ReactObjectTableViewer;

jsx/src/components/ServerDashboard/ServerDashboard.jsx

@@ -12,7 +12,7 @@ import {
   CardGroup,
   Collapse,
 } from "react-bootstrap";
-import ReactObjectTableViewer from "react-object-table-viewer";
+import ReactObjectTableViewer from "../ReactObjectTableViewer/ReactObjectTableViewer";
 
 import { Link } from "react-router-dom";
 import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";