Restyle framework create and edit screens
What does this MR do and why?
Restyle framework create and edit screens
Change styles according to new designs
Changelog: changed
EE: true
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
Create | Edit |
---|---|
![]() |
![]() |
How to set up and validate locally
- Go to compliance center
- Create new framework
- Edit framework
Related to #478077 (closed)
Merge request reports
Activity
changed milestone to %17.4
assigned to @nradina
added pipelinetier-1 label
5 Warnings This merge request is quite big (724 lines changed), please consider splitting it into multiple merge requests. a3f76fc6: The commit subject must contain at least 3 words. For more information, take a look at our Commit message guidelines. a3f76fc6: 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. 43e538a0: 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. This merge request contains lines with testid selectors. Please ensure e2e:test-on-omnibus
job is run.testid
selectorsThe following changed lines in this MR contain
testid
selectors:ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/edit_framework/components/basic_information_section.vue
- data-testid="name-input-group" - data-testid="name-input" - data-testid="description-input-group" + data-testid="name-input-group" + data-testid="name-input" - data-testid="description-input" + data-testid="description-input-group" + data-testid="description-input" - data-testid="pipeline-configuration-input-group" - data-testid="maintenance-mode-alert" + data-testid="pipeline-configuration-input-group" - data-testid="migrate-action-button" - data-testid="pipeline-configuration-input" - data-testid="disabled-pipeline-configuration-input-group" - data-testid="disabled-pipeline-configuration-input" - data-testid="disabled-pipeline-configuration-input-popover" + data-testid="maintenance-mode-alert" + data-testid="migrate-action-button" + data-testid="pipeline-configuration-input" + data-testid="disabled-pipeline-configuration-input-group" + data-testid="disabled-pipeline-configuration-input" + data-testid="disabled-pipeline-configuration-input-popover"
ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/edit_framework/components/edit_section.vue
+ data-testid="count-badge" + data-testid="status-badge"
ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/edit_framework/components/policies_section.vue
+ <div class="gl-ml-5" data-testid="info-text">
ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/edit_framework/components/projects_section.vue
+ <div class="gl-ml-5" data-testid="info-text"> + <gl-sprintf data-testid="info-text" :message="$options.i18n.projectsInfoText">
If the
e2e:test-on-omnibus
job in theqa
stage has run automatically, please ensure the tests are passing. If the job has not run, please start themanual:e2e-test-pipeline-generate
job in theprepare
stage and ensure the tests infollow-up:e2e:test-on-omnibus-ee
pipeline are passing.For the list of known failures please refer to the latest pipeline triage issue.
If your changes are under a feature flag, please check our Testing with feature flags documentation for instructions.
Reviewer roulette
Category Reviewer Maintainer frontend @rhardarson
(UTC+2, same timezone as author)
@psjakubowska
(UTC+2, same timezone as author)
UX @cam.x
(UTC+0, 2 hours behind author)
Maintainer review is optional for UX Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.
If needed, you can retry the
danger-review
job that generated this comment.Generated by
Dangerrequested review from @cam.x
- Resolved by Nataliia Radina
Bundle size analysis [beta]
This compares changes in bundle size for entry points between the commits 44cb2893 and 97cff2c9
Special assetsEntrypoint / Name Size before Size after Diff Diff in percent average 4.35 MB 4.35 MB - 0.0 % mainChunk 3.28 MB 3.28 MB - 0.0 %
Note: We do not have exact data for 44cb2893. So we have used data from: 0fe17a54.
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
Danger@marina.mosti could you please review frontend?
requested review from @marina.mosti
- Resolved by Nataliia Radina
added pipeline:mr-approved label
added pipelinetier-2 label and removed pipelinetier-1 label
Before you set this MR to auto-merge
This merge request will progress on pipeline tiers until it reaches the last tier: pipelinetier-3. We will trigger a new pipeline for each transition to a higher tier.
Before you set this MR to auto-merge, please check the following:
- You are the last maintainer of this merge request
- The latest pipeline for this merge request is pipelinetier-3 (You can find which tier it is in the pipeline name)
- This pipeline is recent enough (created in the last 8 hours)
If all the criteria above apply, please set auto-merge for this merge request.
See pipeline tiers and merging a merge request for more details.
E2E Test Result Summary
allure-report-publisher
generated test report!e2e-test-on-gdk:
test report for 97cff2c9expand test summary
+------------------------------------------------------------------+ | suites summary | +-------------+--------+--------+---------+-------+-------+--------+ | | passed | failed | skipped | flaky | total | result | +-------------+--------+--------+---------+-------+-------+--------+ | Verify | 44 | 0 | 2 | 0 | 46 | ✅ | | Plan | 74 | 0 | 1 | 0 | 75 | ✅ | | Create | 128 | 0 | 16 | 0 | 144 | ✅ | | Govern | 72 | 0 | 0 | 0 | 72 | ✅ | | Data Stores | 31 | 0 | 1 | 0 | 32 | ✅ | | Package | 20 | 0 | 12 | 0 | 32 | ✅ | | Manage | 1 | 0 | 1 | 0 | 2 | ✅ | | Fulfillment | 2 | 0 | 0 | 0 | 2 | ✅ | | Monitor | 8 | 0 | 0 | 0 | 8 | ✅ | | Release | 5 | 0 | 0 | 0 | 5 | ✅ | | Secure | 4 | 0 | 0 | 0 | 4 | ✅ | | Analytics | 2 | 0 | 0 | 0 | 2 | ✅ | +-------------+--------+--------+---------+-------+-------+--------+ | Total | 391 | 0 | 33 | 0 | 424 | ✅ | +-------------+--------+--------+---------+-------+-------+--------+
- Resolved by Nataliia Radina
- Resolved by Nataliia Radina
- Resolved by Nataliia Radina
- Resolved by Nataliia Radina
- Resolved by Nataliia Radina
- Resolved by Nataliia Radina
- Resolved by Marina Mosti
- Resolved by Nataliia Radina
- Resolved by Nataliia Radina
- Resolved by Nataliia Radina
79 90 <gl-loading-icon size="lg" /> 80 91 </template> 81 92 </gl-table> 93 <div class="gl-ml-5" data-testid="info-text"> 94 <gl-icon name="information-o" variant="subtle" class="gl-mr-2" /> 95 <gl-sprintf data-testid="info-text" :message="$options.i18n.projectsInfoText"> 96 <template #link="{ content }"> 97 <gl-link @click="navigateToProjectsReport">{{ content }}</gl-link> thanks! haven't used :to for a while and completely forgot about it!
Edited by Nataliia Radinachanged this line in version 2 of the diff
- Resolved by Nataliia Radina
- Resolved by Nataliia Radina
Hey @nradina I found some problems, back to you.
Note that I see a few differences between the design and the MR, I don't know if this is accounted for. For example the design says
New compliance framework
and the call to action on the add framework button is different. Am I looking at the wrong designs?Outside of the scope of the MR but I see a problem also with the
Add
button, we are disabling it and this goes against pajamas guidelines and is an a11y concern. Submit buttons should never be disabled and instead provide validation feedback to the user when clicked.Sadly I am having major issues with my gdk and was unable to test this locally
- Resolved by Nataliia Radina
- Resolved by Nataliia Radina
- Resolved by Nataliia Radina
Hi @nradina left small issue with the
GlLink
and a comment about a11y. Thanks for addressing the concerns, BTY
mentioned in merge request !165111 (merged)
requested review from @marina.mosti
98 98 > 99 99 {{ isRequired ? $options.i18n.required : $options.i18n.optional }} 100 100 </gl-badge> 101 <gl-icon class="gl-m-4" :name="collapseIconName" :alt="collapseIconAlt" /> 101 <gl-button 102 class="gl-m-4 !gl-bg-gray-50" 103 category="tertiary" 104 :icon="collapseIconName" 105 :alt="collapseIconAlt" 106 /> @marina.mosti why the problem? It is possible to open the collapse with the button. - for disabled users.
Edited by Nataliia Radina@marina.mosti also this was not introduced in this MR so I will open a follow-up to resolve this independently.
Thanks for the great review one more time! Here is the issue
Approved on my end pending revision of the open threads by maintainer.
@ntepluhina could you follow up on this one please?
Thanks!
requested review from @ntepluhina
- Resolved by Nataliia Radina
- Resolved by Nataliia Radina
@nradina nice work! I've responded in a few threads above and added one more suggestion, back to you
removed review request for @ntepluhina