Create navigation search component

9 files changed, 144 insertions, 15 deletions

diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/clear.svg b/plugins/base/frontend/src/main/components/navigationPaneSearch/clear.svg
new file mode 100644
index 00000000..ad6a2026
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/navigationPaneSearch/clear.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1374 1.80464L6.94205 5.99996L11.1374 10.1953L10.1947 11.138L5.99935 6.94267L1.80403 11.138L0.861328 10.1953L5.05664 5.99996L0.861328 1.80464L1.80403 0.861938L5.99935 5.05725L10.1947 0.861938L11.1374 1.80464Z" fill="#637282"/>
+</svg>
diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss
new file mode 100644
index 00000000..b5714ca4
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss
@@ -0,0 +1,37 @@
+@import "src/main/scss/index.scss";
+
+$defaultHeight: 40px;
+
+div#paneSearch {
+
+    width: 248px;
+    margin: 0 auto;
+
+    input#navigation-pane-search {
+        background: $white;
+        border: 1px solid $grey-border;
+        box-sizing: border-box;
+        border-radius: 4px;
+        padding: 8px;
+        height: $defaultHeight;
+    }
+    
+    .navigation-pane-search {
+        width: 100% !important;
+        padding-top: 16px;
+    }
+
+    div.paneSearchInputWrapper {
+        position: relative;
+        span.paneSearchInputClearIcon {
+            position: absolute;
+            top: calc(50% + 2px); //Just to include a border
+            right: 8px;
+            cursor: pointer;
+        }
+    }
+}
+
+.navigation-pane-popup {
+    margin-top: 1.2em;
+}
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx
new file mode 100644
index 00000000..3174b023
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx
@@ -0,0 +1,73 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import {Select, List } from '@jetbrains/ring-ui';
+import { DokkaFuzzyFilterComponent } from '../search/dokkaFuzzyFilter';
+import { IWindow, Option } from '../search/types';
+import './navigationPaneSearch.scss';
+import ClearIcon from 'react-svg-loader!./clear.svg';
+
+export const NavigationPaneSearch = () => {
+    const defaultWidth = 300
+
+    const [navigationList, setNavigationList] = useState<Option[]>([]);
+    const [selected, onSelected] = useState<Option | null>(null);
+    const [minWidth, setMinWidth] = useState<number>(defaultWidth);
+    const [filterValue, setFilterValue] = useState<string>('')
+    
+    const onChangeSelected = useCallback(
+        (element: Option) => {
+            window.location.replace(`${(window as IWindow).pathToRoot}${element.location}`)
+            onSelected(element);
+        },
+        [selected]
+    );
+
+    const onFilter = (filterValue: string, filteredRecords?: Option[]) => {
+        if(filteredRecords){
+            const requiredWidth = Math.max(...filteredRecords.map(e => e.label.length*9), defaultWidth)
+            setMinWidth(requiredWidth)
+        }
+        setFilterValue(filterValue)
+    }
+
+    const onClearClick = () => {
+        setFilterValue('')
+    }
+
+    useEffect(() => {
+        const pathToRoot = (window as IWindow).pathToRoot
+        const url = pathToRoot.endsWith('/') ? `${pathToRoot}scripts/navigation-pane.json` : `${pathToRoot}/scripts/navigation-pane.json`
+        fetch(url)
+            .then(response => response.json())
+            .then((result) => {
+                setNavigationList(result.map((record: Option) => {
+                    return {
+                        ...record,
+                        rgItemType: List.ListProps.Type.CUSTOM
+                    }
+                }))
+            },
+            (error) => {
+                console.error('failed to fetch navigationPane data', error)
+                setNavigationList([])
+            })
+    }, [])
+  
+
+    return <div className={"paneSearchInputWrapper"}>
+            <DokkaFuzzyFilterComponent
+                    id="navigation-pane-search"
+                    className="navigation-pane-search"
+                    inputPlaceholder="Title filter"
+                    clear={true}
+                    type={Select.Type.INPUT_WITHOUT_CONTROLS}
+                    filter={{fuzzy:true, value: filterValue}}
+                    selected={selected}
+                    data={navigationList}
+                    popupClassName={"navigation-pane-popup"}
+                    onSelect={onChangeSelected}
+                    onFilter={onFilter}
+                    minWidth={minWidth}
+                />
+                <span className={"paneSearchInputClearIcon"} onClick={onClearClick}><ClearIcon /></span>
+        </div>
+}
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/root.tsx b/plugins/base/frontend/src/main/components/root.tsx
index 70ed9550..9f3ecba9 100644
--- a/plugins/base/frontend/src/main/components/root.tsx
+++ b/plugins/base/frontend/src/main/components/root.tsx
@@ -4,15 +4,24 @@ import RedBox from 'redbox-react';
 
 import App from "./app";
 import './app/index.scss';
