From 09991b10196df7dd488d2ec0a72e9fb6eb7c75aa Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Thu, 14 Nov 2024 10:42:12 -0700 Subject: [PATCH 01/10] Init project branch From 9aa31c3c20a3ced5d89cea03841707921f10c307 Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Thu, 14 Nov 2024 10:42:12 -0700 Subject: [PATCH 02/10] Init project branch From 31c6f816f772c350fd20e9eee102bd3be554a003 Mon Sep 17 00:00:00 2001 From: dkmyta Date: Wed, 18 Dec 2024 10:40:57 -0800 Subject: [PATCH 03/10] Improve component responsiveness --- .../components/threats-data-views/index.tsx | 78 ++++++++++++------- .../threats-status-toggle-group-control.tsx | 1 + .../src/js/routes/home/styles.module.scss | 7 +- .../src/js/routes/scan/styles.module.scss | 22 ++++++ 4 files changed, 81 insertions(+), 27 deletions(-) diff --git a/projects/js-packages/components/components/threats-data-views/index.tsx b/projects/js-packages/components/components/threats-data-views/index.tsx index 27cbfa23935fe..dafb203a3cb65 100644 --- a/projects/js-packages/components/components/threats-data-views/index.tsx +++ b/projects/js-packages/components/components/threats-data-views/index.tsx @@ -14,8 +14,9 @@ import { import { dateI18n } from '@wordpress/date'; import { __ } from '@wordpress/i18n'; import { Icon } from '@wordpress/icons'; -import { useCallback, useMemo, useState } from 'react'; +import { useCallback, useEffect, 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 { @@ -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. @@ -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, @@ -116,18 +112,48 @@ 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 isSm ? { list: listLayout } : { table: tableLayout, list: listLayout }; + }, [ filters, isSm ] ); + + 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 >( tableView ); + + /** + * Set the initial view based on the screen size. + */ + useEffect( () => { + setView( isSm ? listView : tableView ); + }, [ isSm, listView, tableView ] ); /** * Compute values from the provided threats data. diff --git a/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx b/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx index 3254a1050c1e9..51b91eec11cab 100644 --- a/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx +++ b/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx @@ -95,6 +95,7 @@ export default function ThreatsStatusToggleGroupControl( { */ const isStatusFilterSelected = useMemo( () => ( threatStatuses: ThreatStatus[] ) => + Array.isArray( view.filters ) && view.filters.some( filter => filter.field === 'status' && diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss index 987e865644066..bf57c3f4a5819 100644 --- a/projects/plugins/protect/src/js/routes/home/styles.module.scss +++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss @@ -2,7 +2,7 @@ padding-left: 0; padding-right: 0; overflow: hidden; - + > * { margin-left: calc( var( --spacing-base ) * -3 ); // -24px margin-right: calc( var( --spacing-base ) * -3 ); // -24px @@ -68,4 +68,9 @@ .stat-card-icon { margin-bottom: 0; } + + .scan-report-container > * { + margin-left: 0; + margin-right: 0; + } } \ No newline at end of file diff --git a/projects/plugins/protect/src/js/routes/scan/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/styles.module.scss index 6a04aedcda048..43a93f911b367 100644 --- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss +++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss @@ -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; } @@ -33,3 +45,13 @@ .last-checked { width: fit-content; } +<<<<<<< HEAD +======= + +@media ( max-width: 599px ) { + .scan-results-container > * { + margin-left: 0; + margin-right: 0; + } +} +>>>>>>> 12d3c25056 (Improve component responsiveness) From 2f73aa8afd35d40d860c52412a8d7ee5ea22d4cc Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Thu, 14 Nov 2024 10:42:12 -0700 Subject: [PATCH 04/10] Init project branch From eadeae603929c6df1ca9b2aea4537860b9761f57 Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Tue, 31 Dec 2024 15:52:47 -0700 Subject: [PATCH 05/10] Fix merge conflict --- projects/plugins/protect/src/js/routes/scan/styles.module.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/projects/plugins/protect/src/js/routes/scan/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/styles.module.scss index 43a93f911b367..fb37fa2eb3d67 100644 --- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss +++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss @@ -45,8 +45,6 @@ .last-checked { width: fit-content; } -<<<<<<< HEAD -======= @media ( max-width: 599px ) { .scan-results-container > * { @@ -54,4 +52,3 @@ margin-right: 0; } } ->>>>>>> 12d3c25056 (Improve component responsiveness) From ebe19c34152881d83c3f5e40b1ea678f687b1783 Mon Sep 17 00:00:00 2001 From: dkmyta Date: Thu, 2 Jan 2025 09:57:50 -0800 Subject: [PATCH 06/10] Simplify, and only default to list view in mobile --- .../components/threats-data-views/index.tsx | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/projects/js-packages/components/components/threats-data-views/index.tsx b/projects/js-packages/components/components/threats-data-views/index.tsx index dafb203a3cb65..131fad7b66b8c 100644 --- a/projects/js-packages/components/components/threats-data-views/index.tsx +++ b/projects/js-packages/components/components/threats-data-views/index.tsx @@ -14,7 +14,7 @@ import { import { dateI18n } from '@wordpress/date'; import { __ } from '@wordpress/i18n'; import { Icon } from '@wordpress/icons'; -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import Badge from '../badge'; import useBreakpointMatch from '../layout/use-breakpoint-match'; import ThreatFixerButton from '../threat-fixer-button'; @@ -122,8 +122,8 @@ export default function ThreatsDataViews( { showMedia: false, }; - return isSm ? { list: listLayout } : { table: tableLayout, list: listLayout }; - }, [ filters, isSm ] ); + return { table: tableLayout, list: listLayout }; + }, [ filters ] ); const tableView: View = useMemo( () => ( { @@ -146,14 +146,7 @@ export default function ThreatsDataViews( { * * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#view-object */ - const [ view, setView ] = useState< View >( tableView ); - - /** - * Set the initial view based on the screen size. - */ - useEffect( () => { - setView( isSm ? listView : tableView ); - }, [ isSm, listView, tableView ] ); + const [ view, setView ] = useState< View >( isSm ? listView : tableView ); /** * Compute values from the provided threats data. From cc1e0e96282d2e5a0dd5ae09852fcccba47939a3 Mon Sep 17 00:00:00 2001 From: dkmyta Date: Thu, 2 Jan 2025 10:26:19 -0800 Subject: [PATCH 07/10] Fix spacing --- .../protect/src/js/routes/home/styles.module.scss | 10 ---------- .../protect/src/js/routes/scan/styles.module.scss | 12 ------------ 2 files changed, 22 deletions(-) diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss index bf57c3f4a5819..c4fd97d1e5211 100644 --- a/projects/plugins/protect/src/js/routes/home/styles.module.scss +++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss @@ -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 { @@ -68,9 +63,4 @@ .stat-card-icon { margin-bottom: 0; } - - .scan-report-container > * { - margin-left: 0; - margin-right: 0; - } } \ No newline at end of file diff --git a/projects/plugins/protect/src/js/routes/scan/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/styles.module.scss index fb37fa2eb3d67..0815b6dd2c969 100644 --- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss +++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss @@ -29,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 { @@ -45,10 +40,3 @@ .last-checked { width: fit-content; } - -@media ( max-width: 599px ) { - .scan-results-container > * { - margin-left: 0; - margin-right: 0; - } -} From 79fbdcca57250da78bec144cbd74d2447d2d847c Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Sun, 12 Jan 2025 11:35:30 -0800 Subject: [PATCH 08/10] Minor adjustments to initialization of defaultLayouts, remove memo --- .../components/threats-data-views/index.tsx | 73 ++++++++----------- 1 file changed, 32 insertions(+), 41 deletions(-) diff --git a/projects/js-packages/components/components/threats-data-views/index.tsx b/projects/js-packages/components/components/threats-data-views/index.tsx index 131fad7b66b8c..0955436210a0a 100644 --- a/projects/js-packages/components/components/threats-data-views/index.tsx +++ b/projects/js-packages/components/components/threats-data-views/index.tsx @@ -82,6 +82,17 @@ export default function ThreatsDataViews( { } ): JSX.Element { const [ isSm ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] ); + const baseView = { + sort: { + field: 'severity', + direction: 'desc' as SortDirection, + }, + search: '', + filters: filters || [], + page: 1, + perPage: 20, + }; + /** * DataView default layouts. * @@ -89,19 +100,15 @@ export default function ThreatsDataViews( { * * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#defaultlayouts-record-string-view */ - const defaultLayouts: SupportedLayouts = useMemo( () => { - const baseView = { - sort: { - field: 'severity', - direction: 'desc' as SortDirection, - }, - search: '', - filters: filters || [], - page: 1, - perPage: 20, - }; - - const listLayout = { + 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: { ...baseView, fields: [ THREAT_FIELD_SEVERITY, @@ -112,41 +119,25 @@ 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 ] - ); + /** + * Default View Type. + * + * Set the default view type (list or table) based on the initial screen size. + */ + const defaultViewType: 'list' | 'table' = isSm ? 'list' : 'table'; /** * 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 >( isSm ? listView : tableView ); + const [ view, setView ] = useState< View >( { + type: defaultViewType, + ...defaultLayouts[ defaultViewType ], + } ); /** * Compute values from the provided threats data. From 249477965de77b82f0c1fbb645999d572c5b445b Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Sun, 12 Jan 2025 11:52:40 -0800 Subject: [PATCH 09/10] Remove style overrides on core component --- .../protect/src/js/routes/scan/styles.module.scss | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/projects/plugins/protect/src/js/routes/scan/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/styles.module.scss index 0815b6dd2c969..12fe3f3b52340 100644 --- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss +++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss @@ -1,15 +1,3 @@ -.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; } From d63c91f921086c91d062835e9e1915921ad8c72a Mon Sep 17 00:00:00 2001 From: dkmyta Date: Mon, 13 Jan 2025 19:02:29 -0800 Subject: [PATCH 10/10] Reapply min-width for ScanToggleGroupControl --- .../src/js/routes/scan/styles.module.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/projects/plugins/protect/src/js/routes/scan/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/styles.module.scss index 058dfbf8918b7..f76cd3c47ee7e 100644 --- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss +++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss @@ -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: 550px; } @@ -28,3 +40,7 @@ .last-checked { width: fit-content; } + +.toggle-group-control { + min-width: 300px; +}