Separated search key and display level in search component

3 files changed, 46 insertions, 3 deletions

diff --git a/plugins/base/frontend/src/main/components/search/search.scss b/plugins/base/frontend/src/main/components/search/search.scss
index c3b1ab3b..cc5a61ac 100644
--- a/plugins/base/frontend/src/main/components/search/search.scss
+++ b/plugins/base/frontend/src/main/components/search/search.scss
@@ -12,4 +12,26 @@
 
 .popup-wrapper {
   min-width: calc(100% - 360px) !important;
+}
+
+.indented {
+  text-indent: 10px;
+}
+
+.disabled {
+  color: gray;
+}
+
+.template-wrapper {
+  display: grid;
+  grid-template-columns: auto auto;
+}
+
+.template-name {
+  justify-self: start;
+}
+
+.template-description {
+  color: gray;
+  justify-self: end;
 }
\ 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 b0fdd96a..c7b36654 100644
--- a/plugins/base/frontend/src/main/components/search/search.tsx
+++ b/plugins/base/frontend/src/main/components/search/search.tsx
@@ -1,8 +1,9 @@
 import React, {useCallback, useState} from 'react';
 import {Select} from '@jetbrains/ring-ui';
+import {List} from '@jetbrains/ring-ui';
 import '@jetbrains/ring-ui/components/input-size/input-size.scss';
 import './search.scss';
-import {IWindow, Option, Props} from "./types";
+import {IWindow, Option, Props, Page} from "./types";
 
 const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => {
     const [selected, onSelected] = useState<Option>(data[0]);
@@ -43,15 +44,30 @@ const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => {
     )
 }
 
+const templateGenerator = (page:Page) => {
+    let classGenerator = (page:Page) => {
+        let classes = ""
+        if(page.level !== undefined) classes = classes + " indented"
+        if(page.disabled) classes = classes + " disabled"
+        return classes
+    }
+    return <div className="template-wrapper">
+        <span className= {classGenerator(page)}>{page.name}</span>
+        <span className="template-description">{page.description}</span>
+    </div>
+}
+
 export const WithFuzzySearchFilter = () => {
     let data: Option[] = [];
     const pages = (window as IWindow).pages;
     if (pages) {
         data = pages.map((page, i) => ({
             ...page,
-            label: page.name,
+            label: page.searchKey,
             key: i + 1,
-            type: page.kind
+            type: page.kind,
+            template: templateGenerator(page),
+            rgItemType: List.ListProps.Type.CUSTOM
         }));
     }
 
diff --git a/plugins/base/frontend/src/main/components/search/types.ts b/plugins/base/frontend/src/main/components/search/types.ts
index 2900153a..881a16d8 100644
--- a/plugins/base/frontend/src/main/components/search/types.ts
+++ b/plugins/base/frontend/src/main/components/search/types.ts
@@ -2,6 +2,11 @@ export type Page = {
     name: string;
     kind: string;
     location: string;
+    searchKey: string;
+    level: number;
+    index: string;
+    description: string;
+    disabled: boolean;
 }
 
 export type Option = Page & {