@bigbinary/neeto-slack-frontend 2.2.6 → 2.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +483 -162
- package/dist/index.cjs.js +25 -23
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +17 -15
- package/dist/index.js.map +1 -1
- package/package.json +68 -65
- package/types.d.ts +66 -1
package/README.md
CHANGED
|
@@ -1,82 +1,40 @@
|
|
|
1
1
|
# neeto-slack-nano
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
[Building and releasing](./docs/building-and-releasing.md)
|
|
3
|
+
The `neeto-slack-nano` facilitates the management of slack integration within neeto applictions. The nano exports the `@bigbinary/neeto-slack-frontend` NPM package and `neeto-slack-engine` Rails engine for development.
|
|
5
4
|
|
|
6
|
-
##
|
|
7
|
-
|
|
8
|
-
| Projects | Integrated |
|
|
9
|
-
| ------------ | :----------------: |
|
|
10
|
-
| neetoForm | :white_check_mark: |
|
|
11
|
-
| neetoChat | :white_check_mark: |
|
|
12
|
-
| neetoDesk | :white_check_mark: |
|
|
13
|
-
| neetoInvoice | :white_check_mark: |
|
|
14
|
-
| neetoMonitor | :white_check_mark: |
|
|
15
|
-
| neetoBugtrap | :white_check_mark: |
|
|
16
|
-
| neetoCal | :white_check_mark: |
|
|
17
|
-
|
|
18
|
-
## @bigbinary/neeto-slack-frontend
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
UI for slack integration for all neeto products.
|
|
24
|
-
|
|
25
|
-
### Installation
|
|
26
|
-
|
|
27
|
-
```bash
|
|
28
|
-
yarn add @bigbinary/neeto-slack-frontend
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
### Usage
|
|
32
|
-
|
|
33
|
-
Available components:
|
|
34
|
-
|
|
35
|
-
- [Connect](./docs/connect/README.md)
|
|
36
|
-
- [Configure](./docs/configure/README.md)
|
|
37
|
-
- [Finish](./docs/finish/README.md)
|
|
38
|
-
- [Settings](./docs/settings/README.md)
|
|
39
|
-
|
|
40
|
-
Hook:
|
|
41
|
-
|
|
42
|
-
- [useFetchSlackIntegrationsStatus](./docs/useFetchSlackIntegrationsStatus/README.md)
|
|
43
|
-
|
|
44
|
-
### Development
|
|
5
|
+
## Contents
|
|
45
6
|
|
|
46
|
-
|
|
7
|
+
1. [Development with Host Application](#development-with-host-application)
|
|
8
|
+
- [Engine](#engine)
|
|
9
|
+
- [Installation](#installation)
|
|
10
|
+
- [Frontend package](#frontend-package)
|
|
11
|
+
- [Installation](#installation-1)
|
|
12
|
+
- [Instructions for development](#instructions-for-development)
|
|
13
|
+
- [Components](#components)
|
|
14
|
+
- [Connect](#1-connect)
|
|
15
|
+
- [Configure](#2-configure)
|
|
16
|
+
- [Finish](#3-finish)
|
|
17
|
+
- [Settings](#4-settings)
|
|
18
|
+
- [Hooks](#hooks)
|
|
19
|
+
- [useFetchSlackIntegrationsStatus](#1-usefetchslackintegrationsstatus)
|
|
20
|
+
2. [Instructions for Publishing](#instructions-for-publishing)
|
|
47
21
|
|
|
48
|
-
|
|
49
|
-
yarn install
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
#### Using host application
|
|
22
|
+
## Development with Host Application
|
|
53
23
|
|
|
54
|
-
|
|
55
|
-
2. Run `yarn install` to download the dependencies and setup the development
|
|
56
|
-
environment.
|
|
57
|
-
3. Have a host application ready.
|
|
58
|
-
4. Run `yarn build --watch` to automatically transpile code as you save the
|
|
59
|
-
file. You can omit the `--watch` flag if you want to run the build only once.
|
|
60
|
-
5. In a different terminal, run `yalc publish` to publish the
|
|
61
|
-
neeto-slack-frontend to the local yalc store.
|
|
62
|
-
6. Run `yalc add @bigbinary/neeto-slack-frontend` to install the
|
|
63
|
-
neeto-slack-frontend to the host application.
|
|
64
|
-
7. After making necessary changes to `neeto-slack-frontend`, run `yalc push` to
|
|
65
|
-
push the changes to the host application (assuming that you are in watch mode
|
|
66
|
-
and the changes are bundled automatically). Restart webpack-dev-server in
|
|
67
|
-
host if changes are not applied.
|
|
68
|
-
8. Video explanation on how to use yalc: https://vimeo.com/722958162/9e931b640c
|
|
24
|
+
### Engine
|
|
69
25
|
|
|
70
|
-
|
|
26
|
+
The Engine is used to support the slack integration within neeto applications.
|
|
71
27
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
### Installation
|
|
28
|
+
#### Installation
|
|
75
29
|
|
|
76
30
|
1. Add this line to your application's Gemfile:
|
|
77
31
|
|
|
78
32
|
```ruby
|
|
79
|
-
|
|
33
|
+
source "NEETO_GEM_SERVER_URL" do
|
|
34
|
+
# ..existing gems
|
|
35
|
+
|
|
36
|
+
gem 'neeto-slack-engine'
|
|
37
|
+
end
|
|
80
38
|
```
|
|
81
39
|
|
|
82
40
|
2. And then execute:
|
|
@@ -85,9 +43,16 @@ To manage slack integration on neeto applications.
|
|
|
85
43
|
bundle install
|
|
86
44
|
```
|
|
87
45
|
|
|
88
|
-
3.
|
|
46
|
+
3. Add this line to your application's `config/routes.rb` file (replace `at` to
|
|
47
|
+
your desired route):
|
|
89
48
|
|
|
90
|
-
|
|
49
|
+
```ruby
|
|
50
|
+
mount NeetoSlackEngine::Engine => "/neeto_slack_engine"
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
4. Install the migrations
|
|
54
|
+
|
|
55
|
+
Add a migration to add slack_chat_api_key to Organization of host app if
|
|
91
56
|
it doesn't exist already. Then run
|
|
92
57
|
|
|
93
58
|
```ruby
|
|
@@ -105,53 +70,48 @@ To manage slack integration on neeto applications.
|
|
|
105
70
|
bin/rails db:migrate
|
|
106
71
|
```
|
|
107
72
|
|
|
108
|
-
|
|
73
|
+
5. Configure model to add below association to the integrable class
|
|
109
74
|
|
|
110
75
|
```ruby
|
|
111
76
|
has_one :slack_team, as: :integrable, class_name: "NeetoSlackEngine::SlackTeam", dependent: :destroy
|
|
112
77
|
```
|
|
113
78
|
|
|
114
|
-
|
|
115
|
-
values
|
|
116
|
-
|
|
117
|
-
Under .env
|
|
118
|
-
|
|
119
|
-
```yaml
|
|
120
|
-
SLACK_CLIENT_ID=#Value from Slack App console at
|
|
121
|
-
https://api.slack.com/apps/APP_ID/general SLACK_CLIENT_SECRET=#Value from
|
|
122
|
-
Slack App console at https://api.slack.com/apps/APP_ID/general
|
|
123
|
-
SLACK_CLIENT_SIGNING_SECRET=#Value from Slack App console at
|
|
124
|
-
https://api.slack.com/apps/APP_ID/general ATTR_ENCRYPTION_KEY=#Random varying
|
|
125
|
-
char. key with min. 32 chars. SLACK_REDIRECT_PATH=#Path controller if
|
|
126
|
-
Callbacks controller of application is to be used instead of Engine's
|
|
127
|
-
SLACK_HOST_URL=#Host url if different than application host url or in
|
|
128
|
-
development for use of Ngrok
|
|
129
|
-
```
|
|
79
|
+
6. Configure the following `Environment Variables` and `Secrets` with suitable values
|
|
130
80
|
|
|
131
|
-
|
|
81
|
+
- Under `.env` file:
|
|
132
82
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
attr_encrypted:
|
|
136
|
-
encryption_key: <%= ENV['ATTR_ENCRYPTION_KEY'] %>
|
|
137
|
-
slack:
|
|
138
|
-
client_id: "<%= ENV['SLACK_CLIENT_ID'] %>"
|
|
139
|
-
client_secret: <%= ENV['SLACK_CLIENT_SECRET'] %>
|
|
140
|
-
client_signing_secret: <%= ENV['SLACK_CLIENT_SIGNING_SECRET'] %>
|
|
141
|
-
```
|
|
83
|
+
```yaml
|
|
84
|
+
SLACK_CLIENT_ID=# Value from Slack App console at https://api.slack.com/apps/APP_ID/general
|
|
142
85
|
|
|
143
|
-
|
|
144
|
-
your desired route):
|
|
86
|
+
SLACK_CLIENT_SECRET=# Valuefrom Slack App console at https://api.slack.com/apps/APP_ID/general
|
|
145
87
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
88
|
+
SLACK_CLIENT_SIGNING_SECRET=# Value from Slack App console at https://api.slack.com/apps/APP_ID/general
|
|
89
|
+
|
|
90
|
+
ATTR_ENCRYPTION_KEY=# Random varying char. key with min. 32 chars.
|
|
91
|
+
|
|
92
|
+
SLACK_REDIRECT_PATH=#Path controller if Callbacks controller of the application is to be used instead of the one in Engine
|
|
93
|
+
|
|
94
|
+
SLACK_HOST_URL=# Host url if different than application host URL or in development for use of Ngrok
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
- Under `secrets.yml` file:
|
|
98
|
+
|
|
99
|
+
```yaml
|
|
100
|
+
application_name: # Application name
|
|
101
|
+
attr_encrypted:
|
|
102
|
+
encryption_key: <%= ENV['ATTR_ENCRYPTION_KEY'] %>
|
|
103
|
+
slack:
|
|
104
|
+
client_id: "<%= ENV['SLACK_CLIENT_ID'] %>"
|
|
105
|
+
client_secret: <%= ENV['SLACK_CLIENT_SECRET'] %>
|
|
106
|
+
client_signing_secret: <%= ENV['SLACK_CLIENT_SIGNING_SECRET'] %>
|
|
107
|
+
```
|
|
149
108
|
|
|
150
109
|
7. Slack Integration supports customizing scopes required for host app on usage
|
|
151
110
|
basis, for adding/removing the scope file with name `neeto_slack_engine.yml`
|
|
152
111
|
can be added under host app `config` directory. In case the file is not
|
|
153
112
|
present the Engine fallbacks to set of default scopes defined under Engine
|
|
154
113
|
config. File scope structure
|
|
114
|
+
|
|
155
115
|
```yml
|
|
156
116
|
scopes:
|
|
157
117
|
v1:
|
|
@@ -165,82 +125,443 @@ To manage slack integration on neeto applications.
|
|
|
165
125
|
user:
|
|
166
126
|
...
|
|
167
127
|
```
|
|
128
|
+
|
|
168
129
|
Ref. -
|
|
169
|
-
https://github.com/bigbinary/neeto-
|
|
130
|
+
<https://github.com/bigbinary/neeto-form-web/blob/0213546cf8a0f4e73e2e5950ceec493d7ad628ea/config/neeto_slack_engine.yml>
|
|
170
131
|
|
|
171
|
-
|
|
132
|
+
Ref. -
|
|
133
|
+
<https://github.com/bigbinary/neeto-slack-engine/blob/e229fec17fd1b7e8596ca1ca55bd2926133fb88f/test/dummy/config/neeto_slack_engine.yml>
|
|
172
134
|
|
|
173
|
-
|
|
174
|
-
copy of neetoIntegrationsSlack's engine):
|
|
135
|
+
### Frontend package
|
|
175
136
|
|
|
176
|
-
|
|
177
|
-
gem 'neeto-slack-engine', path: '../neeto-slack-nano'
|
|
178
|
-
```
|
|
137
|
+
The package exports components and hooks to manage slack integration within neeto applications.
|
|
179
138
|
|
|
180
|
-
|
|
139
|
+
#### Installation
|
|
181
140
|
|
|
182
|
-
|
|
183
|
-
bundle install
|
|
184
|
-
```
|
|
141
|
+
Install the latest `NeetoSlackNano` package using the below command:
|
|
185
142
|
|
|
186
|
-
|
|
143
|
+
```shell
|
|
144
|
+
yarn add @bigbinary/neeto-slack-frontend
|
|
145
|
+
```
|
|
187
146
|
|
|
188
|
-
|
|
189
|
-
app.
|
|
147
|
+
#### Instructions for development
|
|
190
148
|
|
|
191
|
-
|
|
192
|
-
# frozen_string_literal: true
|
|
149
|
+
Check the [Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) for step-by-step instructions to develop the frontend package.
|
|
193
150
|
|
|
194
|
-
|
|
195
|
-
def change
|
|
196
|
-
add_column :organizations, :slack_chat_api_key, :string
|
|
197
|
-
end
|
|
198
|
-
end
|
|
199
|
-
```
|
|
151
|
+
### Components
|
|
200
152
|
|
|
201
|
-
|
|
202
|
-
bin/rails neeto_integrations_slack_engine:install:migrations
|
|
203
|
-
bin/rails db:migrate
|
|
204
|
-
```
|
|
153
|
+
#### 1. `Connect`
|
|
205
154
|
|
|
206
|
-
|
|
155
|
+
|
|
207
156
|
|
|
208
|
-
|
|
209
|
-
has_one :slack_team, as: :integrable, class_name: "NeetoSlackEngine::SlackTeam", dependent: :destroy
|
|
210
|
-
```
|
|
157
|
+
##### Props
|
|
211
158
|
|
|
212
|
-
|
|
213
|
-
values
|
|
214
|
-
|
|
215
|
-
Under `.env.development` or `.env` in application
|
|
216
|
-
|
|
217
|
-
```yaml
|
|
218
|
-
SLACK_CLIENT_ID=#Value from Slack App console at
|
|
219
|
-
https://api.slack.com/apps/APP_ID/general SLACK_CLIENT_SECRET=#Value from
|
|
220
|
-
Slack App console at https://api.slack.com/apps/APP_ID/general
|
|
221
|
-
SLACK_CLIENT_SIGNING_SECRET=#Value from Slack App console at
|
|
222
|
-
https://api.slack.com/apps/APP_ID/general ATTR_ENCRYPTION_KEY=#Random varying
|
|
223
|
-
char. key with min. 32 chars. SLACK_REDIRECT_PATH=#Path controller if
|
|
224
|
-
Callbacks controller of application is to be used instead of Engine's
|
|
225
|
-
SLACK_HOST_URL=#Host url if different than application host url or in
|
|
226
|
-
development for use of Ngrok INTEGRATIONS_SLACK_ENGINE_DEVELOPMENT=true
|
|
227
|
-
```
|
|
159
|
+
1. `handleRedirectToSlack`: Function to handle the redirect to the slack OAuth url
|
|
228
160
|
|
|
229
|
-
|
|
161
|
+
2. `isAuthorizeUrlFetching`: Boolean which handles the loading state of Slack Authorize button
|
|
230
162
|
|
|
231
|
-
|
|
232
|
-
application_name: #Application name
|
|
233
|
-
attr_encrypted:
|
|
234
|
-
encryption_key: <%= ENV['ATTR_ENCRYPTION_KEY'] %>
|
|
235
|
-
slack:
|
|
236
|
-
client_id: "<%= ENV['SLACK_CLIENT_ID'] %>"
|
|
237
|
-
client_secret: <%= ENV['SLACK_CLIENT_SECRET'] %>
|
|
238
|
-
client_signing_secret: <%= ENV['SLACK_CLIENT_SIGNING_SECRET'] %>
|
|
239
|
-
```
|
|
163
|
+
##### Usage
|
|
240
164
|
|
|
241
|
-
|
|
242
|
-
|
|
165
|
+
```js
|
|
166
|
+
const handleRedirect = () => {
|
|
167
|
+
window.location.assign(slackAuthorizationUrl);
|
|
168
|
+
};
|
|
243
169
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
170
|
+
return(
|
|
171
|
+
<Connect
|
|
172
|
+
handleRedirectToSlack={handleRedirect}
|
|
173
|
+
isAuthorizeUrlFetching={isAuthorizeUrlFetching}
|
|
174
|
+
/>;
|
|
175
|
+
);
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
References:
|
|
179
|
+
|
|
180
|
+
- [neetoForm](https://github.com/bigbinary/neeto-form-web/blob/b53d660223d124feb87c4a98e64e6b42f8ee1388/app/javascript/src/components/Form/Settings/Integrations/Slack/StepsModal.jsx#L89)
|
|
181
|
+
- [neetoChat](https://github.com/bigbinary/neeto-chat-web/blob/baa524d4c48f7acd7d6a4f0c868f21fae3e8ac12/app/javascript/src/components/Settings/Integrations/Slack/index.jsx#L70)
|
|
182
|
+
- [neetoDesk](https://github.com/bigbinary/neeto-desk-web/blob/0dd6852ae342414f346bbb6c01a3f9521fd0a9e7/app/javascript/src/components/Settings/Integrations/Slack/Connect.jsx#L27)
|
|
183
|
+
|
|
184
|
+
#### 2. `Configure`
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
##### Props
|
|
189
|
+
|
|
190
|
+
1. `children`: Extra form fields to be included in the Configure page.
|
|
191
|
+
|
|
192
|
+
2. `teamName`: A string representing the Slack team name to be displayed.
|
|
193
|
+
|
|
194
|
+
3. `initialFormValues`: An object containing the initial values for the formik form fields.
|
|
195
|
+
|
|
196
|
+
4. `handleSubmit`: A function to handle the form submit.
|
|
197
|
+
|
|
198
|
+
5. `isSubmitting`: A boolean to handle the loading state of the form.
|
|
199
|
+
|
|
200
|
+
6. `className`: A string to add custom styles to the `Configure` component.
|
|
201
|
+
|
|
202
|
+
7. `validationSchema`: A yup validation schema to validate the form fields.
|
|
203
|
+
>>Note: No need to include selectedChannel validation. Also no need to wrap validationSchema in yup.object().shape({..}))
|
|
204
|
+
|
|
205
|
+
8. `channelRefreshHandler`: A function to invalidate queries for refreshing Slack Channel list.
|
|
206
|
+
|
|
207
|
+
9. `channelSelectLabel`: A string to customize the label for Slack Channel select field.
|
|
208
|
+
|
|
209
|
+
10. `slackUrl`: Slack workspace url to be displayed.
|
|
210
|
+
|
|
211
|
+
##### Usage
|
|
212
|
+
|
|
213
|
+
- Without Children
|
|
214
|
+
|
|
215
|
+
```js
|
|
216
|
+
<Configure
|
|
217
|
+
handleSubmit={handleSubmit}
|
|
218
|
+
isSubmitting={isSubmitting}
|
|
219
|
+
teamName={teamName}
|
|
220
|
+
initialFormValues={{
|
|
221
|
+
selectedChannel: findBy({ value: selectedChannelId }, channelOptions),
|
|
222
|
+
channels: channelOptions,
|
|
223
|
+
}}
|
|
224
|
+
/>
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
References:
|
|
228
|
+
|
|
229
|
+
- [neetoForm](https://github.com/bigbinary/neeto-form-web/blob/b53d660223d124feb87c4a98e64e6b42f8ee1388/app/javascript/src/components/Form/Settings/Integrations/Slack/Steps/Configure.jsx#L19)
|
|
230
|
+
|
|
231
|
+
- With Children
|
|
232
|
+
|
|
233
|
+
```js
|
|
234
|
+
const SLACK_SETTING_FORM_VALIDATION_SCHEMA = {
|
|
235
|
+
slackEvents: yup.object().nullable().shape({
|
|
236
|
+
faultOccurred: yup.boolean(),
|
|
237
|
+
faultResolved: yup.boolean(),
|
|
238
|
+
faultUnresolved: yup.boolean(),
|
|
239
|
+
}),
|
|
240
|
+
};
|
|
241
|
+
|
|
242
|
+
// ...
|
|
243
|
+
|
|
244
|
+
<Configure
|
|
245
|
+
handleSubmit={handleSubmit}
|
|
246
|
+
isSubmitting={isSubmitting}
|
|
247
|
+
teamName={teamName}
|
|
248
|
+
validationSchema={SLACK_SETTING_FORM_VALIDATION_SCHEMA}
|
|
249
|
+
initialFormValues={{
|
|
250
|
+
selectedChannel: findBy({ value: notificationChannelId }, channelOptions),
|
|
251
|
+
channels: channelOptions,
|
|
252
|
+
slackEvents: slackEvents,
|
|
253
|
+
}}
|
|
254
|
+
>
|
|
255
|
+
<Checkbox
|
|
256
|
+
className="neeto-ui-mt-5"
|
|
257
|
+
label="Fault Resolved"
|
|
258
|
+
name="slackEvents.faultResolved"
|
|
259
|
+
/>
|
|
260
|
+
<Checkbox
|
|
261
|
+
className="neeto-ui-mt-5"
|
|
262
|
+
label="Fault Unresolved"
|
|
263
|
+
name="slackEvents.faultUnresolved"
|
|
264
|
+
/>
|
|
265
|
+
<Checkbox
|
|
266
|
+
className="neeto-ui-my-5"
|
|
267
|
+
label="Fault Occurred"
|
|
268
|
+
name="slackEvents.faultOccurred"
|
|
269
|
+
/>
|
|
270
|
+
</Configure>;
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
Notes:
|
|
274
|
+
|
|
275
|
+
- You can provide the validation schema for the child form fields.
|
|
276
|
+
|
|
277
|
+
- Accessing formik props
|
|
278
|
+
|
|
279
|
+
```js
|
|
280
|
+
<Configure
|
|
281
|
+
handleSubmit={handleSubmit}
|
|
282
|
+
initialFormValues={initialFormValues}
|
|
283
|
+
isSubmitting={isSubmitting}
|
|
284
|
+
teamName={teamName}
|
|
285
|
+
>
|
|
286
|
+
{({ setFieldValue }) => (
|
|
287
|
+
<div className="mb-4 w-full">
|
|
288
|
+
<TimePicker
|
|
289
|
+
use12Hours
|
|
290
|
+
className="text-base font-semibold text-gray-800"
|
|
291
|
+
format="h A"
|
|
292
|
+
interval={{ hourStep: 1, minuteStep: 60, secondStep: 60 }}
|
|
293
|
+
label="Schedule time"
|
|
294
|
+
name="notifyTime"
|
|
295
|
+
type="time"
|
|
296
|
+
onChange={notifyTime => setFieldValue("notifyTime", notifyTime)}
|
|
297
|
+
/>
|
|
298
|
+
</div>
|
|
299
|
+
)}
|
|
300
|
+
</Configure>
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
References:
|
|
304
|
+
|
|
305
|
+
- [neetoInvoice](https://github.com/bigbinary/neeto-invoice-web/pull/3403/files#diff-92b6ca3b40c8f180f2585ba83e1fafda5b31e406298cae613b8c988ff7739e58R32)
|
|
306
|
+
- [neetoChat](https://github.com/bigbinary/neeto-chat-web/blob/baa524d4c48f7acd7d6a4f0c868f21fae3e8ac12/app/javascript/src/components/Settings/Integrations/Slack/Steps/Configure.jsx#L36)
|
|
307
|
+
|
|
308
|
+
#### 3. `Finish`
|
|
309
|
+
|
|
310
|
+
|
|
311
|
+
|
|
312
|
+
##### Props
|
|
313
|
+
|
|
314
|
+
1. `children`: Extra form fields to be included in the Finish page.
|
|
315
|
+
|
|
316
|
+
2. `secondaryButtonProps`: Props for the secondary button.
|
|
317
|
+
|
|
318
|
+
3. `buttonProps`: Props for the primary button.
|
|
319
|
+
|
|
320
|
+
3. `teamName`: A string representing the Slack team name to be displayed.
|
|
321
|
+
|
|
322
|
+
4. `fields`: An array of objects containing the fields to be displayed.
|
|
323
|
+
|
|
324
|
+
5. `onBack`: Function that handles redirect to Configure page.
|
|
325
|
+
|
|
326
|
+
6. `onSuccess`: Function that handles the success case. For example: if there is a demo step, then onSuccess would forward the user to the demo step
|
|
327
|
+
|
|
328
|
+
##### Usage
|
|
329
|
+
|
|
330
|
+
1. Without Children
|
|
331
|
+
|
|
332
|
+
```js
|
|
333
|
+
const selectedChannel = "General";
|
|
334
|
+
const { configuration } = useSlackApi();
|
|
335
|
+
|
|
336
|
+
return (
|
|
337
|
+
<Finish
|
|
338
|
+
selectedChannel={selectedChannel}
|
|
339
|
+
teamName={configuration.teamName}
|
|
340
|
+
fields={[
|
|
341
|
+
{
|
|
342
|
+
name: "Name",
|
|
343
|
+
value: configuration.name,
|
|
344
|
+
},
|
|
345
|
+
]}
|
|
346
|
+
secondaryButtonProps={{
|
|
347
|
+
label: "Edit",
|
|
348
|
+
onClick: () => setActiveTab("configure"),
|
|
349
|
+
}}
|
|
350
|
+
buttonProps={{ label: "Finish", onClick: onClose }}
|
|
351
|
+
/>
|
|
352
|
+
);
|
|
353
|
+
```
|
|
354
|
+
|
|
355
|
+
References:
|
|
356
|
+
|
|
357
|
+
- [neetoForm](https://github.com/bigbinary/neeto-form-web/blob/b53d660223d124feb87c4a98e64e6b42f8ee1388/app/javascript/src/components/Form/Settings/Integrations/Slack/StepsModal.jsx#L101)
|
|
358
|
+
- [neetoChat](https://github.com/bigbinary/neeto-chat-web/blob/baa524d4c48f7acd7d6a4f0c868f21fae3e8ac12/app/javascript/src/components/Settings/Integrations/Slack/index.jsx#L82)
|
|
359
|
+
|
|
360
|
+
2. With Children
|
|
361
|
+
|
|
362
|
+
```js
|
|
363
|
+
const selectedChannel = "General";
|
|
364
|
+
const { configuration } = useSlackApi();
|
|
365
|
+
|
|
366
|
+
return (
|
|
367
|
+
<Finish
|
|
368
|
+
selectedChannel={selectedChannel}
|
|
369
|
+
teamName={configuration.teamName}
|
|
370
|
+
fields={[
|
|
371
|
+
{
|
|
372
|
+
name: "Name",
|
|
373
|
+
value: configuration.name,
|
|
374
|
+
},
|
|
375
|
+
]}
|
|
376
|
+
secondaryButtonProps={{
|
|
377
|
+
label: "Edit",
|
|
378
|
+
onClick: () => setActiveTab("configure"),
|
|
379
|
+
}}
|
|
380
|
+
buttonProps={{ label: "Finish", onClick: onClose }}
|
|
381
|
+
>
|
|
382
|
+
<p className="neeto-ui-my-2 neeto-ui-text-info-800">
|
|
383
|
+
*You can update your info later from settings*
|
|
384
|
+
</p>
|
|
385
|
+
</Finish>
|
|
386
|
+
);
|
|
387
|
+
```
|
|
388
|
+
|
|
389
|
+
#### 4. `Settings`
|
|
390
|
+
|
|
391
|
+
|
|
392
|
+
|
|
393
|
+
##### Props
|
|
394
|
+
|
|
395
|
+
- `Settings` component:
|
|
396
|
+
|
|
397
|
+
1. `children`: Extra form fields to be included in the Settings page.
|
|
398
|
+
|
|
399
|
+
2. `teamName`: A string representing the Slack team name to be displayed.
|
|
400
|
+
|
|
401
|
+
3. `className`: A string to add custom styles to the `Settings` component.
|
|
402
|
+
|
|
403
|
+
4. `fields`: An array of objects containing the fields to be displayed.
|
|
404
|
+
|
|
405
|
+
5. `onEdit`: Function to open the `Pane` when the Edit button is clicked.
|
|
406
|
+
|
|
407
|
+
6. `slackUrl`: Slack workspace url to be displayed.
|
|
408
|
+
|
|
409
|
+
- `Settings.EditPane` component:
|
|
410
|
+
|
|
411
|
+
1. `children`: Extra form fields to be included in the EditPane.
|
|
412
|
+
|
|
413
|
+
2. `initialFormValues`: An object containing the initial values for the formik form fields.
|
|
414
|
+
> Include channels array & selectedChannel value
|
|
415
|
+
|
|
416
|
+
3. `handleSubmit`: A function to handle the form submission.
|
|
417
|
+
|
|
418
|
+
4. `isSubmitting`: A boolean to handle the submitting state of the form.
|
|
419
|
+
|
|
420
|
+
5. `className`: A string to add custom styles to the `Settings.EditPane` component.
|
|
421
|
+
|
|
422
|
+
6. `validationSchema`: A yup validation schema to validate the form fields.
|
|
423
|
+
> No need to include selectedChannel validation. Also no need to wrap validationSchema in yup.object().shape({..})
|
|
424
|
+
|
|
425
|
+
7. `onClose`: Function to close the `Pane` when the Close button is clicked.
|
|
426
|
+
|
|
427
|
+
8. `title`: A string to customize the title of the `Pane`.
|
|
428
|
+
|
|
429
|
+
9. `isPaneOpen`: A boolean to handle the open/close state of the `Pane`.
|
|
430
|
+
|
|
431
|
+
10. `channelRefreshHandler`: A function to invalidate queries for refreshing Slack Channel list.
|
|
432
|
+
|
|
433
|
+
11. `paneProps`: Pass down props to the neeto-ui pane
|
|
434
|
+
|
|
435
|
+
##### Usage
|
|
436
|
+
|
|
437
|
+
1. Basic
|
|
438
|
+
|
|
439
|
+
```js
|
|
440
|
+
const [isPaneOpen, setIsPaneOpen] = useState(false);
|
|
441
|
+
|
|
442
|
+
const SETTINGS_FORM_INITIAL_VALUES = {
|
|
443
|
+
channels: [
|
|
444
|
+
{ label: "general", value: "K87KJHKS987" },
|
|
445
|
+
{ label: "hq", value: "IJHKJ76889H" },
|
|
446
|
+
],
|
|
447
|
+
selectedChannel: { label: "general", value: "K87KJHKS987" },
|
|
448
|
+
updateType: "All conversation activity"
|
|
449
|
+
};
|
|
450
|
+
|
|
451
|
+
const { slack, handleSubmit, isSubmitting } = useSlackApi();
|
|
452
|
+
const SETTINGS_FORM_VALIDATION_SCHEMA = {
|
|
453
|
+
updateType: yup.string().required(),
|
|
454
|
+
};
|
|
455
|
+
|
|
456
|
+
return (
|
|
457
|
+
<Settings
|
|
458
|
+
teamName={slack.teamName}
|
|
459
|
+
className="neeto-ui-my-2"
|
|
460
|
+
fields={[
|
|
461
|
+
{
|
|
462
|
+
name: "Channel",
|
|
463
|
+
value: slack.selectedChannel
|
|
464
|
+
},
|
|
465
|
+
{
|
|
466
|
+
name; "Update Type",
|
|
467
|
+
value: slack.updateType
|
|
468
|
+
}
|
|
469
|
+
]}
|
|
470
|
+
onEdit={() => setIsPaneOpen(true)}
|
|
471
|
+
>
|
|
472
|
+
<Settings.EditPane
|
|
473
|
+
initialFormValues={SETTINGS_FORM_INITIAL_VALUES}
|
|
474
|
+
handleSubmit={handleSubmit}
|
|
475
|
+
isSubmitting={isSubmitting}
|
|
476
|
+
className="neeto-ui-my-2"
|
|
477
|
+
validationSchema={SETTINGS_FORM_VALIDATION_SCHEMA}
|
|
478
|
+
onClose={() => setIsPaneOpen(false)}
|
|
479
|
+
title="Edit slack integration"
|
|
480
|
+
isPaneOpen={isPaneOpen}
|
|
481
|
+
>
|
|
482
|
+
{(formikProps) => (
|
|
483
|
+
<Input name="UpdateType" value={formikProps.values.name} className="neeto-ui-my-2" />
|
|
484
|
+
)}
|
|
485
|
+
</Settings.EditPane>
|
|
486
|
+
</Settings>;
|
|
487
|
+
);
|
|
488
|
+
```
|
|
489
|
+
|
|
490
|
+
References:
|
|
491
|
+
|
|
492
|
+
- [neetoDesk](https://github.com/bigbinary/neeto-desk-web/blob/4da743947603e1f9890ae80bba8e7256c3918278/app/javascript/src/components/Settings/Integrations/Slack/Manage.jsx#L82)
|
|
493
|
+
|
|
494
|
+
2. Accessing formik props for child field elements
|
|
495
|
+
|
|
496
|
+
```js
|
|
497
|
+
<Settings teamName={teamName} onEdit={handleOpenPane} fields={fields}>
|
|
498
|
+
<Settings.EditPane>
|
|
499
|
+
{({ setFieldValue }) => (
|
|
500
|
+
<div className="mb-4 w-full">
|
|
501
|
+
<TimePicker
|
|
502
|
+
use12Hours
|
|
503
|
+
disabled={isDisabled}
|
|
504
|
+
className="text-base font-semibold text-gray-800"
|
|
505
|
+
format="h A"
|
|
506
|
+
interval={{ hourStep: 1, minuteStep: 60, secondStep: 60 }}
|
|
507
|
+
label="Schedule time"
|
|
508
|
+
name="notifyTime"
|
|
509
|
+
type="time"
|
|
510
|
+
onChange={notifyTime => setFieldValue("notifyTime", notifyTime)}
|
|
511
|
+
/>
|
|
512
|
+
</div>
|
|
513
|
+
)}
|
|
514
|
+
</Settings.EditPane>
|
|
515
|
+
```
|
|
516
|
+
|
|
517
|
+
### Hooks
|
|
518
|
+
|
|
519
|
+
#### 1. `useFetchSlackIntegrationsStatus`
|
|
520
|
+
|
|
521
|
+
This is a React Query hook for fetching the status of slack integration.
|
|
522
|
+
|
|
523
|
+
##### Arguments
|
|
524
|
+
|
|
525
|
+
- `integrableId`: Query param required to fetch Integration connect status through Integrable, passing the record id which is used as integrable for Slack Integration
|
|
526
|
+
- `integrableType`: Query param required to fetch Integration connect status through Integrable, passing the record type which is used as integrable for Slack Integration.
|
|
527
|
+
|
|
528
|
+
##### Usage
|
|
529
|
+
|
|
530
|
+
1. ##### Without Integrable params
|
|
531
|
+
|
|
532
|
+
```js
|
|
533
|
+
const { data: { isSlackIntegrated = "", notificationChannel = "" } = {} } =
|
|
534
|
+
useFetchSlackIntegrationsStatus({});
|
|
535
|
+
```
|
|
536
|
+
|
|
537
|
+
References:
|
|
538
|
+
|
|
539
|
+
- [neetoDesk](https://github.com/bigbinary/neeto-desk-web/blob/4da743947603e1f9890ae80bba8e7256c3918278/app/javascript/src/components/Settings/Integrations/Slack/index.jsx#L35)
|
|
540
|
+
|
|
541
|
+
2. ##### With Integrable params
|
|
542
|
+
|
|
543
|
+
```js
|
|
544
|
+
const { data: { isSlackIntegrated = "", notificationChannel = "" } = {} } =
|
|
545
|
+
useFetchSlackIntegrationsStatus({
|
|
546
|
+
integrableId: "1234567890",
|
|
547
|
+
integrableType: "Form",
|
|
548
|
+
});
|
|
549
|
+
```
|
|
550
|
+
|
|
551
|
+
## Instructions for Publishing
|
|
552
|
+
|
|
553
|
+
Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.
|
|
554
|
+
|
|
555
|
+
<br>
|
|
556
|
+
|
|
557
|
+
## Integrations
|
|
558
|
+
|
|
559
|
+
| Projects | Integrated |
|
|
560
|
+
| ------------ | :----------------: |
|
|
561
|
+
| neetoForm | :white_check_mark: |
|
|
562
|
+
| neetoChat | :white_check_mark: |
|
|
563
|
+
| neetoDesk | :white_check_mark: |
|
|
564
|
+
| neetoInvoice | :white_check_mark: |
|
|
565
|
+
| neetoMonitor | :white_check_mark: |
|
|
566
|
+
| neetoBugtrap | :white_check_mark: |
|
|
567
|
+
| neetoCal | :white_check_mark: |
|