change(ui) - no content icon

2022-04-12 16:49:45 +02:00 · 2022-04-12 16:49:45 +02:00 · 53063f7847
commit 53063f7847
parent 61a4561db2
17 changed files with 20 additions and 25 deletions
--- a/frontend/app/components/Alerts/Notifications/Notifications.js
+++ b/frontend/app/components/Alerts/Notifications/Notifications.js
@ -113,7 +113,7 @@ class Notifications extends React.Component {
              <NoContent
                title=""
                subtext="There are no alerts to show."
-                icon="exclamation-circle"
+                animatedIcon="no-results"
                show={ !loading && notifications.size === 0 }
                size="small"
              >
--- a/frontend/app/components/Announcements/Announcements.js
+++ b/frontend/app/components/Announcements/Announcements.js
@ -71,7 +71,7 @@ class Announcements extends React.Component {
              <NoContent
                title=""
                subtext="There are no announcements to show."
-                icon="exclamation-circle"
+                animatedIcon="no-results"
                show={ !loading && announcements.size === 0 }
                size="small"
              >
--- a/frontend/app/components/BugFinder/SessionFlowList/SessionFlowList.js
+++ b/frontend/app/components/BugFinder/SessionFlowList/SessionFlowList.js
@ -11,7 +11,7 @@ function SessionFlowList({ activeTab, savedFilters, loading }) {
      <NoContent
        title="No Flows Found!"
        subtext="Please try changing your search parameters."
-        icon="exclamation-circle"
+        animatedIcon="no-results"
        show={ !loading && savedFilters.size === 0 }
      >
        <Loader loading={ loading }>
--- a/frontend/app/components/BugFinder/SessionList/SessionList.js
+++ b/frontend/app/components/BugFinder/SessionList/SessionList.js
@ -97,7 +97,7 @@ export default class SessionList extends React.PureComponent {
      <NoContent
        title={this.getNoContentMessage(activeTab)}
        // subtext="Please try changing your search parameters."
-        icon="exclamation-circle"
+        animatedIcon="no-results"
        show={ !loading && list.size === 0}
        subtext={
          <div>
--- a/frontend/app/components/Dashboard/Dashboard.js
+++ b/frontend/app/components/Dashboard/Dashboard.js
@ -212,8 +212,7 @@ export default class Dashboard extends React.PureComponent {
                show={ noWidgets }
                title="You haven't added any insights widgets!"
                subtext="Add new to keep track of Processed Sessions, Application Activity, Errors and lot more."
-                icon
-                empty
+                animatedIcon="empty-state"
              >
                <WidgetSection
                  title="Overview"
--- a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
@ -23,7 +23,7 @@ function MetricsList(props: Props) {
    const lenth = list.length;

    return useObserver(() => (
-        <NoContent show={lenth === 0} icon="exclamation-circle">
+        <NoContent show={lenth === 0} animatedIcon="no-results">
            <div className="mt-3 border rounded bg-white">
                <div className="grid grid-cols-12 p-3 font-medium">
                    <div className="col-span-3">Title</div>
--- a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
@ -23,7 +23,7 @@ function WidgetSessions(props: Props) {
                <NoContent
                    title="No recordings found"
                    show={widget.sessions.length === 0}
-                    icon="exclamation-circle"
+                    animatedIcon="no-results"
                >
                    {widget.sessions.map((session: any) => (
                        <SessionItem key={ session.sessionId } session={ session }  />
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
@ -61,10 +61,6 @@ function WidgetWrapper(props: Props) {
        }
    }

-    const editHandler = () => {
-        console.log('clicked', widget.metricId);
-    }
-
    const onChartClick = () => {
        if (!isWidget || widget.metricType === 'predefined') return;
        props.history.push(withSiteId(dashboardMetricDetails(dashboardId, widget.metricId),siteId));
@ -88,14 +84,13 @@ function WidgetWrapper(props: Props) {
            <div
                className="p-3 cursor-move flex items-center justify-between"
            >
-                
                <h3 className="capitalize">{widget.name}</h3>
                {isWidget && (
                    <div>
                        <ItemMenu
                            items={[
                                {
-                                    text: 'Edit', onClick: editHandler,
+                                    text: 'Edit', onClick: onChartClick,
                                },
                                {
                                    text: 'Hide from view',
--- a/frontend/app/components/Errors/Error/ErrorInfo.js
+++ b/frontend/app/components/Errors/Error/ErrorInfo.js
@ -67,7 +67,7 @@ export default class ErrorInfo extends React.PureComponent {
 			<NoContent
        title="No Error Found!"
        subtext="Please try to find existing one."
-        icon="exclamation-circle"
+        animatedIcon="no-results"
        show={ !loading && errorIdInStore == null }
      >
 				<div className="w-9/12 mb-4 flex justify-between">
--- a/frontend/app/components/Funnels/FunnelIssues/FunnelIssues.js
+++ b/frontend/app/components/Funnels/FunnelIssues/FunnelIssues.js
@ -44,7 +44,7 @@ function FunnelIssues(props) {
      <NoContent
        title="No Issues Found!"
        subtext="Please try changing your search parameters."
-        icon="exclamation-circle"
+        animatedIcon="no-results"
        show={ !loading && filteredList.size === 0}
      >        
        { filteredList.take(displayedCount).map(issue => (
--- a/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js
+++ b/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js
@ -30,7 +30,7 @@ function FunnelSessionList(props) {
      <NoContent
        title="No recordings found!"
        subtext="Please try changing your search parameters."
-        icon="exclamation-circle"
+        animatedIcon="no-results"
        show={ list.size === 0}
      >
        { list.take(displayedCount).map(session => (
--- a/frontend/app/components/Session_/Fetch/FetchDetails.js
+++ b/frontend/app/components/Session_/Fetch/FetchDetails.js
@ -44,7 +44,7 @@ export default class FetchDetails extends React.PureComponent {
            title="Body is Empty."
            size="small"
            show={ !payload }
-            icon="exclamation-circle"
+            animatedIcon="no-results"
          >
            <div>
              <div className="mt-6">
@ -63,7 +63,7 @@ export default class FetchDetails extends React.PureComponent {
            title="Body is Empty."
            size="small"
            show={ !response }
-            icon="exclamation-circle"
+            animatedIcon="no-results"
          >
            <div>
              <div className="mt-6">
--- a/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx
+++ b/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx
@ -9,7 +9,7 @@ function Headers(props) {
        title="No data available."
        size="small"
        show={ !props.requestHeaders && !props.responseHeaders }
-        icon="exclamation-circle"
+        animatedIcon="no-results"
      >
        { props.requestHeaders && (
          <>
--- a/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx
+++ b/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx
@ -101,7 +101,7 @@ function SessionListModal(props: Props) {
                        <NoContent 
                            show={ !loading && (filteredSessions.length === 0 )}
                            title="No recordings found!"
-                            icon="exclamation-circle"
+                            animatedIcon="no-results"
                        >
                            { filteredSessions.map(session => <SessionItem key={ session.sessionId } session={ session } />) }
                        </NoContent> 
--- a/frontend/app/components/shared/ResultTimings/ResultTimings.js
+++ b/frontend/app/components/shared/ResultTimings/ResultTimings.js
@ -24,7 +24,7 @@ function ResultTimings({ duration, timing }) {
  return (
    <NoContent
      title="No Data!"
-      icon="exclamation-circle"
+      animatedIcon="no-results"
      show={ List.isList(timing)}
      size="small"
    >
--- a/frontend/app/components/ui/NoContent/NoContent.js
+++ b/frontend/app/components/ui/NoContent/NoContent.js
@ -4,6 +4,7 @@ import styles from './noContent.css';
 export default ({
  title = "No data available.",
  subtext,
+  animatedIcon = false,
  icon,
  iconSize = 100,
  size,
@ -16,7 +17,7 @@ export default ({
 <div className={ `${ styles.wrapper } ${ size && styles[ size ] }` } style={style}>
  {
    // icon && <div className={ empty ? styles.emptyIcon : styles.icon } />
-    icon && <Icon name={icon} size={iconSize} />
+    animatedIcon ? <div className={ styles[animatedIcon] } /> : (icon && <Icon name={icon} size={iconSize} />)
  }
  { title && <div className={ styles.title }>{ title }</div> }
  {
--- a/frontend/app/components/ui/NoContent/noContent.css
+++ b/frontend/app/components/ui/NoContent/noContent.css
@ -34,7 +34,7 @@
 }


-.icon {
+.no-results {
  display: block;
  margin: auto;
  background-image: svg-load(no-results.svg, fill=#CCC);
@ -46,7 +46,7 @@
  margin-bottom: 20px;
 }

-.emptyIcon {
+.empty-state {
  display: block;
  margin: auto;
  background-image: svg-load(empty-state.svg, fill=#CCC);