Split into files and move svg to external one

10 files changed, 378 insertions, 122 deletions

diff --git a/plugins/base/frontend/package-lock.json b/plugins/base/frontend/package-lock.json
index 47c54682..4ccf72f2 100644
--- a/plugins/base/frontend/package-lock.json
+++ b/plugins/base/frontend/package-lock.json
@@ -1553,6 +1553,12 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
       "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
     },
+    "@types/q": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
+      "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
+      "dev": true
+    },
     "@types/react": {
       "version": "16.9.36",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.36.tgz",
@@ -2254,6 +2260,12 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-react-svg": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-react-svg/-/babel-plugin-react-svg-3.0.3.tgz",
+      "integrity": "sha512-Pst1RWjUIiV0Ykv1ODSeceCBsFOP2Y4dusjq7/XkjuzJdvS9CjpkPMUIoO4MLlvp5PiLCeMlsOC7faEUA0gm3Q==",
+      "dev": true
+    },
     "babel-plugin-transform-define": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-define/-/babel-plugin-transform-define-2.0.0.tgz",
@@ -2515,6 +2527,12 @@
         }
       }
     },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "dev": true
+    },
     "boolean": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.0.1.tgz",
@@ -3162,6 +3180,17 @@
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
       "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
     },
+    "coa": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
+      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
+      "dev": true,
+      "requires": {
+        "@types/q": "^1.5.1",
+        "chalk": "^2.4.1",
+        "q": "^1.1.2"
+      }
+    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -3718,6 +3747,66 @@
         "postcss": "^7.0.5"
       }
     },
+    "css-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
+      "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
+      "dev": true,
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^3.2.1",
+        "domutils": "^1.7.0",
+        "nth-check": "^1.0.2"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+          "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+          "dev": true
+        },
+        "domutils": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+          "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "0",
+            "domelementtype": "1"
+          }
+        }
+      }
+    },
+    "css-select-base-adapter": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
+      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
+      "dev": true
+    },
+    "css-tree": {
+      "version": "1.0.0-alpha.37",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
+      "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
+      "dev": true,
+      "requires": {
+        "mdn-data": "2.0.4",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "css-what": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz",
+      "integrity": "sha512-pv9JPyatiPaQ6pf4OvD/dbfm0o5LviWmwxNWzblYf/1u9QZd0ihV+PMwy5jdQWQ3349kZmKEx9WXuSka2dM4cg==",
+      "dev": true
+    },
     "cssdb": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
@@ -3728,6 +3817,39 @@
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
     },
+    "csso": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.0.3.tgz",
+      "integrity": "sha512-NL3spysxUkcrOgnpsT4Xdl2aiEiBG6bXswAABQVHcMrfjjBisFOKwLDOmf4wf32aPdcJws1zds2B0Rg+jqMyHQ==",
+      "dev": true,
+      "requires": {
+        "css-tree": "1.0.0-alpha.39"
+      },
+      "dependencies": {
+        "css-tree": {
+          "version": "1.0.0-alpha.39",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.39.tgz",
+          "integrity": "sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==",
+          "dev": true,
+          "requires": {
+            "mdn-data": "2.0.6",
+            "source-map": "^0.6.1"
+          }
+        },
+        "mdn-data": {
+          "version": "2.0.6",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.6.tgz",
+          "integrity": "sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
     "csstype": {
       "version": "2.6.10",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz",
@@ -7423,12 +7545,24 @@
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
       "dev": true
     },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
+      "dev": true
+    },
     "lodash.pad": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/lodash.pad/-/lodash.pad-4.5.1.tgz",
@@ -7711,6 +7845,12 @@
         }
       }
     },
+    "mdn-data": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
+      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
+      "dev": true
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -8540,6 +8680,15 @@
         "gauge": "~1.2.5"
       }
     },
+    "nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "dev": true,
+      "requires": {
+        "boolbase": "~1.0.0"
+      }
+    },
     "num2fraction": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
@@ -8628,6 +8777,16 @@
         "object-keys": "^1.0.11"
       }
     },
+    "object.getownpropertydescriptors": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz",
+      "integrity": "sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.0-next.1"
+      }
+    },
     "object.pick": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
