change(ui) - slack listing and add button

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);