From 151e285b71f1cb6ba56513e2e559b8a63997170d Mon Sep 17 00:00:00 2001
From: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
Date: Wed, 24 May 2023 14:47:23 -0500
Subject: [PATCH] fix(search): Fix custom SearchModal in StoryBook

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>
---
 .../SearchModal/SearchModal.stories.tsx       | 43 +++++++++++--------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx
index eac01cceb8..c7bf355e45 100644
--- a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx
+++ b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx
@@ -13,32 +13,33 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import { wrapInTestApp } from '@backstage/test-utils';
 import {
+  DefaultResultListItem,
+  MockSearchApi,
+  searchApiRef,
+  SearchBar,
+  SearchContextProvider,
+  SearchResult,
+  SearchResultPager,
+} from '@backstage/plugin-search-react';
+import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils';
+import {
+  Box,
   Button,
   DialogActions,
   DialogContent,
   DialogTitle,
   Grid,
+  IconButton,
   List,
-  Paper,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import CloseIcon from '@material-ui/icons/Close';
 import React, { ComponentType } from 'react';
+
 import { rootRouteRef } from '../../plugin';
-import {
-  SearchBar,
-  DefaultResultListItem,
-  searchApiRef,
-  MockSearchApi,
-  SearchContextProvider,
-  SearchResult,
-  SearchResultPager,
-} from '@backstage/plugin-search-react';
-import { TestApiProvider } from '@backstage/test-utils';
-import { SearchModal } from './SearchModal';
 import { SearchType } from '../SearchType';
+import { SearchModal } from './SearchModal';
 import { useSearchModal } from './useSearchModal';
 
 const mockResults = {
@@ -103,10 +104,10 @@ export const Default = () => {
 };
 
 const useStyles = makeStyles(theme => ({
-  container: {
-    borderRadius: 30,
+  titleContainer: {
     display: 'flex',
-    height: '2.4em',
+    alignItems: 'center',
+    gap: theme.spacing(1),
   },
   input: {
     flex: 1,
@@ -127,9 +128,13 @@ export const CustomModal = () => {
         {() => (
           <>
             <DialogTitle>
-              <Paper className={classes.container}>
+              <Box className={classes.titleContainer}>
                 <SearchBar className={classes.input} />
-              </Paper>
+
+                <IconButton aria-label="close" onClick={toggleModal}>
+                  <CloseIcon />
+                </IconButton>
+              </Box>
             </DialogTitle>
             <DialogContent>
               <Grid container direction="column">