From 6127fc201839111a1151d9825206a55ed35b106e Mon Sep 17 00:00:00 2001 From: Nastya <55718143+anrusina@users.noreply.github.com> Date: Wed, 15 Jun 2022 12:08:35 -0700 Subject: [PATCH 1/5] feat: navbar navigstion dropdown Signed-off-by: Nastya <55718143+anrusina@users.noreply.github.com> --- packages/zapp/console/env.js | 3 + packages/zapp/console/package.json | 5 +- .../Navigation/DefaultAppBarContent.tsx | 9 +- .../src/components/Navigation/NavBar.tsx | 15 +- .../Navigation/NavigationDropdown.tsx | 99 +++++++ .../src/components/Navigation/utils.ts | 16 ++ packages/zapp/console/src/config/types.ts | 1 + yarn.lock | 265 +++++++++++++++--- 8 files changed, 366 insertions(+), 47 deletions(-) create mode 100644 packages/zapp/console/src/components/Navigation/NavigationDropdown.tsx create mode 100644 packages/zapp/console/src/components/Navigation/utils.ts diff --git a/packages/zapp/console/env.js b/packages/zapp/console/env.js index a8a9224db..ec741db9d 100644 --- a/packages/zapp/console/env.js +++ b/packages/zapp/console/env.js @@ -39,6 +39,8 @@ const STATUS_URL = process.env.STATUS_URL; const ENABLE_GA = process.env.ENABLE_GA || false; const GA_TRACKING_ID = process.env.GA_TRACKING_ID || 'G-0QW4DJWJ20'; +const FLYTE_NAVIGATION = process.env.FLYTE_NAVIGATION || ''; + module.exports = { ADMIN_API_URL, ADMIN_API_USE_SSL, @@ -58,5 +60,6 @@ module.exports = { GA_TRACKING_ID, NODE_ENV, STATUS_URL, + FLYTE_NAVIGATION, }, }; diff --git a/packages/zapp/console/package.json b/packages/zapp/console/package.json index 6304a0a31..0b9cc76fa 100644 --- a/packages/zapp/console/package.json +++ b/packages/zapp/console/package.json @@ -86,7 +86,6 @@ "@types/pure-render-decorator": "^0.2.27", "@types/react": "^16.9.34", "@types/react-dom": "^16.9.7", - "@types/react-router-dom": "^4.3.2", "@types/react-virtualized": "^9.21.4", "@types/serve-static": "^1.7.31", "@types/shallowequal": "^0.2.3", @@ -141,8 +140,8 @@ "react-loading-skeleton": "^1.1.2", "react-query": "^3.3.0", "react-query-devtools": "^3.0.0-beta", - "react-router": "^5.0.1", - "react-router-dom": "^5.0.1", + "react-router": "^5.2.0", + "react-router-dom": "^5.2.0", "react-virtualized": "^9.21.1", "resolve-url-loader": "^5.0.0", "semantic-release": "^19.0.3", diff --git a/packages/zapp/console/src/components/Navigation/DefaultAppBarContent.tsx b/packages/zapp/console/src/components/Navigation/DefaultAppBarContent.tsx index bad2aecba..16a0e46bb 100644 --- a/packages/zapp/console/src/components/Navigation/DefaultAppBarContent.tsx +++ b/packages/zapp/console/src/components/Navigation/DefaultAppBarContent.tsx @@ -9,8 +9,10 @@ import { Routes } from 'routes/routes'; import { FeatureFlag, useFeatureFlag } from 'basics/FeatureFlags'; import { useAdminVersion } from 'components/hooks/useVersion'; import { env } from 'common/env'; +import { NavigationDropdown } from './NavigationDropdown'; import { UserInformation } from './UserInformation'; import { OnlyMine } from './OnlyMine'; +import { FlyteNavItem } from './utils'; import t, { patternKey } from './strings'; const { version: platformVersion } = require('../../../package.json'); @@ -24,8 +26,12 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })); +interface DefaultAppBarProps { + items: FlyteNavItem[]; +} + /** Renders the default content for the app bar, which is the logo and help links */ -export const DefaultAppBarContent: React.FC = () => { +export const DefaultAppBarContent = (props: DefaultAppBarProps) => { const commonStyles = useCommonStyles(); const styles = useStyles(); @@ -55,6 +61,7 @@ export const DefaultAppBarContent: React.FC = () => { + {props.items?.length > 0 ? : false}
{isFlagEnabled && } diff --git a/packages/zapp/console/src/components/Navigation/NavBar.tsx b/packages/zapp/console/src/components/Navigation/NavBar.tsx index 4ebd0daa2..4fad8e40f 100644 --- a/packages/zapp/console/src/components/Navigation/NavBar.tsx +++ b/packages/zapp/console/src/components/Navigation/NavBar.tsx @@ -3,15 +3,26 @@ import Toolbar from '@material-ui/core/Toolbar'; import { navBarContentId } from 'common/constants'; import * as React from 'react'; import { DefaultAppBarContent } from './DefaultAppBarContent'; +import { FlyteNavData } from './utils'; /** Contains all content in the top navbar of the application. */ export const NavBar: React.FC<{ useCustomContent?: boolean }> = ({ /** Allow injection of custom content. */ useCustomContent = false, }) => { - const content = useCustomContent ?
: ; + const content = useCustomContent ? ( +
+ ) : ( + + ); return ( - + {content} ); diff --git a/packages/zapp/console/src/components/Navigation/NavigationDropdown.tsx b/packages/zapp/console/src/components/Navigation/NavigationDropdown.tsx new file mode 100644 index 000000000..2286ca682 --- /dev/null +++ b/packages/zapp/console/src/components/Navigation/NavigationDropdown.tsx @@ -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(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 ( + + ); +}; diff --git a/packages/zapp/console/src/components/Navigation/utils.ts b/packages/zapp/console/src/components/Navigation/utils.ts new file mode 100644 index 000000000..f5e2cee2e --- /dev/null +++ b/packages/zapp/console/src/components/Navigation/utils.ts @@ -0,0 +1,16 @@ +import { env } from 'common/env'; + +export interface FlyteNavItem { + title: string; + url: string; +} + +export interface FlyteNavigation { + color?: string; + background?: string; + items: FlyteNavItem[]; +} + +export const FlyteNavData: FlyteNavigation = env.FLYTE_NAVIGATION + ? JSON.parse(env.FLYTE_NAVIGATION) + : undefined; diff --git a/packages/zapp/console/src/config/types.ts b/packages/zapp/console/src/config/types.ts index 97163f9d8..18097f144 100644 --- a/packages/zapp/console/src/config/types.ts +++ b/packages/zapp/console/src/config/types.ts @@ -1,6 +1,7 @@ export interface Env extends NodeJS.ProcessEnv { ADMIN_API_URL?: string; BASE_URL?: string; + FLYTE_NAVIGATION?: string; DISABLE_ANALYTICS?: string; NODE_ENV?: 'development' | 'production' | 'test'; diff --git a/yarn.lock b/yarn.lock index 53d17789d..8384d8a0c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1233,6 +1233,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.12.13": + version "7.18.3" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4" + integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/runtime@^7.16.3": version "7.17.7" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.7.tgz#a5f3328dc41ff39d803f311cfe17703418cf9825" @@ -4206,11 +4213,6 @@ dependencies: "@types/unist" "*" -"@types/history@*": - version "4.7.8" - resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934" - integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA== - "@types/html-minifier-terser@^5.0.0": version "5.1.2" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz#693b316ad323ea97eed6b38ed1a3cc02b1672b57" @@ -4443,23 +4445,6 @@ dependencies: "@types/react" "^16" -"@types/react-router-dom@^4.3.2": - version "4.3.5" - resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.3.5.tgz#72f229967690c890d00f96e6b85e9ee5780db31f" - integrity sha512-eFajSUASYbPHg2BDM1G8Btx+YqGgvROPIg6sBhl3O4kbDdYXdFdfrgQFf/pcBuQVObjfT9AL/dd15jilR5DIEA== - dependencies: - "@types/history" "*" - "@types/react" "*" - "@types/react-router" "*" - -"@types/react-router@*": - version "5.1.8" - resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.8.tgz#4614e5ba7559657438e17766bb95ef6ed6acc3fa" - integrity sha512-HzOyJb+wFmyEhyfp4D4NYrumi+LQgQL/68HvJO+q6XtuHSDvw6Aqov7sCAhjbNq3bUPgPqbdvjXC5HeB2oEAPg== - dependencies: - "@types/history" "*" - "@types/react" "*" - "@types/react-syntax-highlighter@11.0.5": version "11.0.5" resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087" @@ -5086,6 +5071,11 @@ acorn-jsx@^5.3.1: resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b" integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng== +acorn-jsx@^5.3.2: + version "5.3.2" + resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937" + integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ== + acorn-walk@^7.1.1, acorn-walk@^7.2.0: version "7.2.0" resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc" @@ -5106,6 +5096,11 @@ acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.0: resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf" integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ== +acorn@^8.7.1: + version "8.7.1" + resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.1.tgz#0197122c843d1bf6d0a5e83220a788f278f63c30" + integrity sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A== + address@^1.0.1: version "1.1.2" resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6" @@ -6049,6 +6044,15 @@ bl@^4.0.3: inherits "^2.0.4" readable-stream "^3.4.0" +bl@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a" + integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w== + dependencies: + buffer "^5.5.0" + inherits "^2.0.4" + readable-stream "^3.4.0" + bluebird@^3.3.5, bluebird@^3.5.1, bluebird@^3.5.3, bluebird@^3.5.5: version "3.7.2" resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" @@ -6725,7 +6729,7 @@ chalk@^4.0.0, chalk@^4.1.0: ansi-styles "^4.1.0" supports-color "^7.1.0" -chalk@^4.1.2: +chalk@^4.1.1, chalk@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== @@ -6733,7 +6737,7 @@ chalk@^4.1.2: ansi-styles "^4.1.0" supports-color "^7.1.0" -chalk@^5.0.0: +chalk@^5.0.0, chalk@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.0.1.tgz#ca57d71e82bb534a296df63bbacc4a1c22b2a4b6" integrity sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w== @@ -6758,6 +6762,11 @@ character-reference-invalid@^1.0.0: resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560" integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg== +chardet@^0.7.0: + version "0.7.0" + resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e" + integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA== + chart.js@^3.6.2: version "3.6.2" resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.6.2.tgz#47342c551f688ffdda2cd53b534cb7e461ecec33" @@ -6960,6 +6969,18 @@ cli-cursor@^2.0.0, cli-cursor@^2.1.0: dependencies: restore-cursor "^2.0.0" +cli-cursor@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307" + integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw== + dependencies: + restore-cursor "^3.1.0" + +cli-spinners@^2.5.0: + version "2.6.1" + resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.6.1.tgz#adc954ebe281c37a6319bfa401e6dd2488ffb70d" + integrity sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g== + cli-table3@^0.5.0, cli-table3@^0.5.1: version "0.5.1" resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.5.1.tgz#0252372d94dfc40dbd8df06005f48f31f656f202" @@ -6996,6 +7017,11 @@ cli-truncate@^0.2.1: slice-ansi "0.0.4" string-width "^1.0.1" +cli-width@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6" + integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw== + cliui@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d" @@ -9346,6 +9372,47 @@ eslint@^8.11.0: text-table "^0.2.0" v8-compile-cache "^2.0.3" +eslint@^8.15.0: + version "8.17.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.17.0.tgz#1cfc4b6b6912f77d24b874ca1506b0fe09328c21" + integrity sha512-gq0m0BTJfci60Fz4nczYxNAlED+sMcihltndR8t9t1evnU/azx53x3t2UHXC/uRjcbvRw/XctpaNygSTcQD+Iw== + dependencies: + "@eslint/eslintrc" "^1.3.0" + "@humanwhocodes/config-array" "^0.9.2" + ajv "^6.10.0" + chalk "^4.0.0" + cross-spawn "^7.0.2" + debug "^4.3.2" + doctrine "^3.0.0" + escape-string-regexp "^4.0.0" + eslint-scope "^7.1.1" + eslint-utils "^3.0.0" + eslint-visitor-keys "^3.3.0" + espree "^9.3.2" + esquery "^1.4.0" + esutils "^2.0.2" + fast-deep-equal "^3.1.3" + file-entry-cache "^6.0.1" + functional-red-black-tree "^1.0.1" + glob-parent "^6.0.1" + globals "^13.15.0" + ignore "^5.2.0" + import-fresh "^3.0.0" + imurmurhash "^0.1.4" + is-glob "^4.0.0" + js-yaml "^4.1.0" + json-stable-stringify-without-jsonify "^1.0.1" + levn "^0.4.1" + lodash.merge "^4.6.2" + minimatch "^3.1.2" + natural-compare "^1.4.0" + optionator "^0.9.1" + regexpp "^3.2.0" + strip-ansi "^6.0.1" + strip-json-comments "^3.1.0" + text-table "^0.2.0" + v8-compile-cache "^2.0.3" + espree@^9.3.1: version "9.3.1" resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.1.tgz#8793b4bc27ea4c778c19908e0719e7b8f4115bcd" @@ -9355,6 +9422,15 @@ espree@^9.3.1: acorn-jsx "^5.3.1" eslint-visitor-keys "^3.3.0" +espree@^9.3.2: + version "9.3.2" + resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.2.tgz#f58f77bd334731182801ced3380a8cc859091596" + integrity sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA== + dependencies: + acorn "^8.7.1" + acorn-jsx "^5.3.2" + eslint-visitor-keys "^3.3.0" + esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71" @@ -9644,6 +9720,15 @@ extend@^3.0.0, extend@~3.0.2: resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa" integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g== +external-editor@^3.0.3: + version "3.1.0" + resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495" + integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew== + dependencies: + chardet "^0.7.0" + iconv-lite "^0.4.24" + tmp "^0.0.33" + extglob@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543" @@ -10624,6 +10709,13 @@ globals@^11.1.0: resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== +globals@^13.15.0: + version "13.15.0" + resolved "https://registry.yarnpkg.com/globals/-/globals-13.15.0.tgz#38113218c907d2f7e98658af246cef8b77e90bac" + integrity sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog== + dependencies: + type-fest "^0.20.2" + globals@^13.6.0, globals@^13.9.0: version "13.13.0" resolved "https://registry.yarnpkg.com/globals/-/globals-13.13.0.tgz#ac32261060d8070e2719dd6998406e27d2b5727b" @@ -11320,7 +11412,7 @@ hyphenate-style-name@^1.0.3: resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d" integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ== -iconv-lite@0.4, iconv-lite@0.4.24: +iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA== @@ -11547,6 +11639,27 @@ inline-style-parser@0.1.1: resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1" integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q== +inquirer@^8.2.4: + version "8.2.4" + resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-8.2.4.tgz#ddbfe86ca2f67649a67daa6f1051c128f684f0b4" + integrity sha512-nn4F01dxU8VeKfq192IjLsxu0/OmMZ4Lg3xKAns148rCaXP6ntAoEkVYZThWjwON8AlzdZZi6oqnhNbxUG9hVg== + dependencies: + ansi-escapes "^4.2.1" + chalk "^4.1.1" + cli-cursor "^3.1.0" + cli-width "^3.0.0" + external-editor "^3.0.3" + figures "^3.0.0" + lodash "^4.17.21" + mute-stream "0.0.8" + ora "^5.4.1" + run-async "^2.4.0" + rxjs "^7.5.5" + string-width "^4.1.0" + strip-ansi "^6.0.0" + through "^2.3.6" + wrap-ansi "^7.0.0" + internal-slot@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c" @@ -11913,6 +12026,11 @@ is-installed-globally@^0.1.0: global-dirs "^0.1.0" is-path-inside "^1.0.0" +is-interactive@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e" + integrity sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w== + is-lambda@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/is-lambda/-/is-lambda-1.0.1.tgz#3d9877899e6a53efc0160504cde15f82e6f061d5" @@ -12121,6 +12239,11 @@ is-typedarray@^1.0.0, is-typedarray@~1.0.0: resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= +is-unicode-supported@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz#3f26c76a809593b52bfa2ecb5710ed2779b522a7" + integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw== + is-weakref@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2" @@ -13442,7 +13565,7 @@ listr-verbose-renderer@^0.5.0: date-fns "^1.27.2" figures "^2.0.0" -listr@^0.14.1: +listr@^0.14.1, listr@^0.14.3: version "0.14.3" resolved "https://registry.yarnpkg.com/listr/-/listr-0.14.3.tgz#2fea909604e434be464c50bddba0d496928fa586" integrity sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA== @@ -13721,6 +13844,14 @@ log-symbols@^2.2.0: dependencies: chalk "^2.0.1" +log-symbols@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503" + integrity sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg== + dependencies: + chalk "^4.1.0" + is-unicode-supported "^0.1.0" + log-update@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708" @@ -14583,7 +14714,7 @@ multicast-dns@^7.2.4: dns-packet "^5.2.2" thunky "^1.0.2" -mute-stream@~0.0.4: +mute-stream@0.0.8, mute-stream@~0.0.4: version "0.0.8" resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== @@ -14630,6 +14761,11 @@ natural-compare@^1.4.0: resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc= +ncp@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3" + integrity sha512-zIdGUrPRFTUELUvr3Gmc7KZ2Sw/h1PiVM0Af/oHB6zgnV1ikqSfRk+TOufi79aHYCW3NiOXmr1BP5nWbzojLaA== + negotiator@0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb" @@ -15592,6 +15728,21 @@ optionator@^0.9.1: type-check "^0.4.0" word-wrap "^1.2.3" +ora@^5.4.1: + version "5.4.1" + resolved "https://registry.yarnpkg.com/ora/-/ora-5.4.1.tgz#1b2678426af4ac4a509008e5e4ac9e9959db9e18" + integrity sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ== + dependencies: + bl "^4.1.0" + chalk "^4.1.0" + cli-cursor "^3.1.0" + cli-spinners "^2.5.0" + is-interactive "^1.0.0" + is-unicode-supported "^0.1.0" + log-symbols "^4.1.0" + strip-ansi "^6.0.0" + wcwidth "^1.0.1" + os-browserify@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27" @@ -15611,7 +15762,7 @@ os-locale@^2.0.0: lcid "^1.0.0" mem "^1.1.0" -os-tmpdir@^1.0.0: +os-tmpdir@^1.0.0, os-tmpdir@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ= @@ -17079,16 +17230,16 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== -react-router-dom@^5.0.1: - version "5.2.0" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662" - integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA== +react-router-dom@^5.2.0: + version "5.3.3" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.3.tgz#8779fc28e6691d07afcaf98406d3812fe6f11199" + integrity sha512-Ov0tGPMBgqmbu5CDmN++tv2HQ9HlWDuWIIqn4b88gjlAN5IHI+4ZUZRcpz9Hl0azFIwihbLDYw1OiHGRo7ZIng== dependencies: - "@babel/runtime" "^7.1.2" + "@babel/runtime" "^7.12.13" history "^4.9.0" loose-envify "^1.3.1" prop-types "^15.6.2" - react-router "5.2.0" + react-router "5.3.3" tiny-invariant "^1.0.2" tiny-warning "^1.0.0" @@ -17100,12 +17251,12 @@ react-router-dom@^6.0.0: history "^5.2.0" react-router "6.2.2" -react-router@5.2.0, react-router@^5.0.1: - version "5.2.0" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293" - integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw== +react-router@5.3.3, react-router@^5.2.0: + version "5.3.3" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.3.3.tgz#8e3841f4089e728cf82a429d92cdcaa5e4a3a288" + integrity sha512-mzQGUvS3bM84TnbtMYR8ZjKnuPJ71IjSzR+DE6UkUqvN4czWIqEs17yLL8xkAycv4ev0AiN+IGrWu88vJs/p2w== dependencies: - "@babel/runtime" "^7.1.2" + "@babel/runtime" "^7.12.13" history "^4.9.0" hoist-non-react-statics "^3.1.0" loose-envify "^1.3.1" @@ -17850,6 +18001,14 @@ restore-cursor@^2.0.0: onetime "^2.0.0" signal-exit "^3.0.2" +restore-cursor@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e" + integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA== + dependencies: + onetime "^5.1.0" + signal-exit "^3.0.2" + ret@~0.1.10: version "0.1.15" resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc" @@ -17909,6 +18068,11 @@ rsvp@^4.8.4: resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734" integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA== +run-async@^2.4.0: + version "2.4.1" + resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455" + integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ== + run-parallel@^1.1.9: version "1.1.10" resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.10.tgz#60a51b2ae836636c81377df16cb107351bcd13ef" @@ -17933,6 +18097,13 @@ rxjs@^6.3.3: dependencies: tslib "^1.9.0" +rxjs@^7.5.5: + version "7.5.5" + resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.5.tgz#2ebad89af0f560f460ad5cc4213219e1f7dd4e9f" + integrity sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw== + dependencies: + tslib "^2.1.0" + safe-buffer@5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853" @@ -19406,7 +19577,7 @@ through2@^4.0.0, through2@^4.0.2: dependencies: readable-stream "3" -through@2, "through@>=2.2.7 <3": +through@2, "through@>=2.2.7 <3", through@^2.3.6: version "2.3.8" resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU= @@ -19453,6 +19624,13 @@ tinycolor2@^1.1.2, tinycolor2@^1.4.1, tinycolor2@^1.4.2: resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803" integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA== +tmp@^0.0.33: + version "0.0.33" + resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9" + integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw== + dependencies: + os-tmpdir "~1.0.2" + tmpl@1.0.x: version "1.0.5" resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc" @@ -19663,6 +19841,11 @@ tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.3.0: resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01" integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw== +tslib@^2.1.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3" + integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ== + tsutils@^3.21.0: version "3.21.0" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623" @@ -20392,7 +20575,7 @@ wbuf@^1.1.0, wbuf@^1.7.3: dependencies: minimalistic-assert "^1.0.0" -wcwidth@^1.0.0: +wcwidth@^1.0.0, wcwidth@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8" integrity sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g= From 63e07de2872b66f8b0d0b3f30540827b1f86a7ac Mon Sep 17 00:00:00 2001 From: Nastya <55718143+anrusina@users.noreply.github.com> Date: Wed, 15 Jun 2022 14:05:55 -0700 Subject: [PATCH 2/5] chore: storybook update Signed-off-by: Nastya <55718143+anrusina@users.noreply.github.com> --- .../src/components/Navigation/NavBar.tsx | 20 ++- .../Navigation/__stories__/Navbar.stories.tsx | 144 ++++++++++++++---- .../src/components/Navigation/utils.ts | 6 +- 3 files changed, 133 insertions(+), 37 deletions(-) diff --git a/packages/zapp/console/src/components/Navigation/NavBar.tsx b/packages/zapp/console/src/components/Navigation/NavBar.tsx index 4fad8e40f..05bf9bede 100644 --- a/packages/zapp/console/src/components/Navigation/NavBar.tsx +++ b/packages/zapp/console/src/components/Navigation/NavBar.tsx @@ -3,25 +3,29 @@ import Toolbar from '@material-ui/core/Toolbar'; import { navBarContentId } from 'common/constants'; import * as React from 'react'; import { DefaultAppBarContent } from './DefaultAppBarContent'; -import { FlyteNavData } from './utils'; +import { FlyteNavigation, getFlyteNavigationData } from './utils'; + +export interface NavBarProps { + useCustomContent?: boolean; + navigationData?: FlyteNavigation; +} /** Contains all content in the top navbar of the application. */ -export const NavBar: React.FC<{ useCustomContent?: boolean }> = ({ - /** Allow injection of custom content. */ - useCustomContent = false, -}) => { - const content = useCustomContent ? ( +export const NavBar = (props: NavBarProps) => { + const navData = props.navigationData ?? getFlyteNavigationData(); + const content = props.useCustomContent ? (
) : ( - + ); + return ( {content} diff --git a/packages/zapp/console/src/components/Navigation/__stories__/Navbar.stories.tsx b/packages/zapp/console/src/components/Navigation/__stories__/Navbar.stories.tsx index 431d5f7e7..a99c8585e 100644 --- a/packages/zapp/console/src/components/Navigation/__stories__/Navbar.stories.tsx +++ b/packages/zapp/console/src/components/Navigation/__stories__/Navbar.stories.tsx @@ -1,11 +1,17 @@ -import { storiesOf } from '@storybook/react'; +import * as React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { FeatureFlag, useFeatureFlagContext } from 'basics/FeatureFlags'; import { ExecutionContext } from 'components/Executions/contexts'; import { ExecutionDetailsAppBarContent } from 'components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent'; import { mockExecution } from 'models/Execution/__mocks__/mockWorkflowExecutionsData'; import { createMockExecution } from 'models/__mocks__/executionsData'; -import * as React from 'react'; -import { FeatureFlag, useFeatureFlagContext } from 'basics/FeatureFlags'; import { NavBar } from '../NavBar'; +import { FlyteNavigation, FlyteNavItem } from '../utils'; + +export default { + title: 'Navigation/NavBar', + component: NavBar, +} as ComponentMeta; // Helper to let us delay rendering of custom content until after the first // mount of the app bar, so that the target element will exist. @@ -15,29 +21,115 @@ const DelayedMount: React.FC> = ({ children }) => { return showContent ? <>{children} : null; }; +const removeCustomToggle = { + // Remove useCustomContent toggle from UI + useCustomContent: { + table: { + disable: true, + }, + }, +}; +const removeNavData = { + // Remove useCustomContent toggle from UI + navigationData: { + table: { + disable: true, + }, + }, +}; + +/* **************************************** + * Stories + **************************************** */ + +const Template: ComponentStory = (props) => ; +export const Default = Template.bind({}); +Default.argTypes = { ...removeCustomToggle, ...removeNavData }; + +export const ExecutionDetails = Template.bind({}); +ExecutionDetails.argTypes = removeNavData; +ExecutionDetails.args = { + useCustomContent: true, +}; const execution = createMockExecution(); const executionContext = { execution }; +ExecutionDetails.decorators = [ + (Story, context) => { + return ( + <> + {Story()} + + {/* allow to switch between two views */} + {context.args.useCustomContent ? ( + + + + ) : null} + + + ); + }, +]; + +export const OnlyMine = Template.bind({}); +OnlyMine.argTypes = { ...removeCustomToggle, ...removeNavData }; +OnlyMine.decorators = [ + (Story) => { + const { setFeatureFlag } = useFeatureFlagContext(); + React.useEffect(() => { + console.log('Set'); + setFeatureFlag(FeatureFlag.OnlyMine, true); + return () => { + console.log('Clean'); + setFeatureFlag(FeatureFlag.OnlyMine, false); + }; + }, []); -const stories = storiesOf('Navigation/NavBar', module); -stories.add('default', () => ); -stories.add('execution details', () => ( - <> - - - - - - - -)); -stories.add('only mine', () => { - const { setFeatureFlag } = useFeatureFlagContext(); - React.useEffect(() => { - setFeatureFlag(FeatureFlag.OnlyMine, true); - return () => { - setFeatureFlag(FeatureFlag.OnlyMine, false); - }; - }, []); - - return ; -}); + return Story(); + }, +]; + +/* **************************************** + * Show Component Coloring + **************************************** */ +const ColoredNavBar = ({ + useCustomContent, + color, + background, + items, +}: { + useCustomContent: boolean; + color: string; + background: string; + items: FlyteNavItem[]; +}) => { + const navigationData: FlyteNavigation = { + color, + background, + items, + }; + return ( + <> + + + {/* allow to switch between two views */} + {useCustomContent ? ( + + + + ) : null} + + + ); +}; +const FullTemplate: ComponentStory = (props) => ; +export const WithColor = FullTemplate.bind({}); +WithColor.argTypes = removeNavData as any; +WithColor.args = { + useCustomContent: false, + color: 'white', + background: 'black', + items: [ + { title: 'Dashboard', url: '/projects/flytesnacks/executions?domain=development&duration=all' }, + ], +}; diff --git a/packages/zapp/console/src/components/Navigation/utils.ts b/packages/zapp/console/src/components/Navigation/utils.ts index f5e2cee2e..35e23a244 100644 --- a/packages/zapp/console/src/components/Navigation/utils.ts +++ b/packages/zapp/console/src/components/Navigation/utils.ts @@ -11,6 +11,6 @@ export interface FlyteNavigation { items: FlyteNavItem[]; } -export const FlyteNavData: FlyteNavigation = env.FLYTE_NAVIGATION - ? JSON.parse(env.FLYTE_NAVIGATION) - : undefined; +export const getFlyteNavigationData = (): FlyteNavigation | undefined => { + return env.FLYTE_NAVIGATION ? JSON.parse(env.FLYTE_NAVIGATION) : undefined; +}; From 765e89eddcb8cede98d7b527e0a0f62d8af31dfd Mon Sep 17 00:00:00 2001 From: Nastya <55718143+anrusina@users.noreply.github.com> Date: Wed, 15 Jun 2022 17:05:34 -0700 Subject: [PATCH 3/5] chore: fix test + add base readme Signed-off-by: Nastya <55718143+anrusina@users.noreply.github.com> --- packages/zapp/console/package.json | 1 + .../src/components/Navigation/Readme.md | 44 +++++++++++++++++++ yarn.lock | 22 ++++++++++ 3 files changed, 67 insertions(+) create mode 100644 packages/zapp/console/src/components/Navigation/Readme.md diff --git a/packages/zapp/console/package.json b/packages/zapp/console/package.json index 0b9cc76fa..31aa4fc7b 100644 --- a/packages/zapp/console/package.json +++ b/packages/zapp/console/package.json @@ -86,6 +86,7 @@ "@types/pure-render-decorator": "^0.2.27", "@types/react": "^16.9.34", "@types/react-dom": "^16.9.7", + "@types/react-router-dom": "^5.3.3", "@types/react-virtualized": "^9.21.4", "@types/serve-static": "^1.7.31", "@types/shallowequal": "^0.2.3", diff --git a/packages/zapp/console/src/components/Navigation/Readme.md b/packages/zapp/console/src/components/Navigation/Readme.md new file mode 100644 index 000000000..233a5ed6e --- /dev/null +++ b/packages/zapp/console/src/components/Navigation/Readme.md @@ -0,0 +1,44 @@ +## 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: + +#### 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. diff --git a/yarn.lock b/yarn.lock index 8384d8a0c..de8d2b599 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4213,6 +4213,11 @@ dependencies: "@types/unist" "*" +"@types/history@^4.7.11": + version "4.7.11" + resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64" + integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA== + "@types/html-minifier-terser@^5.0.0": version "5.1.2" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz#693b316ad323ea97eed6b38ed1a3cc02b1672b57" @@ -4445,6 +4450,23 @@ dependencies: "@types/react" "^16" +"@types/react-router-dom@^5.3.3": + version "5.3.3" + resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83" + integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw== + dependencies: + "@types/history" "^4.7.11" + "@types/react" "*" + "@types/react-router" "*" + +"@types/react-router@*": + version "5.1.18" + resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.18.tgz#c8851884b60bc23733500d86c1266e1cfbbd9ef3" + integrity sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g== + dependencies: + "@types/history" "^4.7.11" + "@types/react" "*" + "@types/react-syntax-highlighter@11.0.5": version "11.0.5" resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087" From 06a6d641f7a844e63504c4ff0ace32317b9b733e Mon Sep 17 00:00:00 2001 From: Nastya <55718143+anrusina@users.noreply.github.com> Date: Wed, 15 Jun 2022 17:16:52 -0700 Subject: [PATCH 4/5] Update Readme.md Adding screenshot --- packages/zapp/console/src/components/Navigation/Readme.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/zapp/console/src/components/Navigation/Readme.md b/packages/zapp/console/src/components/Navigation/Readme.md index 233a5ed6e..dc85b0da5 100644 --- a/packages/zapp/console/src/components/Navigation/Readme.md +++ b/packages/zapp/console/src/components/Navigation/Readme.md @@ -39,6 +39,9 @@ It will contain at least two items: Feel free to play around with the views in Storybook: +Screen Shot 2022-06-15 at 2 01 29 PM + + #### 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. From dde98f31271e6a3795fe09a76de9a7a3fb3393a7 Mon Sep 17 00:00:00 2001 From: Nastya <55718143+anrusina@users.noreply.github.com> Date: Wed, 15 Jun 2022 17:22:47 -0700 Subject: [PATCH 5/5] Update REadMe --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index 0b35c4583..edd26fe54 100644 --- a/README.md +++ b/README.md @@ -105,6 +105,11 @@ OR necessary when hosting the API and console on the same domain (with prefixes of `/api/v1` and `/console` for example). For local development, this is usually not needed, so the default behavior is to run without a prefix. + +* `FLYTE_NAVIGATION` (default: `undefined`) + + UI related. Allows you to change colors of the navigation bar and add links + to other internal pages or external sites. **[More info](packages/zapp/console/src/components/Navigation/Readme.md)** ### Running from docker image as localhost @@ -136,6 +141,11 @@ will be stalled until the bundles have finished. The application will be accessi at http://localhost:3000 (if using the default port). +### 🎱 Using items in your own application + +* Authorize your app to call flyte admin api. **[More info](packages/plugins/flyte-api/README.md)** + + ## 🛠 Development For continious development we are using: