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

Commit4863812

Browse files
authored
refactor: replace MUI Tooltip component with Tooltip (simple usage) (#20849)
for#19974 Redo of#20027, this time splitting it into multiple PRs + using ourexisting `Tooltip` component instead of creating a new component (seebelow). This PR covers the most basic usage of the MUI Tooltip, i.e.,the tooltip content is a string literal.~~Adds a global `TooltipProvider` to `AppProviders` and our Storybookdecorators, so that we don't have to render a `TooltipProvider` forevery tooltip instance. Removing redundant `TooltipProvider`s will beanother separate PR~~ <- this was done by#20869
1 parente340560 commit4863812

File tree

29 files changed

+563
-331
lines changed

29 files changed

+563
-331
lines changed

‎site/src/components/Badges/Badges.tsx‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
importtype{Interpolation,Theme}from"@emotion/react";
2-
importTooltipfrom"@mui/material/Tooltip";
32
import{Stack}from"components/Stack/Stack";
3+
import{
4+
Tooltip,
5+
TooltipContent,
6+
TooltipTrigger,
7+
}from"components/Tooltip/Tooltip";
48
import{
59
typeFC,
610
forwardRef,
@@ -69,16 +73,26 @@ export const NotHealthyBadge: FC = () => {
6973

7074
exportconstNotRegisteredBadge:FC=()=>{
7175
return(
72-
<Tooltiptitle="Workspace Proxy has never come online and needs to be started.">
73-
<spancss={[styles.badge,styles.warnBadge]}>Never seen</span>
76+
<Tooltip>
77+
<TooltipTriggerasChild>
78+
<spancss={[styles.badge,styles.warnBadge]}>Never seen</span>
79+
</TooltipTrigger>
80+
<TooltipContentside="bottom"className="max-w-xs">
81+
Workspace Proxy has never come online and needs to be started.
82+
</TooltipContent>
7483
</Tooltip>
7584
);
7685
};
7786

7887
exportconstNotReachableBadge:FC=()=>{
7988
return(
80-
<Tooltiptitle="Workspace Proxy not responding to http(s) requests.">
81-
<spancss={[styles.badge,styles.warnBadge]}>Not reachable</span>
89+
<Tooltip>
90+
<TooltipTriggerasChild>
91+
<spancss={[styles.badge,styles.warnBadge]}>Not reachable</span>
92+
</TooltipTrigger>
93+
<TooltipContentside="bottom"className="max-w-xs">
94+
Workspace Proxy not responding to http(s) requests.
95+
</TooltipContent>
8296
</Tooltip>
8397
);
8498
};

‎site/src/components/Latency/Latency.tsx‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import{useTheme}from"@emotion/react";
22
importCircularProgressfrom"@mui/material/CircularProgress";
3-
importTooltipfrom"@mui/material/Tooltip";
43
import{Abbr}from"components/Abbr/Abbr";
4+
import{
5+
Tooltip,
6+
TooltipContent,
7+
TooltipTrigger,
8+
}from"components/Tooltip/Tooltip";
59
import{CircleHelpIcon}from"lucide-react";
610
importtype{FC}from"react";
711
import{cn}from"utils/cn";
@@ -11,37 +15,50 @@ interface LatencyProps {
1115
latency?:number;
1216
isLoading?:boolean;
1317
className?:string;
14-
iconClassName?:string;
1518
}
1619

1720
exportconstLatency:FC<LatencyProps>=({
1821
latency,
1922
isLoading,
2023
className,
21-
iconClassName,
2224
})=>{
2325
consttheme=useTheme();
2426
// Always use the no latency color for loading.
2527
constcolor=getLatencyColor(theme,isLoading ?undefined :latency);
2628

2729
if(isLoading){
2830
return(
29-
<Tooltiptitle="Loading latency..."className={className}>
30-
<CircularProgress
31-
className={cn("!size-icon-xs",iconClassName)}
32-
style={{ color}}
33-
/>
31+
<Tooltip>
32+
<TooltipTriggerasChild>
33+
{/**
34+
* Spinning progress icon must be placed inside a fixed-size container,
35+
* to ensure tooltip remains stationary when opened
36+
*/}
37+
<div
38+
className={cn(
39+
"size-4 flex flex-wrap place-content-center",
40+
className,
41+
)}
42+
>
43+
<CircularProgressclassName="!size-icon-xs"style={{ color}}/>
44+
</div>
45+
</TooltipTrigger>
46+
<TooltipContentside="bottom">Loading latency...</TooltipContent>
3447
</Tooltip>
3548
);
3649
}
3750

3851
if(!latency){
3952
return(
40-
<Tooltiptitle="Latency not available"className={className}>
41-
<CircleHelpIcon
42-
className={cn("!size-icon-sm",iconClassName)}
43-
style={{ color}}
44-
/>
53+
<Tooltip>
54+
<TooltipTriggerasChild>
55+
<CircleHelpIcon
56+
aria-label="Latency not available"
57+
className={cn("!size-icon-sm",className)}
58+
style={{ color}}
59+
/>
60+
</TooltipTrigger>
61+
<TooltipContentside="bottom">Latency not available</TooltipContent>
4562
</Tooltip>
4663
);
4764
}

‎site/src/components/SearchField/SearchField.tsx‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
importIconButtonfrom"@mui/material/IconButton";
22
importInputAdornmentfrom"@mui/material/InputAdornment";
33
importTextField,{typeTextFieldProps}from"@mui/material/TextField";
4-
importTooltipfrom"@mui/material/Tooltip";
4+
import{
5+
Tooltip,
6+
TooltipContent,
7+
TooltipTrigger,
8+
}from"components/Tooltip/Tooltip";
59
import{useEffectEvent}from"hooks/hookPolyfills";
610
import{SearchIcon,XIcon}from"lucide-react";
711
import{typeFC,useLayoutEffect,useRef}from"react";
12+
813
exporttypeSearchFieldProps=Omit<TextFieldProps,"onChange">&{
914
onChange:(query:string)=>void;
1015
autoFocus?:boolean;
@@ -47,16 +52,19 @@ export const SearchField: FC<SearchFieldProps> = ({
4752
),
4853
endAdornment:value!==""&&(
4954
<InputAdornmentposition="end">
50-
<Tooltiptitle="Clear search">
51-
<IconButton
52-
size="small"
53-
onClick={()=>{
54-
onChange("");
55-
}}
56-
>
57-
<XIconclassName="size-icon-xs"/>
58-
<spanclassName="sr-only">Clear search</span>
59-
</IconButton>
55+
<Tooltip>
56+
<TooltipTriggerasChild>
57+
<IconButton
58+
size="small"
59+
onClick={()=>{
60+
onChange("");
61+
}}
62+
>
63+
<XIconclassName="size-icon-xs"/>
64+
<spanclassName="sr-only">Clear search</span>
65+
</IconButton>
66+
</TooltipTrigger>
67+
<TooltipContentside="bottom">Clear search</TooltipContent>
6068
</Tooltip>
6169
</InputAdornment>
6270
),

‎site/src/components/Tooltip/Tooltip.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ export const Tooltip = TooltipPrimitive.Root;
1414

1515
exportconstTooltipTrigger=TooltipPrimitive.Trigger;
1616

17+
exportconstTooltipArrow=TooltipPrimitive.Arrow;
18+
1719
exporttypeTooltipContentProps=React.ComponentPropsWithoutRef<
1820
typeofTooltipPrimitive.Content
1921
>&{

‎site/src/modules/dashboard/Navbar/ProxyMenu.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
112112
// to turn this off because otherwise, screen readers will skip over all
113113
// the descriptive text and will only have access to the latency options
114114
autoFocus={false}
115+
className="z-0"
115116
>
116117
{proxyContextValue.proxies&&
117118
proxyContextValue.proxies.length>1&&[

‎site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,15 @@ import {
66
}from"@emotion/react";
77
importDividerfrom"@mui/material/Divider";
88
importMenuItemfrom"@mui/material/MenuItem";
9-
importTooltipfrom"@mui/material/Tooltip";
109
import{PopoverClose}from"@radix-ui/react-popover";
1110
importtype*asTypesGenfrom"api/typesGenerated";
1211
import{CopyButton}from"components/CopyButton/CopyButton";
1312
import{Stack}from"components/Stack/Stack";
13+
import{
14+
Tooltip,
15+
TooltipContent,
16+
TooltipTrigger,
17+
}from"components/Tooltip/Tooltip";
1418
import{
1519
CircleUserIcon,
1620
LogOutIcon,
@@ -102,23 +106,31 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
102106
<Dividercss={{marginBottom:"0 !important"}}/>
103107

104108
<Stackcss={styles.info}spacing={0}>
105-
<Tooltiptitle="Browse the source code">
106-
<a
107-
css={[styles.footerText,styles.buildInfo]}
108-
href={buildInfo?.external_url}
109-
target="_blank"
110-
rel="noreferrer"
111-
>
112-
{buildInfo?.version}<SquareArrowOutUpRightIcon/>
113-
</a>
109+
<Tooltip>
110+
<TooltipTriggerasChild>
111+
<a
112+
css={[styles.footerText,styles.buildInfo]}
113+
href={buildInfo?.external_url}
114+
target="_blank"
115+
rel="noreferrer"
116+
>
117+
{buildInfo?.version}<SquareArrowOutUpRightIcon/>
118+
</a>
119+
</TooltipTrigger>
120+
<TooltipContentside="bottom">Browse the source code</TooltipContent>
114121
</Tooltip>
115122

116123
{buildInfo?.deployment_id&&(
117124
<divclassName="flex items-center text-xs">
118-
<Tooltiptitle="Deployment Identifier">
119-
<spanclassName="whitespace-nowrap overflow-hidden text-ellipsis">
120-
{buildInfo.deployment_id}
121-
</span>
125+
<Tooltip>
126+
<TooltipTriggerasChild>
127+
<spanclassName="whitespace-nowrap overflow-hidden text-ellipsis">
128+
{buildInfo.deployment_id}
129+
</span>
130+
</TooltipTrigger>
131+
<TooltipContentside="bottom">
132+
Deployment Identifier
133+
</TooltipContent>
122134
</Tooltip>
123135
<CopyButton
124136
text={buildInfo.deployment_id}

‎site/src/modules/provisioners/Provisioner.tsx‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import{useTheme}from"@emotion/react";
2-
importTooltipfrom"@mui/material/Tooltip";
32
importtype{HealthMessage,ProvisionerDaemon}from"api/typesGenerated";
43
import{Pill}from"components/Pill/Pill";
4+
import{
5+
Tooltip,
6+
TooltipContent,
7+
TooltipTrigger,
8+
}from"components/Tooltip/Tooltip";
59
import{Building2Icon,UserIcon}from"lucide-react";
610
importtype{FC}from"react";
711
import{createDayString}from"utils/createDayString";
@@ -74,16 +78,19 @@ export const Provisioner: FC<ProvisionerProps> = ({
7478
justifyContent:"right",
7579
}}
7680
>
77-
<Tooltiptitle="Scope">
78-
<Pillsize="lg"icon={iconScope}>
79-
<span
80-
css={{
81-
":first-letter":{textTransform:"uppercase"},
82-
}}
83-
>
84-
{daemonScope}
85-
</span>
86-
</Pill>
81+
<Tooltip>
82+
<TooltipTriggerasChild>
83+
<Pillsize="lg"icon={iconScope}>
84+
<span
85+
css={{
86+
":first-letter":{textTransform:"uppercase"},
87+
}}
88+
>
89+
{daemonScope}
90+
</span>
91+
</Pill>
92+
</TooltipTrigger>
93+
<TooltipContentside="bottom">Scope</TooltipContent>
8794
</Tooltip>
8895
{extraTags.map(([key,value])=>(
8996
<ProvisionerTagkey={key}tagName={key}tagValue={value}/>

‎site/src/modules/resources/AgentMetadata.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
importSkeletonfrom"@mui/material/Skeleton";
2-
importTooltipfrom"@mui/material/Tooltip";
32
import{watchAgentMetadata}from"api/api";
43
importtype{
54
ServerSentEvent,
@@ -8,6 +7,11 @@ import type {
87
}from"api/typesGenerated";
98
import{displayError}from"components/GlobalSnackbar/utils";
109
import{Stack}from"components/Stack/Stack";
10+
import{
11+
Tooltip,
12+
TooltipContent,
13+
TooltipTrigger,
14+
}from"components/Tooltip/Tooltip";
1115
importdayjsfrom"dayjs";
1216
import{
1317
typeFC,
@@ -183,10 +187,15 @@ const MetadataItem: FC<MetadataItemProps> = ({ item }) => {
183187
status==="loading" ?(
184188
<Skeletonwidth={65}height={12}variant="text"className="mt-[6px]"/>
185189
) :status==="stale" ?(
186-
<Tooltiptitle="This data is stale and no longer up to date">
187-
<StaticWidthclassName="text-ellipsis overflow-hidden whitespace-nowrap max-w-64 text-sm text-content-disabled cursor-pointer">
188-
{item.result.value}
189-
</StaticWidth>
190+
<Tooltip>
191+
<TooltipTriggerasChild>
192+
<StaticWidthclassName="text-ellipsis overflow-hidden whitespace-nowrap max-w-64 text-sm text-content-disabled cursor-pointer">
193+
{item.result.value}
194+
</StaticWidth>
195+
</TooltipTrigger>
196+
<TooltipContentside="bottom">
197+
This data is stale and no longer up to date
198+
</TooltipContent>
190199
</Tooltip>
191200
) :(
192201
<StaticWidth

‎site/src/modules/resources/AgentRow.stories.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,13 @@ export const BunchOfApps: Story = {
141141
},
142142
};
143143

144+
exportconstDisconnected:Story={
145+
args:{
146+
agent:M.MockWorkspaceAgentDisconnected,
147+
initialMetadata:[],
148+
},
149+
};
150+
144151
exportconstConnecting:Story={
145152
args:{
146153
agent:M.MockWorkspaceAgentConnecting,

0 commit comments

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