Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commite50ef5e

Browse files
authored
future: update guided tour got it button and when conditions (#23922)
1 parent6258973 commite50ef5e

File tree

1 file changed

+44
-36
lines changed
  • packages/core/admin/admin/src/components/UnstableGuidedTour

1 file changed

+44
-36
lines changed

‎packages/core/admin/admin/src/components/UnstableGuidedTour/Tours.tsx

Lines changed: 44 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import*asReactfrom'react';
22

3-
import{Box,Popover,Portal,Flex,LinkButton}from'@strapi/design-system';
3+
import{Box,Popover,Portal,Flex,Button}from'@strapi/design-system';
44
import{FormattedMessage}from'react-intl';
5-
import{NavLink}from'react-router-dom';
65
import{styled}from'styled-components';
76

87
import{useGetGuidedTourMetaQuery}from'../../services/admin';
@@ -20,6 +19,16 @@ import { Step, createStepComponents } from './Step';
2019
* Tours
2120
* -----------------------------------------------------------------------------------------------*/
2221

22+
constGotItAction=({ onClick}:{onClick:()=>void})=>{
23+
return(
24+
<FlexjustifyContent="end"width="100%">
25+
<ButtononClick={onClick}>
26+
<FormattedMessageid="tours.gotIt"defaultMessage="Got it"/>
27+
</Button>
28+
</Flex>
29+
);
30+
};
31+
2332
consttours={
2433
contentTypeBuilder:createTour('contentTypeBuilder',[
2534
{
@@ -72,14 +81,18 @@ const tours = {
7281
},
7382
{
7483
name:'Components',
75-
content:(Step)=>(
84+
content:(Step,{ dispatch})=>(
7685
<Step.Rootside="right"sideOffset={16}>
7786
<Step.Titleid="tours.contentTypeBuilder.Components.title"defaultMessage="Components"/>
7887
<Step.Content
7988
id="tours.contentTypeBuilder.Components.content"
8089
defaultMessage="A reusable content structure that can be used across multiple content types, such as buttons, sliders or cards."
8190
/>
82-
<Step.Actions/>
91+
<Step.Actions>
92+
<GotItAction
93+
onClick={()=>dispatch({type:'next_step',payload:'contentTypeBuilder'})}
94+
/>
95+
</Step.Actions>
8396
</Step.Root>
8497
),
8598
},
@@ -104,6 +117,9 @@ const tours = {
104117
contentManager:createTour('contentManager',[
105118
{
106119
name:'Introduction',
120+
when:(completedActions)=>
121+
completedActions.includes('didCreateContentTypeSchema')&&
122+
!completedActions.includes('didCreateContent'),
107123
content:(Step)=>(
108124
<Step.Rootside="top"withArrow={false}>
109125
<Step.Title
@@ -133,14 +149,18 @@ const tours = {
133149
},
134150
{
135151
name:'Publish',
136-
content:(Step)=>(
152+
content:(Step,{ dispatch})=>(
137153
<Step.Rootside="left"align="center">
138154
<Step.Titleid="tours.contentManager.Publish.title"defaultMessage="Publish"/>
139155
<Step.Content
140156
id="tours.contentManager.Publish.content"
141157
defaultMessage="Publish entries to make their content available through the Document Service API."
142158
/>
143-
<Step.Actions/>
159+
<Step.Actions>
160+
<GotItAction
161+
onClick={()=>dispatch({type:'next_step',payload:'contentManager'})}
162+
/>
163+
</Step.Actions>
144164
</Step.Root>
145165
),
146166
},
@@ -165,6 +185,7 @@ const tours = {
165185
apiTokens:createTour('apiTokens',[
166186
{
167187
name:'Introduction',
188+
when:(completedActions)=>!completedActions.includes('didCreateApiToken'),
168189
content:(Step)=>(
169190
<Step.RootsideOffset={-36}withArrow={false}>
170191
<Step.Titleid="tours.apiTokens.Introduction.title"defaultMessage="API tokens"/>
@@ -194,7 +215,7 @@ const tours = {
194215
},
195216
{
196217
name:'CopyAPIToken',
197-
content:(Step)=>(
218+
content:(Step,{ dispatch})=>(
198219
<Step.Rootside="bottom"align="start"sideOffset={-5}>
199220
<Step.Title
200221
id="tours.apiTokens.CopyAPIToken.title"
@@ -204,41 +225,28 @@ const tours = {
204225
id="tours.apiTokens.CopyAPIToken.content"
205226
defaultMessage="Make sure to do it now, you won’t be able to see it again. You’ll need to generate a new one if you lose it."
206227
/>
207-
<Step.Actions/>
228+
<Step.Actions>
229+
<GotItActiononClick={()=>dispatch({type:'next_step',payload:'apiTokens'})}/>
230+
</Step.Actions>
208231
</Step.Root>
209232
),
210233
when:(completedActions)=>completedActions.includes('didCreateApiToken'),
211234
},
212235
{
213236
name:'Finish',
214-
content:(Step)=>{
215-
constdispatch=unstableUseGuidedTour('GuidedTourPopover',(s)=>s.dispatch);
216-
return(
217-
<Step.Rootside="right"align="start">
218-
<Step.Title
219-
id="tours.apiTokens.FinalStep.title"
220-
defaultMessage="It’s time to deploy your application!"
221-
/>
222-
<Step.Content
223-
id="tours.apiTokens.FinalStep.content"
224-
defaultMessage="Your application is ready to be deployed and its content to be shared with the world!"
225-
/>
226-
<Step.ActionsshowStepCount={false}>
227-
<FlexjustifyContent="end"width={'100%'}>
228-
<LinkButton
229-
onClick={()=>{
230-
dispatch({type:'next_step',payload:'apiTokens'});
231-
}}
232-
tag={NavLink}
233-
to="/"
234-
>
235-
<FormattedMessageid="tours.gotIt"defaultMessage="Got it"/>
236-
</LinkButton>
237-
</Flex>
238-
</Step.Actions>
239-
</Step.Root>
240-
);
241-
},
237+
content:(Step)=>(
238+
<Step.Rootside="right"align="start">
239+
<Step.Title
240+
id="tours.apiTokens.FinalStep.title"
241+
defaultMessage="It’s time to deploy your application!"
242+
/>
243+
<Step.Content
244+
id="tours.apiTokens.FinalStep.content"
245+
defaultMessage="Your application is ready to be deployed and its content to be shared with the world!"
246+
/>
247+
<Step.ActionsshowStepCount={false}to="/"/>
248+
</Step.Root>
249+
),
242250
when:(completedActions)=>completedActions.includes('didCopyApiToken'),
243251
},
244252
]),

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp