Components: Migrate ThreatSeverityBadge from Jetpack Protect (#39758)

projects/js-packages/components/changelog/add-threat-severity-badge

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add ThreatSeverityBadge component

projects/plugins/protect/src/js/components/severity/index.jsx → projects/js-packages/components/components/threat-severity-badge/index.tsx

@@ -12,11 +12,11 @@ const severityClassNames = severity => {
 
 const severityText = severity => {
 	if ( severity >= 5 ) {
-		return _x( 'Critical', 'Severity label for issues rated 5 or higher.', 'jetpack-protect' );
+		return _x( 'Critical', 'Severity label for issues rated 5 or higher.', 'jetpack' );
 	} else if ( severity >= 3 && severity < 5 ) {
-		return _x( 'High', 'Severity label for issues rated between 3 and 5.', 'jetpack-protect' );
+		return _x( 'High', 'Severity label for issues rated between 3 and 5.', 'jetpack' );
 	}
-	return _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack-protect' );
+	return _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack' );
 };
 
 const ThreatSeverityBadge = ( { severity } ) => {

projects/plugins/protect/src/js/components/severity/stories/index.stories.jsx → projects/js-packages/components/components/threat-severity-badge/stories/index.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import ThreatSeverityBadge from '../index.jsx';
+import ThreatSeverityBadge from '../index.js';
 
 export default {
-	title: 'Plugins/Protect/Threat Severity Badge',
+	title: 'JS Packages/Components/Threat Severity Badge',
 	component: ThreatSeverityBadge,
 };
 

projects/js-packages/components/components/threat-severity-badge/test/index.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import ThreatSeverityBadge from '..';
+
+describe( 'ThreatSeverityBadge', () => {
+	it( 'renders the correct severity label', () => {
+		render( <ThreatSeverityBadge severity={ 4 } /> );
+		expect( screen.getByText( 'High' ) ).toBeInTheDocument();
+	} );
+} );

projects/js-packages/components/index.ts

@@ -44,6 +44,7 @@ export { default as CopyToClipboard } from './components/copy-to-clipboard';
 export * from './components/icons';
 export { default as SplitButton } from './components/split-button';
 export { default as ThemeProvider } from './components/theme-provider';
+export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
 export { default as Text, H2, H3, Title } from './components/text';
 export { default as ToggleControl } from './components/toggle-control';
 export { default as numberFormat } from './components/number-format';

projects/plugins/protect/changelog/update-severity-badge-component-import-source

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Use component from package
+
+

projects/plugins/protect/src/js/components/ignore-threat-modal/index.jsx

@@ -1,10 +1,9 @@
-import { Button, getRedirectUrl, Text } from '@automattic/jetpack-components';
+import { Button, getRedirectUrl, Text, ThreatSeverityBadge } from '@automattic/jetpack-components';
 import { createInterpolateElement, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import useIgnoreThreatMutation from '../../data/scan/use-ignore-threat-mutation';
 import useModal from '../../hooks/use-modal';
-import ThreatSeverityBadge from '../severity';
 import UserConnectionGate from '../user-connection-gate';
 import styles from './styles.module.scss';
 

projects/plugins/protect/src/js/components/paid-accordion/index.jsx

@@ -1,4 +1,9 @@
-import { Spinner, Text, useBreakpointMatch } from '@automattic/jetpack-components';
+import {
+	Spinner,
+	Text,
+	ThreatSeverityBadge,
+	useBreakpointMatch,
+} from '@automattic/jetpack-components';
 import { ExternalLink } from '@wordpress/components';
 import { dateI18n } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
@@ -9,7 +14,6 @@ import React, { useState, useCallback, useContext, useMemo } from 'react';
 import { PAID_PLUGIN_SUPPORT_URL } from '../../constants';
 import useFixers from '../../hooks/use-fixers';
 import IconTooltip from '../icon-tooltip';
-import ThreatSeverityBadge from '../severity';
 import styles from './styles.module.scss';
 
 // Extract context provider for clarity and reusability

projects/plugins/protect/src/js/components/threat-fix-header/index.jsx

@@ -1,8 +1,7 @@
-import { Text } from '@automattic/jetpack-components';
+import { Text, ThreatSeverityBadge } from '@automattic/jetpack-components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import React, { useState, useCallback } from 'react';
-import ThreatSeverityBadge from '../severity';
 import styles from './styles.module.scss';
 
 //TODO: Move this to WPCom like we did the other messages?

projects/plugins/protect/src/js/components/unignore-threat-modal/index.jsx

@@ -1,10 +1,9 @@
-import { Button, Text } from '@automattic/jetpack-components';
+import { Button, Text, ThreatSeverityBadge } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { useState } from 'react';
 import useUnIgnoreThreatMutation from '../../data/scan/use-unignore-threat-mutation';
 import useModal from '../../hooks/use-modal';
-import ThreatSeverityBadge from '../severity';
 import UserConnectionGate from '../user-connection-gate';
 import styles from './styles.module.scss';