From 3059b3be9f78e4510ad6ef90e68ea9e13a0a0c51 Mon Sep 17 00:00:00 2001
From: Vardan Bansal <vardan.bansal@harness.io>
Date: Tue, 19 Sep 2023 22:13:18 -0700
Subject: [PATCH] fixing filter UX

---
 .../PluginsPanel/PluginsPanel.module.scss     |  5 +++
 .../PluginsPanel.module.scss.d.ts             |  1 +
 .../components/PluginsPanel/PluginsPanel.tsx  | 33 ++++++++++++-------
 web/src/framework/strings/stringTypes.ts      |  1 +
 web/src/i18n/strings.en.yaml                  |  1 +
 5 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/web/src/components/PluginsPanel/PluginsPanel.module.scss b/web/src/components/PluginsPanel/PluginsPanel.module.scss
index aa6781be3..787a102ae 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.module.scss
+++ b/web/src/components/PluginsPanel/PluginsPanel.module.scss
@@ -52,3 +52,8 @@
 .panelContent {
   height: calc(100% - var(--spacing-large));
 }
+
+.search {
+  width: 50%;
+  height: 35px;
+}
diff --git a/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts b/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
index 544c2ca69..8d64c399d 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
+++ b/web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts
@@ -9,3 +9,4 @@ export declare const pluginDesc: string
 export declare const pluginDetailsPanel: string
 export declare const pluginIcon: string
 export declare const plugins: string
+export declare const search: string
diff --git a/web/src/components/PluginsPanel/PluginsPanel.tsx b/web/src/components/PluginsPanel/PluginsPanel.tsx
index 4950d1b99..d9d66c528 100644
--- a/web/src/components/PluginsPanel/PluginsPanel.tsx
+++ b/web/src/components/PluginsPanel/PluginsPanel.tsx
@@ -191,19 +191,28 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
       </Container>
     ) : (
       <Layout.Vertical spacing="small" padding={{ top: 'small' }}>
-        <Layout.Horizontal
-          flex={{ justifyContent: 'flex-start', alignItems: 'center' }}
-          spacing="small"
-          padding={{ top: 'medium', bottom: 'medium', left: 'medium' }}>
-          <Icon
-            name="arrow-left"
-            size={18}
-            onClick={() => {
-              setPanelView(PluginPanelView.Category)
-            }}
-            className={css.arrow}
+        <Layout.Horizontal flex={{ justifyContent: 'space-between' }} padding={{ left: 'small', right: 'xlarge' }}>
+          <Layout.Horizontal
+            flex={{ justifyContent: 'flex-start', alignItems: 'center' }}
+            spacing="small"
+            padding={{ top: 'medium', bottom: 'medium', left: 'medium' }}>
+            <Icon
+              name="arrow-left"
+              size={18}
+              onClick={() => {
+                setPanelView(PluginPanelView.Category)
+              }}
+              className={css.arrow}
+            />
+            <Text font={{ variation: FontVariation.H5 }}>{getString('plugins.select')}</Text>
+          </Layout.Horizontal>
+          <ExpandingSearchInput
+            autoFocus={true}
+            alwaysExpanded={true}
+            defaultValue={query}
+            onChange={setQuery}
+            className={css.search}
           />
-          <ExpandingSearchInput autoFocus={true} alwaysExpanded={true} defaultValue={query} onChange={setQuery} />
         </Layout.Horizontal>
         <Container className={css.plugins}>
           {plugins?.map((pluginItem: TypesPlugin) => {
diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index ff3bcbf3c..00ff1967b 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -425,6 +425,7 @@ export interface StringsMap {
   'pipelines.updatePipelineSuccess': string
   'pipelines.updated': string
   'pipelines.yamlPath': string
+  'plugins.select': string
   'plugins.stepLabel': string
   'plugins.title': string
   'pluginsPanel.plugins.helptext': string
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index 664a3225d..c126f2f8c 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -712,6 +712,7 @@ run: Run
 plugins:
   title: Plugins
   stepLabel: step
+  select: Select a plugin
 pluginsPanel:
   plugins:
     helptext: Run a plugin step