change(ui) - metric type icon in metric list

frontend/app/components/Client/ManageUsers/ManageUsers.js

@@ -24,7 +24,7 @@ const LIMIT_WARNING = 'You have reached users limit.';
   errors: state.getIn([ 'members', 'saveRequest', 'errors' ]),
   loading: state.getIn([ 'members', 'loading' ]),
   saving: state.getIn([ 'members', 'saveRequest', 'loading' ]),
-  roles: state.getIn(['roles', 'list']).filter(r => !r.protected).map(r => ({ text: r.name, value: r.roleId })).toJS(),
+  roles: state.getIn(['roles', 'list']).filter(r => !r.protected).map(r => ({ label: r.name, value: r.roleId })).toJS(),
   isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee',
 }), {
   init,

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx

@@ -1,15 +1,13 @@
 import React, { useEffect } from 'react';
 import { Pagination, NoContent } from 'UI';
-import ErrorListItem from '../../../components/Errors/ErrorListItem';
+import ErrorListItem from 'App/components/Dashboard/components/Errors/ErrorListItem';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { useModal } from 'App/components/Modal';
-import ErrorDetailsModal from '../../../components/Errors/ErrorDetailsModal';
+import ErrorDetailsModal from 'App/components/Dashboard/components/Errors/ErrorDetailsModal';
 
-const PER_PAGE = 5;
 interface Props {
-    metric: any;
-    isTemplate?: boolean;
-    isEdit?: boolean;
+    metric: any,
+    isEdit: any,
     history: any,
     location: any,
 }
@@ -39,6 +37,7 @@ function CustomMetricTableErrors(props: RouteComponentProps<Props>) {
 
     return (
         <NoContent
+            title="No data available over the "
             show={!metric.data.errors || metric.data.errors.length === 0}
             size="small"
         >

frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, NoContent, Label, Link, Pagination } from 'UI';
+import { Icon, NoContent, Label, Link, Pagination, Popup } from 'UI';
 import { checkForRecent, formatDateTimeDefault, convertTimestampToUtcTimestamp } from 'App/date';
 import { getIcon } from 'react-toastify/dist/components';
 
@@ -24,11 +24,22 @@ function DashboardLink({ dashboards}: any) {
     );
 }
 
-function MetricListItem(props: Props) {
-    const { metric } = props;
+function MetricTypeIcon({ type }: any) {
+    const PopupWrapper = (props: any) => {
+        return (
+            <Popup
+                content={<div className="capitalize">{type}</div>}
+                position="top center"
+                on="hover"
+                hideOnScroll={true}
+            >
+                {props.children}
+            </Popup>
+        );
+    }
 
-    const getIcon = (metricType: string) => {
-        switch (metricType) {
+    const getIcon = () => {
+        switch (type) {
             case 'funnel':
                 return 'filter';
             case 'table':
@@ -37,13 +48,28 @@ function MetricListItem(props: Props) {
                 return 'bar-chart-line';
         }
     }
+
+    return (
+        <PopupWrapper>
+            <div className="w-8 h-8 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
+                <Icon name={getIcon()} size="14" color="tealx" />
+            </div>
+        </PopupWrapper>
+    )
+}
+
+function MetricListItem(props: Props) {
+    const { metric } = props;
+
+    
     return (
         <div className="grid grid-cols-12 p-3 border-t select-none">
             <div className="col-span-3 flex items-start">
                 <div className="flex items-center">
-                    <div className="w-8 h-8 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
+                    {/* <div className="w-8 h-8 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
                         <Icon name={getIcon(metric.metricType)} size="14" color="tealx"  />
-                    </div>
+                    </div> */}
+                    <MetricTypeIcon type={metric.metricType} />
                     <Link to={`/metrics/${metric.metricId}`} className="link capitalize-first">
                         {metric.name}
                     </Link>

frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx

@@ -146,7 +146,7 @@ function WidgetChart(props: Props) {
                 return (
                     <CustomMetricTableErrors
                         metric={metric}
-                        isTemplate={isTemplate}
+                        // isTemplate={isTemplate}
                         isEdit={!isWidget && !isTemplate}
                     />
                 )

frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx

@@ -74,7 +74,6 @@ function FunnelWidget(props: Props) {
                     <span className="text-xl mr-2">Affected users</span>
                     <div className="rounded px-2 py-1 bg-gray-lightest">
                         <span className="text-xl font-medium">{funnel.affectedUsers}</span>
-                        {/* <span className="text-sm">(12%)</span> */}
                     </div>
                 </div>
             </div>