[CCI] Add useDeprecatedPropWarning and align with deprecated hoc (o…

…pensearch-project#762) * Add useDeprecatedPropWarning and align with deprecated hoc (opensearch-project#761) Co-authored-by: Andrey Myssak <[email protected]> Signed-off-by: Sergey Myssak <[email protected]> * Add multiple props to useDeprecatedPropWarning and pass getMessage to deprecatedComponentWarning (opensearch-project#761) Co-authored-by: Andrey Myssak <[email protected]> Signed-off-by: Sergey Myssak <[email protected]> * Use ExclusiveUnion in interfaces (opensearch-project#761) Co-authored-by: Andrey Myssak <[email protected]> Signed-off-by: Sergey Myssak <[email protected]> --------- Signed-off-by: Sergey Myssak <[email protected]> Co-authored-by: Andrey Myssak <[email protected]>
AMoo-Miki · Jul 2, 2023 · 7a94e93 · 7a94e93
1 parent adccbf1
commit 7a94e93
Show file tree

Hide file tree

Showing 9 changed files with 286 additions and 51 deletions.
diff --git a/src/components/loading/loading_elastic.test.tsx b/src/components/loading/loading_elastic.test.tsx
@@ -6,8 +6,7 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
 import { requiredProps } from '../../test';
-import { getDeprecatedMessage } from '../../utils';
-import { OuiLoadingElastic, SIZES, WARNING } from './loading_elastic';
+import { OuiLoadingElastic, SIZES } from './loading_elastic';
 
 describe('OuiLoadingElastic', () => {
   test('is rendered', () => {
@@ -28,10 +27,14 @@ describe('OuiLoadingElastic', () => {
     });
   });
 
-  it('should console warning about a deprecated component', () => {
+  it('should console deprecation warning', () => {
     console.warn = jest.fn();
+
     mount(<OuiLoadingElastic {...requiredProps} />);
 
-    expect(console.warn).toHaveBeenCalledWith(getDeprecatedMessage(WARNING));
+    expect(console.warn).toHaveBeenCalledTimes(1);
+    expect(console.warn).toHaveBeenCalledWith(
+      '[DEPRECATED] OuiLoadingElastic is deprecated in favor of OuiLoadingDashboards and will be removed in v2.0.0.'
+    );
   });
 });
diff --git a/src/components/loading/loading_elastic.tsx b/src/components/loading/loading_elastic.tsx
@@ -32,7 +32,7 @@ import React, { HTMLAttributes, FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { CommonProps, keysOf } from '../common';
 import { OuiIcon } from '../icon';
-import { deprecated } from '../../utils';
+import { deprecatedComponentWarning } from '../../utils';
 
 const sizeToClassNameMap = {
   m: 'ouiLoadingElastic--medium',
@@ -43,9 +43,6 @@ const sizeToClassNameMap = {
 
 export const SIZES = keysOf(sizeToClassNameMap);
 
-export const WARNING =
-  'OuiLoadingElastic is deprecated in favor of OuiLoadingDashboards and will be removed in v2.0.0.';
-
 export interface OuiLoadingElasticProps {
   size?: keyof typeof sizeToClassNameMap;
 }
@@ -66,9 +63,12 @@ const OuiLoadingElasticComponent: FunctionComponent<
   );
 };
 
+OuiLoadingElasticComponent.displayName = 'OuiLoadingElastic';
+
 /**
  * @deprecated OuiLoadingElastic is deprecated in favor of OuiLoadingDashboards and will be removed in v2.0.0.
  */
-export const OuiLoadingElastic = deprecated(WARNING)(
-  OuiLoadingElasticComponent
-);
+export const OuiLoadingElastic = deprecatedComponentWarning({
+  newComponentName: 'OuiLoadingDashboards',
+  version: '2.0.0',
+})(OuiLoadingElasticComponent);
diff --git a/src/components/loading/loading_kibana.test.tsx b/src/components/loading/loading_kibana.test.tsx
@@ -31,8 +31,7 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
 import { requiredProps } from '../../test';
-import { getDeprecatedMessage } from '../../utils';
-import { OuiLoadingKibana, SIZES, WARNING } from './loading_kibana';
+import { OuiLoadingKibana, SIZES } from './loading_kibana';
 
 describe('OuiLoadingKibana', () => {
   test('is rendered', () => {
@@ -53,10 +52,14 @@ describe('OuiLoadingKibana', () => {
     });
   });
 
-  it('should console warning about a deprecated component', () => {
+  it('should console deprecation warning', () => {
     console.warn = jest.fn();
+
     mount(<OuiLoadingKibana {...requiredProps} />);
 
-    expect(console.warn).toHaveBeenCalledWith(getDeprecatedMessage(WARNING));
+    expect(console.warn).toHaveBeenCalledTimes(1);
+    expect(console.warn).toHaveBeenCalledWith(
+      '[DEPRECATED] OuiLoadingKibana is deprecated in favor of OuiLoadingLogo and will be removed in v2.0.0.'
+    );
   });
 });
diff --git a/src/components/loading/loading_kibana.tsx b/src/components/loading/loading_kibana.tsx
@@ -32,7 +32,7 @@ import React, { HTMLAttributes, FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { CommonProps, keysOf } from '../common';
 import { OuiIcon } from '../icon';
-import { deprecated } from '../../utils';
+import { deprecatedComponentWarning } from '../../utils';
 
 const sizeToClassNameMap = {
   m: 'ouiLoadingKibana--medium',
@@ -42,9 +42,6 @@ const sizeToClassNameMap = {
 
 export const SIZES = keysOf(sizeToClassNameMap);
 
-export const WARNING =
-  'OuiLoadingKibana is deprecated in favor of OuiLoadingLogo and will be removed in v2.0.0.';
-
 export type OuiLoadingKibanaProps = CommonProps &
   HTMLAttributes<HTMLDivElement> & {
     size?: keyof typeof sizeToClassNameMap;
@@ -70,7 +67,12 @@ const OuiLoadingKibanaComponent: FunctionComponent<OuiLoadingKibanaProps> = ({
   );
 };
 
+OuiLoadingKibanaComponent.displayName = 'OuiLoadingKibana';
+
 /**
  * @deprecated OuiLoadingKibana is deprecated in favor of OuiLoadingLogo and will be removed in v2.0.0.
  */
-export const OuiLoadingKibana = deprecated(WARNING)(OuiLoadingKibanaComponent);
+export const OuiLoadingKibana = deprecatedComponentWarning({
+  newComponentName: 'OuiLoadingLogo',
+  version: '2.0.0',
+})(OuiLoadingKibanaComponent);
diff --git a/src/components/page/page_header/page_header.test.tsx b/src/components/page/page_header/page_header.test.tsx
@@ -29,8 +29,8 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../../test/required_props';
+import { mount, render } from 'enzyme';
+import { requiredProps } from '../../../test';
 
 import { OuiPageHeader, OuiPageHeaderProps } from './page_header';
 import { ALIGN_ITEMS } from './page_header_content';
@@ -124,4 +124,48 @@ describe('OuiPageHeader', () => {
       });
     });
   });
+
+  describe('deprecation', () => {
+    it('should console 1 deprecation warning without repetition', () => {
+      console.warn = jest.fn();
+
+      const component = mount(<OuiPageHeader iconType="dashboardApp" />);
+      component.setProps({ iconType: 'database' });
+
+      expect(console.warn).toHaveBeenCalledTimes(1);
+      expect(console.warn).toHaveBeenCalledWith(
+        '[DEPRECATED] The `iconType` prop is deprecated and will be removed in v2.0.0.'
+      );
+    });
+
+    it('should console 2 deprecation warning without repetition', () => {
+      console.warn = jest.fn();
+
+      const component = mount(
+        <OuiPageHeader iconType="dashboardApp" iconProps={{ color: 'red' }} />
+      );
+      component.setProps({
+        iconType: 'database',
+        iconProps: { color: 'blue' },
+      });
+
+      const results = [
+        '[DEPRECATED] The `iconType` prop is deprecated and will be removed in v2.0.0.',
+        '[DEPRECATED] The `iconProps` prop is deprecated and will be removed in v2.0.0.',
+      ];
+
+      expect(console.warn).toHaveBeenCalledTimes(2);
+      results.forEach((item) =>
+        expect(console.warn).toHaveBeenCalledWith(item)
+      );
+    });
+
+    it('should not console deprecation warning', () => {
+      console.warn = jest.fn();
+
+      mount(<OuiPageHeader />);
+
+      expect(console.warn).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/src/components/page/page_header/page_header.tsx b/src/components/page/page_header/page_header.tsx
@@ -28,7 +28,7 @@
  * under the License.
  */
 
-import React, { FunctionComponent, HTMLAttributes, useEffect } from 'react';
+import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps, keysOf } from '../../common';
 import {
@@ -39,6 +39,7 @@ import {
   _OuiPageRestrictWidth,
   setPropsForRestrictedPageWidth,
 } from '../_restrict_width';
+import { useDeprecatedPropWarning } from '../../../utils';
 
 const paddingSizeToClassNameMap = {
   none: null,
@@ -92,13 +93,10 @@ export const OuiPageHeader: FunctionComponent<OuiPageHeaderProps> = ({
     style
   );
 
-  useEffect(() => {
-    if (iconType || iconProps) {
-      console.warn(
-        'WARNING: The `iconType` and `iconProps` properties in `OuiPageHeader` are deprecated and will be removed in the future. Please update your code accordingly.'
-      );
-    }
-  }, [iconType, iconProps]);
+  useDeprecatedPropWarning({
+    props: { iconType, iconProps },
+    version: '2.0.0',
+  });
 
   const classes = classNames(
     'ouiPageHeader',

diff --git a/src/utils/deprecated/__snapshots__/deprecated.test.tsx.snap b/src/utils/deprecated/__snapshots__/deprecated.test.tsx.snap
@@ -1,3 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`deprecated should render component 1`] = `<div />`;
+exports[`deprecatedComponentWarning should render wrapped component 1`] = `
+<div
+  id="example-component"
+/>
+`;