Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Moved Feedback tool to NavBar #256

Merged
merged 6 commits into from
Aug 13, 2019
Merged

Moved Feedback tool to NavBar #256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
17c36f7
Update Feedback Component
ttannis Aug 12, 2019
4314948
Merge branch 'feature/search_v2' of github.com:lyft/amundsenfrontendl…
ttannis Aug 12, 2019
df8dcbe
Update tests
ttannis Aug 12, 2019
3c9bfc1
Clean up some styles
ttannis Aug 13, 2019
38b1e67
reposition form
ttannis Aug 13, 2019
42a192a
Tweak feedback style
ttannis Aug 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions amundsen_application/static/css/_icons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,11 @@ 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');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as I can tell, this is the latest version.
feedback

The Amundsen Component Library on Master was updated 18 days ago and has the help-circle. The version on Component Finalization was updated 12 days ago with the chat bubble. You may want to reach out to design about this.

I'm looking at a file called Amundsen-Master.sketch in the Master branch which was updated on Friday. This seems to be the latest and greatest.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The component library was also updated on Friday. I'll ask for clarification.

}

&.icon-hive {
content: url('/static/images/icons/logo-hive.svg');
background-color: transparent;
Expand Down
2 changes: 1 addition & 1 deletion amundsen_application/static/css/_list-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
}

&:hover + .list-group-item {
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.16);
}
}
}
1 change: 1 addition & 0 deletions amundsen_application/static/images/icons/Help-Circle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 33 additions & 35 deletions amundsen_application/static/js/components/Feedback/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,45 +71,43 @@ export default class Feedback extends React.Component<FeedbackProps, FeedbackSta
};

render() {
const expandedClass = this.state.isOpen ? 'expanded' : 'collapsed';
return (
<div className={`feedback-component ${expandedClass}`}>
{
this.state.isOpen &&
<div>
<div className="feedback-header">
<div className="title">
{this.props.title.toUpperCase()}
<>
<button className={`btn btn-flat-icon feedback-icon${this.state.isOpen ? ' is-open' : ''}`} onClick={this.toggle}>
<img className='icon icon-help'/>
</button>
{
this.state.isOpen &&
<div className="feedback-component">
<div className="feedback-header">
<div className="title">
{this.props.title.toUpperCase()}
</div>
<button type="button" className="btn btn-close" aria-label={BUTTON_CLOSE_TEXT} onClick={this.toggle} />
</div>
<button type="button" className="btn btn-close" aria-label={BUTTON_CLOSE_TEXT} onClick={this.toggle} />
</div>
<div className="text-center">
<div className="btn-group" role="group" aria-label={FEEDBACK_TYPE_TEXT}>
<button type="button"
className={"btn btn-default" + (this.state.feedbackType === FeedbackType.Rating? " active": "")}
onClick={this.changeType(FeedbackType.Rating)}>
{RATING_TEXT}
</button>
<button type="button"
className={"btn btn-default" + (this.state.feedbackType === FeedbackType.Bug? " active": "")}
onClick={this.changeType(FeedbackType.Bug)}>
{BUG_REPORT_TEXT}
</button>
<button type="button"
className={"btn btn-default" + (this.state.feedbackType === FeedbackType.Request? " active": "")}
onClick={this.changeType(FeedbackType.Request)}>
{REQUEST_TEXT}
</button>
<div className="text-center">
<div className="btn-group" role="group" aria-label={FEEDBACK_TYPE_TEXT}>
<button type="button"
className={"btn btn-default" + (this.state.feedbackType === FeedbackType.Rating? " active": "")}
onClick={this.changeType(FeedbackType.Rating)}>
{RATING_TEXT}
</button>
<button type="button"
className={"btn btn-default" + (this.state.feedbackType === FeedbackType.Bug? " active": "")}
onClick={this.changeType(FeedbackType.Bug)}>
{BUG_REPORT_TEXT}
</button>
<button type="button"
className={"btn btn-default" + (this.state.feedbackType === FeedbackType.Request? " active": "")}
onClick={this.changeType(FeedbackType.Request)}>
{REQUEST_TEXT}
</button>
</div>
</div>
{this.state.content}
</div>
{this.state.content}
</div>
}
{
!(this.state.isOpen) &&
<img className='icon-speech' src='/static/images/icons/Speech.svg' onClick={this.toggle}/>
}
</div>
}
</>
);
}
}
66 changes: 33 additions & 33 deletions amundsen_application/static/js/components/Feedback/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,44 @@
@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;
}
background-color: white;
border-radius: 6px;
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;

&:hover {
opacity: 0.5;
}
}
color: $text-dark;

.title {
color: $text-medium;
Expand All @@ -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;
Expand Down
45 changes: 25 additions & 20 deletions amundsen_application/static/js/components/Feedback/tests/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,8 @@ describe('Feedback', () => {

describe('render', () => {
describe('if state.isOpen', () => {
let element;
let feedbackIcon;
let feedbackComponent;
let props;
let wrapper;

Expand All @@ -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);
});
Expand All @@ -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', () => {
Expand All @@ -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({
Expand All @@ -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',
Expand All @@ -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({
Expand All @@ -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',
Expand All @@ -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({
Expand All @@ -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',
Expand All @@ -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('<Connect(RatingFeedbackForm) />');
expect(wrapper.children().at(1).children().at(2).debug()).toEqual('<Connect(RatingFeedbackForm) />');
});

afterAll(() => {
Expand All @@ -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);
});
});
});
Expand Down
8 changes: 5 additions & 3 deletions amundsen_application/static/js/components/NavBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { logClick } from 'ducks/utilMethods';

import { LoggedInUser } from 'interfaces';

import Feedback from 'components/Feedback';
import SearchBar from 'components/common/SearchBar';

import './styles.scss';
Expand Down Expand Up @@ -66,17 +67,18 @@ export class NavBar extends React.Component<NavBarProps> {
{ this.renderSearchBar() }
<div id="nav-bar-right" className="ml-auto nav-bar-right">
{this.generateNavLinks(AppConfig.navLinks)}
<Feedback />
{
this.props.loggedInUser && AppConfig.indexUsers.enabled &&
<Link id="nav-bar-avatar-link" to={`/user/${this.props.loggedInUser.user_id}?source=navbar`}>
<div id="nav-bar-avatar">
<Link id="nav-bar-avatar-link" className="nav-bar-avatar-link" to={`/user/${this.props.loggedInUser.user_id}?source=navbar`}>
<div id="nav-bar-avatar" className="nav-bar-avatar">
<Avatar name={this.props.loggedInUser.display_name} size={32} round={true} />
</div>
</Link>
}
{
this.props.loggedInUser && !AppConfig.indexUsers.enabled &&
<div id="nav-bar-avatar">
<div id="nav-bar-avatar" className="nav-bar-avatar">
<Avatar name={this.props.loggedInUser.display_name} size={32} round={true} />
</div>
}
Expand Down
Loading