Skip to content

Commit

Permalink
Revert "Site Migration: Migration Instructions screen improvements (#…
Browse files Browse the repository at this point in the history 
…88952)" (#89003)

This reverts commit 86ea912.
  • Loading branch information
@gabrielcaires
gabrielcaires authored Mar 28, 2024
1 parent c01ed5f commit d98952e
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 86 deletions.
70 changes: 35 additions & 35 deletions ...stepper/declarative-flow/internals/steps-repository/site-migration-instructions/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import FormattedHeader from 'calypso/components/formatted-header';
import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
import { useQuery } from 'calypso/landing/stepper/hooks/use-query';
import { useSite } from 'calypso/landing/stepper/hooks/use-site';
import { useSiteMigrationKey } from 'calypso/landing/stepper/hooks/use-site-migration-key';
import { useSiteMigrationKey } from 'calypso/landing/stepper/hooks/use-site-migraiton-key';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
import { ShowHideInput } from './show-hide-input';
import type { Step } from '../../types';
Expand Down Expand Up @@ -86,15 +86,25 @@ const SiteMigrationInstructions: Step = function () {
}
) }
</li>
<li>{ translate( 'When asked to select a destination host, pick ‘WordPress.com‘.' ) }</li>
<li>
{ translate(
'When asked to select a destination host, pick {{em}}WordPress.com{{/em}}.',
{
components: {
em: <em />,
},
}
) }
</li>
{ isSuccess && migrationKey && (
<li>
{ translate(
'Copy and paste the migration key below in the ‘{{ migrationKeyField /}}‘ field and click {{strong}}{{migrateButton /}}{{/strong}} once more.',
'Copy and paste the migration key below in the {{em}}{{ migrationKeyField /}}{{/em}} field and click {{strong}}{{migrateButton /}}{{/strong}}.',
{
components: {
migrationKeyField: <DoNotTranslateIt value="Migrate Guru Migration key" />,
migrateButton: <DoNotTranslateIt value="Migrate" />,
em: <em />,
strong: <strong />,
},
}
Expand All @@ -103,41 +113,31 @@ const SiteMigrationInstructions: Step = function () {
</li>
) }
{ isError && (
<>
<li>
{ translate(
'Head to the {{a}}Migrate Guru page on the new WordPress.com site{{/a}} and copy the migration key.',
{
components: {
a: (
<a
href={ getMigrateGuruPageURL( site!.URL ) }
target="_blank"
rel="noreferrer"
/>
),
},
}
) }
</li>
<li>
{ translate(
'Paste the migration key on the ‘{{ migrationKeyField /}}‘ field of your existing site and click {{strong}}{{migrateButton /}}{{/strong}} once more.',
{
components: {
strong: <strong />,
migrationKeyField: <DoNotTranslateIt value="Migrate Guru Migration key" />,
migrateButton: <DoNotTranslateIt value="Migrate" />,
},
}
) }
</li>
</>
<li>
{ translate(
'Go to the {{a}}Migrate Guru page on the new WordPress.com site{{/a}} and copy the migration key. Then paste it on the {{em}}{{migrationKeyField /}}{{/em}} field of your existing site and click {{strong}}{{migrateButton /}}{{/strong}}.',
{
components: {
a: (
<a
href={ getMigrateGuruPageURL( site!.URL ) }
target="_blank"
rel="noreferrer"
/>
),
em: <em />,
strong: <strong />,
migrationKeyField: <DoNotTranslateIt value="Migrate Guru Migration key" />,
migrateButton: <DoNotTranslateIt value="Migrate" />,
},
}
) }
</li>
) }
</ol>
<p>
{ translate(
'And you are done! When the migration is ready, Migrate Guru will send you an email.'
'And you are done! When the migration finishes, Migrate Guru will send you an email.'
) }
</p>
</div>
Expand All @@ -161,7 +161,7 @@ const SiteMigrationInstructions: Step = function () {
id="site-migration-instructions-header"
headerText={ translate( 'Ready to migrate your site?' ) }
align="center"
subHeaderText={ translate( 'Follow these steps' ) }
subHeaderText={ translate( 'Follow these steps to get started.' ) }
subHeaderAlign="center"
/>
}
Expand Down
92 changes: 45 additions & 47 deletions ...ve-flow/internals/steps-repository/site-migration-instructions/show-hide-input/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,52 +9,50 @@
height: 28px;
max-width: 456px;
transition: all 0.2s;
}

.show-hide-input--hidden {
overflow: hidden;
user-select: none;
}

.show-hide-input--hidden input {
background-color: transparent;
}

.show-hide-input__value {
overflow-x: scroll;
font-size: 0.875rem;
border: none;
outline: none;
width: 100%;
}

.show-hide-input:has(:focus),
.show-hide-input:hover {
outline-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary-10);
&--hidden {
overflow: hidden;
user-select: none;

input {
background-color: transparent;
}
}

&__value {
overflow-x: scroll;
font-size: 0.875rem;
border: none;
outline: none;
width: 100%;
}

&:has(:focus),
&:hover {
outline-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary-10);
}

&__actions {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 10px;
}

&__visibility-button {
width: 20px;
fill: #a7aaad;
transition: all 0.2s;
&:hover {
fill: #787c82;
}
}

&__copy-button {
padding: 0 8px;
height: 28px;
border-radius: 4px;
}
}

.show-hide-input__actions {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 10px;
}

.show-hide-input__visibility-button {
width: 20px;
fill: var(--studio-gray-20);
transition: all 0.2s;
}

.show-hide-input__visibility-button:hover {
fill: var(--studio-gray-40);
}

.show-hide-input__copy-button {
padding: 0 8px;
height: 28px;
border-radius: 4px;
}

6 changes: 3 additions & 3 deletions client/landing/stepper/hooks/test/use-site-migration-key.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { renderHook, waitFor } from '@testing-library/react';
import nock from 'nock';
import React from 'react';
import { useSiteMigrationKey } from '../use-site-migration-key';
import { useSiteMigrationKey } from '../use-site-migraiton-key';

describe( 'useSiteMigrationKey', () => {
it( 'returns the site migration key', async () => {
Expand All @@ -15,12 +15,12 @@ describe( 'useSiteMigrationKey', () => {
);

nock( 'https://public-api.wordpress.com' )
.get( '/wpcom/v2/sites/123/atomic-migration-status/migrate-guru-key' )
.get( '/wpcom/v2/sites/some-site-id/atomic-migration-status/migrate-guru-key' )
.query( { http_envelope: 1 } )
.once()
.reply( 200, { migration_key: 'some-migration-key' } );

const { result } = renderHook( () => useSiteMigrationKey( 123 ), { wrapper } );
const { result } = renderHook( () => useSiteMigrationKey( 'some-site-id' ), { wrapper } );

await waitFor( () => expect( result.current.isSuccess ).toBe( true ) );
expect( result.current.data?.migrationKey ).toEqual( 'some-migration-key' );
Expand Down
1 change: 0 additions & 1 deletion ...g/stepper/hooks/use-site-migration-key.ts → ...g/stepper/hooks/use-site-migraiton-key.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export const useSiteMigrationKey = ( siteId?: number ) => {
retry: false,
enabled: !! siteId,
select: ( data ) => ( { migrationKey: data?.migration_key } ),
staleTime: 60000, // 1 minute
refetchOnWindowFocus: false,
} );
};

0 comments on commit d98952e

Please sign in to comment.