From f38ba1f0b4b9bd34d6cb13b6951044a56b4e85b4 Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Thu, 12 Aug 2021 19:20:58 -0400 Subject: [PATCH] Uses the transient for the styled component to avoid React stack traces (#108435) (#108455) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary When running the tests for detections like so: ```sh node scripts/jest.js x-pack/plugins/security_solution/public/detections ``` We see two stack traces come up: ```sh PASS x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.test.tsx (51.663 s) ● Console console.error Warning: React does not recognize the `isActive` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isactive` instead. If you accidentally passed it from a parent component, remove it from the DOM element. in button (created by EuiButtonEmpty) in EuiButtonEmpty (created by EuiFilterButton) in EuiFilterButton (created by Styled(EuiFilterButton)) in Styled(EuiFilterButton) (created by AlertsTableFilterGroupComponent) in div (created by EuiFilterGroup) in EuiFilterGroup (created by Styled(EuiFilterGroup)) in Styled(EuiFilterGroup) (created by AlertsTableFilterGroupComponent) in AlertsTableFilterGroupComponent (created by DetectionEnginePageComponent) in div (created by Display) in Display (created by DetectionEnginePageComponent) in div (created by Wrapper) in Wrapper (created by SecuritySolutionPageWrapperComponent) in SecuritySolutionPageWrapperComponent (created by DetectionEnginePageComponent) in div (created by styled.div) in styled.div (created by DetectionEnginePageComponent) in DetectionEnginePageComponent (created by ConnectFunction) in ConnectFunction in Router in Provider (created by App) in App (created by ErrorBoundary) in ErrorBoundary (created by DragDropContext) in DragDropContext (created by TestProvidersComponent) in ThemeProvider (created by TestProvidersComponent) in Provider (created by TestProvidersComponent) in Provider in Unknown (created by TestProvidersComponent) in PseudoLocaleWrapper (created by I18nProvider) in IntlProvider (created by I18nProvider) in I18nProvider (created by TestProvidersComponent) in TestProvidersComponent (created by WrapperComponent) in WrapperComponent at warningWithoutStack (node_modules/react-dom/cjs/react-dom.development.js:530:32) at warning (node_modules/react-dom/cjs/react-dom.development.js:1018:27) at validateProperty$1 (node_modules/react-dom/cjs/react-dom.development.js:7462:7) at warnUnknownProperties (node_modules/react-dom/cjs/react-dom.development.js:7505:19) at validateProperties$2 (node_modules/react-dom/cjs/react-dom.development.js:7528:3) at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom.development.js:7575:5) at setInitialProperties (node_modules/react-dom/cjs/react-dom.development.js:7860:5) PASS x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.test.tsx (54.841 s) ● Console console.error Warning: React does not recognize the `isActive` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isactive` instead. If you accidentally passed it from a parent component, remove it from the DOM element. in button (created by EuiButtonEmpty) in EuiButtonEmpty (created by EuiFilterButton) in EuiFilterButton (created by Styled(EuiFilterButton)) in Styled(EuiFilterButton) (created by AlertsTableFilterGroupComponent) in div (created by EuiFilterGroup) in EuiFilterGroup (created by Styled(EuiFilterGroup)) in Styled(EuiFilterGroup) (created by AlertsTableFilterGroupComponent) in AlertsTableFilterGroupComponent (created by RuleDetailsPageComponent) in div (created by Wrapper) in Wrapper (created by SecuritySolutionPageWrapperComponent) in SecuritySolutionPageWrapperComponent (created by RuleDetailsPageComponent) in div (created by styled.div) in styled.div (created by RuleDetailsPageComponent) in RuleDetailsPageComponent (created by ConnectFunction) in ConnectFunction in Router in Provider (created by App) in App (created by ErrorBoundary) in ErrorBoundary (created by DragDropContext) in DragDropContext (created by TestProvidersComponent) in ThemeProvider (created by TestProvidersComponent) in Provider (created by TestProvidersComponent) in Provider in Unknown (created by TestProvidersComponent) in PseudoLocaleWrapper (created by I18nProvider) in IntlProvider (created by I18nProvider) in I18nProvider (created by TestProvidersComponent) in TestProvidersComponent (created by WrapperComponent) in WrapperComponent at warningWithoutStack (node_modules/react-dom/cjs/react-dom.development.js:530:32) at warning (node_modules/react-dom/cjs/react-dom.development.js:1018:27) at validateProperty$1 (node_modules/react-dom/cjs/react-dom.development.js:7462:7) at warnUnknownProperties (node_modules/react-dom/cjs/react-dom.development.js:7505:19) at validateProperties$2 (node_modules/react-dom/cjs/react-dom.development.js:7528:3) at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom.development.js:7575:5) at setInitialProperties (node_modules/react-dom/cjs/react-dom.development.js:7860:5) at finalizeInitialChildren (node_modules/react-dom/cjs/react-dom.development.js:9478:3) ``` This is because it looks like we should be using transient variables for styled per [here](https://styled-components.com/docs/api#transient-props) This was introduced from this [PR](https://github.com/elastic/kibana/pull/107249) ### Checklist - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios Co-authored-by: Frank Hassanabad --- .../alerts_table/alerts_filter_group/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/alerts_filter_group/index.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/alerts_filter_group/index.tsx index 82f58b5b1c723..876cc47bff84a 100644 --- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/alerts_filter_group/index.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/alerts_filter_group/index.tsx @@ -16,8 +16,8 @@ export const FILTER_OPEN: Status = 'open'; export const FILTER_CLOSED: Status = 'closed'; export const FILTER_IN_PROGRESS: Status = 'in-progress'; -const StatusFilterButton = styled(EuiFilterButton)<{ isActive: boolean }>` - background: ${({ isActive, theme }) => (isActive ? theme.eui.euiColorPrimary : '')}; +const StatusFilterButton = styled(EuiFilterButton)<{ $isActive: boolean }>` + background: ${({ $isActive, theme }) => ($isActive ? theme.eui.euiColorPrimary : '')}; `; const StatusFilterGroup = styled(EuiFilterGroup)` @@ -54,7 +54,7 @@ const AlertsTableFilterGroupComponent: React.FC = ({ onFilterGroupChanged = ({ onFilterGroupChanged = ({ onFilterGroupChanged