From 7da9b3ee7d849c364a598587b0a911e74eeb48c4 Mon Sep 17 00:00:00 2001
From: dkmyta <43220201+dkmyta@users.noreply.github.com>
Date: Mon, 21 Oct 2024 22:04:33 -0700
Subject: [PATCH] Update ThreatDataView list view fixer status (#39854)
---
.../threats-data-view/fixer-status.tsx | 30 +++++++---
.../threats-data-view/styles.module.scss | 57 ++++++++++++-------
2 files changed, 56 insertions(+), 31 deletions(-)
diff --git a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
index f44a17a5c853d..89c68bc56b4cf 100644
--- a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
+++ b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx
@@ -75,7 +75,11 @@ export default function FixerStatusIcon( {
}
if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
- return ;
+ return (
+
+
+
+ );
}
return ;
@@ -87,20 +91,28 @@ export default function FixerStatusIcon( {
* @param {boolean} props.fixer - The fixer status.
* @return {string} The component.
*/
-function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): string {
+function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
if ( fixer && fixerStatusIsStale( fixer ) ) {
- return __( 'Fixer is taking longer than expected', 'jetpack' );
+ return (
+
+ { __( 'Fixer is taking longer than expected', 'jetpack' ) }
+
+ );
}
if ( fixer && 'error' in fixer && fixer.error ) {
- return __( 'Error auto-fixing threat', 'jetpack' );
+ return (
+
+ { __( 'An error occurred auto-fixing this threat', 'jetpack' ) }
+
+ );
}
if ( fixer && 'status' in fixer && fixer.status === 'in_progress' ) {
- return __( 'Auto-fix in progress', 'jetpack' );
+ return { __( 'Auto-fixing', 'jetpack' ) };
}
- return __( 'Auto-fixable', 'jetpack' );
+ return { __( 'Auto-fixable', 'jetpack' ) };
}
/**
@@ -111,15 +123,15 @@ function FixerStatusText( { fixer }: { fixer?: ThreatFixStatus } ): string {
*/
export function FixerStatusBadge( { fixer }: { fixer?: ThreatFixStatus } ): JSX.Element {
return (
-
-
+
+
);
}
/**
- * FixerStatusText component.
+ * DataViewFixerStatus component.
* @param {object} props - Component props.
* @param {boolean} props.fixer - The fixer status.
* @param {object} props.view - The view.
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
index 158a01817cafd..5cf22e93b8a4e 100644
--- 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,9 +5,9 @@
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;
@@ -51,26 +51,21 @@
}
}
-.fixer-status-badge {
- border-radius: 32px;
- flex-shrink: 0;
- font-size: 12px;
- font-style: normal;
- font-weight: 600;
- line-height: 16px;
- padding: calc( var( --spacing-base ) / 2 ); // 4px
- padding-right: calc( var( --spacing-base ) * 1.75 ); // 14px
- position: relative;
- text-align: center;
- background: var( --jp-green-0 );
- color: var( --jp-green-50 );
+.fixer-status {
display: flex;
align-items: center;
-
- > svg {
- height: 20px;
- margin-top: -2px;
- margin-bottom: -2px;
+ line-height: 0;
+
+ .icon-spinner {
+ margin-left: 1px;
+ }
+
+ .icon-info {
+ margin-left: -3px;
+ }
+
+ .icon-check {
+ margin-left: -6px;
}
}
@@ -103,7 +98,25 @@
font-size: 12px;
}
+.icon-spinner {
+ svg {
+ margin: 0;
+ }
+}
+
+.spinner-spacer {
+ margin-left: 8px;
+}
+
+.info-spacer {
+ margin-left: 4px;
+}
+
+.check-spacer {
+ margin-left: -2px;
+}
+
.threat__fixer {
- min-width: 48px;
+ min-width: 54px;
text-align: center;
}