-
Notifications
You must be signed in to change notification settings - Fork 59
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: navbar navigation dropdown (#511)
* feat: navbar navigstion dropdown * chore: storybook update * chore: fix test + add base readme Signed-off-by: Nastya <[email protected]>
- Loading branch information
Showing
11 changed files
with
563 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
99 changes: 99 additions & 0 deletions
99
packages/zapp/console/src/components/Navigation/NavigationDropdown.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import * as React from 'react'; | ||
| import { makeStyles, Theme } from '@material-ui/core/styles'; | ||
| import { MenuItem, Select } from '@material-ui/core'; | ||
| import { useHistory } from 'react-router-dom'; | ||
| import { makeRoute } from 'routes/utils'; | ||
| import { headerFontFamily } from 'components/Theme/constants'; | ||
| import { FlyteNavItem } from './utils'; | ||
|
|
||
| const useStyles = makeStyles((theme: Theme) => ({ | ||
| selectStyling: { | ||
| minWidth: '120px', | ||
| margin: theme.spacing(0, 2), | ||
| color: 'inherit', | ||
| '&:hover': { | ||
| color: 'inherit', | ||
| }, | ||
| '&:before, &:after, &:not(.Mui-disabled):hover::before': { | ||
| border: 'none', | ||
| }, | ||
| }, | ||
| colorInherit: { | ||
| color: 'inherit', | ||
| fontFamily: headerFontFamily, | ||
| fontWeight: 600, | ||
| lineHeight: 1.75, | ||
| }, | ||
| })); | ||
|
|
||
| interface NavigationDropdownProps { | ||
| items: FlyteNavItem[]; | ||
| } | ||
|
|
||
| // Flyte Console list item - always there ans is first in the list | ||
| const ConsoleItem: FlyteNavItem = { | ||
| title: 'Console', | ||
| url: makeRoute('/'), | ||
| }; | ||
|
|
||
| /** Renders the default content for the app bar, which is the logo and help links */ | ||
| export const NavigationDropdown = (props: NavigationDropdownProps) => { | ||
| const [selectedPage, setSelectedPage] = React.useState<string>(ConsoleItem.title); | ||
| const [open, setOpen] = React.useState(false); | ||
|
|
||
| const history = useHistory(); | ||
| const styles = useStyles(); | ||
|
|
||
| const handleItemSelection = (item: FlyteNavItem) => { | ||
| setSelectedPage(item.title); | ||
|
|
||
| if (item.url.startsWith('/')) { | ||
| // local navigation without BASE_URL addition | ||
| history.push(item.url); | ||
| } else { | ||
| // external navigation | ||
| window.location.assign(item.url); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Select | ||
| labelId="demo-controlled-open-select-label" | ||
| id="demo-controlled-open-select" | ||
| open={open} | ||
| onClose={() => setOpen(false)} | ||
| onOpen={() => setOpen(true)} | ||
| value={selectedPage} | ||
| className={styles.selectStyling} | ||
| classes={{ | ||
| // update color of text and icon | ||
| root: styles.colorInherit, | ||
| icon: styles.colorInherit, | ||
| }} | ||
| MenuProps={{ | ||
| anchorOrigin: { | ||
| vertical: 'bottom', | ||
| horizontal: 'left', | ||
| }, | ||
| transformOrigin: { | ||
| vertical: 'top', | ||
| horizontal: 'left', | ||
| }, | ||
| getContentAnchorEl: null, | ||
| }} | ||
| > | ||
| <MenuItem | ||
| key={ConsoleItem.title} | ||
| value={ConsoleItem.title} | ||
| onClick={() => handleItemSelection(ConsoleItem)} | ||
| > | ||
| {ConsoleItem.title} | ||
| </MenuItem> | ||
| {props.items.map((item) => ( | ||
| <MenuItem key={item.title} value={item.title} onClick={() => handleItemSelection(item)}> | ||
| {item.title} | ||
| </MenuItem> | ||
| ))} | ||
| </Select> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| ## Customize NavBar component | ||
|
|
||
| From this point forward you can modify your FlyteConsole navigatio bar by: | ||
|
|
||
| - using your company colors | ||
| - providing entrypoint navigation to sites, or places inside flyteconsole. | ||
|
|
||
| To use it you will need to define `FLYTE_NAVIGATION` environment variable during the build. | ||
|
|
||
| If you are building locally add next or similar export to your `.zshrc` (or equivalent) file: | ||
|
|
||
| ```bash | ||
| export FLYTE_NAVIGATION='{"color":"white","background":"black","items":[{"title":"Hosted","url":"https://hosted.cloud-staging.union.ai/dashboard"}, {"title":"Dashboard","url":"/projects/flytesnacks/executions?domain=development&duration=all"},{"title":"Execution", "url":"/projects/flytesnacks/domains/development/executions/awf2lx4g58htr8svwb7x?duration=all"}]}' | ||
| ``` | ||
|
|
||
| If you are building a docker image - modify [Makefile](./Makefile) `build_prod` step to include FLYTE_NAVIGATION setup. | ||
|
|
||
| ### The structure of FLYTE_NAVIGATION | ||
|
|
||
| Essentially FLYTE_NAVIGATION is a JSON object | ||
|
|
||
| ``` | ||
| { | ||
| color:"white", // default NavBar text color | ||
| background:"black", // default NavBar background color | ||
| items:[ | ||
| {title:"Remote", url:"https://remote.site/"}, | ||
| {title:"Dashboard", url:"/projects/flytesnacks/executions?domain=development&duration=all"}, | ||
| {title:"Execution", url:"/projects/flytesnacks/domains/development/executions/awf2lx4g58htr8svwb7x?duration=all"} | ||
| ] | ||
| } | ||
| ``` | ||
|
|
||
| If at least one item in `items` array is present the dropdown will appear in NavBar main view. | ||
| It will contain at least two items: | ||
|
|
||
| - default "Console" item which navigates to ${BASE_URL} | ||
| - all items you have provided | ||
|
|
||
| Feel free to play around with the views in Storybook: | ||
|
|
||
| <img width="874" alt="Screen Shot 2022-06-15 at 2 01 29 PM" src="https://user-images.githubusercontent.com/55718143/173962811-a3603d6c-3fe4-4cab-b57a-4d4806c88cfc.png"> | ||
|
|
||
|
|
||
| #### Note | ||
|
|
||
| Please let us know in [Slack #flyte-console](https://flyte-org.slack.com/archives/CTJJLM8BY) channel if you found bugs or need more support than. |
Oops, something went wrong.