Update Jetpack sec settings allow list card

Automattic · Aug 14, 2024 · 0f63361 · 0f63361
1 parent 85a9b4e
commit 0f63361
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 74 deletions.
diff --git a/projects/plugins/jetpack/_inc/client/security/allowList.jsx b/projects/plugins/jetpack/_inc/client/security/allowList.jsx
@@ -161,8 +161,9 @@ const AllowList = class extends Component {
 									</span>
 								}
 							/>
-							<div className="waf__settings__ips">
+							{ ( this.state.ipAllowListEnabled || !! this.state.ipAllowList ) && (
 								<Textarea
+									className="waf__settings__ips"
 									disabled={
 										baseInputDisabledCase ||
 										this.props.isUpdatingWafSettings ||
@@ -173,7 +174,9 @@ const AllowList = class extends Component {
 									value={ this.state.ipAllowList }
 									onChange={ this.handleIpAllowListChange }
 								/>
-								<div className="allow-list-button-container">
+							) }
+							{ this.state.ipAllowListEnabled && (
+								<div className="waf__settings__ips__button-container">
 									{ this.props.currentIp && (
 										<div className="current-ip">
 											<div className="jp-form-label-wide">
@@ -216,7 +219,7 @@ const AllowList = class extends Component {
 										{ __( 'Save allow list', 'jetpack' ) }
 									</Button>
 								</div>
-							</div>
+							) }
 						</div>
 					</FormFieldset>
 				</SettingsGroup>

diff --git a/projects/plugins/jetpack/_inc/client/security/style.scss b/projects/plugins/jetpack/_inc/client/security/style.scss
@@ -1,83 +1,89 @@
 .brute-force__current-ip {
-    margin-bottom: 16px;
+	margin-bottom: 16px;
 }
 
 .waf__header {
-    align-items: center;
-    display: flex;
+	align-items: center;
+	display: flex;
 
-    .waf__standalone__mode {
-        margin-left: auto;
-    }
+	.waf__standalone__mode {
+		margin-left: auto;
+	}
 
 }
 
 .waf__settings {
-    margin-top: 24px;
-    margin-left: 64px;
+	margin-top: 24px;
+	margin-left: 64px;
 	margin-bottom: 24px;
 
-    &__toggle-setting {
-        flex-wrap: wrap;
-        display: flex;
-        margin-bottom: 16px;
-
-        &__label {
-            display: flex;
-            align-items: center;
-        }
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    .form-toggle__label {
-        margin-top: 0;
-        margin-bottom: 0;
-    }
-
-    &__ips {
-        width: 100%;
-        margin-left: 64px;
-    }
-
-    &__ips__save-button {
-        margin-top: 6px;
-        float: right;
-    }
-
-    &__share-data-popover {
-        margin-left: 8px;
-    }
-
-    &__upgrade-popover {
-        vertical-align: middle;
-        margin-left: 8px;
-    }
+	&__toggle-setting {
+		flex-wrap: wrap;
+		display: flex;
+		margin-bottom: 16px;
+
+		&__label {
+			display: flex;
+			align-items: center;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.form-toggle__label {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+
+	&__ips {
+		margin-left: 64px;
+
+		&__button-container {
+			margin-left: 64px;
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-start;
+		}
+
+		&__save-button {
+			margin-top: 0.5rem;
+		}
+	}
+
+	&__share-data-popover {
+		margin-left: 8px;
+	}
+
+	&__upgrade-popover {
+		vertical-align: middle;
+		margin-left: 8px;
+	}
 
 }
 
 .waf__enhanced-protection {
-    &, &.dops-card.is-expanded {
-        margin-bottom: 0;
-    }
-
-    &.dops-foldable-card.is-expanded .dops-foldable-card__content {
-        border-top: none;
-        padding-top: 0;
-    }
-
-    ul {
-        list-style: disc;
-        margin-top: 0;
-        margin-bottom: 0;
-        padding-left: 32px;
-    }
-
-    code {
-        white-space: nowrap;
-    }
+	&, &.dops-card.is-expanded {
+		margin-bottom: 0;
+	}
+
+	&.dops-foldable-card.is-expanded .dops-foldable-card__content {
+		border-top: none;
+		padding-top: 0;
+	}
+
+	ul {
+		list-style: disc;
+		margin-top: 0;
+		margin-bottom: 0;
+		padding-left: 32px;
+	}
+
+	code {
+		white-space: nowrap;
+	}
 }
 
 
@@ -179,12 +185,6 @@
 	}
 }
 
-.allow-list-button-container {
-	display: flex;
-	justify-content: space-between;
-	align-items: flex-start;
-}
-
 .jp-form-settings-group p {
 	margin-bottom: 0.5rem;
 }