-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #7711 from cjcenizal/7467/pin-sidebar
Refactor app-switcher links components.
- Loading branch information
Showing
10 changed files
with
372 additions
and
106 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
35 changes: 10 additions & 25 deletions
35
src/ui/public/chrome/directives/app_switcher/app_switcher.html
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 |
|---|---|---|
| @@ -1,26 +1,11 @@ | ||
| <div class="app-links"> | ||
| <div | ||
| class="app-link" | ||
| ng-repeat="link in switcher.shownNavLinks" | ||
| ng-class="{ active: link.active, 'is-app-switcher-app-link-disabled': !switcher.isNavLinkEnabled(link) }" | ||
| tooltip="{{link.tooltip}}" | ||
| tooltip-placement="right" | ||
| tooltip-popup-delay="400" | ||
| tooltip-append-to-body="1" | ||
| > | ||
|
|
||
| <a | ||
| ng-click="switcher.ensureNavigation($event, link)" | ||
| ng-href="{{ link.active ? link.url : (link.lastSubUrl || link.url) }}" | ||
| data-test-subj="appLink" | ||
| ng-class="{ 'app-link__anchor': !switcher.isNavLinkEnabled(link) }" | ||
| title="{{ link.title }}" | ||
| > | ||
|
|
||
| <div ng-if="link.icon" class="app-icon"><img kbn-src="{{'/' + link.icon}}"></div> | ||
| <div ng-if="!link.icon" class="app-icon-missing">{{ link.title[0] }}</div> | ||
|
|
||
| <div class="app-title">{{ link.title }}</div> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <app-switcher-link | ||
| ng-repeat="link in switcher.shownNavLinks" | ||
| app-switcher-link-is-active="link.active" | ||
| app-switcher-link-is-disabled="!switcher.isNavLinkEnabled(link)" | ||
| app-switcher-link-tooltip="link.tooltip" | ||
| app-switcher-link-on-click="switcher.ensureNavigation($event, link)" | ||
| app-switcher-link-href="link.active ? link.url : (link.lastSubUrl || link.url)" | ||
| app-switcher-link-icon="link.icon" | ||
| app-switcher-link-title="link.title" | ||
| ></app-switcher-link> |
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
211 changes: 211 additions & 0 deletions
211
src/ui/public/chrome/directives/app_switcher_link/__tests__/app-switcher-link.js
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,211 @@ | ||
| import sinon from 'auto-release-sinon'; | ||
| import ngMock from 'ng_mock'; | ||
| import expect from 'expect.js'; | ||
|
|
||
| import '../app_switcher_link'; | ||
|
|
||
| describe('appSwitcherLink directive', () => { | ||
| let scope; | ||
| let $compile; | ||
|
|
||
| beforeEach(ngMock.module('kibana')); | ||
|
|
||
| beforeEach(() => { | ||
| ngMock.inject(($rootScope, _$compile_) => { | ||
| scope = $rootScope.$new(); | ||
| $compile = _$compile_; | ||
| }); | ||
| }); | ||
|
|
||
| function create(attrs) { | ||
| const template = ` | ||
| <app-switcher-link | ||
| app-switcher-link-is-active="appSwitcherLinkIsActive" | ||
| app-switcher-link-is-disabled="appSwitcherLinkIsDisabled" | ||
| app-switcher-link-tooltip="appSwitcherLinkTooltip" | ||
| app-switcher-link-on-click="appSwitcherLinkOnClick()" | ||
| app-switcher-link-href="appSwitcherLinkHref" | ||
| app-switcher-link-kbn-route="appSwitcherLinkKbnRoute" | ||
| app-switcher-link-icon="appSwitcherLinkIcon" | ||
| app-switcher-link-title="appSwitcherLinkTitle" | ||
| /> | ||
| `; | ||
|
|
||
| const element = $compile(template)(scope); | ||
|
|
||
| scope.$apply(() => { | ||
| Object.assign(scope, attrs); | ||
| }); | ||
|
|
||
| return element; | ||
| } | ||
|
|
||
| describe('interface', () => { | ||
|
|
||
| describe('appSwitcherLinkIsActive attribute', () => { | ||
| it(`doesn't apply the active class when false`, () => { | ||
| const element = create({ | ||
| appSwitcherLinkIsActive: false, | ||
| }); | ||
| expect(element.hasClass('active')).to.be(false); | ||
| }); | ||
|
|
||
| it('applies the active class when true', () => { | ||
| const element = create({ | ||
| appSwitcherLinkIsActive: true, | ||
| }); | ||
| expect(element.hasClass('active')).to.be(true); | ||
| }); | ||
| }); | ||
|
|
||
| describe('appSwitcherLinkIsDisabled attribute', () => { | ||
| it(`doesn't apply the is-app-switcher-link-disabled class when false`, () => { | ||
| const element = create({ | ||
| appSwitcherLinkIsDisabled: false, | ||
| }); | ||
| expect(element.hasClass('is-app-switcher-link-disabled')).to.be(false); | ||
| }); | ||
|
|
||
| it('applies the is-app-switcher-link-disabled class when true', () => { | ||
| const element = create({ | ||
| appSwitcherLinkIsDisabled: true, | ||
| }); | ||
| expect(element.hasClass('is-app-switcher-link-disabled')).to.be(true); | ||
| }); | ||
| }); | ||
|
|
||
| describe('appSwitcherLinkTooltip attribute', () => { | ||
| it('is applied to the tooltip directive', () => { | ||
| const attrs = { | ||
| appSwitcherLinkTooltip: 'hello i am a tooltip', | ||
| }; | ||
| const element = create(attrs); | ||
| expect(element.attr('tooltip')).to.be(attrs.appSwitcherLinkTooltip); | ||
| }); | ||
| }); | ||
|
|
||
| describe('appSwitcherLinkOnClick attribute', () => { | ||
| it('is called when the link is clicked', () => { | ||
| const attrs = { | ||
| appSwitcherLinkOnClick: sinon.spy(), | ||
| }; | ||
| const element = create(attrs); | ||
| element.find('[data-test-subj=appLink]').click(); | ||
| sinon.assert.called(attrs.appSwitcherLinkOnClick); | ||
| }); | ||
| }); | ||
|
|
||
| describe('appSwitcherLinkHref attribute', () => { | ||
| it('is applied to the link', () => { | ||
| const attrs = { | ||
| appSwitcherLinkHref: 'link to a website', | ||
| }; | ||
| const element = create(attrs); | ||
| const link = element.find('[data-test-subj=appLink]'); | ||
| expect(link.attr('href')).to.be(attrs.appSwitcherLinkHref); | ||
| }); | ||
| }); | ||
|
|
||
| describe('appSwitcherLinkKbnRoute attribute', () => { | ||
| it(`is applied to the link when href isn't defined`, () => { | ||
| const attrs = { | ||
| appSwitcherLinkKbnRoute: '#test', | ||
| }; | ||
| const element = create(attrs); | ||
| const link = element.find('[data-test-subj=appLink]'); | ||
| expect(link.attr('href')).to.be(attrs.appSwitcherLinkKbnRoute); | ||
| }); | ||
|
|
||
| it(`isn't applied to the link when href is defined`, () => { | ||
| const attrs = { | ||
| appSwitcherLinkHref: 'link to a website', | ||
| appSwitcherLinkKbnRoute: '#test', | ||
| }; | ||
| const element = create(attrs); | ||
| const link = element.find('[data-test-subj=appLink]'); | ||
| expect(link.attr('href')).not.to.be(attrs.appSwitcherLinkKbnRoute); | ||
| }); | ||
| }); | ||
|
|
||
| describe('appSwitcherLinkIcon attribute', () => { | ||
| describe('when present', () => { | ||
| it('displays the img element', () => { | ||
| const attrs = { | ||
| appSwitcherLinkIcon: 'icon url', | ||
| }; | ||
| const element = create(attrs); | ||
| const img = element.find('img'); | ||
| expect(img.length).to.be(1); | ||
| }); | ||
|
|
||
| it('hides the placeholder', () => { | ||
| const attrs = { | ||
| appSwitcherLinkIcon: 'icon url', | ||
| }; | ||
| const element = create(attrs); | ||
| const placeholder = element.find('[data-test-subj=appLinkIconPlaceholder]'); | ||
| expect(placeholder.length).to.be(0); | ||
| }); | ||
|
|
||
| it(`is set as the img src`, () => { | ||
| const attrs = { | ||
| appSwitcherLinkIcon: 'icon url', | ||
| }; | ||
| const element = create(attrs); | ||
| const img = element.find('img'); | ||
| expect(img.attr('src')).to.contain(encodeURI(attrs.appSwitcherLinkIcon)); | ||
| }); | ||
| }); | ||
|
|
||
| describe('when not present', () => { | ||
| it('hides the img element', () => { | ||
| const attrs = { | ||
| appSwitcherLinkIcon: undefined, | ||
| }; | ||
| const element = create(attrs); | ||
| const img = element.find('img'); | ||
| expect(img.length).to.be(0); | ||
| }); | ||
|
|
||
| it('displays the placeholder', () => { | ||
| const attrs = { | ||
| appSwitcherLinkIcon: undefined, | ||
| }; | ||
| const element = create(attrs); | ||
| const placeholder = element.find('[data-test-subj=appLinkIconPlaceholder]'); | ||
| expect(placeholder.length).to.be(1); | ||
| }); | ||
|
|
||
| it(`uses the title's first letter as the placeholder`, () => { | ||
| const attrs = { | ||
| appSwitcherLinkIcon: undefined, | ||
| appSwitcherLinkTitle: 'Xyz', | ||
| }; | ||
| const element = create(attrs); | ||
| const placeholder = element.find('[data-test-subj=appLinkIconPlaceholder]'); | ||
| expect(placeholder.text()).to.contain(attrs.appSwitcherLinkTitle[0]); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('appSwitcherLinkTitle attribute', () => { | ||
| it('is displayed', () => { | ||
| const attrs = { | ||
| appSwitcherLinkTitle: 'demo title', | ||
| }; | ||
| const element = create(attrs); | ||
| const title = element.find('.app-switcher-link__title'); | ||
| expect(title.text().trim()).to.be(attrs.appSwitcherLinkTitle); | ||
| }); | ||
|
|
||
| it('is set as a title attribute on the anchor tag', () => { | ||
| const attrs = { | ||
| appSwitcherLinkTitle: 'demo title', | ||
| }; | ||
| const element = create(attrs); | ||
| const link = element.find('[data-test-subj=appLink]'); | ||
| expect(link.attr('title')).to.be(attrs.appSwitcherLinkTitle); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
36 changes: 36 additions & 0 deletions
36
src/ui/public/chrome/directives/app_switcher_link/app_switcher_link.html
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,36 @@ | ||
| <div | ||
| class="app-switcher-link" | ||
| ng-class="{ active: isActive, 'is-app-switcher-link-disabled': isDisabled }" | ||
| tooltip="{{ tooltip }}" | ||
| tooltip-placement="right" | ||
| tooltip-popup-delay="400" | ||
| tooltip-append-to-body="1" | ||
| > | ||
| <a | ||
| class="app-switcher-link__anchor" | ||
| href="{{ getHref() }}" | ||
| ng-click="onClick({ $event: $event })" | ||
| data-test-subj="appLink" | ||
| title="{{ title }}" | ||
| > | ||
| <div class="app-switcher-link__icon"> | ||
| <img | ||
| ng-if="icon" | ||
| class="app-switcher-link__icon-image" | ||
| kbn-src="{{ '/' + icon }}" | ||
| > | ||
|
|
||
| <span | ||
| ng-if="!icon" | ||
| class="app-switcher-link__icon-placeholder" | ||
| data-test-subj="appLinkIconPlaceholder" | ||
| > | ||
| {{ title[0] }} | ||
| </span> | ||
| </div> | ||
|
|
||
| <div class="app-switcher-link__title"> | ||
| {{ title }} | ||
| </div> | ||
| </a> | ||
| </div> |
Oops, something went wrong.