fixing filter UX

This commit is contained in:
Vardan Bansal 2023-09-19 22:13:18 -07:00
parent c7ad30394e
commit 3059b3be9f
5 changed files with 29 additions and 12 deletions

View File

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

View File

@ -9,3 +9,4 @@ export declare const pluginDesc: string
export declare const pluginDetailsPanel: string export declare const pluginDetailsPanel: string
export declare const pluginIcon: string export declare const pluginIcon: string
export declare const plugins: string export declare const plugins: string
export declare const search: string

View File

@ -191,6 +191,7 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
</Container> </Container>
) : ( ) : (
<Layout.Vertical spacing="small" padding={{ top: 'small' }}> <Layout.Vertical spacing="small" padding={{ top: 'small' }}>
<Layout.Horizontal flex={{ justifyContent: 'space-between' }} padding={{ left: 'small', right: 'xlarge' }}>
<Layout.Horizontal <Layout.Horizontal
flex={{ justifyContent: 'flex-start', alignItems: 'center' }} flex={{ justifyContent: 'flex-start', alignItems: 'center' }}
spacing="small" spacing="small"
@ -203,7 +204,15 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
}} }}
className={css.arrow} className={css.arrow}
/> />
<ExpandingSearchInput autoFocus={true} alwaysExpanded={true} defaultValue={query} onChange={setQuery} /> <Text font={{ variation: FontVariation.H5 }}>{getString('plugins.select')}</Text>
</Layout.Horizontal>
<ExpandingSearchInput
autoFocus={true}
alwaysExpanded={true}
defaultValue={query}
onChange={setQuery}
className={css.search}
/>
</Layout.Horizontal> </Layout.Horizontal>
<Container className={css.plugins}> <Container className={css.plugins}>
{plugins?.map((pluginItem: TypesPlugin) => { {plugins?.map((pluginItem: TypesPlugin) => {

View File

@ -425,6 +425,7 @@ export interface StringsMap {
'pipelines.updatePipelineSuccess': string 'pipelines.updatePipelineSuccess': string
'pipelines.updated': string 'pipelines.updated': string
'pipelines.yamlPath': string 'pipelines.yamlPath': string
'plugins.select': string
'plugins.stepLabel': string 'plugins.stepLabel': string
'plugins.title': string 'plugins.title': string
'pluginsPanel.plugins.helptext': string 'pluginsPanel.plugins.helptext': string

View File

@ -712,6 +712,7 @@ run: Run
plugins: plugins:
title: Plugins title: Plugins
stepLabel: step stepLabel: step
select: Select a plugin
pluginsPanel: pluginsPanel:
plugins: plugins:
helptext: Run a plugin step helptext: Run a plugin step