Update Jetpack block list logic

Automattic · Aug 14, 2024 · 906425f · 906425f
1 parent 0f63361
commit 906425f
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 32 deletions.
diff --git a/projects/plugins/jetpack/_inc/client/security/style.scss b/projects/plugins/jetpack/_inc/client/security/style.scss
@@ -38,6 +38,7 @@
 	}
 
 	&__ips {
+		width: 100%;
 		margin-left: 64px;
 
 		&__button-container {
@@ -50,6 +51,7 @@
 
 		&__save-button {
 			margin-top: 0.5rem;
+			float: right;
 		}
 	}
 

diff --git a/projects/plugins/jetpack/_inc/client/security/waf.jsx b/projects/plugins/jetpack/_inc/client/security/waf.jsx
@@ -422,39 +422,43 @@ export const Waf = class extends Component {
 						</span>
 					}
 				/>
-				<div className="waf__settings__ips">
-					<Textarea
-						disabled={
-							baseInputDisabledCase ||
-							this.props.isUpdatingWafSettings ||
-							! this.props.settings?.ipBlockListEnabled
-						}
-						name="ipBlockList"
-						placeholder={ sprintf(
-							/* translators: Placeholder is a list of example IP addresses. */
-							__( 'Example: %s', 'jetpack' ),
-							'\n12.12.12.1\n12.12.12.2'
+				{ ( this.state.ipBlockListEnabled || !! this.state.ipBlockList ) && (
+					<div className="waf__settings__ips">
+						<Textarea
+							disabled={
+								baseInputDisabledCase ||
+								this.props.isUpdatingWafSettings ||
+								! this.props.settings?.ipBlockListEnabled
+							}
+							name="ipBlockList"
+							placeholder={ sprintf(
+								/* translators: Placeholder is a list of example IP addresses. */
+								__( 'Example: %s', 'jetpack' ),
+								'\n12.12.12.1\n12.12.12.2'
+							) }
+							value={ this.state.ipBlockList }
+							onChange={ this.handleIpBlockListChange }
+						/>
+						{ this.state.ipBlockListEnabled && (
+							<Button
+								primary
+								rna
+								compact
+								type="button"
+								className="waf__settings__ips__save-button"
+								disabled={
+									baseInputDisabledCase ||
+									this.state.ipBlockList === this.props.settings?.ipBlockList ||
+									( this.props.isUpdatingWafSettings &&
+										this.state.ipBlockList !== this.props.settings?.ipBlockList )
+								}
+								onClick={ this.onSubmit }
+							>
+								{ __( 'Save block list', 'jetpack' ) }
+							</Button>
 						) }
-						value={ this.state.ipBlockList }
-						onChange={ this.handleIpBlockListChange }
-					/>
-					<Button
-						primary
-						rna
-						compact
-						type="button"
-						className="waf__settings__ips__save-button"
-						disabled={
-							baseInputDisabledCase ||
-							this.state.ipBlockList === this.props.settings?.ipBlockList ||
-							( this.props.isUpdatingWafSettings &&
-								this.state.ipBlockList !== this.props.settings?.ipBlockList )
-						}
-						onClick={ this.onSubmit }
-					>
-						{ __( 'Save block list', 'jetpack' ) }
-					</Button>
-				</div>
+					</div>
+				) }
 			</div>
 		);