Merge pull request #27706 from JounQin/feat/cancel_overlay

feat: add cancel button for WidgetSettingsOverlay

.changeset/happy-windows-shop.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home': patch
+---
+
+feat: add cancel button for WidgetSettingsOverlay

plugins/home/src/components/CustomHomepage/WidgetSettingsOverlay.tsx

@@ -13,19 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import Grid from '@material-ui/core/Grid';
+import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-import IconButton from '@material-ui/core/IconButton';
-import SettingsIcon from '@material-ui/icons/Settings';
 import DeleteIcon from '@material-ui/icons/Delete';
-import React from 'react';
-import { Widget } from './types';
+import SettingsIcon from '@material-ui/icons/Settings';
 import { withTheme } from '@rjsf/core';
 import { Theme as MuiTheme } from '@rjsf/material-ui';
 import validator from '@rjsf/validator-ajv8';
+import React from 'react';
+
+import { Widget } from './types';
 
 const Form = withTheme(MuiTheme);
 
@@ -64,13 +68,15 @@ export const WidgetSettingsOverlay = (props: WidgetSettingsOverlayProps) => {
   const [settingsDialogOpen, setSettingsDialogOpen] = React.useState(false);
   const styles = useStyles();
 
+  const onClose = () => setSettingsDialogOpen(false);
+
   return (
     <div className={styles.settingsOverlay}>
       {widget.settingsSchema && (
         <Dialog
           open={settingsDialogOpen}
           className="widgetSettingsDialog"
-          onClose={() => setSettingsDialogOpen(false)}
+          onClose={onClose}
         >
           <DialogContent>
             <Form
@@ -90,7 +96,16 @@ export const WidgetSettingsOverlay = (props: WidgetSettingsOverlayProps) => {
               experimental_defaultFormStateBehavior={{
                 allOf: 'populateDefaults',
               }}
-            />
+            >
+              <DialogActions>
+                <Button color="primary" variant="contained" type="submit">
+                  Submit
+                </Button>
+                <Button color="secondary" onClick={onClose}>
+                  Cancel
+                </Button>
+              </DialogActions>
+            </Form>
           </DialogContent>
         </Dialog>
       )}