Skip to content

Enhancement/11296 enhance use form value #12648

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

Merged
aaemnnosttv merged 6 commits into from
May 12, 2026
Merged

Enhancement/11296 enhance use form value #12648

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
a9e1807
Update useFormValue to include setter.
abdelmalekkkkk May 3, 2026
5c34dc3
Refactor usage of useFormValue.
abdelmalekkkkk May 5, 2026
d73cacf
Update useFormValue tests.
abdelmalekkkkk May 5, 2026
f541ec4
Fix missed useFormValue instance.
abdelmalekkkkk May 5, 2026
3fbbe3a
Fix comment position.
abdelmalekkkkk May 12, 2026
ccef63b
Remove unused forms references.
aaemnnosttv May 12, 2026
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
16 changes: 7 additions & 9 deletions assets/js/components/DashboardMainApp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import { useMount } from 'react-use';
/**
* Internal dependencies
*/
import { useSelect, useDispatch } from 'googlesitekit-data';
import { useSelect } from 'googlesitekit-data';
import {
CONTEXT_MAIN_DASHBOARD_KEY_METRICS,
CONTEXT_MAIN_DASHBOARD_TRAFFIC,
Expand Down Expand Up @@ -72,7 +72,6 @@ import {
import { CORE_WIDGETS } from '@/js/googlesitekit/widgets/datastore/constants';
import useViewOnly from '@/js/hooks/useViewOnly';
import { MODULE_SLUG_ANALYTICS_4 } from '@/js/modules/analytics-4/constants';
import { CORE_FORMS } from '@/js/googlesitekit/datastore/forms/constants';
import OfflineNotification from './notifications/OfflineNotification';
import ModuleDashboardEffects from './ModuleDashboardEffects';
import CoreDashboardEffects from './CoreDashboardEffects';
Expand Down Expand Up @@ -104,12 +103,13 @@ export default function DashboardMainApp() {

const [ widgetArea, setWidgetArea ] = useQueryArg( 'widgetArea' );

const { setValues } = useDispatch( CORE_FORMS );

const grantedScopes = useSelect( ( select ) =>
select( CORE_USER ).getGrantedScopes()
);
const temporaryPersistedPermissionsError = useFormValue(
const [
temporaryPersistedPermissionsError,
setTemporaryPersistedPermissionsError,
] = useFormValue(
FORM_TEMPORARY_PERSIST_PERMISSION_ERROR,
'permissionsError'
);
Expand Down Expand Up @@ -173,13 +173,11 @@ export default function DashboardMainApp() {
temporaryPersistedPermissionsError !== undefined &&
hasReceivedGrantedScopes
) {
setValues( FORM_TEMPORARY_PERSIST_PERMISSION_ERROR, {
permissionsError: {},
} );
setTemporaryPersistedPermissionsError( {} );
}
}, [
hasReceivedGrantedScopes,
setValues,
setTemporaryPersistedPermissionsError,
temporaryPersistedPermissionsError,
] );

Expand Down
43 changes: 23 additions & 20 deletions assets/js/components/KeyMetrics/ChipTabGroup/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import { usePrevious } from '@wordpress/compose';
/**
* Internal dependencies
*/
import { useSelect, useDispatch } from 'googlesitekit-data';
import { useSelect } from 'googlesitekit-data';
import {
EFFECTIVE_SELECTION,
KEY_METRICS_GROUP_CURRENT,
Expand All @@ -40,7 +40,6 @@ import {
KEY_METRICS_SELECTION_PANEL_OPENED_KEY,
UNSTAGED_SELECTION,
} from '@/js/components/KeyMetrics/constants';
import { CORE_FORMS } from '@/js/googlesitekit/datastore/forms/constants';
import { MODULES_ANALYTICS_4 } from '@/js/modules/analytics-4/datastore/constants';
import { MODULE_SLUG_ANALYTICS_4 } from '@/js/modules/analytics-4/constants';
import { CORE_UI } from '@/js/googlesitekit/datastore/ui/constants';
Expand Down Expand Up @@ -70,16 +69,20 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
const breakpoint = useBreakpoint();
const isMobileBreakpoint = breakpoint === BREAKPOINT_SMALL;

const selectedMetrics = useFormValue(
const [ selectedMetrics ] = useFormValue(
KEY_METRICS_SELECTION_FORM,
KEY_METRICS_SELECTED
);
const effectiveSelection =
useFormValue( KEY_METRICS_SELECTION_FORM, EFFECTIVE_SELECTION ) ||
emptyArray;
const unstagedSelection =
useFormValue( KEY_METRICS_SELECTION_FORM, UNSTAGED_SELECTION ) ||
emptyArray;
const [ effectiveSelectionValue, setEffectiveSelection ] = useFormValue(
KEY_METRICS_SELECTION_FORM,
EFFECTIVE_SELECTION
);
const effectiveSelection = effectiveSelectionValue || emptyArray;
const [ unstagedSelectionValue, setUnstagedSelection ] = useFormValue(
KEY_METRICS_SELECTION_FORM,
UNSTAGED_SELECTION
);
const unstagedSelection = unstagedSelectionValue || emptyArray;

const isUserInputCompleted = useSelect( ( select ) =>
select( CORE_USER ).isUserInputCompleted()
Expand Down Expand Up @@ -139,18 +142,18 @@ export default function ChipTabGroup( { allMetricItems, savedItemSlugs } ) {
conversionReportingEventWidgets,
} );

const { setValues } = useDispatch( CORE_FORMS );

const resetUnstagedSelection = useCallback( () => {
setValues( KEY_METRICS_SELECTION_FORM, {
[ KEY_METRICS_SELECTED ]: selectedMetrics,

@aaemnnosttv aaemnnosttv May 6, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[ KEY_METRICS_SELECTED ] is not set in the refactored version

@abdelmalekkkkk abdelmalekkkkk May 8, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was setting KEY_METRICS_SELECTED to its current value selectedMetrics, which looks unnecessary, unless I'm missing something?

@aaemnnosttv aaemnnosttv May 11, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes sense, just highlighting as a potential oversight.

@aaemnnosttv aaemnnosttv May 11, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After taking a closer look, let's double check this since this is also updated with another value currentlySelectedMetrics in other places so it may be intentional after all.

@abdelmalekkkkk abdelmalekkkkk May 12, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I double checked and it still seems unnecessary. The one in assets/js/components/KeyMetrics/MetricsSelectionPanel/MetricItem.js (which I think is what you referred to) makes sense because it updates KEY_METRICS_SELECTED based on which checkbox was toggled, either appending to or removing from the existing selected metrics array.

[ EFFECTIVE_SELECTION ]: [
...effectiveSelection,
...unstagedSelection,
],
[ UNSTAGED_SELECTION ]: [],
} );
}, [ selectedMetrics, effectiveSelection, unstagedSelection, setValues ] );
setEffectiveSelection( [
...effectiveSelection,
...unstagedSelection,
] );
setUnstagedSelection( [] );
}, [
effectiveSelection,
unstagedSelection,
setEffectiveSelection,
setUnstagedSelection,
] );

const onChipChange = useCallback(
( slug, index ) => {
Expand Down
10 changes: 3 additions & 7 deletions assets/js/components/KeyMetrics/ConfirmSitePurposeChangeModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ import {
} from 'googlesitekit-components';
import { useSelect, useDispatch } from 'googlesitekit-data';
import { CORE_USER } from '@/js/googlesitekit/datastore/user/constants';
import { CORE_FORMS } from '@/js/googlesitekit/datastore/forms/constants';
import { KEY_METRICS_WIDGETS } from './key-metrics-widgets';
import {
FORM_USER_INPUT_QUESTION_SNAPSHOT,
Expand Down Expand Up @@ -78,7 +77,7 @@ function ConfirmSitePurposeChangeModal( {
)
);

const savedPurposeSnapshot = useFormValue(
const [ savedPurposeSnapshot, setSavedPurposeSnapshot ] = useFormValue(
FORM_USER_INPUT_QUESTION_SNAPSHOT,
USER_INPUT_QUESTIONS_PURPOSE
);
Expand All @@ -101,16 +100,13 @@ function ConfirmSitePurposeChangeModal( {
);
} );

const { setValues } = useDispatch( CORE_FORMS );
const { setValues: setUIValues } = useDispatch( CORE_UI );
const { resetUserInputSettings } = useDispatch( CORE_USER );

const onClose = useCallback( async () => {
if ( savedPurposeSnapshot?.length ) {
await resetUserInputSettings();
setValues( FORM_USER_INPUT_QUESTION_SNAPSHOT, {
[ USER_INPUT_QUESTIONS_PURPOSE ]: undefined,
} );
setSavedPurposeSnapshot( undefined );
}
setUIValues( {
[ USER_INPUT_CURRENTLY_EDITING_KEY ]: undefined,
Expand All @@ -122,7 +118,7 @@ function ConfirmSitePurposeChangeModal( {
handleDialog,
savedPurposeSnapshot,
resetUserInputSettings,
setValues,
setSavedPurposeSnapshot,
setUIValues,
] );

Expand Down
2 changes: 1 addition & 1 deletion assets/js/components/KeyMetrics/MetricsSelectionPanel/CustomDimensionsNotice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ import SelectionPanelNotice from '@/js/components/SelectionPanel/SelectionPanelN
import { NOTICE_TYPES } from '@/js/components/Notice/constants';

function CustomDimensionsNotice() {
const selectedMetrics = useFormValue(
const [ selectedMetrics ] = useFormValue(
KEY_METRICS_SELECTION_FORM,
KEY_METRICS_SELECTED
);
Expand Down
14 changes: 7 additions & 7 deletions assets/js/components/KeyMetrics/MetricsSelectionPanel/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ import {
useRegistry,
} from 'googlesitekit-data';
import { CORE_USER } from '@/js/googlesitekit/datastore/user/constants';
import { CORE_FORMS } from '@/js/googlesitekit/datastore/forms/constants';
import { CORE_LOCATION } from '@/js/googlesitekit/datastore/location/constants';
import { CORE_MODULES } from '@/js/googlesitekit/modules/datastore/constants';
import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
Expand Down Expand Up @@ -72,10 +71,14 @@ export default function Footer( {
const registry = useRegistry();
const viewContext = useViewContext();

const selectedMetrics = useFormValue(
const [ selectedMetrics ] = useFormValue(
KEY_METRICS_SELECTION_FORM,
KEY_METRICS_SELECTED
);
const [ , setAutoSubmit ] = useFormValue(
FORM_CUSTOM_DIMENSIONS_CREATE,
'autoSubmit'
);
const isSavingSettings = useSelect( ( select ) =>
select( CORE_USER ).isSavingKeyMetricsSettings()
);
Expand Down Expand Up @@ -144,7 +147,6 @@ export default function Footer( {

const { saveKeyMetricsSettings, setPermissionScopeError } =
useDispatch( CORE_USER );
const { setValues } = useDispatch( CORE_FORMS );
const { navigateTo } = useDispatch( CORE_LOCATION );

const conversionReportingSpecificKeyMetricsWidgets = useSelect(
Expand Down Expand Up @@ -185,9 +187,7 @@ export default function Footer( {
}

if ( isGA4Connected && hasMissingCustomDimensions ) {
setValues( FORM_CUSTOM_DIMENSIONS_CREATE, {
autoSubmit: true,
} );
setAutoSubmit( true );

if ( ! hasAnalytics4EditScope ) {
// Let parent component know that the user is navigating to OAuth URL
Expand Down Expand Up @@ -233,7 +233,7 @@ export default function Footer( {
hasMissingCustomDimensions,
isFullScreen,
trackingCategory,
setValues,
setAutoSubmit,
hasAnalytics4EditScope,
onNavigationToOAuthURL,
closePanel,
Expand Down
2 changes: 1 addition & 1 deletion assets/js/components/KeyMetrics/MetricsSelectionPanel/KeyMetricsError.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ import whenActive from '@/js/util/when-active';
import useFormValue from '@/js/hooks/useFormValue';

function KeyMetricsError( { savedMetrics } ) {
const selectedMetrics = useFormValue(
const [ selectedMetrics ] = useFormValue(
KEY_METRICS_SELECTION_FORM,
KEY_METRICS_SELECTED
);
Expand Down
35 changes: 14 additions & 21 deletions assets/js/components/KeyMetrics/MetricsSelectionPanel/MetricItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { useSelect, useDispatch } from 'googlesitekit-data';
import { CORE_FORMS } from '@/js/googlesitekit/datastore/forms/constants';
import { useSelect } from 'googlesitekit-data';
import { CORE_WIDGETS } from '@/js/googlesitekit/widgets/datastore/constants';
import { CORE_MODULES } from '@/js/googlesitekit/modules/datastore/constants';
import {
Expand Down Expand Up @@ -63,36 +62,30 @@ export default function MetricItem( {
}, [] );
} );

const selectedMetrics = useFormValue(
const [ selectedMetrics, setSelectedMetrics ] = useFormValue(
KEY_METRICS_SELECTION_FORM,
KEY_METRICS_SELECTED
);

const { getValue } = useSelect( ( select ) => select( CORE_FORMS ) );

const { setValues } = useDispatch( CORE_FORMS );
const [ , setUnstagedSelection ] = useFormValue(
KEY_METRICS_SELECTION_FORM,
UNSTAGED_SELECTION
);

const onCheckboxChange = useCallback(
( event ) => {
const metrics = getValue(
KEY_METRICS_SELECTION_FORM,
KEY_METRICS_SELECTED
);
const currentlySelectedMetrics = event.target.checked
? metrics.concat( [ slug ] )
: metrics.filter(
? selectedMetrics.concat( [ slug ] )
: selectedMetrics.filter(
( selectedMetric ) => selectedMetric !== slug
);

setValues( KEY_METRICS_SELECTION_FORM, {
[ KEY_METRICS_SELECTED ]: currentlySelectedMetrics,
// Unstaged list creates a copy of KM selected list, but unstaged
// is stored temporary to collect the final selection that will
// be transfered over to effective selection on tab change and then it is reset.
[ UNSTAGED_SELECTION ]: currentlySelectedMetrics,
} );
setSelectedMetrics( currentlySelectedMetrics );
// Unstaged list creates a copy of KM selected list, but unstaged
// is stored temporary to collect the final selection that will
// be transfered over to effective selection on tab change and then it is reset.
setUnstagedSelection( currentlySelectedMetrics );
},
[ getValue, setValues, slug ]
[ slug, selectedMetrics, setSelectedMetrics, setUnstagedSelection ]
);

const isMetricSelected = selectedMetrics?.includes( slug );
Expand Down
2 changes: 1 addition & 1 deletion assets/js/components/UserMenu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export default function UserMenu() {
googlesitekit_context: 'revoked',
} )
);
const isAutoCreatingCustomDimensionsForAudience = useFormValue(
const [ isAutoCreatingCustomDimensionsForAudience ] = useFormValue(
AUDIENCE_TILE_CUSTOM_DIMENSION_CREATE,
'isAutoCreatingCustomDimensionsForAudience'
);
Expand Down
2 changes: 1 addition & 1 deletion assets/js/components/dashboard-sharing/DashboardSharingSettingsButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function DashboardSharingSettingsButton() {
select( CORE_SITE ).hasMultipleAdmins()
);

const isAutoCreatingCustomDimensionsForAudience = useFormValue(
const [ isAutoCreatingCustomDimensionsForAudience ] = useFormValue(
AUDIENCE_TILE_CUSTOM_DIMENSION_CREATE,
'isAutoCreatingCustomDimensionsForAudience'
);
Expand Down
2 changes: 1 addition & 1 deletion assets/js/components/notifications/SetupErrorMessageNotification.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export default function SetupErrorMessageNotification( { Notification } ) {
const setupErrorMessage = useSelect( ( select ) =>
select( CORE_SITE ).getSetupErrorMessage()
);
const temporaryPersistedPermissionsError = useFormValue(
const [ temporaryPersistedPermissionsError ] = useFormValue(
FORM_TEMPORARY_PERSIST_PERMISSION_ERROR,
'permissionsError'
);
Expand Down
2 changes: 1 addition & 1 deletion assets/js/components/notifications/UnsatisfiedScopesAlert/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export default function UnsatisfiedScopesAlert( { id, Notification } ) {
new RegExp( '//oauth2|action=googlesitekit_connect', 'i' )
)
);
const temporaryPersistedPermissionsError = useFormValue(
const [ temporaryPersistedPermissionsError ] = useFormValue(
FORM_TEMPORARY_PERSIST_PERMISSION_ERROR,
'permissionsError'
);
Expand Down
2 changes: 1 addition & 1 deletion assets/js/components/notifications/UnsatisfiedScopesAlertGTE.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import useFormValue from '@/js/hooks/useFormValue';
export default function UnsatisfiedScopesAlertGTE( { id, Notification } ) {
const [ isSaving, setIsSaving ] = useState( false );

const temporaryPersistedPermissionsError = useFormValue(
const [ temporaryPersistedPermissionsError ] = useFormValue(
FORM_TEMPORARY_PERSIST_PERMISSION_ERROR,
'permissionsError'
);
Expand Down
12 changes: 3 additions & 9 deletions assets/js/components/setup/ActivateAnalyticsNotice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,31 +25,25 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { useDispatch } from 'googlesitekit-data';
import { Checkbox } from 'googlesitekit-components';
import {
ANALYTICS_NOTICE_FORM_NAME,
ANALYTICS_NOTICE_CHECKBOX,
} from './constants';
import { CORE_FORMS } from '@/js/googlesitekit/datastore/forms/constants';
import AnalyticsSetupSidekickSVG from '@/svg/graphics/analytics-setup-sidekick.svg';
import useFormValue from '@/js/hooks/useFormValue';

export default function ActivateAnalyticsNotice() {
const { setValues } = useDispatch( CORE_FORMS );

const checked = useFormValue(
const [ checked, setChecked ] = useFormValue(
ANALYTICS_NOTICE_FORM_NAME,
ANALYTICS_NOTICE_CHECKBOX
);

const handleOnChange = useCallback(
( event ) => {
setValues( ANALYTICS_NOTICE_FORM_NAME, {
[ ANALYTICS_NOTICE_CHECKBOX ]: event.target.checked,
} );
setChecked( event.target.checked );
},
[ setValues ]
[ setChecked ]
);

return (
Expand Down
Loading