@@ -8636,6 +8795,18 @@
         "isobject": "^3.0.1"
       }
     },
+    "object.values": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.1.tgz",
+      "integrity": "sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.0-next.1",
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3"
+      }
+    },
     "obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -10177,6 +10348,12 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
+    "q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
+      "dev": true
+    },
     "qs": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
@@ -10335,6 +10512,31 @@
         "prop-types": "^15.5.7"
       }
     },
+    "react-svg-core": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/react-svg-core/-/react-svg-core-3.0.3.tgz",
+      "integrity": "sha512-Ws3eM3xCAwcaYeqm4Ajcz3zxBYNI6BeTWWhFR0cpOT+pWuVtozgHYK9xUM0S/ilapZgYMQDe49XgOxpvooFq4w==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.4.5",
+        "@babel/plugin-syntax-jsx": "^7.2.0",
+        "@babel/preset-react": "^7.0.0",
+        "babel-plugin-react-svg": "^3.0.3",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.isplainobject": "^4.0.6",
+        "svgo": "^1.2.2"
+      }
+    },
+    "react-svg-loader": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/react-svg-loader/-/react-svg-loader-3.0.3.tgz",
+      "integrity": "sha512-V1KnIUtvWVvc4xCig34n+f+/74ylMMugB2FbuAF/yq+QRi+WLi2hUYp9Ze3VylhA1D7ZgRygBh3Ojj8S3TPhJA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.3",
+        "react-svg-core": "^3.0.3"
+      }
+    },
     "react-virtualized": {
       "version": "9.21.2",
       "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.21.2.tgz",
@@ -11188,6 +11390,12 @@
         }
       }
     },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true
+    },
     "scheduler": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
@@ -11915,6 +12123,12 @@
         "figgy-pudding": "^3.5.1"
       }
     },
+    "stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "dev": true
+    },
     "stackframe": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-0.3.1.tgz",
@@ -12526,6 +12740,27 @@
       "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
       "dev": true
     },
+    "svgo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
+      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.1",
+        "coa": "^2.0.2",
+        "css-select": "^2.0.0",
+        "css-select-base-adapter": "^0.1.1",
+        "css-tree": "1.0.0-alpha.37",
+        "csso": "^4.0.2",
+        "js-yaml": "^3.13.1",
+        "mkdirp": "~0.5.1",
+        "object.values": "^1.1.0",
+        "sax": "~1.2.4",
+        "stable": "^0.1.8",
+        "unquote": "~1.1.1",
+        "util.promisify": "~1.0.0"
+      }
+    },
     "symbol-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
@@ -13304,6 +13539,12 @@
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
     },
+    "unquote": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
+      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=",
+      "dev": true
+    },
     "unset-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
@@ -13518,6 +13759,18 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
+    "util.promisify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz",
+      "integrity": "sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.2",
+        "has-symbols": "^1.0.1",
+        "object.getownpropertydescriptors": "^2.1.0"
+      }
+    },
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
diff --git a/plugins/base/frontend/package.json b/plugins/base/frontend/package.json
index a1bf42c2..4415dd1c 100644
--- a/plugins/base/frontend/package.json
+++ b/plugins/base/frontend/package.json
@@ -46,6 +46,7 @@
     "@jetbrains/stylelint-config": "^2.0.0",
     "babel-eslint": "^10.0.3",
     "eslint": "^6.8.0",
+    "react-svg-loader": "^3.0.3",
     "sass": "^1.26.3",
     "sass-loader": "^8.0.2",
     "stylelint": "^13.3.2",
