Allow urlText to be saved on metric images
What does this MR do and why?
This adds the ability to add a Url Text (text describing what the image or external URL is, i.e 'Production error rate').
It also adds the ability to update both the url
and url_text
fields on the metric image.
The backend for this change was added in !78430 (merged).
Screenshots or screen recordings
header | header |
---|---|
Form | ![]() |
URL with URL Text | ![]() |
How to set up and validate locally
- Ensure you have at least a GitLab Premium account.
- Head to Monitor -> Incidents and create an incident.
- Once created, add a metric via the metric tab.
- Add / Edit / Delete as you please.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #346171 (closed)
Merge request reports
Activity
changed milestone to %14.8
assigned to @seanarnold
4 Warnings This merge request includes more than 10 commits. Each commit should meet the following criteria: - Have a well-written commit message.
- Has all tests passing when used on its own (e.g. when using git checkout SHA).
- Can be reverted on its own without also requiring the revert of commit that came before it.
- Is small enough that it can be reviewed in isolation in under 30 minutes or so.
If this merge request contains commits that do not meet this criteria and/or contains intermediate work, please rebase these commits into a smaller number of commits or split this merge request into multiple smaller merge requests.
1772216f: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines. 537b7bfa: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines. featureaddition and featureenhancement merge requests normally have a documentation change. Consider adding a documentation update or confirming the documentation plan with the Technical Writer counterpart.
For more information, see:
- The Handbook page on merge request types.
- The definition of done documentation.
1 Message CHANGELOG missing: If you want to create a changelog entry for GitLab FOSS, add the
Changelog
trailer to the commit message you want to add to the changelog.If you want to create a changelog entry for GitLab EE, also add the
EE: true
trailer to your commit message.If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.
Reviewer roulette
Changes that require review have been detected!
Please refer to the table below for assigning reviewers and maintainers suggested by Danger in the specified category:
Category Reviewer Maintainer frontend Artur Fedorov ( @arfedoro
) (UTC+3, 10 hours behind@seanarnold
)Phil Hughes ( @iamphill
) (UTC+0, 13 hours behind@seanarnold
)To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.
To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.
Once you've decided who will review this merge request, assign them as a reviewer! Danger does not automatically notify them for you.
If needed, you can retry the
danger-review
job that generated this comment.Generated by
DangerBundle size analysis [beta]
This compares changes in bundle size for entry points between the commits 63974e4d and 2c50c5d8
Special assetsEntrypoint / Name Size before Size after Diff Diff in percent average 3.66 MB 3.67 MB +11.44 KB 0.3 % mainChunk 2.29 MB 2.29 MB - 0.0 % Significant Growth: 54Expand
Entrypoint / Name Size before Size after Diff Diff in percent pages.trials.create_lead 833.27 KB 857.06 KB +23.79 KB 2.9 % pages.trials.new 832.82 KB 856.61 KB +23.79 KB 2.9 % pages.projects.work_items 898.61 KB 922.31 KB +23.7 KB 2.6 % pages.projects.blame.show 901.12 KB 924.5 KB +23.38 KB 2.6 % pages.groups.settings.packages_and_registries.show 704.09 KB 727.47 KB +23.38 KB 3.3 % pages.projects 801.87 KB 825.24 KB +23.38 KB 2.9 % pages.projects.activity 810.63 KB 834.01 KB +23.38 KB 2.9 % pages.projects.artifacts.browse 803.69 KB 827.07 KB +23.38 KB 2.9 % pages.projects.artifacts.file 813.63 KB 837 KB +23.38 KB 2.9 % pages.projects.blob.edit 886.94 KB 910.32 KB +23.38 KB 2.6 % The table above is limited to 10 entries. Please look at the full report for more details
Significant Reduction: 52Expand
Entrypoint / Name Size before Size after Diff Diff in percent pages.groups.group_members 649.57 KB 617.44 KB -32.13 KB -4.9 % pages.admin.application_settings.service_usage_data 347.57 KB 326.6 KB -20.97 KB -6.0 % sentry 171 KB 150.94 KB -20.07 KB -11.7 % pages.admin.application_settings 343.67 KB 324.42 KB -19.25 KB -5.6 % pages.admin.application_settings.advanced_search 345.66 KB 326.41 KB -19.25 KB -5.6 % pages.admin.application_settings.ci_cd 352.7 KB 333.45 KB -19.25 KB -5.5 % pages.admin.application_settings.integrations 353.95 KB 334.71 KB -19.25 KB -5.4 % pages.admin.application_settings.metrics_and_profiling 347.36 KB 328.12 KB -19.25 KB -5.5 % pages.admin.application_settings.general 400.28 KB 381.05 KB -19.24 KB -4.8 % pages.admin.runners.show 877.15 KB 859.26 KB -17.89 KB -2.0 % The table above is limited to 10 entries. Please look at the full report for more details
Your MR has at least one entrypoint growing significantly (more > 1 KB or 2%). If you write new or extend existing features, this is expected and there is nothing to worry about.
Please consider pinging someone from the FE Foundations (
@dmishunov
,@justin_ho
,@mikegreiling
or@nmezzopera
) for review, if you are unsure about the size increase.Note: We do not have exact data for 63974e4d. So we have used data from: ed642dca.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.Please look at the full report for more details
Read more about how this report works.
Generated by
DangerAllure report
allure-report-publisher
generated test report for 2c50c5d8!review-qa-smoke:
test report
review-qa-reliable: test report- Resolved by Natalia Tepluhina
@tristan.read This is what I've got so far, which adds the ability to edit URL & URL Text on the images.
I'm missing some specs I think, but not sure which ones I should add. Can you help + provide any other feedback?
added 1 commit
- 1772216f - Add specs for update metric image JS changes
- Resolved by Amelia Bauerly
@ameliabauerly I've included screenshots + a gif if you'd like to do UX review
.
requested review from @ameliabauerly
requested review from @tristan.read
Suggestion: @seanarnold, with regards to the link and delete buttons after an image has been added. Here's how I'm seeing them in this MR:
These are meant to be a button group, rather than separate icon buttons, more like this:
@tristan.read can probably confirm, but I believe we're meant to use this component for button groups? At any rate, would it be possible to change from separate buttons to the button group?
Edited by Amelia Bauerly- Resolved by Natalia Tepluhina
Suggestion: @seanarnold, in seeing this flow "live", I'm realizing there's a bit of weirdness in terms of the experience in the modal where you add an image for the first time. This is the modal I'm meaning:
In playing around with this, I'm realizing that, since we've introduced the text field, people can now add text only, and skip adding a link if they choose. Given this, the title of the modal, and the intro text, doesn't totally make sense. Could we update the text a bit to accommodate this?
Original modal heading: Add a URL
Updated modal heading: Add image details
Original modal description text: Add a link to the uploaded image.
Updated modal description text: Add text or a URL that will display with your image. If you don't add either, the file name will display instead.
WDYT?
Edited by Amelia Bauerly
Suggestion: @seanarnold - speaking of this "add a URL" modal - we've actually deprecated that green success button. We just use the primary blue button instead. Could we replace the green
Upload
button with the primary confirm (blue) button instead?- Resolved by Amelia Bauerly
Question: @abellucci - when testing out this MR, I noticed that, since we've added the text field in addition to the URL field, people can now add text or a URL to the images. Here are the different variants that are possible:
I actually think this is good, because it gives people tons of flexibility in terms of how they want to document the images they're adding. But, it does make me think that the link icon isn't the best fit anymore, since clicking it will allow people to edit the text, even if they haven't added a URL. This is the link icon button I'm meaning:
Since people can use the button to edit either the text or the URL (even in cases where no URL has been added), it feels like the edit pencil icon might be a better choice here. Would you be okay with us switching back to using the edit pencil icon instead? For me, the edit icon would make more sense in this flow, especially as, when people click the button, they see a modal title "Editing..." and can edit either the text or the link. WDYT?
cc: @seanarnold
Edited by Amelia Bauerly
- Resolved by Amelia Bauerly
Suggestion: @seanarnold - the icon buttons will need tooltips added, as well.
The original tooltip text for the link icon button was:
Edit URL
. Given that people can just add text and edit that too now, I'm thinking we should update this text to beEdit image text or URL
. The trash can icon tooltip text can just beDelete image
- Resolved by Tristan Read
Question: @seanarnold - in the original issue, we had this suggestion for improving the performance for uploading multiple images:
Ease the process for uploading multiple images by closing the upload dialog as soon as the upload button is clicked, rather than waiting for the upload to complete. This may mean it will be difficult for us to determine which upload has failed, if there are multiple. But, we can modify the error message to indicate this as follows:
I noticed that the Upload button had a spinner in it, which made me wonder if we're immediately closing the modal after the button click, or if we're waiting for the image to upload first. That being said, I'm not really sure how to test out this piece
Did we do this bit? Just wanted to double check!
added 2 commits
removed review request for @tristan.read
@tristan.read
, thanks for approving this merge request.This is the first time the merge request is approved. To ensure full test coverage, a new pipeline has been started.
For more info, please refer to the following links:
requested review from @ntepluhina
- Resolved by Natalia Tepluhina
- Resolved by Natalia Tepluhina
removed review request for @ntepluhina
requested review from @ntepluhina
- Resolved by Natalia Tepluhina
enabled an automatic merge when the pipeline for 69a9208a succeeds
mentioned in commit f88e9e0b
added workflowstaging-canary label and removed workflowin review label
added workflowstaging label and removed workflowstaging-canary label
added workflowcanary label and removed workflowstaging label
added workflowproduction label and removed workflowcanary label