Gerrit Polymer Frontend

Warning: DON'T ADD MORE TYPESCRIPT FILES/TYPES. Gerrit Polymer Frontend contains several typescript files and uses typescript compiler. This is a preparation for the upcoming migration to typescript and we actively working on it. We want to avoid massive typescript-related changes until the preparation work is done. Thanks for your understanding!

Follow the setup instructions for Gerrit backend developers where applicable, the most important command is:

git clone --recurse-submodules https://gerrit.googlesource.com/gerrit

The --recurse-submodules option is needed on git clone to ensure that the core plugins, which are included as git submodules, are also cloned.

Installing Bazel

Follow the instructions here to get and install Bazel.

Installing Node.js and npm packages

Note: Switch between an old branch with bower_components and a new branch with ui-npm packages (or vice versa) can lead to some build errors. To avoid such errors clean up the build repository:

rm -rf node_modules/ \
    polygerrit-ui/node_modules/ \
    polygerrit-ui/app/node_modules \
    tools/node_tools/node_modules

bazel clean

If it doesn't help also try to run

bazel clean --expunge

The minimum nodejs version supported is 8.x+

# Debian experimental
sudo apt-get install nodejs
sudo apt-get install npm

# OS X with Homebrew
brew install node
brew install npm

All other platforms: download from nodejs.org.

or use nvm - Node Version Manager.

Additional packages

We have several bazel commands to install packages we may need for FE development.

For first time users to get the local server up, npm start should be enough and will take care of all of them for you.

# Install packages from root-level packages.json
bazel fetch @npm//:node_modules

# Install packages from polygerrit-ui/app/packages.json
bazel fetch @ui_npm//:node_modules

# Install packages from polygerrit-ui/packages.json
bazel fetch @ui_dev_npm//:node_modules

# Install packages from tools/node_tools/packages.json
bazel fetch @tools_npm//:node_modules

More information for installing and using nodejs rules can be found here https://bazelbuild.github.io/rules_nodejs/install.html

Setup typescript support in the IDE

Modern IDE should automatically handle typescript settings from the pollygerrit-ui/app/tsconfig.json files. IDE places compiled files in the .ts-out/pg directory at the root of gerrit workspace and you can configure IDE to exclude the whole .ts-out directory. To do it in the IntelliJ IDEA click on this directory and select “Mark Directory As > Excluded” in the context menu.

However, if you receive some errors from IDE, you can try to configure IDE manually. For example, if IntelliJ IDEA shows Cannot find parent 'tsconfig.json' error, you can try to setup typescript options --project polygerrit-ui/app/tsconfig.json in the IDE settings.

Serving files locally

Go server

To test the local Polymer frontend against production data or a local test site execute:

./polygerrit-ui/run-server.sh

// or
npm run start

These commands start the simple hand-written Go webserver. Mostly it just switches between serving files locally and proxying the real server based on the file name. It also does some basic response rewriting, e.g. it patches the config/server/info response with plugin information provided on the command line:

./polygerrit-ui/run-server.sh --plugins=plugins/my_plugin/static/my_plugin.js,plugins/my_plugin/static/my_plugin.html

If any issues occured, please refer to the Troubleshooting section at the bottom or contact the team!

Running locally against production data

Local website

Start Go server and then visit http://localhost:8081

The biggest draw back of this method is that you cannot log in, so cannot test scenarios that require it.

Chrome extension: Gerrit FE Dev Helper

To be able to bypass the auth and also help improve the productivity of Gerrit FE developers, we created this chrome extension: Gerrit FE Dev Helper.

It basically works as a proxy that will block / redirect requests from current sites to any given url base on certain rules.

The source code is in Gerrit - gerrit-fe-dev-helper, contributions are welcomed!

To use this extension, just follow its readme here.

Running locally against a Gerrit test site

Set up a local test site once:

1. Build Gerrit
2. Set up a local test site.
3. Optionally populate your test site with some test data.

For running a locally built Gerrit war against your test instance use this command.

If you want to serve the Polymer frontend directly from the sources in polygerrit_ui/app/ instead of from the war:

1. Start Go server
2. Add the --dev-cdn option:

$(bazel info output_base)/external/local_jdk/bin/java \
    -DsourceRoot=$(bazel info workspace) \
    -jar bazel-bin/gerrit.war daemon \
    -d $GERRIT_SITE \
    --console-log \
    --dev-cdn http://localhost:8081

NOTE You can use any other cdn here, for example: https://cdn.googlesource.com/polygerrit_ui/678.0

Running Tests

For daily development you typically only want to run and debug individual tests. There are several ways to run tests.

• Run all tests in headless mode (exactly like CI does):

npm run test

This command uses bazel rules for running frontend tests. Bazel fetches all nessecary dependencies and runs all required rules.

• Run all tests in debug mode (the command opens Chrome browser with the default Karma page; you should click the “Debug” button to start testing):

