-
Notifications
You must be signed in to change notification settings - Fork 901
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(core): refactor insight menu from dropdown to buttons (#8424)
The motivation for this change is to better surface an action for the user to take when they are on the search, project, and application pages. The current UX obscures the next appropriate action behind a drop down menu that visually blends into the page, making it difficult for users to know what to do next. The proposed change is to replace the drop down menu with buttons rendered appropriately for each page. When on the search page, both create project and application buttons are rendered, with a call to action for create application. When on project or application pages, only render those buttons. Finally, if a cache refresh is needed, render this on all pages when appropriate. At a technical level, this unifies the three dropdowns which currently depend on 2 separate angular controllers and a react component. The component has been used in favor of the angular implementations on both search and project pages.
- Loading branch information
1 parent
0fa6896
commit 425d2e1
Showing
7 changed files
with
195 additions
and
111 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import React from 'react'; | ||
| import { mock } from 'angular'; | ||
| import { ReactWrapper, mount } from 'enzyme'; | ||
| import { IInsightMenuProps, IInsightMenuState, InsightMenu } from './InsightMenu'; | ||
| import { IModalService } from 'angular-ui-bootstrap'; | ||
| import { OverrideRegistry } from '../overrideRegistry/override.registry'; | ||
| import { CacheInitializerService } from '../cache/cacheInitializer.service'; | ||
| import { Button } from 'react-bootstrap'; | ||
|
|
||
| beforeEach(() => { | ||
| mock.module(($provide: any) => { | ||
| $provide.value('$uibModal', {} as IModalService); | ||
| $provide.value('overrideRegistry', {} as OverrideRegistry); | ||
| $provide.value('cacheInitializer', {} as CacheInitializerService); | ||
| }); | ||
| }); | ||
|
|
||
| describe('<InsightMenu />', () => { | ||
| let component: ReactWrapper<IInsightMenuProps, IInsightMenuState>; | ||
|
|
||
| function getNewMenu(params: object): ReactWrapper<IInsightMenuProps, any> { | ||
| // Set defaults to zero so we only need to pass in the prop we want rendered | ||
| const mergedParams = { ...{ createApp: false, createProject: false, refreshCaches: false }, ...params }; | ||
| return mount( | ||
| <InsightMenu | ||
| createApp={mergedParams.createApp} | ||
| createProject={mergedParams.createProject} | ||
| refreshCaches={mergedParams.refreshCaches} | ||
| />, | ||
| ); | ||
| } | ||
|
|
||
| it('should only render create application button when initialized', () => { | ||
| component = getNewMenu({ createApp: true }); | ||
| const btn = component.find(Button); | ||
|
|
||
| expect(btn.length).toBe(1); | ||
| expect(btn.text()).toEqual('Create Application'); | ||
| // Button should always be primary for create application | ||
| // FIXME: when this project moves to v1+ of react-bootstrap this prop will need to change. | ||
| expect(btn.prop('bsStyle')).toEqual('primary'); | ||
| }); | ||
|
|
||
| it('should only render create project button when initialized', () => { | ||
| component = getNewMenu({ createProject: true }); | ||
|
|
||
| const btn = component.find(Button); | ||
|
|
||
| expect(btn.length).toBe(1); | ||
| expect(btn.text()).toEqual('Create Project'); | ||
| // If project is the only button rendered, it should be primary. | ||
| // FIXME: when this project moves to v1+ of react-bootstrap this prop will need to change. | ||
| expect(btn.prop('bsStyle')).toEqual('primary'); | ||
| }); | ||
|
|
||
| it('should only render refresh cache button when initialized', () => { | ||
| // note: this test doesn't validate the state changes that could occur w/ | ||
| // the refresh button in particular. | ||
| component = getNewMenu({ refreshCaches: true }); | ||
|
|
||
| const btn = component.find(Button); | ||
|
|
||
| expect(btn.length).toBe(1); | ||
| expect(btn.text()).toMatch('Refresh'); | ||
| }); | ||
|
|
||
| it('should only render create application as primary when multiple buttons are rendered', () => { | ||
| component = getNewMenu({ createApp: true, createProject: true }); | ||
|
|
||
| const btns = component.find(Button); | ||
| const proj = btns.at(0); | ||
| const app = btns.at(1); | ||
|
|
||
| expect(btns.length).toBe(2); | ||
| // Project button should be first | ||
| expect(proj.text()).toEqual('Create Project'); | ||
| // FIXME: when this project moves to v1+ of react-bootstrap this prop will need to change. | ||
| expect(proj.prop('bsStyle')).toEqual('default'); | ||
| // Application button should be second, so that it renders furthest to the right | ||
| expect(app.text()).toEqual('Create Application'); | ||
| // FIXME: when this project moves to v1+ of react-bootstrap this prop will need to change. | ||
| expect(app.prop('bsStyle')).toEqual('primary'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.