daml/navigator/frontend
Moritz Kiefer 7c031f25f7
Upgrade rules_nodejs to version 1.6.0 (#5539)
* Upgrade rules_nodejs to version 1.6.0

closes #5367

This includes the fixes for the issues in jest that we’ve been seeing.

changelog_begin
changelog_end

* Fix eslint rules

* A bit of progress

* Try to add LinkablePackageInfo (doesn’t seem to work yet)

* Add rootDirs

* revert da_ts_library

* da_ts_library: add LinkablePackageInfo info

* Remove react hook workaround

Since rules_nodejs 1.6.0 this fails with the following error:
```
  ● Test suite failed to run

    Configuration error:

    Could not locate module react mapped as:
    /.../execroot/com_github_digital_asset_daml/bazel-out/k8-opt/bin/language-support/ts/daml-react/test.sh.runfiles/com_github_digital_asset_daml/node_modules/react/umd/react.development.js.

    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^react$/": "/.../execroot/com_github_digital_asset_daml/bazel-out/k8-opt/bin/language-support/ts/daml-react/test.sh.runfiles/com_github_digital_asset_daml/node_modules/react/umd/react.development.js"
      },
      "resolver": null
    }

      49 | // like a promis without being one.
      50 | /* eslint-disable @typescript-eslint/no-floating-promises */
    > 51 | var react_1 = __importStar(require("react"));
         |                            ^
      52 | var react_hooks_1 = require("@testing-library/react-hooks");
      53 | var index_1 = __importStar(require("./index"));
      54 | var events_1 = require("events");

      at createNoMappedModuleFoundError (../../../../../../../../../../../node_modules/jest-resolve/build/index.js:501:17)
      at Object.<anonymous> (index.test.js:51:28)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.88s
Ran all test suites within paths "language-support/ts/daml-react/DamlLedger.d.ts", "language-support/ts/daml-react/DamlLedger.js", "language-support/ts/daml-react/context.d.ts", "language-support/ts/daml-react/context.js", "language-support/ts/daml-react/hooks.d.ts", "language-support/ts/daml-react/hooks.js", "language-support/ts/daml-react/index.d.ts", "language-support/ts/daml-react/index.js", "language-support/ts/daml-react/index.test.d.ts", "language-support/ts/daml-react/index.test.js".
=
```

* rootDirs is not needed for tsc

This is only required for ts_project

* Update yarn Bazel packages

* docs/theme add missing dependencies

* Remove unused attribute module_root

Co-authored-by: Andreas Herrmann <andreas.herrmann@tweag.io>
2020-04-17 12:03:33 +00:00
..
src replace DAML Authors with DA in copyright headers (#5228) 2020-03-27 01:26:10 +01:00
.editorconfig open-sourcing daml 2019-04-04 09:33:38 +01:00
.gitignore open-sourcing daml 2019-04-04 09:33:38 +01:00
.modernizrrc open-sourcing daml 2019-04-04 09:33:38 +01:00
apollo.config.js replace DAML Authors with DA in copyright headers (#5228) 2020-03-27 01:26:10 +01:00
BUILD.bazel tarball reproducibility (#5258) 2020-03-31 10:09:52 +02:00
declarations.d.ts replace DAML Authors with DA in copyright headers (#5228) 2020-03-27 01:26:10 +01:00
karma.conf.js replace DAML Authors with DA in copyright headers (#5228) 2020-03-27 01:26:10 +01:00
LICENSE open-sourcing daml 2019-04-04 09:33:38 +01:00
Makefile Expose signatories and observers throughout the platform (#1814) 2019-06-26 14:02:59 +00:00
package.json Upgrade rules_nodejs to version 1.6.0 (#5539) 2020-04-17 12:03:33 +00:00
README.md refresh navigator dependencies (#1621) 2019-06-13 14:19:38 +02:00
tsconfig.json Update Navigator dependencies (#3550) 2020-02-19 23:51:32 +01:00
tslint.json Update Navigator dependencies (#3550) 2020-02-19 23:51:32 +01:00
webpack.config.js replace DAML Authors with DA in copyright headers (#5228) 2020-03-27 01:26:10 +01:00
webpack.ui-core.js replace DAML Authors with DA in copyright headers (#5228) 2020-03-27 01:26:10 +01:00
yarn.lock Upgrade rules_nodejs to version 1.6.0 (#5539) 2020-04-17 12:03:33 +00:00

Navigator Frontend

The Navigator frontend is based on the ui-core library.

Developing Navigator Frontend

To build the bundled frontend files, use Bazel:

bazel build //navigator/frontend:frontend.jar

To test the frontend during development, start the backend at port 4000 (defined in webpack.config.js), run the following command, and open a web browser at the address indicated in the command output:

make start

This will start an interactive build using webpack-dev-server. Every time you save a file, the frontend assets will be rebuilt, and a push notification will be sent to the browser, prompting it to reload the page.

See the ui-core README for information about the design of some of the core components of Navigator.

Configurable table views

Configurable table views are a rapid prototyping feature, where developers can write a script that returns a list of custom table views for a given user.

Architecture

  • The configsource applet is responsible for loading the config file.
    • The config file source is loaded from the backend /api/config endpoint.
    • The config file source is stored in the state of the applet.
  • The config file is parsed and evaluated in the app UI component.
    • The evaluated config is stored in the component state, and only re-evaluated if either the current user or the config file source has changed.
    • The evaluated config is passed as a property to child components.
  • The customview applet implements the rendering of custom views.
    • This applet forwards all functionality to either the Contracts, Templates, or TemplateContracts applets.
    • The route for custom views only contains its ID. Therefore, the state of the applet initially only holds the ID of the custom view.
    • When the applet UI component is rendered for the first time, it initializes the state of the child applet (it now has access to the evaluated config, passed as props from the app UI component).
  • Config file parsing and loading is implemented in the config module.
    • The config file is first preprocessed using Babel (to support JSX tags and ES6 code).
    • Import statements are implemented using a custom require function, that only provides modules already bundled with the Navigator.
    • The parsed config file is checked for its version.
    • There is generally little run time validation.