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

ThreatsDataViews: Improve responsiveness #40670

Open
wants to merge 6 commits into
base: add/protect/core
Choose a base branch
from
Open

ThreatsDataViews: Improve responsiveness #40670

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
493b942
Init project branch
nateweller Nov 14, 2024
c1e9436
Improve component responsiveness
dkmyta Dec 18, 2024
71e3005
Init project branch
nateweller Nov 14, 2024
2e15fd9
Fix merge conflict
nateweller Dec 31, 2024
2f5e469
Simplify, and only default to list view in mobile
dkmyta Jan 2, 2025
0fad602
Fix spacing
dkmyta Jan 2, 2025
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
69 changes: 44 additions & 25 deletions projects/js-packages/components/components/threats-data-views/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { __ } from '@wordpress/i18n';
import { Icon } from '@wordpress/icons';
import { useCallback, useMemo, useState } from 'react';
import Badge from '../badge';
import useBreakpointMatch from '../layout/use-breakpoint-match';
import ThreatFixerButton from '../threat-fixer-button';
import ThreatSeverityBadge from '../threat-severity-badge';
import {
Expand Down Expand Up @@ -79,16 +80,7 @@ export default function ThreatsDataViews( {
onIgnoreThreats?: ActionButton< Threat >[ 'callback' ];
onUnignoreThreats?: ActionButton< Threat >[ 'callback' ];
} ): JSX.Element {
const baseView = {
sort: {
field: 'severity',
direction: 'desc' as SortDirection,
},
search: '',
filters: filters || [],
page: 1,
perPage: 20,
};
const [ isSm ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );

/**
* DataView default layouts.
Expand All @@ -97,15 +89,19 @@ export default function ThreatsDataViews( {
*
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#defaultlayouts-record-string-view
*/
const defaultLayouts: SupportedLayouts = {
table: {
...baseView,
fields: [ THREAT_FIELD_SEVERITY, THREAT_FIELD_TYPE, THREAT_FIELD_AUTO_FIX ],
titleField: THREAT_FIELD_TITLE,
descriptionField: THREAT_FIELD_DESCRIPTION,
showMedia: false,
},
list: {
const defaultLayouts: SupportedLayouts = useMemo( () => {
const baseView = {
sort: {
field: 'severity',
direction: 'desc' as SortDirection,
},
search: '',
filters: filters || [],
page: 1,
perPage: 20,
};

const listLayout = {
...baseView,
fields: [
THREAT_FIELD_SEVERITY,
Expand All @@ -116,18 +112,41 @@ export default function ThreatsDataViews( {
titleField: THREAT_FIELD_TITLE,
mediaField: THREAT_FIELD_ICON,
showMedia: true,
},
};
};

const tableLayout = {
...baseView,
fields: [ THREAT_FIELD_SEVERITY, THREAT_FIELD_TYPE, THREAT_FIELD_AUTO_FIX ],
titleField: THREAT_FIELD_TITLE,
descriptionField: THREAT_FIELD_DESCRIPTION,
showMedia: false,
};

return { table: tableLayout, list: listLayout };
}, [ filters ] );

const tableView: View = useMemo(
() => ( {
type: 'table',
...defaultLayouts.table,
} ),
[ defaultLayouts.table ]
);

const listView: View = useMemo(
() => ( {
type: 'list',
...defaultLayouts.list,
} ),
[ defaultLayouts.list ]
);

/**
* DataView view object - configures how the dataset is visible to the user.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#view-object
*/
const [ view, setView ] = useState< View >( {
type: 'table',
...defaultLayouts.table,
} );
const [ view, setView ] = useState< View >( isSm ? listView : tableView );

/**
* Compute values from the provided threats data.
Expand Down
1 change: 1 addition & 0 deletions ...packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ export default function ThreatsStatusToggleGroupControl( {
*/
const isStatusFilterSelected = useMemo(
() => ( threatStatuses: ThreatStatus[] ) =>
Array.isArray( view.filters ) &&
view.filters.some(
filter =>
filter.field === 'status' &&
Expand Down
5 changes: 0 additions & 5 deletions projects/plugins/protect/src/js/routes/home/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,6 @@
padding-left: 0;
padding-right: 0;
overflow: hidden;

> * {
margin-left: calc( var( --spacing-base ) * -3 ); // -24px
margin-right: calc( var( --spacing-base ) * -3 ); // -24px
}
}

.view-scan-report {
Expand Down
17 changes: 12 additions & 5 deletions projects/plugins/protect/src/js/routes/scan/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
.scan-results-container {
:global {
@media ( max-width: 599px ) {
div.dataviews-wrapper .dataviews__view-actions {
flex-wrap: wrap;
justify-content: center;
gap: calc( var( --spacing-base ) * 1.5 ); // 12px;
}
}
}
}

.hero-main {
max-width: 512px;
}
Expand All @@ -17,11 +29,6 @@
padding-left: 0;
padding-right: 0;
overflow: hidden;

> * {
margin-left: calc( var( --spacing-base ) * -3 ); // -24px
margin-right: calc( var( --spacing-base ) * -3 ); // -24px
}
}

.progress-animation {
Expand Down
Loading