Skip to content

Commit

Permalink
frontend: Add GlobalSearch to TopBar
Browse files Browse the repository at this point in the history 
Signed-off-by: Oleksandr Dubenko <oldubenko@microsoft.com>
  • Loading branch information
@sniok
sniok committed Nov 18, 2024
1 parent 5de267f commit 5a682e2
Show file tree
Hide file tree
Showing 8 changed files with 252 additions and 11 deletions.
6 changes: 5 additions & 1 deletion frontend/src/components/App/TopBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { useTypedSelector } from '../../redux/reducers/reducers';
import { SettingsButton } from '../App/Settings';
import { ClusterTitle } from '../cluster/Chooser';
import ErrorBoundary from '../common/ErrorBoundary';
import { GlobalSearch } from '../globalSearch/GlobalSearch';
import { drawerWidth } from '../Sidebar';
import HeadlampButton from '../Sidebar/HeadlampButton';
import { setWhetherSidebarOpen } from '../Sidebar/sidebarSlice';
Expand Down Expand Up @@ -353,6 +354,10 @@ export function PureTopBar({
);

const allAppBarActions: AppBarAction[] = [
{
id: DefaultAppBarAction.GLOBAL_SEARCH,
action: <GlobalSearch />,
},
{
id: DefaultAppBarAction.CLUSTER,
action: (
Expand Down Expand Up @@ -433,7 +438,6 @@ export function PureTopBar({
) : (
<>
<AppLogo />
<Box sx={{ flexGrow: 1 }} />
<AppBarActions
appBarActions={processAppBarActions(allAppBarActions, appBarActionsProcessors)}
/>
Expand Down
51 changes: 49 additions & 2 deletions frontend/src/components/App/__snapshots__/TopBar.NoToken.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,55 @@
/>
</svg>
<div
class="MuiBox-root css-i9gxme"
/>
class="MuiFormControl-root MuiTextField-root css-4ydacy-MuiFormControl-root-MuiTextField-root"
>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-7on80l-MuiInputBase-root-MuiOutlinedInput-root"
>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-16yk9m0-MuiInputAdornment-root"
>
<span
class="notranslate"
>
​
</span>
</div>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-12yjm75-MuiInputBase-input-MuiOutlinedInput-input"
id=":mock-test-id:"
placeholder="Search"
type="text"
value=""
/>
<div
class="MuiBox-root css-bl9uxy"
>
Press
<div
class="MuiBox-root css-1y54l5z"
>
/
</div>
to search
</div>
<fieldset
aria-hidden="true"
class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
>
<legend
class="css-ihdtdm"
>
<span
class="notranslate"
>
​
</span>
</legend>
</fieldset>
</div>
</div>
<div
class="MuiBox-root css-3n7f37"
/>
Expand Down
51 changes: 49 additions & 2 deletions frontend/src/components/App/__snapshots__/TopBar.OneCluster.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,55 @@
/>
</svg>
<div
class="MuiBox-root css-i9gxme"
/>
class="MuiFormControl-root MuiTextField-root css-4ydacy-MuiFormControl-root-MuiTextField-root"
>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-7on80l-MuiInputBase-root-MuiOutlinedInput-root"
>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-16yk9m0-MuiInputAdornment-root"
>
<span
class="notranslate"
>
​
</span>
</div>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-12yjm75-MuiInputBase-input-MuiOutlinedInput-input"
id=":mock-test-id:"
placeholder="Search"
type="text"
value=""
/>
<div
class="MuiBox-root css-bl9uxy"
>
Press
<div
class="MuiBox-root css-1y54l5z"
>
/
</div>
to search
</div>
<fieldset
aria-hidden="true"
class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
>
<legend
class="css-ihdtdm"
>
<span
class="notranslate"
>
​
</span>
</legend>
</fieldset>
</div>
</div>
<div
class="MuiBox-root css-3n7f37"
/>
Expand Down
51 changes: 49 additions & 2 deletions frontend/src/components/App/__snapshots__/TopBar.ProcessorAction.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,55 @@
/>
</svg>
<div
class="MuiBox-root css-i9gxme"
/>
class="MuiFormControl-root MuiTextField-root css-4ydacy-MuiFormControl-root-MuiTextField-root"
>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-7on80l-MuiInputBase-root-MuiOutlinedInput-root"
>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-16yk9m0-MuiInputAdornment-root"
>
<span
class="notranslate"
>
​
</span>
</div>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-12yjm75-MuiInputBase-input-MuiOutlinedInput-input"
id=":mock-test-id:"
placeholder="Search"
type="text"
value=""
/>
<div
class="MuiBox-root css-bl9uxy"
>
Press
<div
class="MuiBox-root css-1y54l5z"
>
/
</div>
to search
</div>
<fieldset
aria-hidden="true"
class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
>
<legend
class="css-ihdtdm"
>
<span
class="notranslate"
>
​
</span>
</legend>
</fieldset>
</div>
</div>
<div
class="MuiBox-root css-3n7f37"
/>
Expand Down
51 changes: 49 additions & 2 deletions frontend/src/components/App/__snapshots__/TopBar.Token.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,55 @@
/>
</svg>
<div
class="MuiBox-root css-i9gxme"
/>
class="MuiFormControl-root MuiTextField-root css-4ydacy-MuiFormControl-root-MuiTextField-root"
>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-7on80l-MuiInputBase-root-MuiOutlinedInput-root"
>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-16yk9m0-MuiInputAdornment-root"
>
<span
class="notranslate"
>
​
</span>
</div>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-12yjm75-MuiInputBase-input-MuiOutlinedInput-input"
id=":mock-test-id:"
placeholder="Search"
type="text"
value=""
/>
<div
class="MuiBox-root css-bl9uxy"
>
Press
<div
class="MuiBox-root css-1y54l5z"
>
/
</div>
to search
</div>
<fieldset
aria-hidden="true"
class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
>
<legend
class="css-ihdtdm"
>
<span
class="notranslate"
>
​
</span>
</legend>
</fieldset>
</div>
</div>
<div
class="MuiBox-root css-3n7f37"
/>
Expand Down
51 changes: 49 additions & 2 deletions frontend/src/components/App/__snapshots__/TopBar.TwoCluster.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,55 @@
/>
</svg>
<div
class="MuiBox-root css-i9gxme"
/>
class="MuiFormControl-root MuiTextField-root css-4ydacy-MuiFormControl-root-MuiTextField-root"
>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd css-7on80l-MuiInputBase-root-MuiOutlinedInput-root"
>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-16yk9m0-MuiInputAdornment-root"
>
<span
class="notranslate"
>
​
</span>
</div>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-12yjm75-MuiInputBase-input-MuiOutlinedInput-input"
id=":mock-test-id:"
placeholder="Search"
type="text"
value=""
/>
<div
class="MuiBox-root css-bl9uxy"
>
Press
<div
class="MuiBox-root css-1y54l5z"
>
/
</div>
to search
</div>
<fieldset
aria-hidden="true"
class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
>
<legend
class="css-ihdtdm"
>
<span
class="notranslate"
>
​
</span>
</legend>
</fieldset>
</div>
</div>
<div
class="MuiBox-root css-3n7f37"
>
Expand Down
1 change: 1 addition & 0 deletions frontend/src/plugin/__snapshots__/pluginLib.snapshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@
},
"DefaultAppBarAction": {
"CLUSTER": "CLUSTER",
"GLOBAL_SEARCH": "GLOBAL_SEARCH",
"NOTIFICATION": "NOTIFICATION",
"SETTINGS": "SETTINGS",
"USER": "USER",
Expand Down
1 change: 1 addition & 0 deletions frontend/src/redux/actionButtonsSlice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export enum DefaultAppBarAction {
NOTIFICATION = 'NOTIFICATION',
SETTINGS = 'SETTINGS',
USER = 'USER',
GLOBAL_SEARCH = 'GLOBAL_SEARCH',
}

type HeaderActionFuncType = (
Expand Down

0 comments on commit 5a682e2

Please sign in to comment.