Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CCI] Add useDeprecatedPropWarning and align with deprecated hoc #762

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions src/components/loading/loading_elastic.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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.'
);
});
});
14 changes: 7 additions & 7 deletions src/components/loading/loading_elastic.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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;
}
Expand All @@ -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);
11 changes: 7 additions & 4 deletions src/components/loading/loading_kibana.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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.'
);
});
});
12 changes: 7 additions & 5 deletions src/components/loading/loading_kibana.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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;
Expand All @@ -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);
48 changes: 46 additions & 2 deletions src/components/page/page_header/page_header.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 />);
BSFishy marked this conversation as resolved.
Show resolved Hide resolved

expect(console.warn).not.toHaveBeenCalled();
});
});
});
14 changes: 6 additions & 8 deletions src/components/page/page_header/page_header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -39,6 +39,7 @@ import {
_OuiPageRestrictWidth,
setPropsForRestrictedPageWidth,
} from '../_restrict_width';
import { useDeprecatedPropWarning } from '../../../utils';

const paddingSizeToClassNameMap = {
none: null,
Expand Down Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
@@ -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"
/>
`;
Loading