Commit 1fec6713 authored by Suzanne Selhorn's avatar Suzanne Selhorn

Removed extra whitespaces

Related to: https://gitlab.com/gitlab-org/technical-writing/-/issues/353
parent 413d2a37
...@@ -171,7 +171,7 @@ keys must be manually replicated to the **secondary** node. ...@@ -171,7 +171,7 @@ keys must be manually replicated to the **secondary** node.
``` ```
1. Verify SSH is still functional. 1. Verify SSH is still functional.
SSH into your GitLab **secondary** server in a new terminal. If you are unable to connect, SSH into your GitLab **secondary** server in a new terminal. If you are unable to connect,
verify the permissions are correct according to the previous steps. verify the permissions are correct according to the previous steps.
......
...@@ -185,7 +185,7 @@ Feature.enable(:ci_enable_live_trace) ...@@ -185,7 +185,7 @@ Feature.enable(:ci_enable_live_trace)
``` ```
NOTE: NOTE:
The transition period is handled gracefully. Upcoming logs are The transition period is handled gracefully. Upcoming logs are
generated with the incremental architecture, and on-going logs stay with the generated with the incremental architecture, and on-going logs stay with the
legacy architecture, which means that on-going logs aren't forcibly legacy architecture, which means that on-going logs aren't forcibly
re-generated with the incremental architecture. re-generated with the incremental architecture.
......
...@@ -601,7 +601,7 @@ If you use an external container registry, some features associated with the ...@@ -601,7 +601,7 @@ If you use an external container registry, some features associated with the
container registry may be unavailable or have [inherent risks](../../user/packages/container_registry/index.md#use-with-external-container-registries). container registry may be unavailable or have [inherent risks](../../user/packages/container_registry/index.md#use-with-external-container-registries).
For the integration to work, the external registry must be configured to For the integration to work, the external registry must be configured to
use a JSON Web Token to authenticate with GitLab. The use a JSON Web Token to authenticate with GitLab. The
[external registry's runtime configuration](https://docs.docker.com/registry/configuration/#token) [external registry's runtime configuration](https://docs.docker.com/registry/configuration/#token)
**must** have the following entries: **must** have the following entries:
......
...@@ -82,8 +82,8 @@ Support for legacy storage will be removed in GitLab 14.0. If you're on GitLab ...@@ -82,8 +82,8 @@ Support for legacy storage will be removed in GitLab 14.0. If you're on GitLab
The option to choose between hashed and legacy storage in the admin area has The option to choose between hashed and legacy storage in the admin area has
been disabled. been disabled.
This task must be run on any machine that has Rails/Sidekiq configured and will This task must be run on any machine that has Rails/Sidekiq configured and will
schedule all your existing projects and attachments associated with it to be schedule all your existing projects and attachments associated with it to be
migrated to the **Hashed** storage type: migrated to the **Hashed** storage type:
- **Omnibus installation** - **Omnibus installation**
......
...@@ -384,7 +384,7 @@ project = Project.find_by_full_path('PROJECT_PATH') ...@@ -384,7 +384,7 @@ project = Project.find_by_full_path('PROJECT_PATH')
Projects::ImportExport::ExportService.new(project, user).execute Projects::ImportExport::ExportService.new(project, user).execute
``` ```
If the project you wish to export is available at `https://gitlab.example.com/baltig/pipeline-templates`, the value to use for `PROJECT_PATH` would be `baltig/pipeline-templates`. If the project you wish to export is available at `https://gitlab.example.com/baltig/pipeline-templates`, the value to use for `PROJECT_PATH` would be `baltig/pipeline-templates`.
If this all runs successfully, you will see output like the following before being returned to the Rails console prompt: If this all runs successfully, you will see output like the following before being returned to the Rails console prompt:
...@@ -392,7 +392,7 @@ If this all runs successfully, you will see output like the following before bei ...@@ -392,7 +392,7 @@ If this all runs successfully, you will see output like the following before bei
=> nil => nil
``` ```
The exported project will be located within a `.tar.gz` file in `/var/opt/gitlab/gitlab-rails/uploads/-/system/import_export_upload/export_file/`. The exported project will be located within a `.tar.gz` file in `/var/opt/gitlab/gitlab-rails/uploads/-/system/import_export_upload/export_file/`.
## Repository ## Repository
...@@ -598,7 +598,7 @@ group = Group.find_by_path_or_name('group-name') ...@@ -598,7 +598,7 @@ group = Group.find_by_path_or_name('group-name')
group.project_creation_level=0 group.project_creation_level=0
``` ```
### Modify group - disable 2FA requirement ### Modify group - disable 2FA requirement
WARNING: WARNING:
When disabling the 2FA Requirement on a subgroup, the whole parent group (including all subgroups) is affected by this change. When disabling the 2FA Requirement on a subgroup, the whole parent group (including all subgroups) is affected by this change.
......
...@@ -134,7 +134,7 @@ operation of the pipeline. ...@@ -134,7 +134,7 @@ operation of the pipeline.
[In GitLab 13.7 and later](https://gitlab.com/gitlab-org/gitlab/-/issues/30101), [In GitLab 13.7 and later](https://gitlab.com/gitlab-org/gitlab/-/issues/30101),
all global variables with descriptions defined in the `.gitlab-ci.yml` file are all global variables with descriptions defined in the `.gitlab-ci.yml` file are
displayed in the variable fields. displayed in the variable fields.
To execute a pipeline manually: To execute a pipeline manually:
......
...@@ -17,7 +17,7 @@ WARNING: ...@@ -17,7 +17,7 @@ WARNING:
This feature might not be available to you. Check the **version history** note above for details. This feature might not be available to you. Check the **version history** note above for details.
To see a visualization of your `gitlab-ci.yml` configuration, navigate to **CI/CD > Editor** To see a visualization of your `gitlab-ci.yml` configuration, navigate to **CI/CD > Editor**
and select the `Visualization` tab. The visualization shows all stages and jobs. and select the `Visualization` tab. The visualization shows all stages and jobs.
[`needs`](README.md#needs) relationships are displayed as lines connecting jobs together, showing the hierarchy of execution: [`needs`](README.md#needs) relationships are displayed as lines connecting jobs together, showing the hierarchy of execution:
![CI Config Visualization](img/ci_config_visualization_v13_7.png) ![CI Config Visualization](img/ci_config_visualization_v13_7.png)
......
...@@ -203,7 +203,7 @@ There may be times when an index is only needed temporarily. ...@@ -203,7 +203,7 @@ There may be times when an index is only needed temporarily.
For example, in a migration, a column of a table might be conditionally For example, in a migration, a column of a table might be conditionally
updated. To query which columns need to be updated within the updated. To query which columns need to be updated within the
[query performance guidelines](query_performance.md), an index is needed that would otherwise [query performance guidelines](query_performance.md), an index is needed that would otherwise
not be used. not be used.
In these cases, a temporary index should be considered. To specify a In these cases, a temporary index should be considered. To specify a
temporary index: temporary index:
......
...@@ -38,7 +38,7 @@ You can run `kas` and `agentk` locally to test the [Kubernetes Agent](index.md) ...@@ -38,7 +38,7 @@ You can run `kas` and `agentk` locally to test the [Kubernetes Agent](index.md)
gdk start gdk start
# Stop GDK's version of kas # Stop GDK's version of kas
gdk stop gitlab-k8s-agent gdk stop gitlab-k8s-agent
# Start kas # Start kas
bazel run //cmd/kas -- --configuration-file="$(pwd)/cfg.yaml" bazel run //cmd/kas -- --configuration-file="$(pwd)/cfg.yaml"
``` ```
......
...@@ -112,14 +112,14 @@ the `.rubocop_todo.yml`. This also allows us greater visibility into the excepti ...@@ -112,14 +112,14 @@ the `.rubocop_todo.yml`. This also allows us greater visibility into the excepti
which are currently being resolved. which are currently being resolved.
One way to generate the initial list is to run the todo auto generation, One way to generate the initial list is to run the todo auto generation,
with `exclude limit` set to a high number. with `exclude limit` set to a high number.
```shell ```shell
bundle exec rubocop --auto-gen-config --auto-gen-only-exclude --exclude-limit=10000 bundle exec rubocop --auto-gen-config --auto-gen-only-exclude --exclude-limit=10000
``` ```
You can then move the list from the freshly generated `.rubocop_todo.yml` for the Cop being actively You can then move the list from the freshly generated `.rubocop_todo.yml` for the Cop being actively
resolved and place it in the `.rubocop_manual_todo.yml`. In this scenario, do not commit auto generated resolved and place it in the `.rubocop_manual_todo.yml`. In this scenario, do not commit auto generated
changes to the `.rubocop_todo.yml` as an `exclude limit` that is higher than 15 will make the changes to the `.rubocop_todo.yml` as an `exclude limit` that is higher than 15 will make the
`.rubocop_todo.yml` hard to parse. `.rubocop_todo.yml` hard to parse.
......
...@@ -43,7 +43,7 @@ It takes several arguments of which the measurement’s name is the only one req ...@@ -43,7 +43,7 @@ It takes several arguments of which the measurement’s name is the only one req
performance.measure('My component', 'my-component-start', 'my-component-end') performance.measure('My component', 'my-component-start', 'my-component-end')
``` ```
- Duration between a mark and the moment the measurement is taken. The end mark is omitted in - Duration between a mark and the moment the measurement is taken. The end mark is omitted in
this case. this case.
```javascript ```javascript
...@@ -197,7 +197,7 @@ app-*-end // for an end ‘mark’ ...@@ -197,7 +197,7 @@ app-*-end // for an end ‘mark’
app-* // for ‘measure’ app-* // for ‘measure’
``` ```
For example, `'webide-init-editor-start`, `mr-diffs-mark-file-tree-end`, and so on. We do it to For example, `'webide-init-editor-start`, `mr-diffs-mark-file-tree-end`, and so on. We do it to
help identify marks and measures coming from the different apps on the same page. help identify marks and measures coming from the different apps on the same page.
## Best Practices ## Best Practices
......
...@@ -119,7 +119,7 @@ Please check this [rules](https://github.com/vuejs/eslint-plugin-vue#bulb-rules) ...@@ -119,7 +119,7 @@ Please check this [rules](https://github.com/vuejs/eslint-plugin-vue#bulb-rules)
## Naming ## Naming
1. **Extensions**: Use `.vue` extension for Vue components. Do not use `.js` as file extension 1. **Extensions**: Use `.vue` extension for Vue components. Do not use `.js` as file extension
([#34371](https://gitlab.com/gitlab-org/gitlab-foss/-/issues/34371)). ([#34371](https://gitlab.com/gitlab-org/gitlab-foss/-/issues/34371)).
1. **Reference Naming**: Use PascalCase for their instances: 1. **Reference Naming**: Use PascalCase for their instances:
...@@ -403,7 +403,7 @@ When using `v-for` you need to provide a *unique* `:key` attribute for each item ...@@ -403,7 +403,7 @@ When using `v-for` you need to provide a *unique* `:key` attribute for each item
</div> </div>
``` ```
1. When using `v-for` with `template` and there is more than one child element, the `:key` values 1. When using `v-for` with `template` and there is more than one child element, the `:key` values
must be unique. It's advised to use `kebab-case` namespaces. must be unique. It's advised to use `kebab-case` namespaces.
```html ```html
...@@ -470,8 +470,8 @@ Useful links: ...@@ -470,8 +470,8 @@ Useful links:
## Vue testing ## Vue testing
Over time, a number of programming patterns and style preferences have emerged in our efforts to Over time, a number of programming patterns and style preferences have emerged in our efforts to
effectively test Vue components. The following guide describes some of these. effectively test Vue components. The following guide describes some of these.
**These are not strict guidelines**, but rather a collection of suggestions and good practices that **These are not strict guidelines**, but rather a collection of suggestions and good practices that
aim to provide insight into how we write Vue tests at GitLab. aim to provide insight into how we write Vue tests at GitLab.
...@@ -484,7 +484,7 @@ To achieve this: ...@@ -484,7 +484,7 @@ To achieve this:
1. Create a mutable `wrapper` variable inside the top-level `describe` block. 1. Create a mutable `wrapper` variable inside the top-level `describe` block.
1. Mount the component using [`mount`](https://vue-test-utils.vuejs.org/api/#mount)/ 1. Mount the component using [`mount`](https://vue-test-utils.vuejs.org/api/#mount)/
[`shallowMount`](https://vue-test-utils.vuejs.org/api/#shallowMount). [`shallowMount`](https://vue-test-utils.vuejs.org/api/#shallowMount).
1. Reassign the resulting [`Wrapper`](https://vue-test-utils.vuejs.org/api/wrapper/#wrapper) 1. Reassign the resulting [`Wrapper`](https://vue-test-utils.vuejs.org/api/wrapper/#wrapper)
instance to our `wrapper` variable. instance to our `wrapper` variable.
Creating a global, mutable wrapper provides a number of advantages, including the ability to: Creating a global, mutable wrapper provides a number of advantages, including the ability to:
...@@ -502,7 +502,7 @@ Creating a global, mutable wrapper provides a number of advantages, including th ...@@ -502,7 +502,7 @@ Creating a global, mutable wrapper provides a number of advantages, including th
}) })
``` ```
- Use a `beforeEach` block to mount the component (see - Use a `beforeEach` block to mount the component (see
[the `createComponent` factory](#the-createcomponent-factory) for more information). [the `createComponent` factory](#the-createcomponent-factory) for more information).
- Use an `afterEach` block to destroy the component, for example, `wrapper.destroy()`. - Use an `afterEach` block to destroy the component, for example, `wrapper.destroy()`.
...@@ -510,7 +510,7 @@ Creating a global, mutable wrapper provides a number of advantages, including th ...@@ -510,7 +510,7 @@ Creating a global, mutable wrapper provides a number of advantages, including th
To avoid duplicating our mounting logic, it's useful to define a `createComponent` factory function To avoid duplicating our mounting logic, it's useful to define a `createComponent` factory function
that we can reuse in each test block. This is a closure which should reassign our `wrapper` variable that we can reuse in each test block. This is a closure which should reassign our `wrapper` variable
to the result of [`mount`](https://vue-test-utils.vuejs.org/api/#mount) and to the result of [`mount`](https://vue-test-utils.vuejs.org/api/#mount) and
[`shallowMount`](https://vue-test-utils.vuejs.org/api/#shallowMount): [`shallowMount`](https://vue-test-utils.vuejs.org/api/#shallowMount):
```javascript ```javascript
...@@ -575,7 +575,7 @@ describe('MyComponent', () => { ...@@ -575,7 +575,7 @@ describe('MyComponent', () => {
1. Consider using a single (or a limited number of) object arguments over many arguments. 1. Consider using a single (or a limited number of) object arguments over many arguments.
Defining single parameters for common data like `props` is okay, Defining single parameters for common data like `props` is okay,
but keep in mind our [JavaScript style guide](javascript.md#limit-number-of-parameters) and but keep in mind our [JavaScript style guide](javascript.md#limit-number-of-parameters) and
stay within the parameter number limit: stay within the parameter number limit:
```javascript ```javascript
...@@ -630,12 +630,12 @@ component state wherever possible. Instead, set the component's ...@@ -630,12 +630,12 @@ component state wherever possible. Instead, set the component's
``` ```
The exception here is when you wish to test component reactivity in some way. The exception here is when you wish to test component reactivity in some way.
For example, you may want to test the output of a component when after a particular watcher has For example, you may want to test the output of a component when after a particular watcher has
executed. Using `setProps` to test such behavior is okay. executed. Using `setProps` to test such behavior is okay.
### Accessing component state ### Accessing component state
1. When accessing props or attributes, prefer the `wrapper.props('myProp')` syntax over 1. When accessing props or attributes, prefer the `wrapper.props('myProp')` syntax over
`wrapper.props().myProp` or `wrapper.vm.myProp`: `wrapper.props().myProp` or `wrapper.vm.myProp`:
```javascript ```javascript
...@@ -648,7 +648,7 @@ component state wherever possible. Instead, set the component's ...@@ -648,7 +648,7 @@ component state wherever possible. Instead, set the component's
expect(wrapper.attributes('myAttr')).toBe(true); expect(wrapper.attributes('myAttr')).toBe(true);
``` ```
1. When asserting multiple props, check the deep equality of the `props()` object with 1. When asserting multiple props, check the deep equality of the `props()` object with
[`toEqual`](https://jestjs.io/docs/en/expect#toequalvalue): [`toEqual`](https://jestjs.io/docs/en/expect#toequalvalue):
```javascript ```javascript
...@@ -665,8 +665,8 @@ component state wherever possible. Instead, set the component's ...@@ -665,8 +665,8 @@ component state wherever possible. Instead, set the component's
}); });
``` ```
1. If you are only interested in some of the props, you can use 1. If you are only interested in some of the props, you can use
[`toMatchObject`](https://jestjs.io/docs/en/expect#tomatchobjectobject). Prefer `toMatchObject` [`toMatchObject`](https://jestjs.io/docs/en/expect#tomatchobjectobject). Prefer `toMatchObject`
over [`expect.objectContaining`](https://jestjs.io/docs/en/expect#expectobjectcontainingobject): over [`expect.objectContaining`](https://jestjs.io/docs/en/expect#expectobjectcontainingobject):
```javascript ```javascript
...@@ -688,24 +688,24 @@ over [`expect.objectContaining`](https://jestjs.io/docs/en/expect#expectobjectco ...@@ -688,24 +688,24 @@ over [`expect.objectContaining`](https://jestjs.io/docs/en/expect#expectobjectco
The goal of this accord is to make sure we are all on the same page. The goal of this accord is to make sure we are all on the same page.
1. When writing Vue, you may not use jQuery in your application. 1. When writing Vue, you may not use jQuery in your application.
1. If you need to grab data from the DOM, you may query the DOM 1 time while bootstrapping your 1. If you need to grab data from the DOM, you may query the DOM 1 time while bootstrapping your
application to grab data attributes using `dataset`. You can do this without jQuery. application to grab data attributes using `dataset`. You can do this without jQuery.
1. You may use a jQuery dependency in Vue.js following [this example from the docs](https://vuejs.org/v2/examples/select2.html). 1. You may use a jQuery dependency in Vue.js following [this example from the docs](https://vuejs.org/v2/examples/select2.html).
1. If an outside jQuery Event needs to be listen to inside the Vue application, you may use 1. If an outside jQuery Event needs to be listen to inside the Vue application, you may use
jQuery event listeners. jQuery event listeners.
1. We avoid adding new jQuery events when they are not required. Instead of adding new jQuery 1. We avoid adding new jQuery events when they are not required. Instead of adding new jQuery
events take a look at [different methods to do the same task](https://vuejs.org/v2/api/#vm-emit). events take a look at [different methods to do the same task](https://vuejs.org/v2/api/#vm-emit).
1. You may query the `window` object one time, while bootstrapping your application for application 1. You may query the `window` object one time, while bootstrapping your application for application
specific data (for example, `scrollTo` is ok to access anytime). Do this access during the specific data (for example, `scrollTo` is ok to access anytime). Do this access during the
bootstrapping of your application. bootstrapping of your application.
1. You may have a temporary but immediate need to create technical debt by writing code that does 1. You may have a temporary but immediate need to create technical debt by writing code that does
not follow our standards, to be refactored later. Maintainers need to be ok with the tech debt in not follow our standards, to be refactored later. Maintainers need to be ok with the tech debt in
the first place. An issue should be created for that tech debt to evaluate it further and discuss. the first place. An issue should be created for that tech debt to evaluate it further and discuss.
In the coming months you should fix that tech debt, with its priority to be determined by maintainers. In the coming months you should fix that tech debt, with its priority to be determined by maintainers.
1. When creating tech debt you must write the tests for that code before hand and those tests may 1. When creating tech debt you must write the tests for that code before hand and those tests may
not be rewritten. For example, jQuery tests rewritten to Vue tests. not be rewritten. For example, jQuery tests rewritten to Vue tests.
1. You may choose to use VueX as a centralized state management. If you choose not to use VueX, you 1. You may choose to use VueX as a centralized state management. If you choose not to use VueX, you
must use the *store pattern* which can be found in the must use the *store pattern* which can be found in the
[Vue.js documentation](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch). [Vue.js documentation](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch).
1. Once you have chosen a centralized state-management solution you must use it for your entire 1. Once you have chosen a centralized state-management solution you must use it for your entire
application. Don't mix and match your state-management solutions. application. Don't mix and match your state-management solutions.
...@@ -22,7 +22,7 @@ All new features built with Vue.js must follow a [Flux architecture](https://fac ...@@ -22,7 +22,7 @@ All new features built with Vue.js must follow a [Flux architecture](https://fac
The main goal we are trying to achieve is to have only one data flow and only one data entry. 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). In order to achieve this goal we use [vuex](#vuex).
You can also read about this architecture in Vue docs about You can also read about this architecture in Vue docs about
[state management](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch) [state management](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch)
and about [one way data flow](https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow). and about [one way data flow](https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow).
...@@ -63,11 +63,11 @@ Be sure to read about [page-specific JavaScript](performance.md#page-specific-ja ...@@ -63,11 +63,11 @@ Be sure to read about [page-specific JavaScript](performance.md#page-specific-ja
While mounting a Vue application, you might need to provide data from Rails to JavaScript. While mounting a Vue application, you might need to provide data from Rails to JavaScript.
To do that, you can use the `data` attributes in the HTML element and query them while mounting the application. To do that, you can use the `data` attributes in the HTML element and query them while mounting the application.
You should only do this while initializing the application, because the mounted element is replaced You should only do this while initializing the application, because the mounted element is replaced
with a Vue-generated DOM. with a Vue-generated DOM.
The advantage of providing data from the DOM to the Vue instance through `props` in the `render` The advantage of providing data from the DOM to the Vue instance through `props` in the `render`
function instead of querying the DOM inside the main Vue component is avoiding the need to create a function instead of querying the DOM inside the main Vue component is avoiding the need to create a
fixture or an HTML element in the unit test, which makes the tests easier. fixture or an HTML element in the unit test, which makes the tests easier.
See the following example, also, please refer to our [Vue style guide](style/vue.md#basic-rules) for See the following example, also, please refer to our [Vue style guide](style/vue.md#basic-rules) for
...@@ -96,14 +96,14 @@ return new Vue({ ...@@ -96,14 +96,14 @@ return new Vue({
}); });
``` ```
> When adding an `id` attribute to mount a Vue application, please make sure this `id` is unique > When adding an `id` attribute to mount a Vue application, please make sure this `id` is unique
across the codebase. across the codebase.
#### Accessing the `gl` object #### Accessing the `gl` object
When we need to query the `gl` object for data that doesn't change during the application's life When we need to query the `gl` object for data that doesn't change during the application's life
cycle, we should do it in the same place where we query the DOM. By following this practice, we can cycle, we should do it in the same place where we query the DOM. By following this practice, we can
avoid the need to mock the `gl` object, which makes tests easier. It should be done while avoid the need to mock the `gl` object, which makes tests easier. It should be done while
initializing our Vue instance, and the data should be provided as `props` to the main component: initializing our Vue instance, and the data should be provided as `props` to the main component:
```javascript ```javascript
...@@ -196,17 +196,17 @@ Check this [page](vuex.md) for more details. ...@@ -196,17 +196,17 @@ Check this [page](vuex.md) for more details.
In the [Vue documentation](https://vuejs.org/v2/api/#Options-Data) the Data function/object is defined as follows: In the [Vue documentation](https://vuejs.org/v2/api/#Options-Data) the Data function/object is defined as follows:
> The data object for the Vue instance. Vue recursively converts its properties into getter/setters > The data object for the Vue instance. Vue recursively converts its properties into getter/setters
to make it “reactive”. The object must be plain: native objects such as browser API objects and to make it “reactive”. The object must be plain: native objects such as browser API objects and
prototype properties are ignored. A rule of thumb is that data should just be data - it is not prototype properties are ignored. A rule of thumb is that data should just be data - it is not
recommended to observe objects with their own stateful behavior. recommended to observe objects with their own stateful behavior.
Based on the Vue guidance: Based on the Vue guidance:
- **Do not** use or create a JavaScript class in your [data function](https://vuejs.org/v2/api/#data), - **Do not** use or create a JavaScript class in your [data function](https://vuejs.org/v2/api/#data),
such as `user: new User()`. such as `user: new User()`.
- **Do not** add new JavaScript class implementations. - **Do not** add new JavaScript class implementations.
- **Do** use [GraphQL](../api_graphql_styleguide.md), [Vuex](vuex.md) or a set of components if - **Do** use [GraphQL](../api_graphql_styleguide.md), [Vuex](vuex.md) or a set of components if
cannot use simple primitives or objects. cannot use simple primitives or objects.
- **Do** maintain existing implementations using such approaches. - **Do** maintain existing implementations using such approaches.
- **Do** Migrate components to a pure object model when there are substantial changes to it. - **Do** Migrate components to a pure object model when there are substantial changes to it.
...@@ -218,7 +218,7 @@ There are additional reasons why having a JavaScript class presents maintainabil ...@@ -218,7 +218,7 @@ There are additional reasons why having a JavaScript class presents maintainabil
- Once a class is created, it is easy to extend it in a way that can infringe Vue reactivity and best practices. - Once a class is created, it is easy to extend it in a way that can infringe Vue reactivity and best practices.
- A class adds a layer of abstraction, which makes the component API and its inner workings less clear. - A class adds a layer of abstraction, which makes the component API and its inner workings less clear.
- It makes it harder to test. Since the class is instantiated by the component data function, it is - It makes it harder to test. Since the class is instantiated by the component data function, it is
harder to 'manage' component and class separately. harder to 'manage' component and class separately.
- Adding OOP to a functional codebase adds yet another way of writing code, reducing consistency and clarity. - Adding OOP to a functional codebase adds yet another way of writing code, reducing consistency and clarity.
...@@ -339,7 +339,7 @@ need to test the rendered output. Visit the [Vue testing guide](https://vuejs.or ...@@ -339,7 +339,7 @@ need to test the rendered output. Visit the [Vue testing guide](https://vuejs.or
### Child components ### Child components
1. Test any directive that defines if/how child component is rendered (for example, `v-if` and `v-for`). 1. Test any directive that defines if/how child component is rendered (for example, `v-if` and `v-for`).
1. Test any props we are passing to child components (especially if the prop is calculated in the 1. Test any props we are passing to child components (especially if the prop is calculated in the
component under test, with the `computed` property, for example). Remember to use `.props()` and not `.vm.someProp`. component under test, with the `computed` property, for example). Remember to use `.props()` and not `.vm.someProp`.
1. Test we react correctly to any events emitted from child components: 1. Test we react correctly to any events emitted from child components:
...@@ -366,10 +366,10 @@ component under test, with the `computed` property, for example). Remember to us ...@@ -366,10 +366,10 @@ component under test, with the `computed` property, for example). Remember to us
### Events ### Events
We should test for events emitted in response to an action within our component, this is useful to We should test for events emitted in response to an action within our component, this is useful to
verify the correct events are being fired with the correct arguments. verify the correct events are being fired with the correct arguments.
For any DOM events we should use [`trigger`](https://vue-test-utils.vuejs.org/api/wrapper/#trigger) For any DOM events we should use [`trigger`](https://vue-test-utils.vuejs.org/api/wrapper/#trigger)
to fire out event. to fire out event.
```javascript ```javascript
...@@ -385,7 +385,7 @@ it('should fire the click event', () => { ...@@ -385,7 +385,7 @@ it('should fire the click event', () => {
}) })
``` ```
When we need to fire a Vue event, we should use [`emit`](https://vuejs.org/v2/guide/components-custom-events.html) When we need to fire a Vue event, we should use [`emit`](https://vuejs.org/v2/guide/components-custom-events.html)
to fire our event. to fire our event.
```javascript ```javascript
...@@ -399,7 +399,7 @@ it('should fire the itemClicked event', () => { ...@@ -399,7 +399,7 @@ it('should fire the itemClicked event', () => {
}) })
``` ```
We should verify an event has been fired by asserting against the result of the We should verify an event has been fired by asserting against the result of the
[`emitted()`](https://vue-test-utils.vuejs.org/api/wrapper/#emitted) method. [`emitted()`](https://vue-test-utils.vuejs.org/api/wrapper/#emitted) method.
## Vue.js Expert Role ## Vue.js Expert Role
...@@ -416,7 +416,7 @@ You should only apply to be a Vue.js expert when your own merge requests and you ...@@ -416,7 +416,7 @@ You should only apply to be a Vue.js expert when your own merge requests and you
> This section is added temporarily to support the efforts to migrate the codebase from Vue 2.x to Vue 3.x > This section is added temporarily to support the efforts to migrate the codebase from Vue 2.x to Vue 3.x
Currently, we recommend to minimize adding certain features to the codebase to prevent increasing Currently, we recommend to minimize adding certain features to the codebase to prevent increasing
the tech debt for the eventual migration: the tech debt for the eventual migration:
- filters; - filters;
...@@ -428,7 +428,7 @@ You can find more details on [Migration to Vue 3](vue3_migration.md) ...@@ -428,7 +428,7 @@ You can find more details on [Migration to Vue 3](vue3_migration.md)
## Appendix - Vue component subject under test ## Appendix - Vue component subject under test
This is the template for the example component which is tested in the This is the template for the example component which is tested in the
[Testing Vue components](#testing-vue-components) section: [Testing Vue components](#testing-vue-components) section:
```html ```html
......
...@@ -122,7 +122,7 @@ the actions used in configuration still exist as routes. ...@@ -122,7 +122,7 @@ the actions used in configuration still exist as routes.
## API endpoints ## API endpoints
The [GraphQL API](../../api/graphql/index.md) is currently categorized The [GraphQL API](../../api/graphql/index.md) is currently categorized
as `not_owned`. For now, no extra specification is needed. For more as `not_owned`. For now, no extra specification is needed. For more
information, see information, see
[`gitlab-com/gl-infra/scalability#583`](https://gitlab.com/gitlab-com/gl-infra/scalability/-/issues/583/). [`gitlab-com/gl-infra/scalability#583`](https://gitlab.com/gitlab-com/gl-infra/scalability/-/issues/583/).
......
...@@ -380,10 +380,10 @@ Feature.enable(:feature_flag_name, Project.find_by_full_path("root/my-project")) ...@@ -380,10 +380,10 @@ Feature.enable(:feature_flag_name, Project.find_by_full_path("root/my-project"))
### Removing a feature flag locally (in development) ### Removing a feature flag locally (in development)
When manually enabling or disabling a feature flag from the Rails console, its default value gets overwritten. When manually enabling or disabling a feature flag from the Rails console, its default value gets overwritten.
This can cause confusion when changing the flag's `default_enabled` attribute. This can cause confusion when changing the flag's `default_enabled` attribute.
To reset the feature flag to the default status, you can remove it in the rails console (`rails c`) To reset the feature flag to the default status, you can remove it in the rails console (`rails c`)
as follows: as follows:
```ruby ```ruby
......
# Set up local Codesandbox development environment # Set up local Codesandbox development environment
This guide walks through setting up a local [Codesandbox repository](https://github.com/codesandbox/codesandbox-client) and integrating it with a local GitLab instance. Codesandbox This guide walks through setting up a local [Codesandbox repository](https://github.com/codesandbox/codesandbox-client) and integrating it with a local GitLab instance. Codesandbox
is used to power the Web IDE's [Live Preview feature](../../user/project/web_ide/index.md#live-preview). Having a local Codesandbox setup is useful for debugging upstream issues or is used to power the Web IDE's [Live Preview feature](../../user/project/web_ide/index.md#live-preview). Having a local Codesandbox setup is useful for debugging upstream issues or
creating upstream contributions like [this one](https://github.com/codesandbox/codesandbox-client/pull/5137). creating upstream contributions like [this one](https://github.com/codesandbox/codesandbox-client/pull/5137).
## Initial setup ## Initial setup
...@@ -59,7 +59,7 @@ to use a locally-built module. To build and use a local `smooshpack` module: ...@@ -59,7 +59,7 @@ to use a locally-built module. To build and use a local `smooshpack` module:
yarn run start yarn run start
``` ```
Now, in the GitLab project, you can run `yarn link "smooshpack"`. `yarn` looks Now, in the GitLab project, you can run `yarn link "smooshpack"`. `yarn` looks
for `smooshpack` **on disk** as opposed to the one hosted remotely. for `smooshpack` **on disk** as opposed to the one hosted remotely.
1. In the `gitlab` project directory, run: 1. In the `gitlab` project directory, run:
...@@ -110,7 +110,7 @@ npx http-server --proxy http://localhost:3000 -S -C $PATH_TO_CERT_PEM -K $PATH_T ...@@ -110,7 +110,7 @@ npx http-server --proxy http://localhost:3000 -S -C $PATH_TO_CERT_PEM -K $PATH_T
### Update `bundler_url` setting in GitLab ### Update `bundler_url` setting in GitLab
We need to update our `application_setting_implementation.rb` to point to the server that hosts the We need to update our `application_setting_implementation.rb` to point to the server that hosts the
Codesandbox `sandpack` assets. For instance, if these assets are hosted by a server at `https://sandpack.local:8044`: Codesandbox `sandpack` assets. For instance, if these assets are hosted by a server at `https://sandpack.local:8044`:
```patch ```patch
...@@ -125,7 +125,7 @@ index 6eed627b502..1824669e881 100644 ...@@ -125,7 +125,7 @@ index 6eed627b502..1824669e881 100644
- 'https://sandbox-prod.gitlab-static.net' - 'https://sandbox-prod.gitlab-static.net'
+ 'https://sandpack.local:8044' + 'https://sandpack.local:8044'
end end
private private
``` ```
......
...@@ -278,10 +278,10 @@ In GitLab 12.1 and later, only PostgreSQL is supported. In GitLab 13.0 and later ...@@ -278,10 +278,10 @@ In GitLab 12.1 and later, only PostgreSQL is supported. In GitLab 13.0 and later
```shell ```shell
sudo apt install -y postgresql postgresql-client libpq-dev postgresql-contrib sudo apt install -y postgresql postgresql-client libpq-dev postgresql-contrib
``` ```
For Ubuntu 18.04 and earlier, the available PostgreSQL doesn't meet the minimum For Ubuntu 18.04 and earlier, the available PostgreSQL doesn't meet the minimum
version requirement. You need to add PostgreSQL's repository: version requirement. You need to add PostgreSQL's repository:
```shell ```shell
wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add - wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
RELEASE=$(lsb_release -cs) echo "deb http://apt.postgresql.org/pub/repos/apt/ ${RELEASE}"-pgdg main | sudo tee /etc/apt/sources.list.d/pgdg.list RELEASE=$(lsb_release -cs) echo "deb http://apt.postgresql.org/pub/repos/apt/ ${RELEASE}"-pgdg main | sudo tee /etc/apt/sources.list.d/pgdg.list
...@@ -1058,7 +1058,7 @@ sudo yum groupinstall 'Development Tools' ...@@ -1058,7 +1058,7 @@ sudo yum groupinstall 'Development Tools'
While compiling assets, you may receive the following error message: While compiling assets, you may receive the following error message:
```plaintext ```plaintext
Killed Killed
error Command failed with exit code 137. error Command failed with exit code 137.
``` ```
......
...@@ -50,8 +50,8 @@ The DevOps Adoption tab shows you which segments of your organization are using ...@@ -50,8 +50,8 @@ The DevOps Adoption tab shows you which segments of your organization are using
- Deploys - Deploys
- Scanning - Scanning
Segments are arbitrary collections of GitLab groups that you define. You might define a segment to represent a small team, a large department, or a whole organization. Segments are arbitrary collections of GitLab groups that you define. You might define a segment to represent a small team, a large department, or a whole organization.
You are limited to creating a maximum of 20 segments, and each segment is limited to a maximum of 20 groups. You are limited to creating a maximum of 20 segments, and each segment is limited to a maximum of 20 groups.
Buttons to manage your segments appear in the DevOps Adoption section of the page. Buttons to manage your segments appear in the DevOps Adoption section of the page.
DevOps Adoption allows you to: DevOps Adoption allows you to:
......
...@@ -92,7 +92,7 @@ the **Failed jobs** tab of the pipeline page. ...@@ -92,7 +92,7 @@ the **Failed jobs** tab of the pipeline page.
The Vulnerability Report next displays the total number of vulnerabilities by severity (for example, The Vulnerability Report next displays the total number of vulnerabilities by severity (for example,
Critical, High, Medium, Low, Info, Unknown). Below this, a table shows each vulnerability's status, severity, Critical, High, Medium, Low, Info, Unknown). Below this, a table shows each vulnerability's status, severity,
description and if there is a Merge Request related to it. Clicking a vulnerability takes you to its description and if there is a Merge Request related to it. Clicking a vulnerability takes you to its
[Vulnerability Details](../vulnerabilities) [Vulnerability Details](../vulnerabilities)
page to view more information about that vulnerability. page to view more information about that vulnerability.
......
...@@ -117,7 +117,7 @@ Follow the same process to create any subsequent groups. ...@@ -117,7 +117,7 @@ Follow the same process to create any subsequent groups.
## Membership ## Membership
When you add a member to a group, that member is also added to all subgroups. When you add a member to a group, that member is also added to all subgroups.
Permission level is inherited from the group’s parent. This model allows access to Permission level is inherited from the group’s parent. This model allows access to
subgroups if you have membership in one of its parents. subgroups if you have membership in one of its parents.
Jobs for pipelines in subgroups can use [runners](../../../ci/runners/README.md) registered to the parent group(s). Jobs for pipelines in subgroups can use [runners](../../../ci/runners/README.md) registered to the parent group(s).
......
...@@ -77,8 +77,8 @@ Prerequisites: ...@@ -77,8 +77,8 @@ Prerequisites:
- A package in a GitLab repository. Composer packages should be versioned based on - A package in a GitLab repository. Composer packages should be versioned based on
the [Composer specification](https://getcomposer.org/doc/04-schema.md#version). the [Composer specification](https://getcomposer.org/doc/04-schema.md#version).
If the version is not valid, for example, it has three dots (`1.0.0.0`), an If the version is not valid, for example, it has three dots (`1.0.0.0`), an
error (`Validation failed: Version is invalid`) occurs when you publish. error (`Validation failed: Version is invalid`) occurs when you publish.
- A valid `composer.json` file. - A valid `composer.json` file.
- The Packages feature is enabled in a GitLab repository. - The Packages feature is enabled in a GitLab repository.
- The project ID, which is on the project's home page. - The project ID, which is on the project's home page.
......
...@@ -396,7 +396,7 @@ When you attempt to install a Conan package, you might receive a `404` error ...@@ -396,7 +396,7 @@ When you attempt to install a Conan package, you might receive a `404` error
like `ERROR: <package> was not found in remote <remote>`. like `ERROR: <package> was not found in remote <remote>`.
This issue occurs when you request a download from the project-level Conan API. This issue occurs when you request a download from the project-level Conan API.
The resulting URL is missing is project's `/<id>` and Conan commands, like The resulting URL is missing is project's `/<id>` and Conan commands, like
`conan install`, fail. `conan install`, fail.
For more information, see [issue 270129](https://gitlab.com/gitlab-org/gitlab/-/issues/270129). For more information, see [issue 270129](https://gitlab.com/gitlab-org/gitlab/-/issues/270129).
...@@ -72,7 +72,7 @@ To use the GitLab endpoint for NuGet Packages, choose an option: ...@@ -72,7 +72,7 @@ To use the GitLab endpoint for NuGet Packages, choose an option:
Some features such as [publishing](#publish-a-nuget-package) a package are only available on the project-level endpoint. Some features such as [publishing](#publish-a-nuget-package) a package are only available on the project-level endpoint.
WARNING: WARNING:
Because of how NuGet handles credentials, the Package Registry rejects anonymous requests on the group-level endpoint. Because of how NuGet handles credentials, the Package Registry rejects anonymous requests on the group-level endpoint.
To work around this limitation, set up [authentication](#add-the-package-registry-as-a-source-for-nuget-packages). To work around this limitation, set up [authentication](#add-the-package-registry-as-a-source-for-nuget-packages).
## Add the Package Registry as a source for NuGet packages ## Add the Package Registry as a source for NuGet packages
...@@ -90,7 +90,7 @@ Prerequisites: ...@@ -90,7 +90,7 @@ Prerequisites:
with the scope set to `read_package_registry`, `write_package_registry`, or with the scope set to `read_package_registry`, `write_package_registry`, or
both. both.
- A name for your source. - A name for your source.
- Depending on the [endpoint level](#use-the-gitlab-endpoint-for-nuget-packages) you use, either: - Depending on the [endpoint level](#use-the-gitlab-endpoint-for-nuget-packages) you use, either:
- Your project ID, which is found on your project's home page. - Your project ID, which is found on your project's home page.
- Your group ID, which is found on your group's home page. - Your group ID, which is found on your group's home page.
......
...@@ -68,7 +68,7 @@ For Conan, you need to add GitLab as a Conan registry remote. Follow the instruc ...@@ -68,7 +68,7 @@ For Conan, you need to add GitLab as a Conan registry remote. Follow the instruc
Then, create your package using the plus-separated (`+`) project path as your Conan user. For example, Then, create your package using the plus-separated (`+`) project path as your Conan user. For example,
if your project is located at `https://gitlab.com/foo/bar/my-proj`, if your project is located at `https://gitlab.com/foo/bar/my-proj`,
[create your Conan package](../conan_repository/index.md) using `conan create . foo+bar+my-proj/channel`. [create your Conan package](../conan_repository/index.md) using `conan create . foo+bar+my-proj/channel`.
`channel` is your package channel (such as `stable` or `beta`). `channel` is your package channel (such as `stable` or `beta`).
After you create your package, you're ready to [publish your package](../conan_repository/index.md#publish-a-conan-package), After you create your package, you're ready to [publish your package](../conan_repository/index.md#publish-a-conan-package),
depending on your final package recipe. For example: depending on your final package recipe. For example:
......
...@@ -398,7 +398,7 @@ a new set of recovery codes with SSH: ...@@ -398,7 +398,7 @@ a new set of recovery codes with SSH:
```shell ```shell
ssh git@gitlab.com 2fa_recovery_codes ssh git@gitlab.com 2fa_recovery_codes
``` ```
NOTE: NOTE:
On self-managed instances, replace **`gitlab.com`** in the command above On self-managed instances, replace **`gitlab.com`** in the command above
with the GitLab server hostname (`gitlab.example.com`). with the GitLab server hostname (`gitlab.example.com`).
......
...@@ -108,7 +108,7 @@ you should be fine. ...@@ -108,7 +108,7 @@ you should be fine.
![Default issue description templates](img/description_templates_issue_settings.png) ![Default issue description templates](img/description_templates_issue_settings.png)
After you add the description, hit **Save changes** for the settings to take After you add the description, hit **Save changes** for the settings to take
effect. Now, every time a new merge request or issue is created, it is effect. Now, every time a new merge request or issue is created, it is
pre-filled with the text you entered in the template(s). pre-filled with the text you entered in the template(s).
## Description template example ## Description template example
......
...@@ -103,7 +103,7 @@ for private forks created in the same group or in a sub-group of the original ...@@ -103,7 +103,7 @@ for private forks created in the same group or in a sub-group of the original
Permissions are inherited from parent groups. When private forks are created Permissions are inherited from parent groups. When private forks are created
in the same group or sub-group as the original upstream repository, users in the same group or sub-group as the original upstream repository, users
receive the same permissions in both projects. This inheritance ensures receive the same permissions in both projects. This inheritance ensures
Developer users have the needed permissions to both view confidential issues and Developer users have the needed permissions to both view confidential issues and
resolve them. resolve them.
### How it works ### How it works
......
...@@ -137,7 +137,7 @@ To edit the custom email display name: ...@@ -137,7 +137,7 @@ To edit the custom email display name:
1. Enter a new name in **Email display name**. 1. Enter a new name in **Email display name**.
1. Select **Save Changes**. 1. Select **Save Changes**.
### Using custom email address ### Using custom email address
> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/2201) in [GitLab Premium](https://about.gitlab.com/pricing/) 13.0. > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/2201) in [GitLab Premium](https://about.gitlab.com/pricing/) 13.0.
> - It was [deployed behind a feature flag](../feature_flags.md), disabled by default. > - It was [deployed behind a feature flag](../feature_flags.md), disabled by default.
......
...@@ -72,7 +72,7 @@ prevent data loss, in the case where a user's access is accidentally revoked. ...@@ -72,7 +72,7 @@ prevent data loss, in the case where a user's access is accidentally revoked.
> [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/7926) in GitLab 9.0. > [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/7926) in GitLab 9.0.
If you're mentioned at the start of a line, the to-do item you receive is If you're mentioned at the start of a line, the to-do item you receive is
listed as *directly addressed*. For example, in the following comment: listed as *directly addressed*. For example, in the following comment:
```markdown ```markdown
......
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