Skip to content

Commit

Permalink
FirewallSubheading improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@dkmyta
dkmyta committed Oct 8, 2024
1 parent 385af92 commit 6f59713
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 94 deletions.
168 changes: 79 additions & 89 deletions projects/plugins/protect/src/js/routes/firewall/firewall-subheading.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,109 +1,99 @@
import { Text, Button } from '@automattic/jetpack-components';
import { Text } from '@automattic/jetpack-components';
import { __ } from '@wordpress/i18n';
import { help } from '@wordpress/icons';
import { useCallback } from 'react';
import { useMemo } from 'react';
import IconTooltip from '../../components/icon-tooltip';
import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
import usePlan from '../../hooks/use-plan';
import useWafData from '../../hooks/use-waf-data';
import FirewallUpgradePrompt from './firewall-upgrade-prompt';
import styles from './styles.module.scss';

const UpgradePrompt = () => {
const { recordEvent } = useAnalyticsTracks();
const { adminUrl } = window.jetpackProtectInitialState || {};
const firewallUrl = adminUrl + '#/firewall';
const { upgradePlan } = usePlan( { redirectUrl: firewallUrl } );

const {
config: { automaticRulesAvailable },
} = useWafData();

const getScan = useCallback( () => {
recordEvent( 'jetpack_protect_waf_header_get_scan_link_click' );
upgradePlan();
}, [ recordEvent, upgradePlan ] );

return (
<Button className={ styles[ 'upgrade-prompt-button' ] } onClick={ getScan }>
{ ! automaticRulesAvailable
? __( 'Upgrade to enable automatic firewall protection', 'jetpack-protect' )
: __(
'Upgrade to update automatic security rules',
'jetpack-protect',
/* dummy arg to avoid bad minification */ 0
) }
</Button>
);
};

const FirewallSubheadingContent = ( { className, text = '', popover = false } ) => {
return (
<>
<Text className={ styles[ className ] }>{ text }</Text>
{ popover && (
<IconTooltip
icon={ help }
text={ __(
'The free version of the firewall does not receive updates to automatic security rules.',
'jetpack-protect'
) }
/>
) }
</>
);
};

