diff --git a/.changeset/funny-timers-visit.md b/.changeset/funny-timers-visit.md new file mode 100644 index 0000000000..3d802328b5 --- /dev/null +++ b/.changeset/funny-timers-visit.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-kubernetes-react': patch +--- + +Fix broken XtermJS CSS import diff --git a/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminal.tsx b/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminal.tsx index f8106bd011..f67d79abb8 100644 --- a/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminal.tsx +++ b/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminal.tsx @@ -13,9 +13,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import 'xterm'; +import 'xterm/css/xterm.css'; import { discoveryApiRef, useApi } from '@backstage/core-plugin-api'; +import { createStyles, makeStyles, Theme } from '@material-ui/core'; import React, { useEffect, useMemo, useState } from 'react'; import { Terminal } from 'xterm'; import { FitAddon } from 'xterm-addon-fit'; @@ -37,12 +38,23 @@ export interface PodExecTerminalProps { const hasSocketProtocol = (url: string | URL) => /wss?:\/\//.test(url.toString()); +const useStyles = makeStyles((theme: Theme) => + createStyles({ + podExecTerminal: { + width: '100%', + height: '100%', + '& .xterm-screen': { padding: theme.spacing(1) }, + }, + }), +); + /** * Executes a `/bin/sh` process in the given pod's container and opens a terminal connected to it * * @public */ export const PodExecTerminal = (props: PodExecTerminalProps) => { + const classes = useStyles(); const { containerName, podNamespace, podName } = props; const [baseUrl, setBaseUrl] = useState(window.location.host); @@ -122,10 +134,7 @@ export const PodExecTerminal = (props: PodExecTerminalProps) => {
); };