Skip to content
This repository was archived by the owner on Mar 6, 2025. It is now read-only.

Commit e146c7d

Browse files
ImreBognarUltimakerImreBognarUltimaker
authored
Merge pull request #126 from Ultimaker/STAR-374-Improve-login-flow
STAR-374 improve login flow
2 parents 3d4564a + fc4191b commit e146c7d

21 files changed

+238
-84
lines changed

‎src/components/__tests__/__snapshots__/about_dialog.test.tsx.snap‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,9 @@ exports[`The AboutDialog component should render 1`] = `
5757
</tr>
5858
</tbody>
5959
</table>
60-
<FormActions>
60+
<FormActions
61+
align="left"
62+
>
6163
<Button
6264
appearance="primary"
6365
className=""

‎src/components/__tests__/__snapshots__/drop_down_menu_base.test.tsx.snap‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,3 +59,63 @@ exports[`The DropDownMenuBase component should render 1`] = `
5959
</div>
6060
</div>
6161
`;
62+
63+
exports[`The DropDownMenuBase component should render drop down menu open 1`] = `
64+
<div
65+
className="drop-down-menu-base drop-down-menu-base--south drop-down-menu-base--visible"
66+
onClick={[Function]}
67+
>
68+
<Button
69+
appearance="no-style"
70+
className="drop-down-menu-base__trigger"
71+
linkToNewTab={false}
72+
onClickHandler={[Function]}
73+
shape="rectangle"
74+
type="button"
75+
>
76+
trigger
77+
</Button>
78+
<div
79+
className="drop-down-menu-base__menu-container"
80+
>
81+
<div
82+
className="drop-down-menu-base__menu"
83+
>
84+
<Collapse
85+
fixedHeight={-1}
86+
forceInitialAnimation={false}
87+
hasNestedCollapse={false}
88+
isOpened={true}
89+
onMeasure={[Function]}
90+
onRender={[Function]}
91+
onRest={[Function]}
92+
springConfig={
93+
Object {
94+
"damping": 35,
95+
"stiffness": 370,
96+
}
97+
}
98+
style={Object {}}
99+
theme={
100+
Object {
101+
"collapse": "ReactCollapse--collapse",
102+
"content": "ReactCollapse--content",
103+
}
104+
}
105+
>
106+
<ul
107+
className="drop-down-menu-base__menu-list"
108+
>
109+
<DropDownMenuItem
110+
active={false}
111+
onClickHandler={[MockFunction]}
112+
/>
113+
</ul>
114+
</Collapse>
115+
</div>
116+
<div
117+
className="drop-down-menu-base__arrow"
118+
/>
119+
</div>
120+
</div>
121+
`;

‎src/components/__tests__/__snapshots__/form.test.tsx.snap‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ exports[`The Form component should render 1`] = `
66
noValidate={true}
77
onSubmit={[Function]}
88
>
9-
<FormActions>
9+
<FormActions
10+
align="left"
11+
>
1012
<Button
1113
appearance="primary"
1214
className=""
@@ -101,12 +103,14 @@ exports[`The Form component should render with a form item 1`] = `
101103
</TextField>
102104
</InputField>
103105
</div>
104-
<FormActions>
106+
<FormActions
107+
align="left"
108+
>
105109
<div
106-
className="form__actions"
110+
className="form-actions form-actions--left"
107111
>
108112
<div
109-
className="form__btn-container"
113+
className="form-actions__btn-container"
110114
key="0"
111115
>
112116
<Button

‎src/components/__tests__/__snapshots__/form_actions.test.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
exports[`The form actions component should render its children 1`] = `
44
<div
5-
className="form__actions"
5+
className="form-actions form-actions--left"
66
>
77
<div
8-
className="form__btn-container"
8+
className="form-actions__btn-container"
99
key="0"
1010
>
1111
<Button
@@ -20,7 +20,7 @@ exports[`The form actions component should render its children 1`] = `
2020
</Button>
2121
</div>
2222
<div
23-
className="form__btn-container"
23+
className="form-actions__btn-container"
2424
key="1"
2525
>
2626
<Button

‎src/components/__tests__/context_menu.test.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ describe('The ContextMenu component', () => {
1313

1414
beforeEach(() => {
1515
props = {
16+
showMenu: false,
17+
onToggleMenuHandler: jest.fn(),
1618
menuWidth: 200,
1719
children: null,
1820
};
@@ -39,8 +41,13 @@ describe('The ContextMenu component', () => {
3941
expect(wrapper.find('.context-menu--panel')).toHaveLength(1);
4042
});
4143

42-
it('should show menu when the trigger is clicked', () => {
43-
wrapper.find(DropDownMenuBase).props().onToggleMenuHandler(true);
44+
it('should pass showMenu down', () => {
45+
wrapper.setProps({ showMenu: true });
4446
expect(wrapper.find(DropDownMenuBase).prop('showMenu')).toBe(true);
4547
});
48+
49+
it('should call onToggleMenuHandler when the trigger is clicked', () => {
50+
wrapper.find(DropDownMenuBase).props().onToggleMenuHandler(true);
51+
expect(props.onToggleMenuHandler).toHaveBeenCalled();
52+
});
4653
});

‎src/components/__tests__/context_menu_item.test.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,16 @@ import * as React from 'react';
33
import { shallow } from 'enzyme';
44

55
// component
6-
import ContextMenuItem from '../context_menu_item';
6+
import { ContextMenuItem, ContextMenuItemProps } from '../context_menu_item';
77

88

99
describe('The ContextMenuItem component', () => {
10-
let props;
10+
let props: ContextMenuItemProps;
1111
let wrapper;
1212

1313
beforeEach(() => {
1414
props = {
15-
label: 'Menu item',
1615
onClickHandler: jest.fn(),
17-
onCloseMenuHandler: jest.fn(),
1816
};
1917
wrapper = shallow(<ContextMenuItem {...props} />);
2018
});

‎src/components/__tests__/drop_down_menu_base.test.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,20 @@ describe('The DropDownMenuBase component', () => {
3737
wrapper.simulate('click', mockClickEvent);
3838
expect(mockClickEvent.stopPropagation).toBeCalled();
3939
});
40+
41+
it('should render drop down menu north', () => {
42+
wrapper.setProps({ menuDirection: 'north' });
43+
expect(wrapper.find('.drop-down-menu-base--north').exists()).toBe(true);
44+
expect(wrapper.find('.drop-down-menu-base--south').exists()).toBe(false);
45+
});
46+
47+
it('should render drop down menu open', () => {
48+
wrapper.setProps({ showMenu: true });
49+
expect(wrapper).toMatchSnapshot();
50+
});
51+
52+
it('should pass in menuStyle', () => {
53+
wrapper.setProps({ menuStyle: { background: 'blue' } });
54+
expect(wrapper.find('.drop-down-menu-base__menu').prop('style')).toHaveProperty('background', 'blue');
55+
});
4056
});

‎src/components/context_menu.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ import { DropDownMenuBase, MenuDirection } from './drop_down_menu_base';
77
export type MenuOffsetDirection = 'left' | 'right';
88

99
export interface ContextMenuProps {
10+
/** Whether the menu should be visible */
11+
showMenu: boolean;
12+
/** Callback to toggle showMenu */
13+
onToggleMenuHandler: (showMenu: boolean) => void;
1014
/** Width of the menu in pixels */
1115
menuWidth: number;
1216
/** Direction to offset the menu: 'left' | 'right' */
@@ -21,7 +25,6 @@ export interface ContextMenuProps {
2125

2226
export interface ContextMenuState {
2327
menuOffset: number;
24-
showMenu: boolean;
2528
}
2629

2730
const menuOffsetDefault = 30;
@@ -58,7 +61,6 @@ export class ContextMenu extends React.Component<ContextMenuProps, ContextMenuSt
5861

5962
state = {
6063
menuOffset: null,
61-
showMenu: false,
6264
};
6365

6466
constructor(props: ContextMenuProps) {
@@ -69,7 +71,8 @@ export class ContextMenu extends React.Component<ContextMenuProps, ContextMenuSt
6971
private _menuRef;
7072

7173
private _onToggleMenuHandler(showMenu: boolean): void {
72-
this.setState({ showMenu });
74+
const { onToggleMenuHandler } = this.props;
75+
onToggleMenuHandler(showMenu);
7376
this._setMenuOffset();
7477
}
7578

@@ -113,9 +116,9 @@ export class ContextMenu extends React.Component<ContextMenuProps, ContextMenuSt
113116

114117
render(): JSX.Element {
115118
const {
116-
menuWidth, menuOffsetDirection, menuDirection, positionMenuInPanel, children,
119+
menuWidth, menuOffsetDirection, menuDirection, positionMenuInPanel, showMenu, children,
117120
} = this.props;
118-
const { menuOffset, showMenu } = this.state;
121+
const { menuOffset } = this.state;
119122

120123
const classes = classNames(
121124
'context-menu',

‎src/components/drop_down_menu_base.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export interface DropDownMenuBaseProps {
1717
/** Style object to be applied to menu */
1818
menuStyle?: object;
1919
/** Callback to toggle showMenu */
20-
onToggleMenuHandler?: (showMenu) => void;
20+
onToggleMenuHandler?: (showMenu: boolean) => void;
2121
/** The list of menu items */
2222
children: JSX.Element | JSX.Element[];
2323
}
@@ -77,10 +77,6 @@ export class DropDownMenuBase extends React.Component<DropDownMenuBaseProps, {}>
7777
{ 'drop-down-menu-base--visible': showMenu },
7878
);
7979

80-
const onCloseMenuHandlerProp = {
81-
onCloseMenuHandler: () => this._onToggleMenuHandler(false),
82-
};
83-
8480
return (
8581
// eslint-disable-next-line max-len
8682
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions

‎src/components/form_actions.tsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,31 @@
11
import * as React from 'react';
22

3+
export type FormActionsAlign = 'left' | 'center' | 'right';
4+
35
export interface FormActionsProps {
6+
/** The horizontal alignment of the buttons */
7+
align?: FormActionsAlign;
48
/** typically the form actions are a list of buttons */
59
children: JSX.Element[] | JSX.Element;
610
}
711

812
/**
913
* Form actions component that adds the right classes to a list of buttons after a form.
1014
*/
11-
export const FormActions: React.StatelessComponent<FormActionsProps> = ({ children }) => (
12-
<div className="form__actions">
13-
{React.Children.toArray(children).map((child, index) => child
14-
&& <div key={index} className="form__btn-container">{child}</div>)}
15-
</div>
16-
);
15+
export const FormActions: React.StatelessComponent<FormActionsProps> = ({ align, children }) => {
16+
const classNames = (`form-actions form-actions--${align}`);
17+
18+
return (
19+
<div className={classNames}>
20+
{React.Children.toArray(children).map((child, index) => child
21+
&& <div key={index} className="form-actions__btn-container">{child}</div>)}
22+
</div>
23+
);
24+
};
25+
26+
FormActions.defaultProps = {
27+
align: 'left',
28+
};
1729

1830
FormActions.displayName = 'FormActions';
1931
export default FormActions;

0 commit comments

Comments
 (0)