diff --git a/plugins/base/frontend/src/main/components/search/dokkaFuzzyFilter.tsx b/plugins/base/frontend/src/main/components/search/dokkaFuzzyFilter.tsx
new file mode 100644
index 00000000..725fbaee
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/search/dokkaFuzzyFilter.tsx
@@ -0,0 +1,63 @@
+import {Select} from "@jetbrains/ring-ui";
+import {Option, OptionWithHighlightComponent, OptionWithSearchResult, SearchRank} from "./types";
+import fuzzyHighlight from '@jetbrains/ring-ui/components/global/fuzzy-highlight.js'
+import React from "react";
+import {SearchResultRow} from "./searchResultRow";
+
+const orderRecords = (records: OptionWithSearchResult[], searchPhrase: string): OptionWithSearchResult[] => {
+    return records.sort((a: OptionWithSearchResult, b: OptionWithSearchResult) => {
+        //Prefer higher rank
+        const byRank = b.rank - a.rank
+        if(byRank !== 0){
+            return byRank
+        }
+        //Prefer exact matches
+        const aIncludes = a.name.toLowerCase().includes(searchPhrase.toLowerCase()) ? 1 : 0
+        const bIncludes = b.name.toLowerCase().includes(searchPhrase.toLowerCase()) ? 1 : 0
+        const byIncludes = bIncludes - aIncludes
+        if(byIncludes != 0){
+            return byIncludes
+        }
+
+        //Prefer matches that are closer
+        const byFirstMatchedPosition = a.highlight.indexOf("**") - b.highlight.indexOf("**")
+        if(byFirstMatchedPosition == 0) {
+            return a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+        }
+        return byFirstMatchedPosition
+    })
+}
+
+const highlightMatchedPhrases = (records: OptionWithSearchResult[]): OptionWithHighlightComponent[] => {
+    // @ts-ignore
+    return records.map(record => {
+        return {
+            ...record,
+            template: <SearchResultRow searchResult={record}/>
+        }
+    })
+}
+
+export class DokkaFuzzyFilterComponent extends Select {
+    getListItems(rawFilterString: string, _: Option[]) {
+        const matchedRecords = this.props.data
+            .map((record: Option) => {
+                const bySearchKey = fuzzyHighlight(rawFilterString.trim(), record.searchKey, false)
+                if(bySearchKey.matched){
+                    return {
+                        ...bySearchKey,
+                        ...record,
+                        rank: SearchRank.SearchKeyMatch
+                    }
+                }
+                return {
+                    ...fuzzyHighlight(rawFilterString.trim(), record.name, false),
+                    ...record,
+                    rank: SearchRank.NameMatch
+                }
+            })
+            .filter((record: OptionWithSearchResult) => record.matched)
+
+        return highlightMatchedPhrases(orderRecords(matchedRecords, rawFilterString))
+    }
+}
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/search/dokkaSearchAnchor.tsx b/plugins/base/frontend/src/main/components/search/dokkaSearchAnchor.tsx
new file mode 100644
index 00000000..ad0b5f8f
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/search/dokkaSearchAnchor.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import SearchIcon from 'react-svg-loader!./searchIcon.svg';
+
+export const DokkaSearchAnchor = ({wrapperProps, buttonProps, popup}: any) => {
+    return (
+        <span {...wrapperProps}>
+            <button type="button" {...buttonProps}>
+                <SearchIcon />
+            </button>
+            {popup}
+        </span>
+    )
+}
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/search/search.tsx b/plugins/base/frontend/src/main/components/search/search.tsx
index b4c5b1cd..c7976edb 100644
--- a/plugins/base/frontend/src/main/components/search/search.tsx
+++ b/plugins/base/frontend/src/main/components/search/search.tsx
@@ -1,107 +1,10 @@
 import React, {useCallback, useState} from 'react';
 import {Select, List} from '@jetbrains/ring-ui';
-import fuzzyHighlight from '@jetbrains/ring-ui/components/global/fuzzy-highlight.js'
 import '@jetbrains/ring-ui/components/input-size/input-size.scss';
 import './search.scss';
