Skip to content

A
amundsen_dev
Unverified Commit 82c36cb6 authored by Daniel's avatar Daniel Committed by GitHub
Browse files
Options

Update profile page design (#365) 

* Modify profile page to new design
* Added breadcrumb back to profile and table pages
* Modified behavior/style of breadcrumb
* Fix styles on the nav-bar dropdown
parent d020ba22
Show whitespace changes
Inline Side-by-side
Showing with 168 additions and 245 deletions
amundsen_application/static/css/_layouts.scss
View file @ 82c36cb6
@import 'variables'; @import 'variables';
$header-height: 84px; $resource-header-height: 84px;
.resource-detail-layout { .resource-detail-layout {
min-width: 1048px;
.resource-header { .resource-header {
display: flex; display: flex;
height: $header-height; height: $resource-header-height;
border-bottom: 2px solid $divider; border-bottom: 2px solid $divider;
padding: 16px 24px 0; padding: 16px 24px 0;
...@@ -27,11 +25,33 @@ $header-height: 84px; ...@@ -27,11 +25,33 @@ $header-height: 84px;
max-width: calc(100% - 100px); max-width: calc(100% - 100px);
} }
} }
.header-bullets {
display: inline;
margin: 0;
padding: 0;
li {
display: inline;
&:after { content: "\00A0\2022\00A0"; }
&:last-child:after { content: ""; }
}
}
&.header-links { &.header-links {
flex-shrink: 0; flex-shrink: 0;
> * { > * {
margin-right: 16px; margin-right: 16px;
}
.header-link {
display: inline-block;
margin: 13px 16px 0 0;
.avatar-label {
font-weight: $font-weight-body-bold;
}
} }
} }
&.header-buttons { &.header-buttons {
...@@ -51,7 +71,7 @@ $header-height: 84px; ...@@ -51,7 +71,7 @@ $header-height: 84px;
// 630 | 414+ Flexible layout // 630 | 414+ Flexible layout
.column-layout-1 { .column-layout-1 {
display: flex; display: flex;
height: calc(100% - #{$header-height}); height: calc(100% - #{$resource-header-height});
> .left-panel { > .left-panel {
> .banner { > .banner {
......
amundsen_application/static/css/_variables-default.scss
View file @ 82c36cb6
...@@ -85,9 +85,10 @@ $icon-bg-dark: $gray60 !default; ...@@ -85,9 +85,10 @@ $icon-bg-dark: $gray60 !default;
$icon-bg-disabled: $gray20 !default; $icon-bg-disabled: $gray20 !default;
// Header & Footer // Header, Body, & Footer
$nav-bar-color: $indigo100; $nav-bar-color: $indigo100;
$nav-bar-height: 60px; $nav-bar-height: 60px;
$body-min-width: 1048px;
$footer-height: 60px; $footer-height: 60px;
......
amundsen_application/static/css/styles.scss
View file @ 82c36cb6
...@@ -15,6 +15,10 @@ ...@@ -15,6 +15,10 @@
// TODO - Move to separate files // TODO - Move to separate files
// Layout // Layout
#main {
min-width: $body-min-width;
}
#main > .container { #main > .container {
margin: 96px auto 48px; margin: 96px auto 48px;
} }
......
amundsen_application/static/js/components/NavBar/index.tsx
View file @ 82c36cb6
...@@ -8,7 +8,7 @@ import AppConfig from 'config/config'; ...@@ -8,7 +8,7 @@ import AppConfig from 'config/config';
import { LinkConfig } from 'config/config-types'; import { LinkConfig } from 'config/config-types';
import { GlobalState } from 'ducks/rootReducer'; import { GlobalState } from 'ducks/rootReducer';
import { logClick } from 'ducks/utilMethods'; import { logClick } from 'ducks/utilMethods';
import { Dropdown } from 'react-bootstrap'; import { Dropdown, MenuItem } from 'react-bootstrap';
import { LoggedInUser } from 'interfaces'; import { LoggedInUser } from 'interfaces';
...@@ -85,11 +85,13 @@ export class NavBar extends React.Component<NavBarProps> { ...@@ -85,11 +85,13 @@ export class NavBar extends React.Component<NavBarProps> {
<div className='title-2'>{this.props.loggedInUser.display_name}</div> <div className='title-2'>{this.props.loggedInUser.display_name}</div>
<div>{this.props.loggedInUser.email}</div> <div>{this.props.loggedInUser.email}</div>
</div> </div>
<li> <MenuItem
<Link id="nav-bar-avatar-link" to={`/user/${this.props.loggedInUser.user_id}?source=navbar`}> componentClass={Link}
id="nav-bar-avatar-link"
to={`/user/${this.props.loggedInUser.user_id}?source=navbar`}
href={`/user/${this.props.loggedInUser.user_id}?source=navbar`}>
My Profile My Profile
</Link> </MenuItem>
</li>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
} }
......
amundsen_application/static/js/components/NavBar/styles.scss
View file @ 82c36cb6
...@@ -84,35 +84,11 @@ ...@@ -84,35 +84,11 @@
} }
li { li {
padding: 16px;
a { a {
color: $text-primary; color: $text-primary;
padding: 0; padding: 16px;
width: 100%; width: 100%;
} }
} }
} }
} }
.avatar-dropdown {
border-style: none;
padding: 0 !important;
border-radius: 50%;
}
.profile-menu {
$profile-menu-width: 200px;
width: $profile-menu-width;
.profile-menu-header {
padding: 16px 16px 0 16px;
}
li {
padding: 16px;
a {
padding: 0;
}
}
}
amundsen_application/static/js/components/NavBar/tests/index.spec.tsx
View file @ 82c36cb6
...@@ -3,7 +3,7 @@ import * as Avatar from 'react-avatar'; ...@@ -3,7 +3,7 @@ import * as Avatar from 'react-avatar';
import * as History from 'history'; import * as History from 'history';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import { Dropdown } from 'react-bootstrap'; import { Dropdown, MenuItem } from 'react-bootstrap';
import { Link, NavLink } from 'react-router-dom'; import { Link, NavLink } from 'react-router-dom';
import { NavBar, NavBarProps, mapStateToProps } from '../'; import { NavBar, NavBarProps, mapStateToProps } from '../';
...@@ -166,7 +166,7 @@ describe('NavBar', () => { ...@@ -166,7 +166,7 @@ describe('NavBar', () => {
}); });
it('renders My Profile link correctly inside of user dropdown', () => { it('renders My Profile link correctly inside of user dropdown', () => {
element = wrapper.find(Dropdown).find(Dropdown.Menu).find(Link).at(0); element = wrapper.find(Dropdown).find(Dropdown.Menu).find(MenuItem).at(0);
expect(element.children().text()).toEqual('My Profile'); expect(element.children().text()).toEqual('My Profile');
expect(element.props().to).toEqual('/user/test0?source=navbar'); expect(element.props().to).toEqual('/user/test0?source=navbar');
}); });
......
amundsen_application/static/js/components/ProfilePage/constants.ts
View file @ 82c36cb6
export const AVATAR_SIZE = 40;
export const BOOKMARKED_LABEL = 'bookmarked'; export const BOOKMARKED_LABEL = 'bookmarked';
export const BOOKMARKED_SOURCE = 'profile_bookmark'; export const BOOKMARKED_SOURCE = 'profile_bookmark';
export const BOOKMARKED_TAB_KEY = 'bookmark_tab'; export const BOOKMARKED_TAB_KEY = 'bookmark_tab';
......
amundsen_application/static/js/components/ProfilePage/index.tsx
View file @ 82c36cb6
...@@ -21,6 +21,7 @@ import { GetBookmarksForUserRequest } from 'ducks/bookmark/types'; ...@@ -21,6 +21,7 @@ import { GetBookmarksForUserRequest } from 'ducks/bookmark/types';
import { getBookmarksForUser } from 'ducks/bookmark/reducer'; import { getBookmarksForUser } from 'ducks/bookmark/reducer';
import { import {
AVATAR_SIZE,
BOOKMARKED_LABEL, BOOKMARKED_LABEL,
BOOKMARKED_SOURCE, BOOKMARKED_SOURCE,
BOOKMARKED_TAB_KEY, BOOKMARKED_TAB_KEY,
...@@ -142,78 +143,80 @@ export class ProfilePage extends React.Component<ProfilePageProps, ProfilePageSt ...@@ -142,78 +143,80 @@ export class ProfilePage extends React.Component<ProfilePageProps, ProfilePageSt
const user = this.props.user; const user = this.props.user;
return ( return (
<DocumentTitle title={ `${user.display_name} - Amundsen Profile` }> <DocumentTitle title={ `${user.display_name} - Amundsen Profile` }>
<div className="container profile-page"> <div className="resource-detail-layout profile-page">
<div className="row"> <header className="resource-header">
<div className="col-xs-12 col-md-offset-1 col-md-10"> <div className="header-section">
<Breadcrumb /> <Breadcrumb />
{/* TODO - Consider making this part a separate component */}
<div className="profile-header">
<div id="profile-avatar" className="profile-avatar"> <div id="profile-avatar" className="profile-avatar">
{ {
// default Avatar looks a bit jarring -- intentionally not rendering if no display_name
user.display_name && user.display_name.length > 0 && user.display_name && user.display_name.length > 0 &&
<Avatar name={user.display_name} size={74} round={true} /> <Avatar name={user.display_name} size={AVATAR_SIZE} round={true} />
} }
</div> </div>
<div className="profile-details"> </div>
<div id="profile-title" className="profile-title">
<h1>{ user.display_name }</h1> <div className="header-section header-title">
<h3 className="header-title-text truncated">
{ user.display_name }
{ {
(!user.is_active) && (!user.is_active) &&
<Flag caseType="sentenceCase" labelStyle="danger" text="Alumni"/> <Flag caseType="sentenceCase" labelStyle="danger" text="Alumni"/>
} }
</div> </h3>
<div className="body-3">
<ul className="header-bullets">
{ {
user.role_name && user.team_name && user.role_name &&
<div id="user-role" className="body-2">{ `${user.role_name} on ${user.team_name}` }</div> <li id="user-role">{ user.role_name }</li>
} }
{/*TODO - delete when 'role_name'/'title' is added to user object in backend */}
{ {
!user.role_name && user.team_name && user.team_name &&
<div id="user-role" className="body-2">{ `Team: ${user.team_name}` }</div> <li id="team-name">{ user.team_name }</li>
} }
{ {
user.manager_fullname && user.manager_fullname &&
<div id="user-manager" className="body-2">{ `Manager: ${user.manager_fullname}` }</div> <li id="user-manager">{ `Manager: ${user.manager_fullname}` }</li>
} }
<div className="profile-icons"> </ul>
{/*TODO - Implement deep links to open Slack */} </div>
</div>
<div className="header-section header-links">
{/*{*/} {/*{*/}
{/*user.is_active && user.slack_id &&*/} {/* // TODO - Implement deep links to open Slack *!/*/}
{/*<a id="slack-link" href={user.slack_id} className='btn btn-flat-icon' target='_blank'>*/} {/* user.is_active && user.slack_id &&*/}
{/*<img className='icon icon-dark icon-slack'/>*/} {/* <a id="slack-link" href={user.slack_id} className='btn btn-flat-icon header-link' target='_blank'>*/}
{/*<span className="body-2">Slack</span>*/} {/* <img className='icon icon-dark icon-slack'/>*/}
{/*</a>*/} {/* <span className="body-2">Slack</span>*/}
{/* </a>*/}
{/*}*/} {/*}*/}
{ {
user.is_active && user.is_active &&
<a id="email-link" href={`mailto:${user.email}`} className='btn btn-flat-icon' target='_blank'> <a id="email-link" href={`mailto:${user.email}`} className='btn btn-flat-icon header-link' target='_blank'>
<img className='icon icon-dark icon-mail'/> <img className='icon icon-dark icon-mail'/>
<span className="body-2">{ user.email }</span> <span className="body-2">{ user.email }</span>
</a> </a>
} }
{ {
user.is_active && user.profile_url && user.is_active && user.profile_url &&
<a id="profile-link" href={user.profile_url} className='btn btn-flat-icon' target='_blank'> <a id="profile-link" href={user.profile_url} className='btn btn-flat-icon header-link' target='_blank'>
<img className='icon icon-dark icon-users'/> <img className='icon icon-dark icon-users'/>
<span className="body-2">Employee Profile</span> <span className="body-2">Employee Profile</span>
</a> </a>
} }
{ {
user.github_username && user.github_username &&
<a id="github-link" href={`https://github.com/${user.github_username}`} className='btn btn-flat-icon' target='_blank'> <a id="github-link" href={`https://github.com/${user.github_username}`} className='btn btn-flat-icon header-link' target='_blank'>
<img className='icon icon-dark icon-github'/> <img className='icon icon-dark icon-github'/>
<span className="body-2">Github</span> <span className="body-2">Github</span>
</a> </a>
} }
</div> </div>
</div> </header>
</div> <main>
<div id="profile-tabs" className="profile-tabs"> <div className="profile-tabs">
<Tabs tabs={ this.generateTabInfo() } defaultTab={ BOOKMARKED_TAB_KEY } /> <Tabs tabs={ this.generateTabInfo() } defaultTab={ BOOKMARKED_TAB_KEY } />
</div> </div>
</div> </main>
</div>
</div> </div>
</DocumentTitle> </DocumentTitle>
); );
......
amundsen_application/static/js/components/ProfilePage/styles.scss
View file @ 82c36cb6
@import 'variables'; @import 'variables';
.profile-page { .profile-page {
.profile-header {
display: flex;
.profile-avatar { .profile-avatar {
margin-left: 8px; display: inline-block;
margin-right: 30px; margin: 6px 16px 0 0;
} }
.profile-details { .header-title-text {
display: flex; .flag {
flex-direction: column;
h1 {
margin-bottom: 0;
margin-top: 0;
}
.profile-icons {
margin-top: 12px;
a {
margin-left: 8px; margin-left: 8px;
margin-right: 8px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
} }
} }
.profile-title { .profile-tabs {
display: flex; margin-top: 24px;
margin-bottom: 8px;
.flag { .nav-tabs {
height: min-content; // TODO: consider moving height into Flag component margin-left: 16px;
font-size: 16px;
margin: auto auto 4px 12px;
}
} }
} .list-group {
margin-top: 0;
} }
.profile-tabs {
margin-top: 64px;
// TODO: consider moving logic for empty content into Tab component // TODO: consider moving logic for empty content into Tab component
.empty-tab-message { .empty-tab-message {
......
amundsen_application/static/js/components/ProfilePage/tests/index.spec.tsx
View file @ 82c36cb6
...@@ -14,6 +14,7 @@ import { getMockRouterProps } from 'fixtures/mockRouter'; ...@@ -14,6 +14,7 @@ import { getMockRouterProps } from 'fixtures/mockRouter';
import { ResourceType } from 'interfaces/Resources'; import { ResourceType } from 'interfaces/Resources';
import { import {
AVATAR_SIZE,
BOOKMARKED_LABEL, BOOKMARKED_LABEL,
BOOKMARKED_SOURCE, BOOKMARKED_SOURCE,
BOOKMARKED_TAB_KEY, BOOKMARKED_TAB_KEY,
...@@ -235,7 +236,7 @@ describe('ProfilePage', () => { ...@@ -235,7 +236,7 @@ describe('ProfilePage', () => {
it('renders Avatar for user.display_name', () => { it('renders Avatar for user.display_name', () => {
expect(wrapper.find(Avatar).props()).toMatchObject({ expect(wrapper.find(Avatar).props()).toMatchObject({
name: props.user.display_name, name: props.user.display_name,
size: 74, size: AVATAR_SIZE,
round: true, round: true,
}); });
}); });
...@@ -253,7 +254,7 @@ describe('ProfilePage', () => { ...@@ -253,7 +254,7 @@ describe('ProfilePage', () => {
}); });
it('renders header with display_name', () => { it('renders header with display_name', () => {
expect(wrapper.find('#profile-title').find('h1').text()).toEqual(props.user.display_name); expect(wrapper.find('.header-title-text').text()).toContain(props.user.display_name);
}); });
it('renders Flag with correct props if user not active', () => { it('renders Flag with correct props if user not active', () => {
...@@ -264,7 +265,7 @@ describe('ProfilePage', () => { ...@@ -264,7 +265,7 @@ describe('ProfilePage', () => {
const wrapper = setup({ const wrapper = setup({
user: userCopy, user: userCopy,
}).wrapper; }).wrapper;
expect(wrapper.find('#profile-title').find(Flag).props()).toMatchObject({ expect(wrapper.find('.header-title-text').find(Flag).props()).toMatchObject({
caseType: 'sentenceCase', caseType: 'sentenceCase',
labelStyle: 'danger', labelStyle: 'danger',
text: 'Alumni', text: 'Alumni',
...@@ -272,11 +273,11 @@ describe('ProfilePage', () => { ...@@ -272,11 +273,11 @@ describe('ProfilePage', () => {
}); });
it('renders user role', () => { it('renders user role', () => {
expect(wrapper.find('#user-role').text()).toEqual('Tester on QA'); expect(wrapper.find('#user-role').text()).toEqual('Tester');
}); });
it('renders user manager', () => { it('renders user team name', () => {
expect(wrapper.find('#user-manager').text()).toEqual('Manager: Test Manager'); expect(wrapper.find('#team-name').text()).toEqual('QA');
}); });
it('renders user manager', () => { it('renders user manager', () => {
...@@ -292,14 +293,14 @@ describe('ProfilePage', () => { ...@@ -292,14 +293,14 @@ describe('ProfilePage', () => {
}); });
it('renders Tabs w/ correct props', () => { it('renders Tabs w/ correct props', () => {
expect(wrapper.find('#profile-tabs').find(Tabs).props()).toMatchObject({ expect(wrapper.find('.profile-tabs').find(Tabs).props()).toMatchObject({
tabs: wrapper.instance().generateTabInfo(), tabs: wrapper.instance().generateTabInfo(),
defaultTab: BOOKMARKED_TAB_KEY, defaultTab: BOOKMARKED_TAB_KEY,
}); });
}); });
describe('if user.is_active', () => { describe('if user.is_active', () => {
// TODO - Uncomment when slack integration is fixed // TODO - Uncomment when slack integration is built
// it('renders slack link with correct href', () => { // it('renders slack link with correct href', () => {
// expect(wrapper.find('#slack-link').props().href).toEqual('www.slack.com'); // expect(wrapper.find('#slack-link').props().href).toEqual('www.slack.com');
// }); // });
......
amundsen_application/static/js/components/TableDetail/index.tsx
View file @ 82c36cb6
...@@ -105,13 +105,13 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps ...@@ -105,13 +105,13 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
} else { } else {
const data = this.props.tableData; const data = this.props.tableData;
innerContent = ( innerContent = (
<div className="resource-detail-layout table-detail-2"> <div className="resource-detail-layout table-detail">
{ {
notificationsEnabled() && <RequestMetadataForm /> notificationsEnabled() && <RequestMetadataForm />
} }
<header className="resource-header"> <header className="resource-header">
<div className="header-section"> <div className="header-section">
{/* TODO - add Breadcrumb here */} <Breadcrumb />
<img className={"icon icon-header " + getDatabaseIconClass(data.database)} /> <img className={"icon icon-header " + getDatabaseIconClass(data.database)} />
</div> </div>
<div className="header-section header-title"> <div className="header-section header-title">
...@@ -120,11 +120,11 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps ...@@ -120,11 +120,11 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
</h3> </h3>
<BookmarkIcon bookmarkKey={ this.props.tableData.key }/> <BookmarkIcon bookmarkKey={ this.props.tableData.key }/>
<div className="body-2"> <div className="body-2">
Datasets &bull;&nbsp; <ul className="header-bullets">
{ getDatabaseDisplayName(data.database) } <li>Datasets</li>
&nbsp;&bull;&nbsp; <li>{ getDatabaseDisplayName(data.database) }</li>
{ data.cluster } <li>{ data.cluster }</li>
&nbsp; </ul>
{ {
data.badges.length > 0 && data.badges.length > 0 &&
<BadgeList badges={ data.badges } /> <BadgeList badges={ data.badges } />
......
amundsen_application/static/js/components/TableDetail/styles.scss
View file @ 82c36cb6
@import 'variables'; @import 'variables';
.table-detail-2 { .table-detail {
height: calc(100% - #{$nav-bar-height} - #{$footer-height}); height: calc(100% - #{$nav-bar-height} - #{$footer-height});
.header-link {
display: inline-block;
margin: 13px 0;
.avatar-label {
font-weight: $font-weight-body-bold;
}
}
.column-layout-1 .left-panel { .column-layout-1 .left-panel {
.section-title { .section-title {
color: $text-tertiary; color: $text-tertiary;
......
amundsen_application/static/js/components/common/Breadcrumb/index.tsx
View file @ 82c36cb6
...@@ -4,7 +4,6 @@ import { connect } from 'react-redux'; ...@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import './styles.scss'; import './styles.scss';
import { GlobalState } from 'ducks/rootReducer';
import { loadPreviousSearch } from 'ducks/search/reducer'; import { loadPreviousSearch } from 'ducks/search/reducer';
import { LoadPreviousSearchRequest } from 'ducks/search/types'; import { LoadPreviousSearchRequest } from 'ducks/search/types';
...@@ -13,51 +12,35 @@ export interface OwnProps { ...@@ -13,51 +12,35 @@ export interface OwnProps {
text?: string; text?: string;
} }
export interface StateFromProps {
searchTerm: string;
}
export interface MapDispatchToProps { export interface MapDispatchToProps {
loadPreviousSearch: () => LoadPreviousSearchRequest; loadPreviousSearch: () => LoadPreviousSearchRequest;
} }
export type BreadcrumbProps = OwnProps & StateFromProps & MapDispatchToProps; export type BreadcrumbProps = OwnProps & MapDispatchToProps;
export const Breadcrumb: React.SFC<BreadcrumbProps> = (props) => { export const Breadcrumb: React.SFC<BreadcrumbProps> = (props) => {
let path = props.path; const { path, text } = props;
let text = props.text; if (path !== undefined && text !== undefined) {
if (!path && !text) {
path = '/';
text = 'Home';
if (props.searchTerm) {
return ( return (
<div className="amundsen-breadcrumb"> <div className="amundsen-breadcrumb">
<a onClick={ props.loadPreviousSearch } className='btn btn-flat-icon title-3'> <Link to={path} className='btn btn-flat-icon title-3'>
<img className='icon icon-left'/> <img className='icon icon-left'/>
<span>Search Results</span> <span>{text}</span>
</a> </Link>
</div> </div>
); );
} }
}
return ( return (
<div className="amundsen-breadcrumb"> <div className="amundsen-breadcrumb">
<Link to={path} className='btn btn-flat-icon title-3'> <a onClick={ props.loadPreviousSearch } className='btn btn-flat-icon title-3'>
<img className='icon icon-left'/> <img className='icon icon-left'/>
<span>{text}</span> </a>
</Link>
</div> </div>
); );
}; };
export const mapStateToProps = (state: GlobalState) => {
return {
searchTerm: state.search.search_term,
};
};
export const mapDispatchToProps = (dispatch: any) => { export const mapDispatchToProps = (dispatch: any) => {
return bindActionCreators({ loadPreviousSearch }, dispatch); return bindActionCreators({ loadPreviousSearch }, dispatch);
}; };
export default connect<StateFromProps, MapDispatchToProps>(mapStateToProps, mapDispatchToProps)(Breadcrumb); export default connect<{}, MapDispatchToProps>(null, mapDispatchToProps)(Breadcrumb);
amundsen_application/static/js/components/common/Breadcrumb/styles.scss
View file @ 82c36cb6
@import 'variables'; @import 'variables';
// Margins values chosen for the breadcrumb to sort-of split the difference/center
// itself in our 96px/64px/32px top margins.
.amundsen-breadcrumb { .amundsen-breadcrumb {
height: 24px; height: 24px;
margin-top: -72px; display: inline-block;
margin-bottom: 48px;
img.icon-left { img.icon-left {
margin: -3px 0 -3px -8px; margin: -3px 0 -3px -8px;
...@@ -17,17 +14,3 @@ ...@@ -17,17 +14,3 @@
line-height: 24px; line-height: 24px;
} }
} }
@media (max-width: $screen-md-max) {
.amundsen-breadcrumb {
margin-top: -40px;
margin-bottom: 16px;
}
}
@media (max-width: $screen-sm-max) {
.amundsen-breadcrumb {
margin-top: -10px;
margin-bottom: 10px;
}
}
amundsen_application/static/js/components/common/Breadcrumb/tests/index.spec.tsx
View file @ 82c36cb6
...@@ -3,8 +3,7 @@ import * as React from 'react'; ...@@ -3,8 +3,7 @@ import * as React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Breadcrumb, BreadcrumbProps, mapStateToProps, mapDispatchToProps } from '../'; import { Breadcrumb, BreadcrumbProps, mapDispatchToProps } from '../';
import globalState from '../../../../fixtures/globalState';
describe('Breadcrumb', () => { describe('Breadcrumb', () => {
let props: BreadcrumbProps; let props: BreadcrumbProps;
...@@ -15,7 +14,6 @@ describe('Breadcrumb', () => { ...@@ -15,7 +14,6 @@ describe('Breadcrumb', () => {
props = { props = {
path: 'testPath', path: 'testPath',
text: 'testText', text: 'testText',
searchTerm: '',
loadPreviousSearch: jest.fn(), loadPreviousSearch: jest.fn(),
}; };
subject = shallow(<Breadcrumb {...props} />); subject = shallow(<Breadcrumb {...props} />);
...@@ -35,7 +33,6 @@ describe('Breadcrumb', () => { ...@@ -35,7 +33,6 @@ describe('Breadcrumb', () => {
describe('render with existing searchTerm', () => { describe('render with existing searchTerm', () => {
beforeEach(() => { beforeEach(() => {
props = { props = {
searchTerm: 'testTerm',
loadPreviousSearch: jest.fn(), loadPreviousSearch: jest.fn(),
}; };
subject = shallow(<Breadcrumb {...props} />); subject = shallow(<Breadcrumb {...props} />);
...@@ -46,10 +43,6 @@ describe('Breadcrumb', () => { ...@@ -46,10 +43,6 @@ describe('Breadcrumb', () => {
onClick: props.loadPreviousSearch, onClick: props.loadPreviousSearch,
}); });
}); });
it('renders Link with correct text', () => {
expect(subject.find('a').find('span').text()).toEqual('Search Results');
});
}); });
describe('render with existing searchTerm and prop overrides', () => { describe('render with existing searchTerm and prop overrides', () => {
...@@ -57,7 +50,6 @@ describe('Breadcrumb', () => { ...@@ -57,7 +50,6 @@ describe('Breadcrumb', () => {
props = { props = {
path: 'testPath', path: 'testPath',
text: 'testText', text: 'testText',
searchTerm: 'testTerm',
loadPreviousSearch: jest.fn(), loadPreviousSearch: jest.fn(),
}; };
subject = shallow(<Breadcrumb {...props} />); subject = shallow(<Breadcrumb {...props} />);
...@@ -74,17 +66,6 @@ describe('Breadcrumb', () => { ...@@ -74,17 +66,6 @@ describe('Breadcrumb', () => {
}); });
}); });
describe('mapStateToProps', () => {
let result;
beforeAll(() => {
result = mapStateToProps(globalState);
});
it('sets searchTerm on the props', () => {
expect(result.searchTerm).toEqual(globalState.search.search_term);
});
});
describe('mapDispatchToProps', () => { describe('mapDispatchToProps', () => {
let dispatch; let dispatch;
let result; let result;
......
amundsen_application/static/js/ducks/search/sagas.ts
View file @ 82c36cb6
...@@ -40,7 +40,7 @@ import { ...@@ -40,7 +40,7 @@ import {
setPageIndex, setResource, setPageIndex, setResource,
} from './reducer'; } from './reducer';
import { autoSelectResource, getPageIndex, getSearchState } from './utils'; import { autoSelectResource, getPageIndex, getSearchState } from './utils';
import { updateSearchUrl } from 'utils/navigation-utils'; import { BrowserHistory, updateSearchUrl } from 'utils/navigation-utils';
export function* inlineSearchWorker(action: InlineSearchRequest): SagaIterator { export function* inlineSearchWorker(action: InlineSearchRequest): SagaIterator {
const { term } = action.payload; const { term } = action.payload;
...@@ -204,6 +204,10 @@ export function* urlDidUpdateWatcher(): SagaIterator { ...@@ -204,6 +204,10 @@ export function* urlDidUpdateWatcher(): SagaIterator {
export function* loadPreviousSearchWorker(action: LoadPreviousSearchRequest): SagaIterator { export function* loadPreviousSearchWorker(action: LoadPreviousSearchRequest): SagaIterator {
const state = yield select(getSearchState); const state = yield select(getSearchState);
if (state.search_term === "") {
BrowserHistory.goBack();
return;
}
updateSearchUrl({ updateSearchUrl({
term: state.search_term, term: state.search_term,
resource: state.selectedTab, resource: state.selectedTab,
......
amundsen_application/static/js/ducks/search/tests/index.spec.ts
View file @ 82c36cb6
...@@ -589,6 +589,8 @@ describe('search ducks', () => { ...@@ -589,6 +589,8 @@ describe('search ducks', () => {
}); });
describe('loadPreviousSearchWorker', () => { describe('loadPreviousSearchWorker', () => {
// TODO - test 'BrowserHistory.goBack' case
it('applies the existing search state into the URL', () => { it('applies the existing search state into the URL', () => {
updateSearchUrlSpy.mockClear(); updateSearchUrlSpy.mockClear();
......
amundsen_application/static/js/index.tsx
View file @ 82c36cb6
...@@ -9,8 +9,6 @@ import { createStore, applyMiddleware } from 'redux'; ...@@ -9,8 +9,6 @@ import { createStore, applyMiddleware } from 'redux';
import { Router, Route, Switch } from 'react-router-dom'; import { Router, Route, Switch } from 'react-router-dom';
import DocumentTitle from 'react-document-title'; import DocumentTitle from 'react-document-title';
import { feedbackEnabled } from 'config/config-utils';
import AnnouncementPage from './components/AnnouncementPage'; import AnnouncementPage from './components/AnnouncementPage';
import BrowsePage from './components/BrowsePage'; import BrowsePage from './components/BrowsePage';
import Footer from './components/Footer'; import Footer from './components/Footer';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment