Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove now unused search component #325

Merged
merged 2 commits into from
Dec 18, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions src/components/ElementSearchDialog/element-search-dialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
*/

import React, { useCallback, useEffect, useState } from 'react';
import { Dialog, DialogContent, TextField, Autocomplete } from '@mui/material';
import { Autocomplete, Dialog, DialogContent, TextField } from '@mui/material';
import PropTypes from 'prop-types';
import SearchIcon from '@mui/icons-material/Search';
import { Search, SearchOff } from '@mui/icons-material';
import { useIntl } from 'react-intl';

const ElementSearchDialog = (props) => {
Expand Down Expand Up @@ -134,7 +134,11 @@ const ElementSearchDialog = (props) => {
...params.InputProps,
startAdornment: (
<React.Fragment>
<SearchIcon color="disabled" />
{searchTermDisabled ? (
<SearchOff color="disabled" />
) : (
<Search color="disabled" />
)}
{params.InputProps.startAdornment}
</React.Fragment>
),
Expand Down
92 changes: 12 additions & 80 deletions src/components/TopBar/TopBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,15 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/

import React, { useEffect, useRef, useState, useMemo } from 'react';
import React, { useMemo, useRef, useState } from 'react';
import { FormattedMessage } from 'react-intl';

import {
AppBar,
Box,
Button,
ClickAwayListener,
IconButton,
ListItemIcon,
ListItemText,
Menu,
Expand All @@ -32,11 +33,10 @@ import {
Brightness3 as Brightness3Icon,
Computer as ComputerIcon,
ExitToApp as ExitToAppIcon,
FullscreenExit as FullscreenExitIcon,
Fullscreen as FullscreenIcon,
FullscreenExit as FullscreenExitIcon,
HelpOutline as HelpOutlineIcon,
Person as PersonIcon,
Search as SearchIcon,
Settings as SettingsIcon,
WbSunny as WbSunnyIcon,
} from '@mui/icons-material';
Expand All @@ -46,7 +46,6 @@ import { styled } from '@mui/system';
import PropTypes from 'prop-types';
import FullScreen, { fullScreenSupported } from 'react-request-fullscreen';

import ElementSearchDialog from '../ElementSearchDialog';
import GridLogo from './GridLogo';
import AboutDialog from './AboutDialog';

Expand All @@ -56,9 +55,8 @@ const styles = {
display: 'flex',
overflow: 'hidden',
},
menuIcon: {
width: 24,
height: 24,
menuContainer: {
marginLeft: 1,
},
link: {
textDecoration: 'none',
Expand Down Expand Up @@ -174,28 +172,14 @@ const TopBar = ({
theme,
onEquipmentLabellingClick,
equipmentLabelling,
withElementsSearch,
searchDisabled,
searchingLabel,
onSearchTermChange,
onSelectionChange,
elementsFound,
renderElement,
onLanguageClick,
language,
searchTermDisabled,
searchTermDisableReason,
}) => {
const [anchorElSettingsMenu, setAnchorElSettingsMenu] =
React.useState(null);
const [anchorElAppsMenu, setAnchorElAppsMenu] = React.useState(null);
const fullScreenRef = useRef(null);
const [isFullScreen, setIsFullScreen] = useState(false);
const [isDialogSearchOpen, setDialogSearchOpen] = useState(false);

const handleClickElementSearch = () => {
setDialogSearchOpen(true);
};

const handleToggleSettingsMenu = (event) => {
setAnchorElSettingsMenu(event.currentTarget);
Expand Down Expand Up @@ -267,23 +251,6 @@ const TopBar = ({
}
};

useEffect(() => {
if (user && withElementsSearch && !searchDisabled) {
const openSearch = (e) => {
if (
e.ctrlKey &&
e.shiftKey &&
(e.key === 'F' || e.key === 'f')
) {
e.preventDefault();
setDialogSearchOpen(true);
}
};
document.addEventListener('keydown', openSearch);
return () => document.removeEventListener('keydown', openSearch);
}
}, [user, withElementsSearch, searchDisabled]);

const logo_clickable = useMemo(
() => (
<GridLogo
Expand All @@ -308,43 +275,17 @@ const TopBar = ({
<Toolbar>
{logo_clickable}
<Box sx={styles.grow}>{children}</Box>
{user && withElementsSearch && (
<React.Fragment>
<ElementSearchDialog
open={isDialogSearchOpen}
onClose={() => setDialogSearchOpen(false)}
searchingLabel={searchingLabel}
onSearchTermChange={onSearchTermChange}
onSelectionChange={(element) => {
setDialogSearchOpen(false);
onSelectionChange(element);
}}
elementsFound={elementsFound}
renderElement={renderElement}
searchTermDisabled={searchTermDisabled}
searchTermDisableReason={searchTermDisableReason}
/>
<div>
<Button
color="inherit"
onClick={handleClickElementSearch}
disabled={searchDisabled}
>
<SearchIcon />
</Button>
</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are the other project didn't need the search Dialog ?

Copy link
Contributor Author

@Tristan-WorkGH Tristan-WorkGH Dec 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, when you search it in gridsuite, you can see only gridstudy-app use it. I keep ElementSearchDialog in commons-ui as it can be reuse easily.

</React.Fragment>
)}
{user && (
<div>
<Button
<Box>
<IconButton
aria-label="apps"
aria-controls="apps-menu"
aria-haspopup="true"
onClick={handleClickAppsMenu}
color="inherit"
>
<AppsIcon />
</Button>
</IconButton>

<StyledMenu
id="apps-menu"
Expand Down Expand Up @@ -393,10 +334,10 @@ const TopBar = ({
</Box>
))}
</StyledMenu>
</div>
</Box>
)}
{user && (
<div>
<Box sx={styles.menuContainerg}>
{/* Button width abbreviation and arrow icon */}
<Button
aria-controls="settings-menu"
Expand Down Expand Up @@ -745,7 +686,7 @@ const TopBar = ({
</ClickAwayListener>
</Paper>
</Popper>
</div>
</Box>
)}
<AboutDialog
open={isAboutDialogOpen}
Expand Down Expand Up @@ -780,17 +721,8 @@ TopBar.propTypes = {
getAdditionalModules: PropTypes.func,
onEquipmentLabellingClick: PropTypes.func,
equipmentLabelling: PropTypes.bool,
withElementsSearch: PropTypes.bool,
searchDisabled: PropTypes.bool,
searchingLabel: PropTypes.string,
onSearchTermChange: PropTypes.func,
onSelectionChange: PropTypes.func,
elementsFound: PropTypes.array,
renderElement: PropTypes.func.isRequired,
onLanguageClick: PropTypes.func.isRequired,
language: PropTypes.string.isRequired,
searchTermDisabled: PropTypes.bool,
searchTermDisableReason: PropTypes.string,
};

export default TopBar;