1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
import React from 'react';
import { addons, types } from '@storybook/addons';
import { useAddonState } from '@storybook/api';
import { AddonPanel, Form } from '@storybook/components';
import { ADDON_ID, STATE_ID, PANEL_ID, GITLAB_API_ACCESS_UPDATE_EVENT } from './constants';
/**
* GitLab API Access is a Storybook extension that allows testing
* UI components that depend on GitLab's REST or GraphQL APIs.
*
* Read https://docs.gitlab.com/ee/development/fe_guide/storybook
* for more information.
*/
const h = React.createElement.bind(React);
// give a unique name for the panel
const GitLabAPIParametersPanel = () => {
const channel = addons.getChannel();
const [state, setState] = useAddonState(STATE_ID, {
gitlabURL: process.env.GITLAB_URL,
accessToken: process.env.API_ACCESS_TOKEN,
});
const updateState = (params) => {
const newState = {
...state,
...params,
};
setState(newState);
channel.emit(GITLAB_API_ACCESS_UPDATE_EVENT, newState);
};
const updateGitLabURL = (e) => {
updateState({ gitlabURL: e.target.value });
};
const updateAccessToken = (e) => {
updateState({ accessToken: e.target.value });
};
channel.emit(GITLAB_API_ACCESS_UPDATE_EVENT, state);
return h('div', {}, [
h(Form.Field, { label: 'GitLab URL' }, [
h(Form.Input, {
type: 'text',
value: state.gitlabURL,
placeholder: 'https://gitlab.com',
onChange: (e) => updateGitLabURL(e),
}),
]),
h(Form.Field, { label: 'GitLab access token' }, [
h(Form.Input, {
type: 'password',
value: state.accessToken,
onChange: (e) => updateAccessToken(e),
}),
]),
]);
};
addons.register(ADDON_ID, () => {
addons.add(PANEL_ID, {
type: types.PANEL,
title: 'GitLab API Access',
render: ({ active, key }) => h(AddonPanel, { active, key }, [h(GitLabAPIParametersPanel)]),
});
});
|
