From 3c184afa918bc95841a0e3779eb3897283111e43 Mon Sep 17 00:00:00 2001 From: Jamie Klassen Date: Fri, 26 Jan 2024 19:09:50 -0500 Subject: [PATCH] refactor: extract common dialog component Signed-off-by: Jamie Klassen --- .changeset/quiet-donkeys-punch.md | 5 + plugins/kubernetes-react/api-report.md | 2 +- .../KubernetesDialog/KubernetesDialog.tsx | 110 ++++++++++++++++++ .../src/components/KubernetesDialog/index.ts | 16 +++ .../PodExecTerminal/PodExecTerminalDialog.tsx | 87 +++----------- .../components/Pods/PodLogs/PodLogsDialog.tsx | 72 ++---------- 6 files changed, 157 insertions(+), 135 deletions(-) create mode 100644 .changeset/quiet-donkeys-punch.md create mode 100644 plugins/kubernetes-react/src/components/KubernetesDialog/KubernetesDialog.tsx create mode 100644 plugins/kubernetes-react/src/components/KubernetesDialog/index.ts 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 ( + <> + + + {title} + + + + + + {children} + + + + + ); +}; 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 && ( - - - {podName} - {containerName} terminal shell on cluster{' '} - {clusterName} - - - - - - - - - )} - - - + + + ) ); }; 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 ( - <> - - - {containerScope.podName} - {containerScope.containerName} logs on - cluster {containerScope.clusterName} - - - - - - - - - - + } + buttonText="Logs" + disabled={false} + title={`${containerScope.podName} - ${containerScope.containerName} logs on cluster ${containerScope.clusterName}`} + > + + ); };