Drag n drop nav (#8626)

* fix(core/nav): Add support for Chrome drag and drop links * fix(core/nav): Update tests
spinnaker · Oct 7, 2020 · d565b00 · d565b00
1 parent 75a054e
commit d565b00
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 33 deletions.
diff --git a/app/scripts/modules/core/src/application/nav/ApplicationNavigation.tsx b/app/scripts/modules/core/src/application/nav/ApplicationNavigation.tsx
@@ -27,11 +27,11 @@ export const ApplicationNavigation = ({ app }: IApplicationNavigationProps) => {
   const isExpanded = useRecoilValue(verticalNavExpandedAtom);
 
   const getNavigationCategories = (dataSources: ApplicationDataSource[]) => {
-    const appSources = dataSources.filter(ds => ds.visible !== false && !ds.disabled && ds.sref);
+    const appSources = dataSources.filter((ds) => ds.visible !== false && !ds.disabled && ds.sref);
     const allCategories = navigationCategoryRegistry.getAll();
-    const categories = allCategories.map(c => appSources.filter(as => as.category === c.key));
+    const categories = allCategories.map((c) => appSources.filter((as) => as.category === c.key));
     const uncategorizedSources = appSources.filter(
-      as => !as.category || !find(allCategories, c => c.key == as.category),
+      (as) => !as.category || !find(allCategories, (c) => c.key == as.category),
     );
     categories.push(uncategorizedSources);
     return categories;
@@ -69,13 +69,13 @@ export const ApplicationNavigation = ({ app }: IApplicationNavigationProps) => {
         <span className="application-name text-semibold heading-2 sp-margin-m-left">{app.name}</span>
       </h3>
       {navSections
-        .filter(section => section.length)
+        .filter((section) => section.length)
         .map((section, i) => (
           <NavSection key={`section-${i}`} dataSources={section} app={app} />
         ))}
       <div className="nav-section clickable">
         <div className="page-category flex-container-h middle text-semibold" onClick={pageApplicationOwner}>
-          <div className="nav-row-item sp-margin-xs-right">
+          <div className="nav-row-item sp-margin-s-right">
             {!isExpanded ? (
               <Tooltip value="Page App Owner" placement="right">
                 <div>

diff --git a/app/scripts/modules/core/src/application/nav/NavItem.spec.tsx b/app/scripts/modules/core/src/application/nav/NavItem.spec.tsx
@@ -23,9 +23,8 @@ describe('NavItem', () => {
         <NavItem app={app} dataSource={dataSource} isActive={false} />
       </RecoilRoot>,
     );
-    const nodes = wrapper.childAt(1).children();
-    const icon = nodes.childAt(1).children();
-    expect(icon.find('svg').length).toEqual(1);
+    const nodes = wrapper.children();
+    expect(nodes.find('svg').length).toEqual(1);
   });
 
   it('should render a placeholder when there is icon', () => {
@@ -37,9 +36,8 @@ describe('NavItem', () => {
         <NavItem app={app} dataSource={dataSource} isActive={false} />
       </RecoilRoot>,
     );
-    const nodes = wrapper.childAt(1).children();
-    const icon = nodes.childAt(1).children();
-    expect(icon.find('svg').length).toEqual(0);
+    const nodes = wrapper.children();
+    expect(nodes.find('svg').length).toEqual(0);
   });
 
   it('should render running tasks badge', () => {
@@ -59,11 +57,11 @@ describe('NavItem', () => {
         <NavItem app={app} dataSource={dataSource} isActive={false} />
       </RecoilRoot>,
     );
-    const nodes = wrapper.childAt(1).children();
+    const nodes = wrapper.children();
     expect(nodes.find('.badge-running-count').length).toBe(1);
     expect(nodes.find('.badge-none').length).toBe(0);
 
-    const text = nodes.childAt(0).getDOMNode();
+    const text = nodes.find('.badge-running-count').getDOMNode();
     expect(text.textContent).toBe('2');
   });
 
@@ -77,11 +75,11 @@ describe('NavItem', () => {
         <NavItem app={app} dataSource={dataSource} isActive={false} />
       </RecoilRoot>,
     );
-    const nodes = wrapper.childAt(1).children();
+    const nodes = wrapper.children();
     expect(nodes.find('.badge-running-count').length).toBe(0);
     expect(nodes.find('.badge-none').length).toBe(1);
 
-    const text = nodes.childAt(0).getDOMNode();
+    const text = nodes.find('.badge-none').getDOMNode();
     expect(text.textContent).toBe('');
   });
 
@@ -95,11 +93,11 @@ describe('NavItem', () => {
         <NavItem app={app} dataSource={dataSource} isActive={false} />
       </RecoilRoot>,
     );
-    const nodes = wrapper.childAt(1).children();
+    const nodes = wrapper.children();
     expect(nodes.find('.badge-running-count').length).toBe(0);
     expect(nodes.find('.badge-none').length).toBe(1);
 
-    const text = nodes.childAt(0).getDOMNode();
+    const text = nodes.find('.badge-none').getDOMNode();
     expect(text.textContent).toBe('');
 
     const updatedApp = buildApp<IPipeline>(mockPipelineDataSourceConfig);
@@ -118,11 +116,11 @@ describe('NavItem', () => {
     wrapper.setProps({ children: <NavItem app={updatedApp} dataSource={dataSource} isActive={false} /> });
     wrapper.update();
 
-    const newNodes = wrapper.childAt(1).children();
+    const newNodes = wrapper.children();
     expect(newNodes.find('.badge-running-count').length).toBe(1);
     expect(newNodes.find('.badge-none').length).toBe(0);
 
-    const newText = nodes.childAt(0).getDOMNode();
+    const newText = newNodes.find('.badge-running-count').getDOMNode();
     expect(newText.textContent).toBe('2');
   });
 
@@ -134,7 +132,7 @@ describe('NavItem', () => {
         <NavItem app={app} dataSource={dataSource} isActive={false} />
       </RecoilRoot>,
     );
-    const nodes = wrapper.childAt(1).children();
+    const nodes = wrapper.children();
     const tags: IEntityTags[] = nodes.find('DataSourceNotifications').prop('tags');
     expect(tags.length).toEqual(0);
 
@@ -143,10 +141,7 @@ describe('NavItem', () => {
     wrapper.setProps({ children: <NavItem app={app} dataSource={dataSource} isActive={false} /> });
     wrapper.update();
 
-    const newTags: IEntityTags[] = wrapper
-      .children()
-      .find('DataSourceNotifications')
-      .prop('tags');
+    const newTags: IEntityTags[] = wrapper.children().find('DataSourceNotifications').prop('tags');
     expect(newTags.length).toEqual(1);
   });
 });
diff --git a/app/scripts/modules/core/src/application/nav/NavItem.tsx b/app/scripts/modules/core/src/application/nav/NavItem.tsx
@@ -29,15 +29,15 @@ export const NavItem = ({ app, dataSource, isActive }: INavItemProps) => {
   const badgeClassNames = runningCount ? 'badge-running-count' : 'badge-none';
 
   return (
-    <div className="nav-category flex-container-h middle sp-padding-s-yaxis">
-      <div className={badgeClassNames}>{runningCount > 0 ? runningCount : ''}</div>
-      <div className="nav-row-item">
+    <>
+      <span className={badgeClassNames}>{runningCount > 0 ? runningCount : ''}</span>
+      <span className="nav-row-item">
         {iconName &&
           (!isExpanded ? (
             <Tooltip value={dataSource.label} placement="right">
-              <div>
+              <span>
                 <Icon className="nav-icon" name={iconName} size="medium" color={isActive ? 'primary' : 'accent'} />
-              </div>
+              </span>
             </Tooltip>
           ) : (
             <Icon
@@ -47,9 +47,9 @@ export const NavItem = ({ app, dataSource, isActive }: INavItemProps) => {
               color={isActive ? 'primary' : 'accent'}
             />
           ))}
-      </div>
-      <div className="nav-row-item nav-name">{' ' + dataSource.label}</div>
+      </span>
+      <span className="nav-row-item nav-name">{' ' + dataSource.label}</span>
       <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
@@ -15,7 +15,7 @@ export const NavRoute = ({ app, dataSource }: INavRouteProps) => {
   const isActive = useIsActive(dataSource.activeState);
 
   return (
-    <a {...sref} className={isActive ? 'active' : ''}>
+    <a {...sref} className={`nav-category flex-container-h middle sp-padding-s-yaxis${isActive ? ' active' : ''}`}>
       <NavItem app={app} dataSource={dataSource} isActive={isActive} />
     </a>
   );