This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
The following commit(s) were added to refs/heads/main by this push:
new f909f1c8 DSL Property filter
f909f1c8 is described below
commit f909f1c8b1595ca5888ddab04c4135277ff4dc00
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Fri Nov 8 13:33:23 2024 -0500
DSL Property filter
---
.../webui/src/designer/property/DslProperties.tsx | 24 ++++++++++++++++------
.../src/designer/property/DslProperties.tsx | 24 ++++++++++++++++------
.../src/designer/property/DslProperties.tsx | 24 ++++++++++++++++------
3 files changed, 54 insertions(+), 18 deletions(-)
diff --git a/karavan-app/src/main/webui/src/designer/property/DslProperties.tsx
b/karavan-app/src/main/webui/src/designer/property/DslProperties.tsx
index 63a7960d..fb52dbc9 100644
--- a/karavan-app/src/main/webui/src/designer/property/DslProperties.tsx
+++ b/karavan-app/src/main/webui/src/designer/property/DslProperties.tsx
@@ -22,7 +22,7 @@ import {
TextVariants,
ExpandableSection,
Button,
- Tooltip, ToggleGroupItem, ToggleGroup, TextInput,
+ Tooltip, ToggleGroupItem, ToggleGroup, TextInputGroup, TextInputGroupMain,
TextInputGroupUtilities,
} from '@patternfly/react-core';
import '../karavan.css';
import './DslProperties.css';
@@ -41,6 +41,7 @@ import {CamelDisplayUtil} from
"karavan-core/lib/api/CamelDisplayUtil";
import {PropertiesHeader} from "./PropertiesHeader";
import {PropertyUtil} from "./property/PropertyUtil";
import {usePropertiesStore} from "./PropertyStore";
+import TimesIcon from "@patternfly/react-icons/dist/esm/icons/times-icon";
interface Props {
designerType: 'routes' | 'rest' | 'beans'
@@ -156,11 +157,22 @@ export function DslProperties(props: Props) {
onChange={(_, selected) => setChangedOnly(selected)}
/>
</ToggleGroup>
- <TextInput
- placeholder="filter by name"
- value={propertyFilter}
- onChange={(_, value) => setPropertyFilter(value)}
- />
+ <TextInputGroup>
+ <TextInputGroupMain
+ value={propertyFilter}
+ placeholder="filter by name"
+ type="text"
+ autoComplete={"off"}
+ autoFocus={true}
+ onChange={(_event, value) => setPropertyFilter(value)}
+ aria-label="filter by name"
+ />
+ <TextInputGroupUtilities>
+ <Button variant="plain" onClick={_ =>
setPropertyFilter('')}>
+ <TimesIcon aria-hidden={true}/>
+ </Button>
+ </TextInputGroupUtilities>
+ </TextInputGroup>
</div>
)
}
diff --git a/karavan-designer/src/designer/property/DslProperties.tsx
b/karavan-designer/src/designer/property/DslProperties.tsx
index 63a7960d..fb52dbc9 100644
--- a/karavan-designer/src/designer/property/DslProperties.tsx
+++ b/karavan-designer/src/designer/property/DslProperties.tsx
@@ -22,7 +22,7 @@ import {
TextVariants,
ExpandableSection,
Button,
- Tooltip, ToggleGroupItem, ToggleGroup, TextInput,
+ Tooltip, ToggleGroupItem, ToggleGroup, TextInputGroup, TextInputGroupMain,
TextInputGroupUtilities,
} from '@patternfly/react-core';
import '../karavan.css';
import './DslProperties.css';
@@ -41,6 +41,7 @@ import {CamelDisplayUtil} from
"karavan-core/lib/api/CamelDisplayUtil";
import {PropertiesHeader} from "./PropertiesHeader";
import {PropertyUtil} from "./property/PropertyUtil";
import {usePropertiesStore} from "./PropertyStore";
+import TimesIcon from "@patternfly/react-icons/dist/esm/icons/times-icon";
interface Props {
designerType: 'routes' | 'rest' | 'beans'
@@ -156,11 +157,22 @@ export function DslProperties(props: Props) {
onChange={(_, selected) => setChangedOnly(selected)}
/>
</ToggleGroup>
- <TextInput
- placeholder="filter by name"
- value={propertyFilter}
- onChange={(_, value) => setPropertyFilter(value)}
- />
+ <TextInputGroup>
+ <TextInputGroupMain
+ value={propertyFilter}
+ placeholder="filter by name"
+ type="text"
+ autoComplete={"off"}
+ autoFocus={true}
+ onChange={(_event, value) => setPropertyFilter(value)}
+ aria-label="filter by name"
+ />
+ <TextInputGroupUtilities>
+ <Button variant="plain" onClick={_ =>
setPropertyFilter('')}>
+ <TimesIcon aria-hidden={true}/>
+ </Button>
+ </TextInputGroupUtilities>
+ </TextInputGroup>
</div>
)
}
diff --git a/karavan-space/src/designer/property/DslProperties.tsx
b/karavan-space/src/designer/property/DslProperties.tsx
index 63a7960d..fb52dbc9 100644
--- a/karavan-space/src/designer/property/DslProperties.tsx
+++ b/karavan-space/src/designer/property/DslProperties.tsx
@@ -22,7 +22,7 @@ import {
TextVariants,
ExpandableSection,
Button,
- Tooltip, ToggleGroupItem, ToggleGroup, TextInput,
+ Tooltip, ToggleGroupItem, ToggleGroup, TextInputGroup, TextInputGroupMain,
TextInputGroupUtilities,
} from '@patternfly/react-core';
import '../karavan.css';
import './DslProperties.css';
@@ -41,6 +41,7 @@ import {CamelDisplayUtil} from
"karavan-core/lib/api/CamelDisplayUtil";
import {PropertiesHeader} from "./PropertiesHeader";
import {PropertyUtil} from "./property/PropertyUtil";
import {usePropertiesStore} from "./PropertyStore";
+import TimesIcon from "@patternfly/react-icons/dist/esm/icons/times-icon";
interface Props {
designerType: 'routes' | 'rest' | 'beans'
@@ -156,11 +157,22 @@ export function DslProperties(props: Props) {
onChange={(_, selected) => setChangedOnly(selected)}
/>
</ToggleGroup>
- <TextInput
- placeholder="filter by name"
- value={propertyFilter}
- onChange={(_, value) => setPropertyFilter(value)}
- />
+ <TextInputGroup>
+ <TextInputGroupMain
+ value={propertyFilter}
+ placeholder="filter by name"
+ type="text"
+ autoComplete={"off"}
+ autoFocus={true}
+ onChange={(_event, value) => setPropertyFilter(value)}
+ aria-label="filter by name"
+ />
+ <TextInputGroupUtilities>
+ <Button variant="plain" onClick={_ =>
setPropertyFilter('')}>
+ <TimesIcon aria-hidden={true}/>
+ </Button>
+ </TextInputGroupUtilities>
+ </TextInputGroup>
</div>
)
}