+import { NavigationPaneSearch } from './navigationPaneSearch/navigationPaneSearch';
 
 const appEl = document.getElementById('searchBar');
 const rootEl = document.createElement('div');
 
+const renderNavigationPane = () => {
+  render(
+    <NavigationPaneSearch />,
+    document.getElementById('paneSearch')
+  )
+}
+
 let renderApp = () => {
   render(
       <App/>,
       rootEl
   );
+  renderNavigationPane();
 };
 
 // @ts-ignore
diff --git a/plugins/base/frontend/src/main/components/search/dokkaFuzzyFilter.tsx b/plugins/base/frontend/src/main/components/search/dokkaFuzzyFilter.tsx
index 725fbaee..2d9dcb3d 100644
--- a/plugins/base/frontend/src/main/components/search/dokkaFuzzyFilter.tsx
+++ b/plugins/base/frontend/src/main/components/search/dokkaFuzzyFilter.tsx
@@ -39,10 +39,20 @@ const highlightMatchedPhrases = (records: OptionWithSearchResult[]): OptionWithH
 }
 
 export class DokkaFuzzyFilterComponent extends Select {
+    componentDidUpdate(prevProps, prevState) {
+        super.componentDidUpdate(prevProps, prevState)
+        if(this.props.filter && this.state.filterValue != this.props.filter.value){
+            this.setState({
+                filterValue: this.props.filter.value,
+            })
+        }
+    }
+    
     getListItems(rawFilterString: string, _: Option[]) {
+        const filterPhrase = (rawFilterString ? rawFilterString : '').trim()
         const matchedRecords = this.props.data
             .map((record: Option) => {
-                const bySearchKey = fuzzyHighlight(rawFilterString.trim(), record.searchKey, false)
+                const bySearchKey = fuzzyHighlight(filterPhrase, record.searchKey, false)
                 if(bySearchKey.matched){
                     return {
                         ...bySearchKey,
@@ -51,13 +61,15 @@ export class DokkaFuzzyFilterComponent extends Select {
                     }
                 }
                 return {
-                    ...fuzzyHighlight(rawFilterString.trim(), record.name, false),
+                    ...fuzzyHighlight(filterPhrase, record.name, false),
                     ...record,
                     rank: SearchRank.NameMatch
                 }
             })
             .filter((record: OptionWithSearchResult) => record.matched)
 
-        return highlightMatchedPhrases(orderRecords(matchedRecords, rawFilterString))
+        this.props.onFilter(filterPhrase, matchedRecords)
+
+        return highlightMatchedPhrases(orderRecords(matchedRecords, filterPhrase))
     }
 }
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/search/search.scss b/plugins/base/frontend/src/main/components/search/search.scss
index 1068fe7a..e708ef84 100644
--- a/plugins/base/frontend/src/main/components/search/search.scss
+++ b/plugins/base/frontend/src/main/components/search/search.scss
@@ -14,20 +14,12 @@
   min-width: calc(100% - 360px) !important;
 }
 
-.indented {
-  text-indent: 10px;
-}
-
-.disabled {
-  color: gray;
-}
-
 .template-wrapper {
+  height: 32px;
   display: grid;
   grid-template-columns: auto auto;
-
-  span.phraseHighlight {
-    font-weight: bold;
+  span {
+    line-height: 32px;  
   }
 }
 
diff --git a/plugins/base/frontend/src/main/components/search/search.tsx b/plugins/base/frontend/src/main/components/search/search.tsx
index c7976edb..ef26c662 100644
--- a/plugins/base/frontend/src/main/components/search/search.tsx
+++ b/plugins/base/frontend/src/main/components/search/search.tsx
@@ -20,6 +20,7 @@ const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => {
         <div className="search-container">
             <div className="search">
                 <DokkaFuzzyFilterComponent
+                    id="pages-search"
                     selectedLabel="Search"
                     label="Please type page name"
                     filter={true}
diff --git a/plugins/base/frontend/src/main/components/search/types.ts b/plugins/base/frontend/src/main/components/search/types.ts
index 922935bd..11e2edf8 100644
--- a/plugins/base/frontend/src/main/components/search/types.ts
+++ b/plugins/base/frontend/src/main/components/search/types.ts
@@ -6,7 +6,6 @@ export type Page = {
     location: string;
     searchKey: string;
     description: string;
-    disabled: boolean;
 }
 
 export type Option = Page & {
diff --git a/plugins/base/frontend/src/main/scss/index.scss b/plugins/base/frontend/src/main/scss/index.scss
index 74af970d..18e2861b 100644
--- a/plugins/base/frontend/src/main/scss/index.scss
+++ b/plugins/base/frontend/src/main/scss/index.scss
@@ -1 +1,4 @@
 @import "~@jetbrains/ring-ui/components/global/variables.css";
+
+$white: #FFFFFF;
+$grey-border: #A6AFBA