When a long line with characters such as dots is returned by a step in
an action (e.g. by the output of the Ruby on Rails test runner), it
overflows the log container, causing the page to scroll sideways.
This PR adds the CSS `overflow-wrap: anywhere;` to the
`.job-step-section .job-step-logs .job-log-line .log-msg` selector,
which causes such lines to wrap as well
(cherry picked from commit 61aaf3440142d225802e3e9ce3db28bcf71f5a7e)
- Existing gear icon keyup handler fixed:
moved the handler onto its descendant button,
to prevent it from incorrectly firing on the check-box elements
- Check-box elements: keyup elements for space and enter added,
as well as tabindex elements to make them able to gain focus
<!--
Before submitting a PR, please read the contributing guidelines:
https://codeberg.org/forgejo/forgejo/src/branch/forgejo/CONTRIBUTING.md
-->
To test the check boxes:
- Set up an action, and visit the action's job page
- Navigate onto the job container (via Tab et al.)
- Use the gear icon with Space or Enter
- Tick the check-box items with Space or Enter
To test the elements beside the chevron icons:
- Navigate onto the element via Tab et al.
- Open/close them via Space or Enter
I have not had a chance to test the latter fix (https://codeberg.org/forgejo/forgejo/issues/4476#issuecomment-2092312) myself yet; feel free to reject this one in case the latter fix does not work as it should, and I will break this up into two separate pull requests.
<!--start release-notes-assistant-->
## Draft release notes
<!--URL:https://codeberg.org/forgejo/forgejo-->
- User Interface bug fixes
- [PR](https://codeberg.org/forgejo/forgejo/pulls/4490)</a>: <!--number 4490 --><!--line 0 --><!--description W2FjY2Vzc2liaWxpdHldIEFkZCBrZXlib2FyZCBzdXBwb3J0IGZvciB0ZXN0IGFjdGlvbnM=-->[accessibility] Add keyboard support for test actions<!--description-->
<!--end release-notes-assistant-->
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4490
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
Co-authored-by: banaanihillo <banaanihillo@noreply.codeberg.org>
Co-committed-by: banaanihillo <banaanihillo@noreply.codeberg.org>
Fix a number of text overflow issues in actions view and run list. Also
improve mobile view of run list.
Fixes: https://github.com/go-gitea/gitea/issues/30328
<img width="782" alt="Screenshot 2024-04-08 at 23 10 16"
src="3d9f9f88-3eab-44a0-8144-30c2b58b24cb">
<img width="935" alt="Screenshot 2024-04-08 at 23 17 46"
src="581d73ea-a31d-416b-be3a-47313b879b12">
<img width="1008" alt="Screenshot 2024-04-08 at 23 49 05"
src="c5d10565-f285-477f-8659-1caf94797647">
<img width="397" alt="Screenshot 2024-04-08 at 23 55 30"
src="368aaa75-1903-4058-9d75-d1fe91c564d6">
(cherry picked from commit b9f69b4a4d1d6b5b1f94852f6dfcae41b30658ff)
Fix the action issue in https://github.com/go-gitea/gitea/issues/30303,
specifically:
- Use opaque step header hover background to avoid transparency issue
- Un-sticky the `action-view-left` on mobile, it would otherwise overlap
into right view
- Improve commit summary, let it wrap
- Fix and comment z-indexes
- Tweak width for run-list-item-right so it wastes less space on desktop
- Synced latest changes to console colors from dark to light theme
<img width="467" alt="Screenshot 2024-04-06 at 18 58 15"
src="8ad26b72-6cd9-4522-8ad1-6fd86b2d0d53">
(cherry picked from commit 0178eaec256a349371c75e582edd7fefca2085d0)
Fix mistake from https://github.com/go-gitea/gitea/pull/29977 where the
click handler wasn't updated for the change with the `isExpandable`
function.
(cherry picked from commit 57539bcdc024110c890320e3e785bf3d6ad6df55)
This pattern comes of often during review, so let's fix it once and for
all. Did not test, but changes are trivial enough imho.
(cherry picked from commit 8fe26fb314f1710139728d9118b455fc6a16cce2)
This hides the chevron icon and makes the step header unclickable for
skipped steps because there is no content to expand on those.
Before:
<img width="272" alt="Screenshot 2024-03-21 at 20 06 47"
src="9bb328d1-6f74-48a9-af19-de9b351e3707">
After:
<img width="295" alt="Screenshot 2024-03-21 at 20 03 07"
src="72a26e14-5a28-4606-8c3c-184b405872c8">
---------
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 5bd0773741be8f9476be0c76e8733f8c9dd65d19)
To keep blame info accurate and to avoid [changes like
this](https://github.com/go-gitea/gitea/pull/29977/files#diff-c3422631a14edbe1e508c4b22f0c718db318be08a6e889427802f9b6165d88d6R359),
it's good to always have a trailing comma, so let's enforce it in JS.
This rule is completely automatically fixable with `make lint-js-fix`
and that's what I did here.
(cherry picked from commit 3d751b6ec18e57698ce86b79866031d2c80c2071)
Conflicts:
web_src/js/components/DashboardRepoList.vue
trivial context conflict because of '3b7b899afa fix commit_status'
Add some space when the left side items are sticky due to scrolling the
right side.
<img width="419" alt="image"
src="292e1b03-a071-4744-bb79-e50d109056c8">
(cherry picked from commit eb8c34fc367f324226625d39d0487f945269cd73)
Fixes: https://github.com/go-gitea/gitea/issues/28371
Fixed by using a JS solution that formats according to `lang`, but alters the 24h format setting as per user's locale. This will work for all tooltips:
<img width="243" alt="Screenshot 2024-03-07 at 23 03 35" src="6d16c71c-6786-4eda-8cdc-50ec68ba62c6">
<img width="250" alt="Screenshot 2024-03-07 at 23 03 17" src="4e26bbb7-12df-4b81-bd37-14705e87e8f7">
<img width="310" alt="Screenshot 2024-03-07 at 23 14 34" src="1ef599f0-6401-4e19-b1da-59cdfc09b0f6">
I think there is only one other place in the UI where we render such absolute dates, which is in the actions view and which I've also fixed:
<img width="275" alt="Screenshot 2024-03-07 at 23 04 00" src="df0fbe1f-96ee-4338-ab5e-2b10e215005d">
(cherry picked from commit f86e9a03673b70d660a4b7a1e53748757d7a45fa)
- Increase contrast overall
- Unalias the ansi color in dark theme and copy them to light
- Add outer border
- Add border radius
<img width="1337" alt="Screenshot 2024-03-06 at 22 30 03"
src="11407c0f-0bb2-435e-a034-22b1f106d9b0">
<img width="1335" alt="Screenshot 2024-03-06 at 22 36 59"
src="267db442-0979-4acc-a79e-8579b4cb0262">
(cherry picked from commit 16f13265143ff08cb6c33e976998b262e94fe569)
Because the icon is:
So it must rotate counterclockwisely
(cherry picked from commit ea164aba4b697aa08e4d20d896a8f318c09a6523)
Add deletion link in runs view page.
Fix#26315
When click deletion button. It marks this artifact `need-delete`.
This artifact would be deleted when actions cleanup cron task.
1. Introduce lightweight `fetch` wrapper functions that automatically
sets csfr token, content-type and use it in `RepoActionView.vue`.
2. Fix a specific issue on `RepoActionView.vue` where a fetch network
error is shortly visible during page reload sometimes. It can be
reproduced by F5-in in quick succession on the actions view page and was
also producing a red error box on the page.
Once approved, we can replace all current `fetch` uses in UI with this
in another PR.
---------
Co-authored-by: Giteabot <teabot@gitea.io>
The [recommended order](https://vuejs.org/guide/scaling-up/sfc.html) for
SFC blocks is script -> template -> style, which we were violating
because template and script were swapped. I do find script first also
easier to read because the imports are on top, letting me immideatly see
a component's dependencies.
This is a pure cut-paste refactor with some removal of some empty lines.
---------
Co-authored-by: Lauris BH <lauris@nix.lv>
Adds
[eslint-plugin-vue-scoped-css](https://github.com/future-architect/eslint-plugin-vue-scoped-css)
and fixes discovered issues which are:
- 1 unused selector
- 3 selectors with `.full.height` parent in a `<style scoped>` block so
the rule could not find the parent. Move these into the unscoped block
instead. They worked before and after.
In GitHub, we can not rerun jobs if the workflow is disabled.
---------
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Before:
After:
In current design, the clickable area is too small, and it is hard to
find the correct clickable area as the area with background color (div
with class name `job-brief-item selected`) is bigger than it.
---------
Co-authored-by: Giteabot <teabot@gitea.io>
Ressurect lost changes from
https://github.com/go-gitea/gitea/pull/24451.
- Always show icons for each entry in the menu
- Make all checkboxes toggle only their feature, e.g. "seconds" and
"timestamps" can now be toggled on together.
- Reorder the items
<img width="845" alt="Screenshot 2023-08-01 at 19 19 27"
src="8a76e9bf-7966-42a6-87c9-e88cdddaec82">
---------
Co-authored-by: Giteabot <teabot@gitea.io>
If there's no logs, you can also click the download button, then you
will get `job is not started` page
https://gitea.com/yp05327/testrepo/actions/runs/38
After:
If there's no steps displayed, the download button will be disabled.
current actions artifacts implementation only support single file
artifact. To support multiple files uploading, it needs:
- save each file to each db record with same run-id, same artifact-name
and proper artifact-path
- need change artifact uploading url without artifact-id, multiple files
creates multiple artifact-ids
- support `path` in download-artifact action. artifact should download
to `{path}/{artifact-path}`.
- in repo action view, it provides zip download link in artifacts list
in summary page, no matter this artifact contains single or multiple
files.
Various small enhancements to the actions list. Before and after:
<img width="1264" alt="Screenshot 2023-06-30 at 00 11 40"
src="bb4162ee-cdcf-4a73-b05e-f9521562edbb">
<img width="1264" alt="Screenshot 2023-06-30 at 00 09 51"
src="52a70ea9-4bb3-406e-904b-0fdaafde9582">
---------
Co-authored-by: Giteabot <teabot@gitea.io>
Close#24593
Some behavior:
- If log step line in hash exists, expand the step and scroll to the log
line.
- If step exists but line not exists, the step will be expanded.
- If step not exists, stays on the job's page.
Some Notes:
- Changed mounted to async because need to await for first `loadJob` so
`currentJobStepsStates` can be initialized and used in
`hashChangeListener `.
---------
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Right now rerun icon on action view component will not be seen when
duration text length is long, because the wrapper `job-brief-info` has a
fixed width, and the svg is squeezed. The way to fix this in this PR is
to change width to `fit-content` and exchange position of duration text
and rerun svg.
Before (rerun svg not shown on hover):
<img width="1401" alt="Screen Shot 2023-06-27 at 12 53 41"
src="bb3f62ec-8c56-4dbc-96f1-718b50426d91">
After:
<img width="1409" alt="Screen Shot 2023-06-27 at 12 50 59"
src="620aa02c-2326-408d-a763-453f48f42c40">
An error occurs when clicking on `show full screen` on action page.
<img width="1440" alt="Screen Shot 2023-06-12 at 13 06 52"
src="1d4ded3c-fb77-4dd8-9201-24d0696f96eb">
class name has changed in #25134, so the selector is not working.
Enhance the selectors to fix this.
- Various corrections to button styles, especially secondary
- Remove focus highlight, it's annoying when it stays on button after
press
- Clearly define ghost and link buttons with demos in devtest
- Remove black, grey and tertiary buttons, they should not be used
- Make `arc-green` slightly darker
<img width="1226" alt="image"
src="8d89786a-01ab-40f8-ae5a-e17f40e35084">
<img width="1249" alt="image"
src="83651e6d-3c27-46ff-b8bd-ff344d70e949">
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
Part of #24728
- The timestamp shows local time and is parsed by `date.toLocaleString`;
- "show seconds" and "show timestamps" are mutually exclusive, and they
can be both hidden.
89531e54-37b7-4400-a6a0-bb3cc69eb6f5
Update for timestamp format:
<img width="306" alt="Screen Shot 2023-05-25 at 09 07 47"
src="2d99768d-d39c-4c9e-81a2-7bc7470399dd">
---------
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
- Various color tweaks
- Add sticky positioning to left sidebar, right header and right step
header
- Adjust margins and border radiuses
<img width="1235" alt="Screenshot 2023-05-23 at 11 18 06"
src="f601b00d-c7f2-43de-89f2-3ac55f2d9cdc">
<img width="1239" alt="Screenshot 2023-05-23 at 11 18 18"
src="a2d24cc9-29fa-4c17-906b-84feea14b889">
---------
Co-authored-by: yp05327 <576951401@qq.com>
Close#24625
Main changes:
1. For the left panel, show rerun icon only on hover, and add style when
the job is selected, and removed icon on the "rerun all" button and
modify the text on the button
cc437a17-d2e9-4f1b-a8cf-f56e53962767
2. Adjust fonts, and add on hover effects to the log lines. And add
loading effect when the job is done and the job step log is expanded for
the first time. (With reference to github)
2808d77d-f402-4fb0-8819-7aa0a018cf0c
3. Add `gt-ellipsis` to `step-summary-msg` and `job-brief-name`
<img width="898" alt="ellipsis"
src="e2fb7049-3125-4252-970d-15b0751febc7">
4. Fixed
https://github.com/go-gitea/gitea/issues/24625#issuecomment-1541380010
by adding explicit conditions to `ActionRunStatus.vue` and `status.tmpl`
5. Adjust some css styles
---------
Co-authored-by: silverwind <me@silverwind.io>
This one doesn't look very good as a real button (at least not in the
ways I tried), so I've opted to simply add a tooltip for it.
# Before
# After
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
To clearly communicate the current state of the action
---------
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
