Skip to content

Commit 925f5fe

Browse files
GilbertCherrieGilbertCherrie
committed
Add terraform catalog entry point selection
1 parent 8bc61a8 commit 925f5fe

File tree

5 files changed

+182
-12
lines changed

5 files changed

+182
-12
lines changed

‎app/javascript/components/provision-entry-point/index.jsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React, { useState, useEffect } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { Button, TextInput } from 'carbon-components-react';
4+
import { TreeViewAlt16 } from '@carbon/icons-react';
5+
import { useFieldApi } from '@@ddf';
6+
import WorkflowEntryPoints from '../workflows/workflow-entry-points';
7+
8+
const ProvisionEntryPoint = (props) => {
9+
console.log(props);
10+
const {
11+
label, initialValue, id, field, selected, type,
12+
} = props;
13+
const { input } = useFieldApi(props);
14+
15+
const [showModal, setShowModal] = useState(false);
16+
const [selectedValue, setSelectedValue] = useState({});
17+
const [textValue, setTextValue] = useState('');
18+
19+
useEffect(() => {
20+
if (selectedValue && selectedValue.name && selectedValue.name.text) {
21+
setTextValue(selectedValue.name.text);
22+
} else {
23+
setTextValue('');
24+
}
25+
}, [selectedValue]);
26+
27+
useEffect(() => {
28+
if (selectedValue && selectedValue.name && selectedValue.name.text) {
29+
selectedValue.name.text = textValue;
30+
}
31+
input.onChange(selectedValue);
32+
}, [textValue]);
33+
34+
return (
35+
<div>
36+
{showModal ? (
37+
<WorkflowEntryPoints
38+
field={field}
39+
selected={selected}
40+
type={type}
41+
setShowModal={setShowModal}
42+
setSelectedValue={setSelectedValue}
43+
/>
44+
) : undefined}
45+
<div className="entry-point-wrapper">
46+
<div className="entry-point-text-input">
47+
<TextInput id={id} type="text" labelText={__(label)} onChange={(value) => setTextValue(value.target.value)} value={textValue} />
48+
</div>
49+
<div className="entry-point-buttons">
50+
<Button
51+
renderIcon={TreeViewAlt16}
52+
iconDescription={sprintf(__('Click to select %s'), label)}
53+
hasIconOnly
54+
onClick={() => setShowModal(true)}
55+
/>
56+
</div>
57+
</div>
58+
</div>
59+
);
60+
};
61+
ProvisionEntryPoint.propTypes = {
62+
id: PropTypes.string.isRequired,
63+
label: PropTypes.string.isRequired,
64+
initialValue: PropTypes.string,
65+
field: PropTypes.string.isRequired,
66+
selected: PropTypes.string,
67+
type: PropTypes.string.isRequired,
68+
};
69+
70+
ProvisionEntryPoint.defaultProps = {
71+
initialValue: '',
72+
selected: '',
73+
};
74+
75+
export default ProvisionEntryPoint;

