1+ import { css } from "@emotion/css" ;
2+ import { type Interpolation , type Theme } from "@emotion/react" ;
13import LinearProgress from "@mui/material/LinearProgress" ;
2- import makeStyles from "@mui/styles/makeStyles" ;
3- import { TransitionStats , Template , Workspace } from "api/typesGenerated" ;
4- import dayjs , { Dayjs } from "dayjs" ;
5- import { FC , useEffect , useState } from "react" ;
4+ import type { TransitionStats , Template , Workspace } from "api/typesGenerated" ;
5+ import dayjs , { type Dayjs } from "dayjs" ;
6+ import { type FC , useEffect , useState } from "react" ;
67import capitalize from "lodash/capitalize" ;
78
89import duration from "dayjs/plugin/duration" ;
@@ -68,7 +69,6 @@ export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
6869 workspace,
6970transitionStats :transitionStats ,
7071} ) => {
71- const styles = useStyles ( ) ;
7272const job = workspace . latest_build . job ;
7373const [ progressValue , setProgressValue ] = useState < number | undefined > ( 0 ) ;
7474const [ progressText , setProgressText ] = useState < string | undefined > (
@@ -107,7 +107,7 @@ export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
107107return < > </ > ;
108108}
109109return (
110- < div className = { styles . stack } >
110+ < div css = { styles . stack } >
111111< LinearProgress
112112data-chromatic = "ignore"
113113value = { progressValue !== undefined ?progressValue :0 }
@@ -123,37 +123,38 @@ export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
123123// If a transition is set, there is a moment on new load where the
124124// bar accelerates to progressValue and then rapidly decelerates, which
125125// is not indicative of true progress.
126- classes = { { bar :styles . noTransition } }
126+ classes = { {
127+ bar :css `
128+ transition : none;
129+ ` ,
130+ } }
127131/>
128- < div className = { styles . barHelpers } >
129- < div className = { styles . label } >
132+ < div css = { styles . barHelpers } >
133+ < div css = { styles . label } >
130134{ capitalize ( workspace . latest_build . status ) } workspace...
131135</ div >
132- < div className = { styles . label } data-chromatic = "ignore" >
136+ < div css = { styles . label } data-chromatic = "ignore" >
133137{ progressText }
134138</ div >
135139</ div >
136140</ div >
137141) ;
138142} ;
139143
140- const useStyles = makeStyles ( ( theme ) => ( {
141- stack :{
144+ const styles = {
145+ stack :( theme ) => ( {
142146paddingLeft :theme . spacing ( 0.2 ) ,
143147paddingRight :theme . spacing ( 0.2 ) ,
144- } ,
145- noTransition :{
146- transition :"none" ,
147- } ,
148- barHelpers :{
148+ } ) ,
149+ barHelpers :( theme ) => ( {
149150display :"flex" ,
150151justifyContent :"space-between" ,
151152marginTop :theme . spacing ( 0.5 ) ,
152- } ,
153- label :{
153+ } ) ,
154+ label :( theme ) => ( {
154155fontSize :12 ,
155156display :"block" ,
156157fontWeight :600 ,
157158color :theme . palette . text . secondary ,
158- } ,
159- } ) ) ;
159+ } ) ,
160+ } satisfies Record < string , Interpolation < Theme > > ;