From 334eb69edd8f5910d329f9f2e6299bc7dece767a Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 8 Aug 2022 14:26:21 +0200
Subject: [PATCH] change(ui) - slack listing and add button

---
 .../components/Client/Integrations/SlackForm.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Client/Integrations/SlackForm.tsx b/frontend/app/components/Client/Integrations/SlackForm.tsx
index e04c02de6..7d0cdc610 100644
--- a/frontend/app/components/Client/Integrations/SlackForm.tsx
+++ b/frontend/app/components/Client/Integrations/SlackForm.tsx
@@ -1,14 +1,16 @@
 import React, { useEffect } from 'react';
 import SlackChannelList from './SlackChannelList/SlackChannelList';
-import { fetchList } from 'Duck/integrations/slack';
+import { fetchList, init } from 'Duck/integrations/slack';
 import { connect } from 'react-redux';
 import SlackAddForm from './SlackAddForm';
 import { useModal } from 'App/components/Modal';
+import { Button } from 'UI';
 
 interface Props {
     onEdit: (integration: any) => void;
     istance: any;
     fetchList: any;
+    init: any;
 }
 const SlackForm = (props: Props) => {
     const { istance } = props;
@@ -19,6 +21,11 @@ const SlackForm = (props: Props) => {
         setActive(true);
     };
 
+    const onNew = () => {
+        setActive(true);
+        props.init({});
+    }
+
     useEffect(() => {
         props.fetchList();
     }, []);
@@ -31,7 +38,10 @@ const SlackForm = (props: Props) => {
                 </div>
             )}
             <div className="shrink-0" style={{ width: '350px' }}>
-                <h3 className="p-5 text-2xl">Slack</h3>
+                <div className="flex items-center p-5">
+                    <h3 className="text-2xl mr-3">Slack</h3>
+                    <Button rounded={true} icon="plus" variant="outline" onClick={onNew}/>
+                </div>
                 <SlackChannelList onEdit={onEdit} />
             </div>
         </div>
@@ -44,5 +54,5 @@ export default connect(
     (state: any) => ({
         istance: state.getIn(['slack', 'instance']),
     }),
-    { fetchList }
+    { fetchList, init }
 )(SlackForm);