Skip to content

Commit b371230

Browse files
aqandrewaqandrew
committed
refactor: replace other deprecated Popovers which open on hover
- AppearanceSettingsPageView - OrganizationPills - ObservabilitySettingsPageView - CreateOrganizationPageView - PermissionPillsList - IdpPillList
1 parent 5e97617 commit b371230

File tree

8 files changed

+184
-226
lines changed

8 files changed

+184
-226
lines changed

‎site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,18 @@ import {
77
PremiumBadge,
88
} from "components/Badges/Badges";
99
import { Button } from "components/Button/Button";
10-
import {
11-
Popover,
12-
PopoverContent,
13-
PopoverTrigger,
14-
} from "components/deprecated/Popover/Popover";
1510
import { PopoverPaywall } from "components/Paywall/PopoverPaywall";
1611
import {
1712
SettingsHeader,
1813
SettingsHeaderDescription,
1914
SettingsHeaderTitle,
2015
} from "components/SettingsHeader/SettingsHeader";
16+
import {
17+
Tooltip,
18+
TooltipContent,
19+
TooltipProvider,
20+
TooltipTrigger,
21+
} from "components/Tooltip/Tooltip";
2122
import { useFormik } from "formik";
2223
import type { FC } from "react";
2324
import { getFormHelpers } from "utils/formUtils";
@@ -66,25 +67,31 @@ export const AppearanceSettingsPageView: FC<
6667
</SettingsHeader>
6768

6869
<Badges>
69-
<Popover mode="hover">
70-
{isEntitled && !isPremium ? (
71-
<EnterpriseBadge />
72-
) : (
73-
<PopoverTrigger>
74-
<span>
75-
<PremiumBadge />
76-
</span>
77-
</PopoverTrigger>
78-
)}
70+
<TooltipProvider>
71+
<Tooltip delayDuration={0}>
72+
{isEntitled && !isPremium ? (
73+
<EnterpriseBadge />
74+
) : (
75+
<TooltipTrigger asChild>
76+
<span>
77+
<PremiumBadge />
78+
</span>
79+
</TooltipTrigger>
80+
)}
7981

80-
<PopoverContent css={{ transform: "translateY(-28px)" }}>
81-
<PopoverPaywall
82-
message="Appearance"
83-
description="With a Premium license, you can customize the appearance and branding of your deployment."
84-
documentationLink="https://coder.com/docs/admin/appearance"
85-
/>
86-
</PopoverContent>
87-
</Popover>
82+
<TooltipContent
83+
sideOffset={-28}
84+
collisionPadding={16}
85+
className="p-0"
86+
>
87+
<PopoverPaywall
88+
message="Appearance"
89+
description="With a Premium license, you can customize the appearance and branding of your deployment."
90+
documentationLink="https://coder.com/docs/admin/appearance"
91+
/>
92+
</TooltipContent>
93+
</Tooltip>
94+
</TooltipProvider>
8895
</Badges>
8996

9097
<Fieldset

‎site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.stories.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
MockOrganization,
33
MockOrganization2,
4+
MockOrganization3,
45
MockOrganizationSyncSettings,
56
MockOrganizationSyncSettings2,
67
MockOrganizationSyncSettingsEmpty,
@@ -15,7 +16,7 @@ const meta: Meta<typeof IdpOrgSyncPageView> = {
1516
args: {
1617
organizationSyncSettings: MockOrganizationSyncSettings2,
1718
claimFieldValues: Object.keys(MockOrganizationSyncSettings2.mapping),
18-
organizations: [MockOrganization, MockOrganization2],
19+
organizations: [MockOrganization, MockOrganization2, MockOrganization3],
1920
error: undefined,
2021
},
2122
};

‎site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/OrganizationPills.tsx

Lines changed: 34 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { useTheme } from "@emotion/react";
2-
import {
3-
Popover,
4-
PopoverContent,
5-
PopoverTrigger,
6-
} from "components/deprecated/Popover/Popover";
71
import { Pill } from "components/Pill/Pill";
2+
import {
3+
Tooltip,
4+
TooltipContent,
5+
TooltipProvider,
6+
TooltipTrigger,
7+
} from "components/Tooltip/Tooltip";
88
import type { FC } from "react";
99
import { cn } from "utils/cn";
1010
import { isUUID } from "utils/uuid";
@@ -46,58 +46,35 @@ interface OverflowPillProps {
4646
}
4747

