From 9b8a8f5e04080409e4dc1e4aa4d40b0454f71e5a Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Mon, 16 Dec 2024 16:46:57 +0000 Subject: [PATCH 1/2] feat: add shadcnui popover, deprecate MUI popover --- site/package.json | 1 + site/pnpm-lock.yaml | 215 ++++++++++++++ .../FeatureStageBadge/FeatureStageBadge.tsx | 2 +- .../components/HelpTooltip/HelpTooltip.tsx | 4 +- site/src/components/IconField/IconField.tsx | 4 +- .../components/Popover/Popover.stories.tsx | 26 +- site/src/components/Popover/Popover.tsx | 269 +++--------------- site/src/components/SelectMenu/SelectMenu.tsx | 10 +- .../deprecated/Popover/Popover.stories.tsx | 57 ++++ .../components/deprecated/Popover/Popover.tsx | 243 ++++++++++++++++ .../dashboard/Navbar/DeploymentDropdown.tsx | 2 +- .../Navbar/UserDropdown/UserDropdown.tsx | 4 +- .../UserDropdown/UserDropdownContent.test.tsx | 2 +- .../UserDropdown/UserDropdownContent.tsx | 2 +- .../modules/provisioners/ProvisionerGroup.tsx | 6 +- site/src/modules/resources/AgentLatency.tsx | 2 +- .../resources/AgentOutdatedTooltip.tsx | 2 +- site/src/modules/resources/AgentStatus.tsx | 2 +- .../modules/resources/PortForwardButton.tsx | 2 +- .../modules/resources/SSHButton/SSHButton.tsx | 4 +- .../WorkspaceOutdatedTooltip.tsx | 2 +- .../AppearanceSettingsPageView.tsx | 4 +- .../IdpOrgSyncPage/OrganizationPills.tsx | 2 +- .../ObservabilitySettingsPageView.tsx | 6 +- .../CreateOrganizationPageView.tsx | 6 +- .../CustomRolesPage/PermissionPillsList.tsx | 2 +- .../IdpSyncPage/IdpPillList.tsx | 2 +- .../UserTable/EditRolesButton.tsx | 4 +- .../UserTable/UserRoleCell.tsx | 2 +- .../TemplateInsightsPage/DateRange.tsx | 2 +- .../ProvisionerTagsPopover.tsx | 4 +- .../UsersPage/UsersTable/UserGroupsCell.tsx | 6 +- .../BuildParametersPopover.tsx | 4 +- .../WorkspaceNotifications/Notifications.tsx | 2 +- .../pages/WorkspacePage/WorkspaceTopbar.tsx | 2 +- .../pages/WorkspacesPage/WorkspacesButton.tsx | 6 +- 36 files changed, 613 insertions(+), 302 deletions(-) create mode 100644 site/src/components/deprecated/Popover/Popover.stories.tsx create mode 100644 site/src/components/deprecated/Popover/Popover.tsx diff --git a/site/package.json b/site/package.json index e4d65d55f7c5f..d3971f7bb4945 100644 --- a/site/package.json +++ b/site/package.json @@ -53,6 +53,7 @@ "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-dialog": "1.1.2", "@radix-ui/react-label": "2.1.0", + "@radix-ui/react-popover": "1.1.3", "@radix-ui/react-slider": "1.2.1", "@radix-ui/react-slot": "1.1.0", "@radix-ui/react-switch": "1.1.1", diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml index e0d1cfab8b2f3..f0f3da397d2f1 100644 --- a/site/pnpm-lock.yaml +++ b/site/pnpm-lock.yaml @@ -72,6 +72,9 @@ importers: '@radix-ui/react-label': specifier: 2.1.0 version: 2.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-popover': + specifier: 1.1.3 + version: 1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-slider': specifier: 1.2.1 version: 1.2.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1553,6 +1556,22 @@ packages: '@radix-ui/primitive@1.1.0': resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==} + '@radix-ui/primitive@1.1.1': + resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==} + + '@radix-ui/react-arrow@1.1.1': + resolution: {integrity: sha512-NaVpZfmv8SKeZbn4ijN2V3jlHA9ngBG16VnIIm22nUR0Yk8KUALyBxT3KYEUnNuch9sTE8UTsS3whzBgKOL30w==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-avatar@1.1.2': resolution: {integrity: sha512-GaC7bXQZ5VgZvVvsJ5mu/AEbjYLnhhkoidOboC50Z6FFlLA03wG2ianUoH+zgDQ31/9gCF59bE4+2bBgTyMiig==} peerDependencies: @@ -1694,6 +1713,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-dismissable-layer@1.1.2': + resolution: {integrity: sha512-kEHnlhv7wUggvhuJPkyw4qspXLJOdYoAP4dO2c8ngGuXTq1w/HZp1YeVB+NQ2KbH1iEG+pvOCGYSqh9HZOz6hg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-focus-guards@1.0.1': resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==} peerDependencies: @@ -1738,6 +1770,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-focus-scope@1.1.1': + resolution: {integrity: sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-id@1.0.1': resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==} peerDependencies: @@ -1769,6 +1814,32 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-popover@1.1.3': + resolution: {integrity: sha512-MBDKFwRe6fi0LT8m/Jl4V8J3WbS/UfXJtsgg8Ym5w5AyPG3XfHH4zhBp1P8HmZK83T8J7UzVm6/JpDE3WMl1Dw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + + '@radix-ui/react-popper@1.2.1': + resolution: {integrity: sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-portal@1.0.4': resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==} peerDependencies: @@ -1795,6 +1866,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-portal@1.1.3': + resolution: {integrity: sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-presence@1.0.1': resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==} peerDependencies: @@ -1821,6 +1905,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-presence@1.1.2': + resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-primitive@1.0.3': resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==} peerDependencies: @@ -1994,6 +2091,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-use-rect@1.1.0': + resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-use-size@1.1.0': resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==} peerDependencies: @@ -2016,6 +2122,9 @@ packages: '@types/react-dom': optional: true + '@radix-ui/rect@1.1.0': + resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==} + '@remix-run/router@1.19.2': resolution: {integrity: sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==} engines: {node: '>=14.0.0'} @@ -3560,6 +3669,7 @@ packages: eslint@8.52.0: resolution: {integrity: sha512-zh/JHnaixqHZsolRB/w9/02akBk9EPrOs9JwcTP2ek7yL5bVvXuRariiaAjjoJ5DvuwQ1WAE/HsMz+w17YgBCg==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options. hasBin: true espree@9.6.1: @@ -7259,6 +7369,17 @@ snapshots: '@radix-ui/primitive@1.1.0': {} + '@radix-ui/primitive@1.1.1': {} + + '@radix-ui/react-arrow@1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.12 + '@types/react-dom': 18.3.1 + '@radix-ui/react-avatar@1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1) @@ -7399,6 +7520,19 @@ snapshots: '@types/react': 18.3.12 '@types/react-dom': 18.3.1 + '@radix-ui/react-dismissable-layer@1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/primitive': 1.1.1 + '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@18.3.12)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.12 + '@types/react-dom': 18.3.1 + '@radix-ui/react-focus-guards@1.0.1(@types/react@18.3.12)(react@18.3.1)': dependencies: '@babel/runtime': 7.25.6 @@ -7435,6 +7569,17 @@ snapshots: '@types/react': 18.3.12 '@types/react-dom': 18.3.1 + '@radix-ui/react-focus-scope@1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.12)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.12 + '@types/react-dom': 18.3.1 + '@radix-ui/react-id@1.0.1(@types/react@18.3.12)(react@18.3.1)': dependencies: '@babel/runtime': 7.25.6 @@ -7459,6 +7604,47 @@ snapshots: '@types/react': 18.3.12 '@types/react-dom': 18.3.1 + '@radix-ui/react-popover@1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/primitive': 1.1.1 + '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-dismissable-layer': 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-slot': 1.1.1(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.12)(react@18.3.1) + aria-hidden: 1.2.4 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-remove-scroll: 2.6.0(@types/react@18.3.12)(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.12 + '@types/react-dom': 18.3.1 + + '@radix-ui/react-popper@1.2.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-arrow': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-use-rect': 1.1.0(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/rect': 1.1.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.12 + '@types/react-dom': 18.3.1 + '@radix-ui/react-portal@1.0.4(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.25.6 @@ -7479,6 +7665,16 @@ snapshots: '@types/react': 18.3.12 '@types/react-dom': 18.3.1 + '@radix-ui/react-portal@1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.12 + '@types/react-dom': 18.3.1 + '@radix-ui/react-presence@1.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.25.6 @@ -7500,6 +7696,16 @@ snapshots: '@types/react': 18.3.12 '@types/react-dom': 18.3.1 + '@radix-ui/react-presence@1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.12 + '@types/react-dom': 18.3.1 + '@radix-ui/react-primitive@1.0.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.25.6 @@ -7646,6 +7852,13 @@ snapshots: optionalDependencies: '@types/react': 18.3.12 + '@radix-ui/react-use-rect@1.1.0(@types/react@18.3.12)(react@18.3.1)': + dependencies: + '@radix-ui/rect': 1.1.0 + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.12 + '@radix-ui/react-use-size@1.1.0(@types/react@18.3.12)(react@18.3.1)': dependencies: '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1) @@ -7662,6 +7875,8 @@ snapshots: '@types/react': 18.3.12 '@types/react-dom': 18.3.1 + '@radix-ui/rect@1.1.0': {} + '@remix-run/router@1.19.2': {} '@rollup/pluginutils@5.0.5(rollup@4.24.3)': diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx index 763b180d03bbe..c73d60e0ee56e 100644 --- a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx +++ b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx @@ -2,7 +2,7 @@ import type { Interpolation, Theme } from "@emotion/react"; import Link from "@mui/material/Link"; import { visuallyHidden } from "@mui/utils"; import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip"; -import { Popover, PopoverTrigger } from "components/Popover/Popover"; +import { Popover, PopoverTrigger } from "components/deprecated/Popover/Popover"; import type { FC, HTMLAttributes, ReactNode } from "react"; import { docs } from "utils/docs"; diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx index be76241a95167..cf30e2b169e33 100644 --- a/site/src/components/HelpTooltip/HelpTooltip.tsx +++ b/site/src/components/HelpTooltip/HelpTooltip.tsx @@ -8,6 +8,7 @@ import { import HelpIcon from "@mui/icons-material/HelpOutline"; import OpenInNewIcon from "@mui/icons-material/OpenInNew"; import Link from "@mui/material/Link"; +import { Stack } from "components/Stack/Stack"; import { Popover, PopoverContent, @@ -15,8 +16,7 @@ import { type PopoverProps, PopoverTrigger, usePopover, -} from "components/Popover/Popover"; -import { Stack } from "components/Stack/Stack"; +} from "components/deprecated/Popover/Popover"; import { type FC, type HTMLAttributes, diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx index 6f296fec69c0b..b55ed59445dc6 100644 --- a/site/src/components/IconField/IconField.tsx +++ b/site/src/components/IconField/IconField.tsx @@ -6,12 +6,12 @@ import { visuallyHidden } from "@mui/utils"; import { DropdownArrow } from "components/DropdownArrow/DropdownArrow"; import { ExternalImage } from "components/ExternalImage/ExternalImage"; import { Loader } from "components/Loader/Loader"; +import { Stack } from "components/Stack/Stack"; import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; -import { Stack } from "components/Stack/Stack"; +} from "components/deprecated/Popover/Popover"; import { type FC, Suspense, lazy, useState } from "react"; // See: https://github.com/missive/emoji-mart/issues/51#issuecomment-287353222 diff --git a/site/src/components/Popover/Popover.stories.tsx b/site/src/components/Popover/Popover.stories.tsx index 3e61307c58576..f0e57902175b4 100644 --- a/site/src/components/Popover/Popover.stories.tsx +++ b/site/src/components/Popover/Popover.stories.tsx @@ -1,6 +1,6 @@ -import Button from "@mui/material/Button"; import type { Meta, StoryObj } from "@storybook/react"; import { expect, screen, userEvent, waitFor, within } from "@storybook/test"; +import { Button } from "components/Button/Button"; import { Popover, PopoverContent, PopoverTrigger } from "./Popover"; const meta: Meta = { @@ -17,15 +17,15 @@ Its wings are too small to get its fat little body off the ground. The bee, of c flies anyway because bees don't care what humans think is impossible. `; -export const Example: Story = { +export const Default: Story = { args: { children: ( - <> - - + + + {content} - + ), }, play: async ({ canvasElement, step }) => { @@ -42,16 +42,16 @@ export const Example: Story = { }, }; -export const Horizontal: Story = { +export const AlignStart: Story = { args: { children: ( - <> - - + + + - {content} - + {content} + ), }, - play: Example.play, + play: Default.play, }; diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx index 654be6d7931ae..93257da15e7db 100644 --- a/site/src/components/Popover/Popover.tsx +++ b/site/src/components/Popover/Popover.tsx @@ -1,240 +1,35 @@ -import MuiPopover, { - type PopoverProps as MuiPopoverProps, - // biome-ignore lint/nursery/noRestrictedImports: This is the base component that our custom popover is based on -} from "@mui/material/Popover"; +import * as PopoverPrimitive from "@radix-ui/react-popover"; import { - type FC, - type HTMLAttributes, - type PointerEvent, - type PointerEventHandler, - type ReactElement, - type ReactNode, - type RefObject, - cloneElement, - createContext, - useContext, - useEffect, - useId, - useRef, - useState, + type ComponentPropsWithoutRef, + type ElementRef, + forwardRef, } from "react"; - -type TriggerMode = "hover" | "click"; - -type TriggerRef = RefObject; - -// Have to append ReactNode type to satisfy React's cloneElement function. It -// has absolutely no bearing on what happens at runtime -type TriggerElement = ReactNode & - ReactElement<{ - ref: TriggerRef; - onClick?: () => void; - }>; - -type PopoverContextValue = { - id: string; - open: boolean; - setOpen: (open: boolean) => void; - triggerRef: TriggerRef; - mode: TriggerMode; -}; - -const PopoverContext = createContext( - undefined, -); - -type BasePopoverProps = { - children: ReactNode; - mode?: TriggerMode; -}; - -// By separating controlled and uncontrolled props, we achieve more accurate -// type inference. -type UncontrolledPopoverProps = BasePopoverProps & { - open?: undefined; - onOpenChange?: undefined; -}; - -type ControlledPopoverProps = BasePopoverProps & { - open: boolean; - onOpenChange: (open: boolean) => void; -}; - -export type PopoverProps = UncontrolledPopoverProps | ControlledPopoverProps; - -export const Popover: FC = (props) => { - const hookId = useId(); - const [uncontrolledOpen, setUncontrolledOpen] = useState(false); - const triggerRef: TriggerRef = useRef(null); - - // Helps makes sure that popovers close properly when the user switches to - // a different tab. This won't help with controlled instances of the - // component, but this is basically the most we can do from here - useEffect(() => { - const closeOnTabSwitch = () => setUncontrolledOpen(false); - window.addEventListener("blur", closeOnTabSwitch); - return () => window.removeEventListener("blur", closeOnTabSwitch); - }, []); - - const value: PopoverContextValue = { - triggerRef, - id: `${hookId}-popover`, - mode: props.mode ?? "click", - open: props.open ?? uncontrolledOpen, - setOpen: props.onOpenChange ?? setUncontrolledOpen, - }; - - return ( - - {props.children} - - ); -}; - -export const usePopover = () => { - const context = useContext(PopoverContext); - if (!context) { - throw new Error( - "Popover compound components cannot be rendered outside the Popover component", - ); - } - return context; -}; - -type PopoverTriggerRenderProps = Readonly<{ - isOpen: boolean; -}>; - -type PopoverTriggerProps = Readonly< - Omit, "children"> & { - children: - | TriggerElement - | ((props: PopoverTriggerRenderProps) => TriggerElement); - } ->; - -export const PopoverTrigger: FC = (props) => { - const popover = usePopover(); - const { children, onClick, onPointerEnter, onPointerLeave, ...elementProps } = - props; - - const clickProps = { - onClick: (event: PointerEvent) => { - popover.setOpen(true); - onClick?.(event); - }, - }; - - const hoverProps = { - onPointerEnter: (event: PointerEvent) => { - popover.setOpen(true); - onPointerEnter?.(event); - }, - onPointerLeave: (event: PointerEvent) => { - popover.setOpen(false); - onPointerLeave?.(event); - }, - }; - - const evaluatedChildren = - typeof children === "function" - ? children({ isOpen: popover.open }) - : children; - - return cloneElement(evaluatedChildren, { - ...elementProps, - ...(popover.mode === "click" ? clickProps : hoverProps), - "aria-haspopup": true, - "aria-owns": popover.id, - "aria-expanded": popover.open, - ref: popover.triggerRef, - }); -}; - -type Horizontal = "left" | "right"; - -export type PopoverContentProps = Omit< - MuiPopoverProps, - "open" | "onClose" | "anchorEl" -> & { - horizontal?: Horizontal; -}; - -export const PopoverContent: FC = ({ - horizontal = "left", - onPointerEnter, - onPointerLeave, - ...popoverProps -}) => { - const popover = usePopover(); - const hoverMode = popover.mode === "hover"; - - return ( - popover.setOpen(false)} - anchorEl={popover.triggerRef.current} +import { cn } from "utils/cn"; + +export const Popover = PopoverPrimitive.Root; + +export const PopoverTrigger = PopoverPrimitive.Trigger; + +export const PopoverContent = forwardRef< + ElementRef, + ComponentPropsWithoutRef +>(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( + + - ); -}; - -const modeProps = ( - popover: PopoverContextValue, - externalOnPointerEnter: PointerEventHandler | undefined, - externalOnPointerLeave: PointerEventHandler | undefined, -) => { - if (popover.mode === "hover") { - return { - onPointerEnter: (event: PointerEvent) => { - popover.setOpen(true); - externalOnPointerEnter?.(event); - }, - onPointerLeave: (event: PointerEvent) => { - popover.setOpen(false); - externalOnPointerLeave?.(event); - }, - }; - } - - return {}; -}; - -const horizontalProps = (horizontal: Horizontal) => { - if (horizontal === "right") { - return { - anchorOrigin: { - vertical: "bottom", - horizontal: "right", - }, - transformOrigin: { - vertical: "top", - horizontal: "right", - }, - } as const; - } - - return { - anchorOrigin: { - vertical: "bottom", - horizontal: "left", - }, - } as const; -}; + +)); diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx index 2cfa7d436710b..e7877db30222b 100644 --- a/site/src/components/SelectMenu/SelectMenu.tsx +++ b/site/src/components/SelectMenu/SelectMenu.tsx @@ -3,15 +3,15 @@ import Button, { type ButtonProps } from "@mui/material/Button"; import MenuItem, { type MenuItemProps } from "@mui/material/MenuItem"; import MenuList, { type MenuListProps } from "@mui/material/MenuList"; import { DropdownArrow } from "components/DropdownArrow/DropdownArrow"; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "components/Popover/Popover"; import { SearchField, type SearchFieldProps, } from "components/SearchField/SearchField"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "components/deprecated/Popover/Popover"; import { Children, type FC, diff --git a/site/src/components/deprecated/Popover/Popover.stories.tsx b/site/src/components/deprecated/Popover/Popover.stories.tsx new file mode 100644 index 0000000000000..ad1c9d4b346cf --- /dev/null +++ b/site/src/components/deprecated/Popover/Popover.stories.tsx @@ -0,0 +1,57 @@ +import Button from "@mui/material/Button"; +import type { Meta, StoryObj } from "@storybook/react"; +import { expect, screen, userEvent, waitFor, within } from "@storybook/test"; +import { Popover, PopoverContent, PopoverTrigger } from "./Popover"; + +const meta: Meta = { + title: "components/PopoverDeprecated", + component: Popover, +}; + +export default meta; +type Story = StoryObj; + +const content = ` +According to all known laws of aviation, there is no way a bee should be able to fly. +Its wings are too small to get its fat little body off the ground. The bee, of course, +flies anyway because bees don't care what humans think is impossible. +`; + +export const Example: Story = { + args: { + children: ( + <> + + + + {content} + + ), + }, + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + await step("click to open", async () => { + await userEvent.click(canvas.getByRole("button")); + await waitFor(() => + expect( + screen.getByText(/according to all known laws/i), + ).toBeInTheDocument(), + ); + }); + }, +}; + +export const Horizontal: Story = { + args: { + children: ( + <> + + + + {content} + + ), + }, + play: Example.play, +}; diff --git a/site/src/components/deprecated/Popover/Popover.tsx b/site/src/components/deprecated/Popover/Popover.tsx new file mode 100644 index 0000000000000..a7f39810e43b2 --- /dev/null +++ b/site/src/components/deprecated/Popover/Popover.tsx @@ -0,0 +1,243 @@ +import MuiPopover, { + type PopoverProps as MuiPopoverProps, + // biome-ignore lint/nursery/noRestrictedImports: This is the base component that our custom popover is based on +} from "@mui/material/Popover"; +import { + type FC, + type HTMLAttributes, + type PointerEvent, + type PointerEventHandler, + type ReactElement, + type ReactNode, + type RefObject, + cloneElement, + createContext, + useContext, + useEffect, + useId, + useRef, + useState, +} from "react"; + +type TriggerMode = "hover" | "click"; + +type TriggerRef = RefObject; + +// Have to append ReactNode type to satisfy React's cloneElement function. It +// has absolutely no bearing on what happens at runtime +type TriggerElement = ReactNode & + ReactElement<{ + ref: TriggerRef; + onClick?: () => void; + }>; + +type PopoverContextValue = { + id: string; + open: boolean; + setOpen: (open: boolean) => void; + triggerRef: TriggerRef; + mode: TriggerMode; +}; + +const PopoverContext = createContext( + undefined, +); + +type BasePopoverProps = { + children: ReactNode; + mode?: TriggerMode; +}; + +// By separating controlled and uncontrolled props, we achieve more accurate +// type inference. +type UncontrolledPopoverProps = BasePopoverProps & { + open?: undefined; + onOpenChange?: undefined; +}; + +type ControlledPopoverProps = BasePopoverProps & { + open: boolean; + onOpenChange: (open: boolean) => void; +}; + +export type PopoverProps = UncontrolledPopoverProps | ControlledPopoverProps; + +/** @deprecated prefer `components.Popover` */ +export const Popover: FC = (props) => { + const hookId = useId(); + const [uncontrolledOpen, setUncontrolledOpen] = useState(false); + const triggerRef: TriggerRef = useRef(null); + + // Helps makes sure that popovers close properly when the user switches to + // a different tab. This won't help with controlled instances of the + // component, but this is basically the most we can do from here + useEffect(() => { + const closeOnTabSwitch = () => setUncontrolledOpen(false); + window.addEventListener("blur", closeOnTabSwitch); + return () => window.removeEventListener("blur", closeOnTabSwitch); + }, []); + + const value: PopoverContextValue = { + triggerRef, + id: `${hookId}-popover`, + mode: props.mode ?? "click", + open: props.open ?? uncontrolledOpen, + setOpen: props.onOpenChange ?? setUncontrolledOpen, + }; + + return ( + + {props.children} + + ); +}; + +export const usePopover = () => { + const context = useContext(PopoverContext); + if (!context) { + throw new Error( + "Popover compound components cannot be rendered outside the Popover component", + ); + } + return context; +}; + +type PopoverTriggerRenderProps = Readonly<{ + isOpen: boolean; +}>; + +type PopoverTriggerProps = Readonly< + Omit, "children"> & { + children: + | TriggerElement + | ((props: PopoverTriggerRenderProps) => TriggerElement); + } +>; + +/** @deprecated prefer `components.Popover.PopoverTrigger` */ +export const PopoverTrigger: FC = (props) => { + const popover = usePopover(); + const { children, onClick, onPointerEnter, onPointerLeave, ...elementProps } = + props; + + const clickProps = { + onClick: (event: PointerEvent) => { + popover.setOpen(true); + onClick?.(event); + }, + }; + + const hoverProps = { + onPointerEnter: (event: PointerEvent) => { + popover.setOpen(true); + onPointerEnter?.(event); + }, + onPointerLeave: (event: PointerEvent) => { + popover.setOpen(false); + onPointerLeave?.(event); + }, + }; + + const evaluatedChildren = + typeof children === "function" + ? children({ isOpen: popover.open }) + : children; + + return cloneElement(evaluatedChildren, { + ...elementProps, + ...(popover.mode === "click" ? clickProps : hoverProps), + "aria-haspopup": true, + "aria-owns": popover.id, + "aria-expanded": popover.open, + ref: popover.triggerRef, + }); +}; + +type Horizontal = "left" | "right"; + +export type PopoverContentProps = Omit< + MuiPopoverProps, + "open" | "onClose" | "anchorEl" +> & { + horizontal?: Horizontal; +}; + +/** @deprecated prefer `components.Popover.PopoverContent` */ +export const PopoverContent: FC = ({ + horizontal = "left", + onPointerEnter, + onPointerLeave, + ...popoverProps +}) => { + const popover = usePopover(); + const hoverMode = popover.mode === "hover"; + + return ( + popover.setOpen(false)} + anchorEl={popover.triggerRef.current} + /> + ); +}; + +const modeProps = ( + popover: PopoverContextValue, + externalOnPointerEnter: PointerEventHandler | undefined, + externalOnPointerLeave: PointerEventHandler | undefined, +) => { + if (popover.mode === "hover") { + return { + onPointerEnter: (event: PointerEvent) => { + popover.setOpen(true); + externalOnPointerEnter?.(event); + }, + onPointerLeave: (event: PointerEvent) => { + popover.setOpen(false); + externalOnPointerLeave?.(event); + }, + }; + } + + return {}; +}; + +const horizontalProps = (horizontal: Horizontal) => { + if (horizontal === "right") { + return { + anchorOrigin: { + vertical: "bottom", + horizontal: "right", + }, + transformOrigin: { + vertical: "top", + horizontal: "right", + }, + } as const; + } + + return { + anchorOrigin: { + vertical: "bottom", + horizontal: "left", + }, + } as const; +}; diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx index ec55c2ac3728a..9a3f5f577fcb5 100644 --- a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx +++ b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx @@ -7,7 +7,7 @@ import { PopoverContent, PopoverTrigger, usePopover, -} from "components/Popover/Popover"; +} from "components/deprecated/Popover/Popover"; import { linkToAuditing, linkToUsers } from "modules/navigation"; import type { FC } from "react"; import { NavLink } from "react-router-dom"; diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx index ea44a4f3dfcb3..caa01ecce0aa6 100644 --- a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx +++ b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx @@ -2,12 +2,12 @@ import { type Interpolation, type Theme, css, useTheme } from "@emotion/react"; import Badge from "@mui/material/Badge"; import type * as TypesGen from "api/typesGenerated"; import { DropdownArrow } from "components/DropdownArrow/DropdownArrow"; +import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; -import { UserAvatar } from "components/UserAvatar/UserAvatar"; +} from "components/deprecated/Popover/Popover"; import { type FC, useState } from "react"; import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants"; import { UserDropdownContent } from "./UserDropdownContent"; diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.test.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.test.tsx index 354dc6de359d1..d4f3858d17fef 100644 --- a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.test.tsx +++ b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.test.tsx @@ -1,5 +1,5 @@ import { screen } from "@testing-library/react"; -import { Popover } from "components/Popover/Popover"; +import { Popover } from "components/deprecated/Popover/Popover"; import { MockUser } from "testHelpers/entities"; import { render, waitForLoaderToBeRemoved } from "testHelpers/renderHelpers"; import { Language, UserDropdownContent } from "./UserDropdownContent"; diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx index 11424f8d0f4da..a6a3d2f3d0a1b 100644 --- a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx +++ b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx @@ -17,8 +17,8 @@ import Tooltip from "@mui/material/Tooltip"; import type * as TypesGen from "api/typesGenerated"; import { CopyButton } from "components/CopyButton/CopyButton"; import { ExternalImage } from "components/ExternalImage/ExternalImage"; -import { usePopover } from "components/Popover/Popover"; import { Stack } from "components/Stack/Stack"; +import { usePopover } from "components/deprecated/Popover/Popover"; import type { FC } from "react"; import { Link } from "react-router-dom"; diff --git a/site/src/modules/provisioners/ProvisionerGroup.tsx b/site/src/modules/provisioners/ProvisionerGroup.tsx index 79bcac0c9ba20..0ced550b77fc3 100644 --- a/site/src/modules/provisioners/ProvisionerGroup.tsx +++ b/site/src/modules/provisioners/ProvisionerGroup.tsx @@ -15,13 +15,13 @@ import { HelpTooltipTrigger, } from "components/HelpTooltip/HelpTooltip"; import { Pill } from "components/Pill/Pill"; +import { Stack } from "components/Stack/Stack"; +import { StatusIndicator } from "components/StatusIndicator/StatusIndicator"; import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; -import { Stack } from "components/Stack/Stack"; -import { StatusIndicator } from "components/StatusIndicator/StatusIndicator"; +} from "components/deprecated/Popover/Popover"; import { type FC, useState } from "react"; import { createDayString } from "utils/createDayString"; import { docs } from "utils/docs"; diff --git a/site/src/modules/resources/AgentLatency.tsx b/site/src/modules/resources/AgentLatency.tsx index da667626b6510..8b23c9a96c041 100644 --- a/site/src/modules/resources/AgentLatency.tsx +++ b/site/src/modules/resources/AgentLatency.tsx @@ -6,8 +6,8 @@ import { HelpTooltipText, HelpTooltipTitle, } from "components/HelpTooltip/HelpTooltip"; -import { PopoverTrigger } from "components/Popover/Popover"; import { Stack } from "components/Stack/Stack"; +import { PopoverTrigger } from "components/deprecated/Popover/Popover"; import type { FC } from "react"; import { getLatencyColor } from "utils/latency"; diff --git a/site/src/modules/resources/AgentOutdatedTooltip.tsx b/site/src/modules/resources/AgentOutdatedTooltip.tsx index 3285fcd0685ad..e5bd25d79b228 100644 --- a/site/src/modules/resources/AgentOutdatedTooltip.tsx +++ b/site/src/modules/resources/AgentOutdatedTooltip.tsx @@ -9,8 +9,8 @@ import { HelpTooltipText, HelpTooltipTitle, } from "components/HelpTooltip/HelpTooltip"; -import { PopoverTrigger } from "components/Popover/Popover"; import { Stack } from "components/Stack/Stack"; +import { PopoverTrigger } from "components/deprecated/Popover/Popover"; import type { FC } from "react"; import { agentVersionStatus } from "../../utils/workspace"; diff --git a/site/src/modules/resources/AgentStatus.tsx b/site/src/modules/resources/AgentStatus.tsx index b3c9ae3867b10..88c127c58b14d 100644 --- a/site/src/modules/resources/AgentStatus.tsx +++ b/site/src/modules/resources/AgentStatus.tsx @@ -10,7 +10,7 @@ import { HelpTooltipText, HelpTooltipTitle, } from "components/HelpTooltip/HelpTooltip"; -import { PopoverTrigger } from "components/Popover/Popover"; +import { PopoverTrigger } from "components/deprecated/Popover/Popover"; import type { FC } from "react"; // If we think in the agent status and lifecycle into a single enum/state I’d diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx index ba0d40888fb7d..b83a26cbfb32c 100644 --- a/site/src/modules/resources/PortForwardButton.tsx +++ b/site/src/modules/resources/PortForwardButton.tsx @@ -39,7 +39,7 @@ import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; +} from "components/deprecated/Popover/Popover"; import { type FormikContextType, useFormik } from "formik"; import { type ClassName, useClassName } from "hooks/useClassName"; import { useDashboard } from "modules/dashboard/useDashboard"; diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx index 3b5869979321e..3d94b33375c0b 100644 --- a/site/src/modules/resources/SSHButton/SSHButton.tsx +++ b/site/src/modules/resources/SSHButton/SSHButton.tsx @@ -7,12 +7,12 @@ import { HelpTooltipLinksGroup, HelpTooltipText, } from "components/HelpTooltip/HelpTooltip"; +import { Stack } from "components/Stack/Stack"; import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; -import { Stack } from "components/Stack/Stack"; +} from "components/deprecated/Popover/Popover"; import { type ClassName, useClassName } from "hooks/useClassName"; import type { FC } from "react"; import { docs } from "utils/docs"; diff --git a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx index 7274ab280169e..c8dfb883462e1 100644 --- a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx +++ b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx @@ -13,7 +13,7 @@ import { HelpTooltipTitle, HelpTooltipTrigger, } from "components/HelpTooltip/HelpTooltip"; -import { usePopover } from "components/Popover/Popover"; +import { usePopover } from "components/deprecated/Popover/Popover"; import { linkToTemplate, useLinks } from "modules/navigation"; import type { FC } from "react"; import { useQuery } from "react-query"; diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx index 2060c1b5f5660..08fd8dba8d839 100644 --- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx @@ -8,12 +8,12 @@ import { PremiumBadge, } from "components/Badges/Badges"; import { PopoverPaywall } from "components/Paywall/PopoverPaywall"; +import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; -import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; +} from "components/deprecated/Popover/Popover"; import { useFormik } from "formik"; import type { FC } from "react"; import { getFormHelpers } from "utils/formUtils"; diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/OrganizationPills.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/OrganizationPills.tsx index 7885ecbb40095..339ebfd8b962b 100644 --- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/OrganizationPills.tsx +++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/OrganizationPills.tsx @@ -4,7 +4,7 @@ import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; +} from "components/deprecated/Popover/Popover"; import type { FC } from "react"; import { cn } from "utils/cn"; import { isUUID } from "utils/uuid"; diff --git a/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx index 35b0f22d496fd..555c2f3b11be2 100644 --- a/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx @@ -5,13 +5,13 @@ import { PremiumBadge, } from "components/Badges/Badges"; import { PopoverPaywall } from "components/Paywall/PopoverPaywall"; +import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; +import { Stack } from "components/Stack/Stack"; import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; -import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; -import { Stack } from "components/Stack/Stack"; +} from "components/deprecated/Popover/Popover"; import type { FC } from "react"; import { deploymentGroupHasParent } from "utils/deployOptions"; import { docs } from "utils/docs"; diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx index 39cb9602363ec..cedac4d534489 100644 --- a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx @@ -13,13 +13,13 @@ import { import { IconField } from "components/IconField/IconField"; import { Paywall } from "components/Paywall/Paywall"; import { PopoverPaywall } from "components/Paywall/PopoverPaywall"; +import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; +import { Stack } from "components/Stack/Stack"; import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; -import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; -import { Stack } from "components/Stack/Stack"; +} from "components/deprecated/Popover/Popover"; import { useFormik } from "formik"; import type { FC } from "react"; import { docs } from "utils/docs"; diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx index e78e8baba15a1..8a456460481ba 100644 --- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx +++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/PermissionPillsList.tsx @@ -6,7 +6,7 @@ import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; +} from "components/deprecated/Popover/Popover"; import type { FC } from "react"; function getUniqueResourceTypes(jsonObject: readonly Permission[]) { diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpPillList.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpPillList.tsx index ebe760c134e93..3a5c603fa3e64 100644 --- a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpPillList.tsx +++ b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpPillList.tsx @@ -5,7 +5,7 @@ import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; +} from "components/deprecated/Popover/Popover"; import type { FC } from "react"; import { isUUID } from "utils/uuid"; diff --git a/site/src/pages/ManagementSettingsPage/UserTable/EditRolesButton.tsx b/site/src/pages/ManagementSettingsPage/UserTable/EditRolesButton.tsx index c0a2681442f3c..d7d3c100acd73 100644 --- a/site/src/pages/ManagementSettingsPage/UserTable/EditRolesButton.tsx +++ b/site/src/pages/ManagementSettingsPage/UserTable/EditRolesButton.tsx @@ -12,12 +12,12 @@ import { HelpTooltipTrigger, } from "components/HelpTooltip/HelpTooltip"; import { EditSquare } from "components/Icons/EditSquare"; +import { Stack } from "components/Stack/Stack"; import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; -import { Stack } from "components/Stack/Stack"; +} from "components/deprecated/Popover/Popover"; import { type ClassName, useClassName } from "hooks/useClassName"; import type { FC } from "react"; diff --git a/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx b/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx index 22ca15fdcbf73..88f66af485960 100644 --- a/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx +++ b/site/src/pages/ManagementSettingsPage/UserTable/UserRoleCell.tsx @@ -23,7 +23,7 @@ import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; +} from "components/deprecated/Popover/Popover"; import type { FC } from "react"; import { EditRolesButton } from "./EditRolesButton"; diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx index c0a16c118a39d..4a3dba65cacaa 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx @@ -7,7 +7,7 @@ import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; +} from "components/deprecated/Popover/Popover"; import { addDays, addHours, diff --git a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx index f696d42d09660..49a6480ba217b 100644 --- a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx +++ b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx @@ -6,12 +6,12 @@ import TextField from "@mui/material/TextField"; import useTheme from "@mui/system/useTheme"; import { FormFields, FormSection, VerticalForm } from "components/Form/Form"; import { TopbarButton } from "components/FullPageLayout/Topbar"; +import { Stack } from "components/Stack/Stack"; import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; -import { Stack } from "components/Stack/Stack"; +} from "components/deprecated/Popover/Popover"; import { useFormik } from "formik"; import { ProvisionerTag } from "modules/provisioners/ProvisionerTag"; import { type FC, Fragment } from "react"; diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx index f26bcb36c8b13..03d8bebcd2dbf 100644 --- a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx +++ b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx @@ -5,13 +5,13 @@ import ListItem from "@mui/material/ListItem"; import TableCell from "@mui/material/TableCell"; import type { Group } from "api/typesGenerated"; import { OverflowY } from "components/OverflowY/OverflowY"; +import { Stack } from "components/Stack/Stack"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; -import { Stack } from "components/Stack/Stack"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; +} from "components/deprecated/Popover/Popover"; import type { FC } from "react"; type GroupsCellProps = { diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx index 6cda5a52cdcfc..6d0d72ab81f44 100644 --- a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx @@ -17,13 +17,13 @@ import { HelpTooltipTitle, } from "components/HelpTooltip/HelpTooltip"; import { Loader } from "components/Loader/Loader"; +import { RichParameterInput } from "components/RichParameterInput/RichParameterInput"; import { Popover, PopoverContent, PopoverTrigger, usePopover, -} from "components/Popover/Popover"; -import { RichParameterInput } from "components/RichParameterInput/RichParameterInput"; +} from "components/deprecated/Popover/Popover"; import { useFormik } from "formik"; import type { FC } from "react"; import { useQuery } from "react-query"; diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx index dbf90dd44970e..d7220e7028aca 100644 --- a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx @@ -7,7 +7,7 @@ import { PopoverContent, PopoverTrigger, usePopover, -} from "components/Popover/Popover"; +} from "components/deprecated/Popover/Popover"; import type { FC, ReactNode } from "react"; import type { ThemeRole } from "theme/roles"; diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx index 25d1b0e7a9fab..95dbe34a62463 100644 --- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx @@ -16,9 +16,9 @@ import { TopbarIconButton, } from "components/FullPageLayout/Topbar"; import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip"; -import { Popover, PopoverTrigger } from "components/Popover/Popover"; import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { ExternalAvatar } from "components/deprecated/Avatar/Avatar"; +import { Popover, PopoverTrigger } from "components/deprecated/Popover/Popover"; import { useDashboard } from "modules/dashboard/useDashboard"; import { linkToTemplate, useLinks } from "modules/navigation"; import { WorkspaceStatusBadge } from "modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge"; diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx index 2cbca11fcef60..d97ff9e2a7551 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx @@ -6,13 +6,13 @@ import type { Template } from "api/typesGenerated"; import { Loader } from "components/Loader/Loader"; import { MenuSearch } from "components/Menu/MenuSearch"; import { OverflowY } from "components/OverflowY/OverflowY"; +import { SearchEmpty, searchStyles } from "components/Search/Search"; +import { Avatar } from "components/deprecated/Avatar/Avatar"; import { Popover, PopoverContent, PopoverTrigger, -} from "components/Popover/Popover"; -import { SearchEmpty, searchStyles } from "components/Search/Search"; -import { Avatar } from "components/deprecated/Avatar/Avatar"; +} from "components/deprecated/Popover/Popover"; import { linkToTemplate, useLinks } from "modules/navigation"; import { type FC, type ReactNode, useState } from "react"; import type { UseQueryResult } from "react-query"; From b2f7772de80dea4adf2fe4baa3c555a6a9de1218 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Mon, 16 Dec 2024 16:51:51 +0000 Subject: [PATCH 2/2] chore: add comment --- site/src/components/Popover/Popover.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx index 93257da15e7db..aea7f48626087 100644 --- a/site/src/components/Popover/Popover.tsx +++ b/site/src/components/Popover/Popover.tsx @@ -1,3 +1,7 @@ +/** + * Copied from shadcn/ui and modified on 12/13/2024 + * @see {@link https://ui.shadcn.com/docs/components/popover} + */ import * as PopoverPrimitive from "@radix-ui/react-popover"; import { type ComponentPropsWithoutRef,