theforeman / foreman-js

Foreman js tools

foreman-js

theforeman javascript packages

What is foreman-js?

This project is a monorepo using lerna to host more than one package. Projects maintained by https://theforeman.org.

Background

The work on this repository started based on a discussion on community.theforeman.org about refactoring the JavaScript stack of Foreman.

• See discussion.
• Watch the deep dive explaining the redesign.

Vendor packages

Foreman and its plugins use many of the same JavaScript dependencies (npm packages). The main purpose of vendor is to gather these common dependencies into a single package.

• @theforeman/vendor-core - This is the actual list of common dependencies. Is a dependency of vendor and vendor-dev.
• @theforeman/vendor - The dependencies in vendor-core, bundled to be used in Webpack.
• @theforeman/vendor-dev - The dependencies in vendor-core, unbundled for use in development.

Note: In Foreman & plugins JavaScript code, you do not need to import anything explicitly from vendor (import react from '@theforeman/vendor'); you can continue to import all modules like normal (import react from 'react';).

In your CSS code, the @import statements do need to be explicit; see this part of @theforeman/vendor readme.

Other packages

• @theforeman/builder - Provides scripts (npm run build) to build production and development bundle files for Foreman core and plugins.
• @theforeman/test - Adds theforeman testing tools to you project, including jest, enzyme and other utils.
• @theforeman/eslint-plugin-foreman - Shared eslint configuration. Opinionated styling for Foreman core and plugins.
• @theforeman/eslint-plugin-rules - Shared eslint custom rules. Opinionated styling for Foreman core and plugins.
• @theforeman/find-foreman - Package to find full path of Foreman relative to Foreman plugin.

Contributing

Please check out the CONTRIBUTING.md, the roadmap.md and the open issues.

foreman-js's Issues

Include @patternfly/react-charts in foreman-js

Opening this to discuss if other plugins are using this?
I specifically need the DonutChart to present task progress so open to other suggestions based on implementation in other projects.
This works for me right now by adding @patternfly/react-charts to katello package.json dependency:

<ChartDonut
   ariaDesc="Publishing Content View"
   ariaTitle="Publishing Content View"
   data={[{ x: 'Completed', y: progress}, { x: 'Pending', y: 100 - progress}]}
   labels={({ datum }) => `${datum.x}: ${datum.y}%`}
   title="Publishing"
   colorScale={taskErrored? ['#FF0000', '#F08080'] : ['#008000', '#8FBC8F']}
 />

npm ERR! enoent ENOENT: no such file or directory '/.../@theforeman/env/bin/tfm-test.js'

I'm submitting a…

• Regression (a behavior that used to work and stopped working in a new release)
• Bug report
• Feature request
• Documentation issue or request
• Support request

Expected Behavior

running npm install @theforeman/env should work

Current Behavior

running npm install @theforeman/env causing an error:

npm ERR! code ENOENT
npm ERR! syscall chmod
npm ERR! path /home/jenkins/workspace/foreman_ansible-pull-request/database/postgresql/label/fast/ruby/2.5/foreman/node_modules/@theforeman/env/bin/tfm-test.js
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, chmod '/home/jenkins/workspace/foreman_ansible-pull-request/database/postgresql/label/fast/ruby/2.5/foreman/node_modules/@theforeman/env/bin/tfm-test.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

Possible Solution

• Remove the tfm-test command from the package bin
• Give exec permissions to the ./bin/tfm-test.js file

Steps to Reproduce (for bugs)

Run npm install @theforeman/env

Environment

• foreman-js version: 3.7.0

Warning: componentWillReceiveProps has been renamed...

This warning appears in the console, due to react-dom version
Warning: componentWillReceiveProps has been renamed, and is not recommended for use.

• Regression (a behavior that used to work and stopped working in a new release)
• Bug report
• Feature request
• Documentation issue or request
• Support request

Can't run tests when installing @theforeman/test from source

I'm submitting a…

• Regression (a behavior that used to work and stopped working in a new release)
• Bug report
• Feature request
• Documentation issue or request
• Support request

Steps to Reproduce (for bugs)

1. Change the package.json to load @theforeman/test from source:

-    "@theforeman/test": "^4.0.2",
+    "@theforeman/test": "../foreman-js/packages/test",

2. run npm install then npm test

Expected Behavior

Test should run normally

Current Behavior

I am getting this error:

> [email protected] test /home/sharvit/Projects/open-source/theforeman/foreman-tasks
> tfm-test --plugin

internal/modules/cjs/loader.js:800
    throw err;
    ^

