From da1083c519005bc5cc91ed671f6bf5d02ade6b6f Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 21 Oct 2019 17:06:54 -0700 Subject: [PATCH] Merge search to master (#315) * Merge `master` into `feature/search_v2` (#253) * Clean up doc (#249) * Remove example folder in FE (#251) * Add better logging for profile page views (#239) * Added new search page layout (#250) * Added SearchPanel to search page, with new wide layout * Added 'ResourceSelector' * Add SearchBar to NavBar + update styles (#252) * Add SearchBar to NavBar + update styles * Lint fix * Code cleanup * Fix tests * Update ResourceListItem UI (#255) * WIP * Update layout * Some code cleanup * Tests * Add some starter doc for the AppConfig * Code cleanup + update UserListItem description UI * start icon -> resource icon * Moved Feedback tool to NavBar (#256) * Update Feedback Component * Update tests * Clean up some styles * reposition form * Tweak feedback style * Initial implementation of SearchFilter (#260) * Initial implementation of SearchFilter * Clean some code + add CheckBoxItem tests * Fixed warning on ResourceSelector * Add/fix some more tests * Some tweaks before merge * Implement New color theme (#276) * Added a color palette file * Replaced $gray-light/dark colors with semantic variables for each purpose * Update brand colors to indigo * Merge `master` into `feature/search_v2` (#286) * Update searchv2 master (#313) * Clean up doc (#249) * Remove example folder in FE (#251) * Add better logging for profile page views (#239) * add stalebot config (#264) * Update stalebot setting (#268) * Adds the request timeout configuration (#275) * Adds the request timeout configuration * Bumps the version to take advantage of request timeout * Update AxiosError handling (#283) * Update v0.ts * lint fix * Use Redux-Saga for Search Actions (#265) * Added redux actions and sagas instead for each search action: `submitSearch`, `setResource`, `setPageIndex`, `loadPreviousSearch`, and `UrlDidUpdate`. This greatly simplifies the `SearchPage` logic in preparation for adding filters. * Added `navigation-utils`. * Removed `SQUASH COMMITS` from the PR template (#287) Removed `SQUASH COMMITS` from the PR template * TagInfo now fires 'submitSearch' instead of using navigation (#285) * Remove render_template for feedback email (#293) * Remove render_template for feedback email * Fix html markup * Added auto-select resource after searching (#292) * Truncate the column type (#297) * Truncate the column type * Update truncation method * Cleanup logic * Improve table & columns description formatting (#98) (#298) * Add support for React-Markdown to editable text fields * Add support for windows via cross-env * Update EditableText component (#299) * Fix some styling issues with react-markdown * Update EditableText to use React Refs instead of ref callbacks * Add configs for table and column description max lengths * Change 'json' to 'data' field for Python Requests (#303) * Switch usage of 'json' to 'data' in metadata APIs * Use 'raw_request=True' for Envoy client post/put APIs * Update README.md (#302) * Link deeper to doc content (#304) Summary of Changes Will scroll past GitHub repo folders (specially more handy on small screens like phones/tablets) Like https://github.com/lyft/amundsendatabuilder/pull/147 * Fixed linebreaks with Markdown descriptions (#305) * Amundsen Notifications Without Preferences (#273) * Initial start to notifications API (#215) * initial start to notifications API * fixing some styling * fixed lint errors * update types * added tests * linter, moved notification types * addressed comments regarding imports/enum naming * fixed alphabetical order * Notifs post email functionality (#222) * initial start to notifications API * fixing some styling * fixed lint errors * update types * added tests * linter, moved notification types * added template support * made changes to reflect private changes * added helper function * fixed lint issue * addressed comments, added some type checking and cleaned up comments * testing removing test * fixed linter * fixed lint * fixed linting issues * skip type checking * fixed lint * fixed typing on get request args * removed typing for get request to fix lint issues * fixed linter again * re added test * raise exception inside of getmailclient * added exceptions * addressed comments * whitespace issue * removed calls to get_query_param * fixed syntax error * Send notification when adding/removing owner from table (#237) * basic e2e functionality for adding/removing * send_notification refactor * fix lint errors * blank line lint error * fixed syntax issue * arg typing * addressed comments, fixed code style * Prevent Self-Notifications (#243) * Prevent user from notifying themselves * removed exception * added owner check to send_notification * Fixed return for no recipients (#244) * fixed return for no recipients * fixed linter issue * Request notifications component (#238) * init of request form * basic request component * getting basic functionality in * clearing out css * removed z-index fixes and add constants * fixed string casting * added redux-saga calls * removed reset request notification * fixed tests * addressed comments, added basic test, added redux state management for opening/closing component * added tests, just need to add render test * cleaned up component tests: * addressed html/css comments * removed unecessary styling * removed collapsed class * cleaned up render method * fixed test * Open request component (#254) * added button to open up request component * removed tabledetail changes * className styling * fixed text-decoration * added tests, changed naming for OpenRequest * styling formatting * Add, Request, and Remove Email Copy (#257) * init for fixing email copy for request, add, and remove * removed print statement * fixed python unit test * fixed linter issues * addressed comments, fixed linter issues * added notification unit test * fixed test positional arg * fix test * Add notification action logging (#258) * init of adding action logging * changed location of action logging * fixed linter errors * fixed comment * addressed comments * remove request test call (#259) * hide request if description already exists (#269) * fixed open request button, request form styling (#267) * Added request dropdown component (#262) * init * made fixes * cleaned up code * fixed color issues * fixed import order * fixed styling, changed ducks/sagas * User dropdown (#263) * init * fixed sty;es * fixed test issue * fixed test * added tests, addressed comments * Request Metadata Component Tests (#270) * added tests + readonly field to stop errors * fixed tslint * addressed comments, added header tests * Request form navigation fix, dropdown fix (#272) * Request form navigation fix, dropdown fix * added test * added unique id to dropdown * Creates User Preferences page with no functionality (#266) * init * added event handlers * removed test file * added constants * addressed comments * fixed test, removed all links to page * updated test * fixed call to onclick * removed preferences page * Python cleanup + tests (#277) * Python cleanup + tests * More tests + revert some unecessary changes * Bring dropdown UI closer to design (#278) * Rename OpenRequestDescription for clarity + code cleanup + test additions (#279) * Notifications ducks cleanup + tests (#280) * Notifications ducks cleanup + tests * Fix issues * Fix template for edge case of empty form (#281) * Temporary debugging code, will revert * Temporary debugging code, will revert * Implement notification form confirmation (#289) * Preserve compatibility in base_mail_client (#290) * Notifications Configs + Doc (#291) * Add notification config * Code cleanup * More cleanup + add a test * Add some doc for how to enable features * Add config utils test + fix type error * Relative URLs to child configuration docs (#294) * Relative URLs to child configuration docs Relative URLs to docs in the same folder should do. They work for any branch, local copies of the docs - and should work better if we ever (or whenever :-) we get to having e.g a Sphinx generated site. * Update application_config.md Relative doc link * Update flask_config.md Relative doc link * Update flask_config.md Relative doc link * Remove temporary debugging code * Improve behavior of notification sending for owner editing (#296) * Initial Implementation: Notification only on success * Cleanup + tests: Notification only on success * Cleanup: Remove test code to trigger failure * Cleanup: Lint fix * Workaround for not notifying teams or alumni * Cleanup: Remove import mistake * Utilize NotificationType enums instead of hardcoded string * Remove use of render_template * More minor cleanups * Address some feedback * Cleanup * More cleanup * Notifications Improvements (#301) * Initial start to notifications API (#215) * initial start to notifications API * fixing some styling * fixed lint errors * update types * added tests * linter, moved notification types * addressed comments regarding imports/enum naming * fixed alphabetical order * Notifs post email functionality (#222) * initial start to notifications API * fixing some styling * fixed lint errors * update types * added tests * linter, moved notification types * added template support * made changes to reflect private changes * added helper function * fixed lint issue * addressed comments, added some type checking and cleaned up comments * testing removing test * fixed linter * fixed lint * fixed linting issues * skip type checking * fixed lint * fixed typing on get request args * removed typing for get request to fix lint issues * fixed linter again * re added test * raise exception inside of getmailclient * added exceptions * addressed comments * whitespace issue * removed calls to get_query_param * fixed syntax error * Send notification when adding/removing owner from table (#237) * basic e2e functionality for adding/removing * send_notification refactor * fix lint errors * blank line lint error * fixed syntax issue * arg typing * addressed comments, fixed code style * Prevent Self-Notifications (#243) * Prevent user from notifying themselves * removed exception * added owner check to send_notification * Fixed return for no recipients (#244) * fixed return for no recipients * fixed linter issue * Request notifications component (#238) * init of request form * basic request component * getting basic functionality in * clearing out css * removed z-index fixes and add constants * fixed string casting * added redux-saga calls * removed reset request notification * fixed tests * addressed comments, added basic test, added redux state management for opening/closing component * added tests, just need to add render test * cleaned up component tests: * addressed html/css comments * removed unecessary styling * removed collapsed class * cleaned up render method * fixed test * Open request component (#254) * added button to open up request component * removed tabledetail changes * className styling * fixed text-decoration * added tests, changed naming for OpenRequest * styling formatting * Add, Request, and Remove Email Copy (#257) * init for fixing email copy for request, add, and remove * removed print statement * fixed python unit test * fixed linter issues * addressed comments, fixed linter issues * added notification unit test * fixed test positional arg * fix test * Add notification action logging (#258) * init of adding action logging * changed location of action logging * fixed linter errors * fixed comment * addressed comments * remove request test call (#259) * hide request if description already exists (#269) * fixed open request button, request form styling (#267) * Added request dropdown component (#262) * init * made fixes * cleaned up code * fixed color issues * fixed import order * fixed styling, changed ducks/sagas * User dropdown (#263) * init * fixed sty;es * fixed test issue * fixed test * added tests, addressed comments * Request Metadata Component Tests (#270) * added tests + readonly field to stop errors * fixed tslint * addressed comments, added header tests * Request form navigation fix, dropdown fix (#272) * Request form navigation fix, dropdown fix * added test * added unique id to dropdown * Creates User Preferences page with no functionality (#266) * init * added event handlers * removed test file * added constants * addressed comments * fixed test, removed all links to page * updated test * fixed call to onclick * removed preferences page * Python cleanup + tests (#277) * Python cleanup + tests * More tests + revert some unecessary changes * Bring dropdown UI closer to design (#278) * Rename OpenRequestDescription for clarity + code cleanup + test additions (#279) * Notifications ducks cleanup + tests (#280) * Notifications ducks cleanup + tests * Fix issues * Fix template for edge case of empty form (#281) * Temporary debugging code, will revert * Temporary debugging code, will revert * Implement notification form confirmation (#289) * Preserve compatibility in base_mail_client (#290) * Notifications Configs + Doc (#291) * Add notification config * Code cleanup * More cleanup + add a test * Add some doc for how to enable features * Add config utils test + fix type error * Relative URLs to child configuration docs (#294) * Relative URLs to child configuration docs Relative URLs to docs in the same folder should do. They work for any branch, local copies of the docs - and should work better if we ever (or whenever :-) we get to having e.g a Sphinx generated site. * Update application_config.md Relative doc link * Update flask_config.md Relative doc link * Update flask_config.md Relative doc link * Remove temporary debugging code * Improve behavior of notification sending for owner editing (#296) * Initial Implementation: Notification only on success * Cleanup + tests: Notification only on success * Cleanup: Remove test code to trigger failure * Cleanup: Lint fix * Workaround for not notifying teams or alumni * Cleanup: Remove import mistake * Utilize NotificationType enums instead of hardcoded string * Remove use of render_template * More minor cleanups * Address some feedback * Cleanup * More cleanup * Updates for RequestMetadataForm * Switch to generating a for url + comment required for request column descriptions * Update some tests + comment out ones that need update before merge * Update some tests + comment out ones that need update before merge * Code cleanup * Update and rename notification_utils python tests * Modify resource_url check + add docstrings for python tests * Component cleanup * Cleanup component tests * Fix some typos * optimize docker (#300) * Update developer_guide.md (#310) Fix a 404 * Custom routes + Further notification cleanup (#309) * Further notification cleanup * Catch any errors getting the user for metrics + add doc for INIT_CUSTOM_ROUTES * Revert change to _build_metrics * Fix some merge conflicts * Fix some merge conflicts * Add source for notification email links (#312) * Add source for notification email links * Update TableDetail logic * Fix FlashMessage styles * Update config-types.ts (#314) * Convert usages of `white` to `$white` * - ResourceSelector now uses `setResource` action instead of onChange prop - Added/fixed test cases for ResourceSelector/SearchPage - Deleted unused code in SearchPage * Added additional test cases for SearchBar * Modified list-group shoadows * Added a test case for ResourceSelector --- amundsen_application/static/css/_avatars.scss | 2 +- .../static/css/_buttons-default.scss | 10 +- amundsen_application/static/css/_colors.scss | 264 ++++++++++++++++++ .../static/css/_dropdowns.scss | 4 +- amundsen_application/static/css/_icons.scss | 33 ++- amundsen_application/static/css/_inputs.scss | 27 ++ amundsen_application/static/css/_labels.scss | 21 ++ .../static/css/_list-group.scss | 10 +- .../static/css/_pagination.scss | 6 +- .../static/css/_popovers.scss | 21 +- .../static/css/_typography-default.scss | 16 +- .../static/css/_variables-default.scss | 104 ++++--- amundsen_application/static/css/styles.scss | 12 +- .../static/images/icons/Help-Circle.svg | 1 + .../static/images/icons/logo-bigquery.svg | 42 +++ .../static/images/icons/logo-hive.svg | 51 ++++ .../static/images/icons/logo-postgres.svg | 22 ++ .../static/images/icons/logo-redshift.svg | 1 + .../components/AnnouncementPage/styles.scss | 2 +- .../static/js/components/Feedback/index.tsx | 68 +++-- .../static/js/components/Feedback/styles.scss | 74 ++--- .../components/Feedback/tests/index.spec.tsx | 45 +-- .../static/js/components/Footer/styles.scss | 8 +- .../static/js/components/HomePage/index.tsx | 4 +- .../components/HomePage/tests/index.spec.tsx | 6 +- .../static/js/components/NavBar/index.tsx | 30 +- .../static/js/components/NavBar/styles.scss | 124 +++++--- .../js/components/NavBar/tests/index.spec.tsx | 54 +++- .../SearchPage/ResourceSelector/index.tsx | 102 +++++++ .../ResourceSelector/tests/index.spec.tsx | 152 ++++++++++ .../SearchPage/SearchBar/styles.scss | 54 ---- .../SearchPage/SearchFilter/index.tsx | 168 +++++++++++ .../SearchPage/SearchFilter/styles.scss | 5 + .../SearchFilter/tests/index.spec.tsx | 154 ++++++++++ .../SearchPage/SearchPanel/index.tsx | 21 ++ .../SearchPage/SearchPanel/styles.scss | 25 ++ .../SearchPanel/tests/index.spec.tsx | 41 +++ .../js/components/SearchPage/constants.ts | 9 +- .../static/js/components/SearchPage/index.tsx | 70 ++--- .../js/components/SearchPage/styles.scss | 28 +- .../SearchPage/tests/index.spec.tsx | 113 +++----- .../TableDetail/DataPreviewButton/styles.scss | 4 +- .../DetailList/DetailListItem/styles.scss | 14 +- .../TableDetail/OwnerEditor/styles.scss | 6 +- .../RequestMetadataForm/styles.scss | 4 +- .../js/components/Tags/TagInfo/styles.scss | 10 +- .../js/components/Tags/TagInput/styles.scss | 8 +- .../common/Bookmark/BookmarkIcon/styles.scss | 4 +- .../common/EditableText/styles.scss | 4 +- .../EntityCard/EntityCardSection/styles.scss | 4 +- .../js/components/common/Flag/styles.scss | 9 +- .../common/FlashMessage/styles.scss | 4 +- .../components/common/InfoButton/styles.scss | 2 +- .../common/Inputs/CheckBoxItem/index.tsx | 32 +++ .../common/Inputs/CheckBoxItem/styles.scss | 13 + .../Inputs/CheckBoxItem/tests/index.spec.tsx | 66 +++++ .../ResourceListItem/TableListItem/index.tsx | 26 +- .../TableListItem/tests/index.spec.tsx | 153 +++++++--- .../ResourceListItem/UserListItem/index.tsx | 58 ++-- .../UserListItem/tests/index.spec.tsx | 162 ++++++++--- .../common/ResourceListItem/styles.scss | 74 +++-- .../SearchBar/constants.ts | 4 + .../SearchBar/index.tsx | 30 +- .../components/common/SearchBar/styles.scss | 76 +++++ .../SearchBar/tests/index.spec.tsx | 33 ++- .../js/components/common/Tabs/styles.scss | 4 +- .../static/js/config/config-default.ts | 26 +- .../static/js/config/config-types.ts | 34 +++ .../static/js/config/config-utils.ts | 37 +++ .../static/js/config/tests/index.spec.ts | 27 +- .../static/js/ducks/search/sagas.ts | 1 - .../static/js/ducks/search/utils.ts | 1 - amundsen_application/static/js/index.tsx | 7 +- docs/application_config.md | 16 +- 74 files changed, 2335 insertions(+), 622 deletions(-) create mode 100644 amundsen_application/static/css/_colors.scss create mode 100644 amundsen_application/static/css/_inputs.scss create mode 100644 amundsen_application/static/css/_labels.scss create mode 100644 amundsen_application/static/images/icons/Help-Circle.svg create mode 100644 amundsen_application/static/images/icons/logo-bigquery.svg create mode 100644 amundsen_application/static/images/icons/logo-hive.svg create mode 100644 amundsen_application/static/images/icons/logo-postgres.svg create mode 100644 amundsen_application/static/images/icons/logo-redshift.svg create mode 100644 amundsen_application/static/js/components/SearchPage/ResourceSelector/index.tsx create mode 100644 amundsen_application/static/js/components/SearchPage/ResourceSelector/tests/index.spec.tsx delete mode 100644 amundsen_application/static/js/components/SearchPage/SearchBar/styles.scss create mode 100644 amundsen_application/static/js/components/SearchPage/SearchFilter/index.tsx create mode 100644 amundsen_application/static/js/components/SearchPage/SearchFilter/styles.scss create mode 100644 amundsen_application/static/js/components/SearchPage/SearchFilter/tests/index.spec.tsx create mode 100644 amundsen_application/static/js/components/SearchPage/SearchPanel/index.tsx create mode 100644 amundsen_application/static/js/components/SearchPage/SearchPanel/styles.scss create mode 100644 amundsen_application/static/js/components/SearchPage/SearchPanel/tests/index.spec.tsx create mode 100644 amundsen_application/static/js/components/common/Inputs/CheckBoxItem/index.tsx create mode 100644 amundsen_application/static/js/components/common/Inputs/CheckBoxItem/styles.scss create mode 100644 amundsen_application/static/js/components/common/Inputs/CheckBoxItem/tests/index.spec.tsx rename amundsen_application/static/js/components/{SearchPage => common}/SearchBar/constants.ts (89%) rename amundsen_application/static/js/components/{SearchPage => common}/SearchBar/index.tsx (79%) create mode 100644 amundsen_application/static/js/components/common/SearchBar/styles.scss rename amundsen_application/static/js/components/{SearchPage => common}/SearchBar/tests/index.spec.tsx (86%) diff --git a/amundsen_application/static/css/_avatars.scss b/amundsen_application/static/css/_avatars.scss index 062702a913..40457f55ff 100644 --- a/amundsen_application/static/css/_avatars.scss +++ b/amundsen_application/static/css/_avatars.scss @@ -1,5 +1,5 @@ .sb-avatar > div { - border: 1px solid white; + border: 1px solid $white; } .sb-avatar > img { diff --git a/amundsen_application/static/css/_buttons-default.scss b/amundsen_application/static/css/_buttons-default.scss index bfd30be8db..db026fe9fb 100644 --- a/amundsen_application/static/css/_buttons-default.scss +++ b/amundsen_application/static/css/_buttons-default.scss @@ -73,7 +73,7 @@ &.btn-flat-icon { border: none; background-color: transparent; - color: $text-medium; + color: $text-secondary; box-shadow: none !important; padding: 0px; text-align: left; @@ -96,7 +96,7 @@ margin: 4px 0 0 0; padding: 0; - background-color: $gray-light; + background-color: $icon-bg; border: none; mask-image: url('/static/images/icons/Close.svg'); -webkit-mask-image: url('/static/images/icons/Close.svg'); @@ -110,7 +110,7 @@ &:focus, &:not(.disabled):hover, &:not([disabled]):hover { - background-color: $gray-dark; + background-color: $icon-bg-dark; } } @@ -119,11 +119,11 @@ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; - color: $text-medium; + color: $text-secondary; pointer-events: none; &:hover { - color: $text-medium; + color: $text-secondary; } } } diff --git a/amundsen_application/static/css/_colors.scss b/amundsen_application/static/css/_colors.scss new file mode 100644 index 0000000000..d470a0de36 --- /dev/null +++ b/amundsen_application/static/css/_colors.scss @@ -0,0 +1,264 @@ +/** + +Avoid using these color definitions directly. +Define semantic variables that reference this color palette instead. +The color palette can be swapped out or modified without +revisiting each individual color usage. + +--------------- +Do this: + $text-primary: $gray100; + + body { + color: $text-primary; + } + +---------------- +Don't do this: + body { + color: $gray100; + } + +*/ + +$white: #FFFFFF; +$black: #000000; + +/* Red */ +$red0: #FFFAFB; +$red5: #FFE5E9; +$red10: #FFCFD5; +$red20: #FFA0AC; +$red30: #FF7689; +$red40: #FF516B; +$red50: #FF3354; +$red60: #E6193F; +$red70: #B8072C; +$red80: #8C0020; +$red90: #670019; +$red100: #560015; + +/* Sunset */ +$sunset0: #FFFBFA; +$sunset5: #FFE4DD; +$sunset10: #FFCCBF; +$sunset20: #FF9E87; +$sunset30: #FF7B5C; +$sunset40: #FF623E; +$sunset50: #FF4E28; +$sunset60: #DB3615; +$sunset70: #AF230A; +$sunset80: #841604; +$sunset90: #5F0E01; +$sunset100: #4E0B00; + +/* Orange */ +$orange0: #FFF6F2; +$orange5: #FFE8DD; +$orange10: #FFD9C7; +$orange20: #FFB38F; +$orange30: #FF915D; +$orange40: #FF7232; +$orange50: #F9560E; +$orange60: #D03D00; +$orange70: #A82E00; +$orange80: #832300; +$orange90: #651A00; +$orange100: #581600; + +/* Amber */ +$amber0: #FFFDFA; +$amber5: #FFF6E7; +$amber10: #FFF0D4; +$amber20: #FFE0A9; +$amber30: #FFD082; +$amber40: #FFC161; +$amber50: #FFB146; +$amber60: #FFA030; +$amber70: #FF8D1F; +$amber80: #FE7E13; +$amber90: #E66909; +$amber100: #CB5803; + +/* Yellow */ +$yellow0: #FFFEFA; +$yellow5: #FFF8D9; +$yellow10: #FFF3B8; +$yellow20: #FFE77B; +$yellow30: #FFDD4C; +$yellow40: #FFD32A; +$yellow50: #FFCA13; +$yellow60: #FFC002; +$yellow70: #EFAC00; +$yellow80: #DC9900; +$yellow90: #C78700; +$yellow100: #B07600; + +/* Citron */ +$citron0: #FFFFF2; +$citron5: #FFFFD2; +$citron10: #FEFFB2; +$citron20: #FBFF6F; +$citron30: #F1FB3B; +$citron40: #E2F316; +$citron50: #CCE700; +$citron60: #B5D900; +$citron70: #9AC800; +$citron80: #82B400; +$citron90: #6C9C00; +$citron100: #578000; + +/* Lime */ +$lime0: #FDFFFA; +$lime5: #EDFED0; +$lime10: #D6F3A0; +$lime20: #A4DC48; +$lime30: #75C404; +$lime40: #5EAB00; +$lime50: #499300; +$lime60: #347D00; +$lime70: #216800; +$lime80: #155600; +$lime90: #0E4400; +$lime100: #0A3600; + +/* Green */ +$green0: #FAFFFC; +$green5: #D1FFE2; +$green10: #A8FFC4; +$green20: #4BE77A; +$green30: #04CD3D; +$green40: #00B32E; +$green50: #009B22; +$green60: #008316; +$green70: #006E0B; +$green80: #005A05; +$green90: #004802; +$green100: #003901; + +/* Mint */ +$mint0: #FAFFFD; +$mint5: #D1FFEE; +$mint10: #A6FBDE; +$mint20: #4AE3AE; +$mint30: #04CA83; +$mint40: #00B16F; +$mint50: #00985D; +$mint60: #00824C; +$mint70: #006C3C; +$mint80: #00592F; +$mint90: #004724; +$mint100: #00381C; + +/* Teal */ +$teal0: #FAFFFE; +$teal5: #D1FFF7; +$teal10: #A8FFF4; +$teal20: #4CEAE4; +$teal30: #04CED2; +$teal40: #00B0B9; +$teal50: #00949F; +$teal60: #007B85; +$teal70: #00626B; +$teal80: #004C53; +$teal90: #003B40; +$teal100: #003338; + +/* Cyan */ +$cyan0: #FAFDFF; +$cyan5: #E7F6FF; +$cyan10: #D4F0FF; +$cyan20: #A9E1FF; +$cyan30: #82D2FF; +$cyan40: #5DBCF4; +$cyan50: #3A97D3; +$cyan60: #2277B3; +$cyan70: #135B96; +$cyan80: #09457B; +$cyan90: #043563; +$cyan100: #01284E; + +/* Blue */ +$blue0: #FAFBFF; +$blue5: #E8ECFF; +$blue10: #D5DCFF; +$blue20: #ACBBFF; +$blue30: #869DFF; +$blue40: #6686FF; +$blue50: #4B73FF; +$blue60: #3668FF; +$blue70: #2156DB; +$blue80: #1242AF; +$blue90: #093186; +$blue100: #042260; + +/* Indigo */ +$indigo0: #FAFAFF; +$indigo5: #EBEBFF; +$indigo10: #DCDCFF; +$indigo20: #BABAFF; +$indigo30: #9C9BFF; +$indigo40: #8481FF; +$indigo50: #726BFF; +$indigo60: #665AFF; +$indigo70: #604CFF; +$indigo80: #523BE4; +$indigo90: #3E29B1; +$indigo100: #2B1B81; + +/* Purple */ +$purple0: #FDFAFF; +$purple5: #F6EBFF; +$purple10: #ECDCFF; +$purple20: #D7B8FF; +$purple30: #C294FF; +$purple40: #AD71FF; +$purple50: #9B52FF; +$purple60: #8B37FF; +$purple70: #7B20F9; +$purple80: #590DC4; +$purple90: #420499; +$purple100: #390188; + +/* Pink */ +$pink0: #FFFAFD; +$pink5: #FFE1F2; +$pink10: #FFC7E4; +$pink20: #FF8FCC; +$pink30: #FF5DBB; +$pink40: #FF32B1; +$pink50: #FF0EB0; +$pink60: #DE00A7; +$pink70: #BD00A0; +$pink80: #A00093; +$pink90: #860081; +$pink100: #71006F; + +/* Rose */ +$rose0: #FFF2F5; +$rose5: #FFE1E9; +$rose10: #FFCFDC; +$rose20: #FFA0BA; +$rose30: #FF769E; +$rose40: #FF5187; +$rose50: #FF3378; +$rose60: #E51966; +$rose70: #B70752; +$rose80: #8B0040; +$rose90: #660031; +$rose100: #55002A; + +/* Gray */ +$gray0: #FCFCFF; +$gray5: #F4F4FA; +$gray10: #E7E7EF; +$gray15: #D8D8E4; +$gray20: #CACAD9; +$gray30: #ACACC0; +$gray40: #9191A8; +$gray50: #787891; +$gray60: #63637B; +$gray70: #515167; +$gray80: #414155; +$gray90: #333344; +$gray100: #292936; diff --git a/amundsen_application/static/css/_dropdowns.scss b/amundsen_application/static/css/_dropdowns.scss index f56fccf490..d40b2e2cbf 100644 --- a/amundsen_application/static/css/_dropdowns.scss +++ b/amundsen_application/static/css/_dropdowns.scss @@ -1,3 +1,5 @@ +@import 'variables'; + .dropdown-menu { box-shadow: 0 0 24px -2px rgba(0, 0, 0, .2); border-radius: 5px; @@ -7,7 +9,7 @@ li { &:hover { - background-color: $gray-lightest; + background-color: $body-bg-secondary; } a { padding: 8px; diff --git a/amundsen_application/static/css/_icons.scss b/amundsen_application/static/css/_icons.scss index 0ed3059f1f..abacbf3e78 100644 --- a/amundsen_application/static/css/_icons.scss +++ b/amundsen_application/static/css/_icons.scss @@ -1,7 +1,7 @@ @import 'variables'; img.icon { - background-color: $gray-light; + background-color: $icon-bg; border: none; height: 24px; margin: -3px 4px -3px 0px; @@ -11,11 +11,11 @@ img.icon { width: 24px; &.icon-color { - background-color: $brand-color-3; + background-color: $icon-bg-brand; } &.icon-dark { - background-color: $text-medium; + background-color: $icon-bg-dark; } // TODO - Add other icons here @@ -26,6 +26,11 @@ img.icon { mask-image: url('/static/images/icons/Alert-Triangle.svg'); } + &.icon-bigquery { + content: url('/static/images/icons/logo-bigquery.svg'); + background-color: transparent; + } + &.icon-bookmark { -webkit-mask-image: url('/static/images/icons/Favorite.svg'); mask-image: url('/static/images/icons/Favorite.svg'); @@ -51,6 +56,16 @@ img.icon { mask-image: url('/static/images/icons/Down.svg'); } + &.icon-help { + -webkit-mask-image: url('/static/images/icons/Help-Circle.svg'); + mask-image: url('/static/images/icons/Help-Circle.svg'); + } + + &.icon-hive { + content: url('/static/images/icons/logo-hive.svg'); + background-color: transparent; + } + &.icon-github { -webkit-mask-image: url('/static/images/icons/github.svg'); mask-image: url('/static/images/icons/github.svg'); @@ -76,11 +91,21 @@ img.icon { mask-image: url('/static/images/icons/Plus-Circle.svg'); } + &.icon-postgres { + content: url('/static/images/icons/logo-postgres.svg'); + background-color: transparent; + } + &.icon-preview { -webkit-mask-image: url('/static/images/icons/Preview.svg'); mask-image: url('/static/images/icons/Preview.svg'); } + &.icon-redshift { + content: url('/static/images/icons/logo-redshift.svg'); + background-color: transparent; + } + &.icon-refresh { -webkit-mask-image: url('/static/images/icons/Refresh-cw.svg'); mask-image: url('/static/images/icons/Refresh-cw.svg'); @@ -121,6 +146,6 @@ img.icon { :disabled { > img.icon, > img.icon.icon-color { - background-color: $gray-light; + background-color: $icon-bg-disabled; } } diff --git a/amundsen_application/static/css/_inputs.scss b/amundsen_application/static/css/_inputs.scss new file mode 100644 index 0000000000..a4bdefa020 --- /dev/null +++ b/amundsen_application/static/css/_inputs.scss @@ -0,0 +1,27 @@ +@import 'variables'; + +input { + &::-webkit-input-placeholder, + &::-moz-placeholder, + &:-ms-input-placeholder, + &:-moz-placeholder, + &::placeholder { + color: $text-placeholder !important; + } + + &[type="radio"] { + margin: 5px; + } + + &[type="text"] { + color: $text-secondary !important; + } +} + +textarea { + width: 100%; + color: $text-secondary !important; + border: 1px solid $stroke; + border-radius: 5px; + padding: 10px; +} diff --git a/amundsen_application/static/css/_labels.scss b/amundsen_application/static/css/_labels.scss new file mode 100644 index 0000000000..a68de7bc5a --- /dev/null +++ b/amundsen_application/static/css/_labels.scss @@ -0,0 +1,21 @@ +@import 'variables'; + +.label-danger { + color: $badge-text-color; + background-color: $badge-danger-color; +} + +.label-primary { + color: $badge-text-color; + background-color: $badge-primary-color; +} + +.label-success { + color: $badge-text-color; + background-color: $badge-success-color; +} + +.label-warning { + color: $badge-text-color; + background-color: $badge-warning-color; +} diff --git a/amundsen_application/static/css/_list-group.scss b/amundsen_application/static/css/_list-group.scss index c7ef8f1c88..35d7231eee 100644 --- a/amundsen_application/static/css/_list-group.scss +++ b/amundsen_application/static/css/_list-group.scss @@ -1,4 +1,3 @@ -// TODO - Try to implement this with bootstrap variables @import 'variables'; .list-group { margin: 24px 0; @@ -6,16 +5,15 @@ .list-group-item { border-left: none; border-right: none; - cursor: pointer; padding: 0; &:hover { - border-color: $gray; - background-color: $gray-lightest; + box-shadow: -2px 2px 4px 1px rgba(0, 0, 0, 0.16); + cursor: pointer; } - &:hover + li { - border-top-color: $gray; + &:hover + .list-group-item { + box-shadow: inset 0px 8px 6px -6px rgba(0, 0, 0, 0.16) } } } diff --git a/amundsen_application/static/css/_pagination.scss b/amundsen_application/static/css/_pagination.scss index e2ddd3d18b..6bfad80cd9 100644 --- a/amundsen_application/static/css/_pagination.scss +++ b/amundsen_application/static/css/_pagination.scss @@ -7,12 +7,12 @@ li { > a, > span { - border: 1px solid $gray-lighter; + border: 1px solid $stroke; color: $brand-color-4; &:focus, &:hover { - background-color: $gray-lighter; + background-color: $body-bg-secondary; color: $link-hover-color; z-index: 0; } @@ -27,7 +27,7 @@ &:focus { background-color: $brand-color-4; border-color: $brand-color-4; - color: white; + color: $white; z-index: 0; } } diff --git a/amundsen_application/static/css/_popovers.scss b/amundsen_application/static/css/_popovers.scss index 356beb627d..b290acb270 100644 --- a/amundsen_application/static/css/_popovers.scss +++ b/amundsen_application/static/css/_popovers.scss @@ -2,15 +2,14 @@ @import 'variables'; .popover { - background-color: $gray-base; - border: 1px solid $gray-base; + background-color: $body-bg-dark; + border: 1px solid $body-bg-dark; color: $text-light; font-size: 12px; padding: 5px; } .popover-title { - background-color: $gray-darker; - border-bottom: 1px solid $gray-light; + border-bottom: 1px solid $stroke; color: $text-light; font-size: 14px; padding: 5px; @@ -19,22 +18,22 @@ padding: 2px 5px; } .popover.right .arrow:after { - border-right-color: $gray-base; + border-right-color: $body-bg-dark; } .popover.bottom .arrow:after { - border-bottom-color: $gray-base; + border-bottom-color: $body-bg-dark; } .popover.top .arrow:after { - border-top-color: $gray-base; + border-top-color: $body-bg-dark; } .popover.left .arrow:after { - border-left-color: $gray-base; + border-left-color: $body-bg-dark; } .tooltip-inner { padding: 0; border-radius: 3px; - background-color: $gray-base; + background-color: $body-bg-dark; } .tooltip-inner button { @@ -43,13 +42,13 @@ font-size: 14px; border-radius: 3px; border: none; - background-color: $gray-base; + background-color: $body-bg-dark; color: $body-bg; font-weight: $font-weight-body-bold; outline: none; } .tooltip-inner button:hover { - color: $text-medium; + color: $text-secondary; } .error-tooltip { diff --git a/amundsen_application/static/css/_typography-default.scss b/amundsen_application/static/css/_typography-default.scss index 8a59687586..a00f7c61d7 100644 --- a/amundsen_application/static/css/_typography-default.scss +++ b/amundsen_application/static/css/_typography-default.scss @@ -6,7 +6,7 @@ h1, h2, h3, .h1, .h2, .h3 { - color: $text-dark; + color: $text-primary; font-family: $font-family-header; margin: 0; } @@ -33,7 +33,7 @@ h3, } body { - color: $text-dark; + color: $text-primary; font-size: 14px; font-family: $font-family-body; font-weight: $font-weight-body-regular; @@ -58,7 +58,7 @@ body { } .title-3 { - color: $text-medium; + color: $text-secondary; font-size: 14px; font-weight: $font-weight-body-bold; } @@ -97,13 +97,13 @@ body { } .body-secondary-3 { - color: $text-medium; + color: $text-secondary; font-size: 14px; font-weight: $font-weight-body-regular; } .body-placeholder { - color: $text-medium; + color: $text-placeholder; font-size: 14px; font-weight: $font-weight-body-regular; } @@ -114,7 +114,7 @@ body { } .caption { - color: $text-medium; + color: $text-secondary; font-size: 13px; font-weight: $font-weight-body-bold; } @@ -126,13 +126,13 @@ body { } .resource-type { - color: $gray; + color: $text-placeholder; font-size: 13px; font-family: $font-family-monospace; } .helper-text { - color: $text-medium; + color: $text-secondary; font-size: 12px; font-family: $font-family-body; } diff --git a/amundsen_application/static/css/_variables-default.scss b/amundsen_application/static/css/_variables-default.scss index c0694ba195..98315b12a5 100644 --- a/amundsen_application/static/css/_variables-default.scss +++ b/amundsen_application/static/css/_variables-default.scss @@ -1,48 +1,35 @@ -/** - The following are used in Amundsen but are not part of Bootstrap. - These must be defined here: - - $brand-color-1, $brand-color-2, $brand-color-3, $brand-color-4, $brand-color-5 - - $font-family-header, $font-weight-header-regular, $font-weight-header-bold - $font-family-body, $font-weight-body-regular, $font-weight-body-semi-bold, $font-weight-body-bold - - $text-dark, $text-medium, $text-light - - $btn-primary-bg-hover, $btn-default-border-hover, - $btn-primary-border-hover, $btn-default-bg-hover, - - */ - +@import 'colors'; +// TODO - consider using more descriptive names, or replacing with more specific variables. // Colors -$brand-color-1: #A9E1FF !default; -$brand-color-2: #82D2FF !default; -$brand-color-3: #3A97D3 !default; -$brand-color-4: #2277B3 !default; -$brand-color-5: #09457B !default; +$brand-color-1: $indigo10 !default; +$brand-color-2: $indigo20 !default; +$brand-color-3: $indigo40 !default; +$brand-color-4: $indigo60 !default; +$brand-color-5: $indigo80 !default; $brand-primary: $brand-color-4 !default; -$gray-base: #292936 !default; -$gray-darker: #63637B !default; -$gray-dark: #9191A8 !default; -$gray: #ACACC0 !default; -$gray-light: #CACAD9 !default; -$gray-lighter: #E7E7EF !default; -$gray-lightest: #F4F4FA !default; -// Scaffolding -$body-bg: #fff !default; -// TODO - consider replacing $text-dark with $text-color -$text-dark: $gray-base !default; -$text-color: $gray-base !default; -$text-medium: $gray-darker !default; -$text-light: $gray-light !default; +/* Scaffolding */ +$body-bg: $white !default; +$body-bg-secondary: $gray5 !default; +$body-bg-dark: $gray100 !default; +$divider: $gray15 !default; +$stroke: $gray20 !default; +$stroke-focus: $gray60 !default; // Typography +$text-primary: $gray100 !default; +$text-secondary: $gray60 !default; +$text-light: $white !default; +$text-placeholder: $gray40; + +$link-color: $brand-color-4; +$link-hover-color: $brand-color-5; + $font-family-body: "Open Sans", sans-serif !default; $font-weight-body-regular: 400 !default; $font-weight-body-semi-bold: 600 !default; @@ -62,6 +49,14 @@ $line-height-small: 1.5 !default; $line-height-large: 1.5 !default; +// Badges +$badge-text-color: $text-primary; +$badge-danger-color: $sunset10; +$badge-primary-color: $cyan10; +$badge-success-color: $mint10; +$badge-warning-color: $yellow10; + + // Buttons $btn-border-radius-base: 4px; @@ -69,24 +64,47 @@ $btn-primary-bg: $brand-color-4 !default; $btn-primary-bg-hover: $brand-color-5 !default; $btn-primary-border: transparent !default; $btn-primary-border-hover: transparent !default; -$btn-primary-color: white !default; -$btn-primary-color-hover: white !default; +$btn-primary-color: $white !default; +$btn-primary-color-hover: $white !default; + +$btn-default-bg: $white !default; +$btn-default-bg-hover: $gray5 !default; +$btn-default-border: $gray20 !default; +$btn-default-border-hover: $gray30 !default; +$btn-default-color: $gray100 !default; +$btn-default-color-hover: $gray90 !default; + + +// Icons +$icon-bg: $gray20 !default; +$icon-bg-brand: $brand-color-3 !default; +$icon-bg-dark: $gray60 !default; +$icon-bg-disabled: $gray20 !default; + -$btn-default-bg: white !default; -$btn-default-bg-hover: $gray-lightest; -$btn-default-border: $gray-light !default; -$btn-default-border-hover: $gray !default; -$btn-default-color: $gray-base !default; +// Header & Footer +$nav-bar-color: $indigo100; +$nav-bar-height: 60px; +$footer-height: 60px; // List Group -$list-group-border: $gray-light !default; +$list-group-border: $stroke !default; $list-group-border-radius: 0 !default; // Labels $label-primary-bg: $brand-color-3 !default; + +// Tags +$tag-bg: $gray5; +$tag-bg-hover: $gray10; + + +// TODO Temp Colors +$resource-title-color: $indigo60; + // Spacing $spacer-size: 8px; $spacer-1: $spacer-size; diff --git a/amundsen_application/static/css/styles.scss b/amundsen_application/static/css/styles.scss index 832991284a..62e1da5306 100644 --- a/amundsen_application/static/css/styles.scss +++ b/amundsen_application/static/css/styles.scss @@ -5,6 +5,8 @@ @import 'dropdowns'; @import 'fonts'; @import 'icons'; +@import 'inputs'; +@import 'labels'; @import 'list-group'; @import 'pagination'; @import 'popovers'; @@ -39,16 +41,6 @@ form { margin-bottom: 0; } -input { - &::-webkit-input-placeholder, - &::-moz-placeholder, - &:-ms-input-placeholder, - &:-moz-placeholder, - &::placeholder { - color: $gray-dark !important; - } -} - .truncated { white-space: nowrap; overflow: hidden; diff --git a/amundsen_application/static/images/icons/Help-Circle.svg b/amundsen_application/static/images/icons/Help-Circle.svg new file mode 100644 index 0000000000..6c210ad162 --- /dev/null +++ b/amundsen_application/static/images/icons/Help-Circle.svg @@ -0,0 +1 @@ + diff --git a/amundsen_application/static/images/icons/logo-bigquery.svg b/amundsen_application/static/images/icons/logo-bigquery.svg new file mode 100644 index 0000000000..064581a0ff --- /dev/null +++ b/amundsen_application/static/images/icons/logo-bigquery.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/amundsen_application/static/images/icons/logo-hive.svg b/amundsen_application/static/images/icons/logo-hive.svg new file mode 100644 index 0000000000..031ad38977 --- /dev/null +++ b/amundsen_application/static/images/icons/logo-hive.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/amundsen_application/static/images/icons/logo-postgres.svg b/amundsen_application/static/images/icons/logo-postgres.svg new file mode 100644 index 0000000000..251aa652d5 --- /dev/null +++ b/amundsen_application/static/images/icons/logo-postgres.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/amundsen_application/static/images/icons/logo-redshift.svg b/amundsen_application/static/images/icons/logo-redshift.svg new file mode 100644 index 0000000000..a4eaa60d33 --- /dev/null +++ b/amundsen_application/static/images/icons/logo-redshift.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/amundsen_application/static/js/components/AnnouncementPage/styles.scss b/amundsen_application/static/js/components/AnnouncementPage/styles.scss index 8f570fcc05..3f52f24c0f 100644 --- a/amundsen_application/static/js/components/AnnouncementPage/styles.scss +++ b/amundsen_application/static/js/components/AnnouncementPage/styles.scss @@ -11,7 +11,7 @@ .post-header { padding-right: 16px; - border-right: 1px solid $gray-lighter; + border-right: 1px solid $stroke; .post-title { width: 150px; diff --git a/amundsen_application/static/js/components/Feedback/index.tsx b/amundsen_application/static/js/components/Feedback/index.tsx index 5907e71f5a..79bc225108 100644 --- a/amundsen_application/static/js/components/Feedback/index.tsx +++ b/amundsen_application/static/js/components/Feedback/index.tsx @@ -71,45 +71,43 @@ export default class Feedback extends React.Component - { - this.state.isOpen && -
-
-
- {this.props.title.toUpperCase()} + <> + + { + this.state.isOpen && +
+
+
+ {this.props.title.toUpperCase()} +
+
-
-
-
- - - +
+
+ + + +
+ {this.state.content}
- {this.state.content} -
- } - { - !(this.state.isOpen) && - - } -
+ } + ); } } diff --git a/amundsen_application/static/js/components/Feedback/styles.scss b/amundsen_application/static/js/components/Feedback/styles.scss index c818588ab8..cefb733ee1 100644 --- a/amundsen_application/static/js/components/Feedback/styles.scss +++ b/amundsen_application/static/js/components/Feedback/styles.scss @@ -1,41 +1,47 @@ @import 'variables'; +.feedback-icon { + height: 32px; + width: 32px; + outline: 0 !important; + + img { + margin: 4px; + background-color: $white; + } + + &:hover, + &:focus, + &.is-open { + border-radius: 50%; + border: 6px solid $white; + + img { + margin: -2px 0 0 -2px; + &.icon.icon-help { + background-color: white !important; + } + } + } +} .feedback-component { box-shadow: 0 0 24px -2px rgba(0, 0, 0, .2); - bottom: 75px; + top: $nav-bar-height + 4px; position: fixed; - right: 25px; + right: 76px; z-index: 2; - &.expanded { - background-color: white; - border-radius: 0 0 6px 6px; - border-top: 4px solid $brand-primary; - height: auto; - min-height: 450px; - padding: 32px; - width: 400px; - } - - &.collapsed { - align-items: center; - background-color: $brand-primary; - border: 2px solid white; - border-radius: 50%; /* makes it a circle */ - cursor: pointer; - display: flex; - height: 48px; - justify-content: center; - margin: 0; - width: 48px; + background-color: $white; + border-radius: 6px; + height: auto; + min-height: 450px; + padding: 32px; + width: 400px; - &:hover { - opacity: 0.5; - } - } + color: $text-primary; .title { - color: $text-medium; + color: $text-secondary; flex-grow: 1; font-size: 12px; font-family: $font-family-header; @@ -44,12 +50,6 @@ line-height: 32px; } - img.icon-speech { - background-color: $brand-primary; - height: 36px; - width: 24px; - } - .feedback-header { display: flex; margin-bottom: 8px; @@ -99,7 +99,7 @@ text-align: center; position: absolute; font-size: 20px; - color: $text-medium; + color: $text-secondary; /* for centering when parent has automatic height */ top: 50%; left: 50%; @@ -112,12 +112,12 @@ } input[type="text"] { - color: $text-medium !important; + color: $text-secondary !important; } textarea { width: 100%; - color: $text-medium !important; + color: $text-secondary !important; border: 1px solid $gray-lighter; border-radius: 5px; padding: 10px; diff --git a/amundsen_application/static/js/components/Feedback/tests/index.spec.tsx b/amundsen_application/static/js/components/Feedback/tests/index.spec.tsx index 394dddd1bc..1af8e77d35 100644 --- a/amundsen_application/static/js/components/Feedback/tests/index.spec.tsx +++ b/amundsen_application/static/js/components/Feedback/tests/index.spec.tsx @@ -83,7 +83,8 @@ describe('Feedback', () => { describe('render', () => { describe('if state.isOpen', () => { - let element; + let feedbackIcon; + let feedbackComponent; let props; let wrapper; @@ -98,17 +99,23 @@ describe('Feedback', () => { changeTypeMockResult = jest.fn(() => {}); changeTypeSpy = jest.spyOn(wrapper.instance(), 'changeType').mockImplementation(() => changeTypeMockResult); wrapper.update(); - element = wrapper.children().at(0); + feedbackIcon = wrapper.children().at(0); + feedbackComponent = wrapper.children().at(1); }); + it('renders help button with correct props', () => { + expect(feedbackIcon.exists()).toBe(true); + expect(feedbackIcon.props().className).toEqual('btn btn-flat-icon feedback-icon is-open'); + }); + it('renders wrapper with correct className', () => { - expect(wrapper.props().className).toEqual('feedback-component expanded'); + expect(feedbackComponent.props().className).toEqual('feedback-component'); }); describe('correct feedback-header', () => { let button; let title; beforeAll(() => { - const header = element.children().at(0); + const header = feedbackComponent.children().at(0); title = header.children().at(0); button = header.children().at(1); }); @@ -130,7 +137,7 @@ describe('Feedback', () => { let buttonGroupParent; let buttonGroup; beforeAll(() => { - buttonGroupParent = element.children().at(1); + buttonGroupParent = feedbackComponent.children().at(1); buttonGroup = buttonGroupParent.children().at(0); }); it('renders button group parent with correct className', () => { @@ -149,7 +156,7 @@ describe('Feedback', () => { let button; beforeAll(() => { wrapper.setState({ feedbackType: FeedbackType.Rating }); - button = wrapper.children().at(0).children().at(1).children().at(0).find('button').at(0); + button = wrapper.children().at(1).children().at(1).children().at(0).find('button').at(0); }); it('has correct props if active', () => { expect(button.props()).toMatchObject({ @@ -165,7 +172,7 @@ describe('Feedback', () => { it('has correct props if not active', () => { wrapper.setState({ feedbackType: FeedbackType.Bug }); - button = wrapper.children().at(0).children().at(1).children().at(0).find('button').at(0); + button = wrapper.children().at(1).children().at(1).children().at(0).find('button').at(0); expect(button.props()).toMatchObject({ type: 'button', className: 'btn btn-default', @@ -178,7 +185,7 @@ describe('Feedback', () => { let button; beforeAll(() => { wrapper.setState({ feedbackType: FeedbackType.Bug }); - button = wrapper.children().at(0).children().at(1).children().at(0).find('button').at(1); + button = wrapper.children().at(1).children().at(1).children().at(0).find('button').at(1); }); it('has correct props if active', () => { expect(button.props()).toMatchObject({ @@ -194,7 +201,7 @@ describe('Feedback', () => { it('has correct props if not active', () => { wrapper.setState({ feedbackType: FeedbackType.Request }); - button = wrapper.children().at(0).children().at(1).children().at(0).find('button').at(1); + button = wrapper.children().at(1).children().at(1).children().at(0).find('button').at(1); expect(button.props()).toMatchObject({ type: 'button', className: 'btn btn-default', @@ -207,7 +214,7 @@ describe('Feedback', () => { let button; beforeAll(() => { wrapper.setState({ feedbackType: FeedbackType.Request }); - button = wrapper.children().at(0).children().at(1).children().at(0).find('button').at(2); + button = wrapper.children().at(1).children().at(1).children().at(0).find('button').at(2); }); it('has correct props if active', () => { expect(button.props()).toMatchObject({ @@ -223,7 +230,7 @@ describe('Feedback', () => { it('has correct props if not active', () => { wrapper.setState({ feedbackType: FeedbackType.Rating }); - button = wrapper.children().at(0).children().at(1).children().at(0).find('button').at(2); + button = wrapper.children().at(1).children().at(1).children().at(0).find('button').at(2); expect(button.props()).toMatchObject({ type: 'button', className: 'btn btn-default', @@ -240,7 +247,7 @@ describe('Feedback', () => { of its child form and refreshing it. */ it('renders state.content', () => { - expect(wrapper.children().at(0).children().at(2).debug()).toEqual(''); + expect(wrapper.children().at(1).children().at(2).debug()).toEqual(''); }); afterAll(() => { @@ -256,16 +263,14 @@ describe('Feedback', () => { props = setupResult.props; wrapper = setupResult.wrapper; }); - it('renders wrapper with correct className', () => { - expect(wrapper.props().className).toEqual('feedback-component collapsed'); + it('renders help button with correct props', () => { + const feedbackIcon = wrapper.children().at(0); + expect(feedbackIcon.exists()).toBe(true); + expect(feedbackIcon.props().className).toEqual('btn btn-flat-icon feedback-icon'); }); - it('renders img correct props', () => { - expect(wrapper.find('img').props()).toMatchObject({ - className: 'icon-speech', - src: '/static/images/icons/Speech.svg', - onClick: wrapper.instance().toggle, - }); + it('does not render expanded form', () => { + expect(wrapper.children().at(1).exists()).toBe(false); }); }); }); diff --git a/amundsen_application/static/js/components/Footer/styles.scss b/amundsen_application/static/js/components/Footer/styles.scss index 85d2e0b201..0fc1f22a0e 100644 --- a/amundsen_application/static/js/components/Footer/styles.scss +++ b/amundsen_application/static/js/components/Footer/styles.scss @@ -2,16 +2,16 @@ /* TODO: Not the greatest sticky footer implementation */ .footer { - border-top: 1px solid $gray-lighter; - background-color: white; - color: $text-medium; + border-top: 1px solid $stroke; + background-color: $white; + color: $text-secondary; font-size: 14px; text-align: center; padding: 20px; position: fixed; left: 0; bottom: 0; - height: 60px; + height: $footer-height; width: 100%; } diff --git a/amundsen_application/static/js/components/HomePage/index.tsx b/amundsen_application/static/js/components/HomePage/index.tsx index 1b07fd9d1c..84413d7410 100644 --- a/amundsen_application/static/js/components/HomePage/index.tsx +++ b/amundsen_application/static/js/components/HomePage/index.tsx @@ -10,7 +10,7 @@ import MyBookmarks from 'components/common/Bookmark/MyBookmarks'; import PopularTables from 'components/common/PopularTables'; import { SearchAllReset } from 'ducks/search/types'; import { searchReset } from 'ducks/search/reducer'; -import SearchBar from 'components/SearchPage/SearchBar'; +import SearchBar from 'components/common/SearchBar'; import TagsList from 'components/common/TagsList'; @@ -24,7 +24,7 @@ export class HomePage extends React.Component { constructor(props) { super(props); } - + componentDidMount() { this.props.searchReset(); } diff --git a/amundsen_application/static/js/components/HomePage/tests/index.spec.tsx b/amundsen_application/static/js/components/HomePage/tests/index.spec.tsx index b782c2e527..0c147cd795 100644 --- a/amundsen_application/static/js/components/HomePage/tests/index.spec.tsx +++ b/amundsen_application/static/js/components/HomePage/tests/index.spec.tsx @@ -6,7 +6,7 @@ import { mapDispatchToProps, HomePage, HomePageProps } from '../'; import MyBookmarks from 'components/common/Bookmark/MyBookmarks'; import PopularTables from 'components/common/PopularTables'; -import SearchBar from 'components/SearchPage/SearchBar'; +import SearchBar from 'components/common/SearchBar'; import TagsList from 'components/common/TagsList'; import { getMockRouterProps } from 'fixtures/mockRouter'; @@ -39,14 +39,14 @@ describe('HomePage', () => { }); it('contains TagsList', () => { - expect(wrapper.find('#browse-tags-header').text()).toEqual('Browse Tags'); + expect(wrapper.find('#browse-tags-header').text()).toEqual('Browse Tags'); expect(wrapper.contains()); }); it('contains MyBookmarks', () => { expect(wrapper.contains()); }); - + it('contains PopularTables', () => { expect(wrapper.contains()); }); diff --git a/amundsen_application/static/js/components/NavBar/index.tsx b/amundsen_application/static/js/components/NavBar/index.tsx index 7b3d842244..417f03fffd 100644 --- a/amundsen_application/static/js/components/NavBar/index.tsx +++ b/amundsen_application/static/js/components/NavBar/index.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import * as Avatar from 'react-avatar'; +import { RouteComponentProps } from 'react-router'; import { Link, NavLink, withRouter } from 'react-router-dom'; import { connect } from 'react-redux'; @@ -11,6 +12,11 @@ import { Dropdown } from 'react-bootstrap'; import { LoggedInUser } from 'interfaces'; +import { feedbackEnabled } from 'config/config-utils'; + +import Feedback from 'components/Feedback'; +import SearchBar from 'components/common/SearchBar'; + import './styles.scss'; // Props @@ -18,7 +24,7 @@ interface StateFromProps { loggedInUser: LoggedInUser; } -export type NavBarProps = StateFromProps; +export type NavBarProps = StateFromProps & RouteComponentProps<{}>; export class NavBar extends React.Component { constructor(props) { @@ -36,6 +42,17 @@ export class NavBar extends React.Component { }); } + renderSearchBar = () => { + if (this.props.location.pathname !== "/") { + return ( +
+ +
+ ) + } + return null; + }; + render() { return (
@@ -50,8 +67,13 @@ export class NavBar extends React.Component { AMUNDSEN
-