The PackageKit UpdateDetail signal provides markdown in the
`update_text` and uses remarkable to parse the markdown contents.
Remarkable however has not been updated since 6 years, additionally it
requires us to use `dangerouslySetInnerHTML` which can lead to XSS
issues.
The npm ecosystem has two other markdown alternatives `react-markdown`
and a `markdown-to-jsx`. The latter has zero dependencies while
`react-markdown` has eleven and requires additional plugins like
`rehype-external-links` to add a rel/target to external links.
https://www.freedesktop.org/software/PackageKit/gtk-doc/Transaction.htmlhttps://github.com/jonschlinkert/remarkable/issues/438
This is fine, TypeScript will check them correctly. And it is very
useful for global functions, at least. And we allow functions to be
used before their definitions in JavaScript files.
- disable the base no-use-before-define rule: it doesn't understand
that TypeScript allows using types before they're defined. Enable
the TypeScript-specific rule for it for TypeScript files.
- add an 'unused variables' config matching the default rules of the
TypeScript compiler
Both of these rule stanzas were copied from the documentation of the
typescript-eslint plugin. Links to those pages are provided in
comments, which are valid in the extended JSON syntax used for eslintrc.
Tweak our test/static-code rule for JSON to also exempt eslintrc from
our strict checking.
Add the typescript compiler to our devel dependencies and run it from
`test/static-code`. We add an initial cockpit.d.ts and a tsconfig.json
which will get `tsc` to report errors against any `.ts` or `.tsx` files.
We don't need the `$ESLINT`/`$STYLELINT` env variables any more to
coordinate between build.js and webpack-config.js, as everything is in
build.js now. Update HACKING.md accordingly.
Implement our own watch mode due to the deficiencies of esbuild's [1].
This is similar to podman's [2], but with recursive watching.
Because the approach for redefining breakpoints changed, update pixel
tests for the spacing noise.
Co-Authored-By: Martin Pitt <mpitt@redhat.com>
Fixes#17629
[1] https://github.com/evanw/esbuild/issues/1204#issuecomment-1482909251
[2] https://github.com/cockpit-project/cockpit-podman/pull/1243
This is discouraged. Replace these imports with a webpack rule, and
re-enable the `import/no-webpack-loader-syntax` ESLint rule.
This will make our code compatible with esbuild.
cockpit-ostree enables this by default and we have to disable it now.
Having consistent key spacing for all our JavaScript objects seems like
something we want everywhere as eslint --fix can automatically.
We have some semi-reasonable patterns of code which chain 3 calls on a
single line. Unfortunately there doesn't seem to be a way to
distinguish between chaining for promises and for other things (like
text manipulation). Line length can be a proxy for that, though.
Reasoning:
A map() creates an array, so a return is expected for all code paths (if/elses).
If one does not want an array or to return data, they should use forEach instead.
Similar for filter().
An expection in our codebase was cockpit.transport.filter which confused
the linter, thinking that its an array filter. I disabled linting on these
lines for this rule.
expose-loader
-------------
Commit removing it's last usage point was: c3533e5799
eslint
------
Update eslint-config-standard to next major version
This enables multiline-ternary rule, which gives many:
error Expected newline between consequent and alternate of ternary expression multiline-ternary
Fix this automatically with npm run eslint:fix
Also temporarily disable array-callback-return rule, which was also
enabled in this config version, and gives a lot of (actually valid)
errors. Make sure to enable it in follow up commit.
Lastly fix single occurance of:
error Use a regular expression literal instead of the 'RegExp' constructor prefer-regex-literals
This works around this a11y rule. We use it correctly, but due to the
way Cockpit navigates eslint was complaining.
Also since I changed style of our tabs, I styled to look exactly as
`<Tabs>` event though we use `<Nav>` as tabs (due to issues on mobile).
`var` has broken/unexpected scoping in JavaScript, and can lead to
subtle errors. It's preferable and safer to use `const` whenever
possible, and `let` where necessary.
Most pages got updated by now, so let's make sure they stay that way.
Disable the rule for the four remaining known pages which still use
`var`. Also temporarily downgrade the `error` to `warn` when running
`npm run eslint`, as that is covered by the unit-tests "distcheck"
scenario. This requires touching package.json and thus a node_modules
rebuild.
cockpit.all() was deprecated over two years ago in commit f83c353d86,
and was never documented API. Nothing uses it any more.
Also drop our custom eslint plugin, it has served its purpose.
Fixes these `npm install` warnings:
> deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
> deprecated eslint-loader@4.0.2: This loader has been deprecated. Please use eslint-webpack-plugin
Cherry-picked from starter-kit commit 0e608d562a.
Cherry-picked from starter-kit commit 8f93db223476.
The new `react/jsx-wrap-multilines` rule looks desirable, but that might
not be unanimous. Disable it for now and postpone for a follow-up.
Lets use <ul> and <li> since it is actually list.
Also use 'role="presentation"' to indicate that the box itself has no
semantic meaning, it just is wrapper that catches events when user click
anywhere on the box.
Also did one small change for sliders in storage where I added
'role="presentation"' so it is not used in a11y tree. We always have
input next to this slider for it to be accessible. Making fully
accessible slider is not that complicated, but the goal with our sliders
always was that they are ignored when using keyboard and users will just
use inputs.
That also makes it possible to enforce another a11y jsx rule.
Closes#14091
This rule is actually very useful, as it points to things, that are not
keyboard navigable. We were introducing new breakages since we disabled
this rule (like services and overview pages).
Here is list of things that did not work before, but do now:
- service-tabs.jsx: The whole navigation (targets, sockets...) was not
reachable by keyboard.
- page-status.jsx: Items in 'Health' card were reachable by keyboard,
but could not be activated by keyboard.
- usageCard.jsx: Text 'View graphs' on 'Usage' card was reachable by
keyboard, but could not be activated by keyboard.
- systemInformationCard.jsx: Text 'View hardware details' on 'System information'
card was reachable by keyboard, but could not be activated by keyboard.
- insights.jsx: Text 'Not connected to Insights' on 'Health' card was reachable
by keyboard, but could not be activated by keyboard.
- storage-controls.jsx: The 'things' menu on storage page could be
opened by keyboard, but the elements inside were not reachable by keyboard.
- overview.jsx: On storage page non of 'Devices', Drives'... and any
other devices were not reachable by keyboard. Now they are reachable and
also it is possible to activate them by keyboard. (This includes also
'Show all' buttons)
- diskEdit.jsx: These prevents were pointless so I dropped them.
Otherwise we would need to do the same for keyboard events.
- containers-view.jsx: Items could not be activated with keyboard.
- cockpit-components-listing.jsx: Give the event listener to appropriate element.
- fsys-tab.jsx: This is actually unused but making it link-styled button
seems like a correct approach to make it accessible.
Part of #12954Closes#13996
These make components with simple state (only a few variables) easier to
read and maintain. See https://reactjs.org/docs/hooks-intro.html for
details. Hook are available since React 16.8, and we already depend on 16.10.
We don't have any hooks yet in our code. This enables the ESLint plugin
to guide us right from the start.
Disable rules that need complex fixing, these should be fixed as
follow-ups.
First three should really be fixed, the rest is not that important.
Closes#12644
Eslint shimmies up directories looking for more eslintrcs. As
make-checkout now clones projects in a subdirectory, this can result in
some strange interactions.
Each subproject using eslint should enable this as well.
https://eslint.org/docs/user-guide/configuringCloses#12610
cockpit.all() is deprecated and should not be used in new code.
Add an eslint exception and a comment to all call sites for which using
Promise.all() is not yet possible (see previous commit).
Closes#10949
