fix(core): Improve navigation terminology (#8370)

* fix(core): Improve navigation terminology * fix(core): Improve navigation terminology
spinnaker · Jun 24, 2020 · 9c418d5 · 9c418d5
1 parent 049cceb
commit 9c418d5
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 47 deletions.
diff --git a/app/scripts/modules/core/src/application/nav/ApplicationNavigation.spec.tsx b/app/scripts/modules/core/src/application/nav/ApplicationNavigation.spec.tsx
@@ -113,12 +113,12 @@ describe('ApplicationNavigation', () => {
     const navSection = wrapper.find('NavSection').at(1);
     const taskRoute = navSection.find('NavRoute').at(0);
 
-    const taskCategory = taskRoute.find('NavCategory');
+    const taskCategory = taskRoute.find('NavItem');
     const isTaskCategoryActive = taskCategory.prop('isActive');
     expect(isTaskCategoryActive).toEqual(true);
 
     const configRoute = navSection.find('NavRoute').at(1);
-    const configCategory = configRoute.find('NavCategory');
+    const configCategory = configRoute.find('NavItem');
     const isConfigCategoryActive = configCategory.prop('isActive');
     expect(isConfigCategoryActive).toEqual(false);
   });

diff --git a/app/scripts/modules/core/src/application/nav/ApplicationNavigation.tsx b/app/scripts/modules/core/src/application/nav/ApplicationNavigation.tsx
@@ -68,7 +68,7 @@ export const ApplicationNavigation = ({ app }: IApplicationNavigationProps) => {
       {navSections
         .filter(section => section.length)
         .map((section, i) => (
-          <NavSection key={`section-${i}`} categories={section} app={app} />
+          <NavSection key={`section-${i}`} dataSources={section} app={app} />
         ))}
       <div className="nav-section clickable">
         <div className="page-category flex-container-h middle" onClick={pageApplicationOwner}>

diff --git a/.../src/application/nav/NavCategory.spec.tsx → ...core/src/application/nav/NavItem.spec.tsx b/.../src/application/nav/NavCategory.spec.tsx → ...core/src/application/nav/NavItem.spec.tsx
@@ -6,46 +6,46 @@ import { mockEntityTags, mockServerGroupDataSourceConfig, mockPipelineDataSource
 import { Application, ApplicationModelBuilder } from '../../application';
 import { ApplicationDataSource, IDataSourceConfig } from '../service/applicationDataSource';
 import { IEntityTags, IServerGroup, IPipeline } from '../../domain';
-import { NavCategory } from './NavCategory';
+import { NavItem } from './NavItem';
 
-describe('NavCategory', () => {
+describe('NavItem', () => {
   const buildApp = <T,>(config: IDataSourceConfig<T>): Application =>
     ApplicationModelBuilder.createApplicationForTests('testapp', config);
 
   it('should render a datasources icon', () => {
     const app = buildApp<IServerGroup>(mockServerGroupDataSourceConfig);
-    const category = app.getDataSource('serverGroups');
-    category.iconName = 'spMenuClusters';
+    const dataSource = app.getDataSource('serverGroups');
+    dataSource.iconName = 'spMenuClusters';
 
-    const wrapper = mount(<NavCategory app={app} category={category} isActive={false} />);
+    const wrapper = mount(<NavItem app={app} dataSource={dataSource} isActive={false} />);
     const nodes = wrapper.children();
     const icon = nodes.childAt(1).children();
     expect(icon.find('svg').length).toEqual(1);
   });
 
   it('should render a placeholder when there is icon', () => {
     const app = buildApp<IServerGroup>(mockServerGroupDataSourceConfig);
-    const category = app.getDataSource('serverGroups');
+    const dataSource = app.getDataSource('serverGroups');
 
-    const wrapper = mount(<NavCategory app={app} category={category} isActive={false} />);
+    const wrapper = mount(<NavItem app={app} dataSource={dataSource} isActive={false} />);
     const nodes = wrapper.children();
     const icon = nodes.childAt(1).children();
     expect(icon.find('svg').length).toEqual(0);
   });
 
   it('should render running tasks badge', () => {
     const app = buildApp<IPipeline>(mockPipelineDataSourceConfig);
-    const category = app.getDataSource('executions');
-    app.dataSources.push({ ...category, key: 'runningExecutions' } as ApplicationDataSource<IPipeline>);
-    app.getDataSource(category.badge).status$ = new BehaviorSubject({
+    const dataSource = app.getDataSource('executions');
+    app.dataSources.push({ ...dataSource, key: 'runningExecutions' } as ApplicationDataSource<IPipeline>);
+    app.getDataSource(dataSource.badge).status$ = new BehaviorSubject({
       status: 'FETCHED',
       loaded: true,
       lastRefresh: 0,
       error: null,
       data: [mockPipelineDataSourceConfig, mockPipelineDataSourceConfig],
     });
 
-    const wrapper = mount(<NavCategory app={app} category={category} isActive={false} />);
+    const wrapper = mount(<NavItem app={app} dataSource={dataSource} isActive={false} />);
     const nodes = wrapper.children();
     expect(nodes.find('.badge-running-count').length).toBe(1);
     expect(nodes.find('.badge-none').length).toBe(0);
@@ -56,10 +56,10 @@ describe('NavCategory', () => {
 
   it('should not render running tasks badge if there are none', () => {
     const app = buildApp<IPipeline>(mockPipelineDataSourceConfig);
-    const category = app.getDataSource('executions');
-    app.dataSources.push({ ...category, key: 'runningExecutions' } as ApplicationDataSource<IPipeline>);
+    const dataSource = app.getDataSource('executions');
+    app.dataSources.push({ ...dataSource, key: 'runningExecutions' } as ApplicationDataSource<IPipeline>);
 
-    const wrapper = mount(<NavCategory app={app} category={category} isActive={false} />);
+    const wrapper = mount(<NavItem app={app} dataSource={dataSource} isActive={false} />);
     const nodes = wrapper.children();
     expect(nodes.find('.badge-running-count').length).toBe(0);
     expect(nodes.find('.badge-none').length).toBe(1);
@@ -70,10 +70,10 @@ describe('NavCategory', () => {
 
   it('subscribes to runningCount updates', () => {
     const app = buildApp<IPipeline>(mockPipelineDataSourceConfig);
-    const category = app.getDataSource('executions');
-    app.dataSources.push({ ...category, key: 'runningExecutions' } as ApplicationDataSource<IPipeline>);
+    const dataSource = app.getDataSource('executions');
+    app.dataSources.push({ ...dataSource, key: 'runningExecutions' } as ApplicationDataSource<IPipeline>);
 
-    const wrapper = mount(<NavCategory app={app} category={category} isActive={false} />);
+    const wrapper = mount(<NavItem app={app} dataSource={dataSource} isActive={false} />);
     const nodes = wrapper.children();
     expect(nodes.find('.badge-running-count').length).toBe(0);
     expect(nodes.find('.badge-none').length).toBe(1);
@@ -83,10 +83,10 @@ describe('NavCategory', () => {
 
     const updatedApp = buildApp<IPipeline>(mockPipelineDataSourceConfig);
     updatedApp.dataSources.push({
-      ...category,
+      ...dataSource,
       key: 'runningExecutions',
     } as ApplicationDataSource<IPipeline>);
-    updatedApp.getDataSource(category.badge).status$ = new BehaviorSubject({
+    updatedApp.getDataSource(dataSource.badge).status$ = new BehaviorSubject({
       status: 'FETCHED',
       loaded: true,
       lastRefresh: 0,
@@ -96,7 +96,7 @@ describe('NavCategory', () => {
 
     wrapper.setProps({
       app: updatedApp,
-      category,
+      dataSource,
       isActive: false,
     });
     wrapper.update();
@@ -111,21 +111,21 @@ describe('NavCategory', () => {
 
   it('should subscribe to alert updates', () => {
     const app = buildApp<IServerGroup>(mockServerGroupDataSourceConfig);
-    const category = app.getDataSource('serverGroups');
-    const wrapper = mount(<NavCategory app={app} category={category} isActive={false} />);
+    const dataSource = app.getDataSource('serverGroups');
+    const wrapper = mount(<NavItem app={app} dataSource={dataSource} isActive={false} />);
     const nodes = wrapper.children();
     const tags: IEntityTags[] = nodes.find('DataSourceNotifications').prop('tags');
     expect(tags.length).toEqual(0);
 
-    const newCategory = {
-      ...category,
+    const newDataSource = {
+      ...dataSource,
       alerts: [mockEntityTags],
       entityTags: [mockEntityTags],
     };
 
     wrapper.setProps({
       app,
-      category: newCategory,
+      dataSource: newDataSource,
       isActive: false,
     });
 

diff --git a/.../core/src/application/nav/NavCategory.tsx → ...ules/core/src/application/nav/NavItem.tsx b/.../core/src/application/nav/NavCategory.tsx → ...ules/core/src/application/nav/NavItem.tsx
@@ -8,19 +8,19 @@ import { Application } from '../application.model';
 import { IEntityTags } from '../../domain';
 
 export interface INavCategoryProps {
-  category: ApplicationDataSource;
+  dataSource: ApplicationDataSource;
   isActive: boolean;
   app: Application;
 }
 
-export const NavCategory = ({ app, category, isActive }: INavCategoryProps) => {
-  const { alerts, badge, iconName, key, label } = category;
+export const NavItem = ({ app, dataSource, isActive }: INavCategoryProps) => {
+  const { alerts, badge, iconName, key, label } = dataSource;
 
   const { data: badgeData } = useDataSource(app.getDataSource(badge || key));
   const runningCount = badge ? badgeData.length : 0;
 
   // useDataSource is enough to update alerts when needed
-  useDataSource(category);
+  useDataSource(dataSource);
   const tags: IEntityTags[] = alerts || [];
 
   const badgeClassNames = runningCount ? 'badge-running-count' : 'badge-none';
@@ -33,7 +33,7 @@ export const NavCategory = ({ app, category, isActive }: INavCategoryProps) => {
           <Icon className="nav-icon" name={iconName} size="extraSmall" color={isActive ? 'primary' : 'accent'} />
         )}
       </div>
-      <div className="nav-item">{' ' + category.label}</div>
+      <div className="nav-item">{' ' + dataSource.label}</div>
       <DataSourceNotifications tags={tags} application={app} tabName={label} />
     </div>
   );

diff --git a/app/scripts/modules/core/src/application/nav/NavRoute.tsx b/app/scripts/modules/core/src/application/nav/NavRoute.tsx
@@ -1,22 +1,22 @@
 import React from 'react';
 import { useIsActive, useSrefActive } from '@uirouter/react';
 
-import { NavCategory } from './NavCategory';
+import { NavItem } from './NavItem';
 import { ApplicationDataSource } from '../service/applicationDataSource';
 import { Application } from '../../application';
 
 export interface INavRouteProps {
-  category: ApplicationDataSource;
+  dataSource: ApplicationDataSource;
   app: Application;
 }
 
-export const NavRoute = ({ app, category }: INavRouteProps) => {
-  const sref = useSrefActive(category.sref, null, 'active');
-  const isActive = useIsActive(category.activeState);
+export const NavRoute = ({ app, dataSource }: INavRouteProps) => {
+  const sref = useSrefActive(dataSource.sref, null, 'active');
+  const isActive = useIsActive(dataSource.activeState);
 
   return (
     <a {...sref}>
-      <NavCategory app={app} category={category} isActive={isActive} />
+      <NavItem app={app} dataSource={dataSource} isActive={isActive} />
     </a>
   );
 };
diff --git a/app/scripts/modules/core/src/application/nav/NavSection.spec.tsx b/app/scripts/modules/core/src/application/nav/NavSection.spec.tsx
@@ -9,7 +9,7 @@ import {
 import { ApplicationModelBuilder } from '../../application';
 import { NavSection } from './NavSection';
 
-describe('NavCategory', () => {
+describe('NavItem', () => {
   it('should render multiple categories', () => {
     const app = ApplicationModelBuilder.createApplicationForTests(
       'testapp',
@@ -18,15 +18,15 @@ describe('NavCategory', () => {
       mockServerGroupDataSourceConfig,
     );
 
-    const wrapper = shallow(<NavSection app={app} categories={app.dataSources} />);
+    const wrapper = shallow(<NavSection app={app} dataSources={app.dataSources} />);
     const nodes = wrapper.children();
     expect(nodes.length).toEqual(3);
   });
 
-  it('should not render if no categories', () => {
+  it('should not render if no dataSources', () => {
     const app = ApplicationModelBuilder.createApplicationForTests('testapp');
 
-    const wrapper = shallow(<NavSection app={app} categories={[]} />);
+    const wrapper = shallow(<NavSection app={app} dataSources={[]} />);
     const nodes = wrapper.children();
     expect(nodes.length).toEqual(0);
   });

diff --git a/app/scripts/modules/core/src/application/nav/NavSection.tsx b/app/scripts/modules/core/src/application/nav/NavSection.tsx
@@ -5,14 +5,14 @@ import { ApplicationDataSource } from '../service/applicationDataSource';
 import { Application } from '../application.model';
 
 export interface INavigationSectionProps {
-  categories: ApplicationDataSource[];
+  dataSources: ApplicationDataSource[];
   app: Application;
 }
 
-export const NavSection = ({ app, categories }: INavigationSectionProps) => (
+export const NavSection = ({ app, dataSources }: INavigationSectionProps) => (
   <div className="nav-section sp-padding-s-yaxis text-semibold">
-    {categories.map(category => (
-      <NavRoute key={category.label} category={category} app={app} />
+    {dataSources.map(dataSource => (
+      <NavRoute key={dataSource.label} dataSource={dataSource} app={app} />
     ))}
   </div>
 );