Admin: Improve Bots page, add columns (#2794)

fossasia · Aug 23, 2019 · 4699287 · 4699287
1 parent 3968387
commit 4699287
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 59 deletions.
diff --git a/src/components/Admin/ListBots/constants.js b/src/components/Admin/ListBots/constants.js
@@ -3,21 +3,35 @@ export const BOT = [
     title: 'Name',
     field: 'name',
     cellStyle: {
-      width: '30%',
+      width: '20%',
+    },
+  },
+  {
+    title: 'Group',
+    field: 'group',
+    cellStyle: {
+      width: '20%',
     },
   },
   {
     title: 'Language',
     field: 'language',
     cellStyle: {
-      width: '30%',
+      width: '15%',
     },
   },
   {
-    title: 'Group',
-    field: 'group',
+    title: 'Default Skills',
+    field: 'displaySkills',
+    cellStyle: {
+      width: '15%',
+    },
+  },
+  {
+    title: 'Bot Site',
+    field: 'botSite',
     cellStyle: {
-      width: '35%',
+      width: '20%',
     },
   },
 ];
diff --git a/src/components/Admin/ListBots/index.js b/src/components/Admin/ListBots/index.js
@@ -5,10 +5,12 @@ import PropTypes from 'prop-types';
 import uiActions from '../../../redux/actions/ui';
 import { Link } from 'react-router-dom';
 import MaterialTable from 'material-table';
-import { fetchBots } from '../../../apis/index';
 import { BOT } from './constants';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import { Container } from '../AdminStyles';
 import { ActionSpan, ActionSeparator } from '../../shared/TableActionStyles';
-import { deleteChatBot } from '../../../apis/index';
+import { deleteChatBot, fetchBots } from '../../../apis/index';
 
 class ListBots extends React.Component {
   state = {
@@ -18,6 +20,7 @@ class ListBots extends React.Component {
     language: '',
     name: '',
     uuid: '',
+    value: 0,
   };
 
   componentDidMount() {
@@ -28,7 +31,31 @@ class ListBots extends React.Component {
     fetchBots()
       .then(payload => {
         const { chatbots } = payload;
-        this.setState({ loadingBots: false, bots: chatbots });
+        let bots = [];
+        chatbots.forEach(chatBot => {
+          const { configure } = chatBot;
+          chatBot.displaySkills = configure.enableDefaultSkills
+            ? 'true'
+            : 'false';
+          let allowedSites =
+            configure.allowBotOnlyOnOwnSites && configure.allowedSites;
+          let botSites = [];
+          if (allowedSites) {
+            allowedSites = allowedSites.split(',');
+            allowedSites.forEach(site => {
+              botSites.push(
+                <li>
+                  <a href={site} target="_blank" rel="noopener noreferrer">
+                    {site}
+                  </a>
+                </li>,
+              );
+            });
+          }
+          chatBot.botSite = botSites.length > 0 ? botSites : '-';
+          bots.push(chatBot);
+        });
+        this.setState({ loadingBots: false, bots });
       })
       .catch(error => {
         console.log(error);
@@ -73,59 +100,66 @@ class ListBots extends React.Component {
     });
   };
 
+  handleTabChange = (event, value) => {
+    this.setState({ value });
+  };
+
   render() {
-    const { loadingBots, bots } = this.state;
+    const { loadingBots, bots, value } = this.state;
     return (
-      <MaterialTable
-        isLoading={loadingBots}
-        options={{
-          actionsColumnIndex: -1,
-          pageSize: 10,
-        }}
-        columns={BOT}
-        data={bots}
-        title=""
-        style={{
-          padding: '1rem',
-          margin: '2rem',
-        }}
-        actions={[
-          {
-            onDelete: (event, rowData) => {
-              this.handleDelete(
-                rowData.name,
-                rowData.language,
-                rowData.group,
-                rowData.key,
-              );
-            },
-          },
-        ]}
-        components={{
-          Action: props => (
-            <React.Fragment>
-              <Link
-                to={
-                  '/botWizard?name=' +
-                  props.data.name +
-                  '&language=' +
-                  props.data.language +
-                  '&group=' +
-                  props.data.group
-                }
-              >
-                <ActionSpan>View</ActionSpan>
-              </Link>
-              <ActionSeparator> | </ActionSeparator>
-              <ActionSpan
-                onClick={event => props.action.onDelete(event, props.data)}
-              >
-                Delete
-              </ActionSpan>
-            </React.Fragment>
-          ),
-        }}
-      />
+      <Container>
+        <Tabs onChange={this.handleTabChange} value={value}>
+          <Tab label="Active" />
+        </Tabs>
+        {value === 0 && (
+          <MaterialTable
+            isLoading={loadingBots}
+            options={{
+              actionsColumnIndex: -1,
+              pageSize: 10,
+            }}
+            columns={BOT}
+            data={bots}
+            title=""
+            actions={[
+              {
+                onDelete: (event, rowData) => {
+                  this.handleDelete(
+                    rowData.name,
+                    rowData.language,
+                    rowData.group,
+                    rowData.key,
+                  );
+                },
+              },
+            ]}
+            components={{
+              Action: props => (
+                <React.Fragment>
+                  <Link
+                    to={
+                      '/botWizard?name=' +
+                      props.data.name +
+                      '&language=' +
+                      props.data.language +
+                      '&group=' +
+                      props.data.group
+                    }
+                  >
+                    <ActionSpan>View</ActionSpan>
+                  </Link>
+                  <ActionSeparator> | </ActionSeparator>
+                  <ActionSpan
+                    onClick={event => props.action.onDelete(event, props.data)}
+                  >
+                    Delete
+                  </ActionSpan>
+                </React.Fragment>
+              ),
+            }}
+          />
+        )}
+      </Container>
     );
   }
 }