Commit b57e3358 authored by Phil Hughes's avatar Phil Hughes

Merge branch 'filipa-master-patch-09545' into 'master'

Removes ifEE example for JS code.

See merge request gitlab-org/gitlab-ce!27408
parents f4114070 f1717dc7
...@@ -922,7 +922,7 @@ import mixin from 'ee_else_ce/path/mixin'; ...@@ -922,7 +922,7 @@ import mixin from 'ee_else_ce/path/mixin';
mixins: [mixin] mixins: [mixin]
} }
``` ```
- Computed Properties/methods and getters only used in the child import still need a counterpart in CE - Computed Properties/methods and getters only used in the child import still need a counterpart in CE
- For store modules, we will need a CE counterpart too. - For store modules, we will need a CE counterpart too.
...@@ -933,47 +933,27 @@ import mixin from 'ee_else_ce/path/mixin'; ...@@ -933,47 +933,27 @@ import mixin from 'ee_else_ce/path/mixin';
- Since we are using the async loading to check which component to load, we'd still use the component's name, check [this example](#child-component-only-used-in-ee). - Since we are using the async loading to check which component to load, we'd still use the component's name, check [this example](#child-component-only-used-in-ee).
* **EE extra HTML** * **EE extra HTML**
- For the templates that have extra HTML in EE we will use the `ifEE` mixin with the `v-if` directive. - For the templates that have extra HTML in EE we should move it into a new component and use the `ee_else_ce` dynamic import
- You can either use the `template` tag as a wrapper or directly in the element, if there is only one element to be rendered in EE:
```html
<template v-if="ifEE">
<p>Several</p>
<p>non wrapper</p>
<p>elements</p>
<p>that are rendered</p>
<p>in EE only</p>
</template>
```
```html
<ul v-if="ifEE">
<li>One wrapped</li>
<li>element</li>
<li>that is rendered</li>
<li>in EE only</li>
</template>
```
### Non Vue Files ### Non Vue Files
For regular JS files, the approach is similar. For regular JS files, the approach is similar.
1. We will keep using the [`ee_else_ce`](https://docs.gitlab.com/ee/development/ee_features.html#javascript-code-in-assetsjavascripts) helper, this means that EE only code should be inside the `ee/` folder. 1. We will keep using the [`ee_else_ce`](https://docs.gitlab.com/ee/development/ee_features.html#javascript-code-in-assetsjavascripts) helper, this means that EE only code should be inside the `ee/` folder.
1. An EE file should be created with the EE only code, and it should extend the CE counterpart. 1. An EE file should be created with the EE only code, and it should extend the CE counterpart.
1. For code inside functions that can't be extended, we will use an `if` statement with the `ifEE` helper 1. For code inside functions that can't be extended, the code should be moved into a new file and we should use `ee_else_ce` helper:
##### Example: ##### Example:
```javascript ```javascript
import { ifEE } from '~/lib/utils/common_utils' import eeCode from 'ee_else_ce/ee_code';
if (ifEE) {
$('.js-import-git-toggle-button').on('click', () => {
const $projectMirror = $('#project_mirror');
$projectMirror.attr('disabled', !$projectMirror.attr('disabled')); function test() {
}); const test = 'a';
}
eeCode();
return test;
}
``` ```
## SCSS code in `assets/stylesheets` ## SCSS code in `assets/stylesheets`
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment