diff --git a/.changeset/quiet-donkeys-punch.md b/.changeset/quiet-donkeys-punch.md
new file mode 100644
index 0000000000..a375ed148c
--- /dev/null
+++ b/.changeset/quiet-donkeys-punch.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-kubernetes-react': patch
+---
+
+Extracted common dialog component.
diff --git a/plugins/kubernetes-react/api-report.md b/plugins/kubernetes-react/api-report.md
index 7e9c2fbd61..8a0ec4de8f 100644
--- a/plugins/kubernetes-react/api-report.md
+++ b/plugins/kubernetes-react/api-report.md
@@ -685,7 +685,7 @@ export const PodExecTerminal: (
// @public
export const PodExecTerminalDialog: (
props: PodExecTerminalProps,
-) => React_2.JSX.Element;
+) => false | React_2.JSX.Element | undefined;
// @public
export interface PodExecTerminalProps {
diff --git a/plugins/kubernetes-react/src/components/KubernetesDialog/KubernetesDialog.tsx b/plugins/kubernetes-react/src/components/KubernetesDialog/KubernetesDialog.tsx
new file mode 100644
index 0000000000..cd5802f464
--- /dev/null
+++ b/plugins/kubernetes-react/src/components/KubernetesDialog/KubernetesDialog.tsx
@@ -0,0 +1,110 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+ Button,
+ Dialog,
+ DialogContent,
+ DialogTitle,
+ IconButton,
+ Theme,
+ createStyles,
+ makeStyles,
+} from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+import React, { useState } from 'react';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ dialogPaper: { minHeight: 'calc(100% - 64px)' },
+ dialogContent: { flexBasis: 0 },
+ closeButton: {
+ position: 'absolute',
+ right: theme.spacing(1),
+ top: theme.spacing(1),
+ color: theme.palette.grey[500],
+ },
+ }),
+);
+
+export interface KubernetesDialogProps {
+ buttonAriaLabel: string;
+ buttonIcon: React.ReactNode;
+ buttonText: string;
+ children?: React.ReactNode;
+ disabled?: boolean;
+ title: string;
+}
+
+/**
+ * Dialog component for use in the Kubernetes plugin
+ *
+ * @public
+ */
+export const KubernetesDialog = ({
+ buttonAriaLabel,
+ buttonIcon,
+ buttonText,
+ children,
+ disabled,
+ title,
+}: KubernetesDialogProps) => {
+ const classes = useStyles();
+
+ const [open, setOpen] = useState(false);
+ const openDialog = () => {
+ setOpen(true);
+ };
+ const closeDialog = () => {
+ setOpen(false);
+ };
+
+ return (
+ <>
+
+
+ >
+ );
+};
diff --git a/plugins/kubernetes-react/src/components/KubernetesDialog/index.ts b/plugins/kubernetes-react/src/components/KubernetesDialog/index.ts
new file mode 100644
index 0000000000..1b10c1346e
--- /dev/null
+++ b/plugins/kubernetes-react/src/components/KubernetesDialog/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './KubernetesDialog';
diff --git a/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminalDialog.tsx b/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminalDialog.tsx
index 5ed8c8c0d1..0b321aa108 100644
--- a/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminalDialog.tsx
+++ b/plugins/kubernetes-react/src/components/PodExecTerminal/PodExecTerminalDialog.tsx
@@ -13,98 +13,39 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import {
- Button,
- createStyles,
- Dialog,
- DialogContent,
- DialogTitle,
- IconButton,
- makeStyles,
- Theme,
-} from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
-import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
-import React, { useState } from 'react';
+import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
+import React from 'react';
+
+import { KubernetesDialog } from '../KubernetesDialog';
import { useIsPodExecTerminalSupported } from '../../hooks';
import { PodExecTerminal, PodExecTerminalProps } from './PodExecTerminal';
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- dialogPaper: { minHeight: 'calc(100% - 64px)' },
- dialogContent: { flexBasis: 0 },
- closeButton: {
- position: 'absolute',
- right: theme.spacing(1),
- top: theme.spacing(1),
- color: theme.palette.grey[500],
- },
- }),
-);
-
/**
* Opens a terminal connected to the given pod's container in a dialog
*
* @public
*/
export const PodExecTerminalDialog = (props: PodExecTerminalProps) => {
- const classes = useStyles();
const { clusterName, containerName, podName } = props;
- const [open, setOpen] = useState(false);
-
const isPodExecTerminalSupported = useIsPodExecTerminalSupported();
- const openDialog = () => {
- setOpen(true);
- };
-
- const closeDialog = () => {
- setOpen(false);
- };
-
return (
- <>
- {!isPodExecTerminalSupported.loading &&
- isPodExecTerminalSupported.value && (
-
- )}
-
- }
+ buttonText="Terminal"
disabled={
isPodExecTerminalSupported.loading ||
!isPodExecTerminalSupported.value
}
- onClick={openDialog}
- startIcon={}
+ title={`${podName} - ${containerName} terminal shell on cluster ${clusterName}`}
>
- Terminal
-
- >
+
+
+ )
);
};
diff --git a/plugins/kubernetes-react/src/components/Pods/PodLogs/PodLogsDialog.tsx b/plugins/kubernetes-react/src/components/Pods/PodLogs/PodLogsDialog.tsx
index 48fda2de2a..3ffd4d8fa0 100644
--- a/plugins/kubernetes-react/src/components/Pods/PodLogs/PodLogsDialog.tsx
+++ b/plugins/kubernetes-react/src/components/Pods/PodLogs/PodLogsDialog.tsx
@@ -13,36 +13,14 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, { useState } from 'react';
+import React from 'react';
-import {
- Button,
- createStyles,
- Dialog,
- DialogContent,
- DialogTitle,
- IconButton,
- makeStyles,
- Theme,
-} from '@material-ui/core';
import SubjectIcon from '@material-ui/icons/Subject';
-import CloseIcon from '@material-ui/icons/Close';
-
+import { KubernetesDialog } from '../../KubernetesDialog';
import { PodLogs } from './PodLogs';
import { ContainerScope } from './types';
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- closeButton: {
- position: 'absolute',
- right: theme.spacing(1),
- top: theme.spacing(1),
- color: theme.palette.grey[500],
- },
- }),
-);
-
/**
* Props for PodLogsDialog
*
@@ -58,43 +36,15 @@ export interface PodLogsDialogProps {
* @public
*/
export const PodLogsDialog = ({ containerScope }: PodLogsDialogProps) => {
- const classes = useStyles();
- const [open, setOpen] = useState(false);
-
- const openDialog = () => {
- setOpen(true);
- };
-
- const closeDialog = () => {
- setOpen(false);
- };
return (
- <>
-
- }
- >
- Logs
-
- >
+ }
+ buttonText="Logs"
+ disabled={false}
+ title={`${containerScope.podName} - ${containerScope.containerName} logs on cluster ${containerScope.clusterName}`}
+ >
+
+
);
};