-
Notifications
You must be signed in to change notification settings - Fork 593
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Allow plugins to specify nav sections and specify their order
- Loading branch information
1 parent
33f3773
commit 94ce8db
Showing
18 changed files
with
354 additions
and
82 deletions.
There are no files selected for viewing
122 changes: 122 additions & 0 deletions
122
frontend/__tests__/components/nav/perspective-nav.spec.ts
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,122 @@ | ||
| import { getSortedNavItems } from '@console/internal/components/nav/perspective-nav'; | ||
| import { LoadedExtension, NavItem, NavSection, SeparatorNavItem } from '@console/plugin-sdk/src'; | ||
|
|
||
| const mockNavItems: LoadedExtension<NavSection | NavItem | SeparatorNavItem>[] = [ | ||
| { | ||
| type: 'Nav/Section', | ||
| properties: { | ||
| id: 'test1', | ||
| }, | ||
| pluginID: 'test-plugin-id', | ||
| pluginName: 'test-plugin-name', | ||
| uid: 'test-plugin-uid', | ||
| }, | ||
| { | ||
| type: 'Nav/Section', | ||
| properties: { | ||
| id: 'test2', | ||
| }, | ||
| pluginID: 'test-plugin-id', | ||
| pluginName: 'test-plugin-name', | ||
| uid: 'test-plugin-uid', | ||
| }, | ||
| { | ||
| type: 'Nav/Section', | ||
| properties: { | ||
| id: 'test3', | ||
| }, | ||
| pluginID: 'test-plugin-id', | ||
| pluginName: 'test-plugin-name', | ||
| uid: 'test-plugin-uid', | ||
| }, | ||
| { | ||
| type: 'Nav/Section', | ||
| properties: { | ||
| id: 'test4', | ||
| }, | ||
| pluginID: 'test-plugin-id', | ||
| pluginName: 'test-plugin-name', | ||
| uid: 'test-plugin-uid', | ||
| }, | ||
| { | ||
| type: 'Nav/Section', | ||
| properties: { | ||
| id: 'test5', | ||
| }, | ||
| pluginID: 'test-plugin-id', | ||
| pluginName: 'test-plugin-name', | ||
| uid: 'test-plugin-uid', | ||
| }, | ||
| { | ||
| type: 'Nav/Section', | ||
| properties: { | ||
| id: 'test6', | ||
| }, | ||
| pluginID: 'test-plugin-id', | ||
| pluginName: 'test-plugin-name', | ||
| uid: 'test-plugin-uid', | ||
| }, | ||
| { | ||
| type: 'NavItem/Separator', | ||
| properties: { | ||
| id: 'test7', | ||
| componentProps: { | ||
| testID: 'test-sep', | ||
| }, | ||
| }, | ||
| pluginID: 'test-plugin-id', | ||
| pluginName: 'test-plugin-name', | ||
| uid: 'test-plugin-uid', | ||
| }, | ||
| ]; | ||
|
|
||
| describe('perspective-nav insertPositionedItems', () => { | ||
| it('should order items that are not positioned', () => { | ||
| const sortedItems = getSortedNavItems(mockNavItems); | ||
| expect(sortedItems.map((i) => i.properties.id)).toEqual( | ||
| mockNavItems.map((i) => i.properties.id), | ||
| ); | ||
| }); | ||
|
|
||
| it('should order items that are positioned', () => { | ||
| mockNavItems[0].properties.insertAfter = 'test2'; | ||
| let sortedItems = getSortedNavItems(mockNavItems); | ||
| expect(sortedItems.map((i) => i.properties.id).indexOf('test1')).toBe(1); | ||
|
|
||
| delete mockNavItems[0].properties.insertAfter; | ||
| mockNavItems[0].properties.insertBefore = 'test5'; | ||
| sortedItems = getSortedNavItems(mockNavItems); | ||
| expect(sortedItems.map((i) => i.properties.id).indexOf('test1')).toBe(3); | ||
|
|
||
| delete mockNavItems[0].properties.insertBefore; | ||
| mockNavItems[0].properties.insertAfter = ['x', 'y', 'test3', 'z']; | ||
| sortedItems = getSortedNavItems(mockNavItems); | ||
| expect(sortedItems.map((i) => i.properties.id).indexOf('test1')).toBe(2); | ||
|
|
||
| delete mockNavItems[0].properties.insertAfter; | ||
| mockNavItems[0].properties.insertBefore = ['x', 'y', 'test3', 'z']; | ||
| sortedItems = getSortedNavItems(mockNavItems); | ||
| expect(sortedItems.map((i) => i.properties.id).indexOf('test1')).toBe(1); | ||
|
|
||
| // Before takes precedence | ||
| mockNavItems[0].properties.insertAfter = 'test6'; | ||
| sortedItems = getSortedNavItems(mockNavItems); | ||
| expect(sortedItems.map((i) => i.properties.id).indexOf('test1')).toBe(1); | ||
| }); | ||
|
|
||
| it('should order items that are positioned on positioned items', () => { | ||
| delete mockNavItems[0].properties.insertBefore; | ||
| mockNavItems[0].properties.insertAfter = 'test6'; | ||
| mockNavItems[5].properties.insertAfter = 'test4'; | ||
| let sortedItems = getSortedNavItems(mockNavItems); | ||
| expect(sortedItems.map((i) => i.properties.id).indexOf('test6')).toBe(3); | ||
| expect(sortedItems.map((i) => i.properties.id).indexOf('test1')).toBe(4); | ||
| expect(sortedItems.map((i) => i.properties.id).indexOf('test7')).toBe(6); | ||
|
|
||
| mockNavItems[6].properties.insertBefore = 'test1'; | ||
| sortedItems = getSortedNavItems(mockNavItems); | ||
| expect(sortedItems.map((i) => i.properties.id).indexOf('test6')).toBe(3); | ||
| expect(sortedItems.map((i) => i.properties.id).indexOf('test1')).toBe(5); | ||
| expect(sortedItems.map((i) => i.properties.id).indexOf('test7')).toBe(4); | ||
| }); | ||
| }); |
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
24 changes: 24 additions & 0 deletions
24
frontend/packages/console-plugin-sdk/src/typings/nav-section.ts
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,24 @@ | ||
| import { Extension } from './base'; | ||
|
|
||
| namespace ExtensionProperties { | ||
| export interface NavSection { | ||
| /** Section id, should be unique for all sections (and top level items) */ | ||
| id: string; | ||
| /** Perspective id to which this section belongs to. If not specified, use the default perspective. */ | ||
| perspective?: string; | ||
| /** Title for the section, if none only a separator will be shown above the section */ | ||
| name?: string; | ||
| /** Nav section before which this section should be placed. For arrays, first one found in order is used */ | ||
| insertBefore?: string | string[]; | ||
| /** Nav section after which this section should be placed (before takes precedence). For arrays, first one found in order is used */ | ||
| insertAfter?: string | string[]; | ||
| } | ||
| } | ||
|
|
||
| export interface NavSection extends Extension<ExtensionProperties.NavSection> { | ||
| type: 'Nav/Section'; | ||
| } | ||
|
|
||
| export const isNavSection = (e: Extension): e is NavSection => { | ||
| return e.type === 'Nav/Section'; | ||
| }; |
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.