# The following command doesn't compile code before tests
npm run test:debug

• Run a single test file:

# Headless mode (doesn't compile code before run)
npm run test:single async-foreach-behavior_test.js

# Debug mode (doesn't compile code before run)
npm run test:debug async-foreach-behavior_test.js

Commands test:debug and test:single assumes that compiled code is located in the ./ts-out/polygerrit-ui/app directory. It's up to you how to achieve it. For example, the following options are possible:

• You can configure IDE for recompiling source code on changes
• You can use compile:local command for running compiler once and compile:watch for running compiler in watch mode (compile:... places compile code exactly in the ./ts-out/polygerrit-ui/app directory)

# Compile frontend once and run tests from a file:
npm run compile:local && npm run test:single async-foreach-behavior_test.js

# Watch mode:
## Terminal 1:
npm run compile:watch
## Terminal 2:
npm run test:debug async-foreach-behavior_test.js

• You can run tests in IDE. :
  • IntelliJ: running unit tests on Karma
  • You should configure IDE to compile typescript before running tests.

NOTE: Bazel plugin for IntelliJ has a bug - it recompiles typescript project only if .ts and/or .d.ts files have been changed. If only .js files were changed, the plugin doesn't run compiler. As a workaround, setup “Run npm script 'compile:local” action instead of the “Compile Typescript” in the “Before launch” section for IntelliJ. This is a temporary problem until typescript migration is complete.

Style guide

We follow the Google JavaScript Style Guide with a few exceptions. When in doubt, remain consistent with the code around you.

In addition, we encourage the use of ESLint. It is available as a command line utility, as well as a plugin for most editors and IDEs.

eslint-config-google is a port of the Google JS Style Guide to an ESLint config module, and eslint-plugin-html allows ESLint to lint scripts inside HTML. We have an .eslintrc.json config file in the polygerrit-ui/ directory configured to enforce the preferred style of the PolyGerrit project. After installing, you can use eslint on any new file you create. In addition, you can supply the --fix flag to apply some suggested fixes for simple style issues. If you modify JS inside of <script> tags, like for test suites, you may have to supply the --ext .html flag.

Some useful commands:

• To run ESLint on the whole app, less some dependency code:

npm run eslint

• To run ESLint on just the subdirectory you modified:

node_modules/eslint/bin/eslint.js --ext .html,.js polygerrit-ui/app/$YOUR_DIR_HERE

• To run the linter on all of your local changes:

git diff --name-only HEAD | xargs node_modules/eslint/bin/eslint.js --ext .html,.js

We also use the polylint tool to lint use of Polymer. To install polylint, execute the following command.

To run polylint, execute the following command.

bazel test //polygerrit-ui/app:polylint_test

or

npm run polylint

Template Type Safety

Warning: This feature is temporary disabled, because it doesn't work with Polymer 2 and Polymer 3. Some of the checks are made by polymer linter.

Polymer elements are not type checked against the element definition, making it trivial to break the display when refactoring or moving code. We now run additional tests to help ensure that template types are checked.

A few notes to ensure that these tests pass

• Any functions with optional parameters will need closure annotations.
• Any Polymer parameters that are nullable or can be multiple types (other than the one explicitly delared) will need type annotations.

These tests require the typescript and fried-twinkie npm packages.

To run on all files, execute the following command:

./polygerrit-ui/app/run_template_test.sh

or

npm run test-template

To run on a specific top level directory (ex: change-list)

TEMPLATE_NO_DEFAULT=true ./polygerrit-ui/app/run_template_test.sh //polygerrit-ui/app:template_test_change-list

To run on a specific file (ex: gr-change-list-view), execute the following command:

TEMPLATE_NO_DEFAULT=true ./polygerrit-ui/app/run_template_test.sh //polygerrit-ui/app:template_test_<TOP_LEVEL_DIRECTORY> --test_arg=<VIEW_NAME>

TEMPLATE_NO_DEFAULT=true ./polygerrit-ui/app/run_template_test.sh //polygerrit-ui/app:template_test_change-list --test_arg=gr-change-list-view

Contributing

Our users report bugs / feature requests related to the UI through Monorail Issues - PolyGerrit.

If you want to help, feel free to grab one from those New issues without assignees and send us a change.

If you don't know who to assign to review your code change, you can use this special account: gerrit-fe-reviewers@api-project-164060093628.iam.gserviceaccount.com and just assign to that account, it will automatically pick two volunteers from the queue we have for FE reviewers.

If you are willing to join the queue and help the community review changes, you can create an issue through Monorail and request to join the queue! We will review your request and start from there.

Troubleshotting & Frequently asked questions

1. Local host is blank page and console shows missing files from polymer-bridges

Its likely you missed the polymer-bridges submodule when you clone the gerrit repo.

To fix that, run:

// fetch the submodule
git submodule update --init --recursive

// reset the workspace (please save your local changes before running this command)
npm run clean

// install all dependencies and start the server
npm start