From b097fdcc12caa734483ebf9ffdb3ac85c4e3ad0f Mon Sep 17 00:00:00 2001 From: GitLab UI REST integrations Date: Thu, 28 Nov 2024 13:14:43 +0000 Subject: [PATCH 1/2] GitLab UI integration test for button-remove-info-variant --- package.json | 2 +- yarn.lock | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 98b41eec1fb066..7dab936a344e88 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "@gitlab/query-language": "^0.0.5-a-20241112", "@gitlab/query-language-rust": "0.1.2", "@gitlab/svgs": "3.121.0", - "@gitlab/ui": "103.7.1", + "@gitlab/ui": "https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/8494696470/artifacts/raw/gitlab-ui.button-remove-info-variant.tgz", "@gitlab/vue-router-vue3": "npm:vue-router@4.1.6", "@gitlab/vuex-vue3": "npm:vuex@4.0.0", "@gitlab/web-ide": "^0.0.1-dev-20241112063543", diff --git a/yarn.lock b/yarn.lock index c3db1fde105fa2..b9adf59202658d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1433,10 +1433,9 @@ resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-3.121.0.tgz#57cacc895929aef4320632396373797a64b230ff" integrity sha512-ZekVjdMZrjrNEjdrOHsJYCu7A+ea3AkuNUxWIZ3FaNgJj4Oh21RlTP7bQKnRSXVhBbV1jg1PgzQ1ANEoCW8t4g== -"@gitlab/ui@103.7.1": +"@gitlab/ui@https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/8494696470/artifacts/raw/gitlab-ui.button-remove-info-variant.tgz": version "103.7.1" - resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-103.7.1.tgz#7df2ab802aad48a946100d73d3fc9fa1733bb9bb" - integrity sha512-ThpGdWWLdWN0j2q3RhQ63625KbeK2BXinhk3iQyy//z08sxZJYXWwcdFF88TImPtBVV7p5e/01Mb6WhqI/H8wg== + resolved "https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/8494696470/artifacts/raw/gitlab-ui.button-remove-info-variant.tgz#08a5e84dd8225d6214a47deac45d16234069514d" dependencies: "@floating-ui/dom" "1.4.3" echarts "^5.3.2" -- GitLab From 27de18793ebf67ff1d3078963126a4a3ac38bc89 Mon Sep 17 00:00:00 2001 From: Sascha Eggenberger Date: Thu, 28 Nov 2024 14:50:43 +0100 Subject: [PATCH 2/2] Refactor info to confirm --- .../custom_emoji/components/list.vue | 2 +- .../stop_stale_environments_modal.vue | 1 - doc/development/documentation/help.md | 23 +++++++------------ .../deployment_frequency_charts.vue | 2 +- .../move_personal_project_to_group_modal.vue | 2 +- .../components/ai_commit_message.vue | 2 +- .../discover/card_security_discover_app.vue | 2 +- .../deployment_frequency_charts_spec.js | 2 +- .../__snapshots__/list_spec.js.snap | 4 ++-- 9 files changed, 16 insertions(+), 24 deletions(-) diff --git a/app/assets/javascripts/custom_emoji/components/list.vue b/app/assets/javascripts/custom_emoji/components/list.vue index a41d1bc30f307e..cd8b5493ca1a48 100644 --- a/app/assets/javascripts/custom_emoji/components/list.vue +++ b/app/assets/javascripts/custom_emoji/components/list.vue @@ -45,7 +45,7 @@ export default { return { text: __('New custom emoji'), attributes: { - variant: 'info', + variant: 'confirm', to: '/new', }, }; diff --git a/app/assets/javascripts/environments/components/stop_stale_environments_modal.vue b/app/assets/javascripts/environments/components/stop_stale_environments_modal.vue index 57873b28d374e2..9d5680f6f954c6 100644 --- a/app/assets/javascripts/environments/components/stop_stale_environments_modal.vue +++ b/app/assets/javascripts/environments/components/stop_stale_environments_modal.vue @@ -39,7 +39,6 @@ export default { modalProps: { primary: { text: s__('Environments|Clean up'), - attributes: [{ variant: 'info' }], }, cancel: { text: __('Cancel'), diff --git a/doc/development/documentation/help.md b/doc/development/documentation/help.md index 13d8ced5544e5d..8d7547f24920b5 100644 --- a/doc/development/documentation/help.md +++ b/doc/development/documentation/help.md @@ -80,7 +80,8 @@ The `help_page_path` contains the path to the document you want to link to, with the following conventions: - It's relative to the `doc/` directory in the GitLab repository. -- For clarity, it should end with the `.md` file extension. +- It omits the `.md` extension. +- It doesn't end with a forward slash (`/`). The help text follows the [Pajamas guidelines](https://design.gitlab.com/usability/contextual-help#formatting-help-content). @@ -93,14 +94,14 @@ is inside `_()` so it can be translated: link to the `/help` page is: ```haml - = link_to _('Learn more.'), help_page_path('user/permissions.md'), target: '_blank', rel: 'noopener noreferrer' + = link_to _('Learn more.'), help_page_path('user/permissions'), target: '_blank', rel: 'noopener noreferrer' ``` - Linking to an anchor link. Use `anchor` as part of the `help_page_path` method: ```haml - = link_to _('Learn more.'), help_page_path('user/permissions.md', anchor: 'anchor-link'), target: '_blank', rel: 'noopener noreferrer' + = link_to _('Learn more.'), help_page_path('user/permissions', anchor: 'anchor-link'), target: '_blank', rel: 'noopener noreferrer' ``` - Using links inline of some text. First, define the link, and then use it. In @@ -108,18 +109,10 @@ is inside `_()` so it can be translated: link: ```haml - - link = link_to('', help_page_path('user/permissions.md'), target: '_blank', rel: 'noopener noreferrer') + - link = link_to('', help_page_path('user/permissions'), target: '_blank', rel: 'noopener noreferrer') %p= safe_format(_("This is a text describing the option/feature in a sentence. %{link_start}Learn more.%{link_end}"), tag_pair(link, :link_start, :link_end)) ``` -- Using a button link. Useful in places where text would be out of context with - the rest of the page layout: - - ```haml - = render Pajamas::ButtonComponent.new(variant: :default, href: help_page_path('user/group/import/index.md'), target: '_blank') do - = _('Learn more') - ``` - ### Linking to `/help` in JavaScript To link to the documentation from a JavaScript or a Vue component, use the `helpPagePath` function from [`help_page_helper.js`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/helpers/help_page_helper.js): @@ -127,7 +120,7 @@ To link to the documentation from a JavaScript or a Vue component, use the `help ```javascript import { helpPagePath } from '~/helpers/help_page_helper'; -helpPagePath('user/permissions.md', { anchor: 'anchor-link' }) +helpPagePath('user/permissions', { anchor: 'anchor-link' }) // evaluates to '/help/user/permissions#anchor-link' for GitLab.com ``` @@ -139,7 +132,7 @@ To link to the documentation from within Ruby code, use the following code block be translated: ```ruby -docs_link = link_to _('Learn more.'), help_page_url('user/permissions.md', anchor: 'anchor-link'), target: '_blank', rel: 'noopener noreferrer' +docs_link = link_to _('Learn more.'), help_page_url('user/permissions', anchor: 'anchor-link'), target: '_blank', rel: 'noopener noreferrer' safe_format(_('This is a text describing the option/feature in a sentence. %{docs_link}'), docs_link: docs_link) ``` @@ -147,7 +140,7 @@ In cases where you need to generate a link from outside of views/helpers, where as a guide where the methods are fully qualified: ```ruby -docs_link = ActionController::Base.helpers.link_to _('Learn more.'), Rails.application.routes.url_helpers.help_page_url('user/permissions.md', anchor: 'anchor-link'), target: '_blank', rel: 'noopener noreferrer' +docs_link = ActionController::Base.helpers.link_to _('Learn more.'), Rails.application.routes.url_helpers.help_page_url('user/permissions', anchor: 'anchor-link'), target: '_blank', rel: 'noopener noreferrer' safe_format(_('This is a text describing the option/feature in a sentence. %{docs_link}'), docs_link: docs_link) ``` diff --git a/ee/app/assets/javascripts/dora/components/deployment_frequency_charts.vue b/ee/app/assets/javascripts/dora/components/deployment_frequency_charts.vue index 97aa2d30789bd3..b5f7cef363cda1 100644 --- a/ee/app/assets/javascripts/dora/components/deployment_frequency_charts.vue +++ b/ee/app/assets/javascripts/dora/components/deployment_frequency_charts.vue @@ -327,7 +327,7 @@ export default { } = this.$options.i18n; this.forecastConfirmed = await confirmAction('', { - primaryBtnVariant: 'info', + primaryBtnVariant: 'confirm', primaryBtnText, title, modalHtmlMessage, diff --git a/ee/app/assets/javascripts/projects/components/move_personal_project_to_group_modal.vue b/ee/app/assets/javascripts/projects/components/move_personal_project_to_group_modal.vue index e6d60c4f867f52..ecf2a03cebd2cf 100644 --- a/ee/app/assets/javascripts/projects/components/move_personal_project_to_group_modal.vue +++ b/ee/app/assets/javascripts/projects/components/move_personal_project_to_group_modal.vue @@ -33,7 +33,7 @@ export default { attributes: { target: '_blank', category: 'primary', - variant: 'info', + variant: 'confirm', href: this.$options.moveProjectDocsPath, 'data-testid': 'docs-link-button', }, diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/ai_commit_message.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/ai_commit_message.vue index d502fd504d0ae1..891dc979cb423e 100644 --- a/ee/app/assets/javascripts/vue_merge_request_widget/components/ai_commit_message.vue +++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/ai_commit_message.vue @@ -71,7 +71,7 @@ export default { return { text: __('Insert'), attributes: { - variant: 'info', + variant: 'primary', disabled: this.loadingCommitMessage, }, }; diff --git a/ee/app/assets/javascripts/vue_shared/discover/card_security_discover_app.vue b/ee/app/assets/javascripts/vue_shared/discover/card_security_discover_app.vue index ea82709477c4b7..18086ca31070ae 100644 --- a/ee/app/assets/javascripts/vue_shared/discover/card_security_discover_app.vue +++ b/ee/app/assets/javascripts/vue_shared/discover/card_security_discover_app.vue @@ -46,7 +46,7 @@ export default { discoverButtonProps() { return { class: 'gl-ml-3', - variant: 'info', + variant: 'confirm', // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26 // eslint-disable-next-line @gitlab/require-i18n-strings rel: 'noopener noreferrer', diff --git a/ee/spec/frontend/dora/components/deployment_frequency_charts_spec.js b/ee/spec/frontend/dora/components/deployment_frequency_charts_spec.js index 6289c454811be1..39da90a75ea8ce 100644 --- a/ee/spec/frontend/dora/components/deployment_frequency_charts_spec.js +++ b/ee/spec/frontend/dora/components/deployment_frequency_charts_spec.js @@ -369,7 +369,7 @@ describe('deployment_frequency_charts.vue', () => { expect(confirmAction).toHaveBeenCalledWith('', { primaryBtnText: DeploymentFrequencyCharts.i18n.confirmationBtnText, - primaryBtnVariant: 'info', + primaryBtnVariant: 'confirm', title: DeploymentFrequencyCharts.i18n.confirmationTitle, modalHtmlMessage: DeploymentFrequencyCharts.i18n.confirmationHtmlMessage, }); diff --git a/spec/frontend/custom_emoji/components/__snapshots__/list_spec.js.snap b/spec/frontend/custom_emoji/components/__snapshots__/list_spec.js.snap index b241890ddff6b3..798a7eed5e2601 100644 --- a/spec/frontend/custom_emoji/components/__snapshots__/list_spec.js.snap +++ b/spec/frontend/custom_emoji/components/__snapshots__/list_spec.js.snap @@ -15,7 +15,7 @@ exports[`Custom emoji settings list component renders table of custom emoji 1`] data-testid="actions-tabs-start" >