-import {IWindow, Option, Props, Page} from "./types";
-
-enum SearchRank {
-    SearchKeyMatch = 1,
-    NameMatch = 0
-}
-type OptionWithSearchResult = Option & {
-    matched: boolean,
-    highlight: string,
-    rank: SearchRank
-}
-
-type OptionWithHighlightComponent = Option & {
-    name: React.FC<SearchProps>
-}
-
-type SearchProps = {
-    searchResult: OptionWithSearchResult,
-}
-
-const orderRecords = (records: OptionWithSearchResult[], searchPhrase: string): OptionWithSearchResult[] => {
-    return records.sort((a: OptionWithSearchResult, b: OptionWithSearchResult) => {
-        //Prefer higher rank
-        const byRank = b.rank - a.rank
-        if(byRank !== 0){
-            return byRank
-        }
-        //Prefer exact matches
-        const aIncludes = a.name.toLowerCase().includes(searchPhrase.toLowerCase()) ? 1 : 0
-        const bIncludes = b.name.toLowerCase().includes(searchPhrase.toLowerCase()) ? 1 : 0
-        const byIncludes = bIncludes - aIncludes
-        if(byIncludes != 0){
-            return byIncludes
-        }
-
-        //Prefer matches that are closer
-        const byFirstMatchedPosition = a.highlight.indexOf("**") - b.highlight.indexOf("**")
-        if(byFirstMatchedPosition == 0) {
-            return a.name.toLowerCase().localeCompare(b.name.toLowerCase())
-        }
-        return byFirstMatchedPosition
-    })
-}
-
-const SearchResultRow: React.FC<SearchProps> = ({searchResult}: SearchProps) => {
-    const signatureFromSearchResult = (searchResult: OptionWithSearchResult): string => {
-        if(searchResult.rank == SearchRank.SearchKeyMatch){
-            return searchResult.name.replace(searchResult.searchKey, searchResult.highlight)
-        }
-        return searchResult.highlight
-    }
-
-    const renderHighlightMarkersAsHtml = (record: string): string => {
-        return record.replace(/\*\*(.*?)\*\*/g, '<span class="phraseHighlight">$1</span>')
-    }
-
-    return (
-        <div className="template-wrapper">
-            <span dangerouslySetInnerHTML={
-                {__html: renderHighlightMarkersAsHtml(signatureFromSearchResult(searchResult)) }
-            }/>
-            <span className="template-description">{searchResult.description}</span>
-        </div>
-    )
-}
-
-const highlightMatchedPhrases = (records: OptionWithSearchResult[]): OptionWithHighlightComponent[] => {
-    // @ts-ignore
-    return records.map(record => {
-        return {
-            ...record,
-            template: <SearchResultRow searchResult={record}/>
-        }
-    })
-}
-
-class DokkaFuzzyFilterComponent extends Select {
-    getListItems(rawFilterString: string, _: Option[]) {
-        const matchedRecords = this.props.data
-            .map((record: Option) => {
-                const bySearchKey = fuzzyHighlight(rawFilterString.trim(), record.searchKey, true)
-                if(bySearchKey.matched){
-                    return {
-                        ...bySearchKey,
-                        ...record,
-                        rank: SearchRank.SearchKeyMatch
-                    }
-                }
-                return {
-                    ...fuzzyHighlight(rawFilterString.trim(), record.name),
-                    ...record,
-                    rank: SearchRank.NameMatch
-                }
-            })
-            .filter((record: OptionWithSearchResult) => record.matched)
-
-        return highlightMatchedPhrases(orderRecords(matchedRecords, rawFilterString))
-    }
-}
+import {IWindow, Option, Props} from "./types";
+import {DokkaSearchAnchor} from "./dokkaSearchAnchor";
+import {DokkaFuzzyFilterComponent} from "./dokkaFuzzyFilter";
 
 const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => {
     const [selected, onSelected] = useState<Option>(data[0]);
@@ -136,19 +39,6 @@ const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => {
     )
 }
 
