Skip to content

Commit

Permalink
Merge pull request #9243 from google/enhancement/#8154-top-content-oa…
Browse files Browse the repository at this point in the history 
…uth-flow

Enhancement/#8154 - Implement the “Top content” metric handling OAuth flow
  • Loading branch information
@techanvil
techanvil committed Sep 6, 2024
2 parents b6c7c59 + 115c349 commit 56feb1f
Show file tree
Hide file tree
Showing 4 changed files with 661 additions and 92 deletions.
146 changes: 56 additions & 90 deletions ...s-4/components/audience-segmentation/dashboard/AudienceSegmentationSetupCTAWidget.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ import {
act,
fireEvent,
render,
screen,
waitFor,
} from '../../../../../../../tests/js/test-utils';
import {
Expand All @@ -33,7 +32,6 @@ import {
provideModules,
provideSiteInfo,
provideUserAuthentication,
waitForDefaultTimeouts,
waitForTimeouts,
} from '../../../../../../../tests/js/utils';
import { CORE_USER } from '../../../../../googlesitekit/datastore/user/constants';
Expand Down Expand Up @@ -620,27 +618,22 @@ describe( 'AudienceSegmentationSetupCTAWidget', () => {

muteFetch( reportEndpoint );

// eslint-disable-next-line require-await
await act( async () => {
render(
<AudienceSegmentationSetupCTAWidget Widget={ Widget } />,
{
registry,
}
);
} );
const { getByRole } = render(
<AudienceSegmentationSetupCTAWidget Widget={ Widget } />,
{
registry,
}
);

await waitFor( () => {
expect(
screen.getByRole( 'button', { name: /Enabling groups/i } )
).toBeInTheDocument();
} );
expect(
getByRole( 'button', { name: /Enabling groups/i } )
).toBeInTheDocument();

await act( () => waitForTimeouts( 30 ) );
} );

describe( 'AudienceErrorModal', () => {
it( 'should show the OAuth error modal when the required scopes are not granted', async () => {
it( 'should show the OAuth error modal when the required scopes are not granted', () => {
provideSiteInfo( registry, {
setupErrorCode: 'access_denied',
} );
Expand All @@ -663,55 +656,44 @@ describe( 'AudienceSegmentationSetupCTAWidget', () => {
.dispatch( CORE_USER )
.receiveGetAudienceSettings( settings );

// eslint-disable-next-line require-await
await act( async () => {
render(
<AudienceSegmentationSetupCTAWidget
Widget={ Widget }
/>,
{
registry,
}
);
} );
const { getByRole, getByText } = render(
<AudienceSegmentationSetupCTAWidget Widget={ Widget } />,
{
registry,
}
);

expect(
screen.getByRole( 'button', { name: /Enable groups/i } )
getByRole( 'button', { name: /Enable groups/i } )
).toBeInTheDocument();

act( () => {
fireEvent.click(
screen.getByRole( 'button', { name: /Enable groups/i } )
getByRole( 'button', { name: /Enable groups/i } )
);
} );

// Verify the error is an OAuth error variant.
await waitFor( () => {
expect(
screen.getByText( /Analytics update failed/i )
).toBeInTheDocument();

// Verify the "Get help" link is displayed.
expect(
screen.getByText( /get help/i )
).toBeInTheDocument();
expect(
getByText( /Analytics update failed/i )
).toBeInTheDocument();

expect(
screen.getByRole( 'link', { name: /get help/i } )
).toHaveAttribute(
'href',
registry
.select( CORE_SITE )
.getErrorTroubleshootingLinkURL( {
code: 'access_denied',
} )
);
// Verify the "Get help" link is displayed.
expect( getByText( /get help/i ) ).toBeInTheDocument();

// Verify the "Retry" button is displayed.
expect( screen.getByText( /retry/i ) ).toBeInTheDocument();
} );
expect(
getByRole( 'link', { name: /get help/i } )
).toHaveAttribute(
'href',
registry
.select( CORE_SITE )
.getErrorTroubleshootingLinkURL( {
code: 'access_denied',
} )
);

await act( waitForDefaultTimeouts );
// Verify the "Retry" button is displayed.
expect( getByText( /retry/i ) ).toBeInTheDocument();
} );

it( 'should show the insufficient permission error modal when the user does not have the required permissions', async () => {
Expand All @@ -726,46 +708,37 @@ describe( 'AudienceSegmentationSetupCTAWidget', () => {
status: 500,
} );

// eslint-disable-next-line require-await
await act( async () => {
render(
<AudienceSegmentationSetupCTAWidget
Widget={ Widget }
/>,
{
registry,
}
);
} );
const { getByRole, getByText } = render(
<AudienceSegmentationSetupCTAWidget Widget={ Widget } />,
{
registry,
}
);

expect(
screen.getByRole( 'button', { name: /Enable groups/i } )
getByRole( 'button', { name: /Enable groups/i } )
).toBeInTheDocument();

act( () => {
fireEvent.click(
screen.getByRole( 'button', { name: /Enable groups/i } )
getByRole( 'button', { name: /Enable groups/i } )
);
} );

// Verify the error is "Insufficient permissions" variant.
await waitFor( () => {
expect(
screen.getByText( /Insufficient permissions/i )
getByText( /Insufficient permissions/i )
).toBeInTheDocument();

// Verify the "Get help" link is displayed.
expect(
screen.getByText( /get help/i )
).toBeInTheDocument();
expect( getByText( /get help/i ) ).toBeInTheDocument();

// Verify the "Request access" button is displayed.
expect(
screen.getByText( /request access/i )
getByText( /request access/i )
).toBeInTheDocument();
} );

await act( waitForDefaultTimeouts );
} );

it( 'should show the generic error modal when an internal server error occurs', async () => {
Expand All @@ -780,41 +753,34 @@ describe( 'AudienceSegmentationSetupCTAWidget', () => {
status: 500,
} );

// eslint-disable-next-line require-await
await act( async () => {
render(
<AudienceSegmentationSetupCTAWidget
Widget={ Widget }
/>,
{
registry,
}
);
} );
const { getByRole, getByText } = render(
<AudienceSegmentationSetupCTAWidget Widget={ Widget } />,
{
registry,
}
);

expect(
screen.getByRole( 'button', { name: /Enable groups/i } )
getByRole( 'button', { name: /Enable groups/i } )
).toBeInTheDocument();

act( () => {
fireEvent.click(
screen.getByRole( 'button', { name: /Enable groups/i } )
getByRole( 'button', { name: /Enable groups/i } )
);
} );

// Verify the error is "Insufficient permissions" variant.
await waitFor( () => {
expect(
screen.getByText( /Failed to set up visitor groups/i )
getByText( /Failed to set up visitor groups/i )
).toBeInTheDocument();

// Verify the "Retry" button is displayed.
expect(
screen.getByRole( 'button', { name: /retry/i } )
getByRole( 'button', { name: /retry/i } )
).toBeInTheDocument();
} );

await act( waitForDefaultTimeouts );
} );
} );
} );
Expand Down
29 changes: 27 additions & 2 deletions ...dience-segmentation/dashboard/AudienceTilesWidget/AudienceTile/AudienceTilePagesMetric.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import {
useBreakpoint,
} from '../../../../../../../hooks/useBreakpoint';
import { CORE_FORMS } from '../../../../../../../googlesitekit/datastore/forms/constants';
import { CORE_SITE } from '../../../../../../../googlesitekit/datastore/site/constants';
import { CORE_USER } from '../../../../../../../googlesitekit/datastore/user/constants';
import {
AUDIENCE_TILE_CUSTOM_DIMENSION_CREATE,
Expand Down Expand Up @@ -116,6 +117,20 @@ export default function AudienceTilePagesMetric( {
)
);

const autoSubmit = useSelect( ( select ) =>
select( CORE_FORMS ).getValue(
AUDIENCE_TILE_CUSTOM_DIMENSION_CREATE,
'autoSubmit'
)
);

const setupErrorCode = useSelect( ( select ) =>
select( CORE_SITE ).getSetupErrorCode()
);
const { setSetupErrorCode } = useDispatch( CORE_SITE );

const hasOAuthError = autoSubmit && setupErrorCode === 'access_denied';

const onCreateCustomDimension = useCallback(
( { isRetrying } = {} ) => {
setValues( AUDIENCE_TILE_CUSTOM_DIMENSION_CREATE, {
Expand Down Expand Up @@ -152,12 +167,19 @@ export default function AudienceTilePagesMetric( {
setValues( AUDIENCE_TILE_CUSTOM_DIMENSION_CREATE, {
autoSubmit: false,
} );
setSetupErrorCode( null );
clearPermissionScopeError();
clearError( 'createCustomDimension', [
propertyID,
CUSTOM_DIMENSION_DEFINITIONS.googlesitekit_post_type,
] );
}, [ clearError, clearPermissionScopeError, propertyID, setValues ] );
}, [
clearError,
clearPermissionScopeError,
propertyID,
setSetupErrorCode,
setValues,
] );

const isMobileBreakpoint = [ BREAKPOINT_SMALL, BREAKPOINT_TABLET ].includes(
breakpoint
Expand Down Expand Up @@ -194,7 +216,9 @@ export default function AudienceTilePagesMetric( {
isSaving={ isSaving }
/>
{ ( ( customDimensionError && ! isSaving ) ||
isRetryingCustomDimensionCreate ) && (
( isRetryingCustomDimensionCreate &&
! isAutoCreatingCustomDimensionsForAudience ) ||
hasOAuthError ) && (
<AudienceErrorModal
apiErrors={ [ customDimensionError ] }
title={ __(
Expand All @@ -210,6 +234,7 @@ export default function AudienceTilePagesMetric( {
}
onCancel={ onCancel }
inProgress={ isSaving }
hasOAuthError={ hasOAuthError }
/>
) }
</div>
Expand Down
Loading

0 comments on commit 56feb1f

Please sign in to comment.