1+ import Box from "@mui/material/Box" ;
12import Link from "@mui/material/Link" ;
23import Popover from "@mui/material/Popover" ;
3- import { makeStyles } from "@mui/styles" ;
4+ import CircularProgress from "@mui/material/CircularProgress" ;
5+ import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined" ;
6+ import { css } from "@emotion/css" ;
7+ import { useTheme } from "@emotion/react" ;
48import { useRef , useState } from "react" ;
9+ import { useQuery } from "react-query" ;
510import { colors } from "theme/colors" ;
611import {
712HelpTooltipLink ,
@@ -11,16 +16,12 @@ import {
1116} from "components/HelpTooltip/HelpTooltip" ;
1217import { SecondaryAgentButton } from "components/Resources/AgentButton" ;
1318import { docs } from "utils/docs" ;
14- import Box from "@mui/material/Box" ;
15- import { useQuery } from "react-query" ;
1619import { getAgentListeningPorts } from "api/api" ;
17- import {
20+ import type {
1821WorkspaceAgent ,
1922WorkspaceAgentListeningPort ,
2023} from "api/typesGenerated" ;
21- import CircularProgress from "@mui/material/CircularProgress" ;
2224import { portForwardURL } from "utils/portForward" ;
23- import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined" ;
2425
2526export interface PortForwardButtonProps {
2627host :string ;
@@ -30,10 +31,10 @@ export interface PortForwardButtonProps {
3031}
3132
3233export const PortForwardButton :React . FC < PortForwardButtonProps > = ( props ) => {
34+ const theme = useTheme ( ) ;
3335const anchorRef = useRef < HTMLButtonElement > ( null ) ;
3436const [ isOpen , setIsOpen ] = useState ( false ) ;
3537const id = isOpen ?"schedule-popover" :undefined ;
36- const styles = useStyles ( ) ;
3738const portsQuery = useQuery ( {
3839queryKey :[ "portForward" , props . agent . id ] ,
3940queryFn :( ) => getAgentListeningPorts ( props . agent . id ) ,
@@ -78,7 +79,14 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
7879) }
7980</ SecondaryAgentButton >
8081< Popover
81- classes = { { paper :styles . popoverPaper } }
82+ classes = { {
83+ paper :css `
84+ padding : 0 ;
85+ width : ${ theme . spacing ( 38 ) }
86+ color : ${ theme . palette . text . secondary }
87+ margin-top : ${ theme . spacing ( 0.5 ) }
88+ ` ,
89+ } }
8290id = { id }
8391open = { isOpen }
8492anchorEl = { anchorRef . current }
@@ -245,31 +253,3 @@ export const PortForwardPopoverView: React.FC<
245253</ >
246254) ;
247255} ;
248-
249- const useStyles = makeStyles ( ( theme ) => ( {
250- popoverPaper :{
251- padding :0 ,
252- width :theme . spacing ( 38 ) ,
253- color :theme . palette . text . secondary ,
254- marginTop :theme . spacing ( 0.5 ) ,
255- } ,
256-
257- openUrlButton :{
258- flexShrink :0 ,
259- } ,
260-
261- portField :{
262- // The default border don't contrast well with the popover
263- "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline" :{
264- borderColor :colors . gray [ 10 ] ,
265- } ,
266- } ,
267-
268- code :{
269- margin :theme . spacing ( 2 , 0 ) ,
270- } ,
271-
272- form :{
273- margin :theme . spacing ( 2 , 0 ) ,
274- } ,
275- } ) ) ;