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.

Sign up for GitHub

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

Protect: Add upgrade prompt while WAF enabled with no rules access #27584

Merged
merged 4 commits into from
Nov 24, 2022
Merged

Protect: Add upgrade prompt while WAF enabled with no rules access #27584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
63b1613
Add upgrade prompt when WAF enabled but no rules access
dkmyta Nov 24, 2022
6df6a87
Create separate internal component for upgrade prompt
dkmyta Nov 24, 2022
1a6176e
Merge branch 'add/protect-waf-mvp' into add/protect-waf-on-upgrade-pr…
dkmyta Nov 24, 2022
1c318a1
Add story for on with no plan
dkmyta Nov 24, 2022
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
71 changes: 37 additions & 34 deletions projects/plugins/protect/src/js/components/firewall-header/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import useWafData from '../../hooks/use-waf-data';
import { JETPACK_SCAN } from '../admin-page';
import styles from './styles.module.scss';

const FirewallHeader = ( { status, hasRequiredPlan } ) => {
const UpgradePrompt = () => {
const { adminUrl } = window.jetpackProtectInitialState || {};
const firewallUrl = adminUrl + '#/firewall';

Expand All @@ -33,6 +33,40 @@ const FirewallHeader = ( { status, hasRequiredPlan } ) => {
setShowPopover( false );
}, [] );

return (
<>
<div className={ styles[ 'manual-rules-notice' ] }>
<Text weight={ 600 }>{ __( 'Only manual rules will be applied', 'jetpack-protect' ) }</Text>
<div
className={ styles[ 'icon-popover' ] }
onMouseLeave={ handleOut }
onMouseEnter={ handleEnter }
onClick={ handleEnter }
onFocus={ handleEnter }
onBlur={ handleOut }
role="presentation"
>
<Icon icon={ help } />
{ showPopover && (
<Popover noArrow={ false } offset={ 5 }>
<Text className={ styles[ 'popover-text' ] } variant={ 'body-small' }>
{ __(
'The free version of the firewall only allows for use of manual rules.',
'jetpack-protect'
) }
</Text>
</Popover>
) }
</div>
</div>
<Button onClick={ getScan }>
{ __( 'Upgrade to enable automatic rules', 'jetpack-protect' ) }
</Button>
</>
);
};

const FirewallHeader = ( { status, hasRequiredPlan } ) => {
return (
<AdminSectionHero>
<Container
Expand All @@ -49,6 +83,7 @@ const FirewallHeader = ( { status, hasRequiredPlan } ) => {
<H3 className={ styles[ 'firewall-heading' ] } mb={ 1 } mt={ 2 }>
{ __( 'Automatic firewall is on', 'jetpack-protect' ) }
</H3>
{ ! hasRequiredPlan && <UpgradePrompt /> }
</>
) }
{ 'off' === status && (
Expand All @@ -59,39 +94,7 @@ const FirewallHeader = ( { status, hasRequiredPlan } ) => {
<H3 className={ styles[ 'firewall-heading' ] } mb={ 2 } mt={ 2 }>
{ __( 'Automatic firewall is off', 'jetpack-protect' ) }
</H3>
{ ! hasRequiredPlan && (
<>
<div className={ styles[ 'manual-rules-notice' ] }>
<Text weight={ 600 }>
{ __( 'Only manual rules will be applied', 'jetpack-protect' ) }
</Text>
<div
className={ styles[ 'icon-popover' ] }
onMouseLeave={ handleOut }
onMouseEnter={ handleEnter }
onClick={ handleEnter }
onFocus={ handleEnter }
onBlur={ handleOut }
role="presentation"
>
<Icon icon={ help } />
{ showPopover && (
<Popover noArrow={ false } offset={ 5 }>
<Text className={ styles[ 'popover-text' ] } variant={ 'body-small' }>
{ __(
'The free version of the firewall only allows for use of manual rules.',
'jetpack-protect'
) }
</Text>
</Popover>
) }
</div>
</div>
<Button onClick={ getScan }>
{ __( 'Upgrade to enable automatic rules', 'jetpack-protect' ) }
</Button>
</>
) }
{ ! hasRequiredPlan && <UpgradePrompt /> }
</>
) }
{ 'loading' === status && (
Expand Down
4 changes: 4 additions & 0 deletions projects/plugins/protect/src/js/components/firewall-header/stories/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ export default {
};

export const FirewallOn = () => {
return <FirewallHeader status={ 'on' } hasRequiredPlan={ false } />;
};

export const FirewallOnPaid = () => {
return <FirewallHeader status={ 'on' } hasRequiredPlan={ true } />;
};

Expand Down