‎app/javascript/components/terraform-template-catalog-form/terraform-template-catalog-form.schema.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,70 @@ const provisionTabSchema = (
109109
name: 'provisioning-tab',
110110
label: __('Provisioning'),
111111
fields: [
112+
{
113+
component: componentTypes.SELECT,
114+
id: 'provisioning_entry_point_type',
115+
name: 'provisioning_entry_point_type',
116+
label: __('Provisioning Entry Point'),
117+
initialValue: 'embedded_automate',
118+
options: [{ value: 'embedded_automate', label: __('Embedded Automate') }, { value: 'embedded_workflow', label: __('Embedded Workflow') }],
119+
},
120+
{
121+
component: componentTypes.TEXT_FIELD,
122+
id: 'provisioning_entry_point_automate',
123+
name: 'provisioning_entry_point_automate',
124+
label: __('Provisioning Entry Point'),
125+
initialValue: '/Service/Generic/StateMachines/GenericLifecycle/provision',
126+
condition: {
127+
when: 'provisioning_entry_point_type',
128+
is: 'embedded_automate',
129+
},
130+
},
131+
{
132+
component: 'provision-entry-point',
133+
id: 'provisioning_entry_point_workflow',
134+
name: 'provisioning_entry_point_workflow',
135+
label: 'Provisioning Entry Point',
136+
field: 'fqname',
137+
selected: '',
138+
type: 'provision',
139+
condition: {
140+
when: 'provisioning_entry_point_type',
141+
is: 'embedded_workflow',
142+
},
143+
},
144+
{
145+
component: componentTypes.SELECT,
146+
id: 'retirement_entry_point_type',
147+
name: 'retirement_entry_point_type',
148+
label: __('Retirement Entry Point'),
149+
initialValue: 'embedded_automate',
150+
options: [{ value: 'embedded_automate', label: __('Embedded Automate') }, { value: 'embedded_workflow', label: __('Embedded Workflow') }],
151+
},
152+
{
153+
component: componentTypes.TEXT_FIELD,
154+
id: 'retirement_entry_point_automate',
155+
name: 'retirement_entry_point_automate',
156+
label: __('Retirement Entry Point'),
157+
initialValue: '/Service/Generic/StateMachines/GenericLifecycle/Retire_Basic_Resource',
158+
condition: {
159+
when: 'retirement_entry_point_type',
160+
is: 'embedded_automate',
161+
},
162+
},
163+
{
164+
component: 'provision-entry-point',
165+
id: 'retirement_entry_point_workflow',
166+
name: 'retirement_entry_point_workflow',
167+
label: 'Retirement Entry Point',
168+
field: 'retire_fqname',
169+
selected: '',
170+
type: 'retire',
171+
condition: {
172+
when: 'provisioning_entry_point_type',
173+
is: 'embedded_workflow',
174+
},
175+
},
112176
{
113177
component: componentTypes.SELECT,
114178
id: 'config_info.provision.repository_id',

‎app/javascript/components/workflows/workflow-entry-points.jsx‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@ import MiqDataTable from '../miq-data-table';
55
import { workflowsEntryPoints } from './helper';
66
import { http } from '../../http_api';
77

8-
const WorkflowEntryPoints = ({ field, selected, type }) => {
8+
const WorkflowEntryPoints = ({
9+
field, selected, type, setShowModal, setSelectedValue,
10+
}) => {
11+
console.log(selected);
912
const [data, setData] = useState({
1013
isLoading: true, list: {}, selectedItemId: selected,
1114
});
@@ -44,24 +47,33 @@ const WorkflowEntryPoints = ({ field, selected, type }) => {
4447
}
4548
/** Function to handle the modal box close button click event. */
4649
const onCloseModal = () => {
47-
document.getElementById(`${type}-workflows`).innerHTML = '';
48-
http.post('/catalog/ae_tree_select_toggle?button=cancel', {}, { headers: {}, skipJsonParsing: true });
50+
if (setShowModal) {
51+
setShowModal(false);
52+
} else {
53+
document.getElementById(`${type}-workflows`).innerHTML = '';
54+
http.post('/catalog/ae_tree_select_toggle?button=cancel', {}, { headers: {}, skipJsonParsing: true });
55+
}
4956
};
5057
/** Function to handle the modal box apply button click event. */
5158
const onApply = () => {
5259
const seletedItem = data.list.rows.find((item) => item.id === data.selectedItemId);
5360
const name = seletedItem.name.text;
5461
if (seletedItem) {
55-
const nameField = document.getElementById(field);
56-
const selectedField = document.getElementById(`${type}_configuration_script_id`);
62+
if (setShowModal && setSelectedValue) {
63+
setShowModal(false);
64+
setSelectedValue(seletedItem);
65+
} else {
66+
const nameField = document.getElementById(field);
67+
const selectedField = document.getElementById(`${type}_configuration_script_id`);
5768

58-
if (nameField && selectedField) {
59-
nameField.value = name;
60-
selectedField.value = data.selectedItemId;
61-
http.post('/catalog/ae_tree_select_toggle?button=submit&automation_type=workflow', {}, { headers: {}, skipJsonParsing: true })
62-
.then((_data) => {
63-
document.getElementById(`${type}-workflows`).innerHTML = '';
64-
});
69+
if (nameField && selectedField) {
70+
nameField.value = name;
71+
selectedField.value = data.selectedItemId;
72+
http.post('/catalog/ae_tree_select_toggle?button=submit&automation_type=workflow', {}, { headers: {}, skipJsonParsing: true })
73+
.then((_data) => {
74+
document.getElementById(`${type}-workflows`).innerHTML = '';
75+
});
76+
}
6577
}
6678
}
6779
};
@@ -95,10 +107,14 @@ WorkflowEntryPoints.propTypes = {
95107
field: PropTypes.string.isRequired,
96108
type: PropTypes.string.isRequired,
97109
selected: PropTypes.string,
110+
setShowModal: PropTypes.func,
111+
setSelectedValue: PropTypes.func,
98112
};
99113

100114
WorkflowEntryPoints.defaultProps = {
101115
selected: '',
116+
setShowModal: undefined,
117+
setSelectedValue: undefined,
102118
};
103119

104120
export default WorkflowEntryPoints;

‎app/javascript/forms/mappers/componentMapper.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,15 @@ import { TreeViewField, TreeViewSelector } from '../../components/tree-view';
1111
import MultiSelectWithSelectAll from '../../components/multiselect-with-selectall';
1212
import FontIconPicker from '../../components/fonticon-picker';
1313
import FontIconPickerDdf from '../../components/fonticon-picker/font-icon-picker-ddf';
14+
import ProvisionEntryPoint from '../../components/provision-entry-point';
1415

1516
const mapper = {
1617
...componentMapper,
1718
'code-editor': CodeEditor,
1819
'edit-password-field': EditPasswordField,
1920
'file-upload': FileUploadComponent,
2021
'password-field': PasswordField,
22+
'provision-entry-point': ProvisionEntryPoint,
2123
'validate-credentials': AsyncCredentials,
2224
'tree-view': TreeViewField,
2325
'tree-selector': TreeViewSelector,

‎app/stylesheet/workflows.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,16 @@
3232
}
3333
}
3434

35+
.entry-point-wrapper {
36+
display: inline-flex;
37+
width: 100%;
38+
39+
.entry-point-text-input {
40+
width: 80%;
41+
margin-right: 20px;
42+
}
43+
44+
.entry-point-buttons {
45+
margin-top: 20px;
46+
}
47+
}

0 commit comments

Comments
 (0)