-const DokkaSearchAnchor = ({wrapperProps, buttonProps, popup}) => {
-    return (
-        <span {...wrapperProps}>
-            <button type="button" {...buttonProps}>
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-                    <path d="M19.64 18.36l-6.24-6.24a7.52 7.52 0 1 0-1.28 1.28l6.24 6.24zM7.5 13.4a5.9 5.9 0 1 1 5.9-5.9 5.91 5.91 0 0 1-5.9 5.9z"/>
-                </svg>
-            </button>
-            {popup}
-        </span>
-    )
-}
-
 export const WithFuzzySearchFilter = () => {
     let data: Option[] = [];
     const pages = (window as IWindow).pages;
diff --git a/plugins/base/frontend/src/main/components/search/searchIcon.svg b/plugins/base/frontend/src/main/components/search/searchIcon.svg
new file mode 100644
index 00000000..391b1cab
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/search/searchIcon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path d="M19.64 18.36l-6.24-6.24a7.52 7.52 0 1 0-1.28 1.28l6.24 6.24zM7.5 13.4a5.9 5.9 0 1 1 5.9-5.9 5.91 5.91 0 0 1-5.9 5.9z"/>
+</svg>
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/search/searchResultRow.tsx b/plugins/base/frontend/src/main/components/search/searchResultRow.tsx
new file mode 100644
index 00000000..9ae19cb9
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/search/searchResultRow.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import {OptionWithSearchResult, SearchProps, SearchRank} from "./types";
+
+export const SearchResultRow: React.FC<SearchProps> = ({searchResult}: SearchProps) => {
+    const signatureFromSearchResult = (searchResult: OptionWithSearchResult): string => {
+        if(searchResult.rank == SearchRank.SearchKeyMatch){
+            return searchResult.name.replace(searchResult.searchKey, searchResult.highlight)
+        }
+        return searchResult.highlight
+    }
+
+    const renderHighlightMarkersAsHtml = (record: string): string => {
+        return record.replace(/\*\*(.*?)\*\*/g, '<span class="phraseHighlight">$1</span>')
+    }
+
+    return (
+        <div className="template-wrapper">
+            <span dangerouslySetInnerHTML={
+                {__html: renderHighlightMarkersAsHtml(signatureFromSearchResult(searchResult)) }
+            }/>
+            <span className="template-description">{searchResult.description}</span>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/search/types.ts b/plugins/base/frontend/src/main/components/search/types.ts
index a6736a2d..922935bd 100644
--- a/plugins/base/frontend/src/main/components/search/types.ts
+++ b/plugins/base/frontend/src/main/components/search/types.ts
@@ -1,3 +1,5 @@
+import React from "react";
+
 export type Page = {
     name: string;
     kind: string;
@@ -23,7 +25,20 @@ export type Props = {
     data: Option[]
 };
 
+export enum SearchRank {
+    SearchKeyMatch = 1,
+    NameMatch = 0
+}
+export type OptionWithSearchResult = Option & {
+    matched: boolean,
+    highlight: string,
+    rank: SearchRank
+}
+
+export type OptionWithHighlightComponent = Option & {
+    name: React.FC<SearchProps>
+}
 
-export type State = {
-    selected: any
+export type SearchProps = {
+    searchResult: OptionWithSearchResult,
 }
diff --git a/plugins/base/frontend/src/main/types/@jetbrains/index.d.ts b/plugins/base/frontend/src/main/types/@jetbrains/index.d.ts
index 8ab594e3..3d209657 100644
--- a/plugins/base/frontend/src/main/types/@jetbrains/index.d.ts
+++ b/plugins/base/frontend/src/main/types/@jetbrains/index.d.ts
@@ -2,9 +2,3 @@ declare module '@jetbrains/ring-ui' {
     export const Select: any;
     export const List: any;
 }
-
-declare module '@jetbrains/ring-ui/components/global/fuzzy-highlight.js' {
-    import {Option} from "../../components/search/types";
-
-    export const fuzzyHighlight: (string, string, boolean) => Option[]
-}
diff --git a/plugins/base/frontend/webpack.config.js b/plugins/base/frontend/webpack.config.js
index 559f5792..3372b37f 100644
--- a/plugins/base/frontend/webpack.config.js
+++ b/plugins/base/frontend/webpack.config.js
@@ -16,7 +16,7 @@ const webpackConfig = () => ({
   entry: `${componentsPath}/root.tsx`,
   resolve: {
     mainFields: ['module', 'browser', 'main'],
-    extensions: ['.tsx', '.ts', '.js'],
+    extensions: ['.tsx', '.ts', '.js', '.svg'],
     alias: {
       react: resolve('./node_modules/react'),
       'react-dom': resolve('./node_modules/react-dom'),