Error: Cannot find module '/home/sharvit/Projects/open-source/theforeman/foreman-tasks/node_modules/.bin/jest'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
    at Function.Module._load (internal/modules/cjs/loader.js:690:27)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
    at internal/main/run_main_module.js:17:11 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
/home/sharvit/Projects/open-source/theforeman/foreman-js/packages/test/bin/tfm-test.js:32
  if (error) throw error;
             ^

Error: exit code 1
    at ChildProcess.<anonymous> (/home/sharvit/Projects/open-source/theforeman/foreman-js/packages/test/src/helpers/index.js:59:39)
    at ChildProcess.emit (events.js:210:5)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
npm ERR! Test failed.  See above for more details.

Possible Solution

It can be solved by running the executable file from a different location when installing locally.
See: https://github.com/theforeman/foreman-js/blob/master/packages/test/bin/tfm-test.js#L35

Environment

• foreman-js version: 4
• Node version: 12
• NPM version: 6

The scss is not available when using `@theforeman/vendor-dev`

I'm submitting a…

• Regression (a behavior that used to work and stopped working in a new release)
• Bug report
• Feature request
• Documentation issue or request
• Support request

Expected Behavior

When using @theforeman/vendor-dev the scss should be available for use.

Current Behavior

The scss is not available when using @theforeman/vendor-dev

Possible Solution

Expose scss folder in @theforeman/vendor-dev and point it to the scss files in @theforeman/vendor-core.

Steps to Reproduce (for bugs)

Run storybook in foreman
https://projects.theforeman.org/issues/27531

Some @patternfly/react-core components aren't available in node_modules served by webpack

I'm submitting a…

• Regression (a behavior that used to work and stopped working in a new release)
• Bug report
• Feature request
• Documentation issue or request
• Support request

Expected Behavior

Webpack should serve all components in the UI with version 4.90.2.

Current Behavior

Upgraded @patternfly/react-core to 4.90.2 using a local checkout of foreman-js and linking it to foreman node modules and I was able to see components avalaible. However when serving through the default Foreman vendor-core certain packages aren't available.

Possible Solution

Steps to Reproduce (for bugs)

1. Go to Console > Source> webpack:// > node_modules> dist> esm>
2. Notice missing components ex: ActionList, DatePicker, Tiles, TreeViewer etc for example
3. These are all available locally on file system under node_modules folder of forman directory. The missing components also become available if you use a checkout of foreman-js locally and use that.

Two versions of React ended in my bundle files when working with lerna link

When running npm run build using lenra link it causes the build the have 2 versions of react (v16.8.4, v16.8.6).

I'm submitting a…

• Regression (a behavior that used to work and stopped working in a new release)
• Bug report
• Feature request
• Documentation issue or request
• Support request

Expected Behavior

The build should have only one version of React.

Current Behavior

The builds create a build file with 2 versions of react.

Possible Solution

Don't use lerna link, lerna bootstrap doing a better job.

Steps to Reproduce (for bugs)

cd foreman-js
npm install
npm run link
npm run build

can't run foreman storybook with link

after running npm run link foreman storybook is blank with this error

vendors~main.c1497fb1402e0aa54feb.bundle.js:158954 Uncaught TypeError: __webpack_require__(...) is not a function
    at Module.../foreman-js/packages/stories/node_modules/webpack/buildin/harmony-module.js (vendors~main.c1497fb1402e0aa54feb.bundle.js:158954)
    at __webpack_require__ (runtime~main.99691078705b39185f99.bundle.js:80)
    at Module.../foreman-js/packages/stories/node_modules/@storybook/core/node_modules/regenerator-runtime/runtime.js (vendors~main.c1497fb1402e0aa54feb.bundle.js:33962)
    at __webpack_require__ (runtime~main.99691078705b39185f99.bundle.js:80)
    at Object.../foreman-js/packages/stories/node_modules/@storybook/core/dist/server/common/polyfills.js (vendors~main.c1497fb1402e0aa54feb.bundle.js:33184)
    at __webpack_require__ (runtime~main.99691078705b39185f99.bundle.js:80)
    at Object.0 (main.65b540c1cb15b19be336.bundle.js:37)
    at __webpack_require__ (runtime~main.99691078705b39185f99.bundle.js:80)
    at checkDeferredModules (runtime~main.99691078705b39185f99.bundle.js:46)
    at Array.webpackJsonpCallback [as push] (runtime~main.99691078705b39185f99.bundle.js:33)

Testing Zapier zap

should create a new Asana card.

The dist file contains only the production version of react

