[mongodb] Fix null error and limit parameter (#433)

When a field in MongoDB is "null" the plugin throws an error. This
should be fixed now, by only calling the "toString()" method, when the
field is not "null".

This commit also fixes an error with the limit parameter, which was not
used correctly, because it was not added in the "changeOptions"
function. We also improved the form in the query toolbar to prevent the
default submit action.

plugins/plugin-mongodb/src/components/page/BsonPreview.tsx

@@ -14,8 +14,8 @@ const BsonPreview: React.FunctionComponent<IBsonPreviewProps> = ({ data }: IBson
   const renderDocument = (document: string): string => {
     try {
       return toExtendedJson(document);
-    } catch (error) {
-      return error.toString();
+    } catch (err) {
+      return err.toString();
     }
   };
 

plugins/plugin-mongodb/src/components/page/QueryPage.tsx

@@ -28,7 +28,7 @@ const QueryPage: React.FunctionComponent<IQueryPageProps> = ({ instance }: IQuer
     navigate(
       `${location.pathname}?query=${encodeURIComponent(opts.query)}&operation=${
         opts.operation
-      }&sort=${encodeURIComponent(opts.sort)}`,
+      }&sort=${encodeURIComponent(opts.sort)}&limit=${opts.limit}`,
     );
   };
 

plugins/plugin-mongodb/src/components/page/QueryPageToolbar.tsx

@@ -8,7 +8,7 @@ import {
   FormSelectOption,
   TextInput,
 } from '@patternfly/react-core';
-import React, { useState } from 'react';
+import React, { FormEvent, useState } from 'react';
 
 import { IQueryOptions, TQueryOperation } from '../../utils/interfaces';
 import { Toolbar, ToolbarItem } from '@kobsio/shared';
@@ -31,14 +31,15 @@ const QueryPageToolbar: React.FunctionComponent<IQueryPageToolbarProps> = ({
     sort: options.sort,
   });
 
-  const changeOptions = (): void => {
+  const changeOptions = (e: FormEvent): void => {
+    e.preventDefault();
     setOptions({ limit: state.limit, operation: state.operation, query: state.query, sort: state.sort });
   };
 
   return (
     <Toolbar usePageInsets={true}>
       <ToolbarItem grow={true}>
-        <Form isHorizontal={true}>
+        <Form isHorizontal={true} onSubmit={changeOptions}>
           <FormGroup label="Operation" fieldId="operation">
             <FormSelect
               value={state.operation}

plugins/plugin-mongodb/src/components/panel/FindDocument.tsx

@@ -24,9 +24,9 @@ const FindDocument: React.FunctionComponent<IFindDocumentProps> = ({
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const getFilter = (value: any): string => {
-    if (value instanceof ObjectId) return `{"_id": ObjectId("${value.toString()}")}`;
-    if (value instanceof ObjectID) return `{"_id": ObjectID("${value.toString()}")}`;
-    return `{"_id": "${value.toString()}"}`;
+    if (value instanceof ObjectId) return `{"_id": ObjectId("${value?.toString() ?? 'null'}")}`;
+    if (value instanceof ObjectID) return `{"_id": ObjectID("${value?.toString() ?? 'null'}")}`;
+    return `{"_id": "${value?.toString() ?? 'null'}"}`;
   };
 
   const defaultActions = [
@@ -53,7 +53,7 @@ const FindDocument: React.FunctionComponent<IFindDocumentProps> = ({
           expand={{ isExpanded: isExpanded, onToggle: (): void => setIsExpanded(!isExpanded), rowIndex: 0 }}
         />
         <Td className="pf-u-text-wrap pf-u-text-break-word" dataLabel="ID">
-          <TableText wrapModifier="nowrap">{document['_id'].toString()}</TableText>
+          <TableText wrapModifier="nowrap">{document['_id']?.toString() ?? 'null'}</TableText>
         </Td>
         <Td className="pf-u-text-wrap pf-u-text-break-word" dataLabel="Document">
           <div className="kobsio-mongodb-document-preview">
@@ -62,7 +62,7 @@ const FindDocument: React.FunctionComponent<IFindDocumentProps> = ({
               .map((key) => (
                 <span key={key} className="pf-u-mr-sm pf-u-mb-sm">
                   <span className="pf-u-background-color-200 pf-u-p-xs">{key}:</span>
-                  <span className="pf-u-p-xs"> {document[key].toString()}</span>
+                  <span className="pf-u-p-xs"> {document[key]?.toString() ?? 'null'}</span>
                 </span>
               ))}
           </div>

plugins/plugin-mongodb/src/components/panel/FindDocumentDetails.tsx

@@ -36,7 +36,7 @@ const FindDocumentDetails: React.FunctionComponent<IFindDocumentDetailsProps> =
               .filter((key) => key !== '_id')
               .map((key) => (
                 <FindDocumentDetailsTree
-                  key={document[key].toString()}
+                  key={document[key]?.toString() ?? 'null'}
                   documentKey={key}
                   documentValue={document[key]}
                 />

plugins/plugin-mongodb/src/components/panel/FindDocumentDetailsTree.tsx

@@ -83,7 +83,7 @@ const FindDocumentDetailsTree: React.FunctionComponent<IFindDocumentDetailsTreeP
       return (
         <Td className="pf-u-text-wrap pf-u-text-break-word" dataLabel="Value">
           <TableText wrapModifier="nowrap">
-            {value.toString()}
+            {value?.toString() ?? 'null'}
             <small className="pf-u-ml-sm"> ({getTypeName(value)})</small>
           </TableText>
         </Td>
@@ -96,7 +96,7 @@ const FindDocumentDetailsTree: React.FunctionComponent<IFindDocumentDetailsTreeP
           {Object.keys(value).map((key) => (
             <span key={key} className="pf-u-mr-sm pf-u-mb-sm">
               <span className="pf-u-background-color-200 pf-u-p-xs">{key}:</span>
-              <span className="pf-u-p-xs"> {value[key].toString()}</span>
+              <span className="pf-u-p-xs"> {value[key]?.toString() ?? 'null'}</span>
             </span>
           ))}
         </div>
@@ -110,7 +110,7 @@ const FindDocumentDetailsTree: React.FunctionComponent<IFindDocumentDetailsTreeP
       return (
         <Td className="pf-u-text-wrap pf-u-text-break-word" dataLabel="Value">
           <TableText wrapModifier="nowrap">
-            {value.toString()}
+            {value?.toString() ?? 'null'}
             <small className="pf-u-ml-sm"> ({getTypeName(value)})</small>
           </TableText>
         </Td>
@@ -127,7 +127,11 @@ const FindDocumentDetailsTree: React.FunctionComponent<IFindDocumentDetailsTreeP
           </Tr>
         </Thead>
         {Object.keys(value).map((key) => (
-          <FindDocumentDetailsTree key={value[key].toString()} documentKey={key} documentValue={value[key]} />
+          <FindDocumentDetailsTree
+            key={value[key]?.toString() ?? 'null'}
+            documentKey={key}
+            documentValue={value[key]}
+          />
         ))}
       </TableComposable>
     );
@@ -146,7 +150,7 @@ const FindDocumentDetailsTree: React.FunctionComponent<IFindDocumentDetailsTreeP
           }
         />
         <Td className="pf-u-text-wrap pf-u-text-break-word" dataLabel="Key">
-          <TableText wrapModifier="nowrap">{documentKey.toString()}</TableText>
+          <TableText wrapModifier="nowrap">{documentKey?.toString() ?? 'null'}</TableText>
         </Td>
         {formatValue(documentValue)}
       </Tr>

plugins/plugin-mongodb/src/components/panel/FindDocuments.tsx

@@ -28,7 +28,7 @@ const FindDocuments: React.FunctionComponent<IFindDocumentsProps> = ({
       </Thead>
       {documents.map((document) => (
         <FindDocument
-          key={document['_id'].toString()}
+          key={document['_id']?.toString() ?? 'null'}
           instance={instance}
           collectionName={collectionName}
           document={document}