Merge branch 'steps-to-MR' into 'master'

Adds vue js example application and documentation

Closes #30031 and #30030

See merge request !10693

doc/development/fe_guide/index.md

@@ -25,6 +25,59 @@ Working with our frontend assets requires Node (v4.3 or greater) and Yarn
 
 For our currently-supported browsers, see our [requirements][requirements].
 
+---
+
+## Development Process
+
+When you are assigned an issue please follow the next steps:
+
+### Divide a big feature into small Merge Requests
+1. Big Merge Request are painful to review. In order to make this process easier we
+must break a big feature into smaller ones and create a Merge Request for each step.
+1. First step is to create a branch from `master`, let's call it `new-feature`. This branch
+will be the recipient of all the smaller Merge Requests. Only this one will be merged to master.
+1. Don't do any work on this one, let's keep it synced with master.
+1. Create a new branch from `new-feature`, let's call it `new-feature-step-1`. We advise you
+to clearly identify which step the branch represents.
+1. Do the first part of the modifications in this branch. The target branch of this Merge Request
+should be `new-feature`.
+1. Once `new-feature-step-1` gets merged into `new-feature` we can continue our work. Create a new
+branch from `new-feature`, let's call it `new-feature-step-2` and repeat the process done before.
+
+```shell
+* master
+|\
+| * new-feature
+| |\
+| | * new-feature-step-1
+| |\
+| | * new-feature-step-2
+| |\
+| | * new-feature-step-3
+```
+
+**Tips**
+- Make sure `new-feature` branch is always synced with `master`: merge master frequently.
+- Do the same for the feature branch you have opened. This can be accomplished by merging `master` into `new-feature` and `new-feature` into `new-feature-step-*`
+- Avoid rewriting history.
+
+### Share your work early
+1. Before writing code guarantee your vision of the architecture is aligned with
+GitLab's architecture.
+1. Add a diagram to the issue and ask a Frontend Architecture about it.
+
+  ![Diagram of Issue Boards Architecture](img/boards_diagram.png)
+
+1. Don't take more than one week between starting work on a feature and
+sharing a Merge Request with a reviewer or a maintainer.
+
+### Vue features
+1. Follow the steps in [Vue.js Best Practices](vue.md)
+1. Follow the style guide.
+1. Only a handful of people are allowed to merge Vue related features.
+Reach out to @jschatz, @iamphill, @fatihacet or @filipa early in this process.
+
+
 ---
 
 ## [Architecture](architecture.md)

doc/development/fe_guide/style_guide_js.md

@@ -58,7 +58,7 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns.
   import Bar from './bar';
   ```
 
-- **Never** disable the `no-undef` rule.  Declare globals with `/* global Foo */` instead.
+- **Never** disable the `no-undef` rule. Declare globals with `/* global Foo */` instead.
 
 - When declaring multiple globals, always use one `/* global [name] */` line per variable.
 
@@ -183,6 +183,19 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns.
   parseInt('10', 10);
   ```
 
+#### CSS classes used for JavaScript
+- If the class is being used in Javascript it needs to be prepend with `js-`
+  ```html
+    // bad
+    <button class="add-user">
+      Add User
+    </button>
+
+    // good
+    <button class="js-add-user">
+      Add User
+    </button>
+  ```
 
 ### Vue.js
 
@@ -200,6 +213,7 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns.
 #### Naming
 - **Extensions**: Use `.vue` extension for Vue components.
 - **Reference Naming**: Use PascalCase for Vue components and camelCase for their instances:
+
   ```javascript
   // bad
   import cardBoard from 'cardBoard';
@@ -217,6 +231,7 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns.
     cardBoard: CardBoard
   };
   ```
+
 - **Props Naming:**
 - Avoid using DOM component prop names.
 - Use kebab-case instead of camelCase to provide props in templates.
@@ -243,12 +258,18 @@ See [our current .eslintrc][eslintrc] for specific rules and patterns.
   <component v-if="bar"
       param="baz" />
 
+  <button class="btn">Click me</button>
+
   // good
   <component
     v-if="bar"
     param="baz"
   />
 
+  <button class="btn">
+    Click me
+  </button>
+
   // if props fit in one line then keep it on the same line
   <component bar="bar" />
   ```

doc/development/fe_guide/testing.md

@@ -26,6 +26,10 @@ browser and you will not have access to certain APIs, such as
 [`Notification`](https://developer.mozilla.org/en-US/docs/Web/API/notification),
 which will have to be stubbed.
 
+### Writing tests
+### Vue.js unit tests
+See this [section][vue-test].
+
 ### Running frontend tests
 
 `rake karma` runs the frontend-only (JavaScript) tests.
@@ -134,3 +138,4 @@ Scenario: Developer can approve merge request
 [jasmine-focus]: https://jasmine.github.io/2.5/focused_specs.html
 [jasmine-jquery]: https://github.com/velesin/jasmine-jquery
 [karma]: http://karma-runner.github.io/
+[vue-test]:https://docs.gitlab.com/ce/development/fe_guide/vue.html#testing-vue-components