feat: implement configurable minimum characer length to init search (#…

…1402) Co-authored-by: Alex Varchuk <olexandr.varchuk@gmail.com>
Redocly · May 3, 2022 · 0fa08fa · 0fa08fa
1 parent 7a40486
commit 0fa08fa
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -207,6 +207,7 @@ Redoc uses the following [specification extensions](https://swagger.io/specifica
 You can use all of the following options with the standalone version of the <redoc> tag by kebab-casing them. For example, `scrollYOffset` becomes `scroll-y-offset`, and `expandResponses` becomes `expand-responses`.
 
 * `disableSearch` - disable search indexing and search box.
+* `minCharacterLengthToInitSearch` - set minimal characters length to init search, default `3`, minimal `1`.
 * `expandDefaultServerVariables` - enable expanding default server variables, default `false`.
 * `expandResponses` - specify which responses to expand by default by response codes. Values should be passed as comma-separated list without spaces e.g. `expandResponses="200,201"`. Special value `"all"` expands all responses by default. Be careful: this option can slow-down documentation rendering time.
 * `generatedPayloadSamplesMaxDepth` - set the maximum render depth for JSON payload samples (responses and request body). The default value is `10`.

diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
@@ -7,6 +7,7 @@ import { MenuItem } from '../SideMenu/MenuItem';
 import { MarkerService } from '../../services/MarkerService';
 import { SearchResult } from '../../services/SearchWorker.worker';
 
+import { OptionsContext } from '../OptionsProvider';
 import { bind, debounce } from 'decko';
 import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';
 import {
@@ -37,6 +38,8 @@ export interface SearchBoxState {
 export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxState> {
   activeItemRef: MenuItem | null = null;
 
+  static contextType = OptionsContext;
+
   constructor(props) {
     super(props);
     this.state = {
@@ -114,8 +117,9 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
   }
 
   search = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { minCharacterLengthToInitSearch } = this.context;
     const q = event.target.value;
-    if (q.length < 3) {
+    if (q.length < minCharacterLengthToInitSearch) {
       this.clearResults(q);
       return;
     }

diff --git a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap
@@ -89,6 +89,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "jsonSampleExpandLevel": 2,
                     "maxDisplayedEnumValues": undefined,
                     "menuToggle": true,
+                    "minCharacterLengthToInitSearch": 3,
                     "nativeScrollbars": false,
                     "noAutoAuth": false,
                     "nonce": undefined,
@@ -339,6 +340,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "jsonSampleExpandLevel": 2,
                     "maxDisplayedEnumValues": undefined,
                     "menuToggle": true,
+                    "minCharacterLengthToInitSearch": 3,
                     "nativeScrollbars": false,
                     "noAutoAuth": false,
                     "nonce": undefined,
@@ -565,6 +567,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
               "jsonSampleExpandLevel": 2,
               "maxDisplayedEnumValues": undefined,
               "menuToggle": true,
+              "minCharacterLengthToInitSearch": 3,
               "nativeScrollbars": false,
               "noAutoAuth": false,
               "nonce": undefined,
@@ -856,6 +859,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "jsonSampleExpandLevel": 2,
                     "maxDisplayedEnumValues": undefined,
                     "menuToggle": true,
+                    "minCharacterLengthToInitSearch": 3,
                     "nativeScrollbars": false,
                     "noAutoAuth": false,
                     "nonce": undefined,
@@ -1106,6 +1110,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "jsonSampleExpandLevel": 2,
                     "maxDisplayedEnumValues": undefined,
                     "menuToggle": true,
+                    "minCharacterLengthToInitSearch": 3,
                     "nativeScrollbars": false,
                     "noAutoAuth": false,
                     "nonce": undefined,
@@ -1332,6 +1337,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
               "jsonSampleExpandLevel": 2,
               "maxDisplayedEnumValues": undefined,
               "menuToggle": true,
+              "minCharacterLengthToInitSearch": 3,
               "nativeScrollbars": false,
               "noAutoAuth": false,
               "nonce": undefined,
@@ -1581,6 +1587,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
           "jsonSampleExpandLevel": 2,
           "maxDisplayedEnumValues": undefined,
           "menuToggle": true,
+          "minCharacterLengthToInitSearch": 3,
           "nativeScrollbars": false,
           "noAutoAuth": false,
           "nonce": undefined,
@@ -1869,6 +1876,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
               "jsonSampleExpandLevel": 2,
               "maxDisplayedEnumValues": undefined,
               "menuToggle": true,
+              "minCharacterLengthToInitSearch": 3,
               "nativeScrollbars": false,
               "noAutoAuth": false,
               "nonce": undefined,
@@ -2119,6 +2127,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
               "jsonSampleExpandLevel": 2,
               "maxDisplayedEnumValues": undefined,
               "menuToggle": true,
+              "minCharacterLengthToInitSearch": 3,
               "nativeScrollbars": false,
               "noAutoAuth": false,
               "nonce": undefined,
@@ -2345,6 +2354,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
         "jsonSampleExpandLevel": 2,
         "maxDisplayedEnumValues": undefined,
         "menuToggle": true,
+        "minCharacterLengthToInitSearch": 3,
         "nativeScrollbars": false,
         "noAutoAuth": false,
         "nonce": undefined,

diff --git a/src/services/RedocNormalizedOptions.ts b/src/services/RedocNormalizedOptions.ts
@@ -56,6 +56,7 @@ export interface RedocRawOptions {
   generatedPayloadSamplesMaxDepth?: number;
   nonce?: string;
   hideFab?: boolean;
+  minCharacterLengthToInitSearch?: number;
 }
 
 export function argValueToBoolean(val?: string | boolean, defaultValue?: boolean): boolean {
@@ -251,6 +252,7 @@ export class RedocNormalizedOptions {
   hideSchemaPattern: boolean;
   generatedPayloadSamplesMaxDepth: number;
   hideFab: boolean;
+  minCharacterLengthToInitSearch: number;
 
   nonce?: string;
 
@@ -325,5 +327,6 @@ export class RedocNormalizedOptions {
       );
     this.nonce = raw.nonce;
     this.hideFab = argValueToBoolean(raw.hideFab);
+    this.minCharacterLengthToInitSearch = argValueToNumber(raw.minCharacterLengthToInitSearch) || 3;
   }
 }