fixing filter UX

web/src/components/PluginsPanel/PluginsPanel.module.scss

@@ -52,3 +52,8 @@
 .panelContent {
   height: calc(100% - var(--spacing-large));
 }
+
+.search {
+  width: 50%;
+  height: 35px;
+}

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

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
+        <Layout.Horizontal flex={{ justifyContent: 'space-between' }} padding={{ left: 'small', right: 'xlarge' }}>
-          flex={{ justifyContent: 'flex-start', alignItems: 'center' }}
+          <Layout.Horizontal
-          spacing="small"
+            flex={{ justifyContent: 'flex-start', alignItems: 'center' }}
-          padding={{ top: 'medium', bottom: 'medium', left: 'medium' }}>
+            spacing="small"
-          <Icon
+            padding={{ top: 'medium', bottom: 'medium', left: 'medium' }}>
-            name="arrow-left"
+            <Icon
-            size={18}
+              name="arrow-left"
-            onClick={() => {
+              size={18}
-              setPanelView(PluginPanelView.Category)
+              onClick={() => {
-            }}
+                setPanelView(PluginPanelView.Category)
-            className={css.arrow}
+              }}
+              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) => {

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

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