Skip to content

Switch "Local path" field to copy button instead of open new button #506

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
wojtekn merged 4 commits into from
Sep 11, 2024
Merged

Switch "Local path" field to copy button instead of open new button #506

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9ae9458
Adds a "Copy local path" button to the "Local path" field
danielbachhuber Sep 3, 2024
b99fd8c
Merge branch 'trunk' into improve/add-copy-button
danielbachhuber Sep 10, 2024
11513bd
Switch to Copy instead of open in new
danielbachhuber Sep 10, 2024
eb7c6fa
Update test for new button behavior
danielbachhuber Sep 10, 2024
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions src/components/content-tab-settings.tsx
View file
Open in desktop

@wojtekn wojtekn Sep 11, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Let's remove no longer used imports - Icon, file, getIpcApi, and Button.
Original file line number Diff line number Diff line change
Expand Up @@ -57,15 +57,15 @@ export function ContentTabSettings( { selectedSite }: ContentTabSettingsProps )
</CopyTextButton>
</SettingsRow>
<SettingsRow label={ __( 'Local path' ) }>
<Button
aria-label={ `${ selectedSite.path }, ${ __( 'Open local path' ) }` }
className="flex text-wrap items-center gap-1.5 [&.is-link]:text-black [&.is-link]:hover:text-[#2145e6]"
onClick={ () => getIpcApi().openLocalPath( selectedSite.path ) }
variant="link"
>
<span className="line-clamp-1 break-all">{ selectedSite.path }</span>
<Icon size={ 13 } icon={ file } className="shrink-0" />
</Button>
<div className="flex">
<CopyTextButton
text={ selectedSite.path }
label={ __( 'Copy local path to clipboard' ) }
copyConfirmation={ __( 'Copied!' ) }
>
<span className="line-clamp-1 break-all">{ selectedSite.path }</span>
</CopyTextButton>
</div>
</SettingsRow>
<SettingsRow label={ __( 'WP Version' ) }>{ wpVersion }</SettingsRow>
<SettingsRow label={ __( 'PHP Version' ) }>
Expand Down
15 changes: 7 additions & 8 deletions src/components/tests/content-tab-settings.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,7 @@ describe( 'ContentTabSettings', () => {
expect(
screen.getByRole( 'button', { name: 'localhost:8881, Copy site url to clipboard' } )
).toHaveTextContent( 'localhost:8881' );
expect(
screen.getByRole( 'button', { name: '/path/to/site, Open local path' } )
).toBeVisible();
expect( screen.getByRole( 'button', { name: 'Copy local path to clipboard' } ) ).toBeVisible();
expect( screen.getByText( '7.7.7' ) ).toBeVisible();
expect(
screen.getByRole( 'button', {
Expand All @@ -68,14 +66,15 @@ describe( 'ContentTabSettings', () => {
).toHaveTextContent( 'localhost:8881/wp-admin' );
} );

test( 'button opens local path', async () => {
test( 'allows copying the site path', async () => {
const user = userEvent.setup();
render( <ContentTabSettings selectedSite={ selectedSite } /> );

const pathButton = screen.getByRole( 'button', { name: '/path/to/site, Open local path' } );
expect( pathButton ).toBeVisible();
await user.click( pathButton );
expect( openLocalPath ).toHaveBeenCalledWith( '/path/to/site' );
const localPathButton = screen.getByRole( 'button', { name: 'Copy local path to clipboard' } );
expect( localPathButton ).toBeVisible();
await user.click( localPathButton );
expect( copyText ).toHaveBeenCalledTimes( 1 );
expect( copyText ).toHaveBeenCalledWith( '/path/to/site' );
} );

test( 'URL buttons work well when site is running', async () => {
Expand Down