From 902dc2c2dfd299d5a519e6ee89f46b441b014383 Mon Sep 17 00:00:00 2001 From: Matthias Tietz Date: Thu, 21 Dec 2023 15:09:35 +0100 Subject: [PATCH 1/8] feat: adds button to remove column from Documents table --- app/packages/klogs/src/components/Logs.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/app/packages/klogs/src/components/Logs.tsx b/app/packages/klogs/src/components/Logs.tsx index e8f31199..cb3f1b61 100644 --- a/app/packages/klogs/src/components/Logs.tsx +++ b/app/packages/klogs/src/components/Logs.tsx @@ -16,6 +16,7 @@ import { KeyboardArrowRight, ListAlt, MoreVert, + RemoveCircleOutline, SavedSearch, TableChart, ZoomIn, @@ -524,6 +525,15 @@ const Documents: FunctionComponent<{ > {field} + selectField?.(field)} + > + + ))} From ff1d1782d445d2619beb0604feddd9cf2f7bf6c6 Mon Sep 17 00:00:00 2001 From: Matthias Tietz Date: Thu, 21 Dec 2023 15:36:35 +0100 Subject: [PATCH 2/8] fix: lint --- app/packages/klogs/src/components/Logs.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/packages/klogs/src/components/Logs.tsx b/app/packages/klogs/src/components/Logs.tsx index cb3f1b61..44240273 100644 --- a/app/packages/klogs/src/components/Logs.tsx +++ b/app/packages/klogs/src/components/Logs.tsx @@ -526,13 +526,13 @@ const Documents: FunctionComponent<{ {field} selectField?.(field)} > - + ))} From 49ab0874c80d6b6c87b3f0dcc88363148eff4930 Mon Sep 17 00:00:00 2001 From: Matthias Tietz Date: Thu, 21 Dec 2023 15:43:30 +0100 Subject: [PATCH 3/8] fix: lint 2 --- app/packages/klogs/src/components/Logs.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/packages/klogs/src/components/Logs.tsx b/app/packages/klogs/src/components/Logs.tsx index 44240273..977a3014 100644 --- a/app/packages/klogs/src/components/Logs.tsx +++ b/app/packages/klogs/src/components/Logs.tsx @@ -526,13 +526,13 @@ const Documents: FunctionComponent<{ {field} selectField?.(field)} > - + ))} From 0eea732e1576a2891c43312ccfaab6cf6b37dfe6 Mon Sep 17 00:00:00 2001 From: Matthias Tietz Date: Thu, 21 Dec 2023 16:34:01 +0100 Subject: [PATCH 4/8] fix: export Documents and fix typo --- app/packages/klogs/src/components/Logs.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/packages/klogs/src/components/Logs.tsx b/app/packages/klogs/src/components/Logs.tsx index 977a3014..f4d6a5bb 100644 --- a/app/packages/klogs/src/components/Logs.tsx +++ b/app/packages/klogs/src/components/Logs.tsx @@ -481,9 +481,9 @@ const Document: FunctionComponent<{ /** * The `Documents` component is used to render the documents in a table. The table will show the timestamp of each log * line and a preview of the most important fields. If the user select a list of fields these fields will be shown - * insteand of the preview. + * instead of the preview. */ -const Documents: FunctionComponent<{ +export const Documents: FunctionComponent<{ addFilter?: (filter: string) => void; changeOrder?: (orderBy: string) => void; documents: Record[]; From 6f7634c16e85a7b2ae8ba844051722848a15f46d Mon Sep 17 00:00:00 2001 From: Matthias Tietz Date: Thu, 21 Dec 2023 16:34:18 +0100 Subject: [PATCH 5/8] test: expand tests --- .../klogs/src/components/Logs.test.tsx | 123 +++++++++++++----- 1 file changed, 88 insertions(+), 35 deletions(-) diff --git a/app/packages/klogs/src/components/Logs.test.tsx b/app/packages/klogs/src/components/Logs.test.tsx index fd6e9660..aa74a0d7 100644 --- a/app/packages/klogs/src/components/Logs.test.tsx +++ b/app/packages/klogs/src/components/Logs.test.tsx @@ -1,37 +1,90 @@ -import { render, screen } from '@testing-library/react'; +import {render, screen} from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { vi } from 'vitest'; - -import { LogsDownload } from './Logs'; - -describe('LogsDownload', () => { - const documents = [ - { - log: '{"namespace": "foo"}', - namespace: 'foo', - timestamp: new Date(2000, 2, 2).toISOString(), - }, - ]; - - it('can download logs', async () => { - const download = vi.fn(); - render(); - - const openMenu = screen.getByLabelText('open menu'); - await userEvent.click(openMenu); - const downloadJSON = screen.getByLabelText('Download Logs'); - await userEvent.click(downloadJSON); - expect(download).toHaveBeenCalledWith('{"namespace": "foo"}', 'kobs-export-logs.log'); - }); - - it('can download csv', async () => { - const download = vi.fn(); - render(); - - const openMenu = screen.getByLabelText('open menu'); - await userEvent.click(openMenu); - const downloadCSV = screen.getByLabelText('Download CSV'); - await userEvent.click(downloadCSV); - expect(download).toHaveBeenCalledWith('2000-03-02 00:00:00;foo\r\n', 'kobs-export-logs.csv'); - }); +import {vi} from 'vitest'; + +import {Documents, LogsDownload} from './Logs'; + +describe('Logs', () => { + describe('LogsDownload', () => { + const documents = [ + { + log: '{"namespace": "foo"}', + namespace: 'foo', + timestamp: new Date(2000, 2, 2).toISOString(), + }, + ]; + + it('can download logs', async () => { + const download = vi.fn(); + render(); + + const openMenu = screen.getByLabelText('open menu'); + await userEvent.click(openMenu); + const downloadJSON = screen.getByLabelText('Download Logs'); + await userEvent.click(downloadJSON); + expect(download).toHaveBeenCalledWith('{"namespace": "foo"}', 'kobs-export-logs.log'); + }); + + it('can download csv', async () => { + const download = vi.fn(); + render(); + + const openMenu = screen.getByLabelText('open menu'); + await userEvent.click(openMenu); + const downloadCSV = screen.getByLabelText('Download CSV'); + await userEvent.click(downloadCSV); + expect(download).toHaveBeenCalledWith('2000-03-02 00:00:00;foo\r\n', 'kobs-export-logs.csv'); + }); + }); + + + describe('Documents', () => { + const documents = [ + { + log: '{"namespace": "foo"}', + namespace: 'foo', + timestamp: new Date(2000, 2, 2).toISOString(), + }, + ]; + + const iconName = 'RemoveCircleOutlineIcon'; + + const setup = ( + documents: Record[], + selectedFields: string[], + selectField?: (field: string) => void, + ) => { + return (); + } + + it('show documents with column remove button', async () => { + const removeFieldMock = vi.fn(); + const selectedFields = ['log', 'namespace', 'timestamp']; + render(setup(documents, selectedFields, removeFieldMock)); + + let removeColumnIcons = screen.getAllByTestId(iconName); + expect(removeColumnIcons.length).toBe(selectedFields.length); + expect(screen.getByText('Time')).toBeInTheDocument(); + expect(screen.getByText('log')).toBeInTheDocument(); + expect(screen.getByText('namespace')).toBeInTheDocument(); + expect(screen.getByText('timestamp')).toBeInTheDocument(); + + const element = document.querySelector(`button > svg[data-testid="${iconName}"]`); + await userEvent.click(element!); + + // check to be called -> first button -> first column, which is 'log' + expect(removeFieldMock).toBeCalledWith("log"); + }); + }); }); From 29873e4c3b1ef4eb57113b98b847ce1eab78eae3 Mon Sep 17 00:00:00 2001 From: Matthias Tietz Date: Thu, 21 Dec 2023 17:57:54 +0100 Subject: [PATCH 6/8] fix: lint --- .../klogs/src/components/Logs.test.tsx | 147 +++++++++--------- 1 file changed, 75 insertions(+), 72 deletions(-) diff --git a/app/packages/klogs/src/components/Logs.test.tsx b/app/packages/klogs/src/components/Logs.test.tsx index aa74a0d7..0b321366 100644 --- a/app/packages/klogs/src/components/Logs.test.tsx +++ b/app/packages/klogs/src/components/Logs.test.tsx @@ -1,90 +1,93 @@ -import {render, screen} from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import {vi} from 'vitest'; +import { vi } from 'vitest'; -import {Documents, LogsDownload} from './Logs'; +import { Documents, LogsDownload } from './Logs'; describe('Logs', () => { - describe('LogsDownload', () => { - const documents = [ - { - log: '{"namespace": "foo"}', - namespace: 'foo', - timestamp: new Date(2000, 2, 2).toISOString(), - }, - ]; + describe('LogsDownload', () => { + const documents = [ + { + log: '{"namespace": "foo"}', + namespace: 'foo', + timestamp: new Date(2000, 2, 2).toISOString(), + }, + ]; - it('can download logs', async () => { - const download = vi.fn(); - render(); + it('can download logs', async () => { + const download = vi.fn(); + render(); - const openMenu = screen.getByLabelText('open menu'); - await userEvent.click(openMenu); - const downloadJSON = screen.getByLabelText('Download Logs'); - await userEvent.click(downloadJSON); - expect(download).toHaveBeenCalledWith('{"namespace": "foo"}', 'kobs-export-logs.log'); - }); + const openMenu = screen.getByLabelText('open menu'); + await userEvent.click(openMenu); + const downloadJSON = screen.getByLabelText('Download Logs'); + await userEvent.click(downloadJSON); + expect(download).toHaveBeenCalledWith('{"namespace": "foo"}', 'kobs-export-logs.log'); + }); - it('can download csv', async () => { - const download = vi.fn(); - render(); + it('can download csv', async () => { + const download = vi.fn(); + render(); - const openMenu = screen.getByLabelText('open menu'); - await userEvent.click(openMenu); - const downloadCSV = screen.getByLabelText('Download CSV'); - await userEvent.click(downloadCSV); - expect(download).toHaveBeenCalledWith('2000-03-02 00:00:00;foo\r\n', 'kobs-export-logs.csv'); - }); + const openMenu = screen.getByLabelText('open menu'); + await userEvent.click(openMenu); + const downloadCSV = screen.getByLabelText('Download CSV'); + await userEvent.click(downloadCSV); + expect(download).toHaveBeenCalledWith('2000-03-02 00:00:00;foo\r\n', 'kobs-export-logs.csv'); }); + }); + describe('Documents', () => { + const documents = [ + { + log: '{"namespace": "foo"}', + namespace: 'foo', + timestamp: new Date(2000, 2, 2).toISOString(), + }, + ]; - describe('Documents', () => { - const documents = [ - { - log: '{"namespace": "foo"}', - namespace: 'foo', - timestamp: new Date(2000, 2, 2).toISOString(), - }, - ]; - - const iconName = 'RemoveCircleOutlineIcon'; + const iconName = 'RemoveCircleOutlineIcon'; - const setup = ( - documents: Record[], - selectedFields: string[], - selectField?: (field: string) => void, - ) => { - return (); - } + const setup = ( + documents: Record[], + selectedFields: string[], + selectField?: (field: string) => void, + ) => { + return ( + + ); + }; - it('show documents with column remove button', async () => { - const removeFieldMock = vi.fn(); - const selectedFields = ['log', 'namespace', 'timestamp']; - render(setup(documents, selectedFields, removeFieldMock)); + it('show documents with column remove button', async () => { + const removeFieldMock = vi.fn(); + const selectedFields = ['log', 'namespace', 'timestamp']; + render(setup(documents, selectedFields, removeFieldMock)); - let removeColumnIcons = screen.getAllByTestId(iconName); - expect(removeColumnIcons.length).toBe(selectedFields.length); - expect(screen.getByText('Time')).toBeInTheDocument(); - expect(screen.getByText('log')).toBeInTheDocument(); - expect(screen.getByText('namespace')).toBeInTheDocument(); - expect(screen.getByText('timestamp')).toBeInTheDocument(); + const removeColumnIcons = screen.getAllByTestId(iconName); + expect(removeColumnIcons.length).toBe(selectedFields.length); + expect(screen.getByText('Time')).toBeInTheDocument(); + expect(screen.getByText('log')).toBeInTheDocument(); + expect(screen.getByText('namespace')).toBeInTheDocument(); + expect(screen.getByText('timestamp')).toBeInTheDocument(); - const element = document.querySelector(`button > svg[data-testid="${iconName}"]`); - await userEvent.click(element!); + const element = document.querySelector(`button > svg[data-testid="${iconName}"]`); + expect(element).not.toBeNull(); + /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */ + await userEvent.click(element!); - // check to be called -> first button -> first column, which is 'log' - expect(removeFieldMock).toBeCalledWith("log"); - }); + // check to be called -> first button -> first column, which is 'log' + expect(removeFieldMock).toBeCalledWith('log'); }); + }); }); From 4061051bf43d51a61d5ebec5f1bbd16364fb803c Mon Sep 17 00:00:00 2001 From: Matthias Tietz Date: Thu, 21 Dec 2023 19:31:14 +0100 Subject: [PATCH 7/8] fix: use TableChart icon --- app/packages/klogs/src/components/Logs.test.tsx | 2 +- app/packages/klogs/src/components/Logs.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/packages/klogs/src/components/Logs.test.tsx b/app/packages/klogs/src/components/Logs.test.tsx index 0b321366..0a810583 100644 --- a/app/packages/klogs/src/components/Logs.test.tsx +++ b/app/packages/klogs/src/components/Logs.test.tsx @@ -46,7 +46,7 @@ describe('Logs', () => { }, ]; - const iconName = 'RemoveCircleOutlineIcon'; + const iconName = 'TableChartIcon'; const setup = ( documents: Record[], diff --git a/app/packages/klogs/src/components/Logs.tsx b/app/packages/klogs/src/components/Logs.tsx index f4d6a5bb..718df56e 100644 --- a/app/packages/klogs/src/components/Logs.tsx +++ b/app/packages/klogs/src/components/Logs.tsx @@ -16,7 +16,6 @@ import { KeyboardArrowRight, ListAlt, MoreVert, - RemoveCircleOutline, SavedSearch, TableChart, ZoomIn, @@ -532,7 +531,7 @@ export const Documents: FunctionComponent<{ sx={{ m: 0 }} onClick={() => selectField?.(field)} > - + ))} From 0e96db0dc6865bb1f7d25dd23ebc83307d1eca1b Mon Sep 17 00:00:00 2001 From: Matthias Tietz Date: Thu, 21 Dec 2023 19:33:44 +0100 Subject: [PATCH 8/8] fix: add aria label --- app/packages/klogs/src/components/Logs.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/packages/klogs/src/components/Logs.tsx b/app/packages/klogs/src/components/Logs.tsx index 718df56e..3e00bf06 100644 --- a/app/packages/klogs/src/components/Logs.tsx +++ b/app/packages/klogs/src/components/Logs.tsx @@ -529,6 +529,7 @@ export const Documents: FunctionComponent<{ color="inherit" size={'small'} sx={{ m: 0 }} + aria-label="toggle field column" onClick={() => selectField?.(field)} >