diff options
Diffstat (limited to 'doc/development/fe_guide')
| -rw-r--r-- | doc/development/fe_guide/customizable_dashboards.md | 34 | ||||
| -rw-r--r-- | doc/development/fe_guide/design_anti_patterns.md | 6 | ||||
| -rw-r--r-- | doc/development/fe_guide/graphql.md | 4 | ||||
| -rw-r--r-- | doc/development/fe_guide/style/javascript.md | 4 | ||||
| -rw-r--r-- | doc/development/fe_guide/style/scss.md | 10 | ||||
| -rw-r--r-- | doc/development/fe_guide/view_component.md | 4 | ||||
| -rw-r--r-- | doc/development/fe_guide/vue.md | 48 |
7 files changed, 73 insertions, 37 deletions
diff --git a/doc/development/fe_guide/customizable_dashboards.md b/doc/development/fe_guide/customizable_dashboards.md index 7e7718f8e60..26c73b26126 100644 --- a/doc/development/fe_guide/customizable_dashboards.md +++ b/doc/development/fe_guide/customizable_dashboards.md @@ -19,7 +19,7 @@ To use customizable dashboards: 1. Create your dashboard component. 1. Render an instance of `CustomizableDashboard`. -1. Pass a list of widgets to render. +1. Pass a list of panels to render. For example, a customizable dashboard for users over time: @@ -35,10 +35,10 @@ export default { }, data() { return { - widgets: [ + panels: [ { - component: 'CubeLineChart', // The name of the widget component. - title: s__('ProductAnalytics|Users / Time'), // The title shown on the widget component. + component: 'CubeLineChart', // The name of the panel component. + title: s__('ProductAnalytics|Users / Time'), // The title shown on the panel component. // Gridstack settings based upon https://github.com/gridstack/gridstack.js/tree/master/doc#item-options. // All values are grid row/column numbers up to 12. // We use the default 12 column grid https://github.com/gridstack/gridstack.js#change-grid-columns. @@ -50,22 +50,22 @@ export default { xPos: 0, yPos: 0, }, - // Options that are used to set bespoke values for each widget. - // Available customizations are determined by the widget itself. + // Options that are used to set bespoke values for each panel. + // Available customizations are determined by the panel itself. customizations: {}, - // Chart options defined by the charting library being used by the widget. + // Chart options defined by the charting library being used by the panel. chartOptions: { xAxis: { name: __('Time'), type: 'time' }, yAxis: { name: __('Counts') }, }, - // The data for the widget. - // This could be imported or in this case, a query passed to be used by the widgets API. - // Each widget type determines how it handles this property. + // The data for the panel. + // This could be imported or in this case, a query passed to be used by the panels API. + // Each panel type determines how it handles this property. data: { query: { users: { - measures: ['Jitsu.count'], - dimensions: ['Jitsu.eventType'], + measures: ['TrackedEvents.count'], + dimensions: ['TrackedEvents.eventType'], }, }, }, @@ -78,20 +78,20 @@ export default { <template> <h1>{{ s__('ProductAnalytics|Analytics dashboard') }}</h1> - <customizable-dashboard :widgets="widgets" /> + <customizable-dashboard :panels="panels" /> </template> ``` -The widgets data can be retrieved from a file or API request, or imported through HTML data attributes. +The panels data can be retrieved from a file or API request, or imported through HTML data attributes. -For each widget, a `component` is defined. Each `component` is a component declaration and should be included in -[`vue_shared/components/customizable_dashboard/widgets_base.vue`](https://gitlab.com/gitlab-org/gitlab/blob/master/ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/widgets_base.vue) +For each panel, a `component` is defined. Each `component` is a component declaration and should be included in +[`vue_shared/components/customizable_dashboard/panels_base.vue`](https://gitlab.com/gitlab-org/gitlab/blob/master/ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/panels_base.vue) as a dynamic import, to keep the memory usage down until it is used. For example: ```javascript components: { - CubeLineChart: () => import('ee/product_analytics/dashboards/components/widgets/cube_line_chart.vue') + CubeLineChart: () => import('ee/product_analytics/dashboards/components/panels/cube_line_chart.vue') } ``` diff --git a/doc/development/fe_guide/design_anti_patterns.md b/doc/development/fe_guide/design_anti_patterns.md index 07de86f5810..f087fbd8235 100644 --- a/doc/development/fe_guide/design_anti_patterns.md +++ b/doc/development/fe_guide/design_anti_patterns.md @@ -67,9 +67,7 @@ side-effects can be notoriously difficult to reason with. ### References -To read more on this topic, check out the following references: - -- [GlobalVariablesAreBad from C2 wiki](https://wiki.c2.com/?GlobalVariablesAreBad) +For more information, see [Global Variables Are Bad on the C2 wiki](https://wiki.c2.com/?GlobalVariablesAreBad). ## Singleton (Anti-pattern) @@ -175,7 +173,7 @@ export const fuzzify = (id) => { /* ... */ }; #### Dependency Injection [Dependency Injection](https://en.wikipedia.org/wiki/Dependency_injection) is an approach which breaks -coupling by declaring a module's dependencies to be injected from outside the module (for example, through constructor parameters, a bona-fide Dependency Injection framework, and even Vue's `provide/inject`). +coupling by declaring a module's dependencies to be injected from outside the module (for example, through constructor parameters, a bona-fide Dependency Injection framework, and even in Vue `provide/inject`). ```javascript // bad - Vue component coupled to Singleton diff --git a/doc/development/fe_guide/graphql.md b/doc/development/fe_guide/graphql.md index 0fec38b1200..8ae0458e47c 100644 --- a/doc/development/fe_guide/graphql.md +++ b/doc/development/fe_guide/graphql.md @@ -14,7 +14,7 @@ info: "See the Technical Writers assigned to Development Guidelines: https://abo **General resources**: - [📚 Official Introduction to GraphQL](https://graphql.org/learn/) -- [📚 Official Introduction to Apollo](https://www.apollographql.com/tutorials/fullstack-quickstart/introduction) +- [📚 Official Introduction to Apollo](https://www.apollographql.com/tutorials/fullstack-quickstart/01-introduction) **GraphQL at GitLab**: @@ -87,7 +87,7 @@ where needed. You can check all existing queries and mutations on the right side of GraphiQL in its **Documentation explorer**. You can also write queries and mutations directly on the left tab and check -their execution by clicking **Execute query** button on the top left: +their execution by selecting **Execute query** in the upper left:  diff --git a/doc/development/fe_guide/style/javascript.md b/doc/development/fe_guide/style/javascript.md index 0536d1c5c77..3e3a79dd7bb 100644 --- a/doc/development/fe_guide/style/javascript.md +++ b/doc/development/fe_guide/style/javascript.md @@ -41,12 +41,12 @@ instead. ```javascript // bad -function a(p1, p2, p3) { +function a(p1, p2, p3, p4) { // ... }; // good -function a(p) { +function a({ p1, p2, p3, p4 }) { // ... }; ``` diff --git a/doc/development/fe_guide/style/scss.md b/doc/development/fe_guide/style/scss.md index b84f41311b6..aed7310e95d 100644 --- a/doc/development/fe_guide/style/scss.md +++ b/doc/development/fe_guide/style/scss.md @@ -212,13 +212,3 @@ catch any warnings. If the Rake task is throwing warnings you don't understand, SCSS Lint's documentation includes [a full list of their rules](https://stylelint.io/user-guide/rules/). - -### Fixing issues - -If you want to automate changing a large portion of the codebase to conform to -the SCSS style guide, you can use [CSSComb](https://github.com/csscomb/csscomb.js). First install -[Node](https://github.com/nodejs/node) and [npm](https://www.npmjs.com/), then run `npm install csscomb -g` to install -CSSComb globally (system-wide). Run it in the GitLab directory with -`csscomb app/assets/stylesheets` to automatically fix issues with CSS/SCSS. - -Note that this doesn't fix every problem, but it should fix a majority. diff --git a/doc/development/fe_guide/view_component.md b/doc/development/fe_guide/view_component.md index f9d148d8b82..0245110ec75 100644 --- a/doc/development/fe_guide/view_component.md +++ b/doc/development/fe_guide/view_component.md @@ -10,8 +10,8 @@ ViewComponent is a framework for creating reusable, testable & encapsulated view components with Ruby on Rails, without the need for a JavaScript framework like Vue. They are rendered server-side and can be seamlessly used with template languages like [Haml](haml.md). -Refer to the official [documentation](https://viewcomponent.org/) to learn more or -watch this [introduction video](https://youtu.be/akRhUbvtnmo). +For more information, see the [official documentation](https://viewcomponent.org/) or +[this introduction video](https://youtu.be/akRhUbvtnmo). ## Browse components with Lookbook diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md index 779010b8aa1..cea47bc0e4c 100644 --- a/doc/development/fe_guide/vue.md +++ b/doc/development/fe_guide/vue.md @@ -72,6 +72,54 @@ The advantage of providing data from the DOM to the Vue instance through `props` `provide` in the `render` function, instead of querying the DOM inside the main Vue component, is that you avoid creating a fixture or an HTML element in the unit test. +##### The `initSimpleApp` helper + +`initSimpleApp` is a helper function that streamlines the process of mounting a component in Vue.js. It accepts two arguments: a selector string representing the mount point in the HTML, and a Vue component. + +To use `initSimpleApp`, include the HTML element in the page with the appropriate selector and add a data-view-model attribute containing a JSON object. Then, import the desired Vue component and pass it along with the selector to `initSimpleApp`. This mounts the component at the specified location. + +`initSimpleApp` automatically retrieves the content of the data-view-model attribute as a JSON object and passes it as props to the mounted Vue component. This can be used to pre-populate the component with data. + +Example: + +```vue +//my_component.vue +<template> + <div> + <p>Prop1: {{ prop1 }}</p> + <p>Prop2: {{ prop2 }}</p> + </div> +</template> + +<script> +export default { + name: 'MyComponent', + props: { + prop1: { + type: String, + required: true + }, + prop2: { + type: Number, + required: true + } + } +} +</script> +``` + +```html +<div id="js-my-element" data-view-model='{"prop1": "my object", "prop2": 42 }'></div> +``` + +```javascript +//index.js +import MyComponent from './my_component.vue' +import initSimpleApp from '~/helpers/init_simple_app_helper' + +initSimpleApp('#js-my-element', MyComponent) +``` + ##### `provide` and `inject` Vue supports dependency injection through [`provide` and `inject`](https://v2.vuejs.org/v2/api/#provide-inject). |