The dist file contains only the production version of React.

I'm submitting a…

• Regression (a behavior that used to work and stopped working in a new release)
• Bug report
• Feature request
• Documentation issue or request
• Support request

Expected Behavior

When running webpack dev server, it should use the development version of react.

Current Behavior

When running webpack dev server, it uses the production version of react.

See how react manipulate the building results:
https://github.com/facebook/react/blob/master/packages/react/npm/index.js

Other libraries might do so as well.

Possible Solution

@theforeman/vendor can produce two different builds (production, development) by using different NODE_ENV value.

Can't run individual tests

I'm submitting a…

• Regression (a behavior that used to work and stopped working in a new release)
• Bug report
• Feature request
• Documentation issue or request
• Support request

Expected Behavior

Before using foreman/tests you could run individual test using npm test -- TestName

Current Behavior

now this command (-- TestName) runs all tests.
the -- -u flag is working as expected.

@amirfefer

Provide Storybook deployment

I'm submitting a…

• Regression (a behavior that used to work and stopped working in a new release)
• Bug report
• Feature request
• Documentation issue or request
• Support request

Expected Behavior

The goal is to allow foreman and plugins to deploy their stories to a remote server so they can share the URL with others.

Manual Operations

Consumers would like to run a command manually that will deploy their stories.

Automations

1. When the master branch gets updated, deploy the master stories
2. When someone opens/updates a PR, deploy the PR to a temporary remote and comment on the PR with the story-url.

Current Behavior

The Storybook is not deployed and the only way to see it is npm run stories. As a result, many devs don't know of the existence of our Storybook.

Possible Solution

Remote Options

• gh-pages
• surge.sh

Snapshots are failing

I'm submitting a…

• Regression (a behavior that used to work and stopped working in a new release)
• Bug report
• Feature request
• Documentation issue or request
• Support request

Expected Behavior

Snapshots should pass

Current Behavior

Snapshots are failing after one of the latest libraries upgrade

Possible Solution

find the library that caused it and pin to the last version

Steps to Reproduce (for bugs)

run tests, or see latest travis runs, e.g: https://travis-ci.org/github/theforeman/foreman/jobs/665423667

Environment

• @theforeman/[email protected]
• foreman-js version: 4.2.1
• Node version: v12.14.1
• NPM version: 6.13.4
• Operating system: Linux

tfm-stories stopped working after storybook v5.3 released

I'm submitting a…

• Regression (a behavior that used to work and stopped working in a new release)
• Bug report
• Feature request
• Documentation issue or request
• Support request

Steps to Reproduce (for bugs)

1. Run tfm-stories
2. Open the browser with the stories
3. Recive a blank page with JS errors

Expected Behavior

The stories should work.

Current Behavior

The story list is empty and I get JS errors:

Uncaught TypeError: _acorn.Parser.extend is not a function
    at Object../node_modules/@storybook/addon-docs/dist/frameworks/react/lib/inspection/acornParser.js (vendors~main.431981621d293f7b6f51.bundle.js:6100)
    at __webpack_require__ (runtime~main.431981621d293f7b6f51.bundle.js:791)
    at fn (runtime~main.431981621d293f7b6f51.bundle.js:151)
    at Object../node_modules/@storybook/addon-docs/dist/frameworks/react/lib/inspection/inspectValue.js (vendors~main.431981621d293f7b6f51.bundle.js:6360)
    at __webpack_require__ (runtime~main.431981621d293f7b6f51.bundle.js:791)
    at fn (runtime~main.431981621d293f7b6f51.bundle.js:151)
    at Object../node_modules/@storybook/addon-docs/dist/frameworks/react/lib/inspection/index.js (vendors~main.431981621d293f7b6f51.bundle.js:6329)
    at __webpack_require__ (runtime~main.431981621d293f7b6f51.bundle.js:791)
    at fn (runtime~main.431981621d293f7b6f51.bundle.js:151)
    at Object../node_modules/@storybook/addon-docs/dist/frameworks/react/propTypes/createType.js (vendors~main.431981621d293f7b6f51.bundle.js:6484)

Possible Solution

I downgraded all the @storybook/* packages to v5.2 and it works again.

Might be because the addon-docs has breaking changes between v5.2 to v5.3 because it wasn't officially released in v5.2.

See migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-52x-to-53x

Environment

• foreman-js version: 4.0.7
• Node version: 12.13.1
• NPM version: 6.13.4
• Yarn version (if you use Yarn):
• Operating system: Linux Fedora 31
• Link to your project: theforeman/foreman_rh_cloud#113