new-ui: Add devDependency - prettier

[seong7]

What this PR does / why we need it:
What :
It adds 'Prettier' as devDependency to package.json of 'new-ui/frontend' app.

Why :
Currently the style formatter 'Prettier' is not included in the package.json. Which makes the style formatting of 'new-ui/frontend' app on local dev environment depend on whether Prettier is installed globally on each developer's computer. It may confuse them while setting the IDE integration for style formatting.
Even though it's being checked on Github Actions, checking and fixing the style errors on Actions take way much longer than formatting on local with features of IDE such as 'auto format on save'.
So I suggest adding Prettier to the project's package.json so every developer can easily set the style formatting process on their local.

Which issue(s) this PR fixes (optional, in fixes #<issue number>(, fixes #<issue_number>, ...) format, will close the issue(s) when PR gets merged):
none

Checklist:

• Docs included if any changes are user facing

[aws-kf-ci-bot]

Hi @seong7. Thanks for your PR.

I'm waiting for a kubeflow member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[gaocegege]

/assign @andreyvelich

[gaocegege]

/ok-to-test

[andreyvelich]

Thank you for this update @seong7!
Can we also update GitHub actions: https://github.com/kubeflow/katib/blob/master/.github/workflows/test-node.yaml#L23, to take prettier version from this config ?

[andreyvelich]

cc @kimwnasptd

[seong7]

Thank you for this update @seong7!
Can we also update GitHub actions: https://github.com/kubeflow/katib/blob/master/.github/workflows/test-node.yaml#L23, to take prettier version from this config ?

Hi @andreyvelich :)
I just pushed a new commit that update prettier version on Github Actions.

[andreyvelich]

Can we try to take version from package.json ?
For example: (cd pkg/new-ui/v1beta1/frontend && npm install prettier)
I think it will be easier to maintain.
WDYT @seong7 ?

[andreyvelich]

If this will not work (with --global flag, I unable to install specific version from package.json), try to use this command:

version=$(cd pkg/new-ui/v1beta1/frontend && node -p "require('prettier/package.json').version")
npm install --global prettier@${version}

[andreyvelich]

Also, please modify this command: https://github.com/kubeflow/katib/blob/master/Makefile#L82-L83.
We have to use pkg/new-ui/v1beta1/frontend prefix there.

[andreyvelich]

@seong7 I've tried to make some tests: andreyvelich#8.
As I can see, npm install prettier --prefix ./pkg/new-ui/v1beta1/frontend in GitHub Actions should work without --global flag.
Please try to make these changes.

[seong7]

@seong7 I've tried to make some tests: andreyvelich#8.
As I can see, npm install prettier --prefix ./pkg/new-ui/v1beta1/frontend in GitHub Actions should work without --global flag.
Please try to make these changes.

@andreyvelich Thank you so much for your work 🙏 I was stuck on that issue.
Your solution worked on my forked repo too: seong7#1.
Hope we can see it works here this time!

[seong7]

/retest

[andreyvelich]

Thank you for this update @seong7!
/lgtm
/assign @kimwnasptd Please take a look.

[seong7]

Can we get updated on the progress? 😃

[andreyvelich]

Can we get updated on the progress? 😃

Yes, sorry for the delay. I think we can merge it.
/approve

[google-oss-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: andreyvelich, seong7

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [andreyvelich]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment