feat(knowledgeBase): add step content when empty

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

@@ -1,4 +1,6 @@
 import DataWithLoader from 'modules/common/components/DataWithLoader';
+import EmptyContent from 'modules/common/components/empty/EmptyContent';
+import { EMPTY_CONTENT_KNOWLEDGEBASE } from 'modules/settings/constants';
 import React from 'react';
 import { IArticle } from '../../types';
 import ArticleRow from './ArticleRow';
@@ -43,6 +45,7 @@ class ArticleList extends React.Component<Props> {
         count={articles.length}
         emptyText="Articles can address any number of issues your customers encounter. Types of knowledge articles can include solutions to common issues, product or feature documentation, FAQ's and much more."
         emptyImage="/images/actions/8.svg"
+        emptyContent={<EmptyContent content={EMPTY_CONTENT_KNOWLEDGEBASE} />}
         data={this.renderArticles()}
       />
     );

ui/src/modules/settings/constants.ts

@@ -124,6 +124,29 @@ export const EMPTY_CONTENT_ENGAGE = {
   ]
 };
 
+export const EMPTY_CONTENT_KNOWLEDGEBASE = {
+  title: "Getting Started with erxes Knowledgebase",
+  description: "Educate your customers and staff by creating help articles to reach higher levels of satisfaction.",
+  steps: [
+    {
+      title: "Create Brand",
+      description: "Make sure you’ve created your Brands",
+      url: "/settings/brands#showBrandAddModal=true",
+      urlText: "Create Brand"
+    },
+    {
+      title: "Add Knowledge base",
+      description: "Click on “Add Knowledgebase” to create one for a specific Brand",
+      url: "/knowledgeBase#showKBAddModal=true",
+      urlText: "Add Knowledge base"
+    },
+    {
+      title: "Add Category",
+      description: "Click on the settings button next to the knowledgebase you’ve just created. Click “Add Categories”. A good one to get started with would be “General"
+    }
+  ]
+};
+
 export const EMPTY_CONTENT_MESSENGER = {
   title: "Getting Started with erxes Messenger",
   description: "Learn how the erxes Messenger works and it is set up. It is used in the Team Inbox and Knowledgebase and Engage features uses Messenger.",