added icons to navigation

scm-ui-components/packages/ui-components/src/navigation/NavAction.js

@@ -2,16 +2,23 @@
 import React from "react";
 
 type Props = {
+  icon?: string,
   label: string,
   action: () => void
 };
 
 class NavAction extends React.Component<Props> {
   render() {
-    const { label, action } = this.props;
+    const { label, icon, action } = this.props;
+
+    let showIcon = null;
+    if (icon) {
+      showIcon = (<><i className={icon}></i>{" "}</>);
+    }
+
     return (
       <li>
-        <a onClick={action}>{label}</a>
+        <a onClick={action}>{showIcon}{label}</a>
       </li>
     );
   }

scm-ui-components/packages/ui-components/src/navigation/NavLink.js

@@ -6,6 +6,7 @@ import {Link, Route} from "react-router-dom";
 
 type Props = {
   to: string,
+  icon?: string,
   label: string,
   activeOnlyWhenExact?: boolean,
   activeWhenMatch?: (route: any) => boolean
@@ -23,10 +24,17 @@ class NavLink extends React.Component<Props> {
   }
 
   renderLink = (route: any) => {
-    const { to, label } = this.props;
+    const { to, icon, label } = this.props;
+
+    let showIcon = null;
+    if (icon) {
+      showIcon = (<><i className={icon}></i>{" "}</>);
+    }
+
     return (
       <li>
         <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
+          {showIcon}
           {label}
         </Link>
       </li>
@@ -35,6 +43,7 @@ class NavLink extends React.Component<Props> {
 
   render() {
     const { to, activeOnlyWhenExact } = this.props;
+
     return (
       <Route path={to} exact={activeOnlyWhenExact} children={this.renderLink} />
     );

scm-ui/src/groups/components/navLinks/DeleteGroupNavLink.js

@@ -49,7 +49,7 @@ export class DeleteGroupNavLink extends React.Component<Props> {
     if (!this.isDeletable()) {
       return null;
     }
-    return <NavAction label={t("delete-group-button.label")} action={action} />;
+    return <NavAction icon="fas fa-times" label={t("delete-group-button.label")} action={action} />;
   }
 }
 

scm-ui/src/groups/components/navLinks/EditGroupNavLink.js

@@ -18,7 +18,7 @@ class EditGroupNavLink extends React.Component<Props, State> {
     if (!this.isEditable()) {
       return null;
     }
-    return <NavLink label={t("edit-group-button.label")} to={editUrl} />;
+    return <NavLink icon="fas fa-cog" label={t("edit-group-button.label")} to={editUrl} />;
   }
 
   isEditable = () => {

scm-ui/src/groups/containers/SingleGroup.js

@@ -109,6 +109,7 @@ class SingleGroup extends React.Component<Props> {
                 <NavLink
                   to={`${url}`}
                   label={t("single-group.information-label")}
+                  icon={"fas fa-info-circle"}
                 />
               </Section>
               <Section label={t("single-group.actions-label")}>
@@ -117,7 +118,7 @@ class SingleGroup extends React.Component<Props> {
                   deleteGroup={this.deleteGroup}
                 />
                 <EditGroupNavLink group={group} editUrl={`${url}/edit`} />
-                <NavLink to="/groups" label={t("single-group.back-label")} />
+                <NavLink to="/groups" label={t("single-group.back-label")} icon={"fas fa-undo-alt"} />
               </Section>
             </Navigation>
           </div>

scm-ui/src/repos/components/DeleteNavAction.js

@@ -51,7 +51,7 @@ class DeleteNavAction extends React.Component<Props> {
     if (!this.isDeletable()) {
       return null;
     }
-    return <NavAction label={t("delete-nav-action.label")} action={action} />;
+    return <NavAction icon="fas fa-times" label={t("delete-nav-action.label")} action={action} />;
   }
 }
 

scm-ui/src/users/components/navLinks/DeleteUserNavLink.js

@@ -49,7 +49,7 @@ class DeleteUserNavLink extends React.Component<Props> {
     if (!this.isDeletable()) {
       return null;
     }
-    return <NavAction label={t("delete-user-button.label")} action={action} />;
+    return <NavAction icon="fas fa-times" label={t("delete-user-button.label")} action={action} />;
   }
 }
 

scm-ui/src/users/components/navLinks/EditUserNavLink.js

@@ -17,7 +17,7 @@ class EditUserNavLink extends React.Component<Props> {
     if (!this.isEditable()) {
       return null;
     }
-    return <NavLink label={t("edit-user-button.label")} to={editUrl} />;
+    return <NavLink icon="fas fa-cog" label={t("edit-user-button.label")} to={editUrl} />;
   }
 
   isEditable = () => {

scm-ui/src/users/containers/SingleUser.js

@@ -111,6 +111,7 @@ class SingleUser extends React.Component<Props> {
             <Navigation>
               <Section label={t("single-user.navigation-label")}>
                 <NavLink
+                  icon="fas fa-info-circle"
                   to={`${url}`}
                   label={t("single-user.information-label")}
                 />