Skip to content

Commit

Permalink
feat(#1300976): [Example App] Center SearchBar
Browse files Browse the repository at this point in the history
  • Loading branch information
@matthias-goupil
matthias-goupil committed Jul 11, 2024
1 parent 73bdc67 commit 05fa15d
Show file tree
Hide file tree
Showing 3 changed files with 149 additions and 131 deletions.
140 changes: 75 additions & 65 deletions front/example-app/src/components/Header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Link, useNavigate } from 'react-router-dom'
import { Bundle } from '@elastic-suite/gally-admin-shared'
import {
AppBar,
Box,
Button,
InputLabel,
MenuItem,
Expand Down Expand Up @@ -65,73 +66,82 @@ function Header(): JSX.Element {
return (
<AppBar component="nav">
<Toolbar>
<Typography
style={{ display: 'flex', alignItems: 'center', gap: '12px' }}
component={Link}
sx={{ flexGrow: 1 }}
to="/"
variant="h6"
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
width: '100%',
}}
>
<div>
<img src={Logo} alt="Logo" />
</div>
<div>Gally - Example App</div>
</Typography>
{isExtraBundleAvailable(Bundle.VECTOR_SEARCH) && (
<Button
variant="contained"
style={{ border: '1px solid white', textTransform: 'none' }}
disableElevation
onClick={(): void => navigate('/vectorSearch')}
<Typography
style={{ display: 'flex', alignItems: 'center', gap: '12px' }}
component={Link}
to="/"
variant="h6"
>
{demoVectorSearchLabel}
</Button>
)}
{Boolean(catalog && localizedCatalog) && (
<HeaderFormControl size="small">
<SearchBar shrink />
</HeaderFormControl>
)}
<HeaderFormControl size="small" variant="outlined">
<InputLabel id={catalogLabelId} shrink>
Catalog
</InputLabel>
<Select
labelId={catalogLabelId}
id={catalogSelectId}
value={catalog?.id ?? ''}
label="Catalog"
onChange={handleCatalogChange}
data-testid="header-catalog-select"
data-testlength={catalogs.length}
>
{catalogs.map((catalog) => (
<MenuItem key={catalog.id} value={catalog.id}>
{catalog.name}
</MenuItem>
))}
</Select>
</HeaderFormControl>
{Boolean(catalog) && (
<HeaderFormControl size="small" variant="outlined">
<InputLabel id={localizedCatalogLabelId} shrink>
Localized catalog
</InputLabel>
<Select
labelId={localizedCatalogLabelId}
id={localizedCatalogSelectId}
value={localizedCatalog?.id ?? ''}
label="Localized Catalog"
onChange={handleLocalizedCatalogChange}
>
{catalog.localizedCatalogs.edges.map(({ node }) => (
<MenuItem key={node.id} value={node.id}>
{node.name}
</MenuItem>
))}
</Select>
</HeaderFormControl>
)}
<div>
<img src={Logo} alt="Logo" />
</div>
<div>Gally - Example App</div>
</Typography>
{Boolean(catalog && localizedCatalog) && (
<HeaderFormControl size="small">
<SearchBar shrink />
</HeaderFormControl>
)}
<Box>
{isExtraBundleAvailable(Bundle.VECTOR_SEARCH) && (
<Button
variant="contained"
style={{ border: '1px solid white', textTransform: 'none' }}
disableElevation
onClick={(): void => navigate('/vectorSearch')}
>
{demoVectorSearchLabel}
</Button>
)}
<HeaderFormControl size="small" variant="outlined">
<InputLabel id={catalogLabelId} shrink>
Catalog
</InputLabel>
<Select
labelId={catalogLabelId}
id={catalogSelectId}
value={catalog?.id ?? ''}
label="Catalog"
onChange={handleCatalogChange}
data-testid="header-catalog-select"
data-testlength={catalogs.length}
>
{catalogs.map((catalog) => (
<MenuItem key={catalog.id} value={catalog.id}>
{catalog.name}
</MenuItem>
))}
</Select>
</HeaderFormControl>
{Boolean(catalog) && (
<HeaderFormControl size="small" variant="outlined">
<InputLabel id={localizedCatalogLabelId} shrink>
Localized catalog
</InputLabel>
<Select
labelId={localizedCatalogLabelId}
id={localizedCatalogSelectId}
value={localizedCatalog?.id ?? ''}
label="Localized Catalog"
onChange={handleLocalizedCatalogChange}
>
{catalog.localizedCatalogs.edges.map(({ node }) => (
<MenuItem key={node.id} value={node.id}>
{node.name}
</MenuItem>
))}
</Select>
</HeaderFormControl>
)}
</Box>
</Box>
</Toolbar>
</AppBar>
)
Expand Down
138 changes: 73 additions & 65 deletions front/example-app/src/components/Header/__snapshots__/Header.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,80 +8,88 @@ exports[`Header match snapshot 1`] = `
<div
class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-hyum1k-MuiToolbar-root"
>
<a
class="MuiTypography-root MuiTypography-h6 css-1juivf6-MuiTypography-root"
href="/"
style="display: flex; align-items: center; gap: 12px;"
>
<div>
<img
alt="Logo"
src="logo.svg"
/>
</div>
<div>
Gally - Example App
</div>
</a>
<div
class="MuiFormControl-root css-11u2dqc-MuiFormControl-root"
class="MuiBox-root css-z7mtfw"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-colorPrimary css-1sumxir-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="true"
id=":r0:"
<a
class="MuiTypography-root MuiTypography-h6 css-2ulfj5-MuiTypography-root"
href="/"
style="display: flex; align-items: center; gap: 12px;"
>
Catalog
</label>
<div>
<img
alt="Logo"
src="logo.svg"
/>
</div>
<div>
Gally - Example App
</div>
</a>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall css-1yk1gt9-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
data-testid="header-catalog-select"
data-testlength="3"
class="MuiBox-root css-0"
>
<div
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby=":r0: :r1:"
class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-jedpe8-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
id=":r1:"
role="button"
tabindex="0"
class="MuiFormControl-root css-11u2dqc-MuiFormControl-root"
>
<span
class="notranslate"
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-colorPrimary css-1sumxir-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="true"
id=":r0:"
>
​
</span>
</div>
<input
aria-hidden="true"
class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
tabindex="-1"
value=""
/>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-hfutr2-MuiSvgIcon-root-MuiSelect-icon"
data-testid="ArrowDropDownIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
<fieldset
aria-hidden="true"
class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
>
<legend
class="css-yjsfm1"
Catalog
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall css-1yk1gt9-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
data-testid="header-catalog-select"
data-testlength="3"
>
<span>
Catalog
</span>
</legend>
</fieldset>
<div
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby=":r0: :r1:"
class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-jedpe8-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
id=":r1:"
role="button"
tabindex="0"
>
<span
class="notranslate"
>
​
</span>
</div>
<input
aria-hidden="true"
class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
tabindex="-1"
value=""
/>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-hfutr2-MuiSvgIcon-root-MuiSelect-icon"
data-testid="ArrowDropDownIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
<fieldset
aria-hidden="true"
class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
>
<legend
class="css-yjsfm1"
>
<span>
Catalog
</span>
</legend>
</fieldset>
</div>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion front/example-app/src/components/SearchBar/SearchBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const StyledAutocomplete = styled(
)(({ theme }) => ({
'&.MuiAutocomplete-hasClearIcon': {
'.MuiInputBase-root': {
width: 280,
width: 500,
paddingRight: theme.spacing(2),
},
},
Expand Down

0 comments on commit 05fa15d

Please sign in to comment.