From 4a360b13c6d2c175aed57d7af878e06ab6a044a7 Mon Sep 17 00:00:00 2001
From: Filip Zybała <fzybala@virtuslab.com>
Date: Tue, 7 Jul 2020 13:22:09 +0200
Subject: Separated search key and display level in search component

---
 .../src/main/components/search/search.scss         | 22 ++++++++++++++++++++++
 .../frontend/src/main/components/search/search.tsx | 22 +++++++++++++++++++---
 .../frontend/src/main/components/search/types.ts   |  5 +++++
 3 files changed, 46 insertions(+), 3 deletions(-)

(limited to 'plugins/base/frontend/src')

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 & {
-- 
cgit