[Next] Major Refactoring, Bug fixes and UI Overhaul

[zrthxn]

Summary of Changes

A list of all changes is given here. Screenshots are provided in comments to give temporal relation to commits.

Plugins List

• Group plugins by version, dont show a new entry for every version
• Create plugin view, remove plugin preview
• Implement pagination in plugin list

Dashboard

• Fix Table layout and reduce complexity
• Improve UI of plugin list on dashboard

Create plugin form

• Improve UI of form
• Check if name is unique while typing
• Fix issues with file upload component

Plugin body

• Improve UI and layout
• Fix issues caused by removal of PF3

Fixes: #203
Fixes: #101
Closes: #197
Fixes: #198
Closes: #200
Fixes: #227
Fixes: #225
Partially: #214
Fixes: #168

Problems Remaining

• Versions are not fetched in call for PluginMetas. This versions content is empty.

Preview

[jennydaman]

630a0ac...ac86d12 LGTM

Do you want to implement #168 before merging? (eslint --fix will be very disruptive)

[zrthxn]

Can be done.
But running yarn lint (eslint ./src) doesn't give any problems? Why is that?

[jennydaman]

I meant, after AirBnb and/or Prettier are put into effect, the lint fixes will be disruptive. Current code is probably in-compliance with the default create-react-app's eslint config.

BTW in .eslintrc, .js is listed as an allowed react/jsx-filename-extension — do we want to remove this?

[zrthxn]

Okay got it.

We can continue allowing .js, it doesn't really cause any problems. Just that the chances of someone writing in a bug are slightly higher because there's less hinting

[jennydaman]

For the sake of consistency, I think we should require that all JSX have the JSX extension.

(Maybe it's possible to allow for JS without react files, e.g. helper, model, or controller modules, use the .js extension but I'm not sure if eslint is smart enough for this)

[zrthxn]

@jennydaman
The Airbnb style guide requires that every prop should be defined in props validation. This creates a huge disruption and will need quite a lot of time to fix since each prop has to be manually fixed.

➜  ChRIS_store_ui git:(next) ✗ yarn lint:fix
yarn run v1.22.10
$ eslint --fix src/**/*.jsx
...
✖ 168 problems (165 errors, 3 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I suggest we should disable the react/prop-types rule. What do you think?

[jennydaman]

Disabling react/props-types "for the time being" sounds like a good plan.

[zrthxn]

@jennydaman
Added the eslint config to .eslintrc, added .prettierrc.
Installed @babel/eslint-parser and @babel/preset-react to allow eslint to use babel.
Cleaned up the hundreds of linting errors.

[zrthxn]

@jennydaman @mairin
What was the review for #210? Can we merge that into this branch to get that redesign done?

[jennydaman]

Hmm, I remember that we supported the new home. If you'd like, merge the redesigned home into next and I'll take a look at it.

[zrthxn]

@jennydaman Merged the redesigned home

[jennydaman]

I'll review the UI in a demo before diving a bit into the code.

• Would you have the "Sign in/out" button blue?
• IMO the search bar could use some contrast balance, make the placeholder text brighter, the icon dimmer
• Remove "Another" button

[zrthxn]

@jennydaman Done these

[jennydaman]

@zrthxn I'm getting an infinite loop here. Ping me on slack if you want me to look into the code.

[zrthxn]

@jennydaman
It was happening if the request to api.github.com failed or was blocked, which is what I think you tried with pi-hole. Because of a circular dependency in a useCallback hook. Fixed now.