Skip to content

Commit

Permalink
DEVPROD-830 Add option to Apply highlights for filtered terms (#48)
Browse files Browse the repository at this point in the history
  • Loading branch information
khelif96 authored May 24, 2024
1 parent 37fd21e commit 7a5d6bb
Show file tree
Hide file tree
Showing 17 changed files with 360 additions and 54 deletions.
15 changes: 15 additions & 0 deletions apps/parsley/cypress/integration/ansiLogs/ansi_highlighting.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,4 +69,19 @@ describe("Highlighting", () => {
);
});
});
it("should automatically add a highlight when a filter term is added if `Apply Highlights to Filters` is enabled", () => {
cy.clickToggle("highlight-filters-toggle", true, "search-and-filter");
cy.addFilter("task");
cy.dataCy("highlight").should("exist");
cy.toggleDrawer();
cy.dataCy("side-nav-highlight").should("exist");
cy.dataCy("side-nav-highlight").should("have.length", 1);
cy.dataCy("side-nav-highlight").should("contain.text", "task");
});
it("should not add a highlight when a filter term is added if `Apply Highlights to Filters` is disabled", () => {
cy.addFilter("task");
cy.dataCy("highlight").should("not.exist");
cy.toggleDrawer();
cy.dataCy("side-nav-highlight").should("not.exist");
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -72,4 +72,19 @@ describe("Highlighting", () => {
expect(colors.size).to.eq(2);
});
});
it("should automatically add a highlight when a filter term is added if `Apply Highlights to Filters` is enabled", () => {
cy.clickToggle("highlight-filters-toggle", true, "search-and-filter");
cy.addFilter("job0");
cy.dataCy("highlight").should("exist");
cy.toggleDrawer();
cy.dataCy("side-nav-highlight").should("exist");
cy.dataCy("side-nav-highlight").should("have.length", 1);
cy.dataCy("side-nav-highlight").should("contain.text", "job0");
});
it("should not add a highlight when a filter term is added if `Apply Highlights to Filters` is disabled", () => {
cy.addFilter("job0");
cy.dataCy("highlight").should("not.exist");
cy.toggleDrawer();
cy.dataCy("side-nav-highlight").should("not.exist");
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ type Action =
| { name: "Toggled Filter Logic"; logic: FilterLogic }
| { name: "Toggled Expandable Rows"; on: boolean }
| { name: "Toggled Zebra Stripes"; on: boolean }
| { name: "Toggled Jump to Failing Line"; on: boolean };
| { name: "Toggled Jump to Failing Line"; on: boolean }
| { name: "Toggled Highlight Filters"; on: boolean };

export const usePreferencesAnalytics = () =>
useAnalyticsRoot<Action>("Preferences");
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import Cookie from "js-cookie";
import { MockInstance } from "vitest";
import { LogContextProvider } from "context/LogContext";
import { renderWithRouterMatch as render, screen } from "test_utils";
import HighlightFiltersToggle from ".";

vi.mock("js-cookie");
const mockedGet = vi.spyOn(Cookie, "get") as MockInstance;

const wrapper = ({ children }: { children: React.ReactNode }) => (
<LogContextProvider initialLogLines={[]}>{children}</LogContextProvider>
);

describe("highlight filter toggle", () => {
beforeEach(() => {
mockedGet.mockImplementation(() => "true");
});

it("defaults to 'false' if cookie is unset", () => {
mockedGet.mockImplementation(() => "");
render(<HighlightFiltersToggle />, { wrapper });
const highlightFiltersToggle = screen.getByDataCy(
"highlight-filters-toggle",
);
expect(highlightFiltersToggle).toHaveAttribute("aria-checked", "false");
});

it("should read from the cookie properly", () => {
render(<HighlightFiltersToggle />, { wrapper });
const highlightFiltersToggle = screen.getByDataCy(
"highlight-filters-toggle",
);
expect(highlightFiltersToggle).toHaveAttribute("aria-checked", "true");
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { usePreferencesAnalytics } from "analytics";
import { useLogContext } from "context/LogContext";
import BaseToggle from "../BaseToggle";

const HighlightFiltersToggle: React.FC = () => {
const { sendEvent } = usePreferencesAnalytics();
const { preferences } = useLogContext();
const { highlightFilters, setHighlightFilters } = preferences;
const isChecked = highlightFilters;

const onChange = (checked: boolean) => {
sendEvent({ name: "Toggled Highlight Filters", on: checked });
setHighlightFilters(checked);
};
return (
<BaseToggle
data-cy="highlight-filters-toggle"
label="Highlight Filters"
leftLabel="OFF"
onChange={onChange}
rightLabel="ON"
tooltip="Automatically add matching highlights to filters"
value={isChecked}
/>
);
};

export default HighlightFiltersToggle;
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import BaseToggle from "./BaseToggle";
import CaseSensitiveToggle from "./CaseSensitiveToggle";
import ExpandableRowsToggle from "./ExpandableRowsToggle";
import FilterLogicToggle from "./FilterLogicToggle";
import HighlightFiltersToggle from "./HighlightFiltersToggle";
import JumpToFailingLineToggle from "./JumpToFailingLineToggle";
import PrettyPrintToggle from "./PrettyPrintToggle";
import WordWrapFormatToggle from "./WordWrapFormatToggle";
Expand All @@ -13,9 +14,10 @@ export {
CaseSensitiveToggle,
ExpandableRowsToggle,
FilterLogicToggle,
HighlightFiltersToggle,
JumpToFailingLineToggle,
PrettyPrintToggle,
WrapToggle,
WordWrapFormatToggle,
WrapToggle,
ZebraStripingToggle,
};
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,88 @@
</small>
</div>
</div>
<div
class="css-1lfkm0d-DetailRow e1fnsar2"
>
<div
class="css-1m0k94u-LabelWrapper e1fnsar0"
>
<h6
class="css-o518j-DetailName e1fnsar1 leafygreen-ui-19p3n10"
>
Highlight Filters
</h6>
<span
aria-disabled="true"
aria-label="more info"
class="leafygreen-ui-emw599"
data-testid="info-sprinkle-icon"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
aria-label="Info With Circle Icon"
class="leafygreen-ui-1st74h4"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
>
<path
clip-rule="evenodd"
d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM9 4C9 4.55228 8.55228 5 8 5C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3C8.55228 3 9 3.44772 9 4ZM8 6C8.55228 6 9 6.44772 9 7V11H9.5C9.77614 11 10 11.2239 10 11.5C10 11.7761 9.77614 12 9.5 12H6.5C6.22386 12 6 11.7761 6 11.5C6 11.2239 6.22386 11 6.5 11H7V7H6.5C6.22386 7 6 6.77614 6 6.5C6 6.22386 6.22386 6 6.5 6H8Z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</span>
</div>
<div
class="css-ar0usj-ToggleWrapper ebcb7uy0"
>
<small
class="css-1btydve-ToggleLabel ebcb7uy1 leafygreen-ui-6flbwy"
>
OFF
</small>
<button
aria-checked="false"
aria-disabled="false"
aria-labelledby="Highlight Filters Toggle"
class="lg-ui-toggle-button-0000 leafygreen-ui-1pz71rg"
data-cy="highlight-filters-toggle"
role="switch"
type="button"
>
<div
class="leafygreen-ui-w7wsyg"
>
<svg
aria-hidden="true"
aria-label="Checkmark Icon"
class="leafygreen-ui-1m8vtmm"
height="14"
role="img"
viewBox="0 0 16 16"
width="14"
>
<path
clip-rule="evenodd"
d="M6.30583 9.05037L11.7611 3.59509C12.1516 3.20457 12.7848 3.20457 13.1753 3.59509L13.8824 4.3022C14.273 4.69273 14.273 5.32589 13.8824 5.71642L6.81525 12.7836C6.38819 13.2106 5.68292 13.1646 5.31505 12.6856L2.26638 8.71605C1.92998 8.27804 2.01235 7.65025 2.45036 7.31385L3.04518 6.85702C3.59269 6.43652 4.37742 6.53949 4.79792 7.087L6.30583 9.05037Z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</div>
</button>
<small
class="css-1btydve-ToggleLabel ebcb7uy1 leafygreen-ui-6flbwy"
>
ON
</small>
</div>
</div>
</div>
</div>
<div
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@
role="tablist"
>
<button
aria-controls="tab-panel-21"
aria-controls="tab-panel-23"
aria-selected="true"
class="leafygreen-ui-oq6if2"
data-cy="search-and-filter-tab"
data-text="Search & Filter"
id="tab-22"
id="tab-24"
name="Search & Filter"
role="tab"
tabindex="0"
Expand All @@ -39,12 +39,12 @@
</div>
</button>
<button
aria-controls="tab-panel-23"
aria-controls="tab-panel-25"
aria-selected="false"
class="leafygreen-ui-1vvp6ij"
data-cy="log-viewing-tab"
data-text="Log Viewing"
id="tab-24"
id="tab-26"
name="Log Viewing"
role="tab"
tabindex="-1"
Expand All @@ -66,9 +66,9 @@
</div>
<div>
<div
aria-labelledby="tab-22"
aria-labelledby="tab-24"
data-cy="search-and-filter-tab"
id="tab-panel-21"
id="tab-panel-23"
role="tabpanel"
>
<div
Expand Down Expand Up @@ -335,6 +335,88 @@
</small>
</div>
</div>
<div
class="css-1lfkm0d-DetailRow e1fnsar2"
>
<div
class="css-1m0k94u-LabelWrapper e1fnsar0"
>
<h6
class="css-o518j-DetailName e1fnsar1 leafygreen-ui-19p3n10"
>
Highlight Filters
</h6>
<span
aria-disabled="true"
aria-label="more info"
class="leafygreen-ui-emw599"
data-testid="info-sprinkle-icon"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
aria-label="Info With Circle Icon"
class="leafygreen-ui-1st74h4"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
>
<path
clip-rule="evenodd"
d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM9 4C9 4.55228 8.55228 5 8 5C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3C8.55228 3 9 3.44772 9 4ZM8 6C8.55228 6 9 6.44772 9 7V11H9.5C9.77614 11 10 11.2239 10 11.5C10 11.7761 9.77614 12 9.5 12H6.5C6.22386 12 6 11.7761 6 11.5C6 11.2239 6.22386 11 6.5 11H7V7H6.5C6.22386 7 6 6.77614 6 6.5C6 6.22386 6.22386 6 6.5 6H8Z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</span>
</div>
<div
class="css-ar0usj-ToggleWrapper ebcb7uy0"
>
<small
class="css-1btydve-ToggleLabel ebcb7uy1 leafygreen-ui-6flbwy"
>
OFF
</small>
<button
aria-checked="false"
aria-disabled="false"
aria-labelledby="Highlight Filters Toggle"
class="lg-ui-toggle-button-0000 leafygreen-ui-1pz71rg"
data-cy="highlight-filters-toggle"
role="switch"
type="button"
>
<div
class="leafygreen-ui-w7wsyg"
>
<svg
aria-hidden="true"
aria-label="Checkmark Icon"
class="leafygreen-ui-1m8vtmm"
height="14"
role="img"
viewBox="0 0 16 16"
width="14"
>
<path
clip-rule="evenodd"
d="M6.30583 9.05037L11.7611 3.59509C12.1516 3.20457 12.7848 3.20457 13.1753 3.59509L13.8824 4.3022C14.273 4.69273 14.273 5.32589 13.8824 5.71642L6.81525 12.7836C6.38819 13.2106 5.68292 13.1646 5.31505 12.6856L2.26638 8.71605C1.92998 8.27804 2.01235 7.65025 2.45036 7.31385L3.04518 6.85702C3.59269 6.43652 4.37742 6.53949 4.79792 7.087L6.30583 9.05037Z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</div>
</button>
<small
class="css-1btydve-ToggleLabel ebcb7uy1 leafygreen-ui-6flbwy"
>
ON
</small>
</div>
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -484,9 +566,9 @@
</div>
</div>
<div
aria-labelledby="tab-24"
aria-labelledby="tab-26"
data-cy="log-viewing-tab"
id="tab-panel-23"
id="tab-panel-25"
role="tabpanel"
/>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
CaseSensitiveToggle,
ExpandableRowsToggle,
FilterLogicToggle,
HighlightFiltersToggle,
JumpToFailingLineToggle,
PrettyPrintToggle,
WordWrapFormatToggle,
Expand Down Expand Up @@ -42,6 +43,7 @@ const DetailsMenuCard = forwardRef<HTMLDivElement, DetailsMenuProps>(
<SearchRangeInput />
<CaseSensitiveToggle />
<FilterLogicToggle />
<HighlightFiltersToggle />
</Column>
</Row>
<ButtonRow />
Expand Down
Loading

0 comments on commit 7a5d6bb

Please sign in to comment.