jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Highlight search terms in logs with yellow when highlight search setting is enabled

Browse Source 
Summary: Building on the previous diff which added a setting to enable/disable highlighting search terms in the logs. This diff adds the actual highlighting and connects with the setting. The highlighting currently only supports one color, while the next diff will seek to support a preset of a "custom" colors for the highlighting

Reviewed By: mweststrate

Differential Revision: D37348441

fbshipit-source-id: 7a2b74b16f239d5e36c213e06ccb86f74eaa8df5
This commit is contained in:
Feiyu Wong
2022-06-29 10:36:52 -07:00
committed by Facebook GitHub Bot
parent 24a314054e
commit 2f39ede6f7
6 changed files with 201 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx
View File

@@ -49,24 +49,34 @@ test('update and append', async () => {
{
const elem = await rendering.findAllByText('test DataTable');
expect(elem.length).toBe(1);
expect(elem[0].parentElement).toMatchInlineSnapshot(`
<div
class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
>
<div
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
test DataTable
</div>
<div
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
true
</div>
</div>
`);
expect(elem[0].parentElement?.parentElement).toMatchInlineSnapshot(`
<div
class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
>
<div
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
<span>
<span
class="css-1cfwmd7-Highlighted eiud9hg0"
/>
test DataTable
</span>
</div>
<div
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
<span>
<span
class="css-1cfwmd7-Highlighted eiud9hg0"
/>
true
</span>
</div>
</div>
`);
}
act(() => {
@@ -103,24 +113,34 @@ test('column visibility', async () => {
{
const elem = await rendering.findAllByText('test DataTable');
expect(elem.length).toBe(1);
expect(elem[0].parentElement).toMatchInlineSnapshot(`
<div
class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
>
<div
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
test DataTable
</div>
<div
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
true
</div>
</div>
`);
expect(elem[0].parentElement?.parentElement).toMatchInlineSnapshot(`
<div
class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
>
<div
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
<span>
<span
class="css-1cfwmd7-Highlighted eiud9hg0"
/>
test DataTable
</span>
</div>
<div
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
<span>
<span
class="css-1cfwmd7-Highlighted eiud9hg0"
/>
true
</span>
</div>
</div>
`);
}
// hide done
@@ -130,18 +150,23 @@ test('column visibility', async () => {
{
const elem = await rendering.findAllByText('test DataTable');
expect(elem.length).toBe(1);
expect(elem[0].parentElement).toMatchInlineSnapshot(`
<div
class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
>
<div
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
test DataTable
</div>
</div>
`);
expect(elem[0].parentElement?.parentElement).toMatchInlineSnapshot(`
<div
class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
>
<div
class="css-1baxqcf-TableBodyColumnContainer e1luu51r0"
width="50%"
>
<span>
<span
class="css-1cfwmd7-Highlighted eiud9hg0"
/>
test DataTable
</span>
</div>
</div>
`);
}
// reset
@@ -151,7 +176,7 @@ test('column visibility', async () => {
{
const elem = await rendering.findAllByText('test DataTable');
expect(elem.length).toBe(1);
expect(elem[0].parentElement?.children.length).toBe(2);
expect(elem[0].parentElement?.parentElement?.children.length).toBe(2);
}
});