diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json index a2f7fd806..1bc44c8d7 100644 --- a/frontend/.eslintrc.json +++ b/frontend/.eslintrc.json @@ -47,6 +47,7 @@ "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks // breaks builds as we still have those warns "react-hooks/exhaustive-deps": "off", // Checks effect dependencies + "jsx-a11y/control-has-associated-label": "off", "import/no-extraneous-dependencies": [ "error", { diff --git a/frontend/src/components/KsqlDb/Query/QueryForm/QueryForm.styled.ts b/frontend/src/components/KsqlDb/Query/QueryForm/QueryForm.styled.ts index eb71ad1ef..a2712e49f 100644 --- a/frontend/src/components/KsqlDb/Query/QueryForm/QueryForm.styled.ts +++ b/frontend/src/components/KsqlDb/Query/QueryForm/QueryForm.styled.ts @@ -42,34 +42,32 @@ export const ButtonsContainer = styled.div` `; export const SQLEditor = styled(BaseSQLEditor)( - ({ readOnly, theme }) => - css` - background: ${readOnly && theme.ksqlDb.query.editor.readonly.background}; - .ace-cursor { - ${readOnly && `background: ${theme.default.transparentColor} `} - } + ({ readOnly, theme }) => css` + background: ${readOnly && theme.ksqlDb.query.editor.readonly.background}; + .ace-cursor { + ${readOnly && `background: ${theme.default.transparentColor} `} + } - .ace_content { - background-color: ${theme.default.backgroundColor}; - color: ${theme.default.color.normal}; - } - .ace_line { - background-color: ${theme.ksqlDb.query.editor.activeLine - .backgroundColor}; - } - .ace_gutter-cell { - background-color: ${theme.ksqlDb.query.editor.cell.backgroundColor}; - } - .ace_gutter-layer { - background-color: ${theme.ksqlDb.query.editor.layer.backgroundColor}; - color: ${theme.default.color.normal}; - } - .ace_cursor { - color: ${theme.ksqlDb.query.editor.cursor}; - } + .ace_content { + background-color: ${theme.default.backgroundColor}; + color: ${theme.default.color.normal}; + } + .ace_line { + background-color: ${theme.ksqlDb.query.editor.activeLine.backgroundColor}; + } + .ace_gutter-cell { + background-color: ${theme.ksqlDb.query.editor.cell.backgroundColor}; + } + .ace_gutter-layer { + background-color: ${theme.ksqlDb.query.editor.layer.backgroundColor}; + color: ${theme.default.color.normal}; + } + .ace_cursor { + color: ${theme.ksqlDb.query.editor.cursor}; + } - .ace_print-margin { - display: none; - } - ` + .ace_print-margin { + display: none; + } + ` ); diff --git a/frontend/src/components/NavBar/NavBar.styled.ts b/frontend/src/components/NavBar/NavBar.styled.ts index 6f47f7223..28e9ed07d 100644 --- a/frontend/src/components/NavBar/NavBar.styled.ts +++ b/frontend/src/components/NavBar/NavBar.styled.ts @@ -111,7 +111,11 @@ export const Span = styled.span( left: calc(50% - 8px); transform-origin: center; transition-duration: 86ms; - transition-property: background-color, opacity, transform, -webkit-transform; + transition-property: + background-color, + opacity, + transform, + -webkit-transform; transition-timing-function: ease-out; width: 16px; diff --git a/frontend/src/components/PageContainer/PageContainer.styled.ts b/frontend/src/components/PageContainer/PageContainer.styled.ts index bd217b4da..ae550ca99 100644 --- a/frontend/src/components/PageContainer/PageContainer.styled.ts +++ b/frontend/src/components/PageContainer/PageContainer.styled.ts @@ -27,7 +27,10 @@ export const Sidebar = styled.div<{ $visible: boolean }>( bottom: 0; padding: 8px 16px; overflow-y: scroll; - transition: width 0.25s, opacity 0.25s, transform 0.25s, + transition: + width 0.25s, + opacity 0.25s, + transform 0.25s, -webkit-transform 0.25s; background: ${theme.menu.backgroundColor.normal}; @media screen and (max-width: 1023px) { diff --git a/frontend/src/components/Topics/Topic/Edit/topicParamsTransformer.ts b/frontend/src/components/Topics/Topic/Edit/topicParamsTransformer.ts index 910f31a5f..0350b228d 100644 --- a/frontend/src/components/Topics/Topic/Edit/topicParamsTransformer.ts +++ b/frontend/src/components/Topics/Topic/Edit/topicParamsTransformer.ts @@ -19,11 +19,14 @@ const topicParamsTransformer = (topic?: Topic, config?: TopicConfig[]) => { return TOPIC_EDIT_FORM_DEFAULT_PROPS; } - const customParams = config.reduce((acc, { name, value, defaultValue }) => { - if (value === defaultValue) return acc; - if (!TOPIC_CUSTOM_PARAMS[name]) return acc; - return [...acc, { name, value }]; - }, [] as { name: string; value?: string }[]); + const customParams = config.reduce( + (acc, { name, value, defaultValue }) => { + if (value === defaultValue) return acc; + if (!TOPIC_CUSTOM_PARAMS[name]) return acc; + return [...acc, { name, value }]; + }, + [] as { name: string; value?: string }[] + ); return { ...TOPIC_EDIT_FORM_DEFAULT_PROPS, diff --git a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx index d1bd5071c..f9368369c 100644 --- a/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx +++ b/frontend/src/components/Topics/Topic/Messages/Filters/__tests__/AddEditFilterContainer.spec.tsx @@ -108,7 +108,7 @@ describe('AddEditFilterContainer component', () => { const textAreaElement = inputs[0] as HTMLTextAreaElement; const inputNameElement = inputs[1]; expect(inputNameElement).toHaveValue(mockData.id); - expect(textAreaElement.value).toEqual(''); + expect(textAreaElement).toHaveValue(''); }); it('should display the checkbox is not shown during the edit mode', async () => { diff --git a/frontend/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx b/frontend/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx index c96b395f4..9212642b0 100644 --- a/frontend/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx +++ b/frontend/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx @@ -16,12 +16,11 @@ const contentTest = '{"payload":{"author":"DwaywelayTOP","archived":false,"name":"t3_11jshwd","id":"11jshwd"}}'; jest.mock( 'components/Topics/Topic/Messages/MessageContent/MessageContent', - () => () => - ( -