From 5cb48d36860eb26ecbb2dfc70682afa431093f07 Mon Sep 17 00:00:00 2001
From: Winnie Hellmann <winnie@gitlab.com>
Date: Thu, 12 Jul 2018 12:10:53 +0000
Subject: [PATCH] Remove old service architecture from Vue docs

---
 doc/development/fe_guide/img/vue_arch.png | Bin 9848 -> 0 bytes
 doc/development/fe_guide/vue.md           | 239 +---------------------
 2 files changed, 11 insertions(+), 228 deletions(-)
 delete mode 100644 doc/development/fe_guide/img/vue_arch.png

diff --git a/doc/development/fe_guide/img/vue_arch.png b/doc/development/fe_guide/img/vue_arch.png
deleted file mode 100644
index a67706c7c1e5dce1491e92c576f95d6d8911f4ec..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9848
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

diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md
index 219b98ac696..f6cbd11042c 100644
--- a/doc/development/fe_guide/vue.md
+++ b/doc/development/fe_guide/vue.md
@@ -2,27 +2,24 @@
 
 To get started with Vue, read through [their documentation][vue-docs].
 
-## Vue architecture
+## Examples
 
-All new features built with Vue.js must follow a [Flux architecture][flux].
-The main goal we are trying to achieve is to have only one data flow and only one data entry.
-In order to achieve this goal, you can either use [vuex](#vuex) or use the [store pattern][state-management], explained below:
+What is described in the following sections can be found in these examples:
 
-Each Vue bundle needs a Store - where we keep all the data -, a Service - that we use to communicate with the server - and a main Vue component.
+- web ide: https://gitlab.com/gitlab-org/gitlab-ce/tree/master/app/assets/javascripts/ide/stores
+- security products: https://gitlab.com/gitlab-org/gitlab-ee/tree/master/ee/app/assets/javascripts/vue_shared/security_reports
+- registry: https://gitlab.com/gitlab-org/gitlab-ce/tree/master/app/assets/javascripts/registry/stores
 
-Think of the Main Vue Component as the entry point of your application. This is the only smart
-component that should exist in each Vue feature.
-This component is responsible for:
-1. Calling the Service to get data from the server
-1. Calling the Store to store the data received
-1. Mounting all the other components
+## Vue architecture
 
-![Vue Architecture](img/vue_arch.png)
+All new features built with Vue.js must follow a [Flux architecture][flux].
+The main goal we are trying to achieve is to have only one data flow and only one data entry.
+In order to achieve this goal we use [vuex](#vuex).
 
 You can also read about this architecture in vue docs about [state management][state-management]
 and about [one way data flow][one-way-data-flow].
 
-### Components, Stores and Services
+### Components and Store
 
 In some features implemented with Vue.js, like the [issue board][issue-boards]
 or [environments table][environments-table]
@@ -33,10 +30,8 @@ new_feature
 ├── components
 │   └── component.vue
 │   └── ...
-├── stores
+├── store
 │  └── new_feature_store.js
-├── services # only when not using vuex
-│  └── new_feature_service.js
 ├── index.js
 ```
 _For consistency purposes, we recommend you to follow the same structure._
@@ -125,217 +120,6 @@ You can read more about components in Vue.js site, [Component System][component-
 #### Vuex
 Check this [page](vuex.md) for more details.
 
-#### Flux like state management
-The Store is a class that allows us to manage the state in a single
-source of truth. It is not aware of the service or the components.
-
-The concept we are trying to follow is better explained by Vue documentation
-itself, please read this guide: [State Management][state-management]
-
-### A folder for the Service
-
-**If you are using Vuex you won't need this step**
-
-The Service is a class used only to communicate with the server.
-It does not store or manipulate any data. It is not aware of the store or the components.
-We use [axios][axios] to communicate with the server.
-Refer to [axios](axios.md) for more details.
-
-Axios instance should only be imported in the service file.
-
-```javascript
-import axios from '~/lib/utils/axios_utils';
-```
-
-### End Result
-
-The following example shows an application:
-
-```javascript
-// store.js
-export default class Store {
-
-  /**
-   * This is where we will iniatialize the state of our data.
-   * Usually in a small SPA you don't need any options when starting the store.
-   * In that case you do need guarantee it's an Object and it's documented.
-   *
-   * @param  {Object} options
-   */
-  constructor(options) {
-    this.options = options;
-
-    // Create a state object to handle all our data in the same place
-    this.todos = [];
-  }
-
-  setTodos(todos = []) {
-    this.todos = todos;
-  }
-
-  addTodo(todo) {
-    this.todos.push(todo);
-  }
-
-  removeTodo(todoID) {
-    const state = this.todos;
-
-    const newState = state.filter((element) => {element.id !== todoID});
-
-    this.todos = newState;
-  }
-}
-
-// service.js
-import axios from '~/lib/utils/axios_utils'
-
-export default class Service {
-  constructor(options) {
-    this.todos = axios.create({
-      baseURL: endpoint.todosEndpoint
-    });
-
-  }
-
-  getTodos() {
-    return this.todos.get();
-  }
-
-  addTodo(todo) {
-    return this.todos.put(todo);
-  }
-}
-// todo_component.vue
-<script>
-export default {
-  props: {
-    data: {
-      type: Object,
-      required: true,
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <h1>
-      Title: {{data.title}}
-    </h1>
-    <p>
-      {{data.text}}
-    </p>
-  </div>
-</template>
-
-// todos_main_component.vue
-<script>
-import Store from 'store';
-import Service from 'service';
-import TodoComponent from 'todoComponent';
-export default {
-  components: {
-    todo: TodoComponent,
-  },
-  /**
-   * Although most data belongs in the store, each component it's own state.
-   * We want to show a loading spinner while we are fetching the todos, this state belong
-   * in the component.
-   *
-   * We need to access the store methods through all methods of our component.
-   * We need to access the state of our store.
-   */
-  data() {
-    const store = new Store();
-
-    return {
-      isLoading: false,
-      store: store,
-      todos: store.todos,
-    };
-  },
-
-  created() {
-    this.service = new Service('/todos');
-
-    this.getTodos();
-  },
-
-  methods: {
-    getTodos() {
-      this.isLoading = true;
-
-      this.service
-        .getTodos()
-        .then(response => {
-          this.store.setTodos(response);
-          this.isLoading = false;
-        })
-        .catch(() => {
-          this.isLoading = false;
-          // Show an error
-        });
-    },
-
-    addTodo(event) {
-      this.service
-        .addTodo({
-          title: 'New entry',
-          text: `You clicked on ${event.target.tagName}`,
-        })
-        .then(response => {
-          this.store.addTodo(response);
-        })
-        .catch(() => {
-          // Show an error
-        });
-    },
-  },
-};
-</script>
-<template>
-  <div class="container">
-    <div v-if="isLoading">
-      <i
-        class="fa fa-spin fa-spinner"
-        aria-hidden="true" />
-    </div>
-
-    <div
-      v-if="!isLoading"
-      class="js-todo-list">
-      <template v-for='todo in todos'>
-        <todo :data="todo" />
-      </template>
-
-      <button
-        @click="addTodo"
-        class="js-add-todo">
-        Add Todo
-      </button>
-    </div>
-  <div>
-</template>
-
-// index.js
-import todoComponent from 'todos_main_component.vue';
-
-new Vue({
-  el: '.js-todo-app',
-  components: {
-    todoComponent,
-  },
-  render: createElement => createElement('todo-component' {
-    props: {
-      someProp: [],
-    }
-  }),
-});
-
-```
-
-The [issue boards service][issue-boards-service]
-is a good example of this pattern.
-
 ## Style guide
 
 Please refer to the Vue section of our [style guide](style_guide_js.md#vue-js)
@@ -446,6 +230,5 @@ need to test the rendered output. [Vue][vue-test] guide's to unit test show us e
 [state-management]: https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch
 [one-way-data-flow]: https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow
 [vue-test]: https://vuejs.org/v2/guide/unit-testing.html
-[issue-boards-service]: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/boards/services/board_service.js.es6
 [flux]: https://facebook.github.io/flux
 [axios]: https://github.com/axios/axios
-- 
2.30.9