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

refactor: replace remaining MUI tooltips#20938

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.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Draft
aqandrew wants to merge4 commits intomain
base:main
Choose a base branch
Loading
fromaqandrew/replace-remaining-mui-tooltips
Draft
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 40 additions & 19 deletionssite/src/components/RichParameterInput/RichParameterInput.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,13 +5,17 @@ import type { InputBaseComponentProps } from "@mui/material/InputBase";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import TextField, { type TextFieldProps } from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import type { TemplateVersionParameter } from "api/typesGenerated";
import { Button } from "components/Button/Button";
import { ExternalImage } from "components/ExternalImage/ExternalImage";
import { MemoizedMarkdown } from "components/Markdown/Markdown";
import { Pill } from "components/Pill/Pill";
import { Stack } from "components/Stack/Stack";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import { CircleAlertIcon, SettingsIcon } from "lucide-react";
import { type FC, type ReactNode, useState } from "react";
import type {
Expand DownExpand Up@@ -136,25 +140,41 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
{displayName}

{!parameter.required && (
<Tooltip title="If no value is specified, the system will default to the value set by the administrator.">
<span css={styles.optionalLabel}>(optional)</span>
<Tooltip>
<TooltipTrigger asChild>
<span css={styles.optionalLabel}>(optional)</span>
</TooltipTrigger>
<TooltipContent side="bottom" className="max-w-xs">
If no value is specified, the system will default to the value set
by the administrator.
</TooltipContent>
</Tooltip>
)}
{!parameter.mutable && (
<Tooltip title="This value cannot be modified after the workspace has been created.">
<Pill
type="warning"
icon={<CircleAlertIcon className="size-icon-xs" />}
>
Immutable
</Pill>
<Tooltip>
<TooltipTrigger asChild>
<Pill
type="warning"
icon={<CircleAlertIcon className="size-icon-xs" />}
>
Immutable
</Pill>
</TooltipTrigger>
<TooltipContent side="bottom" className="max-w-xs">
This value cannot be modified after the workspace has been created.
</TooltipContent>
</Tooltip>
)}
{isPreset && (
<Tooltip title="This value was set by a preset">
<Pill type="info" icon={<SettingsIcon className="size-icon-xs" />}>
Preset
</Pill>
<Tooltip>
<TooltipTrigger asChild>
<Pill type="info" icon={<SettingsIcon className="size-icon-xs" />}>
Preset
</Pill>
</TooltipTrigger>
<TooltipContent side="bottom">
This value was set by a preset
</TooltipContent>
</Tooltip>
)}
</span>
Expand DownExpand Up@@ -328,14 +348,15 @@ const RichParameterField: FC<RichParameterInputProps> = ({
css={{ padding: small ? undefined : "4px 0" }}
>
{small ? (
<Tooltip
title={
<Tooltip>
<TooltipTrigger asChild>
<div>{option.name}</div>
</TooltipTrigger>
<TooltipContent side="bottom" className="max-w-xs">
<MemoizedMarkdown>
{option.description}
</MemoizedMarkdown>
}
>
<div>{option.name}</div>
</TooltipContent>
</Tooltip>
) : (
<>
Expand Down
28 changes: 12 additions & 16 deletionssite/src/modules/resources/AgentLogs/AgentLogs.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
import MuiTooltip from "@mui/material/Tooltip";
import type { WorkspaceAgentLogSource } from "api/typesGenerated";
import { Badge } from "components/Badge/Badge";
import type { Line } from "components/Logs/LogLine";
Expand DownExpand Up@@ -125,21 +124,18 @@ export const AgentLogs = forwardRef<List, AgentLogsProps>(
maxLineNumber={logs.length}
style={style}
sourceIcon={
<MuiTooltip
title={
<>
{logSource.display_name}
{assignedIcon && (
<i>
<br />
No icon specified!
</i>
)}
</>
}
>
{icon}
</MuiTooltip>
<Tooltip>
<TooltipTrigger asChild>{icon}</TooltipTrigger>
<TooltipContent side="bottom">
{logSource.display_name}
{assignedIcon && (
<i>
<br />
No icon specified!
</i>
)}
</TooltipContent>
</Tooltip>
}
/>
);
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
import Tooltip from "@mui/material/Tooltip";
import type { Workspace } from "api/typesGenerated";
import { Badge } from "components/Badge/Badge";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import type { FC } from "react";
import {
DATE_FORMAT,
Expand All@@ -16,34 +20,32 @@ export const WorkspaceDormantBadge: FC<WorkspaceDormantBadgeProps> = ({
workspace,
}) => {
return workspace.deleting_at ? (
<Tooltip
title={
<>
This workspace has not been used for{" "}
{relativeTimeWithoutSuffix(workspace.last_used_at)} and has been
marked dormant. It is scheduled to be deleted on{" "}
{formatDateTime(workspace.deleting_at, DATE_FORMAT.FULL_DATETIME)}.
</>
}
>
<Badge role="status" variant="destructive" size="xs">
Deletion Pending
</Badge>
<Tooltip>
<TooltipTrigger asChild>
<Badge role="status" variant="destructive" size="xs">
Deletion Pending
</Badge>
</TooltipTrigger>
<TooltipContent side="bottom" className="max-w-xs">
This workspace has not been used for{" "}
{relativeTimeWithoutSuffix(workspace.last_used_at)} and has been marked
dormant. It is scheduled to be deleted on{" "}
{formatDateTime(workspace.deleting_at, DATE_FORMAT.FULL_DATETIME)}.
</TooltipContent>
</Tooltip>
) : (
<Tooltip
title={
<>
This workspace has not been used for{" "}
{relativeTimeWithoutSuffix(workspace.last_used_at)} and has been
marked dormant. It is not scheduled for auto-deletion but will become
a candidate if auto-deletion is enabled on this template.
</>
}
>
<Badge role="status" variant="warning" size="xs">
Dormant
</Badge>
<Tooltip>
<TooltipTrigger asChild>
<Badge role="status" variant="warning" size="xs">
Dormant
</Badge>
</TooltipTrigger>
<TooltipContent side="bottom" className="max-w-xs">
This workspace has not been used for{" "}
{relativeTimeWithoutSuffix(workspace.last_used_at)} and has been marked
dormant. It is not scheduled for auto-deletion but will become a
candidate if auto-deletion is enabled on this template.
</TooltipContent>
</Tooltip>
);
};
25 changes: 15 additions & 10 deletionssite/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
import type { CSSObject, Interpolation, Theme } from "@emotion/react";
import Collapse from "@mui/material/Collapse";
import Link from "@mui/material/Link";
import Tooltip from "@mui/material/Tooltip";
import type { AuditLog, BuildReason } from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { Stack } from "components/Stack/Stack";
import { StatusPill } from "components/StatusPill/StatusPill";
import { TableCell } from "components/Table/Table";
import { TimelineEntry } from "components/Timeline/TimelineEntry";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import { InfoIcon, NetworkIcon } from "lucide-react";
import { type FC, useState } from "react";
import { Link as RouterLink } from "react-router";
Expand DownExpand Up@@ -128,8 +132,15 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
{/* With multi-org, there is not enough space so show
everything in a tooltip. */}
{showOrgDetails ? (
<Tooltip
title={
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon
css={(theme) => ({
color: theme.palette.info.light,
})}
/>
</TooltipTrigger>
<TooltipContent side="bottom">
<div css={styles.auditLogInfoTooltip}>
{auditLog.ip && (
<div>
Expand DownExpand Up@@ -181,13 +192,7 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
</div>
)}
</div>
}
>
<InfoIcon
css={(theme) => ({
color: theme.palette.info.light,
})}
/>
</TooltipContent>
</Tooltip>
) : (
<Stack direction="row" spacing={1} alignItems="baseline">
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
import type { CSSObject, Interpolation, Theme } from "@emotion/react";
import Link from "@mui/material/Link";
import Tooltip from "@mui/material/Tooltip";
import type { ConnectionLog } from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
import { Stack } from "components/Stack/Stack";
import { StatusPill } from "components/StatusPill/StatusPill";
import { TableCell } from "components/Table/Table";
import { TimelineEntry } from "components/Timeline/TimelineEntry";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import { InfoIcon, NetworkIcon } from "lucide-react";
import type { FC } from "react";
import { Link as RouterLink } from "react-router";
Expand DownExpand Up@@ -87,8 +91,15 @@ export const ConnectionLogRow: FC<ConnectionLogRowProps> = ({
label={isWeb ? "HTTP Status Code" : "SSH Exit Code"}
/>
)}
<Tooltip
title={
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon
css={(theme) => ({
color: theme.palette.info.light,
})}
/>
</TooltipTrigger>
<TooltipContent side="bottom">
<div css={styles.connectionLogInfoTooltip}>
{connectionLog.ip && (
<div>
Expand DownExpand Up@@ -133,13 +144,7 @@ export const ConnectionLogRow: FC<ConnectionLogRowProps> = ({
</div>
)}
</div>
}
>
<InfoIcon
css={(theme) => ({
color: theme.palette.info.light,
})}
/>
</TooltipContent>
</Tooltip>
</Stack>
</Stack>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
import Checkbox from "@mui/material/Checkbox";
import Tooltip from "@mui/material/Tooltip";
import type { SlimRole } from "api/typesGenerated";
import { Button } from "components/Button/Button";
import { CollapsibleSummary } from "components/CollapsibleSummary/CollapsibleSummary";
Expand All@@ -16,6 +15,11 @@ import {
PopoverContent,
PopoverTrigger,
} from "components/Popover/Popover";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import { UserIcon } from "lucide-react";
import { type FC, useEffect, useState } from "react";

Expand DownExpand Up@@ -130,18 +134,21 @@ const EnabledEditRolesButton: FC<EditRolesButtonProps> = ({

return (
<Popover>
<PopoverTrigger asChild>
<Tooltip title="Edit user roles">
<Button
variant="subtle"
aria-label="Edit user roles"
size="icon"
className="text-content-secondary hover:text-content-primary"
>
<EditSquare />
</Button>
</Tooltip>
</PopoverTrigger>
<Tooltip>
<PopoverTrigger asChild>
<TooltipTrigger asChild>
<Button
variant="subtle"
aria-label="Edit user roles"
size="icon"
className="text-content-secondary hover:text-content-primary"
>
<EditSquare />
</Button>
</TooltipTrigger>
</PopoverTrigger>
<TooltipContent side="bottom">Edit user roles</TooltipContent>
</Tooltip>

<PopoverContent
align="start"
Expand Down
Loading
Loading
[8]ページ先頭
©2009-2025 Movatter.jp