4848
const OverflowPillList: FC<OverflowPillProps> = ({ organizations }) => {
49-
const theme = useTheme();
50-
5149
return (
52-
<Popover mode="hover">
53-
<PopoverTrigger>
54-
<Pill
55-
className="min-h-4 min-w-6 bg-surface-secondary border-none px-3 py-1"
56-
data-testid="overflow-pill"
57-
>
58-
+{organizations.length}
59-
</Pill>
60-
</PopoverTrigger>
50+
<TooltipProvider>
51+
<Tooltip delayDuration={0}>
52+
<TooltipTrigger asChild>
53+
<Pill
54+
className="min-h-4 min-w-6 bg-surface-secondary border-none px-3 py-1"
55+
data-testid="overflow-pill"
56+
>
57+
+{organizations.length}
58+
</Pill>
59+
</TooltipTrigger>
6160

62-
<PopoverContent
63-
disableRestoreFocus
64-
disableScrollLock
65-
css={{
66-
".MuiPaper-root": {
67-
display: "flex",
68-
flexFlow: "column wrap",
69-
columnGap: 8,
70-
rowGap: 12,
71-
padding: "12px 16px",
72-
alignContent: "space-around",
73-
minWidth: "auto",
74-
backgroundColor: theme.palette.background.default,
75-
},
76-
}}
77-
anchorOrigin={{
78-
vertical: -4,
79-
horizontal: "center",
80-
}}
81-
transformOrigin={{
82-
vertical: "bottom",
83-
horizontal: "center",
84-
}}
85-
>
86-
<ul className="list-none my-0 pl-0">
87-
{organizations.map((organization) => (
88-
<li key={organization.name} className="mb-2 last:mb-0">
89-
<Pill
90-
className={cn("border-none w-fit", {
91-
"bg-surface-destructive": organization.isUUID,
92-
"bg-surface-secondary": !organization.isUUID,
93-
})}
94-
>
95-
{organization.name}
96-
</Pill>
97-
</li>
98-
))}
99-
</ul>
100-
</PopoverContent>
101-
</Popover>
61+
<TooltipContent className="px-4 py-3 border-surface-quaternary">
62+
<ul className="flex flex-col gap-2 list-none my-0 pl-0">
63+
{organizations.map((organization) => (
64+
<li key={organization.name}>
65+
<Pill
66+
className={cn("border-none w-fit", {
67+
"bg-surface-destructive": organization.isUUID,
68+
"bg-surface-secondary": !organization.isUUID,
69+
})}
70+
>
71+
{organization.name}
72+
</Pill>
73+
</li>
74+
))}
75+
</ul>
76+
</TooltipContent>
77+
</Tooltip>
78+
</TooltipProvider>
10279
);
10380
};

‎site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.stories.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,5 @@ export default meta;
5252
type Story = StoryObj<typeof ObservabilitySettingsPageView>;
5353

5454
export const Page: Story = {};
55+
56+
export const Premium: Story = { args: { isPremium: true } };

