Form content more info

Author: guyplusplus

README.md

@@ -73,19 +73,20 @@ $ sudo apt update
 $ sudo apt install yarn
 ```
 
-6. Download Kibana source code and select the target version (v7.6.2, v7.0.0, etc.)
+6. Download Kibana source code and select the target version (v7.6.2, v7.0.0, etc.). `kibana` is the top directory.
 
 ```
 $ git clone https://github.com/elastic/kibana.git
 $ cd kibana
 $ git checkout v7.6.2 
 ```
 
-7. Copy the source code with modified name inside `kibana/plugins`
+7. Copy the source code with modified name inside the `kibana/plugins` directory.
 
-8. Start in development mode, ensuring only OSS (Open Source) is used
+8. Start Kibana in development mode, ensuring only OSS (Open Source) features are used
 
 ```
+$ cd kibana
 $ nvm use
 $ yarn kbn bootstrap
 $ yarn start --oss
@@ -104,9 +105,36 @@ $ sudo sysctl -p
 elasticsearch.ignoreVersionMismatch: true
 ```
 
-## Building the plugin
+## Creating the actual form (step 7)
+
+The current plugin name is based on accounts data. Simply perform a search replace in filenames and in the source code, respecting letter capitalization.
+
+The form itself is contained in the [controller file](https://github.com/guyplusplus/Kibana-Plugin-Custom-Form-Filter-Visualization/blob/master/vis_type_custom_form_filter_accounts/public/custom_form_filter_accounts_vis_controller.tsx). An [option tab](https://github.com/guyplusplus/Kibana-Plugin-Custom-Form-Filter-Visualization/blob/master/vis_type_custom_form_filter_accounts/public/custom_form_filter_accounts_options.tsx) is also possible.
+
+The form code looks like this and is very simple to modify, based on EUI React components.
+* [Documentation](https://elastic.github.io/eui/#/)
+* [Source Code](https://github.com/elastic/eui)
+
+```
+<div>
+  <EuiForm>
+    <EuiFormRow label="Age" helpText="Input customer age">
+      <EuiFieldText name="age" onChange={e => this.onFormChange(e)} value={this.state.age} />
+    </EuiFormRow>
+    <EuiFormRow label="Minimum balance" helpText={minimumBalanceHelpText} >
+      <EuiFieldText name="minimumBalance" onChange={e => this.onFormChange(e)} value={this.state.minimumBalance} />
+    </EuiFormRow>
+    <EuiSpacer />
+    <EuiButton onClick={this.onClickButtonApplyFilter} fill>Apply filter</EuiButton>&nbsp;
+    <EuiButton onClick={this.onClickButtonDeleteFilter} >Delete filter</EuiButton>&nbsp;
+    <EuiButton onClick={this.onClickButtonClearForm} >Clear form</EuiButton>
+  </EuiForm>
+</div>
+```
+
+## Creating the plugin zip file
 
-Simply add the plugin directory inside a kibana folder and zip the file. The zip structure is
+Simply add the plugin directory inside a kibana folder and zip the file. Do not include the `kibana/target` directory. The zip structure is
 
 ```
 my-plugin_7.7.0.zip
@@ -122,7 +150,7 @@ my-plugin_7.7.0.zip
 
 ## Installing the plugin
 
-The plugin can then be installed like this.
+The plugin can then be installed like this for an apt installed Kibana.
 
 ```
 $ sudo ./bin/kibana-plugin --allow-root install file:///home/john/downloads/kbn_tp_custom_form_filter_accounts_7.7.0_1.0.0.zip
@@ -134,3 +162,11 @@ Deleting then installing the plugin often fails for me. I fix it by running this
 ```
 $ rm -rf /usr/share/kibana/optimize/bundles
 ```
+
+## Project TODO List
+
+- [ ] Create form content (i.e. dropdown, slider) based on actual data
+- [ ] Create a script to replace 'accounts' in filenames and file content
+- [ ] Create own plugin icon
+
+