Add analytics link to publisher UI

Author: tharikaGitHub

features/apimgt/org.wso2.carbon.apimgt.publisher.feature/src/main/resources/publisher/source/src/app/components/Base/Header/navbar/GlobalNavLink.jsx

@@ -98,7 +98,7 @@ const styles = (theme) => ({
  */
 function GlobalNavLinks(props) {
     const {
-        classes, active, title, children, to, type, icon,
+        classes, active, title, children, to, type, icon, isExternalLink,
     } = props;
     const theme = useTheme();
     let tooltipTitle = title;
@@ -110,8 +110,8 @@ function GlobalNavLinks(props) {
     return (
         <Link
             underline='none'
-            component={RouterLink}
-            to={to}
+            component={!isExternalLink && RouterLink}
+            to={!isExternalLink && to}
         >
             <Tooltip
                 classes={{ arrow: classes.arrow, tooltip: classes.tooltip }}

features/apimgt/org.wso2.carbon.apimgt.publisher.feature/src/main/resources/publisher/source/src/app/components/Base/Header/navbar/GlobalNavLinks.jsx

@@ -18,6 +18,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Box from '@material-ui/core/Box';
+import LaunchIcon from '@material-ui/icons/Launch';
+import { useTheme } from '@material-ui/styles';
 import { FormattedMessage } from 'react-intl';
 import AuthManager from 'AppData/AuthManager';
 import ScopesIcon from '@material-ui/icons/VpnKey';
@@ -29,6 +31,11 @@ const useStyles = makeStyles((theme) => ({
     scopeIcon: {
         color: theme.palette.background.paper,
     },
+    externalLinkIcon: {
+        marginLeft: theme.spacing(1),
+        marginTop: theme.spacing(0.5),
+        marginBottom: theme.spacing(-1),
+    },
 }));
 
 
@@ -42,6 +49,9 @@ function GlobalNavLinks(props) {
     const publisherUser = !AuthManager.isNotPublisher();
     const classes = useStyles();
     const { selected } = props;
+    const theme = useTheme();
+    const analyticsMenuEnabled = theme.custom.leftMenuAnalytics.enable;
+    const analyticsMenuLink = theme.custom.leftMenuAnalytics.link;
     return (
         <Box mt={10}>
             <GlobalNavLink
@@ -89,6 +99,25 @@ function GlobalNavLinks(props) {
             >
                 <FormattedMessage id='Base.Header.navbar.GlobalNavBar.scopes' defaultMessage='Scopes' />
             </GlobalNavLink>
+            {analyticsMenuEnabled && (
+                <a href={analyticsMenuLink} target='_blank' rel='noreferrer'>
+                    <GlobalNavLink
+                        isExternalLink
+                        type='analytics'
+                        title='Analytics'
+                    >
+                        <div style={{ flexDirection: 'row', display: 'flex' }}>
+                            <FormattedMessage
+                                id='Base.Header.navbar.GlobalNavBar.analytics'
+                                defaultMessage='Analytics'
+                            />
+                            <div className={classes.externalLinkIcon}>
+                                <LaunchIcon style={{ fontSize: 15 }} />
+                            </div>
+                        </div>
+                    </GlobalNavLink>
+                </a>
+            )}
         </Box>
     );
 }

features/apimgt/org.wso2.carbon.apimgt.publisher.feature/src/main/resources/publisher/source/src/app/components/Shared/CustomIcon.jsx

@@ -313,6 +313,45 @@ export default function CustomIcon(props) {
 
             </svg>
         );
+    } else if (icon === 'analytics') {
+        return (
+            <svg
+                width={width}
+                height={height}
+                className={className}
+                stroke={strokeColor}
+                viewBox='0 0 18 18'
+                version='1.1'
+                xmlns='http://www.w3.org/2000/svg'
+            >
+                <g id='API' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd' opacity='1'>
+                    <g
+                        id='API-UI-kit'
+                        transform='translate(-74.000000, -2031.000000)'
+                        fill={strokeColor}
+                        fillRule='nonzero'
+                    >
+                        <g id='Icon/Feedback' transform='translate(74.000000, 2031.000000)'>
+                            <path
+                                d={'M8.66176471,2.55 L8.66176471,9.38823529 L15.5,9.38823529 L15.5,10.0481286'
+                                + ' L15.499,10.05 L15.5,10.05 C15.5,14.1921356 12.1421356,17.55 8,17.55'
+                                + ' C3.85786438,17.55 0.5,14.1921356 0.5,10.05 C0.5,5.98908272'
+                                + ' 3.72747441,2.68198248 7.75726895,2.55385357 L8,2.55 L8,2.554 L8.00903915,2.55'
+                                + ' L8.66176471,2.55 Z M7.33796089,3.90859481 C4.23810015,4.23892283'
+                                + ' 1.82352941,6.86248481 1.82352941,10.05 C1.82352941,13.4611705 4.58882949,16.2264706'
+                                + ' 8,16.2264706 C11.1875152,16.2264706 13.8110772,13.8118998 14.1414052,10.7120391'
+                                + ' L7.33823529,10.7117647 L7.33796089,3.90859481 Z M10.0010048,0.558320951'
+                                + ' C13.895699,1.01522273 16.9853252,4.10513282 17.4417922,7.99996001 L10,8'
+                                + ' L10.0002117,1 L10.001,0.999320951 L10.0010048,0.558320951 Z M11.356084,2.40639903'
+                                + ' L11.3542172,6.64487537 L15.5937793,6.64441498 C14.8896237,4.67352548'
+                                + ' 13.3269046,3.11069949 11.356084,2.40639903 Z'}
+                                id='Combined-Shape'
+                            />
+                        </g>
+                    </g>
+                </g>
+            </svg>
+        );
     }
     return null;
 }

features/apimgt/org.wso2.carbon.apimgt.publisher.feature/src/main/resources/publisher/source/src/app/data/defaultTheme.js

@@ -127,6 +127,10 @@ export default {
         leftMenuIconSize: 20,
         leftMenuIconMainSize: 52,
         leftMenuTextStyle: 'capitalize',
+        leftMenuAnalytics: {
+            enable: true,
+            link: 'http://analytics.choreo.dev/setup',
+        },
         resourceChipColors: { // https://github.com/swagger-api/swagger-ui/blob/master/src/style/_variables.scss#L45-L52
             get: '#61affe',
             post: '#49cc90',