Fix and update isPrimary actions

Automattic · Oct 22, 2024 · c2ed715 · c2ed715
1 parent 32b6d61
commit c2ed715
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 10 deletions.
diff --git a/projects/js-packages/components/components/threats-data-view/index.tsx b/projects/js-packages/components/components/threats-data-view/index.tsx
@@ -338,8 +338,13 @@ export default function ThreatsDataView( {
 		if ( dataFields.includes( 'fixable' ) ) {
 			result.push( {
 				id: 'fix',
-				label: __( 'Auto-Fix', 'jetpack' ),
+				label: __( 'Auto-fix', 'jetpack' ),
 				isPrimary: true,
+				icon: (
+					<span className={ `${ styles.threat__action } ${ styles[ 'auto-fix' ] }` }>
+						{ __( 'Auto-fix', 'jetpack' ) }
+					</span>
+				),
 				callback: onFixThreat,
 				isEligible( item ) {
 					if ( ! onFixThreat ) {
@@ -350,7 +355,6 @@ export default function ThreatsDataView( {
 					}
 					return !! item.fixable;
 				},
-				icon: 'check',
 			} );
 		}
 
@@ -359,7 +363,8 @@ export default function ThreatsDataView( {
 				id: 'ignore',
 				label: __( 'Ignore', 'jetpack' ),
 				isPrimary: true,
-				isDestructive: true,
+				icon: <span className={ styles.threat__action }>{ __( 'Ignore', 'jetpack' ) }</span>,
+				// isDestructive: true,
 				callback: onIgnoreThreat,
 				isEligible( item ) {
 					if ( ! onIgnoreThreat ) {
@@ -370,7 +375,6 @@ export default function ThreatsDataView( {
 					}
 					return item.status === 'current';
 				},
-				icon: 'unseen',
 			} );
 		}
 
@@ -379,7 +383,8 @@ export default function ThreatsDataView( {
 				id: 'un-ignore',
 				label: __( 'Unignore', 'jetpack' ),
 				isPrimary: true,
-				isDestructive: true,
+				icon: <span className={ styles.threat__action }>{ __( 'Un-ignore', 'jetpack' ) }</span>,
+				// isDestructive: true,
 				callback: onUnignoreThreat,
 				isEligible( item ) {
 					if ( ! onUnignoreThreat ) {
@@ -390,7 +395,6 @@ export default function ThreatsDataView( {
 					}
 					return item.status === 'ignored';
 				},
-				icon: 'seen',
 			} );
 		}
 

diff --git a/projects/js-packages/components/components/threats-data-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss
@@ -5,17 +5,41 @@
 		min-height: 0;
 	}
 
-    .dataviews-view-table td, .dataviews-view-table th {
-        white-space: initial;
-    }
+	.dataviews-view-table td,
+	.dataviews-view-table th {
+		white-space: initial;
+	}
 
 	.dataviews-view-table td .components-flex {
-		gap: 4px;
+		gap: 8px;
 	}
 
 	.dataviews-view-list .dataviews-views-list__fields {
 		align-items: center;
 	}
+
+	.dataviews-view-table th.dataviews-view-table__actions-column {
+		text-align: left;
+	}
+
+	.dataviews-view-table tr .dataviews-item-actions {
+		.components-button:not(.dataviews-all-actions-button) {
+			opacity: 1;
+		}
+
+		.dataviews-all-actions-button {
+			display: none;
+		}
+	}
+
+	.dataviews-view-table__actions-column .dataviews-item-actions .components-button.is-compact.has-icon {
+		width: fit-content;
+
+		&:focus,
+		&:focus-visible {
+			box-shadow: none;
+		}
+	}
 }
 
 .media {
@@ -107,3 +131,25 @@
 	min-width: 48px;
 	text-align: center;
 }
+
+.threat__action {
+	text-wrap: nowrap;
+	padding: 8px;
+
+	&:hover {
+		color: var( --jp-highlight );
+	}
+
+	&.auto-fix {
+		background: var( --jp-highlight );
+		color: var( --jp-white );
+		border: 1px solid var( --jp-highlight );
+		border-radius: 3px;
+
+		&:hover {
+			background: var( --jp-white );
+			color: var( --jp-highlight );
+			border: 1px solid var( --jp-highlight );
+		}
+	}
+}