mirror of
https://github.com/prymitive/karma
synced 2026-05-05 03:16:51 +00:00
chore(ui): only render filter search icon when empty
Turn the search icon into a placeholder - only render it if there are no active filters.
This commit is contained in:
Łukasz Mierzwa
committed by
Łukasz Mierzwa
Łukasz Mierzwa
parent
b0d3ccbe6f
commit
4f8122db83
@@ -1,26 +1,8 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<FilterInput /> matches snapshot on default render 1`] = `
|
||||
exports[`<FilterInput /> matches snapshot with no filters 1`] = `
|
||||
"
|
||||
<div class=\\"input-group w-100 mr-2 components-filterinput-outer bg-transparent\\">
|
||||
<div class=\\"input-group-prepend\\">
|
||||
<span class=\\"input-group-text px-2 border-0 rounded-0 bg-inherit components-navbar-icon\\">
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"search\\"
|
||||
class=\\"svg-inline--fa fa-search fa-w-16 \\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 512 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class=\\"form-control components-filterinput border-0 rounded-0 bg-inherit\\">
|
||||
<div role=\\"combobox\\"
|
||||
aria-haspopup=\\"listbox\\"
|
||||
@@ -28,6 +10,22 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
|
||||
aria-expanded=\\"false\\"
|
||||
class=\\"autosuggest d-inline-block mw-100\\"
|
||||
>
|
||||
<span class=\\"input-group-text d-inline-block mr-2 border-0 bg-inherit px-1\\">
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"search\\"
|
||||
class=\\"svg-inline--fa fa-search fa-w-16 \\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 512 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
<input type=\\"text\\"
|
||||
class=\\"components-filterinput-wrapper text-white mw-100\\"
|
||||
placeholder
|
||||
@@ -44,7 +42,140 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=\\"input-group-append inherit\\">
|
||||
<div class=\\"input-group-append\\">
|
||||
<span class=\\"input-group-text border-0 rounded-0 bg-inherit px-0\\">
|
||||
<button class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
|
||||
type=\\"button\\"
|
||||
data-toggle=\\"dropdown\\"
|
||||
aria-haspopup=\\"true\\"
|
||||
aria-expanded=\\"true\\"
|
||||
>
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"caret-down\\"
|
||||
class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 320 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
`;
|
||||
|
||||
exports[`<FilterInput /> matches snapshot with some filters 1`] = `
|
||||
"
|
||||
<div class=\\"input-group w-100 mr-2 components-filterinput-outer bg-transparent\\">
|
||||
<div class=\\"form-control components-filterinput border-0 rounded-0 bg-inherit\\">
|
||||
<button type=\\"button\\"
|
||||
class=\\"btn-secondary btn-sm components-filteredinputlabel components-label btn d-inline-flex flex-row align-items-center\\"
|
||||
>
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"spinner\\"
|
||||
class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin \\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 512 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
<div class=\\"components-filteredinputlabel-text flex-grow-1 flex-shrink-1 ml-1 tooltip-trigger\\">
|
||||
<span tabindex=\\"0\\"
|
||||
class=\\"cursor-text px-1\\"
|
||||
>
|
||||
foo=bar
|
||||
</span>
|
||||
</div>
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"times\\"
|
||||
class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ml-1 close\\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 352 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
<button type=\\"button\\"
|
||||
class=\\"btn-secondary btn-sm components-filteredinputlabel components-label btn d-inline-flex flex-row align-items-center\\"
|
||||
>
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"spinner\\"
|
||||
class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin \\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 512 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
<div class=\\"components-filteredinputlabel-text flex-grow-1 flex-shrink-1 ml-1 tooltip-trigger\\">
|
||||
<span tabindex=\\"0\\"
|
||||
class=\\"cursor-text px-1\\"
|
||||
>
|
||||
baz!=bar
|
||||
</span>
|
||||
</div>
|
||||
<svg aria-hidden=\\"true\\"
|
||||
focusable=\\"false\\"
|
||||
data-prefix=\\"fas\\"
|
||||
data-icon=\\"times\\"
|
||||
class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ml-1 close\\"
|
||||
role=\\"img\\"
|
||||
xmlns=\\"http://www.w3.org/2000/svg\\"
|
||||
viewbox=\\"0 0 352 512\\"
|
||||
>
|
||||
<path fill=\\"currentColor\\"
|
||||
d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
|
||||
>
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
<div role=\\"combobox\\"
|
||||
aria-haspopup=\\"listbox\\"
|
||||
aria-owns=\\"react-autowhatever-1\\"
|
||||
aria-expanded=\\"false\\"
|
||||
class=\\"autosuggest d-inline-block mw-100\\"
|
||||
>
|
||||
<input type=\\"text\\"
|
||||
class=\\"components-filterinput-wrapper text-white mw-100\\"
|
||||
placeholder
|
||||
size=\\"1\\"
|
||||
value
|
||||
autocomplete=\\"off\\"
|
||||
aria-autocomplete=\\"list\\"
|
||||
aria-controls=\\"react-autowhatever-1\\"
|
||||
>
|
||||
<div id=\\"react-autowhatever-1\\"
|
||||
role=\\"listbox\\"
|
||||
class=\\"dropdown\\"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=\\"input-group-append\\">
|
||||
<span class=\\"input-group-text border-0 rounded-0 bg-inherit px-0\\">
|
||||
<button class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
|
||||
type=\\"button\\"
|
||||
|
||||
@@ -40,11 +40,24 @@ const MountedInput = () => {
|
||||
};
|
||||
|
||||
describe("<FilterInput />", () => {
|
||||
it("matches snapshot on default render", () => {
|
||||
it("matches snapshot with no filters", () => {
|
||||
const tree = render(
|
||||
<FilterInput alertStore={alertStore} settingsStore={settingsStore} />
|
||||
);
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
expect(alertStore.filters.values).toHaveLength(0);
|
||||
});
|
||||
|
||||
it("matches snapshot with some filters", () => {
|
||||
alertStore.filters.values = [
|
||||
NewUnappliedFilter("foo=bar"),
|
||||
NewUnappliedFilter("baz!=bar"),
|
||||
];
|
||||
const tree = render(
|
||||
<FilterInput alertStore={alertStore} settingsStore={settingsStore} />
|
||||
);
|
||||
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
|
||||
expect(alertStore.filters.values).toHaveLength(2);
|
||||
});
|
||||
|
||||
it("input gets focus by default on desktop", () => {
|
||||
|
||||
@@ -118,13 +118,20 @@ const FilterInput: FC<{
|
||||
...inputProps
|
||||
}) => {
|
||||
return (
|
||||
<input
|
||||
className="components-filterinput-wrapper text-white mw-100"
|
||||
placeholder=""
|
||||
size={value.length + 1}
|
||||
value={value}
|
||||
{...inputProps}
|
||||
/>
|
||||
<React.Fragment>
|
||||
{alertStore.filters.values.length ? null : (
|
||||
<span className="input-group-text d-inline-block mr-2 border-0 bg-inherit px-1">
|
||||
<FontAwesomeIcon icon={faSearch} />
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
className="components-filterinput-wrapper text-white mw-100"
|
||||
placeholder=""
|
||||
size={value.length + 1}
|
||||
value={value}
|
||||
{...inputProps}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -138,11 +145,6 @@ const FilterInput: FC<{
|
||||
isFocused ? "bg-focused" : "bg-transparent"
|
||||
}`}
|
||||
>
|
||||
<div className="input-group-prepend">
|
||||
<span className="input-group-text px-2 border-0 rounded-0 bg-inherit components-navbar-icon">
|
||||
<FontAwesomeIcon icon={faSearch} />
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="form-control components-filterinput border-0 rounded-0 bg-inherit"
|
||||
onClick={(event) =>
|
||||
@@ -177,7 +179,7 @@ const FilterInput: FC<{
|
||||
theme={AutosuggestTheme}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-group-append inherit">
|
||||
<div className="input-group-append">
|
||||
<History alertStore={alertStore} settingsStore={settingsStore} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user