const FirewallSubheading = ( {
jetpackWafIpBlockListEnabled,
jetpackWafIpAllowListEnabled,
hasPlan,
automaticRulesAvailable,
jetpackWafAutomaticRules,
bruteForceProtectionIsEnabled,
hasPlan,
automaticRulesAvailable,
wafSupported,
} ) => {
const allowOrBlockListEnabled = jetpackWafIpBlockListEnabled || jetpackWafIpAllowListEnabled;
const allRules = wafSupported && jetpackWafAutomaticRules && allowOrBlockListEnabled;
const automaticRules = wafSupported && jetpackWafAutomaticRules && ! allowOrBlockListEnabled;
const manualRules = wafSupported && ! jetpackWafAutomaticRules && allowOrBlockListEnabled;
const noRules = wafSupported && ! jetpackWafAutomaticRules && ! allowOrBlockListEnabled;
const allowOrBlockListEnabled = useMemo(
() => jetpackWafIpBlockListEnabled || jetpackWafIpAllowListEnabled,
[ jetpackWafIpBlockListEnabled, jetpackWafIpAllowListEnabled ]
);

const allRules = useMemo(
() => wafSupported && jetpackWafAutomaticRules && allowOrBlockListEnabled,
[ wafSupported, jetpackWafAutomaticRules, allowOrBlockListEnabled ]
);

const automaticRules = useMemo(
() => wafSupported && jetpackWafAutomaticRules && ! allowOrBlockListEnabled,
[ wafSupported, jetpackWafAutomaticRules, allowOrBlockListEnabled ]
);

const manualRules = useMemo(
() => wafSupported && ! jetpackWafAutomaticRules && allowOrBlockListEnabled,
[ wafSupported, jetpackWafAutomaticRules, allowOrBlockListEnabled ]
);

const noRules = useMemo(
() => wafSupported && ! jetpackWafAutomaticRules && ! allowOrBlockListEnabled,
[ wafSupported, jetpackWafAutomaticRules, allowOrBlockListEnabled ]
);

const content = useMemo( () => {
const textSegments = [];

if ( wafSupported && bruteForceProtectionIsEnabled ) {
textSegments.push( __( 'Brute force protection is active.', 'jetpack-protect' ) );
}

if ( noRules ) {
textSegments.push( __( 'There are no firewall rules applied.', 'jetpack-protect' ) );
}

if ( automaticRules ) {
textSegments.push( __( 'Automatic firewall rules apply.', 'jetpack-protect' ) );
}

if ( manualRules ) {
textSegments.push( __( 'Only manual IP list rules apply.', 'jetpack-protect' ) );
}

if ( allRules ) {
textSegments.push( __( 'All firewall rules apply.', 'jetpack-protect' ) );
}

return textSegments.join( ' ' );
}, [
wafSupported,
bruteForceProtectionIsEnabled,
noRules,
automaticRules,
manualRules,
allRules,
] );

const tooltipText = useMemo( () => {
return ! automaticRulesAvailable
? __(
'The free version of the firewall only allows for use of manual rules.',
'jetpack-protect'
)
: __(
'The free version of the firewall does not receive updates to automatic security rules.',
'jetpack-protect'
);
}, [ automaticRulesAvailable ] );

return (
<>
<div className={ styles[ 'firewall-subheading' ] }>
{ wafSupported && bruteForceProtectionIsEnabled && (
<FirewallSubheadingContent
text={ __( 'Brute force protection is active.', 'jetpack-protect' ) }
/>
) }
{ noRules && (
<FirewallSubheadingContent
text={ __( 'There are no firewall rules applied.', 'jetpack-protect' ) }
/>
) }
{ automaticRules && (
<FirewallSubheadingContent
text={ __( 'Automatic firewall protection is enabled.', 'jetpack-protect' ) }
popover={ ! hasPlan }
/>
) }
{ manualRules && (
<FirewallSubheadingContent
text={ __( 'Only manual IP list rules apply.', 'jetpack-protect' ) }
popover={ ! hasPlan && ! automaticRulesAvailable }
children={ __(
'The free version of the firewall only allows for use of manual rules.',
'jetpack-protect'
) }
/>
) }
{ allRules && (
<FirewallSubheadingContent
text={ __( 'All firewall rules apply.', 'jetpack-protect' ) }
popover={ ! hasPlan }
/>
<Text>{ content }</Text>
{ ! hasPlan && ( automaticRules || manualRules || allRules ) && (
<IconTooltip icon={ help } text={ tooltipText } />
) }
</div>
{ ! hasPlan && wafSupported && <UpgradePrompt /> }
{ ! hasPlan && wafSupported && <FirewallUpgradePrompt /> }
</>
);
};
Expand Down
37 changes: 37 additions & 0 deletions projects/plugins/protect/src/js/routes/firewall/firewall-upgrade-prompt.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { Button } from '@automattic/jetpack-components';
import { __ } from '@wordpress/i18n';
import { useCallback } from 'react';
import useAnalyticsTracks from '../../hooks/use-analytics-tracks';
import usePlan from '../../hooks/use-plan';
import useWafData from '../../hooks/use-waf-data';
import styles from './styles.module.scss';

const FirewallUpgradePrompt = () => {
const { recordEvent } = useAnalyticsTracks();
const { adminUrl } = window.jetpackProtectInitialState || {};
const firewallUrl = adminUrl + '#/firewall';
const { upgradePlan } = usePlan( { redirectUrl: firewallUrl } );

const {
config: { automaticRulesAvailable },
} = useWafData();

const getScan = useCallback( () => {
recordEvent( 'jetpack_protect_waf_header_get_scan_link_click' );
upgradePlan();
}, [ recordEvent, upgradePlan ] );

return (
<Button className={ styles[ 'upgrade-prompt-button' ] } onClick={ getScan }>
{ ! automaticRulesAvailable
? __( 'Upgrade to enable automatic firewall protection', 'jetpack-protect' )
: __(
'Upgrade to update automatic security rules',
'jetpack-protect',
/* dummy arg to avoid bad minification */ 0
) }
</Button>
);
};

export default FirewallUpgradePrompt;
5 changes: 0 additions & 5 deletions projects/plugins/protect/src/js/routes/firewall/styles.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,11 +142,6 @@

.firewall-subheading {
display: flex;
flex-wrap: wrap;

* {
margin-right: calc( var( --spacing-base ) / 2 ); // 4px
}
}

.stat-card-wrapper {
Expand Down

0 comments on commit 6f59713

Please sign in to comment.