mirror of
https://github.com/ansible/awx.git
synced 2026-02-13 16:07:29 -03:30
cfff30f024
Adds support for html in custom login text SUMMARY link #7603 I couldn't come up with a way to do this without breaking up the component and discontinuing use of the LoginPage PF component. This is because LoginPage expects the textContent component (what we use to display the custom login text) to be a string. By using the underlying LoginPage components I reconstructed the login page and got more control over that prop. The custom message in the old UI supported both strings and HTML: So we need to support rendering HTML but we need to do it in a safe way. Our solution to that was https://docs.angularjs.org/api/ngSanitize. React doesn't seem to have anything like this built in so I went looking for outside help. html-entities is already included in our project but as best as I can tell that lib is mainly focused on swapping special characters out for html entities. I wanted something that was going to strip the HTML of bits that could be exploited by a malicious actor. I settled on https://www.npmjs.com/package/sanitize-html because it was a) small and b) actively maintained. The API was simple and let me sanitize the HTML before setting it using dangerouslySetInnerHTML. If we need to tweak the configuration away from the default values then we can certainly do that. ISSUE TYPE Feature Pull Request COMPONENT NAME UI Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
AWX-PF
Requirements
- node 14.x LTS, npm 6.x LTS, make, git
Development
The API development server will need to be running. See CONTRIBUTING.md.
# install
npm --prefix=awx/ui_next install
# Start the ui development server. While running, the ui will be reachable
# at https://127.0.0.1:3001 and updated automatically when code changes.
npm --prefix=awx/ui_next start
Build for the Development Containers
If you just want to build a ui for the container-based awx development environment, use these make targets:
# The ui will be reachable at https://localhost:8043 or
# http://localhost:8013
make ui-devel
# clean up
make clean-ui
Using an External Server
If you normally run awx on an external host/server (in this example, awx.local),
you'll need use the TARGET environment variable when starting the ui development
server:
TARGET='https://awx.local:8043' npm --prefix awx/ui_next start
Testing
# run code formatting check
npm --prefix awx/ui_next run prettier-check
# run lint checks
npm --prefix awx/ui_next run lint
# run all unit tests
npm --prefix awx/ui_next run test
# run a single test (in this case the login page test):
npm --prefix awx/ui_next test -- src/screens/Login/Login.test.jsx
# start the test watcher and run tests on files that you've changed
npm --prefix awx/ui_next run test-watch
# start the tests and get the coverage report after the tests have completed
npm --prefix awx/ui_next run test -- --coverage
Note:
- Once the test watcher is up and running you can hit
ato run all the tests. - All commands are run on your host machine and not in the api development containers.
Adding Dependencies
# add an exact development or build dependency
npm --prefix awx/ui_next install --save-dev --save-exact dev-package@1.2.3
# add an exact production dependency
npm --prefix awx/ui_next install --save --save-exact prod-package@1.23
# add the updated package.json and package-lock.json files to scm
git add awx/ui_next_next/package.json awx/ui_next_next/package-lock.json
Removing Dependencies
# remove a development or build dependency
npm --prefix awx/ui_next uninstall --save-dev dev-package
# remove a production dependency
npm --prefix awx/ui_next uninstall --save prod-package
Building for Production
# built files are placed in awx/ui_next/build
npm --prefix awx/ui_next run build
CI Container
To run:
cd awx/awx/ui_next
docker build -t awx-ui-next .
docker run --name tools_ui_next_1 --network tools_default --link 'tools_awx_1:awx' -e TARGET="https://awx:8043" -p '3001:3001' --rm -v $(pwd)/src:/ui_next/src awx-ui-next
Note: This is for CI, test systems, zuul, etc. For local development, see usage