‎site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,6 @@ import {
44
EnterpriseBadge,
55
PremiumBadge,
66
} from "components/Badges/Badges";
7-
import {
8-
Popover,
9-
PopoverContent,
10-
PopoverTrigger,
11-
} from "components/deprecated/Popover/Popover";
127
import { PopoverPaywall } from "components/Paywall/PopoverPaywall";
138
import {
149
SettingsHeader,
@@ -17,6 +12,12 @@ import {
1712
SettingsHeaderTitle,
1813
} from "components/SettingsHeader/SettingsHeader";
1914
import { Stack } from "components/Stack/Stack";
15+
import {
16+
Tooltip,
17+
TooltipContent,
18+
TooltipProvider,
19+
TooltipTrigger,
20+
} from "components/Tooltip/Tooltip";
2021
import type { FC } from "react";
2122
import { deploymentGroupHasParent } from "utils/deployOptions";
2223
import { docs } from "utils/docs";
@@ -52,25 +53,31 @@ export const ObservabilitySettingsPageView: FC<
5253
</SettingsHeader>
5354

5455
<Badges>
55-
<Popover mode="hover">
56-
{featureAuditLogEnabled && !isPremium ? (
57-
<EnterpriseBadge />
58-
) : (
59-
<PopoverTrigger>
60-
<span>
61-
<PremiumBadge />
62-
</span>
63-
</PopoverTrigger>
64-
)}
56+
<TooltipProvider>
57+
<Tooltip delayDuration={0}>
58+
{featureAuditLogEnabled && !isPremium ? (
59+
<EnterpriseBadge />
60+
) : (
61+
<TooltipTrigger asChild>
62+
<span>
63+
<PremiumBadge />
64+
</span>
65+
</TooltipTrigger>
66+
)}
6567

66-
<PopoverContent css={{ transform: "translateY(-28px)" }}>
67-
<PopoverPaywall
68-
message="Observability"
69-
description="With a Premium license, you can monitor your application with logs and metrics."
70-
documentationLink="https://coder.com/docs/admin/appearance"
71-
/>
72-
</PopoverContent>
73-
</Popover>
68+
<TooltipContent
69+
sideOffset={-28}
70+
collisionPadding={16}
71+
className="p-0"
72+
>
73+
<PopoverPaywall
74+
message="Observability"
75+
description="With a Premium license, you can monitor your application with logs and metrics."
76+
documentationLink="https://coder.com/docs/admin/appearance"
77+
/>
78+
</TooltipContent>
79+
</Tooltip>
80+
</TooltipProvider>
7481
</Badges>
7582
</div>
7683

‎site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.tsx

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,16 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
55
import { Badges, PremiumBadge } from "components/Badges/Badges";
66
import { Button } from "components/Button/Button";
77
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
8-
import {
9-
Popover,
10-
PopoverContent,
11-
PopoverTrigger,
12-
} from "components/deprecated/Popover/Popover";
138
import { IconField } from "components/IconField/IconField";
149
import { Paywall } from "components/Paywall/Paywall";
1510
import { PopoverPaywall } from "components/Paywall/PopoverPaywall";
1611
import { Spinner } from "components/Spinner/Spinner";
12+
import {
13+
Tooltip,
14+
TooltipContent,
15+
TooltipProvider,
16+
TooltipTrigger,
17+
} from "components/Tooltip/Tooltip";
1718
import { useFormik } from "formik";
1819
import { ArrowLeft } from "lucide-react";
1920
import type { FC } from "react";
@@ -81,23 +82,29 @@ export const CreateOrganizationPageView: FC<
8182
)}
8283

8384
<Badges>
84-
<Popover mode="hover">
85-
{isEntitled && (
86-
<PopoverTrigger>
87-
<span>
88-
<PremiumBadge />
89-
</span>
90-
</PopoverTrigger>
91-
)}
85+
<TooltipProvider>
86+
<Tooltip delayDuration={0}>
87+
{isEntitled && (
88+
<TooltipTrigger asChild>
89+
<span>
90+
<PremiumBadge />
91+
</span>
92+
</TooltipTrigger>
93+
)}
9294

93-
<PopoverContent css={{ transform: "translateY(-28px)" }}>
94-
<PopoverPaywall
95-
message="Organizations"
96-
description="Create multiple organizations within a single Coder deployment, allowing several platform teams to operate with isolated users, templates, and distinct underlying infrastructure."
97-
documentationLink={docs("/admin/users/organizations")}
98-
/>
99-
</PopoverContent>
100-
</Popover>
95+
<TooltipContent
96+
sideOffset={-28}
97+
collisionPadding={16}
98+
className="p-0"
99+
>
100+
<PopoverPaywall
101+
message="Organizations"
102+
description="Create multiple organizations within a single Coder deployment, allowing several platform teams to operate with isolated users, templates, and distinct underlying infrastructure."
103+
documentationLink={docs("/admin/users/organizations")}
104+
/>
105+
</TooltipContent>
106+
</Tooltip>
107+
</TooltipProvider>
101108
</Badges>
102109

103110
<header className="flex flex-col items-center">

0 commit comments

Comments
 (0)