GitLab NPM Registry to support npm distribution tags (#9425) · Issues · GitLab.org / GitLab

GitLab NPM Registry to support npm distribution tags

Problem to solve

We know from a recent round of user research, that users typically navigate to the Package Registry user interface to accomplish one of three tasks:

To ensure my package was uploaded correctly (22.9%)
To look up which version of a package I should be using in my environment (21.7%)
To verify my CI pipeline built the package as expected

In order to verify that their package was uploaded correctly or to look up which version of a package should be used, users would like to use package meta data to identify the correct version of their package. NPM tags can be used to provide an alias instead of version numbers, making it easier to discover packages. For example, a project might choose to have multiple streams of development and use a different tag for each stream, e.g., stable, beta, dev, canary.

Target audience

Sasha, Software Developer, https://design.gitlab.com/research/personas#persona-sasha
Devon, DevOps Engineer, https://design.gitlab.com/research/personas#persona-devon

Further details

Proposal

Update the NPM Registry to add support for package tags when npm CLI interacts with the backend.

Adds 3 url endpoints to `NpmPackages` for tags handling.

Packages::Npm::

List all the tags within a given package:

$ npm dist-tag ls @root/bacon
latest: 1.4.0

Create a new tag:

$ npm dist-tag add @root/[email protected] tagme
+tagme: @root/[email protected]

$ npm dist-tag ls @root/bacon
latest: 1.4.0
tagme: 1.3.0

Use the tag when install the package:

$ npm install @root/[email protected]
npm WARN @root/[email protected] No repository field.

+ @root/[email protected]
updated 1 package in 15.692s

Remove the tag:

$ npm dist-tag rm @root/bacon tagme
-tagme: @root/[email protected]

$ npm dist-tag ls @root/bacon
latest: 1.4.0

UI

As we've been redesigning the Package Registry, we have included npm tags as part of that design. #12954 (closed) will capture the final design / work.

What does success look like, and how can we measure that?

Tags can be pushed, consumed, and displayed with GitLab.

Links / references

https://docs.npmjs.com/cli/dist-tag

### Problem to solve
We know from a recent [round of user research](https://gitlab.com/gitlab-org/uxr_insights/issues/623), that users typically navigate to the Package Registry user interface to accomplish one of three tasks:
1. To ensure my package was uploaded correctly (22.9%)
1. To look up which version of a package I should be using in my environment (21.7%)
1. To verify my CI pipeline built the package as expected

In order to verify that their package was uploaded correctly or to look up which version of a package should be used, users would like to use package meta data to identify the correct version of their package. NPM tags can be used to provide an alias instead of version numbers, making it easier to discover packages.  For example, a project might choose to have multiple streams of development and use a different tag for each stream, e.g., stable, beta, dev, canary.

### Target audience

- Sasha, Software Developer, https://design.gitlab.com/research/personas#persona-sasha

- Devon, DevOps Engineer, https://design.gitlab.com/research/personas#persona-devon

### Further details

### Proposal
Update the NPM Registry to add support for package tags when [`npm` CLI](https://docs.npmjs.com/cli/dist-tag) interacts with the backend.

#### Adds 3 url endpoints to `NpmPackages` for tags handling.

`Packages::Npm::`

List all the tags within a given package:
```
$ npm dist-tag ls @root/bacon
latest: 1.4.0
```

Create a new tag:
```
$ npm dist-tag add @root/bacon@1.3.0 tagme
+tagme: @root/bacon@1.3.0

$ npm dist-tag ls @root/bacon
latest: 1.4.0
tagme: 1.3.0
```

Use the tag when install the package:
```
$ npm install @root/bacon@tagme
npm WARN @root/client@1.0.0 No repository field.

+ @root/bacon@1.3.0
updated 1 package in 15.692s
```

Remove the tag:
```
$ npm dist-tag rm @root/bacon tagme
-tagme: @root/bacon@1.3.0

$ npm dist-tag ls @root/bacon
latest: 1.4.0
```
#### UI
As we've been redesigning the [Package Registry](https://gitlab.com/gitlab-org/gitlab/issues/31639), we have included npm tags as part of that design. https://gitlab.com/gitlab-org/gitlab/issues/12954 will capture the final design / work. 
![Test-Package-list-view](/uploads/42b09ab599d54b99bedefc508fc5b798/Test-Package-list-view.png)

### What does success look like, and how can we measure that?

Tags can be pushed, consumed, and displayed with GitLab.

### Links / references
- https://docs.npmjs.com/cli/dist-tag

Edited Jan 31, 2020 by Tim Rizzi