Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add clickable help icons for developer settings #1522

Merged
merged 17 commits into from
Jun 5, 2024

Conversation

pamelafox
Copy link
Collaborator

@pamelafox pamelafox commented Apr 11, 2024

Purpose

Fixes #1334

This is an alternative to #1487 which instead adds clickable help icons. I was unable to get the tooltips to pop up on my machine (not sure if it's a Mac thing or a user error?) and clickable icons are generally more accessible, so I made a branch to try this possibility.
I had to move some of the fields over when the components did not support renderLabel, like SpinButton and ChoiceGroup, but the end result is very similar functionality-wise.

Note that we have a HUGE amount of repeated code between Chat.tsx and Ask.tsx. We could potentially make a DeveloperSettings component that took all the defaults/callbacks. I had to do a lot of repetitive updating across both.

Also realized that our VectorFields setting is weird- it's a list, but we never send multiple values. I think it should just be a string. But that's for another day.

Screenshots:

Screenshot 2024-04-11 at 12 46 38 PM
Screenshot 2024-04-11 at 12 46 32 PM

Does this introduce a breaking change?

When developers merge from main and run the server, azd up, or azd deploy, will this produce an error?
If you're not sure, try it out on an old environment.

[ ] Yes
[X] No

Does this require changes to learn.microsoft.com docs?

This repository is referenced by this tutorial
which includes deployment, settings and usage instructions. If text or screenshot need to change in the tutorial,
check the box below and notify the tutorial author. A Microsoft employee can do this for you if you're an external contributor.

[X] Yes - new screenshot needed, possibly new settings text
[ ] No

Type of change

[ ] Bugfix
[X] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

Code quality checklist

See CONTRIBUTING.md for more details.

  • The current tests all pass (python -m pytest).
  • I added tests that prove my fix is effective or that my feature works: No - This is a frontend only change. I could potentially add an E2E test but not clear if needed.
  • I ran python -m pytest --cov to verify 100% coverage of added lines: No, since coverage doesnt include JS code
  • I ran python -m mypy to check for type errors
  • I either used the pre-commit hooks or ran ruff and black manually on my code.

@@ -63,7 +63,7 @@ jobs:
id: e2e
if: runner.os != 'Windows'
run: |
playwright install --with-deps
playwright install chromium --with-deps
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should speed up CI, we only run in chromium right now, that's the default.

@@ -0,0 +1,29 @@
// Keep values less than 20 words.
// Don't add links to the tooltips.
export const toolTipText = {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks this looks a lot better now

@pamelafox pamelafox merged commit c873b49 into Azure-Samples:main Jun 5, 2024
10 checks passed
@pamelafox pamelafox deleted the helpcallouts branch June 5, 2024 14:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add tool tips to settings in Developer Settings
3 participants