Skip to content

Commit a9095db

Browse files
t-hamanogziolojorgefilipecostajeffpauldkotter
authored and
adamsilverstein
committed
Connectors: Improve AI plugin button (#76759)
* Connectors: Improve AI plugin button * Move learn more link * Restore effect * Remove unnecessary div * Fix e2e test * Add ts-ignore * Update button text Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl> --------- Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: gziolo <gziolo@git.wordpress.org> Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org> Co-authored-by: dkotter <dkotter@git.wordpress.org> Co-authored-by: justlevine <justlevine@git.wordpress.org> Co-authored-by: jonathanbossenger <psykro@git.wordpress.org>
1 parent 1ff8bfb commit a9095db

5 files changed

Lines changed: 40 additions & 45 deletions

File tree

‎package-lock.json‎

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎routes/connectors-home/ai-plugin-callout.tsx‎

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
useState,
1313
} from '@wordpress/element';
1414
import { __ } from '@wordpress/i18n';
15+
import { addQueryArgs } from '@wordpress/url';
1516

1617
/**
1718
* Internal dependencies
@@ -200,16 +201,16 @@ export function AiPluginCallout() {
200201
const getMessage = () => {
201202
if ( isJustConnected ) {
202203
return __(
203-
'The <strong>AI plugin</strong> is ready to use. You can use it to generate featured images, alt text, titles, excerpts and more.'
204+
'The <strong>AI plugin</strong> is ready to use. You can use it to generate featured images, alt text, titles, excerpts and more. <a>Learn more</a>'
204205
);
205206
}
206207
if ( isActiveNoProvider ) {
207208
return __(
208-
'The <strong>AI plugin</strong> is installed. Connect a provider below to generate featured images, alt text, titles, excerpts, and more.'
209+
'The <strong>AI plugin</strong> is installed. Connect a provider below to generate featured images, alt text, titles, excerpts, and more. <a>Learn more</a>'
209210
);
210211
}
211212
return __(
212-
'The <strong>AI plugin</strong> can use your connectors to generate featured images, alt text, titles, excerpts and more.'
213+
'The <strong>AI plugin</strong> can use your connectors to generate featured images, alt text, titles, excerpts and more. <a>Learn more</a>'
213214
);
214215
};
215216

@@ -218,7 +219,7 @@ export function AiPluginCallout() {
218219
return {
219220
label: isBusy
220221
? __( 'Installing…' )
221-
: __( 'Install AI Experiments' ),
222+
: __( 'Install the AI plugin' ),
222223
disabled: isBusy,
223224
onClick: isBusy ? undefined : installPlugin,
224225
};
@@ -227,7 +228,7 @@ export function AiPluginCallout() {
227228
return {
228229
label: isBusy
229230
? __( 'Activating…' )
230-
: __( 'Activate AI Experiments' ),
231+
: __( 'Activate the AI plugin' ),
231232
disabled: isBusy,
232233
onClick: isBusy ? undefined : activatePlugin,
233234
};
@@ -239,38 +240,33 @@ export function AiPluginCallout() {
239240
<p>
240241
{ createInterpolateElement( getMessage(), {
241242
strong: <strong />,
243+
// @ts-ignore children are injected by createInterpolateElement at runtime.
244+
a: <ExternalLink href={ AI_PLUGIN_URL } />,
242245
} ) }
243246
</p>
244-
<div className="ai-plugin-callout__actions">
245-
{ showInstallActivate ? (
246-
<Button
247-
ref={ actionButtonRef }
248-
variant="primary"
249-
size="compact"
250-
isBusy={ isBusy }
251-
disabled={ getPrimaryButtonProps().disabled }
252-
accessibleWhenDisabled
253-
onClick={ getPrimaryButtonProps().onClick }
254-
>
255-
{ getPrimaryButtonProps().label }
256-
</Button>
257-
) : (
258-
justActivated && (
259-
<Button
260-
ref={ actionButtonRef }
261-
variant="secondary"
262-
size="compact"
263-
disabled
264-
accessibleWhenDisabled
265-
>
266-
{ __( 'AI Experiments enabled' ) }
267-
</Button>
268-
)
269-
) }
270-
<ExternalLink href={ AI_PLUGIN_URL }>
271-
{ __( 'Learn more' ) }
272-
</ExternalLink>
273-
</div>
247+
{ showInstallActivate ? (
248+
<Button
249+
variant="primary"
250+
size="compact"
251+
isBusy={ isBusy }
252+
disabled={ getPrimaryButtonProps().disabled }
253+
accessibleWhenDisabled
254+
onClick={ getPrimaryButtonProps().onClick }
255+
>
256+
{ getPrimaryButtonProps().label }
257+
</Button>
258+
) : (
259+
<Button
260+
ref={ actionButtonRef }
261+
variant="secondary"
262+
size="compact"
263+
href={ addQueryArgs( 'options-general.php', {
264+
page: AI_PLUGIN_SLUG,
265+
} ) }
266+
>
267+
{ __( 'Control features in the AI plugin' ) }
268+
</Button>
269+
) }
274270
</div>
275271
<WpLogoDecoration />
276272
</div>

‎routes/connectors-home/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@wordpress/element": "file:../../packages/element",
2020
"@wordpress/i18n": "file:../../packages/i18n",
2121
"@wordpress/icons": "file:../../packages/icons",
22-
"@wordpress/ui": "file:../../packages/ui"
22+
"@wordpress/ui": "file:../../packages/ui",
23+
"@wordpress/url": "file:../../packages/url"
2324
}
2425
}

‎routes/connectors-home/style.scss‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ $sticky-header-clearance: 120px;
6060
flex-direction: column;
6161
gap: 12px;
6262
padding-top: 2px;
63+
align-items: flex-start;
6364

6465
p {
6566
margin: 0;
@@ -68,12 +69,6 @@ $sticky-header-clearance: 120px;
6869
}
6970
}
7071

71-
&__actions {
72-
display: flex;
73-
gap: 12px;
74-
align-items: center;
75-
}
76-
7772
&__decoration {
7873
position: absolute;
7974
inset-inline-end: 8px;

‎test/e2e/specs/admin/connectors.spec.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -386,11 +386,13 @@ test.describe( 'Connectors', () => {
386386
await expect( banner ).toBeVisible();
387387

388388
// Verify the banner message mentions the AI plugin.
389-
await expect( banner.getByText( 'AI plugin' ) ).toBeVisible();
389+
await expect(
390+
banner.locator( 'p' ).getByText( 'AI plugin' )
391+
).toBeVisible();
390392

391393
// Verify the Install button is present.
392394
await expect(
393-
banner.getByRole( 'button', { name: 'Install AI Experiments' } )
395+
banner.getByRole( 'button', { name: 'Install the AI plugin' } )
394396
).toBeVisible();
395397

396398
// Verify the Learn more link is present.

0 commit comments

Comments
 (0)