[mongodb] Fix null error and limit parameter

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}