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

Commit8ecdda9

Browse files
authored
future: fix Final Step Popover has the LeftMenu link tooltip on top of it (#23966)
1 parent7899d70 commit8ecdda9

File tree

4 files changed

+91
-72
lines changed

4 files changed

+91
-72
lines changed

‎packages/core/admin/admin/src/components/LeftMenu.tsx

Lines changed: 55 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import * as React from 'react';
33
import{Divider,Flex,FlexComponent,useCollator}from'@strapi/design-system';
44
import{Lightning}from'@strapi/icons';
55
import{useIntl}from'react-intl';
6-
import{useLocation}from'react-router-dom';
6+
import{typeTo,useLocation}from'react-router-dom';
77
import{styled}from'styled-components';
88

99
import{useAuth}from'../features/Auth';
@@ -16,6 +16,7 @@ import { NavBrand } from './MainNav/NavBrand';
1616
import{NavLink}from'./MainNav/NavLink';
1717
import{NavUser}from'./MainNav/NavUser';
1818
import{TrialCountdown}from'./MainNav/TrialCountdown';
19+
import{toursasunstable_tours}from'./UnstableGuidedTour/Tours';
1920

2021
constsortLinks=(links:MenuItem[])=>{
2122
returnlinks.sort((a,b)=>{
@@ -47,6 +48,27 @@ const NavListWrapper = styled<FlexComponent<'ul'>>(Flex)`
4748

4849
interfaceLeftMenuPropsextendsPick<Menu,'generalSectionLinks'|'pluginsSectionLinks'>{}
4950

51+
constGuidedTourTooltip=({ to, children}:{to:To;children:React.ReactNode})=>{
52+
constnormalizedTo=to.toString().replace(/\//g,'');
53+
54+
switch(normalizedTo){
55+
case'content-manager':
56+
return(
57+
<unstable_tours.contentTypeBuilder.Finish>
58+
{children}
59+
</unstable_tours.contentTypeBuilder.Finish>
60+
);
61+
case'':
62+
return<unstable_tours.apiTokens.Finish>{children}</unstable_tours.apiTokens.Finish>;
63+
case'settings':
64+
return(
65+
<unstable_tours.contentManager.Finish>{children}</unstable_tours.contentManager.Finish>
66+
);
67+
default:
68+
returnchildren;
69+
}
70+
};
71+
5072
constLeftMenu=({ generalSectionLinks, pluginsSectionLinks}:LeftMenuProps)=>{
5173
constuser=useAuth('AuthenticatedApp',(state)=>state.user);
5274
const{ trackUsage}=useTracking();
@@ -90,36 +112,38 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) =
90112
constlabelValue=formatMessage(link.intlLabel);
91113
return(
92114
<Flextag="li"key={link.to}>
93-
<NavLink.Tooltiplabel={labelValue}>
94-
<NavLink.Link
95-
to={link.to}
96-
onClick={()=>handleClickOnLink(link.to)}
97-
aria-label={labelValue}
98-
>
99-
<NavLink.Iconlabel={labelValue}>
100-
<LinkIconwidth="20"height="20"fill="neutral500"/>
101-
</NavLink.Icon>
102-
{badgeContentLock ?(
103-
<NavLinkBadgeLock
104-
label="locked"
105-
textColor="neutral500"
106-
paddingLeft={0}
107-
paddingRight={0}
108-
>
109-
{badgeContentLock}
110-
</NavLinkBadgeLock>
111-
) :badgeContentNumeric ?(
112-
<NavLinkBadgeCounter
113-
label={badgeContentNumeric}
114-
backgroundColor="primary600"
115-
width="2.3rem"
116-
color="neutral0"
117-
>
118-
{badgeContentNumeric}
119-
</NavLinkBadgeCounter>
120-
) :null}
121-
</NavLink.Link>
122-
</NavLink.Tooltip>
115+
<GuidedTourTooltipto={link.to}>
116+
<NavLink.Tooltiplabel={labelValue}>
117+
<NavLink.Link
118+
to={link.to}
119+
onClick={()=>handleClickOnLink(link.to)}
120+
aria-label={labelValue}
121+
>
122+
<NavLink.Iconlabel={labelValue}>
123+
<LinkIconwidth="20"height="20"fill="neutral500"/>
124+
</NavLink.Icon>
125+
{badgeContentLock ?(
126+
<NavLinkBadgeLock
127+
label="locked"
128+
textColor="neutral500"
129+
paddingLeft={0}
130+
paddingRight={0}
131+
>
132+
{badgeContentLock}
133+
</NavLinkBadgeLock>
134+
) :badgeContentNumeric ?(
135+
<NavLinkBadgeCounter
136+
label={badgeContentNumeric}
137+
backgroundColor="primary600"
138+
width="2.3rem"
139+
color="neutral0"
140+
>
141+
{badgeContentNumeric}
142+
</NavLinkBadgeCounter>
143+
) :null}
144+
</NavLink.Link>
145+
</NavLink.Tooltip>
146+
</GuidedTourTooltip>
123147
</Flex>
124148
);
125149
})

‎packages/core/admin/admin/src/components/MainNav/NavLink.tsx

Lines changed: 4 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,8 @@ import {
77
BadgeProps,
88
AccessibleIcon,
99
}from'@strapi/design-system';
10-
import{NavLinkasRouterLink,LinkProps,To}from'react-router-dom';
10+
import{NavLinkasRouterLink,LinkProps}from'react-router-dom';
1111
import{styled}from'styled-components';
12-
13-
import{toursasunstable_tours}from'../UnstableGuidedTour/Tours';
14-
1512
/* -------------------------------------------------------------------------------------------------
1613
* Link
1714
* -----------------------------------------------------------------------------------------------*/
@@ -41,31 +38,9 @@ const MainNavLinkWrapper = styled(RouterLink)`
4138
}
4239
`;
4340

44-
constgetGuidedTourTooltip=(to:To)=>{
45-
constnormalizedTo=to.toString().replace(/\//g,'');
46-
47-
switch(normalizedTo){
48-
case'content-manager':
49-
returnunstable_tours.contentTypeBuilder.Finish;
50-
case'':
51-
returnunstable_tours.apiTokens.Finish;
52-
case'settings':
53-
returnunstable_tours.contentManager.Finish;
54-
default:
55-
returnReact.Fragment;
56-
}
57-
};
58-
59-
constLinkImpl=({ children, ...props}:LinkProps)=>{
60-
constGuidedTourTooltip=getGuidedTourTooltip(props.to);
61-
62-
return(
63-
<GuidedTourTooltip>
64-
<MainNavLinkWrapper{...props}>{children}</MainNavLinkWrapper>
65-
</GuidedTourTooltip>
66-
);
67-
};
68-
41+
constLinkImpl=({ children, ...props}:LinkProps)=>(
42+
<MainNavLinkWrapper{...props}>{children}</MainNavLinkWrapper>
43+
);
6944
/* -------------------------------------------------------------------------------------------------
7045
* Tooltip
7146
* -----------------------------------------------------------------------------------------------*/

‎packages/core/admin/admin/src/components/SubNav.tsx

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import{useId,useState,Fragment}from'react';
1+
import{useId,useState}from'react';
22

33
import{Box,SubNavasDSSubNav,Flex,Typography,IconButton}from'@strapi/design-system';
44
import{ChevronDown,Plus}from'@strapi/icons';
@@ -120,30 +120,49 @@ const Sections = ({ children, ...props }: { children: React.ReactNode[]; [key: s
120120
* This would be better in the content-type-builder package directly but currently
121121
* the SubNav API does not expose a way to wrap the link, instead it wraps the link and the list
122122
*/
123-
constgetGuidedTourTooltip=(sectionName:string)=>{
124-
switch(sectionName){
125-
case'Collection Types':
126-
returnunstable_tours.contentTypeBuilder.CollectionTypes;
127-
case'Single Types':
128-
returnunstable_tours.contentTypeBuilder.SingleTypes;
129-
case'Components':
130-
returnunstable_tours.contentTypeBuilder.Components;
123+
constGuidedTourTooltip=({
124+
sectionId,
125+
children,
126+
}:{
127+
sectionId?:string;
128+
children:React.ReactNode;
129+
})=>{
130+
switch(sectionId){
131+
case'models':
132+
return(
133+
<unstable_tours.contentTypeBuilder.CollectionTypes>
134+
{children}
135+
</unstable_tours.contentTypeBuilder.CollectionTypes>
136+
);
137+
case'singleTypes':
138+
return(
139+
<unstable_tours.contentTypeBuilder.SingleTypes>
140+
{children}
141+
</unstable_tours.contentTypeBuilder.SingleTypes>
142+
);
143+
case'components':
144+
return(
145+
<unstable_tours.contentTypeBuilder.Components>
146+
{children}
147+
</unstable_tours.contentTypeBuilder.Components>
148+
);
131149
default:
132-
returnFragment;
150+
returnchildren;
133151
}
134152
};
135153

136154
constSection=({
137155
label,
138156
children,
139157
link,
158+
sectionId,
140159
}:{
141160
label:string;
142161
children:React.ReactNode[];
143162
link?:{label:string;onClik:()=>void};
163+
sectionId?:string;
144164
})=>{
145165
constlistId=useId();
146-
constGuidedTourTooltip=getGuidedTourTooltip(label);
147166

148167
return(
149168
<Flexdirection="column"alignItems="stretch"gap={2}>
@@ -157,7 +176,7 @@ const Section = ({
157176
</Box>
158177
</Flex>
159178
{link&&(
160-
<GuidedTourTooltip>
179+
<GuidedTourTooltipsectionId={sectionId}>
161180
<IconButton
162181
label={link.label}
163182
variant="ghost"

‎packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/ContentTypeBuilderNav.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,7 @@ export const ContentTypeBuilderNav = () => {
219219
onClik:section.customLink?.onClick,
220220
}
221221
}
222+
sectionId={section.name}
222223
>
223224
{section.links.map((link)=>{
224225
constlinkLabel=formatMessage({id:link.name,defaultMessage:link.title});

0 commit comments

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