@bigbinary/neeto-slack-frontend 2.2.7 → 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 -166
- package/package.json +12 -12
package/README.md
CHANGED
|
@@ -1,86 +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
|
-
##
|
|
5
|
+
## Contents
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
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
|
-
```
|
|
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)
|
|
30
21
|
|
|
31
|
-
|
|
22
|
+
## Development with Host Application
|
|
32
23
|
|
|
33
|
-
|
|
24
|
+
### Engine
|
|
34
25
|
|
|
35
|
-
|
|
36
|
-
- [Configure](./docs/configure/README.md)
|
|
37
|
-
- [Finish](./docs/finish/README.md)
|
|
38
|
-
- [Settings](./docs/settings/README.md)
|
|
26
|
+
The Engine is used to support the slack integration within neeto applications.
|
|
39
27
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
- [useFetchSlackIntegrationsStatus](./docs/useFetchSlackIntegrationsStatus/README.md)
|
|
43
|
-
|
|
44
|
-
### Development
|
|
45
|
-
|
|
46
|
-
Install all the dependencies by executing the following command
|
|
47
|
-
|
|
48
|
-
```bash
|
|
49
|
-
yarn install
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
### Instructions for development
|
|
53
|
-
|
|
54
|
-
Check the [Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) for step-by-step instructions to develop the frontend package.
|
|
55
|
-
|
|
56
|
-
#### Using host application
|
|
57
|
-
|
|
58
|
-
1. Clone this repository.
|
|
59
|
-
2. Run `yarn install` to download the dependencies and setup the development
|
|
60
|
-
environment.
|
|
61
|
-
3. Have a host application ready.
|
|
62
|
-
4. Run `yarn build --watch` to automatically transpile code as you save the
|
|
63
|
-
file. You can omit the `--watch` flag if you want to run the build only once.
|
|
64
|
-
5. In a different terminal, run `yalc publish` to publish the
|
|
65
|
-
neeto-slack-frontend to the local yalc store.
|
|
66
|
-
6. Run `yalc add @bigbinary/neeto-slack-frontend` to install the
|
|
67
|
-
neeto-slack-frontend to the host application.
|
|
68
|
-
7. After making necessary changes to `neeto-slack-frontend`, run `yalc push` to
|
|
69
|
-
push the changes to the host application (assuming that you are in watch mode
|
|
70
|
-
and the changes are bundled automatically). Restart webpack-dev-server in
|
|
71
|
-
host if changes are not applied.
|
|
72
|
-
8. Video explanation on how to use yalc: https://vimeo.com/722958162/9e931b640c
|
|
73
|
-
|
|
74
|
-
## neetoSlackEngine
|
|
75
|
-
|
|
76
|
-
To manage slack integration on neeto applications.
|
|
77
|
-
|
|
78
|
-
### Installation
|
|
28
|
+
#### Installation
|
|
79
29
|
|
|
80
30
|
1. Add this line to your application's Gemfile:
|
|
81
31
|
|
|
82
32
|
```ruby
|
|
83
|
-
|
|
33
|
+
source "NEETO_GEM_SERVER_URL" do
|
|
34
|
+
# ..existing gems
|
|
35
|
+
|
|
36
|
+
gem 'neeto-slack-engine'
|
|
37
|
+
end
|
|
84
38
|
```
|
|
85
39
|
|
|
86
40
|
2. And then execute:
|
|
@@ -89,9 +43,16 @@ To manage slack integration on neeto applications.
|
|
|
89
43
|
bundle install
|
|
90
44
|
```
|
|
91
45
|
|
|
92
|
-
3.
|
|
46
|
+
3. Add this line to your application's `config/routes.rb` file (replace `at` to
|
|
47
|
+
your desired route):
|
|
93
48
|
|
|
94
|
-
|
|
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
|
|
95
56
|
it doesn't exist already. Then run
|
|
96
57
|
|
|
97
58
|
```ruby
|
|
@@ -109,53 +70,48 @@ To manage slack integration on neeto applications.
|
|
|
109
70
|
bin/rails db:migrate
|
|
110
71
|
```
|
|
111
72
|
|
|
112
|
-
|
|
73
|
+
5. Configure model to add below association to the integrable class
|
|
113
74
|
|
|
114
75
|
```ruby
|
|
115
76
|
has_one :slack_team, as: :integrable, class_name: "NeetoSlackEngine::SlackTeam", dependent: :destroy
|
|
116
77
|
```
|
|
117
78
|
|
|
118
|
-
|
|
119
|
-
values
|
|
120
|
-
|
|
121
|
-
Under .env
|
|
122
|
-
|
|
123
|
-
```yaml
|
|
124
|
-
SLACK_CLIENT_ID=#Value from Slack App console at
|
|
125
|
-
https://api.slack.com/apps/APP_ID/general SLACK_CLIENT_SECRET=#Value from
|
|
126
|
-
Slack App console at https://api.slack.com/apps/APP_ID/general
|
|
127
|
-
SLACK_CLIENT_SIGNING_SECRET=#Value from Slack App console at
|
|
128
|
-
https://api.slack.com/apps/APP_ID/general ATTR_ENCRYPTION_KEY=#Random varying
|
|
129
|
-
char. key with min. 32 chars. SLACK_REDIRECT_PATH=#Path controller if
|
|
130
|
-
Callbacks controller of application is to be used instead of Engine's
|
|
131
|
-
SLACK_HOST_URL=#Host url if different than application host url or in
|
|
132
|
-
development for use of Ngrok
|
|
133
|
-
```
|
|
79
|
+
6. Configure the following `Environment Variables` and `Secrets` with suitable values
|
|
134
80
|
|
|
135
|
-
|
|
81
|
+
- Under `.env` file:
|
|
136
82
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
attr_encrypted:
|
|
140
|
-
encryption_key: <%= ENV['ATTR_ENCRYPTION_KEY'] %>
|
|
141
|
-
slack:
|
|
142
|
-
client_id: "<%= ENV['SLACK_CLIENT_ID'] %>"
|
|
143
|
-
client_secret: <%= ENV['SLACK_CLIENT_SECRET'] %>
|
|
144
|
-
client_signing_secret: <%= ENV['SLACK_CLIENT_SIGNING_SECRET'] %>
|
|
145
|
-
```
|
|
83
|
+
```yaml
|
|
84
|
+
SLACK_CLIENT_ID=# Value from Slack App console at https://api.slack.com/apps/APP_ID/general
|
|
146
85
|
|
|
147
|
-
|
|
148
|
-
your desired route):
|
|
86
|
+
SLACK_CLIENT_SECRET=# Valuefrom Slack App console at https://api.slack.com/apps/APP_ID/general
|
|
149
87
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
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
|
+
```
|
|
153
108
|
|
|
154
109
|
7. Slack Integration supports customizing scopes required for host app on usage
|
|
155
110
|
basis, for adding/removing the scope file with name `neeto_slack_engine.yml`
|
|
156
111
|
can be added under host app `config` directory. In case the file is not
|
|
157
112
|
present the Engine fallbacks to set of default scopes defined under Engine
|
|
158
113
|
config. File scope structure
|
|
114
|
+
|
|
159
115
|
```yml
|
|
160
116
|
scopes:
|
|
161
117
|
v1:
|
|
@@ -169,82 +125,443 @@ To manage slack integration on neeto applications.
|
|
|
169
125
|
user:
|
|
170
126
|
...
|
|
171
127
|
```
|
|
128
|
+
|
|
172
129
|
Ref. -
|
|
173
|
-
https://github.com/bigbinary/neeto-
|
|
130
|
+
<https://github.com/bigbinary/neeto-form-web/blob/0213546cf8a0f4e73e2e5950ceec493d7ad628ea/config/neeto_slack_engine.yml>
|
|
174
131
|
|
|
175
|
-
|
|
132
|
+
Ref. -
|
|
133
|
+
<https://github.com/bigbinary/neeto-slack-engine/blob/e229fec17fd1b7e8596ca1ca55bd2926133fb88f/test/dummy/config/neeto_slack_engine.yml>
|
|
176
134
|
|
|
177
|
-
|
|
178
|
-
copy of neetoIntegrationsSlack's engine):
|
|
135
|
+
### Frontend package
|
|
179
136
|
|
|
180
|
-
|
|
181
|
-
gem 'neeto-slack-engine', path: '../neeto-slack-nano'
|
|
182
|
-
```
|
|
137
|
+
The package exports components and hooks to manage slack integration within neeto applications.
|
|
183
138
|
|
|
184
|
-
|
|
139
|
+
#### Installation
|
|
185
140
|
|
|
186
|
-
|
|
187
|
-
bundle install
|
|
188
|
-
```
|
|
141
|
+
Install the latest `NeetoSlackNano` package using the below command:
|
|
189
142
|
|
|
190
|
-
|
|
143
|
+
```shell
|
|
144
|
+
yarn add @bigbinary/neeto-slack-frontend
|
|
145
|
+
```
|
|
191
146
|
|
|
192
|
-
|
|
193
|
-
app.
|
|
147
|
+
#### Instructions for development
|
|
194
148
|
|
|
195
|
-
|
|
196
|
-
# 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.
|
|
197
150
|
|
|
198
|
-
|
|
199
|
-
def change
|
|
200
|
-
add_column :organizations, :slack_chat_api_key, :string
|
|
201
|
-
end
|
|
202
|
-
end
|
|
203
|
-
```
|
|
151
|
+
### Components
|
|
204
152
|
|
|
205
|
-
|
|
206
|
-
bin/rails neeto_integrations_slack_engine:install:migrations
|
|
207
|
-
bin/rails db:migrate
|
|
208
|
-
```
|
|
153
|
+
#### 1. `Connect`
|
|
209
154
|
|
|
210
|
-
|
|
155
|
+
|
|
211
156
|
|
|
212
|
-
|
|
213
|
-
has_one :slack_team, as: :integrable, class_name: "NeetoSlackEngine::SlackTeam", dependent: :destroy
|
|
214
|
-
```
|
|
157
|
+
##### Props
|
|
215
158
|
|
|
216
|
-
|
|
217
|
-
values
|
|
218
|
-
|
|
219
|
-
Under `.env.development` or `.env` in application
|
|
220
|
-
|
|
221
|
-
```yaml
|
|
222
|
-
SLACK_CLIENT_ID=#Value from Slack App console at
|
|
223
|
-
https://api.slack.com/apps/APP_ID/general SLACK_CLIENT_SECRET=#Value from
|
|
224
|
-
Slack App console at https://api.slack.com/apps/APP_ID/general
|
|
225
|
-
SLACK_CLIENT_SIGNING_SECRET=#Value from Slack App console at
|
|
226
|
-
https://api.slack.com/apps/APP_ID/general ATTR_ENCRYPTION_KEY=#Random varying
|
|
227
|
-
char. key with min. 32 chars. SLACK_REDIRECT_PATH=#Path controller if
|
|
228
|
-
Callbacks controller of application is to be used instead of Engine's
|
|
229
|
-
SLACK_HOST_URL=#Host url if different than application host url or in
|
|
230
|
-
development for use of Ngrok INTEGRATIONS_SLACK_ENGINE_DEVELOPMENT=true
|
|
231
|
-
```
|
|
159
|
+
1. `handleRedirectToSlack`: Function to handle the redirect to the slack OAuth url
|
|
232
160
|
|
|
233
|
-
|
|
161
|
+
2. `isAuthorizeUrlFetching`: Boolean which handles the loading state of Slack Authorize button
|
|
234
162
|
|
|
235
|
-
|
|
236
|
-
application_name: #Application name
|
|
237
|
-
attr_encrypted:
|
|
238
|
-
encryption_key: <%= ENV['ATTR_ENCRYPTION_KEY'] %>
|
|
239
|
-
slack:
|
|
240
|
-
client_id: "<%= ENV['SLACK_CLIENT_ID'] %>"
|
|
241
|
-
client_secret: <%= ENV['SLACK_CLIENT_SECRET'] %>
|
|
242
|
-
client_signing_secret: <%= ENV['SLACK_CLIENT_SIGNING_SECRET'] %>
|
|
243
|
-
```
|
|
163
|
+
##### Usage
|
|
244
164
|
|
|
245
|
-
|
|
246
|
-
|
|
165
|
+
```js
|
|
166
|
+
const handleRedirect = () => {
|
|
167
|
+
window.location.assign(slackAuthorizationUrl);
|
|
168
|
+
};
|
|
247
169
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
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: |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigbinary/neeto-slack-frontend",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.8",
|
|
4
4
|
"description": "Slack integration step UI",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"homepage": "https://github.com/bigbinary/neeto-slack-nano",
|
|
@@ -48,14 +48,14 @@
|
|
|
48
48
|
"@babel/preset-typescript": "7.23.2",
|
|
49
49
|
"@babel/runtime": "7.23.2",
|
|
50
50
|
"@bigbinary/babel-preset-neeto": "1.0.6",
|
|
51
|
-
"@bigbinary/eslint-plugin-neeto": "1.
|
|
51
|
+
"@bigbinary/eslint-plugin-neeto": "1.5.0",
|
|
52
52
|
"@bigbinary/neeto-audit-frontend": "2.0.9",
|
|
53
53
|
"@bigbinary/neeto-cist": "1.0.8",
|
|
54
|
-
"@bigbinary/neeto-commons-frontend": "3.1.
|
|
55
|
-
"@bigbinary/neeto-filters-frontend": "3.
|
|
56
|
-
"@bigbinary/neeto-icons": "1.17.
|
|
57
|
-
"@bigbinary/neeto-molecules": "1.6
|
|
58
|
-
"@bigbinary/neetoui": "6.
|
|
54
|
+
"@bigbinary/neeto-commons-frontend": "3.1.20",
|
|
55
|
+
"@bigbinary/neeto-filters-frontend": "3.1.3",
|
|
56
|
+
"@bigbinary/neeto-icons": "1.17.14",
|
|
57
|
+
"@bigbinary/neeto-molecules": "1.13.6",
|
|
58
|
+
"@bigbinary/neetoui": "6.3.3",
|
|
59
59
|
"@emotion/is-prop-valid": "1.2.0",
|
|
60
60
|
"@faker-js/faker": "8.2.0",
|
|
61
61
|
"@honeybadger-io/js": "6.5.3",
|
|
@@ -153,12 +153,12 @@
|
|
|
153
153
|
},
|
|
154
154
|
"peerDependencies": {
|
|
155
155
|
"@bigbinary/neeto-cist": "latest",
|
|
156
|
-
"@bigbinary/neeto-commons-frontend": "3.1.
|
|
156
|
+
"@bigbinary/neeto-commons-frontend": "3.1.20",
|
|
157
157
|
"@bigbinary/neeto-editor": "^1.26.3",
|
|
158
|
-
"@bigbinary/neeto-filters-frontend": "3.
|
|
159
|
-
"@bigbinary/neeto-icons": "1.17.
|
|
160
|
-
"@bigbinary/neeto-molecules": "1.6
|
|
161
|
-
"@bigbinary/neetoui": "6.
|
|
158
|
+
"@bigbinary/neeto-filters-frontend": "3.1.3",
|
|
159
|
+
"@bigbinary/neeto-icons": "1.17.14",
|
|
160
|
+
"@bigbinary/neeto-molecules": "1.13.6",
|
|
161
|
+
"@bigbinary/neetoui": "6.3.3",
|
|
162
162
|
"@honeybadger-io/js": "^6.5.3",
|
|
163
163
|
"@honeybadger-io/react": "^6.1.9",
|
|
164
164
|
"axios": "^1.6.0",
|