fix review findings

scm-ui/ui-components/src/navigation/NavLink.tsx

@@ -28,15 +28,16 @@ import { RoutingProps } from "./RoutingProps";
 import { FC } from "react";
 import useMenuContext from "./MenuContext";
 import useActiveMatch from "./useActiveMatch";
+import {createAttributesForTesting} from "../devBuild";
 
 type Props = RoutingProps & {
   label: string;
   title?: string;
   icon?: string;
-  className?: string;
+  testId?: string;
 };
 
-const NavLink: FC<Props> = ({ to, activeWhenMatch, activeOnlyWhenExact, icon, label, title, className }) => {
+const NavLink: FC<Props> = ({ to, activeWhenMatch, activeOnlyWhenExact, icon, label, title, testId }) => {
   const active = useActiveMatch({ to, activeWhenMatch, activeOnlyWhenExact });
 
   const context = useMenuContext();
@@ -53,7 +54,11 @@ const NavLink: FC<Props> = ({ to, activeWhenMatch, activeOnlyWhenExact, icon, la
 
   return (
     <li title={collapsed ? title : undefined}>
-      <Link className={classNames(active ? "is-active" : "", collapsed ? "has-text-centered" : "", className)} to={to}>
+      <Link
+        className={classNames(active ? "is-active" : "", collapsed ? "has-text-centered" : "")}
+        to={to}
+        {...createAttributesForTesting(testId)}
+      >
         {showIcon}
         {collapsed ? null : label}
       </Link>

scm-ui/ui-components/src/navigation/PrimaryNavigation.tsx

@@ -40,7 +40,7 @@ class PrimaryNavigation extends React.Component<Props> {
     return (to: string, match: string, label: string, linkName: string) => {
       const link = links[linkName];
       if (link) {
-        const navigationItem = <PrimaryNavigationLink className={t(label)} to={to} match={match} label={t(label)} key={linkName} />;
+        const navigationItem = <PrimaryNavigationLink testId={label.replace(".", "-")} to={to} match={match} label={t(label)} key={linkName} />;
         navigationItems.push(navigationItem);
       }
     };

scm-ui/ui-components/src/navigation/PrimaryNavigationLink.tsx

@@ -23,30 +23,39 @@
  */
 import * as React from "react";
 import { Route, Link } from "react-router-dom";
-import classNames from "classnames";
+import { createAttributesForTesting } from "../devBuild";
 
 type Props = {
   to: string;
   label: string;
   match?: string;
   activeOnlyWhenExact?: boolean;
-  className?: string;
+  testId?: string;
 };
 
 class PrimaryNavigationLink extends React.Component<Props> {
   renderLink = (route: any) => {
-    const { to, label, className } = this.props;
+    const { to, label, testId } = this.props;
     return (
-      <li className={classNames(route.match ? "is-active" : "", className)}>
-        <Link to={to}>{label}</Link>
+      <li className={route.match ? "is-active" : ""}>
+        <Link to={to} {...createAttributesForTesting(testId)}>
+          {label}
+        </Link>
       </li>
     );
   };
 
   render() {
-    const { to, match, activeOnlyWhenExact } = this.props;
+    const { to, match, activeOnlyWhenExact, testId } = this.props;
     const path = match ? match : to;
-    return <Route path={path} exact={activeOnlyWhenExact} children={this.renderLink} />;
+    return (
+      <Route
+        path={path}
+        exact={activeOnlyWhenExact}
+        children={this.renderLink}
+        {...createAttributesForTesting(testId)}
+      />
+    );
   }
 }
 

scm-ui/ui-components/src/navigation/SubNavigation.tsx

@@ -27,15 +27,25 @@ import classNames from "classnames";
 import useMenuContext from "./MenuContext";
 import { RoutingProps } from "./RoutingProps";
 import useActiveMatch from "./useActiveMatch";
+import { createAttributesForTesting } from "../devBuild";
 
 type Props = RoutingProps & {
   label: string;
   title?: string;
   icon?: string;
-  className?: string;
+  testId?: string;
 };
 
-const SubNavigation: FC<Props> = ({ to, activeOnlyWhenExact, activeWhenMatch, icon, title, label, children, className }) => {
+const SubNavigation: FC<Props> = ({
+  to,
+  activeOnlyWhenExact,
+  activeWhenMatch,
+  icon,
+  title,
+  label,
+  children,
+  testId
+}) => {
   const context = useMenuContext();
   const collapsed = context.isCollapsed();
 
@@ -61,7 +71,11 @@ const SubNavigation: FC<Props> = ({ to, activeOnlyWhenExact, activeWhenMatch, ic
 
   return (
     <li title={collapsed ? title : undefined}>
-      <Link className={classNames(active ? "is-active" : "", collapsed ? "has-text-centered" : "", className)} to={to}>
+      <Link
+        className={classNames(active ? "is-active" : "", collapsed ? "has-text-centered" : "")}
+        to={to}
+        {...createAttributesForTesting(testId)}
+      >
         <i className={classNames(defaultIcon, "fa-fw")} /> {collapsed ? "" : label}
       </Link>
       {childrenList}