feat(common): add some step content when empty

ui/src/modules/common/components/Button.tsx

@@ -181,6 +181,7 @@ type ButtonProps = {
   style?: any;
   id?: string;
   uppercase?: boolean;
+  target?: string;
 };
 
 export default class Button extends React.Component<ButtonProps> {

ui/src/modules/common/components/empty/EmptyContent.tsx

@@ -0,0 +1,65 @@
+import Button from 'modules/common/components/Button';
+import { __ } from 'modules/common/utils';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import Icon from '../Icon';
+import { ITEM_COLORS } from './constants';
+import { Action, Container, ItemContent, Items } from './styles';
+
+type Props = {
+	content: any;
+	vertical?: boolean;
+	maxItemWidth?: string;
+};
+
+function EmptyContent({ content, vertical, maxItemWidth }: Props) {
+	const { steps, title, description, url, urlText } = content;
+
+	const renderButton = (buttonUrl: string, text: string, isOutside: boolean, target: string) => {
+		if(!buttonUrl) {
+			return null;
+		}
+
+		const buttonText = text || __('Learn More');
+
+		if(isOutside) {
+			return (
+				<Button uppercase={false} href={buttonUrl} target={target}>
+					{buttonText}
+				</Button>
+			);
+		}
+
+		return (
+			<Button uppercase={false}>
+				<Link to={buttonUrl}>{buttonText}</Link>
+			</Button>
+		);
+	}
+
+  return (
+    <Container>
+			<h2>{title}</h2>
+			<p>{description} {url && <Link to={url}>{urlText}</Link>}</p>
+			<Items vertical={vertical}>
+				{steps.map((step, index) => (
+					<ItemContent 
+						key={step.title + index}
+						color={ITEM_COLORS[index]}
+						vertical={vertical}
+						max={maxItemWidth}
+					>
+						{step.icon ? <Icon size={16} icon={step.icon} /> : <i>{index + 1}</i>}
+						<h4>{step.title}</h4>
+						<p>{step.description}</p>
+						<Action>
+							{renderButton(step.url, step.urlText, step.isOutside, step.target)}
+						</Action>
+					</ItemContent>
+				))}
+			</Items>
+		</Container>
+  );
+}
+
+export default EmptyContent;

ui/src/modules/common/components/empty/constants.ts

@@ -0,0 +1,3 @@
+export const ITEM_COLORS = [
+  "#3bc5cb", "#65b657", "#f9b920", "#2649f2", "#e64b4b", "#5b48a2"
+];

ui/src/modules/common/components/empty/styles.ts

@@ -0,0 +1,104 @@
+import { darken, rgba } from 'modules/common/styles/color';
+import styled from 'styled-components';
+import styledTS from 'styled-components-ts';
+import { colors } from '../../styles';
+
+const Container = styled.div`
+  display: flex;
+  min-height: 100%;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 40px;
+	background: ${colors.bgLight};
+	flex-direction: column;
+
+	h2 {
+		margin: 0px 0 10px;
+		font-weight: 700;
+		text-align: center;
+	}
+
+	> p {
+		font-size: 16px;
+		text-align: center;
+		color: ${colors.colorCoreGray};
+		max-width: 65%;
+
+		@media (max-width: 1170px) {
+			max-width: 100%;
+		}
+	}
+`;
+
+const Items = styledTS<{ vertical?: boolean }>(styled.div)`
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: ${props => props.vertical ? 'column' : 'row'};
+`;
+
+const Action = styled.div`
+	margin-top: auto;
+
+	button, a {
+		&:active, &:focus {
+			box-shadow: none;
+		}
+	}
+`;
+
+
+const ItemContent = styledTS<{ color: string, vertical?: boolean; max?:string }>(styled.div)`
+	background: ${props => rgba(props.color, 0.2)};
+	padding: 25px 30px;
+	border-radius: 5px;
+	margin: 10px;
+	min-width: 220px;
+	max-width: ${props => props.vertical ? '420px' : props.max};
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	border: 1px solid transparent;
+	position: relative;
+	transition: background 0.3s ease;
+
+	h4 {
+		margin: 20px 0 10px;
+		font-size: 16px;
+		font-weight: 700;
+		line-height: 20px;
+	}
+
+	${Action} > button, ${Action} > a {
+		background: ${props => props.color};
+		
+		&:hover {
+			background: ${props => darken(props.color, 15)};
+		}
+	}
+
+	p {
+		margin: 0 0 20px;
+	}
+
+	&:hover {
+		background: ${props => rgba(props.color, 0.3)};
+		border-color: ${props => props.color};
+	}
+	
+	> i {
+		line-height: 32px;
+		background: ${colors.colorWhite};
+		width: 32px;
+		text-align: center;
+		box-shadow: 0 0 6px 1px rgba(0,0,0,0.08);
+		border-radius: 16px;
+		font-weight: 800;
+		display: block;
+		font-style: normal;
+	}
+`;
+
+export { Container, Items, Action, ItemContent };
+

ui/src/modules/knowledgeBase/components/article/ArticleRow.tsx

@@ -37,7 +37,7 @@ const ArticleRow = (props: Props) => {
 
   const renderReactions = () => {
     const reactions = Object.entries(props.article.reactionCounts || {});
-
+    console.log(props.article);
     return reactions.map(([key, value]) => (
       <ReactionCount key={key}>
         <img src={key} alt="reaction" /> {value}

ui/src/modules/segments/components/SegmentsList.tsx

@@ -1,11 +1,14 @@
 import ActionButtons from 'modules/common/components/ActionButtons';
 import Button from 'modules/common/components/Button';
+import DataWithLoader from 'modules/common/components/DataWithLoader';
+import EmptyContent from 'modules/common/components/empty/EmptyContent';
 import Label from 'modules/common/components/Label';
 import Table from 'modules/common/components/table';
 import Tip from 'modules/common/components/Tip';
 import { Title } from 'modules/common/styles/main';
 import { __ } from 'modules/common/utils';
 import Wrapper from 'modules/layout/components/Wrapper';
+import { EMPTY_SEGMENT_CONTENT } from 'modules/settings/constants';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { ISegment } from '../types';
@@ -14,6 +17,7 @@ import Sidebar from './Sidebar';
 type Props = {
   contentType?: string;
   segments: ISegment[];
+  loading: boolean;
   removeSegment: (segmentId: string) => void;
 };
 
@@ -39,17 +43,7 @@ class SegmentsList extends React.Component<Props> {
     );
   }
 
-  renderContent() {
-    const { segments } = this.props;
-
-    const parentSegments: ISegment[] = [];
-
-    segments.forEach(segment => {
-      if (!segment.subOf) {
-        parentSegments.push(segment, ...segment.getSubSegments);
-      }
-    });
-
+  renderContent(segments) {
     return (
       <Table>
         <thead>
@@ -61,7 +55,7 @@ class SegmentsList extends React.Component<Props> {
           </tr>
         </thead>
         <tbody>
-          {parentSegments.map(segment => (
+          {segments.map(segment => (
             <tr key={segment._id}>
               <td>
                 {segment.subOf ? '\u00a0\u00a0' : null} {segment.name}
@@ -79,7 +73,14 @@ class SegmentsList extends React.Component<Props> {
   }
 
   render() {
-    const { contentType } = this.props;
+    const { contentType, loading, segments } = this.props;
+    const parentSegments: ISegment[] = [];
+
+    segments.forEach(segment => {
+      if (!segment.subOf) {
+        parentSegments.push(segment, ...segment.getSubSegments);
+      }
+    });
 
     const breadcrumb = [
       { title: __('Settings'), link: '/settings' },
@@ -108,7 +109,14 @@ class SegmentsList extends React.Component<Props> {
           <Wrapper.Header title={__('Segments')} breadcrumb={breadcrumb} />
         }
         actionBar={actionBar}
-        content={this.renderContent()}
+        content={
+          <DataWithLoader
+            data={this.renderContent(parentSegments)}
+            loading={loading}
+            count={parentSegments.length}
+            emptyContent={<EmptyContent content={EMPTY_SEGMENT_CONTENT} maxItemWidth="330px" />}
+          />
+        }
         leftSidebar={<Sidebar />}
       />
     );

ui/src/modules/segments/components/common/Form.tsx

@@ -1,5 +1,5 @@
 import Button from 'modules/common/components/Button';
-import EmptyState from 'modules/common/components/EmptyState';
+import EmptyContent from 'modules/common/components/empty/EmptyContent';
 import FormControl from 'modules/common/components/form/Control';
 import CommonForm from 'modules/common/components/form/Form';
 import FormGroup from 'modules/common/components/form/Group';
@@ -17,6 +17,7 @@ import {
   ISegmentCondition,
   ISegmentWithConditionDoc
 } from 'modules/segments/types';
+import { EMPTY_NEW_SEGMENT_CONTENT } from 'modules/settings/constants';
 import { ColorPick, ColorPicker, ExpandWrapper } from 'modules/settings/styles';
 import React from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
@@ -216,10 +217,7 @@ class Form extends React.Component<Props, State> {
 
     if (conditions.length === 0) {
       return (
-        <EmptyState
-          text="There aren’t any filters at the moment."
-          image="/images/actions/14.svg"
-        />
+        <EmptyContent content={EMPTY_NEW_SEGMENT_CONTENT} />
       );
     }
 

ui/src/modules/segments/containers/SegmentsList.tsx

@@ -38,6 +38,7 @@ const SegmentListContainer = (props: FinalProps) => {
 
   const updatedProps = {
     ...props,
+    loading: segmentsQuery.loading,
     segments: segmentsQuery.segments || [],
     removeSegment
   };