diff --git a/src/api.js b/src/api.js
index 0976d9f9bc..ddbf367952 100644
--- a/src/api.js
+++ b/src/api.js
@@ -45,6 +45,7 @@ class APIClient {
}
get = (endpoint, params = {}) => this.http.get(endpoint, { params });
+ post = (endpoint, data) => this.http.post(endpoint, data);
}
export default new APIClient();
diff --git a/src/pages/Organizations/views/Organization.add.jsx b/src/pages/Organizations/views/Organization.add.jsx
index 831cc0c243..58581f059b 100644
--- a/src/pages/Organizations/views/Organization.add.jsx
+++ b/src/pages/Organizations/views/Organization.add.jsx
@@ -3,19 +3,128 @@ import {
PageSection,
PageSectionVariants,
Title,
+ Form,
+ FormGroup,
+ TextInput,
+ ActionGroup,
+ Toolbar,
+ ToolbarGroup,
+ Button,
+ Gallery,
+ Select,
+ SelectOption,
+ Card,
+ CardBody,
} from '@patternfly/react-core';
-const { light, medium } = PageSectionVariants;
+import { API_ORGANIZATIONS } from '../../../endpoints';
+import api from '../../../api';
+const { light } = PageSectionVariants;
-const OrganizationView = () => (
-
-
- Organization Add
-
-
- This is the add view
-
-
-);
+class OrganizationAdd extends React.Component {
-export default OrganizationView;
+ state = {
+ name: '',
+ description: '',
+ instanceGroups: '',
+ ansible_environment: 'default',
+ post_endpoint: API_ORGANIZATIONS,
+ };
+
+ onSelectChange = (value, _) => {
+ this.setState({ ansible_environment: value });
+ };
+
+ envs = [ // Placeholder for Ansible Environment Dropdown
+ { ansible_environment: 'default', label: 'Select Ansible Environment', disabled: true },
+ { ansible_environment: '1', label: '1', disabled: false },
+ { ansible_environment: '2', label: '2', disabled: false },
+ { ansible_environment: '3', label: '3', disabled: false }
+ ];
+ resetForm = () => {
+ this.setState({
+ ...this.state,
+ name: '',
+ description: ''
+ })
+ }
+ handleChange = (_, evt) => {
+ this.setState({ [evt.target.name]: evt.target.value });
+ }
+ onSubmit = async () => {
+ const data = Object.assign({}, { ...this.state });
+ await api.post(API_ORGANIZATIONS, data);
+ this.resetForm();
+ }
+ render() {
+ const { name } = this.state;
+ const enabled = name.length > 0; // TODO: add better form validation
+ return (
+
+
+ Organization Add
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default OrganizationAdd;