diff options
Diffstat (limited to 'app/assets')
764 files changed, 11671 insertions, 7629 deletions
diff --git a/app/assets/images/auth_buttons/gitlab_64.png b/app/assets/images/auth_buttons/gitlab_64.png Binary files differindex f675678dc9d..860f9c1be9b 100644 --- a/app/assets/images/auth_buttons/gitlab_64.png +++ b/app/assets/images/auth_buttons/gitlab_64.png diff --git a/app/assets/images/ext_snippet_icons/ext_snippet_icons.png b/app/assets/images/ext_snippet_icons/ext_snippet_icons.png Binary files differindex c864e558bfd..e81115d311e 100644 --- a/app/assets/images/ext_snippet_icons/ext_snippet_icons.png +++ b/app/assets/images/ext_snippet_icons/ext_snippet_icons.png diff --git a/app/assets/javascripts/access_tokens/components/access_token_table_app.vue b/app/assets/javascripts/access_tokens/components/access_token_table_app.vue new file mode 100644 index 00000000000..944a2ef7f64 --- /dev/null +++ b/app/assets/javascripts/access_tokens/components/access_token_table_app.vue @@ -0,0 +1,168 @@ +<script> +import { GlButton, GlIcon, GlLink, GlPagination, GlTable, GlTooltipDirective } from '@gitlab/ui'; +import { helpPagePath } from '~/helpers/help_page_helper'; +import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; +import { __, sprintf } from '~/locale'; +import DomElementListener from '~/vue_shared/components/dom_element_listener.vue'; +import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; +import UserDate from '~/vue_shared/components/user_date.vue'; +import { EVENT_SUCCESS, FIELDS, FORM_SELECTOR, INITIAL_PAGE, PAGE_SIZE } from './constants'; + +export default { + EVENT_SUCCESS, + FORM_SELECTOR, + PAGE_SIZE, + name: 'AccessTokenTableApp', + components: { + DomElementListener, + GlButton, + GlIcon, + GlLink, + GlPagination, + GlTable, + TimeAgoTooltip, + UserDate, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + lastUsedHelpLink: helpPagePath('/user/profile/personal_access_tokens.md', { + anchor: 'view-the-last-time-a-token-was-used', + }), + i18n: { + emptyField: __('Never'), + expired: __('Expired'), + header: __('Active %{accessTokenTypePlural} (%{totalAccessTokens})'), + modalMessage: __( + 'Are you sure you want to revoke this %{accessTokenType}? This action cannot be undone.', + ), + revokeButton: __('Revoke'), + tokenValidity: __('Token valid until revoked'), + }, + inject: [ + 'accessTokenType', + 'accessTokenTypePlural', + 'initialActiveAccessTokens', + 'noActiveTokensMessage', + 'showRole', + ], + data() { + return { + activeAccessTokens: this.initialActiveAccessTokens, + currentPage: INITIAL_PAGE, + }; + }, + computed: { + filteredFields() { + return this.showRole ? FIELDS : FIELDS.filter((field) => field.key !== 'role'); + }, + header() { + return sprintf(this.$options.i18n.header, { + accessTokenTypePlural: this.accessTokenTypePlural, + totalAccessTokens: this.activeAccessTokens.length, + }); + }, + modalMessage() { + return sprintf(this.$options.i18n.modalMessage, { + accessTokenType: this.accessTokenType, + }); + }, + showPagination() { + return this.activeAccessTokens.length > PAGE_SIZE; + }, + }, + methods: { + onSuccess(event) { + const [{ active_access_tokens: activeAccessTokens }] = event.detail; + this.activeAccessTokens = convertObjectPropsToCamelCase(activeAccessTokens, { deep: true }); + this.currentPage = INITIAL_PAGE; + }, + sortingChanged(aRow, bRow, key) { + if (['createdAt', 'lastUsedAt', 'expiresAt'].includes(key)) { + // Transform `null` value to the latest possible date + // https://stackoverflow.com/a/11526569/18428169 + const maxEpoch = 8640000000000000; + const a = new Date(aRow[key] ?? maxEpoch).getTime(); + const b = new Date(bRow[key] ?? maxEpoch).getTime(); + return a - b; + } + + // For other columns the default sorting works OK + return false; + }, + }, +}; +</script> + +<template> + <dom-element-listener :selector="$options.FORM_SELECTOR" @[$options.EVENT_SUCCESS]="onSuccess"> + <div> + <hr /> + <h5>{{ header }}</h5> + + <gl-table + data-testid="active-tokens" + :empty-text="noActiveTokensMessage" + :fields="filteredFields" + :items="activeAccessTokens" + :per-page="$options.PAGE_SIZE" + :current-page="currentPage" + :sort-compare="sortingChanged" + show-empty + > + <template #cell(createdAt)="{ item: { createdAt } }"> + <user-date :date="createdAt" /> + </template> + + <template #head(lastUsedAt)="{ label }"> + <span>{{ label }}</span> + <gl-link :href="$options.lastUsedHelpLink" + ><gl-icon name="question-o" /><span class="gl-sr-only">{{ + s__('AccessTokens|The last time a token was used') + }}</span></gl-link + > + </template> + + <template #cell(lastUsedAt)="{ item: { lastUsedAt } }"> + <time-ago-tooltip v-if="lastUsedAt" :time="lastUsedAt" /> + <template v-else> {{ $options.i18n.emptyField }}</template> + </template> + + <template #cell(expiresAt)="{ item: { expiresAt, expired, expiresSoon } }"> + <template v-if="expiresAt"> + <span v-if="expired" class="text-danger">{{ $options.i18n.expired }}</span> + <time-ago-tooltip v-else :class="{ 'text-warning': expiresSoon }" :time="expiresAt" /> + </template> + <span v-else v-gl-tooltip :title="$options.i18n.tokenValidity">{{ + $options.i18n.emptyField + }}</span> + </template> + + <template #cell(action)="{ item: { revokePath, expiresAt } }"> + <gl-button + variant="danger" + :category="expiresAt ? 'primary' : 'secondary'" + :aria-label="$options.i18n.revokeButton" + :data-confirm="modalMessage" + data-confirm-btn-variant="danger" + data-qa-selector="revoke_button" + data-method="put" + :href="revokePath" + icon="remove" + /> + </template> + </gl-table> + <gl-pagination + v-if="showPagination" + v-model="currentPage" + :per-page="$options.PAGE_SIZE" + :total-items="activeAccessTokens.length" + :prev-text="__('Prev')" + :next-text="__('Next')" + :label-next-page="__('Go to next page')" + :label-prev-page="__('Go to previous page')" + align="center" + /> + </div> + </dom-element-listener> +</template> diff --git a/app/assets/javascripts/access_tokens/components/constants.js b/app/assets/javascripts/access_tokens/components/constants.js new file mode 100644 index 00000000000..84e50bc099f --- /dev/null +++ b/app/assets/javascripts/access_tokens/components/constants.js @@ -0,0 +1,61 @@ +import { __, s__ } from '~/locale'; + +export const EVENT_ERROR = 'ajax:error'; +export const EVENT_SUCCESS = 'ajax:success'; +export const FORM_SELECTOR = '#js-new-access-token-form'; + +export const INITIAL_PAGE = 1; +export const PAGE_SIZE = 100; + +export const FIELDS = [ + { + key: 'name', + label: __('Token name'), + sortable: true, + tdClass: `gl-text-black-normal`, + thClass: `gl-text-black-normal`, + }, + { + formatter(scopes) { + return scopes?.length ? scopes.join(', ') : __('no scopes selected'); + }, + key: 'scopes', + label: __('Scopes'), + sortable: true, + tdClass: `gl-text-black-normal`, + thClass: `gl-text-black-normal`, + }, + { + key: 'createdAt', + label: s__('AccessTokens|Created'), + sortable: true, + tdClass: `gl-text-black-normal`, + thClass: `gl-text-black-normal`, + }, + { + key: 'lastUsedAt', + label: __('Last Used'), + sortable: true, + tdClass: `gl-text-black-normal`, + thClass: `gl-text-black-normal`, + }, + { + key: 'expiresAt', + label: __('Expires'), + sortable: true, + tdClass: `gl-text-black-normal`, + thClass: `gl-text-black-normal`, + }, + { + key: 'role', + label: __('Role'), + tdClass: `gl-text-black-normal`, + thClass: `gl-text-black-normal`, + sortable: true, + }, + { + key: 'action', + label: __('Action'), + thClass: `gl-text-black-normal`, + }, +]; diff --git a/app/assets/javascripts/access_tokens/components/expires_at_field.vue b/app/assets/javascripts/access_tokens/components/expires_at_field.vue index 561b2617c5f..147de529eea 100644 --- a/app/assets/javascripts/access_tokens/components/expires_at_field.vue +++ b/app/assets/javascripts/access_tokens/components/expires_at_field.vue @@ -21,17 +21,17 @@ export default { required: false, default: () => ({}), }, + minDate: { + type: Date, + required: false, + default: () => new Date(), + }, maxDate: { type: Date, required: false, default: () => null, }, }, - data() { - return { - minDate: new Date(), - }; - }, }; </script> diff --git a/app/assets/javascripts/access_tokens/components/new_access_token_app.vue b/app/assets/javascripts/access_tokens/components/new_access_token_app.vue new file mode 100644 index 00000000000..904052688f3 --- /dev/null +++ b/app/assets/javascripts/access_tokens/components/new_access_token_app.vue @@ -0,0 +1,130 @@ +<script> +import { GlAlert } from '@gitlab/ui'; +import { createAlert, VARIANT_INFO } from '~/flash'; +import { __, n__, sprintf } from '~/locale'; +import DomElementListener from '~/vue_shared/components/dom_element_listener.vue'; +import InputCopyToggleVisibility from '~/vue_shared/components/form/input_copy_toggle_visibility.vue'; +import { EVENT_ERROR, EVENT_SUCCESS, FORM_SELECTOR } from './constants'; + +export default { + EVENT_ERROR, + EVENT_SUCCESS, + FORM_SELECTOR, + name: 'NewAccessTokenApp', + components: { DomElementListener, GlAlert, InputCopyToggleVisibility }, + i18n: { + alertInfoMessage: __('Your new %{accessTokenType} has been created.'), + copyButtonTitle: __('Copy %{accessTokenType}'), + description: __("Make sure you save it - you won't be able to access it again."), + label: __('Your new %{accessTokenType}'), + }, + tokenInputId: 'new-access-token', + inject: ['accessTokenType'], + data() { + return { errors: null, infoAlert: null, newToken: null }; + }, + computed: { + alertInfoMessage() { + return sprintf(this.$options.i18n.alertInfoMessage, { + accessTokenType: this.accessTokenType, + }); + }, + alertDangerTitle() { + return n__( + 'The form contains the following error:', + 'The form contains the following errors:', + this.errors?.length ?? 0, + ); + }, + copyButtonTitle() { + return sprintf(this.$options.i18n.copyButtonTitle, { accessTokenType: this.accessTokenType }); + }, + formInputGroupProps() { + return { + id: this.$options.tokenInputId, + class: 'qa-created-access-token', + 'data-qa-selector': 'created_access_token_field', + name: this.$options.tokenInputId, + }; + }, + label() { + return sprintf(this.$options.i18n.label, { accessTokenType: this.accessTokenType }); + }, + }, + mounted() { + /** @type {HTMLFormElement} */ + this.form = document.querySelector(FORM_SELECTOR); + + /** @type {HTMLInputElement} */ + this.submitButton = this.form.querySelector('input[type=submit]'); + }, + methods: { + beforeDisplayResults() { + this.infoAlert?.dismiss(); + this.$refs.container.scrollIntoView(false); + + this.errors = null; + this.newToken = null; + }, + onError(event) { + this.beforeDisplayResults(); + + const [{ errors }] = event.detail; + this.errors = errors; + + this.submitButton.classList.remove('disabled'); + }, + onSuccess(event) { + this.beforeDisplayResults(); + + const [{ new_token: newToken }] = event.detail; + this.newToken = newToken; + + this.infoAlert = createAlert({ message: this.alertInfoMessage, variant: VARIANT_INFO }); + + this.form.reset(); + }, + }, +}; +</script> + +<template> + <dom-element-listener + :selector="$options.FORM_SELECTOR" + @[$options.EVENT_ERROR]="onError" + @[$options.EVENT_SUCCESS]="onSuccess" + > + <div ref="container"> + <template v-if="newToken"> + <!-- + After issue https://gitlab.com/gitlab-org/gitlab/-/issues/360921 is + closed remove the `initial-visibility`. + --> + <input-copy-toggle-visibility + :copy-button-title="copyButtonTitle" + :label="label" + :label-for="$options.tokenInputId" + :value="newToken" + initial-visibility + :form-input-group-props="formInputGroupProps" + > + <template #description> + {{ $options.i18n.description }} + </template> + </input-copy-toggle-visibility> + <hr /> + </template> + + <template v-if="errors"> + <gl-alert :title="alertDangerTitle" variant="danger" @dismiss="errors = null"> + <ul class="m-0"> + <li v-for="error in errors" :key="error"> + {{ error }} + </li> + </ul> + </gl-alert> + <hr /> + </template> + </div> + </dom-element-listener> +</template> diff --git a/app/assets/javascripts/access_tokens/index.js b/app/assets/javascripts/access_tokens/index.js index c59bd445539..a7a03523e7f 100644 --- a/app/assets/javascripts/access_tokens/index.js +++ b/app/assets/javascripts/access_tokens/index.js @@ -3,12 +3,57 @@ import Vue from 'vue'; import createFlash from '~/flash'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import { parseRailsFormFields } from '~/lib/utils/forms'; -import { __ } from '~/locale'; +import { __, sprintf } from '~/locale'; +import AccessTokenTableApp from './components/access_token_table_app.vue'; import ExpiresAtField from './components/expires_at_field.vue'; +import NewAccessTokenApp from './components/new_access_token_app.vue'; import TokensApp from './components/tokens_app.vue'; import { FEED_TOKEN, INCOMING_EMAIL_TOKEN, STATIC_OBJECT_TOKEN } from './constants'; +export const initAccessTokenTableApp = () => { + const el = document.querySelector('#js-access-token-table-app'); + + if (!el) { + return null; + } + + const { + accessTokenType, + accessTokenTypePlural, + initialActiveAccessTokens: initialActiveAccessTokensJson, + noActiveTokensMessage: noTokensMessage, + } = el.dataset; + + // Default values + const noActiveTokensMessage = + noTokensMessage || + sprintf(__('This user has no active %{accessTokenTypePlural}.'), { accessTokenTypePlural }); + const showRole = 'showRole' in el.dataset; + + const initialActiveAccessTokens = convertObjectPropsToCamelCase( + JSON.parse(initialActiveAccessTokensJson), + { + deep: true, + }, + ); + + return new Vue({ + el, + name: 'AccessTokenTableRoot', + provide: { + accessTokenType, + accessTokenTypePlural, + initialActiveAccessTokens, + noActiveTokensMessage, + showRole, + }, + render(h) { + return h(AccessTokenTableApp); + }, + }); +}; + export const initExpiresAtField = () => { const el = document.querySelector('.js-access-tokens-expires-at'); @@ -17,7 +62,7 @@ export const initExpiresAtField = () => { } const { expiresAt: inputAttrs } = parseRailsFormFields(el); - const { maxDate } = el.dataset; + const { minDate, maxDate } = el.dataset; return new Vue({ el, @@ -25,6 +70,7 @@ export const initExpiresAtField = () => { return h(ExpiresAtField, { props: { inputAttrs, + minDate: minDate ? new Date(minDate) : undefined, maxDate: maxDate ? new Date(maxDate) : undefined, }, }); @@ -32,6 +78,27 @@ export const initExpiresAtField = () => { }); }; +export const initNewAccessTokenApp = () => { + const el = document.querySelector('#js-new-access-token-app'); + + if (!el) { + return null; + } + + const { accessTokenType } = el.dataset; + + return new Vue({ + el, + name: 'NewAccessTokenRoot', + provide: { + accessTokenType, + }, + render(h) { + return h(NewAccessTokenApp); + }, + }); +}; + export const initProjectsField = () => { const el = document.querySelector('.js-access-tokens-projects'); diff --git a/app/assets/javascripts/activities.js b/app/assets/javascripts/activities.js index 7a78ccdb0cd..6fc37e9331f 100644 --- a/app/assets/javascripts/activities.js +++ b/app/assets/javascripts/activities.js @@ -2,7 +2,7 @@ import $ from 'jquery'; import { setCookie } from '~/lib/utils/common_utils'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { s__ } from '~/locale'; import { localTimeAgo } from './lib/utils/datetime_utility'; import Pager from './pager'; @@ -31,7 +31,7 @@ export default class Activities { prepareData: (data) => data, successCallback: () => this.updateTooltips(), errorCallback: () => - createFlash({ + createAlert({ message: s__( 'Activity|An error occurred while retrieving activity. Reload the page to try again.', ), diff --git a/app/assets/javascripts/admin/application_settings/inactive_project_deletion/components/form.vue b/app/assets/javascripts/admin/application_settings/inactive_project_deletion/components/form.vue new file mode 100644 index 00000000000..ef4a5319eec --- /dev/null +++ b/app/assets/javascripts/admin/application_settings/inactive_project_deletion/components/form.vue @@ -0,0 +1,249 @@ +<script> +import { + GlFormCheckbox, + GlFormGroup, + GlFormInputGroup, + GlFormInput, + GlFormText, + GlLink, + GlSprintf, +} from '@gitlab/ui'; +import { helpPagePath } from '~/helpers/help_page_helper'; +import { __, s__ } from '~/locale'; + +export default { + name: 'InactiveProjectDeletionForm', + components: { + GlFormCheckbox, + GlFormGroup, + GlFormInputGroup, + GlFormInput, + GlFormText, + GlLink, + GlSprintf, + }, + props: { + deleteInactiveProjects: { + type: Boolean, + required: false, + default: false, + }, + inactiveProjectsDeleteAfterMonths: { + type: Number, + required: false, + default: 2, + }, + inactiveProjectsMinSizeMb: { + type: Number, + required: false, + default: 0, + }, + inactiveProjectsSendWarningEmailAfterMonths: { + type: Number, + required: false, + default: 1, + }, + }, + data() { + return { + enabled: this.deleteInactiveProjects, + deleteAfterMonths: this.inactiveProjectsDeleteAfterMonths, + minSizeMb: this.inactiveProjectsMinSizeMb, + sendWarningEmailAfterMonths: this.inactiveProjectsSendWarningEmailAfterMonths, + }; + }, + computed: { + isMinSizeMbValid() { + return parseInt(this.minSizeMb, 10) >= 0; + }, + isDeleteAfterMonthsValid() { + return ( + parseInt(this.deleteAfterMonths, 10) > 0 && + parseInt(this.deleteAfterMonths, 10) > parseInt(this.sendWarningEmailAfterMonths, 10) + ); + }, + isSendWarningEmailAfterMonthsValid() { + return parseInt(this.sendWarningEmailAfterMonths, 10) > 0; + }, + }, + methods: { + checkValidity(ref, feedback, valid) { + // These form fields are used within a HAML created form and we don't have direct access to the submit button + // So we set the validity of the field so the HAML form can't be submitted until this is set back to blank + if (valid) { + ref.$el.setCustomValidity(''); + } else { + ref.$el.setCustomValidity(feedback); + } + }, + }, + i18n: { + checkboxLabel: s__('AdminSettings|Delete inactive projects'), + checkboxHelp: s__( + 'AdminSettings|Configure when inactive projects should be automatically deleted. %{linkStart}What are inactive projects?%{linkEnd}', + ), + checkboxHelpDocLink: helpPagePath('administration/inactive_project_deletion'), + minSizeMbLabel: s__('AdminSettings|When to delete inactive projects'), + minSizeMbDescription: s__('AdminSettings|Delete inactive projects that exceed'), + minSizeMbInvalidFeedback: s__('AdminSettings|Minimum size must be at least 0.'), + deleteAfterMonthsLabel: s__('AdminSettings|Delete project after'), + deleteAfterMonthsInvalidFeedback: s__( + "AdminSettings|You can't delete projects before the warning email is sent.", + ), + sendWarningEmailAfterMonthsLabel: s__('AdminSettings|Send warning email'), + sendWarningEmailAfterMonthsDescription: s__( + 'AdminSettings|Send email to maintainers after project is inactive for', + ), + sendWarningEmailAfterMonthsHelp: s__( + 'AdminSettings|Requires %{linkStart}email notifications%{linkEnd}', + ), + sendWarningEmailAfterMonthsDocLink: helpPagePath('user/profile/notifications'), + sendWarningEmailAfterMonthsInvalidFeedback: s__( + 'AdminSettings|Setting must be greater than 0.', + ), + mbAppend: __('MB'), + monthsAppend: __('months'), + }, +}; +</script> +<template> + <div> + <gl-form-group> + <input name="application_setting[delete_inactive_projects]" type="hidden" :value="enabled" /> + <gl-form-checkbox v-model="enabled"> + {{ $options.i18n.checkboxLabel }} + + <template #help> + <gl-sprintf :message="$options.i18n.checkboxHelp"> + <template #link="{ content }"> + <gl-link :href="$options.i18n.checkboxHelpDocLink" target="_blank"> + {{ content }} + </gl-link> + </template> + </gl-sprintf> + </template> + </gl-form-checkbox> + </gl-form-group> + + <div v-if="enabled" class="gl-ml-6" data-testid="inactive-project-deletion-settings"> + <gl-form-group + :label="$options.i18n.minSizeMbLabel" + :state="isMinSizeMbValid" + data-testid="min-size-group" + > + <template #invalid-feedback> + <div class="gl-w-40p">{{ $options.i18n.minSizeMbInvalidFeedback }}</div> + </template> + <gl-form-text class="gl-mt-0 gl-mb-3 gl-text-body!"> + {{ $options.i18n.minSizeMbDescription }} + </gl-form-text> + <gl-form-input-group data-testid="min-size-input-group"> + <gl-form-input + ref="minSizeMbInput" + v-model="minSizeMb" + :state="isMinSizeMbValid" + name="application_setting[inactive_projects_min_size_mb]" + size="md" + type="number" + :min="0" + data-testid="min-size-input" + @change=" + checkValidity( + $refs.minSizeMbInput, + $options.i18n.minSizeMbInvalidFeedback, + isMinSizeMbValid, + ) + " + /> + + <template #append> + <div class="input-group-text">{{ $options.i18n.mbAppend }}</div> + </template> + </gl-form-input-group> + </gl-form-group> + + <div class="gl-pl-6 gl-border-l"> + <gl-form-group + :label="$options.i18n.deleteAfterMonthsLabel" + :state="isDeleteAfterMonthsValid" + data-testid="delete-after-months-group" + > + <template #invalid-feedback> + <div class="gl-w-30p">{{ $options.i18n.deleteAfterMonthsInvalidFeedback }}</div> + </template> + <gl-form-input-group data-testid="delete-after-months-input-group"> + <gl-form-input + ref="deleteAfterMonthsInput" + v-model="deleteAfterMonths" + :state="isDeleteAfterMonthsValid" + name="application_setting[inactive_projects_delete_after_months]" + size="sm" + type="number" + :min="0" + data-testid="delete-after-months-input" + @change=" + checkValidity( + $refs.deleteAfterMonthsInput, + $options.i18n.deleteAfterMonthsInvalidFeedback, + isDeleteAfterMonthsValid, + ) + " + /> + + <template #append> + <div class="input-group-text">{{ $options.i18n.monthsAppend }}</div> + </template> + </gl-form-input-group> + </gl-form-group> + + <gl-form-group + :label="$options.i18n.sendWarningEmailAfterMonthsLabel" + :state="isSendWarningEmailAfterMonthsValid" + data-testid="send-warning-email-after-months-group" + > + <template #invalid-feedback> + <div class="gl-w-30p"> + {{ $options.i18n.sendWarningEmailAfterMonthsInvalidFeedback }} + </div> + </template> + <gl-form-text class="gl-max-w-26 gl-mt-0 gl-mb-3 gl-text-body!"> + {{ $options.i18n.sendWarningEmailAfterMonthsDescription }} + </gl-form-text> + <gl-form-input-group data-testid="send-warning-email-after-months-input-group"> + <gl-form-input + ref="sendWarningEmailAfterMonthsInput" + v-model="sendWarningEmailAfterMonths" + :state="isSendWarningEmailAfterMonthsValid" + name="application_setting[inactive_projects_send_warning_email_after_months]" + size="sm" + type="number" + :min="0" + data-testid="send-warning-email-after-months-input" + @change=" + checkValidity( + $refs.sendWarningEmailAfterMonthsInput, + $options.i18n.sendWarningEmailAfterMonthsInvalidFeedback, + isSendWarningEmailAfterMonthsValid, + ) + " + /> + + <template #append> + <div class="input-group-text">{{ $options.i18n.monthsAppend }}</div> + </template> + </gl-form-input-group> + + <template #description> + <gl-sprintf :message="$options.i18n.sendWarningEmailAfterMonthsHelp"> + <template #link="{ content }"> + <gl-link :href="$options.i18n.sendWarningEmailAfterMonthsDocLink" target="_blank"> + {{ content }} + </gl-link> + </template> + </gl-sprintf> + </template> + </gl-form-group> + </div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/admin/application_settings/inactive_project_deletion/index.js b/app/assets/javascripts/admin/application_settings/inactive_project_deletion/index.js new file mode 100644 index 00000000000..43e6902885c --- /dev/null +++ b/app/assets/javascripts/admin/application_settings/inactive_project_deletion/index.js @@ -0,0 +1,36 @@ +import Vue from 'vue'; +import { parseBoolean } from '~/lib/utils/common_utils'; +import Form from './components/form.vue'; + +export default () => { + const el = document.querySelector('.js-inactive-project-deletion-form'); + + if (!el) { + return false; + } + + const { + deleteInactiveProjects, + inactiveProjectsDeleteAfterMonths, + inactiveProjectsMinSizeMb, + inactiveProjectsSendWarningEmailAfterMonths, + } = el.dataset; + + return new Vue({ + el, + name: 'InactiveProjectDeletion', + render(createElement) { + return createElement(Form, { + props: { + deleteInactiveProjects: parseBoolean(deleteInactiveProjects), + inactiveProjectsDeleteAfterMonths: parseInt(inactiveProjectsDeleteAfterMonths, 10), + inactiveProjectsMinSizeMb: parseInt(inactiveProjectsMinSizeMb, 10), + inactiveProjectsSendWarningEmailAfterMonths: parseInt( + inactiveProjectsSendWarningEmailAfterMonths, + 10, + ), + }, + }); + }, + }); +}; diff --git a/app/assets/javascripts/admin/users/components/user_actions.vue b/app/assets/javascripts/admin/users/components/user_actions.vue index 829174d7593..40e5f8d9d70 100644 --- a/app/assets/javascripts/admin/users/components/user_actions.vue +++ b/app/assets/javascripts/admin/users/components/user_actions.vue @@ -100,7 +100,7 @@ export default { <gl-button v-else v-gl-tooltip="$options.i18n.edit" - icon="pencil-square" + icon="pencil" v-bind="editButtonAttrs" :aria-label="$options.i18n.edit" /> diff --git a/app/assets/javascripts/admin/users/components/users_table.vue b/app/assets/javascripts/admin/users/components/users_table.vue index ede5c26e487..b4b84594276 100644 --- a/app/assets/javascripts/admin/users/components/users_table.vue +++ b/app/assets/javascripts/admin/users/components/users_table.vue @@ -2,7 +2,7 @@ import { GlSkeletonLoader, GlTable } from '@gitlab/ui'; import createFlash from '~/flash'; import { convertNodeIdsFromGraphQLIds } from '~/graphql_shared/utils'; -import { thWidthClass } from '~/lib/utils/table_utility'; +import { thWidthPercent } from '~/lib/utils/table_utility'; import { s__, __ } from '~/locale'; import UserDate from '~/vue_shared/components/user_date.vue'; import getUsersGroupCountsQuery from '../graphql/queries/get_users_group_counts.query.graphql'; @@ -70,32 +70,32 @@ export default { { key: 'name', label: __('Name'), - thClass: thWidthClass(40), + thClass: thWidthPercent(40), }, { key: 'projectsCount', label: __('Projects'), - thClass: thWidthClass(10), + thClass: thWidthPercent(10), }, { key: 'groupCount', label: __('Groups'), - thClass: thWidthClass(10), + thClass: thWidthPercent(10), }, { key: 'createdAt', label: __('Created on'), - thClass: thWidthClass(15), + thClass: thWidthPercent(15), }, { key: 'lastActivityOn', label: __('Last activity'), - thClass: thWidthClass(15), + thClass: thWidthPercent(15), }, { key: 'settings', label: '', - thClass: thWidthClass(10), + thClass: thWidthPercent(10), }, ], }; diff --git a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue index f4cc0678c38..3860831169e 100644 --- a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue +++ b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue @@ -42,6 +42,20 @@ const bodyTrClass = export default { i18n, typeSet, + modal: { + actionPrimary: { + text: i18n.deleteIntegration, + attributes: { + variant: 'danger', + }, + }, + actionSecondary: { + text: __('Cancel'), + attributes: { + variant: 'default', + }, + }, + }, components: { GlButtonGroup, GlButton, @@ -204,8 +218,8 @@ export default { <gl-modal modal-id="deleteIntegration" :title="$options.i18n.deleteIntegration" - :ok-title="$options.i18n.deleteIntegration" - ok-variant="danger" + :action-primary="$options.modal.actionPrimary" + :action-secondary="$options.modal.actionSecondary" @ok="deleteIntegration" > <gl-sprintf diff --git a/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue b/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue index 6ac1bce4032..567e534d9cf 100644 --- a/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue +++ b/app/assets/javascripts/analytics/shared/components/value_stream_metrics.vue @@ -1,5 +1,5 @@ <script> -import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; +import { GlSkeletonLoader } from '@gitlab/ui'; import { flatten, isEqual, keyBy } from 'lodash'; import createFlash from '~/flash'; import { sprintf, s__ } from '~/locale'; @@ -48,7 +48,7 @@ const groupRawMetrics = (groups = [], rawData = []) => { export default { name: 'ValueStreamMetrics', components: { - GlSkeletonLoading, + GlSkeletonLoader, MetricTile, }, props: { @@ -119,8 +119,8 @@ export default { }; </script> <template> - <div class="gl-display-flex gl-mt-6" data-testid="vsa-metrics"> - <gl-skeleton-loading v-if="isLoading" class="gl-h-auto gl-py-3 gl-pr-9 gl-my-6" /> + <div class="gl-display-flex" data-testid="vsa-metrics" :class="isLoading ? 'gl-my-6' : 'gl-mt-6'"> + <gl-skeleton-loader v-if="isLoading" /> <template v-else> <div v-if="hasGroupedMetrics" class="gl-flex-direction-column"> <div diff --git a/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue b/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue index 63ec40d4ec6..457a52d3807 100644 --- a/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue +++ b/app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue @@ -1,5 +1,5 @@ <script> -import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; +import { GlSkeletonLoader } from '@gitlab/ui'; import { GlSingleStat } from '@gitlab/ui/dist/charts'; import createFlash from '~/flash'; import { number } from '~/lib/utils/unit_format'; @@ -11,7 +11,7 @@ const defaultPrecision = 0; export default { name: 'UsageCounts', components: { - GlSkeletonLoading, + GlSkeletonLoader, GlSingleStat, }, data() { @@ -65,7 +65,7 @@ export default { <div class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-my-6 gl-align-items-flex-start" > - <gl-skeleton-loading v-if="$apollo.queries.counts.loading" /> + <gl-skeleton-loader v-if="$apollo.queries.counts.loading" /> <template v-else> <gl-single-stat v-for="count in counts" diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js index 8d46ea76be1..0c870a89760 100644 --- a/app/assets/javascripts/api.js +++ b/app/assets/javascripts/api.js @@ -1,4 +1,4 @@ -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { __ } from '~/locale'; import axios from './lib/utils/axios_utils'; import { joinPaths } from './lib/utils/url_utility'; @@ -444,7 +444,7 @@ const Api = { }, // Return group projects list. Filtered by query - groupProjects(groupId, query, options, callback = () => {}, useCustomErrorHandler = false) { + groupProjects(groupId, query, options, callback = () => {}) { const url = Api.buildUrl(Api.groupProjectsPath).replace(':id', groupId); const defaults = { search: query, @@ -456,19 +456,7 @@ const Api = { }) .then(({ data, headers }) => { callback(data); - return { data, headers }; - }) - .catch((error) => { - if (useCustomErrorHandler) { - throw error; - } - - createFlash({ - message: __('Something went wrong while fetching projects'), - }); - - callback(); }); }, @@ -654,7 +642,7 @@ const Api = { }) .then(({ data }) => callback(data)) .catch(() => - createFlash({ + createAlert({ message: __('Something went wrong while fetching projects'), }), ); diff --git a/app/assets/javascripts/api/projects_api.js b/app/assets/javascripts/api/projects_api.js index 7666f558eb5..667aa878261 100644 --- a/app/assets/javascripts/api/projects_api.js +++ b/app/assets/javascripts/api/projects_api.js @@ -2,10 +2,9 @@ import { DEFAULT_PER_PAGE } from '~/api'; import axios from '../lib/utils/axios_utils'; import { buildApiUrl } from './api_utils'; -export * from './alert_management_alerts_api'; - const PROJECTS_PATH = '/api/:version/projects.json'; const PROJECT_IMPORT_MEMBERS_PATH = '/api/:version/projects/:id/import_project_members/:project_id'; +const PROJECT_REPOSITORY_SIZE_PATH = '/api/:version/projects/:id/repository_size'; export function getProjects(query, options, callback = () => {}) { const url = buildApiUrl(PROJECTS_PATH); @@ -35,3 +34,11 @@ export function importProjectMembers(sourceId, targetId) { .replace(':project_id', targetId); return axios.post(url); } + +export function updateRepositorySize(projectPath) { + const url = buildApiUrl(PROJECT_REPOSITORY_SIZE_PATH).replace( + ':id', + encodeURIComponent(projectPath), + ); + return axios.post(url); +} diff --git a/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue b/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue index fe801cd460f..9cf41750efe 100644 --- a/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue +++ b/app/assets/javascripts/authentication/two_factor_auth/components/recovery_codes.vue @@ -101,9 +101,9 @@ export default { <template> <div> - <h3 class="page-title"> + <h1 class="page-title gl-font-size-h-display"> {{ $options.i18n.pageTitle }} - </h3> + </h1> <hr /> <gl-alert variant="info" :dismissible="false"> {{ $options.i18n.alertTitle }} diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js index aa735df7da5..a030797c698 100644 --- a/app/assets/javascripts/awards_handler.js +++ b/app/assets/javascripts/awards_handler.js @@ -3,9 +3,9 @@ import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import $ from 'jquery'; import { uniq } from 'lodash'; +import { getEmojiScoreWithIntent } from '~/emoji/utils'; import { getCookie, setCookie, scrollToElement } from '~/lib/utils/common_utils'; import * as Emoji from '~/emoji'; - import { dispose, fixTitle } from '~/tooltips'; import createFlash from './flash'; import axios from './lib/utils/axios_utils'; @@ -559,13 +559,45 @@ export class AwardsHandler { } } + getEmojiScore(emojis, value) { + const elem = $(value).find('[data-name]').get(0); + const emoji = emojis.filter((x) => x.emoji.name === elem.dataset.name)[0]; + elem.dataset.score = emoji.score; + + return emoji.score; + } + + sortEmojiElements(emojis, $elements) { + const scores = new WeakMap(); + + return $elements.sort((a, b) => { + let aScore = scores.get(a); + let bScore = scores.get(b); + + if (!aScore) { + aScore = this.getEmojiScore(emojis, a); + scores.set(a, aScore); + } + + if (!bScore) { + bScore = this.getEmojiScore(emojis, b); + scores.set(b, bScore); + } + + return aScore - bScore; + }); + } + findMatchingEmojiElements(query) { - const emojiMatches = this.emoji.searchEmoji(query).map((x) => x.emoji.name); + const matchingEmoji = this.emoji + .searchEmoji(query) + .map((x) => ({ ...x, score: getEmojiScoreWithIntent(x.emoji.name, x.score) })); + const matchingEmojiNames = matchingEmoji.map((x) => x.emoji.name); const $emojiElements = $('.emoji-menu-list:not(.frequent-emojis) [data-name]'); const $matchingElements = $emojiElements.filter( - (i, elm) => emojiMatches.indexOf(elm.dataset.name) >= 0, + (i, elm) => matchingEmojiNames.indexOf(elm.dataset.name) >= 0, ); - return $matchingElements.closest('li').clone(); + return this.sortEmojiElements(matchingEmoji, $matchingElements.closest('li').clone()); } /* showMenuElement and hideMenuElement are performance optimizations. We use diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue index c8130c47f5b..2b1ab911fbe 100644 --- a/app/assets/javascripts/batch_comments/components/draft_note.vue +++ b/app/assets/javascripts/batch_comments/components/draft_note.vue @@ -113,7 +113,7 @@ export default { class="referenced-commands draft-note-commands" ></div> - <p class="draft-note-actions d-flex"> + <p class="draft-note-actions d-flex" data-qa-selector="draft_note_content"> <publish-button :show-count="true" :should-publish="false" diff --git a/app/assets/javascripts/batch_comments/components/drafts_count.vue b/app/assets/javascripts/batch_comments/components/drafts_count.vue index 61718b766d8..0cd093823bc 100644 --- a/app/assets/javascripts/batch_comments/components/drafts_count.vue +++ b/app/assets/javascripts/batch_comments/components/drafts_count.vue @@ -6,13 +6,20 @@ export default { components: { GlBadge, }, + props: { + variant: { + type: String, + required: false, + default: 'info', + }, + }, computed: { ...mapGetters('batchComments', ['draftsCount']), }, }; </script> <template> - <gl-badge size="sm" variant="info" class="gl-ml-2"> + <gl-badge size="sm" :variant="variant" class="gl-ml-2"> {{ draftsCount }} <span class="sr-only"> {{ n__('draft', 'drafts', draftsCount) }} </span> </gl-badge> diff --git a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue index e90c29e939f..f839056daf8 100644 --- a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue +++ b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue @@ -1,7 +1,9 @@ <script> import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui'; import { mapActions, mapGetters, mapState } from 'vuex'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import PreviewItem from './preview_item.vue'; +import DraftsCount from './drafts_count.vue'; export default { components: { @@ -9,7 +11,9 @@ export default { GlDropdownItem, GlIcon, PreviewItem, + DraftsCount, }, + mixins: [glFeatureFlagMixin()], computed: { ...mapState('diffs', ['viewDiffsFileByFile']), ...mapGetters('batchComments', ['draftsCount', 'sortedDrafts']), @@ -39,6 +43,7 @@ export default { > <template #button-content> {{ __('Pending comments') }} + <drafts-count v-if="glFeatures.mrReviewSubmitComment" variant="neutral" /> <gl-icon class="dropdown-chevron" name="chevron-up" /> </template> <gl-dropdown-item diff --git a/app/assets/javascripts/batch_comments/components/review_bar.vue b/app/assets/javascripts/batch_comments/components/review_bar.vue index bce13751448..3cd1a2525e9 100644 --- a/app/assets/javascripts/batch_comments/components/review_bar.vue +++ b/app/assets/javascripts/batch_comments/components/review_bar.vue @@ -1,14 +1,18 @@ <script> import { mapActions, mapGetters } from 'vuex'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { REVIEW_BAR_VISIBLE_CLASS_NAME } from '../constants'; import PreviewDropdown from './preview_dropdown.vue'; import PublishButton from './publish_button.vue'; +import SubmitDropdown from './submit_dropdown.vue'; export default { components: { PreviewDropdown, PublishButton, + SubmitDropdown, }, + mixins: [glFeatureFlagMixin()], computed: { ...mapGetters(['isNotesFetched']), }, @@ -38,7 +42,8 @@ export default { data-qa-selector="review_bar_content" > <preview-dropdown /> - <publish-button class="gl-ml-3" show-count /> + <publish-button v-if="!glFeatures.mrReviewSubmitComment" class="gl-ml-3" show-count /> + <submit-dropdown v-else /> </div> </nav> </div> diff --git a/app/assets/javascripts/batch_comments/components/submit_dropdown.vue b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue new file mode 100644 index 00000000000..5f4a1e44ea3 --- /dev/null +++ b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue @@ -0,0 +1,115 @@ +<script> +import { GlDropdown, GlButton, GlIcon, GlForm, GlFormGroup } from '@gitlab/ui'; +import { mapGetters, mapActions } from 'vuex'; +import MarkdownField from '~/vue_shared/components/markdown/field.vue'; +import { scrollToElement } from '~/lib/utils/common_utils'; + +export default { + components: { + GlDropdown, + GlButton, + GlIcon, + GlForm, + GlFormGroup, + MarkdownField, + }, + data() { + return { + isSubmitting: false, + note: '', + }; + }, + computed: { + ...mapGetters(['getNotesData', 'getNoteableData', 'noteableType', 'getCurrentUserLastNote']), + }, + methods: { + ...mapActions('batchComments', ['publishReview']), + async submitReview() { + const noteData = { + noteable_type: this.noteableType, + noteable_id: this.getNoteableData.id, + note: this.note, + }; + + this.isSubmitting = true; + + await this.publishReview(noteData); + + if (window.mrTabs && this.note) { + window.location.hash = `note_${this.getCurrentUserLastNote.id}`; + window.mrTabs.tabShown('show'); + + setTimeout(() => + scrollToElement(document.getElementById(`note_${this.getCurrentUserLastNote.id}`)), + ); + } + + this.isSubmitting = false; + }, + }, + restrictedToolbarItems: ['full-screen'], +}; +</script> + +<template> + <gl-dropdown right class="submit-review-dropdown" variant="info" category="secondary"> + <template #button-content> + {{ __('Finish review') }} + <gl-icon class="dropdown-chevron" name="chevron-up" /> + </template> + <gl-form data-testid="submit-gl-form" @submit.prevent="submitReview"> + <gl-form-group + :label="__('Summary comment (optional)')" + label-for="review-note-body" + label-class="gl-mb-2" + > + <div class="common-note-form gfm-form"> + <div + class="comment-warning-wrapper gl-border-solid gl-border-1 gl-rounded-base gl-border-gray-100" + > + <markdown-field + :is-submitting="isSubmitting" + :add-spacing-classes="false" + :textarea-value="note" + :markdown-preview-path="getNoteableData.preview_note_path" + :markdown-docs-path="getNotesData.markdownDocsPath" + :quick-actions-docs-path="getNotesData.quickActionsDocsPath" + :restricted-tool-bar-items="$options.restrictedToolbarItems" + :force-autosize="false" + class="js-no-autosize" + > + <template #textarea> + <textarea + id="review-note-body" + ref="textarea" + v-model="note" + dir="auto" + :disabled="isSubmitting" + name="review[note]" + class="note-textarea js-gfm-input markdown-area" + data-supports-quick-actions="true" + data-testid="comment-textarea" + :aria-label="__('Comment')" + :placeholder="__('Write a comment or drag your files here…')" + @keydown.meta.enter="submitReview" + @keydown.ctrl.enter="submitReview" + ></textarea> + </template> + </markdown-field> + </div> + </div> + </gl-form-group> + <div class="gl-display-flex gl-justify-content-end gl-mt-5"> + <gl-button + :loading="isSubmitting" + variant="confirm" + type="submit" + class="js-no-auto-disable" + data-testid="submit-review-button" + > + {{ __('Submit review') }} + </gl-button> + </div> + </gl-form> + </gl-dropdown> +</template> diff --git a/app/assets/javascripts/batch_comments/services/drafts_service.js b/app/assets/javascripts/batch_comments/services/drafts_service.js index 36d2f8df612..b52e573d55d 100644 --- a/app/assets/javascripts/batch_comments/services/drafts_service.js +++ b/app/assets/javascripts/batch_comments/services/drafts_service.js @@ -19,8 +19,8 @@ export default { fetchDrafts(endpoint) { return axios.get(endpoint); }, - publish(endpoint) { - return axios.post(endpoint); + publish(endpoint, noteData) { + return axios.post(endpoint, noteData); }, discard(endpoint) { return axios.delete(endpoint); diff --git a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js index 4ee22918463..908cbfd6dc8 100644 --- a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js +++ b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js @@ -77,28 +77,22 @@ export const publishSingleDraft = ({ commit, dispatch, getters }, draftId) => { .catch(() => commit(types.RECEIVE_PUBLISH_DRAFT_ERROR, draftId)); }; -export const publishReview = ({ commit, dispatch, getters }) => { +export const publishReview = ({ commit, dispatch, getters }, noteData = {}) => { commit(types.REQUEST_PUBLISH_REVIEW); return service - .publish(getters.getNotesData.draftsPublishPath) + .publish(getters.getNotesData.draftsPublishPath, noteData) .then(() => dispatch('updateDiscussionsAfterPublish')) .then(() => commit(types.RECEIVE_PUBLISH_REVIEW_SUCCESS)) .catch(() => commit(types.RECEIVE_PUBLISH_REVIEW_ERROR)); }; export const updateDiscussionsAfterPublish = async ({ dispatch, getters, rootGetters }) => { - if (window.gon?.features?.paginatedNotes) { - await dispatch('stopPolling', null, { root: true }); - await dispatch('fetchData', null, { root: true }); - await dispatch('restartPolling', null, { root: true }); - } else { - await dispatch( - 'fetchDiscussions', - { path: getters.getNotesData.discussionsPath }, - { root: true }, - ); - } + await dispatch( + 'fetchDiscussions', + { path: getters.getNotesData.discussionsPath }, + { root: true }, + ); dispatch('diffs/assignDiscussionsToDiff', rootGetters.discussionsStructuredByLineCode, { root: true, diff --git a/app/assets/javascripts/behaviors/components/sandboxed_mermaid.vue b/app/assets/javascripts/behaviors/components/sandboxed_mermaid.vue new file mode 100644 index 00000000000..6b4110cff02 --- /dev/null +++ b/app/assets/javascripts/behaviors/components/sandboxed_mermaid.vue @@ -0,0 +1,77 @@ +<script> +import { + getSandboxFrameSrc, + BUFFER_IFRAME_HEIGHT, + SANDBOX_ATTRIBUTES, +} from '../markdown/render_sandboxed_mermaid'; + +export default { + name: 'SandboxedMermaid', + + props: { + source: { + type: String, + required: true, + }, + }, + + data() { + return { + iframeHeight: BUFFER_IFRAME_HEIGHT, + sandboxFrameSrc: getSandboxFrameSrc(), + }; + }, + + watch: { + source() { + this.updateDiagram(); + }, + }, + + mounted() { + window.addEventListener('message', this.onPostMessage, false); + }, + + destroyed() { + window.removeEventListener('message', this.onPostMessage); + }, + + methods: { + getSandboxFrameSrc, + + onPostMessage(event) { + const container = this.$refs.diagramContainer; + + if (event.source === container?.contentWindow) { + this.iframeHeight = Number(event.data.h) + BUFFER_IFRAME_HEIGHT; + } + }, + + updateDiagram() { + const container = this.$refs.diagramContainer; + + // Potential risk associated with '*' discussed in below thread + // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/74414#note_735183398 + container.contentWindow?.postMessage(this.source, '*'); + container.addEventListener('load', () => { + container.contentWindow?.postMessage(this.source, '*'); + }); + }, + }, + + sandboxFrameSrc: getSandboxFrameSrc(), + sandboxAttributes: SANDBOX_ATTRIBUTES, +}; +</script> +<template> + <iframe + ref="diagramContainer" + :src="$options.sandboxFrameSrc" + :sandbox="$options.sandboxAttributes" + frameborder="0" + scrolling="no" + width="100%" + :height="iframeHeight" + > + </iframe> +</template> diff --git a/app/assets/javascripts/behaviors/markdown/render_gfm.js b/app/assets/javascripts/behaviors/markdown/render_gfm.js index 063393c9cd1..c9ae3706383 100644 --- a/app/assets/javascripts/behaviors/markdown/render_gfm.js +++ b/app/assets/javascripts/behaviors/markdown/render_gfm.js @@ -1,10 +1,8 @@ import $ from 'jquery'; import syntaxHighlight from '~/syntax_highlight'; -import initUserPopovers from '../../user_popovers'; import highlightCurrentUser from './highlight_current_user'; import { renderKroki } from './render_kroki'; import renderMath from './render_math'; -import renderMermaid from './render_mermaid'; import renderSandboxedMermaid from './render_sandboxed_mermaid'; import renderMetrics from './render_metrics'; @@ -16,19 +14,15 @@ $.fn.renderGFM = function renderGFM() { syntaxHighlight(this.find('.js-syntax-highlight').get()); renderKroki(this.find('.js-render-kroki[hidden]').get()); renderMath(this.find('.js-render-math')); - if (gon.features?.sandboxedMermaid) { - renderSandboxedMermaid(this.find('.js-render-mermaid')); - } else { - renderMermaid(this.find('.js-render-mermaid')); - } + renderSandboxedMermaid(this.find('.js-render-mermaid')); + highlightCurrentUser(this.find('.gfm-project_member').get()); - initUserPopovers(this.find('.js-user-link').get()); - const mrPopoverElements = this.find('.gfm-merge_request').get(); - if (mrPopoverElements.length) { - import(/* webpackChunkName: 'MrPopoverBundle' */ '~/mr_popover') - .then(({ default: initMRPopovers }) => { - initMRPopovers(mrPopoverElements); + const issuablePopoverElements = this.find('.gfm-issue, .gfm-merge_request').get(); + if (issuablePopoverElements.length) { + import(/* webpackChunkName: 'IssuablePopoverBundle' */ '~/issuable/popover') + .then(({ default: initIssuablePopovers }) => { + initIssuablePopovers(issuablePopoverElements); }) .catch(() => {}); } diff --git a/app/assets/javascripts/behaviors/markdown/render_kroki.js b/app/assets/javascripts/behaviors/markdown/render_kroki.js index abe71694d73..5fd910dd6cc 100644 --- a/app/assets/javascripts/behaviors/markdown/render_kroki.js +++ b/app/assets/javascripts/behaviors/markdown/render_kroki.js @@ -55,8 +55,8 @@ export function renderKroki(krokiImages) { // A single Kroki image is processed multiple times for some reason, // so this condition ensures we only create one alert per Kroki image - if (!parent.hasAttribute('data-kroki-processed')) { - parent.setAttribute('data-kroki-processed', 'true'); + if (!Object.prototype.hasOwnProperty.call(parent.dataset, 'krokiProcessed')) { + parent.dataset.krokiProcessed = 'true'; parent.after(createAlert(krokiImage)); } }); diff --git a/app/assets/javascripts/behaviors/markdown/render_math.js b/app/assets/javascripts/behaviors/markdown/render_math.js index 12f47255bdf..af7aac4cf36 100644 --- a/app/assets/javascripts/behaviors/markdown/render_math.js +++ b/app/assets/javascripts/behaviors/markdown/render_math.js @@ -1,6 +1,7 @@ import { spriteIcon } from '~/lib/utils/common_utils'; import { differenceInMilliseconds } from '~/lib/utils/datetime_utility'; import { s__ } from '~/locale'; +import { unrestrictedPages } from './constants'; // Renders math using KaTeX in any element with the // `js-render-math` class @@ -48,6 +49,7 @@ class SafeMathRenderer { this.renderElement = this.renderElement.bind(this); this.render = this.render.bind(this); this.attachEvents = this.attachEvents.bind(this); + this.pageName = document.querySelector('body').dataset.page; } renderElement(chosenEl) { @@ -56,7 +58,7 @@ class SafeMathRenderer { } const el = chosenEl || this.queue.shift(); - const forceRender = Boolean(chosenEl); + const forceRender = Boolean(chosenEl) || unrestrictedPages.includes(this.pageName); const text = el.textContent; el.removeAttribute('style'); @@ -79,7 +81,7 @@ class SafeMathRenderer { 'math|Displaying this math block may cause performance issues on this page', )}</div> <div class="gl-alert-actions"> - <button class="js-lazy-render-math btn gl-alert-action btn-primary btn-md gl-button">Display anyway</button> + <button class="js-lazy-render-math btn gl-alert-action btn-confirm btn-md gl-button">Display anyway</button> </div> </div> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> @@ -110,7 +112,7 @@ class SafeMathRenderer { try { displayContainer.innerHTML = this.katex.renderToString(text, { - displayMode: el.getAttribute('data-math-style') === 'display', + displayMode: el.dataset.mathStyle === 'display', throwOnError: true, maxSize: 20, maxExpand: 20, @@ -143,7 +145,7 @@ class SafeMathRenderer { this.elements.forEach((el) => { const placeholder = document.createElement('span'); placeholder.style.display = 'none'; - placeholder.setAttribute('data-math-style', el.getAttribute('data-math-style')); + placeholder.dataset.mathStyle = el.dataset.mathStyle; placeholder.textContent = el.textContent; el.parentNode.replaceChild(placeholder, el); this.queue.push(placeholder); diff --git a/app/assets/javascripts/behaviors/markdown/render_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_mermaid.js index f9cf3af98bb..2df0f7387fb 100644 --- a/app/assets/javascripts/behaviors/markdown/render_mermaid.js +++ b/app/assets/javascripts/behaviors/markdown/render_mermaid.js @@ -160,7 +160,7 @@ function renderMermaids($els) { 'Warning: Displaying this diagram might cause performance issues on this page.', )}</div> <div class="gl-alert-actions"> - <button class="js-lazy-render-mermaid btn gl-alert-action btn-warning btn-md gl-button">Display</button> + <button class="js-lazy-render-mermaid btn gl-alert-action btn-confirm btn-md gl-button">Display</button> </div> </div> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> diff --git a/app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js index 3b9f6011c6d..077e96b2fee 100644 --- a/app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js +++ b/app/assets/javascripts/behaviors/markdown/render_sandboxed_mermaid.js @@ -32,7 +32,8 @@ const MAX_CHAR_LIMIT = 2000; const MAX_MERMAID_BLOCK_LIMIT = 50; // Max # of `&` allowed in Chaining of links syntax const MAX_CHAINING_OF_LINKS_LIMIT = 30; -const BUFFER_IFRAME_HEIGHT = 10; +export const BUFFER_IFRAME_HEIGHT = 10; +export const SANDBOX_ATTRIBUTES = 'allow-scripts allow-popups'; // Keep a map of mermaid blocks we've already rendered. const elsProcessingMap = new WeakMap(); let renderedMermaidBlocks = 0; @@ -56,7 +57,7 @@ function fixElementSource(el) { return { source }; } -function getSandboxFrameSrc() { +export function getSandboxFrameSrc() { const path = joinPaths(gon.relative_url_root || '', SANDBOX_FRAME_PATH); if (!darkModeEnabled()) { return path; @@ -69,7 +70,7 @@ function renderMermaidEl(el, source) { const iframeEl = document.createElement('iframe'); setAttributes(iframeEl, { src: getSandboxFrameSrc(), - sandbox: 'allow-scripts allow-popups', + sandbox: SANDBOX_ATTRIBUTES, frameBorder: 0, scrolling: 'no', width: '100%', @@ -138,7 +139,7 @@ function renderMermaids($els) { <div> <div class="js-warning-text"></div> <div class="gl-alert-actions"> - <button type="button" class="js-lazy-render-mermaid btn gl-alert-action btn-warning btn-md gl-button">Display</button> + <button type="button" class="js-lazy-render-mermaid btn gl-alert-action btn-confirm btn-md gl-button">Display</button> </div> </div> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> diff --git a/app/assets/javascripts/blob/blob_line_permalink_updater.js b/app/assets/javascripts/blob/blob_line_permalink_updater.js index a3dd241604d..0a5bcf326a1 100644 --- a/app/assets/javascripts/blob/blob_line_permalink_updater.js +++ b/app/assets/javascripts/blob/blob_line_permalink_updater.js @@ -9,10 +9,11 @@ const updateLineNumbersOnBlobPermalinks = (linksToUpdate) => { [].concat(Array.prototype.slice.call(linksToUpdate)).forEach((permalinkButton) => { const baseHref = - permalinkButton.getAttribute('data-original-href') || + permalinkButton.dataset.originalHref || (() => { const href = permalinkButton.getAttribute('href'); - permalinkButton.setAttribute('data-original-href', href); + // eslint-disable-next-line no-param-reassign + permalinkButton.dataset.originalHref = href; return href; })(); permalinkButton.setAttribute('href', `${baseHref}${hashUrlString}`); diff --git a/app/assets/javascripts/blob/components/blob_header.vue b/app/assets/javascripts/blob/components/blob_header.vue index f78d921fa90..716321430d2 100644 --- a/app/assets/javascripts/blob/components/blob_header.vue +++ b/app/assets/javascripts/blob/components/blob_header.vue @@ -47,6 +47,11 @@ export default { required: false, default: true, }, + overrideCopy: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -106,6 +111,7 @@ export default { :environment-name="blob.environmentFormattedExternalUrl" :environment-path="blob.environmentExternalUrlForRouteMap" :is-empty="isEmpty" + :override-copy="overrideCopy" @copy="proxyCopyRequest" /> </div> diff --git a/app/assets/javascripts/blob/components/blob_header_default_actions.vue b/app/assets/javascripts/blob/components/blob_header_default_actions.vue index 61baf4fa495..12a198f78ea 100644 --- a/app/assets/javascripts/blob/components/blob_header_default_actions.vue +++ b/app/assets/javascripts/blob/components/blob_header_default_actions.vue @@ -54,6 +54,11 @@ export default { required: false, default: false, }, + overrideCopy: { + type: Boolean, + required: false, + default: false, + }, }, computed: { downloadUrl() { @@ -63,6 +68,10 @@ export default { return this.activeViewer === RICH_BLOB_VIEWER; }, getBlobHashTarget() { + if (this.overrideCopy) { + return null; + } + return `[data-blob-hash="${this.blobHash}"]`; }, showCopyButton() { @@ -74,6 +83,13 @@ export default { }); }, }, + methods: { + onCopy() { + if (this.overrideCopy) { + this.$emit('copy'); + } + }, + }, BTN_COPY_CONTENTS_TITLE, BTN_DOWNLOAD_TITLE, BTN_RAW_TITLE, @@ -94,6 +110,7 @@ export default { category="primary" variant="default" class="js-copy-blob-source-btn" + @click="onCopy" /> <gl-button v-if="!isBinary" diff --git a/app/assets/javascripts/blob/components/blob_header_filepath.vue b/app/assets/javascripts/blob/components/blob_header_filepath.vue index 62355306655..fb99392ff48 100644 --- a/app/assets/javascripts/blob/components/blob_header_filepath.vue +++ b/app/assets/javascripts/blob/components/blob_header_filepath.vue @@ -46,7 +46,7 @@ export default { <slot name="filepath-prepend"></slot> <template v-if="fileName"> - <file-icon :file-name="fileName" :size="16" aria-hidden="true" css-classes="mr-2" /> + <file-icon :file-name="fileName" :size="16" aria-hidden="true" css-classes="gl-mr-3" /> <strong class="file-title-name mr-1 js-blob-header-filepath" data-qa-selector="file_title_content" @@ -62,7 +62,7 @@ export default { css-class="btn-clipboard btn-transparent lh-100 position-static" /> - <small class="mr-2">{{ blobSize }}</small> + <small class="gl-mr-3">{{ blobSize }}</small> <gl-badge v-if="showLfsBadge">{{ __('LFS') }}</gl-badge> </div> diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js index a6eed4ecae3..a0d4f7ef4f2 100644 --- a/app/assets/javascripts/blob/viewer/index.js +++ b/app/assets/javascripts/blob/viewer/index.js @@ -36,19 +36,19 @@ const loadRichBlobViewer = (type) => { const loadViewer = (viewerParam) => { const viewer = viewerParam; - const url = viewer.getAttribute('data-url'); + const { url } = viewer.dataset; - if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) { + if (!url || viewer.dataset.loaded || viewer.dataset.loading) { return Promise.resolve(viewer); } - viewer.setAttribute('data-loading', 'true'); + viewer.dataset.loading = 'true'; return axios.get(url).then(({ data }) => { viewer.innerHTML = data.html; window.requestIdleCallback(() => { - viewer.removeAttribute('data-loading'); + delete viewer.dataset.loading; }); return viewer; @@ -108,7 +108,7 @@ export class BlobViewer { switchToInitialViewer() { const initialViewer = this.$fileHolder[0].querySelector('.blob-viewer:not(.hidden)'); - let initialViewerName = initialViewer.getAttribute('data-type'); + let initialViewerName = initialViewer.dataset.type; if (this.switcher && window.location.hash.indexOf('#L') === 0) { initialViewerName = 'simple'; @@ -138,12 +138,12 @@ export class BlobViewer { e.preventDefault(); - this.switchToViewer(target.getAttribute('data-viewer')); + this.switchToViewer(target.dataset.viewer); } toggleCopyButtonState() { if (!this.copySourceBtn) return; - if (this.simpleViewer.getAttribute('data-loaded')) { + if (this.simpleViewer.dataset.loaded) { this.copySourceBtnTooltip.setAttribute('title', __('Copy file contents')); this.copySourceBtn.classList.remove('disabled'); } else if (this.activeViewer === this.simpleViewer) { @@ -199,7 +199,8 @@ export class BlobViewer { this.$fileHolder.trigger('highlight:line'); handleLocationHash(); - viewer.setAttribute('data-loaded', 'true'); + // eslint-disable-next-line no-param-reassign + viewer.dataset.loaded = 'true'; this.toggleCopyButtonState(); eventHub.$emit('showBlobInteractionZones', viewer.dataset.path); }); diff --git a/app/assets/javascripts/boards/components/board_app.vue b/app/assets/javascripts/boards/components/board_app.vue index 858aabb0f05..af753151be8 100644 --- a/app/assets/javascripts/boards/components/board_app.vue +++ b/app/assets/javascripts/boards/components/board_app.vue @@ -1,5 +1,6 @@ <script> -import { mapActions, mapGetters } from 'vuex'; +import { mapGetters } from 'vuex'; +import { refreshCurrentPage } from '~/lib/utils/url_utility'; import BoardContent from '~/boards/components/board_content.vue'; import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue'; import BoardTopBar from '~/boards/components/board_top_bar.vue'; @@ -14,11 +15,11 @@ export default { computed: { ...mapGetters(['isSidebarOpen']), }, - mounted() { - this.performSearch(); + created() { + window.addEventListener('popstate', refreshCurrentPage); }, - methods: { - ...mapActions(['performSearch']), + destroyed() { + window.removeEventListener('popstate', refreshCurrentPage); }, }; </script> diff --git a/app/assets/javascripts/boards/components/board_form.vue b/app/assets/javascripts/boards/components/board_form.vue index 9d972860d06..9f359a25234 100644 --- a/app/assets/javascripts/boards/components/board_form.vue +++ b/app/assets/javascripts/boards/components/board_form.vue @@ -1,7 +1,8 @@ <script> import { GlModal, GlAlert } from '@gitlab/ui'; import { mapGetters, mapActions, mapState } from 'vuex'; -import { getParameterByName, visitUrl } from '~/lib/utils/url_utility'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import { visitUrl, updateHistory, getParameterByName } from '~/lib/utils/url_utility'; import { __, s__ } from '~/locale'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { formType } from '../constants'; @@ -170,17 +171,7 @@ export default { } }, methods: { - ...mapActions(['setError', 'unsetError']), - boardCreateResponse(data) { - return data.createBoard.board.webPath; - }, - boardUpdateResponse(data) { - const path = data.updateBoard.board.webPath; - const param = getParameterByName('group_by') - ? `?group_by=${getParameterByName('group_by')}` - : ''; - return `${path}${param}`; - }, + ...mapActions(['setError', 'unsetError', 'setBoard']), cancel() { this.$emit('cancel'); }, @@ -191,10 +182,10 @@ export default { }); if (!this.board.id) { - return this.boardCreateResponse(response.data); + return response.data.createBoard.board; } - return this.boardUpdateResponse(response.data); + return response.data.updateBoard.board; }, async deleteBoard() { await this.$apollo.mutate({ @@ -218,8 +209,14 @@ export default { } } else { try { - const url = await this.createOrUpdateBoard(); - visitUrl(url); + const board = await this.createOrUpdateBoard(); + this.setBoard(board); + this.cancel(); + + const param = getParameterByName('group_by') + ? `?group_by=${getParameterByName('group_by')}` + : ''; + updateHistory({ url: `${this.boardBaseUrl}/${getIdFromGraphQLId(board.id)}${param}` }); } catch { this.setError({ message: this.$options.i18n.saveErrorMessage }); } finally { diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue index a4298eb2544..a65269de743 100644 --- a/app/assets/javascripts/boards/components/board_list_header.vue +++ b/app/assets/javascripts/boards/components/board_list_header.vue @@ -45,9 +45,6 @@ export default { }, mixins: [Tracking.mixin(), glFeatureFlagMixin()], inject: { - boardId: { - default: '', - }, weightFeatureAvailable: { default: false, }, @@ -78,7 +75,7 @@ export default { }, }, computed: { - ...mapState(['activeId', 'filterParams']), + ...mapState(['activeId', 'filterParams', 'boardId']), ...mapGetters(['isEpicBoard', 'isSwimlanesOn']), isLoggedIn() { return Boolean(this.currentUserId); @@ -155,6 +152,12 @@ export default { isLoading() { return this.$apollo.queries.boardList.loading; }, + totalWeight() { + return this.boardList?.totalWeight; + }, + canShowTotalWeight() { + return this.weightFeatureAvailable && !this.isLoading; + }, }, apollo: { boardList: { @@ -359,7 +362,7 @@ export default { <div v-if="weightFeatureAvailable && !isLoading"> • <gl-sprintf :message="__('%{totalWeight} total weight')"> - <template #totalWeight>{{ boardList.totalWeight }}</template> + <template #totalWeight>{{ totalWeight }}</template> </gl-sprintf> </div> </gl-tooltip> @@ -384,11 +387,11 @@ export default { /> </span> <!-- EE start --> - <template v-if="weightFeatureAvailable && !isEpicBoard && !isLoading"> + <template v-if="canShowTotalWeight"> <gl-tooltip :target="() => $refs.weightTooltip" :title="weightCountToolTip" /> - <span ref="weightTooltip" class="gl-display-inline-flex gl-ml-3"> + <span ref="weightTooltip" class="gl-display-inline-flex gl-ml-3" data-testid="weight"> <gl-icon class="gl-mr-2" name="weight" /> - {{ boardList.totalWeight }} + {{ totalWeight }} </span> </template> <!-- EE end --> diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue index 2951eda1112..eaf3facb450 100644 --- a/app/assets/javascripts/boards/components/boards_selector.vue +++ b/app/assets/javascripts/boards/components/boards_selector.vue @@ -14,15 +14,16 @@ import { mapActions, mapGetters, mapState } from 'vuex'; import BoardForm from 'ee_else_ce/boards/components/board_form.vue'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import { isMetaKey } from '~/lib/utils/common_utils'; +import { updateHistory } from '~/lib/utils/url_utility'; import { s__ } from '~/locale'; import eventHub from '../eventhub'; import groupBoardsQuery from '../graphql/group_boards.query.graphql'; import projectBoardsQuery from '../graphql/project_boards.query.graphql'; -import groupBoardQuery from '../graphql/group_board.query.graphql'; -import projectBoardQuery from '../graphql/project_board.query.graphql'; import groupRecentBoardsQuery from '../graphql/group_recent_boards.query.graphql'; import projectRecentBoardsQuery from '../graphql/project_recent_boards.query.graphql'; +import { fullBoardId } from '../boards_util'; const MIN_BOARDS_TO_VIEW_RECENT = 10; @@ -69,48 +70,15 @@ export default { maxPosition: 0, filterTerm: '', currentPage: '', - board: {}, }; }, - apollo: { - board: { - query() { - return this.currentBoardQuery; - }, - variables() { - return { - fullPath: this.fullPath, - boardId: this.fullBoardId, - }; - }, - update(data) { - const board = data.workspace?.board; - this.setBoardConfig(board); - return { - ...board, - labels: board?.labels?.nodes, - }; - }, - error() { - this.setError({ message: this.$options.i18n.errorFetchingBoard }); - }, - }, - }, + computed: { - ...mapState(['boardType', 'fullBoardId']), + ...mapState(['boardType', 'board', 'isBoardLoading']), ...mapGetters(['isGroupBoard', 'isProjectBoard']), parentType() { return this.boardType; }, - currentBoardQueryCE() { - return this.isGroupBoard ? groupBoardQuery : projectBoardQuery; - }, - currentBoardQuery() { - return this.currentBoardQueryCE; - }, - isBoardLoading() { - return this.$apollo.queries.board.loading; - }, loading() { return this.loadingRecentBoards || Boolean(this.loadingBoards); }, @@ -147,6 +115,9 @@ export default { this.scrollFadeInitialized = false; this.$nextTick(this.setScrollFade); }, + board(newBoard) { + document.title = newBoard.name; + }, }, created() { eventHub.$on('showBoardModal', this.showPage); @@ -155,7 +126,7 @@ export default { eventHub.$off('showBoardModal', this.showPage); }, methods: { - ...mapActions(['setError', 'setBoardConfig']), + ...mapActions(['setError', 'fetchBoard', 'unsetActiveId']), showPage(page) { this.currentPage = page; }, @@ -231,6 +202,22 @@ export default { this.hasScrollFade = this.isScrolledUp(); }, + fetchCurrentBoard(boardId) { + this.fetchBoard({ + fullPath: this.fullPath, + fullBoardId: fullBoardId(boardId), + boardType: this.boardType, + }); + }, + async switchBoard(boardId, e) { + if (isMetaKey(e)) { + window.open(`${this.boardBaseUrl}/${boardId}`, '_blank'); + } else { + this.unsetActiveId(); + this.fetchCurrentBoard(boardId); + updateHistory({ url: `${this.boardBaseUrl}/${boardId}` }); + } + }, }, i18n: { errorFetchingBoard: s__('Board|An error occurred while fetching the board, please try again.'), @@ -277,8 +264,8 @@ export default { <gl-dropdown-item v-for="recentBoard in recentBoards" :key="`recent-${recentBoard.id}`" - :href="`${boardBaseUrl}/${recentBoard.id}`" data-testid="dropdown-item" + @click.prevent="switchBoard(recentBoard.id, $event)" > {{ recentBoard.name }} </gl-dropdown-item> @@ -293,8 +280,8 @@ export default { <gl-dropdown-item v-for="otherBoard in filteredBoards" :key="otherBoard.id" - :href="`${boardBaseUrl}/${otherBoard.id}`" data-testid="dropdown-item" + @click.prevent="switchBoard(otherBoard.id, $event)" > {{ otherBoard.name }} </gl-dropdown-item> diff --git a/app/assets/javascripts/boards/graphql/board_create.mutation.graphql b/app/assets/javascripts/boards/graphql/board_create.mutation.graphql index b3ea79d6443..42e164f4f3c 100644 --- a/app/assets/javascripts/boards/graphql/board_create.mutation.graphql +++ b/app/assets/javascripts/boards/graphql/board_create.mutation.graphql @@ -1,8 +1,9 @@ +#import "ee_else_ce/boards/graphql/board_scope.fragment.graphql" + mutation createBoard($input: CreateBoardInput!) { createBoard(input: $input) { board { - id - webPath + ...BoardScopeFragment } errors } diff --git a/app/assets/javascripts/boards/graphql/board_update.mutation.graphql b/app/assets/javascripts/boards/graphql/board_update.mutation.graphql index 3abe09079c7..90de7713ff3 100644 --- a/app/assets/javascripts/boards/graphql/board_update.mutation.graphql +++ b/app/assets/javascripts/boards/graphql/board_update.mutation.graphql @@ -1,8 +1,9 @@ +#import "ee_else_ce/boards/graphql/board_scope.fragment.graphql" + mutation UpdateBoard($input: UpdateBoardInput!) { updateBoard(input: $input) { board { - id - webPath + ...BoardScopeFragment } errors } diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js index 8af7da1e0aa..854717ed4c4 100644 --- a/app/assets/javascripts/boards/index.js +++ b/app/assets/javascripts/boards/index.js @@ -54,7 +54,6 @@ function mountBoardApp(el) { apolloProvider, provide: { disabled: parseBoolean(el.dataset.disabled), - boardId, groupId: Number(groupId), rootPath, fullPath, diff --git a/app/assets/javascripts/boards/stores/actions.js b/app/assets/javascripts/boards/stores/actions.js index a84b678a5d9..791182af806 100644 --- a/app/assets/javascripts/boards/stores/actions.js +++ b/app/assets/javascripts/boards/stores/actions.js @@ -31,10 +31,12 @@ import { import createBoardListMutation from 'ee_else_ce/boards/graphql/board_list_create.mutation.graphql'; import issueMoveListMutation from 'ee_else_ce/boards/graphql/issue_move_list.mutation.graphql'; import totalCountAndWeightQuery from 'ee_else_ce/boards/graphql/board_lists_deferred.query.graphql'; +import { fetchPolicies } from '~/lib/graphql'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import { queryToObject } from '~/lib/utils/url_utility'; import { s__ } from '~/locale'; +import eventHub from '../eventhub'; import { gqlClient } from '../graphql'; import projectBoardQuery from '../graphql/project_board.query.graphql'; import groupBoardQuery from '../graphql/group_board.query.graphql'; @@ -49,6 +51,8 @@ import * as types from './mutation_types'; export default { fetchBoard: ({ commit, dispatch }, { fullPath, fullBoardId, boardType }) => { + commit(types.REQUEST_CURRENT_BOARD); + const variables = { fullPath, boardId: fullBoardId, @@ -60,9 +64,12 @@ export default { variables, }) .then(({ data }) => { - const board = data.workspace?.board; - commit(types.RECEIVE_BOARD_SUCCESS, board); - dispatch('setBoardConfig', board); + if (data.workspace?.errors) { + commit(types.RECEIVE_BOARD_FAILURE); + } else { + const board = data.workspace?.board; + dispatch('setBoard', board); + } }) .catch(() => commit(types.RECEIVE_BOARD_FAILURE)); }, @@ -87,6 +94,13 @@ export default { commit(types.SET_BOARD_CONFIG, config); }, + setBoard: async ({ commit, dispatch }, board) => { + commit(types.RECEIVE_BOARD_SUCCESS, board); + await dispatch('setBoardConfig', board); + dispatch('performSearch', { resetLists: true }); + eventHub.$emit('updateTokens'); + }, + setActiveId({ commit }, { id, sidebarType }) { commit(types.SET_ACTIVE_ID, { id, sidebarType }); }, @@ -107,16 +121,16 @@ export default { ); }, - performSearch({ dispatch }) { + performSearch({ dispatch }, { resetLists = false } = {}) { dispatch( 'setFilters', convertObjectPropsToCamelCase(queryToObject(window.location.search, { gatherArrays: true })), ); - dispatch('fetchLists'); + dispatch('fetchLists', { resetLists }); dispatch('resetIssues'); }, - fetchLists: ({ commit, state, dispatch }) => { + fetchLists: ({ commit, state, dispatch }, { resetLists = false } = {}) => { const { boardType, filterParams, fullPath, fullBoardId, issuableType } = state; const variables = { @@ -133,6 +147,7 @@ export default { .query({ query: listsQuery[issuableType].query, variables, + ...(resetLists ? { fetchPolicy: fetchPolicies.NO_CACHE } : {}), }) .then(({ data }) => { const { lists, hideBacklogList } = data[boardType].board; @@ -404,9 +419,6 @@ export default { fetchItemsForList: ({ state, commit }, { listId, fetchNext = false }) => { if (!listId) return null; - if (!fetchNext) { - commit(types.RESET_ITEMS_FOR_LIST, listId); - } commit(types.REQUEST_ITEMS_FOR_LIST, { listId, fetchNext }); const { fullPath, fullBoardId, boardType, filterParams } = state; @@ -428,6 +440,7 @@ export default { isSingleRequest: true, }, variables, + ...(!fetchNext ? { fetchPolicy: fetchPolicies.NO_CACHE } : {}), }) .then(({ data }) => { const { lists } = data[boardType].board; diff --git a/app/assets/javascripts/boards/stores/mutation_types.js b/app/assets/javascripts/boards/stores/mutation_types.js index 668a3b5e0f9..43268f21f96 100644 --- a/app/assets/javascripts/boards/stores/mutation_types.js +++ b/app/assets/javascripts/boards/stores/mutation_types.js @@ -1,3 +1,4 @@ +export const REQUEST_CURRENT_BOARD = 'REQUEST_CURRENT_BOARD'; export const RECEIVE_BOARD_SUCCESS = 'RECEIVE_BOARD_SUCCESS'; export const RECEIVE_BOARD_FAILURE = 'RECEIVE_BOARD_FAILURE'; export const SET_INITIAL_BOARD_DATA = 'SET_INITIAL_BOARD_DATA'; @@ -17,7 +18,6 @@ export const MOVE_LISTS = 'MOVE_LISTS'; export const TOGGLE_LIST_COLLAPSED = 'TOGGLE_LIST_COLLAPSED'; export const REMOVE_LIST = 'REMOVE_LIST'; export const REMOVE_LIST_FAILURE = 'REMOVE_LIST_FAILURE'; -export const RESET_ITEMS_FOR_LIST = 'RESET_ITEMS_FOR_LIST'; export const REQUEST_ITEMS_FOR_LIST = 'REQUEST_ITEMS_FOR_LIST'; export const RECEIVE_ITEMS_FOR_LIST_FAILURE = 'RECEIVE_ITEMS_FOR_LIST_FAILURE'; export const RECEIVE_ITEMS_FOR_LIST_SUCCESS = 'RECEIVE_ITEMS_FOR_LIST_SUCCESS'; diff --git a/app/assets/javascripts/boards/stores/mutations.js b/app/assets/javascripts/boards/stores/mutations.js index 9a50dcf05b8..04e7d3643e7 100644 --- a/app/assets/javascripts/boards/stores/mutations.js +++ b/app/assets/javascripts/boards/stores/mutations.js @@ -1,5 +1,6 @@ import { cloneDeep, pull, union } from 'lodash'; import Vue from 'vue'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { s__, __ } from '~/locale'; import { formatIssue } from '../boards_util'; import { issuableTypes } from '../constants'; @@ -33,15 +34,23 @@ export const addItemToList = ({ state, listId, itemId, moveBeforeId, moveAfterId }; export default { + [mutationTypes.REQUEST_CURRENT_BOARD]: (state) => { + state.isBoardLoading = true; + }, + [mutationTypes.RECEIVE_BOARD_SUCCESS]: (state, board) => { state.board = { ...board, labels: board?.labels?.nodes || [], }; + state.fullBoardId = board.id; + state.boardId = getIdFromGraphQLId(board.id); + state.isBoardLoading = false; }, [mutationTypes.RECEIVE_BOARD_FAILURE]: (state) => { state.error = s__('Boards|An error occurred while fetching the board. Please reload the page.'); + state.isBoardLoading = false; }, [mutationTypes.SET_INITIAL_BOARD_DATA](state, data) { @@ -136,11 +145,6 @@ export default { state.boardLists = listsBackup; }, - [mutationTypes.RESET_ITEMS_FOR_LIST]: (state, listId) => { - Vue.set(state, 'backupItemsList', state.boardItemsByListId[listId]); - Vue.set(state.boardItemsByListId, listId, []); - }, - [mutationTypes.REQUEST_ITEMS_FOR_LIST]: (state, { listId, fetchNext }) => { Vue.set(state.listsFlags, listId, { [fetchNext ? 'isLoadingMore' : 'isLoading']: true }); }, @@ -176,7 +180,6 @@ export default { 'Boards|An error occurred while fetching the board issues. Please reload the page.', ); Vue.set(state.listsFlags, listId, { isLoading: false, isLoadingMore: false }); - Vue.set(state.boardItemsByListId, listId, state.backupItemsList); }, [mutationTypes.RESET_ISSUES]: (state) => { diff --git a/app/assets/javascripts/boards/stores/state.js b/app/assets/javascripts/boards/stores/state.js index 7af4e5a8798..b62c032b921 100644 --- a/app/assets/javascripts/boards/stores/state.js +++ b/app/assets/javascripts/boards/stores/state.js @@ -2,6 +2,7 @@ import { inactiveId, ListType } from '~/boards/constants'; export default () => ({ board: {}, + isBoardLoading: false, boardType: null, issuableType: null, fullPath: null, @@ -12,7 +13,6 @@ export default () => ({ boardLists: {}, listsFlags: {}, boardItemsByListId: {}, - backupItemsList: [], isSettingAssignees: false, pageInfoByListId: {}, boardItems: {}, diff --git a/app/assets/javascripts/breadcrumb.js b/app/assets/javascripts/breadcrumb.js index b9d3742974c..113840dbc52 100644 --- a/app/assets/javascripts/breadcrumb.js +++ b/app/assets/javascripts/breadcrumb.js @@ -5,7 +5,7 @@ export const addTooltipToEl = (el) => { if (textEl && textEl.scrollWidth > textEl.offsetWidth) { el.setAttribute('title', el.textContent); - el.setAttribute('data-container', 'body'); + el.dataset.container = 'body'; el.classList.add('has-tooltip'); } }; diff --git a/app/assets/javascripts/ci_secure_files/components/secure_files_list.vue b/app/assets/javascripts/ci_secure_files/components/secure_files_list.vue index dbc4565b19d..ebcc4b85ac4 100644 --- a/app/assets/javascripts/ci_secure_files/components/secure_files_list.vue +++ b/app/assets/javascripts/ci_secure_files/components/secure_files_list.vue @@ -191,7 +191,7 @@ export default { <div class="col-md-12 col-lg-6"> <div class="gl-display-flex gl-flex-wrap gl-justify-content-end"> - <gl-button v-if="admin" class="gl-mt-3" variant="info" @click="loadFileSelctor"> + <gl-button v-if="admin" class="gl-mt-3" variant="confirm" @click="loadFileSelctor"> <span v-if="uploading"> <gl-loading-icon size="sm" class="gl-my-5" inline /> {{ $options.i18n.uploadingLabel }} diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue index 3af89dc4a2c..557a8d6b5ba 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue @@ -369,7 +369,7 @@ export default { :href="awsTipLearnLink" target="_blank" category="secondary" - variant="info" + variant="confirm" class="gl-overflow-wrap-break" >{{ __('Learn more about deploying to AWS') }}</gl-button > @@ -416,6 +416,7 @@ export default { :disabled="!canSubmit" variant="confirm" category="primary" + data-testid="ciUpdateOrAddVariableBtn" data-qa-selector="ci_variable_save_button" @click="updateOrAddVariable" >{{ modalActionText }} diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue index 12bc5ad3549..4cc00eb01d9 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_settings.vue @@ -1,32 +1,9 @@ <script> -import { mapState, mapActions } from 'vuex'; -import CiVariableModal from './ci_variable_modal.vue'; -import CiVariableTable from './ci_variable_table.vue'; - -export default { - components: { - CiVariableModal, - CiVariableTable, - }, - computed: { - ...mapState(['isGroup']), - }, - mounted() { - if (!this.isGroup) { - this.fetchEnvironments(); - } - }, - methods: { - ...mapActions(['fetchEnvironments']), - }, -}; +export default {}; </script> <template> <div class="row"> - <div class="col-lg-12"> - <ci-variable-table /> - <ci-variable-modal /> - </div> + <div class="col-lg-12"></div> </div> </template> diff --git a/app/assets/javascripts/ci_variable_list/components/legacy_ci_environments_dropdown.vue b/app/assets/javascripts/ci_variable_list/components/legacy_ci_environments_dropdown.vue new file mode 100644 index 00000000000..ecb39f214ec --- /dev/null +++ b/app/assets/javascripts/ci_variable_list/components/legacy_ci_environments_dropdown.vue @@ -0,0 +1,81 @@ +<script> +import { GlDropdown, GlDropdownItem, GlDropdownDivider, GlSearchBoxByType } from '@gitlab/ui'; +import { mapGetters } from 'vuex'; +import { __, sprintf } from '~/locale'; + +export default { + name: 'CiEnvironmentsDropdown', + components: { + GlDropdown, + GlDropdownItem, + GlDropdownDivider, + GlSearchBoxByType, + }, + props: { + value: { + type: String, + required: false, + default: '', + }, + }, + data() { + return { + searchTerm: '', + }; + }, + computed: { + ...mapGetters(['joinedEnvironments']), + composedCreateButtonLabel() { + return sprintf(__('Create wildcard: %{searchTerm}'), { searchTerm: this.searchTerm }); + }, + shouldRenderCreateButton() { + return this.searchTerm && !this.joinedEnvironments.includes(this.searchTerm); + }, + filteredResults() { + const lowerCasedSearchTerm = this.searchTerm.toLowerCase(); + return this.joinedEnvironments.filter((resultString) => + resultString.toLowerCase().includes(lowerCasedSearchTerm), + ); + }, + }, + methods: { + selectEnvironment(selected) { + this.$emit('selectEnvironment', selected); + this.searchTerm = ''; + }, + createClicked() { + this.$emit('createClicked', this.searchTerm); + this.searchTerm = ''; + }, + isSelected(env) { + return this.value === env; + }, + clearSearch() { + this.searchTerm = ''; + }, + }, +}; +</script> +<template> + <gl-dropdown :text="value" @show="clearSearch"> + <gl-search-box-by-type v-model.trim="searchTerm" data-testid="ci-environment-search" /> + <gl-dropdown-item + v-for="environment in filteredResults" + :key="environment" + :is-checked="isSelected(environment)" + is-check-item + @click="selectEnvironment(environment)" + > + {{ environment }} + </gl-dropdown-item> + <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{ + __('No matching results') + }}</gl-dropdown-item> + <template v-if="shouldRenderCreateButton"> + <gl-dropdown-divider /> + <gl-dropdown-item data-testid="create-wildcard-button" @click="createClicked"> + {{ composedCreateButtonLabel }} + </gl-dropdown-item> + </template> + </gl-dropdown> +</template> diff --git a/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue new file mode 100644 index 00000000000..7dcc5ce42d7 --- /dev/null +++ b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue @@ -0,0 +1,426 @@ +<script> +import { + GlAlert, + GlButton, + GlCollapse, + GlFormCheckbox, + GlFormCombobox, + GlFormGroup, + GlFormSelect, + GlFormInput, + GlFormTextarea, + GlIcon, + GlLink, + GlModal, + GlSprintf, +} from '@gitlab/ui'; +import { mapActions, mapState } from 'vuex'; +import { getCookie, setCookie } from '~/lib/utils/common_utils'; +import { __ } from '~/locale'; +import Tracking from '~/tracking'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { mapComputed } from '~/vuex_shared/bindings'; +import { + AWS_TOKEN_CONSTANTS, + ADD_CI_VARIABLE_MODAL_ID, + AWS_TIP_DISMISSED_COOKIE_NAME, + AWS_TIP_MESSAGE, + CONTAINS_VARIABLE_REFERENCE_MESSAGE, + ENVIRONMENT_SCOPE_LINK_TITLE, + EVENT_LABEL, + EVENT_ACTION, +} from '../constants'; +import CiEnvironmentsDropdown from './ci_environments_dropdown.vue'; +import { awsTokens, awsTokenList } from './ci_variable_autocomplete_tokens'; + +const trackingMixin = Tracking.mixin({ label: EVENT_LABEL }); + +export default { + modalId: ADD_CI_VARIABLE_MODAL_ID, + tokens: awsTokens, + tokenList: awsTokenList, + awsTipMessage: AWS_TIP_MESSAGE, + containsVariableReferenceMessage: CONTAINS_VARIABLE_REFERENCE_MESSAGE, + environmentScopeLinkTitle: ENVIRONMENT_SCOPE_LINK_TITLE, + components: { + CiEnvironmentsDropdown, + GlAlert, + GlButton, + GlCollapse, + GlFormCheckbox, + GlFormCombobox, + GlFormGroup, + GlFormSelect, + GlFormInput, + GlFormTextarea, + GlIcon, + GlLink, + GlModal, + GlSprintf, + }, + mixins: [glFeatureFlagsMixin(), trackingMixin], + data() { + return { + isTipDismissed: getCookie(AWS_TIP_DISMISSED_COOKIE_NAME) === 'true', + validationErrorEventProperty: '', + }; + }, + computed: { + ...mapState([ + 'projectId', + 'environments', + 'typeOptions', + 'variable', + 'variableBeingEdited', + 'isGroup', + 'maskableRegex', + 'selectedEnvironment', + 'isProtectedByDefault', + 'awsLogoSvgPath', + 'awsTipDeployLink', + 'awsTipCommandsLink', + 'awsTipLearnLink', + 'containsVariableReferenceLink', + 'protectedEnvironmentVariablesLink', + 'maskedEnvironmentVariablesLink', + 'environmentScopeLink', + ]), + ...mapComputed( + [ + { key: 'key', updateFn: 'updateVariableKey' }, + { key: 'secret_value', updateFn: 'updateVariableValue' }, + { key: 'variable_type', updateFn: 'updateVariableType' }, + { key: 'environment_scope', updateFn: 'setEnvironmentScope' }, + { key: 'protected_variable', updateFn: 'updateVariableProtected' }, + { key: 'masked', updateFn: 'updateVariableMasked' }, + ], + false, + 'variable', + ), + isTipVisible() { + return !this.isTipDismissed && AWS_TOKEN_CONSTANTS.includes(this.variable.key); + }, + canSubmit() { + return ( + this.variableValidationState && + this.variable.key !== '' && + this.variable.secret_value !== '' + ); + }, + canMask() { + const regex = RegExp(this.maskableRegex); + return regex.test(this.variable.secret_value); + }, + containsVariableReference() { + const regex = /\$/; + return regex.test(this.variable.secret_value); + }, + displayMaskedError() { + return !this.canMask && this.variable.masked; + }, + maskedState() { + if (this.displayMaskedError) { + return false; + } + return true; + }, + modalActionText() { + return this.variableBeingEdited ? __('Update variable') : __('Add variable'); + }, + maskedFeedback() { + return this.displayMaskedError ? __('This variable can not be masked.') : ''; + }, + tokenValidationFeedback() { + const tokenSpecificFeedback = this.$options.tokens?.[this.variable.key]?.invalidMessage; + if (!this.tokenValidationState && tokenSpecificFeedback) { + return tokenSpecificFeedback; + } + return ''; + }, + tokenValidationState() { + const validator = this.$options.tokens?.[this.variable.key]?.validation; + + if (validator) { + return validator(this.variable.secret_value); + } + + return true; + }, + scopedVariablesAvailable() { + return !this.isGroup || this.glFeatures.groupScopedCiVariables; + }, + variableValidationFeedback() { + return `${this.tokenValidationFeedback} ${this.maskedFeedback}`; + }, + variableValidationState() { + return this.variable.secret_value === '' || (this.tokenValidationState && this.maskedState); + }, + }, + watch: { + variable: { + handler() { + this.trackVariableValidationErrors(); + }, + deep: true, + }, + }, + methods: { + ...mapActions([ + 'addVariable', + 'updateVariable', + 'resetEditing', + 'displayInputValue', + 'clearModal', + 'deleteVariable', + 'setEnvironmentScope', + 'addWildCardScope', + 'resetSelectedEnvironment', + 'setSelectedEnvironment', + 'setVariableProtected', + ]), + dismissTip() { + setCookie(AWS_TIP_DISMISSED_COOKIE_NAME, 'true', { expires: 90 }); + this.isTipDismissed = true; + }, + deleteVarAndClose() { + this.deleteVariable(); + this.hideModal(); + }, + hideModal() { + this.$refs.modal.hide(); + }, + resetModalHandler() { + if (this.variableBeingEdited) { + this.resetEditing(); + } + + this.clearModal(); + this.resetSelectedEnvironment(); + this.resetValidationErrorEvents(); + }, + updateOrAddVariable() { + if (this.variableBeingEdited) { + this.updateVariable(); + } else { + this.addVariable(); + } + this.hideModal(); + }, + setVariableProtectedByDefault() { + if (this.isProtectedByDefault && !this.variableBeingEdited) { + this.setVariableProtected(); + } + }, + trackVariableValidationErrors() { + const property = this.getTrackingErrorProperty(); + if (!this.validationErrorEventProperty && property) { + this.track(EVENT_ACTION, { property }); + this.validationErrorEventProperty = property; + } + }, + getTrackingErrorProperty() { + let property; + if (this.variable.secret_value?.length && !property) { + if (this.displayMaskedError && this.maskableRegex?.length) { + const supportedChars = this.maskableRegex.replace('^', '').replace(/{(\d,)}\$/, ''); + const regex = new RegExp(supportedChars, 'g'); + property = this.variable.secret_value.replace(regex, ''); + } + if (this.containsVariableReference) { + property = '$'; + } + } + + return property; + }, + resetValidationErrorEvents() { + this.validationErrorEventProperty = ''; + }, + }, +}; +</script> + +<template> + <gl-modal + ref="modal" + :modal-id="$options.modalId" + :title="modalActionText" + static + lazy + @hidden="resetModalHandler" + @shown="setVariableProtectedByDefault" + > + <form> + <gl-form-combobox + v-model="key" + :token-list="$options.tokenList" + :label-text="__('Key')" + data-qa-selector="ci_variable_key_field" + /> + + <gl-form-group + :label="__('Value')" + label-for="ci-variable-value" + :state="variableValidationState" + :invalid-feedback="variableValidationFeedback" + > + <gl-form-textarea + id="ci-variable-value" + ref="valueField" + v-model="secret_value" + :state="variableValidationState" + rows="3" + max-rows="6" + data-qa-selector="ci_variable_value_field" + class="gl-font-monospace!" + /> + </gl-form-group> + + <div class="d-flex"> + <gl-form-group :label="__('Type')" label-for="ci-variable-type" class="w-50 gl-mr-5"> + <gl-form-select id="ci-variable-type" v-model="variable_type" :options="typeOptions" /> + </gl-form-group> + + <gl-form-group label-for="ci-variable-env" class="w-50" data-testid="environment-scope"> + <template #label> + {{ __('Environment scope') }} + <gl-link + :title="$options.environmentScopeLinkTitle" + :href="environmentScopeLink" + target="_blank" + data-testid="environment-scope-link" + > + <gl-icon name="question" :size="12" /> + </gl-link> + </template> + <ci-environments-dropdown + v-if="scopedVariablesAvailable" + class="w-100" + :value="environment_scope" + @selectEnvironment="setEnvironmentScope" + @createClicked="addWildCardScope" + /> + + <gl-form-input v-else v-model="environment_scope" class="w-100" readonly /> + </gl-form-group> + </div> + + <gl-form-group :label="__('Flags')" label-for="ci-variable-flags"> + <gl-form-checkbox + v-model="protected_variable" + class="mb-0" + data-testid="ci-variable-protected-checkbox" + > + {{ __('Protect variable') }} + <gl-link target="_blank" :href="protectedEnvironmentVariablesLink"> + <gl-icon name="question" :size="12" /> + </gl-link> + <p class="gl-mt-2 text-secondary"> + {{ __('Export variable to pipelines running on protected branches and tags only.') }} + </p> + </gl-form-checkbox> + + <gl-form-checkbox + ref="masked-ci-variable" + v-model="masked" + data-testid="ci-variable-masked-checkbox" + > + {{ __('Mask variable') }} + <gl-link target="_blank" :href="maskedEnvironmentVariablesLink"> + <gl-icon name="question" :size="12" /> + </gl-link> + <p class="gl-mt-2 gl-mb-0 text-secondary"> + {{ __('Variable will be masked in job logs.') }} + <span + :class="{ + 'bold text-plain': displayMaskedError, + }" + > + {{ __('Requires values to meet regular expression requirements.') }}</span + > + <gl-link target="_blank" :href="maskedEnvironmentVariablesLink">{{ + __('More information') + }}</gl-link> + </p> + </gl-form-checkbox> + </gl-form-group> + </form> + <gl-collapse :visible="isTipVisible"> + <gl-alert + :title="__('Deploying to AWS is easy with GitLab')" + variant="tip" + data-testid="aws-guidance-tip" + @dismiss="dismissTip" + > + <div class="gl-display-flex gl-flex-direction-row"> + <div> + <p> + <gl-sprintf :message="$options.awsTipMessage"> + <template #deployLink="{ content }"> + <gl-link :href="awsTipDeployLink" target="_blank">{{ content }}</gl-link> + </template> + <template #commandsLink="{ content }"> + <gl-link :href="awsTipCommandsLink" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + <p> + <gl-button + :href="awsTipLearnLink" + target="_blank" + category="secondary" + variant="info" + class="gl-overflow-wrap-break" + >{{ __('Learn more about deploying to AWS') }}</gl-button + > + </p> + </div> + <img + class="gl-mt-3" + :alt="__('Amazon Web Services Logo')" + :src="awsLogoSvgPath" + height="32" + /> + </div> + </gl-alert> + </gl-collapse> + <gl-alert + v-if="containsVariableReference" + :title="__('Value might contain a variable reference')" + :dismissible="false" + variant="warning" + data-testid="contains-variable-reference" + > + <gl-sprintf :message="$options.containsVariableReferenceMessage"> + <template #code="{ content }"> + <code>{{ content }}</code> + </template> + <template #docsLink="{ content }"> + <gl-link :href="containsVariableReferenceLink" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </gl-alert> + <template #modal-footer> + <gl-button @click="hideModal">{{ __('Cancel') }}</gl-button> + <gl-button + v-if="variableBeingEdited" + ref="deleteCiVariable" + variant="danger" + category="secondary" + data-qa-selector="ci_variable_delete_button" + @click="deleteVarAndClose" + >{{ __('Delete variable') }}</gl-button + > + <gl-button + ref="updateOrAddVariable" + :disabled="!canSubmit" + variant="confirm" + category="primary" + data-testid="ciUpdateOrAddVariableBtn" + data-qa-selector="ci_variable_save_button" + @click="updateOrAddVariable" + >{{ modalActionText }} + </gl-button> + </template> + </gl-modal> +</template> diff --git a/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_settings.vue b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_settings.vue new file mode 100644 index 00000000000..9acc9fbffb6 --- /dev/null +++ b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_settings.vue @@ -0,0 +1,32 @@ +<script> +import { mapState, mapActions } from 'vuex'; +import LegacyCiVariableModal from './legacy_ci_variable_modal.vue'; +import LegacyCiVariableTable from './legacy_ci_variable_table.vue'; + +export default { + components: { + LegacyCiVariableModal, + LegacyCiVariableTable, + }, + computed: { + ...mapState(['isGroup']), + }, + mounted() { + if (!this.isGroup) { + this.fetchEnvironments(); + } + }, + methods: { + ...mapActions(['fetchEnvironments']), + }, +}; +</script> + +<template> + <div class="row"> + <div class="col-lg-12"> + <legacy-ci-variable-table /> + <legacy-ci-variable-modal /> + </div> + </div> +</template> diff --git a/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_table.vue b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_table.vue new file mode 100644 index 00000000000..f078234829a --- /dev/null +++ b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_table.vue @@ -0,0 +1,199 @@ +<script> +import { GlTable, GlButton, GlModalDirective, GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { mapState, mapActions } from 'vuex'; +import { s__, __ } from '~/locale'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; +import { ADD_CI_VARIABLE_MODAL_ID } from '../constants'; +import CiVariablePopover from './ci_variable_popover.vue'; + +export default { + modalId: ADD_CI_VARIABLE_MODAL_ID, + trueIcon: 'mobile-issue-close', + falseIcon: 'close', + iconSize: 16, + fields: [ + { + key: 'variable_type', + label: s__('CiVariables|Type'), + customStyle: { width: '70px' }, + }, + { + key: 'key', + label: s__('CiVariables|Key'), + tdClass: 'text-plain', + sortable: true, + customStyle: { width: '40%' }, + }, + { + key: 'value', + label: s__('CiVariables|Value'), + customStyle: { width: '40%' }, + }, + { + key: 'protected', + label: s__('CiVariables|Protected'), + customStyle: { width: '100px' }, + }, + { + key: 'masked', + label: s__('CiVariables|Masked'), + customStyle: { width: '100px' }, + }, + { + key: 'environment_scope', + label: s__('CiVariables|Environments'), + customStyle: { width: '20%' }, + }, + { + key: 'actions', + label: '', + tdClass: 'text-right', + customStyle: { width: '35px' }, + }, + ], + components: { + CiVariablePopover, + GlButton, + GlIcon, + GlTable, + TooltipOnTruncate, + }, + directives: { + GlModalDirective, + GlTooltip: GlTooltipDirective, + }, + mixins: [glFeatureFlagsMixin()], + computed: { + ...mapState(['variables', 'valuesHidden', 'isLoading', 'isDeleting']), + valuesButtonText() { + return this.valuesHidden ? __('Reveal values') : __('Hide values'); + }, + isTableEmpty() { + return !this.variables || this.variables.length === 0; + }, + fields() { + return this.$options.fields; + }, + }, + mounted() { + this.fetchVariables(); + }, + methods: { + ...mapActions(['fetchVariables', 'toggleValues', 'editVariable']), + }, +}; +</script> + +<template> + <div class="ci-variable-table" data-testid="ci-variable-table"> + <gl-table + :fields="fields" + :items="variables" + tbody-tr-class="js-ci-variable-row" + data-qa-selector="ci_variable_table_content" + sort-by="key" + sort-direction="asc" + stacked="lg" + table-class="text-secondary" + fixed + show-empty + sort-icon-left + no-sort-reset + > + <template #table-colgroup="scope"> + <col v-for="field in scope.fields" :key="field.key" :style="field.customStyle" /> + </template> + <template #cell(key)="{ item }"> + <div class="gl-display-flex gl-align-items-center"> + <tooltip-on-truncate :title="item.key" truncate-target="child"> + <span + :id="`ci-variable-key-${item.id}`" + class="gl-display-inline-block gl-max-w-full gl-text-truncate" + >{{ item.key }}</span + > + </tooltip-on-truncate> + <gl-button + v-gl-tooltip + category="tertiary" + icon="copy-to-clipboard" + :title="__('Copy key')" + :data-clipboard-text="item.key" + :aria-label="__('Copy to clipboard')" + /> + </div> + </template> + <template #cell(value)="{ item }"> + <div class="gl-display-flex gl-align-items-center"> + <span v-if="valuesHidden">*********************</span> + <span + v-else + :id="`ci-variable-value-${item.id}`" + class="gl-display-inline-block gl-max-w-full gl-text-truncate" + >{{ item.value }}</span + > + <gl-button + v-gl-tooltip + category="tertiary" + icon="copy-to-clipboard" + :title="__('Copy value')" + :data-clipboard-text="item.value" + :aria-label="__('Copy to clipboard')" + /> + </div> + </template> + <template #cell(protected)="{ item }"> + <gl-icon v-if="item.protected" :size="$options.iconSize" :name="$options.trueIcon" /> + <gl-icon v-else :size="$options.iconSize" :name="$options.falseIcon" /> + </template> + <template #cell(masked)="{ item }"> + <gl-icon v-if="item.masked" :size="$options.iconSize" :name="$options.trueIcon" /> + <gl-icon v-else :size="$options.iconSize" :name="$options.falseIcon" /> + </template> + <template #cell(environment_scope)="{ item }"> + <div class="gl-display-flex"> + <span + :id="`ci-variable-env-${item.id}`" + class="gl-display-inline-block gl-max-w-full gl-text-truncate" + >{{ item.environment_scope }}</span + > + <ci-variable-popover + :target="`ci-variable-env-${item.id}`" + :value="item.environment_scope" + :tooltip-text="__('Copy environment')" + /> + </div> + </template> + <template #cell(actions)="{ item }"> + <gl-button + v-gl-modal-directive="$options.modalId" + icon="pencil" + :aria-label="__('Edit')" + data-qa-selector="edit_ci_variable_button" + @click="editVariable(item)" + /> + </template> + <template #empty> + <p class="gl-text-center gl-py-6 gl-text-black-normal gl-mb-0"> + {{ __('There are no variables yet.') }} + </p> + </template> + </gl-table> + <div class="ci-variable-actions gl-display-flex gl-mt-5"> + <gl-button + v-gl-modal-directive="$options.modalId" + class="gl-mr-3" + data-qa-selector="add_ci_variable_button" + variant="confirm" + category="primary" + >{{ __('Add variable') }}</gl-button + > + <gl-button + v-if="!isTableEmpty" + data-qa-selector="reveal_ci_variable_value_button" + @click="toggleValues(!valuesHidden)" + >{{ valuesButtonText }}</gl-button + > + </div> + </div> +</template> diff --git a/app/assets/javascripts/ci_variable_list/index.js b/app/assets/javascripts/ci_variable_list/index.js index f771751194c..2b54af6a2a4 100644 --- a/app/assets/javascripts/ci_variable_list/index.js +++ b/app/assets/javascripts/ci_variable_list/index.js @@ -1,10 +1,63 @@ import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; import { parseBoolean } from '~/lib/utils/common_utils'; import CiVariableSettings from './components/ci_variable_settings.vue'; +import LegacyCiVariableSettings from './components/legacy_ci_variable_settings.vue'; import createStore from './store'; const mountCiVariableListApp = (containerEl) => { const { + awsLogoSvgPath, + awsTipCommandsLink, + awsTipDeployLink, + awsTipLearnLink, + containsVariableReferenceLink, + environmentScopeLink, + group, + maskedEnvironmentVariablesLink, + maskableRegex, + projectFullPath, + projectId, + protectedByDefault, + protectedEnvironmentVariablesLink, + } = containerEl.dataset; + + const isGroup = parseBoolean(group); + const isProtectedByDefault = parseBoolean(protectedByDefault); + + Vue.use(VueApollo); + + const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), + }); + + return new Vue({ + el: containerEl, + apolloProvider, + provide: { + awsLogoSvgPath, + awsTipCommandsLink, + awsTipDeployLink, + awsTipLearnLink, + containsVariableReferenceLink, + environmentScopeLink, + isGroup, + isProtectedByDefault, + maskedEnvironmentVariablesLink, + maskableRegex, + projectFullPath, + projectId, + protectedEnvironmentVariablesLink, + }, + render(createElement) { + return createElement(CiVariableSettings); + }, + }); +}; + +const mountLegacyCiVariableListApp = (containerEl) => { + const { endpoint, projectId, group, @@ -42,7 +95,7 @@ const mountCiVariableListApp = (containerEl) => { el: containerEl, store, render(createElement) { - return createElement(CiVariableSettings); + return createElement(LegacyCiVariableSettings); }, }); }; @@ -50,5 +103,11 @@ const mountCiVariableListApp = (containerEl) => { export default (containerId = 'js-ci-project-variables') => { const el = document.getElementById(containerId); - return !el ? {} : mountCiVariableListApp(el); + if (el) { + if (gon.features?.ciVariableSettingsGraphql) { + mountCiVariableListApp(el); + } else { + mountLegacyCiVariableListApp(el); + } + } }; diff --git a/app/assets/javascripts/clusters/agents/components/create_token_button.vue b/app/assets/javascripts/clusters/agents/components/create_token_button.vue index 3e1a8994fb8..74155d7819a 100644 --- a/app/assets/javascripts/clusters/agents/components/create_token_button.vue +++ b/app/assets/javascripts/clusters/agents/components/create_token_button.vue @@ -205,7 +205,12 @@ export default { </gl-form-group> </template> - <agent-token v-else :agent-token="agentToken" :modal-id="$options.modalId" /> + <agent-token + v-else + :agent-name="agentName" + :agent-token="agentToken" + :modal-id="$options.modalId" + /> <template #modal-footer> <gl-button diff --git a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue index dca89133931..8a997624a36 100644 --- a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue +++ b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue @@ -2,29 +2,9 @@ import { GlModal, GlButton, GlFormInput, GlSprintf } from '@gitlab/ui'; import csrf from '~/lib/utils/csrf'; import { s__ } from '~/locale'; -import SplitButton from '~/vue_shared/components/split_button.vue'; - -const splitButtonActionItems = [ - { - title: s__('ClusterIntegration|Remove integration and resources'), - description: s__( - 'ClusterIntegration|Deletes all GitLab resources attached to this cluster during removal', - ), - eventName: 'remove-cluster-and-cleanup', - }, - { - title: s__('ClusterIntegration|Remove integration'), - description: s__( - 'ClusterIntegration|Removes cluster from project but keeps associated resources', - ), - eventName: 'remove-cluster', - }, -]; export default { - splitButtonActionItems, components: { - SplitButton, GlModal, GlButton, GlFormInput, @@ -79,6 +59,9 @@ export default { canCleanupResources() { return !this.hasManagementProject; }, + buttonCategory() { + return !this.hasManagementProject ? 'secondary' : 'primary'; + }, }, methods: { handleClickRemoveCluster(cleanup = false) { @@ -99,19 +82,20 @@ export default { </script> <template> - <div class="gl-display-flex gl-justify-content-end"> - <split-button + <div class="gl-display-flex"> + <gl-button v-if="canCleanupResources" - :action-items="$options.splitButtonActionItems" - menu-class="dropdown-menu-large" + data-testid="remove-integration-and-resources-button" + class="gl-mr-3" variant="danger" - @remove-cluster="handleClickRemoveCluster(false)" - @remove-cluster-and-cleanup="handleClickRemoveCluster(true)" - /> + @click="handleClickRemoveCluster(true)" + > + {{ s__('ClusterIntegration|Remove integration and resources') }} + </gl-button> <gl-button - v-else + data-testid="remove-integration-button" + :category="buttonCategory" variant="danger" - data-testid="btnRemove" @click="handleClickRemoveCluster(false)" > {{ s__('ClusterIntegration|Remove integration') }} @@ -163,13 +147,7 @@ export default { <template v-if="confirmCleanup"> <gl-button :disabled="!canSubmit" - variant="warning" - category="primary" - @click="handleSubmit" - >{{ s__('ClusterIntegration|Remove integration') }}</gl-button - > - <gl-button - :disabled="!canSubmit" + data-testid="remove-integration-and-resources-modal-button" variant="danger" category="primary" @click="handleSubmit(true)" @@ -179,6 +157,7 @@ export default { <template v-else> <gl-button :disabled="!canSubmit" + data-testid="remove-integration-modal-button" variant="danger" category="primary" @click="handleSubmit" diff --git a/app/assets/javascripts/clusters_list/clusters_util.js b/app/assets/javascripts/clusters_list/clusters_util.js index 9eb01f593f5..e2d01723dde 100644 --- a/app/assets/javascripts/clusters_list/clusters_util.js +++ b/app/assets/javascripts/clusters_list/clusters_util.js @@ -1,12 +1,12 @@ -export function generateAgentRegistrationCommand(agentToken, kasAddress, kasVersion) { +export function generateAgentRegistrationCommand({ name, token, version, address }) { return `helm repo add gitlab https://charts.gitlab.io helm repo update -helm upgrade --install gitlab-agent gitlab/gitlab-agent \\ +helm upgrade --install ${name} gitlab/gitlab-agent \\ --namespace gitlab-agent \\ --create-namespace \\ - --set image.tag=v${kasVersion} \\ - --set config.token=${agentToken} \\ - --set config.kasAddress=${kasAddress}`; + --set image.tag=v${version} \\ + --set config.token=${token} \\ + --set config.kasAddress=${address}`; } export function getAgentConfigPath(clusterAgentName) { diff --git a/app/assets/javascripts/clusters_list/components/agent_token.vue b/app/assets/javascripts/clusters_list/components/agent_token.vue index 1597fcb9914..4dd6d84566c 100644 --- a/app/assets/javascripts/clusters_list/components/agent_token.vue +++ b/app/assets/javascripts/clusters_list/components/agent_token.vue @@ -21,6 +21,10 @@ export default { }, inject: ['kasAddress', 'kasVersion'], props: { + agentName: { + required: true, + type: String, + }, agentToken: { required: true, type: String, @@ -32,7 +36,12 @@ export default { }, computed: { agentRegistrationCommand() { - return generateAgentRegistrationCommand(this.agentToken, this.kasAddress, this.kasVersion); + return generateAgentRegistrationCommand({ + name: this.agentName, + token: this.agentToken, + version: this.kasVersion, + address: this.kasAddress, + }); }, }, }; diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue index fb3c8ff66b0..1ea5eff35d4 100644 --- a/app/assets/javascripts/clusters_list/components/clusters.vue +++ b/app/assets/javascripts/clusters_list/components/clusters.vue @@ -4,7 +4,7 @@ import { GlLink, GlLoadingIcon, GlPagination, - GlDeprecatedSkeletonLoading as GlSkeletonLoading, + GlSkeletonLoader, GlSprintf, GlTableLite, GlTooltipDirective, @@ -25,7 +25,7 @@ export default { GlLink, GlLoadingIcon, GlPagination, - GlSkeletonLoading, + GlSkeletonLoader, GlSprintf, GlTableLite, NodeErrorHelpText, @@ -267,7 +267,7 @@ export default { <template #cell(node_size)="{ item }"> <span v-if="item.nodes">{{ item.nodes.length }}</span> - <gl-skeleton-loading v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" /> + <gl-skeleton-loader v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" /> <node-error-help-text v-else-if="item.kubernetes_errors" @@ -288,7 +288,7 @@ export default { </gl-sprintf> </span> - <gl-skeleton-loading v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" /> + <gl-skeleton-loader v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" /> <node-error-help-text v-else-if="item.kubernetes_errors" @@ -309,7 +309,7 @@ export default { </gl-sprintf> </span> - <gl-skeleton-loading v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" /> + <gl-skeleton-loader v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" /> <node-error-help-text v-else-if="item.kubernetes_errors" diff --git a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue index 3b39c3aac45..444b9ac2a14 100644 --- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue +++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue @@ -268,7 +268,12 @@ export default { </p> </template> - <agent-token v-else :agent-token="agentToken" :modal-id="$options.modalId" /> + <agent-token + v-else + :agent-name="agentName" + :agent-token="agentToken" + :modal-id="$options.modalId" + /> </template> <template v-else> diff --git a/app/assets/javascripts/code_navigation/utils/index.js b/app/assets/javascripts/code_navigation/utils/index.js index 0d72153d8fe..46038df2f86 100644 --- a/app/assets/javascripts/code_navigation/utils/index.js +++ b/app/assets/javascripts/code_navigation/utils/index.js @@ -32,8 +32,8 @@ export const addInteractionClass = ({ path, d, wrapTextNodes }) => { }); if (el && !isTextNode(el)) { - el.setAttribute('data-char-index', d.start_char); - el.setAttribute('data-line-index', d.start_line); + el.dataset.charIndex = d.start_char; + el.dataset.lineIndex = d.start_line; el.classList.add('cursor-pointer', 'code-navigation', 'js-code-navigation'); el.closest('.line').classList.add('code-navigation-line'); } diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue index 29530ddb7a2..4ff49433749 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue +++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue @@ -9,6 +9,7 @@ import PipelinesService from '~/pipelines/services/pipelines_service'; import PipelineStore from '~/pipelines/stores/pipelines_store'; import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { s__, __ } from '~/locale'; export default { PipelineKeyOptions, @@ -170,6 +171,20 @@ export default { } }, }, + modal: { + actionPrimary: { + text: s__('Pipeline|Run pipeline'), + attributes: { + variant: 'danger', + }, + }, + actionCancel: { + text: __('Cancel'), + attributes: { + variant: 'default', + }, + }, + }, }; </script> <template> @@ -229,9 +244,9 @@ export default { ref="modal" :modal-id="modalId" :title="s__('Pipelines|Are you sure you want to run this pipeline?')" - :ok-title="s__('Pipeline|Run pipeline')" - ok-variant="danger" - @ok="onClickRunPipeline" + :action-primary="$options.modal.actionPrimary" + :action-cancel="$options.modal.actionCancel" + @primary="onClickRunPipeline" > <p> {{ diff --git a/app/assets/javascripts/content_editor/components/bubble_menus/code_block.vue b/app/assets/javascripts/content_editor/components/bubble_menus/code_block.vue index 518ddd7a09c..6c0ac8e54d2 100644 --- a/app/assets/javascripts/content_editor/components/bubble_menus/code_block.vue +++ b/app/assets/javascripts/content_editor/components/bubble_menus/code_block.vue @@ -1,5 +1,8 @@ <script> import { + GlDropdownForm, + GlFormInput, + GlDropdownDivider, GlButton, GlButtonGroup, GlDropdown, @@ -20,23 +23,32 @@ const CODE_BLOCK_NODE_TYPES = [CodeBlockHighlight.name, Diagram.name, Frontmatte export default { components: { BubbleMenu, + GlDropdownForm, + GlFormInput, GlButton, GlButtonGroup, GlDropdown, GlDropdownItem, + GlDropdownDivider, GlSearchBoxByType, EditorStateObserver, }, directives: { GlTooltip, }, - inject: ['tiptapEditor'], + inject: ['tiptapEditor', 'contentEditor'], data() { return { codeBlockType: undefined, - selectedLanguage: {}, filterTerm: '', filteredLanguages: [], + + showCustomLanguageInput: false, + customLanguageType: '', + + selectedLanguage: {}, + isDiagram: false, + showPreview: false, }; }, watch: { @@ -52,24 +64,39 @@ export default { return CODE_BLOCK_NODE_TYPES.some((type) => editor.isActive(type)); }, - updateSelectedLanguage() { + async updateCodeBlockInfoToState() { this.codeBlockType = CODE_BLOCK_NODE_TYPES.find((type) => this.tiptapEditor.isActive(type)); - if (this.codeBlockType) { - const { language } = this.tiptapEditor.getAttributes(this.codeBlockType); - this.selectedLanguage = codeBlockLanguageLoader.findLanguageBySyntax(language); - } + if (!this.codeBlockType) return; + + const { language, isDiagram, showPreview } = this.tiptapEditor.getAttributes( + this.codeBlockType, + ); + this.selectedLanguage = codeBlockLanguageLoader.findOrCreateLanguageBySyntax( + language, + isDiagram, + ); + this.isDiagram = isDiagram; + this.showPreview = showPreview; }, - copyCodeBlockText() { + getCodeBlockText() { const { view } = this.tiptapEditor; const { from } = this.tiptapEditor.state.selection; const node = getParentByTagName(view.domAtPos(from).node, 'pre'); + return node?.textContent || ''; + }, - navigator.clipboard.writeText(node?.textContent || ''); + copyCodeBlockText() { + navigator.clipboard.writeText(this.getCodeBlockText()); }, - async applySelectedLanguage(language) { + togglePreview() { + this.showPreview = !this.showPreview; + this.tiptapEditor.commands.updateAttributes(Diagram.name, { showPreview: this.showPreview }); + }, + + async applyLanguage(language) { this.selectedLanguage = language; await codeBlockLanguageLoader.loadLanguage(language.syntax); @@ -77,6 +104,21 @@ export default { this.tiptapEditor.commands.setCodeBlock({ language: this.selectedLanguage.syntax }); }, + clearCustomLanguageForm() { + this.showCustomLanguageInput = false; + this.customLanguageType = ''; + }, + + applyCustomLanguage() { + this.showCustomLanguageInput = false; + + const language = codeBlockLanguageLoader.findOrCreateLanguageBySyntax( + this.customLanguageType, + ); + + this.applyLanguage(language); + }, + getReferenceClientRect() { const { view } = this.tiptapEditor; const { from } = this.tiptapEditor.state.selection; @@ -101,15 +143,36 @@ export default { getReferenceClientRect, } /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" > - <editor-state-observer @transaction="updateSelectedLanguage"> + <editor-state-observer @transaction="updateCodeBlockInfoToState"> <gl-button-group> <gl-dropdown category="tertiary" contenteditable="false" boundary="viewport" :text="selectedLanguage.label" + @hide="clearCustomLanguageForm" > - <template #header> + <template v-if="showCustomLanguageInput" #header> + <div class="gl-relative"> + <gl-button + v-gl-tooltip + class="gl-absolute gl-mt-n3 gl-ml-2" + variant="default" + category="tertiary" + size="medium" + :aria-label="__('Go back')" + :title="__('Go back')" + icon="arrow-left" + @click.prevent.stop="showCustomLanguageInput = false" + /> + <p + class="gl-text-center gl-new-dropdown-header-top gl-mb-0! gl-border-none! gl-pb-1!" + > + {{ __('Create custom type') }} + </p> + </div> + </template> + <template v-else #header> <gl-search-box-by-type v-model="filterTerm" :clear-button-title="__('Clear')" @@ -117,20 +180,59 @@ export default { /> </template> - <template #highlighted-items> + <template v-if="!showCustomLanguageInput" #highlighted-items> <gl-dropdown-item :key="selectedLanguage.syntax" is-check-item :is-checked="true"> {{ selectedLanguage.label }} </gl-dropdown-item> </template> - <gl-dropdown-item - v-for="language in filteredLanguages" - v-show="selectedLanguage.syntax !== language.syntax" - :key="language.syntax" - @click="applySelectedLanguage(language)" - > - {{ language.label }} - </gl-dropdown-item> + <template v-if="!showCustomLanguageInput" #default> + <gl-dropdown-item + v-for="language in filteredLanguages" + v-show="selectedLanguage.syntax !== language.syntax" + :key="language.syntax" + @click="applyLanguage(language)" + > + {{ language.label }} + </gl-dropdown-item> + </template> + <template v-else #default> + <gl-dropdown-form @submit.prevent="applyCustomLanguage"> + <div class="gl-mx-4 gl-mt-2 gl-mb-3"> + <gl-form-input v-model="customLanguageType" :placeholder="__('Language type')" /> + </div> + <gl-dropdown-divider /> + <div class="gl-mx-4 gl-mt-3 gl-display-flex gl-justify-content-end"> + <gl-button + variant="default" + size="medium" + category="primary" + class="gl-mr-2 gl-w-auto!" + @click.prevent.stop="showCustomLanguageInput = false" + > + {{ __('Cancel') }} + </gl-button> + <gl-button + variant="confirm" + size="medium" + category="primary" + type="submit" + class="gl-w-auto!" + > + {{ __('Apply') }} + </gl-button> + </div> + </gl-dropdown-form> + </template> + + <template v-if="!showCustomLanguageInput" #footer> + <gl-dropdown-item + data-testid="create-custom-type" + @click.capture.native.stop="showCustomLanguageInput = true" + > + {{ __('Create custom type') }} + </gl-dropdown-item> + </template> </gl-dropdown> <gl-button v-gl-tooltip @@ -144,6 +246,19 @@ export default { @click="copyCodeBlockText" /> <gl-button + v-if="isDiagram" + v-gl-tooltip + variant="default" + category="tertiary" + size="medium" + :class="{ active: showPreview }" + data-testid="preview-diagram" + :aria-label="__('Preview diagram')" + :title="__('Preview diagram')" + icon="eye" + @click="togglePreview" + /> + <gl-button v-gl-tooltip variant="default" category="tertiary" diff --git a/app/assets/javascripts/content_editor/components/toolbar_more_dropdown.vue b/app/assets/javascripts/content_editor/components/toolbar_more_dropdown.vue new file mode 100644 index 00000000000..ecde593147c --- /dev/null +++ b/app/assets/javascripts/content_editor/components/toolbar_more_dropdown.vue @@ -0,0 +1,34 @@ +<script> +import { GlDropdown, GlDropdownItem, GlTooltipDirective as GlTooltip } from '@gitlab/ui'; + +export default { + components: { + GlDropdown, + GlDropdownItem, + }, + directives: { + GlTooltip, + }, + inject: ['tiptapEditor'], + methods: { + execute(contentType, attrs) { + this.tiptapEditor.chain().focus().setNode(contentType, attrs).run(); + + this.$emit('execute', { contentType }); + }, + }, +}; +</script> +<template> + <gl-dropdown size="small" category="tertiary" icon="plus"> + <gl-dropdown-item @click="execute('diagram', { language: 'mermaid' })"> + {{ __('Mermaid diagram') }} + </gl-dropdown-item> + <gl-dropdown-item @click="execute('diagram', { language: 'plantuml' })"> + {{ __('PlantUML diagram') }} + </gl-dropdown-item> + <gl-dropdown-item @click="execute('horizontalRule')"> + {{ __('Horizontal rule') }} + </gl-dropdown-item> + </gl-dropdown> +</template> diff --git a/app/assets/javascripts/content_editor/components/top_toolbar.vue b/app/assets/javascripts/content_editor/components/top_toolbar.vue index 19e150a4da9..b652e634b0c 100644 --- a/app/assets/javascripts/content_editor/components/top_toolbar.vue +++ b/app/assets/javascripts/content_editor/components/top_toolbar.vue @@ -5,6 +5,7 @@ import ToolbarImageButton from './toolbar_image_button.vue'; import ToolbarLinkButton from './toolbar_link_button.vue'; import ToolbarTableButton from './toolbar_table_button.vue'; import ToolbarTextStyleDropdown from './toolbar_text_style_dropdown.vue'; +import ToolbarMoreDropdown from './toolbar_more_dropdown.vue'; export default { components: { @@ -13,6 +14,7 @@ export default { ToolbarLinkButton, ToolbarTableButton, ToolbarImageButton, + ToolbarMoreDropdown, }, methods: { trackToolbarControlExecution({ contentType, value }) { @@ -117,16 +119,8 @@ export default { :label="__('Add a collapsible section')" @execute="trackToolbarControlExecution" /> - <toolbar-button - data-testid="horizontal-rule" - content-type="horizontalRule" - icon-name="dash" - class="gl-mx-2" - editor-command="setHorizontalRule" - :label="__('Add a horizontal rule')" - @execute="trackToolbarControlExecution" - /> - <toolbar-table-button @execute="trackToolbarControlExecution" /> + <toolbar-table-button data-testid="table" @execute="trackToolbarControlExecution" /> + <toolbar-more-dropdown data-testid="more" @execute="trackToolbarControlExecution" /> </div> </template> <style> diff --git a/app/assets/javascripts/content_editor/components/wrappers/code_block.vue b/app/assets/javascripts/content_editor/components/wrappers/code_block.vue index 1390b9b2daf..81f9b1f0af5 100644 --- a/app/assets/javascripts/content_editor/components/wrappers/code_block.vue +++ b/app/assets/javascripts/content_editor/components/wrappers/code_block.vue @@ -1,15 +1,26 @@ <script> +import { debounce } from 'lodash'; import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'; import { __ } from '~/locale'; +import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants'; +import SandboxedMermaid from '~/behaviors/components/sandboxed_mermaid.vue'; import codeBlockLanguageLoader from '../../services/code_block_language_loader'; +import EditorStateObserver from '../editor_state_observer.vue'; export default { name: 'CodeBlock', components: { NodeViewWrapper, NodeViewContent, + EditorStateObserver, + SandboxedMermaid, }, + inject: ['contentEditor'], props: { + editor: { + type: Object, + required: true, + }, node: { type: Object, required: true, @@ -18,27 +29,75 @@ export default { type: Function, required: true, }, + selected: { + type: Boolean, + required: false, + default: false, + }, + }, + data() { + return { + diagramUrl: '', + diagramSource: '', + }; }, async mounted() { - const lang = codeBlockLanguageLoader.findLanguageBySyntax(this.node.attrs.language); + this.updateDiagramPreview = debounce( + this.updateDiagramPreview, + DEFAULT_DEBOUNCE_AND_THROTTLE_MS, + ); + + const lang = codeBlockLanguageLoader.findOrCreateLanguageBySyntax(this.node.attrs.language); await codeBlockLanguageLoader.loadLanguage(lang.syntax); this.updateAttributes({ language: this.node.attrs.language }); }, + methods: { + async updateDiagramPreview() { + if (!this.node.attrs.showPreview) { + this.diagramSource = ''; + return; + } + + if (!this.editor.isActive('diagram')) return; + + this.diagramSource = this.$refs.nodeViewContent.$el.textContent; + + if (this.node.attrs.language !== 'mermaid') { + this.diagramUrl = await this.contentEditor.renderDiagram( + this.diagramSource, + this.node.attrs.language, + ); + } + }, + }, i18n: { frontmatter: __('frontmatter'), }, + userColorScheme: gon.user_color_scheme, }; </script> <template> - <node-view-wrapper class="content-editor-code-block gl-relative code highlight" as="pre"> - <span - v-if="node.attrs.isFrontmatter" - data-testid="frontmatter-label" - class="gl-absolute gl-top-0 gl-right-3" - contenteditable="false" - >{{ $options.i18n.frontmatter }}:{{ node.attrs.language }}</span + <editor-state-observer @transaction="updateDiagramPreview"> + <node-view-wrapper + :class="`content-editor-code-block gl-relative code highlight ${$options.userColorScheme}`" + as="pre" > - <node-view-content as="code" /> - </node-view-wrapper> + <div + v-if="node.attrs.showPreview" + class="gl-mt-n3! gl-ml-n4! gl-mr-n4! gl-mb-3 gl-bg-white! gl-p-4 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100" + > + <sandboxed-mermaid v-if="node.attrs.language === 'mermaid'" :source="diagramSource" /> + <img v-else ref="diagramContainer" :src="diagramUrl" /> + </div> + <span + v-if="node.attrs.isFrontmatter" + data-testid="frontmatter-label" + class="gl-absolute gl-top-0 gl-right-3" + contenteditable="false" + >{{ $options.i18n.frontmatter }}:{{ node.attrs.language }}</span + > + <node-view-content ref="nodeViewContent" as="code" /> + </node-view-wrapper> + </editor-state-observer> </template> diff --git a/app/assets/javascripts/content_editor/components/wrappers/footnote_definition.vue b/app/assets/javascripts/content_editor/components/wrappers/footnote_definition.vue new file mode 100644 index 00000000000..8b7b02605f7 --- /dev/null +++ b/app/assets/javascripts/content_editor/components/wrappers/footnote_definition.vue @@ -0,0 +1,28 @@ +<script> +import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'; + +export default { + name: 'FootnoteDefinitionWrapper', + components: { + NodeViewWrapper, + NodeViewContent, + }, + props: { + node: { + type: Object, + required: true, + }, + }, +}; +</script> +<template> + <node-view-wrapper class="gl-display-flex gl-font-sm" as="div"> + <span + data-testid="footnote-label" + contenteditable="false" + class="gl-display-inline-flex gl-mr-2" + >{{ node.attrs.label }}:</span + > + <node-view-content /> + </node-view-wrapper> +</template> diff --git a/app/assets/javascripts/content_editor/components/wrappers/table_cell_base.vue b/app/assets/javascripts/content_editor/components/wrappers/table_cell_base.vue index 209e4629830..c0d6e32a739 100644 --- a/app/assets/javascripts/content_editor/components/wrappers/table_cell_base.vue +++ b/app/assets/javascripts/content_editor/components/wrappers/table_cell_base.vue @@ -101,6 +101,9 @@ export default { deleteTable: __('Delete table'), editTableActions: __('Edit table'), }, + dropdownPopperOpts: { + positionFixed: true, + }, }; </script> <template> @@ -124,9 +127,7 @@ export default { no-caret text-sr-only :text="$options.i18n.editTableActions" - :popper-opts="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ { - positionFixed: true, - } /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" + :popper-opts="$options.dropdownPopperOpts" @hide="handleHide($event)" > <gl-dropdown-item @click="runCommand('addColumnBefore')"> diff --git a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js index cc4ba84a29d..61f6a233694 100644 --- a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js +++ b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js @@ -4,7 +4,8 @@ import { VueNodeViewRenderer } from '@tiptap/vue-2'; import languageLoader from '../services/code_block_language_loader'; import CodeBlockWrapper from '../components/wrappers/code_block.vue'; -const extractLanguage = (element) => element.getAttribute('lang'); +const extractLanguage = (element) => element.dataset.canonicalLang ?? element.getAttribute('lang'); + export const backtickInputRegex = /^```([a-z]+)?[\s\n]$/; export const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/; diff --git a/app/assets/javascripts/content_editor/extensions/diagram.js b/app/assets/javascripts/content_editor/extensions/diagram.js index f9dfeb92e9a..c59ca8a28b8 100644 --- a/app/assets/javascripts/content_editor/extensions/diagram.js +++ b/app/assets/javascripts/content_editor/extensions/diagram.js @@ -1,6 +1,10 @@ +import { textblockTypeInputRule } from '@tiptap/core'; import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants'; +import languageLoader from '../services/code_block_language_loader'; import CodeBlockHighlight from './code_block_highlight'; +const backtickInputRegex = /^```(mermaid|plantuml)[\s\n]$/; + export default CodeBlockHighlight.extend({ name: 'diagram', @@ -17,6 +21,9 @@ export default CodeBlockHighlight.extend({ isDiagram: { default: true, }, + showPreview: { + default: true, + }, }; }, @@ -24,6 +31,11 @@ export default CodeBlockHighlight.extend({ return [ { priority: PARSE_HTML_PRIORITY_HIGHEST, + tag: 'pre[lang="mermaid"]', + getAttrs: () => ({ language: 'mermaid' }), + }, + { + priority: PARSE_HTML_PRIORITY_HIGHEST, tag: '[data-diagram]', getContent(element, schema) { const source = atob(element.dataset.diagramSrc.replace('data:text/plain;base64,', '')); @@ -54,6 +66,14 @@ export default CodeBlockHighlight.extend({ }, addInputRules() { - return []; + const getAttributes = (match) => languageLoader?.loadLanguageFromInputRule(match) || {}; + + return [ + textblockTypeInputRule({ + find: backtickInputRegex, + type: this.type, + getAttributes, + }), + ]; }, }); diff --git a/app/assets/javascripts/content_editor/extensions/footnote_definition.js b/app/assets/javascripts/content_editor/extensions/footnote_definition.js index dbab0de3421..bf752918934 100644 --- a/app/assets/javascripts/content_editor/extensions/footnote_definition.js +++ b/app/assets/javascripts/content_editor/extensions/footnote_definition.js @@ -1,12 +1,27 @@ import { mergeAttributes, Node } from '@tiptap/core'; +import { VueNodeViewRenderer } from '@tiptap/vue-2'; +import FootnoteDefinitionWrapper from '../components/wrappers/footnote_definition.vue'; import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants'; +const extractFootnoteIdentifier = (idAttribute) => /^fn-(\w+)-\d+$/.exec(idAttribute)?.[1]; + export default Node.create({ name: 'footnoteDefinition', - content: 'paragraph', - group: 'block', + isolating: true, + addAttributes() { + return { + identifier: { + default: null, + parseHTML: (element) => extractFootnoteIdentifier(element.getAttribute('id')), + }, + label: { + default: null, + parseHTML: (element) => extractFootnoteIdentifier(element.getAttribute('id')), + }, + }; + }, parseHTML() { return [ @@ -15,7 +30,11 @@ export default Node.create({ ]; }, - renderHTML({ HTMLAttributes }) { - return ['li', mergeAttributes(HTMLAttributes), 0]; + renderHTML({ label, ...HTMLAttributes }) { + return ['div', mergeAttributes(HTMLAttributes), 0]; + }, + + addNodeView() { + return new VueNodeViewRenderer(FootnoteDefinitionWrapper); }, }); diff --git a/app/assets/javascripts/content_editor/extensions/footnote_reference.js b/app/assets/javascripts/content_editor/extensions/footnote_reference.js index 1ac8016f774..ae5b8edc7af 100644 --- a/app/assets/javascripts/content_editor/extensions/footnote_reference.js +++ b/app/assets/javascripts/content_editor/extensions/footnote_reference.js @@ -1,6 +1,9 @@ import { Node, mergeAttributes } from '@tiptap/core'; import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants'; +const extractFootnoteIdentifier = (element) => + /^fnref-(\w+)-\d+$/.exec(element.querySelector('a')?.getAttribute('id'))?.[1]; + export default Node.create({ name: 'footnoteReference', @@ -16,13 +19,13 @@ export default Node.create({ addAttributes() { return { - footnoteId: { + identifier: { default: null, - parseHTML: (element) => element.querySelector('a').getAttribute('id'), + parseHTML: extractFootnoteIdentifier, }, - footnoteNumber: { + label: { default: null, - parseHTML: (element) => element.textContent, + parseHTML: extractFootnoteIdentifier, }, }; }, @@ -31,7 +34,7 @@ export default Node.create({ return [{ tag: 'sup.footnote-ref', priority: PARSE_HTML_PRIORITY_HIGHEST }]; }, - renderHTML({ HTMLAttributes: { footnoteNumber, footnoteId, ...HTMLAttributes } }) { - return ['sup', mergeAttributes(HTMLAttributes), footnoteNumber]; + renderHTML({ HTMLAttributes: { label, ...HTMLAttributes } }) { + return ['sup', mergeAttributes(HTMLAttributes), label]; }, }); diff --git a/app/assets/javascripts/content_editor/extensions/footnotes_section.js b/app/assets/javascripts/content_editor/extensions/footnotes_section.js index 914a8934734..2b2c4177e1d 100644 --- a/app/assets/javascripts/content_editor/extensions/footnotes_section.js +++ b/app/assets/javascripts/content_editor/extensions/footnotes_section.js @@ -10,7 +10,10 @@ export default Node.create({ isolating: true, parseHTML() { - return [{ tag: 'section.footnotes > ol' }]; + return [ + { tag: 'section.footnotes', skip: true }, + { tag: 'section.footnotes > ol', skip: true }, + ]; }, renderHTML({ HTMLAttributes }) { diff --git a/app/assets/javascripts/content_editor/extensions/sourcemap.js b/app/assets/javascripts/content_editor/extensions/sourcemap.js index 94236e2e70e..87118074462 100644 --- a/app/assets/javascripts/content_editor/extensions/sourcemap.js +++ b/app/assets/javascripts/content_editor/extensions/sourcemap.js @@ -4,6 +4,8 @@ import Bold from './bold'; import BulletList from './bullet_list'; import Code from './code'; import CodeBlockHighlight from './code_block_highlight'; +import FootnoteReference from './footnote_reference'; +import FootnoteDefinition from './footnote_definition'; import Heading from './heading'; import HardBreak from './hard_break'; import HorizontalRule from './horizontal_rule'; @@ -13,6 +15,13 @@ import Link from './link'; import ListItem from './list_item'; import OrderedList from './ordered_list'; import Paragraph from './paragraph'; +import Strike from './strike'; +import TaskList from './task_list'; +import TaskItem from './task_item'; +import Table from './table'; +import TableCell from './table_cell'; +import TableHeader from './table_header'; +import TableRow from './table_row'; export default Extension.create({ addGlobalAttributes() { @@ -24,6 +33,8 @@ export default Extension.create({ BulletList.name, Code.name, CodeBlockHighlight.name, + FootnoteReference.name, + FootnoteDefinition.name, HardBreak.name, Heading.name, HorizontalRule.name, @@ -33,6 +44,13 @@ export default Extension.create({ ListItem.name, OrderedList.name, Paragraph.name, + Strike.name, + TaskList.name, + TaskItem.name, + Table.name, + TableCell.name, + TableHeader.name, + TableRow.name, ], attributes: { sourceMarkdown: { diff --git a/app/assets/javascripts/content_editor/services/asset_resolver.js b/app/assets/javascripts/content_editor/services/asset_resolver.js index 942457b9664..c0bcddbe58d 100644 --- a/app/assets/javascripts/content_editor/services/asset_resolver.js +++ b/app/assets/javascripts/content_editor/services/asset_resolver.js @@ -1,13 +1,24 @@ import { memoize } from 'lodash'; +const parser = new DOMParser(); + export default ({ renderMarkdown }) => ({ resolveUrl: memoize(async (canonicalSrc) => { const html = await renderMarkdown(`[link](${canonicalSrc})`); if (!html) return canonicalSrc; - const parser = new DOMParser(); const { body } = parser.parseFromString(html, 'text/html'); - return body.querySelector('a').getAttribute('href'); }), + + renderDiagram: memoize(async (code, language) => { + const backticks = '`'.repeat(4); + const html = await renderMarkdown(`${backticks}${language}\n${code}\n${backticks}`); + + const { body } = parser.parseFromString(html, 'text/html'); + const img = body.querySelector('img'); + if (!img) return ''; + + return img.dataset.src || img.getAttribute('src'); + }), }); diff --git a/app/assets/javascripts/content_editor/services/code_block_language_loader.js b/app/assets/javascripts/content_editor/services/code_block_language_loader.js index 1afaf4bfef6..b7cf1bb087c 100644 --- a/app/assets/javascripts/content_editor/services/code_block_language_loader.js +++ b/app/assets/javascripts/content_editor/services/code_block_language_loader.js @@ -8,7 +8,7 @@ const codeBlockLanguageLoader = { allLanguages: CODE_BLOCK_LANGUAGES, - findLanguageBySyntax(value) { + findOrCreateLanguageBySyntax(value, isDiagram) { const lowercaseValue = value?.toLowerCase() || 'plaintext'; return ( this.allLanguages.find( @@ -16,7 +16,9 @@ const codeBlockLanguageLoader = { syntax === lowercaseValue || variants?.toLowerCase().split(', ').includes(lowercaseValue), ) || { syntax: lowercaseValue, - label: sprintf(__(`Custom (%{language})`), { language: lowercaseValue }), + label: sprintf(isDiagram ? __(`Diagram (%{language})`) : __(`Custom (%{language})`), { + language: lowercaseValue, + }), } ); }, @@ -38,7 +40,7 @@ const codeBlockLanguageLoader = { }, loadLanguageFromInputRule(match) { - const { syntax } = this.findLanguageBySyntax(match[1]); + const { syntax } = this.findOrCreateLanguageBySyntax(match[1]); this.loadLanguage(syntax); diff --git a/app/assets/javascripts/content_editor/services/content_editor.js b/app/assets/javascripts/content_editor/services/content_editor.js index 52dacb84153..06757e7a280 100644 --- a/app/assets/javascripts/content_editor/services/content_editor.js +++ b/app/assets/javascripts/content_editor/services/content_editor.js @@ -52,6 +52,10 @@ export class ContentEditor { return this._assetResolver.resolveUrl(canonicalSrc); } + renderDiagram(code, language) { + return this._assetResolver.renderDiagram(code, language); + } + async setSerializedContent(serializedContent) { const { _tiptapEditor: editor, _eventHub: eventHub } = this; const { doc, tr } = editor.state; diff --git a/app/assets/javascripts/content_editor/services/hast_to_prosemirror_converter.js b/app/assets/javascripts/content_editor/services/hast_to_prosemirror_converter.js index b6a3e0bc26a..2c462cdde91 100644 --- a/app/assets/javascripts/content_editor/services/hast_to_prosemirror_converter.js +++ b/app/assets/javascripts/content_editor/services/hast_to_prosemirror_converter.js @@ -20,9 +20,9 @@ */ import { Mark } from 'prosemirror-model'; -import { visitParents } from 'unist-util-visit-parents'; +import { visitParents, SKIP } from 'unist-util-visit-parents'; import { toString } from 'hast-util-to-string'; -import { isFunction } from 'lodash'; +import { isFunction, isString, noop } from 'lodash'; /** * Merges two ProseMirror text nodes if both text nodes @@ -63,10 +63,12 @@ function maybeMerge(a, b) { function createSourceMapAttributes(hastNode, source) { const { position } = hastNode; - return { - sourceMapKey: `${position.start.offset}:${position.end.offset}`, - sourceMarkdown: source.substring(position.start.offset, position.end.offset), - }; + return position && position.end + ? { + sourceMapKey: `${position.start.offset}:${position.end.offset}`, + sourceMarkdown: source.substring(position.start.offset, position.end.offset), + } + : {}; } /** @@ -141,6 +143,20 @@ class HastToProseMirrorConverterState { return this.stack.length === 0; } + findInStack(fn) { + const last = this.stack.length - 1; + + for (let i = last; i >= 0; i -= 1) { + const item = this.stack[i]; + + if (fn(item) === true) { + return item; + } + } + + return null; + } + /** * Creates a text node and adds it to * the top node in the stack. @@ -249,33 +265,38 @@ class HastToProseMirrorConverterState { * @returns An object that contains ProseMirror node factories */ const createProseMirrorNodeFactories = (schema, proseMirrorFactorySpecs, source) => { - const handlers = { - root: (state, hastNode) => state.openNode(schema.topNodeType, hastNode, {}), - text: (state, hastNode) => { - const { factorySpec } = state.top; - - if (/^\s+$/.test(hastNode.value)) { - return; - } + const factories = { + root: { + selector: 'root', + wrapInParagraph: true, + handle: (state, hastNode) => state.openNode(schema.topNodeType, hastNode, {}, {}), + }, + text: { + selector: 'text', + handle: (state, hastNode) => { + const found = state.findInStack((node) => isFunction(node.factorySpec.processText)); + const { value: text } = hastNode; + + if (/^\s+$/.test(text)) { + return; + } - if (factorySpec.wrapTextInParagraph === true) { - state.openNode(schema.nodeType('paragraph')); - state.addText(schema, hastNode.value); - state.closeNode(); - } else { - state.addText(schema, hastNode.value); - } + state.addText(schema, found ? found.factorySpec.processText(text) : text); + }, }, }; - - for (const [hastNodeTagName, factorySpec] of Object.entries(proseMirrorFactorySpecs)) { - if (factorySpec.block) { - handlers[hastNodeTagName] = (state, hastNode, parent, ancestors) => { - const nodeType = schema.nodeType( - isFunction(factorySpec.block) - ? factorySpec.block(hastNode, parent, ancestors) - : factorySpec.block, - ); + for (const [proseMirrorName, factorySpec] of Object.entries(proseMirrorFactorySpecs)) { + const factory = { + selector: factorySpec.selector, + skipChildren: factorySpec.skipChildren, + processText: factorySpec.processText, + parent: factorySpec.parent, + wrapInParagraph: factorySpec.wrapInParagraph, + }; + + if (factorySpec.type === 'block') { + factory.handle = (state, hastNode, parent) => { + const nodeType = schema.nodeType(proseMirrorName); state.closeUntil(parent); state.openNode( @@ -297,9 +318,9 @@ const createProseMirrorNodeFactories = (schema, proseMirrorFactorySpecs, source) state.closeNode(); } }; - } else if (factorySpec.inline) { - const nodeType = schema.nodeType(factorySpec.inline); - handlers[hastNodeTagName] = (state, hastNode, parent) => { + } else if (factorySpec.type === 'inline') { + const nodeType = schema.nodeType(proseMirrorName); + factory.handle = (state, hastNode, parent) => { state.closeUntil(parent); state.openNode( nodeType, @@ -310,23 +331,115 @@ const createProseMirrorNodeFactories = (schema, proseMirrorFactorySpecs, source) // Inline nodes do not have children therefore they are immediately closed state.closeNode(); }; - } else if (factorySpec.mark) { - const markType = schema.marks[factorySpec.mark]; - handlers[hastNodeTagName] = (state, hastNode, parent) => { + } else if (factorySpec.type === 'mark') { + const markType = schema.marks[proseMirrorName]; + factory.handle = (state, hastNode, parent) => { state.openMark(markType, getAttrs(factorySpec, hastNode, parent, source)); if (factorySpec.inlineContent) { state.addText(schema, hastNode.value); } }; + } else if (factorySpec.type === 'ignore') { + factory.handle = noop; } else { - throw new RangeError(`Unrecognized node factory spec ${JSON.stringify(factorySpec)}`); + throw new RangeError( + `Unrecognized ProseMirror object type ${JSON.stringify(factorySpec.type)}`, + ); } + + factories[proseMirrorName] = factory; } - return handlers; + return factories; }; +const findFactory = (hastNode, ancestors, factories) => + Object.entries(factories).find(([, factorySpec]) => { + const { selector } = factorySpec; + + return isFunction(selector) + ? selector(hastNode, ancestors) + : [hastNode.tagName, hastNode.type].includes(selector); + })?.[1]; + +const findParent = (ancestors, parent) => { + if (isString(parent)) { + return ancestors.reverse().find((ancestor) => ancestor.tagName === parent); + } + + return ancestors[ancestors.length - 1]; +}; + +const calcTextNodePosition = (textNode) => { + const { position, value, type } = textNode; + + if (type !== 'text' || (!position.start && !position.end) || (position.start && position.end)) { + return textNode.position; + } + + const span = value.length - 1; + + if (position.start && !position.end) { + const { start } = position; + + return { + start, + end: { + row: start.row, + column: start.column + span, + offset: start.offset + span, + }, + }; + } + + const { end } = position; + + return { + start: { + row: end.row, + column: end.column - span, + offset: end.offset - span, + }, + end, + }; +}; + +const removeEmptyTextNodes = (nodes) => + nodes.filter( + (node) => node.type !== 'text' || (node.type === 'text' && !/^\s+$/.test(node.value)), + ); + +const wrapInlineElements = (nodes, wrappableTags) => + nodes.reduce((children, child) => { + const previous = children[children.length - 1]; + + if (child.type !== 'text' && !wrappableTags.includes(child.tagName)) { + return [...children, child]; + } + + const wrapperExists = previous?.properties.wrapper; + + if (wrapperExists) { + const wrapper = previous; + + wrapper.position.end = child.position.end; + wrapper.children.push(child); + + return children; + } + + const wrapper = { + type: 'element', + tagName: 'p', + position: calcTextNodePosition(child), + children: [child], + properties: { wrapper: true }, + }; + + return [...children, wrapper]; + }, []); + /** * Converts a Hast AST to a ProseMirror document based on a series * of specifications that describe how to map all the nodes of the former @@ -339,8 +452,9 @@ const createProseMirrorNodeFactories = (schema, proseMirrorFactorySpecs, source) * The object should have the following shape: * * { - * [hastNode.tagName]: { - * [block|node|mark]: [ProseMirror.Node.name], + * [ProseMirrorNodeOrMarkName]: { + * type: 'block' | 'inline' | 'mark', + * selector: String | hastNode -> Boolean, * ...configurationOptions * } * } @@ -348,57 +462,21 @@ const createProseMirrorNodeFactories = (schema, proseMirrorFactorySpecs, source) * Where each property in the object represents a HAST node with a given tag name, for example: * * { - * h1: {}, - * h2: {}, - * table: {}, - * strong: {}, - * // etc - * } - * - * You can specify the type of ProseMirror object adding one the following - * properties: - * - * 1. "block": A ProseMirror node that contains one or more children. - * 2. "inline": A ProseMirror node that doesn’t contain any children although - * it can have inline content like a code block or a reference. - * 3. "mark": A ProseMirror mark. - * - * The value of that property should be the name of the ProseMirror node or mark, i.e: - * - * { - * h1: { - * block: 'heading', + * horizontalRule: { + * type: 'block', + * selector: 'hr', * }, - * h2: { - * block: 'heading', + * heading: { + * type: 'block', + * selector: (hastNode) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(hastNode), * }, - * img: { - * node: 'image', + * bold: { + * type: 'mark' + * selector: (hastNode) => ['b', 'strong'].includes(hastNode), * }, - * strong: { - * mark: 'bold', - * } - * } + * // etc + * } * - * You can compute a ProseMirror’s node or mark name based on the HAST node - * by passing a function instead of a String. The converter invokes the function - * and provides a HAST node object: - * - * { - * list: { - * block: (hastNode) => { - * let type = 'bulletList'; - - * if (hastNode.children.some(isTaskItem)) { - * type = 'taskList'; - * } else if (hastNode.ordered) { - * type = 'orderedList'; - * } - - * return type; - * } - * } - * } * * Configuration options * ---------------------- @@ -406,6 +484,28 @@ const createProseMirrorNodeFactories = (schema, proseMirrorFactorySpecs, source) * You can customize the conversion process for every node or mark * setting the following properties in the specification object: * + * **type** + * + * The `type` property should have one of following three values: + * + * 1. "block": A ProseMirror node that contains one or more children. + * 2. "inline": A ProseMirror node that doesn’t contain any children although + * it can have inline content like an image or a mention object. + * 3. "mark": A ProseMirror mark. + * 4. "ignore": A hast node that should be ignored and won’t be mapped to a + * ProseMirror node. + * + * **selector** + * + * The `selector` property matches a HastNode to a ProseMirror node or + * Mark. If you assign a string value to this property, the converter + * will match the first hast node with a `tagName` or `type` property + * that equals the string value. + * + * If you assign a function, the converter will invoke the function with + * the hast node and its ancestors. The function should return `true` + * if the hastNode matches the custom criteria implemented in the function + * * **getAttrs** * * Computes a ProseMirror node or mark attributes. The converter will invoke @@ -415,12 +515,19 @@ const createProseMirrorNodeFactories = (schema, proseMirrorFactorySpecs, source) * 2. hasParents: All the hast node’s ancestors up to the root node * 3. source: Markdown source file’s content * - * **wrapTextInParagraph** + * **wrapInParagraph** * - * This property only applies to block nodes. If a block node contains text, - * it will wrap that text in a paragraph. This is useful for ProseMirror block + * This property only applies to block nodes. If a block node contains inline + * elements like text, images, links, etc, the converter will wrap those inline + * elements in a paragraph. This is useful for ProseMirror block * nodes that don’t allow text directly such as list items and tables. * + * **processText** + * + * This property only applies to block nodes. If a block node contains text, + * it allows applying a processing function to that text. This is useful when + * you can transform the text node, i.e trim(), substring(), etc. + * * **skipChildren** * * Skips a hast node’s children while traversing the tree. @@ -434,6 +541,13 @@ const createProseMirrorNodeFactories = (schema, proseMirrorFactorySpecs, source) * Use this property along skipChildren to provide custom processing of child nodes * for a block node. * + * **parent** + * + * Specifies what is the node’s parent. This is useful when the node’s parent is not + * its direct ancestor in Abstract Syntax Tree. For example, imagine that you want + * to make <tr> elements a direct children of tables and skip `<thead>` and `<tbody>` + * altogether. + * * @param {model.Document_Schema} params.schema A ProseMirror schema that specifies the shape * of the ProseMirror document. * @param {Object} params.factorySpec A factory specification as described above @@ -442,17 +556,20 @@ const createProseMirrorNodeFactories = (schema, proseMirrorFactorySpecs, source) * * @returns A ProseMirror document */ -export const createProseMirrorDocFromMdastTree = ({ schema, factorySpecs, tree, source }) => { +export const createProseMirrorDocFromMdastTree = ({ + schema, + factorySpecs, + wrappableTags, + tree, + source, +}) => { const proseMirrorNodeFactories = createProseMirrorNodeFactories(schema, factorySpecs, source); const state = new HastToProseMirrorConverterState(); visitParents(tree, (hastNode, ancestors) => { - const parent = ancestors[ancestors.length - 1]; - const skipChildren = factorySpecs[hastNode.tagName]?.skipChildren; - - const handler = proseMirrorNodeFactories[hastNode.tagName || hastNode.type]; + const factory = findFactory(hastNode, ancestors, proseMirrorNodeFactories); - if (!handler) { + if (!factory) { throw new Error( `Hast node of type "${ hastNode.tagName || hastNode.type @@ -460,9 +577,25 @@ export const createProseMirrorDocFromMdastTree = ({ schema, factorySpecs, tree, ); } - handler(state, hastNode, parent, ancestors); + const parent = findParent(ancestors, factory.parent); + + if (factory.wrapInParagraph) { + /** + * Modifying parameters is a bad practice. For performance reasons, + * the author of the unist-util-visit-parents function recommends + * modifying nodes in place to avoid traversing the Abstract Syntax + * Tree more than once + */ + // eslint-disable-next-line no-param-reassign + hastNode.children = wrapInlineElements( + removeEmptyTextNodes(hastNode.children), + wrappableTags, + ); + } + + factory.handle(state, hastNode, parent); - return skipChildren === true ? 'skip' : true; + return factory.skipChildren === true ? SKIP : true; }); let doc; diff --git a/app/assets/javascripts/content_editor/services/markdown_serializer.js b/app/assets/javascripts/content_editor/services/markdown_serializer.js index d665f24bba1..2d33a16f1a5 100644 --- a/app/assets/javascripts/content_editor/services/markdown_serializer.js +++ b/app/assets/javascripts/content_editor/services/markdown_serializer.js @@ -17,7 +17,6 @@ import Diagram from '../extensions/diagram'; import Emoji from '../extensions/emoji'; import Figure from '../extensions/figure'; import FigureCaption from '../extensions/figure_caption'; -import FootnotesSection from '../extensions/footnotes_section'; import FootnoteDefinition from '../extensions/footnote_definition'; import FootnoteReference from '../extensions/footnote_reference'; import Frontmatter from '../extensions/frontmatter'; @@ -60,11 +59,13 @@ import { renderPlayable, renderHTMLNode, renderContent, + renderBulletList, preserveUnchanged, bold, italic, link, code, + strike, } from './serialization_helpers'; const defaultSerializerConfig = { @@ -89,12 +90,7 @@ const defaultSerializerConfig = { close: (...args) => `${defaultMarkdownSerializer.marks.code.close(...args)}$`, escape: false, }, - [Strike.name]: { - open: '~~', - close: '~~', - mixable: true, - expelEnclosingWhitespace: true, - }, + [Strike.name]: strike, ...HTMLMarks.reduce( (acc, { name }) => ({ ...acc, @@ -124,7 +120,7 @@ const defaultSerializerConfig = { state.wrapBlock('> ', null, node, () => state.renderContent(node)); } }), - [BulletList.name]: preserveUnchanged(defaultMarkdownSerializer.nodes.bullet_list), + [BulletList.name]: preserveUnchanged(renderBulletList), [CodeBlockHighlight.name]: preserveUnchanged(renderCodeBlock), [Diagram.name]: renderCodeBlock, [Division.name]: (state, node) => { @@ -157,15 +153,14 @@ const defaultSerializerConfig = { state.write(`:${name}:`); }, - [FootnoteDefinition.name]: (state, node) => { + [FootnoteDefinition.name]: preserveUnchanged((state, node) => { + state.write(`[^${node.attrs.identifier}]: `); state.renderInline(node); - }, - [FootnoteReference.name]: (state, node) => { - state.write(`[^${node.attrs.footnoteNumber}]`); - }, - [FootnotesSection.name]: (state, node) => { - state.renderList(node, '', (index) => `[^${index + 1}]: `); - }, + state.ensureNewLine(); + }), + [FootnoteReference.name]: preserveUnchanged((state, node) => { + state.write(`[^${node.attrs.identifier}]`); + }), [Frontmatter.name]: (state, node) => { const { language } = node.attrs; const syntax = { @@ -196,18 +191,18 @@ const defaultSerializerConfig = { state.write('[[_TOC_]]'); state.closeBlock(node); }, - [Table.name]: renderTable, + [Table.name]: preserveUnchanged(renderTable), [TableCell.name]: renderTableCell, [TableHeader.name]: renderTableCell, [TableRow.name]: renderTableRow, - [TaskItem.name]: (state, node) => { + [TaskItem.name]: preserveUnchanged((state, node) => { state.write(`[${node.attrs.checked ? 'x' : ' '}] `); state.renderContent(node); - }, - [TaskList.name]: (state, node) => { + }), + [TaskList.name]: preserveUnchanged((state, node) => { if (node.attrs.numeric) renderOrderedList(state, node); - else defaultMarkdownSerializer.nodes.bullet_list(state, node); - }, + else renderBulletList(state, node); + }), [Text.name]: defaultMarkdownSerializer.nodes.text, [Video.name]: renderPlayable, [WordBreak.name]: (state) => state.write('<wbr>'), diff --git a/app/assets/javascripts/content_editor/services/remark_markdown_deserializer.js b/app/assets/javascripts/content_editor/services/remark_markdown_deserializer.js index 770de1df0d0..da10c684b0b 100644 --- a/app/assets/javascripts/content_editor/services/remark_markdown_deserializer.js +++ b/app/assets/javascripts/content_editor/services/remark_markdown_deserializer.js @@ -2,39 +2,51 @@ import { isString } from 'lodash'; import { render } from '~/lib/gfm'; import { createProseMirrorDocFromMdastTree } from './hast_to_prosemirror_converter'; +const wrappableTags = ['img', 'br', 'code', 'i', 'em', 'b', 'strong', 'a', 'strike', 's', 'del']; + +const isTaskItem = (hastNode) => { + const { className } = hastNode.properties; + + return ( + hastNode.tagName === 'li' && Array.isArray(className) && className.includes('task-list-item') + ); +}; + +const getTableCellAttrs = (hastNode) => ({ + colspan: parseInt(hastNode.properties.colSpan, 10) || 1, + rowspan: parseInt(hastNode.properties.rowSpan, 10) || 1, +}); + const factorySpecs = { - blockquote: { block: 'blockquote' }, - p: { block: 'paragraph' }, - li: { block: 'listItem', wrapTextInParagraph: true }, - ul: { block: 'bulletList' }, - ol: { block: 'orderedList' }, - h1: { - block: 'heading', - getAttrs: () => ({ level: 1 }), - }, - h2: { - block: 'heading', - getAttrs: () => ({ level: 2 }), - }, - h3: { - block: 'heading', - getAttrs: () => ({ level: 3 }), - }, - h4: { - block: 'heading', - getAttrs: () => ({ level: 4 }), - }, - h5: { - block: 'heading', - getAttrs: () => ({ level: 5 }), - }, - h6: { - block: 'heading', - getAttrs: () => ({ level: 6 }), - }, - pre: { - block: 'codeBlock', + blockquote: { type: 'block', selector: 'blockquote' }, + paragraph: { type: 'block', selector: 'p' }, + listItem: { + type: 'block', + wrapInParagraph: true, + selector: (hastNode) => hastNode.tagName === 'li' && !hastNode.properties.className, + processText: (text) => text.trimRight(), + }, + orderedList: { + type: 'block', + selector: (hastNode) => hastNode.tagName === 'ol' && !hastNode.properties.className, + }, + bulletList: { + type: 'block', + selector: (hastNode) => hastNode.tagName === 'ul' && !hastNode.properties.className, + }, + heading: { + type: 'block', + selector: (hastNode) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(hastNode.tagName), + getAttrs: (hastNode) => { + const level = parseInt(/(\d)$/.exec(hastNode.tagName)?.[1], 10) || 1; + + return { level }; + }, + }, + codeBlock: { + type: 'block', skipChildren: true, + selector: 'pre', getContent: ({ hastNodeText }) => hastNodeText.replace(/\n$/, ''), getAttrs: (hastNode) => { const languageClass = hastNode.children[0]?.properties.className?.[0]; @@ -43,28 +55,111 @@ const factorySpecs = { return { language }; }, }, - hr: { inline: 'horizontalRule' }, - img: { - inline: 'image', + horizontalRule: { + type: 'block', + selector: 'hr', + }, + taskList: { + type: 'block', + selector: (hastNode) => { + const { className } = hastNode.properties; + + return ( + ['ul', 'ol'].includes(hastNode.tagName) && + Array.isArray(className) && + className.includes('contains-task-list') + ); + }, + getAttrs: (hastNode) => ({ + numeric: hastNode.tagName === 'ol', + }), + }, + taskItem: { + type: 'block', + wrapInParagraph: true, + selector: isTaskItem, + getAttrs: (hastNode) => ({ + checked: hastNode.children[0].properties.checked, + }), + processText: (text) => text.trimLeft(), + }, + taskItemCheckbox: { + type: 'ignore', + selector: (hastNode, ancestors) => + hastNode.tagName === 'input' && isTaskItem(ancestors[ancestors.length - 1]), + }, + table: { + type: 'block', + selector: 'table', + }, + tableRow: { + type: 'block', + selector: 'tr', + parent: 'table', + }, + tableHeader: { + type: 'block', + selector: 'th', + getAttrs: getTableCellAttrs, + wrapInParagraph: true, + }, + tableCell: { + type: 'block', + selector: 'td', + getAttrs: getTableCellAttrs, + wrapInParagraph: true, + }, + ignoredTableNodes: { + type: 'ignore', + selector: (hastNode) => ['thead', 'tbody', 'tfoot'].includes(hastNode.tagName), + }, + footnoteDefinition: { + type: 'block', + selector: 'footnotedefinition', + getAttrs: (hastNode) => hastNode.properties, + }, + image: { + type: 'inline', + selector: 'img', getAttrs: (hastNode) => ({ src: hastNode.properties.src, title: hastNode.properties.title, alt: hastNode.properties.alt, }), }, - br: { inline: 'hardBreak' }, - code: { mark: 'code' }, - em: { mark: 'italic' }, - i: { mark: 'italic' }, - strong: { mark: 'bold' }, - b: { mark: 'bold' }, - a: { - mark: 'link', + hardBreak: { + type: 'inline', + selector: 'br', + }, + footnoteReference: { + type: 'inline', + selector: 'footnotereference', + getAttrs: (hastNode) => hastNode.properties, + }, + code: { + type: 'mark', + selector: 'code', + }, + italic: { + type: 'mark', + selector: (hastNode) => ['em', 'i'].includes(hastNode.tagName), + }, + bold: { + type: 'mark', + selector: (hastNode) => ['strong', 'b'].includes(hastNode.tagName), + }, + link: { + type: 'mark', + selector: 'a', getAttrs: (hastNode) => ({ href: hastNode.properties.href, title: hastNode.properties.title, }), }, + strike: { + type: 'mark', + selector: (hastNode) => ['strike', 's', 'del'].includes(hastNode.tagName), + }, }; export default () => { @@ -77,6 +172,7 @@ export default () => { schema, factorySpecs, tree, + wrappableTags, source: markdown, }), }); diff --git a/app/assets/javascripts/content_editor/services/serialization_helpers.js b/app/assets/javascripts/content_editor/services/serialization_helpers.js index 089d30edec7..88f5192af77 100644 --- a/app/assets/javascripts/content_editor/services/serialization_helpers.js +++ b/app/assets/javascripts/content_editor/services/serialization_helpers.js @@ -1,4 +1,4 @@ -import { uniq, isString } from 'lodash'; +import { uniq, isString, omit } from 'lodash'; const defaultAttrs = { td: { colspan: 1, rowspan: 1, colwidth: null }, @@ -12,22 +12,6 @@ const ignoreAttrs = { const tableMap = new WeakMap(); -// Source taken from -// prosemirror-markdown/src/to_markdown.js -export function isPlainURL(link, parent, index, side) { - if (link.attrs.title || !/^\w+:/.test(link.attrs.href)) return false; - const content = parent.child(index + (side < 0 ? -1 : 0)); - if ( - !content.isText || - content.text !== link.attrs.href || - content.marks[content.marks.length - 1] !== link - ) - return false; - if (index === (side < 0 ? 1 : parent.childCount - 1)) return true; - const next = parent.child(index + (side < 0 ? -2 : 1)); - return !link.isInSet(next.marks); -} - function containsOnlyText(node) { if (node.childCount === 1) { const child = node.child(0); @@ -219,7 +203,7 @@ function renderTableRowAsHTML(state, node) { node.forEach((cell, _, i) => { const tag = cell.type.name === 'tableHeader' ? 'th' : 'td'; - renderTagOpen(state, tag, cell.attrs); + renderTagOpen(state, tag, omit(cell.attrs, 'sourceMapKey', 'sourceMarkdown')); if (!containsParagraphWithOnlyText(cell)) { state.closeBlock(node); @@ -272,19 +256,6 @@ export function renderHTMLNode(tagName, forceRenderContentInline = false) { }; } -export function renderOrderedList(state, node) { - const { parens } = node.attrs; - const start = node.attrs.start || 1; - const maxW = String(start + node.childCount - 1).length; - const space = state.repeat(' ', maxW + 2); - const delimiter = parens ? ')' : '.'; - - state.renderList(node, space, (i) => { - const nStr = String(start + i); - return `${state.repeat(' ', maxW - nStr.length) + nStr}${delimiter} `; - }); -} - export function renderTableCell(state, node) { if (!isInBlockTable(node) || containsParagraphWithOnlyText(node)) { state.renderInline(node.child(0)); @@ -364,7 +335,72 @@ export function preserveUnchanged(render) { }; } -const generateBoldTags = (open = true) => { +/** + * We extracted this function from + * https://github.com/ProseMirror/prosemirror-markdown/blob/master/src/to_markdown.ts#L350. + * + * We need to overwrite this function because we don’t want to wrap the list item nodes + * with the bullet delimiter when the list item node hasn’t changed + */ +const renderList = (state, node, delim, firstDelim) => { + if (state.closed && state.closed.type === node.type) state.flushClose(3); + else if (state.inTightList) state.flushClose(1); + + const isTight = + typeof node.attrs.tight !== 'undefined' ? node.attrs.tight : state.options.tightLists; + const prevTight = state.inTightList; + + state.inTightList = isTight; + + node.forEach((child, _, i) => { + const same = state.options.changeTracker.get(child); + + if (i && isTight) { + state.flushClose(1); + } + + if (same) { + // Avoid wrapping list item when node hasn’t changed + state.render(child, node, i); + } else { + state.wrapBlock(delim, firstDelim(i), node, () => state.render(child, node, i)); + } + }); + + state.inTightList = prevTight; +}; + +export const renderBulletList = (state, node) => { + const { sourceMarkdown, bullet: bulletAttr } = node.attrs; + const bullet = /^(\*|\+|-)\s/.exec(sourceMarkdown)?.[1] || bulletAttr || '*'; + + renderList(state, node, ' ', () => `${bullet} `); +}; + +export function renderOrderedList(state, node) { + const { sourceMarkdown } = node.attrs; + let start; + let delimiter; + + if (sourceMarkdown) { + const match = /^(\d+)(\)|\.)/.exec(sourceMarkdown); + start = parseInt(match[1], 10) || 1; + [, , delimiter] = match; + } else { + start = node.attrs.start || 1; + delimiter = node.attrs.parens ? ')' : '.'; + } + + const maxW = String(start + node.childCount - 1).length; + const space = state.repeat(' ', maxW + 2); + + renderList(state, node, space, (i) => { + const nStr = String(start + i); + return `${state.repeat(' ', maxW - nStr.length) + nStr}${delimiter} `; + }); +} + +const generateBoldTags = (wrapTagName = openTag) => { return (_, mark) => { const type = /^(\*\*|__|<strong|<b).*/.exec(mark.attrs.sourceMarkdown)?.[1]; @@ -375,7 +411,7 @@ const generateBoldTags = (open = true) => { // eslint-disable-next-line @gitlab/require-i18n-strings case '<strong': case '<b': - return (open ? openTag : closeTag)(type.substring(1)); + return wrapTagName(type.substring(1)); default: return '**'; } @@ -384,12 +420,12 @@ const generateBoldTags = (open = true) => { export const bold = { open: generateBoldTags(), - close: generateBoldTags(false), + close: generateBoldTags(closeTag), mixable: true, expelEnclosingWhitespace: true, }; -const generateItalicTag = (open = true) => { +const generateItalicTag = (wrapTagName = openTag) => { return (_, mark) => { const type = /^(\*|_|<em|<i).*/.exec(mark.attrs.sourceMarkdown)?.[1]; @@ -400,7 +436,7 @@ const generateItalicTag = (open = true) => { // eslint-disable-next-line @gitlab/require-i18n-strings case '<em': case '<i': - return (open ? openTag : closeTag)(type.substring(1)); + return wrapTagName(type.substring(1)); default: return '_'; } @@ -409,17 +445,17 @@ const generateItalicTag = (open = true) => { export const italic = { open: generateItalicTag(), - close: generateItalicTag(false), + close: generateItalicTag(closeTag), mixable: true, expelEnclosingWhitespace: true, }; -const generateCodeTag = (open = true) => { +const generateCodeTag = (wrapTagName = openTag) => { return (_, mark) => { const type = /^(`|<code).*/.exec(mark.attrs.sourceMarkdown)?.[1]; if (type === '<code') { - return (open ? openTag : closeTag)(type.substring(1)); + return wrapTagName(type.substring(1)); } return '`'; @@ -428,7 +464,7 @@ const generateCodeTag = (open = true) => { export const code = { open: generateCodeTag(), - close: generateCodeTag(false), + close: generateCodeTag(closeTag), mixable: true, expelEnclosingWhitespace: true, }; @@ -446,10 +482,79 @@ const linkType = (sourceMarkdown) => { return LINK_HTML; }; +const removeUrlProtocol = (url) => url.replace(/^\w+:\/?\/?/, ''); + +const normalizeUrl = (url) => decodeURIComponent(removeUrlProtocol(url)); + +/** + * Validates that the provided URL is well-formed + * + * @param {String} url + * @returns Returns true when the browser’s URL constructor + * can successfully parse the URL string + */ +const isValidUrl = (url) => { + try { + return new URL(url) && true; + } catch { + return false; + } +}; + +const findChildWithMark = (mark, parent) => { + let child; + let offset; + let index; + + parent.forEach((_child, _offset, _index) => { + if (mark.isInSet(_child.marks)) { + child = _child; + offset = _offset; + index = _index; + } + }); + + return child ? { child, offset, index } : null; +}; + +/** + * This function detects whether a link should be serialized + * as an autolink. + * + * See https://github.github.com/gfm/#autolinks-extension- + * to understand the parsing rules of autolinks. + * */ +const isAutoLink = (linkMark, parent) => { + const { title, href } = linkMark.attrs; + + if (title || !/^\w+:/.test(href)) { + return false; + } + + const { child } = findChildWithMark(linkMark, parent); + + if ( + !child || + !child.isText || + !isValidUrl(href) || + normalizeUrl(child.text) !== normalizeUrl(href) + ) { + return false; + } + + return true; +}; + +/** + * Returns true if the user used brackets to the define + * the autolink in the original markdown source + */ +const isBracketAutoLink = (sourceMarkdown) => /^<.+?>$/.test(sourceMarkdown); + export const link = { - open(state, mark, parent, index) { - if (isPlainURL(mark, parent, index, 1)) { - return '<'; + open(state, mark, parent) { + if (isAutoLink(mark, parent)) { + return isBracketAutoLink(mark.attrs.sourceMarkdown) ? '<' : ''; } const { canonicalSrc, href, title, sourceMarkdown } = mark.attrs; @@ -466,9 +571,9 @@ export const link = { return openTag('a', attrs); }, - close(state, mark, parent, index) { - if (isPlainURL(mark, parent, index, -1)) { - return '>'; + close(state, mark, parent) { + if (isAutoLink(mark, parent)) { + return isBracketAutoLink(mark.attrs.sourceMarkdown) ? '>' : ''; } const { canonicalSrc, href, title, sourceMarkdown } = mark.attrs; @@ -480,3 +585,28 @@ export const link = { return `](${state.esc(canonicalSrc || href)}${title ? ` ${state.quote(title)}` : ''})`; }, }; + +const generateStrikeTag = (wrapTagName = openTag) => { + return (_, mark) => { + const type = /^(~~|<del|<strike|<s).*/.exec(mark.attrs.sourceMarkdown)?.[1]; + + switch (type) { + case '~~': + return type; + /* eslint-disable @gitlab/require-i18n-strings */ + case '<del': + case '<strike': + case '<s': + return wrapTagName(type.substring(1)); + default: + return '~~'; + } + }; +}; + +export const strike = { + open: generateStrikeTag(), + close: generateStrikeTag(closeTag), + mixable: true, + expelEnclosingWhitespace: true, +}; diff --git a/app/assets/javascripts/custom_metrics/components/custom_metrics_form.vue b/app/assets/javascripts/custom_metrics/components/custom_metrics_form.vue index 3158ae9b126..ccd22085470 100644 --- a/app/assets/javascripts/custom_metrics/components/custom_metrics_form.vue +++ b/app/assets/javascripts/custom_metrics/components/custom_metrics_form.vue @@ -22,7 +22,7 @@ export default { type: Boolean, required: true, }, - editProjectServicePath: { + editIntegrationPath: { type: String, required: true, }, @@ -79,7 +79,7 @@ export default { <gl-button variant="success" category="primary" :disabled="!formIsValid" @click="submit"> {{ saveButtonText }} </gl-button> - <gl-button class="float-right" :href="editProjectServicePath">{{ __('Cancel') }}</gl-button> + <gl-button class="float-right" :href="editIntegrationPath">{{ __('Cancel') }}</gl-button> <delete-custom-metric-modal v-if="metricPersisted" :delete-metric-url="customMetricsPath" diff --git a/app/assets/javascripts/custom_metrics/index.js b/app/assets/javascripts/custom_metrics/index.js index 4c279daf5f0..bf572217f5e 100644 --- a/app/assets/javascripts/custom_metrics/index.js +++ b/app/assets/javascripts/custom_metrics/index.js @@ -13,7 +13,7 @@ export default () => { const domEl = document.querySelector(this.$options.el); const { customMetricsPath, - editProjectServicePath, + editIntegrationPath, validateQueryPath, title, query, @@ -30,7 +30,7 @@ export default () => { props: { customMetricsPath, metricPersisted, - editProjectServicePath, + editIntegrationPath, validateQueryPath, formData: { title, diff --git a/app/assets/javascripts/cycle_analytics/components/path_navigation.vue b/app/assets/javascripts/cycle_analytics/components/path_navigation.vue index af7334ecf2e..72a7659aac0 100644 --- a/app/assets/javascripts/cycle_analytics/components/path_navigation.vue +++ b/app/assets/javascripts/cycle_analytics/components/path_navigation.vue @@ -1,10 +1,5 @@ <script> -import { - GlPath, - GlPopover, - GlDeprecatedSkeletonLoading as GlSkeletonLoading, - GlSafeHtmlDirective as SafeHtml, -} from '@gitlab/ui'; +import { GlPath, GlPopover, GlSkeletonLoader, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; import Tracking from '~/tracking'; import { OVERVIEW_STAGE_ID } from '../constants'; import FormattedStageCount from './formatted_stage_count.vue'; @@ -13,7 +8,7 @@ export default { name: 'PathNavigation', components: { GlPath, - GlSkeletonLoading, + GlSkeletonLoader, GlPopover, FormattedStageCount, }, @@ -57,7 +52,7 @@ export default { }; </script> <template> - <gl-skeleton-loading v-if="loading" :lines="2" /> + <gl-skeleton-loader v-if="loading" :width="235" :lines="2" /> <gl-path v-else :key="selectedStage.id" :items="stages" @selected="onSelectStage"> <template #default="{ pathItem, pathId }"> <gl-popover diff --git a/app/assets/javascripts/cycle_analytics/components/stage_table.vue b/app/assets/javascripts/cycle_analytics/components/stage_table.vue index e4236968efc..85a40b89b77 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_table.vue +++ b/app/assets/javascripts/cycle_analytics/components/stage_table.vue @@ -13,6 +13,7 @@ import { __ } from '~/locale'; import Tracking from '~/tracking'; import { NOT_ENOUGH_DATA_ERROR, + FIELD_KEY_TITLE, PAGINATION_SORT_FIELD_END_EVENT, PAGINATION_SORT_FIELD_DURATION, PAGINATION_SORT_DIRECTION_ASC, @@ -22,7 +23,8 @@ import TotalTime from './total_time.vue'; const DEFAULT_WORKFLOW_TITLE_PROPERTIES = { thClass: 'gl-w-half', - key: PAGINATION_SORT_FIELD_END_EVENT, + key: FIELD_KEY_TITLE, + sortable: false, }; const WORKFLOW_COLUMN_TITLES = { @@ -132,14 +134,16 @@ export default { return [ this.workflowTitle, { + key: PAGINATION_SORT_FIELD_END_EVENT, + label: __('Last event'), + sortable: this.sortable, + }, + { key: PAGINATION_SORT_FIELD_DURATION, - label: __('Time'), - thClass: 'gl-w-half', + label: __('Duration'), + sortable: this.sortable, }, - ].map((field) => ({ - ...field, - sortable: this.sortable, - })); + ]; }, prevPage() { return Math.max(this.pagination.page - 1, 0); @@ -182,7 +186,7 @@ export default { </script> <template> <div data-testid="vsa-stage-table"> - <gl-loading-icon v-if="isLoading" class="gl-mt-4" size="md" /> + <gl-loading-icon v-if="isLoading" class="gl-mt-4" size="lg" /> <gl-empty-state v-else-if="isEmptyStage" :title="emptyStateTitleText" @@ -201,7 +205,7 @@ export default { :empty-text="emptyStateMessage" @sort-changed="onSort" > - <template v-if="stageCount" #head(end_event)="data"> + <template v-if="stageCount" #head(title)="data"> <span>{{ data.label }}</span ><gl-badge class="gl-ml-2" size="sm" ><formatted-stage-count :stage-count="stageCount" @@ -210,7 +214,10 @@ export default { <template #head(duration)="data"> <span data-testid="vsa-stage-header-duration">{{ data.label }}</span> </template> - <template #cell(end_event)="{ item }"> + <template #head(end_event)="data"> + <span data-testid="vsa-stage-header-last-event">{{ data.label }}</span> + </template> + <template #cell(title)="{ item }"> <div data-testid="vsa-stage-event"> <div v-if="item.id" data-testid="vsa-stage-content"> <p class="gl-m-0"> @@ -282,6 +289,9 @@ export default { <template #cell(duration)="{ item }"> <total-time :time="item.totalTime" data-testid="vsa-stage-event-time" /> </template> + <template #cell(end_event)="{ item }"> + <span data-testid="vsa-stage-last-event">{{ item.endEventTimestamp }}</span> + </template> </gl-table> <gl-pagination v-if="pagination && !isLoading && !isEmptyStage" diff --git a/app/assets/javascripts/cycle_analytics/constants.js b/app/assets/javascripts/cycle_analytics/constants.js index f0b2bd9dc5b..2758d686fb1 100644 --- a/app/assets/javascripts/cycle_analytics/constants.js +++ b/app/assets/javascripts/cycle_analytics/constants.js @@ -22,6 +22,7 @@ export const PAGINATION_SORT_FIELD_END_EVENT = 'end_event'; export const PAGINATION_SORT_FIELD_DURATION = 'duration'; export const PAGINATION_SORT_DIRECTION_DESC = 'desc'; export const PAGINATION_SORT_DIRECTION_ASC = 'asc'; +export const FIELD_KEY_TITLE = 'title'; export const I18N_VSA_ERROR_STAGES = __( 'There was an error fetching value stream analytics stages.', diff --git a/app/assets/javascripts/deprecated_jquery_dropdown/render.js b/app/assets/javascripts/deprecated_jquery_dropdown/render.js index 37287b9d981..f10c2d82b61 100644 --- a/app/assets/javascripts/deprecated_jquery_dropdown/render.js +++ b/app/assets/javascripts/deprecated_jquery_dropdown/render.js @@ -107,10 +107,10 @@ function createLink(data, selected, options, index) { } if (options.trackSuggestionClickedLabel) { - link.setAttribute('data-track-action', 'click_text'); - link.setAttribute('data-track-label', options.trackSuggestionClickedLabel); - link.setAttribute('data-track-value', index); - link.setAttribute('data-track-property', slugify(data.category || 'no-category')); + link.dataset.trackAction = 'click_text'; + link.dataset.trackLabel = options.trackSuggestionClickedLabel; + link.dataset.trackValue = index; + link.dataset.trackProperty = slugify(data.category || 'no-category'); } link.classList.toggle('is-active', selected); diff --git a/app/assets/javascripts/design_management/components/delete_button.vue b/app/assets/javascripts/design_management/components/delete_button.vue index ae2ce7c3e5e..dec1038d2e3 100644 --- a/app/assets/javascripts/design_management/components/delete_button.vue +++ b/app/assets/javascripts/design_management/components/delete_button.vue @@ -26,7 +26,7 @@ export default { buttonVariant: { type: String, required: false, - default: 'info', + default: 'default', }, buttonCategory: { type: String, diff --git a/app/assets/javascripts/design_management/components/design_presentation.vue b/app/assets/javascripts/design_management/components/design_presentation.vue index 5116bacefa5..6bdd8568625 100644 --- a/app/assets/javascripts/design_management/components/design_presentation.vue +++ b/app/assets/javascripts/design_management/components/design_presentation.vue @@ -1,4 +1,5 @@ <script> +import { GlLoadingIcon } from '@gitlab/ui'; import { throttle } from 'lodash'; import { isLoggedIn } from '~/lib/utils/common_utils'; import DesignOverlay from './design_overlay.vue'; @@ -10,6 +11,7 @@ export default { components: { DesignImage, DesignOverlay, + GlLoadingIcon, }, props: { image: { @@ -40,6 +42,10 @@ export default { type: Boolean, required: true, }, + isLoading: { + type: Boolean, + required: true, + }, }, data() { return { @@ -299,7 +305,12 @@ export default { @touchend="onPresentationMouseup" @touchcancel="onPresentationMouseup" > - <div class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative"> + <gl-loading-icon + v-if="isLoading" + size="xl" + class="gl-display-flex gl-h-full gl-align-items-center" + /> + <div v-else class="gl-h-full gl-w-full gl-display-flex gl-align-items-center gl-relative"> <design-image v-if="image" :image="image" diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue index 81d0b6d0df4..8a6dd17a25b 100644 --- a/app/assets/javascripts/design_management/components/design_sidebar.vue +++ b/app/assets/javascripts/design_management/components/design_sidebar.vue @@ -1,5 +1,5 @@ <script> -import { GlCollapse, GlButton, GlPopover } from '@gitlab/ui'; +import { GlCollapse, GlButton, GlPopover, GlSkeletonLoader } from '@gitlab/ui'; import { getCookie, setCookie, parseBoolean, isLoggedIn } from '~/lib/utils/common_utils'; import { s__ } from '~/locale'; @@ -20,6 +20,7 @@ export default { GlCollapse, GlButton, GlPopover, + GlSkeletonLoader, DesignTodoButton, }, mixins: [glFeatureFlagsMixin()], @@ -50,6 +51,10 @@ export default { type: String, required: true, }, + isLoading: { + type: Boolean, + required: true, + }, }, data() { return { @@ -65,11 +70,11 @@ export default { issue() { return { ...this.design.issue, - webPath: this.design.issue.webPath.substr(1), + webPath: this.design.issue?.webPath.substr(1), }; }, discussionParticipants() { - return extractParticipants(this.issue.participants.nodes); + return extractParticipants(this.issue.participants?.nodes || []); }, resolvedDiscussions() { return this.discussions.filter((discussion) => discussion.resolved); @@ -142,91 +147,94 @@ export default { :show-participant-label="false" class="gl-mb-4" /> - <h2 - v-if="isLoggedIn && unresolvedDiscussions.length === 0" - class="new-discussion-disclaimer gl-font-base gl-m-0 gl-mb-4" - data-testid="new-discussion-disclaimer" - > - {{ s__("DesignManagement|Click the image where you'd like to start a new discussion") }} - </h2> - <design-note-signed-out - v-if="!isLoggedIn" - class="gl-mb-4" - :register-path="registerPath" - :sign-in-path="signInPath" - :is-add-discussion="true" - /> - <design-discussion - v-for="discussion in unresolvedDiscussions" - :key="discussion.id" - :discussion="discussion" - :design-id="$route.params.id" - :noteable-id="design.id" - :markdown-preview-path="markdownPreviewPath" - :register-path="registerPath" - :sign-in-path="signInPath" - :resolved-discussions-expanded="resolvedDiscussionsExpanded" - :discussion-with-open-form="discussionWithOpenForm" - data-testid="unresolved-discussion" - @create-note-error="$emit('onDesignDiscussionError', $event)" - @update-note-error="$emit('updateNoteError', $event)" - @resolve-discussion-error="$emit('resolveDiscussionError', $event)" - @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)" - @open-form="updateDiscussionWithOpenForm" - /> - <template v-if="resolvedDiscussions.length > 0"> - <gl-button - id="resolved-comments" - ref="resolvedComments" - data-testid="resolved-comments" - :icon="resolvedCommentsToggleIcon" - variant="link" - class="link-inherit-color gl-text-body gl-text-decoration-none gl-font-weight-bold gl-mb-4" - @click="$emit('toggleResolvedComments')" - >{{ $options.resolveCommentsToggleText }} ({{ resolvedDiscussions.length }}) - </gl-button> - <gl-popover - v-if="!isResolvedCommentsPopoverHidden" - :show="!isResolvedCommentsPopoverHidden" - target="resolved-comments" - container="popovercontainer" - placement="top" - :title="s__('DesignManagement|Resolved Comments')" + <gl-skeleton-loader v-if="isLoading" /> + <template v-else> + <h2 + v-if="isLoggedIn && unresolvedDiscussions.length === 0" + class="new-discussion-disclaimer gl-font-base gl-m-0 gl-mb-4" + data-testid="new-discussion-disclaimer" > - <p> - {{ - s__( - 'DesignManagement|Comments you resolve can be viewed and unresolved by going to the "Resolved Comments" section below', - ) - }} - </p> - <a - href="https://docs.gitlab.com/ee/user/project/issues/design_management.html#resolve-design-threads" - rel="noopener noreferrer" - target="_blank" - >{{ s__('DesignManagement|Learn more about resolving comments') }}</a + {{ s__("DesignManagement|Click the image where you'd like to start a new discussion") }} + </h2> + <design-note-signed-out + v-if="!isLoggedIn" + class="gl-mb-4" + :register-path="registerPath" + :sign-in-path="signInPath" + :is-add-discussion="true" + /> + <design-discussion + v-for="discussion in unresolvedDiscussions" + :key="discussion.id" + :discussion="discussion" + :design-id="$route.params.id" + :noteable-id="design.id" + :markdown-preview-path="markdownPreviewPath" + :register-path="registerPath" + :sign-in-path="signInPath" + :resolved-discussions-expanded="resolvedDiscussionsExpanded" + :discussion-with-open-form="discussionWithOpenForm" + data-testid="unresolved-discussion" + @create-note-error="$emit('onDesignDiscussionError', $event)" + @update-note-error="$emit('updateNoteError', $event)" + @resolve-discussion-error="$emit('resolveDiscussionError', $event)" + @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)" + @open-form="updateDiscussionWithOpenForm" + /> + <template v-if="resolvedDiscussions.length > 0"> + <gl-button + id="resolved-comments" + ref="resolvedComments" + data-testid="resolved-comments" + :icon="resolvedCommentsToggleIcon" + variant="link" + class="link-inherit-color gl-text-body gl-text-decoration-none gl-font-weight-bold gl-mb-4" + @click="$emit('toggleResolvedComments')" + >{{ $options.resolveCommentsToggleText }} ({{ resolvedDiscussions.length }}) + </gl-button> + <gl-popover + v-if="!isResolvedCommentsPopoverHidden" + :show="!isResolvedCommentsPopoverHidden" + target="resolved-comments" + container="popovercontainer" + placement="top" + :title="s__('DesignManagement|Resolved Comments')" > - </gl-popover> - <gl-collapse :visible="resolvedDiscussionsExpanded" class="gl-mt-3"> - <design-discussion - v-for="discussion in resolvedDiscussions" - :key="discussion.id" - :discussion="discussion" - :design-id="$route.params.id" - :noteable-id="design.id" - :markdown-preview-path="markdownPreviewPath" - :register-path="registerPath" - :sign-in-path="signInPath" - :resolved-discussions-expanded="resolvedDiscussionsExpanded" - :discussion-with-open-form="discussionWithOpenForm" - data-testid="resolved-discussion" - @error="$emit('onDesignDiscussionError', $event)" - @updateNoteError="$emit('updateNoteError', $event)" - @open-form="updateDiscussionWithOpenForm" - @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)" - /> - </gl-collapse> + <p> + {{ + s__( + 'DesignManagement|Comments you resolve can be viewed and unresolved by going to the "Resolved Comments" section below', + ) + }} + </p> + <a + href="https://docs.gitlab.com/ee/user/project/issues/design_management.html#resolve-design-threads" + rel="noopener noreferrer" + target="_blank" + >{{ s__('DesignManagement|Learn more about resolving comments') }}</a + > + </gl-popover> + <gl-collapse :visible="resolvedDiscussionsExpanded" class="gl-mt-3"> + <design-discussion + v-for="discussion in resolvedDiscussions" + :key="discussion.id" + :discussion="discussion" + :design-id="$route.params.id" + :noteable-id="design.id" + :markdown-preview-path="markdownPreviewPath" + :register-path="registerPath" + :sign-in-path="signInPath" + :resolved-discussions-expanded="resolvedDiscussionsExpanded" + :discussion-with-open-form="discussionWithOpenForm" + data-testid="resolved-discussion" + @error="$emit('onDesignDiscussionError', $event)" + @updateNoteError="$emit('updateNoteError', $event)" + @open-form="updateDiscussionWithOpenForm" + @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)" + /> + </gl-collapse> + </template> + <slot name="reply-form"></slot> </template> - <slot name="reply-form"></slot> </div> </template> diff --git a/app/assets/javascripts/design_management/components/list/item.vue b/app/assets/javascripts/design_management/components/list/item.vue index b6163491abc..3092b8554ac 100644 --- a/app/assets/javascripts/design_management/components/list/item.vue +++ b/app/assets/javascripts/design_management/components/list/item.vue @@ -145,7 +145,7 @@ export default { </span> </div> <gl-intersection-observer @appear="onAppear"> - <gl-loading-icon v-if="showLoadingSpinner" size="md" /> + <gl-loading-icon v-if="showLoadingSpinner" size="lg" /> <gl-icon v-else-if="showImageErrorIcon" name="media-broken" diff --git a/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue b/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue index 3ebcde817f9..0bbbc795fff 100644 --- a/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue +++ b/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue @@ -87,7 +87,7 @@ export default { :disabled="!previousDesign" :title="$options.i18n.previousButton" :aria-label="$options.i18n.previousButton" - icon="angle-left" + icon="chevron-lg-left" class="js-previous-design" @click="navigateToDesign(previousDesign)" /> @@ -96,7 +96,7 @@ export default { :disabled="!nextDesign" :title="$options.i18n.nextButton" :aria-label="$options.i18n.nextButton" - icon="angle-right" + icon="chevron-lg-right" class="js-next-design" @click="navigateToDesign(nextDesign)" /> diff --git a/app/assets/javascripts/design_management/components/toolbar/index.vue b/app/assets/javascripts/design_management/components/toolbar/index.vue index b84fe45b77e..6d571365306 100644 --- a/app/assets/javascripts/design_management/components/toolbar/index.vue +++ b/app/assets/javascripts/design_management/components/toolbar/index.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlButton, GlIcon, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui'; import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql'; import { __, s__, sprintf } from '~/locale'; import timeagoMixin from '~/vue_shared/mixins/timeago'; @@ -14,6 +14,7 @@ export default { components: { GlButton, GlIcon, + GlSkeletonLoader, DesignNavigation, DeleteButton, }, @@ -61,6 +62,10 @@ export default { type: String, required: true, }, + isLoading: { + type: Boolean, + required: true, + }, }, data() { return { @@ -113,7 +118,8 @@ export default { <gl-icon name="close" /> </router-link> <div class="gl-overflow-hidden gl-display-flex gl-align-items-center"> - <h2 class="gl-m-0 str-truncated-100 gl-font-base">{{ filename }}</h2> + <gl-skeleton-loader v-if="isLoading" :lines="1" /> + <h2 v-else class="gl-m-0 str-truncated-100 gl-font-base">{{ filename }}</h2> <small v-if="updatedAt" class="gl-text-gray-500">{{ updatedText }}</small> </div> </div> @@ -130,7 +136,7 @@ export default { v-gl-tooltip.bottom class="gl-ml-3" :is-deleting="isDeleting" - button-variant="warning" + button-variant="default" button-icon="archive" button-category="secondary" :title="s__('DesignManagement|Archive design')" diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue index 2b395921ee1..1825ce7f092 100644 --- a/app/assets/javascripts/design_management/pages/design/index.vue +++ b/app/assets/javascripts/design_management/pages/design/index.vue @@ -1,5 +1,5 @@ <script> -import { GlLoadingIcon, GlAlert } from '@gitlab/ui'; +import { GlAlert } from '@gitlab/ui'; import { isNull } from 'lodash'; import Mousetrap from 'mousetrap'; import { ApolloMutation } from 'vue-apollo'; @@ -56,7 +56,6 @@ export default { DesignScaler, DesignDestroyer, Toolbar, - GlLoadingIcon, GlAlert, DesignSidebar, }, @@ -118,10 +117,8 @@ export default { }, }, computed: { - isFirstLoading() { - // We only want to show spinner on initial design load (when opened from a deep link to design) - // If we already have cached a design, loading shouldn't be indicated to user - return this.$apollo.queries.design.loading && !this.design.filename; + isLoading() { + return this.$apollo.queries.design.loading; }, discussions() { if (!this.design.discussions) { @@ -343,88 +340,88 @@ export default { <div class="design-detail js-design-detail fixed-top gl-w-full gl-bottom-0 gl-display-flex gl-justify-content-center gl-flex-direction-column gl-lg-flex-direction-row" > - <gl-loading-icon v-if="isFirstLoading" size="xl" class="gl-align-self-center" /> - <template v-else> - <div - class="gl-display-flex gl-overflow-hidden gl-flex-grow-1 gl-flex-direction-column gl-relative" + <div + class="gl-display-flex gl-overflow-hidden gl-flex-grow-1 gl-flex-direction-column gl-relative" + > + <design-destroyer + :filenames="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [ + design.filename, + ] /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" + :project-path="projectPath" + :iid="issueIid" + @done="$router.push({ name: $options.DESIGNS_ROUTE_NAME })" + @error="onDesignDeleteError" > - <design-destroyer - :filenames="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [ - design.filename, - ] /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" - :project-path="projectPath" - :iid="issueIid" - @done="$router.push({ name: $options.DESIGNS_ROUTE_NAME })" - @error="onDesignDeleteError" - > - <template #default="{ mutate, loading }"> - <toolbar - :id="id" - :is-deleting="loading" - :is-latest-version="isLatestVersion" - v-bind="design" - @delete="mutate" - /> - </template> - </design-destroyer> + <template #default="{ mutate, loading }"> + <toolbar + :id="id" + :is-deleting="loading" + :is-latest-version="isLatestVersion" + :is-loading="isLoading" + v-bind="design" + @delete="mutate" + /> + </template> + </design-destroyer> - <div v-if="errorMessage" class="gl-p-5"> - <gl-alert variant="danger" @dismiss="errorMessage = null"> - {{ errorMessage }} - </gl-alert> - </div> - <design-presentation - :image="design.image" - :image-name="design.filename" - :discussions="discussions" - :is-annotating="isAnnotating" - :scale="scale" - :resolved-discussions-expanded="resolvedDiscussionsExpanded" - @openCommentForm="openCommentForm" - @closeCommentForm="closeCommentForm" - @moveNote="onMoveNote" - @setMaxScale="setMaxScale" - /> - - <div - class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center" - > - <design-scaler :max-scale="maxScale" @scale="scale = $event" /> - </div> + <div v-if="errorMessage" class="gl-p-5"> + <gl-alert variant="danger" @dismiss="errorMessage = null"> + {{ errorMessage }} + </gl-alert> </div> - <design-sidebar - :design="design" + <design-presentation + :image="design.image" + :image-name="design.filename" + :discussions="discussions" + :is-annotating="isAnnotating" + :scale="scale" :resolved-discussions-expanded="resolvedDiscussionsExpanded" - :markdown-preview-path="markdownPreviewPath" - @onDesignDiscussionError="onDesignDiscussionError" - @onCreateImageDiffNoteError="onCreateImageDiffNoteError" - @updateNoteError="onUpdateNoteError" - @resolveDiscussionError="onResolveDiscussionError" - @toggleResolvedComments="toggleResolvedComments" - @todoError="onTodoError" + :is-loading="isLoading" + @openCommentForm="openCommentForm" + @closeCommentForm="closeCommentForm" + @moveNote="onMoveNote" + @setMaxScale="setMaxScale" + /> + + <div + class="design-scaler-wrapper gl-absolute gl-mb-6 gl-display-flex gl-justify-content-center gl-align-items-center" > - <template #reply-form> - <apollo-mutation - v-if="isAnnotating" - #default="{ mutate, loading }" - :mutation="$options.createImageDiffNoteMutation" - :variables="{ - input: mutationPayload, - }" - :update="addImageDiffNoteToStore" - @done="closeCommentForm" - @error="onCreateImageDiffNoteError" - > - <design-reply-form - ref="newDiscussionForm" - v-model="comment" - :is-saving="loading" - :markdown-preview-path="markdownPreviewPath" - @submit-form="mutate" - @cancel-form="closeCommentForm" - /> </apollo-mutation - ></template> - </design-sidebar> - </template> + <design-scaler :max-scale="maxScale" @scale="scale = $event" /> + </div> + </div> + <design-sidebar + :design="design" + :resolved-discussions-expanded="resolvedDiscussionsExpanded" + :markdown-preview-path="markdownPreviewPath" + :is-loading="isLoading" + @onDesignDiscussionError="onDesignDiscussionError" + @onCreateImageDiffNoteError="onCreateImageDiffNoteError" + @updateNoteError="onUpdateNoteError" + @resolveDiscussionError="onResolveDiscussionError" + @toggleResolvedComments="toggleResolvedComments" + @todoError="onTodoError" + > + <template #reply-form> + <apollo-mutation + v-if="isAnnotating" + #default="{ mutate, loading }" + :mutation="$options.createImageDiffNoteMutation" + :variables="{ + input: mutationPayload, + }" + :update="addImageDiffNoteToStore" + @done="closeCommentForm" + @error="onCreateImageDiffNoteError" + > + <design-reply-form + ref="newDiscussionForm" + v-model="comment" + :is-saving="loading" + :markdown-preview-path="markdownPreviewPath" + @submit-form="mutate" + @cancel-form="closeCommentForm" + /> </apollo-mutation + ></template> + </design-sidebar> </div> </template> diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue index 42d5d8fb359..f81d4f6662f 100644 --- a/app/assets/javascripts/design_management/pages/index.vue +++ b/app/assets/javascripts/design_management/pages/index.vue @@ -1,5 +1,6 @@ <script> import { GlLoadingIcon, GlButton, GlAlert, GlLink, GlSprintf } from '@gitlab/ui'; +import { GlBreakpointInstance } from '@gitlab/ui/dist/utils'; import VueDraggable from 'vuedraggable'; import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql'; import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql'; @@ -97,6 +98,9 @@ export default { isSaving() { return this.filesToBeSaved.length > 0; }, + isMobile() { + return GlBreakpointInstance.getBreakpointSize() === 'xs'; + }, canCreateDesign() { return this.permissions.createDesign; }, @@ -354,7 +358,7 @@ export default { > <header v-if="showToolbar" - class="row-content-block gl-border-t-0 gl-py-3 gl-display-flex" + class="gl-display-flex gl-my-0 gl-text-gray-900" data-testid="design-toolbar-wrapper" > <div @@ -370,7 +374,7 @@ export default { > <gl-button v-if="isLatestVersion" - variant="link" + category="tertiary" size="small" class="gl-mr-3" data-testid="select-all-designs-button" @@ -407,7 +411,7 @@ export default { </div> </header> <div class="gl-mt-6"> - <gl-loading-icon v-if="isLoading" size="md" /> + <gl-loading-icon v-if="isLoading" size="lg" /> <gl-alert v-else-if="error" variant="danger" :dismissible="false"> {{ __('An error occurred while loading designs. Please try again.') }} </gl-alert> @@ -429,7 +433,7 @@ export default { <vue-draggable v-else :value="designs" - :disabled="!isLatestVersion || isReorderingInProgress" + :disabled="!isLatestVersion || isReorderingInProgress || isMobile" v-bind="$options.dragOptions" tag="ol" draggable=".js-design-tile" diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js index a12829f8420..9f3fb715150 100644 --- a/app/assets/javascripts/diff.js +++ b/app/assets/javascripts/diff.js @@ -26,7 +26,8 @@ export default class Diff { FilesCommentButton.init($diffFile); const firstFile = $('.files').first().get(0); - const canCreateNote = firstFile && firstFile.hasAttribute('data-can-create-note'); + const canCreateNote = + firstFile && Object.prototype.hasOwnProperty.call(firstFile.dataset, 'canCreateNote'); $diffFile.each((index, file) => initImageDiffHelper.initImageDiff(file, canCreateNote)); if (!isBound) { diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index c3436159cea..530f3a3a7f7 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -384,14 +384,26 @@ export default { this.unwatchDiscussions = this.$watch( () => `${this.diffFiles.length}:${this.$store.state.notes.discussions.length}`, - () => this.setDiscussions(), + () => { + this.setDiscussions(); + + if ( + this.$store.state.notes.doneFetchingBatchDiscussions && + window.gon?.features?.paginatedMrDiscussions + ) { + this.unwatchDiscussions(); + } + }, ); this.unwatchRetrievingBatches = this.$watch( () => `${this.retrievingBatches}:${this.$store.state.notes.discussions.length}`, () => { if (!this.retrievingBatches && this.$store.state.notes.discussions.length) { - this.unwatchDiscussions(); + if (!window.gon?.features?.paginatedMrDiscussions) { + this.unwatchDiscussions(); + } + this.unwatchRetrievingBatches(); } }, diff --git a/app/assets/javascripts/diffs/components/collapsed_files_warning.vue b/app/assets/javascripts/diffs/components/collapsed_files_warning.vue index b7eea32e699..ebb6ec1e7c8 100644 --- a/app/assets/javascripts/diffs/components/collapsed_files_warning.vue +++ b/app/assets/javascripts/diffs/components/collapsed_files_warning.vue @@ -55,7 +55,7 @@ export default { {{ __('For a faster browsing experience, some files are collapsed by default.') }} </p> <template #actions> - <gl-button category="secondary" variant="warning" class="gl-alert-action" @click="expand"> + <gl-button class="gl-alert-action" @click="expand"> {{ __('Expand all files') }} </gl-button> </template> diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue index 42f4ea8eb58..54b648e8d03 100644 --- a/app/assets/javascripts/diffs/components/commit_item.vue +++ b/app/assets/javascripts/diffs/components/commit_item.vue @@ -7,8 +7,6 @@ import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import initUserPopovers from '../../user_popovers'; - /** * CommitItem * @@ -82,11 +80,6 @@ export default { return this.commit.description_html.replace(/^
/, ''); }, }, - created() { - this.$nextTick(() => { - initUserPopovers(this.$el.querySelectorAll('.js-user-link')); - }); - }, safeHtmlConfig: { ADD_TAGS: ['gl-emoji'], }, @@ -128,7 +121,7 @@ export default { <div class="d-flex float-left align-items-center align-self-start"> <input v-if="isSelectable" - class="mr-2" + class="gl-mr-3" type="checkbox" :checked="checked" @change="$emit('handleCheckboxChange', $event.target.checked)" diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue index 1eba12a3ae9..bfe35e9346d 100644 --- a/app/assets/javascripts/diffs/components/diff_content.vue +++ b/app/assets/javascripts/diffs/components/diff_content.vue @@ -120,7 +120,7 @@ export default { :help-page-path="helpPagePath" :inline="isInlineView" /> - <gl-loading-icon v-if="diffFile.renderingLines" size="md" class="mt-3" /> + <gl-loading-icon v-if="diffFile.renderingLines" size="lg" class="mt-3" /> </template> <not-diffable-viewer v-else-if="notDiffable" /> <no-preview-viewer v-else-if="noPreview" /> diff --git a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue index 4e7dc578193..fc5766a23ef 100644 --- a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue +++ b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue @@ -3,7 +3,6 @@ import { GlTooltipDirective, GlSafeHtmlDirective, GlIcon, GlLoadingIcon } from ' import { mapActions } from 'vuex'; import createFlash from '~/flash'; import { s__, sprintf } from '~/locale'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { UNFOLD_COUNT, INLINE_DIFF_LINES_KEY } from '../constants'; import * as utils from '../store/utils'; @@ -24,7 +23,6 @@ export default { GlTooltip: GlTooltipDirective, SafeHtml: GlSafeHtmlDirective, }, - mixins: [glFeatureFlagsMixin()], props: { file: { type: Object, @@ -93,25 +91,16 @@ export default { nextLineNumbers = {}, ) { this.loadMoreLines({ endpoint, params, lineNumbers, fileHash, isExpandDown, nextLineNumbers }) - .then(() => { - this.isRequesting = false; - }) .catch(() => { createFlash({ message: s__('Diffs|Something went wrong while fetching diff lines.'), }); - this.isRequesting = false; }) .finally(() => { this.loading = { up: false, down: false, all: false }; }); }, handleExpandLines(type = EXPAND_ALL) { - if (this.isRequesting) { - return; - } - - this.isRequesting = true; const endpoint = this.file.context_lines_path; const oldLineNumber = this.line.meta_data.old_pos || 0; const newLineNumber = this.line.meta_data.new_pos || 0; @@ -228,10 +217,7 @@ export default { </script> <template> - <div - v-if="glFeatures.updatedDiffExpansionButtons" - class="diff-grid-row diff-grid-row-full diff-tr line_holder match expansion" - > + <div class="diff-grid-row diff-grid-row-full diff-tr line_holder match expansion"> <div :class="{ parallel: !inline }" class="diff-grid-left diff-grid-2-col left-side"> <div class="diff-td diff-line-num gl-text-center! gl-p-0! gl-w-full! gl-display-flex gl-flex-direction-column" @@ -240,6 +226,7 @@ export default { v-if="showExpandDown" v-gl-tooltip.left :title="s__('Diffs|Next 20 lines')" + :disabled="loading.down" type="button" class="js-unfold-down gl-rounded-0 gl-border-0 diff-line-expand-button" @click="handleExpandLines($options.EXPAND_DOWN)" @@ -251,6 +238,7 @@ export default { v-if="lineCountBetween !== -1 && lineCountBetween < 20" v-gl-tooltip.left :title="s__('Diffs|Expand all lines')" + :disabled="loading.all" type="button" class="js-unfold-all gl-rounded-0 gl-border-0 diff-line-expand-button" @click="handleExpandLines()" @@ -262,6 +250,7 @@ export default { v-if="showExpandUp" v-gl-tooltip.left :title="s__('Diffs|Previous 20 lines')" + :disabled="loading.up" type="button" class="js-unfold gl-rounded-0 gl-border-0 diff-line-expand-button" @click="handleExpandLines($options.EXPAND_UP)" @@ -276,32 +265,4 @@ export default { ></div> </div> </div> - <div v-else class="content js-line-expansion-content"> - <button - type="button" - :disabled="!canExpandDown" - class="js-unfold-down gl-mx-2 gl-py-4 gl-cursor-pointer" - @click="handleExpandLines($options.EXPAND_DOWN)" - > - <gl-icon :size="12" name="expand-down" /> - <span>{{ $options.i18n.showMore }}</span> - </button> - <button - type="button" - class="js-unfold-all gl-mx-2 gl-py-4 gl-cursor-pointer" - @click="handleExpandLines()" - > - <gl-icon :size="12" name="expand" /> - <span>{{ $options.i18n.showAll }}</span> - </button> - <button - type="button" - :disabled="!canExpandUp" - class="js-unfold gl-mx-2 gl-py-4 gl-cursor-pointer" - @click="handleExpandLines($options.EXPAND_UP)" - > - <gl-icon :size="12" name="expand-up" /> - <span>{{ $options.i18n.showMore }}</span> - </button> - </div> </template> diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue index 0b82be7140c..aec608007d5 100644 --- a/app/assets/javascripts/diffs/components/diff_file.vue +++ b/app/assets/javascripts/diffs/components/diff_file.vue @@ -456,12 +456,7 @@ export default { <p class="gl-mb-5"> {{ $options.i18n.autoCollapsed }} </p> - <gl-button - data-testid="expand-button" - category="secondary" - variant="warning" - @click.prevent="handleToggle" - > + <gl-button data-testid="expand-button" @click.prevent="handleToggle"> {{ $options.i18n.expand }} </gl-button> </div> diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index a75262ee303..07316f9433a 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -19,8 +19,6 @@ import { scrollToElement } from '~/lib/utils/common_utils'; import { truncateSha } from '~/lib/utils/text_utility'; import { __, s__, sprintf } from '~/locale'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; -import FileIcon from '~/vue_shared/components/file_icon.vue'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { DIFF_FILE_AUTOMATIC_COLLAPSE } from '../constants'; import { DIFF_FILE_HEADER } from '../i18n'; @@ -33,7 +31,6 @@ export default { components: { ClipboardButton, GlIcon, - FileIcon, DiffStats, GlBadge, GlButton, @@ -48,7 +45,7 @@ export default { GlTooltip: GlTooltipDirective, SafeHtml: GlSafeHtmlDirective, }, - mixins: [glFeatureFlagsMixin(), IdState({ idProp: (vm) => vm.diffFile.file_hash })], + mixins: [IdState({ idProp: (vm) => vm.diffFile.file_hash })], i18n: { ...DIFF_FILE_HEADER, compareButtonLabel: __('Compare submodule commit revisions'), @@ -301,14 +298,6 @@ export default { :href="titleLink" @click="handleFileNameClick" > - <file-icon - v-if="!glFeatures.removeDiffHeaderIcons" - :file-name="filePath" - :size="16" - aria-hidden="true" - css-classes="gl-mr-2" - :submodule="diffFile.submodule" - /> <span v-if="isFileRenamed"> <strong v-gl-tooltip diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue index a2f0e2c2653..ebc68bafb9a 100644 --- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue +++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue @@ -3,6 +3,7 @@ import { mapState, mapGetters, mapActions } from 'vuex'; import { s__, __ } from '~/locale'; import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form'; import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal'; +import { ignoreWhilePending } from '~/lib/utils/ignore_while_pending'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import MultilineCommentForm from '~/notes/components/multiline_comment_form.vue'; import { commentLineOptions, formatLineRange } from '~/notes/components/multiline_comment_utils'; @@ -175,7 +176,10 @@ export default { 'saveDiffDiscussion', 'setSuggestPopoverDismissed', ]), - async handleCancelCommentForm(shouldConfirm, isDirty) { + handleCancelCommentForm: ignoreWhilePending(async function handleCancelCommentForm( + shouldConfirm, + isDirty, + ) { if (shouldConfirm && isDirty) { const msg = s__('Notes|Are you sure you want to cancel creating this comment?'); @@ -195,7 +199,7 @@ export default { this.$nextTick(() => { this.resetAutoSave(); }); - }, + }), handleSaveNote(note) { return this.saveDiffDiscussion({ note, formData: this.formData }).then(() => this.handleCancelCommentForm(), diff --git a/app/assets/javascripts/diffs/components/diff_view.vue b/app/assets/javascripts/diffs/components/diff_view.vue index 529f8e0a2f9..d740d5adcb6 100644 --- a/app/assets/javascripts/diffs/components/diff_view.vue +++ b/app/assets/javascripts/diffs/components/diff_view.vue @@ -6,7 +6,6 @@ import DraftNote from '~/batch_comments/components/draft_note.vue'; import draftCommentsMixin from '~/diffs/mixins/draft_comments'; import { getCommentedLines } from '~/notes/components/multiline_comment_utils'; import { hide } from '~/tooltips'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { pickDirection } from '../utils/diff_line'; import DiffCommentCell from './diff_comment_cell.vue'; import DiffExpansionCell from './diff_expansion_cell.vue'; @@ -23,11 +22,7 @@ export default { directives: { SafeHtml, }, - mixins: [ - draftCommentsMixin, - glFeatureFlagsMixin(), - IdState({ idProp: (vm) => vm.diffFile.file_hash }), - ], + mixins: [draftCommentsMixin, IdState({ idProp: (vm) => vm.diffFile.file_hash })], props: { diffFile: { type: Object, @@ -171,7 +166,6 @@ export default { <template v-for="(line, index) in diffLines"> <template v-if="line.isMatchLineLeft || line.isMatchLineRight"> <diff-expansion-cell - v-if="glFeatures.updatedDiffExpansionButtons" :key="`expand-${index}`" :file="diffFile" :line="line.left" @@ -180,41 +174,6 @@ export default { :inline="inline" :line-count-between="getCountBetweenIndex(index)" /> - <template v-else> - <div :key="`expand-${index}`" class="diff-tr line_expansion old-line_expansion match"> - <div class="diff-td text-center gl-font-regular"> - <diff-expansion-cell - :file="diffFile" - :context-lines-path="diffFile.context_lines_path" - :line="line.left" - :is-top="index === 0" - :is-bottom="index + 1 === diffLinesLength" - :inline="inline" - /> - </div> - </div> - <div - v-if="line.left.rich_text" - :key="`expand-definition-${index}`" - class="diff-grid-row diff-tr line_holder match" - > - <div class="diff-grid-left diff-grid-3-col left-side"> - <div class="diff-td diff-line-num"></div> - <div v-if="inline" class="diff-td diff-line-num"></div> - <div - v-safe-html="line.left.rich_text" - class="diff-td line_content left-side gl-white-space-normal!" - ></div> - </div> - <div v-if="!inline" class="diff-grid-right diff-grid-3-col right-side"> - <div class="diff-td diff-line-num"></div> - <div - v-safe-html="line.left.rich_text" - class="diff-td line_content right-side gl-white-space-normal!" - ></div> - </div> - </div> - </template> </template> <diff-row v-if="!line.isMatchLineLeft && !line.isMatchLineRight" diff --git a/app/assets/javascripts/diffs/components/merge_conflict_warning.vue b/app/assets/javascripts/diffs/components/merge_conflict_warning.vue index 6e1e6f5c2d0..c37a1d75650 100644 --- a/app/assets/javascripts/diffs/components/merge_conflict_warning.vue +++ b/app/assets/javascripts/diffs/components/merge_conflict_warning.vue @@ -44,8 +44,8 @@ export default { <gl-button v-if="resolutionPath" :href="resolutionPath" - variant="info" - class="gl-mr-5 gl-alert-action" + variant="confirm" + class="gl-mr-3 gl-alert-action" > {{ __('Resolve conflicts') }} </gl-button> diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js index 92f3cf83740..cf86ebea4a9 100644 --- a/app/assets/javascripts/diffs/store/utils.js +++ b/app/assets/javascripts/diffs/store/utils.js @@ -126,14 +126,6 @@ export function findDiffFile(files, match, matchKey = 'file_hash') { return files.find((file) => file[matchKey] === match); } -export const getReversePosition = (linePosition) => { - if (linePosition === LINE_POSITION_RIGHT) { - return LINE_POSITION_LEFT; - } - - return LINE_POSITION_RIGHT; -}; - export function getFormData(params) { const { commit, diff --git a/app/assets/javascripts/editor/extensions/source_editor_ci_schema_ext.js b/app/assets/javascripts/editor/extensions/source_editor_ci_schema_ext.js index b41eae88c54..b33dcba2b7d 100644 --- a/app/assets/javascripts/editor/extensions/source_editor_ci_schema_ext.js +++ b/app/assets/javascripts/editor/extensions/source_editor_ci_schema_ext.js @@ -17,10 +17,14 @@ export class CiSchemaExtension { const absoluteSchemaUrl = new URL(ciSchemaPath, gon.gitlab_url).href; const modelFileName = instance.getModel().uri.path.split('/').pop(); - registerSchema({ - uri: absoluteSchemaUrl, - fileMatch: [modelFileName], - }); + registerSchema( + { + uri: absoluteSchemaUrl, + fileMatch: [modelFileName], + }, + // eslint-disable-next-line @gitlab/require-i18n-strings + { customTags: ['!reference sequence'] }, + ); }, }; } diff --git a/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js b/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js index 11cc85c659d..e4ad0bf8e76 100644 --- a/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js +++ b/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js @@ -36,6 +36,8 @@ const setupDomElement = ({ injectToEl = null } = {}) => { return previewEl; }; +let dimResize = false; + export class EditorMarkdownPreviewExtension { static get extensionName() { return 'EditorMarkdownPreview'; @@ -50,6 +52,7 @@ export class EditorMarkdownPreviewExtension { }, shown: false, modelChangeListener: undefined, + layoutChangeListener: undefined, path: setupOptions.previewMarkdownPath, actionShowPreviewCondition: instance.createContextKey('toggleLivePreview', true), }; @@ -59,6 +62,14 @@ export class EditorMarkdownPreviewExtension { if (instance.toolbar) { this.setupToolbar(instance); } + + this.preview.layoutChangeListener = instance.onDidLayoutChange(() => { + if (instance.markdownPreview?.shown && !dimResize) { + const { width } = instance.getLayoutInfo(); + const newWidth = width * EXTENSION_MARKDOWN_PREVIEW_PANEL_WIDTH; + EditorMarkdownPreviewExtension.resizePreviewLayout(instance, newWidth); + } + }); } onBeforeUnuse(instance) { @@ -70,6 +81,9 @@ export class EditorMarkdownPreviewExtension { } cleanup(instance) { + if (this.preview.layoutChangeListener) { + this.preview.layoutChangeListener.dispose(); + } if (this.preview.modelChangeListener) { this.preview.modelChangeListener.dispose(); } @@ -82,6 +96,15 @@ export class EditorMarkdownPreviewExtension { this.preview.shown = false; } + static resizePreviewLayout(instance, width) { + const { height } = instance.getLayoutInfo(); + dimResize = true; + instance.layout({ width, height }); + window.requestAnimationFrame(() => { + dimResize = false; + }); + } + setupToolbar(instance) { this.toolbarButtons = [ { @@ -99,11 +122,11 @@ export class EditorMarkdownPreviewExtension { } togglePreviewLayout(instance) { - const { width, height } = instance.getLayoutInfo(); + const { width } = instance.getLayoutInfo(); const newWidth = this.preview.shown ? width / EXTENSION_MARKDOWN_PREVIEW_PANEL_WIDTH : width * EXTENSION_MARKDOWN_PREVIEW_PANEL_WIDTH; - instance.layout({ width: newWidth, height }); + EditorMarkdownPreviewExtension.resizePreviewLayout(instance, newWidth); } togglePreviewPanel(instance) { diff --git a/app/assets/javascripts/editor/extensions/source_editor_webide_ext.js b/app/assets/javascripts/editor/extensions/source_editor_webide_ext.js index 4e8c11bac54..6270517b3f3 100644 --- a/app/assets/javascripts/editor/extensions/source_editor_webide_ext.js +++ b/app/assets/javascripts/editor/extensions/source_editor_webide_ext.js @@ -7,7 +7,6 @@ * @property {Object} options The Monaco editor options */ -import { debounce } from 'lodash'; import { KeyCode, KeyMod, Range } from 'monaco-editor'; import { EDITOR_TYPE_DIFF } from '~/editor/constants'; import Disposable from '~/ide/lib/common/disposable'; @@ -59,13 +58,10 @@ const renderSideBySide = (domElement) => { return domElement.offsetWidth >= 700; }; -const updateInstanceDimensions = (instance) => { - instance.layout(); - if (isDiffEditorType(instance)) { - instance.updateOptions({ - renderSideBySide: renderSideBySide(instance.getDomNode()), - }); - } +const updateDiffInstanceRendering = (instance) => { + instance.updateOptions({ + renderSideBySide: renderSideBySide(instance.getDomNode()), + }); }; export class EditorWebIdeExtension { @@ -85,15 +81,14 @@ export class EditorWebIdeExtension { this.options = setupOptions.options; this.disposable = new Disposable(); - this.debouncedUpdate = debounce(() => { - updateInstanceDimensions(instance); - }, UPDATE_DIMENSIONS_DELAY); - addActions(instance, setupOptions.store); - } - onUse(instance) { - window.addEventListener('resize', this.debouncedUpdate, false); + if (isDiffEditorType(instance)) { + updateDiffInstanceRendering(instance); + instance.getModifiedEditor().onDidLayoutChange(() => { + updateDiffInstanceRendering(instance); + }); + } instance.onDidDispose(() => { this.onUnuse(); @@ -101,8 +96,6 @@ export class EditorWebIdeExtension { } onUnuse() { - window.removeEventListener('resize', this.debouncedUpdate); - // catch any potential errors with disposing the error // this is mainly for tests caused by elements not existing try { @@ -149,7 +142,6 @@ export class EditorWebIdeExtension { modified: model.getModel(), }); }, - updateDimensions: (instance) => updateInstanceDimensions(instance), setPos: (instance, { lineNumber, column }) => { instance.revealPositionInCenter({ lineNumber, diff --git a/app/assets/javascripts/editor/schema/ci.json b/app/assets/javascripts/editor/schema/ci.json index 1352211b927..c8015f884b7 100644 --- a/app/assets/javascripts/editor/schema/ci.json +++ b/app/assets/javascripts/editor/schema/ci.json @@ -2,7 +2,7 @@ "$schema": "http://json-schema.org/draft-07/schema#", "$id": "https://gitlab.com/.gitlab-ci.yml", "title": "Gitlab CI configuration", - "description": "Gitlab has a built-in solution for doing CI called Gitlab CI. It is configured by supplying a file called `.gitlab-ci.yml`, which will list all the jobs that are going to run for the project. A full list of all options can be found at https://docs.gitlab.com/ee/ci/yaml/. You can read more about Gitlab CI at https://docs.gitlab.com/ee/ci/README.html.", + "markdownDescription": "Gitlab has a built-in solution for doing CI called Gitlab CI. It is configured by supplying a file called `.gitlab-ci.yml`, which will list all the jobs that are going to run for the project. A full list of all options can be found [here](https://docs.gitlab.com/ee/ci/yaml). [Learn More](https://docs.gitlab.com/ee/ci/index.html).", "type": "object", "properties": { "$schema": { @@ -15,6 +15,7 @@ "after_script": { "$ref": "#/definitions/after_script" }, "variables": { "$ref": "#/definitions/globalVariables" }, "cache": { "$ref": "#/definitions/cache" }, + "!reference": {"$ref" : "#/definitions/!reference"}, "default": { "type": "object", "properties": { @@ -27,13 +28,14 @@ "retry": { "$ref": "#/definitions/retry" }, "services": { "$ref": "#/definitions/services" }, "tags": { "$ref": "#/definitions/tags" }, - "timeout": { "$ref": "#/definitions/timeout" } + "timeout": { "$ref": "#/definitions/timeout" }, + "!reference": {"$ref" : "#/definitions/!reference"} }, "additionalProperties": false }, "stages": { "type": "array", - "description": "Groups jobs into stages. All jobs in one stage must complete before next stage is executed. Defaults to ['build', 'test', 'deploy'].", + "markdownDescription": "Groups jobs into stages. All jobs in one stage must complete before next stage is executed. Defaults to ['build', 'test', 'deploy']. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#stages).", "default": ["build", "test", "deploy"], "items": { "type": "string" @@ -42,7 +44,7 @@ "minItems": 1 }, "include": { - "description": "Can be `IncludeItem` or `IncludeItem[]`. Each `IncludeItem` will be a string, or an object with properties for the method if including external YAML file. The external content will be fetched, included and evaluated along the `.gitlab-ci.yml`.", + "markdownDescription": "Can be `IncludeItem` or `IncludeItem[]`. Each `IncludeItem` will be a string, or an object with properties for the method if including external YAML file. The external content will be fetched, included and evaluated along the `.gitlab-ci.yml`. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#include).", "oneOf": [ { "$ref": "#/definitions/include_item" }, { @@ -53,7 +55,7 @@ }, "pages": { "$ref": "#/definitions/job", - "description": "A special job used to upload static sites to Gitlab pages. Requires a `public/` directory with `artifacts.path` pointing to it." + "markdownDescription": "A special job used to upload static sites to Gitlab pages. Requires a `public/` directory with `artifacts.path` pointing to it. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#pages)." }, "workflow": { "type": "object", @@ -61,7 +63,10 @@ "rules": { "type": "array", "items": { - "type": "object", + "anyOf": [ + {"type": "object"}, + {"type": "array", "minLength": 1, "items": { "type": "string" }} + ], "properties": { "if": { "$ref": "#/definitions/if" }, "changes": { "$ref": "#/definitions/changes" }, @@ -93,12 +98,12 @@ "definitions": { "artifacts": { "type": "object", - "description": "Used to specify a list of files and directories that should be attached to the job if it succeeds. Artifacts are sent to Gitlab where they can be downloaded.", + "markdownDescription": "Used to specify a list of files and directories that should be attached to the job if it succeeds. Artifacts are sent to Gitlab where they can be downloaded. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#artifacts).", "additionalProperties": false, "properties": { "paths": { "type": "array", - "description": "A list of paths to files/folders that should be included in the artifact.", + "markdownDescription": "A list of paths to files/folders that should be included in the artifact. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#artifactspaths).", "items": { "type": "string" }, @@ -106,7 +111,7 @@ }, "exclude": { "type": "array", - "description": "A list of paths to files/folders that should be excluded in the artifact.", + "markdownDescription": "A list of paths to files/folders that should be excluded in the artifact. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#artifactsexclude).", "items": { "type": "string" }, @@ -114,19 +119,19 @@ }, "expose_as": { "type": "string", - "description": "Can be used to expose job artifacts in the merge request UI. GitLab will add a link <expose_as> to the relevant merge request that points to the artifact." + "markdownDescription": "Can be used to expose job artifacts in the merge request UI. GitLab will add a link <expose_as> to the relevant merge request that points to the artifact. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#artifactsexpose_as)." }, "name": { "type": "string", - "description": "Name for the archive created on job success. Can use variables in the name, e.g. '$CI_JOB_NAME'" + "markdownDescription": "Name for the archive created on job success. Can use variables in the name, e.g. '$CI_JOB_NAME' [Learn More](https://docs.gitlab.com/ee/ci/yaml/#artifactsname)." }, "untracked": { "type": "boolean", - "description": "Whether to add all untracked files (along with 'artifacts.paths') to the artifact.", + "markdownDescription": "Whether to add all untracked files (along with 'artifacts.paths') to the artifact. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#artifactsuntracked).", "default": false }, "when": { - "description": "Configure when artifacts are uploaded depended on job status.", + "markdownDescription": "Configure when artifacts are uploaded depended on job status. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#artifactswhen).", "default": "on_success", "oneOf": [ { @@ -145,12 +150,12 @@ }, "expire_in": { "type": "string", - "description": "How long artifacts should be kept. They are saved 30 days by default. Artifacts that have expired are removed periodically via cron job. Supports a wide variety of formats, e.g. '1 week', '3 mins 4 sec', '2 hrs 20 min', '2h20min', '6 mos 1 day', '47 yrs 6 mos and 4d', '3 weeks and 2 days'.", + "markdownDescription": "How long artifacts should be kept. They are saved 30 days by default. Artifacts that have expired are removed periodically via cron job. Supports a wide variety of formats, e.g. '1 week', '3 mins 4 sec', '2 hrs 20 min', '2h20min', '6 mos 1 day', '47 yrs 6 mos and 4d', '3 weeks and 2 days'. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#artifactsexpire_in).", "default": "30 days" }, "reports": { "type": "object", - "description": "Reports will be uploaded as artifacts, and often displayed in the Gitlab UI, such as in Merge Requests.", + "markdownDescription": "Reports will be uploaded as artifacts, and often displayed in the Gitlab UI, such as in Merge Requests. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#artifactsreports).", "additionalProperties": false, "properties": { "junit": { @@ -341,6 +346,13 @@ } ] }, + "!reference": { + "type": "array", + "items": { + "type": "string", + "minLength": 1 + } + }, "image": { "oneOf": [ { @@ -362,16 +374,43 @@ "type": "array", "description": "Command or script that should be executed as the container's entrypoint. It will be translated to Docker's --entrypoint option while creating the container. The syntax is similar to Dockerfile's ENTRYPOINT directive, where each shell token is a separate string in the array.", "minItems": 1 + }, + "pull_policy": { + "markdownDescription": "Specifies how to pull the image in Runner. It can be one of `always`, `never` or `if-not-present`. The default value is `always`. [Learn more](https://docs.gitlab.com/ee/ci/yaml/#imagepull_policy).", + "default": "always", + "oneOf": [ + { + "type": "string", + "enum": [ + "always", + "never", + "if-not-present" + ] + }, + { + "type": "array", + "items": { + "type": "string", + "enum": [ + "always", + "never", + "if-not-present" + ] + }, + "minItems": 1, + "uniqueItems": true + } + ] } }, "required": ["name"] } ], - "description": "Specifies the docker image to use for the job or globally for all jobs. Job configuration takes precedence over global setting. Requires a certain kind of Gitlab runner executor." + "markdownDescription": "Specifies the docker image to use for the job or globally for all jobs. Job configuration takes precedence over global setting. Requires a certain kind of Gitlab runner executor. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#image)." }, "services": { "type": "array", - "description": "Similar to `image` property, but will link the specified services to the `image` container.", + "markdownDescription": "Similar to `image` property, but will link the specified services to the `image` container. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#services).", "items": { "oneOf": [ { @@ -418,7 +457,7 @@ }, "secrets": { "type": "object", - "description": "Defines secrets to be injected as environment variables", + "markdownDescription": "Defines secrets to be injected as environment variables. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#secrets).", "additionalProperties": { "type": "object", "description": "Environment variable name", @@ -453,7 +492,7 @@ }, "before_script": { "type": "array", - "description": "Defines scripts that should run *before* the job. Can be set globally or per job.", + "markdownDescription": "Defines scripts that should run *before* the job. Can be set globally or per job. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#before_script).", "items": { "anyOf": [ { @@ -470,7 +509,7 @@ }, "after_script": { "type": "array", - "description": "Defines scripts that should run *after* the job. Can be set globally or per job.", + "markdownDescription": "Defines scripts that should run *after* the job. Can be set globally or per job. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#after_script).", "items": { "anyOf": [ { @@ -487,27 +526,41 @@ }, "rules": { "type": "array", - "description": "Rules allows for an array of individual rule objects to be evaluated in order, until one matches and dynamically provides attributes to the job.", + "markdownDescription": "Rules allows for an array of individual rule objects to be evaluated in order, until one matches and dynamically provides attributes to the job. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#rules).", "items": { - "type": "object", - "additionalProperties": false, - "properties": { - "if": { "$ref": "#/definitions/if" }, - "changes": { "$ref": "#/definitions/changes" }, - "exists": { "$ref": "#/definitions/exists" }, - "variables": { "$ref": "#/definitions/variables" }, - "when": { "$ref": "#/definitions/when" }, - "start_in": { "$ref": "#/definitions/start_in" }, - "allow_failure": { "$ref": "#/definitions/allow_failure" } - } + "anyOf": [ + { + "type": "object", + "additionalProperties": false, + "properties": { + "if": { "$ref": "#/definitions/if" }, + "changes": { "$ref": "#/definitions/changes" }, + "exists": { "$ref": "#/definitions/exists" }, + "variables": { "$ref": "#/definitions/variables" }, + "when": { "$ref": "#/definitions/when" }, + "start_in": { "$ref": "#/definitions/start_in" }, + "allow_failure": { "$ref": "#/definitions/allow_failure" } + } + }, + {"type": "string", "minLength": 1}, + {"type": "array", "minLength": 1, "items": { "type": "string" }} + ] } }, "globalVariables": { - "description": "Defines environment variables globally. Job level property overrides global variables. If a job sets `variables: {}`, all global variables are turned off. You can use the value and description keywords to define variables that are prefilled when running a pipeline manually.", - "type": "object", + "markdownDescription": "Defines environment variables globally. Job level property overrides global variables. If a job sets `variables: {}`, all global variables are turned off. You can use the value and description keywords to define variables that are prefilled when running a pipeline manually. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#variables).", + "anyOf": [ + {"type": "object"}, + { + "type": "array", + "items": { + "type": "string" + } + } + ], "additionalProperties": { "anyOf": [ - {"type": ["string", "integer"]}, + {"type": ["string", "integer", "array"]}, { "type": "object", "properties": { @@ -523,41 +576,51 @@ }, "if": { "type": "string", - "description": "Expression to evaluate whether additional attributes should be provided to the job" + "markdownDescription": "Expression to evaluate whether additional attributes should be provided to the job. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#rulesif)." }, "changes": { "type": "array", - "description": "Additional attributes will be provided to job if any of the provided paths matches a modified file", + "markdownDescription": "Additional attributes will be provided to job if any of the provided paths matches a modified file. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#ruleschanges).", "items": { "type": "string" } }, "exists": { "type": "array", - "description": "Additional attributes will be provided to job if any of the provided paths matches an existing file in the repository", + "markdownDescription": "Additional attributes will be provided to job if any of the provided paths matches an existing file in the repository. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#rulesexists).", "items": { "type": "string" } }, "variables": { - "type": "object", - "description": "Defines environment variables for specific jobs. Job level property overrides global variables. If a job sets `variables: {}`, all global variables are turned off.", - "additionalProperties": { - "type": ["string", "integer"] - } + "markdownDescription": "Defines environment variables for specific jobs. Job level property overrides global variables. If a job sets `variables: {}`, all global variables are turned off. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#rulesvariables).", + "anyOf": [ + { + "type": "object", + "additionalProperties": { + "type": ["string", "integer", "array"] + } + }, + { + "type": "array", + "items": { + "type": "string" + } + } + ] }, "timeout": { "type": "string", - "description": "Allows you to configure a timeout for a specific job (e.g. `1 minute`, `1h 30m 12s`). Read more: https://docs.gitlab.com/ee/ci/yaml/README.html#timeout", + "markdownDescription": "Allows you to configure a timeout for a specific job (e.g. `1 minute`, `1h 30m 12s`). [Learn More](https://docs.gitlab.com/ee/ci/yaml/index.html#timeout).", "minLength": 1 }, "start_in": { "type": "string", - "description": "Used in conjunction with 'when: delayed' to set how long to delay before starting a job. e.g. '5', 5 seconds, 30 minutes, 1 week, etc. Read more: https://docs.gitlab.com/ee/ci/jobs/job_control.html#run-a-job-after-a-delay", + "markdownDescription": "Used in conjunction with 'when: delayed' to set how long to delay before starting a job. e.g. '5', 5 seconds, 30 minutes, 1 week, etc. [Learn More](https://docs.gitlab.com/ee/ci/jobs/job_control.html#run-a-job-after-a-delay).", "minLength": 1 }, "allow_failure": { - "description": "Allow job to fail. A failed job does not cause the pipeline to fail.", + "markdownDescription": "Allow job to fail. A failed job does not cause the pipeline to fail. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#allow_failure).", "oneOf": [ { "description": "Setting this option to true will allow the job to fail while still letting the pipeline pass.", @@ -594,7 +657,7 @@ ] }, "when": { - "description": "Describes the conditions for when to run the job. Defaults to 'on_success'.", + "markdownDescription": "Describes the conditions for when to run the job. Defaults to 'on_success'.", "default": "on_success", "oneOf": [ { @@ -611,11 +674,11 @@ }, { "enum": ["manual"], - "description": "Execute the job manually from Gitlab UI or API. Read more: https://docs.gitlab.com/ee/ci/yaml/#when-manual" + "markdownDescription": "Execute the job manually from Gitlab UI or API. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#when)." }, { "enum": ["delayed"], - "description": "Execute a job after the time limit in 'start_in' expires. Read more: https://docs.gitlab.com/ee/ci/yaml/#when-delayed" + "markdownDescription": "Execute a job after the time limit in 'start_in' expires. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#when)." }, { "enum": ["never"], @@ -626,7 +689,7 @@ "cache": { "properties": { "when": { - "description": "Defines when to save the cache, based on the status of the job.", + "markdownDescription": "Defines when to save the cache, based on the status of the job. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#cachewhen).", "default": "on_success", "oneOf": [ { @@ -778,7 +841,7 @@ }, "variables": { "type": "array", - "description": "Filter job by checking comparing values of environment variables. Read more about variable expressions: https://docs.gitlab.com/ee/ci/variables/README.html#variables-expressions", + "markdownDescription": "Filter job by checking comparing values of CI/CD variables. [Learn More](https://docs.gitlab.com/ee/ci/jobs/job_control.html#cicd-variable-expressions).", "items": { "type": "string" } @@ -795,7 +858,7 @@ ] }, "retry": { - "description": "Retry a job if it fails. Can be a simple integer or object definition.", + "markdownDescription": "Retry a job if it fails. Can be a simple integer or object definition. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#retry).", "oneOf": [ { "$ref": "#/definitions/retry_max" }, { @@ -804,7 +867,7 @@ "properties": { "max": { "$ref": "#/definitions/retry_max" }, "when": { - "description": "Either a single or array of error types to trigger job retry.", + "markdownDescription": "Either a single or array of error types to trigger job retry. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#retrywhen).", "oneOf": [ { "$ref": "#/definitions/retry_errors" }, { @@ -884,19 +947,12 @@ }, "interruptible": { "type": "boolean", - "description": "Interruptible is used to indicate that a job should be canceled if made redundant by a newer pipeline run.", + "markdownDescription": "Interruptible is used to indicate that a job should be canceled if made redundant by a newer pipeline run. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#interruptible).", "default": false }, "job": { "allOf": [ - { "$ref": "#/definitions/job_template" }, - { - "anyOf": [ - { "required": ["script"] }, - { "required": ["extends"] }, - { "required": ["trigger"] } - ] - } + { "$ref": "#/definitions/job_template" } ] }, "job_template": { @@ -912,7 +968,7 @@ "cache": { "$ref": "#/definitions/cache" }, "secrets": { "$ref": "#/definitions/secrets" }, "script": { - "description": "Shell scripts executed by the Runner. The only required property of jobs. Be careful with special characters (e.g. `:`, `{`, `}`, `&`) and use single or double quotes to avoid issues.", + "markdownDescription": "Shell scripts executed by the Runner. The only required property of jobs. Be careful with special characters (e.g. `:`, `{`, `}`, `&`) and use single or double quotes to avoid issues. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#script)", "oneOf": [ { "type": "string", @@ -1241,11 +1297,11 @@ "description": "Limit job concurrency. Can be used to ensure that the Runner will not run certain jobs simultaneously." }, "trigger": { - "description": "Trigger allows you to define downstream pipeline trigger. When a job created from trigger definition is started by GitLab, a downstream pipeline gets created. Read more: https://docs.gitlab.com/ee/ci/yaml/README.html#trigger", + "markdownDescription": "Trigger allows you to define downstream pipeline trigger. When a job created from trigger definition is started by GitLab, a downstream pipeline gets created. [Learn More](https://docs.gitlab.com/ee/ci/yaml/index.html#trigger).", "oneOf": [ { "type": "object", - "description": "Trigger a multi-project pipeline. Read more: https://docs.gitlab.com/ee/ci/pipelines/multi_project_pipelines.html#specify-a-downstream-pipeline-branch", + "markdownDescription": "Trigger a multi-project pipeline. [Learn More](https://docs.gitlab.com/ee/ci/pipelines/multi_project_pipelines.html#specify-a-downstream-pipeline-branch).", "additionalProperties": false, "properties": { "project": { @@ -1287,7 +1343,7 @@ }, { "type": "object", - "description": "Trigger a child pipeline. Read more: https://docs.gitlab.com/ee/ci/pipelines/parent_child_pipelines.html", + "description": "Trigger a child pipeline. [Learn More](https://docs.gitlab.com/ee/ci/pipelines/parent_child_pipelines.html).", "additionalProperties": false, "properties": { "include": { @@ -1398,7 +1454,7 @@ } }, { - "description": "Path to the project, e.g. `group/project`, or `group/sub-group/project`. Read more: https://docs.gitlab.com/ee/ci/pipelines/multi_project_pipelines.html#define-multi-project-pipelines-in-your-gitlab-ciyml-file", + "markdownDescription": "Path to the project, e.g. `group/project`, or `group/sub-group/project`. [Learn More](https://docs.gitlab.com/ee/ci/pipelines/multi_project_pipelines.html#define-multi-project-pipelines-in-your-gitlab-ciyml-file).", "type": "string", "pattern": "\\S/\\S" } @@ -1406,10 +1462,10 @@ }, "inherit": { "type": "object", - "description": "Controls inheritance of globally-defined defaults and variables. Boolean values control inheritance of all default: or variables: keywords. To inherit only a subset of default: or variables: keywords, specify what you wish to inherit. Anything not listed is not inherited.", + "markdownDescription": "Controls inheritance of globally-defined defaults and variables. Boolean values control inheritance of all default: or variables: keywords. To inherit only a subset of default: or variables: keywords, specify what you wish to inherit. Anything not listed is not inherited. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#inherit).", "properties": { "default": { - "description": "Whether to inherit all globally-defined defaults or not. Or subset of inherited defaults", + "markdownDescription": "Whether to inherit all globally-defined defaults or not. Or subset of inherited defaults. [Learn more](https://docs.gitlab.com/ee/ci/yaml/#inheritdefault).", "oneOf": [ { "type": "boolean" @@ -1435,7 +1491,7 @@ ] }, "variables": { - "description": "Whether to inherit all globally-defined variables or not. Or subset of inherited variables", + "markdownDescription": "Whether to inherit all globally-defined variables or not. Or subset of inherited variables. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#inheritvariables).", "oneOf": [ { "type": "boolean" }, { @@ -1470,7 +1526,7 @@ }, "tags": { "type": "array", - "description": "Used to select runners from the list of available runners. A runner must have all tags listed here to run the job.", + "markdownDescription": "Used to select runners from the list of available runners. A runner must have all tags listed here to run the job. [Learn More](https://docs.gitlab.com/ee/ci/yaml/#tags).", "items": { "type": "string" } diff --git a/app/assets/javascripts/editor/source_editor.js b/app/assets/javascripts/editor/source_editor.js index fa749112ab5..d585dc009e6 100644 --- a/app/assets/javascripts/editor/source_editor.js +++ b/app/assets/javascripts/editor/source_editor.js @@ -75,6 +75,7 @@ export default class SourceEditor { blobGlobalId, instance, isDiff, + language, } = {}) { if (!instance) { return null; @@ -82,7 +83,7 @@ export default class SourceEditor { const uriFilePath = joinPaths(URI_PREFIX, blobGlobalId, blobPath); const uri = Uri.file(uriFilePath); const existingModel = monacoEditor.getModel(uri); - const model = existingModel || monacoEditor.createModel(blobContent, undefined, uri); + const model = existingModel || monacoEditor.createModel(blobContent, language, uri); if (!isDiff) { instance.setModel(model); return model; @@ -132,6 +133,7 @@ export default class SourceEditor { }); let model; + const language = instanceOptions.language || getBlobLanguage(blobPath); if (instanceOptions.model !== null) { model = SourceEditor.createEditorModel({ blobGlobalId, @@ -140,6 +142,7 @@ export default class SourceEditor { blobContent, instance, isDiff, + language, }); } diff --git a/app/assets/javascripts/editor/source_editor_extension.js b/app/assets/javascripts/editor/source_editor_extension.js index 6d47e1e2248..7b73da4465f 100644 --- a/app/assets/javascripts/editor/source_editor_extension.js +++ b/app/assets/javascripts/editor/source_editor_extension.js @@ -12,6 +12,6 @@ export default class EditorExtension { } get api() { - return this.obj.provides?.(); + return this.obj.provides?.() || {}; } } diff --git a/app/assets/javascripts/emoji/constants.js b/app/assets/javascripts/emoji/constants.js index a6eb4256561..7970a932095 100644 --- a/app/assets/javascripts/emoji/constants.js +++ b/app/assets/javascripts/emoji/constants.js @@ -19,3 +19,5 @@ export const CATEGORY_ROW_HEIGHT = 37; export const CACHE_VERSION_KEY = 'gl-emoji-map-version'; export const CACHE_KEY = 'gl-emoji-map'; + +export const NEUTRAL_INTENT_MULTIPLIER = 1; diff --git a/app/assets/javascripts/emoji/index.js b/app/assets/javascripts/emoji/index.js index 4fdcdcc1b04..b9392fabcbd 100644 --- a/app/assets/javascripts/emoji/index.js +++ b/app/assets/javascripts/emoji/index.js @@ -2,6 +2,7 @@ import { escape, minBy } from 'lodash'; import emojiRegexFactory from 'emoji-regex'; import emojiAliases from 'emojis/aliases.json'; import { setAttributes } from '~/lib/utils/dom_utils'; +import { getEmojiScoreWithIntent } from '~/emoji/utils'; import AccessorUtilities from '../lib/utils/accessor'; import axios from '../lib/utils/axios_utils'; import { CACHE_KEY, CACHE_VERSION_KEY, CATEGORY_ICON_MAP, FREQUENTLY_USED_KEY } from './constants'; @@ -144,6 +145,11 @@ function getNameMatch(emoji, query) { return null; } +// Sort emoji by emoji score falling back to a string comparison +export function sortEmoji(a, b) { + return a.score - b.score || a.fieldValue.localeCompare(b.fieldValue); +} + export function searchEmoji(query) { const lowercaseQuery = query ? `${query}`.toLowerCase() : ''; @@ -156,16 +162,14 @@ export function searchEmoji(query) { getDescriptionMatch(emoji, lowercaseQuery), getAliasMatch(emoji, matchingAliases), getNameMatch(emoji, lowercaseQuery), - ].filter(Boolean); + ] + .filter(Boolean) + .map((x) => ({ ...x, score: getEmojiScoreWithIntent(x.emoji.name, x.score) })); return minBy(matches, (x) => x.score); }) - .filter(Boolean); -} - -export function sortEmoji(items) { - // Sort results by index of and string comparison - return [...items].sort((a, b) => a.score - b.score || a.fieldValue.localeCompare(b.fieldValue)); + .filter(Boolean) + .sort(sortEmoji); } export const CATEGORY_NAMES = Object.keys(CATEGORY_ICON_MAP); diff --git a/app/assets/javascripts/emoji/utils.js b/app/assets/javascripts/emoji/utils.js new file mode 100644 index 00000000000..eb3dcea73c0 --- /dev/null +++ b/app/assets/javascripts/emoji/utils.js @@ -0,0 +1,8 @@ +import emojiIntents from 'emojis/intents.json'; +import { NEUTRAL_INTENT_MULTIPLIER } from '~/emoji/constants'; + +export function getEmojiScoreWithIntent(emojiName, baseScore) { + const intentMultiplier = emojiIntents[emojiName] || NEUTRAL_INTENT_MULTIPLIER; + + return 2 ** baseScore * intentMultiplier; +} diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue index cec53869aa8..b2844ed5ad6 100644 --- a/app/assets/javascripts/environments/components/container.vue +++ b/app/assets/javascripts/environments/components/container.vue @@ -33,7 +33,7 @@ export default { <template> <div class="environments-container"> - <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-3" label="Loading environments" /> + <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3" label="Loading environments" /> <slot name="empty-state"></slot> diff --git a/app/assets/javascripts/environments/components/deploy_board_wrapper.vue b/app/assets/javascripts/environments/components/deploy_board_wrapper.vue index d9d77088ad3..d1132bc6e24 100644 --- a/app/assets/javascripts/environments/components/deploy_board_wrapper.vue +++ b/app/assets/javascripts/environments/components/deploy_board_wrapper.vue @@ -25,7 +25,7 @@ export default { }, computed: { icon() { - return this.visible ? 'angle-down' : 'angle-right'; + return this.visible ? 'chevron-lg-down' : 'chevron-lg-right'; }, label() { return this.visible ? this.$options.i18n.collapse : this.$options.i18n.expand; diff --git a/app/assets/javascripts/environments/components/environment_folder.vue b/app/assets/javascripts/environments/components/environment_folder.vue index 788c3ba6fed..881f404340d 100644 --- a/app/assets/javascripts/environments/components/environment_folder.vue +++ b/app/assets/javascripts/environments/components/environment_folder.vue @@ -47,8 +47,8 @@ export default { computed: { icons() { return this.visible - ? { caret: 'angle-down', folder: 'folder-open' } - : { caret: 'angle-right', folder: 'folder-o' }; + ? { caret: 'chevron-lg-down', folder: 'folder-open' } + : { caret: 'chevron-lg-right', folder: 'folder-o' }; }, label() { return this.visible ? this.$options.i18n.collapse : this.$options.i18n.expand; diff --git a/app/assets/javascripts/environments/components/environment_form.vue b/app/assets/javascripts/environments/components/environment_form.vue index 1d1d8d61b66..1bac0ef1359 100644 --- a/app/assets/javascripts/environments/components/environment_form.vue +++ b/app/assets/javascripts/environments/components/environment_form.vue @@ -81,27 +81,24 @@ export default { </script> <template> <div> - <h3 class="page-title"> + <h1 class="page-title gl-font-size-h-display"> {{ title }} - </h3> - <hr /> - <div class="row gl-mt-3 gl-mb-3"> - <div class="col-lg-3"> - <h4 class="gl-mt-0"> - {{ $options.i18n.header }} - </h4> - <p> - <gl-sprintf :message="$options.i18n.helpMessage"> - <template #link="{ content }"> - <gl-link :href="$options.helpPagePath">{{ content }}</gl-link> - </template> - </gl-sprintf> - </p> - </div> + </h1> + <div class="row col-12"> + <h4 class="gl-mt-0"> + {{ $options.i18n.header }} + </h4> + <p class="gl-w-full"> + <gl-sprintf :message="$options.i18n.helpMessage"> + <template #link="{ content }"> + <gl-link :href="$options.helpPagePath">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> <gl-form id="new_environment" :aria-label="title" - class="col-lg-9" + class="gl-w-full" @submit.prevent="$emit('submit')" > <gl-form-group @@ -144,7 +141,7 @@ export default { /> </gl-form-group> - <div class="form-actions"> + <div class="gl-mr-6"> <gl-button :loading="loading" type="submit" diff --git a/app/assets/javascripts/environments/components/environments_detail_header.vue b/app/assets/javascripts/environments/components/environments_detail_header.vue index d71b553a878..13b9cf14f52 100644 --- a/app/assets/javascripts/environments/components/environments_detail_header.vue +++ b/app/assets/javascripts/environments/components/environments_detail_header.vue @@ -94,9 +94,9 @@ export default { <template> <header class="top-area gl-justify-content-between"> <div class="gl-display-flex gl-flex-grow-1 gl-align-items-center"> - <h3 class="page-title"> + <h1 class="page-title gl-font-size-h-display"> {{ environment.name }} - </h3> + </h1> <p v-if="shouldShowCancelAutoStopButton" class="gl-mb-0 gl-ml-3" data-testid="auto-stops-at"> <gl-sprintf :message="$options.i18n.autoStopAtText"> <template #autoStopAt> diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue index 7fcd6e5fff8..895a6cf2ccb 100644 --- a/app/assets/javascripts/environments/components/environments_table.vue +++ b/app/assets/javascripts/environments/components/environments_table.vue @@ -177,7 +177,7 @@ export default { <template v-if="shouldRenderFolderContent(model)"> <div v-if="model.isLoadingFolderContent" :key="`loading-item-${i}`"> - <gl-loading-icon size="md" class="gl-mt-5" /> + <gl-loading-icon size="lg" class="gl-mt-5" /> </div> <template v-else> diff --git a/app/assets/javascripts/environments/components/new_environment_item.vue b/app/assets/javascripts/environments/components/new_environment_item.vue index f5e9d612316..75bd473497b 100644 --- a/app/assets/javascripts/environments/components/new_environment_item.vue +++ b/app/assets/javascripts/environments/components/new_environment_item.vue @@ -83,7 +83,7 @@ export default { }, computed: { icon() { - return this.visible ? 'angle-down' : 'angle-right'; + return this.visible ? 'chevron-lg-down' : 'chevron-lg-right'; }, externalUrl() { return this.environment.externalUrl; diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue index 0a8abdc90c6..a602c92a840 100644 --- a/app/assets/javascripts/error_tracking/components/error_details.vue +++ b/app/assets/javascripts/error_tracking/components/error_details.vue @@ -301,7 +301,7 @@ export default { <gl-button class="ml-2" category="secondary" - variant="info" + variant="confirm" :loading="updatingResolveStatus" data-testid="update-resolve-status-btn" @click="onResolveStatusUpdate" @@ -313,7 +313,7 @@ export default { class="ml-2" data-testid="view_issue_button" :href="error.gitlabIssuePath" - variant="success" + variant="confirm" > {{ __('View issue') }} </gl-button> @@ -364,7 +364,6 @@ export default { v-if="error.gitlabIssuePath" data-qa-selector="view_issue_button" :href="error.gitlabIssuePath" - variant="success" >{{ __('View issue') }}</gl-dropdown-item > <gl-dropdown-item @@ -382,7 +381,7 @@ export default { <h2 class="text-truncate">{{ error.title }}</h2> </tooltip-on-truncate> <template v-if="error.tags"> - <gl-badge v-if="error.tags.level" :variant="errorSeverityVariant" class="mr-2"> + <gl-badge v-if="error.tags.level" :variant="errorSeverityVariant" class="gl-mr-3"> {{ errorLevel }} </gl-badge> <gl-badge v-if="error.tags.logger" variant="muted">{{ error.tags.logger }} </gl-badge> diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_actions.vue b/app/assets/javascripts/error_tracking/components/error_tracking_actions.vue index 9438900c736..a5e712f4fc2 100644 --- a/app/assets/javascripts/error_tracking/components/error_tracking_actions.vue +++ b/app/assets/javascripts/error_tracking/components/error_tracking_actions.vue @@ -73,7 +73,7 @@ export default { <gl-button :href="detailsLink" category="primary" - variant="info" + variant="confirm" class="gl-display-block d-md-none gl-mb-4 mb-md-0" > {{ __('More details') }} diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue index 86102fd54b1..d29d5aa0671 100644 --- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue +++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue @@ -369,7 +369,7 @@ export default { </div> <div v-if="loading" class="py-3"> - <gl-loading-icon size="md" /> + <gl-loading-icon size="lg" /> </div> <template v-else> diff --git a/app/assets/javascripts/feature_flags/components/empty_state.vue b/app/assets/javascripts/feature_flags/components/empty_state.vue index a6de4972bb1..a66215cdae6 100644 --- a/app/assets/javascripts/feature_flags/components/empty_state.vue +++ b/app/assets/javascripts/feature_flags/components/empty_state.vue @@ -67,7 +67,7 @@ export default { {{ message }} </gl-alert> - <gl-loading-icon v-if="isLoading" :label="loadingLabel" size="md" class="gl-mt-4" /> + <gl-loading-icon v-if="isLoading" :label="loadingLabel" size="lg" class="gl-mt-4" /> <gl-empty-state v-else-if="errorState" diff --git a/app/assets/javascripts/feature_flags/components/feature_flags.vue b/app/assets/javascripts/feature_flags/components/feature_flags.vue index 53909dcf42e..645c2456c6e 100644 --- a/app/assets/javascripts/feature_flags/components/feature_flags.vue +++ b/app/assets/javascripts/feature_flags/components/feature_flags.vue @@ -161,7 +161,7 @@ export default { <gl-button v-if="canUserConfigure" v-gl-modal="'configure-feature-flags'" - variant="info" + variant="confirm" category="secondary" data-qa-selector="configure_feature_flags_button" data-testid="ff-configure-button" @@ -184,7 +184,10 @@ export default { class="gl-display-flex gl-align-items-baseline gl-flex-direction-row gl-justify-content-space-between gl-mt-6" > <div class="gl-display-flex gl-align-items-center"> - <h2 data-testid="feature-flags-tab-title" class="gl-font-size-h2 gl-my-0"> + <h2 + data-testid="feature-flags-tab-title" + class="page-title gl-font-size-h-display gl-my-0" + > {{ s__('FeatureFlags|Feature Flags') }} </h2> <gl-badge v-if="count" class="gl-ml-4">{{ count }}</gl-badge> @@ -197,7 +200,7 @@ export default { :href="userListPath" variant="confirm" category="tertiary" - class="gl-mb-0 gl-mr-4" + class="gl-mb-0 gl-mr-3" data-testid="ff-user-list-button" > {{ s__('FeatureFlags|View user lists') }} @@ -205,11 +208,11 @@ export default { <gl-button v-if="canUserConfigure" v-gl-modal="'configure-feature-flags'" - variant="info" + variant="confirm" category="secondary" data-qa-selector="configure_feature_flags_button" data-testid="ff-configure-button" - class="gl-mb-0 gl-mr-4" + class="gl-mb-0 gl-mr-3" > {{ s__('FeatureFlags|Configure') }} </gl-button> diff --git a/app/assets/javascripts/feature_flags/components/feature_flags_table.vue b/app/assets/javascripts/feature_flags/components/feature_flags_table.vue index f8a8bed2467..f0f42d19ea5 100644 --- a/app/assets/javascripts/feature_flags/components/feature_flags_table.vue +++ b/app/assets/javascripts/feature_flags/components/feature_flags_table.vue @@ -81,6 +81,20 @@ export default { }); }, }, + modal: { + actionPrimary: { + text: s__('FeatureFlags|Delete feature flag'), + attributes: { + variant: 'danger', + }, + }, + actionSecondary: { + text: __('Cancel'), + attributes: { + variant: 'default', + }, + }, + }, }; </script> <template> @@ -193,11 +207,11 @@ export default { <gl-modal :ref="modalId" :title="modalTitle" - :ok-title="s__('FeatureFlags|Delete feature flag')" :modal-id="modalId" title-tag="h4" - ok-variant="danger" - category="primary" + size="sm" + :action-primary="$options.modal.actionPrimary" + :action-secondary="$options.modal.actionSecondary" @ok="onSubmit" > {{ deleteModalMessage }} diff --git a/app/assets/javascripts/feature_flags/components/form.vue b/app/assets/javascripts/feature_flags/components/form.vue index 26da0d56f9a..8b79c661b12 100644 --- a/app/assets/javascripts/feature_flags/components/form.vue +++ b/app/assets/javascripts/feature_flags/components/form.vue @@ -188,8 +188,8 @@ export default { <div class="row"> <div class="col-md-12"> <h4>{{ s__('FeatureFlags|Strategies') }}</h4> - <div class="flex align-items-baseline justify-content-between"> - <p class="mr-3">{{ $options.translations.newHelpText }}</p> + <div class="gl-display-flex gl-align-items-baseline gl-justify-content-space-between"> + <p class="gl-mr-5">{{ $options.translations.newHelpText }}</p> <gl-button variant="confirm" category="secondary" @click="addStrategy"> {{ s__('FeatureFlags|Add strategy') }} </gl-button> @@ -206,21 +206,21 @@ export default { @delete="deleteStrategy(strategy)" /> </div> - <div v-else class="flex justify-content-center border-top py-4 w-100"> + <div v-else class="gl-display-flex gl-justify-content-center gl-border-t gl-py-6 w-100"> <span>{{ $options.translations.noStrategiesText }}</span> </div> </fieldset> - <div class="form-actions"> + <div class="gl-mr-6"> <gl-button ref="submitButton" type="button" variant="confirm" - class="js-ff-submit col-xs-12" + class="js-ff-submit gl-mr-2" @click="handleSubmit" >{{ submitText }}</gl-button > - <gl-button :href="cancelPath" class="js-ff-cancel col-xs-12 float-right"> + <gl-button :href="cancelPath" class="js-ff-cancel"> {{ __('Cancel') }} </gl-button> </div> diff --git a/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue b/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue index 5575c6567b5..98982920121 100644 --- a/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue +++ b/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue @@ -72,7 +72,7 @@ export default { <span class="d-md-none mr-1"> {{ $options.translations.addEnvironmentsLabel }} </span> - <gl-icon class="d-none d-md-inline-flex" name="plus" /> + <gl-icon class="d-none d-md-inline-flex gl-mr-1" name="plus" /> </template> <gl-search-box-by-type ref="searchBox" diff --git a/app/assets/javascripts/feature_flags/components/new_feature_flag.vue b/app/assets/javascripts/feature_flags/components/new_feature_flag.vue index 865c1e677cd..bc05e88e643 100644 --- a/app/assets/javascripts/feature_flags/components/new_feature_flag.vue +++ b/app/assets/javascripts/feature_flags/components/new_feature_flag.vue @@ -24,7 +24,7 @@ export default { </script> <template> <div> - <h3 class="page-title">{{ s__('FeatureFlags|New feature flag') }}</h3> + <h1 class="page-title gl-font-size-h-display">{{ s__('FeatureFlags|New feature flag') }}</h1> <gl-alert v-if="error.length" variant="warning" class="gl-mb-5" :dismissible="false"> <p v-for="(message, index) in error" :key="index" class="gl-mb-0">{{ message }}</p> diff --git a/app/assets/javascripts/feature_flags/components/strategy.vue b/app/assets/javascripts/feature_flags/components/strategy.vue index 3f515dcdf18..1d7a79f926a 100644 --- a/app/assets/javascripts/feature_flags/components/strategy.vue +++ b/app/assets/javascripts/feature_flags/components/strategy.vue @@ -176,7 +176,7 @@ export default { }}</label> <div class="gl-display-flex gl-flex-direction-column"> <div - class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row align-items-start gl-md-align-items-center" + class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-md-align-items-center" > <new-environments-dropdown :id="environmentsDropdownId" diff --git a/app/assets/javascripts/filtered_search/available_dropdown_mappings.js b/app/assets/javascripts/filtered_search/available_dropdown_mappings.js index b57db73a86e..3913e4e8d81 100644 --- a/app/assets/javascripts/filtered_search/available_dropdown_mappings.js +++ b/app/assets/javascripts/filtered_search/available_dropdown_mappings.js @@ -197,10 +197,10 @@ export default class AvailableDropdownMappings { } getGroupId() { - return this.filteredSearchInput.getAttribute('data-group-id') || ''; + return this.filteredSearchInput.dataset.groupId || ''; } getProjectId() { - return this.filteredSearchInput.getAttribute('data-project-id') || ''; + return this.filteredSearchInput.dataset.projectId || ''; } } diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js index 9d29782c9a7..10c3a6a36d5 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js @@ -25,9 +25,9 @@ export default class DropdownHint extends FilteredSearchDropdown { const { selected } = e.detail; if (selected.tagName === 'LI') { - if (selected.hasAttribute('data-value')) { + if (Object.prototype.hasOwnProperty.call(selected.dataset, 'value')) { this.dismissDropdown(); - } else if (selected.getAttribute('data-action') === 'submit') { + } else if (selected.dataset.action === 'submit') { this.dismissDropdown(); this.dispatchFormSubmitEvent(); } else { diff --git a/app/assets/javascripts/filtered_search/dropdown_operator.js b/app/assets/javascripts/filtered_search/dropdown_operator.js index fb9f25a8c45..f3f159ab988 100644 --- a/app/assets/javascripts/filtered_search/dropdown_operator.js +++ b/app/assets/javascripts/filtered_search/dropdown_operator.js @@ -23,7 +23,7 @@ export default class DropdownOperator extends FilteredSearchDropdown { const { selected } = e.detail; if (selected.tagName === 'LI') { - if (selected.hasAttribute('data-value')) { + if (Object.prototype.hasOwnProperty.call(selected.dataset, 'value')) { const name = FilteredSearchVisualTokens.getLastTokenPartial(); const operator = selected.dataset.value; diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js index 9a23ff25eac..26507a85fa8 100644 --- a/app/assets/javascripts/filtered_search/dropdown_user.js +++ b/app/assets/javascripts/filtered_search/dropdown_user.js @@ -31,11 +31,11 @@ export default class DropdownUser extends DropdownAjaxFilter { } getGroupId() { - return this.input.getAttribute('data-group-id'); + return this.input.dataset.groupId; } getProjectId() { - return this.input.getAttribute('data-project-id'); + return this.input.dataset.projectId; } projectOrGroupId() { diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js index c98d1f8e064..22e1604871a 100644 --- a/app/assets/javascripts/filtered_search/dropdown_utils.js +++ b/app/assets/javascripts/filtered_search/dropdown_utils.js @@ -87,6 +87,7 @@ export default class DropdownUtils { } static setDataValueIfSelected(filter, operator, selected) { + // eslint-disable-next-line unicorn/prefer-dom-node-dataset const dataValue = selected.getAttribute('data-value'); if (dataValue) { @@ -96,6 +97,7 @@ export default class DropdownUtils { tokenValue: dataValue, clicked: true, options: { + // eslint-disable-next-line unicorn/prefer-dom-node-dataset capitalizeTokenValue: selected.hasAttribute('data-capitalize'), }, }); diff --git a/app/assets/javascripts/filtered_search/droplab/drop_down.js b/app/assets/javascripts/filtered_search/droplab/drop_down.js index 05b741af191..398a7b26677 100644 --- a/app/assets/javascripts/filtered_search/droplab/drop_down.js +++ b/app/assets/javascripts/filtered_search/droplab/drop_down.js @@ -165,8 +165,8 @@ class DropDown { images.forEach((image) => { const img = image; - img.src = img.getAttribute('data-src'); - img.removeAttribute('data-src'); + img.src = img.dataset.src; + delete img.dataset.src; }); } } diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js index 07f2c75f00a..ac2cf27e873 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js @@ -814,7 +814,7 @@ export default class FilteredSearchManager { getUsernameParams() { const usernamesById = {}; try { - const attribute = this.filteredSearchInput.getAttribute('data-username-params'); + const attribute = this.filteredSearchInput.dataset.usernameParams; JSON.parse(attribute).forEach((user) => { usernamesById[user.id] = user.username; }); diff --git a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js index 6216ab5401d..359a276aa74 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js +++ b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js @@ -1,5 +1,3 @@ -import { __ } from '~/locale'; - export default class FilteredSearchTokenKeys { constructor(tokenKeys = [], alternativeTokenKeys = [], conditions = []) { this.tokenKeys = tokenKeys; @@ -76,24 +74,6 @@ export default class FilteredSearchTokenKeys { ); } - addExtraTokensForIssues() { - const confidentialToken = { - formattedKey: __('Confidential'), - key: 'confidential', - type: 'string', - param: '', - symbol: '', - icon: 'eye-slash', - tag: __('Yes or No'), - lowercaseValueOnSubmit: true, - uppercaseTokenName: false, - capitalizeTokenValue: true, - }; - - this.tokenKeys.push(confidentialToken); - this.tokenKeysWithAlternative.push(confidentialToken); - } - removeTokensForKeys(...keys) { const keysSet = new Set(keys); diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue index 1700437aa84..6b1676eca8a 100644 --- a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue +++ b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue @@ -1,5 +1,6 @@ <script> import { GlButton, GlSafeHtmlDirective } from '@gitlab/ui'; +import { snakeCase } from 'lodash'; import highlight from '~/lib/utils/highlight'; import { truncateNamespace } from '~/lib/utils/text_utility'; import { mapVuexModuleState } from '~/lib/utils/vuex_module_mappers'; @@ -56,6 +57,9 @@ export default { highlightedItemName() { return highlight(this.itemName, this.matcher); }, + itemTrackingLabel() { + return `${this.dropdownType}_dropdown_frequent_items_list_item_${snakeCase(this.itemName)}`; + }, }, }; </script> @@ -66,7 +70,7 @@ export default { category="tertiary" :href="webUrl" class="gl-text-left gl-justify-content-start!" - @click="track('click_link', { label: `${dropdownType}_dropdown_frequent_items_list_item` })" + @click="track('click_link', { label: itemTrackingLabel })" > <project-avatar class="gl-float-left gl-mr-3" diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js index 146255df31f..d4dafbdc94f 100644 --- a/app/assets/javascripts/gfm_auto_complete.js +++ b/app/assets/javascripts/gfm_auto_complete.js @@ -897,7 +897,7 @@ GfmAutoComplete.Emoji = { return Emoji.searchEmoji(query); }, sorter(items) { - return Emoji.sortEmoji(items); + return items.sort(Emoji.sortEmoji); }, }; // Team Members diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js index 3a04779e48d..2b157fac878 100644 --- a/app/assets/javascripts/gl_form.js +++ b/app/assets/javascripts/gl_form.js @@ -60,7 +60,10 @@ export default class GLForm { this.autoComplete = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources); this.autoComplete.setup(this.form.find('.js-gfm-input'), this.enableGFM); this.formDropzone = dropzoneInput(this.form, { parallelUploads: 1 }); - autosize(this.textarea); + + if (this.form.is(':not(.js-no-autosize)')) { + autosize(this.textarea); + } } // form and textarea event listeners this.addEventListeners(); diff --git a/app/assets/javascripts/google_cloud/components/gcp_regions_list.vue b/app/assets/javascripts/google_cloud/components/gcp_regions_list.vue index 1cc5a85198a..5d403d5cd65 100644 --- a/app/assets/javascripts/google_cloud/components/gcp_regions_list.vue +++ b/app/assets/javascripts/google_cloud/components/gcp_regions_list.vue @@ -48,7 +48,7 @@ export default { <gl-table :items="list" :fields="$options.tableFields" /> - <gl-button :href="createUrl" category="primary" variant="info"> + <gl-button :href="createUrl" category="primary" variant="confirm"> {{ $options.i18n.configureRegions }} </gl-button> </div> diff --git a/app/assets/javascripts/google_cloud/components/revoke_oauth.vue b/app/assets/javascripts/google_cloud/components/revoke_oauth.vue index 07d966894f6..c07702ff42b 100644 --- a/app/assets/javascripts/google_cloud/components/revoke_oauth.vue +++ b/app/assets/javascripts/google_cloud/components/revoke_oauth.vue @@ -30,7 +30,7 @@ export default { <p>{{ $options.i18n.description }}</p> <gl-form :action="url" method="post"> <input :value="$options.csrf.token" type="hidden" name="authenticity_token" /> - <gl-button category="secondary" variant="warning" type="submit"> + <gl-button category="secondary" variant="danger" type="submit"> {{ $options.i18n.title }} </gl-button> </gl-form> diff --git a/app/assets/javascripts/google_cloud/components/service_accounts_list.vue b/app/assets/javascripts/google_cloud/components/service_accounts_list.vue index 37b716d7be5..4b580c594f5 100644 --- a/app/assets/javascripts/google_cloud/components/service_accounts_list.vue +++ b/app/assets/javascripts/google_cloud/components/service_accounts_list.vue @@ -67,7 +67,7 @@ export default { </template> </gl-table> - <gl-button :href="createUrl" category="primary" variant="info"> + <gl-button :href="createUrl" category="primary" variant="confirm"> {{ $options.i18n.createServiceAccount }} </gl-button> diff --git a/app/assets/javascripts/google_tag_manager/index.js b/app/assets/javascripts/google_tag_manager/index.js index a44a5b30e1e..2969121bf06 100644 --- a/app/assets/javascripts/google_tag_manager/index.js +++ b/app/assets/javascripts/google_tag_manager/index.js @@ -19,6 +19,7 @@ const PRODUCT_INFO = { variant: 'SaaS', }, }; +const EMPTY_NAMESPACE_ID_VALUE = 'not available'; const generateProductInfo = (sku, quantity) => { const product = PRODUCT_INFO[sku]; @@ -200,6 +201,10 @@ export const trackCheckout = (selectedPlan, quantity) => { pushEnhancedEcommerceEvent('EECCheckout', eventData); }; +export const getNamespaceId = () => { + return window.gl.snowplowStandardContext?.data?.namespace_id || EMPTY_NAMESPACE_ID_VALUE; +}; + export const trackTransaction = (transactionDetails) => { if (!isSupported()) { return; @@ -208,6 +213,7 @@ export const trackTransaction = (transactionDetails) => { const transactionId = uuidv4(); const { paymentOption, revenue, tax, selectedPlan, quantity } = transactionDetails; const product = generateProductInfo(selectedPlan, quantity); + const namespaceId = getNamespaceId(); if (Object.keys(product).length === 0) { return; @@ -224,7 +230,7 @@ export const trackTransaction = (transactionDetails) => { revenue: revenue.toString(), tax: tax.toString(), }, - products: [product], + products: [{ ...product, dimension36: namespaceId }], }, }, }; diff --git a/app/assets/javascripts/graphql_shared/fragments/issuable_timelogs.fragment.graphql b/app/assets/javascripts/graphql_shared/fragments/issuable_timelogs.fragment.graphql index 824997f8e33..fb771d7ec8a 100644 --- a/app/assets/javascripts/graphql_shared/fragments/issuable_timelogs.fragment.graphql +++ b/app/assets/javascripts/graphql_shared/fragments/issuable_timelogs.fragment.graphql @@ -11,4 +11,7 @@ fragment TimelogFragment on Timelog { body } summary + userPermissions { + adminTimelog + } } diff --git a/app/assets/javascripts/graphql_shared/possible_types.json b/app/assets/javascripts/graphql_shared/possible_types.json index 7ca3f20ec1c..50b40526ee0 100644 --- a/app/assets/javascripts/graphql_shared/possible_types.json +++ b/app/assets/javascripts/graphql_shared/possible_types.json @@ -129,5 +129,9 @@ "VulnerabilityLocationGeneric", "VulnerabilityLocationSast", "VulnerabilityLocationSecretDetection" + ], + "WorkItemWidget": [ + "WorkItemWidgetDescription", + "WorkItemWidgetHierarchy" ] } diff --git a/app/assets/javascripts/group_settings/components/shared_runners_form.vue b/app/assets/javascripts/group_settings/components/shared_runners_form.vue index 3365f4aa76c..06aea26830d 100644 --- a/app/assets/javascripts/group_settings/components/shared_runners_form.vue +++ b/app/assets/javascripts/group_settings/components/shared_runners_form.vue @@ -1,8 +1,7 @@ <script> import { GlToggle, GlAlert } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; -import { __ } from '~/locale'; -import { ERROR_MESSAGE } from '../constants'; +import { I18N_UPDATE_ERROR_MESSAGE, I18N_REFRESH_MESSAGE } from '../constants'; export default { components: { @@ -62,8 +61,8 @@ export default { }) .catch((error) => { const message = [ - error.response?.data?.error || __('An error occurred while updating configuration.'), - ERROR_MESSAGE, + error.response?.data?.error || I18N_UPDATE_ERROR_MESSAGE, + I18N_REFRESH_MESSAGE, ].join(' '); this.error = message; diff --git a/app/assets/javascripts/group_settings/constants.js b/app/assets/javascripts/group_settings/constants.js index ab5c0db45ba..1b44161903d 100644 --- a/app/assets/javascripts/group_settings/constants.js +++ b/app/assets/javascripts/group_settings/constants.js @@ -1,3 +1,4 @@ import { __ } from '~/locale'; -export const ERROR_MESSAGE = __('Refresh the page and try again.'); +export const I18N_UPDATE_ERROR_MESSAGE = __('An error occurred while updating configuration.'); +export const I18N_REFRESH_MESSAGE = __('Refresh the page and try again.'); diff --git a/app/assets/javascripts/group_settings/stale_runner_cleanup.js b/app/assets/javascripts/group_settings/stale_runner_cleanup.js new file mode 100644 index 00000000000..3a4c171915f --- /dev/null +++ b/app/assets/javascripts/group_settings/stale_runner_cleanup.js @@ -0,0 +1,3 @@ +export default () => { + // Overridden in EE +}; diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue index e3147065d5c..cd5521c599e 100644 --- a/app/assets/javascripts/groups/components/app.vue +++ b/app/assets/javascripts/groups/components/app.vue @@ -1,19 +1,26 @@ <script> import { GlLoadingIcon, GlModal } from '@gitlab/ui'; import createFlash from '~/flash'; -import { HIDDEN_CLASS } from '~/lib/utils/constants'; import { mergeUrlParams, getParameterByName } from '~/lib/utils/url_utility'; +import { HIDDEN_CLASS } from '~/lib/utils/constants'; import { __, s__, sprintf } from '~/locale'; import { COMMON_STR, CONTENT_LIST_CLASS } from '../constants'; import eventHub from '../event_hub'; -import groupsComponent from './groups.vue'; +import GroupsComponent from './groups.vue'; +import EmptyState from './empty_state.vue'; export default { components: { - groupsComponent, + GroupsComponent, GlModal, GlLoadingIcon, + EmptyState, + }, + inject: { + renderEmptyState: { + default: false, + }, }, props: { action: { @@ -47,13 +54,14 @@ export default { searchEmptyMessage: '', targetGroup: null, targetParentGroup: null, + showEmptyState: false, }; }, computed: { primaryProps() { return { text: __('Leave group'), - attributes: [{ variant: 'warning' }, { category: 'primary' }], + attributes: [{ variant: 'danger' }, { category: 'primary' }], }; }, cancelProps() { @@ -75,6 +83,9 @@ export default { pageInfo() { return this.store.getPaginationInfo(); }, + filterGroupsBy() { + return getParameterByName('filter') || null; + }, }, created() { this.searchEmptyMessage = this.hideProjects @@ -128,19 +139,18 @@ export default { const page = getParameterByName('page') || null; const sortBy = getParameterByName('sort') || null; const archived = getParameterByName('archived') || null; - const filterGroupsBy = getParameterByName('filter') || null; this.isLoading = true; return this.fetchGroups({ page, - filterGroupsBy, + filterGroupsBy: this.filterGroupsBy, sortBy, archived, updatePagination: true, }).then((res) => { this.isLoading = false; - this.updateGroups(res, Boolean(filterGroupsBy)); + this.updateGroups(res, Boolean(this.filterGroupsBy)); }); }, fetchPage({ page, filterGroupsBy, sortBy, archived }) { @@ -212,7 +222,7 @@ export default { this.targetGroup.isBeingRemoved = false; }); }, - showEmptyState() { + showLegacyEmptyState() { const { containerEl } = this; const contentListEl = containerEl.querySelector(CONTENT_LIST_CLASS); const emptyStateEl = containerEl.querySelector('.empty-state'); @@ -230,7 +240,12 @@ export default { }, updateGroups(groups, fromSearch) { const hasGroups = groups && groups.length > 0; - this.isSearchEmpty = !hasGroups; + + if (this.renderEmptyState) { + this.isSearchEmpty = this.filterGroupsBy !== null && !hasGroups; + } else { + this.isSearchEmpty = !hasGroups; + } if (fromSearch) { this.store.setSearchedGroups(groups); @@ -239,7 +254,11 @@ export default { } if (this.action && !hasGroups && !fromSearch) { - this.showEmptyState(); + if (this.renderEmptyState) { + this.showEmptyState = true; + } else { + this.showLegacyEmptyState(); + } } }, }, @@ -251,7 +270,7 @@ export default { <gl-loading-icon v-if="isLoading" :label="s__('GroupsTree|Loading groups')" - size="md" + size="lg" class="loading-animation prepend-top-20" /> <groups-component @@ -262,6 +281,7 @@ export default { :page-info="pageInfo" :action="action" /> + <empty-state v-if="showEmptyState" /> <gl-modal modal-id="leave-group-modal" :visible="isModalVisible" diff --git a/app/assets/javascripts/groups/components/empty_state.vue b/app/assets/javascripts/groups/components/empty_state.vue new file mode 100644 index 00000000000..4219b52737d --- /dev/null +++ b/app/assets/javascripts/groups/components/empty_state.vue @@ -0,0 +1,91 @@ +<script> +import { GlLink, GlEmptyState } from '@gitlab/ui'; + +import { s__ } from '~/locale'; + +export default { + components: { GlLink, GlEmptyState }, + i18n: { + withLinks: { + subgroup: { + title: s__('GroupsEmptyState|Create new subgroup'), + description: s__( + 'GroupsEmptyState|Groups are the best way to manage multiple projects and members.', + ), + }, + project: { + title: s__('GroupsEmptyState|Create new project'), + description: s__( + 'GroupsEmptyState|Projects are where you can store your code, access issues, wiki, and other features of Gitlab.', + ), + }, + }, + withoutLinks: { + title: s__('GroupsEmptyState|No subgroups or projects.'), + description: s__( + 'GroupsEmptyState|You do not have necessary permissions to create a subgroup or project in this group. Please contact an owner of this group to create a new subgroup or project.', + ), + }, + }, + linkClasses: [ + 'gl-border', + 'gl-text-decoration-none!', + 'gl-rounded-base', + 'gl-p-7', + 'gl-display-flex', + 'gl-h-full', + 'gl-align-items-center', + 'gl-text-purple-600', + 'gl-hover-bg-gray-50', + ], + inject: [ + 'newSubgroupPath', + 'newProjectPath', + 'newSubgroupIllustration', + 'newProjectIllustration', + 'emptySubgroupIllustration', + 'canCreateSubgroups', + 'canCreateProjects', + ], +}; +</script> + +<template> + <div v-if="canCreateSubgroups || canCreateProjects" class="gl-mt-5"> + <div class="gl-display-flex gl-mx-n3 gl-my-n3 gl-flex-wrap"> + <div v-if="canCreateSubgroups" class="gl-p-3 gl-w-full gl-sm-w-half"> + <gl-link :href="newSubgroupPath" :class="$options.linkClasses"> + <div class="svg-content gl-w-15 gl-flex-shrink-0 gl-mr-5"> + <img :src="newSubgroupIllustration" :alt="$options.i18n.withLinks.subgroup.title" /> + </div> + <div> + <h4 class="gl-reset-color">{{ $options.i18n.withLinks.subgroup.title }}</h4> + <p class="gl-text-body"> + {{ $options.i18n.withLinks.subgroup.description }} + </p> + </div> + </gl-link> + </div> + <div v-if="canCreateProjects" class="gl-p-3 gl-w-full gl-sm-w-half"> + <gl-link :href="newProjectPath" :class="$options.linkClasses"> + <div class="svg-content gl-w-13 gl-flex-shrink-0 gl-mr-5"> + <img :src="newProjectIllustration" :alt="$options.i18n.withLinks.project.title" /> + </div> + <div> + <h4 class="gl-reset-color">{{ $options.i18n.withLinks.project.title }}</h4> + <p class="gl-text-body"> + {{ $options.i18n.withLinks.project.description }} + </p> + </div> + </gl-link> + </div> + </div> + </div> + <gl-empty-state + v-else + class="gl-mt-5" + :title="$options.i18n.withoutLinks.title" + :svg-path="emptySubgroupIllustration" + :description="$options.i18n.withoutLinks.description" + /> +</template> diff --git a/app/assets/javascripts/groups/components/group_folder.vue b/app/assets/javascripts/groups/components/group_folder.vue index 042d818338a..96162c32d52 100644 --- a/app/assets/javascripts/groups/components/group_folder.vue +++ b/app/assets/javascripts/groups/components/group_folder.vue @@ -39,7 +39,7 @@ export default { </script> <template> - <ul class="groups-list group-list-tree"> + <ul class="groups-list group-list-tree gl-display-flex gl-flex-direction-column gl-m-0"> <group-item v-for="(group, index) in groups" :key="index" diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue index 4f21f68fa65..2241d57f96f 100644 --- a/app/assets/javascripts/groups/components/group_item.vue +++ b/app/assets/javascripts/groups/components/group_item.vue @@ -157,7 +157,9 @@ export default { </a> <div class="group-text-container d-flex flex-fill align-items-center"> <div class="group-text flex-grow-1 flex-shrink-1"> - <div class="d-flex align-items-center flex-wrap title namespace-title gl-mr-3"> + <div + class="gl-display-flex gl-align-items-center gl-flex-wrap title namespace-title gl-font-weight-bold gl-mr-3" + > <a v-gl-tooltip.bottom data-testid="group-name" diff --git a/app/assets/javascripts/groups/components/group_name_and_path.vue b/app/assets/javascripts/groups/components/group_name_and_path.vue new file mode 100644 index 00000000000..f9bd8701199 --- /dev/null +++ b/app/assets/javascripts/groups/components/group_name_and_path.vue @@ -0,0 +1,279 @@ +<script> +import { + GlFormGroup, + GlFormInput, + GlFormInputGroup, + GlInputGroupText, + GlLink, + GlAlert, +} from '@gitlab/ui'; +import { debounce } from 'lodash'; + +import { s__, __ } from '~/locale'; +import { getGroupPathAvailability } from '~/rest_api'; +import { createAlert } from '~/flash'; +import { slugify } from '~/lib/utils/text_utility'; +import axios from '~/lib/utils/axios_utils'; +import { helpPagePath } from '~/helpers/help_page_helper'; + +const DEBOUNCE_DURATION = 1000; + +export default { + i18n: { + inputs: { + name: { + label: s__('Groups|Group name'), + placeholder: __('My awesome group'), + description: s__( + 'Groups|Must start with letter, digit, emoji, or underscore. Can also contain periods, dashes, spaces, and parentheses.', + ), + invalidFeedback: s__('Groups|Enter a descriptive name for your group.'), + }, + path: { + label: s__('Groups|Group URL'), + placeholder: __('my-awesome-group'), + invalidFeedbackInvalidPattern: s__( + 'GroupSettings|Choose a group path that does not start with a dash or end with a period. It can also contain alphanumeric characters and underscores.', + ), + invalidFeedbackPathUnavailable: s__( + 'Groups|Group path is unavailable. Path has been replaced with a suggested available path.', + ), + validFeedback: s__('Groups|Group path is available.'), + }, + groupId: { + label: s__('Groups|Group ID'), + }, + }, + apiLoadingMessage: s__('Groups|Checking group URL availability...'), + apiErrorMessage: __( + 'An error occurred while checking group path. Please refresh and try again.', + ), + changingUrlWarningMessage: s__('Groups|Changing group URL can have unintended side effects.'), + learnMore: s__('Groups|Learn more'), + }, + nameInputSize: { md: 'lg' }, + changingGroupPathHelpPagePath: helpPagePath('user/group/index', { + anchor: 'change-a-groups-path', + }), + mattermostDataBindName: 'create_chat_team', + components: { + GlFormGroup, + GlFormInput, + GlFormInputGroup, + GlInputGroupText, + GlLink, + GlAlert, + }, + inject: ['fields', 'basePath', 'mattermostEnabled'], + data() { + return { + name: this.fields.name.value, + path: this.fields.path.value, + hasPathBeenManuallySet: false, + apiSuggestedPath: '', + apiLoading: false, + nameFeedbackState: null, + pathFeedbackState: null, + pathInvalidFeedback: null, + activeApiRequestAbortController: null, + }; + }, + computed: { + computedPath() { + return this.apiSuggestedPath || this.path; + }, + pathDescription() { + return this.apiLoading ? this.$options.i18n.apiLoadingMessage : ''; + }, + isEditingGroup() { + return this.fields.groupId.value !== ''; + }, + }, + watch: { + name: [ + function updatePath(newName) { + if (this.isEditingGroup || this.hasPathBeenManuallySet) return; + + this.nameFeedbackState = null; + this.pathFeedbackState = null; + this.apiSuggestedPath = ''; + this.path = slugify(newName); + }, + debounce(async function updatePathWithSuggestions() { + if (this.isEditingGroup || this.hasPathBeenManuallySet) return; + + try { + const { suggests } = await this.checkPathAvailability(); + + const [suggestedPath] = suggests; + + this.apiSuggestedPath = suggestedPath; + } catch (error) { + // Do nothing, error handled in `checkPathAvailability` + } + }, DEBOUNCE_DURATION), + ], + }, + methods: { + async checkPathAvailability() { + if (!this.path) return Promise.reject(); + + this.apiLoading = true; + + if (this.activeApiRequestAbortController !== null) { + this.activeApiRequestAbortController.abort(); + } + + this.activeApiRequestAbortController = new AbortController(); + + try { + const { + data: { exists, suggests }, + } = await getGroupPathAvailability(this.path, this.fields.parentId?.value, { + signal: this.activeApiRequestAbortController.signal, + }); + + if (exists) { + if (suggests.length) { + return Promise.resolve({ exists, suggests }); + } + + createAlert({ + message: this.$options.i18n.apiErrorMessage, + }); + + return Promise.reject(); + } + + return Promise.resolve({ exists, suggests }); + } catch (error) { + if (!axios.isCancel(error)) { + createAlert({ + message: this.$options.i18n.apiErrorMessage, + }); + } + + return Promise.reject(); + } finally { + this.apiLoading = false; + } + }, + handlePathInput(value) { + this.pathFeedbackState = null; + this.apiSuggestedPath = ''; + this.hasPathBeenManuallySet = true; + this.path = value; + this.debouncedValidatePath(); + }, + debouncedValidatePath: debounce(async function validatePath() { + if (this.isEditingGroup && this.path === this.fields.path.value) return; + + try { + const { + exists, + suggests: [suggestedPath], + } = await this.checkPathAvailability(); + + if (exists) { + this.apiSuggestedPath = suggestedPath; + this.pathInvalidFeedback = this.$options.i18n.inputs.path.invalidFeedbackPathUnavailable; + this.pathFeedbackState = false; + } else { + this.pathFeedbackState = true; + } + } catch (error) { + // Do nothing, error handled in `checkPathAvailability` + } + }, DEBOUNCE_DURATION), + handleInvalidName(event) { + event.preventDefault(); + + this.nameFeedbackState = false; + }, + handleInvalidPath(event) { + event.preventDefault(); + + this.pathInvalidFeedback = this.$options.i18n.inputs.path.invalidFeedbackInvalidPattern; + this.pathFeedbackState = false; + }, + }, +}; +</script> + +<template> + <div> + <input + :id="fields.parentId.id" + type="hidden" + :name="fields.parentId.name" + :value="fields.parentId.value" + /> + <gl-form-group + :label="$options.i18n.inputs.name.label" + :description="$options.i18n.inputs.name.description" + :label-for="fields.name.id" + :invalid-feedback="$options.i18n.inputs.name.invalidFeedback" + :state="nameFeedbackState" + > + <gl-form-input + :id="fields.name.id" + v-model="name" + class="gl-field-error-ignore" + required + :name="fields.name.name" + :placeholder="$options.i18n.inputs.name.placeholder" + data-qa-selector="group_name_field" + :size="$options.nameInputSize" + :state="nameFeedbackState" + @invalid="handleInvalidName" + /> + </gl-form-group> + <gl-form-group + :label="$options.i18n.inputs.path.label" + :label-for="fields.path.id" + :description="pathDescription" + :state="pathFeedbackState" + :valid-feedback="$options.i18n.inputs.path.validFeedback" + :invalid-feedback="pathInvalidFeedback" + > + <gl-form-input-group> + <template #prepend> + <gl-input-group-text class="group-root-path">{{ basePath }}</gl-input-group-text> + </template> + <gl-form-input + :id="fields.path.id" + class="gl-field-error-ignore" + :name="fields.path.name" + :value="computedPath" + :placeholder="$options.i18n.inputs.path.placeholder" + :maxlength="fields.path.maxLength" + :pattern="fields.path.pattern" + :state="pathFeedbackState" + :size="$options.nameInputSize" + required + data-qa-selector="group_path_field" + :data-bind-in="mattermostEnabled ? $options.mattermostDataBindName : null" + @input="handlePathInput" + @invalid="handleInvalidPath" + /> + </gl-form-input-group> + </gl-form-group> + <template v-if="isEditingGroup"> + <gl-alert class="gl-mb-5" :dismissible="false" variant="warning"> + {{ $options.i18n.changingUrlWarningMessage }} + <gl-link :href="$options.changingGroupPathHelpPagePath" + >{{ $options.i18n.learnMore }} + </gl-link> + </gl-alert> + <gl-form-group :label="$options.i18n.inputs.groupId.label" :label-for="fields.groupId.id"> + <gl-form-input + :id="fields.groupId.id" + :value="fields.groupId.value" + :name="fields.groupId.name" + size="sm" + readonly + /> + </gl-form-group> + </template> + </div> +</template> diff --git a/app/assets/javascripts/groups/components/groups.vue b/app/assets/javascripts/groups/components/groups.vue index 313c8dadd1f..5706df0dd1b 100644 --- a/app/assets/javascripts/groups/components/groups.vue +++ b/app/assets/javascripts/groups/components/groups.vue @@ -43,7 +43,12 @@ export default { <template> <div class="groups-list-tree-container qa-groups-list-tree-container"> - <div v-if="searchEmpty" class="has-no-search-results">{{ searchEmptyMessage }}</div> + <div + v-if="searchEmpty" + class="has-no-search-results gl-font-style-italic gl-text-center gl-text-gray-600 gl-p-5" + > + {{ searchEmptyMessage }} + </div> <template v-else> <group-folder :groups="groups" :action="action" /> <pagination-links diff --git a/app/assets/javascripts/groups/components/item_caret.vue b/app/assets/javascripts/groups/components/item_caret.vue index a51edd385dd..ef82e6d693a 100644 --- a/app/assets/javascripts/groups/components/item_caret.vue +++ b/app/assets/javascripts/groups/components/item_caret.vue @@ -14,14 +14,14 @@ export default { }, computed: { iconClass() { - return this.isGroupOpen ? 'angle-down' : 'angle-right'; + return this.isGroupOpen ? 'chevron-down' : 'chevron-right'; }, }, }; </script> <template> - <span class="folder-caret gl-mr-2"> + <span class="folder-caret gl-display-inline-block gl-text-secondary gl-w-5 gl-mr-2"> <gl-icon :size="12" :name="iconClass" /> </span> </template> diff --git a/app/assets/javascripts/groups/components/item_type_icon.vue b/app/assets/javascripts/groups/components/item_type_icon.vue index 7821e604700..da4173993c5 100644 --- a/app/assets/javascripts/groups/components/item_type_icon.vue +++ b/app/assets/javascripts/groups/components/item_type_icon.vue @@ -24,5 +24,7 @@ export default { </script> <template> - <span class="item-type-icon"> <gl-icon :name="iconClass" /> </span> + <span class="item-type-icon gl-display-inline-block gl-text-secondary"> + <gl-icon :name="iconClass" /> + </span> </template> diff --git a/app/assets/javascripts/groups/create_edit_form.js b/app/assets/javascripts/groups/create_edit_form.js new file mode 100644 index 00000000000..8ca0e6077e9 --- /dev/null +++ b/app/assets/javascripts/groups/create_edit_form.js @@ -0,0 +1,29 @@ +import Vue from 'vue'; +import { parseRailsFormFields } from '~/lib/utils/forms'; +import { parseBoolean } from '~/lib/utils/common_utils'; +import GroupNameAndPath from './components/group_name_and_path.vue'; + +export const initGroupNameAndPath = () => { + const elements = document.querySelectorAll('.js-group-name-and-path'); + + if (!elements.length) { + return; + } + + elements.forEach((element) => { + const fields = parseRailsFormFields(element); + const { basePath, mattermostEnabled } = element.dataset; + + return new Vue({ + el: element, + provide: { + fields, + basePath, + mattermostEnabled: parseBoolean(mattermostEnabled), + }, + render(h) { + return h(GroupNameAndPath); + }, + }); + }); +}; diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js index c34810954a3..dfcee80aec7 100644 --- a/app/assets/javascripts/groups/index.js +++ b/app/assets/javascripts/groups/index.js @@ -44,6 +44,31 @@ export default (containerId = 'js-groups-tree', endpoint, action = '') => { components: { groupsApp, }, + provide() { + const { + dataset: { + newSubgroupPath, + newProjectPath, + newSubgroupIllustration, + newProjectIllustration, + emptySubgroupIllustration, + renderEmptyState, + canCreateSubgroups, + canCreateProjects, + }, + } = this.$options.el; + + return { + newSubgroupPath, + newProjectPath, + newSubgroupIllustration, + newProjectIllustration, + emptySubgroupIllustration, + renderEmptyState: parseBoolean(renderEmptyState), + canCreateSubgroups: parseBoolean(canCreateSubgroups), + canCreateProjects: parseBoolean(canCreateProjects), + }; + }, data() { const { dataset } = dataEl || this.$options.el; const hideProjects = parseBoolean(dataset.hideProjects); diff --git a/app/assets/javascripts/groups/settings/api/access_dropdown_api.js b/app/assets/javascripts/groups/settings/api/access_dropdown_api.js new file mode 100644 index 00000000000..5560d10d179 --- /dev/null +++ b/app/assets/javascripts/groups/settings/api/access_dropdown_api.js @@ -0,0 +1,16 @@ +import axios from '~/lib/utils/axios_utils'; +import { joinPaths } from '~/lib/utils/url_utility'; + +const GROUP_SUBGROUPS_PATH = '/-/autocomplete/group_subgroups.json'; + +const buildUrl = (urlRoot, url) => { + return joinPaths(urlRoot, url); +}; + +export const getSubGroups = () => { + return axios.get(buildUrl(gon.relative_url_root || '', GROUP_SUBGROUPS_PATH), { + params: { + group_id: gon.current_group_id, + }, + }); +}; diff --git a/app/assets/javascripts/groups/settings/components/access_dropdown.vue b/app/assets/javascripts/groups/settings/components/access_dropdown.vue new file mode 100644 index 00000000000..b8a269de98a --- /dev/null +++ b/app/assets/javascripts/groups/settings/components/access_dropdown.vue @@ -0,0 +1,194 @@ +<script> +import { GlDropdown, GlDropdownItem, GlDropdownSectionHeader, GlSearchBoxByType } from '@gitlab/ui'; +import { debounce, intersectionWith, groupBy, differenceBy, intersectionBy } from 'lodash'; +import createFlash from '~/flash'; +import { __, s__, n__ } from '~/locale'; +import { getSubGroups } from '../api/access_dropdown_api'; +import { LEVEL_TYPES } from '../constants'; + +export const i18n = { + selectUsers: s__('ProtectedEnvironment|Select groups'), + groupsSectionHeader: s__('AccessDropdown|Groups'), +}; + +export default { + i18n, + components: { + GlDropdown, + GlDropdownItem, + GlDropdownSectionHeader, + GlSearchBoxByType, + }, + props: { + hasLicense: { + required: false, + type: Boolean, + default: true, + }, + label: { + type: String, + required: false, + default: i18n.selectUsers, + }, + disabled: { + type: Boolean, + required: false, + default: false, + }, + preselectedItems: { + type: Array, + required: false, + default: () => [], + }, + }, + data() { + return { + loading: false, + initialLoading: false, + query: '', + groups: [], + selected: { + [LEVEL_TYPES.GROUP]: [], + }, + }; + }, + computed: { + preselected() { + return groupBy(this.preselectedItems, 'type'); + }, + toggleLabel() { + const counts = Object.fromEntries( + Object.entries(this.selected).map(([key, value]) => [key, value.length]), + ); + + const labelPieces = []; + + if (counts[LEVEL_TYPES.GROUP] > 0) { + labelPieces.push(n__('1 group', '%d groups', counts[LEVEL_TYPES.GROUP])); + } + + return labelPieces.join(', ') || this.label; + }, + toggleClass() { + return this.toggleLabel === this.label ? 'gl-text-gray-500!' : ''; + }, + selection() { + return [...this.getDataForSave(LEVEL_TYPES.GROUP, 'group_id')]; + }, + }, + watch: { + query: debounce(function debouncedSearch() { + return this.getData(); + }, 500), + }, + created() { + this.getData({ initial: true }); + }, + methods: { + focusInput() { + this.$refs.search.focusInput(); + }, + getData({ initial = false } = {}) { + this.initialLoading = initial; + this.loading = true; + + if (this.hasLicense) { + Promise.all([this.groups.length ? Promise.resolve({ data: this.groups }) : getSubGroups()]) + .then(([groupsResponse]) => { + this.consolidateData(groupsResponse.data); + this.setSelected({ initial }); + }) + .catch(() => createFlash({ message: __('Failed to load groups.') })) + .finally(() => { + this.initialLoading = false; + this.loading = false; + }); + } + }, + consolidateData(groupsResponse = []) { + if (this.hasLicense) { + this.groups = groupsResponse.map((group) => ({ ...group, type: LEVEL_TYPES.GROUP })); + } + }, + setSelected({ initial } = {}) { + if (initial) { + const selectedGroups = intersectionWith( + this.groups, + this.preselectedItems, + (group, selected) => { + return selected.type === LEVEL_TYPES.GROUP && group.id === selected.group_id; + }, + ); + this.selected[LEVEL_TYPES.GROUP] = selectedGroups; + } + }, + getDataForSave(accessType, key) { + const selected = this.selected[accessType].map(({ id }) => ({ [key]: id })); + const preselected = this.preselected[accessType]; + const added = differenceBy(selected, preselected, key); + const preserved = intersectionBy(preselected, selected, key).map(({ id, [key]: keyId }) => ({ + id, + [key]: keyId, + })); + const removed = differenceBy(preselected, selected, key).map(({ id, [key]: keyId }) => ({ + id, + [key]: keyId, + _destroy: true, + })); + return [...added, ...removed, ...preserved]; + }, + onItemClick(item) { + this.toggleSelection(this.selected[item.type], item); + this.emitUpdate(); + }, + toggleSelection(arr, item) { + const itemIndex = arr.findIndex(({ id }) => id === item.id); + if (itemIndex > -1) { + arr.splice(itemIndex, 1); + } else arr.push(item); + }, + isSelected(item) { + return this.selected[item.type].some((selected) => selected.id === item.id); + }, + emitUpdate() { + this.$emit('select', this.selection); + }, + onHide() { + this.$emit('hidden', this.selection); + }, + }, +}; +</script> + +<template> + <gl-dropdown + :disabled="disabled || initialLoading" + :text="toggleLabel" + class="gl-min-w-20" + :toggle-class="toggleClass" + aria-labelledby="allowed-users-label" + @shown="focusInput" + @hidden="onHide" + > + <template #header> + <gl-search-box-by-type ref="search" v-model.trim="query" :is-loading="loading" /> + </template> + <template v-if="groups.length"> + <gl-dropdown-section-header>{{ + $options.i18n.groupsSectionHeader + }}</gl-dropdown-section-header> + <gl-dropdown-item + v-for="group in groups" + :key="`${group.id}${group.name}`" + fingerprint + data-testid="group-dropdown-item" + :avatar-url="group.avatar_url" + is-check-item + :is-checked="isSelected(group)" + @click.native.capture.stop="onItemClick(group)" + > + {{ group.name }} + </gl-dropdown-item> + </template> + </gl-dropdown> +</template> diff --git a/app/assets/javascripts/groups/settings/constants.js b/app/assets/javascripts/groups/settings/constants.js new file mode 100644 index 00000000000..c91c2a20529 --- /dev/null +++ b/app/assets/javascripts/groups/settings/constants.js @@ -0,0 +1,3 @@ +export const LEVEL_TYPES = { + GROUP: 'group', +}; diff --git a/app/assets/javascripts/groups/settings/init_access_dropdown.js b/app/assets/javascripts/groups/settings/init_access_dropdown.js new file mode 100644 index 00000000000..24419280fc0 --- /dev/null +++ b/app/assets/javascripts/groups/settings/init_access_dropdown.js @@ -0,0 +1,36 @@ +import * as Sentry from '@sentry/browser'; +import Vue from 'vue'; +import AccessDropdown from './components/access_dropdown.vue'; + +export const initAccessDropdown = (el) => { + if (!el) { + return false; + } + + const { label, disabled, preselectedItems } = el.dataset; + let preselected = []; + try { + preselected = JSON.parse(preselectedItems); + } catch (e) { + Sentry.captureException(e); + } + + return new Vue({ + el, + render(createElement) { + const vm = this; + return createElement(AccessDropdown, { + props: { + preselectedItems: preselected, + label, + disabled, + }, + on: { + select(selected) { + vm.$emit('select', selected); + }, + }, + }); + }, + }); +}; diff --git a/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue b/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue index 75f02af28c4..7112c43bab8 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue @@ -18,6 +18,20 @@ export default { required: true, }, }, + modal: { + actionPrimary: { + text: __('Discard changes'), + attributes: { + variant: 'danger', + }, + }, + actionCancel: { + text: __('Cancel'), + attributes: { + variant: 'default', + }, + }, + }, computed: { discardModalId() { return `discard-file-${this.activeFile.path}`; @@ -43,9 +57,9 @@ export default { </script> <template> - <div class="d-flex ide-commit-editor-header align-items-center"> - <file-icon :file-name="activeFile.name" :size="16" class="mr-2" /> - <strong class="mr-2"> + <div class="gl-display-flex ide-commit-editor-header gl-align-items-center"> + <file-icon :file-name="activeFile.name" :size="16" class="gl-mr-3" /> + <strong class="gl-mr-3"> <template v-if="activeFile.prevPath && activeFile.prevPath !== activeFile.path"> {{ activeFile.prevPath }} → </template> @@ -66,12 +80,11 @@ export default { </div> <gl-modal ref="discardModal" - ok-variant="danger" - cancel-variant="light" - :ok-title="__('Discard changes')" :modal-id="discardModalId" :title="discardModalTitle" - @ok="discardChanges(activeFile.path)" + :action-primary="$options.modal.actionPrimary" + :action-cancel="$options.modal.actionCancel" + @primary="discardChanges(activeFile.path)" > {{ __("You will lose all changes you've made to this file. This action cannot be undone.") }} </gl-modal> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue index cb906374fe1..05a254d3fbf 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue @@ -154,7 +154,7 @@ export default { <gl-button :disabled="commitButtonDisabled" category="primary" - variant="info" + variant="confirm" block class="qa-begin-commit-button" data-testid="begin-commit-button" diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue index 829686ef051..91d78a7c28c 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue @@ -38,6 +38,20 @@ export default { default: __('No changes'), }, }, + modal: { + actionPrimary: { + text: __('Discard all changes'), + attributes: { + variant: 'danger', + }, + }, + actionCancel: { + text: __('Cancel'), + attributes: { + variant: 'default', + }, + }, + }, computed: { titleText() { if (!this.title) return __('Changes'); @@ -66,10 +80,10 @@ export default { <template> <div class="ide-commit-list-container"> - <header class="multi-file-commit-panel-header d-flex mb-0"> - <div class="d-flex align-items-center flex-fill"> + <header class="multi-file-commit-panel-header gl-display-flex gl-mb-0"> + <div class="gl-display-flex gl-align-items-center flex-fill"> <strong> {{ titleText }} </strong> - <div class="d-flex ml-auto"> + <div class="gl-display-flex gl-ml-auto"> <gl-button v-if="!stagedList" v-gl-tooltip @@ -100,17 +114,17 @@ export default { /> </li> </ul> - <p v-else class="multi-file-commit-list form-text text-muted text-center"> + <p v-else class="multi-file-commit-list form-text gl-text-gray-600 gl-text-center"> {{ emptyStateText }} </p> <gl-modal v-if="!stagedList" ref="discardAllModal" - ok-variant="danger" modal-id="discard-all-changes" - :ok-title="__('Discard all changes')" :title="__('Discard all changes?')" - @ok="unstageAndDiscardAllChanges" + :action-primary="$options.modal.actionPrimary" + :action-cancel="$options.modal.actionCancel" + @primary="unstageAndDiscardAllChanges" > {{ $options.discardModalText }} </gl-modal> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue b/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue index 43bf2e1a90c..0a8fec49aac 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue @@ -1,5 +1,5 @@ <script> -import { GlTooltipDirective } from '@gitlab/ui'; +import { GlTooltipDirective, GlFormCheckbox } from '@gitlab/ui'; import { createNamespacedHelpers } from 'vuex'; import { s__ } from '~/locale'; @@ -8,19 +8,20 @@ const { mapActions: mapCommitActions, mapGetters: mapCommitGetters } = createNam ); export default { + components: { GlFormCheckbox }, directives: { GlTooltip: GlTooltipDirective, }, + i18n: { + newMrText: s__('IDE|Start a new merge request'), + tooltipText: s__( + 'IDE|This option is disabled because you are not allowed to create merge requests in this project.', + ), + }, computed: { ...mapCommitGetters(['shouldHideNewMrOption', 'shouldDisableNewMrOption', 'shouldCreateMR']), tooltipText() { - if (this.shouldDisableNewMrOption) { - return s__( - 'IDE|This option is disabled because you are not allowed to create merge requests in this project.', - ); - } - - return ''; + return this.shouldDisableNewMrOption ? this.$options.i18n.tooltipText : null; }, }, methods: { @@ -30,22 +31,23 @@ export default { </script> <template> - <fieldset v-if="!shouldHideNewMrOption"> - <hr class="my-2" /> - <label - v-gl-tooltip="tooltipText" - class="mb-0 js-ide-commit-new-mr" - :class="{ 'is-disabled': shouldDisableNewMrOption }" + <fieldset + v-if="!shouldHideNewMrOption" + v-gl-tooltip="tooltipText" + data-testid="new-merge-request-fieldset" + class="js-ide-commit-new-mr" + :class="{ 'is-disabled': shouldDisableNewMrOption }" + > + <hr class="gl-mt-3 gl-mb-4" /> + + <gl-form-checkbox + :disabled="shouldDisableNewMrOption" + :checked="shouldCreateMR" + @change="toggleShouldCreateMR" > - <input - :disabled="shouldDisableNewMrOption" - :checked="shouldCreateMR" - type="checkbox" - @change="toggleShouldCreateMR" - /> - <span class="gl-ml-3 ide-option-label"> - {{ __('Start a new merge request') }} + <span class="ide-option-label"> + {{ $options.i18n.newMrText }} </span> - </label> + </gl-form-checkbox> </fieldset> </template> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue index 870355e884e..bd5d28dbb56 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue @@ -1,8 +1,20 @@ <script> -import { GlTooltipDirective } from '@gitlab/ui'; +import { + GlTooltipDirective, + GlFormRadio, + GlFormRadioGroup, + GlFormGroup, + GlFormInput, +} from '@gitlab/ui'; import { mapActions, mapState, mapGetters } from 'vuex'; export default { + components: { + GlFormRadio, + GlFormRadioGroup, + GlFormGroup, + GlFormInput, + }, directives: { GlTooltip: GlTooltipDirective, }, @@ -51,35 +63,42 @@ export default { </script> <template> - <fieldset> - <label + <fieldset class="gl-mb-2"> + <gl-form-radio-group v-gl-tooltip="tooltipTitle" + :checked="commitAction" :class="{ 'is-disabled': disabled, }" > - <input + <gl-form-radio :value="value" - :checked="commitAction === value" :disabled="disabled" - type="radio" name="commit-action" data-qa-selector="commit_type_radio" - @change="updateCommitAction($event.target.value)" - /> - <span class="gl-ml-3"> - <span v-if="label" class="ide-option-label"> {{ label }} </span> <slot v-else></slot> - </span> - </label> - <div v-if="commitAction === value && showInput" class="ide-commit-new-branch"> - <input + @change="updateCommitAction(value)" + > + <span v-if="label" class="ide-option-label"> + {{ label }} + </span> + <slot v-else></slot> + </gl-form-radio> + </gl-form-radio-group> + + <gl-form-group + v-if="commitAction === value && showInput" + :label="placeholderBranchName" + :label-sr-only="true" + class="gl-ml-6 gl-mb-0" + > + <gl-form-input :placeholder="placeholderBranchName" :value="newBranchName" + :disabled="disabled" data-testid="ide-new-branch-name" - type="text" - class="form-control monospace" - @input="updateBranchName($event.target.value)" + class="gl-font-monospace" + @input="updateBranchName($event)" /> - </div> + </gl-form-group> </fieldset> </template> diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue index 45bbf93ebc9..d589f56dd7c 100644 --- a/app/assets/javascripts/ide/components/ide.vue +++ b/app/assets/javascripts/ide/components/ide.vue @@ -176,7 +176,7 @@ export default { {{ __('New file') }} </gl-button> </template> - <gl-loading-icon v-else-if="!currentTree || currentTree.loading" size="md" /> + <gl-loading-icon v-else-if="!currentTree || currentTree.loading" size="lg" /> <p v-else> {{ __( diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue index c3d6494692a..f32d35bf774 100644 --- a/app/assets/javascripts/ide/components/ide_side_bar.vue +++ b/app/assets/javascripts/ide/components/ide_side_bar.vue @@ -1,5 +1,5 @@ <script> -import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; +import { GlSkeletonLoader } from '@gitlab/ui'; import { mapState, mapGetters } from 'vuex'; import { SIDEBAR_INIT_WIDTH, leftSidebarViews } from '../constants'; import ActivityBar from './activity_bar.vue'; @@ -10,7 +10,7 @@ import ResizablePanel from './resizable_panel.vue'; export default { components: { - GlSkeletonLoading, + GlSkeletonLoader, ResizablePanel, ActivityBar, IdeTree, @@ -38,7 +38,7 @@ export default { <template v-if="loading"> <div class="multi-file-commit-panel-inner" data-testid="ide-side-bar-inner"> <div v-for="n in 3" :key="n" class="multi-file-loading-container"> - <gl-skeleton-loading /> + <gl-skeleton-loader /> </div> </div> </template> diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue index 93ff7e8566f..e0b7ac9b1e1 100644 --- a/app/assets/javascripts/ide/components/ide_status_bar.vue +++ b/app/assets/javascripts/ide/components/ide_status_bar.vue @@ -32,8 +32,11 @@ export default { ...mapState('pipelines', ['latestPipeline']), }, watch: { - lastCommit() { - this.initPipelinePolling(); + lastCommit: { + handler() { + this.initPipelinePolling(); + }, + immediate: true, }, }, mounted() { diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue index 0fc7337ad26..c9bf84be6ac 100644 --- a/app/assets/javascripts/ide/components/ide_tree_list.vue +++ b/app/assets/javascripts/ide/components/ide_tree_list.vue @@ -1,5 +1,5 @@ <script> -import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; +import { GlSkeletonLoader } from '@gitlab/ui'; import { mapActions, mapGetters, mapState } from 'vuex'; import { WEBIDE_MARK_FILE_CLICKED } from '~/performance/constants'; import { performanceMarkAndMeasure } from '~/performance/utils'; @@ -10,7 +10,7 @@ import NavDropdown from './nav_dropdown.vue'; export default { name: 'IdeTreeList', components: { - GlSkeletonLoading, + GlSkeletonLoader, NavDropdown, FileTree, }, @@ -55,7 +55,7 @@ export default { <div class="ide-file-list qa-file-list"> <template v-if="showLoading"> <div v-for="n in 3" :key="n" class="multi-file-loading-container"> - <gl-skeleton-loading /> + <gl-skeleton-loader /> </div> </template> <template v-else> diff --git a/app/assets/javascripts/ide/components/jobs/detail/description.vue b/app/assets/javascripts/ide/components/jobs/detail/description.vue index 8fd1973267c..c184e25f67f 100644 --- a/app/assets/javascripts/ide/components/jobs/detail/description.vue +++ b/app/assets/javascripts/ide/components/jobs/detail/description.vue @@ -23,7 +23,7 @@ export default { <template> <div class="d-flex align-items-center"> - <ci-icon :status="job.status" :borderless="true" :size="24" class="d-flex" /> + <ci-icon is-borderless :status="job.status" :size="24" class="d-flex" /> <span class="gl-ml-3"> {{ job.name }} <a diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue index 7797850f097..2284ffb8480 100644 --- a/app/assets/javascripts/ide/components/jobs/stage.vue +++ b/app/assets/javascripts/ide/components/jobs/stage.vue @@ -27,7 +27,7 @@ export default { }, computed: { collapseIcon() { - return this.stage.isCollapsed ? 'angle-left' : 'angle-down'; + return this.stage.isCollapsed ? 'chevron-lg-left' : 'chevron-lg-down'; }, showLoadingIcon() { return this.stage.isLoading && !this.stage.jobs.length; diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue index f14d86114b8..d71ac766933 100644 --- a/app/assets/javascripts/ide/components/repo_editor.vue +++ b/app/assets/javascripts/ide/components/repo_editor.vue @@ -65,6 +65,8 @@ export default { modelManager: new ModelManager(), isEditorLoading: true, unwatchCiYaml: null, + SELivepreviewExtension: null, + MarkdownLivePreview: null, }; }, computed: { @@ -192,23 +194,6 @@ export default { this.createEditorInstance(); } }, - panelResizing() { - if (!this.panelResizing) { - this.refreshEditorDimensions(); - } - }, - showTabs() { - this.$nextTick(() => this.refreshEditorDimensions()); - }, - rightPaneIsOpen() { - this.refreshEditorDimensions(); - }, - showEditor(val) { - if (val) { - // We need to wait for the editor to actually be rendered. - this.$nextTick(() => this.refreshEditorDimensions()); - } - }, showContentViewer(val) { if (!val) return; @@ -324,17 +309,33 @@ export default { }, ]); - if ( - this.fileType === MARKDOWN_FILE_TYPE && - this.editor?.getEditorType() === EDITOR_TYPE_CODE && - this.previewMarkdownPath - ) { + this.$nextTick(() => { + this.setupEditor(); + }); + } + }, + + setupEditor() { + if (!this.file || !this.editor || this.file.loading) return; + + const useLivePreviewExtension = () => { + this.SELivepreviewExtension = this.editor.use({ + definition: this.MarkdownLivePreview, + setupOptions: { previewMarkdownPath: this.previewMarkdownPath }, + }); + }; + if ( + this.fileType === MARKDOWN_FILE_TYPE && + this.editor?.getEditorType() === EDITOR_TYPE_CODE && + this.previewMarkdownPath + ) { + if (this.MarkdownLivePreview) { + useLivePreviewExtension(); + } else { import('~/editor/extensions/source_editor_markdown_livepreview_ext') - .then(({ EditorMarkdownPreviewExtension: MarkdownLivePreview }) => { - this.editor.use({ - definition: MarkdownLivePreview, - setupOptions: { previewMarkdownPath: this.previewMarkdownPath }, - }); + .then(({ EditorMarkdownPreviewExtension }) => { + this.MarkdownLivePreview = EditorMarkdownPreviewExtension; + useLivePreviewExtension(); }) .catch((e) => createFlash({ @@ -342,15 +343,9 @@ export default { }), ); } - - this.$nextTick(() => { - this.setupEditor(); - }); + } else if (this.SELivepreviewExtension) { + this.editor.unuse(this.SELivepreviewExtension); } - }, - - setupEditor() { - if (!this.file || !this.editor || this.file.loading) return; const head = this.getStagedFile(this.file.path); @@ -396,10 +391,6 @@ export default { fileLanguage: this.model.language, }); - this.$nextTick(() => { - this.editor.updateDimensions(); - }); - this.$emit('editorSetup'); if (performance.getEntriesByName(WEBIDE_MARK_FILE_CLICKED).length) { eventHub.$emit(WEBIDE_MEASURE_FILE_AFTER_INTERACTION); @@ -415,11 +406,6 @@ export default { }); } }, - refreshEditorDimensions() { - if (this.showEditor && this.editor) { - this.editor.updateDimensions(); - } - }, fetchEditorconfigRules() { return getRulesWithTraversal(this.file.path, (path) => { const entry = this.entries[path]; diff --git a/app/assets/javascripts/ide/components/terminal/empty_state.vue b/app/assets/javascripts/ide/components/terminal/empty_state.vue index f4dd83b16c7..623ba719b28 100644 --- a/app/assets/javascripts/ide/components/terminal/empty_state.vue +++ b/app/assets/javascripts/ide/components/terminal/empty_state.vue @@ -55,7 +55,7 @@ export default { <gl-button :disabled="!isValid" category="primary" - variant="info" + variant="confirm" data-qa-selector="start_web_terminal_button" @click="onStart" > diff --git a/app/assets/javascripts/ide/components/terminal/session.vue b/app/assets/javascripts/ide/components/terminal/session.vue index 3a4128b6207..384e27844c6 100644 --- a/app/assets/javascripts/ide/components/terminal/session.vue +++ b/app/assets/javascripts/ide/components/terminal/session.vue @@ -16,7 +16,7 @@ export default { if (isEndingStatus(this.session.status)) { return { action: () => this.restartSession(), - variant: 'info', + variant: 'confirm', category: 'primary', text: __('Restart Terminal'), }; diff --git a/app/assets/javascripts/ide/lib/editor_options.js b/app/assets/javascripts/ide/lib/editor_options.js index 52da9942efe..525afcb2083 100644 --- a/app/assets/javascripts/ide/lib/editor_options.js +++ b/app/assets/javascripts/ide/lib/editor_options.js @@ -8,6 +8,7 @@ export const defaultEditorOptions = { }, wordWrap: 'on', glyphMargin: true, + automaticLayout: true, }; export const defaultDiffOptions = { diff --git a/app/assets/javascripts/ide/utils.js b/app/assets/javascripts/ide/utils.js index ec3630cc5eb..a7e6506b045 100644 --- a/app/assets/javascripts/ide/utils.js +++ b/app/assets/javascripts/ide/utils.js @@ -81,7 +81,7 @@ export function registerLanguages(def, ...defs) { languages.setLanguageConfiguration(languageId, def.conf); } -export function registerSchema(schema) { +export function registerSchema(schema, options = {}) { const defaults = [languages.json.jsonDefaults, languages.yaml.yamlDefaults]; defaults.forEach((d) => d.setDiagnosticsOptions({ @@ -90,6 +90,7 @@ export function registerSchema(schema) { hover: true, completion: true, schemas: [schema], + ...options, }), ); } diff --git a/app/assets/javascripts/image_diff/helpers/dom_helper.js b/app/assets/javascripts/image_diff/helpers/dom_helper.js index 3468a629f5a..180e927a3e7 100644 --- a/app/assets/javascripts/image_diff/helpers/dom_helper.js +++ b/app/assets/javascripts/image_diff/helpers/dom_helper.js @@ -6,7 +6,7 @@ export function setPositionDataAttribute(el, options) { const positionObject = { ...JSON.parse(position), x, y, width, height }; - el.setAttribute('data-position', JSON.stringify(positionObject)); + el.dataset.position = JSON.stringify(positionObject); } export function updateDiscussionAvatarBadgeNumber(discussionEl, newBadgeNumber) { diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue index ce401862cc1..6b96fa7c45c 100644 --- a/app/assets/javascripts/import_entities/import_groups/components/import_table.vue +++ b/app/assets/javascripts/import_entities/import_groups/components/import_table.vue @@ -15,9 +15,11 @@ import { debounce } from 'lodash'; import createFlash from '~/flash'; import { s__, __, n__, sprintf } from '~/locale'; import PaginationBar from '~/vue_shared/components/pagination_bar/pagination_bar.vue'; +import HelpPopover from '~/vue_shared/components/help_popover.vue'; import { getGroupPathAvailability } from '~/rest_api'; import axios from '~/lib/utils/axios_utils'; import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants'; +import { helpPagePath } from '~/helpers/help_page_helper'; import { STATUSES } from '../../constants'; import ImportStatusCell from '../../components/import_status.vue'; @@ -56,6 +58,7 @@ export default { ImportStatusCell, ImportActionsCell, PaginationBar, + HelpPopover, }, props: { @@ -190,9 +193,9 @@ export default { statusMessage() { return this.filter.length === 0 - ? s__('BulkImport|Showing %{start}-%{end} of %{total} from %{link}') + ? s__('BulkImport|Showing %{start}-%{end} of %{total} that you own from %{link}') : s__( - 'BulkImport|Showing %{start}-%{end} of %{total} matching filter "%{filter}" from %{link}', + 'BulkImport|Showing %{start}-%{end} of %{total} that you own matching filter "%{filter}" from %{link}', ); }, @@ -484,6 +487,9 @@ export default { gitlabLogo: window.gon.gitlab_logo, PAGE_SIZES, + permissionsHelpPath: helpPagePath('user/permissions', { anchor: 'group-members-permissions' }), + popoverOptions: { title: __('What is listed here?') }, + i18n, }; </script> @@ -533,8 +539,8 @@ export default { <div class="gl-py-5 gl-border-solid gl-border-gray-200 gl-border-0 gl-border-b-1 gl-display-flex" > - <span> - <gl-sprintf v-if="!$apollo.loading && hasGroups" :message="statusMessage"> + <span v-if="!$apollo.loading && hasGroups"> + <gl-sprintf :message="statusMessage"> <template #start> <strong>{{ paginationInfo.start }}</strong> </template> @@ -548,12 +554,26 @@ export default { <strong>{{ filter }}</strong> </template> <template #link> - <gl-link :href="sourceUrl" target="_blank"> - {{ sourceUrl }}<gl-icon name="external-link" class="vertical-align-middle" /> - </gl-link> + {{ sourceUrl }} </template> </gl-sprintf> + <help-popover :options="$options.popoverOptions"> + <gl-sprintf + :message=" + s__( + 'BulkImport|Only groups that you have the %{role} role for are listed as groups you can import.', + ) + " + > + <template #role> + <gl-link class="gl-font-sm" :href="$options.permissionsHelpPath" target="_blank">{{ + $options.i18n.OWNER + }}</gl-link> + </template> + </gl-sprintf> + </help-popover> </span> + <gl-search-box-by-click class="gl-ml-auto" :placeholder="s__('BulkImport|Filter by source group')" @@ -561,18 +581,26 @@ export default { @clear="filter = ''" /> </div> - <gl-loading-icon v-if="$apollo.loading" size="md" class="gl-mt-5" /> + <gl-loading-icon v-if="$apollo.loading" size="lg" class="gl-mt-5" /> <template v-else> <gl-empty-state v-if="hasEmptyFilter" :title="__('Sorry, your filter produced no results')" :description="__('To widen your search, change or remove filters above.')" /> - <gl-empty-state - v-else-if="!hasGroups" - :title="s__('BulkImport|You have no groups to import')" - :description="__('Check your source instance permissions.')" - /> + <gl-empty-state v-else-if="!hasGroups" :title="$options.i18n.NO_GROUPS_FOUND"> + <template #description> + <gl-sprintf + :message="__('You don\'t have the %{role} role for any groups in this instance.')" + > + <template #role> + <gl-link :href="$options.permissionsHelpPath" target="_blank">{{ + $options.i18n.OWNER + }}</gl-link> + </template> + </gl-sprintf> + </template> + </gl-empty-state> <template v-else> <div class="gl-bg-gray-10 gl-border-solid gl-border-gray-200 gl-border-0 gl-border-b-1 gl-px-4 gl-display-flex gl-align-items-center import-table-bar" diff --git a/app/assets/javascripts/import_entities/import_groups/constants.js b/app/assets/javascripts/import_entities/import_groups/constants.js index 32137308684..7e532dfec05 100644 --- a/app/assets/javascripts/import_entities/import_groups/constants.js +++ b/app/assets/javascripts/import_entities/import_groups/constants.js @@ -12,6 +12,9 @@ export const i18n = { ERROR_IMPORT: s__('BulkImport|Importing the group failed.'), ERROR_IMPORT_COMPLETED: s__('BulkImport|Import is finished. Pick another name for re-import'), + NO_GROUPS_FOUND: s__('BulkImport|No groups found'), + OWNER: __('Owner'), + features: { projectMigration: __('projects'), }, diff --git a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue index 0307607321e..848c7361601 100644 --- a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue +++ b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue @@ -181,7 +181,7 @@ export default { :key="pagePaginationStateKey" @appear="fetchRepos" /> - <gl-loading-icon v-if="isLoading" class="gl-mt-7" size="md" /> + <gl-loading-icon v-if="isLoading" class="gl-mt-7" size="lg" /> <div v-if="!isLoading && repositories.length === 0" class="gl-text-center"> <strong>{{ emptyStateText }}</strong> diff --git a/app/assets/javascripts/incidents/components/incidents_list.vue b/app/assets/javascripts/incidents/components/incidents_list.vue index 922e870caa7..dbd2225167a 100644 --- a/app/assets/javascripts/incidents/components/incidents_list.vue +++ b/app/assets/javascripts/incidents/components/incidents_list.vue @@ -144,7 +144,6 @@ export default { 'assigneeUsernameQuery', 'slaFeatureAvailable', 'canCreateIncident', - 'incidentEscalationsAvailable', ], apollo: { incidents: { @@ -238,7 +237,6 @@ export default { const isHidden = { published: !this.publishedAvailable, incidentSla: !this.slaFeatureAvailable, - escalationStatus: !this.incidentEscalationsAvailable, }; return this.$options.fields.filter(({ key }) => !isHidden[key]); @@ -421,7 +419,7 @@ export default { </div> </template> - <template v-if="incidentEscalationsAvailable" #cell(escalationStatus)="{ item }"> + <template #cell(escalationStatus)="{ item }"> <tooltip-on-truncate :title="getEscalationStatus(item.escalationStatus)" data-testid="incident-escalation-status" diff --git a/app/assets/javascripts/incidents/list.js b/app/assets/javascripts/incidents/list.js index c0f16a43d5c..1d40f1093a4 100644 --- a/app/assets/javascripts/incidents/list.js +++ b/app/assets/javascripts/incidents/list.js @@ -46,7 +46,6 @@ export default () => { assigneeUsernameQuery, slaFeatureAvailable: parseBoolean(slaFeatureAvailable), canCreateIncident: parseBoolean(canCreateIncident), - incidentEscalationsAvailable: parseBoolean(gon?.features?.incidentEscalations), }, apolloProvider, render(createElement) { diff --git a/app/assets/javascripts/incidents_settings/components/pagerduty_form.vue b/app/assets/javascripts/incidents_settings/components/pagerduty_form.vue index 866d2ff399e..e8c9aa53a7c 100644 --- a/app/assets/javascripts/incidents_settings/components/pagerduty_form.vue +++ b/app/assets/javascripts/incidents_settings/components/pagerduty_form.vue @@ -11,6 +11,7 @@ import { GlModal, GlModalDirective, } from '@gitlab/ui'; +import { __ } from '~/locale'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import { I18N_PAGERDUTY_SETTINGS_FORM, CONFIGURE_PAGERDUTY_WEBHOOK_DOCS_LINK } from '../constants'; @@ -42,6 +43,21 @@ export default { }; }, i18n: I18N_PAGERDUTY_SETTINGS_FORM, + modal: { + id: 'resetWebhookModal', + actionPrimary: { + text: I18N_PAGERDUTY_SETTINGS_FORM.webhookUrl.resetWebhookUrl, + attributes: { + variant: 'danger', + }, + }, + actionCancel: { + text: __('Cancel'), + attributes: { + variant: 'default', + }, + }, + }, CONFIGURE_PAGERDUTY_WEBHOOK_DOCS_LINK, computed: { formData() { @@ -152,11 +168,11 @@ export default { {{ $options.i18n.webhookUrl.resetWebhookUrl }} </gl-button> <gl-modal - modal-id="resetWebhookModal" + :modal-id="$options.modal.id" :title="$options.i18n.webhookUrl.resetWebhookUrl" - :ok-title="$options.i18n.webhookUrl.resetWebhookUrl" - ok-variant="danger" - @ok="resetWebhookUrl" + :action-primary="$options.modal.actionPrimary" + :action-cancel="$options.modal.actionCancel" + @primary="resetWebhookUrl" > {{ $options.i18n.webhookUrl.restKeyInfo }} </gl-modal> diff --git a/app/assets/javascripts/integrations/constants.js b/app/assets/javascripts/integrations/constants.js index b9975eed716..e4f6e931ec0 100644 --- a/app/assets/javascripts/integrations/constants.js +++ b/app/assets/javascripts/integrations/constants.js @@ -27,15 +27,51 @@ export const settingsTabTitle = __('Settings'); export const overridesTabTitle = s__('Integrations|Projects using custom settings'); export const integrationFormSections = { + CONFIGURATION: 'configuration', CONNECTION: 'connection', JIRA_TRIGGER: 'jira_trigger', JIRA_ISSUES: 'jira_issues', + TRIGGER: 'trigger', }; export const integrationFormSectionComponents = { + [integrationFormSections.CONFIGURATION]: 'IntegrationSectionConfiguration', [integrationFormSections.CONNECTION]: 'IntegrationSectionConnection', [integrationFormSections.JIRA_TRIGGER]: 'IntegrationSectionJiraTrigger', [integrationFormSections.JIRA_ISSUES]: 'IntegrationSectionJiraIssues', + [integrationFormSections.TRIGGER]: 'IntegrationSectionTrigger', +}; + +export const integrationTriggerEvents = { + PUSH: 'push_events', + ISSUE: 'issues_events', + CONFIDENTIAL_ISSUE: 'confidential_issues_events', + MERGE_REQUEST: 'merge_requests_events', + NOTE: 'note_events', + CONFIDENTIAL_NOTE: 'confidential_note_events', + TAG_PUSH: 'tag_push_events', + PIPELINE: 'pipeline_events', + WIKI_PAGE: 'wiki_page_events', +}; + +export const integrationTriggerEventTitles = { + [integrationTriggerEvents.PUSH]: s__('IntegrationEvents|A push is made to the repository'), + [integrationTriggerEvents.ISSUE]: s__( + 'IntegrationEvents|An issue is created, updated, or closed', + ), + [integrationTriggerEvents.CONFIDENTIAL_ISSUE]: s__( + 'IntegrationEvents|A confidential issue is created, updated, or closed', + ), + [integrationTriggerEvents.MERGE_REQUEST]: s__( + 'IntegrationEvents|A merge request is created, updated, or merged', + ), + [integrationTriggerEvents.NOTE]: s__('IntegrationEvents|A comment is added on an issue'), + [integrationTriggerEvents.CONFIDENTIAL_NOTE]: s__( + 'IntegrationEvents|A comment is added on a confidential issue', + ), + [integrationTriggerEvents.TAG_PUSH]: s__('IntegrationEvents|A tag is pushed to the repository'), + [integrationTriggerEvents.PIPELINE]: s__('IntegrationEvents|A pipeline status changes'), + [integrationTriggerEvents.WIKI_PAGE]: s__('IntegrationEvents|A wiki page is created or updated'), }; export const billingPlans = { diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue index 9f43360fb73..9307d7c2d3d 100644 --- a/app/assets/javascripts/integrations/edit/components/integration_form.vue +++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue @@ -37,6 +37,10 @@ export default { DynamicField, ConfirmationModal, ResetConfirmationModal, + IntegrationSectionConfiguration: () => + import( + /* webpackChunkName: 'integrationSectionConfiguration' */ '~/integrations/edit/components/sections/configuration.vue' + ), IntegrationSectionConnection: () => import( /* webpackChunkName: 'integrationSectionConnection' */ '~/integrations/edit/components/sections/connection.vue' @@ -49,6 +53,10 @@ export default { import( /* webpackChunkName: 'integrationSectionJiraTrigger' */ '~/integrations/edit/components/sections/jira_trigger.vue' ), + IntegrationSectionTrigger: () => + import( + /* webpackChunkName: 'integrationSectionTrigger' */ '~/integrations/edit/components/sections/trigger.vue' + ), GlBadge, GlButton, GlForm, @@ -193,7 +201,7 @@ export default { <gl-form ref="integrationForm" method="post" - class="gl-mb-3 gl-show-field-errors integration-settings-form" + class="gl-mt-6 gl-mb-3 gl-show-field-errors integration-settings-form" :action="propsSource.formPath" :novalidate="!integrationActive" > diff --git a/app/assets/javascripts/integrations/edit/components/jira_upgrade_cta.vue b/app/assets/javascripts/integrations/edit/components/jira_upgrade_cta.vue deleted file mode 100644 index 9164e484440..00000000000 --- a/app/assets/javascripts/integrations/edit/components/jira_upgrade_cta.vue +++ /dev/null @@ -1,51 +0,0 @@ -<script> -import { GlButton, GlCard } from '@gitlab/ui'; -import { s__, __ } from '~/locale'; - -export default { - components: { - GlButton, - GlCard, - }, - props: { - upgradePlanPath: { - type: String, - required: false, - default: '', - }, - showPremiumMessage: { - type: Boolean, - required: false, - default: false, - }, - showUltimateMessage: { - type: Boolean, - required: false, - default: false, - }, - }, - computed: { - title() { - return this.showUltimateMessage - ? this.$options.i18n.titleUltimate - : this.$options.i18n.titlePremium; - }, - }, - i18n: { - titleUltimate: s__('JiraService|This is an Ultimate feature'), - titlePremium: s__('JiraService|This is a Premium feature'), - content: s__('JiraService|Upgrade your plan to enable this feature of the Jira Integration.'), - upgrade: __('Upgrade your plan'), - }, -}; -</script> - -<template> - <gl-card> - <strong>{{ title }}</strong> - <p>{{ $options.i18n.content }}</p> - <gl-button v-if="upgradePlanPath" category="primary" variant="info" :href="upgradePlanPath"> - {{ $options.i18n.upgrade }} - </gl-button> - </gl-card> -</template> diff --git a/app/assets/javascripts/integrations/edit/components/sections/configuration.vue b/app/assets/javascripts/integrations/edit/components/sections/configuration.vue new file mode 100644 index 00000000000..9e1ad24ae9f --- /dev/null +++ b/app/assets/javascripts/integrations/edit/components/sections/configuration.vue @@ -0,0 +1,38 @@ +<script> +import { mapGetters } from 'vuex'; + +import DynamicField from '../dynamic_field.vue'; + +export default { + name: 'IntegrationSectionConfiguration', + components: { + DynamicField, + }, + props: { + fields: { + type: Array, + required: false, + default: () => [], + }, + isValidated: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + ...mapGetters(['currentKey']), + }, +}; +</script> + +<template> + <div> + <dynamic-field + v-for="field in fields" + :key="`${currentKey}-${field.name}`" + v-bind="field" + :is-validated="isValidated" + /> + </div> +</template> diff --git a/app/assets/javascripts/integrations/edit/components/sections/trigger.vue b/app/assets/javascripts/integrations/edit/components/sections/trigger.vue new file mode 100644 index 00000000000..9af5070d4cf --- /dev/null +++ b/app/assets/javascripts/integrations/edit/components/sections/trigger.vue @@ -0,0 +1,26 @@ +<script> +import { mapGetters } from 'vuex'; + +import TriggerField from '../trigger_field.vue'; + +export default { + name: 'IntegrationSectionTrigger', + components: { + TriggerField, + }, + computed: { + ...mapGetters(['currentKey', 'propsSource']), + }, +}; +</script> + +<template> + <div> + <trigger-field + v-for="event in propsSource.triggerEvents" + :key="`${currentKey}-trigger-fields-${event.name}`" + :event="event" + class="gl-mb-3" + /> + </div> +</template> diff --git a/app/assets/javascripts/integrations/edit/components/trigger_field.vue b/app/assets/javascripts/integrations/edit/components/trigger_field.vue new file mode 100644 index 00000000000..dc5ae2f3a3d --- /dev/null +++ b/app/assets/javascripts/integrations/edit/components/trigger_field.vue @@ -0,0 +1,46 @@ +<script> +import { GlFormCheckbox } from '@gitlab/ui'; +import { mapGetters } from 'vuex'; + +import { integrationTriggerEventTitles } from '~/integrations/constants'; + +export default { + name: 'TriggerField', + components: { + GlFormCheckbox, + }, + props: { + event: { + type: Object, + required: false, + default: () => ({}), + }, + }, + data() { + return { + value: false, + }; + }, + computed: { + ...mapGetters(['isInheriting']), + name() { + return `service[${this.event.name}]`; + }, + title() { + return integrationTriggerEventTitles[this.event.name]; + }, + }, + mounted() { + this.value = this.event.value || false; + }, +}; +</script> + +<template> + <div> + <input :name="name" type="hidden" :value="value" /> + <gl-form-checkbox v-model="value" :disabled="isInheriting"> + {{ title }} + </gl-form-checkbox> + </div> +</template> diff --git a/app/assets/javascripts/integrations/edit/index.js b/app/assets/javascripts/integrations/edit/index.js index 92e6ca509c3..2360588ab39 100644 --- a/app/assets/javascripts/integrations/edit/index.js +++ b/app/assets/javascripts/integrations/edit/index.js @@ -21,7 +21,6 @@ function parseDatasetToProps(data) { type, commentDetail, projectKey, - upgradePlanPath, learnMorePath, aboutPricingUrl, triggerEvents, @@ -80,12 +79,11 @@ function parseDatasetToProps(data) { initialEnableJiraVulnerabilities: enableJiraVulnerabilities, initialVulnerabilitiesIssuetype: vulnerabilitiesIssuetype, initialProjectKey: projectKey, - upgradePlanPath, }, learnMorePath, aboutPricingUrl, triggerEvents: JSON.parse(triggerEvents), - sections: JSON.parse(sections, { deep: true }), + sections: JSON.parse(sections), fields: convertObjectPropsToCamelCase(JSON.parse(fields), { deep: true }), inheritFromId: parseInt(inheritFromId, 10), integrationLevel, diff --git a/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue b/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue index f2d3e6489ee..1255ed01f6d 100644 --- a/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue +++ b/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue @@ -136,7 +136,7 @@ export default { </template> <template #table-busy> - <gl-loading-icon size="md" class="gl-my-2" /> + <gl-loading-icon size="lg" class="gl-my-2" /> </template> </gl-table> <div class="gl-display-flex gl-justify-content-center gl-mt-5"> diff --git a/app/assets/javascripts/invite_members/components/invite_members_modal.vue b/app/assets/javascripts/invite_members/components/invite_members_modal.vue index 7857b9d86d2..d597c7e53bb 100644 --- a/app/assets/javascripts/invite_members/components/invite_members_modal.vue +++ b/app/assets/javascripts/invite_members/components/invite_members_modal.vue @@ -14,6 +14,7 @@ import ExperimentTracking from '~/experimentation/experiment_tracking'; import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants'; import { getParameterValues } from '~/lib/utils/url_utility'; import { + CLOSE_TO_LIMIT_COUNT, USERS_FILTER_ALL, INVITE_MEMBERS_FOR_TASK, MEMBER_MODAL_LABELS, @@ -151,6 +152,16 @@ export default { isOnLearnGitlab() { return this.source === LEARN_GITLAB; }, + closeToLimit() { + if (this.usersLimitDataset.freeUsersLimit && this.usersLimitDataset.membersCount) { + return ( + this.usersLimitDataset.membersCount >= + this.usersLimitDataset.freeUsersLimit - CLOSE_TO_LIMIT_COUNT + ); + } + + return false; + }, reachedLimit() { if (this.usersLimitDataset.freeUsersLimit && this.usersLimitDataset.membersCount) { return this.usersLimitDataset.membersCount >= this.usersLimitDataset.freeUsersLimit; @@ -297,6 +308,7 @@ export default { :is-loading="isLoading" :new-users-to-invite="newUsersToInvite" :root-group-id="rootId" + :close-to-limit="closeToLimit" :reached-limit="reachedLimit" :users-limit-dataset="usersLimitDataset" @reset="resetFields" @@ -314,6 +326,7 @@ export default { <template #user-limit-notification> <user-limit-notification + :close-to-limit="closeToLimit" :reached-limit="reachedLimit" :users-limit-dataset="usersLimitDataset" /> diff --git a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue index 79b192e2495..42645110e48 100644 --- a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue +++ b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue @@ -2,7 +2,11 @@ import { GlButton, GlLink, GlIcon } from '@gitlab/ui'; import { s__ } from '~/locale'; import eventHub from '../event_hub'; -import { TRIGGER_ELEMENT_BUTTON, TRIGGER_ELEMENT_SIDE_NAV } from '../constants'; +import { + TRIGGER_ELEMENT_BUTTON, + TRIGGER_ELEMENT_SIDE_NAV, + TRIGGER_DEFAULT_QA_SELECTOR, +} from '../constants'; export default { components: { GlButton, GlLink, GlIcon }, @@ -46,12 +50,17 @@ export default { required: false, default: '', }, + qaSelector: { + type: String, + required: false, + default: TRIGGER_DEFAULT_QA_SELECTOR, + }, }, computed: { componentAttributes() { const baseAttributes = { class: this.classes, - 'data-qa-selector': 'invite_members_button', + 'data-qa-selector': this.qaSelector, 'data-test-id': 'invite-members-button', }; diff --git a/app/assets/javascripts/invite_members/components/invite_modal_base.vue b/app/assets/javascripts/invite_members/components/invite_modal_base.vue index 33d37b809c2..90d266c3155 100644 --- a/app/assets/javascripts/invite_members/components/invite_modal_base.vue +++ b/app/assets/javascripts/invite_members/components/invite_modal_base.vue @@ -131,6 +131,11 @@ export default { required: false, default: false, }, + closeToLimit: { + type: Boolean, + required: false, + default: false, + }, reachedLimit: { type: Boolean, required: false, @@ -183,6 +188,17 @@ export default { actionCancel() { if (this.reachedLimit && this.usersLimitDataset.userNamespace) return undefined; + if (this.closeToLimit && this.usersLimitDataset.userNamespace) { + return { + text: INVITE_BUTTON_TEXT_DISABLED, + attributes: { + href: this.usersLimitDataset.membersPath, + category: 'secondary', + variant: 'confirm', + }, + }; + } + return { text: this.reachedLimit ? CANCEL_BUTTON_TEXT_DISABLED : this.cancelButtonText, ...(this.reachedLimit && { attributes: { href: this.usersLimitDataset.purchasePath } }), diff --git a/app/assets/javascripts/invite_members/components/user_limit_notification.vue b/app/assets/javascripts/invite_members/components/user_limit_notification.vue index ea5f4317d86..ae5c3c11386 100644 --- a/app/assets/javascripts/invite_members/components/user_limit_notification.vue +++ b/app/assets/javascripts/invite_members/components/user_limit_notification.vue @@ -8,15 +8,20 @@ import { REACHED_LIMIT_MESSAGE, REACHED_LIMIT_UPGRADE_SUGGESTION_MESSAGE, CLOSE_TO_LIMIT_MESSAGE, + CLOSE_TO_LIMIT_MESSAGE_PERSONAL_NAMESPACE, + DANGER_ALERT_TITLE_PERSONAL_NAMESPACE, + WARNING_ALERT_TITLE_PERSONAL_NAMESPACE, } from '../constants'; -const CLOSE_TO_LIMIT_COUNT = 2; - export default { name: 'UserLimitNotification', components: { GlAlert, GlSprintf, GlLink }, inject: ['name'], props: { + closeToLimit: { + type: Boolean, + required: true, + }, reachedLimit: { type: Boolean, required: true, @@ -40,14 +45,14 @@ export default { purchasePath() { return this.usersLimitDataset.purchasePath; }, - closeToLimit() { - if (this.freeUsersLimit && this.membersCount) { - return this.membersCount >= this.freeUsersLimit - CLOSE_TO_LIMIT_COUNT; + warningAlertTitle() { + if (this.usersLimitDataset.userNamespace) { + return sprintf(WARNING_ALERT_TITLE_PERSONAL_NAMESPACE, { + count: this.freeUsersLimit - this.membersCount, + members: this.pluralMembers(this.freeUsersLimit - this.membersCount), + }); } - return false; - }, - warningAlertTitle() { return sprintf(WARNING_ALERT_TITLE, { count: this.freeUsersLimit - this.membersCount, members: this.pluralMembers(this.freeUsersLimit - this.membersCount), @@ -55,6 +60,13 @@ export default { }); }, dangerAlertTitle() { + if (this.usersLimitDataset.userNamespace) { + return sprintf(DANGER_ALERT_TITLE_PERSONAL_NAMESPACE, { + count: this.freeUsersLimit, + members: this.pluralMembers(this.freeUsersLimit), + }); + } + return sprintf(DANGER_ALERT_TITLE, { count: this.freeUsersLimit, members: this.pluralMembers(this.freeUsersLimit), @@ -79,6 +91,10 @@ export default { return this.reachedLimitMessage; } + if (this.usersLimitDataset.userNamespace) { + return this.$options.i18n.closeToLimitMessagePersonalNamespace; + } + return this.$options.i18n.closeToLimitMessage; }, }, @@ -91,6 +107,7 @@ export default { reachedLimitMessage: REACHED_LIMIT_MESSAGE, reachedLimitUpgradeSuggestionMessage: REACHED_LIMIT_UPGRADE_SUGGESTION_MESSAGE, closeToLimitMessage: CLOSE_TO_LIMIT_MESSAGE, + closeToLimitMessagePersonalNamespace: CLOSE_TO_LIMIT_MESSAGE_PERSONAL_NAMESPACE, }, }; </script> diff --git a/app/assets/javascripts/invite_members/constants.js b/app/assets/javascripts/invite_members/constants.js index 928f79f1c8d..beb8f5b5aab 100644 --- a/app/assets/javascripts/invite_members/constants.js +++ b/app/assets/javascripts/invite_members/constants.js @@ -1,7 +1,7 @@ import { s__ } from '~/locale'; +export const CLOSE_TO_LIMIT_COUNT = 2; export const SEARCH_DELAY = 200; - export const INVITE_MEMBERS_FOR_TASK = { minimum_access_level: 30, name: 'invite_members_for_task', @@ -18,6 +18,7 @@ export const USERS_FILTER_ALL = 'all'; export const USERS_FILTER_SAML_PROVIDER_ID = 'saml_provider_id'; export const TRIGGER_ELEMENT_BUTTON = 'button'; export const TRIGGER_ELEMENT_SIDE_NAV = 'side-nav'; +export const TRIGGER_DEFAULT_QA_SELECTOR = 'invite_members_button'; export const MEMBERS_MODAL_DEFAULT_TITLE = s__('InviteMembersModal|Invite members'); export const MEMBERS_MODAL_CELEBRATE_TITLE = s__( 'InviteMembersModal|GitLab is better with colleagues!', @@ -131,10 +132,17 @@ export const ON_SUBMIT_TRACK_LABEL = 'manage_members_clicked'; export const WARNING_ALERT_TITLE = s__( 'InviteMembersModal|You only have space for %{count} more %{members} in %{name}', ); +export const WARNING_ALERT_TITLE_PERSONAL_NAMESPACE = s__( + 'InviteMembersModal|You only have space for %{count} more %{members} in your personal projects', +); export const DANGER_ALERT_TITLE = s__( "InviteMembersModal|You've reached your %{count} %{members} limit for %{name}", ); +export const DANGER_ALERT_TITLE_PERSONAL_NAMESPACE = s__( + "InviteMembersModal|You've reached your %{count} %{members} limit for your personal projects", +); + export const REACHED_LIMIT_MESSAGE = s__( 'InviteMembersModal|You cannot add more members, but you can remove members who no longer need access.', ); @@ -148,3 +156,6 @@ export const REACHED_LIMIT_UPGRADE_SUGGESTION_MESSAGE = REACHED_LIMIT_MESSAGE.co export const CLOSE_TO_LIMIT_MESSAGE = s__( 'InviteMembersModal|To get more members an owner of this namespace can %{trialLinkStart}start a trial%{trialLinkEnd} or %{upgradeLinkStart}upgrade%{upgradeLinkEnd} to a paid tier.', ); +export const CLOSE_TO_LIMIT_MESSAGE_PERSONAL_NAMESPACE = s__( + 'InviteMembersModal|To make more space, you can remove members who no longer need access.', +); diff --git a/app/assets/javascripts/issuable/components/csv_export_modal.vue b/app/assets/javascripts/issuable/components/csv_export_modal.vue index b0af3612e05..736da92fa9f 100644 --- a/app/assets/javascripts/issuable/components/csv_export_modal.vue +++ b/app/assets/javascripts/issuable/components/csv_export_modal.vue @@ -1,16 +1,18 @@ <script> -import { GlButton, GlModal, GlSprintf, GlIcon } from '@gitlab/ui'; +import { GlModal, GlSprintf, GlIcon } from '@gitlab/ui'; import { __, n__ } from '~/locale'; import { ISSUABLE_TYPE } from '../constants'; export default { + actionCancel: { + text: __('Cancel'), + }, i18n: { exportText: __( 'The CSV export will be created in the background. Once finished, it will be sent to %{email} in an attachment.', ), }, components: { - GlButton, GlModal, GlSprintf, GlIcon, @@ -38,6 +40,19 @@ export default { }, }, computed: { + actionPrimary() { + return { + text: this.exportText, + attributes: { + href: this.exportCsvPath, + variant: 'confirm', + 'data-method': 'post', + 'data-qa-selector': `export_${this.issuableType}_button`, + 'data-track-action': 'click_button', + 'data-track-label': `export_${this.issuableType}_csv`, + }, + }; + }, isIssue() { return this.issuableType === ISSUABLE_TYPE.issues; }, @@ -56,6 +71,8 @@ export default { <template> <gl-modal :modal-id="modalId" + :action-primary="actionPrimary" + :action-cancel="$options.actionCancel" body-class="gl-p-0!" :title="exportText" data-qa-selector="export_issuable_modal" @@ -73,18 +90,5 @@ export default { </template> </gl-sprintf> </div> - <template #modal-footer> - <gl-button - category="primary" - variant="confirm" - :href="exportCsvPath" - data-method="post" - :data-qa-selector="`export_${issuableType}_button`" - data-track-action="click_button" - :data-track-label="`export_${issuableType}_csv`" - > - {{ exportText }} - </gl-button> - </template> </gl-modal> </template> diff --git a/app/assets/javascripts/issuable/components/csv_import_modal.vue b/app/assets/javascripts/issuable/components/csv_import_modal.vue index 7e2cbf03801..72293343c48 100644 --- a/app/assets/javascripts/issuable/components/csv_import_modal.vue +++ b/app/assets/javascripts/issuable/components/csv_import_modal.vue @@ -18,6 +18,9 @@ export default { actionPrimary: { text: __('Import issues'), }, + actionCancel: { + text: __('Cancel'), + }, components: { GlModal, GlFormGroup, @@ -55,6 +58,7 @@ export default { :modal-id="modalId" :title="$options.i18n.importIssuesText" :action-primary="$options.actionPrimary" + :action-cancel="$options.actionCancel" @primary="submitForm" > <form ref="form" :action="importCsvIssuesPath" enctype="multipart/form-data" method="post"> diff --git a/app/assets/javascripts/issuable/components/issuable_header_warnings.vue b/app/assets/javascripts/issuable/components/issuable_header_warnings.vue index 06d1a2ee233..543dca0afe1 100644 --- a/app/assets/javascripts/issuable/components/issuable_header_warnings.vue +++ b/app/assets/javascripts/issuable/components/issuable_header_warnings.vue @@ -27,7 +27,7 @@ export default { return this.getNoteableData.confidential; }, isMergeRequest() { - return this.getNoteableData.targetType === 'merge_request' && this.glFeatures.updatedMrHeader; + return this.getNoteableData.targetType === 'merge_request'; }, warningIconsMeta() { return [ diff --git a/app/assets/javascripts/issuable/components/related_issuable_item.vue b/app/assets/javascripts/issuable/components/related_issuable_item.vue index dfe18567608..e6379b35f7a 100644 --- a/app/assets/javascripts/issuable/components/related_issuable_item.vue +++ b/app/assets/javascripts/issuable/components/related_issuable_item.vue @@ -71,8 +71,9 @@ export default { :class="{ 'issuable-info-container': !canReorder, 'card-body': canReorder, + 'gl-pr-2': canRemove, }" - class="item-body d-flex align-items-center py-2 px-3" + class="item-body d-flex align-items-center gl-py-3 gl-px-5" > <div class="item-contents gl-display-flex gl-align-items-center gl-flex-wrap gl-flex-grow-1 flex-xl-nowrap gl-min-h-7" @@ -170,7 +171,7 @@ export default { <issue-assignees v-if="assignees.length !== 0" :assignees="assignees" - class="item-assignees d-flex align-items-center align-self-end flex-shrink-0 d-md-none ml-2" + class="item-assignees d-flex align-items-center align-self-end flex-shrink-0 d-md-none gl-ml-3" /> </div> </div> diff --git a/app/assets/javascripts/issuable/components/status_box.vue b/app/assets/javascripts/issuable/components/status_box.vue index 498dc859186..d72ee5c6757 100644 --- a/app/assets/javascripts/issuable/components/status_box.vue +++ b/app/assets/javascripts/issuable/components/status_box.vue @@ -63,6 +63,8 @@ export default { }, }, data() { + if (!this.iid) return { state: this.initialState }; + if (this.initialState) { badgeState.state = this.initialState; } @@ -74,8 +76,7 @@ export default { return [ CLASSES[this.state], { - 'gl-vertical-align-bottom': - this.issuableType === IssuableType.MergeRequest && this.glFeatures.updatedMrHeader, + 'gl-vertical-align-bottom': this.issuableType === IssuableType.MergeRequest, }, ]; }, diff --git a/app/assets/javascripts/issuable/issuable_form.js b/app/assets/javascripts/issuable/issuable_form.js index 8e76a33c7dd..38453072af8 100644 --- a/app/assets/javascripts/issuable/issuable_form.js +++ b/app/assets/javascripts/issuable/issuable_form.js @@ -46,6 +46,9 @@ function getFallbackKey() { export default class IssuableForm { constructor(form) { + if (form.length === 0) { + return; + } this.form = form; this.toggleWip = this.toggleWip.bind(this); this.renderWipExplanation = this.renderWipExplanation.bind(this); diff --git a/app/assets/javascripts/issuable/popover/components/issue_popover.vue b/app/assets/javascripts/issuable/popover/components/issue_popover.vue new file mode 100644 index 00000000000..0cafaa1e500 --- /dev/null +++ b/app/assets/javascripts/issuable/popover/components/issue_popover.vue @@ -0,0 +1,83 @@ +<script> +import { GlPopover, GlSkeletonLoader } from '@gitlab/ui'; +import StatusBox from '~/issuable/components/status_box.vue'; +import timeagoMixin from '~/vue_shared/mixins/timeago'; +import query from '../queries/issue.query.graphql'; + +export default { + components: { + GlPopover, + GlSkeletonLoader, + StatusBox, + }, + mixins: [timeagoMixin], + props: { + target: { + type: HTMLAnchorElement, + required: true, + }, + projectPath: { + type: String, + required: true, + }, + iid: { + type: String, + required: true, + }, + cachedTitle: { + type: String, + required: true, + }, + }, + data() { + return { + issue: {}, + }; + }, + computed: { + formattedTime() { + return this.timeFormatted(this.issue.createdAt); + }, + title() { + return this.issue?.title || this.cachedTitle; + }, + showDetails() { + return Object.keys(this.issue).length > 0; + }, + }, + apollo: { + issue: { + query, + update: (data) => data.project.issue, + variables() { + const { projectPath, iid } = this; + + return { + projectPath, + iid, + }; + }, + }, + }, +}; +</script> + +<template> + <gl-popover :target="target" boundary="viewport" placement="top" show> + <gl-skeleton-loader v-if="$apollo.queries.issue.loading" :height="15"> + <rect width="250" height="15" rx="4" /> + </gl-skeleton-loader> + <div v-else-if="showDetails" class="gl-display-flex gl-align-items-center"> + <status-box issuable-type="issue" :initial-state="issue.state" /> + <span class="gl-text-secondary"> + {{ __('Opened') }} <time :datetime="issue.createdAt">{{ formattedTime }}</time> + </span> + </div> + <h5 v-if="!$apollo.queries.issue.loading" class="gl-my-3">{{ title }}</h5> + <!-- eslint-disable @gitlab/vue-require-i18n-strings --> + <div class="gl-text-secondary"> + {{ `${projectPath}#${iid}` }} + </div> + <!-- eslint-enable @gitlab/vue-require-i18n-strings --> + </gl-popover> +</template> diff --git a/app/assets/javascripts/mr_popover/components/mr_popover.vue b/app/assets/javascripts/issuable/popover/components/mr_popover.vue index fef75b6d5d0..92994809362 100644 --- a/app/assets/javascripts/mr_popover/components/mr_popover.vue +++ b/app/assets/javascripts/issuable/popover/components/mr_popover.vue @@ -1,6 +1,6 @@ <script> /* eslint-disable @gitlab/vue-require-i18n-strings */ -import { GlPopover, GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; +import { GlBadge, GlPopover, GlSkeletonLoader } from '@gitlab/ui'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import { mrStates, humanMRStates } from '../constants'; @@ -10,8 +10,9 @@ export default { // name: 'MRPopover' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25 name: 'MRPopover', // eslint-disable-line @gitlab/require-i18n-strings components: { + GlBadge, GlPopover, - GlSkeletonLoading, + GlSkeletonLoader, CiIcon, }, mixins: [timeagoMixin], @@ -24,11 +25,11 @@ export default { type: String, required: true, }, - mergeRequestIID: { + iid: { type: String, required: true, }, - mergeRequestTitle: { + cachedTitle: { type: String, required: true, }, @@ -45,14 +46,14 @@ export default { formattedTime() { return this.timeFormatted(this.mergeRequest.createdAt); }, - statusBoxClass() { + badgeVariant() { switch (this.mergeRequest.state) { case mrStates.merged: - return 'status-box-mr-merged'; + return 'info'; case mrStates.closed: - return 'status-box-closed'; + return 'danger'; default: - return 'status-box-open'; + return 'success'; } }, stateHumanName() { @@ -66,7 +67,7 @@ export default { } }, title() { - return this.mergeRequest?.title || this.mergeRequestTitle; + return this.mergeRequest?.title || this.cachedTitle; }, showDetails() { return Object.keys(this.mergeRequest).length > 0; @@ -77,11 +78,11 @@ export default { query, update: (data) => data.project.mergeRequest, variables() { - const { projectPath, mergeRequestIID } = this; + const { projectPath, iid } = this; return { projectPath, - mergeRequestIID, + iid, }; }, }, @@ -92,14 +93,14 @@ export default { <template> <gl-popover :target="target" boundary="viewport" placement="top" show> <div class="mr-popover"> - <div v-if="$apollo.queries.mergeRequest.loading"> - <gl-skeleton-loading :lines="1" class="animation-container-small mt-1" /> - </div> + <gl-skeleton-loader v-if="$apollo.queries.mergeRequest.loading" :height="15"> + <rect width="250" height="15" rx="4" /> + </gl-skeleton-loader> <div v-else-if="showDetails" class="d-flex align-items-center justify-content-between"> <div class="d-inline-flex align-items-center"> - <div :class="`issuable-status-box status-box ${statusBoxClass}`"> + <gl-badge class="gl-mr-3" :variant="badgeVariant"> {{ stateHumanName }} - </div> + </gl-badge> <span class="gl-text-secondary">Opened <time v-text="formattedTime"></time></span> </div> <ci-icon v-if="detailedStatus" :status="detailedStatus" /> @@ -107,7 +108,7 @@ export default { <h5 v-if="!$apollo.queries.mergeRequest.loading" class="my-2">{{ title }}</h5> <!-- eslint-disable @gitlab/vue-require-i18n-strings --> <div class="gl-text-secondary"> - {{ `${projectPath}!${mergeRequestIID}` }} + {{ `${projectPath}!${iid}` }} </div> <!-- eslint-enable @gitlab/vue-require-i18n-strings --> </div> diff --git a/app/assets/javascripts/mr_popover/constants.js b/app/assets/javascripts/issuable/popover/constants.js index 352bc635293..352bc635293 100644 --- a/app/assets/javascripts/mr_popover/constants.js +++ b/app/assets/javascripts/issuable/popover/constants.js diff --git a/app/assets/javascripts/issuable/popover/index.js b/app/assets/javascripts/issuable/popover/index.js new file mode 100644 index 00000000000..de3c8160b7a --- /dev/null +++ b/app/assets/javascripts/issuable/popover/index.js @@ -0,0 +1,85 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; +import IssuePopover from './components/issue_popover.vue'; +import MRPopover from './components/mr_popover.vue'; + +const componentsByReferenceType = { + issue: IssuePopover, + merge_request: MRPopover, +}; + +let renderFn; + +const handleIssuablePopoverMouseOut = ({ target }) => { + target.removeEventListener('mouseleave', handleIssuablePopoverMouseOut); + + if (renderFn) { + clearTimeout(renderFn); + } +}; + +const popoverMountedAttr = 'data-popover-mounted'; + +/** + * Adds a MergeRequestPopover component to the body, hands over as much data as the target element has in data attributes. + * loads based on data-project-path and data-iid more data about an MR from the API and sets it on the popover + */ +const handleIssuablePopoverMount = ({ + apolloProvider, + projectPath, + title, + iid, + referenceType, + target, +}) => { + // Add listener to actually remove it again + target.addEventListener('mouseleave', handleIssuablePopoverMouseOut); + + renderFn = setTimeout(() => { + const PopoverComponent = Vue.extend(componentsByReferenceType[referenceType]); + new PopoverComponent({ + propsData: { + target, + projectPath, + iid, + cachedTitle: title, + }, + apolloProvider, + }).$mount(); + + target.setAttribute(popoverMountedAttr, true); + }, 200); // 200ms delay so not every mouseover triggers Popover + API Call +}; + +export default (elements) => { + if (elements.length > 0) { + Vue.use(VueApollo); + + const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), + }); + const listenerAddedAttr = 'data-popover-listener-added'; + + elements.forEach((el) => { + const { projectPath, iid, referenceType } = el.dataset; + const title = el.dataset.mrTitle || el.title; + + if (!el.getAttribute(listenerAddedAttr) && projectPath && title && iid && referenceType) { + el.addEventListener('mouseenter', ({ target }) => { + if (!el.getAttribute(popoverMountedAttr)) { + handleIssuablePopoverMount({ + apolloProvider, + projectPath, + title, + iid, + referenceType, + target, + }); + } + }); + el.setAttribute(listenerAddedAttr, true); + } + }); + } +}; diff --git a/app/assets/javascripts/issuable/popover/queries/issue.query.graphql b/app/assets/javascripts/issuable/popover/queries/issue.query.graphql new file mode 100644 index 00000000000..47a62e2b6ea --- /dev/null +++ b/app/assets/javascripts/issuable/popover/queries/issue.query.graphql @@ -0,0 +1,11 @@ +query issue($projectPath: ID!, $iid: String!) { + project(fullPath: $projectPath) { + id + issue(iid: $iid) { + id + title + createdAt + state + } + } +} diff --git a/app/assets/javascripts/mr_popover/queries/merge_request.query.graphql b/app/assets/javascripts/issuable/popover/queries/merge_request.query.graphql index b3e5d89d495..7cd344c1d5e 100644 --- a/app/assets/javascripts/mr_popover/queries/merge_request.query.graphql +++ b/app/assets/javascripts/issuable/popover/queries/merge_request.query.graphql @@ -1,7 +1,7 @@ -query mergeRequest($projectPath: ID!, $mergeRequestIID: String!) { +query mergeRequest($projectPath: ID!, $iid: String!) { project(fullPath: $projectPath) { id - mergeRequest(iid: $mergeRequestIID) { + mergeRequest(iid: $iid) { id title createdAt diff --git a/app/assets/javascripts/issues/create_merge_request_dropdown.js b/app/assets/javascripts/issues/create_merge_request_dropdown.js index 8294c018117..edf3789e6dc 100644 --- a/app/assets/javascripts/issues/create_merge_request_dropdown.js +++ b/app/assets/javascripts/issues/create_merge_request_dropdown.js @@ -11,6 +11,7 @@ import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; import { __, sprintf } from '~/locale'; import { mergeUrlParams } from '~/lib/utils/url_utility'; +import api from '~/api'; // Todo: Remove this when fixing issue in input_setter plugin const InputSetter = { ...ISetter }; @@ -81,10 +82,7 @@ export default class CreateMergeRequestDropdown { this.init(); if (isConfidentialIssue()) { - this.createMergeRequestButton.setAttribute( - 'data-dropdown-trigger', - '#create-merge-request-dropdown', - ); + this.createMergeRequestButton.dataset.dropdownTrigger = '#create-merge-request-dropdown'; initConfidentialMergeRequest(); } } @@ -149,7 +147,7 @@ export default class CreateMergeRequestDropdown { }); } - createBranch() { + createBranch(navigateToBranch = true) { this.isCreatingBranch = true; return axios @@ -158,7 +156,10 @@ export default class CreateMergeRequestDropdown { }) .then(({ data }) => { this.branchCreated = true; - window.location.href = data.url; + + if (navigateToBranch) { + window.location.href = data.url; + } }) .catch(() => createFlash({ @@ -170,23 +171,25 @@ export default class CreateMergeRequestDropdown { createMergeRequest() { return new Promise(() => { this.isCreatingMergeRequest = true; - return this.createBranch().then(() => { - let path = canCreateConfidentialMergeRequest() - ? this.createMrPath.replace( - this.projectPath, - confidentialMergeRequestState.selectedProject.pathWithNamespace, - ) - : this.createMrPath; - path = mergeUrlParams( - { - 'merge_request[target_branch]': this.refInput.value, - 'merge_request[source_branch]': this.branchInput.value, - }, - path, - ); - - window.location.href = path; - }); + return this.createBranch(false) + .then(() => api.trackRedisHllUserEvent('i_code_review_user_create_mr_from_issue')) + .then(() => { + let path = canCreateConfidentialMergeRequest() + ? this.createMrPath.replace( + this.projectPath, + confidentialMergeRequestState.selectedProject.pathWithNamespace, + ) + : this.createMrPath; + path = mergeUrlParams( + { + 'merge_request[target_branch]': this.refInput.value, + 'merge_request[source_branch]': this.branchInput.value, + }, + path, + ); + + window.location.href = path; + }); }); } diff --git a/app/assets/javascripts/issues/index.js b/app/assets/javascripts/issues/index.js index bcd729785b3..67c6c723dcc 100644 --- a/app/assets/javascripts/issues/index.js +++ b/app/assets/javascripts/issues/index.js @@ -9,6 +9,7 @@ import { IssueType } from '~/issues/constants'; import Issue from '~/issues/issue'; import { initTitleSuggestions, initTypePopover } from '~/issues/new'; import { initRelatedMergeRequests } from '~/issues/related_merge_requests'; +import initRelatedIssues from '~/related_issues'; import { initHeaderActions, initIncidentApp, @@ -56,8 +57,9 @@ export function initShow() { const { issueType, ...issuableData } = parseIssuableData(el); if (issueType === IssueType.Incident) { - initIncidentApp(issuableData); + initIncidentApp({ ...issuableData, issuableId: el.dataset.issuableId }); initHeaderActions(store, IssueType.Incident); + initRelatedIssues(IssueType.Incident); } else { initIssueApp(issuableData, store); initHeaderActions(store); diff --git a/app/assets/javascripts/issues/list/components/issues_list_app.vue b/app/assets/javascripts/issues/list/components/issues_list_app.vue index b81ab103271..fa56c0183b2 100644 --- a/app/assets/javascripts/issues/list/components/issues_list_app.vue +++ b/app/assets/javascripts/issues/list/components/issues_list_app.vue @@ -13,8 +13,6 @@ import fuzzaldrinPlus from 'fuzzaldrin-plus'; import IssueCardTimeInfo from 'ee_else_ce/issues/list/components/issue_card_time_info.vue'; import getIssuesQuery from 'ee_else_ce/issues/list/queries/get_issues.query.graphql'; import getIssuesCountsQuery from 'ee_else_ce/issues/list/queries/get_issues_counts.query.graphql'; -import getIssuesWithoutCrmQuery from 'ee_else_ce/issues/list/queries/get_issues_without_crm.query.graphql'; -import getIssuesCountsWithoutCrmQuery from 'ee_else_ce/issues/list/queries/get_issues_counts_without_crm.query.graphql'; import createFlash, { FLASH_TYPES } from '~/flash'; import { TYPE_USER } from '~/graphql_shared/constants'; import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils'; @@ -23,6 +21,7 @@ import CsvImportExportButtons from '~/issuable/components/csv_import_export_butt import IssuableByEmail from '~/issuable/components/issuable_by_email.vue'; import { IssuableStatus } from '~/issues/constants'; import axios from '~/lib/utils/axios_utils'; +import { isPositiveInteger } from '~/lib/utils/number_utils'; import { scrollUp } from '~/lib/utils/scroll_utils'; import { getParameterByName, joinPaths } from '~/lib/utils/url_utility'; import { @@ -31,20 +30,28 @@ import { TOKEN_TITLE_ASSIGNEE, TOKEN_TITLE_AUTHOR, TOKEN_TITLE_CONFIDENTIAL, + TOKEN_TITLE_CONTACT, TOKEN_TITLE_LABEL, TOKEN_TITLE_MILESTONE, TOKEN_TITLE_MY_REACTION, + TOKEN_TITLE_ORGANIZATION, TOKEN_TITLE_RELEASE, TOKEN_TITLE_TYPE, } from '~/vue_shared/components/filtered_search_bar/constants'; import IssuableList from '~/vue_shared/issuable/list/components/issuable_list_root.vue'; -import { IssuableListTabs, IssuableStates } from '~/vue_shared/issuable/list/constants'; +import { + IssuableListTabs, + IssuableStates, + IssuableTypes, +} from '~/vue_shared/issuable/list/constants'; import { CREATED_DESC, i18n, ISSUE_REFERENCE, MAX_LIST_SIZE, PAGE_SIZE, + PARAM_FIRST_PAGE_SIZE, + PARAM_LAST_PAGE_SIZE, PARAM_PAGE_AFTER, PARAM_PAGE_BEFORE, PARAM_SORT, @@ -53,9 +60,11 @@ import { TOKEN_TYPE_ASSIGNEE, TOKEN_TYPE_AUTHOR, TOKEN_TYPE_CONFIDENTIAL, + TOKEN_TYPE_CONTACT, TOKEN_TYPE_LABEL, TOKEN_TYPE_MILESTONE, TOKEN_TYPE_MY_REACTION, + TOKEN_TYPE_ORGANIZATION, TOKEN_TYPE_RELEASE, TOKEN_TYPE_TYPE, UPDATED_DESC, @@ -93,6 +102,7 @@ const ReleaseToken = () => export default { i18n, IssuableListTabs, + IssuableTypes: [IssuableTypes.Issue, IssuableTypes.Incident, IssuableTypes.TestCase], components: { CsvImportExportButtons, GlButton, @@ -112,6 +122,9 @@ export default { 'autocompleteAwardEmojisPath', 'calendarPath', 'canBulkUpdate', + 'canCreateProjects', + 'canReadCrmContact', + 'canReadCrmOrganization', 'emptyStateSvgPath', 'exportCsvPath', 'fullPath', @@ -120,6 +133,7 @@ export default { 'hasBlockedIssuesFeature', 'hasIssueWeightsFeature', 'hasMultipleIssueAssigneesFeature', + 'hasScopedLabelsFeature', 'initialEmail', 'initialSort', 'isAnonymousSearchDisabled', @@ -129,6 +143,7 @@ export default { 'isSignedIn', 'jiraIntegrationPath', 'newIssuePath', + 'newProjectPath', 'releasesPath', 'rssPath', 'showNewIssueLink', @@ -157,11 +172,11 @@ export default { }, apollo: { issues: { - query() { - return this.hasCrmParameter ? getIssuesQuery : getIssuesWithoutCrmQuery; - }, + query: getIssuesQuery, variables() { - return this.queryVariables; + const { types } = this.queryVariables; + + return { ...this.queryVariables, types: types ? [types] : this.$options.IssuableTypes }; }, update(data) { return data[this.namespace]?.issues.nodes ?? []; @@ -183,11 +198,11 @@ export default { debounce: 200, }, issuesCounts: { - query() { - return this.hasCrmParameter ? getIssuesCountsQuery : getIssuesCountsWithoutCrmQuery; - }, + query: getIssuesCountsQuery, variables() { - return this.queryVariables; + const { types } = this.queryVariables; + + return { ...this.queryVariables, types: types ? [types] : this.$options.IssuableTypes }; }, update(data) { return data[this.namespace] ?? {}; @@ -363,6 +378,28 @@ export default { }); } + if (this.canReadCrmContact) { + tokens.push({ + type: TOKEN_TYPE_CONTACT, + title: TOKEN_TITLE_CONTACT, + icon: 'user', + token: GlFilteredSearchToken, + operators: OPERATOR_IS_ONLY, + unique: true, + }); + } + + if (this.canReadCrmOrganization) { + tokens.push({ + type: TOKEN_TYPE_ORGANIZATION, + title: TOKEN_TITLE_ORGANIZATION, + icon: 'users', + token: GlFilteredSearchToken, + operators: OPERATOR_IS_ONLY, + unique: true, + }); + } + if (this.eeSearchTokens.length) { tokens.push(...this.eeSearchTokens); } @@ -390,20 +427,16 @@ export default { }, urlParams() { return { - page_after: this.pageParams.afterCursor, - page_before: this.pageParams.beforeCursor, search: this.searchQuery, sort: urlSortParams[this.sortKey], state: this.state, ...this.urlFilterParams, + first_page_size: this.pageParams.firstPageSize, + last_page_size: this.pageParams.lastPageSize, + page_after: this.pageParams.afterCursor, + page_before: this.pageParams.beforeCursor, }; }, - hasCrmParameter() { - return ( - window.location.search.includes('crm_contact_id=') || - window.location.search.includes('crm_organization_id=') - ); - }, }, watch: { $route(newValue, oldValue) { @@ -632,6 +665,8 @@ export default { this.showBulkEditSidebar = showBulkEditSidebar; }, updateData(sortValue) { + const firstPageSize = getParameterByName(PARAM_FIRST_PAGE_SIZE); + const lastPageSize = getParameterByName(PARAM_LAST_PAGE_SIZE); const pageAfter = getParameterByName(PARAM_PAGE_AFTER); const pageBefore = getParameterByName(PARAM_PAGE_BEFORE); const state = getParameterByName(PARAM_STATE); @@ -660,7 +695,13 @@ export default { this.exportCsvPathWithQuery = this.getExportCsvPathWithQuery(); this.filterTokens = isSearchDisabled ? [] : getFilterTokens(window.location.search); - this.pageParams = getInitialPageParams(sortKey, pageAfter, pageBefore); + this.pageParams = getInitialPageParams( + sortKey, + isPositiveInteger(firstPageSize) ? parseInt(firstPageSize, 10) : undefined, + isPositiveInteger(lastPageSize) ? parseInt(lastPageSize, 10) : undefined, + pageAfter, + pageBefore, + ); this.sortKey = sortKey; this.state = state || IssuableStates.Opened; }, @@ -676,6 +717,7 @@ export default { recent-searches-storage-key="issues" :search-input-placeholder="$options.i18n.searchPlaceholder" :search-tokens="searchTokens" + :has-scoped-labels-feature="hasScopedLabelsFeature" :initial-filter-value="filterTokens" :sort-options="sortOptions" :initial-sort-by="sortKey" @@ -815,12 +857,17 @@ export default { </issuable-list> <template v-else-if="isSignedIn"> - <gl-empty-state - :description="$options.i18n.noIssuesSignedInDescription" - :title="$options.i18n.noIssuesSignedInTitle" - :svg-path="emptyStateSvgPath" - > + <gl-empty-state :title="$options.i18n.noIssuesSignedInTitle" :svg-path="emptyStateSvgPath"> + <template #description> + <p>{{ $options.i18n.noIssuesSignedInDescription }}</p> + <p v-if="canCreateProjects"> + <strong>{{ $options.i18n.noGroupIssuesSignedInDescription }}</strong> + </p> + </template> <template #actions> + <gl-button v-if="canCreateProjects" :href="newProjectPath" variant="confirm"> + {{ $options.i18n.newProjectLabel }} + </gl-button> <gl-button v-if="showNewIssueLink" :href="newIssuePath" variant="confirm"> {{ $options.i18n.newIssueLabel }} </gl-button> @@ -830,7 +877,7 @@ export default { :export-csv-path="exportCsvPathWithQuery" :issuable-count="currentTabCount" /> - <new-issue-dropdown v-if="showNewIssueDropdown" /> + <new-issue-dropdown v-if="showNewIssueDropdown" class="gl-align-self-center" /> </template> </gl-empty-state> <hr /> diff --git a/app/assets/javascripts/issues/list/constants.js b/app/assets/javascripts/issues/list/constants.js index 0795df10a7c..74f801f685c 100644 --- a/app/assets/javascripts/issues/list/constants.js +++ b/app/assets/javascripts/issues/list/constants.js @@ -29,7 +29,11 @@ export const i18n = { jiraIntegrationSecondaryMessage: s__('JiraService|This feature requires a Premium plan.'), jiraIntegrationTitle: s__('JiraService|Using Jira for issue tracking?'), newIssueLabel: __('New issue'), + newProjectLabel: __('New project'), noClosedIssuesTitle: __('There are no closed issues'), + noGroupIssuesSignedInDescription: __( + 'Issues exist in projects, so to create an issue, first create a project.', + ), noOpenIssuesDescription: __('To keep this project going, create a new issue'), noOpenIssuesTitle: __('There are no open issues'), noIssuesSignedInDescription: __( @@ -57,6 +61,8 @@ export const MAX_LIST_SIZE = 10; export const PAGE_SIZE = 20; export const PAGE_SIZE_MANUAL = 100; export const PARAM_ASSIGNEE_ID = 'assignee_id'; +export const PARAM_FIRST_PAGE_SIZE = 'first_page_size'; +export const PARAM_LAST_PAGE_SIZE = 'last_page_size'; export const PARAM_PAGE_AFTER = 'page_after'; export const PARAM_PAGE_BEFORE = 'page_before'; export const PARAM_SORT = 'sort'; diff --git a/app/assets/javascripts/issues/list/index.js b/app/assets/javascripts/issues/list/index.js index f5cb160e344..93333c31b34 100644 --- a/app/assets/javascripts/issues/list/index.js +++ b/app/assets/javascripts/issues/list/index.js @@ -80,8 +80,11 @@ export function mountIssuesListApp() { autocompleteAwardEmojisPath, calendarPath, canBulkUpdate, + canCreateProjects, canEdit, canImportIssues, + canReadCrmContact, + canReadCrmOrganization, email, emailsHelpPagePath, emptyStateSvgPath, @@ -95,6 +98,7 @@ export function mountIssuesListApp() { hasIssueWeightsFeature, hasIterationsFeature, hasMultipleIssueAssigneesFeature, + hasScopedLabelsFeature, importCsvIssuesPath, initialEmail, initialSort, @@ -107,6 +111,7 @@ export function mountIssuesListApp() { markdownHelpPath, maxAttachmentSize, newIssuePath, + newProjectPath, projectImportJiraPath, quickActionsHelpPath, releasesPath, @@ -131,6 +136,9 @@ export function mountIssuesListApp() { autocompleteAwardEmojisPath, calendarPath, canBulkUpdate: parseBoolean(canBulkUpdate), + canCreateProjects: parseBoolean(canCreateProjects), + canReadCrmContact: parseBoolean(canReadCrmContact), + canReadCrmOrganization: parseBoolean(canReadCrmOrganization), emptyStateSvgPath, fullPath, groupPath, @@ -141,6 +149,7 @@ export function mountIssuesListApp() { hasIssueWeightsFeature: parseBoolean(hasIssueWeightsFeature), hasIterationsFeature: parseBoolean(hasIterationsFeature), hasMultipleIssueAssigneesFeature: parseBoolean(hasMultipleIssueAssigneesFeature), + hasScopedLabelsFeature: parseBoolean(hasScopedLabelsFeature), initialSort, isAnonymousSearchDisabled: parseBoolean(isAnonymousSearchDisabled), isIssueRepositioningDisabled: parseBoolean(isIssueRepositioningDisabled), @@ -149,6 +158,7 @@ export function mountIssuesListApp() { isSignedIn: parseBoolean(isSignedIn), jiraIntegrationPath, newIssuePath, + newProjectPath, releasesPath, rssPath, showNewIssueLink: parseBoolean(showNewIssueLink), diff --git a/app/assets/javascripts/issues/list/queries/get_issues_counts_without_crm.query.graphql b/app/assets/javascripts/issues/list/queries/get_issues_counts_without_crm.query.graphql deleted file mode 100644 index ab91aab1218..00000000000 --- a/app/assets/javascripts/issues/list/queries/get_issues_counts_without_crm.query.graphql +++ /dev/null @@ -1,136 +0,0 @@ -query getIssuesCountWithoutCrm( - $isProject: Boolean = false - $fullPath: ID! - $iid: String - $search: String - $assigneeId: String - $assigneeUsernames: [String!] - $authorUsername: String - $confidential: Boolean - $labelName: [String] - $milestoneTitle: [String] - $milestoneWildcardId: MilestoneWildcardId - $myReactionEmoji: String - $releaseTag: [String!] - $releaseTagWildcardId: ReleaseTagWildcardId - $types: [IssueType!] - $not: NegatedIssueFilterInput -) { - group(fullPath: $fullPath) @skip(if: $isProject) { - id - openedIssues: issues( - includeSubgroups: true - state: opened - iid: $iid - search: $search - assigneeId: $assigneeId - assigneeUsernames: $assigneeUsernames - authorUsername: $authorUsername - confidential: $confidential - labelName: $labelName - milestoneTitle: $milestoneTitle - milestoneWildcardId: $milestoneWildcardId - myReactionEmoji: $myReactionEmoji - types: $types - not: $not - ) { - count - } - closedIssues: issues( - includeSubgroups: true - state: closed - iid: $iid - search: $search - assigneeId: $assigneeId - assigneeUsernames: $assigneeUsernames - authorUsername: $authorUsername - confidential: $confidential - labelName: $labelName - milestoneTitle: $milestoneTitle - milestoneWildcardId: $milestoneWildcardId - myReactionEmoji: $myReactionEmoji - types: $types - not: $not - ) { - count - } - allIssues: issues( - includeSubgroups: true - state: all - iid: $iid - search: $search - assigneeId: $assigneeId - assigneeUsernames: $assigneeUsernames - authorUsername: $authorUsername - confidential: $confidential - labelName: $labelName - milestoneTitle: $milestoneTitle - milestoneWildcardId: $milestoneWildcardId - myReactionEmoji: $myReactionEmoji - types: $types - not: $not - ) { - count - } - } - project(fullPath: $fullPath) @include(if: $isProject) { - id - openedIssues: issues( - state: opened - iid: $iid - search: $search - assigneeId: $assigneeId - assigneeUsernames: $assigneeUsernames - authorUsername: $authorUsername - confidential: $confidential - labelName: $labelName - milestoneTitle: $milestoneTitle - milestoneWildcardId: $milestoneWildcardId - myReactionEmoji: $myReactionEmoji - releaseTag: $releaseTag - releaseTagWildcardId: $releaseTagWildcardId - types: $types - not: $not - ) { - count - } - closedIssues: issues( - state: closed - iid: $iid - search: $search - assigneeId: $assigneeId - assigneeUsernames: $assigneeUsernames - authorUsername: $authorUsername - confidential: $confidential - labelName: $labelName - milestoneTitle: $milestoneTitle - milestoneWildcardId: $milestoneWildcardId - myReactionEmoji: $myReactionEmoji - releaseTag: $releaseTag - releaseTagWildcardId: $releaseTagWildcardId - types: $types - not: $not - ) { - count - } - allIssues: issues( - state: all - iid: $iid - search: $search - assigneeId: $assigneeId - assigneeUsernames: $assigneeUsernames - authorUsername: $authorUsername - confidential: $confidential - labelName: $labelName - milestoneTitle: $milestoneTitle - milestoneWildcardId: $milestoneWildcardId - myReactionEmoji: $myReactionEmoji - releaseTag: $releaseTag - releaseTagWildcardId: $releaseTagWildcardId - types: $types - not: $not - ) { - count - } - } -} diff --git a/app/assets/javascripts/issues/list/queries/get_issues_without_crm.query.graphql b/app/assets/javascripts/issues/list/queries/get_issues_without_crm.query.graphql deleted file mode 100644 index 4a8b1dfd618..00000000000 --- a/app/assets/javascripts/issues/list/queries/get_issues_without_crm.query.graphql +++ /dev/null @@ -1,94 +0,0 @@ -#import "~/graphql_shared/fragments/page_info.fragment.graphql" -#import "./issue.fragment.graphql" - -query getIssuesWithoutCrm( - $hideUsers: Boolean = false - $isProject: Boolean = false - $isSignedIn: Boolean = false - $fullPath: ID! - $iid: String - $search: String - $sort: IssueSort - $state: IssuableState - $assigneeId: String - $assigneeUsernames: [String!] - $authorUsername: String - $confidential: Boolean - $labelName: [String] - $milestoneTitle: [String] - $milestoneWildcardId: MilestoneWildcardId - $myReactionEmoji: String - $releaseTag: [String!] - $releaseTagWildcardId: ReleaseTagWildcardId - $types: [IssueType!] - $not: NegatedIssueFilterInput - $beforeCursor: String - $afterCursor: String - $firstPageSize: Int - $lastPageSize: Int -) { - group(fullPath: $fullPath) @skip(if: $isProject) { - id - issues( - includeSubgroups: true - iid: $iid - search: $search - sort: $sort - state: $state - assigneeId: $assigneeId - assigneeUsernames: $assigneeUsernames - authorUsername: $authorUsername - confidential: $confidential - labelName: $labelName - milestoneTitle: $milestoneTitle - milestoneWildcardId: $milestoneWildcardId - myReactionEmoji: $myReactionEmoji - types: $types - not: $not - before: $beforeCursor - after: $afterCursor - first: $firstPageSize - last: $lastPageSize - ) { - pageInfo { - ...PageInfo - } - nodes { - ...IssueFragment - reference(full: true) - } - } - } - project(fullPath: $fullPath) @include(if: $isProject) { - id - issues( - iid: $iid - search: $search - sort: $sort - state: $state - assigneeId: $assigneeId - assigneeUsernames: $assigneeUsernames - authorUsername: $authorUsername - confidential: $confidential - labelName: $labelName - milestoneTitle: $milestoneTitle - milestoneWildcardId: $milestoneWildcardId - myReactionEmoji: $myReactionEmoji - releaseTag: $releaseTag - releaseTagWildcardId: $releaseTagWildcardId - types: $types - not: $not - before: $beforeCursor - after: $afterCursor - first: $firstPageSize - last: $lastPageSize - ) { - pageInfo { - ...PageInfo - } - nodes { - ...IssueFragment - } - } - } -} diff --git a/app/assets/javascripts/issues/list/utils.js b/app/assets/javascripts/issues/list/utils.js index 3ca93069628..dfdc6e27f0d 100644 --- a/app/assets/javascripts/issues/list/utils.js +++ b/app/assets/javascripts/issues/list/utils.js @@ -46,8 +46,15 @@ import { WEIGHT_DESC, } from './constants'; -export const getInitialPageParams = (sortKey, afterCursor, beforeCursor) => ({ - firstPageSize: sortKey === RELATIVE_POSITION_ASC ? PAGE_SIZE_MANUAL : PAGE_SIZE, +export const getInitialPageParams = ( + sortKey, + firstPageSize = sortKey === RELATIVE_POSITION_ASC ? PAGE_SIZE_MANUAL : PAGE_SIZE, + lastPageSize, + afterCursor, + beforeCursor, +) => ({ + firstPageSize: lastPageSize ? undefined : firstPageSize, + lastPageSize, afterCursor, beforeCursor, }); diff --git a/app/assets/javascripts/issues/new/components/title_suggestions.vue b/app/assets/javascripts/issues/new/components/title_suggestions.vue index 0a9cdb12519..4fd018ab4ce 100644 --- a/app/assets/javascripts/issues/new/components/title_suggestions.vue +++ b/app/assets/javascripts/issues/new/components/title_suggestions.vue @@ -66,8 +66,8 @@ export default { </script> <template> - <div v-show="showSuggestions" class="form-group row"> - <div v-once class="col-form-label col-sm-2 pt-0"> + <div v-show="showSuggestions" class="form-group"> + <div v-once class="gl-pb-3"> {{ __('Similar issues') }} <gl-icon v-gl-tooltip.bottom @@ -77,18 +77,16 @@ export default { class="text-secondary gl-cursor-help" /> </div> - <div class="col-sm-10"> - <ul class="list-unstyled m-0"> - <li - v-for="(suggestion, index) in issues" - :key="suggestion.id" - :class="{ - 'gl-mb-3': index !== issues.length - 1, - }" - > - <title-suggestions-item :suggestion="suggestion" /> - </li> - </ul> - </div> + <ul class="gl-list-style-none gl-m-0 gl-p-0"> + <li + v-for="(suggestion, index) in issues" + :key="suggestion.id" + :class="{ + 'gl-mb-3': index !== issues.length - 1, + }" + > + <title-suggestions-item :suggestion="suggestion" /> + </li> + </ul> </div> </template> diff --git a/app/assets/javascripts/issues/show/components/description.vue b/app/assets/javascripts/issues/show/components/description.vue index daa1632c4aa..892c631f8ea 100644 --- a/app/assets/javascripts/issues/show/components/description.vue +++ b/app/assets/javascripts/issues/show/components/description.vue @@ -23,6 +23,7 @@ import workItemQuery from '~/work_items/graphql/work_item.query.graphql'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue'; +import { TRACKING_CATEGORY_SHOW } from '~/work_items/constants'; import CreateWorkItem from '~/work_items/pages/create_work_item.vue'; import animateMixin from '../mixins/animate'; import { convertDescriptionWithNewSort } from '../utils'; @@ -135,9 +136,6 @@ export default { this.$nextTick(() => { this.renderGFM(); - if (this.workItemsEnabled) { - this.renderTaskActions(); - } }); }, taskStatus() { @@ -148,10 +146,6 @@ export default { this.renderGFM(); this.updateTaskStatusText(); - if (this.workItemsEnabled) { - this.renderTaskActions(); - } - if (this.workItemId) { const taskLink = this.$el.querySelector( `.gfm-issue[data-issue="${getIdFromGraphQLId(this.workItemId)}"]`, @@ -178,15 +172,20 @@ export default { onError: this.taskListUpdateError.bind(this), }); - if (this.issuableType === IssuableType.Issue) { - this.renderSortableLists(); + this.removeAllPointerEventListeners(); + + this.renderSortableLists(); + + if (this.workItemsEnabled) { + this.renderTaskActions(); } } }, renderSortableLists() { - this.removeAllPointerEventListeners(); - - const lists = document.querySelectorAll('.description ul, .description ol'); + // We exclude GLFM table of contents which have a `section-nav` class on the root `ul`. + const lists = document.querySelectorAll( + '.description .md > ul:not(.section-nav), .description .md > ul:not(.section-nav) ul, .description ol', + ); lists.forEach((list) => { if (list.children.length <= 1) { return; @@ -194,7 +193,7 @@ export default { Array.from(list.children).forEach((listItem) => { listItem.prepend(this.createDragIconElement()); - this.addPointerEventListeners(listItem); + this.addPointerEventListeners(listItem, '.drag-icon'); }); Sortable.create( @@ -216,20 +215,20 @@ export default { </svg>`; return container.firstChild; }, - addPointerEventListeners(listItem) { + addPointerEventListeners(listItem, iconSelector) { const pointeroverListener = (event) => { - const dragIcon = event.target.closest('li').querySelector('.drag-icon'); - if (!dragIcon || isDragging() || this.isUpdating) { + const icon = event.target.closest('li').querySelector(iconSelector); + if (!icon || isDragging() || this.isUpdating) { return; } - dragIcon.style.visibility = 'visible'; + icon.style.visibility = 'visible'; }; const pointeroutListener = (event) => { - const dragIcon = event.target.closest('li').querySelector('.drag-icon'); - if (!dragIcon) { + const icon = event.target.closest('li').querySelector(iconSelector); + if (!icon) { return; } - dragIcon.style.visibility = 'hidden'; + icon.style.visibility = 'hidden'; }; // We use pointerover/pointerout instead of CSS so that when we hover over a @@ -238,10 +237,16 @@ export default { listItem.addEventListener('pointerout', pointeroutListener); this.pointerEventListeners = this.pointerEventListeners || new Map(); - this.pointerEventListeners.set(listItem, [ + const events = [ { type: 'pointerover', listener: pointeroverListener }, { type: 'pointerout', listener: pointeroutListener }, - ]); + ]; + if (this.pointerEventListeners.has(listItem)) { + const concatenatedEvents = this.pointerEventListeners.get(listItem).concat(events); + this.pointerEventListeners.set(listItem, concatenatedEvents); + } else { + this.pointerEventListeners.set(listItem, events); + } }, removeAllPointerEventListeners() { this.pointerEventListeners?.forEach((events, listItem) => { @@ -311,13 +316,14 @@ export default { this.workItemId = workItemId; this.updateWorkItemIdUrlQuery(issue); this.track('viewed_work_item_from_modal', { - category: 'workItems:show', + category: TRACKING_CATEGORY_SHOW, label: 'work_item_view', property: `type_${referenceType}`, }); }); return; } + this.addPointerEventListeners(item, '.js-add-task'); const button = document.createElement('button'); button.classList.add( 'btn', @@ -325,6 +331,7 @@ export default { 'btn-md', 'gl-button', 'btn-default-tertiary', + 'gl-visibility-hidden', 'gl-p-0!', 'gl-mt-n1', 'gl-ml-3', @@ -339,7 +346,7 @@ export default { `; button.setAttribute('aria-label', s__('WorkItem|Convert to work item')); button.addEventListener('click', () => this.openCreateTaskModal(button)); - item.append(button); + this.insertButtonNextToTaskText(item, button); }); }, addHoverListeners(taskLink, id) { @@ -355,9 +362,24 @@ export default { } }); }, + insertButtonNextToTaskText(listItem, button) { + const paragraph = Array.from(listItem.children).find((element) => element.tagName === 'P'); + const lastChild = listItem.lastElementChild; + if (paragraph) { + // If there's a `p` element, then it's a multi-paragraph task item + // and the task text exists within the `p` element as the last child + paragraph.append(button); + } else if (lastChild.tagName === 'OL' || lastChild.tagName === 'UL') { + // Otherwise, the task item can have a child list which exists directly after the task text + lastChild.insertAdjacentElement('beforebegin', button); + } else { + // Otherwise, the task item is a simple one where the task text exists as the last child + listItem.append(button); + } + }, setActiveTask(el) { const { parentElement } = el; - const lineNumbers = parentElement.getAttribute('data-sourcepos').match(/\b\d+(?=:)/g); + const lineNumbers = parentElement.dataset.sourcepos.match(/\b\d+(?=:)/g); this.activeTask = { title: parentElement.innerText, lineNumberStart: lineNumbers[0], @@ -431,13 +453,7 @@ export default { > </textarea> - <gl-modal - ref="modal" - modal-id="create-task-modal" - :title="s__('WorkItem|New Task')" - hide-footer - body-class="gl-p-0!" - > + <gl-modal ref="modal" size="lg" modal-id="create-task-modal" hide-footer body-class="gl-p-0!"> <create-work-item is-modal :initial-title="activeTask.title" diff --git a/app/assets/javascripts/issues/show/components/edit_actions.vue b/app/assets/javascripts/issues/show/components/edit_actions.vue index 4daf6f2b61b..9b31014c1ba 100644 --- a/app/assets/javascripts/issues/show/components/edit_actions.vue +++ b/app/assets/javascripts/issues/show/components/edit_actions.vue @@ -77,7 +77,7 @@ export default { return this.formState.title.trim() !== ''; }, shouldShowDeleteButton() { - return this.canDestroy && this.showDeleteButton; + return this.canDestroy && this.showDeleteButton && this.typeToShow; }, typeToShow() { const { issueState, issuableType } = this; diff --git a/app/assets/javascripts/issues/show/components/incidents/graphql/queries/get_timeline_events.query.graphql b/app/assets/javascripts/issues/show/components/incidents/graphql/queries/get_timeline_events.query.graphql new file mode 100644 index 00000000000..7e049d98c1a --- /dev/null +++ b/app/assets/javascripts/issues/show/components/incidents/graphql/queries/get_timeline_events.query.graphql @@ -0,0 +1,21 @@ +query GetTimelineEvents($fullPath: ID!, $incidentId: IssueID!) { + project(fullPath: $fullPath) { + id + incidentManagementTimelineEvents(incidentId: $incidentId) { + nodes { + id + author { + id + name + username + } + note + noteHtml + action + occurredAt + createdAt + updatedAt + } + } + } +} diff --git a/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue b/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue index ea0e15adfed..6fdce6045f2 100644 --- a/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue +++ b/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue @@ -9,6 +9,7 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import DescriptionComponent from '../description.vue'; import getAlert from './graphql/queries/get_alert.graphql'; import HighlightBar from './highlight_bar.vue'; +import TimelineTab from './timeline_events_tab.vue'; export default { components: { @@ -17,8 +18,7 @@ export default { GlTab, GlTabs, HighlightBar, - TimelineTab: () => - import('ee_component/issues/show/components/incidents/timeline_events_tab.vue'), + TimelineTab, IncidentMetricTab: () => import('ee_component/issues/show/components/incidents/incident_metric_tab.vue'), }, @@ -53,7 +53,7 @@ export default { return this.$apollo.queries.alert.loading; }, incidentTabEnabled() { - return this.glFeatures.incidentTimelineEvents && this.glFeatures.incidentTimeline; + return this.glFeatures.incidentTimeline; }, }, mounted() { @@ -65,17 +65,26 @@ export default { Tracking.event(category, action); }, handleTabChange(tabIndex) { + /** + * TODO: Implement a solution that does not violate Vue principles in using + * DOM manipulation directly (#361618) + */ const parent = document.querySelector('.js-issue-details'); if (parent !== null) { const itemsToHide = parent.querySelectorAll('.js-issue-widgets'); const lineSeparator = parent.querySelector('.js-detail-page-description'); + const editButton = document.querySelector('.js-issuable-edit'); + const isSummaryTab = tabIndex === 0; - lineSeparator.classList.toggle('gl-border-b-0', tabIndex > 0); + lineSeparator.classList.toggle('gl-border-b-0', !isSummaryTab); itemsToHide.forEach(function hide(item) { - item.classList.toggle('gl-display-none', tabIndex > 0); + item.classList.toggle('gl-display-none', !isSummaryTab); }); + + editButton.classList.toggle('gl-display-none', !isSummaryTab); + editButton.classList.toggle('gl-sm-display-inline-flex!', isSummaryTab); } }, }, @@ -103,7 +112,7 @@ export default { > <alert-details-table :alert="alert" :loading="loading" /> </gl-tab> - <timeline-tab v-if="incidentTabEnabled" data-testid="timeline-events-tab" /> + <timeline-tab v-if="incidentTabEnabled" /> </gl-tabs> </div> </template> diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue new file mode 100644 index 00000000000..a6e58ee0bdc --- /dev/null +++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue @@ -0,0 +1,73 @@ +<script> +import { formatDate } from '~/lib/utils/datetime_utility'; +import IncidentTimelineEventListItem from './timeline_events_list_item.vue'; + +export default { + name: 'IncidentTimelineEventList', + components: { + IncidentTimelineEventListItem, + }, + props: { + timelineEventLoading: { + type: Boolean, + required: false, + default: true, + }, + timelineEvents: { + type: Array, + required: true, + default: () => [], + }, + }, + computed: { + dateGroupedEvents() { + const groupedEvents = new Map(); + + this.timelineEvents.forEach((event) => { + const date = formatDate(event.occurredAt, 'isoDate', true); + + if (groupedEvents.has(date)) { + groupedEvents.get(date).push(event); + } else { + groupedEvents.set(date, [event]); + } + }); + + return groupedEvents; + }, + }, + methods: { + isLastItem(groups, groupIndex, events, eventIndex) { + if (groupIndex < groups.size - 1) { + return false; + } + return eventIndex === events.length - 1; + }, + }, +}; +</script> + +<template> + <div class="issuable-discussion incident-timeline-events"> + <div + v-for="([eventDate, events], groupIndex) in dateGroupedEvents" + :key="eventDate" + data-testid="timeline-group" + > + <div class="gl-pb-3 gl-border-gray-50 gl-border-1 gl-border-b-solid"> + <strong class="gl-font-size-h2" data-testid="event-date">{{ eventDate }}</strong> + </div> + <ul class="notes main-notes-list gl-pl-n3"> + <incident-timeline-event-list-item + v-for="(event, eventIndex) in events" + :key="event.id" + :action="event.action" + :occurred-at="event.occurredAt" + :note-html="event.noteHtml" + :is-last-item="isLastItem(dateGroupedEvents, groupIndex, events, eventIndex)" + data-testid="timeline-event" + /> + </ul> + </div> + </div> +</template> diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_list_item.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_list_item.vue new file mode 100644 index 00000000000..fef9bf713b7 --- /dev/null +++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_list_item.vue @@ -0,0 +1,71 @@ +<script> +import { GlIcon, GlSafeHtmlDirective, GlSprintf } from '@gitlab/ui'; +import { formatDate } from '~/lib/utils/datetime_utility'; +import { __ } from '~/locale'; +import { getEventIcon } from './utils'; + +export default { + name: 'IncidentTimelineEventListItem', + i18n: { + timeUTC: __('%{time} UTC'), + }, + components: { + GlIcon, + GlSprintf, + }, + directives: { + SafeHtml: GlSafeHtmlDirective, + }, + props: { + isLastItem: { + type: Boolean, + required: true, + }, + occurredAt: { + type: String, + required: true, + }, + action: { + type: String, + required: true, + }, + noteHtml: { + type: String, + required: true, + }, + }, + computed: { + time() { + return formatDate(this.occurredAt, 'HH:MM', true); + }, + }, + methods: { + getEventIcon, + }, +}; +</script> +<template> + <li + class="timeline-entry timeline-entry-vertical-line note system-note note-wrapper gl-my-2! gl-pr-0!" + > + <div class="gl-display-flex gl-align-items-center"> + <div + class="gl-display-flex gl-align-items-center gl-justify-content-center gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-n2 gl-mr-3 gl-w-8 gl-h-8 gl-p-3 gl-z-index-1" + > + <gl-icon :name="getEventIcon(action)" class="note-icon" /> + </div> + <div + class="timeline-event-note gl-w-full" + :class="{ 'gl-pb-3 gl-border-gray-50 gl-border-1 gl-border-b-solid': !isLastItem }" + data-testid="event-text-container" + > + <strong class="gl-font-lg" data-testid="event-time"> + <gl-sprintf :message="$options.i18n.timeUTC"> + <template #time>{{ time }}</template> + </gl-sprintf> + </strong> + <div v-safe-html="noteHtml"></div> + </div> + </div> + </li> +</template> diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_tab.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_tab.vue new file mode 100644 index 00000000000..400e1f0b725 --- /dev/null +++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_tab.vue @@ -0,0 +1,70 @@ +<script> +import { GlEmptyState, GlLoadingIcon, GlTab } from '@gitlab/ui'; +import { convertToGraphQLId } from '~/graphql_shared/utils'; +import { TYPE_ISSUE } from '~/graphql_shared/constants'; +import { fetchPolicies } from '~/lib/graphql'; +import getTimelineEvents from './graphql/queries/get_timeline_events.query.graphql'; +import { displayAndLogError } from './utils'; + +import IncidentTimelineEventsList from './timeline_events_list.vue'; + +export default { + components: { + GlEmptyState, + GlLoadingIcon, + GlTab, + IncidentTimelineEventsList, + }, + inject: ['fullPath', 'issuableId'], + data() { + return { + timelineEvents: [], + }; + }, + apollo: { + timelineEvents: { + fetchPolicy: fetchPolicies.CACHE_AND_NETWORK, + query: getTimelineEvents, + variables() { + return { + fullPath: this.fullPath, + incidentId: convertToGraphQLId(TYPE_ISSUE, this.issuableId), + }; + }, + update(data) { + return data.project.incidentManagementTimelineEvents.nodes; + }, + error(error) { + displayAndLogError(error); + }, + }, + }, + computed: { + timelineEventLoading() { + return this.$apollo.queries.timelineEvents.loading; + }, + hasTimelineEvents() { + return Boolean(this.timelineEvents.length); + }, + showEmptyState() { + return !this.timelineEventLoading && !this.hasTimelineEvents; + }, + }, +}; +</script> + +<template> + <gl-tab :title="s__('Incident|Timeline')"> + <gl-loading-icon v-if="timelineEventLoading" size="lg" color="dark" class="gl-mt-5" /> + <gl-empty-state + v-else-if="showEmptyState" + :compact="true" + :description="s__('Incident|No timeline items have been added yet.')" + /> + <incident-timeline-events-list + v-if="hasTimelineEvents" + :timeline-event-loading="timelineEventLoading" + :timeline-events="timelineEvents" + /> + </gl-tab> +</template> diff --git a/app/assets/javascripts/issues/show/components/incidents/utils.js b/app/assets/javascripts/issues/show/components/incidents/utils.js new file mode 100644 index 00000000000..8b5a2ec4031 --- /dev/null +++ b/app/assets/javascripts/issues/show/components/incidents/utils.js @@ -0,0 +1,18 @@ +import { createAlert } from '~/flash'; +import { s__ } from '~/locale'; + +export const displayAndLogError = (error) => + createAlert({ + message: s__('Incident|Something went wrong while fetching incident timeline events.'), + captureError: true, + error, + }); + +const EVENT_ICONS = { + comment: 'comment', + default: 'comment', +}; + +export const getEventIcon = (actionName) => { + return EVENT_ICONS[actionName] ?? EVENT_ICONS.default; +}; diff --git a/app/assets/javascripts/issues/show/components/title.vue b/app/assets/javascripts/issues/show/components/title.vue index 1982147e454..7f67b31b122 100644 --- a/app/assets/javascripts/issues/show/components/title.vue +++ b/app/assets/javascripts/issues/show/components/title.vue @@ -74,7 +74,7 @@ export default { 'issue-realtime-pre-pulse': preAnimation, 'issue-realtime-trigger-pulse': pulseAnimation, }" - class="title qa-title" + class="title qa-title gl-font-size-h-display" dir="auto" ></h1> <gl-button diff --git a/app/assets/javascripts/issues/show/index.js b/app/assets/javascripts/issues/show/index.js index 6b0b26ef2e3..5bdad010af7 100644 --- a/app/assets/javascripts/issues/show/index.js +++ b/app/assets/javascripts/issues/show/index.js @@ -33,6 +33,7 @@ export function initIncidentApp(issueData = {}) { canCreateIncident, canUpdate, iid, + issuableId, projectNamespace, projectPath, projectId, @@ -53,6 +54,7 @@ export function initIncidentApp(issueData = {}) { canUpdate, fullPath, iid, + issuableId, projectId, slaFeatureAvailable: parseBoolean(slaFeatureAvailable), uploadMetricsFeatureAvailable: parseBoolean(uploadMetricsFeatureAvailable), @@ -83,7 +85,7 @@ export function initIssueApp(issueData, store) { bootstrapApollo({ ...issueState, issueType: el.dataset.issueType }); - const { canCreateIncident, ...issueProps } = issueData; + const { canCreateIncident, hasIssueWeightsFeature, ...issueProps } = issueData; return new Vue({ el, @@ -93,6 +95,7 @@ export function initIssueApp(issueData, store) { provide: { canCreateIncident, fullPath, + hasIssueWeightsFeature, }, computed: { ...mapGetters(['getNoteableData']), diff --git a/app/assets/javascripts/jira_connect/branches/pages/index.vue b/app/assets/javascripts/jira_connect/branches/pages/index.vue index d72dec6cdee..953e823ec96 100644 --- a/app/assets/javascripts/jira_connect/branches/pages/index.vue +++ b/app/assets/javascripts/jira_connect/branches/pages/index.vue @@ -46,7 +46,7 @@ export default { <template> <div> <div class="gl-border-1 gl-border-b-solid gl-border-gray-100 gl-mb-5 gl-mt-7"> - <h1 data-testid="page-title" class="page-title">{{ pageTitle }}</h1> + <h1 data-testid="page-title" class="page-title gl-font-size-h-display">{{ pageTitle }}</h1> </div> <new-branch-form v-if="showForm" @success="onNewBranchFormSuccess" /> diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue index 7f035dddafe..a9ec7bd971e 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue +++ b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue @@ -104,7 +104,7 @@ export default { @input="onGroupSearch" /> - <gl-loading-icon v-if="isLoadingInitial" size="md" /> + <gl-loading-icon v-if="isLoadingInitial" size="lg" /> <div v-else-if="groups.length === 0" class="gl-text-center"> <h5>{{ s__('Integrations|No available namespaces.') }}</h5> <p class="gl-mt-5"> diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/app.vue b/app/assets/javascripts/jira_connect/subscriptions/components/app.vue index 22422872183..66aea60c5b5 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/components/app.vue +++ b/app/assets/javascripts/jira_connect/subscriptions/components/app.vue @@ -60,6 +60,12 @@ export default { isBrowserSupported() { return !this.isOauthEnabled || AccessorUtilities.canUseCrypto(); }, + gitlabUrl() { + return gon.gitlab_url; + }, + gitlabLogo() { + return gon.gitlab_logo; + }, }, created() { this.setInitialAlert(); @@ -99,43 +105,55 @@ export default { </script> <template> - <browser-support-alert v-if="!isBrowserSupported" class="gl-mb-7" /> - <div v-else data-testid="jira-connect-app"> - <compatibility-alert class="gl-mb-7" /> - - <gl-alert - v-if="shouldShowAlert" - :variant="alert.variant" - :title="alert.title" - class="gl-mb-5" - data-testid="jira-connect-persisted-alert" - @dismiss="setAlert" + <div> + <header + class="jira-connect-header gl-display-flex gl-align-items-center gl-justify-content-center gl-px-5 gl-border-b-solid gl-border-b-gray-100 gl-border-b-1 gl-bg-white" > - <gl-sprintf v-if="alert.linkUrl" :message="alert.message"> - <template #link="{ content }"> - <gl-link :href="alert.linkUrl" target="_blank">{{ content }}</gl-link> - </template> - </gl-sprintf> + <gl-link :href="gitlabUrl" target="_blank"> + <img :src="gitlabLogo" class="gl-h-6" :alt="__('GitLab')" /> + </gl-link> + <user-link + :user-signed-in="userSignedIn" + :has-subscriptions="hasSubscriptions" + :user="currentUser" + class="gl-fixed gl-right-4" + /> + </header> - <template v-else> - {{ alert.message }} - </template> - </gl-alert> + <main class="jira-connect-app gl-px-5 gl-pt-7 gl-mx-auto"> + <browser-support-alert v-if="!isBrowserSupported" class="gl-mb-7" /> + <div v-else data-testid="jira-connect-app"> + <compatibility-alert class="gl-mb-7" /> - <user-link - :user-signed-in="userSignedIn" - :has-subscriptions="hasSubscriptions" - :user="currentUser" - /> + <gl-alert + v-if="shouldShowAlert" + :variant="alert.variant" + :title="alert.title" + class="gl-mb-5" + data-testid="jira-connect-persisted-alert" + @dismiss="setAlert" + > + <gl-sprintf v-if="alert.linkUrl" :message="alert.message"> + <template #link="{ content }"> + <gl-link :href="alert.linkUrl" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> - <div class="gl-layout-w-limited gl-mx-auto gl-px-5 gl-mb-7"> - <sign-in-page - v-if="!userSignedIn" - :has-subscriptions="hasSubscriptions" - @sign-in-oauth="onSignInOauth" - @error="onSignInError" - /> - <subscriptions-page v-else :has-subscriptions="hasSubscriptions" /> - </div> + <template v-else> + {{ alert.message }} + </template> + </gl-alert> + + <div class="gl-layout-w-limited gl-mx-auto gl-px-5 gl-mb-7"> + <sign-in-page + v-if="!userSignedIn" + :has-subscriptions="hasSubscriptions" + @sign-in-oauth="onSignInOauth" + @error="onSignInError" + /> + <subscriptions-page v-else :has-subscriptions="hasSubscriptions" /> + </div> + </div> + </main> </div> </template> diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_oauth_button.vue b/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_oauth_button.vue index b9e8bab019f..ad3e70bcb5f 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_oauth_button.vue +++ b/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_oauth_button.vue @@ -112,7 +112,7 @@ export default { </script> <template> <gl-button - category="primary" + v-bind="$attrs" variant="info" :loading="loading" :disabled="!canUseCrypto" diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/user_link.vue b/app/assets/javascripts/jira_connect/subscriptions/components/user_link.vue index 5e2c83aff65..b253f888d22 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/components/user_link.vue +++ b/app/assets/javascripts/jira_connect/subscriptions/components/user_link.vue @@ -1,5 +1,6 @@ <script> import { GlLink, GlSprintf } from '@gitlab/ui'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { __ } from '~/locale'; import { getGitlabSignInURL } from '~/jira_connect/subscriptions/utils'; @@ -7,7 +8,9 @@ export default { components: { GlLink, GlSprintf, + SignInOauthButton: () => import('./sign_in_oauth_button.vue'), }, + mixins: [glFeatureFlagMixin()], inject: { usersPath: { default: '', @@ -51,6 +54,9 @@ export default { ? this.$options.i18n.signedInAsUserText : this.$options.i18n.signedInText; }, + isOauthEnabled() { + return this.glFeatures.jiraConnectOauth; + }, }, async created() { this.signInURL = await getGitlabSignInURL(this.usersPath); @@ -63,7 +69,7 @@ export default { }; </script> <template> - <div class="jira-connect-user gl-font-base"> + <div class="gl-font-base"> <gl-sprintf v-if="userSignedIn" :message="signedInText"> <template #user_link> <gl-link data-testid="gitlab-user-link" :href="gitlabUserLink" target="_blank"> @@ -72,13 +78,14 @@ export default { </template> </gl-sprintf> - <gl-link - v-else-if="hasSubscriptions" - data-testid="sign-in-link" - :href="signInURL" - target="_blank" - > - {{ $options.i18n.signInText }} - </gl-link> + <template v-else-if="hasSubscriptions"> + <sign-in-oauth-button v-if="isOauthEnabled" category="tertiary"> + {{ $options.i18n.signInText }} + </sign-in-oauth-button> + + <gl-link v-else data-testid="sign-in-link" :href="signInURL" target="_blank"> + {{ $options.i18n.signInText }} + </gl-link> + </template> </div> </template> diff --git a/app/assets/javascripts/jira_connect/subscriptions/pages/subscriptions_page.vue b/app/assets/javascripts/jira_connect/subscriptions/pages/subscriptions_page.vue index b1c1ae73e14..d7213f683d8 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/pages/subscriptions_page.vue +++ b/app/assets/javascripts/jira_connect/subscriptions/pages/subscriptions_page.vue @@ -29,7 +29,7 @@ export default { <div> <h2 class="gl-text-center gl-mb-7">{{ s__('JiraService|GitLab for Jira Configuration') }}</h2> - <gl-loading-icon v-if="subscriptionsLoading" size="md" /> + <gl-loading-icon v-if="subscriptionsLoading" size="lg" /> <div v-else-if="hasSubscriptions && !subscriptionsError"> <div class="gl-display-flex gl-justify-content-end gl-mb-3"> <add-namespace-button /> diff --git a/app/assets/javascripts/jira_import/components/jira_import_app.vue b/app/assets/javascripts/jira_import/components/jira_import_app.vue index 0f690d17da9..5e388900d2a 100644 --- a/app/assets/javascripts/jira_import/components/jira_import_app.vue +++ b/app/assets/javascripts/jira_import/components/jira_import_app.vue @@ -95,7 +95,7 @@ export default { :illustration="setupIllustration" :jira-integration-path="jiraIntegrationPath" /> - <gl-loading-icon v-else-if="$apollo.loading" size="md" class="mt-3" /> + <gl-loading-icon v-else-if="$apollo.loading" size="lg" class="mt-3" /> <jira-import-progress v-else-if="jiraImportDetails.isInProgress" :illustration="inProgressIllustration" diff --git a/app/assets/javascripts/jira_import/components/jira_import_form.vue b/app/assets/javascripts/jira_import/components/jira_import_form.vue index 8a36a4d2466..f8ca62da1a5 100644 --- a/app/assets/javascripts/jira_import/components/jira_import_form.vue +++ b/app/assets/javascripts/jira_import/components/jira_import_form.vue @@ -254,7 +254,7 @@ export default { </gl-sprintf> </gl-alert> - <h3 class="page-title">{{ __('New Jira import') }}</h3> + <h1 class="page-title gl-font-size-h-display">{{ __('New Jira import') }}</h1> <hr /> @@ -331,7 +331,7 @@ export default { </template> </gl-table-lite> - <gl-loading-icon v-if="isInitialLoadingState" size="md" /> + <gl-loading-icon v-if="isInitialLoadingState" size="lg" /> <gl-button v-if="hasMoreUsers" diff --git a/app/assets/javascripts/jobs/components/job_container_item.vue b/app/assets/javascripts/jobs/components/job_container_item.vue index d0594d1ad27..097ab3b4cf6 100644 --- a/app/assets/javascripts/jobs/components/job_container_item.vue +++ b/app/assets/javascripts/jobs/components/job_container_item.vue @@ -64,9 +64,10 @@ export default { v-if="isActive" name="arrow-right" class="icon-arrow-right gl-absolute gl-display-block" + :size="14" /> - <ci-icon :status="job.status" /> + <ci-icon :status="job.status" class="gl-mr-2" :size="14" /> <span class="gl-text-truncate gl-w-full">{{ jobName }}</span> diff --git a/app/assets/javascripts/jobs/components/log/line_header.vue b/app/assets/javascripts/jobs/components/log/line_header.vue index c72d488f844..de774e8408b 100644 --- a/app/assets/javascripts/jobs/components/log/line_header.vue +++ b/app/assets/javascripts/jobs/components/log/line_header.vue @@ -30,7 +30,7 @@ export default { }, computed: { iconName() { - return this.isClosed ? 'angle-right' : 'angle-down'; + return this.isClosed ? 'chevron-lg-right' : 'chevron-lg-down'; }, }, methods: { diff --git a/app/assets/javascripts/jobs/components/manual_variables_form.vue b/app/assets/javascripts/jobs/components/manual_variables_form.vue index 7a52a1b0d6b..07ef4f054b4 100644 --- a/app/assets/javascripts/jobs/components/manual_variables_form.vue +++ b/app/assets/javascripts/jobs/components/manual_variables_form.vue @@ -178,7 +178,7 @@ export default { <div class="gl-display-flex gl-justify-content-center gl-mt-5"> <gl-button class="gl-mt-5" - variant="info" + variant="confirm" category="primary" :aria-label="__('Trigger manual job')" :disabled="triggerBtnDisabled" diff --git a/app/assets/javascripts/jobs/components/stuck_block.vue b/app/assets/javascripts/jobs/components/stuck_block.vue index f9cde61e917..d7a26d22406 100644 --- a/app/assets/javascripts/jobs/components/stuck_block.vue +++ b/app/assets/javascripts/jobs/components/stuck_block.vue @@ -1,5 +1,5 @@ <script> -import { GlAlert, GlBadge, GlLink } from '@gitlab/ui'; +import { GlAlert, GlBadge, GlLink, GlSprintf } from '@gitlab/ui'; import { s__ } from '~/locale'; /** * Renders Stuck Runners block for job's view. @@ -9,6 +9,7 @@ export default { GlAlert, GlBadge, GlLink, + GlSprintf, }, props: { hasOfflineRunnersForProject: { @@ -29,11 +30,15 @@ export default { hasNoRunnersWithCorrespondingTags() { return this.tags.length > 0; }, + protectedBranchSettingsDocsLink() { + return 'https://docs.gitlab.com/runner/security/index.html#reduce-the-security-risk-of-using-privileged-containers'; + }, stuckData() { if (this.hasNoRunnersWithCorrespondingTags) { return { - text: s__(`Job|This job is stuck because you don't have - any active runners online or available with any of these tags assigned to them:`), + text: s__( + `Job|This job is stuck because of one of the following problems. There are no active runners online, no runners for the %{linkStart}protected branch%{linkEnd}, or no runners that match all of the job's tags:`, + ), dataTestId: 'job-stuck-with-tags', showTags: true, }; @@ -59,7 +64,17 @@ export default { <template> <gl-alert variant="warning" :dismissible="false"> <p class="gl-mb-0" :data-testid="stuckData.dataTestId"> - {{ stuckData.text }} + <gl-sprintf :message="stuckData.text"> + <template #link="{ content }"> + <a + class="gl-display-inline-block" + :href="protectedBranchSettingsDocsLink" + target="_blank" + > + {{ content }} + </a> + </template> + </gl-sprintf> <template v-if="stuckData.showTags"> <gl-badge v-for="tag in tags" :key="tag" variant="info"> {{ tag }} diff --git a/app/assets/javascripts/jobs/components/table/jobs_table_app.vue b/app/assets/javascripts/jobs/components/table/jobs_table_app.vue index 3ea50dfb7a3..1ac1a2d68e2 100644 --- a/app/assets/javascripts/jobs/components/table/jobs_table_app.vue +++ b/app/assets/javascripts/jobs/components/table/jobs_table_app.vue @@ -213,7 +213,7 @@ export default { <gl-intersection-observer v-if="hasNextPage" @appear="fetchMoreJobs"> <gl-loading-icon v-if="showLoadingSpinner" - size="md" + size="lg" :aria-label="$options.i18n.loadingAriaLabel" /> </gl-intersection-observer> diff --git a/app/assets/javascripts/labels/components/promote_label_modal.vue b/app/assets/javascripts/labels/components/promote_label_modal.vue index e708cd32fff..8598500c842 100644 --- a/app/assets/javascripts/labels/components/promote_label_modal.vue +++ b/app/assets/javascripts/labels/components/promote_label_modal.vue @@ -9,7 +9,7 @@ import eventHub from '../event_hub'; export default { primaryProps: { text: s__('Labels|Promote Label'), - attributes: [{ variant: 'warning' }, { category: 'primary' }], + attributes: [{ variant: 'confirm' }], }, cancelProps: { text: __('Cancel'), diff --git a/app/assets/javascripts/lazy_loader.js b/app/assets/javascripts/lazy_loader.js index 2b4dd205cf1..ba801082377 100644 --- a/app/assets/javascripts/lazy_loader.js +++ b/app/assets/javascripts/lazy_loader.js @@ -127,7 +127,7 @@ export default class LazyLoader { // Loading Images which are in the current viewport or close to them this.lazyImages = this.lazyImages.filter((selectedImage) => { - if (selectedImage.getAttribute('data-src')) { + if (selectedImage.dataset.src) { const imgBoundRect = selectedImage.getBoundingClientRect(); const imgTop = scrollTop + imgBoundRect.top; const imgBound = imgTop + imgBoundRect.height; @@ -156,16 +156,17 @@ export default class LazyLoader { } static loadImage(img) { - if (img.getAttribute('data-src')) { + if (img.dataset.src) { img.setAttribute('loading', 'lazy'); - let imgUrl = img.getAttribute('data-src'); + let imgUrl = img.dataset.src; // Only adding width + height for avatars for now if (imgUrl.indexOf('/avatar/') > -1 && imgUrl.indexOf('?') === -1) { const targetWidth = img.getAttribute('width') || img.width; imgUrl += `?width=${targetWidth}`; } img.setAttribute('src', imgUrl); - img.removeAttribute('data-src'); + // eslint-disable-next-line no-param-reassign + delete img.dataset.src; img.classList.remove('lazy'); img.classList.add('js-lazy-loaded'); img.classList.add('qa-js-lazy-loaded'); diff --git a/app/assets/javascripts/lib/gfm/index.js b/app/assets/javascripts/lib/gfm/index.js index 4e704eb69b2..b4f941294de 100644 --- a/app/assets/javascripts/lib/gfm/index.js +++ b/app/assets/javascripts/lib/gfm/index.js @@ -1,10 +1,33 @@ import { unified } from 'unified'; import remarkParse from 'remark-parse'; -import remarkRehype from 'remark-rehype'; +import remarkGfm from 'remark-gfm'; +import remarkRehype, { all } from 'remark-rehype'; import rehypeRaw from 'rehype-raw'; const createParser = () => { - return unified().use(remarkParse).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeRaw); + return unified() + .use(remarkParse) + .use(remarkGfm) + .use(remarkRehype, { + allowDangerousHtml: true, + handlers: { + footnoteReference: (h, node) => + h( + node.position, + 'footnoteReference', + { identifier: node.identifier, label: node.label }, + [], + ), + footnoteDefinition: (h, node) => + h( + node.position, + 'footnoteDefinition', + { identifier: node.identifier, label: node.label }, + all(h, node), + ), + }, + }) + .use(rehypeRaw); }; const compilerFactory = (renderer) => diff --git a/app/assets/javascripts/lib/graphql.js b/app/assets/javascripts/lib/graphql.js index 451950346b0..cfcce234bfb 100644 --- a/app/assets/javascripts/lib/graphql.js +++ b/app/assets/javascripts/lib/graphql.js @@ -105,7 +105,7 @@ export default (resolvers = {}, config = {}) => { const { baseUrl, batchMax = 10, - cacheConfig, + cacheConfig = { typePolicies: {}, possibleTypes: {} }, fetchPolicy = fetchPolicies.CACHE_FIRST, typeDefs, path = '/api/graphql', @@ -166,6 +166,7 @@ export default (resolvers = {}, config = {}) => { PerformanceBarService.interceptor({ config: { url: httpResponse.url, + operationName: operation.operationName, }, headers: { 'x-request-id': httpResponse.headers.get('x-request-id'), @@ -221,9 +222,15 @@ export default (resolvers = {}, config = {}) => { typeDefs, link: appLink, cache: new InMemoryCache({ - typePolicies, - possibleTypes, ...cacheConfig, + typePolicies: { + ...typePolicies, + ...cacheConfig.typePolicies, + }, + possibleTypes: { + ...possibleTypes, + ...cacheConfig.possibleTypes, + }, }), resolvers, defaultOptions: { diff --git a/app/assets/javascripts/lib/utils/color_utils.js b/app/assets/javascripts/lib/utils/color_utils.js index 66d52051905..3d8df4fde05 100644 --- a/app/assets/javascripts/lib/utils/color_utils.js +++ b/app/assets/javascripts/lib/utils/color_utils.js @@ -67,7 +67,7 @@ export function darkModeEnabled() { const ideDarkThemes = ['dark', 'solarized-dark', 'monokai']; // eslint-disable-next-line @gitlab/require-i18n-strings - const isWebIde = document.body.dataset.page.startsWith('ide:'); + const isWebIde = document.body.dataset.page?.startsWith('ide:'); if (isWebIde) { return ideDarkThemes.includes(window.gon?.user_color_scheme); diff --git a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js index 173116062c9..2dc479db80a 100644 --- a/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js +++ b/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js @@ -56,7 +56,7 @@ export function confirmAction( export function confirmViaGlModal(message, element) { const primaryBtnConfig = {}; - const confirmBtnVariant = element.getAttribute('data-confirm-btn-variant'); + const { confirmBtnVariant } = element.dataset; if (confirmBtnVariant) { primaryBtnConfig.primaryBtnVariant = confirmBtnVariant; diff --git a/app/assets/javascripts/lib/utils/dom_utils.js b/app/assets/javascripts/lib/utils/dom_utils.js index 4262329aae7..bca6978c206 100644 --- a/app/assets/javascripts/lib/utils/dom_utils.js +++ b/app/assets/javascripts/lib/utils/dom_utils.js @@ -67,17 +67,6 @@ export const parseBooleanDataAttributes = ({ dataset }, names) => export const isElementVisible = (element) => Boolean(element.offsetWidth || element.offsetHeight || element.getClientRects().length); -/** - * The opposite of `isElementVisible`. - * Returns whether or not the provided element is currently hidden. - * This function operates identically to jQuery's `:hidden` pseudo-selector. - * Documentation for this selector: https://api.jquery.com/hidden-selector/ - * Implementation of this selector: https://github.com/jquery/jquery/blob/d0ce00cdfa680f1f0c38460bc51ea14079ae8b07/src/css/hiddenVisibleSelectors.js#L6 - * @param {HTMLElement} element The element to test - * @returns {Boolean} `true` if the element is currently hidden, otherwise false - */ -export const isElementHidden = (element) => !isElementVisible(element); - export const getParents = (element) => { const parents = []; let parent = element.parentNode; diff --git a/app/assets/javascripts/lib/utils/forms.js b/app/assets/javascripts/lib/utils/forms.js index b58aef15dda..1d8c6ee23fc 100644 --- a/app/assets/javascripts/lib/utils/forms.js +++ b/app/assets/javascripts/lib/utils/forms.js @@ -119,12 +119,14 @@ export const parseRailsFormFields = (mountEl) => { } const fieldNameCamelCase = convertToCamelCase(fieldName); - const { id, placeholder, name, value, type, checked } = input; + const { id, placeholder, name, value, type, checked, maxLength, pattern } = input; const attributes = { name, id, value, ...(placeholder && { placeholder }), + ...(input.hasAttribute('maxlength') && { maxLength }), + ...(pattern && { pattern }), }; // Store radio buttons and checkboxes as an array so they can be diff --git a/app/assets/javascripts/lib/utils/rails_ujs.js b/app/assets/javascripts/lib/utils/rails_ujs.js index b4f425da871..48f1b32526f 100644 --- a/app/assets/javascripts/lib/utils/rails_ujs.js +++ b/app/assets/javascripts/lib/utils/rails_ujs.js @@ -37,9 +37,7 @@ function monkeyPatchConfirmModal() { Rails.confirm = confirmViaModal; } -if (gon?.features?.bootstrapConfirmationModals) { - monkeyPatchConfirmModal(); -} +monkeyPatchConfirmModal(); export const initRails = () => { // eslint-disable-next-line no-underscore-dangle diff --git a/app/assets/javascripts/lib/utils/table_utility.js b/app/assets/javascripts/lib/utils/table_utility.js index 6d66335b832..5d3aba9f4ed 100644 --- a/app/assets/javascripts/lib/utils/table_utility.js +++ b/app/assets/javascripts/lib/utils/table_utility.js @@ -2,6 +2,7 @@ import { convertToSnakeCase, convertToCamelCase } from '~/lib/utils/text_utility import { DEFAULT_TH_CLASSES } from './constants'; /** + * Deprecated: use thWidthPercent instead * Generates the table header classes to be used for GlTable fields. * * @param {Number} width - The column width as a percentage. @@ -10,6 +11,15 @@ import { DEFAULT_TH_CLASSES } from './constants'; export const thWidthClass = (width) => `gl-w-${width}p ${DEFAULT_TH_CLASSES}`; /** + * Generates the table header class for width to be used for GlTable fields. + * + * @param {Number} width - The column width as a percentage. Only accepts values + * as defined in https://gitlab.com/gitlab-org/gitlab-ui/blob/main/src/scss/utility-mixins/sizing.scss + * @returns {String} The class to be used in GlTable fields object. + */ +export const thWidthPercent = (width) => `gl-w-${width}p`; + +/** * Converts a GlTable sort-changed event object into string format. * This string can be used as a sort argument on GraphQL queries. * diff --git a/app/assets/javascripts/lib/utils/users_cache.js b/app/assets/javascripts/lib/utils/users_cache.js index bd000bb26fe..670acbbabd7 100644 --- a/app/assets/javascripts/lib/utils/users_cache.js +++ b/app/assets/javascripts/lib/utils/users_cache.js @@ -29,8 +29,11 @@ class UsersCache extends Cache { } return getUser(userId).then(({ data }) => { - this.internalStorage[userId] = data; - return data; + this.internalStorage[userId] = { + ...this.get(userId), + ...data, + }; + return this.internalStorage[userId]; }); // missing catch is intentional, error handling depends on use case } diff --git a/app/assets/javascripts/logo.js b/app/assets/javascripts/logo.js index 403e216e70f..c570f8810a8 100644 --- a/app/assets/javascripts/logo.js +++ b/app/assets/javascripts/logo.js @@ -1,7 +1,5 @@ -import $ from 'jquery'; - export default function initLogoAnimation() { window.addEventListener('beforeunload', () => { - $('.tanuki-logo').addClass('animate'); + document.querySelector('.tanuki-logo').classList.add('animate'); }); } diff --git a/app/assets/javascripts/logs/utils.js b/app/assets/javascripts/logs/utils.js index 8e21863dd0c..74c2f8a68f8 100644 --- a/app/assets/javascripts/logs/utils.js +++ b/app/assets/javascripts/logs/utils.js @@ -1,25 +1,4 @@ import dateFormat from 'dateformat'; -import { secondsToMilliseconds } from '~/lib/utils/datetime_utility'; import { dateFormatMask } from './constants'; -/** - * Returns a time range (`start`, `end`) where `start` is the - * current time minus a given number of seconds and `end` - * is the current time (`now()`). - * - * @param {Number} seconds Seconds duration, defaults to 0. - * @returns {Object} range Time range - * @returns {String} range.start ISO String of current time minus given seconds - * @returns {String} range.end ISO String of current time - */ -export const getTimeRange = (seconds = 0) => { - const end = Math.floor(Date.now() / 1000); // convert milliseconds to seconds - const start = end - seconds; - - return { - start: new Date(secondsToMilliseconds(start)).toISOString(), - end: new Date(secondsToMilliseconds(end)).toISOString(), - }; -}; - export const formatDate = (timestamp) => dateFormat(timestamp, dateFormatMask); diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 2f3cdc525a7..e3e8efdd771 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -299,3 +299,10 @@ if (flashContainer && flashContainer.children.length) { $('.gl-show-field-errors').each((i, form) => new GlFieldErrors(form)); requestIdleCallback(deferredInitialisation); + +// initialize hiding of tooltip after clicking on dropdown's links and buttons +document + .querySelectorAll('a[data-toggle="dropdown"], button[data-toggle="dropdown"]') + .forEach((element) => { + element.addEventListener('click', () => tooltips.hide(element)); + }); diff --git a/app/assets/javascripts/members/components/members_tabs.vue b/app/assets/javascripts/members/components/members_tabs.vue index ee4743010cf..98995730df4 100644 --- a/app/assets/javascripts/members/components/members_tabs.vue +++ b/app/assets/javascripts/members/components/members_tabs.vue @@ -77,6 +77,10 @@ export default { urlParams.push(state.filteredSearchBar.searchParam); } + if (state?.filteredSearchBar?.tokens) { + urlParams.push(...state.filteredSearchBar.tokens); + } + return urlParams; }, getTabCount({ namespace }) { diff --git a/app/assets/javascripts/members/components/table/members_table.vue b/app/assets/javascripts/members/components/table/members_table.vue index 14d628e455c..460dc0041ab 100644 --- a/app/assets/javascripts/members/components/table/members_table.vue +++ b/app/assets/javascripts/members/components/table/members_table.vue @@ -4,7 +4,6 @@ import { mapState } from 'vuex'; import MembersTableCell from 'ee_else_ce/members/components/table/members_table_cell.vue'; import { canOverride, canRemove, canResend, canUpdate } from 'ee_else_ce/members/utils'; import { mergeUrlParams } from '~/lib/utils/url_utility'; -import initUserPopovers from '~/user_popovers'; import UserDate from '~/vue_shared/components/user_date.vue'; import { FIELD_KEY_ACTIONS, @@ -13,9 +12,9 @@ import { TAB_QUERY_PARAM_VALUES, MEMBER_STATE_AWAITING, MEMBER_STATE_ACTIVE, - USER_STATE_BLOCKED_PENDING_APPROVAL, - BADGE_LABELS_AWAITING_USER_SIGNUP, - BADGE_LABELS_PENDING_OWNER_APPROVAL, + USER_STATE_BLOCKED, + BADGE_LABELS_AWAITING_SIGNUP, + BADGE_LABELS_PENDING, } from '../../constants'; import RemoveGroupLinkModal from '../modals/remove_group_link_modal.vue'; import RemoveMemberModal from '../modals/remove_member_modal.vue'; @@ -85,9 +84,6 @@ export default { return this.tabQueryParamValue === TAB_QUERY_PARAM_VALUES.invite; }, }, - mounted() { - initUserPopovers(this.$el.querySelectorAll('.js-user-link')); - }, methods: { hasActionButtons(member) { return ( @@ -166,7 +162,7 @@ export default { ); }, /** - * Returns whether the user is awaiting root approval + * Returns whether the user is blocked awaiting root approval * * This checks User.state exposed via MemberEntity * @@ -174,11 +170,11 @@ export default { * @see {@link ~/app/serializers/member_entity.rb} * @returns {boolean} */ - isUserPendingRootApproval(memberInviteMetadata) { - return memberInviteMetadata?.userState === USER_STATE_BLOCKED_PENDING_APPROVAL; + isUserBlocked(memberInviteMetadata) { + return memberInviteMetadata?.userState === USER_STATE_BLOCKED; }, /** - * Returns whether the member is awaiting owner approval + * Returns whether the member is awaiting state * * This checks Member.state exposed via MemberEntity * @@ -187,16 +183,13 @@ export default { * @see {@link ~/app/serializers/member_entity.rb} * @returns {boolean} */ - isMemberPendingOwnerApproval(memberState) { + isMemberAwaiting(memberState) { return memberState === MEMBER_STATE_AWAITING; }, isUserAwaiting(memberInviteMetadata, memberState) { - return ( - this.isUserPendingRootApproval(memberInviteMetadata) || - this.isMemberPendingOwnerApproval(memberState) - ); + return this.isUserBlocked(memberInviteMetadata) || this.isMemberAwaiting(memberState); }, - shouldAddPendingOwnerApprovalBadge(memberInviteMetadata, memberState) { + shouldAddPendingBadge(memberInviteMetadata, memberState) { return ( this.isUserAwaiting(memberInviteMetadata, memberState) && !this.isNewUser(memberInviteMetadata) @@ -213,11 +206,11 @@ export default { */ inviteBadge(memberInviteMetadata, memberState) { if (this.isNewUser(memberInviteMetadata, memberState)) { - return BADGE_LABELS_AWAITING_USER_SIGNUP; + return BADGE_LABELS_AWAITING_SIGNUP; } - if (this.shouldAddPendingOwnerApprovalBadge(memberInviteMetadata, memberState)) { - return BADGE_LABELS_PENDING_OWNER_APPROVAL; + if (this.shouldAddPendingBadge(memberInviteMetadata, memberState)) { + return BADGE_LABELS_PENDING; } return ''; diff --git a/app/assets/javascripts/members/components/table/role_dropdown.vue b/app/assets/javascripts/members/components/table/role_dropdown.vue index fa895cf24c4..6cd8bf57313 100644 --- a/app/assets/javascripts/members/components/table/role_dropdown.vue +++ b/app/assets/javascripts/members/components/table/role_dropdown.vue @@ -41,7 +41,7 @@ export default { const dropdownToggle = this.$refs.glDropdown.$el.querySelector('.dropdown-toggle'); if (dropdownToggle) { - dropdownToggle.setAttribute('data-qa-selector', 'access_level_dropdown'); + dropdownToggle.dataset.qaSelector = 'access_level_dropdown'; } }, methods: { diff --git a/app/assets/javascripts/members/constants.js b/app/assets/javascripts/members/constants.js index c66a19c4765..8c40cc3f29d 100644 --- a/app/assets/javascripts/members/constants.js +++ b/app/assets/javascripts/members/constants.js @@ -130,9 +130,15 @@ export const FILTERED_SEARCH_TOKEN_WITH_INHERITED_PERMISSIONS = { ], }; +export const FILTERED_SEARCH_TOKEN_GROUPS_WITH_INHERITED_PERMISSIONS = { + ...FILTERED_SEARCH_TOKEN_WITH_INHERITED_PERMISSIONS, + type: 'groups_with_inherited_permissions', +}; + export const AVAILABLE_FILTERED_SEARCH_TOKENS = [ FILTERED_SEARCH_TOKEN_TWO_FACTOR, FILTERED_SEARCH_TOKEN_WITH_INHERITED_PERMISSIONS, + FILTERED_SEARCH_TOKEN_GROUPS_WITH_INHERITED_PERMISSIONS, ]; export const AVATAR_SIZE = 48; @@ -154,7 +160,7 @@ export const TAB_QUERY_PARAM_VALUES = { * This user state value comes from the User model * see the state machine in app/models/user.rb */ -export const USER_STATE_BLOCKED_PENDING_APPROVAL = 'blocked_pending_approval'; +export const USER_STATE_BLOCKED = 'blocked_pending_approval'; /** * This and following member state constants' values @@ -164,8 +170,8 @@ export const MEMBER_STATE_CREATED = 0; export const MEMBER_STATE_AWAITING = 1; export const MEMBER_STATE_ACTIVE = 2; -export const BADGE_LABELS_AWAITING_USER_SIGNUP = __('Awaiting user signup'); -export const BADGE_LABELS_PENDING_OWNER_APPROVAL = __('Pending owner approval'); +export const BADGE_LABELS_AWAITING_SIGNUP = __('Awaiting user signup'); +export const BADGE_LABELS_PENDING = __('Pending owner action'); export const DAYS_TO_EXPIRE_SOON = 7; diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue b/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue index fdcb99351a7..20ee9a17fa0 100644 --- a/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue +++ b/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue @@ -31,7 +31,7 @@ export default { }, inject: ['mergeRequestPath', 'sourceBranchPath', 'resolveConflictsPath'], i18n: { - commitStatSummary: __('Showing %{conflict} between %{sourceBranch} and %{targetBranch}'), + commitStatSummary: __('Showing %{conflict}'), resolveInfo: __( 'You can resolve the merge conflict using either the Interactive mode, by choosing %{use_ours} or %{use_theirs} buttons, or by editing the files directly. Commit these changes into %{branch_name}', ), @@ -73,7 +73,7 @@ export default { </script> <template> <div id="conflicts"> - <gl-loading-icon v-if="isLoading" size="md" data-testid="loading-spinner" /> + <gl-loading-icon v-if="isLoading" size="lg" data-testid="loading-spinner" /> <div v-if="hasError" class="nothing-here-block"> {{ conflictsData.errorMessage }} </div> diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js index 960b25bb552..8cdb9eb5fc4 100644 --- a/app/assets/javascripts/merge_request.js +++ b/app/assets/javascripts/merge_request.js @@ -95,7 +95,7 @@ MergeRequest.prototype.initMRBtnListeners = function () { .then(({ data }) => { draftToggle.removeAttribute('disabled'); eventHub.$emit('MRWidgetUpdateRequested'); - MergeRequest.toggleDraftStatus(data.title, wipEvent === 'unwip'); + MergeRequest.toggleDraftStatus(data.title, wipEvent === 'ready'); }) .catch(() => { createFlash({ @@ -156,11 +156,7 @@ MergeRequest.toggleDraftStatus = function (title, isReady) { } else { toast(__('Marked as draft. Can only be merged when marked as ready.')); } - const titleEl = document.querySelector( - `.merge-request .detail-page-${ - window.gon?.features?.updatedMrHeader ? 'header' : 'description' - } .title`, - ); + const titleEl = document.querySelector(`.merge-request .detail-page-header .title`); if (titleEl) { titleEl.textContent = title; @@ -172,7 +168,7 @@ MergeRequest.toggleDraftStatus = function (title, isReady) { draftToggles.forEach((el) => { const draftToggle = el; const url = setUrlParams( - { 'merge_request[wip_event]': isReady ? 'wip' : 'unwip' }, + { 'merge_request[wip_event]': isReady ? 'draft' : 'ready' }, draftToggle.href, ); diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js index e02109d1fd1..94041d77bb0 100644 --- a/app/assets/javascripts/merge_request_tabs.js +++ b/app/assets/javascripts/merge_request_tabs.js @@ -177,6 +177,7 @@ export default class MergeRequestTabs { this.peek = document.getElementById('js-peek'); this.sidebar = document.querySelector('.js-right-sidebar'); this.pageLayout = document.querySelector('.layout-page'); + this.expandSidebar = document.querySelector('.js-expand-sidebar'); this.paddingTop = 16; this.scrollPositions = {}; @@ -281,6 +282,8 @@ export default class MergeRequestTabs { const tab = this.mergeRequestTabs.querySelector(`.${action}-tab`); if (tab) tab.classList.add('active'); + this.expandSidebar?.classList.toggle('gl-display-none!', action !== 'show'); + if (action === 'commits') { this.loadCommits(href); // this.hideSidebar(); diff --git a/app/assets/javascripts/milestones/components/promote_milestone_modal.vue b/app/assets/javascripts/milestones/components/promote_milestone_modal.vue index b41611001ab..cac6d722ced 100644 --- a/app/assets/javascripts/milestones/components/promote_milestone_modal.vue +++ b/app/assets/javascripts/milestones/components/promote_milestone_modal.vue @@ -80,7 +80,7 @@ export default { }, primaryAction: { text: s__('Milestones|Promote Milestone'), - attributes: [{ variant: 'warning' }], + attributes: [{ variant: 'confirm' }], }, cancelAction: { text: __('Cancel'), diff --git a/app/assets/javascripts/monitoring/components/create_dashboard_modal.vue b/app/assets/javascripts/monitoring/components/create_dashboard_modal.vue index 288487d25a5..10178366db5 100644 --- a/app/assets/javascripts/monitoring/components/create_dashboard_modal.vue +++ b/app/assets/javascripts/monitoring/components/create_dashboard_modal.vue @@ -47,7 +47,7 @@ export default { <gl-button category="secondary" @click="cancelHandler">{{ s__('Metrics|Cancel') }}</gl-button> <gl-button category="secondary" - variant="info" + variant="confirm" target="_blank" :href="addDashboardDocumentationPath" data-testid="create-dashboard-modal-docs-button" diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 6a85833db27..70e253508ce 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -132,16 +132,6 @@ export default { required: false, default: false, }, - alertsEndpoint: { - type: String, - required: false, - default: null, - }, - prometheusAlertsAvailable: { - type: Boolean, - required: false, - default: false, - }, rearrangePanelsAvailable: { type: Boolean, required: false, @@ -461,9 +451,7 @@ export default { :settings-path="settingsPath" :clipboard-text="generatePanelUrl(expandedPanel.group, expandedPanel.panel)" :graph-data="expandedPanel.panel" - :alerts-endpoint="alertsEndpoint" :height="600" - :prometheus-alerts-available="prometheusAlertsAvailable" @timerangezoom="onTimeRangeZoom" > <template #top-left> @@ -526,8 +514,6 @@ export default { :settings-path="settingsPath" :clipboard-text="generatePanelUrl(groupData.group, graphData)" :graph-data="graphData" - :alerts-endpoint="alertsEndpoint" - :prometheus-alerts-available="prometheusAlertsAvailable" @timerangezoom="onTimeRangeZoom" @expand="onExpandPanel(groupData.group, graphData)" /> diff --git a/app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue b/app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue index 8e5a0b5cda2..7f8fb3c223d 100644 --- a/app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue +++ b/app/assets/javascripts/monitoring/components/dashboard_actions_menu.vue @@ -186,7 +186,7 @@ export default { v-track-event="getAddMetricTrackingOptions()" data-testid="add-metric-modal-submit-button" :disabled="!customMetricsFormIsValid" - variant="success" + variant="confirm" @click="submitCustomMetricsForm" > {{ __('Save changes') }} diff --git a/app/assets/javascripts/monitoring/components/dashboard_header.vue b/app/assets/javascripts/monitoring/components/dashboard_header.vue index f53f78a3f13..f18290e7048 100644 --- a/app/assets/javascripts/monitoring/components/dashboard_header.vue +++ b/app/assets/javascripts/monitoring/components/dashboard_header.vue @@ -257,7 +257,7 @@ export default { > <gl-button class="flex-grow-1 js-external-dashboard-link" - variant="info" + variant="confirm" category="primary" :href="externalDashboardUrl" target="_blank" diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue index e5f0206bb8b..8efea2bfc3e 100644 --- a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue +++ b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue @@ -106,7 +106,7 @@ export default { <div class="gl-text-right"> <gl-button ref="clipboardCopyBtn" - variant="success" + variant="confirm" category="secondary" :data-clipboard-text="yml" class="gl-xs-w-full gl-xs-mb-3" @@ -116,7 +116,7 @@ export default { </gl-button> <gl-button type="submit" - variant="success" + variant="confirm" :disabled="panelPreviewIsLoading" class="js-no-auto-disable gl-xs-w-full" > @@ -162,7 +162,7 @@ export default { ref="viewDocumentationBtn" category="secondary" class="gl-xs-w-full gl-xs-mb-3" - variant="info" + variant="confirm" target="_blank" :href="addDashboardDocumentationPath" > @@ -170,7 +170,7 @@ export default { </gl-button> <gl-button ref="openRepositoryBtn" - variant="success" + variant="confirm" :href="projectPath" class="gl-xs-w-full" > diff --git a/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue b/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue index fd07a41ec37..d1ce7bad39a 100644 --- a/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue +++ b/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue @@ -1,7 +1,7 @@ <script> -import { GlAlert, GlLoadingIcon, GlModal } from '@gitlab/ui'; +import { GlAlert, GlModal } from '@gitlab/ui'; import { mapActions, mapGetters } from 'vuex'; -import { s__ } from '~/locale'; +import { __, s__ } from '~/locale'; import DuplicateDashboardForm from './duplicate_dashboard_form.vue'; const events = { @@ -9,7 +9,7 @@ const events = { }; export default { - components: { GlAlert, GlLoadingIcon, GlModal, DuplicateDashboardForm }, + components: { GlAlert, GlModal, DuplicateDashboardForm }, props: { defaultBranch: { type: String, @@ -32,6 +32,20 @@ export default { okButtonText() { return this.loading ? s__('Metrics|Duplicating...') : s__('Metrics|Duplicate'); }, + actionPrimaryProps() { + return { + text: this.okButtonText, + attributes: { + loading: this.loading, + variant: 'confirm', + }, + }; + }, + actionCancelProps() { + return { + text: __('Cancel'), + }; + }, }, methods: { ...mapActions('monitoringDashboard', ['duplicateSystemDashboard']), @@ -75,7 +89,8 @@ export default { ref="duplicateDashboardModal" :modal-id="modalId" :title="s__('Metrics|Duplicate dashboard')" - ok-variant="success" + :action-primary="actionPrimaryProps" + :action-cancel="actionCancelProps" @ok="ok" @hide="hide" > @@ -87,9 +102,5 @@ export default { :default-branch="defaultBranch" @change="formChange" /> - <template #modal-ok> - <gl-loading-icon v-if="loading" size="sm" inline color="light" /> - {{ okButtonText }} - </template> </gl-modal> </template> diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue index 5b73fb4e10d..74a806c50a9 100644 --- a/app/assets/javascripts/monitoring/components/graph_group.vue +++ b/app/assets/javascripts/monitoring/components/graph_group.vue @@ -37,7 +37,7 @@ export default { }, computed: { caretIcon() { - return this.isCollapsed ? 'angle-right' : 'angle-down'; + return this.isCollapsed ? 'chevron-lg-right' : 'chevron-lg-down'; }, }, watch: { diff --git a/app/assets/javascripts/monitoring/services/alerts_service.js b/app/assets/javascripts/monitoring/services/alerts_service.js deleted file mode 100644 index cb6dac7aa15..00000000000 --- a/app/assets/javascripts/monitoring/services/alerts_service.js +++ /dev/null @@ -1,43 +0,0 @@ -import axios from '~/lib/utils/axios_utils'; - -const mapAlert = ({ runbook_url, ...alert }) => { - return { runbookUrl: runbook_url, ...alert }; -}; - -export default class AlertsService { - constructor({ alertsEndpoint }) { - this.alertsEndpoint = alertsEndpoint; - } - - getAlerts() { - return axios.get(this.alertsEndpoint).then((resp) => mapAlert(resp.data)); - } - - createAlert({ prometheus_metric_id, operator, threshold, runbookUrl }) { - return axios - .post(this.alertsEndpoint, { - prometheus_metric_id, - operator, - threshold, - runbook_url: runbookUrl, - }) - .then((resp) => mapAlert(resp.data)); - } - - // eslint-disable-next-line class-methods-use-this - readAlert(alertPath) { - return axios.get(alertPath).then((resp) => mapAlert(resp.data)); - } - - // eslint-disable-next-line class-methods-use-this - updateAlert(alertPath, { operator, threshold, runbookUrl }) { - return axios - .put(alertPath, { operator, threshold, runbook_url: runbookUrl }) - .then((resp) => mapAlert(resp.data)); - } - - // eslint-disable-next-line class-methods-use-this - deleteAlert(alertPath) { - return axios.delete(alertPath).then((resp) => resp.data); - } -} diff --git a/app/assets/javascripts/mr_popover/index.js b/app/assets/javascripts/mr_popover/index.js deleted file mode 100644 index 714cf67e0bd..00000000000 --- a/app/assets/javascripts/mr_popover/index.js +++ /dev/null @@ -1,67 +0,0 @@ -import Vue from 'vue'; -import VueApollo from 'vue-apollo'; -import createDefaultClient from '~/lib/graphql'; -import MRPopover from './components/mr_popover.vue'; - -let renderedPopover; -let renderFn; - -const handleUserPopoverMouseOut = ({ target }) => { - target.removeEventListener('mouseleave', handleUserPopoverMouseOut); - - if (renderFn) { - clearTimeout(renderFn); - } - if (renderedPopover) { - renderedPopover.$destroy(); - renderedPopover = null; - } -}; - -/** - * Adds a MergeRequestPopover component to the body, hands over as much data as the target element has in data attributes. - * loads based on data-project-path and data-iid more data about an MR from the API and sets it on the popover - */ -const handleMRPopoverMount = ({ apolloProvider, projectPath, mrTitle, iid }) => ({ target }) => { - // Add listener to actually remove it again - target.addEventListener('mouseleave', handleUserPopoverMouseOut); - - renderFn = setTimeout(() => { - const MRPopoverComponent = Vue.extend(MRPopover); - renderedPopover = new MRPopoverComponent({ - propsData: { - target, - projectPath, - mergeRequestIID: iid, - mergeRequestTitle: mrTitle, - }, - apolloProvider, - }); - - renderedPopover.$mount(); - }, 200); // 200ms delay so not every mouseover triggers Popover + API Call -}; - -export default (elements) => { - const mrLinks = elements || [...document.querySelectorAll('.gfm-merge_request')]; - if (mrLinks.length > 0) { - Vue.use(VueApollo); - - const apolloProvider = new VueApollo({ - defaultClient: createDefaultClient(), - }); - const listenerAddedAttr = 'data-mr-listener-added'; - - mrLinks.forEach((el) => { - const { projectPath, mrTitle, iid } = el.dataset; - - if (!el.getAttribute(listenerAddedAttr) && projectPath && mrTitle && iid) { - el.addEventListener( - 'mouseenter', - handleMRPopoverMount({ apolloProvider, projectPath, mrTitle, iid }), - ); - el.setAttribute(listenerAddedAttr, true); - } - }); - } -}; diff --git a/app/assets/javascripts/nav/components/responsive_header.vue b/app/assets/javascripts/nav/components/responsive_header.vue index 8a1d21993b7..e29b4a67383 100644 --- a/app/assets/javascripts/nav/components/responsive_header.vue +++ b/app/assets/javascripts/nav/components/responsive_header.vue @@ -14,7 +14,7 @@ export default { return { id: 'home', view: 'home', - icon: 'angle-left', + icon: 'chevron-lg-left', }; }, }, diff --git a/app/assets/javascripts/notes/components/comment_field_layout.vue b/app/assets/javascripts/notes/components/comment_field_layout.vue index 9638c20e28c..84bda1b0b5c 100644 --- a/app/assets/javascripts/notes/components/comment_field_layout.vue +++ b/app/assets/javascripts/notes/components/comment_field_layout.vue @@ -14,7 +14,7 @@ export default { type: Object, required: true, }, - noteIsConfidential: { + isInternalNote: { type: Boolean, required: false, default: false, @@ -44,7 +44,7 @@ export default { return this.noteableData.issue_email_participants?.map(({ email }) => email) || []; }, showEmailParticipantsWarning() { - return this.emailParticipants.length && !this.noteIsConfidential; + return this.emailParticipants.length && !this.isInternalNote; }, }, }; diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue index 8ef071034e5..e7ac27c5e3e 100644 --- a/app/assets/javascripts/notes/components/comment_form.vue +++ b/app/assets/javascripts/notes/components/comment_form.vue @@ -60,7 +60,7 @@ export default { note: '', noteType: constants.COMMENT, errors: [], - noteIsConfidential: false, + noteIsInternal: false, isSubmitting: false, }; }, @@ -91,13 +91,13 @@ export default { }, commentButtonTitle() { const { comment, internalComment, startThread, startInternalThread } = this.$options.i18n; - if (this.noteIsConfidential) { + if (this.noteIsInternal) { return this.noteType === constants.COMMENT ? internalComment : startInternalThread; } return this.noteType === constants.COMMENT ? comment : startThread; }, textareaPlaceholder() { - return this.noteIsConfidential + return this.noteIsInternal ? this.$options.i18n.bodyPlaceholderInternal : this.$options.i18n.bodyPlaceholder; }, @@ -110,7 +110,7 @@ export default { canCreateNote() { return this.getNoteableData.current_user.can_create_note; }, - canSetConfidential() { + canSetInternalNote() { return this.getNoteableData.current_user.can_update && (this.isIssue || this.isEpic); }, issueActionButtonTitle() { @@ -172,7 +172,7 @@ export default { trackingLabel() { return slugifyWithUnderscore(`${this.commentButtonTitle} button`); }, - confidentialNotesEnabled() { + internalNotesEnabled() { return Boolean(this.glFeatures.confidentialNotes); }, disableSubmitButton() { @@ -217,7 +217,11 @@ export default { note: { noteable_type: this.noteableType, noteable_id: this.getNoteableData.id, - confidential: this.noteIsConfidential, + // Internal notes were identified as `confidential` + // before we decided to treat them as _internal_ + // so now until API is updated we need to use `confidential` + // in request payload. + confidential: this.noteIsInternal, note: this.note, }, merge_request_diff_head_sha: this.getNoteableData.diff_head_sha, @@ -292,7 +296,7 @@ export default { if (shouldClear) { this.note = ''; - this.noteIsConfidential = false; + this.noteIsInternal = false; this.resizeTextarea(); this.$refs.markdownField.previewMarkdown = false; } @@ -356,7 +360,7 @@ export default { <comment-field-layout :with-alert-container="true" :noteable-data="getNoteableData" - :note-is-confidential="noteIsConfidential" + :is-internal-note="noteIsInternal" :noteable-type="noteableType" > <markdown-field @@ -410,17 +414,17 @@ export default { </template> <template v-else> <gl-form-checkbox - v-if="confidentialNotesEnabled && canSetConfidential" - v-model="noteIsConfidential" - class="gl-mb-6" - data-testid="confidential-note-checkbox" + v-if="internalNotesEnabled && canSetInternalNote" + v-model="noteIsInternal" + class="gl-mb-2" + data-testid="internal-note-checkbox" > - {{ $options.i18n.confidential }} + {{ $options.i18n.internal }} <gl-icon v-gl-tooltip:tooltipcontainer.bottom name="question" :size="16" - :title="$options.i18n.confidentialVisibility" + :title="$options.i18n.internalVisibility" class="gl-text-gray-500" /> </gl-form-checkbox> @@ -429,7 +433,7 @@ export default { class="gl-mr-3" :disabled="disableSubmitButton" :tracking-label="trackingLabel" - :is-internal-note="noteIsConfidential" + :is-internal-note="noteIsInternal" :noteable-display-name="noteableDisplayName" :discussions-require-resolution="discussionsRequireResolution" @click="handleSave" diff --git a/app/assets/javascripts/notes/components/diff_discussion_header.vue b/app/assets/javascripts/notes/components/diff_discussion_header.vue index 5210d2ca287..0e213028c7c 100644 --- a/app/assets/javascripts/notes/components/diff_discussion_header.vue +++ b/app/assets/javascripts/notes/components/diff_discussion_header.vue @@ -97,14 +97,17 @@ export default { </script> <template> - <div class="discussion-header note-wrapper"> - <div v-once class="timeline-icon gl-align-self-start gl-flex-shrink-0 gl-flex-shrink gl-mr-4"> + <div class="discussion-header gl-display-flex gl-align-items-center gl-p-5"> + <div + v-once + class="timeline-icon gl-align-self-start gl-flex-shrink-0 gl-flex-shrink gl-ml-3 gl-mr-4" + > <user-avatar-link v-if="author" :link-href="author.path" :img-src="author.avatar_url" :img-alt="author.name" - :img-size="32" + :img-size="24" :img-css-classes="'gl-mr-0!' /* NOTE: this is needed only while we migrate user-avatar-image to GlAvatar (https://gitlab.com/groups/gitlab-org/-/epics/7731) */" /> </div> diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue index e2b0c7fee32..3bdf8349a12 100644 --- a/app/assets/javascripts/notes/components/diff_with_note.vue +++ b/app/assets/javascripts/notes/components/diff_with_note.vue @@ -1,8 +1,5 @@ <script> -import { - GlDeprecatedSkeletonLoading as GlSkeletonLoading, - GlSafeHtmlDirective as SafeHtml, -} from '@gitlab/ui'; +import { GlSkeletonLoader, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; import { mapState, mapActions } from 'vuex'; import DiffFileHeader from '~/diffs/components/diff_file_header.vue'; import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue'; @@ -16,7 +13,7 @@ const FIRST_CHAR_REGEX = /^(\+|-| )/; export default { components: { DiffFileHeader, - GlSkeletonLoading, + GlSkeletonLoader, DiffViewer, ImageDiffOverlay, }, @@ -107,7 +104,7 @@ export default { <td v-if="error" class="js-error-lazy-load-diff diff-loading-error-block"> {{ __('Unable to load the diff') }} <button - class="btn-link btn-link-retry gl-p-0 js-toggle-lazy-diff-retry-button" + class="gl-button btn-link btn-link-retry gl-p-0 js-toggle-lazy-diff-retry-button gl-reset-font-size!" @click="fetchDiff" > {{ __('Try again') }} @@ -115,7 +112,7 @@ export default { </td> <td v-else class="line_content js-success-lazy-load"> <span></span> - <gl-skeleton-loading /> + <gl-skeleton-loader /> <span></span> </td> </tr> diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue index f746f7ed0ed..eedcb0c09d4 100644 --- a/app/assets/javascripts/notes/components/discussion_counter.vue +++ b/app/assets/javascripts/notes/components/discussion_counter.vue @@ -75,25 +75,25 @@ export default { <gl-button-group class="gl-ml-3"> <gl-button v-gl-tooltip.hover - :title="__('Jump to previous unresolved thread')" - :aria-label="__('Jump to previous unresolved thread')" + :title="__('Go to previous unresolved thread')" + :aria-label="__('Go to previous unresolved thread')" class="discussion-previous-btn gl-rounded-base! gl-px-2!" data-track-action="click_button" data-track-label="mr_previous_unresolved_thread" data-track-property="click_previous_unresolved_thread_top" - icon="angle-up" + icon="chevron-lg-up" category="tertiary" @click="jumpToPreviousDiscussion" /> <gl-button v-gl-tooltip.hover - :title="__('Jump to next unresolved thread')" - :aria-label="__('Jump to next unresolved thread')" + :title="__('Go to next unresolved thread')" + :aria-label="__('Go to next unresolved thread')" class="discussion-next-btn gl-rounded-base! gl-px-2!" data-track-action="click_button" data-track-label="mr_next_unresolved_thread" data-track-property="click_next_unresolved_thread_top" - icon="angle-down" + icon="chevron-lg-down" category="tertiary" @click="jumpToNextDiscussion" /> diff --git a/app/assets/javascripts/notes/components/email_participants_warning.vue b/app/assets/javascripts/notes/components/email_participants_warning.vue index ecf42fce1d2..1875d48e7b2 100644 --- a/app/assets/javascripts/notes/components/email_participants_warning.vue +++ b/app/assets/javascripts/notes/components/email_participants_warning.vue @@ -58,7 +58,7 @@ export default { <div class="issuable-note-warning" data-testid="email-participants-warning"> <gl-sprintf :message="message"> <template #andMore> - <button type="button" class="btn-transparent btn-link" @click="showMoreParticipants"> + <button type="button" class="gl-button btn-link" @click="showMoreParticipants"> {{ moreLabel }} </button> </template> diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue index 1bd2f879e6c..10e3f57a56d 100644 --- a/app/assets/javascripts/notes/components/note_actions.vue +++ b/app/assets/javascripts/notes/components/note_actions.vue @@ -294,14 +294,20 @@ export default { /> <emoji-picker v-if="canAwardEmoji" - toggle-class="note-action-button note-emoji-button gl-text-gray-600 gl-m-3 gl-p-0! gl-shadow-none! gl-bg-transparent!" + toggle-class="note-action-button note-emoji-button btn-icon btn-default-tertiary" data-testid="note-emoji-button" @click="setAwardEmoji" > <template #button-content> - <gl-icon class="link-highlight award-control-icon-neutral gl-m-0!" name="slight-smile" /> - <gl-icon class="link-highlight award-control-icon-positive gl-m-0!" name="smiley" /> - <gl-icon class="link-highlight award-control-icon-super-positive gl-m-0!" name="smile" /> + <gl-icon class="award-control-icon-neutral gl-button-icon gl-icon" name="slight-smile" /> + <gl-icon + class="award-control-icon-positive gl-button-icon gl-icon gl-left-3!" + name="smiley" + /> + <gl-icon + class="award-control-icon-super-positive gl-button-icon gl-icon gl-left-3!" + name="smile" + /> </template> </emoji-picker> <reply-button diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue index 6c9bc4461c2..cc74c2ee605 100644 --- a/app/assets/javascripts/notes/components/note_body.vue +++ b/app/assets/javascripts/notes/components/note_body.vue @@ -8,6 +8,7 @@ import { __ } from '~/locale'; import '~/behaviors/markdown/render_gfm'; import Suggestions from '~/vue_shared/components/markdown/suggestions.vue'; import autosave from '../mixins/autosave'; +import { INTERNAL_NOTE_CLASSES } from '../constants'; import noteAttachment from './note_attachment.vue'; import noteAwardsList from './note_awards_list.vue'; import noteEditedText from './note_edited_text.vue'; @@ -54,6 +55,11 @@ export default { required: false, default: '', }, + isInternalNote: { + type: Boolean, + required: false, + default: false, + }, }, computed: { ...mapGetters(['getDiscussion', 'suggestionsCount', 'getSuggestionsFilePaths']), @@ -95,6 +101,12 @@ export default { return escape(suggestion); }, + internalNoteContainerClasses() { + if (this.isInternalNote && !this.isEditing) { + return INTERNAL_NOTE_CLASSES; + } + return ''; + }, }, mounted() { this.renderGFM(); @@ -160,53 +172,61 @@ export default { </script> <template> - <div ref="note-body" :class="{ 'js-task-list-container': canEdit }" class="note-body"> - <suggestions - v-if="hasSuggestion && !isEditing" - :suggestions="note.suggestions" - :suggestions-count="suggestionsCount" - :batch-suggestions-info="batchSuggestionsInfo" - :note-html="note.note_html" - :line-type="lineType" - :help-page-path="helpPagePath" - :default-commit-message="commitMessage" - :failed-to-load-metadata="failedToLoadMetadata" - @apply="applySuggestion" - @applyBatch="applySuggestionBatch" - @addToBatch="addSuggestionToBatch" - @removeFromBatch="removeSuggestionFromBatch" - /> - <div v-else v-safe-html:[$options.safeHtmlConfig]="note.note_html" class="note-text md"></div> - <note-form - v-if="isEditing" - ref="noteForm" - :note-body="noteBody" - :note-id="note.id" - :line="line" - :note="note" - :save-button-title="saveButtonTitle" - :help-page-path="helpPagePath" - :discussion="discussion" - :resolve-discussion="note.resolve_discussion" - @handleFormUpdate="handleFormUpdate" - @cancelForm="formCancelHandler" - /> - <!-- eslint-disable vue/no-mutating-props --> - <textarea - v-if="canEdit" - v-model="note.note" - :data-update-url="note.path" - class="hidden js-task-list-field" - dir="auto" - ></textarea> - <!-- eslint-enable vue/no-mutating-props --> - <note-edited-text - v-if="note.last_edited_at" - :edited-at="note.last_edited_at" - :edited-by="note.last_edited_by" - action-text="Edited" - class="note_edited_ago" - /> + <div + ref="note-body" + :class="{ + 'js-task-list-container': canEdit, + }" + class="note-body" + > + <div :class="internalNoteContainerClasses" data-testid="note-internal-container"> + <suggestions + v-if="hasSuggestion && !isEditing" + :suggestions="note.suggestions" + :suggestions-count="suggestionsCount" + :batch-suggestions-info="batchSuggestionsInfo" + :note-html="note.note_html" + :line-type="lineType" + :help-page-path="helpPagePath" + :default-commit-message="commitMessage" + :failed-to-load-metadata="failedToLoadMetadata" + @apply="applySuggestion" + @applyBatch="applySuggestionBatch" + @addToBatch="addSuggestionToBatch" + @removeFromBatch="removeSuggestionFromBatch" + /> + <div v-else v-safe-html:[$options.safeHtmlConfig]="note.note_html" class="note-text md"></div> + <note-form + v-if="isEditing" + ref="noteForm" + :note-body="noteBody" + :note-id="note.id" + :line="line" + :note="note" + :save-button-title="saveButtonTitle" + :help-page-path="helpPagePath" + :discussion="discussion" + :resolve-discussion="note.resolve_discussion" + @handleFormUpdate="handleFormUpdate" + @cancelForm="formCancelHandler" + /> + <!-- eslint-disable vue/no-mutating-props --> + <textarea + v-if="canEdit" + v-model="note.note" + :data-update-url="note.path" + class="hidden js-task-list-field" + dir="auto" + ></textarea> + <!-- eslint-enable vue/no-mutating-props --> + <note-edited-text + v-if="note.last_edited_at" + :edited-at="note.last_edited_at" + :edited-by="note.last_edited_by" + action-text="Edited" + class="note_edited_ago" + /> + </div> <note-awards-list v-if="note.award_emoji && note.award_emoji.length" :note-id="note.id" diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue index 5dd032abd72..a4cd20e6db8 100644 --- a/app/assets/javascripts/notes/components/note_form.vue +++ b/app/assets/javascripts/notes/components/note_form.vue @@ -329,7 +329,7 @@ export default { <form :data-line-code="lineCode" class="edit-note common-note-form js-quick-submit gfm-form"> <comment-field-layout :noteable-data="getNoteableData" - :note-is-confidential="discussion.confidential" + :is-internal-note="discussion.confidential" > <markdown-field :markdown-preview-path="markdownPreviewPath" diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue index 1ad9d593ccc..9917249f0db 100644 --- a/app/assets/javascripts/notes/components/note_header.vue +++ b/app/assets/javascripts/notes/components/note_header.vue @@ -67,7 +67,7 @@ export default { required: false, default: true, }, - isConfidential: { + isInternalNote: { type: Boolean, required: false, default: false, @@ -110,7 +110,7 @@ export default { authorName() { return this.author.name; }, - noteConfidentialityTooltip() { + internalNoteTooltip() { return s__('Notes|This internal note will always remain confidential'); }, }, @@ -231,12 +231,13 @@ export default { <time-ago-tooltip v-else ref="noteTimestamp" :time="createdAt" tooltip-placement="bottom" /> </template> <gl-badge - v-if="isConfidential" + v-if="isInternalNote" v-gl-tooltip:tooltipcontainer.bottom data-testid="internalNoteIndicator" variant="warning" size="sm" - :title="noteConfidentialityTooltip" + class="gl-mb-3 gl-ml-2" + :title="internalNoteTooltip" > {{ __('Internal note') }} </gl-badge> diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue index 0f5a517a4c5..c5d174ed890 100644 --- a/app/assets/javascripts/notes/components/noteable_discussion.vue +++ b/app/assets/javascripts/notes/components/noteable_discussion.vue @@ -108,7 +108,7 @@ export default { return this.discussion.notes.slice(0, 1)[0]; }, saveButtonTitle() { - return this.discussion.confidential ? __('Reply internally') : __('Comment'); + return this.discussion.confidential ? __('Reply internally') : __('Reply'); }, shouldShowJumpToNextDiscussion() { return this.showJumpToNextDiscussion(this.discussionsByDiffOrder ? 'diff' : 'discussion'); diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue index cda22b58c5b..af0c1e9619e 100644 --- a/app/assets/javascripts/notes/components/noteable_note.vue +++ b/app/assets/javascripts/notes/components/noteable_note.vue @@ -447,7 +447,7 @@ export default { :author="author" :created-at="note.created_at" :note-id="note.id" - :is-confidential="note.confidential" + :is-internal-note="note.confidential" :noteable-type="noteableType" > <template #note-header-info> @@ -493,9 +493,10 @@ export default { <note-body ref="noteBody" :note="note" + :can-edit="note.current_user.can_edit" + :is-internal-note="note.confidential" :line="line" :file="diffFile" - :can-edit="note.current_user.can_edit" :is-editing="isEditing" :help-page-path="helpPagePath" @handleFormUpdate="formUpdateHandler" diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue index 7d8d23335e0..754c2917182 100644 --- a/app/assets/javascripts/notes/components/notes_app.vue +++ b/app/assets/javascripts/notes/components/notes_app.vue @@ -3,7 +3,6 @@ import { mapGetters, mapActions } from 'vuex'; import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user'; import createFlash from '~/flash'; import { __ } from '~/locale'; -import initUserPopovers from '~/user_popovers'; import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; import OrderedLayout from '~/vue_shared/components/ordered_layout.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -169,7 +168,6 @@ export default { updated() { this.$nextTick(() => { highlightCurrentUser(this.$el.querySelectorAll('.gfm-project_member')); - initUserPopovers(this.$el.querySelectorAll('.js-user-link')); }); }, beforeDestroy() { @@ -212,10 +210,6 @@ export default { this.setFetchingState(true); - if (this.glFeatures.paginatedNotes) { - return this.initPolling(); - } - return this.fetchDiscussions(this.getFetchDiscussionsConfig()) .then(this.initPolling) .then(() => { diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue index 65b3fd6f8b3..8cd4477a3bb 100644 --- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue +++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue @@ -72,7 +72,7 @@ export default { {{ replies.length }} {{ n__('reply', 'replies', replies.length) }} </gl-button> {{ __('Last reply by') }} - <a :href="lastReply.author.path" class="btn btn-link author-link gl-mx-2"> + <a :href="lastReply.author.path" class="btn btn-link author-link gl-mx-2 gl-button"> {{ lastReply.author.name }} </a> <time-ago-tooltip :time="lastReply.created_at" tooltip-placement="bottom" /> diff --git a/app/assets/javascripts/notes/constants.js b/app/assets/javascripts/notes/constants.js index cc14ea42a89..b8575016762 100644 --- a/app/assets/javascripts/notes/constants.js +++ b/app/assets/javascripts/notes/constants.js @@ -51,3 +51,5 @@ export const toggleStateErrorMessage = { [REOPENED]: __('Something went wrong while closing the merge request. Please try again later.'), }, }; + +export const INTERNAL_NOTE_CLASSES = ['gl-bg-orange-50', 'gl-px-4', 'gl-py-2']; diff --git a/app/assets/javascripts/notes/i18n.js b/app/assets/javascripts/notes/i18n.js index 4c0ee81bec0..08792fd1a3f 100644 --- a/app/assets/javascripts/notes/i18n.js +++ b/app/assets/javascripts/notes/i18n.js @@ -14,8 +14,8 @@ export const COMMENT_FORM = { epic: __('epic'), bodyPlaceholder: __('Write a comment or drag your files here…'), bodyPlaceholderInternal: __('Write an internal note or drag your files here…'), - confidential: s__('Notes|Make this an internal note'), - confidentialVisibility: s__( + internal: s__('Notes|Make this an internal note'), + internalVisibility: s__( 'Notes|Internal notes are only visible to the author, assignees, and members with the role of Reporter or higher', ), discussionThatNeedsResolution: __( diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js index 0cfc17a6ae9..57bb9e295f9 100644 --- a/app/assets/javascripts/notes/stores/actions.js +++ b/app/assets/javascripts/notes/stores/actions.js @@ -19,7 +19,6 @@ import TaskList from '~/task_list'; import mrWidgetEventHub from '~/vue_merge_request_widget/event_hub'; import SidebarStore from '~/sidebar/stores/sidebar_store'; import * as constants from '../constants'; -import eventHub from '../event_hub'; import * as types from './mutation_types'; import * as utils from './utils'; @@ -90,7 +89,10 @@ export const fetchDiscussions = ({ commit, dispatch }, { path, filter, persistFi ? { params: { notes_filter: filter, persist_filter: persistFilter } } : null; - if (window.gon?.features?.paginatedIssueDiscussions) { + if ( + window.gon?.features?.paginatedIssueDiscussions || + window.gon?.features?.paginatedMrDiscussions + ) { return dispatch('fetchDiscussionsBatch', { path, config, perPage: 20 }); } @@ -128,6 +130,7 @@ export const fetchDiscussionsBatch = ({ commit, dispatch }, { path, config, curs }); } + commit(types.SET_DONE_FETCHING_BATCH_DISCUSSIONS, true); commit(types.SET_FETCHING_DISCUSSIONS, false); dispatch('updateResolvableDiscussionsCounts'); @@ -495,13 +498,6 @@ const pollSuccessCallBack = async (resp, commit, state, getters, dispatch) => { return null; } - if (window.gon?.features?.paginatedNotes && !resp.more && state.isFetching) { - eventHub.$emit('fetchedNotesData'); - dispatch('setFetchingState', false); - dispatch('setNotesFetchedState', true); - dispatch('setLoadingState', false); - } - if (resp.notes?.length) { await dispatch('updateOrCreateNotes', resp.notes); dispatch('startTaskList'); diff --git a/app/assets/javascripts/notes/stores/modules/index.js b/app/assets/javascripts/notes/stores/modules/index.js index f154edd3434..f779aad5679 100644 --- a/app/assets/javascripts/notes/stores/modules/index.js +++ b/app/assets/javascripts/notes/stores/modules/index.js @@ -14,6 +14,7 @@ export default () => ({ currentDiscussionId: null, batchSuggestionsInfo: [], currentlyFetchingDiscussions: false, + doneFetchingBatchDiscussions: false, /** * selectedCommentPosition & selectedCommentPositionHover structures are the same as `position.line_range`: * { diff --git a/app/assets/javascripts/notes/stores/mutation_types.js b/app/assets/javascripts/notes/stores/mutation_types.js index ebda08a3d62..e28a7bc5cdd 100644 --- a/app/assets/javascripts/notes/stores/mutation_types.js +++ b/app/assets/javascripts/notes/stores/mutation_types.js @@ -41,6 +41,7 @@ export const SET_SELECTED_COMMENT_POSITION = 'SET_SELECTED_COMMENT_POSITION'; export const SET_SELECTED_COMMENT_POSITION_HOVER = 'SET_SELECTED_COMMENT_POSITION_HOVER'; export const SET_FETCHING_DISCUSSIONS = 'SET_FETCHING_DISCUSSIONS'; export const SET_RESOLVING_DISCUSSION = 'SET_RESOLVING_DISCUSSION'; +export const SET_DONE_FETCHING_BATCH_DISCUSSIONS = 'SET_DONE_FETCHING_BATCH_DISCUSSIONS'; // Issue export const CLOSE_ISSUE = 'CLOSE_ISSUE'; diff --git a/app/assets/javascripts/notes/stores/mutations.js b/app/assets/javascripts/notes/stores/mutations.js index 5cc2c673391..39d0a46d6d0 100644 --- a/app/assets/javascripts/notes/stores/mutations.js +++ b/app/assets/javascripts/notes/stores/mutations.js @@ -32,20 +32,6 @@ export default { } } - if (window.gon?.features?.paginatedNotes && note.base_discussion) { - if (discussion.diff_file) { - discussion.file_hash = discussion.diff_file.file_hash; - - discussion.truncated_diff_lines = utils.prepareDiffLines( - discussion.truncated_diff_lines || [], - ); - } - - discussion.resolvable = note.resolvable; - discussion.expanded = note.base_discussion.expanded; - discussion.resolved = note.resolved; - } - // note.base_discussion = undefined; // No point keeping a reference to this delete note.base_discussion; discussion.notes = [note]; @@ -436,4 +422,7 @@ export default { [types.SET_FETCHING_DISCUSSIONS](state, value) { state.currentlyFetchingDiscussions = value; }, + [types.SET_DONE_FETCHING_BATCH_DISCUSSIONS](state, value) { + state.doneFetchingBatchDiscussions = value; + }, }; diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue index 15d92ab0ef7..acf810257e6 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue @@ -25,6 +25,7 @@ import { NOT_AVAILABLE_TEXT, NOT_AVAILABLE_SIZE, MORE_ACTIONS_TEXT, + COPY_IMAGE_PATH_TITLE, } from '../../constants/index'; export default { @@ -72,6 +73,7 @@ export default { CONFIGURATION_DETAILS_ROW_TEST, MISSING_MANIFEST_WARNING_TOOLTIP, MORE_ACTIONS_TEXT, + COPY_IMAGE_PATH_TITLE, }, computed: { formattedSize() { @@ -130,6 +132,7 @@ export default { <div v-gl-tooltip="{ title: tag.name }" data-testid="name" + data-qa-selector="tag_name_content" class="gl-text-overflow-ellipsis gl-overflow-hidden gl-white-space-nowrap" :class="mobileClasses" > @@ -138,7 +141,7 @@ export default { <clipboard-button v-if="tag.location" - :title="tag.location" + :title="$options.i18n.COPY_IMAGE_PATH_TITLE" :text="tag.location" category="tertiary" :disabled="disabled" diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue index 3ae69731537..56da8e88b7a 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue @@ -56,6 +56,9 @@ export default { calculatedTimeTilNextRun() { return timeTilRun(this.expirationPolicy?.next_run); }, + expireIconName() { + return this.failedDelete ? 'expire' : 'clock'; + }, }, statusPopoverOptions: { triggers: 'hover', @@ -75,7 +78,7 @@ export default { class="gl-display-inline-flex gl-align-items-center" > <div class="gl-display-inline-flex gl-align-items-center"> - <gl-icon name="expire" data-testid="main-icon" /> + <gl-icon :name="expireIconName" data-testid="main-icon" /> </div> <span class="gl-mx-2"> {{ statusText }} diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue index d76a8245b63..e67d77210bb 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/image_list_row.vue @@ -14,6 +14,7 @@ import { IMAGE_FAILED_DELETED_STATUS, IMAGE_MIGRATING_STATE, ROOT_IMAGE_TEXT, + COPY_IMAGE_PATH_TITLE, } from '../../constants/index'; import DeleteButton from '../delete_button.vue'; import CleanupStatus from './cleanup_status.vue'; @@ -52,6 +53,7 @@ export default { i18n: { REMOVE_REPOSITORY_LABEL, ROW_SCHEDULED_FOR_DELETION, + COPY_IMAGE_PATH_TITLE, }, computed: { disabledDelete() { @@ -115,7 +117,7 @@ export default { v-if="item.location" :disabled="deleting" :text="item.location" - :title="item.location" + :title="$options.i18n.COPY_IMAGE_PATH_TITLE" category="tertiary" /> </template> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/registry_header.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/registry_header.vue index 4ffd8390e4d..19d35a135fd 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/registry_header.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/list_page/registry_header.vue @@ -107,7 +107,7 @@ export default { <metadata-item v-if="!hideExpirationPolicyData" data-testid="expiration-policy" - icon="expire" + icon="clock" :text="expirationPolicyText" size="xl" /> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js index 2a58933cd64..98c24350f09 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/details.js @@ -67,7 +67,7 @@ export const MISSING_MANIFEST_WARNING_TOOLTIP = s__( export const UPDATED_AT = s__('ContainerRegistry|Last updated %{time}'); -export const NOT_AVAILABLE_TEXT = __('N/A'); +export const NOT_AVAILABLE_TEXT = __('Not applicable.'); export const NOT_AVAILABLE_SIZE = __('0 bytes'); export const CLEANUP_UNSCHEDULED_TEXT = s__('ContainerRegistry|Cleanup will run %{time}'); diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js index ceaf8a65a10..c6a7591e0d9 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js @@ -41,6 +41,8 @@ export const EMPTY_RESULT_MESSAGE = s__( 'ContainerRegistry|To widen your search, change or remove the filters above.', ); +export const COPY_IMAGE_PATH_TITLE = s__('ContainerRegistry|Copy image path'); + // Parameters export const IMAGE_DELETE_SCHEDULED_STATUS = 'DELETE_SCHEDULED'; diff --git a/app/assets/javascripts/packages_and_registries/harbor_registry/constants/details.js b/app/assets/javascripts/packages_and_registries/harbor_registry/constants/details.js index 2519f6b74a2..b62c51bd208 100644 --- a/app/assets/javascripts/packages_and_registries/harbor_registry/constants/details.js +++ b/app/assets/javascripts/packages_and_registries/harbor_registry/constants/details.js @@ -35,5 +35,5 @@ export const MISSING_MANIFEST_WARNING_TOOLTIP = s__( 'HarborRegistry|Invalid tag: missing manifest digest', ); -export const NOT_AVAILABLE_TEXT = __('N/A'); +export const NOT_AVAILABLE_TEXT = __('Not applicable.'); export const NOT_AVAILABLE_SIZE = __('0 bytes'); diff --git a/app/assets/javascripts/packages_and_registries/harbor_registry/pages/list.vue b/app/assets/javascripts/packages_and_registries/harbor_registry/pages/list.vue index 7aaef2ed57a..9c69059c968 100644 --- a/app/assets/javascripts/packages_and_registries/harbor_registry/pages/list.vue +++ b/app/assets/javascripts/packages_and_registries/harbor_registry/pages/list.vue @@ -1,5 +1,6 @@ <script> import { GlEmptyState, GlSprintf, GlLink, GlSkeletonLoader } from '@gitlab/ui'; +import { escape } from 'lodash'; import HarborListHeader from '~/packages_and_registries/harbor_registry/components/list/harbor_list_header.vue'; import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue'; import HarborList from '~/packages_and_registries/harbor_registry/components/list/harbor_list.vue'; @@ -80,7 +81,7 @@ export default { this.sorting = sort; const search = filters.find((i) => i.type === FILTERED_SEARCH_TERM); - this.name = search?.value?.data; + this.name = escape(search?.value?.data); this.fetchHarborImages(); }, diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/package_files.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/package_files.vue index ab4cfccd023..28bfb82093c 100644 --- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/package_files.vue +++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/package_files.vue @@ -100,7 +100,7 @@ export default { <template #cell(name)="{ item, toggleDetails, detailsShowing }"> <gl-button v-if="hasDetails(item)" - :icon="detailsShowing ? 'angle-up' : 'angle-down'" + :icon="detailsShowing ? 'chevron-lg-up' : 'chevron-lg-down'" :aria-label="detailsShowing ? __('Collapse') : __('Expand')" category="tertiary" size="small" diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/infrastructure_search.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/infrastructure_search.vue index d3c38da1531..2046b717362 100644 --- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/infrastructure_search.vue +++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/infrastructure_search.vue @@ -31,7 +31,7 @@ export default { <url-sync> <template #default="{ updateQuery }"> <registry-search - :filter="filter" + :filters="filter" :sorting="sorting" :tokens="[] /* eslint-disable-line @gitlab/vue-no-new-non-primitive-in-template */" :sortable-fields="sortableFields" diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue index a5f367bc1f6..a465fea0b74 100644 --- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue +++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list.vue @@ -1,7 +1,7 @@ <script> import { GlPagination, GlModal, GlSprintf } from '@gitlab/ui'; import { mapState, mapGetters } from 'vuex'; -import { s__ } from '~/locale'; +import { __, s__ } from '~/locale'; import Tracking from '~/tracking'; import PackagesListRow from '~/packages_and_registries/infrastructure_registry/shared/package_list_row.vue'; import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue'; @@ -42,12 +42,22 @@ export default { isListEmpty() { return !this.list || this.list.length === 0; }, - modalAction() { - return s__('PackageRegistry|Delete package'); - }, deletePackageName() { return this.itemToBeDeleted?.name ?? ''; }, + deleteModalActionPrimaryProps() { + return { + text: this.$options.i18n.modalAction, + attributes: { + variant: 'danger', + }, + }; + }, + deleteModalActionCancelProps() { + return { + text: __('Cancel'), + }; + }, tracking() { return { category: TRACK_CATEGORY, @@ -74,6 +84,7 @@ export default { deleteModalContent: s__( 'PackageRegistry|You are about to delete %{name}, this operation is irreversible, are you sure?', ), + modalAction: s__('PackageRegistry|Delete package'), }, }; </script> @@ -110,12 +121,12 @@ export default { ref="packageListDeleteModal" size="sm" modal-id="confirm-delete-pacakge" - ok-variant="danger" + :action-primary="deleteModalActionPrimaryProps" + :action-cancel="deleteModalActionCancelProps" @ok="deleteItemConfirmation" @cancel="deleteItemCanceled" > - <template #modal-title>{{ modalAction }}</template> - <template #modal-ok>{{ modalAction }}</template> + <template #modal-title>{{ $options.i18n.modalAction }}</template> <gl-sprintf :message="$options.i18n.deleteModalContent"> <template #name> <strong>{{ deletePackageName }}</strong> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue index 74c0cb44c51..a3bbd569f41 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata.vue @@ -1,30 +1,68 @@ <script> +import { GlAlert } from '@gitlab/ui'; +import * as Sentry from '@sentry/browser'; +import { s__ } from '~/locale'; import Composer from '~/packages_and_registries/package_registry/components/details/metadata/composer.vue'; import Conan from '~/packages_and_registries/package_registry/components/details/metadata/conan.vue'; import Maven from '~/packages_and_registries/package_registry/components/details/metadata/maven.vue'; import Nuget from '~/packages_and_registries/package_registry/components/details/metadata/nuget.vue'; import Pypi from '~/packages_and_registries/package_registry/components/details/metadata/pypi.vue'; import { + FETCH_PACKAGE_METADATA_ERROR_MESSAGE, PACKAGE_TYPE_COMPOSER, PACKAGE_TYPE_CONAN, PACKAGE_TYPE_MAVEN, PACKAGE_TYPE_NUGET, PACKAGE_TYPE_PYPI, } from '~/packages_and_registries/package_registry/constants'; +import getPackageMetadataQuery from '../../graphql/queries/get_package_metadata.query.graphql'; +import AdditionalMetadataLoader from './additional_metadata_loader.vue'; export default { components: { Composer, Conan, + GlAlert, Maven, Nuget, Pypi, + AdditionalMetadataLoader, }, props: { - packageEntity: { - type: Object, + packageId: { + type: String, required: true, }, + packageType: { + type: String, + required: true, + }, + }, + apollo: { + packageMetadata: { + query: getPackageMetadataQuery, + context: { + isSingleRequest: true, + }, + variables() { + return { + id: this.packageId, + }; + }, + update(data) { + return data.package?.metadata || null; + }, + error(error) { + this.fetchPackageMetadataError = true; + Sentry.captureException(error); + }, + }, + }, + data() { + return { + packageMetadata: null, + fetchPackageMetadataError: false, + }; }, computed: { metadataComponent() { @@ -34,22 +72,43 @@ export default { [PACKAGE_TYPE_MAVEN]: Maven, [PACKAGE_TYPE_NUGET]: Nuget, [PACKAGE_TYPE_PYPI]: Pypi, - }[this.packageEntity.packageType]; + }[this.packageType]; }, showMetadata() { - return this.metadataComponent && this.packageEntity.metadata; + return this.metadataComponent && this.packageMetadata; + }, + isLoading() { + return this.$apollo.queries.packageMetadata.loading; }, }, + i18n: { + componentTitle: s__('PackageRegistry|Additional metadata'), + fetchPackageMetadataErrorMessage: FETCH_PACKAGE_METADATA_ERROR_MESSAGE, + }, }; </script> <template> - <div v-if="showMetadata"> - <h3 class="gl-font-lg" data-testid="title">{{ __('Additional Metadata') }}</h3> - <div class="gl-bg-gray-50 gl-inset-border-1-gray-100 gl-rounded-base" data-testid="main"> + <div> + <h3 v-if="isLoading || showMetadata" class="gl-font-lg" data-testid="title"> + {{ $options.i18n.componentTitle }} + </h3> + <gl-alert + v-if="fetchPackageMetadataError" + variant="danger" + @dismiss="fetchPackageMetadataError = false" + > + {{ $options.i18n.fetchPackageMetadataErrorMessage }} + </gl-alert> + <additional-metadata-loader v-if="isLoading" /> + <div + v-if="showMetadata" + class="gl-bg-gray-50 gl-inset-border-1-gray-100 gl-rounded-base" + data-testid="main" + > <component :is="metadataComponent" - :package-entity="packageEntity" + :package-metadata="packageMetadata" data-testid="component-is" /> </div> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata_loader.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata_loader.vue new file mode 100644 index 00000000000..628cf441831 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/additional_metadata_loader.vue @@ -0,0 +1,30 @@ +<script> +import { GlSkeletonLoader } from '@gitlab/ui'; + +export default { + components: { + GlSkeletonLoader, + }, + loader: { + width: 302, + height: 16, + repeat: 2, + }, +}; +</script> + +<template> + <div class="gl-bg-gray-50 gl-inset-border-1-gray-100 gl-rounded-base"> + <div + v-for="index in $options.loader.repeat" + :key="index" + class="gl-display-flex gl-align-items-center gl-p-4 gl-border-gray-100 gl-border-b-1" + > + <div class="gl-md-max-w-30p"> + <gl-skeleton-loader :width="$options.loader.width" :height="$options.loader.height"> + <rect :width="$options.loader.width" :height="$options.loader.height" rx="4" /> + </gl-skeleton-loader> + </div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/composer.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/composer.vue index b6a36a0b00f..e3edaa3e45e 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/composer.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/composer.vue @@ -18,7 +18,7 @@ export default { ClipboardButton, }, props: { - packageEntity: { + packageMetadata: { type: Object, required: true, }, @@ -31,10 +31,10 @@ export default { <details-row icon="information-o" padding="gl-p-4" dashed data-testid="composer-target-sha"> <gl-sprintf :message="$options.i18n.targetSha"> <template #sha> - <strong>{{ packageEntity.metadata.targetSha }}</strong> + <strong>{{ packageMetadata.targetSha }}</strong> <clipboard-button :title="$options.i18n.targetShaCopyButton" - :text="packageEntity.metadata.targetSha" + :text="packageMetadata.targetSha" category="tertiary" css-class="gl-p-0!" /> @@ -44,10 +44,10 @@ export default { <details-row icon="information-o" padding="gl-p-4" data-testid="composer-json"> <gl-sprintf :message="$options.i18n.composerJson"> <template #license> - <strong>{{ packageEntity.metadata.composerJson.license }}</strong> + <strong>{{ packageMetadata.composerJson.license }}</strong> </template> <template #version> - <strong>{{ packageEntity.metadata.composerJson.version }}</strong> + <strong>{{ packageMetadata.composerJson.version }}</strong> </template> </gl-sprintf> </details-row> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/conan.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/conan.vue index 10797d74acf..de7c1bc4cd3 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/conan.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/conan.vue @@ -13,7 +13,7 @@ export default { GlSprintf, }, props: { - packageEntity: { + packageMetadata: { type: Object, required: true, }, @@ -25,7 +25,7 @@ export default { <div> <details-row icon="information-o" padding="gl-p-4" data-testid="conan-recipe"> <gl-sprintf :message="$options.i18n.recipeText"> - <template #recipe>{{ packageEntity.metadata.recipe }}</template> + <template #recipe>{{ packageMetadata.recipe }}</template> </gl-sprintf> </details-row> </div> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/maven.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/maven.vue index fd9fb49a9f2..7c3eb476a99 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/maven.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/maven.vue @@ -14,7 +14,7 @@ export default { GlSprintf, }, props: { - packageEntity: { + packageMetadata: { type: Object, required: true, }, @@ -27,14 +27,14 @@ export default { <details-row icon="information-o" padding="gl-p-4" dashed data-testid="maven-app"> <gl-sprintf :message="$options.i18n.appName"> <template #name> - <strong>{{ packageEntity.metadata.appName }}</strong> + <strong>{{ packageMetadata.appName }}</strong> </template> </gl-sprintf> </details-row> <details-row icon="information-o" padding="gl-p-4" data-testid="maven-group"> <gl-sprintf :message="$options.i18n.appGroup"> <template #group> - <strong>{{ packageEntity.metadata.appGroup }}</strong> + <strong>{{ packageMetadata.appGroup }}</strong> </template> </gl-sprintf> </details-row> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/nuget.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/nuget.vue index 1360b03856f..1ddd419a639 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/nuget.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/nuget.vue @@ -14,7 +14,7 @@ export default { GlSprintf, }, props: { - packageEntity: { + packageMetadata: { type: Object, required: true, }, @@ -25,7 +25,7 @@ export default { <template> <div> <details-row - v-if="packageEntity.metadata.projectUrl" + v-if="packageMetadata.projectUrl" icon="project" padding="gl-p-4" dashed @@ -33,22 +33,22 @@ export default { > <gl-sprintf :message="$options.i18n.sourceText"> <template #link> - <gl-link :href="packageEntity.metadata.projectUrl" target="_blank">{{ - packageEntity.metadata.projectUrl + <gl-link :href="packageMetadata.projectUrl" target="_blank">{{ + packageMetadata.projectUrl }}</gl-link> </template> </gl-sprintf> </details-row> <details-row - v-if="packageEntity.metadata.licenseUrl" + v-if="packageMetadata.licenseUrl" icon="license" padding="gl-p-4" data-testid="nuget-license" > <gl-sprintf :message="$options.i18n.licenseText"> <template #link> - <gl-link :href="packageEntity.metadata.licenseUrl" target="_blank">{{ - packageEntity.metadata.licenseUrl + <gl-link :href="packageMetadata.licenseUrl" target="_blank">{{ + packageMetadata.licenseUrl }}</gl-link> </template> </gl-sprintf> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/pypi.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/pypi.vue index 6534eef532c..ef35349c228 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/pypi.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/metadata/pypi.vue @@ -13,7 +13,7 @@ export default { GlSprintf, }, props: { - packageEntity: { + packageMetadata: { type: Object, required: true, }, @@ -26,7 +26,7 @@ export default { <details-row icon="information-o" padding="gl-p-4" data-testid="pypi-required-python"> <gl-sprintf :message="$options.i18n.requiredPython"> <template #pythonVersion> - <strong>{{ packageEntity.metadata.requiredPython }}</strong> + <strong>{{ packageMetadata.requiredPython }}</strong> </template> </gl-sprintf> </details-row> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue index 3724e371e01..9e700a5236f 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_files.vue @@ -1,5 +1,5 @@ <script> -import { GlLink, GlTable, GlDropdownItem, GlDropdown, GlIcon, GlButton } from '@gitlab/ui'; +import { GlLink, GlTableLite, GlDropdownItem, GlDropdown, GlIcon, GlButton } from '@gitlab/ui'; import { last } from 'lodash'; import { numberToHumanSize } from '~/lib/utils/number_utils'; import { __ } from '~/locale'; @@ -12,7 +12,7 @@ export default { name: 'PackageFiles', components: { GlLink, - GlTable, + GlTableLite, GlIcon, GlDropdown, GlDropdownItem, @@ -94,7 +94,7 @@ export default { <template> <div> <h3 class="gl-font-lg gl-mt-5">{{ __('Files') }}</h3> - <gl-table + <gl-table-lite :fields="filesTableHeaderFields" :items="filesTableRows" :tbody-tr-attr="{ 'data-testid': 'file-row' }" @@ -102,7 +102,7 @@ export default { <template #cell(name)="{ item, toggleDetails, detailsShowing }"> <gl-button v-if="hasDetails(item)" - :icon="detailsShowing ? 'angle-up' : 'angle-down'" + :icon="detailsShowing ? 'chevron-up' : 'chevron-down'" :aria-label="detailsShowing ? __('Collapse') : __('Expand')" category="tertiary" size="small" @@ -162,6 +162,6 @@ export default { <file-sha v-if="item.fileSha1" data-testid="sha-1" title="SHA-1" :sha="item.fileSha1" /> </div> </template> - </gl-table> + </gl-table-lite> </div> </template> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue index af6bd7079ba..96b82a20364 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history.vue @@ -1,5 +1,6 @@ <script> -import { GlLink, GlSprintf } from '@gitlab/ui'; +import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui'; +import * as Sentry from '@sentry/browser'; import { first } from 'lodash'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { truncateSha } from '~/lib/utils/text_utility'; @@ -7,6 +8,12 @@ import { s__, n__ } from '~/locale'; import { HISTORY_PIPELINES_LIMIT } from '~/packages_and_registries/shared/constants'; import HistoryItem from '~/vue_shared/components/registry/history_item.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; +import { + GRAPHQL_PACKAGE_PIPELINES_PAGE_SIZE, + FETCH_PACKAGE_PIPELINES_ERROR_MESSAGE, +} from '../../constants'; +import getPackagePipelinesQuery from '../../graphql/queries/get_package_pipelines.query.graphql'; +import PackageHistoryLoader from './package_history_loader.vue'; export default { name: 'PackageHistory', @@ -20,11 +27,14 @@ export default { combinedUpdateText: s__( 'PackageRegistry|Package updated by commit %{link} on branch %{branch}, built by pipeline %{pipeline}, and published to the registry %{datetime}', ), + fetchPackagePipelinesErrorMessage: FETCH_PACKAGE_PIPELINES_ERROR_MESSAGE, }, components: { + GlAlert, GlLink, GlSprintf, HistoryItem, + PackageHistoryLoader, TimeAgoTooltip, }, props: { @@ -37,15 +47,28 @@ export default { required: true, }, }, + apollo: { + pipelines: { + query: getPackagePipelinesQuery, + variables() { + return this.queryVariables; + }, + update(data) { + return data.package?.pipelines?.nodes || []; + }, + error(error) { + this.fetchPackagePipelinesError = true; + Sentry.captureException(error); + }, + }, + }, data() { return { - showDescription: false, + pipelines: [], + fetchPackagePipelinesError: false, }; }, computed: { - pipelines() { - return this.packageEntity?.pipelines?.nodes || []; - }, firstPipeline() { return first(this.pipelines); }, @@ -65,6 +88,15 @@ export default { this.archivedLines, ); }, + isLoading() { + return this.$apollo.queries.pipelines.loading; + }, + queryVariables() { + return { + id: this.packageEntity.id, + first: GRAPHQL_PACKAGE_PIPELINES_PAGE_SIZE, + }; + }, }, methods: { truncate(value) { @@ -80,7 +112,15 @@ export default { <template> <div class="issuable-discussion"> <h3 class="gl-font-lg" data-testid="title">{{ __('History') }}</h3> - <ul class="timeline main-notes-list notes gl-mb-4" data-testid="timeline"> + <gl-alert + v-if="fetchPackagePipelinesError" + variant="danger" + @dismiss="fetchPackagePipelinesError = false" + > + {{ $options.i18n.fetchPackagePipelinesErrorMessage }} + </gl-alert> + <package-history-loader v-if="isLoading" /> + <ul v-else class="timeline main-notes-list notes gl-mb-4" data-testid="timeline"> <history-item icon="clock" data-testid="created-on"> <gl-sprintf :message="$options.i18n.createdOn"> <template #name> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history_loader.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history_loader.vue new file mode 100644 index 00000000000..950971c2f11 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_history_loader.vue @@ -0,0 +1,24 @@ +<script> +import { GlSkeletonLoader } from '@gitlab/ui'; + +export default { + components: { + GlSkeletonLoader, + }, + loader: { + width: 580, + height: 80, + }, +}; +</script> + +<template> + <div class="gl-ml-5 gl-md-max-w-70p"> + <gl-skeleton-loader :width="$options.loader.width" :height="$options.loader.height"> + <rect x="49" y="9" width="531" height="16" rx="4" /> + <circle cx="16" cy="16" r="16" /> + <rect x="49" y="57" width="302" height="16" rx="4" /> + <circle cx="16" cy="64" r="16" /> + </gl-skeleton-loader> + </div> +</template> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue index 7a88e04d1f9..d28847c7900 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_search.vue @@ -105,7 +105,7 @@ export default { <template #default="{ updateQuery }"> <registry-search v-if="mountRegistrySearch" - :filter="filters" + :filters="filters" :sorting="sorting" :tokens="$options.tokens" :sortable-fields="sortableFields" diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue index 1aff23bc112..a6ac2eb1b2b 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue @@ -1,6 +1,6 @@ <script> import { GlAlert, GlModal, GlSprintf, GlKeysetPagination } from '@gitlab/ui'; -import { s__, sprintf } from '~/locale'; +import { __, s__, sprintf } from '~/locale'; import PackagesListRow from '~/packages_and_registries/package_registry/components/list/package_list_row.vue'; import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue'; import { @@ -73,6 +73,19 @@ export default { } }, }, + deleteModalActionPrimaryProps() { + return { + text: this.$options.i18n.modalAction, + attributes: { + variant: 'danger', + }, + }; + }, + deleteModalActionCancelProps() { + return { + text: __('Cancel'), + }; + }, errorTitleAlert() { return sprintf( s__('PackageRegistry|There was an error publishing a %{packageName} package'), @@ -161,12 +174,12 @@ export default { v-model="showDeleteModal" modal-id="confirm-delete-pacakge" size="sm" - ok-variant="danger" + :action-primary="deleteModalActionPrimaryProps" + :action-cancel="deleteModalActionCancelProps" @ok="deleteItemConfirmation" @cancel="deleteItemCanceled" > <template #modal-title>{{ $options.i18n.modalAction }}</template> - <template #modal-ok>{{ $options.i18n.modalAction }}</template> <gl-sprintf :message="$options.i18n.deleteModalContent"> <template #name> <strong>{{ deletePackageName }}</strong> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/constants.js b/app/assets/javascripts/packages_and_registries/package_registry/constants.js index c4d331fa384..3c090951b7d 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/constants.js +++ b/app/assets/javascripts/packages_and_registries/package_registry/constants.js @@ -72,6 +72,12 @@ export const DELETE_PACKAGE_FILE_SUCCESS_MESSAGE = s__( export const FETCH_PACKAGE_DETAILS_ERROR_MESSAGE = s__( 'PackageRegistry|Failed to load the package data', ); +export const FETCH_PACKAGE_PIPELINES_ERROR_MESSAGE = s__( + 'PackageRegistry|Something went wrong while fetching the package history.', +); +export const FETCH_PACKAGE_METADATA_ERROR_MESSAGE = s__( + 'PackageRegistry|Something went wrong while fetching the package metadata.', +); export const DELETE_PACKAGE_SUCCESS_MESSAGE = s__('PackageRegistry|Package deleted successfully'); export const PACKAGE_REGISTRY_TITLE = __('Package Registry'); @@ -149,3 +155,5 @@ export const CONAN_HELP_PATH = helpPagePath('user/packages/conan_repository/inde export const NUGET_HELP_PATH = helpPagePath('user/packages/nuget_repository/index'); export const PYPI_HELP_PATH = helpPagePath('user/packages/pypi_repository/index'); export const COMPOSER_HELP_PATH = helpPagePath('user/packages/composer_repository/index'); + +export const GRAPHQL_PACKAGE_PIPELINES_PAGE_SIZE = 10; diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql index 41b0c285fff..5574020c9e4 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql +++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql @@ -27,18 +27,10 @@ query getPackageDetails($id: PackagesPackageID!) { name } } - pipelines(first: 10) { + pipelines(first: 1) { nodes { ref id - sha - createdAt - commitPath - path - user { - id - name - } project { id name @@ -91,37 +83,15 @@ query getPackageDetails($id: PackagesPackageID!) { } } metadata { - ... on ComposerMetadata { - targetSha - composerJson { - license - version - } - } - ... on PypiMetadata { - id - requiredPython - } - ... on ConanMetadata { - id - packageChannel - packageUsername - recipe - recipePath - } ... on MavenMetadata { id appName appGroup appVersion - path } - ... on NugetMetadata { id iconUrl - licenseUrl - projectUrl } } } diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_metadata.query.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_metadata.query.graphql new file mode 100644 index 00000000000..fc8b39b37ab --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_metadata.query.graphql @@ -0,0 +1,39 @@ +query getPackageMetadata($id: PackagesPackageID!) { + package(id: $id) { + id + packageType + metadata { + ... on ComposerMetadata { + targetSha + composerJson { + license + version + } + } + ... on PypiMetadata { + id + requiredPython + } + ... on ConanMetadata { + id + packageChannel + packageUsername + recipe + recipePath + } + ... on MavenMetadata { + id + appName + appGroup + appVersion + path + } + ... on NugetMetadata { + id + iconUrl + licenseUrl + projectUrl + } + } + } +} diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_pipelines.query.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_pipelines.query.graphql new file mode 100644 index 00000000000..86e67320d63 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_pipelines.query.graphql @@ -0,0 +1,24 @@ +query getPackagePipelines($id: PackagesPackageID!, $first: Int) { + package(id: $id) { + id + pipelines(first: $first) { + nodes { + ref + id + sha + createdAt + commitPath + path + user { + id + name + } + project { + id + name + webUrl + } + } + } + } +} diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue index 162b420a784..768c8d6478b 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue @@ -27,6 +27,9 @@ import DeletePackage from '~/packages_and_registries/package_registry/components import { PACKAGE_TYPE_NUGET, PACKAGE_TYPE_COMPOSER, + PACKAGE_TYPE_CONAN, + PACKAGE_TYPE_MAVEN, + PACKAGE_TYPE_PYPI, DELETE_PACKAGE_TRACKING_ACTION, REQUEST_DELETE_PACKAGE_TRACKING_ACTION, CANCEL_DELETE_PACKAGE_TRACKING_ACTION, @@ -122,6 +125,9 @@ export default { packageFiles() { return this.packageEntity.packageFiles?.nodes; }, + packageType() { + return this.packageEntity.packageType; + }, isLoading() { return this.$apollo.queries.packageEntity.loading; }, @@ -130,7 +136,7 @@ export default { }, tracking() { return { - category: packageTypeToTrackCategory(this.packageEntity.packageType), + category: packageTypeToTrackCategory(this.packageType), }; }, hasVersions() { @@ -140,10 +146,19 @@ export default { return this.packageEntity.dependencyLinks?.nodes || []; }, showDependencies() { - return this.packageEntity.packageType === PACKAGE_TYPE_NUGET; + return this.packageType === PACKAGE_TYPE_NUGET; }, showFiles() { - return this.packageEntity.packageType !== PACKAGE_TYPE_COMPOSER; + return this.packageType !== PACKAGE_TYPE_COMPOSER; + }, + showMetadata() { + return [ + PACKAGE_TYPE_COMPOSER, + PACKAGE_TYPE_CONAN, + PACKAGE_TYPE_MAVEN, + PACKAGE_TYPE_NUGET, + PACKAGE_TYPE_PYPI, + ].includes(this.packageType); }, }, methods: { @@ -262,7 +277,11 @@ export default { <installation-commands :package-entity="packageEntity" /> - <additional-metadata :package-entity="packageEntity" /> + <additional-metadata + v-if="showMetadata" + :package-id="packageEntity.id" + :package-type="packageType" + /> </div> <package-files diff --git a/app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue b/app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue index a5189201112..130d6977936 100644 --- a/app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue +++ b/app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue @@ -77,9 +77,6 @@ export default { this.updateDependencyProxyImageTtlGroupPolicy(payload); }, }, - helpText() { - return this.enabled ? this.$options.i18n.enabledProxyHelpText : ''; - }, }, methods: { mutationVariables(payload) { @@ -144,11 +141,10 @@ export default { v-model="enabled" :disabled="isLoading" :label="$options.i18n.enabledProxyLabel" - :help="helpText" data-qa-selector="dependency_proxy_setting_toggle" data-testid="dependency-proxy-setting-toggle" > - <template #help> + <template v-if="enabled" #help> <span class="gl-overflow-break-word gl-max-w-100vw gl-display-inline-block"> <gl-sprintf :message="$options.i18n.enabledProxyHelpText"> <template #link="{ content }"> diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy.vue new file mode 100644 index 00000000000..fdc7bd39780 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy.vue @@ -0,0 +1,124 @@ +<script> +import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui'; +import { isEqual, get, isEmpty } from 'lodash'; +import { + CONTAINER_CLEANUP_POLICY_TITLE, + CONTAINER_CLEANUP_POLICY_DESCRIPTION, + FETCH_SETTINGS_ERROR_MESSAGE, + UNAVAILABLE_FEATURE_TITLE, + UNAVAILABLE_FEATURE_INTRO_TEXT, + UNAVAILABLE_USER_FEATURE_TEXT, + UNAVAILABLE_ADMIN_FEATURE_TEXT, +} from '~/packages_and_registries/settings/project/constants'; +import expirationPolicyQuery from '~/packages_and_registries/settings/project/graphql/queries/get_expiration_policy.query.graphql'; +import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue'; + +import ContainerExpirationPolicyForm from './container_expiration_policy_form.vue'; + +export default { + components: { + SettingsBlock, + GlAlert, + GlSprintf, + GlLink, + ContainerExpirationPolicyForm, + }, + inject: ['projectPath', 'isAdmin', 'adminSettingsPath', 'enableHistoricEntries', 'helpPagePath'], + i18n: { + CONTAINER_CLEANUP_POLICY_TITLE, + CONTAINER_CLEANUP_POLICY_DESCRIPTION, + UNAVAILABLE_FEATURE_TITLE, + UNAVAILABLE_FEATURE_INTRO_TEXT, + FETCH_SETTINGS_ERROR_MESSAGE, + }, + apollo: { + containerExpirationPolicy: { + query: expirationPolicyQuery, + variables() { + return { + projectPath: this.projectPath, + }; + }, + update: (data) => data.project?.containerExpirationPolicy, + result({ data }) { + this.workingCopy = { ...get(data, 'project.containerExpirationPolicy', {}) }; + }, + error(e) { + this.fetchSettingsError = e; + }, + }, + }, + data() { + return { + fetchSettingsError: false, + containerExpirationPolicy: null, + workingCopy: {}, + }; + }, + computed: { + isDisabled() { + return !(this.containerExpirationPolicy || this.enableHistoricEntries); + }, + showDisabledFormMessage() { + return this.isDisabled && !this.fetchSettingsError; + }, + unavailableFeatureMessage() { + return this.isAdmin ? UNAVAILABLE_ADMIN_FEATURE_TEXT : UNAVAILABLE_USER_FEATURE_TEXT; + }, + isEdited() { + if (isEmpty(this.containerExpirationPolicy) && isEmpty(this.workingCopy)) { + return false; + } + return !isEqual(this.containerExpirationPolicy, this.workingCopy); + }, + }, + methods: { + restoreOriginal() { + this.workingCopy = { ...this.containerExpirationPolicy }; + }, + }, +}; +</script> + +<template> + <settings-block :collapsible="false"> + <template #title> {{ $options.i18n.CONTAINER_CLEANUP_POLICY_TITLE }}</template> + <template #description> + <span> + <gl-sprintf :message="$options.i18n.CONTAINER_CLEANUP_POLICY_DESCRIPTION"> + <template #link="{ content }"> + <gl-link :href="helpPagePath">{{ content }}</gl-link> + </template> + </gl-sprintf> + </span> + </template> + <template #default> + <container-expiration-policy-form + v-if="!isDisabled" + v-model="workingCopy" + :is-loading="$apollo.queries.containerExpirationPolicy.loading" + :is-edited="isEdited" + @reset="restoreOriginal" + /> + <template v-else> + <gl-alert + v-if="showDisabledFormMessage" + :dismissible="false" + :title="$options.i18n.UNAVAILABLE_FEATURE_TITLE" + variant="tip" + > + {{ $options.i18n.UNAVAILABLE_FEATURE_INTRO_TEXT }} + + <gl-sprintf :message="unavailableFeatureMessage"> + <template #link="{ content }"> + <gl-link :href="adminSettingsPath">{{ content }}</gl-link> + </template> + </gl-sprintf> + </gl-alert> + <gl-alert v-else-if="fetchSettingsError" variant="warning" :dismissible="false"> + <gl-sprintf :message="$options.i18n.FETCH_SETTINGS_ERROR_MESSAGE" /> + </gl-alert> + </template> + </template> + </settings-block> +</template> diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/settings_form.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy_form.vue index ae2d5f4fbc5..ae2d5f4fbc5 100644 --- a/app/assets/javascripts/packages_and_registries/settings/project/components/settings_form.vue +++ b/app/assets/javascripts/packages_and_registries/settings/project/components/container_expiration_policy_form.vue diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/expiration_input.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/expiration_input.vue index d6d85189792..3fbbfd75ffb 100644 --- a/app/assets/javascripts/packages_and_registries/settings/project/components/expiration_input.vue +++ b/app/assets/javascripts/packages_and_registries/settings/project/components/expiration_input.vue @@ -104,7 +104,7 @@ export default { <span data-testid="description" class="gl-text-gray-400"> <gl-sprintf :message="description"> <template #link="{ content }"> - <gl-link :href="tagsRegexHelpPagePath" target="_blank">{{ content }}</gl-link> + <gl-link :href="tagsRegexHelpPagePath">{{ content }}</gl-link> </template> </gl-sprintf> </span> diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/registry_settings_app.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/registry_settings_app.vue index 854c88b2ad3..95af19e6d85 100644 --- a/app/assets/javascripts/packages_and_registries/settings/project/components/registry_settings_app.vue +++ b/app/assets/javascripts/packages_and_registries/settings/project/components/registry_settings_app.vue @@ -1,128 +1,15 @@ <script> -import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui'; -import { isEqual, get, isEmpty } from 'lodash'; -import { - FETCH_SETTINGS_ERROR_MESSAGE, - UNAVAILABLE_FEATURE_TITLE, - UNAVAILABLE_FEATURE_INTRO_TEXT, - UNAVAILABLE_USER_FEATURE_TEXT, - UNAVAILABLE_ADMIN_FEATURE_TEXT, -} from '~/packages_and_registries/settings/project/constants'; -import expirationPolicyQuery from '~/packages_and_registries/settings/project/graphql/queries/get_expiration_policy.query.graphql'; -import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue'; - -import SettingsForm from './settings_form.vue'; +import ContainerExpirationPolicy from './container_expiration_policy.vue'; export default { components: { - SettingsBlock, - SettingsForm, - GlAlert, - GlSprintf, - GlLink, - }, - inject: ['projectPath', 'isAdmin', 'adminSettingsPath', 'enableHistoricEntries', 'helpPagePath'], - i18n: { - UNAVAILABLE_FEATURE_TITLE, - UNAVAILABLE_FEATURE_INTRO_TEXT, - FETCH_SETTINGS_ERROR_MESSAGE, - }, - apollo: { - containerExpirationPolicy: { - query: expirationPolicyQuery, - variables() { - return { - projectPath: this.projectPath, - }; - }, - update: (data) => data.project?.containerExpirationPolicy, - result({ data }) { - this.workingCopy = { ...get(data, 'project.containerExpirationPolicy', {}) }; - }, - error(e) { - this.fetchSettingsError = e; - }, - }, - }, - data() { - return { - fetchSettingsError: false, - containerExpirationPolicy: null, - workingCopy: {}, - }; - }, - computed: { - isDisabled() { - return !(this.containerExpirationPolicy || this.enableHistoricEntries); - }, - showDisabledFormMessage() { - return this.isDisabled && !this.fetchSettingsError; - }, - unavailableFeatureMessage() { - return this.isAdmin ? UNAVAILABLE_ADMIN_FEATURE_TEXT : UNAVAILABLE_USER_FEATURE_TEXT; - }, - isEdited() { - if (isEmpty(this.containerExpirationPolicy) && isEmpty(this.workingCopy)) { - return false; - } - return !isEqual(this.containerExpirationPolicy, this.workingCopy); - }, - }, - methods: { - restoreOriginal() { - this.workingCopy = { ...this.containerExpirationPolicy }; - }, + ContainerExpirationPolicy, }, }; </script> <template> <section data-testid="registry-settings-app"> - <settings-block :collapsible="false"> - <template #title> {{ __('Clean up image tags') }}</template> - <template #description> - <span data-testid="description"> - <gl-sprintf - :message=" - __( - 'Save storage space by automatically deleting tags from the container registry and keeping the ones you want. %{linkStart}How does cleanup work?%{linkEnd}', - ) - " - > - <template #link="{ content }"> - <gl-link :href="helpPagePath" target="_blank">{{ content }}</gl-link> - </template> - </gl-sprintf> - </span> - </template> - <template #default> - <settings-form - v-if="!isDisabled" - v-model="workingCopy" - :is-loading="$apollo.queries.containerExpirationPolicy.loading" - :is-edited="isEdited" - @reset="restoreOriginal" - /> - <template v-else> - <gl-alert - v-if="showDisabledFormMessage" - :dismissible="false" - :title="$options.i18n.UNAVAILABLE_FEATURE_TITLE" - variant="tip" - > - {{ $options.i18n.UNAVAILABLE_FEATURE_INTRO_TEXT }} - - <gl-sprintf :message="unavailableFeatureMessage"> - <template #link="{ content }"> - <gl-link :href="adminSettingsPath" target="_blank">{{ content }}</gl-link> - </template> - </gl-sprintf> - </gl-alert> - <gl-alert v-else-if="fetchSettingsError" variant="warning" :dismissible="false"> - <gl-sprintf :message="$options.i18n.FETCH_SETTINGS_ERROR_MESSAGE" /> - </gl-alert> - </template> - </template> - </settings-block> + <container-expiration-policy /> </section> </template> diff --git a/app/assets/javascripts/packages_and_registries/settings/project/constants.js b/app/assets/javascripts/packages_and_registries/settings/project/constants.js index 841585c5646..40f980d15fb 100644 --- a/app/assets/javascripts/packages_and_registries/settings/project/constants.js +++ b/app/assets/javascripts/packages_and_registries/settings/project/constants.js @@ -1,5 +1,9 @@ import { s__, __ } from '~/locale'; +export const CONTAINER_CLEANUP_POLICY_TITLE = s__(`ContainerRegistry|Clean up image tags`); +export const CONTAINER_CLEANUP_POLICY_DESCRIPTION = s__( + `ContainerRegistry|Save storage space by automatically deleting tags from the container registry and keeping the ones you want. %{linkStart}How does cleanup work?%{linkEnd}`, +); export const SET_CLEANUP_POLICY_BUTTON = __('Save'); export const UNAVAILABLE_FEATURE_TITLE = s__( `ContainerRegistry|Cleanup policy for tags is disabled`, diff --git a/app/assets/javascripts/packages_and_registries/shared/components/cli_commands.vue b/app/assets/javascripts/packages_and_registries/shared/components/cli_commands.vue index de7ab3e6d7b..dc61f3c788c 100644 --- a/app/assets/javascripts/packages_and_registries/shared/components/cli_commands.vue +++ b/app/assets/javascripts/packages_and_registries/shared/components/cli_commands.vue @@ -49,7 +49,7 @@ export default { <template> <gl-dropdown :text="$options.i18n.QUICK_START" - variant="info" + variant="confirm" right @shown="track('click_dropdown')" > diff --git a/app/assets/javascripts/packages_and_registries/shared/components/persisted_search.vue b/app/assets/javascripts/packages_and_registries/shared/components/persisted_search.vue index 9b2de1a1b84..b2b1d2c8212 100644 --- a/app/assets/javascripts/packages_and_registries/shared/components/persisted_search.vue +++ b/app/assets/javascripts/packages_and_registries/shared/components/persisted_search.vue @@ -66,7 +66,7 @@ export default { <template #default="{ updateQuery }"> <registry-search v-if="mountRegistrySearch" - :filter="filters" + :filters="filters" :sorting="sorting" :tokens="$options.tokens" :sortable-fields="sortableFields" diff --git a/app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue b/app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue index a1e3c06812c..e7b4229052e 100644 --- a/app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue +++ b/app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue @@ -49,7 +49,7 @@ export default { <gl-breadcrumb :key="isLoaded" :items="allCrumbs"> <template #separator> <span class="gl-mx-n5"> - <gl-icon name="angle-right" :size="8" /> + <gl-icon name="chevron-lg-right" :size="8" /> </span> </template> </gl-breadcrumb> diff --git a/app/assets/javascripts/pages/admin/application_settings/payload_downloader.js b/app/assets/javascripts/pages/admin/application_settings/payload_downloader.js index 7c81cf80dc6..8cecc1d3ef7 100644 --- a/app/assets/javascripts/pages/admin/application_settings/payload_downloader.js +++ b/app/assets/javascripts/pages/admin/application_settings/payload_downloader.js @@ -19,7 +19,7 @@ export default class PayloadDownloader { } requestPayload() { - this.spinner.classList.add('d-inline-flex'); + this.spinner.classList.add('gl-display-inline'); return axios .get(this.trigger.dataset.endpoint, { @@ -34,7 +34,7 @@ export default class PayloadDownloader { }); }) .finally(() => { - this.spinner.classList.remove('d-inline-flex'); + this.spinner.classList.remove('gl-display-inline'); }); } diff --git a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js index ae08806fe4c..84027203783 100644 --- a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js +++ b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js @@ -29,7 +29,7 @@ export default class PayloadPreviewer { requestPayload() { if (this.isInserted) return this.showPayload(); - this.spinner.classList.add('gl-display-inline-flex'); + this.spinner.classList.add('gl-display-inline'); const container = this.getContainer(); @@ -38,11 +38,11 @@ export default class PayloadPreviewer { responseType: 'text', }) .then(({ data }) => { - this.spinner.classList.remove('gl-display-inline-flex'); + this.spinner.classList.remove('gl-display-inline'); this.insertPayload(data); }) .catch(() => { - this.spinner.classList.remove('gl-display-inline-flex'); + this.spinner.classList.remove('gl-display-inline'); createFlash({ message: __('Error fetching payload data.'), }); diff --git a/app/assets/javascripts/pages/admin/application_settings/repository/index.js b/app/assets/javascripts/pages/admin/application_settings/repository/index.js new file mode 100644 index 00000000000..9a67fe7b6f8 --- /dev/null +++ b/app/assets/javascripts/pages/admin/application_settings/repository/index.js @@ -0,0 +1,3 @@ +import initInactiveProjectDeletion from '~/admin/application_settings/inactive_project_deletion'; + +initInactiveProjectDeletion(); diff --git a/app/assets/javascripts/pages/admin/groups/edit/index.js b/app/assets/javascripts/pages/admin/groups/edit/index.js index 01e03ed437d..a4df1cf8274 100644 --- a/app/assets/javascripts/pages/admin/groups/edit/index.js +++ b/app/assets/javascripts/pages/admin/groups/edit/index.js @@ -1,3 +1,5 @@ import initFilePickers from '~/file_pickers'; +import { initGroupNameAndPath } from '~/groups/create_edit_form'; initFilePickers(); +initGroupNameAndPath(); diff --git a/app/assets/javascripts/pages/admin/groups/new/index.js b/app/assets/javascripts/pages/admin/groups/new/index.js index 710d2d72f4c..a341ef9656d 100644 --- a/app/assets/javascripts/pages/admin/groups/new/index.js +++ b/app/assets/javascripts/pages/admin/groups/new/index.js @@ -1,6 +1,7 @@ import initFilePickers from '~/file_pickers'; import BindInOut from '~/behaviors/bind_in_out'; import Group from '~/group'; +import { initGroupNameAndPath } from '~/groups/create_edit_form'; (() => { BindInOut.initAll(); @@ -8,3 +9,5 @@ import Group from '~/group'; return new Group(); })(); + +initGroupNameAndPath(); diff --git a/app/assets/javascripts/pages/admin/impersonation_tokens/index.js b/app/assets/javascripts/pages/admin/impersonation_tokens/index.js index 8fbc8dc17bc..d86ac891977 100644 --- a/app/assets/javascripts/pages/admin/impersonation_tokens/index.js +++ b/app/assets/javascripts/pages/admin/impersonation_tokens/index.js @@ -1,8 +1,14 @@ -import { initExpiresAtField } from '~/access_tokens'; +import { + initAccessTokenTableApp, + initExpiresAtField, + initNewAccessTokenApp, +} from '~/access_tokens'; import { initAdminUserActions, initDeleteUserModals } from '~/admin/users'; import initConfirmModal from '~/confirm_modal'; +initAccessTokenTableApp(); +initExpiresAtField(); +initNewAccessTokenApp(); initAdminUserActions(); initDeleteUserModals(); -initExpiresAtField(); initConfirmModal(); diff --git a/app/assets/javascripts/pages/dashboard/todos/index/todos.js b/app/assets/javascripts/pages/dashboard/todos/index/todos.js index c4bbbdcd8ec..44299d235d5 100644 --- a/app/assets/javascripts/pages/dashboard/todos/index/todos.js +++ b/app/assets/javascripts/pages/dashboard/todos/index/todos.js @@ -31,6 +31,7 @@ export default class Todos { $('.js-done-todo, .js-undo-todo, .js-add-todo').off('click', this.updateRowStateClickedWrapper); $('.js-todos-mark-all', '.js-todos-undo-all').off('click', this.updateallStateClickedWrapper); $('.todo').off('click', this.goToTodoUrl); + $('.todo').off('auxclick', this.goToTodoUrl); } bindEvents() { @@ -40,6 +41,7 @@ export default class Todos { $('.js-done-todo, .js-undo-todo, .js-add-todo').on('click', this.updateRowStateClickedWrapper); $('.js-todos-mark-all, .js-todos-undo-all').on('click', this.updateAllStateClickedWrapper); $('.todo').on('click', this.goToTodoUrl); + $('.todo').on('auxclick', this.goToTodoUrl); } initFilters() { @@ -198,11 +200,13 @@ export default class Todos { e.stopPropagation(); e.preventDefault(); + const isPrimaryClick = e.button === 0; + if (isMetaClick(e)) { const windowTarget = '_blank'; window.open(todoLink, windowTarget); - } else { + } else if (isPrimaryClick) { visitUrl(todoLink); } } diff --git a/app/assets/javascripts/pages/groups/group_members/index.js b/app/assets/javascripts/pages/groups/group_members/index.js index 79ac31f1659..c7c2f6f773e 100644 --- a/app/assets/javascripts/pages/groups/group_members/index.js +++ b/app/assets/javascripts/pages/groups/group_members/index.js @@ -32,25 +32,19 @@ initMembersApp(document.querySelector('.js-group-members-list-app'), { }, }, [MEMBER_TYPES.group]: { - tableFields: gon?.features?.groupMemberInheritedGroup - ? SHARED_FIELDS.concat(['source', 'granted']) - : SHARED_FIELDS.concat(['granted']), + tableFields: SHARED_FIELDS.concat(['source', 'granted']), tableAttrs: { table: { 'data-qa-selector': 'groups_list' }, tr: { 'data-qa-selector': 'group_row' }, }, requestFormatter: groupLinkRequestFormatter, - ...(gon?.features?.groupMemberInheritedGroup - ? { - filteredSearchBar: { - show: true, - tokens: ['with_inherited_permissions'], - searchParam: 'search_groups', - placeholder: s__('Members|Filter groups'), - recentSearchesStorageKey: 'group_links_members', - }, - } - : {}), + filteredSearchBar: { + show: true, + tokens: ['groups_with_inherited_permissions'], + searchParam: 'search_groups', + placeholder: s__('Members|Filter groups'), + recentSearchesStorageKey: 'group_links_members', + }, }, [MEMBER_TYPES.invite]: { tableFields: SHARED_FIELDS.concat('invited'), diff --git a/app/assets/javascripts/pages/groups/issues/index.js b/app/assets/javascripts/pages/groups/issues/index.js index 725c38defc3..912a4ea2c11 100644 --- a/app/assets/javascripts/pages/groups/issues/index.js +++ b/app/assets/javascripts/pages/groups/issues/index.js @@ -1,26 +1,3 @@ -import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys'; -import { initBulkUpdateSidebar } from '~/issuable/bulk_update_sidebar'; import { mountIssuesListApp } from '~/issues/list'; -import initManualOrdering from '~/issues/manual_ordering'; -import { FILTERED_SEARCH } from '~/filtered_search/constants'; -import initFilteredSearch from '~/pages/search/init_filtered_search'; -import projectSelect from '~/project_select'; -if (gon.features?.vueIssuesList) { - mountIssuesListApp(); -} else { - const ISSUE_BULK_UPDATE_PREFIX = 'issue_'; - - IssuableFilteredSearchTokenKeys.addExtraTokensForIssues(); - IssuableFilteredSearchTokenKeys.removeTokensForKeys('release'); - initBulkUpdateSidebar(ISSUE_BULK_UPDATE_PREFIX); - - initFilteredSearch({ - page: FILTERED_SEARCH.ISSUES, - isGroupDecendent: true, - useDefaultState: true, - filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys, - }); - projectSelect(); - initManualOrdering(); -} +mountIssuesListApp(); diff --git a/app/assets/javascripts/pages/groups/new/index.js b/app/assets/javascripts/pages/groups/new/index.js index 702b152d25a..7c409010510 100644 --- a/app/assets/javascripts/pages/groups/new/index.js +++ b/app/assets/javascripts/pages/groups/new/index.js @@ -2,18 +2,19 @@ import Vue from 'vue'; import BindInOut from '~/behaviors/bind_in_out'; import initFilePickers from '~/file_pickers'; import Group from '~/group'; +import { initGroupNameAndPath } from '~/groups/create_edit_form'; import { parseBoolean } from '~/lib/utils/common_utils'; import NewGroupCreationApp from './components/app.vue'; import GroupPathValidator from './group_path_validator'; import initToggleInviteMembers from './toggle_invite_members'; new GroupPathValidator(); // eslint-disable-line no-new +new Group(); // eslint-disable-line no-new +initGroupNameAndPath(); BindInOut.initAll(); initFilePickers(); -new Group(); // eslint-disable-line no-new - function initNewGroupCreation(el) { const { hasErrors, verificationRequired, verificationFormUrl, subscriptionsUrl } = el.dataset; diff --git a/app/assets/javascripts/pages/groups/settings/access_tokens/index.js b/app/assets/javascripts/pages/groups/settings/access_tokens/index.js index dc1bb88bf4b..b9f282a123c 100644 --- a/app/assets/javascripts/pages/groups/settings/access_tokens/index.js +++ b/app/assets/javascripts/pages/groups/settings/access_tokens/index.js @@ -1,3 +1,9 @@ -import { initExpiresAtField } from '~/access_tokens'; +import { + initAccessTokenTableApp, + initExpiresAtField, + initNewAccessTokenApp, +} from '~/access_tokens'; +initAccessTokenTableApp(); initExpiresAtField(); +initNewAccessTokenApp(); diff --git a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js index 52add416f38..bf77d968e7d 100644 --- a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js +++ b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js @@ -1,3 +1,4 @@ +import initStaleRunnerCleanupSetting from 'ee_else_ce/group_settings/stale_runner_cleanup'; import initVariableList from '~/ci_variable_list'; import initSharedRunnersForm from '~/group_settings/mount_shared_runners'; import initSettingsPanels from '~/settings_panels'; @@ -6,4 +7,5 @@ import initSettingsPanels from '~/settings_panels'; initSettingsPanels(); initSharedRunnersForm(); +initStaleRunnerCleanupSetting(); initVariableList(); diff --git a/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue b/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue index 35a8d3d979a..6748a62e777 100644 --- a/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue +++ b/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue @@ -137,7 +137,7 @@ export default { {{ s__('BulkImport|Group import history') }} </h1> </div> - <gl-loading-icon v-if="loading" size="md" class="gl-mt-5" /> + <gl-loading-icon v-if="loading" size="lg" class="gl-mt-5" /> <gl-empty-state v-else-if="!hasHistoryItems" :title="s__('BulkImport|No history is available')" diff --git a/app/assets/javascripts/pages/import/history/components/import_error_details.vue b/app/assets/javascripts/pages/import/history/components/import_error_details.vue index 33ba73317f8..6af137cd722 100644 --- a/app/assets/javascripts/pages/import/history/components/import_error_details.vue +++ b/app/assets/javascripts/pages/import/history/components/import_error_details.vue @@ -36,7 +36,7 @@ export default { }; </script> <template> - <gl-loading-icon v-if="loading" size="md" /> + <gl-loading-icon v-if="loading" size="lg" /> <pre v-else ><code>{{ error || s__('BulkImport|No additional information provided.') }}</code></pre> diff --git a/app/assets/javascripts/pages/import/history/components/import_history_app.vue b/app/assets/javascripts/pages/import/history/components/import_history_app.vue index 557e25f66e2..db6f0c23dbd 100644 --- a/app/assets/javascripts/pages/import/history/components/import_history_app.vue +++ b/app/assets/javascripts/pages/import/history/components/import_history_app.vue @@ -137,7 +137,7 @@ export default { {{ s__('BulkImport|Project import history') }} </h1> </div> - <gl-loading-icon v-if="loading" size="md" class="gl-mt-5" /> + <gl-loading-icon v-if="loading" size="lg" class="gl-mt-5" /> <gl-empty-state v-else-if="!hasHistoryItems" :title="s__('BulkImport|No history is available')" diff --git a/app/assets/javascripts/pages/profiles/personal_access_tokens/index.js b/app/assets/javascripts/pages/profiles/personal_access_tokens/index.js index 37e9b7e99d4..3fae9809e51 100644 --- a/app/assets/javascripts/pages/profiles/personal_access_tokens/index.js +++ b/app/assets/javascripts/pages/profiles/personal_access_tokens/index.js @@ -1,5 +1,13 @@ -import { initExpiresAtField, initProjectsField, initTokensApp } from '~/access_tokens'; +import { + initAccessTokenTableApp, + initExpiresAtField, + initNewAccessTokenApp, + initProjectsField, + initTokensApp, +} from '~/access_tokens'; +initAccessTokenTableApp(); initExpiresAtField(); +initNewAccessTokenApp(); initProjectsField(); initTokensApp(); diff --git a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js index f6f136f2402..49fdf5bb6b5 100644 --- a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js +++ b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js @@ -6,7 +6,7 @@ const twoFactorNode = document.querySelector('.js-two-factor-auth'); const skippable = twoFactorNode ? parseBoolean(twoFactorNode.dataset.twoFactorSkippable) : false; if (skippable) { - const button = `<a class="btn btn-sm btn-warning float-right" data-qa-selector="configure_it_later_button" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`; + const button = `<br/><a class="btn gl-button btn-sm btn-confirm gl-mt-3" data-qa-selector="configure_it_later_button" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`; const flashAlert = document.querySelector('.flash-alert'); if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button); } diff --git a/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue index 3b5e764b712..92ae8128285 100644 --- a/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue +++ b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue @@ -1,8 +1,8 @@ <script> import { GlAlert, GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui'; import { GlAreaChart } from '@gitlab/ui/dist/charts'; -import dateFormat from 'dateformat'; import { get } from 'lodash'; +import { formatDate } from '~/lib/utils/datetime_utility'; import axios from '~/lib/utils/axios_utils'; import { __ } from '~/locale'; @@ -38,7 +38,10 @@ export default { }, xAxis: { name: '', - type: 'category', + type: 'time', + axisLabel: { + formatter: (value) => formatDate(value, 'mmm dd'), + }, }, }, }; @@ -74,7 +77,7 @@ export default { ); }, formattedData() { - return this.sortedData.map((value) => [dateFormat(value.date, 'mmm dd'), value.coverage]); + return this.sortedData.map((value) => [value.date, value.coverage]); }, chartData() { return [ @@ -106,7 +109,7 @@ export default { this.selectedCoverageIndex = index; }, formatTooltipText(params) { - this.tooltipTitle = params.value; + this.tooltipTitle = formatDate(params.value, 'mmm dd'); this.coveragePercentage = get(params, 'seriesData[0].data[1]', ''); }, }, diff --git a/app/assets/javascripts/pages/projects/incidents/show/index.js b/app/assets/javascripts/pages/projects/incidents/show/index.js index 5a8cfcf8462..a83c4f1c0d2 100644 --- a/app/assets/javascripts/pages/projects/incidents/show/index.js +++ b/app/assets/javascripts/pages/projects/incidents/show/index.js @@ -1,7 +1,7 @@ import { initShow } from '~/issues'; -import initRelatedIssues from '~/related_issues'; import initSidebarBundle from '~/sidebar/sidebar_bundle'; +import initWorkItemLinks from '~/work_items/components/work_item_links'; initShow(); initSidebarBundle(); -initRelatedIssues(); +initWorkItemLinks(); diff --git a/app/assets/javascripts/pages/projects/issues/index/index.js b/app/assets/javascripts/pages/projects/issues/index/index.js index 44b1d5277d1..b320d8a61c2 100644 --- a/app/assets/javascripts/pages/projects/issues/index/index.js +++ b/app/assets/javascripts/pages/projects/issues/index/index.js @@ -1,34 +1,6 @@ -import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys'; import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; -import { initCsvImportExportButtons, initIssuableByEmail } from '~/issuable'; -import { initBulkUpdateSidebar, initIssueStatusSelect } from '~/issuable/bulk_update_sidebar'; import { mountIssuesListApp, mountJiraIssuesListApp } from '~/issues/list'; -import initManualOrdering from '~/issues/manual_ordering'; -import { FILTERED_SEARCH } from '~/filtered_search/constants'; -import { ISSUABLE_INDEX } from '~/issuable/constants'; -import initFilteredSearch from '~/pages/search/init_filtered_search'; -import UsersSelect from '~/users_select'; - -if (gon.features?.vueIssuesList) { - mountIssuesListApp(); -} else { - IssuableFilteredSearchTokenKeys.addExtraTokensForIssues(); - - initFilteredSearch({ - page: FILTERED_SEARCH.ISSUES, - filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys, - useDefaultState: true, - }); - - initBulkUpdateSidebar(ISSUABLE_INDEX.ISSUE); - initIssueStatusSelect(); - new UsersSelect(); // eslint-disable-line no-new - - initCsvImportExportButtons(); - initIssuableByEmail(); - initManualOrdering(); -} - -new ShortcutsNavigation(); // eslint-disable-line no-new +mountIssuesListApp(); mountJiraIssuesListApp(); +new ShortcutsNavigation(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/projects/issues/show/index.js b/app/assets/javascripts/pages/projects/issues/show/index.js index 46a34c025b6..ca2b1a08be8 100644 --- a/app/assets/javascripts/pages/projects/issues/show/index.js +++ b/app/assets/javascripts/pages/projects/issues/show/index.js @@ -2,7 +2,9 @@ import { initShow } from '~/issues'; import { store } from '~/notes/stores'; import initRelatedIssues from '~/related_issues'; import initSidebarBundle from '~/sidebar/sidebar_bundle'; +import initWorkItemLinks from '~/work_items/components/work_item_links'; initShow(); initSidebarBundle(store); initRelatedIssues(); +initWorkItemLinks(); diff --git a/app/assets/javascripts/pages/projects/merge_requests/conflicts/index.js b/app/assets/javascripts/pages/projects/merge_requests/conflicts/index.js index 545a39f4cf1..d3599ce5741 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/conflicts/index.js +++ b/app/assets/javascripts/pages/projects/merge_requests/conflicts/index.js @@ -1,5 +1,3 @@ import initMergeConflicts from '~/merge_conflicts/merge_conflicts_bundle'; -import initSidebarBundle from '~/sidebar/sidebar_bundle'; -initSidebarBundle(); initMergeConflicts(); diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js index d61209f904d..2d26d3922bf 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js +++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js @@ -4,7 +4,8 @@ import { localTimeAgo } from '~/lib/utils/datetime_utility'; import initCompareAutocomplete from './compare_autocomplete'; import initTargetProjectDropdown from './target_project_dropdown'; -const updateCommitList = (url, $loadingIndicator, $commitList, params) => { +const updateCommitList = (url, $emptyState, $loadingIndicator, $commitList, params) => { + $emptyState.hide(); $loadingIndicator.show(); $commitList.empty(); @@ -16,6 +17,10 @@ const updateCommitList = (url, $loadingIndicator, $commitList, params) => { $loadingIndicator.hide(); $commitList.html(data); localTimeAgo($commitList.get(0).querySelectorAll('.js-timeago')); + + if (!data) { + $emptyState.show(); + } }); }; @@ -26,6 +31,7 @@ export default (mrNewCompareNode) => { const updateSourceBranchCommitList = () => updateCommitList( sourceBranchUrl, + $(mrNewCompareNode).find('.js-source-commit-empty'), $(mrNewCompareNode).find('.js-source-loading'), $(mrNewCompareNode).find('.mr_source_commit'), { @@ -35,6 +41,7 @@ export default (mrNewCompareNode) => { const updateTargetBranchCommitList = () => updateCommitList( targetBranchUrl, + $(mrNewCompareNode).find('.js-target-commit-empty'), $(mrNewCompareNode).find('.js-target-loading'), $(mrNewCompareNode).find('.mr_target_commit'), { diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare_autocomplete.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare_autocomplete.js index e5f97530c02..9a38c2cc765 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare_autocomplete.js +++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare_autocomplete.js @@ -12,6 +12,7 @@ export default function initCompareAutocomplete(limitTo = null, clickHandler = ( $('.js-compare-dropdown').each(function () { const $dropdown = $(this); const selected = $dropdown.data('selected'); + const defaultText = $dropdown.data('defaultText').trim(); const $dropdownContainer = $dropdown.closest('.dropdown'); const $fieldInput = $(`input[name="${$dropdown.data('fieldName')}"]`, $dropdownContainer); const $filterInput = $('input[type="search"]', $dropdownContainer); @@ -63,7 +64,11 @@ export default function initCompareAutocomplete(limitTo = null, clickHandler = ( return $el.attr('data-ref'); }, toggleLabel(obj, $el) { - return $el.text().trim(); + if ($el.hasClass('is-active')) { + return $el.text().trim(); + } + + return defaultText; }, clicked: () => clickHandler($dropdown), }); diff --git a/app/assets/javascripts/pages/projects/settings/access_tokens/index.js b/app/assets/javascripts/pages/projects/settings/access_tokens/index.js index dc1bb88bf4b..b9f282a123c 100644 --- a/app/assets/javascripts/pages/projects/settings/access_tokens/index.js +++ b/app/assets/javascripts/pages/projects/settings/access_tokens/index.js @@ -1,3 +1,9 @@ -import { initExpiresAtField } from '~/access_tokens'; +import { + initAccessTokenTableApp, + initExpiresAtField, + initNewAccessTokenApp, +} from '~/access_tokens'; +initAccessTokenTableApp(); initExpiresAtField(); +initNewAccessTokenApp(); diff --git a/app/assets/javascripts/pages/projects/settings/branch_rules/index.js b/app/assets/javascripts/pages/projects/settings/branch_rules/index.js new file mode 100644 index 00000000000..c3d36ad5651 --- /dev/null +++ b/app/assets/javascripts/pages/projects/settings/branch_rules/index.js @@ -0,0 +1,3 @@ +import mountBranchRules from '~/projects/settings/branch_rules/mount_branch_rules'; + +mountBranchRules(document.getElementById('js-branch-rules')); diff --git a/app/assets/javascripts/pages/projects/services/edit/index.js b/app/assets/javascripts/pages/projects/settings/integrations/edit/index.js index 64df0d07d74..64df0d07d74 100644 --- a/app/assets/javascripts/pages/projects/services/edit/index.js +++ b/app/assets/javascripts/pages/projects/settings/integrations/edit/index.js diff --git a/app/assets/javascripts/pages/projects/settings/integrations/show/index.js b/app/assets/javascripts/pages/projects/settings/integrations/index/index.js index 53068f72d3f..53068f72d3f 100644 --- a/app/assets/javascripts/pages/projects/settings/integrations/show/index.js +++ b/app/assets/javascripts/pages/projects/settings/integrations/index/index.js diff --git a/app/assets/javascripts/pages/projects/settings/repository/show/index.js b/app/assets/javascripts/pages/projects/settings/repository/show/index.js index d45052d76f4..655243eee30 100644 --- a/app/assets/javascripts/pages/projects/settings/repository/show/index.js +++ b/app/assets/javascripts/pages/projects/settings/repository/show/index.js @@ -1,7 +1,10 @@ import MirrorRepos from '~/mirrors/mirror_repos'; +import mountBranchRules from '~/projects/settings/repository/branch_rules/mount_branch_rules'; import initForm from '../form'; initForm(); const mirrorReposContainer = document.querySelector('.js-mirror-settings'); if (mirrorReposContainer) new MirrorRepos(mirrorReposContainer).init(); + +mountBranchRules(document.getElementById('js-branch-rules')); diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue index 03bab0fa773..81b0dbec0bd 100644 --- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue +++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue @@ -2,6 +2,7 @@ import { GlButton, GlIcon, GlSprintf, GlLink, GlFormCheckbox, GlToggle } from '@gitlab/ui'; import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue'; import settingsMixin from 'ee_else_ce/pages/projects/shared/permissions/mixins/settings_pannel_mixin'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { __, s__ } from '~/locale'; import { visibilityOptions, @@ -16,7 +17,7 @@ import { toggleHiddenClassBySelector } from '../external'; import projectFeatureSetting from './project_feature_setting.vue'; import projectSettingRow from './project_setting_row.vue'; -const PAGE_FEATURE_ACCESS_LEVEL = s__('ProjectSettings|Everyone'); +const FEATURE_ACCESS_LEVEL_ANONYMOUS = [30, s__('ProjectSettings|Everyone')]; export default { i18n: { @@ -28,7 +29,14 @@ export default { lfsLabel: s__('ProjectSettings|Git Large File Storage (LFS)'), mergeRequestsLabel: s__('ProjectSettings|Merge requests'), operationsLabel: s__('ProjectSettings|Operations'), + packagesHelpText: s__( + 'ProjectSettings|Every project can have its own space to store its packages. Note: The Package Registry is always visible when a project is public.', + ), + packageRegistryHelpText: s__( + 'ProjectSettings|Every project can have its own space to store its packages.', + ), packagesLabel: s__('ProjectSettings|Packages'), + packageRegistryLabel: s__('ProjectSettings|Package registry'), pagesLabel: s__('ProjectSettings|Pages'), ciCdLabel: __('CI/CD'), repositoryLabel: s__('ProjectSettings|Repository'), @@ -54,7 +62,7 @@ export default { GlToggle, ConfirmDanger, }, - mixins: [settingsMixin], + mixins: [settingsMixin, glFeatureFlagsMixin()], props: { requestCveAvailable: { @@ -183,6 +191,7 @@ export default { repositoryAccessLevel: featureAccessLevel.EVERYONE, forkingAccessLevel: featureAccessLevel.EVERYONE, mergeRequestsAccessLevel: featureAccessLevel.EVERYONE, + packageRegistryAccessLevel: featureAccessLevel.EVERYONE, buildsAccessLevel: featureAccessLevel.EVERYONE, wikiAccessLevel: featureAccessLevel.EVERYONE, snippetsAccessLevel: featureAccessLevel.EVERYONE, @@ -196,6 +205,7 @@ export default { warnAboutPotentiallyUnwantedCharacters: true, lfsEnabled: true, requestAccessEnabled: true, + enforceAuthChecksOnUploads: true, highlightChangesClass: false, emailsDisabled: false, cveIdRequestEnabled: true, @@ -229,6 +239,18 @@ export default { ); }, + packageRegistryFeatureAccessLevelOptions() { + const options = [FEATURE_ACCESS_LEVEL_ANONYMOUS]; + + if (this.visibilityLevel === visibilityOptions.PRIVATE) { + options.unshift(featureAccessLevelMembers); + } else if (this.visibilityLevel === visibilityOptions.INTERNAL) { + options.unshift(featureAccessLevelEveryone); + } + + return options; + }, + pagesFeatureAccessLevelOptions() { const options = [featureAccessLevelMembers]; @@ -242,7 +264,7 @@ export default { } if (this.visibilityLevel !== visibilityOptions.PUBLIC) { - options.push([30, PAGE_FEATURE_ACCESS_LEVEL]); + options.push(FEATURE_ACCESS_LEVEL_ANONYMOUS); } } return options; @@ -285,6 +307,16 @@ export default { this.visibilityLevel < this.currentSettings.visibilityLevel ); }, + packageRegistryAccessLevelEnabled() { + return this.glFeatures.packageRegistryAccessLevel; + }, + showAdditonalSettings() { + if (this.glFeatures.enforceAuthChecksOnUploads) { + return true; + } + + return this.visibilityLevel !== this.visibilityOptions.PRIVATE; + }, }, watch: { @@ -307,6 +339,15 @@ export default { featureAccessLevel.PROJECT_MEMBERS, this.buildsAccessLevel, ); + if (this.packageRegistryAccessLevelEnabled) { + if ( + this.packageRegistryAccessLevel === featureAccessLevel.EVERYONE || + (this.packageRegistryAccessLevel > featureAccessLevel.EVERYONE && + oldValue === visibilityOptions.PUBLIC) + ) { + this.packageRegistryAccessLevel = featureAccessLevel.PROJECT_MEMBERS; + } + } this.wikiAccessLevel = Math.min(featureAccessLevel.PROJECT_MEMBERS, this.wikiAccessLevel); this.snippetsAccessLevel = Math.min( featureAccessLevel.PROJECT_MEMBERS, @@ -349,6 +390,14 @@ export default { this.repositoryAccessLevel = featureAccessLevel.EVERYONE; if (this.mergeRequestsAccessLevel > featureAccessLevel.NOT_ENABLED) this.mergeRequestsAccessLevel = featureAccessLevel.EVERYONE; + if ( + this.packageRegistryAccessLevelEnabled && + this.packageRegistryAccessLevel === featureAccessLevel.PROJECT_MEMBERS + ) { + this.packageRegistryAccessLevel = Math.min( + ...this.packageRegistryFeatureAccessLevelOptions.map((option) => option[0]), + ); + } if (this.buildsAccessLevel > featureAccessLevel.NOT_ENABLED) this.buildsAccessLevel = featureAccessLevel.EVERYONE; if (this.wikiAccessLevel > featureAccessLevel.NOT_ENABLED) @@ -369,6 +418,19 @@ export default { this.containerRegistryAccessLevel = featureAccessLevel.EVERYONE; this.highlightChanges(); + } else if (this.packageRegistryAccessLevelEnabled) { + if ( + value === visibilityOptions.PUBLIC && + this.packageRegistryAccessLevel === featureAccessLevel.EVERYONE + ) { + // eslint-disable-next-line prefer-destructuring + this.packageRegistryAccessLevel = FEATURE_ACCESS_LEVEL_ANONYMOUS[0]; + } else if ( + value === visibilityOptions.INTERNAL && + this.packageRegistryAccessLevel === FEATURE_ACCESS_LEVEL_ANONYMOUS[0] + ) { + this.packageRegistryAccessLevel = featureAccessLevel.EVERYONE; + } } }, @@ -465,15 +527,38 @@ export default { ) }}</span> <span class="form-text text-muted">{{ visibilityLevelDescription }}</span> - <label v-if="visibilityLevel !== visibilityOptions.PRIVATE" class="gl-line-height-28"> - <input - :value="requestAccessEnabled" - type="hidden" - name="project[request_access_enabled]" - /> - <input v-model="requestAccessEnabled" type="checkbox" /> - {{ s__('ProjectSettings|Users can request access') }} - </label> + <div v-if="showAdditonalSettings" class="gl-mt-4"> + <strong class="gl-display-block">{{ s__('ProjectSettings|Additional options') }}</strong> + <label + v-if="visibilityLevel !== visibilityOptions.PRIVATE" + class="gl-line-height-28 gl-font-weight-normal gl-mb-0" + > + <input + :value="requestAccessEnabled" + type="hidden" + name="project[request_access_enabled]" + /> + <input v-model="requestAccessEnabled" type="checkbox" /> + {{ s__('ProjectSettings|Users can request access') }} + </label> + <label + v-if=" + visibilityLevel !== visibilityOptions.PUBLIC && glFeatures.enforceAuthChecksOnUploads + " + class="gl-line-height-28 gl-font-weight-normal gl-display-block gl-mb-0" + > + <input + :value="enforceAuthChecksOnUploads" + type="hidden" + name="project[project_setting_attributes][enforce_auth_checks_on_uploads]" + /> + <input v-model="enforceAuthChecksOnUploads" type="checkbox" /> + {{ s__('ProjectSettings|Require authentication to view media files') }} + <span class="gl-text-gray-500 gl-display-block gl-ml-5 gl-mt-n3">{{ + s__('ProjectSettings|Prevents direct linking to potentially sensitive media files') + }}</span> + </label> + </div> </project-setting-row> </div> <div @@ -587,15 +672,11 @@ export default { </p> </project-setting-row> <project-setting-row - v-if="packagesAvailable" + v-if="packagesAvailable && !packageRegistryAccessLevelEnabled" ref="package-settings" :help-path="packagesHelpPath" :label="$options.i18n.packagesLabel" - :help-text=" - s__( - 'ProjectSettings|Every project can have its own space to store its packages. Note: The Package Registry is always visible when a project is public.', - ) - " + :help-text="$options.i18n.packagesHelpText" > <gl-toggle v-model="packagesEnabled" @@ -710,6 +791,20 @@ export default { /> </project-setting-row> <project-setting-row + v-if="packageRegistryAccessLevelEnabled && packagesAvailable" + :help-path="packagesHelpPath" + :label="$options.i18n.packageRegistryLabel" + :help-text="$options.i18n.packageRegistryHelpText" + data-testid="package-registry-access-level" + > + <project-feature-setting + v-model="packageRegistryAccessLevel" + :label="$options.i18n.packageRegistryLabel" + :options="packageRegistryFeatureAccessLevelOptions" + name="project[project_feature_attributes][package_registry_access_level]" + /> + </project-setting-row> + <project-setting-row v-if="pagesAvailable && pagesAccessControlEnabled" ref="pages-settings" :help-path="pagesHelpPath" diff --git a/app/assets/javascripts/pages/projects/shared/save_project_loader.js b/app/assets/javascripts/pages/projects/shared/save_project_loader.js index aa3589ac88d..7fd9e24549f 100644 --- a/app/assets/javascripts/pages/projects/shared/save_project_loader.js +++ b/app/assets/javascripts/pages/projects/shared/save_project_loader.js @@ -1,12 +1,14 @@ -import $ from 'jquery'; - export default function initProjectLoadingSpinner() { - const $formContainer = $('.project-edit-container'); - const $loadingSpinner = $('.save-project-loader'); + const formContainer = document.querySelector('.project-edit-container'); + if (formContainer == null) { + return; + } + + const loadingSpinner = document.querySelector('.save-project-loader'); // show loading spinner when saving - $formContainer.on('ajax:before', () => { - $formContainer.hide(); - $loadingSpinner.show(); + formContainer.addEventListener('ajax:before', () => { + formContainer.style.display = 'none'; + loadingSpinner.style.display = 'block'; }); } diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js index e2b1a702560..eff39a744ad 100644 --- a/app/assets/javascripts/pages/projects/show/index.js +++ b/app/assets/javascripts/pages/projects/show/index.js @@ -2,6 +2,7 @@ import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; import initInviteMembersModal from '~/invite_members/init_invite_members_modal'; import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger'; +import initClustersDeprecationAlert from '~/projects/clusters_deprecation_alert'; import leaveByUrl from '~/namespaces/leave_by_url'; import initVueNotificationsDropdown from '~/notifications'; import Star from '~/projects/star'; @@ -50,6 +51,7 @@ new ShortcutsNavigation(); // eslint-disable-line no-new initUploadFileTrigger(); initInviteMembersModal(); initInviteMembersTrigger(); +initClustersDeprecationAlert(); initReadMore(); new Star(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/projects/static_site_editor/show/index.js b/app/assets/javascripts/pages/projects/static_site_editor/show/index.js deleted file mode 100644 index d9d265e4e4a..00000000000 --- a/app/assets/javascripts/pages/projects/static_site_editor/show/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import initStaticSiteEditor from '~/static_site_editor'; - -initStaticSiteEditor(document.querySelector('#static-site-editor')); diff --git a/app/assets/javascripts/pages/projects/tags/index/index.js b/app/assets/javascripts/pages/projects/tags/index/index.js index 9e48dd9e463..e62bdc7a8c0 100644 --- a/app/assets/javascripts/pages/projects/tags/index/index.js +++ b/app/assets/javascripts/pages/projects/tags/index/index.js @@ -1,9 +1,5 @@ import TagSortDropdown from '~/tags'; -import { initRemoveTag } from '../remove_tag'; +import initDeleteTagModal from '~/tags/init_delete_tag_modal'; -initRemoveTag({ - onDelete: (path) => { - document.querySelector(`[data-path="${path}"]`).closest('.js-tag-list').remove(); - }, -}); +initDeleteTagModal(); TagSortDropdown(); diff --git a/app/assets/javascripts/pages/projects/tags/remove_tag.js b/app/assets/javascripts/pages/projects/tags/remove_tag.js deleted file mode 100644 index 7b95560df7b..00000000000 --- a/app/assets/javascripts/pages/projects/tags/remove_tag.js +++ /dev/null @@ -1,16 +0,0 @@ -import initConfirmModal from '~/confirm_modal'; -import createFlash from '~/flash'; -import axios from '~/lib/utils/axios_utils'; - -export const initRemoveTag = ({ onDelete = () => {} }) => { - return initConfirmModal({ - handleSubmit: (path = '') => - axios - .delete(path) - .then(() => onDelete(path)) - .catch(({ response: { data } }) => { - const { message } = data; - createFlash({ message }); - }), - }); -}; diff --git a/app/assets/javascripts/pages/projects/tags/show/index.js b/app/assets/javascripts/pages/projects/tags/show/index.js index 6f5406f554f..0967540f42c 100644 --- a/app/assets/javascripts/pages/projects/tags/show/index.js +++ b/app/assets/javascripts/pages/projects/tags/show/index.js @@ -1,8 +1,3 @@ -import { redirectTo, getBaseURL, stripFinalUrlSegment } from '~/lib/utils/url_utility'; -import { initRemoveTag } from '../remove_tag'; +import initDeleteTagModal from '~/tags/init_delete_tag_modal'; -initRemoveTag({ - onDelete: (path = '') => { - redirectTo(stripFinalUrlSegment([getBaseURL(), path].join(''))); - }, -}); +initDeleteTagModal(); diff --git a/app/assets/javascripts/pages/shared/nav/sidebar_tracking.js b/app/assets/javascripts/pages/shared/nav/sidebar_tracking.js index 79ce1a37d21..47aae36ecbb 100644 --- a/app/assets/javascripts/pages/shared/nav/sidebar_tracking.js +++ b/app/assets/javascripts/pages/shared/nav/sidebar_tracking.js @@ -1,6 +1,6 @@ function onSidebarLinkClick() { const setDataTrackAction = (element, action) => { - element.setAttribute('data-track-action', action); + element.dataset.trackAction = action; }; const setDataTrackExtra = (element, value) => { @@ -12,10 +12,10 @@ function onSidebarLinkClick() { ? SIDEBAR_COLLAPSED : SIDEBAR_EXPANDED; - element.setAttribute( - 'data-track-extra', - JSON.stringify({ sidebar_display: sidebarCollapsed, menu_display: value }), - ); + element.dataset.trackExtra = JSON.stringify({ + sidebar_display: sidebarCollapsed, + menu_display: value, + }); }; const EXPANDED = 'Expanded'; diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js index 996e12bc105..94506d33b33 100644 --- a/app/assets/javascripts/pages/users/activity_calendar.js +++ b/app/assets/javascripts/pages/users/activity_calendar.js @@ -298,7 +298,7 @@ export default class ActivityCalendar { .querySelector(this.activitiesContainer) .querySelectorAll('.js-localtime') .forEach((el) => { - el.setAttribute('title', formatDate(el.getAttribute('data-datetime'))); + el.setAttribute('title', formatDate(el.dataset.datetime)); }); }) .catch(() => diff --git a/app/assets/javascripts/performance_bar/components/add_request.vue b/app/assets/javascripts/performance_bar/components/add_request.vue index d48a5acb85c..9ac6b0e6403 100644 --- a/app/assets/javascripts/performance_bar/components/add_request.vue +++ b/app/assets/javascripts/performance_bar/components/add_request.vue @@ -1,7 +1,12 @@ -import { __ } from '~/locale'; - <script> +import { GlForm, GlFormInput, GlButton } from '@gitlab/ui'; + export default { + components: { + GlForm, + GlButton, + GlFormInput, + }, data() { return { inputEnabled: false, @@ -24,25 +29,26 @@ export default { }; </script> <template> - <div id="peek-view-add-request" class="view"> - <form class="form-inline" @submit.prevent> - <button - class="btn-blank btn-link bold gl-text-blue-300" - type="button" - :title="__(`Add request manually`)" + <div id="peek-view-add-request" class="view gl-display-flex"> + <gl-form class="gl-display-flex gl-align-items-center" @submit.prevent> + <gl-button + class="gl-text-blue-300! gl-mr-2" + category="tertiary" + variant="link" + icon="plus" + size="small" + :title="__('Add request manually')" @click="toggleInput" - > - + - </button> - <input + /> + <gl-form-input v-if="inputEnabled" v-model="urlOrRequestId" type="text" :placeholder="__(`URL or request ID`)" - class="form-control form-control-sm d-inline-block ml-1" + class="gl-ml-2" @keyup.enter="addRequest" @keyup.esc="clearForm" /> - </form> + </gl-form> </div> </template> diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue index 0f744e858f2..1da4a8fea73 100644 --- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue +++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue @@ -121,7 +121,7 @@ export default { return window.URL.createObjectURL(blob); }, downloadName() { - const fileName = this.requests[0].truncatedUrl; + const fileName = this.requests[0].displayName; return `${fileName}_perf_bar_${Date.now()}.json`; }, memoryReportPath() { @@ -150,7 +150,7 @@ export default { <div id="js-peek" :class="env"> <div v-if="currentRequest" - class="d-flex container-fluid container-limited justify-content-center" + class="d-flex container-fluid container-limited justify-content-center gl-align-items-center" data-qa-selector="performance_bar" > <div id="peek-view-host" class="view"> diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue index ffc22c2113d..f2177e102ec 100644 --- a/app/assets/javascripts/performance_bar/components/request_selector.vue +++ b/app/assets/javascripts/performance_bar/components/request_selector.vue @@ -31,7 +31,7 @@ export default { :value="request.id" data-qa-selector="request_dropdown_option" > - {{ request.truncatedUrl }} + {{ request.displayName }} </option> </select> </div> diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js index e7f84eacdca..84fe14fe056 100644 --- a/app/assets/javascripts/performance_bar/index.js +++ b/app/assets/javascripts/performance_bar/index.js @@ -56,12 +56,12 @@ const initPerformanceBar = (el) => { this.addRequest(urlOrRequestId, urlOrRequestId); } }, - addRequest(requestId, requestUrl) { + addRequest(requestId, requestUrl, operationName) { if (!this.store.canTrackRequest(requestUrl)) { return; } - this.store.addRequest(requestId, requestUrl); + this.store.addRequest(requestId, requestUrl, operationName); }, loadRequestDetails(requestId) { const request = this.store.findRequest(requestId); diff --git a/app/assets/javascripts/performance_bar/performance_bar_log.js b/app/assets/javascripts/performance_bar/performance_bar_log.js index aad99e2604e..62ca568adc5 100644 --- a/app/assets/javascripts/performance_bar/performance_bar_log.js +++ b/app/assets/javascripts/performance_bar/performance_bar_log.js @@ -10,7 +10,7 @@ const initVitalsLog = () => { console.log( `${String.fromCodePoint( 0x1f4d1, - )} To get the final web vital numbers reported you maybe need to switch away and back to the tab`, + )} To get the final web vital numbers report you may need to switch away and back to the tab`, ); getCLS(reportVital); getFID(reportVital); diff --git a/app/assets/javascripts/performance_bar/services/performance_bar_service.js b/app/assets/javascripts/performance_bar/services/performance_bar_service.js index 4c0293f5b78..e67143f3ede 100644 --- a/app/assets/javascripts/performance_bar/services/performance_bar_service.js +++ b/app/assets/javascripts/performance_bar/services/performance_bar_service.js @@ -10,13 +10,15 @@ export default class PerformanceBarService { static registerInterceptor(peekUrl, callback) { PerformanceBarService.interceptor = (response) => { - const [fireCallback, requestId, requestUrl] = PerformanceBarService.callbackParams( - response, - peekUrl, - ); + const [ + fireCallback, + requestId, + requestUrl, + operationName, + ] = PerformanceBarService.callbackParams(response, peekUrl); if (fireCallback) { - callback(requestId, requestUrl); + callback(requestId, requestUrl, operationName); } return response; @@ -36,7 +38,8 @@ export default class PerformanceBarService { const cachedResponse = response.headers && parseBoolean(response.headers['x-gitlab-from-cache']); const fireCallback = requestUrl !== peekUrl && Boolean(requestId) && !cachedResponse; + const operationName = response.config?.operationName; - return [fireCallback, requestId, requestUrl]; + return [fireCallback, requestId, requestUrl, operationName]; } } diff --git a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js index 5a69960e4d9..2011604534c 100644 --- a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js +++ b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js @@ -3,15 +3,19 @@ export default class PerformanceBarStore { this.requests = []; } - addRequest(requestId, requestUrl) { + addRequest(requestId, requestUrl, operationName) { if (!this.findRequest(requestId)) { - const shortUrl = PerformanceBarStore.truncateUrl(requestUrl); + let displayName = PerformanceBarStore.truncateUrl(requestUrl); + + if (operationName) { + displayName += ` (${operationName})`; + } this.requests.push({ id: requestId, url: requestUrl, - truncatedUrl: shortUrl, details: {}, + displayName, }); } diff --git a/app/assets/javascripts/persistent_user_callouts.js b/app/assets/javascripts/persistent_user_callouts.js index 100ffc0664b..f836921f5e5 100644 --- a/app/assets/javascripts/persistent_user_callouts.js +++ b/app/assets/javascripts/persistent_user_callouts.js @@ -10,10 +10,12 @@ const PERSISTENT_USER_CALLOUTS = [ '.js-new-user-signups-cap-reached', '.js-eoa-bronze-plan-banner', '.js-security-newsletter-callout', - '.js-approaching-seats-count-threshold', + '.js-approaching-seat-count-threshold', '.js-storage-enforcement-banner', '.js-user-over-limit-free-plan-alert', '.js-minute-limit-banner', + '.js-submit-license-usage-data-banner', + '.js-project-usage-limitations-callout', ]; const initCallouts = () => { diff --git a/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue b/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue index d9da238358f..4775836fcc6 100644 --- a/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue +++ b/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue @@ -146,12 +146,10 @@ export default { </gl-sprintf> </gl-form-checkbox> </gl-form-group> - <div - class="gl-display-flex gl-justify-content-space-between gl-p-5 gl-bg-gray-10 gl-border-t-gray-100 gl-border-t-solid gl-border-t-1" - > + <div class="gl-display-flex gl-py-5 gl-border-t-gray-100 gl-border-t-solid gl-border-t-1"> <gl-button type="submit" - class="js-no-auto-disable" + class="js-no-auto-disable gl-mr-3" category="primary" variant="confirm" data-qa-selector="commit_changes_button" diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue b/app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue index 897bd2dcccf..1f74e89f90c 100644 --- a/app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue +++ b/app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue @@ -1,6 +1,8 @@ <script> import { GlLink, GlSprintf } from '@gitlab/ui'; import { s__ } from '~/locale'; +import Tracking from '~/tracking'; +import { pipelineEditorTrackingOptions } from '../../../constants'; export default { i18n: { @@ -25,7 +27,14 @@ export default { GlLink, GlSprintf, }, + mixins: [Tracking.mixin()], inject: ['runnerHelpPagePath'], + methods: { + trackHelpPageClick() { + const { label, actions } = pipelineEditorTrackingOptions; + this.track(actions.helpDrawerLinks.runners, { label }); + }, + }, }; </script> <template> @@ -38,7 +47,7 @@ export default { <p class="gl-mb-0"> <gl-sprintf :message="$options.i18n.note"> <template #link="{ content }"> - <gl-link :href="runnerHelpPagePath" target="_blank"> + <gl-link :href="runnerHelpPagePath" target="_blank" @click="trackHelpPageClick()"> {{ content }} </gl-link> </template> diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue b/app/assets/javascripts/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue index 04140434af2..bc9203b9c5b 100644 --- a/app/assets/javascripts/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue +++ b/app/assets/javascripts/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue @@ -1,8 +1,20 @@ <script> import { GlLink, GlSprintf } from '@gitlab/ui'; import { s__ } from '~/locale'; +import Tracking from '~/tracking'; +import { + CI_EXAMPLES_LINK, + CI_HELP_LINK, + CI_NEEDS_LINK, + CI_YAML_LINK, + pipelineEditorTrackingOptions, +} from '../../../constants'; export default { + CI_EXAMPLES_LINK, + CI_HELP_LINK, + CI_NEEDS_LINK, + CI_YAML_LINK, i18n: { title: s__('PipelineEditorTutorial|⚙️ Pipeline configuration reference'), firstParagraph: s__('PipelineEditorTutorial|Resources to help with your CI/CD configuration:'), @@ -23,7 +35,14 @@ export default { GlLink, GlSprintf, }, + mixins: [Tracking.mixin()], inject: ['ciExamplesHelpPagePath', 'ciHelpPagePath', 'needsHelpPagePath', 'ymlHelpPagePath'], + methods: { + trackHelpPageClick(key) { + const { label, actions } = pipelineEditorTrackingOptions; + this.track(actions.helpDrawerLinks[key], { label }); + }, + }, }; </script> <template> @@ -34,7 +53,11 @@ export default { <li> <gl-sprintf :message="$options.i18n.browseExamples"> <template #link="{ content }"> - <gl-link :href="ciExamplesHelpPagePath" target="_blank"> + <gl-link + :href="ciExamplesHelpPagePath" + target="_blank" + @click="trackHelpPageClick($options.CI_EXAMPLES_LINK)" + > {{ content }} </gl-link> </template> @@ -43,7 +66,11 @@ export default { <li> <gl-sprintf :message="$options.i18n.viewSyntaxRef"> <template #link="{ content }"> - <gl-link :href="ymlHelpPagePath" target="_blank"> + <gl-link + :href="ymlHelpPagePath" + target="_blank" + @click="trackHelpPageClick($options.CI_YAML_LINK)" + > {{ content }} </gl-link> </template> @@ -52,7 +79,11 @@ export default { <li> <gl-sprintf :message="$options.i18n.learnMore"> <template #link="{ content }"> - <gl-link :href="ciHelpPagePath" target="_blank"> + <gl-link + :href="ciHelpPagePath" + target="_blank" + @click="trackHelpPageClick($options.CI_HELP_LINK)" + > {{ content }} </gl-link> </template> @@ -61,7 +92,11 @@ export default { <li> <gl-sprintf :message="$options.i18n.needs"> <template #link="{ content }"> - <gl-link :href="needsHelpPagePath" target="_blank"> + <gl-link + :href="needsHelpPagePath" + target="_blank" + @click="trackHelpPageClick($options.CI_NEEDS_LINK)" + > {{ content }} </gl-link> </template> diff --git a/app/assets/javascripts/pipeline_editor/components/editor/ci_editor_header.vue b/app/assets/javascripts/pipeline_editor/components/editor/ci_editor_header.vue index 9765d669fc1..65a2a6b56e4 100644 --- a/app/assets/javascripts/pipeline_editor/components/editor/ci_editor_header.vue +++ b/app/assets/javascripts/pipeline_editor/components/editor/ci_editor_header.vue @@ -22,12 +22,21 @@ export default { }, methods: { toggleDrawer() { - this.$emit(this.showDrawer ? 'close-drawer' : 'open-drawer'); + if (this.showDrawer) { + this.$emit('close-drawer'); + } else { + this.$emit('open-drawer'); + this.trackHelpDrawerClick(); + } + }, + trackHelpDrawerClick() { + const { label, actions } = pipelineEditorTrackingOptions; + this.track(actions.openHelpDrawer, { label }); }, trackTemplateBrowsing() { const { label, actions } = pipelineEditorTrackingOptions; - this.track(actions.browse_templates, { label }); + this.track(actions.browseTemplates, { label }); }, }, }; diff --git a/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue b/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue index ead2076ec3b..4398ba67d47 100644 --- a/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue +++ b/app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue @@ -246,7 +246,7 @@ export default { </template> <template #default> <gl-dropdown-item v-if="isBranchesLoading" key="loading"> - <gl-loading-icon size="md" /> + <gl-loading-icon size="lg" /> </gl-dropdown-item> </template> </gl-infinite-scroll> diff --git a/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue b/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue index 58df98d0fb7..8e95fad1e48 100644 --- a/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue +++ b/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue @@ -1,7 +1,6 @@ <script> import { GlButton } from '@gitlab/ui'; import getAppStatus from '~/pipeline_editor/graphql/queries/client/app_status.query.graphql'; -import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { EDITOR_APP_STATUS_EMPTY, EDITOR_APP_STATUS_LOADING } from '../../constants'; import FileTreePopover from '../popovers/file_tree_popover.vue'; import BranchSwitcher from './branch_switcher.vue'; @@ -12,7 +11,6 @@ export default { FileTreePopover, GlButton, }, - mixins: [glFeatureFlagMixin()], props: { hasUnsavedChanges: { type: Boolean, @@ -43,11 +41,7 @@ export default { return this.appStatus === EDITOR_APP_STATUS_LOADING; }, showFileTreeToggle() { - return ( - this.glFeatures.pipelineEditorFileTree && - !this.isNewCiConfigFile && - this.appStatus !== EDITOR_APP_STATUS_EMPTY - ); + return !this.isNewCiConfigFile && this.appStatus !== EDITOR_APP_STATUS_EMPTY; }, }, methods: { diff --git a/app/assets/javascripts/pipeline_editor/components/lint/ci_lint_results.vue b/app/assets/javascripts/pipeline_editor/components/lint/ci_lint_results.vue index 13e254f138a..9a789ccab4d 100644 --- a/app/assets/javascripts/pipeline_editor/components/lint/ci_lint_results.vue +++ b/app/assets/javascripts/pipeline_editor/components/lint/ci_lint_results.vue @@ -17,7 +17,7 @@ export default { text: __('Syntax is incorrect.'), }, includesText: __( - 'CI configuration validated, including all configuration added with the %{codeStart}includes%{codeEnd} keyword. %{link}', + 'CI configuration validated, including all configuration added with the %{codeStart}include%{codeEnd} keyword. %{link}', ), warningTitle: __('The form contains the following warning:'), fields: [ diff --git a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue index da31fc62d09..08d246a9a00 100644 --- a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue +++ b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue @@ -15,13 +15,15 @@ import { MERGED_TAB, TAB_QUERY_PARAM, TABS_INDEX, + VALIDATE_TAB, VISUALIZE_TAB, } from '../constants'; import getAppStatus from '../graphql/queries/client/app_status.query.graphql'; import CiConfigMergedPreview from './editor/ci_config_merged_preview.vue'; import CiEditorHeader from './editor/ci_editor_header.vue'; -import TextEditor from './editor/text_editor.vue'; import CiLint from './lint/ci_lint.vue'; +import CiValidate from './validate/ci_validate.vue'; +import TextEditor from './editor/text_editor.vue'; import EditorTab from './ui/editor_tab.vue'; import WalkthroughPopover from './popovers/walkthrough_popover.vue'; @@ -31,6 +33,7 @@ export default { tabGraph: s__('Pipelines|Visualize'), tabLint: s__('Pipelines|Lint'), tabMergedYaml: s__('Pipelines|View merged YAML'), + tabValidate: s__('Pipelines|Validate'), empty: { visualization: s__( 'PipelineEditor|The pipeline visualization is displayed when the CI/CD configuration file has valid syntax.', @@ -53,12 +56,14 @@ export default { CREATE_TAB, LINT_TAB, MERGED_TAB, + VALIDATE_TAB, VISUALIZE_TAB, }, components: { CiConfigMergedPreview, CiEditorHeader, CiLint, + CiValidate, EditorTab, GlAlert, GlLoadingIcon, @@ -121,9 +126,10 @@ export default { }, created() { const [tabQueryParam] = getParameterValues(TAB_QUERY_PARAM); + const tabName = Object.keys(TABS_INDEX)[tabQueryParam]; - if (tabQueryParam && TABS_INDEX[tabQueryParam]) { - this.setDefaultTab(tabQueryParam); + if (tabName) { + this.setDefaultTab(tabName); } }, methods: { @@ -180,6 +186,17 @@ export default { <pipeline-graph v-else :pipeline-data="ciConfigData" /> </editor-tab> <editor-tab + v-if="glFeatures.simulatePipeline" + class="gl-mb-3" + data-testid="validate-tab" + :title="$options.i18n.tabValidate" + @click="setCurrentTab($options.tabConstants.VALIDATE_TAB)" + > + <gl-loading-icon v-if="isLoading" size="lg" class="gl-m-3" /> + <ci-validate v-else /> + </editor-tab> + <editor-tab + v-else class="gl-mb-3" :empty-message="$options.i18n.empty.lint" :is-empty="isEmpty" diff --git a/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue b/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue index 6270429535d..efa6a54c638 100644 --- a/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue +++ b/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue @@ -26,11 +26,8 @@ export default { this.showPopover = localStorage.getItem(FILE_TREE_POPOVER_DISMISSED_KEY) !== 'true'; }, methods: { - closePopover() { - this.showPopover = false; - }, dismissPermanently() { - this.closePopover(); + this.showPopover = false; localStorage.setItem(FILE_TREE_POPOVER_DISMISSED_KEY, 'true'); }, }, @@ -48,7 +45,7 @@ export default { data-qa-selector="file_tree_popover" @close-button-clicked="dismissPermanently" > - <div v-outside="closePopover" class="gl-font-base gl-mb-3"> + <div v-outside="dismissPermanently" class="gl-font-base gl-mb-3"> <gl-sprintf :message="$options.i18n.description"> <template #link="{ content }"> <gl-link :href="includesHelpPagePath" target="_blank">{{ content }}</gl-link> diff --git a/app/assets/javascripts/pipeline_editor/components/validate/ci_validate.vue b/app/assets/javascripts/pipeline_editor/components/validate/ci_validate.vue new file mode 100644 index 00000000000..5f26318497b --- /dev/null +++ b/app/assets/javascripts/pipeline_editor/components/validate/ci_validate.vue @@ -0,0 +1,65 @@ +<script> +import { GlButton, GlDropdown, GlTooltipDirective, GlSprintf } from '@gitlab/ui'; +import { s__, __ } from '~/locale'; + +export const i18n = { + help: __('Help'), + pipelineSource: s__('PipelineEditor|Pipeline Source'), + pipelineSourceDefault: s__('PipelineEditor|Git push event to the default branch'), + pipelineSourceTooltip: s__('PipelineEditor|Other pipeline sources are not available yet.'), + title: s__('PipelineEditor|Validate pipeline under selected conditions'), + contentNote: s__( + 'PipelineEditor|Current content in the Edit tab will be used for the simulation.', + ), + simulationNote: s__( + 'PipelineEditor|Pipeline behavior will be simulated including the %{codeStart}rules%{codeEnd} %{codeStart}only%{codeEnd} %{codeStart}except%{codeEnd} and %{codeStart}needs%{codeEnd} job dependencies.', + ), + cta: s__('PipelineEditor|Validate pipeline'), +}; + +export default { + name: 'CiValidateTab', + components: { + GlButton, + GlDropdown, + GlSprintf, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + inject: ['validateTabIllustrationPath'], + i18n, +}; +</script> + +<template> + <div> + <div class="gl-mt-3"> + <label>{{ $options.i18n.pipelineSource }}</label> + <gl-dropdown + v-gl-tooltip.hover + :title="$options.i18n.pipelineSourceTooltip" + :text="$options.i18n.pipelineSourceDefault" + disabled + data-testid="pipeline-source" + /> + </div> + <div class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-mt-11"> + <img :src="validateTabIllustrationPath" /> + <h1 class="gl-font-size-h1 gl-mb-6">{{ $options.i18n.title }}</h1> + <ul> + <li class="gl-mb-3">{{ $options.i18n.contentNote }}</li> + <li class="gl-mb-3"> + <gl-sprintf :message="$options.i18n.simulationNote"> + <template #code="{ content }"> + <code>{{ content }}</code> + </template> + </gl-sprintf> + </li> + </ul> + <gl-button variant="confirm" class="gl-mt-3" data-qa-selector="simulate_pipeline"> + {{ $options.i18n.cta }} + </gl-button> + </div> + </div> +</template> diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js index ff7c742f588..8f688e6ba76 100644 --- a/app/assets/javascripts/pipeline_editor/constants.js +++ b/app/assets/javascripts/pipeline_editor/constants.js @@ -32,13 +32,15 @@ export const PIPELINE_FAILURE = 'PIPELINE_FAILURE'; export const CREATE_TAB = 'CREATE_TAB'; export const LINT_TAB = 'LINT_TAB'; export const MERGED_TAB = 'MERGED_TAB'; +export const VALIDATE_TAB = 'VALIDATE_TAB'; export const VISUALIZE_TAB = 'VISUALIZE_TAB'; export const TABS_INDEX = { [CREATE_TAB]: '0', [VISUALIZE_TAB]: '1', [LINT_TAB]: '2', - [MERGED_TAB]: '3', + [VALIDATE_TAB]: '3', + [MERGED_TAB]: '4', }; export const TAB_QUERY_PARAM = 'tab'; @@ -55,10 +57,25 @@ export const FILE_TREE_TIP_DISMISSED_KEY = 'pipeline_editor_file_tree_tip_dismis export const STARTER_TEMPLATE_NAME = 'Getting-Started'; +export const CI_EXAMPLES_LINK = 'CI_EXAMPLES_LINK'; +export const CI_HELP_LINK = 'CI_HELP_LINK'; +export const CI_NEEDS_LINK = 'CI_NEEDS_LINK'; +export const CI_RUNNERS_LINK = 'CI_RUNNERS_LINK'; +export const CI_YAML_LINK = 'CI_YAML_LINK'; + export const pipelineEditorTrackingOptions = { label: 'pipeline_editor', actions: { - browse_templates: 'browse_templates', + browseTemplates: 'browse_templates', + closeHelpDrawer: 'close_help_drawer', + helpDrawerLinks: { + [CI_EXAMPLES_LINK]: 'visit_help_drawer_link_ci_examples', + [CI_HELP_LINK]: 'visit_help_drawer_link_ci_help', + [CI_NEEDS_LINK]: 'visit_help_drawer_link_needs', + [CI_RUNNERS_LINK]: 'visit_help_drawer_link_runners', + [CI_YAML_LINK]: 'visit_help_drawer_link_yaml', + }, + openHelpDrawer: 'open_help_drawer', }, }; diff --git a/app/assets/javascripts/pipeline_editor/index.js b/app/assets/javascripts/pipeline_editor/index.js index e13d9cf9df0..4caa253b85e 100644 --- a/app/assets/javascripts/pipeline_editor/index.js +++ b/app/assets/javascripts/pipeline_editor/index.js @@ -41,6 +41,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { projectNamespace, runnerHelpPagePath, totalBranches, + validateTabIllustrationPath, ymlHelpPagePath, } = el.dataset; @@ -130,6 +131,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { projectNamespace, runnerHelpPagePath, totalBranches: parseInt(totalBranches, 10), + validateTabIllustrationPath, ymlHelpPagePath, }, render(h) { diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue index 59022a91322..f26cdd8b017 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue @@ -1,7 +1,6 @@ <script> import { GlModal } from '@gitlab/ui'; import { __ } from '~/locale'; -import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import CommitSection from './components/commit/commit_section.vue'; import PipelineEditorDrawer from './components/drawer/pipeline_editor_drawer.vue'; import PipelineEditorFileNav from './components/file_nav/pipeline_editor_file_nav.vue'; @@ -34,7 +33,6 @@ export default { PipelineEditorHeader, PipelineEditorTabs, }, - mixins: [glFeatureFlagMixin()], props: { ciConfigData: { type: Object, @@ -76,9 +74,6 @@ export default { includesFiles() { return this.ciConfigData?.includes || []; }, - isFileTreeVisible() { - return this.showFileTree && this.glFeatures.pipelineEditorFileTree; - }, }, mounted() { this.showFileTree = JSON.parse(localStorage.getItem(FILE_TREE_DISPLAY_KEY)) || false; @@ -140,7 +135,7 @@ export default { /> <div class="gl-display-flex gl-w-full gl-sm-flex-direction-column"> <pipeline-editor-file-tree - v-if="isFileTreeVisible" + v-if="showFileTree" class="gl-flex-shrink-0" :includes="includesFiles" /> diff --git a/app/assets/javascripts/pipeline_wizard/components/input.vue b/app/assets/javascripts/pipeline_wizard/components/input_wrapper.vue index 5efae2471e5..5efae2471e5 100644 --- a/app/assets/javascripts/pipeline_wizard/components/input.vue +++ b/app/assets/javascripts/pipeline_wizard/components/input_wrapper.vue diff --git a/app/assets/javascripts/pipeline_wizard/components/step.vue b/app/assets/javascripts/pipeline_wizard/components/step.vue index c6f793e4cc5..220b068f747 100644 --- a/app/assets/javascripts/pipeline_wizard/components/step.vue +++ b/app/assets/javascripts/pipeline_wizard/components/step.vue @@ -4,7 +4,7 @@ import { isNode, isDocument, parseDocument, Document } from 'yaml'; import { merge } from '~/lib/utils/yaml'; import { s__ } from '~/locale'; import { logError } from '~/lib/logger'; -import InputWrapper from './input.vue'; +import InputWrapper from './input_wrapper.vue'; import StepNav from './step_nav.vue'; export default { diff --git a/app/assets/javascripts/pipeline_wizard/templates/.gitkeep b/app/assets/javascripts/pipeline_wizard/templates/.gitkeep new file mode 100644 index 00000000000..e69de29bb2d --- /dev/null +++ b/app/assets/javascripts/pipeline_wizard/templates/.gitkeep diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue index 9f76d4cec50..225706265c3 100644 --- a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue @@ -13,7 +13,6 @@ import { __, sprintf } from '~/locale'; import CancelPipelineMutation from '~/pipelines/graphql/mutations/cancel_pipeline.mutation.graphql'; import RetryPipelineMutation from '~/pipelines/graphql/mutations/retry_pipeline.mutation.graphql'; import CiStatus from '~/vue_shared/components/ci_icon.vue'; -import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { PIPELINE_GRAPHQL_TYPE } from '../../constants'; import { reportToSentry } from '../../utils'; import { ACTION_FAILURE, DOWNSTREAM, UPSTREAM } from './constants'; @@ -35,7 +34,6 @@ export default { flatLeftBorder: ['gl-rounded-bottom-left-none!', 'gl-rounded-top-left-none!'], flatRightBorder: ['gl-rounded-bottom-right-none!', 'gl-rounded-top-right-none!'], }, - mixins: [glFeatureFlagMixin()], props: { columnTitle: { type: String, @@ -62,11 +60,12 @@ export default { return { hasActionTooltip: false, isActionLoading: false, + isExpandBtnFocus: false, }; }, computed: { action() { - if (this.glFeatures?.downstreamRetryAction && this.isDownstream) { + if (this.isDownstream) { if (this.isCancelable) { return { icon: 'cancel', @@ -89,6 +88,9 @@ export default { ? ['gl-border-r-0!', ...this.$options.styles.flatRightBorder] : ['gl-border-l-0!', ...this.$options.styles.flatLeftBorder]; }, + buttonShadowClass() { + return this.isExpandBtnFocus ? '' : 'gl-shadow-none!'; + }, buttonId() { return `js-linked-pipeline-${this.pipeline.id}`; }, @@ -99,9 +101,12 @@ export default { }, expandedIcon() { if (this.isUpstream) { - return this.expanded ? 'angle-right' : 'angle-left'; + return this.expanded ? 'chevron-lg-right' : 'chevron-lg-left'; } - return this.expanded ? 'angle-left' : 'angle-right'; + return this.expanded ? 'chevron-lg-left' : 'chevron-lg-right'; + }, + expandBtnText() { + return this.expanded ? __('Collapse jobs') : __('Expand jobs'); }, childPipeline() { return this.isDownstream && this.isSameProject; @@ -157,7 +162,7 @@ export default { return Boolean(this.action?.method && this.action?.icon && this.action?.ariaLabel); }, showCardTooltip() { - return !this.hasActionTooltip; + return !this.hasActionTooltip && !this.isExpandBtnFocus; }, sourceJobName() { return this.pipeline.sourceJob?.name ?? ''; @@ -214,6 +219,9 @@ export default { setActionTooltip(flag) { this.hasActionTooltip = flag; }, + setExpandBtnActiveState(flag) { + this.isExpandBtnFocus = flag; + }, }, }; </script> @@ -221,7 +229,7 @@ export default { <template> <div ref="linkedPipeline" - class="gl-h-full gl-display-flex!" + class="gl-h-full gl-display-flex! gl-px-2" :class="flexDirection" data-qa-selector="linked_pipeline_container" @mouseover="onDownstreamHovered" @@ -237,7 +245,11 @@ export default { <div class="gl-display-flex gl-downstream-pipeline-job-width gl-flex-direction-column gl-line-height-normal" > - <span class="gl-text-truncate" data-testid="downstream-title"> + <span + class="gl-text-truncate" + data-testid="downstream-title" + data-qa-selector="downstream_title_content" + > {{ downstreamTitle }} </span> <div class="gl-text-truncate"> @@ -273,12 +285,18 @@ export default { <div class="gl-display-flex"> <gl-button :id="buttonId" - class="gl-border! gl-shadow-none! gl-rounded-lg!" - :class="[`js-pipeline-expand-${pipeline.id}`, buttonBorderClasses]" + v-gl-tooltip + :title="expandBtnText" + class="gl-border! gl-rounded-lg!" + :class="[`js-pipeline-expand-${pipeline.id}`, buttonBorderClasses, buttonShadowClass]" :icon="expandedIcon" - :aria-label="__('Expand pipeline')" + :aria-label="expandBtnText" data-testid="expand-pipeline-button" data-qa-selector="expand_linked_pipeline_button" + @mouseover="setExpandBtnActiveState(true)" + @mouseout="setExpandBtnActiveState(false)" + @focus="setExpandBtnActiveState(true)" + @blur="setExpandBtnActiveState(false)" @click="onClickLinkedPipeline" /> </div> diff --git a/app/assets/javascripts/pipelines/components/jobs/failed_jobs_table.vue b/app/assets/javascripts/pipelines/components/jobs/failed_jobs_table.vue index 1c646bdf3d6..070c5ee59de 100644 --- a/app/assets/javascripts/pipelines/components/jobs/failed_jobs_table.vue +++ b/app/assets/javascripts/pipelines/components/jobs/failed_jobs_table.vue @@ -56,7 +56,13 @@ export default { </script> <template> - <gl-table-lite :items="failedJobs" :fields="$options.fields" stacked="lg" fixed> + <gl-table-lite + :items="failedJobs" + :fields="$options.fields" + stacked="lg" + fixed + data-testId="tab-failures" + > <template #table-colgroup="{ fields }"> <col v-for="field in fields" :key="field.key" :class="field.columnClass" /> </template> diff --git a/app/assets/javascripts/pipelines/components/jobs/jobs_app.vue b/app/assets/javascripts/pipelines/components/jobs/jobs_app.vue index b45f3e4f32c..18e9ffa23cf 100644 --- a/app/assets/javascripts/pipelines/components/jobs/jobs_app.vue +++ b/app/assets/javascripts/pipelines/components/jobs/jobs_app.vue @@ -127,7 +127,7 @@ export default { <jobs-table v-else :jobs="jobs" :table-fields="$options.fields" data-testid="jobs-tab-table" /> <gl-intersection-observer v-if="jobsPageInfo.hasNextPage" @appear="fetchMoreJobs"> - <gl-loading-icon v-if="showLoadingSpinner" size="md" /> + <gl-loading-icon v-if="showLoadingSpinner" size="lg" /> </gl-intersection-observer> </div> </template> diff --git a/app/assets/javascripts/pipelines/components/notification/deprecated_type_keyword_notification.vue b/app/assets/javascripts/pipelines/components/notification/deprecated_type_keyword_notification.vue deleted file mode 100644 index b8f9f84c217..00000000000 --- a/app/assets/javascripts/pipelines/components/notification/deprecated_type_keyword_notification.vue +++ /dev/null @@ -1,102 +0,0 @@ -<script> -import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui'; -import { __ } from '~/locale'; -import getPipelineWarnings from '../../graphql/queries/get_pipeline_warnings.query.graphql'; - -export default { - // eslint-disable-next-line @gitlab/require-i18n-strings - expectedMessage: 'will be removed in', - i18n: { - title: __('Found warning in your .gitlab-ci.yml'), - rootTypesWarning: __( - '%{codeStart}types%{codeEnd} is deprecated and will be removed in 15.0. Use %{codeStart}stages%{codeEnd} instead. %{linkStart}Learn More %{linkEnd}', - ), - typeWarning: __( - '%{codeStart}type%{codeEnd} is deprecated and will be removed in 15.0. Use %{codeStart}stage%{codeEnd} instead. %{linkStart}Learn More %{linkEnd}', - ), - }, - components: { - GlAlert, - GlLink, - GlSprintf, - }, - inject: ['deprecatedKeywordsDocPath', 'fullPath', 'pipelineIid'], - apollo: { - warnings: { - query: getPipelineWarnings, - variables() { - return { - fullPath: this.fullPath, - iid: this.pipelineIid, - }; - }, - update(data) { - return data?.project?.pipeline?.warningMessages || []; - }, - error() { - this.hasError = true; - }, - }, - }, - data() { - return { - warnings: [], - hasError: false, - }; - }, - computed: { - deprecationWarnings() { - return this.warnings.filter(({ content }) => { - return content.includes(this.$options.expectedMessage); - }); - }, - formattedWarnings() { - // The API doesn't have a mechanism currently to return a - // type instead of just the error message. To work around this, - // we check if the deprecation message is found within the warnings - // and show a FE version of that message with the link to the documentation - // and translated. We can have only 2 types of warnings: root types and individual - // type. If the word `root` is present, then we know it's the root type deprecation - // and if not, it's the normal type. This has to be deleted in 15.0. - // Follow-up issue: https://gitlab.com/gitlab-org/gitlab/-/issues/350810 - return this.deprecationWarnings.map(({ content }) => { - if (content.includes('root')) { - return this.$options.i18n.rootTypesWarning; - } - return this.$options.i18n.typeWarning; - }); - }, - hasDeprecationWarning() { - return this.formattedWarnings.length > 0; - }, - showWarning() { - return ( - !this.$apollo.queries.warnings?.loading && !this.hasError && this.hasDeprecationWarning - ); - }, - }, -}; -</script> -<template> - <div> - <gl-alert - v-if="showWarning" - :title="$options.i18n.title" - variant="warning" - :dismissible="false" - > - <ul class="gl-mb-0"> - <li v-for="warning in formattedWarnings" :key="warning"> - <gl-sprintf :message="warning"> - <template #code="{ content }"> - <code> {{ content }}</code> - </template> - <template #link="{ content }"> - <gl-link :href="deprecatedKeywordsDocPath" target="_blank"> {{ content }}</gl-link> - </template> - </gl-sprintf> - </li> - </ul> - </gl-alert> - </div> -</template> diff --git a/app/assets/javascripts/pipelines/components/pipeline_tabs.vue b/app/assets/javascripts/pipelines/components/pipeline_tabs.vue index 66d30c10362..e1745969649 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_tabs.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_tabs.vue @@ -1,9 +1,10 @@ <script> -import { GlTabs, GlTab } from '@gitlab/ui'; +import { GlBadge, GlTabs, GlTab } from '@gitlab/ui'; import { __ } from '~/locale'; import { failedJobsTabName, jobsTabName, needsTabName, testReportTabName } from '../constants'; import PipelineGraphWrapper from './graph/graph_component_wrapper.vue'; import Dag from './dag/dag.vue'; +import FailedJobsApp from './jobs/failed_jobs_app.vue'; import JobsApp from './jobs/jobs_app.vue'; import TestReports from './test_reports/test_reports.vue'; @@ -25,14 +26,20 @@ export default { }, components: { Dag, + GlBadge, GlTab, GlTabs, JobsApp, - FailedJobsApp: JobsApp, + FailedJobsApp, PipelineGraphWrapper, TestReports, }, - inject: ['defaultTabValue'], + inject: ['defaultTabValue', 'failedJobsCount', 'failedJobsSummary', 'totalJobCount'], + computed: { + showFailedJobsTab() { + return this.failedJobsCount > 0; + }, + }, methods: { isActive(tabName) { return tabName === this.defaultTabValue; @@ -54,19 +61,25 @@ export default { > <dag /> </gl-tab> - <gl-tab - :title="$options.i18n.tabs.jobsTitle" - :active="isActive($options.tabNames.jobs)" - data-testid="jobs-tab" - > + <gl-tab :active="isActive($options.tabNames.jobs)" data-testid="jobs-tab" lazy> + <template #title> + <span class="gl-mr-2">{{ $options.i18n.tabs.jobsTitle }}</span> + <gl-badge size="sm" data-testid="builds-counter">{{ totalJobCount }}</gl-badge> + </template> <jobs-app /> </gl-tab> <gl-tab + v-if="showFailedJobsTab" :title="$options.i18n.tabs.failedJobsTitle" :active="isActive($options.tabNames.failures)" data-testid="failed-jobs-tab" + lazy > - <failed-jobs-app /> + <template #title> + <span class="gl-mr-2">{{ $options.i18n.tabs.failedJobsTitle }}</span> + <gl-badge size="sm" data-testid="failed-builds-counter">{{ failedJobsCount }}</gl-badge> + </template> + <failed-jobs-app :failed-jobs-summary="failedJobsSummary" /> </gl-tab> <gl-tab :title="$options.i18n.tabs.testsTitle" diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_mini_graph.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_mini_graph.vue index e35fccf2d7e..05cb2ebb769 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_mini_graph.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_mini_graph.vue @@ -36,12 +36,12 @@ export default { }; </script> <template> - <div data-testid="pipeline-mini-graph" class="gl-display-inline gl-vertical-align-middle gl-my-1"> + <div data-testid="pipeline-mini-graph" class="gl-display-inline gl-vertical-align-middle"> <div v-for="stage in stages" :key="stage.name" :class="stagesClass" - class="stage-container dropdown" + class="dropdown gl-display-inline-block gl-mr-2 gl-my-2 gl-vertical-align-middle stage-container" > <pipeline-stage :stage="stage" diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue index 53e21d4ce8b..d7e55d36ff6 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue @@ -21,6 +21,13 @@ import eventHub from '../../event_hub'; import JobItem from './job_item.vue'; export default { + i18n: { + stage: __('Stage:'), + loadingText: __('Loading, please wait.'), + }, + dropdownPopperOpts: { + placement: 'bottom', + }, components: { CiIcon, GlLoadingIcon, @@ -48,20 +55,26 @@ export default { }, data() { return { + isDropdownOpen: false, isLoading: false, dropdownContent: [], + stageName: '', }; }, watch: { updateDropdown() { - if (this.updateDropdown && this.isDropdownOpen() && !this.isLoading) { + if (this.updateDropdown && this.isDropdownOpen && !this.isLoading) { this.fetchJobs(); } }, }, methods: { + onHideDropdown() { + this.isDropdownOpen = false; + }, onShowDropdown() { eventHub.$emit('clickedDropdown'); + this.isDropdownOpen = true; this.isLoading = true; this.fetchJobs(); }, @@ -70,6 +83,7 @@ export default { .get(this.stage.dropdown_path) .then(({ data }) => { this.dropdownContent = data.latest_statuses; + this.stageName = data.name; this.isLoading = false; }) .catch(() => { @@ -81,9 +95,6 @@ export default { }); }); }, - isDropdownOpen() { - return this.$el.classList.contains('show'); - }, pipelineActionRequestComplete() { // close the dropdown in MR widget this.$refs.dropdown.hide(); @@ -107,28 +118,42 @@ export default { variant="link" :aria-label="stageAriaLabel(stage.title)" :lazy="true" - :popper-opts="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ { - placement: 'bottom', - } /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" + :popper-opts="$options.dropdownPopperOpts" :toggle-class="['gl-rounded-full!']" menu-class="mini-pipeline-graph-dropdown-menu" + @hide="onHideDropdown" @show="onShowDropdown" > <template #button-content> <ci-icon + is-borderless is-interactive css-classes="gl-rounded-full" + :is-active="isDropdownOpen" :size="24" :status="stage.status" - class="gl-align-items-center gl-display-inline-flex" + class="gl-align-items-center gl-border gl-display-inline-flex gl-z-index-1" /> </template> - <gl-loading-icon v-if="isLoading" size="sm" /> + <div + v-if="isLoading" + class="gl-display-flex gl-justify-content-center gl-p-2" + data-testid="pipeline-stage-loading-state" + > + <gl-loading-icon size="sm" class="gl-mr-3" /> + <p class="gl-mb-0">{{ $options.i18n.loadingText }}</p> + </div> <ul v-else class="js-builds-dropdown-list scrollable-menu" data-testid="mini-pipeline-graph-dropdown-menu-list" > + <div + class="gl-align-items-center gl-border-b gl-display-flex gl-font-weight-bold gl-justify-content-center gl-pb-3" + > + <span class="gl-mr-1">{{ $options.i18n.stage }}</span> + <span data-testid="pipeline-stage-dropdown-menu-title">{{ stageName }}</span> + </div> <li v-for="job in dropdownContent" :key="job.id"> <job-item :dropdown-length="dropdownContent.length" diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue index 63c492c8bcd..09d588aaafd 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue @@ -137,9 +137,8 @@ export default { class="gl-text-decoration-underline gl-text-blue-600! gl-mr-3" data-testid="pipeline-url-link" data-qa-selector="pipeline_url_link" + >#{{ pipeline[pipelineKey] }}</gl-link > - #{{ pipeline[pipelineKey] }} - </gl-link> <!--Commit row--> <div class="icon-container gl-display-inline-block gl-mr-1"> <gl-icon diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue b/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue index 47e5bb0bde8..76ee6ab613b 100644 --- a/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue +++ b/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue @@ -19,7 +19,10 @@ export default { }, testCase: { type: Object, - required: true, + required: false, + default: () => { + return {}; + }, }, }, computed: { @@ -49,6 +52,7 @@ export default { }, text: { name: __('Name'), + file: __('File'), duration: __('Execution time'), history: __('History'), trace: __('System output'), @@ -56,7 +60,7 @@ export default { }, modalCloseButton: { text: __('Close'), - attributes: [{ variant: 'info' }], + attributes: [{ variant: 'confirm' }], }, }; </script> @@ -74,11 +78,24 @@ export default { </div> </div> + <div v-if="testCase.file" class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3"> + <strong class="gl-text-right col-sm-3">{{ $options.text.file }}</strong> + <div class="col-sm-9" data-testid="test-case-file"> + <gl-link v-if="testCase.filePath" :href="testCase.filePath"> + {{ testCase.file }} + </gl-link> + <span v-else>{{ testCase.file }}</span> + </div> + </div> + <div class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3"> <strong class="gl-text-right col-sm-3">{{ $options.text.duration }}</strong> - <div class="col-sm-9" data-testid="test-case-duration"> + <div v-if="testCase.formattedTime" class="col-sm-9" data-testid="test-case-duration"> {{ testCase.formattedTime }} </div> + <div v-else-if="testCase.execution_time" class="col-sm-9" data-testid="test-case-duration"> + {{ sprintf('%{value} s', { value: testCase.execution_time }) }} + </div> </div> <div v-if="testCase.recent_failures" class="gl-display-flex gl-flex-wrap gl-mx-n4 gl-my-3"> diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue index 9b0e6560c53..1e481d37017 100644 --- a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue +++ b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue @@ -7,11 +7,21 @@ import { GlLink, GlButton, GlPagination, + GlEmptyState, + GlSprintf, } from '@gitlab/ui'; import { mapState, mapGetters, mapActions } from 'vuex'; -import { __ } from '~/locale'; +import { __, s__ } from '~/locale'; +import { helpPagePath } from '~/helpers/help_page_helper'; import TestCaseDetails from './test_case_details.vue'; +export const i18n = { + expiredArtifactsTitle: s__('TestReports|Job artifacts are expired'), + expiredArtifactsDescription: s__( + 'TestReports|Test reports require job artifacts but all artifacts are expired. %{linkStart}Learn more%{linkEnd}', + ), +}; + export default { name: 'TestsSuiteTable', components: { @@ -20,12 +30,19 @@ export default { GlLink, GlButton, GlPagination, + GlEmptyState, + GlSprintf, TestCaseDetails, }, directives: { GlTooltip: GlTooltipDirective, GlModalDirective, }, + inject: { + artifactsExpiredImagePath: { + default: '', + }, + }, props: { heading: { type: String, @@ -44,18 +61,21 @@ export default { ...mapActions(['setPage']), }, wrapSymbols: ['::', '#', '.', '_', '-', '/', '\\'], + i18n, + learnMorePath: helpPagePath('ci/unit_test_reports', { + anchor: 'viewing-unit-test-reports-on-gitlab', + }), }; </script> <template> <div> - <div class="row gl-mt-3"> - <div class="col-12"> - <h4>{{ heading }}</h4> - </div> - </div> - <div v-if="hasSuites" class="test-reports-table gl-mb-3 js-test-cases-table"> + <div class="row gl-mt-3"> + <div class="col-12"> + <h4>{{ heading }}</h4> + </div> + </div> <div role="row" class="gl-responsive-table-row table-row-header font-weight-bold fgray"> <div role="rowheader" class="table-section section-20"> {{ __('Suite') }} @@ -158,16 +178,24 @@ export default { </div> <div v-else> - <p data-testid="no-test-cases"> + <gl-empty-state + v-if="getSuiteArtifactsExpired" + :title="$options.i18n.expiredArtifactsTitle" + :svg-path="artifactsExpiredImagePath" + :svg-height="100" + data-testid="artifacts-expired" + > + <template #description> + <gl-sprintf :message="$options.i18n.expiredArtifactsDescription"> + <template #link="{ content }"> + <gl-link :href="$options.learnMorePath">{{ content }}</gl-link> + </template> + </gl-sprintf> + </template> + </gl-empty-state> + <p v-else data-testid="no-test-cases"> {{ s__('TestReports|There are no test cases to display.') }} </p> - <p v-if="getSuiteArtifactsExpired" data-testid="artifacts-expired"> - {{ - s__( - 'TestReports|Test details are populated by job artifacts. The job artifacts from this pipeline are expired.', - ) - }} - </p> </div> </div> </template> diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue b/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue index 79b1b6af38b..2f5301715c3 100644 --- a/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue +++ b/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue @@ -71,7 +71,7 @@ export default { v-if="showBack" size="small" class="gl-mr-3 js-back-button" - icon="angle-left" + icon="chevron-lg-left" :aria-label="__('Go back')" @click="onBackClick" /> diff --git a/app/assets/javascripts/pipelines/graphql/queries/get_pipeline_warnings.query.graphql b/app/assets/javascripts/pipelines/graphql/queries/get_pipeline_warnings.query.graphql deleted file mode 100644 index cd1d2b62a3d..00000000000 --- a/app/assets/javascripts/pipelines/graphql/queries/get_pipeline_warnings.query.graphql +++ /dev/null @@ -1,12 +0,0 @@ -query getPipelineWarnings($fullPath: ID!, $iid: ID!) { - project(fullPath: $fullPath) { - id - pipeline(iid: $iid) { - id - warningMessages { - content - id - } - } - } -} diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js index fd869014570..8bdf18da348 100644 --- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js +++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js @@ -3,7 +3,6 @@ import { __, s__ } from '~/locale'; import createDagApp from './pipeline_details_dag'; import { createPipelinesDetailApp } from './pipeline_details_graph'; import { createPipelineHeaderApp } from './pipeline_details_header'; -import { createPipelineNotificationApp } from './pipeline_details_notification'; import { createPipelineJobsApp } from './pipeline_details_jobs'; import { createPipelineFailedJobsApp } from './pipeline_details_failed_jobs'; import { apolloProvider } from './pipeline_shared_client'; @@ -13,7 +12,6 @@ const SELECTORS = { PIPELINE_DETAILS: '.js-pipeline-details-vue', PIPELINE_GRAPH: '#js-pipeline-graph-vue', PIPELINE_HEADER: '#js-pipeline-header-vue', - PIPELINE_NOTIFICATION: '#js-pipeline-notification', PIPELINE_TABS: '#js-pipeline-tabs', PIPELINE_TESTS: '#js-pipeline-tests-detail', PIPELINE_JOBS: '#js-pipeline-jobs-vue', @@ -31,19 +29,13 @@ export default async function initPipelineDetailsBundle() { }); } - try { - createPipelineNotificationApp(SELECTORS.PIPELINE_NOTIFICATION, apolloProvider); - } catch { - createFlash({ - message: __('An error occurred while loading a section of this page.'), - }); - } - if (gon.features?.pipelineTabsVue) { + const { createAppOptions } = await import('ee_else_ce/pipelines/pipeline_tabs'); const { createPipelineTabs } = await import('./pipeline_tabs'); try { - createPipelineTabs(SELECTORS.PIPELINE_TABS, apolloProvider); + const appOptions = createAppOptions(SELECTORS.PIPELINE_TABS, apolloProvider); + createPipelineTabs(appOptions); } catch { createFlash({ message: __('An error occurred while loading a section of this page.'), @@ -82,14 +74,12 @@ export default async function initPipelineDetailsBundle() { }); } - if (gon.features?.failedJobsTabVue) { - try { - createPipelineFailedJobsApp(SELECTORS.PIPELINE_FAILED_JOBS); - } catch { - createFlash({ - message: s__('Jobs|An error occurred while loading the Failed Jobs tab.'), - }); - } + try { + createPipelineFailedJobsApp(SELECTORS.PIPELINE_FAILED_JOBS); + } catch { + createFlash({ + message: s__('Jobs|An error occurred while loading the Failed Jobs tab.'), + }); } } } diff --git a/app/assets/javascripts/pipelines/pipeline_details_notification.js b/app/assets/javascripts/pipelines/pipeline_details_notification.js deleted file mode 100644 index b480fc7c713..00000000000 --- a/app/assets/javascripts/pipelines/pipeline_details_notification.js +++ /dev/null @@ -1,31 +0,0 @@ -import Vue from 'vue'; -import VueApollo from 'vue-apollo'; -import DeprecatedKeywordNotification from './components/notification/deprecated_type_keyword_notification.vue'; - -Vue.use(VueApollo); - -export const createPipelineNotificationApp = (elSelector, apolloProvider) => { - const el = document.querySelector(elSelector); - - if (!el) { - return; - } - - const { deprecatedKeywordsDocPath, fullPath, pipelineIid } = el.dataset; - // eslint-disable-next-line no-new - new Vue({ - el, - components: { - DeprecatedKeywordNotification, - }, - provide: { - deprecatedKeywordsDocPath, - fullPath, - pipelineIid, - }, - apolloProvider, - render(createElement) { - return createElement('deprecated-keyword-notification'); - }, - }); -}; diff --git a/app/assets/javascripts/pipelines/pipeline_tabs.js b/app/assets/javascripts/pipelines/pipeline_tabs.js index 530917f0402..e7c00d89a10 100644 --- a/app/assets/javascripts/pipelines/pipeline_tabs.js +++ b/app/assets/javascripts/pipelines/pipeline_tabs.js @@ -8,34 +8,31 @@ import { getPipelineDefaultTab, reportToSentry } from './utils'; Vue.use(VueApollo); -const createPipelineTabs = (selector, apolloProvider) => { +export const createAppOptions = (selector, apolloProvider) => { const el = document.querySelector(selector); - if (!el) return; + if (!el) return null; - const { dataset } = document.querySelector(selector); + const { dataset } = el; const { canGenerateCodequalityReports, codequalityReportDownloadPath, downloadablePathForReportType, exposeSecurityDashboard, exposeLicenseScanningData, + failedJobsCount, + failedJobsSummary, + fullPath, graphqlResourceEtag, pipelineIid, pipelineProjectPath, + totalJobCount, } = dataset; const defaultTabValue = getPipelineDefaultTab(window.location.href); - updateHistory({ - url: removeParams([TAB_QUERY_PARAM]), - title: document.title, - replace: true, - }); - - // eslint-disable-next-line no-new - new Vue({ - el: selector, + return { + el, components: { PipelineTabs, }, @@ -47,9 +44,13 @@ const createPipelineTabs = (selector, apolloProvider) => { downloadablePathForReportType, exposeSecurityDashboard: parseBoolean(exposeSecurityDashboard), exposeLicenseScanningData: parseBoolean(exposeLicenseScanningData), + failedJobsCount, + failedJobsSummary: JSON.parse(failedJobsSummary), + fullPath, graphqlResourceEtag, pipelineIid, pipelineProjectPath, + totalJobCount, }, errorCaptured(err, _vm, info) { reportToSentry('pipeline_tabs', `error: ${err}, info: ${info}`); @@ -57,7 +58,18 @@ const createPipelineTabs = (selector, apolloProvider) => { render(createElement) { return createElement(PipelineTabs); }, - }); + }; }; -export { createPipelineTabs }; +export const createPipelineTabs = (options) => { + if (!options) return; + + updateHistory({ + url: removeParams([TAB_QUERY_PARAM]), + title: document.title, + replace: true, + }); + + // eslint-disable-next-line no-new + new Vue(options); +}; diff --git a/app/assets/javascripts/pipelines/pipeline_test_details.js b/app/assets/javascripts/pipelines/pipeline_test_details.js index 46c7ec07d03..27ab2418440 100644 --- a/app/assets/javascripts/pipelines/pipeline_test_details.js +++ b/app/assets/javascripts/pipelines/pipeline_test_details.js @@ -8,8 +8,14 @@ Vue.use(Translate); export const createTestDetails = (selector) => { const el = document.querySelector(selector); - const { blobPath, emptyStateImagePath, hasTestReport, summaryEndpoint, suiteEndpoint } = - el?.dataset || {}; + const { + blobPath, + emptyStateImagePath, + hasTestReport, + summaryEndpoint, + suiteEndpoint, + artifactsExpiredImagePath, + } = el?.dataset || {}; const testReportsStore = createTestReportsStore({ blobPath, summaryEndpoint, @@ -24,6 +30,7 @@ export const createTestDetails = (selector) => { }, provide: { emptyStateImagePath, + artifactsExpiredImagePath, hasTestReport: parseBoolean(hasTestReport), }, store: testReportsStore, diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue index 45a6130826d..c99133fd251 100644 --- a/app/assets/javascripts/profile/account/components/update_username.vue +++ b/app/assets/javascripts/profile/account/components/update_username.vue @@ -60,7 +60,7 @@ Please update your Git repository remotes as soon as possible.`), return { text: __('Update username'), attributes: [ - { variant: 'warning' }, + { variant: 'confirm' }, { category: 'primary' }, { disabled: this.isRequestPending }, ], @@ -127,8 +127,7 @@ Please update your Git repository remotes as soon as possible.`), v-gl-modal-directive="$options.modalId" :disabled="newUsername === username" :loading="isRequestPending" - category="primary" - variant="warning" + variant="confirm" data-testid="username-change-confirmation-modal" >{{ $options.buttonText }}</gl-button > diff --git a/app/assets/javascripts/project_select.js b/app/assets/javascripts/project_select.js index 7222c2bd908..09acf98001c 100644 --- a/app/assets/javascripts/project_select.js +++ b/app/assets/javascripts/project_select.js @@ -1,120 +1,122 @@ /* eslint-disable func-names */ import $ from 'jquery'; +import createFlash from '~/flash'; import Api from './api'; import { loadCSSFile } from './lib/utils/css_utils'; import { s__ } from './locale'; import ProjectSelectComboButton from './project_select_combo_button'; -const projectSelect = () => { - loadCSSFile(gon.select2_css_path) - .then(() => { - $('.ajax-project-select').each(function (i, select) { - let placeholder; - const simpleFilter = $(select).data('simpleFilter') || false; - const isInstantiated = $(select).data('select2'); - this.groupId = $(select).data('groupId'); - this.userId = $(select).data('userId'); - this.includeGroups = $(select).data('includeGroups'); - this.allProjects = $(select).data('allProjects') || false; - this.orderBy = $(select).data('orderBy') || 'id'; - this.withIssuesEnabled = $(select).data('withIssuesEnabled'); - this.withMergeRequestsEnabled = $(select).data('withMergeRequestsEnabled'); - this.withShared = - $(select).data('withShared') === undefined ? true : $(select).data('withShared'); - this.includeProjectsInSubgroups = $(select).data('includeProjectsInSubgroups') || false; - this.allowClear = $(select).data('allowClear') || false; +const projectSelect = async () => { + await loadCSSFile(gon.select2_css_path); - placeholder = s__('ProjectSelect|Search for project'); - if (this.includeGroups) { - placeholder += s__('ProjectSelect| or group'); - } + $('.ajax-project-select').each(function (i, select) { + let placeholder; + const simpleFilter = $(select).data('simpleFilter') || false; + const isInstantiated = $(select).data('select2'); + this.groupId = $(select).data('groupId'); + this.userId = $(select).data('userId'); + this.includeGroups = $(select).data('includeGroups'); + this.allProjects = $(select).data('allProjects') || false; + this.orderBy = $(select).data('orderBy') || 'id'; + this.withIssuesEnabled = $(select).data('withIssuesEnabled'); + this.withMergeRequestsEnabled = $(select).data('withMergeRequestsEnabled'); + this.withShared = + $(select).data('withShared') === undefined ? true : $(select).data('withShared'); + this.includeProjectsInSubgroups = $(select).data('includeProjectsInSubgroups') || false; + this.allowClear = $(select).data('allowClear') || false; + + placeholder = s__('ProjectSelect|Search for project'); + if (this.includeGroups) { + placeholder += s__('ProjectSelect| or group'); + } - $(select).select2({ - placeholder, - minimumInputLength: 0, - query: (query) => { - let projectsCallback; - const finalCallback = function (projects) { - const data = { - results: projects, - }; - return query.callback(data); + $(select).select2({ + placeholder, + minimumInputLength: 0, + query: (query) => { + let projectsCallback; + const finalCallback = function (projects) { + const data = { + results: projects, + }; + return query.callback(data); + }; + if (this.includeGroups) { + projectsCallback = function (projects) { + const groupsCallback = function (groups) { + const data = groups.concat(projects); + return finalCallback(data); }; - if (this.includeGroups) { - projectsCallback = function (projects) { - const groupsCallback = function (groups) { - const data = groups.concat(projects); - return finalCallback(data); - }; - return Api.groups(query.term, {}, groupsCallback); - }; - } else { - projectsCallback = finalCallback; - } - if (this.groupId) { - return Api.groupProjects( - this.groupId, - query.term, - { - with_issues_enabled: this.withIssuesEnabled, - with_merge_requests_enabled: this.withMergeRequestsEnabled, - with_shared: this.withShared, - include_subgroups: this.includeProjectsInSubgroups, - order_by: 'similarity', - simple: true, - }, - projectsCallback, - ); - } else if (this.userId) { - return Api.userProjects( - this.userId, - query.term, - { - with_issues_enabled: this.withIssuesEnabled, - with_merge_requests_enabled: this.withMergeRequestsEnabled, - with_shared: this.withShared, - include_subgroups: this.includeProjectsInSubgroups, - }, - projectsCallback, - ); - } - return Api.projects( - query.term, - { - order_by: this.orderBy, - with_issues_enabled: this.withIssuesEnabled, - with_merge_requests_enabled: this.withMergeRequestsEnabled, - membership: !this.allProjects, - }, - projectsCallback, - ); - }, - id(project) { - if (simpleFilter) return project.id; - return JSON.stringify({ - name: project.name, - url: project.web_url, + return Api.groups(query.term, {}, groupsCallback); + }; + } else { + projectsCallback = finalCallback; + } + if (this.groupId) { + return Api.groupProjects( + this.groupId, + query.term, + { + with_issues_enabled: this.withIssuesEnabled, + with_merge_requests_enabled: this.withMergeRequestsEnabled, + with_shared: this.withShared, + include_subgroups: this.includeProjectsInSubgroups, + order_by: 'similarity', + simple: true, + }, + projectsCallback, + ).catch(() => { + createFlash({ + message: s__('ProjectSelect|Something went wrong while fetching projects'), }); + }); + } else if (this.userId) { + return Api.userProjects( + this.userId, + query.term, + { + with_issues_enabled: this.withIssuesEnabled, + with_merge_requests_enabled: this.withMergeRequestsEnabled, + with_shared: this.withShared, + include_subgroups: this.includeProjectsInSubgroups, + }, + projectsCallback, + ); + } + return Api.projects( + query.term, + { + order_by: this.orderBy, + with_issues_enabled: this.withIssuesEnabled, + with_merge_requests_enabled: this.withMergeRequestsEnabled, + membership: !this.allProjects, }, - text(project) { - return project.name_with_namespace || project.name; - }, + projectsCallback, + ); + }, + id(project) { + if (simpleFilter) return project.id; + return JSON.stringify({ + name: project.name, + url: project.web_url, + }); + }, + text(project) { + return project.name_with_namespace || project.name; + }, - initSelection(el, callback) { - // eslint-disable-next-line promise/no-nesting - return Api.project(el.val()).then(({ data }) => callback(data)); - }, + initSelection(el, callback) { + return Api.project(el.val()).then(({ data }) => callback(data)); + }, - allowClear: this.allowClear, + allowClear: this.allowClear, - dropdownCssClass: 'ajax-project-dropdown', - }); - if (isInstantiated || simpleFilter) return select; - return new ProjectSelectComboButton(select); - }); - }) - .catch(() => {}); + dropdownCssClass: 'ajax-project-dropdown', + }); + if (isInstantiated || simpleFilter) return select; + return new ProjectSelectComboButton(select); + }); }; export default () => { diff --git a/app/assets/javascripts/projects/clusters_deprecation_alert/components/clusters_deprecation_alert.vue b/app/assets/javascripts/projects/clusters_deprecation_alert/components/clusters_deprecation_alert.vue new file mode 100644 index 00000000000..e026b3e1060 --- /dev/null +++ b/app/assets/javascripts/projects/clusters_deprecation_alert/components/clusters_deprecation_alert.vue @@ -0,0 +1,23 @@ +<script> +import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui'; +import { helpPagePath } from '~/helpers/help_page_helper'; + +export default { + components: { + GlAlert, + GlSprintf, + GlLink, + }, + inject: ['message'], + docsLink: helpPagePath('user/infrastructure/clusters/migrate_to_gitlab_agent.md'), +}; +</script> +<template> + <gl-alert :dismissible="false" variant="warning" class="gl-mt-5"> + <gl-sprintf :message="message"> + <template #link="{ content }"> + <gl-link :href="$options.docsLink">{{ content }}</gl-link> + </template> + </gl-sprintf> + </gl-alert> +</template> diff --git a/app/assets/javascripts/projects/clusters_deprecation_alert/index.js b/app/assets/javascripts/projects/clusters_deprecation_alert/index.js new file mode 100644 index 00000000000..e17c1900dc1 --- /dev/null +++ b/app/assets/javascripts/projects/clusters_deprecation_alert/index.js @@ -0,0 +1,21 @@ +import Vue from 'vue'; +import ClustersDeprecationAlert from './components/clusters_deprecation_alert.vue'; + +export default () => { + const el = document.querySelector('.js-clusters-deprecation-alert'); + + if (!el) { + return false; + } + + const { message } = el.dataset; + + return new Vue({ + el, + name: 'ClustersDeprecationAlertRoot', + provide: { + message, + }, + render: (createElement) => createElement(ClustersDeprecationAlert), + }); +}; diff --git a/app/assets/javascripts/projects/commit/components/form_modal.vue b/app/assets/javascripts/projects/commit/components/form_modal.vue index f9dd72119d1..d9aaa574fec 100644 --- a/app/assets/javascripts/projects/commit/components/form_modal.vue +++ b/app/assets/javascripts/projects/commit/components/form_modal.vue @@ -53,7 +53,7 @@ export default { actionPrimary: { text: this.i18n.actionPrimaryText, attributes: [ - { variant: 'success' }, + { variant: 'confirm' }, { category: 'primary' }, { 'data-testid': 'submit-commit' }, { 'data-qa-selector': 'submit_commit_button' }, diff --git a/app/assets/javascripts/projects/commits/components/author_select.vue b/app/assets/javascripts/projects/commits/components/author_select.vue index c8a0a3417f3..884ef732144 100644 --- a/app/assets/javascripts/projects/commits/components/author_select.vue +++ b/app/assets/javascripts/projects/commits/components/author_select.vue @@ -57,7 +57,7 @@ export default { if (authorParam) { commitsSearchInput.setAttribute('disabled', true); - commitsSearchInput.setAttribute('data-toggle', 'tooltip'); + commitsSearchInput.dataset.toggle = 'tooltip'; commitsSearchInput.setAttribute('title', tooltipMessage); this.currentAuthor = authorParam; } diff --git a/app/assets/javascripts/projects/compare/components/app.vue b/app/assets/javascripts/projects/compare/components/app.vue index f2c1c843878..3945bed9649 100644 --- a/app/assets/javascripts/projects/compare/components/app.vue +++ b/app/assets/javascripts/projects/compare/components/app.vue @@ -104,7 +104,7 @@ export default { @selectRevision="onSelectRevision" /> <div - class="compare-ellipsis gl-display-flex gl-justify-content-center gl-align-items-center gl-my-4 gl-md-my-0" + class="compare-ellipsis gl-display-flex gl-justify-content-center gl-align-items-center gl-align-self-end gl-my-4 gl-md-my-0" data-testid="ellipsis" > ... @@ -121,7 +121,7 @@ export default { @selectRevision="onSelectRevision" /> </div> - <div class="gl-mt-4"> + <div class="gl-mt-6"> <gl-button category="primary" variant="confirm" @click="onSubmit"> {{ s__('CompareRevisions|Compare') }} </gl-button> diff --git a/app/assets/javascripts/projects/compare/components/revision_card.vue b/app/assets/javascripts/projects/compare/components/revision_card.vue index 02a329221cc..d6ada24604d 100644 --- a/app/assets/javascripts/projects/compare/components/revision_card.vue +++ b/app/assets/javascripts/projects/compare/components/revision_card.vue @@ -1,5 +1,4 @@ <script> -import { GlCard } from '@gitlab/ui'; import RepoDropdown from './repo_dropdown.vue'; import RevisionDropdown from './revision_dropdown.vue'; @@ -7,7 +6,6 @@ export default { components: { RepoDropdown, RevisionDropdown, - GlCard, }, props: { refsProjectPath: { @@ -41,10 +39,10 @@ export default { </script> <template> - <gl-card header-class="gl-py-2 gl-px-3 gl-font-weight-bold" body-class="gl-px-3"> - <template #header> + <div class="revision-card gl-flex-basis-half"> + <h2 class="gl-font-size-h2"> {{ s__(`CompareRevisions|${revisionText}`) }} - </template> + </h2> <div class="gl-sm-display-flex gl-align-items-center"> <repo-dropdown class="gl-sm-w-half" @@ -61,5 +59,5 @@ export default { v-on="$listeners" /> </div> - </gl-card> + </div> </template> diff --git a/app/assets/javascripts/projects/default_project_templates.js b/app/assets/javascripts/projects/default_project_templates.js index 6708b7bd9e2..3671b24b502 100644 --- a/app/assets/javascripts/projects/default_project_templates.js +++ b/app/assets/javascripts/projects/default_project_templates.js @@ -41,6 +41,10 @@ export default { text: s__('ProjectTemplates|Pages/Hugo'), icon: '.template-option .icon-hugo', }, + pelican: { + text: s__('ProjectTemplates|Pages/Pelican'), + icon: '.template-option .icon-pelican', + }, jekyll: { text: s__('ProjectTemplates|Pages/Jekyll'), icon: '.template-option .icon-jekyll', @@ -105,4 +109,8 @@ export default { text: s__('ProjectTemplates|Kotlin Native for Linux'), icon: '.template-option .icon-gitlab_logo', }, + jsonnet: { + text: s__('ProjectTemplates|Jsonnet for Dynamic Child Pipelines'), + icon: '.template-option .icon-gitlab_logo', + }, }; diff --git a/app/assets/javascripts/projects/pipelines/charts/components/app.vue b/app/assets/javascripts/projects/pipelines/charts/components/app.vue index d4b1f7e57d8..35e7554aee2 100644 --- a/app/assets/javascripts/projects/pipelines/charts/components/app.vue +++ b/app/assets/javascripts/projects/pipelines/charts/components/app.vue @@ -12,11 +12,14 @@ export default { DeploymentFrequencyCharts: () => import('ee_component/dora/components/deployment_frequency_charts.vue'), LeadTimeCharts: () => import('ee_component/dora/components/lead_time_charts.vue'), + TimeToRestoreServiceCharts: () => + import('ee_component/dora/components/time_to_restore_service_charts.vue'), ProjectQualitySummary: () => import('ee_component/project_quality_summary/app.vue'), }, piplelinesTabEvent: 'p_analytics_ci_cd_pipelines', deploymentFrequencyTabEvent: 'p_analytics_ci_cd_deployment_frequency', leadTimeTabEvent: 'p_analytics_ci_cd_lead_time', + timeToRestoreServiceTabEvent: 'p_analytics_ci_cd_time_to_restore_service', inject: { shouldRenderDoraCharts: { type: Boolean, @@ -37,7 +40,7 @@ export default { const chartsToShow = ['pipelines']; if (this.shouldRenderDoraCharts) { - chartsToShow.push('deployment-frequency', 'lead-time'); + chartsToShow.push('deployment-frequency', 'lead-time', 'time-to-restore-service'); } if (this.shouldRenderQualitySummary) { @@ -95,6 +98,13 @@ export default { > <lead-time-charts /> </gl-tab> + <gl-tab + :title="s__('DORA4Metrics|Time to restore service')" + data-testid="time-to-restore-service-tab" + @click="trackTabClick($options.timeToRestoreServiceTabEvent)" + > + <time-to-restore-service-charts /> + </gl-tab> </template> <gl-tab v-if="shouldRenderQualitySummary" :title="s__('QualitySummary|Project quality')"> <project-quality-summary /> diff --git a/app/assets/javascripts/projects/project_import_gitlab_project.js b/app/assets/javascripts/projects/project_import_gitlab_project.js index 4f222438500..0cbd4dbf2cf 100644 --- a/app/assets/javascripts/projects/project_import_gitlab_project.js +++ b/app/assets/javascripts/projects/project_import_gitlab_project.js @@ -1,4 +1,3 @@ -import $ from 'jquery'; import { convertToTitleCase, humanize, slugify } from '../lib/utils/text_utility'; import { getParameterValues } from '../lib/utils/url_utility'; import projectNew from './project_new'; @@ -22,24 +21,24 @@ const prepareParameters = () => { export default () => { let hasUserDefinedProjectName = false; - const $projectName = $('.js-project-name'); - const $projectPath = $('.js-path-name'); + const $projectName = document.querySelector('.js-project-name'); + const $projectPath = document.querySelector('.js-path-name'); const { name, path } = prepareParameters(); // get the project name from the URL and set it as input value - $projectName.val(name); + $projectName.value = name; // get the path url and append it in the input - $projectPath.val(path); + $projectPath.value = path; // generate slug when project name changes - $projectName.on('keyup', () => { + $projectName.addEventListener('keyup', () => { projectNew.onProjectNameChange($projectName, $projectPath); - hasUserDefinedProjectName = $projectName.val().trim().length > 0; + hasUserDefinedProjectName = $projectName.value.trim().length > 0; }); // generate project name from the slug if one isn't set - $projectPath.on('keyup', () => + $projectPath.addEventListener('keyup', () => projectNew.onProjectPathChange($projectName, $projectPath, hasUserDefinedProjectName), ); }; diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js index 2bf13941f6f..2c2f957a75d 100644 --- a/app/assets/javascripts/projects/project_new.js +++ b/app/assets/javascripts/projects/project_new.js @@ -39,12 +39,18 @@ const validateImportCredentials = (url, user, password) => { return importCredentialsValidationPromise; }; -const onProjectNameChange = ($projectNameInput, $projectPathInput) => { +const onProjectNameChangeJq = ($projectNameInput, $projectPathInput) => { const slug = slugify(convertUnicodeToAscii($projectNameInput.val())); $projectPathInput.val(slug); }; -const onProjectPathChange = ($projectNameInput, $projectPathInput, hasExistingProjectName) => { +const onProjectNameChange = ($projectNameInput, $projectPathInput) => { + const slug = slugify(convertUnicodeToAscii($projectNameInput.value)); + // eslint-disable-next-line no-param-reassign + $projectPathInput.value = slug; +}; + +const onProjectPathChangeJq = ($projectNameInput, $projectPathInput, hasExistingProjectName) => { const slug = $projectPathInput.val(); if (!hasExistingProjectName) { @@ -52,6 +58,15 @@ const onProjectPathChange = ($projectNameInput, $projectPathInput, hasExistingPr } }; +const onProjectPathChange = ($projectNameInput, $projectPathInput, hasExistingProjectName) => { + const slug = $projectPathInput.value; + + if (!hasExistingProjectName) { + // eslint-disable-next-line no-param-reassign + $projectNameInput.value = convertToTitleCase(humanize(slug, '[-_]')); + } +}; + const selectedNamespaceId = () => document.querySelector('[name="project[selected_namespace_id]"]'); const dropdownButton = () => document.querySelector('.js-group-namespace-dropdown > button'); const namespaceButton = () => document.querySelector('.js-group-namespace-button'); @@ -73,24 +88,31 @@ const validateGroupNamespaceDropdown = (e) => { const setProjectNamePathHandlers = ($projectNameInput, $projectPathInput) => { const specialRepo = document.querySelector('.js-user-readme-repo'); - - // eslint-disable-next-line @gitlab/no-global-event-off - $projectNameInput.off('keyup change').on('keyup change', () => { + const projectNameInputListener = () => { onProjectNameChange($projectNameInput, $projectPathInput); - hasUserDefinedProjectName = $projectNameInput.val().trim().length > 0; - hasUserDefinedProjectPath = $projectPathInput.val().trim().length > 0; - }); + hasUserDefinedProjectName = $projectNameInput.value.trim().length > 0; + hasUserDefinedProjectPath = $projectPathInput.value.trim().length > 0; + }; + + $projectNameInput.removeEventListener('keyup', projectNameInputListener); + $projectNameInput.addEventListener('keyup', projectNameInputListener); + $projectNameInput.removeEventListener('change', projectNameInputListener); + $projectNameInput.addEventListener('change', projectNameInputListener); - // eslint-disable-next-line @gitlab/no-global-event-off - $projectPathInput.off('keyup change').on('keyup change', () => { + const projectPathInputListener = () => { onProjectPathChange($projectNameInput, $projectPathInput, hasUserDefinedProjectName); - hasUserDefinedProjectPath = $projectPathInput.val().trim().length > 0; + hasUserDefinedProjectPath = $projectPathInput.value.trim().length > 0; specialRepo.classList.toggle( 'gl-display-none', - $projectPathInput.val() !== $projectPathInput.data('username'), + $projectPathInput.value !== $projectPathInput.dataset.username, ); - }); + }; + + $projectPathInput.removeEventListener('keyup', projectPathInputListener); + $projectPathInput.addEventListener('keyup', projectPathInputListener); + $projectPathInput.removeEventListener('change', projectPathInputListener); + $projectPathInput.addEventListener('change', projectPathInputListener); document.querySelector('.js-create-project-button').addEventListener('click', (e) => { validateGroupNamespaceDropdown(e); @@ -99,17 +121,17 @@ const setProjectNamePathHandlers = ($projectNameInput, $projectPathInput) => { const deriveProjectPathFromUrl = ($projectImportUrl) => { const $currentProjectName = $projectImportUrl - .parents('.toggle-import-form') - .find('#project_name'); + .closest('.toggle-import-form') + .querySelector('#project_name'); const $currentProjectPath = $projectImportUrl - .parents('.toggle-import-form') - .find('#project_path'); + .closest('.toggle-import-form') + .querySelector('#project_path'); if (hasUserDefinedProjectPath || $currentProjectPath.length === 0) { return; } - let importUrl = $projectImportUrl.val().trim(); + let importUrl = $projectImportUrl.value.trim(); if (importUrl.length === 0) { return; } @@ -125,7 +147,9 @@ const deriveProjectPathFromUrl = ($projectImportUrl) => { // extract everything after the last slash const pathMatch = /\/([^/]+)$/.exec(importUrl); if (pathMatch) { - $currentProjectPath.val(pathMatch[1]); + // eslint-disable-next-line no-unused-vars + const [_, matchingString] = pathMatch; + $currentProjectPath.value = matchingString; onProjectPathChange($currentProjectName, $currentProjectPath, false); } }; @@ -149,19 +173,20 @@ const bindHowToImport = () => { const bindEvents = () => { const $newProjectForm = $('#new_project'); - const $projectImportUrl = $('#project_import_url'); const $projectImportUrlUser = $('#project_import_url_user'); const $projectImportUrlPassword = $('#project_import_url_password'); const $projectImportUrlError = $('.js-import-url-error'); const $projectImportForm = $('form.js-project-import'); - const $projectPath = $('.tab-pane.active #project_path'); const $useTemplateBtn = $('.template-button > input'); - const $projectFieldsForm = $('.project-fields-form'); - const $selectedTemplateText = $('.selected-template'); const $changeTemplateBtn = $('.change-template'); - const $selectedIcon = $('.selected-icon'); - const $projectTemplateButtons = $('.project-templates-buttons'); - const $projectName = $('.tab-pane.active #project_name'); + + const $projectImportUrl = document.querySelector('#project_import_url'); + const $projectPath = document.querySelector('.tab-pane.active #project_path'); + const $projectFieldsForm = document.querySelector('.project-fields-form'); + const $selectedIcon = document.querySelector('.selected-icon'); + const $selectedTemplateText = document.querySelector('.selected-template'); + const $projectName = document.querySelector('.tab-pane.active #project_name'); + const $projectTemplateButtons = document.querySelectorAll('.project-templates-buttons'); if ($newProjectForm.length !== 1 && $projectImportForm.length !== 1) { return; @@ -170,31 +195,38 @@ const bindEvents = () => { bindHowToImport(); $('.btn_import_gitlab_project').on('click contextmenu', () => { - const importHref = $('a.btn_import_gitlab_project').attr('data-href'); - $('.btn_import_gitlab_project').attr( - 'href', - `${importHref}?namespace_id=${$( - '#project_namespace_id', - ).val()}&name=${$projectName.val()}&path=${$projectPath.val()}`, - ); + const importGitlabProjectBtn = document.querySelector('.btn_import_gitlab_project'); + const projectNamespaceId = document.querySelector('#project_namespace_id'); + + const { href: importHref } = importGitlabProjectBtn.dataset; + const newHref = `${importHref}?namespace_id=${projectNamespaceId.value}&name=${$projectName.value}&path=${$projectPath.value}`; + importGitlabProjectBtn.setAttribute('href', newHref); }); + const clearChildren = (el) => { + while (el.firstChild) el.removeChild(el.firstChild); + }; + function chooseTemplate() { - $projectTemplateButtons.addClass('hidden'); - $projectFieldsForm.addClass('selected'); - $selectedIcon.empty(); + $projectTemplateButtons.forEach((ptb) => ptb.classList.add('hidden')); + $projectFieldsForm.classList.add('selected'); - const $selectedTemplate = $(this); - $selectedTemplate.prop('checked', true); + clearChildren($selectedIcon); - const value = $selectedTemplate.val(); + const $selectedTemplate = this; + $selectedTemplate.checked = true; + const { value } = $selectedTemplate; const selectedTemplate = DEFAULT_PROJECT_TEMPLATES[value]; - $selectedTemplateText.text(selectedTemplate.text); - $(selectedTemplate.icon).clone().addClass('d-block').appendTo($selectedIcon); + $selectedTemplateText.textContent = selectedTemplate.text; + const clone = document.querySelector(selectedTemplate.icon).cloneNode(true); + clone.classList.add('d-block'); + + $selectedIcon.append(clone); + + const $activeTabProjectName = document.querySelector('.tab-pane.active #project_name'); + const $activeTabProjectPath = document.querySelector('.tab-pane.active #project_path'); - const $activeTabProjectName = $('.tab-pane.active #project_name'); - const $activeTabProjectPath = $('.tab-pane.active #project_path'); $activeTabProjectName.focus(); setProjectNamePathHandlers($activeTabProjectName, $activeTabProjectPath); } @@ -216,8 +248,8 @@ const bindEvents = () => { $useTemplateBtn.on('keypress', chooseTemplateOnEnter); $changeTemplateBtn.on('click', () => { - $projectTemplateButtons.removeClass('hidden'); - $projectFieldsForm.removeClass('selected'); + $projectTemplateButtons.forEach((ptb) => ptb.classList.remove('hidden')); + $projectFieldsForm.classList.remove('selected'); $useTemplateBtn.prop('checked', false); }); @@ -227,7 +259,7 @@ const bindEvents = () => { const updateUrlPathWarningVisibility = async () => { const { success: isUrlValid, cancelled } = await validateImportCredentials( - $projectImportUrl.val(), + $projectImportUrl.value, $projectImportUrlUser.val(), $projectImportUrlPassword.val(), ); @@ -235,7 +267,7 @@ const bindEvents = () => { return; } - $projectImportUrl.toggleClass(invalidInputClass, !isUrlValid); + $projectImportUrl.classList.toggle(invalidInputClass, !isUrlValid); $projectImportUrlError.toggleClass('hide', isUrlValid); }; const debouncedUpdateUrlPathWarningVisibility = debounce( @@ -244,20 +276,28 @@ const bindEvents = () => { ); let isProjectImportUrlDirty = false; - $projectImportUrl.on('blur', () => { + $projectImportUrl.addEventListener('blur', () => { isProjectImportUrlDirty = true; debouncedUpdateUrlPathWarningVisibility(); }); - $projectImportUrl.on('keyup', () => { + $projectImportUrl.addEventListener('keyup', () => { deriveProjectPathFromUrl($projectImportUrl); }); [$projectImportUrl, $projectImportUrlUser, $projectImportUrlPassword].forEach(($f) => { - $f.on('input', () => { - if (isProjectImportUrlDirty) { - debouncedUpdateUrlPathWarningVisibility(); - } - }); + if ($f?.on) { + $f.on('input', () => { + if (isProjectImportUrlDirty) { + debouncedUpdateUrlPathWarningVisibility(); + } + }); + } else { + $f.addEventListener('input', () => { + if (isProjectImportUrlDirty) { + debouncedUpdateUrlPathWarningVisibility(); + } + }); + } }); $projectImportForm.on('submit', async (e) => { @@ -287,8 +327,8 @@ const bindEvents = () => { $('.js-import-git-toggle-button').on('click', () => { setProjectNamePathHandlers( - $('.tab-pane.active #project_name'), - $('.tab-pane.active #project_path'), + document.querySelector('.tab-pane.active #project_name'), + document.querySelector('.tab-pane.active #project_path'), ); }); @@ -300,6 +340,8 @@ export default { deriveProjectPathFromUrl, onProjectNameChange, onProjectPathChange, + onProjectNameChangeJq, + onProjectPathChangeJq, }; export { bindHowToImport }; diff --git a/app/assets/javascripts/projects/project_visibility.js b/app/assets/javascripts/projects/project_visibility.js index c962554c9f4..d299e106b14 100644 --- a/app/assets/javascripts/projects/project_visibility.js +++ b/app/assets/javascripts/projects/project_visibility.js @@ -1,4 +1,3 @@ -import $ from 'jquery'; import { escape } from 'lodash'; import { __, sprintf } from '~/locale'; import eventHub from '~/projects/new/event_hub'; @@ -63,9 +62,8 @@ export default function initProjectVisibilitySelector() { const namespaceSelector = document.querySelector('select.js-select-namespace'); if (namespaceSelector) { - $('.select2.js-select-namespace').on('change', () => - handleSelect2DropdownChange(namespaceSelector), - ); + const el = document.querySelector('.select2.js-select-namespace'); + el.addEventListener('change', () => handleSelect2DropdownChange(namespaceSelector)); handleSelect2DropdownChange(namespaceSelector); } } diff --git a/app/assets/javascripts/projects/settings/branch_rules/components/branch_dropdown.vue b/app/assets/javascripts/projects/settings/branch_rules/components/branch_dropdown.vue new file mode 100644 index 00000000000..6bbe0ab7d5f --- /dev/null +++ b/app/assets/javascripts/projects/settings/branch_rules/components/branch_dropdown.vue @@ -0,0 +1,110 @@ +<script> +import { GlDropdown, GlDropdownItem, GlDropdownDivider, GlSearchBoxByType } from '@gitlab/ui'; +import { createAlert } from '~/flash'; +import { __, sprintf } from '~/locale'; +import branchesQuery from '../queries/branches.query.graphql'; + +export const i18n = { + fetchBranchesError: __('An error occurred while fetching branches.'), + noMatch: __('No matching results'), +}; + +export default { + i18n, + name: 'BranchDropdown', + components: { + GlDropdown, + GlDropdownItem, + GlDropdownDivider, + GlSearchBoxByType, + }, + apollo: { + branchNames: { + query: branchesQuery, + variables() { + return { + projectPath: this.projectPath, + searchPattern: `*${this.searchTerm}*`, + }; + }, + update({ project: { repository = {} } } = {}) { + return repository.branchNames || []; + }, + error(e) { + createAlert({ + message: this.$options.i18n.fetchBranchesError, + captureError: true, + error: e, + }); + }, + }, + }, + props: { + projectPath: { + type: String, + required: true, + }, + value: { + type: String, + required: false, + default: null, + }, + }, + data() { + return { + searchTerm: '', + branchNames: [], + }; + }, + computed: { + createButtonLabel() { + return sprintf(__('Create wildcard: %{searchTerm}'), { searchTerm: this.searchTerm }); + }, + shouldRenderCreateButton() { + return this.searchTerm && !this.branchNames.includes(this.searchTerm); + }, + isLoading() { + return this.$apollo.queries.branchNames.loading; + }, + }, + methods: { + selectBranch(selected) { + this.$emit('input', selected); + }, + createWildcard() { + this.$emit('createWildcard', this.searchTerm); + }, + isSelected(branch) { + return this.value === branch; + }, + }, +}; +</script> +<template> + <gl-dropdown :text="value || branchNames[0]"> + <gl-search-box-by-type + v-model.trim="searchTerm" + data-testid="branch-search" + debounce="250" + :is-loading="isLoading" + /> + <gl-dropdown-item + v-for="branch in branchNames" + :key="branch" + :is-checked="isSelected(branch)" + is-check-item + @click="selectBranch(branch)" + > + {{ branch }} + </gl-dropdown-item> + <gl-dropdown-item v-if="!branchNames.length && !isLoading" data-testid="no-data">{{ + $options.i18n.noMatch + }}</gl-dropdown-item> + <template v-if="shouldRenderCreateButton"> + <gl-dropdown-divider /> + <gl-dropdown-item data-testid="create-wildcard-button" @click="createWildcard"> + {{ createButtonLabel }} + </gl-dropdown-item> + </template> + </gl-dropdown> +</template> diff --git a/app/assets/javascripts/projects/settings/branch_rules/components/rule_edit.vue b/app/assets/javascripts/projects/settings/branch_rules/components/rule_edit.vue new file mode 100644 index 00000000000..c2e7f4e9b1b --- /dev/null +++ b/app/assets/javascripts/projects/settings/branch_rules/components/rule_edit.vue @@ -0,0 +1,38 @@ +<script> +import { GlFormGroup } from '@gitlab/ui'; +import { __ } from '~/locale'; +import { getParameterByName } from '~/lib/utils/url_utility'; +import BranchDropdown from './branch_dropdown.vue'; + +export default { + name: 'RuleEdit', + i18n: { + branch: __('Branch'), + }, + components: { BranchDropdown, GlFormGroup }, + props: { + projectPath: { + type: String, + required: true, + }, + }, + data() { + return { + branch: getParameterByName('branch'), + }; + }, +}; +</script> + +<template> + <gl-form-group :label="$options.i18n.branch"> + <branch-dropdown + id="branches" + v-model="branch" + class="gl-w-half" + :project-path="projectPath" + @createWildcard="branch = $event" + /> + </gl-form-group> + <!-- TODO - Add branch protections (https://gitlab.com/gitlab-org/gitlab/-/issues/362212) --> +</template> diff --git a/app/assets/javascripts/projects/settings/branch_rules/mount_branch_rules.js b/app/assets/javascripts/projects/settings/branch_rules/mount_branch_rules.js new file mode 100644 index 00000000000..8452542540e --- /dev/null +++ b/app/assets/javascripts/projects/settings/branch_rules/mount_branch_rules.js @@ -0,0 +1,26 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; +import RuleEdit from './components/rule_edit.vue'; + +export default function mountBranchRules(el) { + if (!el) { + return null; + } + + Vue.use(VueApollo); + + const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), + }); + + const { projectPath } = el.dataset; + + return new Vue({ + el, + apolloProvider, + render(h) { + return h(RuleEdit, { props: { projectPath } }); + }, + }); +} diff --git a/app/assets/javascripts/projects/settings/branch_rules/queries/branches.query.graphql b/app/assets/javascripts/projects/settings/branch_rules/queries/branches.query.graphql new file mode 100644 index 00000000000..a532b544757 --- /dev/null +++ b/app/assets/javascripts/projects/settings/branch_rules/queries/branches.query.graphql @@ -0,0 +1,8 @@ +query getBranches($projectPath: ID!, $searchPattern: String!) { + project(fullPath: $projectPath) { + id + repository { + branchNames(searchPattern: $searchPattern, limit: 100, offset: 0) + } + } +} diff --git a/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue b/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue new file mode 100644 index 00000000000..ada951f6867 --- /dev/null +++ b/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue @@ -0,0 +1,16 @@ +<script> +import { __ } from '~/locale'; + +export default { + name: 'BranchRules', + i18n: { heading: __('Branch') }, +}; +</script> + +<template> + <div> + <strong>{{ $options.i18n.heading }}</strong> + + <!-- TODO - List branch rules (https://gitlab.com/gitlab-org/gitlab/-/issues/362217) --> + </div> +</template> diff --git a/app/assets/javascripts/projects/settings/repository/branch_rules/mount_branch_rules.js b/app/assets/javascripts/projects/settings/repository/branch_rules/mount_branch_rules.js new file mode 100644 index 00000000000..abe0b93081e --- /dev/null +++ b/app/assets/javascripts/projects/settings/repository/branch_rules/mount_branch_rules.js @@ -0,0 +1,13 @@ +import Vue from 'vue'; +import BranchRulesApp from '~/projects/settings/repository/branch_rules/app.vue'; + +export default function mountBranchRules(el) { + if (!el) return null; + + return new Vue({ + el, + render(createElement) { + return createElement(BranchRulesApp); + }, + }); +} diff --git a/app/assets/javascripts/related_issues/constants.js b/app/assets/javascripts/related_issues/constants.js index f911468d8f1..3516836952f 100644 --- a/app/assets/javascripts/related_issues/constants.js +++ b/app/assets/javascripts/related_issues/constants.js @@ -2,6 +2,7 @@ import { __, sprintf } from '~/locale'; export const issuableTypesMap = { ISSUE: 'issue', + INCIDENT: 'incident', EPIC: 'epic', MERGE_REQUEST: 'merge_request', }; @@ -25,6 +26,11 @@ export const autoCompleteTextMap = { { emphasisStart: '<', emphasisEnd: '>' }, false, ), + [issuableTypesMap.INCIDENT]: sprintf( + __(' or %{emphasisStart}#id%{emphasisEnd}'), + { emphasisStart: '<', emphasisEnd: '>' }, + false, + ), [issuableTypesMap.EPIC]: sprintf( __(' or %{emphasisStart}&epic id%{emphasisEnd}'), { emphasisStart: '<', emphasisEnd: '>' }, @@ -45,6 +51,7 @@ export const autoCompleteTextMap = { export const inputPlaceholderTextMap = { [issuableTypesMap.ISSUE]: __('Paste issue link'), + [issuableTypesMap.INCIDENT]: __('Paste link'), [issuableTypesMap.EPIC]: __('Paste epic link'), [issuableTypesMap.MERGE_REQUEST]: __('Enter merge request URLs'), }; @@ -88,6 +95,7 @@ export const addRelatedItemErrorMap = { */ export const issuableIconMap = { [issuableTypesMap.ISSUE]: 'issues', + [issuableTypesMap.INCIDENT]: 'issues', [issuableTypesMap.EPIC]: 'epic', }; @@ -107,6 +115,7 @@ export const PathIdSeparator = { export const issuablesBlockHeaderTextMap = { [issuableTypesMap.ISSUE]: __('Linked issues'), + [issuableTypesMap.INCIDENT]: __('Related incidents or issues'), [issuableTypesMap.EPIC]: __('Linked epics'), }; @@ -122,10 +131,12 @@ export const issuablesBlockAddButtonTextMap = { export const issuablesFormCategoryHeaderTextMap = { [issuableTypesMap.ISSUE]: __('The current issue'), + [issuableTypesMap.INCIDENT]: __('The current incident'), [issuableTypesMap.EPIC]: __('The current epic'), }; export const issuablesFormInputTextMap = { [issuableTypesMap.ISSUE]: __('the following issue(s)'), + [issuableTypesMap.INCIDENT]: __('the following incident(s) or issue(s)'), [issuableTypesMap.EPIC]: __('the following epic(s)'), }; diff --git a/app/assets/javascripts/related_issues/index.js b/app/assets/javascripts/related_issues/index.js index b61f1cf2470..655ec57bc3d 100644 --- a/app/assets/javascripts/related_issues/index.js +++ b/app/assets/javascripts/related_issues/index.js @@ -2,7 +2,7 @@ import Vue from 'vue'; import { parseBoolean } from '~/lib/utils/common_utils'; import RelatedIssuesRoot from './components/related_issues_root.vue'; -export default function initRelatedIssues() { +export default function initRelatedIssues(issueType = 'issue') { const relatedIssuesRootElement = document.querySelector('.js-related-issues-root'); if (relatedIssuesRootElement) { // eslint-disable-next-line no-new @@ -21,6 +21,7 @@ export default function initRelatedIssues() { showCategorizedIssues: parseBoolean( relatedIssuesRootElement.dataset.showCategorizedIssues, ), + issuableType: issueType, autoCompleteEpics: false, }, }), diff --git a/app/assets/javascripts/releases/components/app_index.vue b/app/assets/javascripts/releases/components/app_index.vue index 59fa2fca736..a949a9d1318 100644 --- a/app/assets/javascripts/releases/components/app_index.vue +++ b/app/assets/javascripts/releases/components/app_index.vue @@ -229,7 +229,7 @@ export default { }; </script> <template> - <div class="flex flex-column mt-2"> + <div class="gl-display-flex gl-flex-direction-column gl-mt-3"> <div class="gl-align-self-end gl-mb-3"> <releases-sort :value="sort" class="gl-mr-2" @input="onSortChanged" /> diff --git a/app/assets/javascripts/releases/components/release_block_header.vue b/app/assets/javascripts/releases/components/release_block_header.vue index 89bc314db89..def38780545 100644 --- a/app/assets/javascripts/releases/components/release_block_header.vue +++ b/app/assets/javascripts/releases/components/release_block_header.vue @@ -72,7 +72,7 @@ export default { category="primary" variant="default" icon="pencil" - class="gl-mr-3 js-edit-button ml-2 pb-2" + class="gl-mr-3 js-edit-button gl-ml-3 gl-pb-3" :title="$options.i18n.editButton" :aria-label="$options.i18n.editButton" :href="editLink" diff --git a/app/assets/javascripts/releases/graphql/fragments/release.fragment.graphql b/app/assets/javascripts/releases/graphql/fragments/release.fragment.graphql index 8a5613c75d2..e0de6d12b13 100644 --- a/app/assets/javascripts/releases/graphql/fragments/release.fragment.graphql +++ b/app/assets/javascripts/releases/graphql/fragments/release.fragment.graphql @@ -1,5 +1,6 @@ fragment Release on Release { __typename + id name tagName tagPath diff --git a/app/assets/javascripts/releases/graphql/fragments/release_for_editing.fragment.graphql b/app/assets/javascripts/releases/graphql/fragments/release_for_editing.fragment.graphql index 1823a327350..236d266a40a 100644 --- a/app/assets/javascripts/releases/graphql/fragments/release_for_editing.fragment.graphql +++ b/app/assets/javascripts/releases/graphql/fragments/release_for_editing.fragment.graphql @@ -1,4 +1,5 @@ fragment ReleaseForEditing on Release { + id name tagName description diff --git a/app/assets/javascripts/releases/graphql/mutations/create_release.mutation.graphql b/app/assets/javascripts/releases/graphql/mutations/create_release.mutation.graphql index 56bfe7c23d6..7344772adb9 100644 --- a/app/assets/javascripts/releases/graphql/mutations/create_release.mutation.graphql +++ b/app/assets/javascripts/releases/graphql/mutations/create_release.mutation.graphql @@ -1,6 +1,7 @@ mutation createRelease($input: ReleaseCreateInput!) { releaseCreate(input: $input) { release { + id links { selfUrl } diff --git a/app/assets/javascripts/releases/graphql/queries/all_releases.query.graphql b/app/assets/javascripts/releases/graphql/queries/all_releases.query.graphql index bda7ac52a47..61a06f268bd 100644 --- a/app/assets/javascripts/releases/graphql/queries/all_releases.query.graphql +++ b/app/assets/javascripts/releases/graphql/queries/all_releases.query.graphql @@ -13,6 +13,7 @@ query allReleases( __typename nodes { __typename + id name tagName tagPath diff --git a/app/assets/javascripts/reports/components/summary_row.vue b/app/assets/javascripts/reports/components/summary_row.vue index 7419b5b59d6..92d0783749e 100644 --- a/app/assets/javascripts/reports/components/summary_row.vue +++ b/app/assets/javascripts/reports/components/summary_row.vue @@ -71,7 +71,7 @@ export default { <gl-loading-icon v-if="statusIcon === 'loading'" css-class="report-block-list-loading-icon" - size="md" + size="lg" /> <ci-icon v-else :status="iconStatus" :size="statusIconSize" data-testid="summary-row-icon" /> </div> diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue index 3729bd4c601..280455c3fed 100644 --- a/app/assets/javascripts/repository/components/blob_content_viewer.vue +++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue @@ -6,9 +6,9 @@ import BlobHeader from '~/blob/components/blob_header.vue'; import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants'; import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; -import { isLoggedIn } from '~/lib/utils/common_utils'; +import { isLoggedIn, handleLocationHash } from '~/lib/utils/common_utils'; import { __ } from '~/locale'; -import { redirectTo, getLocationHash } from '~/lib/utils/url_utility'; +import { redirectTo } from '~/lib/utils/url_utility'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import WebIdeLink from '~/vue_shared/components/web_ide_link.vue'; import CodeIntelligence from '~/code_navigation/components/app.vue'; @@ -183,7 +183,7 @@ export default { this.isLoadingLegacyViewer = true; axios .get(`${this.blobInfo.webPath}?format=json&viewer=${type}`) - .then(({ data: { html, binary } }) => { + .then(async ({ data: { html, binary } }) => { if (type === SIMPLE_BLOB_VIEWER) { this.isRenderingLegacyTextViewer = true; @@ -197,20 +197,14 @@ export default { this.legacyRichViewer = html; } - this.scrollToHash(); this.isBinary = binary; this.isLoadingLegacyViewer = false; + + await this.$nextTick(); + handleLocationHash(); // Ensures that we scroll to the hash when async content is loaded }) .catch(() => this.displayError()); }, - scrollToHash() { - const hash = getLocationHash(); - if (hash) { - // Ensures the browser's native scroll to hash is triggered for async content - window.location.hash = ''; - window.location.hash = hash; - } - }, displayError() { createFlash({ message: __('An error occurred while loading the file. Please try again.') }); }, @@ -233,6 +227,9 @@ export default { setForkTarget(target) { this.forkTarget = target; }, + onCopy() { + navigator.clipboard.writeText(this.blobInfo.rawTextBlob); + }, }, }; </script> @@ -248,7 +245,9 @@ export default { :active-viewer-type="viewer.type" :has-render-error="hasRenderError" :show-path="false" + :override-copy="glFeatures.highlightJs" @viewer-changed="switchViewer" + @copy="onCopy" > <template #actions> <web-ide-link diff --git a/app/assets/javascripts/repository/components/blob_viewers/index.js b/app/assets/javascripts/repository/components/blob_viewers/index.js index 81d2168e2ce..3e6d2e675ed 100644 --- a/app/assets/javascripts/repository/components/blob_viewers/index.js +++ b/app/assets/javascripts/repository/components/blob_viewers/index.js @@ -9,6 +9,7 @@ const viewers = { lfs: () => import('./lfs_viewer.vue'), audio: () => import('./audio_viewer.vue'), svg: () => import('./image_viewer.vue'), + sketch: () => import('./sketch_viewer.vue'), }; export const loadViewer = (type, isUsingLfs) => { diff --git a/app/assets/javascripts/repository/components/blob_viewers/sketch_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/sketch_viewer.vue new file mode 100644 index 00000000000..b48af02e541 --- /dev/null +++ b/app/assets/javascripts/repository/components/blob_viewers/sketch_viewer.vue @@ -0,0 +1,31 @@ +<script> +import { GlLoadingIcon } from '@gitlab/ui'; +import SketchLoader from '~/blob/sketch'; + +export default { + components: { + GlLoadingIcon, + }, + props: { + blob: { + type: Object, + required: true, + }, + }, + data() { + return { + url: this.blob.rawPath, + }; + }, + mounted() { + // eslint-disable-next-line no-new + new SketchLoader(this.$refs.viewer); + }, +}; +</script> + +<template> + <div ref="viewer" class="file-content" :data-endpoint="url" data-testid="sketch"> + <gl-loading-icon class="my-4 js-loading-icon" size="lg" /> + </div> +</template> diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue index 03dd7c6fada..d24d7648f1b 100644 --- a/app/assets/javascripts/repository/components/last_commit.vue +++ b/app/assets/javascripts/repository/components/last_commit.vue @@ -114,7 +114,7 @@ export default { <template> <div class="well-segment commit gl-p-5 gl-w-full gl-display-flex"> - <gl-loading-icon v-if="isLoading" size="md" color="dark" class="m-auto" /> + <gl-loading-icon v-if="isLoading" size="lg" color="dark" class="m-auto" /> <template v-else-if="commit"> <user-avatar-link v-if="commit.author" diff --git a/app/assets/javascripts/repository/components/preview/index.vue b/app/assets/javascripts/repository/components/preview/index.vue index dc5a031c9f3..4935b8029f9 100644 --- a/app/assets/javascripts/repository/components/preview/index.vue +++ b/app/assets/javascripts/repository/components/preview/index.vue @@ -64,7 +64,7 @@ export default { </div> </div> <div class="blob-viewer" data-qa-selector="blob_viewer_content" itemprop="about"> - <gl-loading-icon v-if="loading > 0" size="md" color="dark" class="my-4 mx-auto" /> + <gl-loading-icon v-if="loading > 0" size="lg" color="dark" class="my-4 mx-auto" /> <div v-else-if="readme" ref="readme" diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue index c2323d6b286..41f7a4b147f 100644 --- a/app/assets/javascripts/repository/components/table/index.vue +++ b/app/assets/javascripts/repository/components/table/index.vue @@ -1,5 +1,5 @@ <script> -import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlButton } from '@gitlab/ui'; +import { GlSkeletonLoader, GlButton } from '@gitlab/ui'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { sprintf, __ } from '~/locale'; import getRefMixin from '../../mixins/get_ref'; @@ -10,7 +10,7 @@ import TableRow from './row.vue'; export default { components: { - GlSkeletonLoading, + GlSkeletonLoader, TableHeader, TableRow, ParentRow, @@ -158,11 +158,15 @@ export default { </template> <template v-if="isLoading"> <tr v-for="i in 5" :key="i" aria-hidden="true"> - <td><gl-skeleton-loading :lines="1" class="h-auto" /></td> + <td><gl-skeleton-loader :lines="1" /></td> <td class="gl-display-none gl-sm-display-block"> - <gl-skeleton-loading :lines="1" class="h-auto" /> + <gl-skeleton-loader :lines="1" /> + </td> + <td> + <div class="gl-display-flex gl-lg-justify-content-end"> + <gl-skeleton-loader :equal-width-lines="true" :lines="1" /> + </div> </td> - <td><gl-skeleton-loading :lines="1" class="ml-auto h-auto w-50" /></td> </tr> </template> <template v-if="hasMore"> diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue index 7aac35e7613..2b910109f7d 100644 --- a/app/assets/javascripts/repository/components/table/row.vue +++ b/app/assets/javascripts/repository/components/table/row.vue @@ -2,7 +2,7 @@ import { GlBadge, GlLink, - GlDeprecatedSkeletonLoading as GlSkeletonLoading, + GlSkeletonLoader, GlTooltipDirective, GlLoadingIcon, GlIcon, @@ -25,7 +25,7 @@ export default { components: { GlBadge, GlLink, - GlSkeletonLoading, + GlSkeletonLoader, GlLoadingIcon, GlIcon, TimeagoTooltip, @@ -277,12 +277,12 @@ export default { class="str-truncated-100 tree-commit-link" /> <gl-intersection-observer @appear="rowAppeared" @disappear="rowDisappeared"> - <gl-skeleton-loading v-if="showSkeletonLoader" :lines="1" class="h-auto" /> + <gl-skeleton-loader v-if="showSkeletonLoader" :lines="1" /> </gl-intersection-observer> </td> <td class="tree-time-ago text-right cursor-default"> <timeago-tooltip v-if="commitData" :time="commitData.committedDate" /> - <gl-skeleton-loading v-if="showSkeletonLoader" :lines="1" class="ml-auto h-auto w-50" /> + <gl-skeleton-loader v-if="showSkeletonLoader" :lines="1" /> </td> </tr> </template> diff --git a/app/assets/javascripts/rest_api.js b/app/assets/javascripts/rest_api.js index 0f8e6945bf9..0b6c5063129 100644 --- a/app/assets/javascripts/rest_api.js +++ b/app/assets/javascripts/rest_api.js @@ -5,6 +5,7 @@ export * from './api/markdown_api'; export * from './api/bulk_imports_api'; export * from './api/namespaces_api'; export * from './api/tags_api'; +export * from './api/alert_management_alerts_api'; // Note: It's not possible to spy on methods imported from this file in // Jest tests. diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js index a3abc8b8e90..9de67015094 100644 --- a/app/assets/javascripts/right_sidebar.js +++ b/app/assets/javascripts/right_sidebar.js @@ -8,7 +8,7 @@ import axios from './lib/utils/axios_utils'; import { sprintf, s__, __ } from './locale'; const updateSidebarClasses = (layoutPage, rightSidebar) => { - if (window.innerWidth >= 768) { + if (window.innerWidth >= 992) { layoutPage.classList.remove('right-sidebar-expanded', 'right-sidebar-collapsed'); rightSidebar.classList.remove('right-sidebar-collapsed'); rightSidebar.classList.add('right-sidebar-expanded'); diff --git a/app/assets/javascripts/runner/admin_runner_show/admin_runner_show_app.vue b/app/assets/javascripts/runner/admin_runner_show/admin_runner_show_app.vue index c3f317b40b0..06a8eb790fc 100644 --- a/app/assets/javascripts/runner/admin_runner_show/admin_runner_show_app.vue +++ b/app/assets/javascripts/runner/admin_runner_show/admin_runner_show_app.vue @@ -1,14 +1,16 @@ <script> -import { GlTooltipDirective } from '@gitlab/ui'; +import { GlBadge, GlTab, GlTooltipDirective } from '@gitlab/ui'; import { createAlert, VARIANT_SUCCESS } from '~/flash'; import { TYPE_CI_RUNNER } from '~/graphql_shared/constants'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import { redirectTo } from '~/lib/utils/url_utility'; +import { formatJobCount } from '../utils'; import RunnerDeleteButton from '../components/runner_delete_button.vue'; import RunnerEditButton from '../components/runner_edit_button.vue'; import RunnerPauseButton from '../components/runner_pause_button.vue'; import RunnerHeader from '../components/runner_header.vue'; import RunnerDetails from '../components/runner_details.vue'; +import RunnerJobs from '../components/runner_jobs.vue'; import { I18N_FETCH_ERROR } from '../constants'; import runnerQuery from '../graphql/show/runner.query.graphql'; import { captureException } from '../sentry_utils'; @@ -17,11 +19,14 @@ import { saveAlertToLocalStorage } from '../local_storage_alert/save_alert_to_lo export default { name: 'AdminRunnerShowApp', components: { + GlBadge, + GlTab, RunnerDeleteButton, RunnerEditButton, RunnerPauseButton, RunnerHeader, RunnerDetails, + RunnerJobs, }, directives: { GlTooltip: GlTooltipDirective, @@ -63,6 +68,9 @@ export default { canDelete() { return this.runner.userPermissions?.deleteRunner; }, + jobCount() { + return formatJobCount(this.runner?.jobCount); + }, }, errorCaptured(error) { this.reportToSentry(error); @@ -88,6 +96,24 @@ export default { </template> </runner-header> - <runner-details :runner="runner" /> + <runner-details :runner="runner"> + <template #jobs-tab> + <gl-tab> + <template #title> + {{ s__('Runners|Jobs') }} + <gl-badge + v-if="jobCount" + data-testid="job-count-badge" + class="gl-tab-counter-badge" + size="sm" + > + {{ jobCount }} + </gl-badge> + </template> + + <runner-jobs v-if="runner" :runner="runner" /> + </gl-tab> + </template> + </runner-details> </div> </template> diff --git a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue index c2bb635e056..a90ef2d3530 100644 --- a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue +++ b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue @@ -10,6 +10,7 @@ import RegistrationDropdown from '../components/registration/registration_dropdo import RunnerFilteredSearchBar from '../components/runner_filtered_search_bar.vue'; import RunnerBulkDelete from '../components/runner_bulk_delete.vue'; import RunnerList from '../components/runner_list.vue'; +import RunnerListEmptyState from '../components/runner_list_empty_state.vue'; import RunnerName from '../components/runner_name.vue'; import RunnerStats from '../components/stat/runner_stats.vue'; import RunnerPagination from '../components/runner_pagination.vue'; @@ -35,6 +36,7 @@ import { fromUrlQueryToSearch, fromSearchToUrl, fromSearchToVariables, + isSearchFiltered, } from '../runner_search_utils'; import { captureException } from '../sentry_utils'; @@ -91,6 +93,7 @@ export default { RunnerFilteredSearchBar, RunnerBulkDelete, RunnerList, + RunnerListEmptyState, RunnerName, RunnerStats, RunnerPagination, @@ -98,7 +101,7 @@ export default { RunnerActionsCell, }, mixins: [glFeatureFlagMixin()], - inject: ['localMutations'], + inject: ['emptyStateSvgPath', 'emptyStateFilteredSvgPath', 'localMutations'], props: { registrationToken: { type: String, @@ -190,6 +193,9 @@ export default { // Rollout issue: https://gitlab.com/gitlab-org/gitlab/-/issues/353981 return this.glFeatures.adminRunnersBulkDelete; }, + isSearchFiltered() { + return isSearchFiltered(this.search); + }, }, watch: { search: { @@ -298,9 +304,13 @@ export default { :stale-runners-count="staleRunnersTotal" /> - <div v-if="noRunnersFound" class="gl-text-center gl-p-5"> - {{ __('No runners found') }} - </div> + <runner-list-empty-state + v-if="noRunnersFound" + :registration-token="registrationToken" + :is-search-filtered="isSearchFiltered" + :svg-path="emptyStateSvgPath" + :filtered-svg-path="emptyStateFilteredSvgPath" + /> <template v-else> <runner-bulk-delete v-if="isBulkDeleteEnabled" /> <runner-list diff --git a/app/assets/javascripts/runner/admin_runners/index.js b/app/assets/javascripts/runner/admin_runners/index.js index b1d8442bb32..7bb6cd5689e 100644 --- a/app/assets/javascripts/runner/admin_runners/index.js +++ b/app/assets/javascripts/runner/admin_runners/index.js @@ -34,6 +34,8 @@ export const initAdminRunners = (selector = '#js-admin-runners') => { registrationToken, onlineContactTimeoutSecs, staleTimeoutSecs, + emptyStateSvgPath, + emptyStateFilteredSvgPath, } = el.dataset; const { cacheConfig, typeDefs, localMutations } = createLocalState(); @@ -50,6 +52,8 @@ export const initAdminRunners = (selector = '#js-admin-runners') => { localMutations, onlineContactTimeoutSecs, staleTimeoutSecs, + emptyStateSvgPath, + emptyStateFilteredSvgPath, }, render(h) { return h(AdminRunnersApp, { diff --git a/app/assets/javascripts/runner/components/cells/runner_status_cell.vue b/app/assets/javascripts/runner/components/cells/runner_status_cell.vue index 93f86ae2a2c..a48db9f8ac8 100644 --- a/app/assets/javascripts/runner/components/cells/runner_status_cell.vue +++ b/app/assets/javascripts/runner/components/cells/runner_status_cell.vue @@ -7,6 +7,8 @@ import RunnerPausedBadge from '../runner_paused_badge.vue'; export default { components: { RunnerStatusBadge, + RunnerUpgradeStatusBadge: () => + import('ee_component/runner/components/runner_upgrade_status_badge.vue'), RunnerPausedBadge, }, directives: { @@ -33,6 +35,11 @@ export default { size="sm" class="gl-display-inline-block gl-max-w-full gl-text-truncate" /> + <runner-upgrade-status-badge + :runner="runner" + size="sm" + class="gl-display-inline-block gl-max-w-full gl-text-truncate" + /> <runner-paused-badge v-if="paused" size="sm" diff --git a/app/assets/javascripts/runner/components/registration/registration_dropdown.vue b/app/assets/javascripts/runner/components/registration/registration_dropdown.vue index bb2a8ddf151..212ad5fa5a0 100644 --- a/app/assets/javascripts/runner/components/registration/registration_dropdown.vue +++ b/app/assets/javascripts/runner/components/registration/registration_dropdown.vue @@ -1,11 +1,5 @@ <script> -import { - GlFormGroup, - GlDropdown, - GlDropdownForm, - GlDropdownItem, - GlDropdownDivider, -} from '@gitlab/ui'; +import { GlDropdown, GlDropdownForm, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui'; import { s__ } from '~/locale'; import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue'; import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../../constants'; @@ -17,10 +11,8 @@ export default { showInstallationInstructions: s__( 'Runners|Show runner installation and registration instructions', ), - registrationToken: s__('Runners|Registration token'), }, components: { - GlFormGroup, GlDropdown, GlDropdownForm, GlDropdownItem, @@ -45,7 +37,6 @@ export default { data() { return { currentRegistrationToken: this.registrationToken, - instructionsModalOpened: false, }; }, computed: { @@ -64,15 +55,7 @@ export default { }, methods: { onShowInstructionsClick() { - // Rendering the modal on demand, to avoid - // loading instructions prematurely from API. - this.instructionsModalOpened = true; - - this.$nextTick(() => { - // $refs.runnerInstructionsModal is defined in - // the tick after the modal is rendered - this.$refs.runnerInstructionsModal.show(); - }); + this.$refs.runnerInstructionsModal.show(); }, onTokenReset(token) { this.currentRegistrationToken = token; @@ -94,7 +77,6 @@ export default { <gl-dropdown-item @click.capture.native.stop="onShowInstructionsClick"> {{ $options.i18n.showInstallationInstructions }} <runner-instructions-modal - v-if="instructionsModalOpened" ref="runnerInstructionsModal" :registration-token="currentRegistrationToken" data-testid="runner-instructions-modal" @@ -102,9 +84,7 @@ export default { </gl-dropdown-item> <gl-dropdown-divider /> <gl-dropdown-form class="gl-p-4!"> - <gl-form-group class="gl-mb-0" :label="$options.i18n.registrationToken"> - <registration-token :value="currentRegistrationToken" /> - </gl-form-group> + <registration-token input-id="token-value" :value="currentRegistrationToken" /> </gl-dropdown-form> <gl-dropdown-divider /> <registration-token-reset-dropdown-item :type="type" @tokenReset="onTokenReset" /> diff --git a/app/assets/javascripts/runner/components/registration/registration_token.vue b/app/assets/javascripts/runner/components/registration/registration_token.vue index 68c6429a056..6b4e6a929b7 100644 --- a/app/assets/javascripts/runner/components/registration/registration_token.vue +++ b/app/assets/javascripts/runner/components/registration/registration_token.vue @@ -6,13 +6,27 @@ export default { components: { InputCopyToggleVisibility, }, + i18n: { + registrationToken: s__('Runners|Registration token'), + }, props: { + inputId: { + type: String, + required: true, + }, value: { type: String, required: false, default: '', }, }, + computed: { + formInputGroupProps() { + return { + id: this.inputId, + }; + }, + }, methods: { onCopy() { // value already in the clipboard, simply notify the user @@ -26,8 +40,10 @@ export default { <input-copy-toggle-visibility class="gl-m-0" :value="value" - data-testid="token-value" + :label="$options.i18n.registrationToken" + :label-for="inputId" :copy-button-title="$options.I18N_COPY_BUTTON_TITLE" + :form-input-group-props="formInputGroupProps" @copy="onCopy" /> </template> diff --git a/app/assets/javascripts/runner/components/runner_details.vue b/app/assets/javascripts/runner/components/runner_details.vue index 3734f436034..75ddec6c716 100644 --- a/app/assets/javascripts/runner/components/runner_details.vue +++ b/app/assets/javascripts/runner/components/runner_details.vue @@ -1,26 +1,24 @@ <script> -import { GlBadge, GlTabs, GlTab, GlIntersperse } from '@gitlab/ui'; +import { GlTabs, GlTab, GlIntersperse } from '@gitlab/ui'; import { s__ } from '~/locale'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import { timeIntervalInWords } from '~/lib/utils/datetime_utility'; import { ACCESS_LEVEL_REF_PROTECTED, GROUP_TYPE, PROJECT_TYPE } from '../constants'; -import { formatJobCount } from '../utils'; import RunnerDetail from './runner_detail.vue'; import RunnerGroups from './runner_groups.vue'; import RunnerProjects from './runner_projects.vue'; -import RunnerJobs from './runner_jobs.vue'; import RunnerTags from './runner_tags.vue'; export default { components: { - GlBadge, GlTabs, GlTab, GlIntersperse, RunnerDetail, + RunnerMaintenanceNoteDetail: () => + import('ee_component/runner/components/runner_maintenance_note_detail.vue'), RunnerGroups, RunnerProjects, - RunnerJobs, RunnerTags, TimeAgo, }, @@ -57,9 +55,6 @@ export default { isProjectRunner() { return this.runner?.runnerType === PROJECT_TYPE; }, - jobCount() { - return formatJobCount(this.runner?.jobCount); - }, }, ACCESS_LEVEL_REF_PROTECTED, }; @@ -106,6 +101,11 @@ export default { /> </template> </runner-detail> + + <runner-maintenance-note-detail + class="gl-pt-4 gl-border-t-gray-100 gl-border-t-1 gl-border-t-solid" + :value="runner.maintenanceNoteHtml" + /> </dl> </div> @@ -113,15 +113,6 @@ export default { <runner-projects v-if="isProjectRunner" :runner="runner" /> </template> </gl-tab> - <gl-tab> - <template #title> - {{ s__('Runners|Jobs') }} - <gl-badge v-if="jobCount" data-testid="job-count-badge" class="gl-ml-1" size="sm"> - {{ jobCount }} - </gl-badge> - </template> - - <runner-jobs v-if="runner" :runner="runner" /> - </gl-tab> + <slot name="jobs-tab"></slot> </gl-tabs> </template> diff --git a/app/assets/javascripts/runner/components/runner_jobs.vue b/app/assets/javascripts/runner/components/runner_jobs.vue index 4eb1312b204..57afdc4b9be 100644 --- a/app/assets/javascripts/runner/components/runner_jobs.vue +++ b/app/assets/javascripts/runner/components/runner_jobs.vue @@ -1,5 +1,5 @@ <script> -import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; +import { GlSkeletonLoader } from '@gitlab/ui'; import { createAlert } from '~/flash'; import runnerJobsQuery from '../graphql/show/runner_jobs.query.graphql'; import { I18N_FETCH_ERROR, I18N_NO_JOBS_FOUND, RUNNER_DETAILS_JOBS_PAGE_SIZE } from '../constants'; @@ -11,7 +11,7 @@ import RunnerPagination from './runner_pagination.vue'; export default { name: 'RunnerJobs', components: { - GlSkeletonLoading, + GlSkeletonLoader, RunnerJobsTable, RunnerPagination, }, @@ -68,7 +68,9 @@ export default { <template> <div class="gl-pt-3"> - <gl-skeleton-loading v-if="loading" class="gl-py-5" /> + <div v-if="loading" class="gl-py-5"> + <gl-skeleton-loader /> + </div> <runner-jobs-table v-else-if="jobs.items.length" :jobs="jobs.items" /> <p v-else>{{ $options.I18N_NO_JOBS_FOUND }}</p> diff --git a/app/assets/javascripts/runner/components/runner_list.vue b/app/assets/javascripts/runner/components/runner_list.vue index dcfd4b84dd2..f1f99c728c5 100644 --- a/app/assets/javascripts/runner/components/runner_list.vue +++ b/app/assets/javascripts/runner/components/runner_list.vue @@ -12,7 +12,7 @@ import RunnerStatusCell from './cells/runner_status_cell.vue'; import RunnerTags from './runner_tags.vue'; const defaultFields = [ - tableField({ key: 'status', label: s__('Runners|Status') }), + tableField({ key: 'status', label: s__('Runners|Status'), thClasses: ['gl-w-15p'] }), tableField({ key: 'summary', label: s__('Runners|Runner'), thClasses: ['gl-lg-w-25p'] }), tableField({ key: 'version', label: __('Version') }), tableField({ key: 'jobCount', label: __('Jobs') }), diff --git a/app/assets/javascripts/runner/components/runner_list_empty_state.vue b/app/assets/javascripts/runner/components/runner_list_empty_state.vue new file mode 100644 index 00000000000..ab9cde6a401 --- /dev/null +++ b/app/assets/javascripts/runner/components/runner_list_empty_state.vue @@ -0,0 +1,75 @@ +<script> +import { GlEmptyState, GlLink, GlSprintf, GlModalDirective } from '@gitlab/ui'; +import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue'; + +export default { + components: { + GlEmptyState, + GlLink, + GlSprintf, + RunnerInstructionsModal, + }, + directives: { + GlModal: GlModalDirective, + }, + props: { + isSearchFiltered: { + type: Boolean, + required: false, + default: false, + }, + svgPath: { + type: String, + required: false, + default: '', + }, + filteredSvgPath: { + type: String, + required: false, + default: '', + }, + registrationToken: { + type: String, + required: false, + default: null, + }, + }, + modalId: 'runners-empty-state-instructions-modal', + svgHeight: 145, +}; +</script> + +<template> + <gl-empty-state + v-if="isSearchFiltered" + :title="s__('Runners|No results found')" + :svg-path="filteredSvgPath" + :svg-height="$options.svgHeight" + :description="s__('Runners|Edit your search and try again')" + /> + <gl-empty-state + v-else + :title="s__('Runners|Get started with runners')" + :svg-path="svgPath" + :svg-height="$options.svgHeight" + > + <template #description> + <gl-sprintf + :message=" + s__( + 'Runners|Runners are the agents that run your CI/CD jobs. Follow the %{linkStart}installation and registration instructions%{linkEnd} to set up a runner.', + ) + " + > + <template #link="{ content }"> + <gl-link v-gl-modal="$options.modalId">{{ content }}</gl-link> + </template> + </gl-sprintf> + + <runner-instructions-modal + :modal-id="$options.modalId" + :registration-token="registrationToken" + /> + </template> + </gl-empty-state> +</template> diff --git a/app/assets/javascripts/runner/components/runner_projects.vue b/app/assets/javascripts/runner/components/runner_projects.vue index daca718e2b5..c0c0c14e91e 100644 --- a/app/assets/javascripts/runner/components/runner_projects.vue +++ b/app/assets/javascripts/runner/components/runner_projects.vue @@ -1,5 +1,5 @@ <script> -import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; +import { GlSkeletonLoader } from '@gitlab/ui'; import { sprintf, formatNumber } from '~/locale'; import { createAlert } from '~/flash'; import runnerProjectsQuery from '../graphql/show/runner_projects.query.graphql'; @@ -17,7 +17,7 @@ import RunnerPagination from './runner_pagination.vue'; export default { name: 'RunnerProjects', components: { - GlSkeletonLoading, + GlSkeletonLoader, RunnerAssignedItem, RunnerPagination, }, @@ -86,7 +86,9 @@ export default { {{ heading }} </h3> - <gl-skeleton-loading v-if="loading" class="gl-py-5" /> + <div v-if="loading" class="gl-py-5"> + <gl-skeleton-loader /> + </div> <template v-else-if="projects.items.length"> <runner-assigned-item v-for="(project, i) in projects.items" diff --git a/app/assets/javascripts/runner/components/runner_update_form.vue b/app/assets/javascripts/runner/components/runner_update_form.vue index 56c9007a781..c613e2d2467 100644 --- a/app/assets/javascripts/runner/components/runner_update_form.vue +++ b/app/assets/javascripts/runner/components/runner_update_form.vue @@ -31,6 +31,8 @@ export default { GlFormGroup, GlFormInputGroup, GlSkeletonLoader, + RunnerMaintenanceNoteField: () => + import('ee_component/runner/components/runner_maintenance_note_field.vue'), RunnerUpdateCostFactorFields: () => import('ee_component/runner/components/runner_update_cost_factor_fields.vue'), }, @@ -115,9 +117,13 @@ export default { <h4 class="gl-font-lg gl-my-5">{{ s__('Runners|Details') }}</h4> <gl-skeleton-loader v-if="loading" /> - <gl-form-group v-else :label="__('Description')" data-testid="runner-field-description"> - <gl-form-input-group v-model="model.description" /> - </gl-form-group> + + <template v-else> + <gl-form-group :label="__('Description')" data-testid="runner-field-description"> + <gl-form-input-group v-model="model.description" /> + </gl-form-group> + <runner-maintenance-note-field v-model="model.maintenanceNote" /> + </template> <hr /> diff --git a/app/assets/javascripts/runner/graphql/list/admin_runners.query.graphql b/app/assets/javascripts/runner/graphql/list/admin_runners.query.graphql index 5d0450e7418..61bfe03bf6e 100644 --- a/app/assets/javascripts/runner/graphql/list/admin_runners.query.graphql +++ b/app/assets/javascripts/runner/graphql/list/admin_runners.query.graphql @@ -1,4 +1,4 @@ -#import "~/runner/graphql/list/list_item.fragment.graphql" +#import "ee_else_ce/runner/graphql/list/list_item.fragment.graphql" #import "~/graphql_shared/fragments/page_info.fragment.graphql" query getRunners( diff --git a/app/assets/javascripts/runner/graphql/list/group_runners.query.graphql b/app/assets/javascripts/runner/graphql/list/group_runners.query.graphql index b4f2b5cd8c8..8755636a7ad 100644 --- a/app/assets/javascripts/runner/graphql/list/group_runners.query.graphql +++ b/app/assets/javascripts/runner/graphql/list/group_runners.query.graphql @@ -1,4 +1,4 @@ -#import "~/runner/graphql/list/list_item.fragment.graphql" +#import "ee_else_ce/runner/graphql/list/list_item.fragment.graphql" #import "~/graphql_shared/fragments/page_info.fragment.graphql" query getGroupRunners( diff --git a/app/assets/javascripts/runner/graphql/list/list_item.fragment.graphql b/app/assets/javascripts/runner/graphql/list/list_item.fragment.graphql index 620c18c5bc0..19a5a48ea75 100644 --- a/app/assets/javascripts/runner/graphql/list/list_item.fragment.graphql +++ b/app/assets/javascripts/runner/graphql/list/list_item.fragment.graphql @@ -1,20 +1,5 @@ +#import "./list_item_shared.fragment.graphql" + fragment ListItem on CiRunner { - __typename - id - description - runnerType - shortSha - version - revision - ipAddress - active - locked - jobCount - tagList - contactedAt - status(legacyMode: null) - userPermissions { - updateRunner - deleteRunner - } + ...ListItemShared } diff --git a/app/assets/javascripts/runner/graphql/list/list_item_shared.fragment.graphql b/app/assets/javascripts/runner/graphql/list/list_item_shared.fragment.graphql new file mode 100644 index 00000000000..cf925359ffb --- /dev/null +++ b/app/assets/javascripts/runner/graphql/list/list_item_shared.fragment.graphql @@ -0,0 +1,20 @@ +fragment ListItemShared on CiRunner { + __typename + id + description + runnerType + shortSha + version + revision + ipAddress + active + locked + jobCount + tagList + contactedAt + status(legacyMode: null) + userPermissions { + updateRunner + deleteRunner + } +} diff --git a/app/assets/javascripts/runner/graphql/show/runner.query.graphql b/app/assets/javascripts/runner/graphql/show/runner.query.graphql index 178816b58bd..dec434b43a5 100644 --- a/app/assets/javascripts/runner/graphql/show/runner.query.graphql +++ b/app/assets/javascripts/runner/graphql/show/runner.query.graphql @@ -1,41 +1,7 @@ +#import "ee_else_ce/runner/graphql/show/runner_details.fragment.graphql" + query getRunner($id: CiRunnerID!) { runner(id: $id) { - __typename - id - shortSha - runnerType - active - accessLevel - runUntagged - locked - ipAddress - executorName - architectureName - platformName - description - maximumTimeout - jobCount - tagList - createdAt - status(legacyMode: null) - contactedAt - version - editAdminUrl - userPermissions { - updateRunner - deleteRunner - } - groups { - # Only a single group can be loaded here, while projects - # are loaded separately using the query with pagination - # parameters `runner_projects.query.graphql`. - nodes { - id - avatarUrl - name - fullName - webUrl - } - } + ...RunnerDetails } } diff --git a/app/assets/javascripts/runner/graphql/show/runner_details.fragment.graphql b/app/assets/javascripts/runner/graphql/show/runner_details.fragment.graphql new file mode 100644 index 00000000000..2449ee0fc0f --- /dev/null +++ b/app/assets/javascripts/runner/graphql/show/runner_details.fragment.graphql @@ -0,0 +1,5 @@ +#import "./runner_details_shared.fragment.graphql" + +fragment RunnerDetails on CiRunner { + ...RunnerDetailsShared +} diff --git a/app/assets/javascripts/runner/graphql/show/runner_details_shared.fragment.graphql b/app/assets/javascripts/runner/graphql/show/runner_details_shared.fragment.graphql new file mode 100644 index 00000000000..b79ad4d9280 --- /dev/null +++ b/app/assets/javascripts/runner/graphql/show/runner_details_shared.fragment.graphql @@ -0,0 +1,39 @@ +fragment RunnerDetailsShared on CiRunner { + __typename + id + shortSha + runnerType + active + accessLevel + runUntagged + locked + ipAddress + executorName + architectureName + platformName + description + maximumTimeout + jobCount + tagList + createdAt + status(legacyMode: null) + contactedAt + version + editAdminUrl + userPermissions { + updateRunner + deleteRunner + } + groups { + # Only a single group can be loaded here, while projects + # are loaded separately using the query with pagination + # parameters `runner_projects.query.graphql`. + nodes { + id + avatarUrl + name + fullName + webUrl + } + } +} diff --git a/app/assets/javascripts/runner/group_runner_show/group_runner_show_app.vue b/app/assets/javascripts/runner/group_runner_show/group_runner_show_app.vue new file mode 100644 index 00000000000..c336e091fdf --- /dev/null +++ b/app/assets/javascripts/runner/group_runner_show/group_runner_show_app.vue @@ -0,0 +1,114 @@ +<script> +import { GlBadge, GlTab, GlTooltipDirective } from '@gitlab/ui'; +import { createAlert, VARIANT_SUCCESS } from '~/flash'; +import { TYPE_CI_RUNNER } from '~/graphql_shared/constants'; +import { convertToGraphQLId } from '~/graphql_shared/utils'; +import { redirectTo } from '~/lib/utils/url_utility'; +import { formatJobCount } from '../utils'; +import RunnerDeleteButton from '../components/runner_delete_button.vue'; +import RunnerEditButton from '../components/runner_edit_button.vue'; +import RunnerPauseButton from '../components/runner_pause_button.vue'; +import RunnerHeader from '../components/runner_header.vue'; +import RunnerDetails from '../components/runner_details.vue'; +import RunnerJobs from '../components/runner_jobs.vue'; +import { I18N_FETCH_ERROR } from '../constants'; +import runnerQuery from '../graphql/show/runner.query.graphql'; +import { captureException } from '../sentry_utils'; +import { saveAlertToLocalStorage } from '../local_storage_alert/save_alert_to_local_storage'; + +export default { + name: 'GroupRunnerShowApp', + components: { + GlBadge, + GlTab, + RunnerDeleteButton, + RunnerEditButton, + RunnerPauseButton, + RunnerHeader, + RunnerDetails, + RunnerJobs, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + runnerId: { + type: String, + required: true, + }, + runnersPath: { + type: String, + required: true, + }, + }, + data() { + return { + runner: null, + }; + }, + apollo: { + runner: { + query: runnerQuery, + variables() { + return { + id: convertToGraphQLId(TYPE_CI_RUNNER, this.runnerId), + }; + }, + error(error) { + createAlert({ message: I18N_FETCH_ERROR }); + + this.reportToSentry(error); + }, + }, + }, + computed: { + canUpdate() { + return this.runner.userPermissions?.updateRunner; + }, + canDelete() { + return this.runner.userPermissions?.deleteRunner; + }, + jobCount() { + return formatJobCount(this.runner?.jobCount); + }, + }, + errorCaptured(error) { + this.reportToSentry(error); + }, + methods: { + reportToSentry(error) { + captureException({ error, component: this.$options.name }); + }, + onDeleted({ message }) { + saveAlertToLocalStorage({ message, variant: VARIANT_SUCCESS }); + redirectTo(this.runnersPath); + }, + }, +}; +</script> +<template> + <div> + <runner-header v-if="runner" :runner="runner"> + <template #actions> + <runner-edit-button v-if="canUpdate && runner.editAdminUrl" :href="runner.editAdminUrl" /> + <runner-pause-button v-if="canUpdate" :runner="runner" /> + <runner-delete-button v-if="canDelete" :runner="runner" @deleted="onDeleted" /> + </template> + </runner-header> + + <runner-details :runner="runner"> + <template #jobs-tab> + <gl-tab> + <template #title> + {{ s__('Runners|Jobs') }} + <gl-badge v-if="jobCount" data-testid="job-count-badge" class="gl-ml-1" size="sm"> + {{ jobCount }} + </gl-badge> + </template> + + <runner-jobs v-if="runner" :runner="runner" /> + </gl-tab> + </template> + </runner-details> + </div> +</template> diff --git a/app/assets/javascripts/runner/group_runner_show/index.js b/app/assets/javascripts/runner/group_runner_show/index.js new file mode 100644 index 00000000000..d1b87c8e427 --- /dev/null +++ b/app/assets/javascripts/runner/group_runner_show/index.js @@ -0,0 +1,36 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; +import { showAlertFromLocalStorage } from '../local_storage_alert/show_alert_from_local_storage'; +import GroupRunnerShowApp from './group_runner_show_app.vue'; + +Vue.use(VueApollo); + +export const initAdminRunnerShow = (selector = '#js-group-runner-show') => { + showAlertFromLocalStorage(); + + const el = document.querySelector(selector); + + if (!el) { + return null; + } + + const { runnerId, runnersPath } = el.dataset; + + const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), + }); + + return new Vue({ + el, + apolloProvider, + render(h) { + return h(GroupRunnerShowApp, { + props: { + runnerId, + runnersPath, + }, + }); + }, + }); +}; diff --git a/app/assets/javascripts/runner/group_runners/group_runners_app.vue b/app/assets/javascripts/runner/group_runners/group_runners_app.vue index b5bd4b111fd..641b3a8f560 100644 --- a/app/assets/javascripts/runner/group_runners/group_runners_app.vue +++ b/app/assets/javascripts/runner/group_runners/group_runners_app.vue @@ -8,6 +8,7 @@ import { fetchPolicies } from '~/lib/graphql'; import RegistrationDropdown from '../components/registration/registration_dropdown.vue'; import RunnerFilteredSearchBar from '../components/runner_filtered_search_bar.vue'; import RunnerList from '../components/runner_list.vue'; +import RunnerListEmptyState from '../components/runner_list_empty_state.vue'; import RunnerName from '../components/runner_name.vue'; import RunnerStats from '../components/stat/runner_stats.vue'; import RunnerPagination from '../components/runner_pagination.vue'; @@ -31,6 +32,7 @@ import { fromUrlQueryToSearch, fromSearchToUrl, fromSearchToVariables, + isSearchFiltered, } from '../runner_search_utils'; import { captureException } from '../sentry_utils'; @@ -86,12 +88,14 @@ export default { RegistrationDropdown, RunnerFilteredSearchBar, RunnerList, + RunnerListEmptyState, RunnerName, RunnerStats, RunnerPagination, RunnerTypeTabs, RunnerActionsCell, }, + inject: ['emptyStateSvgPath', 'emptyStateFilteredSvgPath'], props: { registrationToken: { type: String, @@ -196,6 +200,9 @@ export default { filteredSearchNamespace() { return `${GROUP_FILTERED_SEARCH_NAMESPACE}/${this.groupFullPath}`; }, + isSearchFiltered() { + return isSearchFiltered(this.search); + }, }, watch: { search: { @@ -299,9 +306,13 @@ export default { :stale-runners-count="staleRunnersTotal" /> - <div v-if="noRunnersFound" class="gl-text-center gl-p-5"> - {{ __('No runners found') }} - </div> + <runner-list-empty-state + v-if="noRunnersFound" + :registration-token="registrationToken" + :is-search-filtered="isSearchFiltered" + :svg-path="emptyStateSvgPath" + :filtered-svg-path="emptyStateFilteredSvgPath" + /> <template v-else> <runner-list :runners="runners.items" :loading="runnersLoading"> <template #runner-name="{ runner }"> diff --git a/app/assets/javascripts/runner/group_runners/index.js b/app/assets/javascripts/runner/group_runners/index.js index 0dade30f820..feed6b0ceb7 100644 --- a/app/assets/javascripts/runner/group_runners/index.js +++ b/app/assets/javascripts/runner/group_runners/index.js @@ -22,6 +22,8 @@ export const initGroupRunners = (selector = '#js-group-runners') => { groupRunnersLimitedCount, onlineContactTimeoutSecs, staleTimeoutSecs, + emptyStateSvgPath, + emptyStateFilteredSvgPath, } = el.dataset; const apolloProvider = new VueApollo({ @@ -36,6 +38,8 @@ export const initGroupRunners = (selector = '#js-group-runners') => { groupId, onlineContactTimeoutSecs: parseInt(onlineContactTimeoutSecs, 10), staleTimeoutSecs: parseInt(staleTimeoutSecs, 10), + emptyStateSvgPath, + emptyStateFilteredSvgPath, }, render(h) { return h(GroupRunnersApp, { diff --git a/app/assets/javascripts/runner/runner_search_utils.js b/app/assets/javascripts/runner/runner_search_utils.js index 0d688ed65ef..e01878f355a 100644 --- a/app/assets/javascripts/runner/runner_search_utils.js +++ b/app/assets/javascripts/runner/runner_search_utils.js @@ -236,3 +236,17 @@ export const fromSearchToVariables = ({ ...paginationVariables, }; }; + +/** + * Decides whether or not a search object is the "default" or empty. + * + * A search is filtered if the user has entered filtering criteria. + * + * @param {Object} search + * @returns true if this search is filtered, false otherwise + */ +export const isSearchFiltered = ({ runnerType = null, filters = [], pagination = {} } = {}) => { + return Boolean( + runnerType !== null || filters?.length !== 0 || (pagination && pagination?.page !== 1), + ); +}; diff --git a/app/assets/javascripts/search/store/actions.js b/app/assets/javascripts/search/store/actions.js index 40513a7f363..dc8b6201953 100644 --- a/app/assets/javascripts/search/store/actions.js +++ b/app/assets/javascripts/search/store/actions.js @@ -18,7 +18,7 @@ export const fetchGroups = ({ commit }, search) => { }); }; -export const fetchProjects = ({ commit, state }, search, emptyCallback = () => {}) => { +export const fetchProjects = ({ commit, state }, search) => { commit(types.REQUEST_PROJECTS); const groupId = state.query?.group_id; @@ -31,17 +31,11 @@ export const fetchProjects = ({ commit, state }, search, emptyCallback = () => { }; if (groupId) { - Api.groupProjects( - groupId, - search, - { - order_by: 'similarity', - with_shared: false, - include_subgroups: true, - }, - emptyCallback, - true, - ) + Api.groupProjects(groupId, search, { + order_by: 'similarity', + with_shared: false, + include_subgroups: true, + }) .then(handleSuccess) .catch(handleCatch); } else { diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js index b2bf913fe45..94244eeb12e 100644 --- a/app/assets/javascripts/search_autocomplete.js +++ b/app/assets/javascripts/search_autocomplete.js @@ -477,7 +477,7 @@ export class SearchAutocomplete { } getAvatar(item) { - if (!Object.hasOwnProperty.call(item, 'avatar_url')) { + if (!Object.prototype.hasOwnProperty.call(item, 'avatar_url')) { return false; } diff --git a/app/assets/javascripts/search_settings/components/search_settings.vue b/app/assets/javascripts/search_settings/components/search_settings.vue index f6439c6f4c4..e9cc9616fd0 100644 --- a/app/assets/javascripts/search_settings/components/search_settings.vue +++ b/app/assets/javascripts/search_settings/components/search_settings.vue @@ -184,7 +184,7 @@ export default { <gl-search-box-by-type :value="searchTerm" :debounce="$options.TYPING_DELAY" - :placeholder="__('Search settings')" + :placeholder="__('Search page')" @input="search" /> </template> diff --git a/app/assets/javascripts/security_configuration/components/app.vue b/app/assets/javascripts/security_configuration/components/app.vue index d0c4ad3646c..34910781247 100644 --- a/app/assets/javascripts/security_configuration/components/app.vue +++ b/app/assets/javascripts/security_configuration/components/app.vue @@ -4,10 +4,9 @@ import { __, s__ } from '~/locale'; import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue'; import SectionLayout from '~/vue_shared/security_configuration/components/section_layout.vue'; -import currentLicenseQuery from '~/security_configuration/graphql/current_license.query.graphql'; import AutoDevOpsAlert from './auto_dev_ops_alert.vue'; import AutoDevOpsEnabledAlert from './auto_dev_ops_enabled_alert.vue'; -import { AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY, LICENSE_ULTIMATE } from './constants'; +import { AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY } from './constants'; import FeatureCard from './feature_card.vue'; import TrainingProviderList from './training_provider_list.vue'; import UpgradeBanner from './upgrade_banner.vue'; @@ -51,17 +50,6 @@ export default { TrainingProviderList, }, inject: ['projectFullPath', 'vulnerabilityTrainingDocsPath'], - apollo: { - currentLicensePlan: { - query: currentLicenseQuery, - update({ currentLicense }) { - return currentLicense?.plan; - }, - error() { - this.hasCurrentLicenseFetchError = true; - }, - }, - }, props: { augmentedSecurityFeatures: { type: Array, @@ -96,13 +84,15 @@ export default { required: false, default: '', }, + securityTrainingEnabled: { + type: Boolean, + required: true, + }, }, data() { return { autoDevopsEnabledAlertDismissedProjects: [], errorMessage: '', - currentLicensePlan: '', - hasCurrentLicenseFetchError: false, }; }, computed: { @@ -123,12 +113,6 @@ export default { !this.autoDevopsEnabledAlertDismissedProjects.includes(this.projectFullPath) ); }, - shouldShowVulnerabilityManagementTab() { - // if the query fails (if the plan is `null` also means an error has occurred) we still want to show the feature - const hasQueryError = this.hasCurrentLicenseFetchError || this.currentLicensePlan === null; - - return hasQueryError || this.currentLicensePlan === LICENSE_ULTIMATE; - }, }, methods: { dismissAutoDevopsEnabledAlert() { @@ -270,7 +254,7 @@ export default { </section-layout> </gl-tab> <gl-tab - v-if="shouldShowVulnerabilityManagementTab" + v-if="securityTrainingEnabled" data-testid="vulnerability-management-tab" :title="$options.i18n.vulnerabilityManagement" query-param-value="vulnerability-management" diff --git a/app/assets/javascripts/security_configuration/components/constants.js b/app/assets/javascripts/security_configuration/components/constants.js index 5b04ad6f9ba..e4d2bd08f50 100644 --- a/app/assets/javascripts/security_configuration/components/constants.js +++ b/app/assets/javascripts/security_configuration/components/constants.js @@ -310,7 +310,3 @@ export const TEMP_PROVIDER_URLS = { Kontra: 'https://application.security/', [__('Secure Code Warrior')]: 'https://www.securecodewarrior.com/', }; - -export const LICENSE_ULTIMATE = 'ultimate'; -export const LICENSE_FREE = 'free'; -export const LICENSE_PREMIUM = 'premium'; diff --git a/app/assets/javascripts/security_configuration/graphql/current_license.query.graphql b/app/assets/javascripts/security_configuration/graphql/current_license.query.graphql deleted file mode 100644 index 9ab4f4d4347..00000000000 --- a/app/assets/javascripts/security_configuration/graphql/current_license.query.graphql +++ /dev/null @@ -1,6 +0,0 @@ -query getCurrentLicensePlan { - currentLicense { - id - plan - } -} diff --git a/app/assets/javascripts/security_configuration/index.js b/app/assets/javascripts/security_configuration/index.js index dcc41a38067..637d510e684 100644 --- a/app/assets/javascripts/security_configuration/index.js +++ b/app/assets/javascripts/security_configuration/index.js @@ -56,6 +56,7 @@ export const initSecurityConfiguration = (el) => { 'gitlabCiPresent', 'autoDevopsEnabled', 'canEnableAutoDevops', + 'securityTrainingEnabled', ]), }, }); diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue index ef40de82d01..c20dd3b677d 100644 --- a/app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue +++ b/app/assets/javascripts/sidebar/components/assignees/assignee_avatar_link.vue @@ -1,6 +1,7 @@ <script> import { GlTooltipDirective, GlLink } from '@gitlab/ui'; import { IssuableType } from '~/issues/constants'; +import { isGid, getIdFromGraphQLId } from '~/graphql_shared/utils'; import { __ } from '~/locale'; import { isUserBusy } from '~/set_status_modal/utils'; import AssigneeAvatar from './assignee_avatar.vue'; @@ -94,6 +95,9 @@ export default { assigneeUrl() { return this.user.web_url || this.user.webUrl; }, + assigneeId() { + return isGid(this.user.id) ? getIdFromGraphQLId(this.user.id) : this.user.id; + }, }, }; </script> @@ -103,7 +107,7 @@ export default { <gl-link :href="assigneeUrl" :title="tooltipTitle" - :data-user-id="user.id" + :data-user-id="assigneeId" data-placement="left" class="gl-display-inline-block js-user-link" > diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue index bdd014163a0..3602b5ec4f6 100644 --- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue +++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue @@ -55,7 +55,12 @@ export default { {{ __('None') }} <template v-if="editable"> - - <button type="button" class="btn-link" data-testid="assign-yourself" @click="assignSelf"> + <button + type="button" + class="gl-button btn-link gl-reset-color!" + data-testid="assign-yourself" + @click="assignSelf" + > {{ __('assign yourself') }} </button> </template> diff --git a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee.vue b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee.vue index af4227fa48d..46bda26c327 100644 --- a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee.vue +++ b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee.vue @@ -26,7 +26,7 @@ export default { }; </script> <template> - <button type="button" class="btn-link"> + <button type="button" class="gl-button btn-link"> <assignee-avatar :user="user" :img-size="24" :issuable-type="issuableType" /> <user-name-with-status :name="user.name" diff --git a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue index 50b1955abcc..f894ef0c42d 100644 --- a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue +++ b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue @@ -123,7 +123,7 @@ export default { :user="user" :issuable-type="issuableType" /> - <button v-if="hasMoreThanTwoAssignees" class="btn-link" type="button"> + <button v-if="hasMoreThanTwoAssignees" class="btn-link gl-button" type="button"> <span class="avatar-counter sidebar-avatar-counter gl-display-flex gl-align-items-center gl-pl-3" > diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue index 01d29da5486..b6260418837 100644 --- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue +++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue @@ -120,7 +120,7 @@ export default { <div v-if="renderShowMoreSection" class="user-list-more gl-hover-text-blue-800"> <button type="button" - class="btn-link" + class="btn-link gl-button gl-reset-color!" data-qa-selector="more_assignees_link" @click="toggleShowLess" > diff --git a/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue b/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue index 031de669489..974ad189f32 100644 --- a/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue +++ b/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue @@ -49,14 +49,14 @@ export default { }, request() { const state = { - variant: 'default', + selected: false, icon: 'attention', direction: 'add', }; if (this.user.attention_requested) { Object.assign(state, { - variant: 'warning', + selected: true, icon: 'attention-solid', direction: 'remove', }); @@ -92,7 +92,7 @@ export default { > <gl-button :loading="loading" - :variant="request.variant" + :selected="request.selected" :icon="request.icon" :aria-label="tooltipTitle" :class="{ 'gl-pointer-events-none': !user.can_update_merge_request }" diff --git a/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_form.vue b/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_form.vue index 71e40fde77d..c44ce8b0057 100644 --- a/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_form.vue +++ b/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_form.vue @@ -8,7 +8,7 @@ import { confidentialityQueries } from '~/sidebar/constants'; export default { i18n: { confidentialityOnWarning: __( - 'You are going to turn on confidentiality. Only %{context} members with %{strongStart}at least Reporter role%{strongEnd} can view or be notified about this %{issuableType}.', + 'You are going to turn on confidentiality. Only %{context} members with %{strongStart}%{permissions}%{strongEnd} can view or be notified about this %{issuableType}.', ), confidentialityOffWarning: __( 'You are going to turn off the confidentiality. This means %{strongStart}everyone%{strongEnd} will be able to see and leave a comment on this %{issuableType}.', @@ -65,6 +65,11 @@ export default { groupPath: this.fullPath, }; }, + permissions() { + return this.issuableType === IssuableType.Issue + ? __('at least the Reporter role, the author, and assignees') + : __('at least the Reporter role'); + }, }, methods: { submitForm() { @@ -120,7 +125,11 @@ export default { <p data-testid="warning-message"> <gl-sprintf :message="warningMessage"> <template #strong="{ content }"> - <strong>{{ content }}</strong> + <strong> + <gl-sprintf :message="content"> + <template #permissions>{{ permissions }}</template> + </gl-sprintf> + </strong> </template> <template #context>{{ context }}</template> <template #issuableType>{{ issuableType }}</template> diff --git a/app/assets/javascripts/sidebar/components/date/sidebar_date_widget.vue b/app/assets/javascripts/sidebar/components/date/sidebar_date_widget.vue index be7a89c2869..ef99d540c86 100644 --- a/app/assets/javascripts/sidebar/components/date/sidebar_date_widget.vue +++ b/app/assets/javascripts/sidebar/components/date/sidebar_date_widget.vue @@ -274,7 +274,7 @@ export default { <template #collapsed> <div v-gl-tooltip.viewport.left :title="dateLabel" class="sidebar-collapsed-icon"> <gl-icon :size="16" name="calendar" /> - <span class="collapse-truncated-title">{{ formattedDate }}</span> + <span class="gl-pt-2 gl-px-3 gl-font-sm">{{ formattedDate }}</span> </div> <sidebar-inherit-date v-if="canInherit && !initialLoading" diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue index 2ab46a7a655..8145506f32c 100644 --- a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue +++ b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue @@ -74,7 +74,7 @@ export default { <gl-button data-testid="lock-toggle" category="secondary" - variant="warning" + variant="confirm" :disabled="isLoading" :loading="isLoading" @click.prevent="submitForm" diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue index 77e41648e9b..b8804de653f 100644 --- a/app/assets/javascripts/sidebar/components/participants/participants.vue +++ b/app/assets/javascripts/sidebar/components/participants/participants.vue @@ -99,7 +99,9 @@ export default { > <gl-icon name="users" /> <gl-loading-icon v-if="loading" size="sm" /> - <span v-else data-testid="collapsed-count"> {{ participantCount }} </span> + <span v-else data-testid="collapsed-count" class="gl-pt-2 gl-px-3 gl-font-sm"> + {{ participantCount }} + </span> </div> <div v-if="showParticipantLabel" diff --git a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer.vue b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer.vue index 6de926e0ff9..2ea7c125a85 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer.vue @@ -17,7 +17,7 @@ export default { </script> <template> - <button type="button" class="btn-link"> + <button type="button" class="btn-link gl-button"> <reviewer-avatar :user="user" :img-size="24" /> <span class="author"> {{ user.name }} </span> </button> diff --git a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue index e09b5d913f7..9502b2e78b3 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue @@ -95,7 +95,7 @@ export default { > <gl-icon v-if="hasNoUsers" name="user" :aria-label="__('None')" /> <collapsed-reviewer v-for="user in collapsedUsers" :key="user.id" :user="user" /> - <button v-if="hasMoreThanTwoReviewers" class="btn-link" type="button"> + <button v-if="hasMoreThanTwoReviewers" class="btn-link gl-button" type="button"> <span class="avatar-counter sidebar-avatar-counter gl-display-flex gl-align-items-center gl-pl-3" > diff --git a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue index 897cab45fe4..3d8a2cd847c 100644 --- a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue +++ b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue @@ -322,7 +322,7 @@ export default { class="sidebar-collapsed-icon" > <gl-icon :aria-label="attributeTypeTitle" :name="attributeTypeIcon" /> - <span class="collapse-truncated-title"> + <span class="collapse-truncated-title gl-pt-2 gl-px-3 gl-font-sm"> {{ attributeTitle }} </span> </div> diff --git a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue index 7b67c34ded6..465f971717f 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue @@ -58,7 +58,7 @@ export default { } else if (this.showEstimateOnlyState || this.showSpentOnlyState) { return 'bold'; } else if (this.showNoTimeTrackingState) { - return 'no-value'; + return 'no-value collapse-truncated-title gl-pt-2 gl-px-3 gl-font-sm'; } return ''; diff --git a/app/assets/javascripts/sidebar/components/time_tracking/graphql/cache_update.js b/app/assets/javascripts/sidebar/components/time_tracking/graphql/cache_update.js new file mode 100644 index 00000000000..70177d84b1b --- /dev/null +++ b/app/assets/javascripts/sidebar/components/time_tracking/graphql/cache_update.js @@ -0,0 +1,20 @@ +import produce from 'immer'; + +export function removeTimelogFromStore(store, deletedTimelogId, query, variables) { + const sourceData = store.readQuery({ + query, + variables, + }); + + const data = produce(sourceData, (draftData) => { + draftData.issuable.timelogs.nodes = draftData.issuable.timelogs.nodes.filter( + ({ id }) => id !== deletedTimelogId, + ); + }); + + store.writeQuery({ + query, + variables, + data, + }); +} diff --git a/app/assets/javascripts/sidebar/components/time_tracking/graphql/mutations/delete_timelog.mutation.graphql b/app/assets/javascripts/sidebar/components/time_tracking/graphql/mutations/delete_timelog.mutation.graphql new file mode 100644 index 00000000000..17bbad1acb1 --- /dev/null +++ b/app/assets/javascripts/sidebar/components/time_tracking/graphql/mutations/delete_timelog.mutation.graphql @@ -0,0 +1,5 @@ +mutation deleteTimelog($input: TimelogDeleteInput!) { + timelogDelete(input: $input) { + errors + } +} diff --git a/app/assets/javascripts/sidebar/components/time_tracking/report.vue b/app/assets/javascripts/sidebar/components/time_tracking/report.vue index d9797961d40..79ef5a32474 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/report.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/report.vue @@ -1,11 +1,13 @@ <script> -import { GlLoadingIcon, GlTableLite } from '@gitlab/ui'; +import { GlLoadingIcon, GlTableLite, GlButton, GlTooltipDirective } from '@gitlab/ui'; import createFlash from '~/flash'; import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/graphql_shared/constants'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import { formatDate, parseSeconds, stringifyTime } from '~/lib/utils/datetime_utility'; -import { __ } from '~/locale'; +import { __, s__ } from '~/locale'; import { timelogQueries } from '~/sidebar/constants'; +import deleteTimelogMutation from './graphql/mutations/delete_timelog.mutation.graphql'; +import { removeTimelogFromStore } from './graphql/cache_update'; const TIME_DATE_FORMAT = 'mmmm d, yyyy, HH:MM ("UTC:" o)'; @@ -13,6 +15,10 @@ export default { components: { GlLoadingIcon, GlTableLite, + GlButton, + }, + directives: { + GlTooltip: GlTooltipDirective, }, inject: ['issuableType'], props: { @@ -27,7 +33,7 @@ export default { }, }, data() { - return { report: [], isLoading: true }; + return { report: [], isLoading: true, removingIds: [] }; }, apollo: { report: { @@ -35,9 +41,7 @@ export default { return timelogQueries[this.issuableType].query; }, variables() { - return { - id: convertToGraphQLId(this.getGraphQLEntityType(), this.issuableId), - }; + return this.getQueryVariables(); }, update(data) { this.isLoading = false; @@ -48,10 +52,23 @@ export default { }, }, }, + computed: { + deleteButtonTooltip() { + return s__('TimeTracking|Delete time spent'); + }, + }, methods: { + isDeletingTimelog(timelogId) { + return this.removingIds.includes(timelogId); + }, isIssue() { return this.issuableType === 'issue'; }, + getQueryVariables() { + return { + id: convertToGraphQLId(this.getGraphQLEntityType(), this.issuableId), + }; + }, getGraphQLEntityType() { return this.isIssue() ? TYPE_ISSUE : TYPE_MERGE_REQUEST; }, @@ -76,19 +93,51 @@ export default { stringifyTime(parseSeconds(seconds, { limitToHours: this.limitToHours })) ); }, + deleteTimelog(timelogId) { + this.removingIds.push(timelogId); + this.$apollo + .mutate({ + mutation: deleteTimelogMutation, + variables: { input: { id: timelogId } }, + update: (store) => { + removeTimelogFromStore( + store, + timelogId, + timelogQueries[this.issuableType].query, + this.getQueryVariables(), + ); + }, + }) + .then(({ data }) => { + if (data.timelogDelete?.errors?.length) { + throw new Error(data.timelogDelete.errors[0]); + } + }) + .catch((error) => { + createFlash({ + message: s__('TimeTracking|An error occurred while removing the timelog.'), + captureError: true, + error, + }); + }) + .finally(() => { + this.removingIds.splice(this.removingIds.indexOf(timelogId), 1); + }); + }, }, fields: [ - { key: 'spentAt', label: __('Spent At'), sortable: true, tdClass: 'gl-w-quarter' }, + { key: 'spentAt', label: __('Spent at'), sortable: true, tdClass: 'gl-w-quarter' }, { key: 'user', label: __('User'), sortable: true }, - { key: 'timeSpent', label: __('Time Spent'), sortable: true, tdClass: 'gl-w-15' }, - { key: 'summary', label: __('Summary / Note'), sortable: true }, + { key: 'timeSpent', label: __('Time spent'), sortable: true, tdClass: 'gl-w-15' }, + { key: 'summary', label: __('Summary / note'), sortable: true }, + { key: 'actions', label: '', tdClass: 'gl-w-10' }, ], }; </script> <template> <div> - <div v-if="isLoading"><gl-loading-icon size="md" /></div> + <div v-if="isLoading"><gl-loading-icon size="lg" /></div> <gl-table-lite v-else :items="report" :fields="$options.fields" foot-clone> <template #cell(spentAt)="{ item: { spentAt } }"> <div>{{ formatDate(spentAt) }}</div> @@ -110,7 +159,28 @@ export default { <template #cell(summary)="{ item: { summary, note } }"> <div>{{ getSummary(summary, note) }}</div> </template> - <template #foot(note)> </template> + <template #foot(summary)> </template> + + <template + #cell(actions)="{ + item: { + id, + userPermissions: { adminTimelog }, + }, + }" + > + <div v-if="adminTimelog"> + <gl-button + v-gl-tooltip="{ title: deleteButtonTooltip }" + category="secondary" + icon="remove" + data-testid="deleteButton" + :loading="isDeletingTimelog(id)" + @click="deleteTimelog(id)" + /> + </div> + </template> + <template #foot(actions)> </template> </gl-table-lite> </div> </template> diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue index 057bb9f0100..e39d9f9fb49 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue @@ -252,6 +252,7 @@ export default { size="lg" :title="__('Time tracking report')" :hide-footer="true" + @hide="refresh" > <time-tracking-report :limit-to-hours="limitToHours" :issuable-id="issuableId" /> </gl-modal> diff --git a/app/assets/javascripts/sidebar/graphql.js b/app/assets/javascripts/sidebar/graphql.js index 034bdc71122..ff3fb4aae6b 100644 --- a/app/assets/javascripts/sidebar/graphql.js +++ b/app/assets/javascripts/sidebar/graphql.js @@ -2,6 +2,7 @@ import produce from 'immer'; import VueApollo from 'vue-apollo'; import getIssueStateQuery from '~/issues/show/queries/get_issue_state.query.graphql'; import createDefaultClient from '~/lib/graphql'; +import { temporaryConfig } from '~/work_items/graphql/provider'; const resolvers = { Mutation: { @@ -15,7 +16,12 @@ const resolvers = { }, }; -export const defaultClient = createDefaultClient(resolvers); +export const defaultClient = createDefaultClient( + resolvers, + // should be removed with the rollout of work item assignees FF + // https://gitlab.com/gitlab-org/gitlab/-/issues/363030 + temporaryConfig, +); export const apolloProvider = new VueApollo({ defaultClient, diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js index 351bb50d941..bb40ac14438 100644 --- a/app/assets/javascripts/sidebar/mount_sidebar.js +++ b/app/assets/javascripts/sidebar/mount_sidebar.js @@ -119,7 +119,7 @@ function mountAssigneesComponentDeprecated(mediator) { issuableIid: String(iid), projectPath: fullPath, field: el.dataset.field, - signedIn: el.hasAttribute('data-signed-in'), + signedIn: Object.prototype.hasOwnProperty.call(el.dataset, 'signedIn'), issuableType: isInIssuePage() || isInIncidentPage() || isInDesignPage() ? IssuableType.Issue @@ -149,7 +149,10 @@ function mountAssigneesComponent() { }, provide: { canUpdate: editable, - directlyInviteMembers: el.hasAttribute('data-directly-invite-members'), + directlyInviteMembers: Object.prototype.hasOwnProperty.call( + el.dataset, + 'directlyInviteMembers', + ), }, render: (createElement) => createElement('sidebar-assignees-widget', { diff --git a/app/assets/javascripts/sidebar/queries/escalation_status.fragment.graphql b/app/assets/javascripts/sidebar/queries/escalation_status.fragment.graphql new file mode 100644 index 00000000000..6021570557e --- /dev/null +++ b/app/assets/javascripts/sidebar/queries/escalation_status.fragment.graphql @@ -0,0 +1,4 @@ +fragment EscalationStatusFragment on Issue { + id + escalationStatus +} diff --git a/app/assets/javascripts/sidebar/queries/update_escalation_status.mutation.graphql b/app/assets/javascripts/sidebar/queries/update_escalation_status.mutation.graphql index a4aff7968df..d271ae5ff3e 100644 --- a/app/assets/javascripts/sidebar/queries/update_escalation_status.mutation.graphql +++ b/app/assets/javascripts/sidebar/queries/update_escalation_status.mutation.graphql @@ -1,10 +1,12 @@ +#import "ee_else_ce/sidebar/queries/escalation_status.fragment.graphql" + mutation updateEscalationStatus($projectPath: ID!, $status: IssueEscalationStatus!, $iid: String!) { issueSetEscalationStatus(input: { projectPath: $projectPath, status: $status, iid: $iid }) { errors clientMutationId issue { id - escalationStatus + ...EscalationStatusFragment } } } diff --git a/app/assets/javascripts/sidebar/utils.js b/app/assets/javascripts/sidebar/utils.js deleted file mode 100644 index 20cd4ce9d99..00000000000 --- a/app/assets/javascripts/sidebar/utils.js +++ /dev/null @@ -1 +0,0 @@ -export const toLabelGid = (id) => `gid://gitlab/Label/${id}`; diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js index b7159fd6835..26838682fc8 100644 --- a/app/assets/javascripts/single_file_diff.js +++ b/app/assets/javascripts/single_file_diff.js @@ -17,7 +17,7 @@ const ERROR_HTML = `<div class="nothing-here-block">${spriteIcon( 's16', )} Could not load diff</div>`; const COLLAPSED_HTML = - '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <button class="click-to-expand btn btn-link">Click to expand it.</button></div>'; + '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <button class="click-to-expand btn btn-link gl-button">Click to expand it.</button></div>'; export default class SingleFileDiff { constructor(file) { diff --git a/app/assets/javascripts/static_site_editor/components/app.vue b/app/assets/javascripts/static_site_editor/components/app.vue deleted file mode 100644 index 365fc7ce6e9..00000000000 --- a/app/assets/javascripts/static_site_editor/components/app.vue +++ /dev/null @@ -1,13 +0,0 @@ -<script> -export default { - props: { - mergeRequestsIllustrationPath: { - type: String, - required: true, - }, - }, -}; -</script> -<template> - <router-view :merge-requests-illustration-path="mergeRequestsIllustrationPath" /> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/edit_area.vue b/app/assets/javascripts/static_site_editor/components/edit_area.vue deleted file mode 100644 index 2f2efe290ec..00000000000 --- a/app/assets/javascripts/static_site_editor/components/edit_area.vue +++ /dev/null @@ -1,190 +0,0 @@ -<script> -import { EDITOR_TYPES } from '~/static_site_editor/rich_content_editor/constants'; -import RichContentEditor from '~/static_site_editor/rich_content_editor/rich_content_editor.vue'; -import parseSourceFile from '~/static_site_editor/services/parse_source_file'; -import imageRepository from '../image_repository'; -import formatter from '../services/formatter'; -import renderImage from '../services/renderers/render_image'; -import templater from '../services/templater'; -import EditDrawer from './edit_drawer.vue'; -import EditHeader from './edit_header.vue'; -import PublishToolbar from './publish_toolbar.vue'; -import UnsavedChangesConfirmDialog from './unsaved_changes_confirm_dialog.vue'; - -export default { - components: { - RichContentEditor, - PublishToolbar, - EditHeader, - EditDrawer, - UnsavedChangesConfirmDialog, - }, - props: { - title: { - type: String, - required: true, - }, - content: { - type: String, - required: true, - }, - savingChanges: { - type: Boolean, - required: true, - }, - returnUrl: { - type: String, - required: false, - default: '', - }, - branch: { - type: String, - required: true, - }, - baseUrl: { - type: String, - required: true, - }, - mounts: { - type: Array, - required: true, - }, - project: { - type: String, - required: true, - }, - imageRoot: { - type: String, - required: true, - }, - }, - data() { - return { - formattedMarkdown: null, - parsedSource: parseSourceFile(this.preProcess(true, this.content)), - editorMode: EDITOR_TYPES.wysiwyg, - hasMatter: false, - isDrawerOpen: false, - isModified: false, - isSaveable: false, - }; - }, - imageRepository: imageRepository(), - computed: { - editableContent() { - return this.parsedSource.content(this.isWysiwygMode); - }, - editableMatter() { - return this.isDrawerOpen ? this.parsedSource.matter() : {}; - }, - hasSettings() { - return this.hasMatter && this.isWysiwygMode; - }, - isWysiwygMode() { - return this.editorMode === EDITOR_TYPES.wysiwyg; - }, - customRenderers() { - const imageRenderer = renderImage.build( - this.mounts, - this.project, - this.branch, - this.baseUrl, - this.$options.imageRepository, - ); - return { - image: [imageRenderer], - }; - }, - }, - created() { - this.refreshEditHelpers(); - }, - methods: { - preProcess(isWrap, value) { - const formattedContent = formatter(value); - const templatedContent = isWrap - ? templater.wrap(formattedContent) - : templater.unwrap(formattedContent); - return templatedContent; - }, - refreshEditHelpers() { - const { isModified, hasMatter, isMatterValid } = this.parsedSource; - this.isModified = isModified(); - this.hasMatter = hasMatter(); - const hasValidMatter = this.hasMatter ? isMatterValid() : true; - this.isSaveable = this.isModified && hasValidMatter; - }, - onDrawerOpen() { - this.isDrawerOpen = true; - this.refreshEditHelpers(); - }, - onDrawerClose() { - this.isDrawerOpen = false; - this.refreshEditHelpers(); - }, - onInputChange(newVal) { - this.parsedSource.syncContent(newVal, this.isWysiwygMode); - this.refreshEditHelpers(); - }, - onModeChange(mode) { - this.editorMode = mode; - - const preProcessedContent = this.preProcess(this.isWysiwygMode, this.editableContent); - this.$refs.editor.resetInitialValue(preProcessedContent); - }, - onUpdateSettings(settings) { - this.parsedSource.syncMatter(settings); - }, - onUploadImage({ file, imageUrl }) { - this.$options.imageRepository.add(file, imageUrl); - }, - onSubmit() { - const preProcessedContent = this.preProcess(false, this.parsedSource.content()); - this.$emit('submit', { - formattedMarkdown: this.formattedMarkdown, - content: preProcessedContent, - images: this.$options.imageRepository.getAll(), - }); - }, - onEditorLoad({ formattedMarkdown }) { - this.formattedMarkdown = formattedMarkdown; - }, - }, -}; -</script> -<template> - <div class="d-flex flex-grow-1 flex-column h-100"> - <edit-header class="py-2" :title="title" /> - <edit-drawer - v-if="hasMatter" - :is-open="isDrawerOpen" - :settings="editableMatter" - @close="onDrawerClose" - @updateSettings="onUpdateSettings" - /> - <rich-content-editor - ref="editor" - :content="editableContent" - :initial-edit-type="editorMode" - :image-root="imageRoot" - :options="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ { - customRenderers, - } /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" - class="mb-9 pb-6 h-100" - @modeChange="onModeChange" - @input="onInputChange" - @uploadImage="onUploadImage" - @load="onEditorLoad" - /> - <unsaved-changes-confirm-dialog :modified="isSaveable" /> - <publish-toolbar - class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full" - :has-settings="hasSettings" - :return-url="returnUrl" - :saveable="isSaveable" - :saving-changes="savingChanges" - @editSettings="onDrawerOpen" - @submit="onSubmit" - /> - </div> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/edit_drawer.vue b/app/assets/javascripts/static_site_editor/components/edit_drawer.vue deleted file mode 100644 index 781e23cd6c8..00000000000 --- a/app/assets/javascripts/static_site_editor/components/edit_drawer.vue +++ /dev/null @@ -1,27 +0,0 @@ -<script> -import { GlDrawer } from '@gitlab/ui'; -import FrontMatterControls from './front_matter_controls.vue'; - -export default { - components: { - GlDrawer, - FrontMatterControls, - }, - props: { - isOpen: { - type: Boolean, - required: true, - }, - settings: { - type: Object, - required: true, - }, - }, -}; -</script> -<template> - <gl-drawer class="gl-pt-8" :open="isOpen" @close="$emit('close')"> - <template #title>{{ __('Page settings') }}</template> - <front-matter-controls :settings="settings" @updateSettings="$emit('updateSettings', $event)" /> - </gl-drawer> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/edit_header.vue b/app/assets/javascripts/static_site_editor/components/edit_header.vue deleted file mode 100644 index 5660bfbe5ae..00000000000 --- a/app/assets/javascripts/static_site_editor/components/edit_header.vue +++ /dev/null @@ -1,23 +0,0 @@ -<script> -import { DEFAULT_HEADING } from '../constants'; - -export default { - props: { - title: { - type: String, - required: false, - default: '', - }, - }, - computed: { - heading() { - return this.title || DEFAULT_HEADING; - }, - }, -}; -</script> -<template> - <div> - <h3 ref="sseHeading">{{ heading }}</h3> - </div> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/edit_meta_controls.vue b/app/assets/javascripts/static_site_editor/components/edit_meta_controls.vue deleted file mode 100644 index c6247632b6e..00000000000 --- a/app/assets/javascripts/static_site_editor/components/edit_meta_controls.vue +++ /dev/null @@ -1,130 +0,0 @@ -<script> -import { - GlDropdown, - GlDropdownDivider, - GlDropdownItem, - GlForm, - GlFormGroup, - GlFormInput, - GlFormTextarea, -} from '@gitlab/ui'; - -import { __ } from '~/locale'; - -export default { - components: { - GlDropdown, - GlDropdownDivider, - GlDropdownItem, - GlForm, - GlFormGroup, - GlFormInput, - GlFormTextarea, - }, - props: { - title: { - type: String, - required: true, - }, - description: { - type: String, - required: true, - }, - templates: { - type: Array, - required: false, - default: null, - }, - currentTemplate: { - type: Object, - required: false, - default: null, - }, - }, - computed: { - dropdownLabel() { - return this.currentTemplate ? this.currentTemplate.name : __('None'); - }, - hasTemplates() { - return this.templates?.length > 0; - }, - }, - mounted() { - this.preSelect(); - }, - methods: { - getId(type, key) { - return `sse-merge-request-meta-${type}-${key}`; - }, - preSelect() { - this.$nextTick(() => { - this.$refs.title.$el.select(); - }); - }, - onChangeTemplate(template) { - this.$emit('changeTemplate', template || null); - }, - onUpdate(field, value) { - const payload = { - title: this.title, - description: this.description, - [field]: value, - }; - this.$emit('updateSettings', payload); - }, - }, -}; -</script> - -<template> - <gl-form> - <gl-form-group - key="title" - :label="__('Brief title about the change')" - :label-for="getId('control', 'title')" - > - <gl-form-input - :id="getId('control', 'title')" - ref="title" - :value="title" - type="text" - @input="onUpdate('title', $event)" - /> - </gl-form-group> - - <gl-form-group - v-if="hasTemplates" - key="template" - :label="__('Description template')" - :label-for="getId('control', 'template')" - > - <gl-dropdown :text="dropdownLabel"> - <gl-dropdown-item key="none" @click="onChangeTemplate(null)"> - {{ __('None') }} - </gl-dropdown-item> - - <gl-dropdown-divider /> - - <gl-dropdown-item - v-for="template in templates" - :key="template.key" - @click="onChangeTemplate(template)" - > - {{ template.name }} - </gl-dropdown-item> - </gl-dropdown> - </gl-form-group> - - <gl-form-group - key="description" - :label="__('Goal of the changes and what reviewers should be aware of')" - :label-for="getId('control', 'description')" - > - <gl-form-textarea - :id="getId('control', 'description')" - :value="description" - @input="onUpdate('description', $event)" - /> - </gl-form-group> - </gl-form> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/edit_meta_modal.vue b/app/assets/javascripts/static_site_editor/components/edit_meta_modal.vue deleted file mode 100644 index e69a6b8cd69..00000000000 --- a/app/assets/javascripts/static_site_editor/components/edit_meta_modal.vue +++ /dev/null @@ -1,126 +0,0 @@ -<script> -import { GlModal } from '@gitlab/ui'; -import Api from '~/api'; -import { __, s__, sprintf } from '~/locale'; -import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; - -import { ISSUABLE_TYPE, MR_META_LOCAL_STORAGE_KEY } from '../constants'; -import EditMetaControls from './edit_meta_controls.vue'; - -export default { - components: { - GlModal, - EditMetaControls, - LocalStorageSync, - }, - props: { - sourcePath: { - type: String, - required: true, - }, - namespace: { - type: String, - required: true, - }, - project: { - type: String, - required: true, - }, - }, - data() { - return { - clearStorage: false, - currentTemplate: null, - mergeRequestTemplates: null, - mergeRequestMeta: { - title: sprintf(s__(`StaticSiteEditor|Update %{sourcePath} file`), { - sourcePath: this.sourcePath, - }), - description: s__('StaticSiteEditor|Copy update'), - }, - }; - }, - computed: { - disabled() { - return this.mergeRequestMeta.title === ''; - }, - primaryProps() { - return { - text: __('Submit changes'), - attributes: [{ variant: 'success' }, { disabled: this.disabled }], - }; - }, - secondaryProps() { - return { - text: __('Keep editing'), - attributes: [{ variant: 'default' }], - }; - }, - }, - mounted() { - this.initTemplates(); - }, - methods: { - hide() { - this.$refs.modal.hide(); - }, - initTemplates() { - const { namespace, project } = this; - Api.issueTemplates(namespace, project, ISSUABLE_TYPE, (err, templates) => { - if (err) return; // Error handled by global AJAX error handler - this.mergeRequestTemplates = templates; - }); - }, - show() { - this.$refs.modal.show(); - }, - onPrimary() { - this.$emit('primary', this.mergeRequestMeta); - this.clearStorage = true; - }, - onSecondary() { - this.hide(); - }, - onChangeTemplate(template) { - this.currentTemplate = template; - - const description = this.currentTemplate ? this.currentTemplate.content : ''; - const mergeRequestMeta = { ...this.mergeRequestMeta, description }; - this.onUpdateSettings(mergeRequestMeta); - }, - onUpdateSettings(mergeRequestMeta) { - this.mergeRequestMeta = { ...mergeRequestMeta }; - }, - }, - storageKey: MR_META_LOCAL_STORAGE_KEY, -}; -</script> - -<template> - <gl-modal - ref="modal" - modal-id="edit-meta-modal" - :title="__('Submit your changes')" - :action-primary="primaryProps" - :action-secondary="secondaryProps" - size="sm" - @primary="onPrimary" - @secondary="onSecondary" - @hide="() => $emit('hide')" - > - <local-storage-sync - v-model="mergeRequestMeta" - :storage-key="$options.storageKey" - :clear="clearStorage" - /> - <edit-meta-controls - ref="editMetaControls" - :title="mergeRequestMeta.title" - :description="mergeRequestMeta.description" - :templates="mergeRequestTemplates" - :current-template="currentTemplate" - @updateSettings="onUpdateSettings" - @changeTemplate="onChangeTemplate" - /> - </gl-modal> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/front_matter_controls.vue b/app/assets/javascripts/static_site_editor/components/front_matter_controls.vue deleted file mode 100644 index dad3907c3ff..00000000000 --- a/app/assets/javascripts/static_site_editor/components/front_matter_controls.vue +++ /dev/null @@ -1,57 +0,0 @@ -<script> -import { GlForm, GlFormInput, GlFormGroup } from '@gitlab/ui'; -import { humanize } from '~/lib/utils/text_utility'; - -export default { - components: { - GlForm, - GlFormInput, - GlFormGroup, - }, - props: { - settings: { - type: Object, - required: true, - }, - }, - data() { - return { - editableSettings: { ...this.settings }, - }; - }, - methods: { - getId(type, key) { - return `sse-front-matter-${type}-${key}`; - }, - getIsSupported(val) { - return ['string', 'number'].includes(typeof val); - }, - getLabel(str) { - return humanize(str); - }, - onUpdate() { - this.$emit('updateSettings', { ...this.editableSettings }); - }, - }, -}; -</script> -<template> - <gl-form> - <template v-for="(value, key) of editableSettings"> - <gl-form-group - v-if="getIsSupported(value)" - :id="getId('form-group', key)" - :key="key" - :label="getLabel(key)" - :label-for="getId('control', key)" - > - <gl-form-input - :id="getId('control', key)" - v-model.lazy="editableSettings[key]" - type="text" - @input="onUpdate" - /> - </gl-form-group> - </template> - </gl-form> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/invalid_content_message.vue b/app/assets/javascripts/static_site_editor/components/invalid_content_message.vue deleted file mode 100644 index fef87057307..00000000000 --- a/app/assets/javascripts/static_site_editor/components/invalid_content_message.vue +++ /dev/null @@ -1,29 +0,0 @@ -<script> -import { GlButton } from '@gitlab/ui'; - -export default { - components: { - GlButton, - }, -}; -</script> - -<template> - <div> - <h3>{{ s__('StaticSiteEditor|Incompatible file content') }}</h3> - <p> - {{ - s__( - 'StaticSiteEditor|The Static Site Editor is currently configured to only edit Markdown content on pages generated from Middleman. Visit the documentation to learn more about configuring your site to use the Static Site Editor.', - ) - }} - </p> - <div> - <gl-button - ref="documentationButton" - href="https://gitlab.com/gitlab-org/project-templates/static-site-editor-middleman" - >{{ s__('StaticSiteEditor|View documentation') }}</gl-button - > - </div> - </div> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue deleted file mode 100644 index 3bb5a0b8fd5..00000000000 --- a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue +++ /dev/null @@ -1,57 +0,0 @@ -<script> -import { GlButton } from '@gitlab/ui'; - -export default { - components: { - GlButton, - }, - props: { - hasSettings: { - type: Boolean, - required: false, - default: false, - }, - returnUrl: { - type: String, - required: false, - default: '', - }, - saveable: { - type: Boolean, - required: false, - default: false, - }, - savingChanges: { - type: Boolean, - required: false, - default: false, - }, - }, -}; -</script> -<template> - <div class="d-flex bg-light border-top justify-content-end align-items-center py-3 px-4"> - <div> - <gl-button v-if="returnUrl" ref="returnUrlLink" :href="returnUrl">{{ - s__('StaticSiteEditor|Return to site') - }}</gl-button> - <gl-button - v-if="hasSettings" - ref="settings" - :disabled="savingChanges" - @click="$emit('editSettings')" - > - {{ __('Page settings') }} - </gl-button> - <gl-button - ref="submit" - variant="success" - :disabled="!saveable" - :loading="savingChanges" - @click="$emit('submit')" - > - {{ __('Submit changes...') }} - </gl-button> - </div> - </div> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/skeleton_loader.vue b/app/assets/javascripts/static_site_editor/components/skeleton_loader.vue deleted file mode 100644 index 1b6179883aa..00000000000 --- a/app/assets/javascripts/static_site_editor/components/skeleton_loader.vue +++ /dev/null @@ -1,19 +0,0 @@ -<script> -import { GlSkeletonLoader } from '@gitlab/ui'; - -export default { - components: { - GlSkeletonLoader, - }, -}; -</script> -<template> - <gl-skeleton-loader :width="500" :height="102"> - <rect width="500" height="16" rx="4" /> - <rect y="20" width="375" height="16" rx="4" /> - <rect x="380" y="20" width="120" height="16" rx="4" /> - <rect y="40" width="250" height="16" rx="4" /> - <rect x="255" y="40" width="150" height="16" rx="4" /> - <rect x="410" y="40" width="90" height="16" rx="4" /> - </gl-skeleton-loader> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/submit_changes_error.vue b/app/assets/javascripts/static_site_editor/components/submit_changes_error.vue deleted file mode 100644 index c5b6c685124..00000000000 --- a/app/assets/javascripts/static_site_editor/components/submit_changes_error.vue +++ /dev/null @@ -1,24 +0,0 @@ -<script> -import { GlAlert, GlButton } from '@gitlab/ui'; - -export default { - components: { - GlAlert, - GlButton, - }, - props: { - error: { - type: String, - required: true, - }, - }, -}; -</script> -<template> - <gl-alert variant="danger" dismissible @dismiss="$emit('dismiss')"> - {{ s__('StaticSiteEditor|An error occurred while submitting your changes.') }} {{ error }} - <template #actions> - <gl-button variant="danger" @click="$emit('retry')">{{ __('Retry') }}</gl-button> - </template> - </gl-alert> -</template> diff --git a/app/assets/javascripts/static_site_editor/components/unsaved_changes_confirm_dialog.vue b/app/assets/javascripts/static_site_editor/components/unsaved_changes_confirm_dialog.vue deleted file mode 100644 index 255f029bd27..00000000000 --- a/app/assets/javascripts/static_site_editor/components/unsaved_changes_confirm_dialog.vue +++ /dev/null @@ -1,27 +0,0 @@ -<script> -export default { - props: { - modified: { - type: Boolean, - required: false, - default: false, - }, - }, - created() { - window.addEventListener('beforeunload', this.requestConfirmation); - }, - destroyed() { - window.removeEventListener('beforeunload', this.requestConfirmation); - }, - methods: { - requestConfirmation(e) { - if (this.modified) { - e.preventDefault(); - // eslint-disable-next-line no-param-reassign - e.returnValue = ''; - } - }, - }, - render: () => null, -}; -</script> diff --git a/app/assets/javascripts/static_site_editor/constants.js b/app/assets/javascripts/static_site_editor/constants.js deleted file mode 100644 index ab7fd0542bf..00000000000 --- a/app/assets/javascripts/static_site_editor/constants.js +++ /dev/null @@ -1,35 +0,0 @@ -import { s__, __ } from '~/locale'; - -export const BRANCH_SUFFIX_COUNT = 8; -export const ISSUABLE_TYPE = 'merge_request'; - -export const SUBMIT_CHANGES_BRANCH_ERROR = s__('StaticSiteEditor|Branch could not be created.'); -export const SUBMIT_CHANGES_COMMIT_ERROR = s__( - 'StaticSiteEditor|Could not commit the content changes.', -); -export const SUBMIT_CHANGES_MERGE_REQUEST_ERROR = s__( - 'StaticSiteEditor|Could not create merge request.', -); -export const LOAD_CONTENT_ERROR = __( - 'An error occurred while loading your content. Please try again.', -); - -export const DEFAULT_FORMATTING_CHANGES_COMMIT_MESSAGE = s__( - 'StaticSiteEditor|Automatic formatting changes', -); - -export const DEFAULT_FORMATTING_CHANGES_COMMIT_DESCRIPTION = s__( - 'StaticSiteEditor|Markdown formatting preferences introduced by the Static Site Editor', -); - -export const DEFAULT_HEADING = s__('StaticSiteEditor|Static site editor'); - -export const TRACKING_ACTION_CREATE_COMMIT = 'create_commit'; -export const TRACKING_ACTION_CREATE_MERGE_REQUEST = 'create_merge_request'; -export const TRACKING_ACTION_INITIALIZE_EDITOR = 'initialize_editor'; - -export const SERVICE_PING_TRACKING_ACTION_CREATE_COMMIT = 'static_site_editor_commits'; -export const SERVICE_PING_TRACKING_ACTION_CREATE_MERGE_REQUEST = - 'static_site_editor_merge_requests'; - -export const MR_META_LOCAL_STORAGE_KEY = 'sse-merge-request-meta-storage-key'; diff --git a/app/assets/javascripts/static_site_editor/graphql/index.js b/app/assets/javascripts/static_site_editor/graphql/index.js deleted file mode 100644 index 53572e680e5..00000000000 --- a/app/assets/javascripts/static_site_editor/graphql/index.js +++ /dev/null @@ -1,47 +0,0 @@ -import Vue from 'vue'; -import VueApollo from 'vue-apollo'; -import createDefaultClient from '~/lib/graphql'; -import appDataQuery from './queries/app_data.query.graphql'; -import fileResolver from './resolvers/file'; -import hasSubmittedChangesResolver from './resolvers/has_submitted_changes'; -import submitContentChangesResolver from './resolvers/submit_content_changes'; -import typeDefs from './typedefs.graphql'; - -Vue.use(VueApollo); - -const createApolloProvider = (appData) => { - const defaultClient = createDefaultClient( - { - Project: { - file: fileResolver, - }, - Mutation: { - submitContentChanges: submitContentChangesResolver, - hasSubmittedChanges: hasSubmittedChangesResolver, - }, - }, - { - typeDefs, - }, - ); - - // eslint-disable-next-line @gitlab/require-i18n-strings - const mounts = appData.mounts.map((mount) => ({ __typename: 'Mount', ...mount })); - - defaultClient.cache.writeQuery({ - query: appDataQuery, - data: { - appData: { - __typename: 'AppData', - ...appData, - mounts, - }, - }, - }); - - return new VueApollo({ - defaultClient, - }); -}; - -export default createApolloProvider; diff --git a/app/assets/javascripts/static_site_editor/graphql/mutations/has_submitted_changes.mutation.graphql b/app/assets/javascripts/static_site_editor/graphql/mutations/has_submitted_changes.mutation.graphql deleted file mode 100644 index 1f47929556a..00000000000 --- a/app/assets/javascripts/static_site_editor/graphql/mutations/has_submitted_changes.mutation.graphql +++ /dev/null @@ -1,5 +0,0 @@ -mutation hasSubmittedChanges($input: HasSubmittedChangesInput) { - hasSubmittedChanges(input: $input) @client { - hasSubmittedChanges - } -} diff --git a/app/assets/javascripts/static_site_editor/graphql/mutations/submit_content_changes.mutation.graphql b/app/assets/javascripts/static_site_editor/graphql/mutations/submit_content_changes.mutation.graphql deleted file mode 100644 index cd130aa7dbb..00000000000 --- a/app/assets/javascripts/static_site_editor/graphql/mutations/submit_content_changes.mutation.graphql +++ /dev/null @@ -1,7 +0,0 @@ -mutation submitContentChanges($input: SubmitContentChangesInput) { - submitContentChanges(input: $input) @client { - branch - commit - mergeRequest - } -} diff --git a/app/assets/javascripts/static_site_editor/graphql/queries/app_data.query.graphql b/app/assets/javascripts/static_site_editor/graphql/queries/app_data.query.graphql deleted file mode 100644 index e422a4b6036..00000000000 --- a/app/assets/javascripts/static_site_editor/graphql/queries/app_data.query.graphql +++ /dev/null @@ -1,17 +0,0 @@ -query appData { - appData @client { - isSupportedContent - hasSubmittedChanges - project - sourcePath - username - returnUrl - branch - baseUrl - mounts { - source - target - } - imageUploadPath - } -} diff --git a/app/assets/javascripts/static_site_editor/graphql/queries/saved_content_meta.query.graphql b/app/assets/javascripts/static_site_editor/graphql/queries/saved_content_meta.query.graphql deleted file mode 100644 index c29b6f93b81..00000000000 --- a/app/assets/javascripts/static_site_editor/graphql/queries/saved_content_meta.query.graphql +++ /dev/null @@ -1,3 +0,0 @@ -query savedContentMeta { - savedContentMeta @client -} diff --git a/app/assets/javascripts/static_site_editor/graphql/queries/source_content.query.graphql b/app/assets/javascripts/static_site_editor/graphql/queries/source_content.query.graphql deleted file mode 100644 index c8c4195e1cd..00000000000 --- a/app/assets/javascripts/static_site_editor/graphql/queries/source_content.query.graphql +++ /dev/null @@ -1,10 +0,0 @@ -query sourceContent($project: ID!, $sourcePath: String!) { - project(fullPath: $project) { - id - fullPath - file(path: $sourcePath) @client { - title - content - } - } -} diff --git a/app/assets/javascripts/static_site_editor/graphql/resolvers/file.js b/app/assets/javascripts/static_site_editor/graphql/resolvers/file.js deleted file mode 100644 index fc3cac52e2a..00000000000 --- a/app/assets/javascripts/static_site_editor/graphql/resolvers/file.js +++ /dev/null @@ -1,11 +0,0 @@ -import loadSourceContent from '../../services/load_source_content'; - -const fileResolver = ({ fullPath: projectId }, { path: sourcePath }) => { - return loadSourceContent({ projectId, sourcePath }).then((sourceContent) => ({ - // eslint-disable-next-line @gitlab/require-i18n-strings - __typename: 'File', - ...sourceContent, - })); -}; - -export default fileResolver; diff --git a/app/assets/javascripts/static_site_editor/graphql/resolvers/has_submitted_changes.js b/app/assets/javascripts/static_site_editor/graphql/resolvers/has_submitted_changes.js deleted file mode 100644 index 35ecf6d698c..00000000000 --- a/app/assets/javascripts/static_site_editor/graphql/resolvers/has_submitted_changes.js +++ /dev/null @@ -1,25 +0,0 @@ -import { produce } from 'immer'; -import query from '../queries/app_data.query.graphql'; - -const hasSubmittedChangesResolver = (_, { input: { hasSubmittedChanges } }, { cache }) => { - const oldData = cache.readQuery({ query }); - - const data = produce(oldData, (draftState) => { - // punctually modifying draftState as per immer docs upsets our linters - return { - ...draftState, - appData: { - __typename: 'AppData', - ...draftState.appData, - hasSubmittedChanges, - }, - }; - }); - - cache.writeQuery({ - query, - data, - }); -}; - -export default hasSubmittedChangesResolver; diff --git a/app/assets/javascripts/static_site_editor/graphql/resolvers/submit_content_changes.js b/app/assets/javascripts/static_site_editor/graphql/resolvers/submit_content_changes.js deleted file mode 100644 index e9f1828bff8..00000000000 --- a/app/assets/javascripts/static_site_editor/graphql/resolvers/submit_content_changes.js +++ /dev/null @@ -1,47 +0,0 @@ -import { produce } from 'immer'; -import submitContentChanges from '../../services/submit_content_changes'; -import savedContentMetaQuery from '../queries/saved_content_meta.query.graphql'; - -const submitContentChangesResolver = ( - _, - { - input: { - project: projectId, - username, - sourcePath, - targetBranch, - content, - images, - mergeRequestMeta, - formattedMarkdown, - }, - }, - { cache }, -) => { - return submitContentChanges({ - projectId, - username, - sourcePath, - targetBranch, - content, - images, - mergeRequestMeta, - formattedMarkdown, - }).then((savedContentMeta) => { - const data = produce(savedContentMeta, (draftState) => { - return { - savedContentMeta: { - __typename: 'SavedContentMeta', - ...draftState, - }, - }; - }); - - cache.writeQuery({ - query: savedContentMetaQuery, - data, - }); - }); -}; - -export default submitContentChangesResolver; diff --git a/app/assets/javascripts/static_site_editor/graphql/typedefs.graphql b/app/assets/javascripts/static_site_editor/graphql/typedefs.graphql deleted file mode 100644 index 00af6c10359..00000000000 --- a/app/assets/javascripts/static_site_editor/graphql/typedefs.graphql +++ /dev/null @@ -1,58 +0,0 @@ -type File { - title: String - content: String! -} - -type SavedContentField { - label: String! - url: String! -} - -type SavedContentMeta { - mergeRequest: SavedContentField! - commit: SavedContentField! - branch: SavedContentField! -} - -type Mount { - source: String! - target: String -} - -type AppData { - isSupportedContent: Boolean! - hasSubmittedChanges: Boolean! - project: String! - returnUrl: String - sourcePath: String! - username: String! - branch: String! - baseUrl: String! - mounts: [Mount]! - imageUploadPath: String! -} - -input HasSubmittedChangesInput { - hasSubmittedChanges: Boolean! -} - -input SubmitContentChangesInput { - project: String! - sourcePath: String! - content: String! - username: String! -} - -extend type Project { - file(path: ID!): File -} - -extend type Query { - appData: AppData! - savedContentMeta: SavedContentMeta -} - -extend type Mutation { - submitContentChanges(input: SubmitContentChangesInput!): SavedContentMeta - hasSubmittedChanges(input: HasSubmittedChangesInput!): AppData -} diff --git a/app/assets/javascripts/static_site_editor/image_repository.js b/app/assets/javascripts/static_site_editor/image_repository.js deleted file mode 100644 index 4ad2e2618ac..00000000000 --- a/app/assets/javascripts/static_site_editor/image_repository.js +++ /dev/null @@ -1,25 +0,0 @@ -import createFlash from '~/flash'; -import { __ } from '~/locale'; -import { getBinary } from './services/image_service'; - -const imageRepository = () => { - const images = new Map(); - const flash = (message) => - createFlash({ - message, - }); - - const add = (file, url) => { - getBinary(file) - .then((content) => images.set(url, content)) - .catch(() => flash(__('Something went wrong while inserting your image. Please try again.'))); - }; - - const get = (path) => images.get(path); - - const getAll = () => images; - - return { add, get, getAll }; -}; - -export default imageRepository; diff --git a/app/assets/javascripts/static_site_editor/index.js b/app/assets/javascripts/static_site_editor/index.js deleted file mode 100644 index 985579f68e8..00000000000 --- a/app/assets/javascripts/static_site_editor/index.js +++ /dev/null @@ -1,56 +0,0 @@ -import Vue from 'vue'; -import { parseBoolean } from '~/lib/utils/common_utils'; -import App from './components/app.vue'; -import createApolloProvider from './graphql'; -import createRouter from './router'; - -const initStaticSiteEditor = (el) => { - const { - isSupportedContent, - path: sourcePath, - baseUrl, - branch, - namespace, - project, - mergeRequestsIllustrationPath, - // NOTE: The following variables are not yet used, but are supported by the config file, - // so we are adding them here as a convenience for future use. - // eslint-disable-next-line no-unused-vars - staticSiteGenerator, - imageUploadPath, - mounts, - } = el.dataset; - const { current_username: username } = window.gon; - const returnUrl = el.dataset.returnUrl || null; - const router = createRouter(baseUrl); - const apolloProvider = createApolloProvider({ - isSupportedContent: parseBoolean(isSupportedContent), - hasSubmittedChanges: false, - project: `${namespace}/${project}`, - mounts: JSON.parse(mounts), // NOTE that the object in 'mounts' is a JSON string from the data attribute, so it must be parsed into an object. - branch, - baseUrl, - returnUrl, - sourcePath, - username, - imageUploadPath, - }); - - return new Vue({ - el, - router, - apolloProvider, - components: { - App, - }, - render(createElement) { - return createElement('app', { - props: { - mergeRequestsIllustrationPath, - }, - }); - }, - }); -}; - -export default initStaticSiteEditor; diff --git a/app/assets/javascripts/static_site_editor/pages/home.vue b/app/assets/javascripts/static_site_editor/pages/home.vue deleted file mode 100644 index beec1b515ad..00000000000 --- a/app/assets/javascripts/static_site_editor/pages/home.vue +++ /dev/null @@ -1,169 +0,0 @@ -<script> -import createFlash from '~/flash'; -import Tracking from '~/tracking'; - -import EditArea from '../components/edit_area.vue'; -import EditMetaModal from '../components/edit_meta_modal.vue'; -import InvalidContentMessage from '../components/invalid_content_message.vue'; -import SkeletonLoader from '../components/skeleton_loader.vue'; -import SubmitChangesError from '../components/submit_changes_error.vue'; -import { LOAD_CONTENT_ERROR, TRACKING_ACTION_INITIALIZE_EDITOR } from '../constants'; -import hasSubmittedChangesMutation from '../graphql/mutations/has_submitted_changes.mutation.graphql'; -import submitContentChangesMutation from '../graphql/mutations/submit_content_changes.mutation.graphql'; -import appDataQuery from '../graphql/queries/app_data.query.graphql'; -import sourceContentQuery from '../graphql/queries/source_content.query.graphql'; -import { SUCCESS_ROUTE } from '../router/constants'; - -export default { - components: { - SkeletonLoader, - EditArea, - EditMetaModal, - InvalidContentMessage, - SubmitChangesError, - }, - apollo: { - appData: { - query: appDataQuery, - }, - sourceContent: { - query: sourceContentQuery, - update: ({ - project: { - file: { title, content }, - }, - }) => { - return { title, content }; - }, - variables() { - return { - project: this.appData.project, - sourcePath: this.appData.sourcePath, - }; - }, - skip() { - return !this.appData.isSupportedContent; - }, - error() { - createFlash({ - message: LOAD_CONTENT_ERROR, - }); - }, - }, - }, - data() { - return { - content: null, - images: null, - formattedMarkdown: null, - submitChangesError: null, - isSavingChanges: false, - }; - }, - computed: { - isLoadingContent() { - return this.$apollo.queries.sourceContent.loading; - }, - isContentLoaded() { - return Boolean(this.sourceContent); - }, - projectSplit() { - return this.appData.project.split('/'); // TODO: refactor so `namespace` and `project` remain distinct - }, - }, - mounted() { - Tracking.event(document.body.dataset.page, TRACKING_ACTION_INITIALIZE_EDITOR); - }, - methods: { - onHideModal() { - this.isSavingChanges = false; - this.$refs.editMetaModal.hide(); - }, - onDismissError() { - this.submitChangesError = null; - }, - onPrepareSubmit({ formattedMarkdown, content, images }) { - this.content = content; - this.images = images; - this.formattedMarkdown = formattedMarkdown; - - this.isSavingChanges = true; - this.$refs.editMetaModal.show(); - }, - onSubmit(mergeRequestMeta) { - // eslint-disable-next-line promise/catch-or-return - this.$apollo - .mutate({ - mutation: hasSubmittedChangesMutation, - variables: { - input: { - hasSubmittedChanges: true, - }, - }, - }) - .finally(() => { - this.$router.push(SUCCESS_ROUTE); - }); - - this.$apollo - .mutate({ - mutation: submitContentChangesMutation, - variables: { - input: { - project: this.appData.project, - username: this.appData.username, - sourcePath: this.appData.sourcePath, - targetBranch: this.appData.branch, - content: this.content, - formattedMarkdown: this.formattedMarkdown, - images: this.images, - mergeRequestMeta, - }, - }, - }) - .catch((e) => { - this.submitChangesError = e.message; - }) - .finally(() => { - this.isSavingChanges = false; - }); - }, - }, -}; -</script> -<template> - <div class="container d-flex gl-flex-direction-column pt-2 h-100"> - <template v-if="appData.isSupportedContent"> - <skeleton-loader v-if="isLoadingContent" class="w-75 gl-align-self-center gl-mt-5" /> - <submit-changes-error - v-if="submitChangesError" - :error="submitChangesError" - @retry="onSubmit" - @dismiss="onDismissError" - /> - <edit-area - v-if="isContentLoaded" - :title="sourceContent.title" - :content="sourceContent.content" - :saving-changes="isSavingChanges" - :return-url="appData.returnUrl" - :mounts="appData.mounts" - :branch="appData.branch" - :base-url="appData.baseUrl" - :project="appData.project" - :image-root="appData.imageUploadPath" - @submit="onPrepareSubmit" - /> - <edit-meta-modal - ref="editMetaModal" - :source-path="appData.sourcePath" - :namespace="projectSplit[0]" - :project="projectSplit[1]" - @primary="onSubmit" - @hide="onHideModal" - /> - </template> - - <invalid-content-message v-else class="w-75" /> - </div> -</template> diff --git a/app/assets/javascripts/static_site_editor/pages/success.vue b/app/assets/javascripts/static_site_editor/pages/success.vue deleted file mode 100644 index eb03aa3cca3..00000000000 --- a/app/assets/javascripts/static_site_editor/pages/success.vue +++ /dev/null @@ -1,106 +0,0 @@ -<script> -import { GlButton, GlEmptyState, GlLoadingIcon } from '@gitlab/ui'; -import { s__, __, sprintf } from '~/locale'; - -import appDataQuery from '../graphql/queries/app_data.query.graphql'; -import savedContentMetaQuery from '../graphql/queries/saved_content_meta.query.graphql'; -import { HOME_ROUTE } from '../router/constants'; - -export default { - components: { - GlButton, - GlEmptyState, - GlLoadingIcon, - }, - props: { - mergeRequestsIllustrationPath: { - type: String, - required: true, - }, - }, - apollo: { - savedContentMeta: { - query: savedContentMetaQuery, - }, - appData: { - query: appDataQuery, - }, - }, - computed: { - updatedFileDescription() { - const { sourcePath } = this.appData; - - return sprintf(__('Update %{sourcePath} file'), { sourcePath }); - }, - }, - created() { - if (!this.appData.hasSubmittedChanges) { - this.$router.push(HOME_ROUTE); - } - }, - title: s__('StaticSiteEditor|Your merge request has been created'), - primaryButtonText: __('View merge request'), - returnToSiteBtnText: s__('StaticSiteEditor|Return to site'), - mergeRequestInstructionsHeading: s__( - 'StaticSiteEditor|To see your changes live you will need to do the following things:', - ), - addTitleInstruction: s__('StaticSiteEditor|1. Add a clear title to describe the change.'), - addDescriptionInstruction: s__( - 'StaticSiteEditor|2. Add a description to explain why the change is being made.', - ), - assignMergeRequestInstruction: s__( - 'StaticSiteEditor|3. Assign a person to review and accept the merge request.', - ), - submittingTitle: s__('StaticSiteEditor|Creating your merge request'), - submittingNotePrimary: s__( - 'StaticSiteEditor|You can set an assignee to get your changes reviewed and deployed once your merge request is created.', - ), - submittingNoteSecondary: s__( - 'StaticSiteEditor|A link to view the merge request will appear once ready.', - ), -}; -</script> -<template> - <div> - <div class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"> - <div class="container gl-py-4"> - <div class="gl-display-flex"> - <gl-button - v-if="appData.returnUrl" - ref="returnToSiteButton" - class="gl-mr-5 gl-align-self-start" - :href="appData.returnUrl" - >{{ $options.returnToSiteBtnText }}</gl-button - > - <strong class="gl-mt-2"> - {{ updatedFileDescription }} - </strong> - </div> - </div> - </div> - <div class="container"> - <gl-empty-state - class="gl-my-7" - :title="savedContentMeta ? $options.title : $options.submittingTitle" - :primary-button-text="savedContentMeta && $options.primaryButtonText" - :primary-button-link="savedContentMeta && savedContentMeta.mergeRequest.url" - :svg-path="mergeRequestsIllustrationPath" - :svg-height="146" - > - <template #description> - <div v-if="savedContentMeta"> - <p>{{ $options.mergeRequestInstructionsHeading }}</p> - <p>{{ $options.addTitleInstruction }}</p> - <p>{{ $options.addDescriptionInstruction }}</p> - <p>{{ $options.assignMergeRequestInstruction }}</p> - </div> - <div v-else> - <p>{{ $options.submittingNotePrimary }}</p> - <p>{{ $options.submittingNoteSecondary }}</p> - <gl-loading-icon size="xl" /> - </div> - </template> - </gl-empty-state> - </div> - </div> -</template> diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/constants.js b/app/assets/javascripts/static_site_editor/rich_content_editor/constants.js deleted file mode 100644 index cbb30baa488..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/constants.js +++ /dev/null @@ -1,57 +0,0 @@ -import { __ } from '~/locale'; - -export const CUSTOM_EVENTS = { - openAddImageModal: 'gl_openAddImageModal', - openInsertVideoModal: 'gl_openInsertVideoModal', -}; - -export const YOUTUBE_URL = 'https://www.youtube.com'; - -export const YOUTUBE_EMBED_URL = `${YOUTUBE_URL}/embed`; - -export const ALLOWED_VIDEO_ORIGINS = [YOUTUBE_URL]; - -/* eslint-disable @gitlab/require-i18n-strings */ -export const TOOLBAR_ITEM_CONFIGS = [ - { icon: 'heading', event: 'openHeadingSelect', classes: 'tui-heading', tooltip: __('Headings') }, - { icon: 'bold', command: 'Bold', tooltip: __('Add bold text') }, - { icon: 'italic', command: 'Italic', tooltip: __('Add italic text') }, - { icon: 'strikethrough', command: 'Strike', tooltip: __('Add strikethrough text') }, - { isDivider: true }, - { icon: 'quote', command: 'Blockquote', tooltip: __('Insert a quote') }, - { icon: 'link', event: 'openPopupAddLink', tooltip: __('Add a link') }, - { isDivider: true }, - { icon: 'list-bulleted', command: 'UL', tooltip: __('Add a bullet list') }, - { icon: 'list-numbered', command: 'OL', tooltip: __('Add a numbered list') }, - { icon: 'list-task', command: 'Task', tooltip: __('Add a task list') }, - { icon: 'list-indent', command: 'Indent', tooltip: __('Indent') }, - { icon: 'list-outdent', command: 'Outdent', tooltip: __('Outdent') }, - { isDivider: true }, - { icon: 'dash', command: 'HR', tooltip: __('Add a line') }, - { icon: 'table', event: 'openPopupAddTable', classes: 'tui-table', tooltip: __('Add a table') }, - { icon: 'doc-image', event: CUSTOM_EVENTS.openAddImageModal, tooltip: __('Insert an image') }, - { icon: 'live-preview', event: CUSTOM_EVENTS.openInsertVideoModal, tooltip: __('Insert video') }, - { isDivider: true }, - { icon: 'code', command: 'Code', tooltip: __('Insert inline code') }, - { icon: 'doc-code', command: 'CodeBlock', tooltip: __('Insert a code block') }, -]; - -export const EDITOR_TYPES = { - markdown: 'markdown', - wysiwyg: 'wysiwyg', -}; - -export const EDITOR_HEIGHT = '100%'; - -export const EDITOR_PREVIEW_STYLE = 'horizontal'; - -export const IMAGE_TABS = { UPLOAD_TAB: 0, URL_TAB: 1 }; - -export const MAX_FILE_SIZE = 2097152; // 2Mb - -export const VIDEO_ATTRIBUTES = { - width: '560', - height: '315', - frameBorder: '0', - allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture', -}; diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/modals/add_image/add_image_modal.vue b/app/assets/javascripts/static_site_editor/rich_content_editor/modals/add_image/add_image_modal.vue deleted file mode 100644 index 82060d2e4ad..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/modals/add_image/add_image_modal.vue +++ /dev/null @@ -1,134 +0,0 @@ -<script> -import { GlModal, GlFormGroup, GlFormInput, GlTabs, GlTab } from '@gitlab/ui'; -import { isSafeURL, joinPaths } from '~/lib/utils/url_utility'; -import { __ } from '~/locale'; -import { IMAGE_TABS } from '../../constants'; -import UploadImageTab from './upload_image_tab.vue'; - -export default { - components: { - UploadImageTab, - GlModal, - GlFormGroup, - GlFormInput, - GlTabs, - GlTab, - }, - props: { - imageRoot: { - type: String, - required: true, - }, - }, - data() { - return { - file: null, - urlError: null, - imageUrl: null, - description: null, - tabIndex: IMAGE_TABS.UPLOAD_TAB, - uploadImageTab: null, - }; - }, - modalTitle: __('Image details'), - okTitle: __('Insert image'), - urlTabTitle: __('Link to an image'), - urlLabel: __('Image URL'), - descriptionLabel: __('Description'), - uploadTabTitle: __('Upload an image'), - computed: { - altText() { - return this.description; - }, - }, - methods: { - show() { - this.file = null; - this.urlError = null; - this.imageUrl = null; - this.description = null; - this.tabIndex = IMAGE_TABS.UPLOAD_TAB; - - this.$refs.modal.show(); - }, - onOk(event) { - if (this.tabIndex === IMAGE_TABS.UPLOAD_TAB) { - this.submitFile(event); - return; - } - this.submitURL(event); - }, - setFile(file) { - this.file = file; - }, - submitFile(event) { - const { file, altText } = this; - const { uploadImageTab } = this.$refs; - - uploadImageTab.validateFile(); - - if (uploadImageTab.fileError) { - event.preventDefault(); - return; - } - - const imageUrl = joinPaths(this.imageRoot, file.name); - - this.$emit('addImage', { imageUrl, file, altText: altText || file.name }); - }, - submitURL(event) { - if (!this.validateUrl()) { - event.preventDefault(); - return; - } - - const { imageUrl, altText } = this; - - this.$emit('addImage', { imageUrl, altText: altText || imageUrl }); - }, - validateUrl() { - if (!isSafeURL(this.imageUrl)) { - this.urlError = __('Please provide a valid URL'); - this.$refs.urlInput.$el.focus(); - return false; - } - - return true; - }, - }, -}; -</script> -<template> - <gl-modal - ref="modal" - modal-id="add-image-modal" - :title="$options.modalTitle" - :ok-title="$options.okTitle" - @ok="onOk" - > - <gl-tabs v-model="tabIndex"> - <!-- Upload file Tab --> - <gl-tab :title="$options.uploadTabTitle"> - <upload-image-tab ref="uploadImageTab" @input="setFile" /> - </gl-tab> - - <!-- By URL Tab --> - <gl-tab :title="$options.urlTabTitle"> - <gl-form-group - class="gl-mt-5 gl-mb-3" - :label="$options.urlLabel" - label-for="url-input" - :state="!Boolean(urlError)" - :invalid-feedback="urlError" - > - <gl-form-input id="url-input" ref="urlInput" v-model="imageUrl" /> - </gl-form-group> - </gl-tab> - </gl-tabs> - - <!-- Description Input --> - <gl-form-group :label="$options.descriptionLabel" label-for="description-input"> - <gl-form-input id="description-input" ref="descriptionInput" v-model="description" /> - </gl-form-group> - </gl-modal> -</template> diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/modals/add_image/upload_image_tab.vue b/app/assets/javascripts/static_site_editor/rich_content_editor/modals/add_image/upload_image_tab.vue deleted file mode 100644 index 9baa7f286d7..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/modals/add_image/upload_image_tab.vue +++ /dev/null @@ -1,56 +0,0 @@ -<script> -import { GlFormGroup } from '@gitlab/ui'; -import { __ } from '~/locale'; -import { MAX_FILE_SIZE } from '../../constants'; - -export default { - components: { - GlFormGroup, - }, - data() { - return { - file: null, - fileError: null, - }; - }, - fileLabel: __('Select file'), - methods: { - onInput(event) { - [this.file] = event.target.files; - - this.validateFile(); - - if (!this.fileError) { - this.$emit('input', this.file); - } - }, - validateFile() { - this.fileError = null; - - if (!this.file) { - this.fileError = __('Please choose a file'); - } else if (this.file.size > MAX_FILE_SIZE) { - this.fileError = __('Maximum file size is 2MB. Please select a smaller file.'); - } - }, - }, -}; -</script> -<template> - <gl-form-group - class="gl-mt-5 gl-mb-3" - :label="$options.fileLabel" - label-for="file-input" - :state="!Boolean(fileError)" - :invalid-feedback="fileError" - > - <input - id="file-input" - ref="fileInput" - class="gl-mt-3 gl-mb-2" - type="file" - accept="image/*" - @input="onInput" - /> - </gl-form-group> -</template> diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/modals/insert_video_modal.vue b/app/assets/javascripts/static_site_editor/rich_content_editor/modals/insert_video_modal.vue deleted file mode 100644 index 5ce2c17f8de..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/modals/insert_video_modal.vue +++ /dev/null @@ -1,93 +0,0 @@ -<script> -import { GlModal, GlFormGroup, GlFormInput, GlSprintf } from '@gitlab/ui'; -import { isSafeURL } from '~/lib/utils/url_utility'; -import { __ } from '~/locale'; -import { YOUTUBE_URL, YOUTUBE_EMBED_URL } from '../constants'; - -export default { - components: { - GlModal, - GlFormGroup, - GlFormInput, - GlSprintf, - }, - data() { - return { - url: null, - urlError: null, - description: __( - 'If the YouTube URL is https://www.youtube.com/watch?v=0t1DgySidms then the video ID is %{id}', - ), - }; - }, - modalTitle: __('Insert a video'), - okTitle: __('Insert video'), - label: __('YouTube URL or ID'), - methods: { - show() { - this.urlError = null; - this.url = null; - - this.$refs.modal.show(); - }, - onPrimary(event) { - this.submitURL(event); - }, - submitURL(event) { - const url = this.generateUrl(); - - if (!url) { - event.preventDefault(); - return; - } - - this.$emit('insertVideo', url); - }, - generateUrl() { - let { url } = this; - const reYouTubeId = /^[A-z0-9]*$/; - const reYouTubeUrl = RegExp(`${YOUTUBE_URL}/(embed/|watch\\?v=)([A-z0-9]+)`); - - if (reYouTubeId.test(url)) { - url = `${YOUTUBE_EMBED_URL}/${url}`; - } else if (reYouTubeUrl.test(url)) { - url = `${YOUTUBE_EMBED_URL}/${reYouTubeUrl.exec(url)[2]}`; - } - - if (!isSafeURL(url) || !reYouTubeUrl.test(url)) { - this.urlError = __('Please provide a valid YouTube URL or ID'); - this.$refs.urlInput.$el.focus(); - return null; - } - - return url; - }, - }, -}; -</script> -<template> - <gl-modal - ref="modal" - size="sm" - modal-id="insert-video-modal" - :title="$options.modalTitle" - :ok-title="$options.okTitle" - @primary="onPrimary" - > - <gl-form-group - :label="$options.label" - label-for="video-modal-url-input" - :state="!Boolean(urlError)" - :invalid-feedback="urlError" - > - <gl-form-input id="video-modal-url-input" ref="urlInput" v-model="url" /> - <template #description> - <gl-sprintf :message="description" class="text-gl-muted"> - <template #id> - <strong>{{ __('0t1DgySidms') }}</strong> - </template> - </gl-sprintf> - </template> - </gl-form-group> - </gl-modal> -</template> diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/rich_content_editor.vue b/app/assets/javascripts/static_site_editor/rich_content_editor/rich_content_editor.vue deleted file mode 100644 index 8988dab85d2..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/rich_content_editor.vue +++ /dev/null @@ -1,150 +0,0 @@ -<script> -import 'codemirror/lib/codemirror.css'; -import '@toast-ui/editor/dist/toastui-editor.css'; - -import { EDITOR_TYPES, EDITOR_HEIGHT, EDITOR_PREVIEW_STYLE, CUSTOM_EVENTS } from './constants'; -import AddImageModal from './modals/add_image/add_image_modal.vue'; -import InsertVideoModal from './modals/insert_video_modal.vue'; - -import { - registerHTMLToMarkdownRenderer, - getEditorOptions, - addCustomEventListener, - removeCustomEventListener, - addImage, - getMarkdown, - insertVideo, -} from './services/editor_service'; - -export default { - components: { - ToastEditor: () => - import(/* webpackChunkName: 'toast_editor' */ '@toast-ui/vue-editor').then( - (toast) => toast.Editor, - ), - AddImageModal, - InsertVideoModal, - }, - props: { - content: { - type: String, - required: true, - }, - options: { - type: Object, - required: false, - default: () => null, - }, - initialEditType: { - type: String, - required: false, - default: EDITOR_TYPES.wysiwyg, - }, - height: { - type: String, - required: false, - default: EDITOR_HEIGHT, - }, - previewStyle: { - type: String, - required: false, - default: EDITOR_PREVIEW_STYLE, - }, - imageRoot: { - type: String, - required: true, - }, - }, - data() { - return { - editorApi: null, - previousMode: null, - }; - }, - computed: { - editorInstance() { - return this.$refs.editor; - }, - customEventListeners() { - return [ - { event: CUSTOM_EVENTS.openAddImageModal, listener: this.onOpenAddImageModal }, - { event: CUSTOM_EVENTS.openInsertVideoModal, listener: this.onOpenInsertVideoModal }, - ]; - }, - }, - created() { - this.editorOptions = getEditorOptions(this.options); - }, - beforeDestroy() { - this.removeListeners(); - }, - methods: { - addListeners(editorApi) { - this.customEventListeners.forEach(({ event, listener }) => { - addCustomEventListener(editorApi, event, listener); - }); - - editorApi.eventManager.listen('changeMode', this.onChangeMode); - }, - removeListeners() { - this.customEventListeners.forEach(({ event, listener }) => { - removeCustomEventListener(this.editorApi, event, listener); - }); - - this.editorApi.eventManager.removeEventHandler('changeMode', this.onChangeMode); - }, - resetInitialValue(newVal) { - this.editorInstance.invoke('setMarkdown', newVal); - }, - onContentChanged() { - this.$emit('input', getMarkdown(this.editorInstance)); - }, - onLoad(editorApi) { - this.editorApi = editorApi; - - registerHTMLToMarkdownRenderer(editorApi); - - this.addListeners(editorApi); - - this.$emit('load', { formattedMarkdown: editorApi.getMarkdown() }); - }, - onOpenAddImageModal() { - this.$refs.addImageModal.show(); - }, - onAddImage({ imageUrl, altText, file }) { - const image = { imageUrl, altText }; - - if (file) { - this.$emit('uploadImage', { file, imageUrl }); - } - - addImage(this.editorInstance, image, file); - }, - onOpenInsertVideoModal() { - this.$refs.insertVideoModal.show(); - }, - onInsertVideo(url) { - insertVideo(this.editorInstance, url); - }, - onChangeMode(newMode) { - this.$emit('modeChange', newMode); - }, - }, -}; -</script> -<template> - <div> - <toast-editor - ref="editor" - :initial-value="content" - :options="editorOptions" - :preview-style="previewStyle" - :initial-edit-type="initialEditType" - :height="height" - @change="onContentChanged" - @load="onLoad" - /> - <add-image-modal ref="addImageModal" :image-root="imageRoot" @addImage="onAddImage" /> - <insert-video-modal ref="insertVideoModal" @insertVideo="onInsertVideo" /> - </div> -</template> diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/services/build_custom_renderer.js b/app/assets/javascripts/static_site_editor/rich_content_editor/services/build_custom_renderer.js deleted file mode 100644 index 6ffd280e005..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/services/build_custom_renderer.js +++ /dev/null @@ -1,42 +0,0 @@ -import { union, mapValues } from 'lodash'; -import renderAttributeDefinition from './renderers/render_attribute_definition'; -import renderFontAwesomeHtmlInline from './renderers/render_font_awesome_html_inline'; -import renderHeading from './renderers/render_heading'; -import renderBlockHtml from './renderers/render_html_block'; -import renderIdentifierInstanceText from './renderers/render_identifier_instance_text'; -import renderIdentifierParagraph from './renderers/render_identifier_paragraph'; -import renderListItem from './renderers/render_list_item'; -import renderSoftbreak from './renderers/render_softbreak'; - -const htmlInlineRenderers = [renderFontAwesomeHtmlInline]; -const htmlBlockRenderers = [renderBlockHtml]; -const headingRenderers = [renderHeading]; -const paragraphRenderers = [renderIdentifierParagraph, renderBlockHtml]; -const textRenderers = [renderIdentifierInstanceText, renderAttributeDefinition]; -const listItemRenderers = [renderListItem]; -const softbreakRenderers = [renderSoftbreak]; - -const executeRenderer = (renderers, node, context) => { - const availableRenderer = renderers.find((renderer) => renderer.canRender(node, context)); - - return availableRenderer ? availableRenderer.render(node, context) : context.origin(); -}; - -const buildCustomHTMLRenderer = (customRenderers) => { - const renderersByType = { - ...customRenderers, - htmlBlock: union(htmlBlockRenderers, customRenderers?.htmlBlock), - htmlInline: union(htmlInlineRenderers, customRenderers?.htmlInline), - heading: union(headingRenderers, customRenderers?.heading), - item: union(listItemRenderers, customRenderers?.listItem), - paragraph: union(paragraphRenderers, customRenderers?.paragraph), - text: union(textRenderers, customRenderers?.text), - softbreak: union(softbreakRenderers, customRenderers?.softbreak), - }; - - return mapValues(renderersByType, (renderers) => { - return (node, context) => executeRenderer(renderers, node, context); - }); -}; - -export default buildCustomHTMLRenderer; diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/services/build_html_to_markdown_renderer.js b/app/assets/javascripts/static_site_editor/rich_content_editor/services/build_html_to_markdown_renderer.js deleted file mode 100644 index 273e0a59963..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/services/build_html_to_markdown_renderer.js +++ /dev/null @@ -1,109 +0,0 @@ -/* eslint-disable @gitlab/require-i18n-strings */ -import { defaults, repeat } from 'lodash'; - -const DEFAULTS = { - subListIndentSpaces: 4, - unorderedListBulletChar: '-', - incrementListMarker: false, - strong: '*', - emphasis: '_', -}; - -const countIndentSpaces = (text) => { - const matches = text.match(/^\s+/m); - - return matches ? matches[0].length : 0; -}; - -const buildHTMLToMarkdownRender = (baseRenderer, formattingPreferences = {}) => { - const { - subListIndentSpaces, - unorderedListBulletChar, - incrementListMarker, - strong, - emphasis, - } = defaults(formattingPreferences, DEFAULTS); - const sublistNode = 'LI OL, LI UL'; - const unorderedListItemNode = 'UL LI'; - const orderedListItemNode = 'OL LI'; - const emphasisNode = 'EM, I'; - const strongNode = 'STRONG, B'; - const headingNode = 'H1, H2, H3, H4, H5, H6'; - const preCodeNode = 'PRE CODE'; - - return { - TEXT_NODE(node) { - return baseRenderer.getSpaceControlled( - baseRenderer.trim(baseRenderer.getSpaceCollapsedText(node.nodeValue)), - node, - ); - }, - /* - * This converter overwrites the default indented list converter - * to allow us to parameterize the number of indent spaces for - * sublists. - * - * See the original implementation in - * https://github.com/nhn/tui.editor/blob/master/libs/to-mark/src/renderer.basic.js#L161 - */ - [sublistNode](node, subContent) { - const baseResult = baseRenderer.convert(node, subContent); - // Default to 1 to prevent possible divide by 0 - const firstLevelIndentSpacesCount = countIndentSpaces(baseResult) || 1; - const reindentedList = baseResult - .split('\n') - .map((line) => { - const itemIndentSpacesCount = countIndentSpaces(line); - const nestingLevel = Math.ceil(itemIndentSpacesCount / firstLevelIndentSpacesCount); - const indentSpaces = repeat(' ', subListIndentSpaces * nestingLevel); - - return line.replace(/^ +/, indentSpaces); - }) - .join('\n'); - - return reindentedList; - }, - [unorderedListItemNode](node, subContent) { - const baseResult = baseRenderer.convert(node, subContent); - const formatted = baseResult.replace(/^(\s*)([*|-])/, `$1${unorderedListBulletChar}`); - const { attributeDefinition } = node.dataset; - - return attributeDefinition ? `${formatted.trimRight()}\n${attributeDefinition}\n` : formatted; - }, - [orderedListItemNode](node, subContent) { - const baseResult = baseRenderer.convert(node, subContent); - - return incrementListMarker ? baseResult : baseResult.replace(/^(\s*)\d+?\./, '$11.'); - }, - [emphasisNode](node, subContent) { - const result = baseRenderer.convert(node, subContent); - - return result.replace(/(^[*_]{1}|[*_]{1}$)/g, emphasis); - }, - [strongNode](node, subContent) { - const result = baseRenderer.convert(node, subContent); - const strongSyntax = repeat(strong, 2); - - return result.replace(/^[*_]{2}/, strongSyntax).replace(/[*_]{2}$/, strongSyntax); - }, - [headingNode](node, subContent) { - const result = baseRenderer.convert(node, subContent); - const { attributeDefinition } = node.dataset; - - return attributeDefinition ? `${result.trimRight()}\n${attributeDefinition}\n\n` : result; - }, - [preCodeNode](node, subContent) { - const isReferenceDefinition = Boolean(node.dataset.sseReferenceDefinition); - - return isReferenceDefinition - ? `\n\n${node.innerText}\n\n` - : baseRenderer.convert(node, subContent); - }, - IMG(node) { - const { originalSrc } = node.dataset; - return ``; - }, - }; -}; - -export default buildHTMLToMarkdownRender; diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/services/editor_service.js b/app/assets/javascripts/static_site_editor/rich_content_editor/services/editor_service.js deleted file mode 100644 index 026a4069d9b..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/services/editor_service.js +++ /dev/null @@ -1,116 +0,0 @@ -import { defaults } from 'lodash'; -import Vue from 'vue'; -import { TOOLBAR_ITEM_CONFIGS, VIDEO_ATTRIBUTES } from '../constants'; -import ToolbarItem from '../toolbar_item.vue'; -import buildCustomHTMLRenderer from './build_custom_renderer'; -import buildHtmlToMarkdownRenderer from './build_html_to_markdown_renderer'; -import sanitizeHTML from './sanitize_html'; - -const buildWrapper = (propsData) => { - const instance = new Vue({ - render(createElement) { - return createElement(ToolbarItem, propsData); - }, - }); - - instance.$mount(); - return instance.$el; -}; - -const buildVideoIframe = (src) => { - const wrapper = document.createElement('figure'); - const iframe = document.createElement('iframe'); - const videoAttributes = { ...VIDEO_ATTRIBUTES, src }; - const wrapperClasses = ['gl-relative', 'gl-h-0', 'video_container']; - const iframeClasses = ['gl-absolute', 'gl-top-0', 'gl-left-0', 'gl-w-full', 'gl-h-full']; - - wrapper.setAttribute('contenteditable', 'false'); - wrapper.classList.add(...wrapperClasses); - iframe.classList.add(...iframeClasses); - Object.assign(iframe, videoAttributes); - - wrapper.appendChild(iframe); - - return wrapper; -}; - -const buildImg = (alt, originalSrc, file) => { - const img = document.createElement('img'); - const src = file ? URL.createObjectURL(file) : originalSrc; - const attributes = { alt, src }; - - if (file) { - img.dataset.originalSrc = originalSrc; - } - - Object.assign(img, attributes); - - return img; -}; - -export const generateToolbarItem = (config) => { - const { icon, classes, event, command, tooltip, isDivider } = config; - - if (isDivider) { - return 'divider'; - } - - return { - type: 'button', - options: { - el: buildWrapper({ props: { icon, tooltip }, class: classes }), - event, - command, - }, - }; -}; - -export const addCustomEventListener = (editorApi, event, handler) => { - editorApi.eventManager.addEventType(event); - editorApi.eventManager.listen(event, handler); -}; - -export const removeCustomEventListener = (editorApi, event, handler) => - editorApi.eventManager.removeEventHandler(event, handler); - -export const addImage = ({ editor }, { altText, imageUrl }, file) => { - if (editor.isWysiwygMode()) { - const img = buildImg(altText, imageUrl, file); - editor.getSquire().insertElement(img); - } else { - editor.insertText(``); - } -}; - -export const insertVideo = ({ editor }, url) => { - const videoIframe = buildVideoIframe(url); - - if (editor.isWysiwygMode()) { - editor.getSquire().insertElement(videoIframe); - } else { - editor.insertText(videoIframe.outerHTML); - } -}; - -export const getMarkdown = (editorInstance) => editorInstance.invoke('getMarkdown'); - -/** - * This function allow us to extend Toast UI HTML to Markdown renderer. It is - * a temporary measure because Toast UI does not provide an API - * to achieve this goal. - */ -export const registerHTMLToMarkdownRenderer = (editorApi) => { - const { renderer } = editorApi.toMarkOptions; - - Object.assign(editorApi.toMarkOptions, { - renderer: renderer.constructor.factory(renderer, buildHtmlToMarkdownRenderer(renderer)), - }); -}; - -export const getEditorOptions = (externalOptions) => { - return defaults({ - customHTMLRenderer: buildCustomHTMLRenderer(externalOptions?.customRenderers), - toolbarItems: TOOLBAR_ITEM_CONFIGS.map((toolbarItem) => generateToolbarItem(toolbarItem)), - customHTMLSanitizer: (html) => sanitizeHTML(html), - }); -}; diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/build_uneditable_token.js b/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/build_uneditable_token.js deleted file mode 100644 index 638e5fd6f60..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/build_uneditable_token.js +++ /dev/null @@ -1,63 +0,0 @@ -const buildToken = (type, tagName, props) => { - return { type, tagName, ...props }; -}; - -const TAG_TYPES = { - block: 'div', - inline: 'a', -}; - -// Open helpers (singular and multiple) - -const buildUneditableOpenToken = (tagType = TAG_TYPES.block) => - buildToken('openTag', tagType, { - attributes: { contenteditable: false }, - classNames: [ - 'gl-px-4 gl-py-2 gl-my-5 gl-opacity-5 gl-bg-gray-100 gl-user-select-none gl-cursor-not-allowed', - ], - }); - -export const buildUneditableOpenTokens = (token, tagType = TAG_TYPES.block) => { - return [buildUneditableOpenToken(tagType), token]; -}; - -// Close helpers (singular and multiple) - -export const buildUneditableCloseToken = (tagType = TAG_TYPES.block) => - buildToken('closeTag', tagType); - -export const buildUneditableCloseTokens = (token, tagType = TAG_TYPES.block) => { - return [token, buildUneditableCloseToken(tagType)]; -}; - -// Complete helpers (open plus close) - -export const buildTextToken = (content) => buildToken('text', null, { content }); - -export const buildUneditableBlockTokens = (token) => { - return [...buildUneditableOpenTokens(token), buildUneditableCloseToken()]; -}; - -export const buildUneditableInlineTokens = (token) => { - return [ - ...buildUneditableOpenTokens(token, TAG_TYPES.inline), - buildUneditableCloseToken(TAG_TYPES.inline), - ]; -}; - -export const buildUneditableHtmlAsTextTokens = (node) => { - /* - Toast UI internally appends ' data-tomark-pass ' attribute flags so it can target certain - nested nodes for internal use during Markdown <=> WYSIWYG conversions. In our case, we want - to prevent HTML being rendered completely in WYSIWYG mode and thus we use a `text` vs. `html` - type when building the token. However, in doing so, we need to strip out the ` data-tomark-pass ` - to prevent their persistence within the `text` content as the user did not intend these as edits. - - https://github.com/nhn/tui.editor/blob/cc54ec224fc3a4b6e5a2b19a71650959f41adc0e/apps/editor/src/js/convertor.js#L72 - */ - const regex = / data-tomark-pass /gm; - const content = node.literal.replace(regex, ''); - const htmlAsTextToken = buildToken('text', null, { content }); - - return [buildUneditableOpenToken(), htmlAsTextToken, buildUneditableCloseToken()]; -}; diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_attribute_definition.js b/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_attribute_definition.js deleted file mode 100644 index bd419447a48..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_attribute_definition.js +++ /dev/null @@ -1,7 +0,0 @@ -import { isAttributeDefinition } from './render_utils'; - -const canRender = ({ literal }) => isAttributeDefinition(literal); - -const render = () => ({ type: 'html', content: '<!-- sse-attribute-definition -->' }); - -export default { canRender, render }; diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_embedded_ruby_text.js b/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_embedded_ruby_text.js deleted file mode 100644 index 0e122f598e5..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_embedded_ruby_text.js +++ /dev/null @@ -1,9 +0,0 @@ -import { renderUneditableLeaf as render } from './render_utils'; - -const embeddedRubyRegex = /(^<%.+%>$)/; - -const canRender = ({ literal }) => { - return embeddedRubyRegex.test(literal); -}; - -export default { canRender, render }; diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_font_awesome_html_inline.js b/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_font_awesome_html_inline.js deleted file mode 100644 index 572f6e3cf9d..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_font_awesome_html_inline.js +++ /dev/null @@ -1,11 +0,0 @@ -import { buildUneditableInlineTokens } from './build_uneditable_token'; - -const fontAwesomeRegexOpen = /<i class="fa.+>/; - -const canRender = ({ literal }) => { - return fontAwesomeRegexOpen.test(literal); -}; - -const render = (_, { origin }) => buildUneditableInlineTokens(origin()); - -export default { canRender, render }; diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_heading.js b/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_heading.js deleted file mode 100644 index 71026fd0d65..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_heading.js +++ /dev/null @@ -1,6 +0,0 @@ -import { - renderWithAttributeDefinitions as render, - willAlwaysRender as canRender, -} from './render_utils'; - -export default { render, canRender }; diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_html_block.js b/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_html_block.js deleted file mode 100644 index 710b807275b..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_html_block.js +++ /dev/null @@ -1,23 +0,0 @@ -import { getURLOrigin } from '~/lib/utils/url_utility'; -import { ALLOWED_VIDEO_ORIGINS } from '../../constants'; -import { buildUneditableHtmlAsTextTokens } from './build_uneditable_token'; - -const isVideoFrame = (html) => { - const parser = new DOMParser(); - const doc = parser.parseFromString(html, 'text/html'); - const { - children: { length }, - } = doc; - const iframe = doc.querySelector('iframe'); - const origin = iframe && getURLOrigin(iframe.getAttribute('src')); - - return length === 1 && ALLOWED_VIDEO_ORIGINS.includes(origin); -}; - -const canRender = ({ type, literal }) => { - return type === 'htmlBlock' && !isVideoFrame(literal); -}; - -const render = (node) => buildUneditableHtmlAsTextTokens(node); - -export default { canRender, render }; diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_identifier_instance_text.js b/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_identifier_instance_text.js deleted file mode 100644 index e41dc51457a..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_identifier_instance_text.js +++ /dev/null @@ -1,40 +0,0 @@ -import { buildTextToken, buildUneditableInlineTokens } from './build_uneditable_token'; - -/* -Use case examples: -- Majority: two bracket pairs, back-to-back, each with content (including spaces) - - `[environment terraform plans][terraform]` - - `[an issue labelled `~"main:broken"`][broken-main-issues]` -- Minority: two bracket pairs the latter being empty or only one pair with content (including spaces) - - `[this link][]` - - `[this link]` - -Regexp notes: - - `(?:\[.+?\]){1}`: Always one bracket pair with content (including spaces) - - `(?:\[\]|\[.+?\])?`: Optional second pair that may or may not contain content (including spaces) - - `(?!:)`: Never followed by a `:` which is reserved for identifier definition syntax (`[identifier]: /the-link`) - - Each of the three parts is non-captured, but the match as a whole is captured -*/ -const identifierInstanceRegex = /((?:\[.+?\]){1}(?:\[\]|\[.+?\])?(?!:))/g; - -const isIdentifierInstance = (literal) => { - // Reset lastIndex as global flag in regexp are stateful - identifierInstanceRegex.lastIndex = 0; - return identifierInstanceRegex.test(literal); -}; - -const canRender = ({ literal }) => isIdentifierInstance(literal); - -const tokenize = (text) => { - const matches = text.split(identifierInstanceRegex); - const tokens = matches.map((match) => { - const token = buildTextToken(match); - return isIdentifierInstance(match) ? buildUneditableInlineTokens(token) : token; - }); - - return tokens.flat(); -}; - -const render = (_, { origin }) => tokenize(origin().content); - -export default { canRender, render }; diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_identifier_paragraph.js b/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_identifier_paragraph.js deleted file mode 100644 index 4829f0f2243..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_identifier_paragraph.js +++ /dev/null @@ -1,40 +0,0 @@ -const identifierRegex = /(^\[.+\]: .+)/; - -const isIdentifier = (text) => { - return identifierRegex.test(text); -}; - -const canRender = (node, context) => { - return isIdentifier(context.getChildrenText(node)); -}; - -const getReferenceDefinitions = (node, definitions = '') => { - if (!node) { - return definitions; - } - - const definition = node.type === 'text' ? node.literal : '\n'; - - return getReferenceDefinitions(node.next, `${definitions}${definition}`); -}; - -const render = (node, { skipChildren }) => { - const content = getReferenceDefinitions(node.firstChild); - - skipChildren(); - - return [ - { - type: 'openTag', - tagName: 'pre', - classNames: ['code-block', 'language-markdown'], - attributes: { 'data-sse-reference-definition': true }, - }, - { type: 'openTag', tagName: 'code' }, - { type: 'text', content }, - { type: 'closeTag', tagName: 'code' }, - { type: 'closeTag', tagName: 'pre' }, - ]; -}; - -export default { canRender, render }; diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_list_item.js b/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_list_item.js deleted file mode 100644 index 71026fd0d65..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_list_item.js +++ /dev/null @@ -1,6 +0,0 @@ -import { - renderWithAttributeDefinitions as render, - willAlwaysRender as canRender, -} from './render_utils'; - -export default { render, canRender }; diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_softbreak.js b/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_softbreak.js deleted file mode 100644 index c004e839821..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_softbreak.js +++ /dev/null @@ -1,7 +0,0 @@ -const canRender = (node) => ['emph', 'strong'].includes(node.parent?.type); -const render = () => ({ - type: 'text', - content: ' ', -}); - -export default { canRender, render }; diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_utils.js b/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_utils.js deleted file mode 100644 index eff5dbf59f2..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/services/renderers/render_utils.js +++ /dev/null @@ -1,38 +0,0 @@ -import { - buildUneditableBlockTokens, - buildUneditableOpenTokens, - buildUneditableCloseToken, -} from './build_uneditable_token'; - -export const renderUneditableLeaf = (_, { origin }) => buildUneditableBlockTokens(origin()); - -export const renderUneditableBranch = (_, { entering, origin }) => - entering ? buildUneditableOpenTokens(origin()) : buildUneditableCloseToken(); - -const attributeDefinitionRegexp = /(^{:.+}$)/; - -export const isAttributeDefinition = (text) => attributeDefinitionRegexp.test(text); - -const findAttributeDefinition = (node) => { - const literal = - node?.next?.firstChild?.literal || node?.firstChild?.firstChild?.next?.next?.literal; // for headings // for list items; - - return isAttributeDefinition(literal) ? literal : null; -}; - -export const renderWithAttributeDefinitions = (node, { origin }) => { - const attributes = findAttributeDefinition(node); - const token = origin(); - - if (token.type === 'openTag' && attributes) { - Object.assign(token, { - attributes: { - 'data-attribute-definition': attributes, - }, - }); - } - - return token; -}; - -export const willAlwaysRender = () => true; diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/services/sanitize_html.js b/app/assets/javascripts/static_site_editor/rich_content_editor/services/sanitize_html.js deleted file mode 100644 index 486d88466b7..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/services/sanitize_html.js +++ /dev/null @@ -1,22 +0,0 @@ -import createSanitizer from 'dompurify'; -import { getURLOrigin } from '~/lib/utils/url_utility'; -import { ALLOWED_VIDEO_ORIGINS } from '../constants'; - -const sanitizer = createSanitizer(window); -const ADD_TAGS = ['iframe']; - -sanitizer.addHook('uponSanitizeElement', (node) => { - if (node.tagName !== 'IFRAME') { - return; - } - - const origin = getURLOrigin(node.getAttribute('src')); - - if (!ALLOWED_VIDEO_ORIGINS.includes(origin)) { - node.remove(); - } -}); - -const sanitize = (content) => sanitizer.sanitize(content, { ADD_TAGS }); - -export default sanitize; diff --git a/app/assets/javascripts/static_site_editor/rich_content_editor/toolbar_item.vue b/app/assets/javascripts/static_site_editor/rich_content_editor/toolbar_item.vue deleted file mode 100644 index 85a67c087bb..00000000000 --- a/app/assets/javascripts/static_site_editor/rich_content_editor/toolbar_item.vue +++ /dev/null @@ -1,31 +0,0 @@ -<script> -import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; - -export default { - components: { - GlIcon, - }, - directives: { - GlTooltip: GlTooltipDirective, - }, - props: { - icon: { - type: String, - required: true, - }, - tooltip: { - type: String, - required: true, - }, - }, -}; -</script> -<template> - <button - v-gl-tooltip="{ title: tooltip }" - :aria-label="tooltip" - class="p-0 gl-display-flex toolbar-button" - > - <gl-icon class="gl-mx-auto gl-align-self-center" :name="icon" /> - </button> -</template> diff --git a/app/assets/javascripts/static_site_editor/router/constants.js b/app/assets/javascripts/static_site_editor/router/constants.js deleted file mode 100644 index fd715f918ce..00000000000 --- a/app/assets/javascripts/static_site_editor/router/constants.js +++ /dev/null @@ -1,2 +0,0 @@ -export const HOME_ROUTE = { name: 'home' }; -export const SUCCESS_ROUTE = { name: 'success' }; diff --git a/app/assets/javascripts/static_site_editor/router/index.js b/app/assets/javascripts/static_site_editor/router/index.js deleted file mode 100644 index 12692612bbc..00000000000 --- a/app/assets/javascripts/static_site_editor/router/index.js +++ /dev/null @@ -1,15 +0,0 @@ -import Vue from 'vue'; -import VueRouter from 'vue-router'; -import routes from './routes'; - -Vue.use(VueRouter); - -export default function createRouter(base) { - const router = new VueRouter({ - base, - mode: 'history', - routes, - }); - - return router; -} diff --git a/app/assets/javascripts/static_site_editor/router/routes.js b/app/assets/javascripts/static_site_editor/router/routes.js deleted file mode 100644 index 6fb9dbe0182..00000000000 --- a/app/assets/javascripts/static_site_editor/router/routes.js +++ /dev/null @@ -1,21 +0,0 @@ -import Home from '../pages/home.vue'; -import Success from '../pages/success.vue'; - -import { HOME_ROUTE, SUCCESS_ROUTE } from './constants'; - -export default [ - { - ...HOME_ROUTE, - path: '/', - component: Home, - }, - { - ...SUCCESS_ROUTE, - path: '/success', - component: Success, - }, - { - path: '*', - redirect: HOME_ROUTE, - }, -]; diff --git a/app/assets/javascripts/static_site_editor/services/formatter.js b/app/assets/javascripts/static_site_editor/services/formatter.js deleted file mode 100644 index e841c664406..00000000000 --- a/app/assets/javascripts/static_site_editor/services/formatter.js +++ /dev/null @@ -1,56 +0,0 @@ -import { repeat } from 'lodash'; - -const topLevelOrderedRegexp = /^\d{1,3}/; -const nestedLineRegexp = /^\s+/; - -/** - * DISCLAIMER: This is a temporary fix that corrects the indentation - * spaces of list items. This workaround originates in the usage of - * the Static Site Editor to edit the Handbook. The Handbook uses a - * Markdown parser called Kramdown interprets lines indented - * with two spaces as content within a list. For example: - * - * 1. ordered list - * - nested unordered list - * - * The Static Site Editor uses a different Markdown parser based on the - * CommonMark specification (official Markdown spec) called ToastMark. - * When the SSE encounters a nested list with only two spaces, it flattens - * the list: - * - * 1. ordered list - * - nested unordered list - * - * This function attempts to correct this problem before the content is loaded - * by Toast UI. - */ -const correctNestedContentIndenation = (source) => { - const lines = source.split('\n'); - let topLevelOrderedListDetected = false; - - return lines - .reduce((result, line) => { - if (topLevelOrderedListDetected && nestedLineRegexp.test(line)) { - return [...result, line.replace(nestedLineRegexp, repeat(' ', 4))]; - } - - topLevelOrderedListDetected = topLevelOrderedRegexp.test(line); - return [...result, line]; - }, []) - .join('\n'); -}; - -const removeOrphanedBrTags = (source) => { - /* Until the underlying Squire editor of Toast UI Editor resolves duplicate `<br>` tags, this - `replace` solution will clear out orphaned `<br>` tags that it generates. Additionally, - it cleans up orphaned `<br>` tags in the source markdown document that should be new lines. - https://gitlab.com/gitlab-org/gitlab/-/issues/227602#note_380765330 - */ - return source.replace(/\n^<br>$/gm, ''); -}; - -const format = (source) => { - return correctNestedContentIndenation(removeOrphanedBrTags(source)); -}; - -export default format; diff --git a/app/assets/javascripts/static_site_editor/services/front_matterify.js b/app/assets/javascripts/static_site_editor/services/front_matterify.js deleted file mode 100644 index 6b897b42648..00000000000 --- a/app/assets/javascripts/static_site_editor/services/front_matterify.js +++ /dev/null @@ -1,75 +0,0 @@ -import jsYaml from 'js-yaml'; - -const NEW_LINE = '\n'; - -const hasMatter = (firstThreeChars, fourthChar) => { - const isYamlDelimiter = firstThreeChars === '---'; - const isFourthCharNewline = fourthChar === NEW_LINE; - return isYamlDelimiter && isFourthCharNewline; -}; - -export const frontMatterify = (source) => { - let index = 3; - let offset; - const delimiter = source.slice(0, index); - const type = 'yaml'; - const NO_FRONTMATTER = { - source, - matter: null, - hasMatter: false, - spacing: null, - content: source, - delimiter: null, - type: null, - }; - - if (!hasMatter(delimiter, source.charAt(index))) { - return NO_FRONTMATTER; - } - - offset = source.indexOf(delimiter, index); - - // Finds the end delimiter that starts at a new line - while (offset !== -1 && source.charAt(offset - 1) !== NEW_LINE) { - index = offset + delimiter.length; - offset = source.indexOf(delimiter, index); - } - - if (offset === -1) { - return NO_FRONTMATTER; - } - - const matterStr = source.slice(index, offset); - const matter = jsYaml.safeLoad(matterStr); - - let content = source.slice(offset + delimiter.length); - let spacing = ''; - let idx = 0; - while (content.charAt(idx).match(/(\s|\n)/)) { - spacing += content.charAt(idx); - idx += 1; - } - content = content.replace(spacing, ''); - - return { - source, - matter, - hasMatter: true, - spacing, - content, - delimiter, - type, - }; -}; - -export const stringify = ({ matter, spacing, content, delimiter }, newMatter) => { - const matterObj = newMatter || matter; - - if (!matterObj) { - return content; - } - - const header = `${delimiter}${NEW_LINE}${jsYaml.safeDump(matterObj)}${delimiter}`; - const body = `${spacing}${content}`; - return `${header}${body}`; -}; diff --git a/app/assets/javascripts/static_site_editor/services/generate_branch_name.js b/app/assets/javascripts/static_site_editor/services/generate_branch_name.js deleted file mode 100644 index cbf03a41ce2..00000000000 --- a/app/assets/javascripts/static_site_editor/services/generate_branch_name.js +++ /dev/null @@ -1,8 +0,0 @@ -import { BRANCH_SUFFIX_COUNT } from '../constants'; - -const generateBranchSuffix = () => `${Date.now()}`.substr(BRANCH_SUFFIX_COUNT); - -const generateBranchName = (username, targetBranch) => - `${username}-${targetBranch}-patch-${generateBranchSuffix()}`; - -export default generateBranchName; diff --git a/app/assets/javascripts/static_site_editor/services/image_service.js b/app/assets/javascripts/static_site_editor/services/image_service.js deleted file mode 100644 index a9b85057e3d..00000000000 --- a/app/assets/javascripts/static_site_editor/services/image_service.js +++ /dev/null @@ -1,8 +0,0 @@ -export const getBinary = (file) => { - return new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.readAsDataURL(file); - reader.onload = () => resolve(reader.result.split(',')[1]); - reader.onerror = (error) => reject(error); - }); -}; diff --git a/app/assets/javascripts/static_site_editor/services/load_source_content.js b/app/assets/javascripts/static_site_editor/services/load_source_content.js deleted file mode 100644 index fcf69efafd8..00000000000 --- a/app/assets/javascripts/static_site_editor/services/load_source_content.js +++ /dev/null @@ -1,15 +0,0 @@ -import Api from '~/api'; - -const extractTitle = (content) => { - const matches = content.match(/title: (.+)\n/i); - - return matches ? Array.from(matches)[1] : ''; -}; - -const loadSourceContent = ({ projectId, sourcePath }) => - Api.getRawFile(projectId, sourcePath).then(({ data }) => ({ - title: extractTitle(data), - content: data, - })); - -export default loadSourceContent; diff --git a/app/assets/javascripts/static_site_editor/services/parse_source_file.js b/app/assets/javascripts/static_site_editor/services/parse_source_file.js deleted file mode 100644 index d7499d75a21..00000000000 --- a/app/assets/javascripts/static_site_editor/services/parse_source_file.js +++ /dev/null @@ -1,46 +0,0 @@ -import { frontMatterify, stringify } from './front_matterify'; - -const parseSourceFile = (raw) => { - let editable; - - const syncContent = (newVal, isBody) => { - if (isBody) { - editable.content = newVal; - } else { - try { - editable = frontMatterify(newVal); - editable.isMatterValid = true; - } catch (e) { - editable.isMatterValid = false; - } - } - }; - - const content = (isBody = false) => (isBody ? editable.content : stringify(editable)); - - const matter = () => editable.matter; - - const syncMatter = (settings) => { - editable.matter = settings; - }; - - const isModified = () => stringify(editable) !== raw; - - const hasMatter = () => editable.hasMatter; - - const isMatterValid = () => editable.isMatterValid; - - syncContent(raw); - - return { - matter, - isMatterValid, - syncMatter, - content, - syncContent, - isModified, - hasMatter, - }; -}; - -export default parseSourceFile; diff --git a/app/assets/javascripts/static_site_editor/services/renderers/render_image.js b/app/assets/javascripts/static_site_editor/services/renderers/render_image.js deleted file mode 100644 index b5651e7163e..00000000000 --- a/app/assets/javascripts/static_site_editor/services/renderers/render_image.js +++ /dev/null @@ -1,89 +0,0 @@ -import { isAbsolute, getBaseURL, joinPaths } from '~/lib/utils/url_utility'; - -const canRender = ({ type }) => type === 'image'; - -let metadata; - -const getCachedContent = (basePath) => metadata.imageRepository.get(basePath); - -const isRelativeToCurrentDirectory = (basePath) => !basePath.startsWith('/'); - -const extractSourceDirectory = (url) => { - const sourceDir = /^(.+)\/([^/]+)$/.exec(url); // Extracts the base path and fileName from an image path - return sourceDir || [null, null, url]; // If no source directory was extracted it means only a fileName was specified (e.g. url='file.png') -}; - -const parseCurrentDirectory = (basePath) => { - const baseUrl = decodeURIComponent(metadata.baseUrl); - const sourceDirectory = extractSourceDirectory(baseUrl)[1]; - const currentDirectory = sourceDirectory.split(`/-/sse/${metadata.branch}`)[1]; - - return joinPaths(currentDirectory, basePath); -}; - -// For more context around this logic, please see the following comment: -// https://gitlab.com/gitlab-org/gitlab/-/issues/241166#note_409413500 -const generateSourceDirectory = (basePath) => { - let sourceDir = ''; - let defaultSourceDir = ''; - - if (!basePath || isRelativeToCurrentDirectory(basePath)) { - return parseCurrentDirectory(basePath); - } - - if (!metadata.mounts.length) { - return basePath; - } - - metadata.mounts.forEach(({ source, target }) => { - const hasTarget = target !== ''; - - if (hasTarget && basePath.includes(target)) { - sourceDir = source; - } else if (!hasTarget) { - defaultSourceDir = joinPaths(source, basePath); - } - }); - - return sourceDir || defaultSourceDir; -}; - -const resolveFullPath = (originalSrc, cachedContent) => { - if (cachedContent) { - return `data:image;base64,${cachedContent}`; - } - - if (isAbsolute(originalSrc)) { - return originalSrc; - } - - const sourceDirectory = extractSourceDirectory(originalSrc); - const [, basePath, fileName] = sourceDirectory; - const sourceDir = generateSourceDirectory(basePath); - - return joinPaths(getBaseURL(), metadata.project, '/-/raw/', metadata.branch, sourceDir, fileName); -}; - -const render = ({ destination: originalSrc, firstChild }, { skipChildren }) => { - skipChildren(); - - const cachedContent = getCachedContent(originalSrc); - - return { - type: 'openTag', - tagName: 'img', - selfClose: true, - attributes: { - 'data-original-src': !isAbsolute(originalSrc) || cachedContent ? originalSrc : '', - src: resolveFullPath(originalSrc, cachedContent), - alt: firstChild.literal, - }, - }; -}; - -const build = (mounts = [], project, branch, baseUrl, imageRepository) => { - metadata = { mounts, project, branch, baseUrl, imageRepository }; - return { canRender, render }; -}; - -export default { build }; diff --git a/app/assets/javascripts/static_site_editor/services/submit_content_changes.js b/app/assets/javascripts/static_site_editor/services/submit_content_changes.js deleted file mode 100644 index 99534413d92..00000000000 --- a/app/assets/javascripts/static_site_editor/services/submit_content_changes.js +++ /dev/null @@ -1,145 +0,0 @@ -import Api from '~/api'; -import { convertObjectPropsToSnakeCase } from '~/lib/utils/common_utils'; -import generateBranchName from '~/static_site_editor/services/generate_branch_name'; -import Tracking from '~/tracking'; - -import { - SUBMIT_CHANGES_BRANCH_ERROR, - SUBMIT_CHANGES_COMMIT_ERROR, - SUBMIT_CHANGES_MERGE_REQUEST_ERROR, - TRACKING_ACTION_CREATE_COMMIT, - TRACKING_ACTION_CREATE_MERGE_REQUEST, - SERVICE_PING_TRACKING_ACTION_CREATE_COMMIT, - SERVICE_PING_TRACKING_ACTION_CREATE_MERGE_REQUEST, - DEFAULT_FORMATTING_CHANGES_COMMIT_MESSAGE, - DEFAULT_FORMATTING_CHANGES_COMMIT_DESCRIPTION, -} from '../constants'; - -const createBranch = (projectId, branch, targetBranch) => - Api.createBranch(projectId, { - ref: targetBranch, - branch, - }).catch(() => { - throw new Error(SUBMIT_CHANGES_BRANCH_ERROR); - }); - -const createImageActions = (images, markdown) => { - const actions = []; - - if (!markdown) { - return actions; - } - - images.forEach((imageContent, filePath) => { - const imageExistsInMarkdown = (path) => new RegExp(`!\\[([^[\\]\\n]*)\\](\\(${path})\\)`); // matches the image markdown syntax:  - - if (imageExistsInMarkdown(filePath).test(markdown)) { - actions.push( - convertObjectPropsToSnakeCase({ - encoding: 'base64', - action: 'create', - content: imageContent, - filePath, - }), - ); - } - }); - - return actions; -}; - -const createUpdateSourceFileAction = (sourcePath, content) => [ - convertObjectPropsToSnakeCase({ - action: 'update', - filePath: sourcePath, - content, - }), -]; - -const commit = (projectId, message, branch, actions) => { - Tracking.event(document.body.dataset.page, TRACKING_ACTION_CREATE_COMMIT); - Api.trackRedisCounterEvent(SERVICE_PING_TRACKING_ACTION_CREATE_COMMIT); - - return Api.commitMultiple( - projectId, - convertObjectPropsToSnakeCase({ - branch, - commitMessage: message, - actions, - }), - ).catch(() => { - throw new Error(SUBMIT_CHANGES_COMMIT_ERROR); - }); -}; - -const createMergeRequest = (projectId, title, description, sourceBranch, targetBranch) => { - Tracking.event(document.body.dataset.page, TRACKING_ACTION_CREATE_MERGE_REQUEST); - Api.trackRedisCounterEvent(SERVICE_PING_TRACKING_ACTION_CREATE_MERGE_REQUEST); - - return Api.createProjectMergeRequest( - projectId, - convertObjectPropsToSnakeCase({ - title, - description, - sourceBranch, - targetBranch, - }), - ).catch(() => { - throw new Error(SUBMIT_CHANGES_MERGE_REQUEST_ERROR); - }); -}; - -const submitContentChanges = ({ - username, - projectId, - sourcePath, - targetBranch, - content, - images, - mergeRequestMeta, - formattedMarkdown, -}) => { - const branch = generateBranchName(username, targetBranch); - const { title: mergeRequestTitle, description: mergeRequestDescription } = mergeRequestMeta; - const meta = {}; - - return createBranch(projectId, branch, targetBranch) - .then(({ data: { web_url: url } }) => { - const message = `${DEFAULT_FORMATTING_CHANGES_COMMIT_MESSAGE}\n\n${DEFAULT_FORMATTING_CHANGES_COMMIT_DESCRIPTION}`; - - Object.assign(meta, { branch: { label: branch, url } }); - - return formattedMarkdown - ? commit( - projectId, - message, - branch, - createUpdateSourceFileAction(sourcePath, formattedMarkdown), - ) - : meta; - }) - .then(() => - commit(projectId, mergeRequestTitle, branch, [ - ...createUpdateSourceFileAction(sourcePath, content), - ...createImageActions(images, content), - ]), - ) - .then(({ data: { short_id: label, web_url: url } }) => { - Object.assign(meta, { commit: { label, url } }); - - return createMergeRequest( - projectId, - mergeRequestTitle, - mergeRequestDescription, - branch, - targetBranch, - ); - }) - .then(({ data: { iid: label, web_url: url } }) => { - Object.assign(meta, { mergeRequest: { label: label.toString(), url } }); - - return meta; - }); -}; - -export default submitContentChanges; diff --git a/app/assets/javascripts/static_site_editor/services/templater.js b/app/assets/javascripts/static_site_editor/services/templater.js deleted file mode 100644 index 47fc36c3d18..00000000000 --- a/app/assets/javascripts/static_site_editor/services/templater.js +++ /dev/null @@ -1,89 +0,0 @@ -/** - * The purpose of this file is to modify Markdown source such that templated code (embedded ruby currently) can be temporarily wrapped and unwrapped in codeblocks: - * 1. `wrap()`: temporarily wrap in codeblocks (useful for a WYSIWYG editing experience) - * 2. `unwrap()`: undo the temporarily wrapped codeblocks (useful for Markdown editing experience and saving edits) - * - * Without this `templater`, the templated code is otherwise interpreted as Markdown content resulting in loss of spacing, indentation, escape characters, etc. - * - */ - -const ticks = '```'; -const marker = 'sse'; -const wrapPrefix = `${ticks} ${marker}\n`; // Space intentional due to https://github.com/nhn/tui.editor/blob/6bcec75c69028570d93d973aa7533090257eaae0/libs/to-mark/src/renderer.gfm.js#L26 -const wrapPostfix = `\n${ticks}`; -const markPrefix = `${marker}-${Date.now()}`; - -const reHelpers = { - template: `.| |\\t|\\n(?!(\\n|${markPrefix}))`, - openTag: '<(?!figure|iframe)[a-zA-Z]+.*?>', - closeTag: '</.+>', -}; -const reTemplated = new RegExp(`(^${wrapPrefix}(${reHelpers.template})+?${wrapPostfix}$)`, 'gm'); -const rePreexistingCodeBlocks = new RegExp(`(^${ticks}.*\\n(.|\\s)+?${ticks}$)`, 'gm'); -const reHtmlMarkup = new RegExp( - `^((${reHelpers.openTag}){1}(${reHelpers.template})*(${reHelpers.closeTag}){1})$`, - 'gm', -); -const reEmbeddedRubyBlock = new RegExp(`(^<%(${reHelpers.template})+%>$)`, 'gm'); -const reEmbeddedRubyInline = new RegExp(`(^.*[<|<]%(${reHelpers.template})+$)`, 'gm'); - -const patternGroups = { - ignore: [rePreexistingCodeBlocks], - // Order is intentional (general to specific) where HTML markup is marked first, then ERB blocks, then inline ERB - // Order in combo with the `mark()` algorithm is used to mitigate potential duplicate pattern matches (ERB nested in HTML for example) - allow: [reHtmlMarkup, reEmbeddedRubyBlock, reEmbeddedRubyInline], -}; - -const mark = (source, groups) => { - let text = source; - let id = 0; - const hash = {}; - - Object.entries(groups).forEach(([groupKey, group]) => { - group.forEach((pattern) => { - const matches = text.match(pattern); - if (matches) { - matches.forEach((match) => { - const key = `${markPrefix}-${groupKey}-${id}`; - text = text.replace(match, key); - hash[key] = match; - id += 1; - }); - } - }); - }); - - return { text, hash }; -}; - -const unmark = (text, hash) => { - let source = text; - - Object.entries(hash).forEach(([key, value]) => { - const newVal = key.includes('ignore') ? value : `${wrapPrefix}${value}${wrapPostfix}`; - source = source.replace(key, newVal); - }); - - return source; -}; - -const unwrap = (source) => { - let text = source; - const matches = text.match(reTemplated); - - if (matches) { - matches.forEach((match) => { - const initial = match.replace(`${wrapPrefix}`, '').replace(`${wrapPostfix}`, ''); - text = text.replace(match, initial); - }); - } - - return text; -}; - -const wrap = (source) => { - const { text, hash } = mark(unwrap(source), patternGroups); - return unmark(text, hash); -}; - -export default { wrap, unwrap }; diff --git a/app/assets/javascripts/tags/components/delete_tag_modal.vue b/app/assets/javascripts/tags/components/delete_tag_modal.vue new file mode 100644 index 00000000000..e3b666ec968 --- /dev/null +++ b/app/assets/javascripts/tags/components/delete_tag_modal.vue @@ -0,0 +1,192 @@ +<script> +import { GlButton, GlFormInput, GlModal, GlSprintf, GlAlert } from '@gitlab/ui'; +import { parseBoolean } from '~/lib/utils/common_utils'; +import csrf from '~/lib/utils/csrf'; +import { sprintf, s__ } from '~/locale'; +import eventHub from '../event_hub'; + +export default { + csrf, + components: { + GlModal, + GlButton, + GlFormInput, + GlSprintf, + GlAlert, + }, + data() { + return { + isProtected: false, + tagName: '', + path: '', + enteredTagName: '', + modalId: 'delete-tag-modal', + }; + }, + computed: { + title() { + const modalTitle = this.isProtected + ? this.$options.i18n.modalTitleProtectedTag + : this.$options.i18n.modalTitle; + + return sprintf(modalTitle, { tagName: this.tagName }); + }, + message() { + const modalMessage = this.isProtected + ? this.$options.i18n.modalMessageProtectedTag + : this.$options.i18n.modalMessage; + + return sprintf(modalMessage, { tagName: this.tagName }); + }, + undoneWarning() { + return sprintf(this.$options.i18n.undoneWarning, { + buttonText: this.buttonText, + }); + }, + confirmationText() { + return sprintf(this.$options.i18n.confirmationText, { + tagName: this.tagName, + }); + }, + buttonText() { + return this.isProtected + ? this.$options.i18n.deleteButtonTextProtectedTag + : this.$options.i18n.deleteButtonText; + }, + tagNameConfirmed() { + return this.enteredTagName === this.tagName; + }, + deleteButtonDisabled() { + return this.isProtected && !this.tagNameConfirmed; + }, + }, + mounted() { + eventHub.$on('openModal', this.openModal); + for (const btn of document.querySelectorAll('.js-delete-tag-button')) { + btn.addEventListener('click', this.deleteTagBtnListener.bind(this, btn)); + } + }, + destroyed() { + eventHub.$off('openModal', this.openModal); + for (const btn of document.querySelectorAll('.js-delete-tag-button')) { + btn.removeEventListener('click', this.deleteTagBtnListener.bind(this, btn)); + } + }, + methods: { + deleteTagBtnListener(btn) { + return this.openModal({ + ...btn.dataset, + isProtected: parseBoolean(btn.dataset.isProtected), + }); + }, + openModal({ isProtected, tagName, path }) { + this.enteredTagName = ''; + this.isProtected = isProtected; + this.tagName = tagName; + this.path = path; + + this.$refs.modal.show(); + }, + submitForm() { + this.$refs.form.submit(); + }, + closeModal() { + this.$refs.modal.hide(); + }, + }, + i18n: { + modalTitle: s__('TagsPage|Delete tag. Are you ABSOLUTELY SURE?'), + modalTitleProtectedTag: s__('TagsPage|Delete protected tag. Are you ABSOLUTELY SURE?'), + modalMessage: s__( + "TagsPage|You're about to permanently delete the tag %{strongStart}%{tagName}.%{strongEnd}", + ), + modalMessageProtectedTag: s__( + "TagsPage|You're about to permanently delete the protected tag %{strongStart}%{tagName}.%{strongEnd}", + ), + undoneWarning: s__( + 'TagsPage|After you confirm and select %{strongStart}%{buttonText},%{strongEnd} you cannot recover this tag.', + ), + cancelButtonText: s__('TagsPage|Cancel, keep tag'), + confirmationText: s__( + 'TagsPage|Deleting the %{strongStart}%{tagName}%{strongEnd} tag cannot be undone. Are you sure?', + ), + confirmationTextProtectedTag: s__('TagsPage|Please type the following to confirm:'), + deleteButtonText: s__('TagsPage|Yes, delete tag'), + deleteButtonTextProtectedTag: s__('TagsPage|Yes, delete protected tag'), + }, +}; +</script> + +<template> + <gl-modal ref="modal" size="sm" :modal-id="modalId" :title="title"> + <gl-alert class="gl-mb-5" variant="danger" :dismissible="false"> + <div data-testid="modal-message"> + <gl-sprintf :message="message"> + <template #strong="{ content }"> + <strong> {{ content }} </strong> + </template> + </gl-sprintf> + </div> + </gl-alert> + + <form ref="form" :action="path" method="post"> + <div v-if="isProtected" class="gl-mt-4"> + <p> + <gl-sprintf :message="undoneWarning"> + <template #strong="{ content }"> + <strong> {{ content }} </strong> + </template> + </gl-sprintf> + </p> + <p> + <gl-sprintf :message="$options.i18n.confirmationTextProtectedTag"> + <template #strong="{ content }"> + {{ content }} + </template> + </gl-sprintf> + <code class="gl-white-space-pre-wrap"> {{ tagName }} </code> + <gl-form-input + v-model="enteredTagName" + name="delete_tag_input" + type="text" + class="gl-mt-4" + aria-labelledby="input-label" + autocomplete="off" + /> + </p> + </div> + <div v-else> + <p class="gl-mt-4"> + <gl-sprintf :message="confirmationText"> + <template #strong="{ content }"> + <strong> + {{ content }} + </strong> + </template> + </gl-sprintf> + </p> + </div> + + <input ref="method" type="hidden" name="_method" value="delete" /> + <input :value="$options.csrf.token" type="hidden" name="authenticity_token" /> + </form> + + <template #modal-footer> + <div class="gl-display-flex gl-flex-direction-row gl-justify-content-end gl-flex-wrap gl-m-0"> + <gl-button data-testid="delete-tag-cancel-button" @click="closeModal"> + {{ $options.i18n.cancelButtonText }} + </gl-button> + <div class="gl-mr-3"></div> + <gl-button + ref="deleteTagButton" + :disabled="deleteButtonDisabled" + variant="danger" + data-qa-selector="delete_tag_confirmation_button" + data-testid="delete-tag-confirmation-button" + @click="submitForm" + >{{ buttonText }}</gl-button + > + </div> + </template> + </gl-modal> +</template> diff --git a/app/assets/javascripts/tags/event_hub.js b/app/assets/javascripts/tags/event_hub.js new file mode 100644 index 00000000000..e31806ad199 --- /dev/null +++ b/app/assets/javascripts/tags/event_hub.js @@ -0,0 +1,3 @@ +import createEventHub from '~/helpers/event_hub_factory'; + +export default createEventHub(); diff --git a/app/assets/javascripts/tags/init_delete_tag_modal.js b/app/assets/javascripts/tags/init_delete_tag_modal.js new file mode 100644 index 00000000000..03e3d393c14 --- /dev/null +++ b/app/assets/javascripts/tags/init_delete_tag_modal.js @@ -0,0 +1,14 @@ +import Vue from 'vue'; +import DeleteTagModal from '~/tags/components/delete_tag_modal.vue'; + +export default function initDeleteTagModal() { + const el = document.querySelector('.js-delete-tag-modal'); + if (!el) return false; + + return new Vue({ + el, + render(createComponent) { + return createComponent(DeleteTagModal); + }, + }); +} diff --git a/app/assets/javascripts/terraform/components/states_table.vue b/app/assets/javascripts/terraform/components/states_table.vue index efc2991f40f..b19f92aaeb4 100644 --- a/app/assets/javascripts/terraform/components/states_table.vue +++ b/app/assets/javascripts/terraform/components/states_table.vue @@ -1,7 +1,16 @@ <script> -import { GlAlert, GlBadge, GlLink, GlLoadingIcon, GlSprintf, GlTable, GlTooltip } from '@gitlab/ui'; +import { + GlAlert, + GlBadge, + GlLink, + GlLoadingIcon, + GlSprintf, + GlTable, + GlTooltip, + GlTooltipDirective, +} from '@gitlab/ui'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; -import { s__ } from '~/locale'; +import { s__, sprintf } from '~/locale'; import CiBadge from '~/vue_shared/components/ci_badge_link.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import timeagoMixin from '~/vue_shared/mixins/timeago'; @@ -20,6 +29,9 @@ export default { StateActions, TimeAgoTooltip, }, + directives: { + GlTooltip: GlTooltipDirective, + }, mixins: [timeagoMixin], props: { states: { @@ -68,6 +80,8 @@ export default { locked: s__('Terraform|Locked'), lockedByUser: s__('Terraform|Locked by %{user} %{timeAgo}'), lockingState: s__('Terraform|Locking state'), + deleting: s__('Terraform|Removed'), + deletionInProgress: s__('Terraform|Deletion in progress'), name: s__('Terraform|Name'), pipeline: s__('Terraform|Pipeline'), removing: s__('Terraform|Removing'), @@ -85,6 +99,12 @@ export default { lockedByUserName(item) { return item.lockedByUser?.name || this.$options.i18n.unknownUser; }, + lockedByUserText(item) { + return sprintf(this.$options.i18n.lockedByUser, { + user: this.lockedByUserName(item), + timeAgo: this.timeFormatted(item.lockedAt), + }); + }, pipelineDetailedStatus(item) { return item.latestVersion?.job?.detailedStatus; }, @@ -142,29 +162,27 @@ export default { </div> <div + v-else-if="item.deletedAt" + v-gl-tooltip.right + class="gl-mx-3" + :title="$options.i18n.deletionInProgress" + :data-testid="`state-badge-${item.name}`" + > + <gl-badge icon="remove"> + {{ $options.i18n.deleting }} + </gl-badge> + </div> + + <div v-else-if="item.lockedAt" - :id="`terraformLockedBadgeContainer${item.name}`" + v-gl-tooltip.right class="gl-mx-3" + :title="lockedByUserText(item)" + :data-testid="`state-badge-${item.name}`" > - <gl-badge :id="`terraformLockedBadge${item.name}`" icon="lock"> + <gl-badge icon="lock"> {{ $options.i18n.locked }} </gl-badge> - - <gl-tooltip - :container="`terraformLockedBadgeContainer${item.name}`" - :target="`terraformLockedBadge${item.name}`" - placement="right" - > - <gl-sprintf :message="$options.i18n.lockedByUser"> - <template #user> - {{ lockedByUserName(item) }} - </template> - - <template #timeAgo> - {{ timeFormatted(item.lockedAt) }} - </template> - </gl-sprintf> - </gl-tooltip> </div> </div> </template> diff --git a/app/assets/javascripts/terraform/components/states_table_actions.vue b/app/assets/javascripts/terraform/components/states_table_actions.vue index 1970d6d7949..773ecf1d5d5 100644 --- a/app/assets/javascripts/terraform/components/states_table_actions.vue +++ b/app/assets/javascripts/terraform/components/states_table_actions.vue @@ -33,6 +33,7 @@ export default { directives: { GlModalDirective, }, + inject: ['projectPath'], props: { state: { required: true, @@ -149,7 +150,14 @@ export default { variables: { stateID: this.state.id, }, - refetchQueries: () => [{ query: getStatesQuery }], + refetchQueries: () => [ + { + query: getStatesQuery, + variables: { + projectPath: this.projectPath, + }, + }, + ], awaitRefetchQueries: true, notifyOnNetworkStatusChange: true, }) diff --git a/app/assets/javascripts/terraform/components/terraform_list.vue b/app/assets/javascripts/terraform/components/terraform_list.vue index 7eb79120fb8..f098b447d10 100644 --- a/app/assets/javascripts/terraform/components/terraform_list.vue +++ b/app/assets/javascripts/terraform/components/terraform_list.vue @@ -31,15 +31,12 @@ export default { GlTabs, StatesTable, }, + inject: ['projectPath'], props: { emptyStateImage: { required: true, type: String, }, - projectPath: { - required: true, - type: String, - }, terraformAdmin: { required: false, type: Boolean, @@ -105,7 +102,7 @@ export default { </p> </template> - <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-3" /> + <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3" /> <div v-else-if="statesList"> <div v-if="statesCount"> diff --git a/app/assets/javascripts/terraform/graphql/fragments/state.fragment.graphql b/app/assets/javascripts/terraform/graphql/fragments/state.fragment.graphql index fb823336411..ee3d5f474e2 100644 --- a/app/assets/javascripts/terraform/graphql/fragments/state.fragment.graphql +++ b/app/assets/javascripts/terraform/graphql/fragments/state.fragment.graphql @@ -11,6 +11,7 @@ fragment State on TerraformState { name lockedAt updatedAt + deletedAt lockedByUser { ...User diff --git a/app/assets/javascripts/terraform/index.js b/app/assets/javascripts/terraform/index.js index 34261f3c4db..2d70ccfac4d 100644 --- a/app/assets/javascripts/terraform/index.js +++ b/app/assets/javascripts/terraform/index.js @@ -30,6 +30,7 @@ export default () => { el, apolloProvider: new VueApollo({ defaultClient }), provide: { + projectPath, accessTokensPath, terraformApiUrl, username, @@ -38,8 +39,7 @@ export default () => { return createElement(TerraformList, { props: { emptyStateImage, - projectPath, - terraformAdmin: el.hasAttribute('data-terraform-admin'), + terraformAdmin: Object.prototype.hasOwnProperty.call(el.dataset, 'terraformAdmin'), }, }); }, diff --git a/app/assets/javascripts/token_access/components/token_access.vue b/app/assets/javascripts/token_access/components/token_access.vue index e739ec37739..de8cd856bf7 100644 --- a/app/assets/javascripts/token_access/components/token_access.vue +++ b/app/assets/javascripts/token_access/components/token_access.vue @@ -167,7 +167,7 @@ export default { </script> <template> <div> - <gl-loading-icon v-if="$apollo.loading" size="md" class="gl-mt-5" /> + <gl-loading-icon v-if="$apollo.loading" size="lg" class="gl-mt-5" /> <template v-else> <gl-toggle v-model="jobTokenScopeEnabled" diff --git a/app/assets/javascripts/token_access/components/token_projects_table.vue b/app/assets/javascripts/token_access/components/token_projects_table.vue index b6c9330c754..82ef3371d91 100644 --- a/app/assets/javascripts/token_access/components/token_projects_table.vue +++ b/app/assets/javascripts/token_access/components/token_projects_table.vue @@ -2,10 +2,6 @@ import { GlButton, GlTable } from '@gitlab/ui'; import { __, s__ } from '~/locale'; -const defaultTableClasses = { - thClass: 'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!', -}; - export default { i18n: { emptyText: s__('CI/CD|No projects have been added to the scope'), @@ -15,14 +11,12 @@ export default { key: 'project', label: __('Projects that can be accessed'), tdClass: 'gl-p-5!', - ...defaultTableClasses, columnClass: 'gl-w-85p', }, { key: 'actions', label: '', tdClass: 'gl-p-5! gl-text-right', - ...defaultTableClasses, columnClass: 'gl-w-15p', }, ], diff --git a/app/assets/javascripts/user_popovers.js b/app/assets/javascripts/user_popovers.js index 438ae2bc1bc..a3615eab26f 100644 --- a/app/assets/javascripts/user_popovers.js +++ b/app/assets/javascripts/user_popovers.js @@ -1,6 +1,8 @@ import Vue from 'vue'; +import { debounce } from 'lodash'; import UsersCache from './lib/utils/users_cache'; import UserPopover from './vue_shared/components/user_popover/user_popover.vue'; +import { USER_POPOVER_DELAY } from './vue_shared/components/user_popover/constants'; const removeTitle = (el) => { // Removing titles so its not showing tooltips also @@ -59,87 +61,78 @@ const populateUserInfo = (user) => { ); }; -const initializedPopovers = new Map(); -let domObservedForChanges = false; +function createPopover(el, user) { + removeTitle(el); + const preloadedUserInfo = getPreloadedUserInfo(el.dataset); -const addPopoversToModifiedTree = new MutationObserver(() => { - const userLinks = document?.querySelectorAll('.js-user-link, .gfm-project_member'); + Object.assign(user, preloadedUserInfo); - if (userLinks) { - addPopovers(userLinks); /* eslint-disable-line no-use-before-define */ + if (preloadedUserInfo.userId) { + populateUserInfo(user); } -}); + const UserPopoverComponent = Vue.extend(UserPopover); + return new UserPopoverComponent({ + propsData: { + target: el, + user, + show: true, + placement: el.dataset.placement || 'top', + }, + }); +} -function observeBody() { - if (!domObservedForChanges) { - addPopoversToModifiedTree.observe(document.body, { - subtree: true, - childList: true, - }); +function launchPopover(el, mountPopover) { + if (el.user) return; - domObservedForChanges = true; - } + const emptyUser = { + location: null, + bio: null, + workInformation: null, + status: null, + isFollowed: false, + loaded: false, + }; + el.user = emptyUser; + el.addEventListener( + 'mouseleave', + ({ target }) => { + target.removeAttribute('aria-describedby'); + }, + { once: true }, + ); + const popoverInstance = createPopover(el, emptyUser); + + const { userId } = el.dataset; + + popoverInstance.$on('follow', () => { + UsersCache.updateById(userId, { is_followed: true }); + el.user.isFollowed = true; + }); + + popoverInstance.$on('unfollow', () => { + UsersCache.updateById(userId, { is_followed: false }); + el.user.isFollowed = false; + }); + + mountPopover(popoverInstance); } -export default function addPopovers(elements = document.querySelectorAll('.js-user-link')) { - const userLinks = Array.from(elements); - const UserPopoverComponent = Vue.extend(UserPopover); +const userLinkSelector = 'a.js-user-link, a.gfm-project_member'; - observeBody(); +const getUserLinkNode = (node) => node.closest(userLinkSelector); - return userLinks - .filter(({ dataset }) => dataset.user || dataset.userId) - .map((el) => { - if (initializedPopovers.has(el)) { - return initializedPopovers.get(el); - } +const lazyLaunchPopover = debounce((mountPopover, event) => { + const userLink = getUserLinkNode(event.target); + if (userLink) { + launchPopover(userLink, mountPopover); + } +}, USER_POPOVER_DELAY); - const user = { - location: null, - bio: null, - workInformation: null, - status: null, - isFollowed: false, - loaded: false, - }; - const renderedPopover = new UserPopoverComponent({ - propsData: { - target: el, - user, - placement: el.dataset.placement || 'top', - }, - }); - - const { userId } = el.dataset; - - renderedPopover.$on('follow', () => { - UsersCache.updateById(userId, { is_followed: true }); - user.isFollowed = true; - }); - - renderedPopover.$on('unfollow', () => { - UsersCache.updateById(userId, { is_followed: false }); - user.isFollowed = false; - }); - - initializedPopovers.set(el, renderedPopover); - - renderedPopover.$mount(); - - el.addEventListener('mouseenter', ({ target }) => { - removeTitle(target); - const preloadedUserInfo = getPreloadedUserInfo(target.dataset); - - Object.assign(user, preloadedUserInfo); - - if (preloadedUserInfo.userId) { - populateUserInfo(user); - } - }); - el.addEventListener('mouseleave', ({ target }) => { - target.removeAttribute('aria-describedby'); - }); - - return renderedPopover; - }); +let hasAddedLazyPopovers = false; + +export default function addPopovers(mountPopover = (instance) => instance.$mount()) { + if (!hasAddedLazyPopovers) { + document.addEventListener('mouseover', (event) => lazyLaunchPopover(mountPopover, event)); + hasAddedLazyPopovers = true; + } } diff --git a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue index e7d5e4086bc..4163d195e0f 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals.vue @@ -1,5 +1,5 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlButton, GlSprintf, GlLink } from '@gitlab/ui'; import createFlash from '~/flash'; import { BV_SHOW_MODAL } from '~/lib/utils/constants'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -11,9 +11,11 @@ import eventHub from '../../event_hub'; import approvalsMixin from '../../mixins/approvals'; import MrWidgetContainer from '../mr_widget_container.vue'; import MrWidgetIcon from '../mr_widget_icon.vue'; +import { INVALID_RULES_DOCS_PATH } from '../../constants'; import ApprovalsSummary from './approvals_summary.vue'; import ApprovalsSummaryOptional from './approvals_summary_optional.vue'; import { FETCH_LOADING, FETCH_ERROR, APPROVE_ERROR, UNAPPROVE_ERROR } from './messages'; +import { humanizeInvalidApproversRules } from './humanized_text'; export default { name: 'MRWidgetApprovals', @@ -23,6 +25,8 @@ export default { ApprovalsSummary, ApprovalsSummaryOptional, GlButton, + GlSprintf, + GlLink, }, mixins: [approvalsMixin, glFeatureFlagsMixin()], props: { @@ -78,6 +82,15 @@ export default { approvals() { return this.mr.approvals || {}; }, + invalidRules() { + return this.approvals.invalid_approvers_rules || []; + }, + hasInvalidRules() { + return this.approvals.merge_request_approvers_available && this.invalidRules.length; + }, + invalidRulesText() { + return humanizeInvalidApproversRules(this.invalidRules); + }, approvedBy() { return this.approvals.approved_by ? this.approvals.approved_by.map((x) => x.user) : []; }, @@ -104,20 +117,24 @@ export default { return { text: this.approvalText, category: this.isApproved ? 'secondary' : 'primary', - variant: 'info', + variant: 'confirm', action: () => this.approve(), }; } else if (this.showUnapprove) { return { text: s__('mrWidget|Revoke approval'), - variant: 'warning', - category: 'secondary', + variant: 'default', action: () => this.unapprove(), }; } return null; }, + pluralizedRuleText() { + return this.invalidRules.length > 1 + ? this.$options.i18n.invalidRulesPlural + : this.$options.i18n.invalidRuleSingular; + }, }, created() { this.refreshApprovals() @@ -194,6 +211,16 @@ export default { }, }, FETCH_LOADING, + linkToInvalidRules: INVALID_RULES_DOCS_PATH, + i18n: { + invalidRuleSingular: s__( + 'mrWidget|Approval rule %{rules} is invalid. GitLab has approved this rule automatically to unblock the merge request. %{link}', + ), + invalidRulesPlural: s__( + 'mrWidget|Approval rules %{rules} are invalid. GitLab has approved these rules automatically to unblock the merge request. %{link}', + ), + learnMore: __('Learn more.'), + }, }; </script> <template> @@ -202,29 +229,45 @@ export default { <mr-widget-icon name="approval" /> <div v-if="fetchingApprovals">{{ $options.FETCH_LOADING }}</div> <template v-else> - <gl-button - v-if="action" - :variant="action.variant" - :category="action.category" - :loading="isApproving" - class="mr-3" - data-qa-selector="approve_button" - @click="action.action" - > - {{ action.text }} - </gl-button> - <approvals-summary-optional - v-if="isOptional" - :can-approve="hasAction" - :help-path="mr.approvalsHelpPath" - /> - <approvals-summary - v-else - :approved="isApproved" - :approvals-left="approvals.approvals_left || 0" - :rules-left="approvals.approvalRuleNamesLeft" - :approvers="approvedBy" - /> + <div class="gl-display-flex gl-flex-direction-column"> + <div class="gl-display-flex gl-flex-direction-row gl-align-items-center"> + <gl-button + v-if="action" + :variant="action.variant" + :category="action.category" + :loading="isApproving" + class="gl-mr-5" + data-qa-selector="approve_button" + @click="action.action" + > + {{ action.text }} + </gl-button> + <approvals-summary-optional + v-if="isOptional" + :can-approve="hasAction" + :help-path="mr.approvalsHelpPath" + /> + <approvals-summary + v-else + :approved="isApproved" + :approvals-left="approvals.approvals_left || 0" + :rules-left="approvals.approvalRuleNamesLeft" + :approvers="approvedBy" + /> + </div> + <div v-if="hasInvalidRules" class="gl-text-gray-400 gl-mt-2" data-testid="invalid-rules"> + <gl-sprintf :message="pluralizedRuleText"> + <template #rules> + {{ invalidRulesText }} + </template> + <template #link> + <gl-link :href="$options.linkToInvalidRules" target="_blank"> + {{ $options.i18n.learnMore }} + </gl-link> + </template> + </gl-sprintf> + </div> + </div> <slot :is-approving="isApproving" :approve-with-auth="approveWithAuth" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary.vue b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary.vue index 0e31f97b9db..b1c4f7c5a7c 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary.vue @@ -98,10 +98,10 @@ export default { <template> <div data-qa-selector="approvals_summary_content"> - <strong>{{ approvalLeftMessage }}</strong> + <span class="gl-font-weight-bold">{{ approvalLeftMessage }}</span> <template v-if="hasApprovers"> <span v-if="approvalLeftMessage">{{ message }}</span> - <strong v-else>{{ message }}</strong> + <span v-else class="gl-font-weight-bold">{{ message }}</span> <user-avatar-list class="gl-display-inline-block gl-vertical-align-middle" :img-size="24" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/approvals/humanized_text.js b/app/assets/javascripts/vue_merge_request_widget/components/approvals/humanized_text.js new file mode 100644 index 00000000000..6689d070053 --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/approvals/humanized_text.js @@ -0,0 +1,23 @@ +import { __ } from '~/locale'; + +const humanizeRules = (invalidRules) => { + if (invalidRules.length > 1) { + return invalidRules.reduce((rules, { name }, index) => { + if (index === invalidRules.length - 1) { + return `${rules}${__(' and ')}"${name}"`; + } + return rules ? `${rules}, "${name}"` : `"${name}"`; + }, ''); + } + return `"${invalidRules[0].name}"`; +}; + +export const humanizeInvalidApproversRules = (invalidRules) => { + const ruleCount = invalidRules.length; + + if (!ruleCount) { + return ''; + } + + return humanizeRules(invalidRules); +}; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue index d878a1fa2e0..655ceb5f700 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue @@ -26,6 +26,7 @@ export default { }, methods: { onClickAction(action) { + this.$emit('clickedAction', action); if (action.onClick) { action.onClick(); } diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue index 0bc17de638b..4ba620da00a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue @@ -6,16 +6,16 @@ import { GlTooltipDirective, GlIntersectionObserver, } from '@gitlab/ui'; -import { once } from 'lodash'; import * as Sentry from '@sentry/browser'; import { DynamicScroller, DynamicScrollerItem } from 'vendor/vue-virtual-scroller'; -import api from '~/api'; import { sprintf, s__, __ } from '~/locale'; import Poll from '~/lib/utils/poll'; +import { normalizeHeaders } from '~/lib/utils/common_utils'; import { EXTENSION_ICON_CLASS, EXTENSION_ICONS } from '../../constants'; import StatusIcon from './status_icon.vue'; import Actions from './actions.vue'; import ChildContent from './child_content.vue'; +import { createTelemetryHub } from './telemetry'; import { generateText } from './utils'; export const LOADING_STATES = { @@ -26,6 +26,7 @@ export const LOADING_STATES = { }; export default { + telemetry: true, components: { GlButton, GlLoadingIcon, @@ -49,6 +50,7 @@ export default { showFade: false, modalData: undefined, modalName: undefined, + telemetry: null, }; }, computed: { @@ -131,50 +133,85 @@ export default { } }, }, + created() { + if (this.$options.telemetry) { + this.telemetry = createTelemetryHub(this.$options.name); + } + }, mounted() { this.loadCollapsedData(); + + this.telemetry?.viewed(); }, methods: { - triggerRedisTracking: once(function triggerRedisTracking() { - if (this.$options.expandEvent) { - api.trackRedisHllUserEvent(this.$options.expandEvent); - } - }), toggleCollapsed(e) { if (this.isCollapsible && !e?.target?.closest('.btn:not(.btn-icon),a')) { - this.isCollapsed = !this.isCollapsed; + if (this.isCollapsed) { + this.telemetry?.expanded({ type: this.statusIconName }); + } - this.triggerRedisTracking(); + this.isCollapsed = !this.isCollapsed; } }, + initExtensionMultiPolling() { + const allData = []; + const requests = this.fetchMultiData(); + + requests.forEach((request) => { + const poll = new Poll({ + resource: { + fetchData: () => request(this), + }, + method: 'fetchData', + successCallback: (response) => { + this.headerCheck(response, (data) => allData.push(data)); + + if (allData.length === requests.length) { + this.setCollapsedData(allData); + } + }, + errorCallback: (e) => { + this.setCollapsedError(e); + }, + }); + + poll.makeRequest(); + }); + }, initExtensionPolling() { const poll = new Poll({ resource: { - fetchData: () => this.fetchCollapsedData(this.$props), + fetchData: () => this.fetchCollapsedData(this), }, method: 'fetchData', - successCallback: ({ data }) => { - if (Object.keys(data).length > 0) { - poll.stop(); - this.setCollapsedData(data); - } + successCallback: (response) => { + this.headerCheck(response, (data) => this.setCollapsedData(data)); }, errorCallback: (e) => { - poll.stop(); - this.setCollapsedError(e); }, }); poll.makeRequest(); }, + headerCheck(response, callback) { + const headers = normalizeHeaders(response.headers); + + if (!headers['POLL-INTERVAL']) { + callback(response.data); + } + }, loadCollapsedData() { this.loadingState = LOADING_STATES.collapsedLoading; if (this.$options.enablePolling) { - this.initExtensionPolling(); + if (this.fetchMultiData) { + this.initExtensionMultiPolling(); + } else { + this.initExtensionPolling(); + } } else { - this.fetchCollapsedData(this.$props) + this.fetchCollapsedData(this) .then((data) => { this.setCollapsedData(data); }) @@ -197,7 +234,7 @@ export default { this.loadingState = LOADING_STATES.expandedLoading; - this.fetchFullData(this.$props) + this.fetchFullData(this) .then((data) => { this.loadingState = null; this.fullData = data.map((x, i) => ({ id: i, ...x })); @@ -231,6 +268,11 @@ export default { this.toggleCollapsed(e); } }, + onClickedAction(action) { + if (action.fullReport) { + this.telemetry?.fullReportClicked(); + } + }, generateText, }, EXTENSION_ICON_CLASS, @@ -268,6 +310,7 @@ export default { <actions :widget="$options.label || $options.name" :tertiary-buttons="tertiaryActionsButtons" + @clickedAction="onClickedAction" /> <div v-if="isCollapsible" @@ -324,6 +367,7 @@ export default { :widget-label="widgetLabel" :modal-id="modalId" :level="2" + @clickedAction="onClickedAction" /> </gl-intersection-observer> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue index 0ca4c92a5ae..38f83a61b30 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue @@ -39,6 +39,9 @@ export default { isArray(arr) { return Array.isArray(arr); }, + onClickedAction(action) { + this.$emit('clickedAction', action); + }, generateText, }, }; @@ -63,14 +66,14 @@ export default { <div class="gl-w-full"> <div class="gl-display-flex gl-flex-nowrap"> <div class="gl-flex-wrap gl-display-flex gl-w-full"> - <div class="gl-mr-4 gl-display-flex gl-align-items-center"> + <div class="gl-display-flex gl-align-items-center"> <p v-safe-html="generateText(data.text)" class="gl-m-0"></p> </div> - <div v-if="data.link"> + <div v-if="data.link" class="gl-pr-2"> <gl-link :href="data.link.href">{{ data.link.text }}</gl-link> </div> - <div v-if="data.modal"> - <gl-link v-gl-modal="modalId" @click="data.modal.onClick"> + <div v-if="data.modal" class="gl-pr-2"> + <gl-link v-gl-modal="modalId" data-testid="modal-link" @click="data.modal.onClick"> {{ data.modal.text }} </gl-link> </div> @@ -81,7 +84,12 @@ export default { {{ data.badge.text }} </gl-badge> </div> - <actions :widget="widgetLabel" :tertiary-buttons="data.actions" class="gl-ml-auto" /> + <actions + :widget="widgetLabel" + :tertiary-buttons="data.actions" + class="gl-ml-auto gl-pl-3" + @clickedAction="onClickedAction" + /> </div> <p v-if="data.subtext" @@ -101,6 +109,7 @@ export default { :modal-id="modalId" :level="3" data-testid="child-content" + @clickedAction="onClickedAction" /> </li> </ul> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/container.js b/app/assets/javascripts/vue_merge_request_widget/components/extensions/container.js index b9dfd3bd41e..a58d524b9ed 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/container.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/container.js @@ -14,7 +14,7 @@ export default { if (extensions.length === 0) return null; return h( - 'div', + 'section', { attrs: { role: 'region', @@ -34,13 +34,7 @@ export default { { ...extension }, { props: { - ...extension.props.reduce( - (acc, key) => ({ - ...acc, - [key]: this.mr[key], - }), - {}, - ), + mr: this.mr, }, }, ), diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js b/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js index 65273678fb9..f4fcf4c9571 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js @@ -10,12 +10,27 @@ export const registerExtension = (extension) => { registeredExtensions.extensions.push({ extends: ExtensionBase, name: extension.name, - props: extension.props, + props: { + mr: { + type: Object, + required: true, + }, + }, + telemetry: extension.telemetry, i18n: extension.i18n, expandEvent: extension.expandEvent, enablePolling: extension.enablePolling, modalComponent: extension.modalComponent, computed: { + ...extension.props.reduce( + (acc, propKey) => ({ + ...acc, + [propKey]() { + return this.mr[propKey]; + }, + }), + {}, + ), ...Object.keys(extension.computed).reduce( (acc, computedKey) => ({ ...acc, diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue index 456a1f17aae..bb626c9adba 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue @@ -49,7 +49,7 @@ export default { ]" class="gl-rounded-full gl-mr-3 gl-relative gl-p-2" > - <gl-loading-icon v-if="isLoading" size="lg" inline class="gl-display-block" /> + <gl-loading-icon v-if="isLoading" size="sm" inline class="gl-display-block" /> <gl-icon v-else :name="$options.EXTENSION_ICON_NAMES[iconName]" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/telemetry.js b/app/assets/javascripts/vue_merge_request_widget/components/extensions/telemetry.js new file mode 100644 index 00000000000..aec3a35f37c --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/telemetry.js @@ -0,0 +1,207 @@ +import api from '~/api'; +import createEventHub from '~/helpers/event_hub_factory'; +import { + TELEMETRY_WIDGET_VIEWED, + TELEMETRY_WIDGET_EXPANDED, + TELEMETRY_WIDGET_FULL_REPORT_CLICKED, +} from '../../constants'; + +/* + * Additional events to send beyond the defaults for certain widget extensions + */ +const nonStandardEvents = { + codeQuality: { + uniqueUser: { + expand: ['i_testing_code_quality_widget_total'], + }, + counter: {}, + }, + terraform: { + uniqueUser: { + expand: ['i_testing_terraform_widget_total'], + }, + counter: {}, + }, + issues: { + uniqueUser: { + expand: ['i_testing_load_performance_widget_total'], + }, + counter: {}, + }, + testReport: { + uniqueUser: { + expand: ['i_testing_summary_widget_total'], + }, + counter: {}, + }, +}; + +function combineDeepArray(path, ...objects) { + const parts = path.split('.'); + const allEntries = objects.reduce((entries, currentObject) => { + let expandedEntries = entries; + let traversed = currentObject; + + parts.forEach((part) => { + traversed = traversed?.[part]; + }); + + if (traversed) { + expandedEntries = [...entries, ...traversed]; + } + + return expandedEntries; + }, []); + + return Array.from(new Set(allEntries)); +} + +function simplifyWidgetName(componentName) { + const noWidget = componentName.replace(/^Widget/, ''); + + return noWidget.charAt(0).toLowerCase() + noWidget.slice(1); +} + +function baseRedisEventName(extensionName) { + const redisEventName = extensionName.replace(/([A-Z])/g, '_$1').toLowerCase(); + + return `i_merge_request_widget_${redisEventName}`; +} + +function whenable(bus) { + return function when(event) { + return ({ execute, track, special }) => { + bus.$on(event, (busEvent) => { + track.forEach((redisEvent) => { + execute(redisEvent); + }); + + special?.({ event, execute, track, bus, busEvent }); + }); + }; + }; +} + +function defaultBehaviorEvents({ bus, config }) { + const when = whenable(bus); + const isViewed = when(TELEMETRY_WIDGET_VIEWED); + const isExpanded = when(TELEMETRY_WIDGET_EXPANDED); + const fullReportIsClicked = when(TELEMETRY_WIDGET_FULL_REPORT_CLICKED); + const toHll = config?.uniqueUser || {}; + const toCounts = config?.counter || {}; + const user = api.trackRedisHllUserEvent.bind(api); + const count = api.trackRedisCounterEvent.bind(api); + + if (toHll.view) { + isViewed({ execute: user, track: toHll.view }); + } + if (toCounts.view) { + isViewed({ execute: count, track: toCounts.view }); + } + + if (toHll.expand) { + isExpanded({ + execute: user, + track: toHll.expand, + special: ({ execute, track, busEvent }) => { + if (busEvent.type) { + track.forEach((event) => { + execute(`${event}_${busEvent.type}`); + }); + } + }, + }); + } + if (toCounts.expand) { + isExpanded({ + execute: count, + track: toCounts.expand, + special: ({ execute, track, busEvent }) => { + if (busEvent.type) { + track.forEach((event) => { + execute(`${event}_${busEvent.type}`); + }); + } + }, + }); + } + + if (toHll.clickFullReport) { + fullReportIsClicked({ execute: user, track: toHll.clickFullReport }); + } + if (toCounts.clickFullReport) { + fullReportIsClicked({ execute: count, track: toCounts.clickFullReport }); + } +} + +function baseTelemetry(componentName) { + const simpleExtensionName = simplifyWidgetName(componentName); + const additionalNonStandard = nonStandardEvents[simpleExtensionName] || {}; + /* + * Telemetry config format is: + * { + * TELEMETRY_TYPE: { + * BEHAVIOR: [ EVENT_NAME, ... ] + * } + * } + * + * Right now, there are currently configurations for these telemetry types: + * - uniqueUser is sent to RedisHLL + * - counter is sent to a regular Redis counter + */ + const defaultTelemetry = { + uniqueUser: { + view: [`${baseRedisEventName(simpleExtensionName)}_view`], + expand: [`${baseRedisEventName(simpleExtensionName)}_expand`], + clickFullReport: [`${baseRedisEventName(simpleExtensionName)}_click_full_report`], + }, + counter: { + view: [`${baseRedisEventName(simpleExtensionName)}_count_view`], + expand: [`${baseRedisEventName(simpleExtensionName)}_count_expand`], + clickFullReport: [`${baseRedisEventName(simpleExtensionName)}_count_click_full_report`], + }, + }; + + return { + uniqueUser: { + view: combineDeepArray('uniqueUser.view', defaultTelemetry, additionalNonStandard), + expand: combineDeepArray('uniqueUser.expand', defaultTelemetry, additionalNonStandard), + clickFullReport: combineDeepArray( + 'uniqueUser.clickFullReport', + defaultTelemetry, + additionalNonStandard, + ), + }, + counter: { + view: combineDeepArray('counter.view', defaultTelemetry, additionalNonStandard), + expand: combineDeepArray('counter.expand', defaultTelemetry, additionalNonStandard), + clickFullReport: combineDeepArray( + 'counter.clickFullReport', + defaultTelemetry, + additionalNonStandard, + ), + }, + }; +} + +export function createTelemetryHub(componentName) { + const bus = createEventHub(); + const config = baseTelemetry(componentName); + + defaultBehaviorEvents({ bus, config }); + + return { + viewed() { + bus.$emit(TELEMETRY_WIDGET_VIEWED); + }, + expanded({ type }) { + bus.$emit(TELEMETRY_WIDGET_EXPANDED, { type }); + }, + fullReportClicked() { + bus.$emit(TELEMETRY_WIDGET_FULL_REPORT_CLICKED); + }, + /* I want a Record here: #{ ...config } // and then the comment would be: This is for debugging only, changing your reference to it does nothing. 😘 */ + config: Object.freeze({ ...config }), // This is *intended* to be for debugging only, but it's pretty mutable, and it has references to live data in child props + bus, + }; +} diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue index f5667aee15b..f8d2732b385 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue @@ -32,7 +32,7 @@ export default { computed: { arrowIconName() { - return this.isCollapsed ? 'angle-right' : 'angle-down'; + return this.isCollapsed ? 'chevron-lg-right' : 'chevron-lg-down'; }, ariaLabel() { return this.isCollapsed ? __('Expand') : __('Collapse'); diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue deleted file mode 100644 index e1d88099580..00000000000 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue +++ /dev/null @@ -1,100 +0,0 @@ -<script> -import { - GlLink, - GlTooltipDirective, - GlModalDirective, - GlSafeHtmlDirective as SafeHtml, - GlSprintf, -} from '@gitlab/ui'; -import { constructWebIDEPath } from '~/lib/utils/url_utility'; -import { s__ } from '~/locale'; -import clipboardButton from '~/vue_shared/components/clipboard_button.vue'; -import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; -import MrWidgetIcon from './mr_widget_icon.vue'; - -export default { - name: 'MRWidgetHeader', - components: { - clipboardButton, - TooltipOnTruncate, - MrWidgetIcon, - GlLink, - GlSprintf, - }, - directives: { - GlTooltip: GlTooltipDirective, - GlModalDirective, - SafeHtml, - }, - props: { - mr: { - type: Object, - required: true, - }, - }, - computed: { - shouldShowCommitsBehindText() { - return this.mr.divergedCommitsCount > 0; - }, - branchNameClipboardData() { - // This supports code in app/assets/javascripts/copy_to_clipboard.js that - // works around ClipboardJS limitations to allow the context-specific - // copy/pasting of plain text or GFM. - return JSON.stringify({ - text: this.mr.sourceBranch, - gfm: `\`${this.mr.sourceBranch}\``, - }); - }, - webIdePath() { - return constructWebIDEPath(this.mr); - }, - isFork() { - return this.mr.sourceProjectFullPath !== this.mr.targetProjectFullPath; - }, - }, - i18n: { - webIdeText: s__('mrWidget|Open in Web IDE'), - gitpodText: s__('mrWidget|Open in Gitpod'), - }, -}; -</script> -<template> - <div class="gl-display-flex mr-source-target"> - <mr-widget-icon name="git-merge" /> - <div class="git-merge-container d-flex"> - <div class="normal"> - <strong> - {{ s__('mrWidget|Request to merge') }} - <tooltip-on-truncate - v-safe-html="mr.sourceBranchLink" - :title="mr.sourceBranch" - truncate-target="child" - class="label-branch label-truncate js-source-branch" - /><clipboard-button - data-testid="mr-widget-copy-clipboard" - :text="branchNameClipboardData" - :title="__('Copy branch name')" - category="tertiary" - /> - {{ s__('mrWidget|into') }} - <tooltip-on-truncate - :title="mr.targetBranch" - truncate-target="child" - class="label-branch label-truncate" - > - <a :href="mr.targetBranchTreePath" class="js-target-branch"> {{ mr.targetBranch }} </a> - </tooltip-on-truncate> - </strong> - <div v-if="shouldShowCommitsBehindText" class="diverged-commits-count"> - <gl-sprintf :message="s__('mrWidget|The source branch is %{link} the target branch')"> - <template #link> - <gl-link :href="mr.targetBranchPath">{{ - n__('%d commit behind', '%d commits behind', mr.divergedCommitsCount) - }}</gl-link> - </template> - </gl-sprintf> - </div> - </div> - </div> - </div> -</template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue index 472df8e3110..437342bf438 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue @@ -13,7 +13,7 @@ export default { </script> <template> - <div class="circle-icon-container gl-mr-3 align-self-start align-self-lg-center"> + <div class="circle-icon-container gl-mr-3 align-self-start"> <gl-icon :name="name" :size="24" /> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue index 3b3b46e9772..1e1a2049414 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue @@ -172,7 +172,7 @@ export default { </p> </template> <template v-else-if="!hasPipeline"> - <gl-loading-icon size="md" /> + <gl-loading-icon size="lg" /> <p class="gl-flex-grow-1 gl-display-flex gl-ml-3 gl-mb-0" data-testid="monitoring-pipeline-message" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue index b8a1f89d232..913aa0e1e34 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue @@ -93,9 +93,7 @@ export default { </span> </p> <div - v-if=" - divergedCommitsCount > 0 && glFeatures.updatedMrHeader && !glFeatures.restructuredMrWidget - " + v-if="divergedCommitsCount > 0 && !glFeatures.restructuredMrWidget" class="diverged-commits-count" > <gl-sprintf :message="s__('mrWidget|The source branch is %{link} the target branch')"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue index 8b410926c46..45958d7fb8d 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue @@ -113,7 +113,7 @@ export default { data-testid="ok" category="primary" class="gl-mt-2" - variant="info" + variant="confirm" :href="pipelinePath" :data-track-property="humanAccess" :data-track-value="$options.SP_SHOW_TRACK_VALUE" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue index 4fb95fe635c..cf482410bef 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue @@ -417,6 +417,7 @@ export default { } this.isMakingRequest = true; + this.editCommitMessage = false; if (!useAutoMerge) { this.mr.transitionStateMachine({ transition: MERGE }); @@ -663,7 +664,11 @@ export default { <gl-sprintf v-else :message="mergeDisabledText" /> </div> <template v-if="glFeatures.restructuredMrWidget"> - <div v-show="editCommitMessage" class="gl-w-full gl-order-n1"> + <div + v-if="editCommitMessage" + class="gl-w-full gl-order-n1" + data-testid="edit_commit_message" + > <ul :class="{ 'content-list': !glFeatures.restructuredMrWidget, @@ -711,15 +716,13 @@ export default { <div v-if="!restructuredWidgetShowMergeButtons" class="gl-w-full gl-order-n1 gl-text-gray-500" + data-qa-selector="merged_status_content" > <strong v-if="mr.state !== 'closed'"> {{ __('Merge details') }} </strong> <ul class="gl-pl-4 gl-m-0"> - <li - v-if="mr.divergedCommitsCount > 0 && glFeatures.updatedMrHeader" - class="gl-line-height-normal" - > + <li v-if="mr.divergedCommitsCount > 0" class="gl-line-height-normal"> <gl-sprintf :message="s__('mrWidget|The source branch is %{link} the target branch')" > @@ -788,11 +791,7 @@ export default { </div> </div> <template v-if="shouldShowMergeControls && !glFeatures.restructuredMrWidget"> - <div - v-if="!shouldShowMergeEdit" - class="mr-fast-forward-message" - data-qa-selector="fast_forward_message_content" - > + <div v-if="!shouldShowMergeEdit" class="mr-fast-forward-message"> {{ __('Fast-forward merge without a merge commit') }} </div> <commits-header diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue index e0e19094c40..5bd7745d704 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue @@ -126,6 +126,7 @@ export default { }) => { toast(__('Marked as ready. Merging is now allowed.')); $('.merge-request .detail-page-description .title').text(title); + eventHub.$emit('MRWidgetUpdateRequested'); }, ) .catch(() => diff --git a/app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue index 2ba945a3ecf..18fdb29ba54 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue @@ -1,5 +1,5 @@ <script> -import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlSprintf } from '@gitlab/ui'; +import { GlSkeletonLoader, GlSprintf } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; import Poll from '~/lib/utils/poll'; import { n__ } from '~/locale'; @@ -9,7 +9,7 @@ import TerraformPlan from './terraform_plan.vue'; export default { name: 'MRWidgetTerraformContainer', components: { - GlSkeletonLoading, + GlSkeletonLoader, GlSprintf, MrWidgetExpanableSection, TerraformPlan, @@ -100,7 +100,7 @@ export default { <template> <section class="mr-widget-section"> <div v-if="loading" class="mr-widget-body"> - <gl-skeleton-loading /> + <gl-skeleton-loader /> </div> <mr-widget-expanable-section v-else> diff --git a/app/assets/javascripts/vue_merge_request_widget/constants.js b/app/assets/javascripts/vue_merge_request_widget/constants.js index 533bb38a88c..c148a35209f 100644 --- a/app/assets/javascripts/vue_merge_request_widget/constants.js +++ b/app/assets/javascripts/vue_merge_request_widget/constants.js @@ -1,4 +1,5 @@ import { s__ } from '~/locale'; +import { helpPagePath } from '~/helpers/help_page_helper'; import { stateToComponentMap as classStateMap, stateKey } from './stores/state_maps'; export const SUCCESS = 'success'; @@ -165,4 +166,15 @@ export const EXTENSION_ICON_CLASS = { export const EXTENSION_SUMMARY_FAILED_CLASS = 'gl-text-red-500'; export const EXTENSION_SUMMARY_NEUTRAL_CLASS = 'gl-text-gray-700'; +export const TELEMETRY_WIDGET_VIEWED = 'WIDGET_VIEWED'; +export const TELEMETRY_WIDGET_EXPANDED = 'WIDGET_EXPANDED'; +export const TELEMETRY_WIDGET_FULL_REPORT_CLICKED = 'WIDGET_FULL_REPORT_CLICKED'; + export { STATE_MACHINE }; + +export const INVALID_RULES_DOCS_PATH = helpPagePath( + 'user/project/merge_requests/approvals/index.md', + { + anchor: 'invalid-rules', + }, +); diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/accessibility/index.js b/app/assets/javascripts/vue_merge_request_widget/extensions/accessibility/index.js index 168f10bd148..f14e80d0be6 100644 --- a/app/assets/javascripts/vue_merge_request_widget/extensions/accessibility/index.js +++ b/app/assets/javascripts/vue_merge_request_widget/extensions/accessibility/index.js @@ -6,6 +6,7 @@ import { EXTENSION_ICONS } from '../../constants'; export default { name: 'WidgetAccessibility', enablePolling: true, + telemetry: false, i18n: { loading: s__('Reports|Accessibility scanning results are being parsed'), error: s__('Reports|Accessibility scanning failed loading results'), diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/code_quality/index.js b/app/assets/javascripts/vue_merge_request_widget/extensions/code_quality/index.js index cea8df2484b..2477429af5b 100644 --- a/app/assets/javascripts/vue_merge_request_widget/extensions/code_quality/index.js +++ b/app/assets/javascripts/vue_merge_request_widget/extensions/code_quality/index.js @@ -13,7 +13,6 @@ export default { loading: s__('ciReport|Code Quality test metrics results are being parsed'), error: s__('ciReport|Code Quality failed loading results'), }, - expandEvent: 'i_testing_code_quality_widget_total', computed: { summary() { const { newErrors, resolvedErrors, errorSummary } = this.collapsedData; diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js b/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js index 6ca0ea9c4e7..a7aaa2f4476 100644 --- a/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js +++ b/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js @@ -12,7 +12,6 @@ export default { label: 'Issues', loading: 'Loading issues...', }, - expandEvent: 'i_testing_load_performance_widget_total', // Add an array of props // These then get mapped to values stored in the MR Widget store props: ['targetProjectFullPath', 'conflictsDocsPath'], @@ -45,7 +44,7 @@ export default { console.log('Hello world'); }, }, - { text: 'Full report', href: this.conflictsDocsPath, target: '_blank' }, + { text: 'Full report', href: this.conflictsDocsPath, target: '_blank', fullReport: true }, ]; }, shouldCollapse() { diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/security_reports/index.js b/app/assets/javascripts/vue_merge_request_widget/extensions/security_reports/index.js new file mode 100644 index 00000000000..ce35ae033de --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/extensions/security_reports/index.js @@ -0,0 +1,10 @@ +// This is here because ee_else_ce requires both ce and ee versions of the +// file to be present. +// TODO: implement me +export default { + name: 'WidgetSecurityReportsCE', + data() { + return {}; + }, + props: ['securityReportPaths'], +}; diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/terraform/index.js b/app/assets/javascripts/vue_merge_request_widget/extensions/terraform/index.js index 8fcc4f818ec..6611aedcb07 100644 --- a/app/assets/javascripts/vue_merge_request_widget/extensions/terraform/index.js +++ b/app/assets/javascripts/vue_merge_request_widget/extensions/terraform/index.js @@ -23,7 +23,6 @@ export default { reportErrored: s__('Terraform|Generating the report caused an error.'), fullLog: __('Full log'), }, - expandEvent: 'i_testing_terraform_widget_total', props: ['terraformReportsPath'], computed: { // Extension computed props @@ -113,6 +112,7 @@ export default { href: report.job_path, text: this.$options.i18n.fullLog, target: '_blank', + fullReport: true, }; actions.push(action); } diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/test_report/index.js b/app/assets/javascripts/vue_merge_request_widget/extensions/test_report/index.js index 577b2cbfc5c..164bda33b95 100644 --- a/app/assets/javascripts/vue_merge_request_widget/extensions/test_report/index.js +++ b/app/assets/javascripts/vue_merge_request_widget/extensions/test_report/index.js @@ -1,5 +1,6 @@ import { uniqueId } from 'lodash'; import axios from '~/lib/utils/axios_utils'; +import TestCaseDetails from '~/pipelines/components/test_reports/test_case_details.vue'; import { EXTENSION_ICONS } from '../../constants'; import { summaryTextBuilder, @@ -7,6 +8,7 @@ import { reportSubTextBuilder, countRecentlyFailedTests, recentFailuresTextBuilder, + formatFilePath, } from './utils'; import { i18n, TESTS_FAILED_STATUS, ERROR_STATUS } from './constants'; @@ -14,8 +16,8 @@ export default { name: 'WidgetTestSummary', enablePolling: true, i18n, - expandEvent: 'i_testing_summary_widget_total', props: ['testResultsPath', 'headBlobPath', 'pipeline'], + modalComponent: TestCaseDetails, computed: { summary(data) { if (data.parsingInProgress) { @@ -47,14 +49,18 @@ export default { text: this.$options.i18n.fullReport, href: `${this.pipeline.path}/test_report`, target: '_blank', + fullReport: true, }, ]; }, }, methods: { fetchCollapsedData() { - return axios.get(this.testResultsPath).then(({ data = {}, status }) => { + return axios.get(this.testResultsPath).then((res) => { + const { data = {}, status } = res; + return { + ...res, data: { hasSuiteError: data.suites?.some((suite) => suite.status === ERROR_STATUS), parsingInProgress: status === 204, @@ -94,8 +100,18 @@ export default { return { id: uniqueId('test-'), header: this.testHeader(test, sectionHeader, index), + modal: { + text: test.name, + onClick: () => { + this.modalData = { + testCase: { + filePath: test.file && `${this.headBlobPath}/${formatFilePath(test.file)}`, + ...test, + }, + }; + }, + }, icon: { name: iconName }, - text: test.name, }; }; }, diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/test_report/utils.js b/app/assets/javascripts/vue_merge_request_widget/extensions/test_report/utils.js index 9e4b0ac581c..7bbcb0cd04a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/extensions/test_report/utils.js +++ b/app/assets/javascripts/vue_merge_request_widget/extensions/test_report/utils.js @@ -82,3 +82,12 @@ export const countRecentlyFailedTests = (subject) => { }) .reduce((total, count) => total + count, 0); }; + +/** + * Removes `./` from the beginning of a file path so it can be appended onto a blob path + * @param {String} file + * @returns {String} - formatted value + */ +export const formatFilePath = (file) => { + return file.replace(/^\.?\/*/, ''); +}; diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue index 8ebb7f6f159..c68437b9879 100644 --- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue +++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue @@ -1,6 +1,7 @@ <script> import { GlSafeHtmlDirective } from '@gitlab/ui'; import { isEmpty } from 'lodash'; +import securityReportExtension from 'ee_else_ce/vue_merge_request_widget/extensions/security_reports'; import { registerExtension } from '~/vue_merge_request_widget/components/extensions'; import MrWidgetApprovals from 'ee_else_ce/vue_merge_request_widget/components/approvals/approvals.vue'; import MRWidgetService from 'ee_else_ce/vue_merge_request_widget/services/mr_widget_service'; @@ -15,7 +16,6 @@ import SmartInterval from '~/smart_interval'; import { setFaviconOverlay } from '../lib/utils/favicon'; import Loading from './components/loading.vue'; import MrWidgetAlertMessage from './components/mr_widget_alert_message.vue'; -import WidgetHeader from './components/mr_widget_header.vue'; import MrWidgetPipelineContainer from './components/mr_widget_pipeline_container.vue'; import WidgetRelatedLinks from './components/mr_widget_related_links.vue'; import WidgetSuggestPipeline from './components/mr_widget_suggest_pipeline.vue'; @@ -59,7 +59,6 @@ export default { components: { Loading, ExtensionsContainer, - 'mr-widget-header': WidgetHeader, 'mr-widget-suggest-pipeline': WidgetSuggestPipeline, MrWidgetPipelineContainer, 'mr-widget-related-links': WidgetRelatedLinks, @@ -190,7 +189,7 @@ export default { ); }, shouldRenderSecurityReport() { - return Boolean(this.mr.pipeline.id); + return Boolean(this.mr?.pipeline?.id); }, shouldRenderTerraformPlans() { return Boolean(this.mr?.terraformReportsPath); @@ -231,12 +230,15 @@ export default { window.gon?.features?.refactorMrWidgetsExtensionsUser ); }, + shouldShowSecurityExtension() { + return window.gon?.features?.refactorSecurityExtension; + }, + shouldShowCodeQualityExtension() { + return window.gon?.features?.refactorCodeQualityExtension; + }, isRestructuredMrWidgetEnabled() { return window.gon?.features?.restructuredMrWidget; }, - isUpdatedHeaderEnabled() { - return window.gon?.features?.updatedMrHeader; - }, }, watch: { 'mr.machineValue': { @@ -270,6 +272,11 @@ export default { this.registerTestReportExtension(); } }, + shouldRenderSecurityReport(newVal) { + if (newVal) { + this.registerSecurityReportExtension(); + } + }, }, mounted() { MRWidgetService.fetchInitialData() @@ -516,7 +523,7 @@ export default { } }, registerCodeQualityExtension() { - if (this.shouldRenderCodeQuality && this.shouldShowExtension) { + if (this.shouldRenderCodeQuality && this.shouldShowCodeQualityExtension) { registerExtension(codeQualityExtension); } }, @@ -525,20 +532,23 @@ export default { registerExtension(testReportExtension); } }, + registerSecurityReportExtension() { + if (this.shouldRenderSecurityReport && this.shouldShowSecurityExtension) { + registerExtension(securityReportExtension); + } + }, }, }; </script> <template> <div v-if="isLoaded" class="mr-state-widget gl-mt-3"> <header - v-if="shouldRenderCollaborationStatus || !isUpdatedHeaderEnabled" - :class="{ 'mr-widget-workflow gl-mt-0!': isUpdatedHeaderEnabled }" - class="gl-rounded-base gl-border-solid gl-border-1 gl-border-gray-100 gl-overflow-hidden" + v-if="shouldRenderCollaborationStatus" + class="gl-rounded-base gl-border-solid gl-border-1 gl-border-gray-100 gl-overflow-hidden mr-widget-workflow gl-mt-0!" > <mr-widget-alert-message v-if="shouldRenderCollaborationStatus" type="info"> {{ s__('mrWidget|Members who can merge are allowed to add commits.') }} </mr-widget-alert-message> - <mr-widget-header v-if="!isUpdatedHeaderEnabled" :mr="mr" /> </header> <mr-widget-suggest-pipeline v-if="shouldSuggestPipelines" @@ -584,7 +594,7 @@ export default { </div> <extensions-container :mr="mr" /> <grouped-codequality-reports-app - v-if="shouldRenderCodeQuality && !shouldShowExtension" + v-if="shouldRenderCodeQuality && !shouldShowCodeQualityExtension" :head-blob-path="mr.headBlobPath" :base-blob-path="mr.baseBlobPath" :codequality-reports-path="mr.codequalityReportsPath" @@ -592,7 +602,7 @@ export default { /> <security-reports-app - v-if="shouldRenderSecurityReport" + v-if="shouldRenderSecurityReport && !shouldShowSecurityExtension" :pipeline-id="mr.pipeline.id" :project-id="mr.sourceProjectId" :security-reports-docs-path="mr.securityReportsDocsPath" diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js b/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js index 2ae4f4da2f3..18d955652ba 100644 --- a/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js +++ b/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js @@ -3,8 +3,6 @@ import { stateKey } from './state_maps'; export default function deviseState() { if (!this.commitsCount) { return stateKey.nothingToMerge; - } else if (this.hasMergeChecksFailed && !this.autoMergeEnabled) { - return stateKey.mergeChecksFailed; } else if (this.projectArchived) { return stateKey.archived; } else if (this.branchMissing) { @@ -15,6 +13,8 @@ export default function deviseState() { return stateKey.conflicts; } else if (this.shouldBeRebased) { return stateKey.rebase; + } else if (this.hasMergeChecksFailed && !this.autoMergeEnabled) { + return stateKey.mergeChecksFailed; } else if (this.onlyAllowMergeIfPipelineSucceeds && this.isPipelineFailed) { return stateKey.pipelineFailed; } else if (this.draft) { diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js index 146cf7e11a7..03c9a01cc7a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js +++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js @@ -33,6 +33,7 @@ export default class MergeRequestStore { this.setData(data); this.initCodeQualityReport(data); + this.initSecurityReport(data); this.setGitpodData(data); } @@ -41,6 +42,19 @@ export default class MergeRequestStore { this.codeQuality = data.codequality_reports_path; } + initSecurityReport(data) { + // TODO: check if gl.mrWidgetData can be safely removed after we migrate to the + // widget extension. + this.securityReportPaths = { + apiFuzzingReportPath: data.api_fuzzing_comparison_path, + coverageFuzzingReportPath: data.coverage_fuzzing_comparison_path, + sastReportPath: data.sast_comparison_path, + dastReportPath: data.dast_comparison_path, + secretDetectionReportPath: data.secret_detection_comparison_path, + dependencyScanningReportPath: data.dependency_scanning_comparison_path, + }; + } + setData(data, isRebased) { this.initApprovals(); diff --git a/app/assets/javascripts/vue_shared/alert_details/components/alert_details.vue b/app/assets/javascripts/vue_shared/alert_details/components/alert_details.vue index c93f620995f..f2ea55df63d 100644 --- a/app/assets/javascripts/vue_shared/alert_details/components/alert_details.vue +++ b/app/assets/javascripts/vue_shared/alert_details/components/alert_details.vue @@ -18,7 +18,6 @@ import { toggleContainerClasses } from '~/lib/utils/dom_utils'; import { visitUrl, joinPaths } from '~/lib/utils/url_utility'; import { s__ } from '~/locale'; import Tracking from '~/tracking'; -import initUserPopovers from '~/user_popovers'; import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import MetricImagesTab from '~/vue_shared/components/metric_images/metric_images_tab.vue'; @@ -83,9 +82,6 @@ export default { alertId: { default: '', }, - isThreatMonitoringPage: { - default: false, - }, projectId: { default: '', }, @@ -175,7 +171,6 @@ export default { updated() { this.$nextTick(() => { highlightCurrentUser(this.$el.querySelectorAll('.gfm-project_member')); - initUserPopovers(this.$el.querySelectorAll('.js-user-link')); }); }, methods: { @@ -225,9 +220,7 @@ export default { }); }, incidentPath(issueId) { - return this.isThreatMonitoringPage - ? joinPaths(this.projectIssuesPath, issueId) - : joinPaths(this.projectIssuesPath, 'incident', issueId); + return joinPaths(this.projectIssuesPath, 'incident', issueId); }, trackPageViews() { const { category, action } = this.trackAlertsDetailsViewsOptions; @@ -374,7 +367,6 @@ export default { </gl-tab> <metric-images-tab - v-if="!isThreatMonitoringPage" :data-testid="$options.tabsConfig[1].id" :title="$options.tabsConfig[1].title" /> diff --git a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue index 489d4afa41f..72dcc16b57a 100644 --- a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue +++ b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue @@ -302,9 +302,11 @@ export default { <span v-else class="gl-display-flex gl-align-items-center gl-line-height-normal"> {{ __('None') }} - <gl-button - class="gl-ml-2" + class="gl-ml-2 gl-reset-color!" href="#" + category="tertiary" variant="link" + size="small" data-testid="unassigned-users" @click="updateAlertAssignees(currentUser)" > diff --git a/app/assets/javascripts/vue_shared/alert_details/constants.js b/app/assets/javascripts/vue_shared/alert_details/constants.js index 6cc70739eaa..d106f545c61 100644 --- a/app/assets/javascripts/vue_shared/alert_details/constants.js +++ b/app/assets/javascripts/vue_shared/alert_details/constants.js @@ -30,13 +30,4 @@ export const PAGE_CONFIG = { label: 'Status', }, }, - THREAT_MONITORING: { - TITLE: 'THREAT_MONITORING', - STATUSES: { - TRIGGERED: s__('ThreatMonitoring|Unreviewed'), - ACKNOWLEDGED: s__('ThreatMonitoring|In review'), - RESOLVED: s__('ThreatMonitoring|Resolved'), - IGNORED: s__('ThreatMonitoring|Dismissed'), - }, - }, }; diff --git a/app/assets/javascripts/vue_shared/alert_details/index.js b/app/assets/javascripts/vue_shared/alert_details/index.js index 614748fa80d..5793069440c 100644 --- a/app/assets/javascripts/vue_shared/alert_details/index.js +++ b/app/assets/javascripts/vue_shared/alert_details/index.js @@ -65,16 +65,12 @@ export default (selector) => { const opsProperties = {}; - if (page === PAGE_CONFIG.OPERATIONS.TITLE) { - const { TRACK_ALERTS_DETAILS_VIEWS_OPTIONS, TRACK_ALERT_STATUS_UPDATE_OPTIONS } = PAGE_CONFIG[ - page - ]; - provide.trackAlertsDetailsViewsOptions = TRACK_ALERTS_DETAILS_VIEWS_OPTIONS; - provide.trackAlertStatusUpdateOptions = TRACK_ALERT_STATUS_UPDATE_OPTIONS; - opsProperties.store = createStore({}, service); - } else if (page === PAGE_CONFIG.THREAT_MONITORING.TITLE) { - provide.isThreatMonitoringPage = true; - } + const { TRACK_ALERTS_DETAILS_VIEWS_OPTIONS, TRACK_ALERT_STATUS_UPDATE_OPTIONS } = PAGE_CONFIG[ + page + ]; + provide.trackAlertsDetailsViewsOptions = TRACK_ALERTS_DETAILS_VIEWS_OPTIONS; + provide.trackAlertStatusUpdateOptions = TRACK_ALERT_STATUS_UPDATE_OPTIONS; + opsProperties.store = createStore({}, service); // eslint-disable-next-line no-new new Vue({ diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue index 9bccc49e894..8bffc2479a1 100644 --- a/app/assets/javascripts/vue_shared/components/ci_icon.vue +++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue @@ -45,7 +45,12 @@ export default { return validSizes.includes(value); }, }, - borderless: { + isActive: { + type: Boolean, + required: false, + default: false, + }, + isBorderless: { type: Boolean, required: false, default: false, @@ -67,15 +72,19 @@ export default { return `ci-status-icon ci-status-icon-${status} js-ci-status-icon-${status} gl-rounded-full gl-justify-content-center`; }, icon() { - return this.borderless ? `${this.status.icon}_borderless` : this.status.icon; + return this.isBorderless ? `${this.status.icon}_borderless` : this.status.icon; }, }, }; </script> <template> <span - :class="[wrapperStyleClasses, { interactive: isInteractive }]" + :class="[ + wrapperStyleClasses, + { interactive: isInteractive, active: isActive, borderless: isBorderless }, + ]" :style="{ height: `${size}px`, width: `${size}px` }" + data-testid="ci-icon-wrapper" > <gl-icon :name="icon" :size="size" :class="cssClasses" :aria-label="status.icon" /> </span> diff --git a/app/assets/javascripts/vue_shared/components/clone_dropdown.vue b/app/assets/javascripts/vue_shared/components/clone_dropdown.vue index f14e1992901..dd6923d9fcd 100644 --- a/app/assets/javascripts/vue_shared/components/clone_dropdown.vue +++ b/app/assets/javascripts/vue_shared/components/clone_dropdown.vue @@ -45,7 +45,7 @@ export default { }; </script> <template> - <gl-dropdown right :text="$options.labels.defaultLabel" category="primary" variant="info"> + <gl-dropdown right :text="$options.labels.defaultLabel" category="primary" variant="confirm"> <div class="pb-2 mx-1"> <template v-if="sshLink"> <gl-dropdown-section-header>{{ $options.labels.ssh }}</gl-dropdown-section-header> diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue new file mode 100644 index 00000000000..92817d5fa70 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_item.vue @@ -0,0 +1,25 @@ +<script> +export default { + props: { + color: { + type: String, + required: true, + }, + title: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <div> + <span + class="dropdown-label-box gl-flex-shrink-0 gl-top-1 gl-mr-0" + data-testid="color-item" + :style="{ backgroundColor: color }" + ></span> + <span class="hide-collapsed">{{ title }}</span> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue new file mode 100644 index 00000000000..6b79883d76b --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/color_select_root.vue @@ -0,0 +1,214 @@ +<script> +import createFlash from '~/flash'; +import { s__ } from '~/locale'; +import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue'; +import { DEFAULT_COLOR, COLOR_WIDGET_COLOR, DROPDOWN_VARIANT, ISSUABLE_COLORS } from './constants'; +import DropdownContents from './dropdown_contents.vue'; +import DropdownValue from './dropdown_value.vue'; +import { isDropdownVariantSidebar, isDropdownVariantEmbedded } from './utils'; +import epicColorQuery from './graphql/epic_color.query.graphql'; +import updateEpicColorMutation from './graphql/epic_update_color.mutation.graphql'; + +export default { + i18n: { + assignColor: s__('ColorWidget|Assign epic color'), + dropdownButtonText: COLOR_WIDGET_COLOR, + fetchingError: s__('ColorWidget|Error fetching epic color.'), + updatingError: s__('ColorWidget|An error occurred while updating color.'), + widgetTitle: COLOR_WIDGET_COLOR, + }, + components: { + DropdownValue, + DropdownContents, + SidebarEditableItem, + }, + props: { + allowEdit: { + type: Boolean, + required: false, + default: false, + }, + iid: { + type: String, + required: false, + default: '', + }, + fullPath: { + type: String, + required: true, + }, + variant: { + type: String, + required: false, + default: DROPDOWN_VARIANT.Sidebar, + }, + dropdownButtonText: { + type: String, + required: false, + default: COLOR_WIDGET_COLOR, + }, + dropdownTitle: { + type: String, + required: false, + default: s__('ColorWidget|Assign epic color'), + }, + }, + data() { + return { + issuableColor: { + color: '', + title: '', + }, + colorUpdateInProgress: false, + oldIid: null, + sidebarExpandedOnClick: false, + }; + }, + apollo: { + issuableColor: { + query: epicColorQuery, + skip() { + return !isDropdownVariantSidebar(this.variant); + }, + variables() { + return { + iid: this.iid, + fullPath: this.fullPath, + }; + }, + update(data) { + const issuableColor = data.workspace?.issuable?.color; + + if (issuableColor) { + return ISSUABLE_COLORS.find((color) => color.color === issuableColor) ?? DEFAULT_COLOR; + } + + return DEFAULT_COLOR; + }, + error() { + createFlash({ + message: this.$options.i18n.fetchingError, + captureError: true, + }); + }, + }, + }, + computed: { + isLoading() { + return this.colorUpdateInProgress || this.$apollo.queries.issuableColor.loading; + }, + }, + watch: { + iid(_, oldVal) { + this.oldIid = oldVal; + }, + }, + methods: { + handleDropdownClose(color) { + if (this.iid !== '') { + this.updateSelectedColor(this.getUpdateVariables(color)); + } else { + this.$emit('updateSelectedColor', color); + } + + this.collapseEditableItem(); + }, + collapseEditableItem() { + this.$refs.editable?.collapse(); + if (this.sidebarExpandedOnClick) { + this.sidebarExpandedOnClick = false; + this.$emit('toggleCollapse'); + } + }, + getUpdateVariables(color) { + const currentIid = this.oldIid || this.iid; + + return { + iid: currentIid, + groupPath: this.fullPath, + color: color.color, + }; + }, + updateSelectedColor(inputVariables) { + this.colorUpdateInProgress = true; + + this.$apollo + .mutate({ + mutation: updateEpicColorMutation, + variables: { input: inputVariables }, + }) + .then(({ data }) => { + if (data.updateIssuableColor?.errors?.length) { + throw new Error(); + } + + this.$emit('updateSelectedColor', { + id: data.updateIssuableColor?.issuable?.id, + color: data.updateIssuableColor?.issuable?.color, + }); + }) + .catch((error) => + createFlash({ + message: this.$options.i18n.updatingError, + captureError: true, + error, + }), + ) + .finally(() => { + this.colorUpdateInProgress = false; + }); + }, + isDropdownVariantSidebar, + isDropdownVariantEmbedded, + }, +}; +</script> + +<template> + <div + class="labels-select-wrapper gl-relative" + :class="{ + 'is-embedded': isDropdownVariantEmbedded(variant), + }" + > + <template v-if="isDropdownVariantSidebar(variant)"> + <sidebar-editable-item + ref="editable" + :title="$options.i18n.widgetTitle" + :loading="isLoading" + :can-edit="allowEdit" + @open="oldIid = null" + > + <template #collapsed> + <dropdown-value :selected-color="issuableColor"> + <slot></slot> + </dropdown-value> + </template> + <template #default="{ edit }"> + <dropdown-value :selected-color="issuableColor" class="gl-mb-2"> + <slot></slot> + </dropdown-value> + <dropdown-contents + ref="dropdownContents" + :dropdown-button-text="dropdownButtonText" + :dropdown-title="dropdownTitle" + :selected-color="issuableColor" + :variant="variant" + :is-visible="edit" + @setColor="handleDropdownClose" + @closeDropdown="collapseEditableItem" + /> + </template> + </sidebar-editable-item> + </template> + <dropdown-contents + v-else + ref="dropdownContents" + :dropdown-button-text="dropdownButtonText" + :dropdown-title="dropdownTitle" + :selected-color="issuableColor" + :variant="variant" + @setColor="handleDropdownClose" + /> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/constants.js b/app/assets/javascripts/vue_shared/components/color_select_dropdown/constants.js new file mode 100644 index 00000000000..c70785abd1e --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/constants.js @@ -0,0 +1,30 @@ +import { __, s__ } from '~/locale'; + +export const COLOR_WIDGET_COLOR = s__('ColorWidget|Color'); + +export const DROPDOWN_VARIANT = { + Sidebar: 'sidebar', + Embedded: 'embedded', +}; + +export const DEFAULT_COLOR = { title: __('SuggestedColors|Blue'), color: '#1068bf' }; + +export const ISSUABLE_COLORS = [ + DEFAULT_COLOR, + { + title: s__('SuggestedColors|Green'), + color: '#217645', + }, + { + title: s__('SuggestedColors|Red'), + color: '#c91c00', + }, + { + title: s__('SuggestedColors|Orange'), + color: '#9e5400', + }, + { + title: s__('SuggestedColors|Purple'), + color: '#694cc0', + }, +]; diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue new file mode 100644 index 00000000000..4eb1d3d08ca --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents.vue @@ -0,0 +1,109 @@ +<script> +import { GlDropdown } from '@gitlab/ui'; +import DropdownContentsColorView from './dropdown_contents_color_view.vue'; +import DropdownHeader from './dropdown_header.vue'; +import { isDropdownVariantSidebar } from './utils'; + +export default { + components: { + DropdownContentsColorView, + DropdownHeader, + GlDropdown, + }, + props: { + dropdownTitle: { + type: String, + required: true, + }, + selectedColor: { + type: Object, + required: true, + }, + dropdownButtonText: { + type: String, + required: true, + }, + variant: { + type: String, + required: true, + }, + isVisible: { + type: Boolean, + required: false, + default: false, + }, + }, + data() { + return { + showDropdownContentsCreateView: false, + localSelectedColor: this.selectedColor, + isDirty: false, + }; + }, + computed: { + buttonText() { + if (!this.localSelectedColor?.title) { + return this.dropdownButtonText; + } + + return this.localSelectedColor.title; + }, + }, + watch: { + localSelectedColor: { + handler() { + this.isDirty = true; + }, + deep: true, + }, + isVisible(newVal) { + if (newVal) { + this.$refs.dropdown.show(); + this.isDirty = false; + this.localSelectedColor = this.selectedColor; + } else { + this.$refs.dropdown.hide(); + this.setColor(); + } + }, + selectedColor(newVal) { + if (!this.isDirty) { + this.localSelectedColor = newVal; + } + }, + }, + methods: { + setColor() { + if (!this.isDirty) { + return; + } + this.$emit('setColor', this.localSelectedColor); + }, + handleDropdownHide() { + this.$emit('closeDropdown'); + if (!isDropdownVariantSidebar(this.variant)) { + this.setColor(); + } + this.$refs.dropdown.hide(); + }, + }, +}; +</script> + +<template> + <gl-dropdown ref="dropdown" :text="buttonText" class="gl-w-full" @hide="handleDropdownHide"> + <template #header> + <dropdown-header + ref="header" + :dropdown-title="dropdownTitle" + @closeDropdown="handleDropdownHide" + /> + </template> + <template #default> + <dropdown-contents-color-view + v-model="localSelectedColor" + @closeDropdown="handleDropdownHide" + /> + </template> + </gl-dropdown> +</template> diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue new file mode 100644 index 00000000000..62f4cf59c14 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_contents_color_view.vue @@ -0,0 +1,53 @@ +<script> +import { GlDropdownForm, GlDropdownItem } from '@gitlab/ui'; +import ColorItem from './color_item.vue'; +import { ISSUABLE_COLORS } from './constants'; + +export default { + components: { + GlDropdownForm, + GlDropdownItem, + ColorItem, + }, + model: { + prop: 'selectedColor', + }, + props: { + selectedColor: { + type: Object, + required: true, + }, + }, + data() { + return { + colors: ISSUABLE_COLORS, + }; + }, + methods: { + isColorSelected(color) { + return this.selectedColor.color === color.color; + }, + handleColorClick(color) { + this.$emit('input', color); + this.$emit('closeDropdown', this.selectedColor); + }, + }, +}; +</script> + +<template> + <gl-dropdown-form> + <div> + <gl-dropdown-item + v-for="color in colors" + :key="color.color" + :is-checked="isColorSelected(color)" + :is-check-centered="true" + :is-check-item="true" + @click.native.capture.stop="handleColorClick(color)" + > + <color-item :color="color.color" :title="color.title" /> + </gl-dropdown-item> + </div> + </gl-dropdown-form> +</template> diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_header.vue new file mode 100644 index 00000000000..a32b1570f5f --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_header.vue @@ -0,0 +1,31 @@ +<script> +import { GlButton } from '@gitlab/ui'; + +export default { + components: { + GlButton, + }, + props: { + dropdownTitle: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <div> + <div class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!"> + <span class="gl-flex-grow-1">{{ dropdownTitle }}</span> + <gl-button + :aria-label="__('Close')" + variant="link" + size="small" + class="dropdown-header-button gl-p-0!" + icon="close" + @click="$emit('closeDropdown')" + /> + </div> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue new file mode 100644 index 00000000000..4cba66eefd2 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue @@ -0,0 +1,43 @@ +<script> +import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { COLOR_WIDGET_COLOR } from './constants'; +import ColorItem from './color_item.vue'; + +export default { + i18n: { + dropdownTitle: COLOR_WIDGET_COLOR, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + components: { + GlIcon, + ColorItem, + }, + props: { + selectedColor: { + type: Object, + required: true, + }, + }, +}; +</script> + +<template> + <div class="value js-value"> + <div + v-gl-tooltip.left.viewport + :title="$options.i18n.dropdownTitle" + class="sidebar-collapsed-icon" + > + <gl-icon name="appearance" /> + <color-item + :color="selectedColor.color" + :title="selectedColor.title" + class="gl-font-base gl-line-height-24" + /> + </div> + + <color-item class="hide-collapsed" :color="selectedColor.color" :title="selectedColor.title" /> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/graphql/epic_color.query.graphql b/app/assets/javascripts/vue_shared/components/color_select_dropdown/graphql/epic_color.query.graphql new file mode 100644 index 00000000000..959e0f8c1a5 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/graphql/epic_color.query.graphql @@ -0,0 +1,9 @@ +query epicColor($fullPath: ID!, $iid: ID) { + workspace: group(fullPath: $fullPath) { + id + issuable: epic(iid: $iid) { + id + color + } + } +} diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/graphql/epic_update_color.mutation.graphql b/app/assets/javascripts/vue_shared/components/color_select_dropdown/graphql/epic_update_color.mutation.graphql new file mode 100644 index 00000000000..2975b42253f --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/graphql/epic_update_color.mutation.graphql @@ -0,0 +1,9 @@ +mutation updateEpicColor($input: UpdateEpicInput!) { + updateIssuableColor: updateEpic(input: $input) { + issuable: epic { + id + color + } + errors + } +} diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/utils.js b/app/assets/javascripts/vue_shared/components/color_select_dropdown/utils.js new file mode 100644 index 00000000000..46196e793b3 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/utils.js @@ -0,0 +1,15 @@ +import { DROPDOWN_VARIANT } from './constants'; + +/** + * Returns boolean representing whether dropdown variant + * is `sidebar` + * @param {string} variant + */ +export const isDropdownVariantSidebar = (variant) => variant === DROPDOWN_VARIANT.Sidebar; + +/** + * Returns boolean representing whether dropdown variant + * is `embedded` + * @param {string} variant + */ +export const isDropdownVariantEmbedded = (variant) => variant === DROPDOWN_VARIANT.Embedded; diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue index 9cf8638f3cb..3ecfac10f9c 100644 --- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue @@ -1,8 +1,5 @@ <script> -import { - GlDeprecatedSkeletonLoading as GlSkeletonLoading, - GlSafeHtmlDirective as SafeHtml, -} from '@gitlab/ui'; +import { GlSkeletonLoader, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; import $ from 'jquery'; import '~/behaviors/markdown/render_gfm'; import { forEach, escape } from 'lodash'; @@ -14,7 +11,7 @@ let axiosSource; export default { components: { - GlSkeletonLoading, + GlSkeletonLoader, }, directives: { SafeHtml, @@ -115,7 +112,7 @@ export default { <template> <div ref="markdownPreview" class="md-previewer" data-testid="md-previewer"> - <gl-skeleton-loading v-if="isLoading" /> + <gl-skeleton-loader v-if="isLoading" /> <div v-else v-safe-html:[$options.safeHtmlConfig]="previewContent" diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js index d7a84798e47..5d7f4ae2a01 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js @@ -1,4 +1,4 @@ -import { __ } from '~/locale'; +import { __, s__ } from '~/locale'; export const DEBOUNCE_DELAY = 500; export const MAX_RECENT_TOKENS_SIZE = 3; @@ -46,11 +46,13 @@ export const SortDirection = { export const FILTERED_SEARCH_LABELS = 'labels'; export const FILTERED_SEARCH_TERM = 'filtered-search-term'; -export const TOKEN_TITLE_AUTHOR = __('Author'); export const TOKEN_TITLE_ASSIGNEE = __('Assignee'); -export const TOKEN_TITLE_MILESTONE = __('Milestone'); +export const TOKEN_TITLE_AUTHOR = __('Author'); +export const TOKEN_TITLE_CONFIDENTIAL = __('Confidential'); +export const TOKEN_TITLE_CONTACT = s__('Crm|Contact'); export const TOKEN_TITLE_LABEL = __('Label'); -export const TOKEN_TITLE_TYPE = __('Type'); -export const TOKEN_TITLE_RELEASE = __('Release'); +export const TOKEN_TITLE_MILESTONE = __('Milestone'); export const TOKEN_TITLE_MY_REACTION = __('My-Reaction'); -export const TOKEN_TITLE_CONFIDENTIAL = __('Confidential'); +export const TOKEN_TITLE_ORGANIZATION = s__('Crm|Organization'); +export const TOKEN_TITLE_RELEASE = __('Release'); +export const TOKEN_TITLE_TYPE = __('Type'); diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue index c3a0a97a7ba..6a4ff07c999 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue @@ -168,7 +168,7 @@ export default { if (data || operator) { this.searchKey = data; - if (!this.suggestionsLoading && !this.activeTokenValue) { + if (!this.activeTokenValue) { let search = this.searchTerm ? this.searchTerm : data; if (search.startsWith('"') && search.endsWith('"')) { diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue index 6f24955814c..178c57a5666 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue @@ -43,9 +43,7 @@ export default { }, methods: { getActiveLabel(labels, data) { - return labels.find( - (label) => this.getLabelName(label).toLowerCase() === stripQuotes(data).toLowerCase(), - ); + return labels.find((label) => this.getLabelName(label) === stripQuotes(data)); }, /** * There's an inconsistency between private and public API @@ -128,7 +126,7 @@ export default { <div class="gl-display-flex gl-align-items-center"> <span :style="{ backgroundColor: label.color }" - class="gl-display-inline-block mr-2 p-2" + class="gl-display-inline-block gl-mr-3 gl-p-3" ></span> <div>{{ getLabelName(label) }}</div> </div> diff --git a/app/assets/javascripts/vue_shared/components/form/input_copy_toggle_visibility.vue b/app/assets/javascripts/vue_shared/components/form/input_copy_toggle_visibility.vue index 69548f0e7a8..15d858b99b9 100644 --- a/app/assets/javascripts/vue_shared/components/form/input_copy_toggle_visibility.vue +++ b/app/assets/javascripts/vue_shared/components/form/input_copy_toggle_visibility.vue @@ -1,5 +1,11 @@ <script> -import { GlFormInputGroup, GlFormGroup, GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { + GlFormInputGroup, + GlFormInput, + GlFormGroup, + GlButton, + GlTooltipDirective, +} from '@gitlab/ui'; import { __ } from '~/locale'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; @@ -12,6 +18,7 @@ export default { }, components: { GlFormInputGroup, + GlFormInput, GlFormGroup, GlButton, ClipboardButton, @@ -80,10 +87,15 @@ export default { this.$emit('visibility-change', this.valueIsVisible); }, + handleClick() { + this.$refs.input.$el.select(); + }, handleCopyButtonClick() { this.$emit('copy'); }, handleFormInputCopy(event) { + this.handleCopyButtonClick(); + if (this.computedValueIsVisible) { return; } @@ -96,14 +108,21 @@ export default { </script> <template> <gl-form-group v-bind="$attrs"> - <gl-form-input-group - :value="displayedValue" - input-class="gl-font-monospace! gl-cursor-default!" - select-on-click - readonly - v-bind="formInputGroupProps" - @copy="handleFormInputCopy" - > + <gl-form-input-group> + <gl-form-input + ref="input" + readonly + class="gl-font-monospace! gl-cursor-default!" + v-bind="formInputGroupProps" + :value="displayedValue" + @copy="handleFormInputCopy" + @click="handleClick" + /> + + <!-- + This v-if is necessary to avoid an issue with border radius. + See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/88059#note_969812649 + --> <template v-if="showToggleVisibilityButton || showCopyButton" #append> <gl-button v-if="showToggleVisibilityButton" diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue index ba2b5eaa4f9..4fdf7f45643 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue @@ -266,7 +266,7 @@ export default { }} </p> <gl-button - variant="info" + variant="confirm" category="primary" size="small" @click="handleSuggestDismissed" diff --git a/app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue b/app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue index 7a7074da084..78a7fed6293 100644 --- a/app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue +++ b/app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue @@ -98,13 +98,15 @@ export default { <span v-else-if="isConfidential" ref="confidential"> {{ confidentialContextText }} {{ __('People without permission will never get a notification.') }} - <gl-link :href="confidentialNoteableDocsPath" target="_blank">{{ __('Learn more') }}</gl-link> + <gl-link :href="confidentialNoteableDocsPath" target="_blank">{{ + __('Learn more.') + }}</gl-link> </span> <span v-else-if="isLocked" ref="locked"> {{ lockedContextText }} {{ __('Only project members can comment.') }} - <gl-link :href="lockedNoteableDocsPath" target="_blank">{{ __('Learn more') }}</gl-link> + <gl-link :href="lockedNoteableDocsPath" target="_blank">{{ __('Learn more.') }}</gl-link> </span> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue index 3aca068c074..2206ae98c73 100644 --- a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue @@ -1,11 +1,11 @@ <script> -import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; +import { GlSkeletonLoader } from '@gitlab/ui'; import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; export default { name: 'SkeletonNote', components: { - GlSkeletonLoading, + GlSkeletonLoader, TimelineEntryItem, }, }; @@ -16,7 +16,7 @@ export default { <div class="timeline-icon"></div> <div class="timeline-content"> <div class="note-header"></div> - <div class="note-body"><gl-skeleton-loading /></div> + <div class="note-body"><gl-skeleton-loader /></div> </div> </timeline-entry-item> </template> diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue index dd7a851b1be..3593ea16968 100644 --- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue @@ -18,7 +18,7 @@ */ import { GlButton, - GlDeprecatedSkeletonLoading as GlSkeletonLoading, + GlSkeletonLoader, GlTooltipDirective, GlIcon, GlSafeHtmlDirective as SafeHtml, @@ -26,9 +26,9 @@ import { import $ from 'jquery'; import { mapGetters, mapActions, mapState } from 'vuex'; import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history'; +import '~/behaviors/markdown/render_gfm'; import axios from '~/lib/utils/axios_utils'; import { __ } from '~/locale'; -import initMRPopovers from '~/mr_popover/'; import noteHeader from '~/notes/components/note_header.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { spriteIcon } from '~/lib/utils/common_utils'; @@ -46,7 +46,7 @@ export default { noteHeader, TimelineEntryItem, GlButton, - GlSkeletonLoading, + GlSkeletonLoader, }, directives: { GlTooltip: GlTooltipDirective, @@ -94,7 +94,7 @@ export default { }, }, mounted() { - initMRPopovers(this.$el.querySelectorAll('.gfm-merge_request')); + $(this.$refs['gfm-content']).renderGFM(); }, methods: { ...mapActions(['fetchDescriptionVersion', 'softDeleteDescriptionVersion']), @@ -130,7 +130,7 @@ export default { <div class="timeline-content"> <div class="note-header"> <note-header :author="note.author" :created-at="note.created_at" :note-id="note.id"> - <span v-safe-html="actionTextHtml"></span> + <span ref="gfm-content" v-safe-html="actionTextHtml"></span> <template v-if="canSeeDescriptionVersion || note.outdated_line_change_path" #extra-controls @@ -172,7 +172,7 @@ export default { </div> <div v-if="shouldShowDescriptionVersion" class="description-version pt-2"> <pre v-if="isLoadingDescriptionVersion" class="loading-state"> - <gl-skeleton-loading /> + <gl-skeleton-loader /> </pre> <pre v-else v-safe-html="descriptionVersion" class="wrapper mt-2"></pre> <gl-button @@ -218,7 +218,9 @@ export default { </tr> </table> </div> - <gl-skeleton-loading v-else-if="showLines" class="gl-mt-4" /> + <div v-else-if="showLines" class="mt-4"> + <gl-skeleton-loader /> + </div> </div> </div> </timeline-entry-item> diff --git a/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue b/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue index f21092af501..67ad7769c7c 100644 --- a/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue +++ b/app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue @@ -130,16 +130,19 @@ export default { <span data-testid="legend-text">{{ legendText }}</span> </template> </gl-infinite-scroll> - <div v-if="showNoResultsMessage" class="text-muted ml-2 js-no-results-message"> + <div v-if="showNoResultsMessage" class="gl-text-gray-600 gl-ml-3 js-no-results-message"> {{ __('Sorry, no projects matched your search') }} </div> <div v-if="showMinimumSearchQueryMessage" - class="text-muted ml-2 js-minimum-search-query-message" + class="gl-text-gray-600 gl-ml-3 js-minimum-search-query-message" > {{ __('Enter at least three characters to search') }} </div> - <div v-if="showSearchErrorMessage" class="text-danger ml-2 js-search-error-message"> + <div + v-if="showSearchErrorMessage" + class="gl-text-red-500 gl-font-weight-bold gl-ml-3 js-search-error-message" + > {{ __('Something went wrong, unable to search projects') }} </div> </div> diff --git a/app/assets/javascripts/vue_shared/components/registry/registry_search.vue b/app/assets/javascripts/vue_shared/components/registry/registry_search.vue index da68fe961a6..1948a6778f4 100644 --- a/app/assets/javascripts/vue_shared/components/registry/registry_search.vue +++ b/app/assets/javascripts/vue_shared/components/registry/registry_search.vue @@ -12,7 +12,7 @@ export default { GlFilteredSearch, }, props: { - filter: { + filters: { type: Array, required: true, }, @@ -33,7 +33,7 @@ export default { computed: { internalFilter: { get() { - return this.filter; + return this.filters; }, set(value) { this.$emit('filter:changed', value); @@ -71,7 +71,7 @@ export default { const sort = this.isSortAscending ? DESCENDING_ORDER : ASCENDING_ORDER; const newQueryString = this.generateQueryData({ sorting: { ...this.sorting, sort }, - filter: this.filter, + filter: this.filters, }); this.$emit('sorting:changed', { sort }); this.$emit('query:changed', newQueryString); @@ -79,7 +79,7 @@ export default { onSortItemClick(item) { const newQueryString = this.generateQueryData({ sorting: { ...this.sorting, orderBy: item }, - filter: this.filter, + filter: this.filters, }); this.$emit('sorting:changed', { orderBy: item }); this.$emit('query:changed', newQueryString); @@ -87,7 +87,7 @@ export default { submitSearch() { const newQueryString = this.generateQueryData({ sorting: this.sorting, - filter: this.filter, + filter: this.filters, }); this.$emit('filter:submit'); this.$emit('query:changed', newQueryString); diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/constants.js b/app/assets/javascripts/vue_shared/components/runner_instructions/constants.js index 34845e3d9e4..c97e191b630 100644 --- a/app/assets/javascripts/vue_shared/components/runner_instructions/constants.js +++ b/app/assets/javascripts/vue_shared/components/runner_instructions/constants.js @@ -1,7 +1,5 @@ import { s__ } from '~/locale'; -export const PLATFORMS_WITHOUT_ARCHITECTURES = ['docker', 'kubernetes']; - export const REGISTRATION_TOKEN_PLACEHOLDER = '$REGISTRATION_TOKEN'; export const INSTRUCTIONS_PLATFORMS_WITHOUT_ARCHITECTURES = { diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions.vue b/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions.vue index 5d144c0d699..06852f511bf 100644 --- a/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions.vue +++ b/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions.vue @@ -9,35 +9,19 @@ export default { RunnerInstructionsModal, }, directives: { - GlModalDirective, + GlModal: GlModalDirective, }, modalId: 'runner-instructions-modal', i18n: { buttonText: s__('Runners|Show runner installation instructions'), }, - data() { - return { - opened: false, - }; - }, - methods: { - onClick() { - // lazily mount modal to prevent premature instructions requests - this.opened = true; - }, - }, }; </script> <template> <div> - <gl-button - v-gl-modal-directive="$options.modalId" - class="gl-mt-4" - data-testid="show-modal-button" - @click="onClick" - > + <gl-button v-gl-modal="$options.modalId" class="gl-mt-4" data-testid="show-modal-button"> {{ $options.i18n.buttonText }} </gl-button> - <runner-instructions-modal v-if="opened" :modal-id="$options.modalId" /> + <runner-instructions-modal :modal-id="$options.modalId" /> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue b/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue index 9eaaf7d1c18..bfaf3b92c34 100644 --- a/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue +++ b/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue @@ -17,7 +17,6 @@ import { __, s__ } from '~/locale'; import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; import { INSTRUCTIONS_PLATFORMS_WITHOUT_ARCHITECTURES, - PLATFORMS_WITHOUT_ARCHITECTURES, REGISTRATION_TOKEN_PLACEHOLDER, } from './constants'; import getRunnerPlatformsQuery from './graphql/queries/get_runner_platforms.query.graphql'; @@ -59,21 +58,25 @@ export default { apollo: { platforms: { query: getRunnerPlatformsQuery, + skip() { + // Only load instructions once the modal is shown + return !this.shown; + }, update(data) { - return data?.runnerPlatforms?.nodes.map(({ name, humanReadableName, architectures }) => { - return { - name, - humanReadableName, - architectures: architectures?.nodes || [], - }; - }); + return ( + data?.runnerPlatforms?.nodes.map(({ name, humanReadableName, architectures }) => { + return { + name, + humanReadableName, + architectures: architectures?.nodes || [], + }; + }) ?? [] + ); }, result() { - if (this.platforms.length) { - // If it is set and available, select the defaultSelectedPlatform. - // Otherwise, select the first available platform - this.selectPlatform(this.defaultPlatform() || this.platforms[0]); - } + // If it is set and available, select the defaultSelectedPlatform. + // Otherwise, select the first available platform + this.selectPlatform(this.defaultPlatformName || this.platforms?.[0].name); }, error() { this.toggleAlert(true); @@ -82,12 +85,12 @@ export default { instructions: { query: getRunnerSetupInstructionsQuery, skip() { - return !this.selectedPlatform; + return !this.shown || !this.selectedPlatform; }, variables() { return { - platform: this.selectedPlatformName, - architecture: this.selectedArchitectureName || '', + platform: this.selectedPlatform, + architecture: this.selectedArchitecture || '', }; }, update(data) { @@ -100,6 +103,7 @@ export default { }, data() { return { + shown: false, platforms: [], selectedPlatform: null, selectedArchitecture: null, @@ -109,55 +113,63 @@ export default { }; }, computed: { - platformsEmpty() { - return isEmpty(this.platforms); - }, instructionsEmpty() { return isEmpty(this.instructions); }, - selectedPlatformName() { - return this.selectedPlatform?.name; - }, - selectedArchitectureName() { - return this.selectedArchitecture?.name; + architectures() { + return this.platforms.find(({ name }) => name === this.selectedPlatform)?.architectures || []; }, - hasArchitecureList() { - return !PLATFORMS_WITHOUT_ARCHITECTURES.includes(this.selectedPlatformName); + binaryUrl() { + return this.architectures.find(({ name }) => name === this.selectedArchitecture) + ?.downloadLocation; }, instructionsWithoutArchitecture() { - return INSTRUCTIONS_PLATFORMS_WITHOUT_ARCHITECTURES[this.selectedPlatformName]?.instructions; + return INSTRUCTIONS_PLATFORMS_WITHOUT_ARCHITECTURES[this.selectedPlatform]?.instructions; }, runnerInstallationLink() { - return INSTRUCTIONS_PLATFORMS_WITHOUT_ARCHITECTURES[this.selectedPlatformName]?.link; + return INSTRUCTIONS_PLATFORMS_WITHOUT_ARCHITECTURES[this.selectedPlatform]?.link; }, registerInstructionsWithToken() { const { registerInstructions } = this.instructions || {}; if (this.registrationToken) { - return registerInstructions.replace(REGISTRATION_TOKEN_PLACEHOLDER, this.registrationToken); + return registerInstructions?.replace( + REGISTRATION_TOKEN_PLACEHOLDER, + this.registrationToken, + ); } - return registerInstructions; }, }, + updated() { + // Refocus on dom changes, after loading data + this.refocusSelectedPlatformButton(); + }, methods: { show() { this.$refs.modal.show(); }, - focusSelected() { - // By default the first platform always gets the focus, but when the `defaultPlatformName` - // property is present, any other platform might actually be selected. - this.$refs[this.selectedPlatformName]?.[0].$el.focus(); + onShown() { + this.shown = true; + this.refocusSelectedPlatformButton(); }, - defaultPlatform() { - return this.platforms.find((platform) => platform.name === this.defaultPlatformName); + refocusSelectedPlatformButton() { + // On modal opening, the first focusable element is auto-focused by bootstrap-vue + // This can be confusing for users, because the wrong platform button can + // get focused when setting a `defaultPlatformName`. + // This method refocuses the expected button. + // See more about this auto-focus: https://bootstrap-vue.org/docs/components/modal#auto-focus-on-open + this.$refs[this.selectedPlatform]?.[0].$el.focus(); }, - selectPlatform(platform) { - this.selectedPlatform = platform; + selectPlatform(platformName) { + this.selectedPlatform = platformName; - if (!platform.architectures?.some(({ name }) => name === this.selectedArchitectureName)) { - // Select first architecture when current value is not available - this.selectArchitecture(platform.architectures[0]); + // Update architecture when platform changes + const arch = this.architectures.find(({ name }) => name === this.selectedArchitecture); + if (arch) { + this.selectArchitecture(arch.name); + } else { + this.selectArchitecture(this.architectures[0]?.name); } }, selectArchitecture(architecture) { @@ -175,6 +187,7 @@ export default { }, }, i18n: { + environment: __('Environment'), installARunner: s__('Runners|Install a runner'), architecture: s__('Runners|Architecture'), downloadInstallBinary: s__('Runners|Download and install binary'), @@ -182,6 +195,7 @@ export default { registerRunnerCommand: s__('Runners|Command to register runner'), fetchError: s__('Runners|An error has occurred fetching instructions'), copyInstructions: s__('Runners|Copy instructions'), + viewInstallationInstructions: s__('Runners|View installation instructions'), }, closeButton: { text: __('Close'), @@ -197,17 +211,17 @@ export default { :action-secondary="$options.closeButton" v-bind="$attrs" v-on="$listeners" - @shown="focusSelected" + @shown="onShown" > <gl-alert v-if="showAlert" variant="danger" @dismiss="toggleAlert(false)"> {{ $options.i18n.fetchError }} </gl-alert> - <gl-skeleton-loader v-if="platformsEmpty && $apollo.loading" /> + <gl-skeleton-loader v-if="!platforms.length && $apollo.loading" /> - <template v-if="!platformsEmpty"> + <template v-if="platforms.length"> <h5> - {{ __('Environment') }} + {{ $options.i18n.environment }} </h5> <div v-gl-resize-observer="onPlatformsButtonResize"> <gl-button-group @@ -220,29 +234,29 @@ export default { v-for="platform in platforms" :key="platform.name" :ref="platform.name" - :selected="selectedPlatform && selectedPlatform.name === platform.name" - @click="selectPlatform(platform)" + :selected="selectedPlatform === platform.name" + @click="selectPlatform(platform.name)" > {{ platform.humanReadableName }} </gl-button> </gl-button-group> </div> </template> - <template v-if="hasArchitecureList"> + <template v-if="architectures.length"> <template v-if="selectedPlatform"> <h5> {{ $options.i18n.architecture }} <gl-loading-icon v-if="$apollo.loading" size="sm" inline /> </h5> - <gl-dropdown class="gl-mb-3" :text="selectedArchitectureName"> + <gl-dropdown class="gl-mb-3" :text="selectedArchitecture"> <gl-dropdown-item - v-for="architecture in selectedPlatform.architectures" + v-for="architecture in architectures" :key="architecture.name" :is-check-item="true" - :is-checked="selectedArchitectureName === architecture.name" + :is-checked="selectedArchitecture === architecture.name" data-testid="architecture-dropdown-item" - @click="selectArchitecture(architecture)" + @click="selectArchitecture(architecture.name)" > {{ architecture.name }} </gl-dropdown-item> @@ -250,8 +264,9 @@ export default { <div class="gl-sm-display-flex gl-align-items-center gl-mb-3"> <h5>{{ $options.i18n.downloadInstallBinary }}</h5> <gl-button + v-if="binaryUrl" class="gl-ml-auto" - :href="selectedArchitecture.downloadLocation" + :href="binaryUrl" download icon="download" data-testid="binary-download-button" @@ -298,7 +313,7 @@ export default { <p>{{ instructionsWithoutArchitecture }}</p> <gl-button :href="runnerInstallationLink"> <gl-icon name="external-link" /> - {{ s__('Runners|View installation instructions') }} + {{ $options.i18n.viewInstallationInstructions }} </gl-button> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue index 60111210f5d..9388ef4ba45 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue @@ -2,6 +2,9 @@ import { GlButton, GlIcon } from '@gitlab/ui'; import { mapActions, mapGetters } from 'vuex'; +// @deprecated This component should only be used when there is no GraphQL API. +// In most cases you should use +// `app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget` instead. export default { components: { GlButton, diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue index 399db978b60..1064cbc26e3 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue @@ -4,6 +4,9 @@ import { mapGetters, mapState } from 'vuex'; import DropdownContentsCreateView from './dropdown_contents_create_view.vue'; import DropdownContentsLabelsView from './dropdown_contents_labels_view.vue'; +// @deprecated This component should only be used when there is no GraphQL API. +// In most cases you should use +// `app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue` instead. export default { components: { DropdownContentsLabelsView, diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue index 2cccb8325f4..3ff3755de46 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue @@ -2,6 +2,9 @@ import { GlTooltipDirective, GlButton, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui'; import { mapState, mapActions } from 'vuex'; +// @deprecated This component should only be used when there is no GraphQL API. +// In most cases you should use +// `app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue` instead. export default { components: { GlButton, @@ -51,10 +54,10 @@ export default { <template> <div class="labels-select-contents-create js-labels-create"> - <div class="dropdown-title d-flex align-items-center pt-0 pb-2"> + <div class="dropdown-title d-flex align-items-center pt-0 pb-2 gl-mb-0"> <gl-button :aria-label="__('Go back')" - variant="link" + category="tertiary" size="small" class="js-btn-back dropdown-header-button p-0" icon="arrow-left" @@ -63,7 +66,7 @@ export default { <span class="flex-grow-1">{{ labelsCreateTitle }}</span> <gl-button :aria-label="__('Close')" - variant="link" + category="tertiary" size="small" class="dropdown-header-button p-0" icon="close" @@ -95,7 +98,7 @@ export default { ></span> <gl-form-input v-model.trim="selectedColor" - class="gl-rounded-top-left-none gl-rounded-bottom-left-none" + class="gl-rounded-top-left-none gl-rounded-bottom-left-none gl-mb-2" :placeholder="__('Use custom color #FF0000')" /> </div> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue index 134575b7a27..e235bfde394 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue @@ -13,6 +13,9 @@ import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/ import LabelItem from './label_item.vue'; +// @deprecated This component should only be used when there is no GraphQL API. +// In most cases you should use +// `app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue` instead. export default { components: { GlIntersectionObserver, @@ -166,7 +169,7 @@ export default { <span class="flex-grow-1">{{ labelsListTitle }}</span> <gl-button :aria-label="__('Close')" - variant="link" + category="tertiary" size="small" class="dropdown-header-button gl-p-0!" icon="close" @@ -193,6 +196,7 @@ export default { :key="label.id" :label="label" :is-label-set="label.set" + :is-label-indeterminate="label.indeterminate" :highlight="index === currentHighlightItem" @clickLabel="handleLabelClick(label)" /> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue index e91a0489ef1..e4325492334 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue @@ -2,6 +2,9 @@ import { GlButton, GlLoadingIcon } from '@gitlab/ui'; import { mapState, mapActions } from 'vuex'; +// @deprecated This component should only be used when there is no GraphQL API. +// In most cases you should use +// `app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_header.vue` instead. export default { components: { GlButton, @@ -23,7 +26,9 @@ export default { </script> <template> - <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900 gl-font-weight-bold"> + <div + class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900 gl-font-weight-bold gl-mb-0" + > {{ __('Labels') }} <template v-if="allowLabelEdit"> <gl-loading-icon v-show="labelsSelectInProgress" size="sm" inline /> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value.vue index 35ac9ef8565..e59d150dd43 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value.vue @@ -5,6 +5,9 @@ import { mapState } from 'vuex'; import { isScopedLabel } from '~/lib/utils/common_utils'; +// @deprecated This component should only be used when there is no GraphQL API. +// In most cases you should use +// `app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue` instead. export default { components: { GlLabel, diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed.vue index 8a26c4a6618..5966c78aa51 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed.vue @@ -2,6 +2,9 @@ import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; import { s__, sprintf } from '~/locale'; +// @deprecated This component should only be used when there is no GraphQL API. +// In most cases you should use +// `app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget` instead. export default { directives: { GlTooltip: GlTooltipDirective, diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue index dd40add6376..154e3013acd 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue @@ -1,6 +1,10 @@ <script> import { GlLink, GlIcon } from '@gitlab/ui'; +import { __ } from '~/locale'; +// @deprecated This component should only be used when there is no GraphQL API. +// In most cases you should use +// `app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/label_item.vue` instead. export default { functional: true, props: { @@ -12,6 +16,11 @@ export default { type: Boolean, required: true, }, + isLabelIndeterminate: { + type: Boolean, + required: false, + default: false, + }, highlight: { type: Boolean, required: false, @@ -19,7 +28,7 @@ export default { }, }, render(h, { props, listeners }) { - const { label, highlight, isLabelSet } = props; + const { label, highlight, isLabelSet, isLabelIndeterminate } = props; const labelColorBox = h('span', { class: 'dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3', @@ -33,18 +42,36 @@ export default { const checkedIcon = h(GlIcon, { class: { - 'gl-mr-3 gl-flex-shrink-0': true, + 'gl-mr-3 gl-flex-shrink-0 has-tooltip': true, hidden: !isLabelSet, }, + attrs: { + title: __('Selected for all items.'), + 'data-testid': 'checked-icon', + }, props: { name: 'mobile-issue-close', }, }); + const indeterminateIcon = h(GlIcon, { + class: { + 'gl-mr-3 gl-flex-shrink-0 has-tooltip': true, + hidden: !isLabelIndeterminate, + }, + attrs: { + title: __('Selected for some items.'), + 'data-testid': 'indeterminate-icon', + }, + props: { + name: 'dash', + }, + }); + const noIcon = h('span', { class: { 'gl-mr-5 gl-pr-3': true, - hidden: isLabelSet, + hidden: isLabelSet || isLabelIndeterminate, }, attrs: { 'data-testid': 'no-icon', @@ -63,7 +90,7 @@ export default { }, }, }, - [noIcon, checkedIcon, labelColorBox, labelTitle], + [noIcon, checkedIcon, indeterminateIcon, labelColorBox, labelTitle], ); return h( diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue index 7e259cb8b96..b61996cdcdb 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue @@ -15,6 +15,9 @@ import labelsSelectModule from './store'; Vue.use(Vuex); +// @deprecated This component should only be used when there is no GraphQL API. +// In most cases you should use +// `app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue` instead. export default { store: new Vuex.Store(labelsSelectModule()), components: { @@ -198,11 +201,12 @@ export default { !state.showDropdownButton && !state.showDropdownContents ) { - let filterFn = (label) => label.touched; - if (this.isDropdownVariantEmbedded) { - filterFn = (label) => label.set; - } - this.handleDropdownClose(state.labels.filter(filterFn)); + const filterTouchedLabelsFn = (label) => label.touched; + const filterSetLabelsFn = (label) => label.set; + const labels = this.isDropdownVariantEmbedded + ? state.labels.filter(filterSetLabelsFn) + : state.labels.filter(filterTouchedLabelsFn); + this.handleDropdownClose(labels, state.labels.filter(filterTouchedLabelsFn)); } }, /** @@ -265,11 +269,11 @@ export default { isInDropdownContents ); }, - handleDropdownClose(labels) { - // Only emit label updates if there are any labels to update - // on UI. + handleDropdownClose(labels, touchedLabels) { + // Only emit label updates if there are any + // labels to update on UI. if (labels.length) this.$emit('updateSelectedLabels', labels); - this.$emit('onDropdownClose'); + this.$emit('onDropdownClose', touchedLabels); }, handleCollapsedValueClick() { this.$emit('toggleCollapse'); diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/getters.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/getters.js index d14f96720b7..ef3eedd9bb2 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/getters.js +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/getters.js @@ -8,9 +8,10 @@ import { DropdownVariant } from '../constants'; * @param {object} state */ export const dropdownButtonText = (state, getters) => { - const selectedLabels = getters.isDropdownVariantSidebar - ? state.labels.filter((label) => label.set) - : state.selectedLabels; + const selectedLabels = + getters.isDropdownVariantSidebar || getters.isDropdownVariantEmbedded + ? state.labels.filter((label) => label.set || label.indeterminate) + : state.selectedLabels; if (!selectedLabels.length) { return state.dropdownButtonText || __('Label'); diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js index 9e64f03fe84..43b23994cdf 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js @@ -2,8 +2,39 @@ import { isScopedLabel, scopedLabelKey } from '~/lib/utils/common_utils'; import { DropdownVariant } from '../constants'; import * as types from './mutation_types'; +const transformLabels = (labels, selectedLabels) => + labels.map((label) => { + const selectedLabel = selectedLabels.find(({ id }) => id === label.id); + + return { + ...label, + set: Boolean(selectedLabel?.set), + indeterminate: Boolean(selectedLabel?.indeterminate), + }; + }); + export default { [types.SET_INITIAL_STATE](state, props) { + // We need to ensure that selectedLabels have + // `set` & `indeterminate` properties defined. + if (props.selectedLabels?.length) { + props.selectedLabels.forEach((label) => { + /* eslint-disable no-param-reassign */ + if (label.set === undefined && label.indeterminate === undefined) { + label.set = true; + label.indeterminate = false; + } else if (label.set === undefined && label.indeterminate !== undefined) { + label.set = false; + } else if (label.set !== undefined && label.indeterminate === undefined) { + label.indeterminate = false; + } else { + label.set = false; + label.indeterminate = false; + } + /* eslint-enable no-param-reassign */ + }); + } + Object.assign(state, { ...props }); }, @@ -36,10 +67,7 @@ export default { // selectedLabels array. state.labelsFetchInProgress = false; state.labelsFetched = true; - state.labels = labels.map((label) => ({ - ...label, - set: state.selectedLabels.some((selectedLabel) => selectedLabel.id === label.id), - })); + state.labels = transformLabels(labels, state.selectedLabels); }, [types.RECEIVE_SET_LABELS_FAILURE](state) { state.labelsFetchInProgress = false; @@ -62,7 +90,8 @@ export default { const candidateLabel = state.labels.find((label) => labelId === label.id); if (candidateLabel) { candidateLabel.touched = true; - candidateLabel.set = !candidateLabel.set; + candidateLabel.set = candidateLabel.indeterminate ? true : !candidateLabel.set; + candidateLabel.indeterminate = false; } if (isScopedLabel(candidateLabel)) { @@ -80,9 +109,6 @@ export default { }, [types.UPDATE_LABELS_SET_STATE](state) { - state.labels = state.labels.map((label) => ({ - ...label, - set: state.selectedLabels.some((selectedLabel) => selectedLabel.id === label.id), - })); + state.labels = transformLabels(state.labels, state.selectedLabels); }, }; diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue index 0fa64a29b3a..5471cda0cc5 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue @@ -169,6 +169,9 @@ export default { setFocus() { this.$refs.header.focusInput(); }, + hideDropdown() { + this.$refs.dropdown.hide(); + }, showDropdown() { this.$refs.dropdown.show(); }, @@ -205,7 +208,7 @@ export default { :show-dropdown-contents-create-view="showDropdownContentsCreateView" :is-standalone="isStandalone" @toggleDropdownContentsCreateView="toggleDropdownContent" - @closeDropdown="$emit('closeDropdown')" + @closeDropdown="hideDropdown" @input="debouncedSearchKeyUpdate" @searchEnter="selectFirstItem" /> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue index 090bf9493bf..5f344ae4214 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue @@ -140,18 +140,19 @@ export default { <template> <div class="labels-select-contents-create js-labels-create"> <div class="dropdown-input"> - <gl-alert v-if="error" variant="danger" :dismissible="false" class="gl-mb-3"> + <gl-alert v-if="error" variant="danger" :dismissible="false" class="gl-mt-3"> {{ error }} </gl-alert> <gl-form-input v-model.trim="labelTitle" + class="gl-mt-3" :placeholder="__('Name new label')" :autofocus="true" data-testid="label-title-input" /> </div> <div class="dropdown-content gl-px-3"> - <div class="suggest-colors suggest-colors-dropdown gl-mt-0! gl-mb-3!"> + <div class="suggest-colors suggest-colors-dropdown gl-mt-0! gl-mb-3! gl-mb-0"> <gl-link v-for="(color, index) in suggestedColors" :key="index" @@ -169,7 +170,7 @@ export default { ></span> <gl-form-input v-model.trim="selectedColor" - class="gl-rounded-top-left-none gl-rounded-bottom-left-none" + class="gl-rounded-top-left-none gl-rounded-bottom-left-none gl-mb-2" :placeholder="__('Use custom color #FF0000')" data-testid="selected-color-text" /> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_header.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_header.vue index faad69732dd..aaddab43e2a 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_header.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_header.vue @@ -51,7 +51,7 @@ export default { <div data-testid="dropdown-header"> <div v-if="!isStandalone" - class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!" + class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3! gl-mb-0" data-testid="dropdown-header-title" > <gl-button @@ -72,6 +72,7 @@ export default { class="dropdown-header-button gl-p-0!" icon="close" data-testid="close-button" + data-qa-selector="close_labels_dropdown_button" @click="$emit('closeDropdown')" /> </div> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue index 57ee816c4c7..57e3ee4aaa5 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue @@ -92,7 +92,9 @@ export default { @click="handleCollapsedClick" > <gl-icon name="labels" /> - <span class="gl-font-base gl-line-height-24">{{ selectedLabels.length }}</span> + <span class="collapse-truncated-title gl-pt-2 gl-px-3 gl-font-sm">{{ + selectedLabels.length + }}</span> </div> <span v-if="!selectedLabels.length" diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue index c30ca5369ee..7b62f0cdb7d 100644 --- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue +++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue @@ -72,7 +72,7 @@ export default { </div> <pre - class="gl-p-0! gl-w-full gl-overflow-visible! gl-ml-11! gl-border-none! code highlight" + class="gl-p-0! gl-w-full gl-overflow-visible! gl-ml-11! gl-border-none! code highlight gl-line-height-normal" :class="firstLineClass" ><code><span :id="`LC${number}`" v-safe-html="formattedContent" :lang="language" class="line" data-testid="content"></span></code></pre> </div> diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/constants.js b/app/assets/javascripts/vue_shared/components/source_viewer/constants.js index bed6dd4d5c6..0d78530d878 100644 --- a/app/assets/javascripts/vue_shared/components/source_viewer/constants.js +++ b/app/assets/javascripts/vue_shared/components/source_viewer/constants.js @@ -134,3 +134,7 @@ export const BIDI_CHARS_CLASS_LIST = 'unicode-bidi has-tooltip'; export const BIDI_CHAR_TOOLTIP = __( 'Potentially unwanted character detected: Unicode BiDi Control', ); + +export const HLJS_COMMENT_SELECTOR = 'hljs-comment'; + +export const HLJS_ON_AFTER_HIGHLIGHT = 'after:highlight'; diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js new file mode 100644 index 00000000000..c9f7e5508be --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/index.js @@ -0,0 +1,13 @@ +import { HLJS_ON_AFTER_HIGHLIGHT } from '../constants'; +import wrapComments from './wrap_comments'; + +/** + * Registers our plugins for Highlight.js + * + * Plugin API: https://github.com/highlightjs/highlight.js/blob/main/docs/plugin-api.rst + * + * @param {Object} hljs - the Highlight.js instance. + */ +export const registerPlugins = (hljs) => { + hljs.addPlugin({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapComments }); +}; diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_comments.js b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_comments.js new file mode 100644 index 00000000000..5be92af5b55 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/source_viewer/plugins/wrap_comments.js @@ -0,0 +1,39 @@ +import { HLJS_COMMENT_SELECTOR } from '../constants'; + +const createWrapper = (content) => { + const span = document.createElement('span'); + span.className = HLJS_COMMENT_SELECTOR; + span.innerHTML = content; + return span.outerHTML; +}; + +/** + * Highlight.js plugin for wrapping multi-line comments in the `hljs-comment` class. + * This ensures that multi-line comments are rendered correctly in the GitLab UI. + * + * Plugin API: https://github.com/highlightjs/highlight.js/blob/main/docs/plugin-api.rst + * + * @param {Object} Result - an object that represents the highlighted result from Highlight.js + */ +export default (result) => { + if (!result.value.includes(HLJS_COMMENT_SELECTOR)) return; + + let wrapComment = false; + + // eslint-disable-next-line no-param-reassign + result.value = result.value // Highlight.js expects the result param to be mutated for plugins to work + .split('\n') + .map((lineContent) => { + const includesClosingTag = lineContent.includes('</span>'); + if (lineContent.includes(HLJS_COMMENT_SELECTOR) && !includesClosingTag) { + wrapComment = true; + return lineContent; + } + const line = wrapComment ? createWrapper(lineContent) : lineContent; + if (includesClosingTag) { + wrapComment = false; + } + return line; + }) + .join('\n'); +}; diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue index ed87a202b15..f819a9e5be2 100644 --- a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue @@ -5,6 +5,7 @@ import eventHub from '~/notes/event_hub'; import languageLoader from '~/content_editor/services/highlight_js_language_loader'; import { ROUGE_TO_HLJS_LANGUAGE_MAP, LINES_PER_CHUNK } from './constants'; import Chunk from './components/chunk.vue'; +import { registerPlugins } from './plugins/index'; /* * This component is optimized to handle source code with many lines of code by splitting source code into chunks of 70 lines of code, @@ -111,6 +112,7 @@ export default { let detectedLanguage = language; let highlightedContent; if (this.hljs) { + registerPlugins(this.hljs); if (!detectedLanguage) { const hljsHighlightAuto = this.hljs.highlightAuto(content); highlightedContent = hljsHighlightAuto.value; diff --git a/app/assets/javascripts/vue_shared/components/upload_dropzone/upload_dropzone.vue b/app/assets/javascripts/vue_shared/components/upload_dropzone/upload_dropzone.vue index f62bf686f85..424cab20c7e 100644 --- a/app/assets/javascripts/vue_shared/components/upload_dropzone/upload_dropzone.vue +++ b/app/assets/javascripts/vue_shared/components/upload_dropzone/upload_dropzone.vue @@ -149,7 +149,7 @@ export default { > <slot> <button - class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-3" + class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-4" type="button" @click="openFileUpload" > @@ -192,7 +192,7 @@ export default { <transition name="upload-dropzone-fade"> <div v-show="dragging && !enableDragBehavior" - class="card upload-dropzone-border upload-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white" + class="card upload-dropzone-border upload-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-4" > <div v-show="!isDragDataValid" class="mw-50 gl-text-center"> <slot name="invalid-drag-data-slot"> diff --git a/app/assets/javascripts/vue_shared/components/usage_quotas/usage_banner.vue b/app/assets/javascripts/vue_shared/components/usage_quotas/usage_banner.vue index bc5e0cf10dd..20a666509a4 100644 --- a/app/assets/javascripts/vue_shared/components/usage_quotas/usage_banner.vue +++ b/app/assets/javascripts/vue_shared/components/usage_quotas/usage_banner.vue @@ -34,7 +34,7 @@ export default { <div class="gl-display-flex gl-flex-direction-column gl-xs-mb-3 gl-min-w-0 gl-flex-grow-1"> <div v-if="$slots['left-primary-text']" - class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6 gl-min-w-0 gl-mb-4" + class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6 gl-min-w-0" > <slot name="left-primary-text"></slot> </div> diff --git a/app/assets/javascripts/vue_shared/components/user_popover/constants.js b/app/assets/javascripts/vue_shared/components/user_popover/constants.js new file mode 100644 index 00000000000..1d49aefd297 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/user_popover/constants.js @@ -0,0 +1 @@ +export const USER_POPOVER_DELAY = 200; diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue index ec7a7cd72ae..768cd005727 100644 --- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue +++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue @@ -14,12 +14,14 @@ import { glEmojiTag } from '~/emoji'; import createFlash from '~/flash'; import { followUser, unfollowUser } from '~/rest_api'; import UserAvatarImage from '../user_avatar/user_avatar_image.vue'; +import { USER_POPOVER_DELAY } from './constants'; const MAX_SKELETON_LINES = 4; export default { name: 'UserPopover', maxSkeletonLines: MAX_SKELETON_LINES, + USER_POPOVER_DELAY, components: { GlIcon, GlLink, @@ -48,6 +50,11 @@ export default { required: false, default: 'top', }, + show: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -133,25 +140,21 @@ export default { </script> <template> - <!-- 200ms delay so not every mouseover triggers Popover --> - <gl-popover :target="target" :delay="200" :placement="placement" boundary="viewport"> - <div class="gl-p-3 gl-line-height-normal gl-display-flex" data-testid="user-popover"> - <div - class="gl-p-2 flex-shrink-1 gl-display-flex gl-flex-direction-column align-items-center gl-w-70p" - > + <!-- Delayed so not every mouseover triggers Popover --> + <gl-popover + :css-classes="['gl-max-w-48']" + :show="show" + :target="target" + :delay="$options.USER_POPOVER_DELAY" + :placement="placement" + boundary="viewport" + triggers="hover focus manual" + > + <div class="gl-py-3 gl-line-height-normal gl-display-flex" data-testid="user-popover"> + <div class="gl-mr-4 gl-flex-shrink-0"> <user-avatar-image :img-src="user.avatarUrl" :size="64" css-classes="gl-m-0!" /> - <div v-if="shouldRenderToggleFollowButton" class="gl-mt-3"> - <gl-button - :variant="toggleFollowButtonVariant" - :loading="toggleFollowLoading" - size="small" - data-testid="toggle-follow-button" - @click="toggleFollow" - >{{ toggleFollowButtonText }}</gl-button - > - </div> </div> - <div class="gl-w-full gl-min-w-0 gl-word-break-word"> + <div class="gl-w-full gl-word-break-word gl-display-flex gl-align-items-center"> <template v-if="userIsLoading"> <gl-skeleton-loader :lines="$options.maxSkeletonLines" @@ -161,7 +164,7 @@ export default { /> </template> <template v-else> - <div class="gl-mb-3"> + <div> <h5 class="gl-m-0"> <user-name-with-status :name="user.name" @@ -170,42 +173,64 @@ export default { /> </h5> <span class="gl-text-gray-500">@{{ user.username }}</span> - </div> - <div class="gl-text-gray-500"> - <div v-if="user.bio" class="gl-display-flex gl-mb-2"> - <gl-icon name="profile" class="gl-flex-shrink-0" /> - <span ref="bio" class="gl-ml-2">{{ user.bio }}</span> + <div v-if="shouldRenderToggleFollowButton" class="gl-mt-3"> + <gl-button + :variant="toggleFollowButtonVariant" + :loading="toggleFollowLoading" + size="small" + data-testid="toggle-follow-button" + @click="toggleFollow" + >{{ toggleFollowButtonText }}</gl-button + > </div> - <div v-if="user.workInformation" class="gl-display-flex gl-mb-2"> - <gl-icon name="work" class="gl-flex-shrink-0" /> - <span ref="workInformation" class="gl-ml-2">{{ user.workInformation }}</span> - </div> - <div v-if="user.location" class="gl-display-flex gl-mb-2"> - <gl-icon name="location" class="gl-flex-shrink-0" /> - <span class="gl-ml-2">{{ user.location }}</span> - </div> - <div - v-if="user.localTime && !user.bot" - class="gl-display-flex gl-mb-2" - data-testid="user-popover-local-time" - > - <gl-icon name="clock" class="gl-flex-shrink-0" /> - <span class="gl-ml-2">{{ user.localTime }}</span> - </div> - </div> - <div v-if="statusHtml" class="gl-mb-2" data-testid="user-popover-status"> - <span v-safe-html:[$options.safeHtmlConfig]="statusHtml"></span> - </div> - <div v-if="user.bot && user.websiteUrl" class="gl-text-blue-500"> - <gl-icon name="question" /> - <gl-link data-testid="user-popover-bot-docs-link" :href="user.websiteUrl"> - <gl-sprintf :message="__('Learn more about %{username}')"> - <template #username>{{ user.name }}</template> - </gl-sprintf> - </gl-link> </div> </template> </div> </div> + <div class="gl-mt-2 gl-w-full gl-word-break-word"> + <template v-if="userIsLoading"> + <gl-skeleton-loader + :lines="$options.maxSkeletonLines" + preserve-aspect-ratio="none" + equal-width-lines + :height="24" + /> + </template> + <template v-else> + <div class="gl-text-gray-500"> + <div v-if="user.bio" class="gl-display-flex gl-mb-2"> + <gl-icon name="profile" class="gl-flex-shrink-0" /> + <span ref="bio" class="gl-ml-2">{{ user.bio }}</span> + </div> + <div v-if="user.workInformation" class="gl-display-flex gl-mb-2"> + <gl-icon name="work" class="gl-flex-shrink-0" /> + <span ref="workInformation" class="gl-ml-2">{{ user.workInformation }}</span> + </div> + <div v-if="user.location" class="gl-display-flex gl-mb-2"> + <gl-icon name="location" class="gl-flex-shrink-0" /> + <span class="gl-ml-2">{{ user.location }}</span> + </div> + <div + v-if="user.localTime && !user.bot" + class="gl-display-flex gl-mb-2" + data-testid="user-popover-local-time" + > + <gl-icon name="clock" class="gl-flex-shrink-0" /> + <span class="gl-ml-2">{{ user.localTime }}</span> + </div> + </div> + <div v-if="statusHtml" class="gl-mb-2" data-testid="user-popover-status"> + <span v-safe-html:[$options.safeHtmlConfig]="statusHtml"></span> + </div> + <div v-if="user.bot && user.websiteUrl" class="gl-text-blue-500"> + <gl-icon name="question" /> + <gl-link data-testid="user-popover-bot-docs-link" :href="user.websiteUrl"> + <gl-sprintf :message="__('Learn more about %{username}')"> + <template #username>{{ user.name }}</template> + </gl-sprintf> + </gl-link> + </div> + </template> + </div> </gl-popover> </template> diff --git a/app/assets/javascripts/vue_shared/components/web_ide_link.vue b/app/assets/javascripts/vue_shared/components/web_ide_link.vue index 15f84e48179..cac0d5a45c9 100644 --- a/app/assets/javascripts/vue_shared/components/web_ide_link.vue +++ b/app/assets/javascripts/vue_shared/components/web_ide_link.vue @@ -307,7 +307,7 @@ export default { <actions-button :actions="actions" :selected-key="selection" - :variant="isBlob ? 'info' : 'default'" + :variant="isBlob ? 'confirm' : 'default'" :category="isBlob ? 'primary' : 'secondary'" @select="select" /> diff --git a/app/assets/javascripts/vue_shared/constants.js b/app/assets/javascripts/vue_shared/constants.js index 3ebeec4a50b..14328b1f25f 100644 --- a/app/assets/javascripts/vue_shared/constants.js +++ b/app/assets/javascripts/vue_shared/constants.js @@ -71,10 +71,14 @@ export const AVATAR_SHAPE_OPTION_RECT = 'rect'; export const confidentialityInfoText = (workspaceType, issuableType) => sprintf( __( - 'Only %{workspaceType} members with at least Reporter role can view or be notified about this %{issuableType}.', + 'Only %{workspaceType} members with %{permissions} can view or be notified about this %{issuableType}.', ), { workspaceType: workspaceType === WorkspaceType.project ? __('project') : __('group'), issuableType: issuableType === IssuableType.Issue ? __('issue') : __('epic'), + permissions: + issuableType === IssuableType.Issue + ? __('at least the Reporter role, the author, and assignees') + : __('at least the Reporter role'), }, ); diff --git a/app/assets/javascripts/vue_shared/issuable/create/components/issuable_create_root.vue b/app/assets/javascripts/vue_shared/issuable/create/components/issuable_create_root.vue index f4cbaba9313..033bb8c3885 100644 --- a/app/assets/javascripts/vue_shared/issuable/create/components/issuable_create_root.vue +++ b/app/assets/javascripts/vue_shared/issuable/create/components/issuable_create_root.vue @@ -29,7 +29,6 @@ export default { <template> <div class="issuable-create-container"> <slot name="title"></slot> - <hr class="gl-mt-0" /> <issuable-form :description-preview-path="descriptionPreviewPath" :description-help-path="descriptionHelpPath" diff --git a/app/assets/javascripts/vue_shared/issuable/create/components/issuable_form.vue b/app/assets/javascripts/vue_shared/issuable/create/components/issuable_form.vue index 0758cb507e9..89eecea5239 100644 --- a/app/assets/javascripts/vue_shared/issuable/create/components/issuable_form.vue +++ b/app/assets/javascripts/vue_shared/issuable/create/components/issuable_form.vue @@ -51,9 +51,9 @@ export default { <template> <gl-form class="common-note-form gfm-form" @submit.stop.prevent> - <div data-testid="issuable-title" class="form-group row"> - <label for="issuable-title" class="col-form-label col-sm-2">{{ __('Title') }}</label> - <div class="col-sm-10"> + <div data-testid="issuable-title" class="row"> + <label for="issuable-title" class="col-12 gl-mb-0">{{ __('Title') }}</label> + <div class="col-12"> <gl-form-group :description="__('Maximum of 255 characters')"> <gl-form-input id="issuable-title" @@ -66,10 +66,8 @@ export default { </div> </div> <div data-testid="issuable-description" class="form-group row"> - <label for="issuable-description" class="col-form-label col-sm-2">{{ - __('Description') - }}</label> - <div class="col-sm-10"> + <label for="issuable-description" class="col-12">{{ __('Description') }}</label> + <div class="col-12"> <markdown-field :markdown-preview-path="descriptionPreviewPath" :markdown-docs-path="descriptionHelpPath" @@ -91,37 +89,28 @@ export default { </markdown-field> </div> </div> - <div class="row"> - <div class="col-lg-6"> - <div data-testid="issuable-labels" class="form-group row"> - <label for="issuable-labels" class="col-form-label col-md-2 col-lg-4">{{ - __('Labels') - }}</label> - <div class="col-md-8 col-sm-10"> - <div class="issuable-form-select-holder"> - <labels-select - :allow-label-edit="true" - :allow-label-create="true" - :allow-multiselect="true" - :allow-scoped-labels="true" - :labels-fetch-path="labelsFetchPath" - :labels-manage-path="labelsManagePath" - :selected-labels="selectedLabels" - :labels-list-title="__('Select label')" - :footer-create-label-title="__('Create project label')" - :footer-manage-label-title="__('Manage project labels')" - :variant="$options.LabelSelectVariant.Embedded" - @updateSelectedLabels="handleUpdateSelectedLabels" - /> - </div> - </div> + <div data-testid="issuable-labels" class="form-group row"> + <label for="issuable-labels" class="col-12">{{ __('Labels') }}</label> + <div class="col-12"> + <div class="issuable-form-select-holder"> + <labels-select + :allow-label-edit="true" + :allow-label-create="true" + :allow-multiselect="true" + :allow-scoped-labels="true" + :labels-fetch-path="labelsFetchPath" + :labels-manage-path="labelsManagePath" + :selected-labels="selectedLabels" + :labels-list-title="__('Select label')" + :footer-create-label-title="__('Create project label')" + :footer-manage-label-title="__('Manage project labels')" + :variant="$options.LabelSelectVariant.Embedded" + @updateSelectedLabels="handleUpdateSelectedLabels" + /> </div> </div> </div> - <div - data-testid="issuable-create-actions" - class="footer-block row-content-block gl-display-flex" - > + <div data-testid="issuable-create-actions" class="footer-block gl-display-flex gl-mt-6"> <slot name="actions" :issuable-title="issuableTitle" diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue index 6453290f6ea..a9f8caa3e1f 100644 --- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue +++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue @@ -23,6 +23,11 @@ export default { }, mixins: [timeagoMixin], props: { + hasScopedLabelsFeature: { + type: Boolean, + required: false, + default: false, + }, issuableSymbol: { type: String, required: true, @@ -132,7 +137,7 @@ export default { return Boolean(this.$slots[slotName]); }, scopedLabel(label) { - return isScopedLabel(label); + return this.hasScopedLabelsFeature && isScopedLabel(label); }, labelTitle(label) { return label.title || label.name; diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue index 8b293b2e9f6..8fbf0bb10a0 100644 --- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue +++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue @@ -1,10 +1,5 @@ <script> -import { - GlAlert, - GlKeysetPagination, - GlDeprecatedSkeletonLoading as GlSkeletonLoading, - GlPagination, -} from '@gitlab/ui'; +import { GlAlert, GlKeysetPagination, GlSkeletonLoader, GlPagination } from '@gitlab/ui'; import { uniqueId } from 'lodash'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { updateHistory, setUrlParams } from '~/lib/utils/url_utility'; @@ -27,7 +22,7 @@ export default { components: { GlAlert, GlKeysetPagination, - GlSkeletonLoading, + GlSkeletonLoader, IssuableTabs, FilteredSearchBar, IssuableItem, @@ -138,6 +133,11 @@ export default { required: false, default: 2, }, + hasScopedLabelsFeature: { + type: Boolean, + required: false, + default: false, + }, labelFilterParam: { type: String, required: false, @@ -307,7 +307,7 @@ export default { </issuable-bulk-edit-sidebar> <ul v-if="issuablesLoading" class="content-list"> <li v-for="n in skeletonItemCount" :key="n" class="issue gl-px-5! gl-py-5!"> - <gl-skeleton-loading /> + <gl-skeleton-loader /> </li> </ul> <template v-else> @@ -325,6 +325,7 @@ export default { :class="{ 'gl-cursor-grab': isManualOrdering }" data-qa-selector="issuable_container" :data-qa-issuable-title="issuable.title" + :has-scoped-labels-feature="hasScopedLabelsFeature" :issuable-symbol="issuableSymbol" :issuable="issuable" :label-filter-param="labelFilterParam" diff --git a/app/assets/javascripts/vue_shared/issuable/list/constants.js b/app/assets/javascripts/vue_shared/issuable/list/constants.js index c6dce6a51c2..be9afc0610d 100644 --- a/app/assets/javascripts/vue_shared/issuable/list/constants.js +++ b/app/assets/javascripts/vue_shared/issuable/list/constants.js @@ -46,6 +46,13 @@ export const AvailableSortOptions = [ }, ]; +export const IssuableTypes = { + Issue: 'ISSUE', + Incident: 'INCIDENT', + TestCase: 'TEST_CASE', + Requirement: 'REQUIREMENT', +}; + export const DEFAULT_PAGE_SIZE = 20; export const DEFAULT_SKELETON_COUNT = 5; diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_body.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_body.vue index 05dc1650379..5eb3da3c62e 100644 --- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_body.vue +++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_body.vue @@ -22,10 +22,6 @@ export default { type: Object, required: true, }, - statusBadgeClass: { - type: String, - required: true, - }, statusIcon: { type: String, required: true, @@ -162,7 +158,6 @@ export default { <template v-else> <issuable-title :issuable="issuable" - :status-badge-class="statusBadgeClass" :status-icon="statusIcon" :enable-edit="enableEdit" @edit-issuable="$emit('edit-issuable', $event)" diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue index 649dbd6576b..f035795a045 100644 --- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue +++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue @@ -40,11 +40,6 @@ export default { required: false, default: '', }, - statusBadgeClass: { - type: String, - required: false, - default: '', - }, statusIcon: { type: String, required: false, @@ -113,12 +108,7 @@ export default { <template> <div class="detail-page-header"> <div class="detail-page-header-body"> - <gl-badge - data-testid="status" - class="issuable-status-badge gl-mr-3" - :class="statusBadgeClass" - :variant="badgeVariant" - > + <gl-badge class="issuable-status-badge gl-mr-3" :variant="badgeVariant"> <gl-icon v-if="statusIcon" :name="statusIcon" :class="statusIconClass" /> <span class="gl-display-none gl-sm-display-block"><slot name="status-badge"></slot></span> </gl-badge> diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_show_root.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_show_root.vue index c165ee91c59..7ed93c042f8 100644 --- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_show_root.vue +++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_show_root.vue @@ -17,11 +17,6 @@ export default { type: Object, required: true, }, - statusBadgeClass: { - type: String, - required: false, - default: '', - }, statusIcon: { type: String, required: false, @@ -108,7 +103,6 @@ export default { <div class="issuable-show-container" data-qa-selector="issuable_show_container"> <issuable-header :issuable-state="issuable.state" - :status-badge-class="statusBadgeClass" :status-icon="statusIcon" :status-icon-class="statusIconClass" :blocked="issuable.blocked" @@ -127,7 +121,6 @@ export default { <issuable-body :issuable="issuable" - :status-badge-class="statusBadgeClass" :status-icon="statusIcon" :status-icon-class="statusIconClass" :enable-edit="enableEdit" diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue index 47f05a2cee2..3d7c71ce974 100644 --- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue +++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue @@ -1,12 +1,14 @@ <script> import { GlIcon, + GlBadge, GlButton, GlIntersectionObserver, GlTooltipDirective, GlSafeHtmlDirective as SafeHtml, } from '@gitlab/ui'; import { __ } from '~/locale'; +import { IssuableStates } from '~/vue_shared/issuable/list/constants'; export default { i18n: { @@ -14,6 +16,7 @@ export default { }, components: { GlIcon, + GlBadge, GlButton, GlIntersectionObserver, }, @@ -26,10 +29,6 @@ export default { type: Object, required: true, }, - statusBadgeClass: { - type: String, - required: true, - }, statusIcon: { type: String, required: true, @@ -44,6 +43,11 @@ export default { stickyTitleVisible: false, }; }, + computed: { + badgeVariant() { + return this.issuable.state === IssuableStates.Opened ? 'success' : 'info'; + }, + }, methods: { handleTitleAppear() { this.stickyTitleVisible = false; @@ -60,7 +64,7 @@ export default { <div class="title-container"> <h1 v-safe-html="issuable.titleHtml || issuable.title" - class="title qa-title" + class="title qa-title gl-font-size-h-display" dir="auto" data-testid="title" ></h1> @@ -84,14 +88,12 @@ export default { <div class="issue-sticky-header-text gl-display-flex gl-align-items-center gl-mx-auto gl-px-5" > - <p - data-testid="status" - class="issuable-status-box status-box gl-white-space-nowrap gl-my-0" - :class="statusBadgeClass" - > - <gl-icon :name="statusIcon" class="gl-display-block d-sm-none gl-h-6!" /> - <span class="gl-display-none d-sm-block"><slot name="status-badge"></slot></span> - </p> + <gl-badge class="gl-white-space-nowrap gl-mr-3" :variant="badgeVariant"> + <gl-icon v-if="statusIcon" class="gl-sm-display-none" :name="statusIcon" /> + <span class="gl-display-none gl-sm-display-block"> + <slot name="status-badge"></slot> + </span> + </gl-badge> <p class="gl-font-weight-bold gl-overflow-hidden gl-white-space-nowrap gl-text-overflow-ellipsis gl-my-0" :title="issuable.title" diff --git a/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue b/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue index 1f3cc663848..8e9b8ef3e6f 100644 --- a/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue +++ b/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue @@ -130,11 +130,7 @@ export default { <slot name="extra-description"></slot> </div> <div class="col-lg-9"> - <gl-breadcrumb v-if="breadcrumbs" :items="breadcrumbs"> - <template #separator> - <gl-icon name="chevron-right" :size="8" /> - </template> - </gl-breadcrumb> + <gl-breadcrumb v-if="breadcrumbs" :items="breadcrumbs" /> <legacy-container :key="activePanel.name" :selector="activePanel.selector" /> </div> </div> diff --git a/app/assets/javascripts/whats_new/components/app.vue b/app/assets/javascripts/whats_new/components/app.vue index b74dba686ad..0c55cc2f8a6 100644 --- a/app/assets/javascripts/whats_new/components/app.vue +++ b/app/assets/javascripts/whats_new/components/app.vue @@ -33,7 +33,7 @@ export default { this.fetchFreshItems(); const body = document.querySelector('body'); - const namespaceId = body.getAttribute('data-namespace-id'); + const { namespaceId } = body.dataset; this.track('click_whats_new_drawer', { label: 'namespace_id', value: namespaceId }); }, diff --git a/app/assets/javascripts/whats_new/store/actions.js b/app/assets/javascripts/whats_new/store/actions.js index f209f145884..d3da988e3ed 100644 --- a/app/assets/javascripts/whats_new/store/actions.js +++ b/app/assets/javascripts/whats_new/store/actions.js @@ -1,5 +1,6 @@ import axios from '~/lib/utils/axios_utils'; import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils'; +import { joinPaths } from '~/lib/utils/url_utility'; import { STORAGE_KEY } from '../utils/notification'; import * as types from './mutation_types'; @@ -23,7 +24,7 @@ export default { const v = versionDigest; return axios - .get('/-/whats_new', { + .get(joinPaths('/', gon.relative_url_root || '', '/-/whats_new'), { params: { page, v, diff --git a/app/assets/javascripts/whats_new/utils/notification.js b/app/assets/javascripts/whats_new/utils/notification.js index 66ee3b1a971..41aff202f48 100644 --- a/app/assets/javascripts/whats_new/utils/notification.js +++ b/app/assets/javascripts/whats_new/utils/notification.js @@ -1,6 +1,6 @@ export const STORAGE_KEY = 'display-whats-new-notification'; -export const getVersionDigest = (appEl) => appEl.getAttribute('data-version-digest'); +export const getVersionDigest = (appEl) => appEl.dataset.versionDigest; export const setNotification = (appEl) => { const versionDigest = getVersionDigest(appEl); diff --git a/app/assets/javascripts/work_items/components/item_state.vue b/app/assets/javascripts/work_items/components/item_state.vue index 0b6c1a75bb2..69670d3471c 100644 --- a/app/assets/javascripts/work_items/components/item_state.vue +++ b/app/assets/javascripts/work_items/components/item_state.vue @@ -49,14 +49,28 @@ export default { </script> <template> - <gl-form-group :label="$options.i18n.status" :label-for="$options.labelId"> + <gl-form-group + :label="$options.i18n.status" + :label-for="$options.labelId" + label-cols="3" + label-cols-lg="2" + label-class="gl-pb-0!" + class="gl-align-items-center" + > <gl-form-select :id="$options.labelId" :value="state" :options="$options.states" :disabled="loading" - class="gl-w-auto" + class="gl-w-auto hide-select-decoration" @change="setState" /> </gl-form-group> </template> + +<style> +.hide-select-decoration:not(:focus, :hover) { + background-image: none; + box-shadow: none; +} +</style> diff --git a/app/assets/javascripts/work_items/components/item_title.vue b/app/assets/javascripts/work_items/components/item_title.vue index 232510b108d..ce2fa158596 100644 --- a/app/assets/javascripts/work_items/components/item_title.vue +++ b/app/assets/javascripts/work_items/components/item_title.vue @@ -40,18 +40,18 @@ export default { <template> <h2 - class="gl-font-weight-normal gl-sm-font-weight-bold gl-my-5 gl-display-inline-block" + class="gl-font-weight-normal gl-sm-font-weight-bold gl-my-5 gl-w-full" :class="{ 'gl-cursor-not-allowed': disabled }" aria-labelledby="item-title" > - <span + <div id="item-title" ref="titleEl" role="textbox" :aria-label="__('Title')" :data-placeholder="placeholder" :contenteditable="!disabled" - class="gl-pseudo-placeholder" + class="gl-pseudo-placeholder gl-px-4 gl-py-3 gl-ml-n4 gl-border gl-border-white gl-hover-border-gray-200 gl-rounded-base" @blur="handleBlur" @keyup="handleInput" @keydown.enter.exact="handleSubmit" @@ -59,7 +59,8 @@ export default { @keydown.meta.u.prevent @keydown.ctrl.b.prevent @keydown.meta.b.prevent - >{{ title }}</span > + {{ title }} + </div> </h2> </template> diff --git a/app/assets/javascripts/work_items/components/update_work_item.js b/app/assets/javascripts/work_items/components/update_work_item.js new file mode 100644 index 00000000000..fc395fa5be3 --- /dev/null +++ b/app/assets/javascripts/work_items/components/update_work_item.js @@ -0,0 +1,23 @@ +import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql'; +import updateWorkItemTaskMutation from '../graphql/update_work_item_task.mutation.graphql'; + +export function getUpdateWorkItemMutation({ input, workItemParentId }) { + let mutation = updateWorkItemMutation; + + const variables = { + input, + }; + + if (workItemParentId) { + mutation = updateWorkItemTaskMutation; + variables.input = { + id: workItemParentId, + taskData: input, + }; + } + + return { + mutation, + variables, + }; +} diff --git a/app/assets/javascripts/work_items/components/work_item_assignees.vue b/app/assets/javascripts/work_items/components/work_item_assignees.vue new file mode 100644 index 00000000000..4d1c171772e --- /dev/null +++ b/app/assets/javascripts/work_items/components/work_item_assignees.vue @@ -0,0 +1,111 @@ +<script> +import { GlTokenSelector, GlIcon, GlAvatar, GlLink } from '@gitlab/ui'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import localUpdateWorkItemMutation from '../graphql/local_update_work_item.mutation.graphql'; + +function isClosingIcon(el) { + return el?.classList.contains('gl-token-close'); +} + +export default { + components: { + GlTokenSelector, + GlIcon, + GlAvatar, + GlLink, + }, + props: { + workItemId: { + type: String, + required: true, + }, + assignees: { + type: Array, + required: true, + }, + }, + data() { + return { + isEditing: false, + localAssignees: this.assignees.map((assignee) => ({ + ...assignee, + class: 'gl-bg-transparent!', + })), + }; + }, + computed: { + assigneeIds() { + return this.localAssignees.map((assignee) => assignee.id); + }, + assigneeListEmpty() { + return this.assignees.length === 0; + }, + containerClass() { + return !this.isEditing ? 'gl-shadow-none! gl-bg-transparent!' : ''; + }, + }, + methods: { + getUserId(id) { + return getIdFromGraphQLId(id); + }, + setAssignees(e) { + if (isClosingIcon(e.relatedTarget) || !this.isEditing) return; + this.isEditing = false; + this.$apollo.mutate({ + mutation: localUpdateWorkItemMutation, + variables: { + input: { + id: this.workItemId, + assigneeIds: this.assigneeIds, + }, + }, + }); + }, + async focusTokenSelector() { + this.isEditing = true; + await this.$nextTick(); + this.$refs.tokenSelector.focusTextInput(); + }, + }, +}; +</script> + +<template> + <div class="gl-display-flex gl-mb-4 work-item-assignees gl-relative"> + <span class="gl-font-weight-bold gl-w-15 gl-pt-2" data-testid="assignees-title">{{ + __('Assignee(s)') + }}</span> + <gl-token-selector + ref="tokenSelector" + v-model="localAssignees" + hide-dropdown-with-no-items + :container-class="containerClass" + class="gl-w-full gl-border gl-border-white gl-hover-border-gray-200 gl-rounded-base" + @token-remove="focusTokenSelector" + @focus="isEditing = true" + @blur="setAssignees" + > + <template #empty-placeholder> + <div + class="add-assignees gl-min-w-fit-content gl-display-flex gl-align-items-center gl-text-gray-300 gl-pr-4 gl-top-2" + data-testid="empty-state" + > + <gl-icon name="profile" /> + <span class="gl-ml-2">{{ __('Add assignees') }}</span> + </div> + </template> + <template #token-content="{ token }"> + <gl-link + :href="token.webUrl" + :title="token.name" + :data-user-id="getUserId(token.id)" + data-placement="top" + class="gl-text-decoration-none! gl-text-body! gl-display-flex gl-md-display-inline-flex! gl-align-items-center js-user-link" + > + <gl-avatar :size="24" :src="token.avatarUrl" /> + <span class="gl-pl-2">{{ token.name }}</span> + </gl-link> + </template> + </gl-token-selector> + </div> +</template> diff --git a/app/assets/javascripts/work_items/components/work_item_description.vue b/app/assets/javascripts/work_items/components/work_item_description.vue new file mode 100644 index 00000000000..5a85fcdd7ac --- /dev/null +++ b/app/assets/javascripts/work_items/components/work_item_description.vue @@ -0,0 +1,234 @@ +<script> +import { GlButton, GlFormGroup, GlSafeHtmlDirective } from '@gitlab/ui'; +import * as Sentry from '@sentry/browser'; +import { helpPagePath } from '~/helpers/help_page_helper'; +import { getDraft, clearDraft, updateDraft } from '~/lib/utils/autosave'; +import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal'; +import { __, s__ } from '~/locale'; +import Tracking from '~/tracking'; +import MarkdownField from '~/vue_shared/components/markdown/field.vue'; +import workItemQuery from '../graphql/work_item.query.graphql'; +import updateWorkItemWidgetsMutation from '../graphql/update_work_item_widgets.mutation.graphql'; +import { i18n, TRACKING_CATEGORY_SHOW, WIDGET_TYPE_DESCRIPTION } from '../constants'; + +export default { + directives: { + SafeHtml: GlSafeHtmlDirective, + }, + components: { + GlButton, + GlFormGroup, + MarkdownField, + }, + mixins: [Tracking.mixin()], + inject: ['fullPath'], + props: { + workItemId: { + type: String, + required: true, + }, + }, + markdownDocsPath: helpPagePath('user/markdown'), + data() { + return { + workItem: {}, + isEditing: false, + isSubmitting: false, + isSubmittingWithKeydown: false, + desc: '', + }; + }, + apollo: { + workItem: { + query: workItemQuery, + variables() { + return { + id: this.workItemId, + }; + }, + skip() { + return !this.workItemId; + }, + error() { + this.error = i18n.fetchError; + }, + }, + }, + computed: { + autosaveKey() { + return this.workItemId; + }, + canEdit() { + return this.workItem?.userPermissions?.updateWorkItem; + }, + tracking() { + return { + category: TRACKING_CATEGORY_SHOW, + label: 'item_description', + property: `type_${this.workItemType}`, + }; + }, + descriptionHtml() { + return this.workItemDescription?.descriptionHtml; + }, + descriptionText: { + get() { + return this.desc; + }, + set(desc) { + this.desc = desc; + }, + }, + workItemDescription() { + return this.workItem?.widgets?.find((widget) => widget.type === WIDGET_TYPE_DESCRIPTION); + }, + workItemType() { + return this.workItem?.workItemType?.name; + }, + markdownPreviewPath() { + return `${gon.relative_url_root || ''}/${this.fullPath}/preview_markdown?target_type=${ + this.workItemType + }`; + }, + }, + methods: { + async startEditing() { + this.isEditing = true; + + this.desc = getDraft(this.autosaveKey) || this.workItemDescription?.description || ''; + + await this.$nextTick(); + + this.$refs.textarea.focus(); + }, + async cancelEditing() { + const isDirty = this.desc !== this.workItemDescription?.description; + + if (isDirty) { + const msg = s__('WorkItem|Are you sure you want to cancel editing?'); + + const confirmed = await confirmAction(msg, { + primaryBtnText: __('Discard changes'), + cancelBtnText: __('Continue editing'), + }); + + if (!confirmed) { + return; + } + } + + this.isEditing = false; + clearDraft(this.autosaveKey); + }, + onInput() { + if (this.isSubmittingWithKeydown) { + return; + } + + updateDraft(this.autosaveKey, this.desc); + }, + async updateWorkItem(event) { + if (event.key) { + this.isSubmittingWithKeydown = true; + } + + this.isSubmitting = true; + + try { + this.track('updated_description'); + + const { + data: { workItemUpdateWidgets }, + } = await this.$apollo.mutate({ + mutation: updateWorkItemWidgetsMutation, + variables: { + input: { + id: this.workItem.id, + descriptionWidget: { + description: this.descriptionText, + }, + }, + }, + }); + + if (workItemUpdateWidgets.errors?.length) { + throw new Error(workItemUpdateWidgets.errors[0]); + } + + this.isEditing = false; + clearDraft(this.autosaveKey); + } catch (error) { + this.$emit('error', error.message); + Sentry.captureException(error); + } + + this.isSubmitting = false; + }, + }, +}; +</script> + +<template> + <gl-form-group + v-if="isEditing" + class="gl-pt-5 gl-mb-5 gl-mt-0! gl-border-t! gl-border-b" + :label="__('Description')" + label-for="work-item-description" + label-class="gl-float-left" + > + <div class="gl-display-flex gl-justify-content-flex-end"> + <gl-button class="gl-ml-auto" data-testid="cancel" @click="cancelEditing">{{ + __('Cancel') + }}</gl-button> + <gl-button + class="js-no-auto-disable gl-ml-4" + category="primary" + variant="confirm" + :loading="isSubmitting" + data-testid="save-description" + @click="updateWorkItem" + >{{ __('Save') }}</gl-button + > + </div> + <markdown-field + can-attach-file + :textarea-value="descriptionText" + :is-submitting="isSubmitting" + :markdown-preview-path="markdownPreviewPath" + :markdown-docs-path="$options.markdownDocsPath" + class="gl-p-3 bordered-box" + > + <template #textarea> + <textarea + id="work-item-description" + ref="textarea" + v-model="descriptionText" + :disabled="isSubmitting" + class="note-textarea js-gfm-input js-autosize markdown-area" + dir="auto" + data-supports-quick-actions="false" + :aria-label="__('Description')" + :placeholder="__('Write a comment or drag your files here…')" + @keydown.meta.enter="updateWorkItem" + @keydown.ctrl.enter="updateWorkItem" + @keydown.exact.esc.stop="cancelEditing" + @input="onInput" + ></textarea> + </template> + </markdown-field> + </gl-form-group> + <div v-else class="gl-pt-5 gl-mb-5 gl-border-t gl-border-b"> + <div class="gl-display-flex"> + <h3 class="gl-font-base gl-mt-0">{{ __('Description') }}</h3> + <gl-button + v-if="canEdit" + class="gl-ml-auto" + icon="pencil" + data-testid="edit-description" + @click="startEditing" + >{{ __('Edit') }}</gl-button + > + </div> + <div v-safe-html="descriptionHtml" class="md gl-mb-5"></div> + </div> +</template> diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue index 4222ffe42fe..5272df2d53f 100644 --- a/app/assets/javascripts/work_items/components/work_item_detail.vue +++ b/app/assets/javascripts/work_items/components/work_item_detail.vue @@ -1,27 +1,45 @@ <script> import { GlAlert, GlSkeletonLoader } from '@gitlab/ui'; -import { i18n } from '../constants'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { + i18n, + WIDGET_TYPE_ASSIGNEE, + WIDGET_TYPE_DESCRIPTION, + WIDGET_TYPE_WEIGHT, +} from '../constants'; import workItemQuery from '../graphql/work_item.query.graphql'; import workItemTitleSubscription from '../graphql/work_item_title.subscription.graphql'; import WorkItemActions from './work_item_actions.vue'; import WorkItemState from './work_item_state.vue'; import WorkItemTitle from './work_item_title.vue'; +import WorkItemDescription from './work_item_description.vue'; +import WorkItemAssignees from './work_item_assignees.vue'; +import WorkItemWeight from './work_item_weight.vue'; export default { i18n, components: { GlAlert, GlSkeletonLoader, + WorkItemAssignees, WorkItemActions, + WorkItemDescription, WorkItemTitle, WorkItemState, + WorkItemWeight, }, + mixins: [glFeatureFlagMixin()], props: { workItemId: { type: String, required: false, default: null, }, + workItemParentId: { + type: String, + required: false, + default: null, + }, }, data() { return { @@ -66,6 +84,18 @@ export default { canDelete() { return this.workItem?.userPermissions?.deleteWorkItem; }, + workItemsMvc2Enabled() { + return this.glFeatures.workItemsMvc2; + }, + hasDescriptionWidget() { + return this.workItem?.widgets?.find((widget) => widget.type === WIDGET_TYPE_DESCRIPTION); + }, + workItemAssignees() { + return this.workItem?.mockWidgets?.find((widget) => widget.type === WIDGET_TYPE_ASSIGNEE); + }, + workItemWeight() { + return this.workItem?.mockWidgets?.find((widget) => widget.type === WIDGET_TYPE_WEIGHT); + }, }, }; </script> @@ -83,27 +113,40 @@ export default { </gl-skeleton-loader> </div> <template v-else> - <div class="gl-display-flex"> + <div class="gl-display-flex gl-align-items-start"> <work-item-title :work-item-id="workItem.id" :work-item-title="workItem.title" :work-item-type="workItemType" + :work-item-parent-id="workItemParentId" class="gl-mr-5" @error="error = $event" - @updated="$emit('workItemUpdated')" /> <work-item-actions :work-item-id="workItem.id" :can-delete="canDelete" - class="gl-ml-auto gl-mt-5" + class="gl-ml-auto gl-mt-6" @deleteWorkItem="$emit('deleteWorkItem')" @error="error = $event" /> </div> + <template v-if="workItemsMvc2Enabled"> + <work-item-assignees + v-if="workItemAssignees" + :work-item-id="workItem.id" + :assignees="workItemAssignees.nodes" + /> + <work-item-weight v-if="workItemWeight" :weight="workItemWeight.weight" /> + </template> <work-item-state :work-item="workItem" + :work-item-parent-id="workItemParentId" + @error="error = $event" + /> + <work-item-description + v-if="hasDescriptionWidget" + :work-item-id="workItem.id" @error="error = $event" - @updated="$emit('workItemUpdated')" /> </template> </section> diff --git a/app/assets/javascripts/work_items/components/work_item_detail_modal.vue b/app/assets/javascripts/work_items/components/work_item_detail_modal.vue index 172a40a6e56..d1c8022ac57 100644 --- a/app/assets/javascripts/work_items/components/work_item_detail_modal.vue +++ b/app/assets/javascripts/work_items/components/work_item_detail_modal.vue @@ -37,7 +37,7 @@ export default { default: null, }, }, - emits: ['workItemDeleted', 'workItemUpdated', 'close'], + emits: ['workItemDeleted', 'close'], data() { return { error: undefined, @@ -98,15 +98,24 @@ export default { </script> <template> - <gl-modal ref="modal" hide-footer size="lg" modal-id="work-item-detail-modal" @hide="closeModal"> + <gl-modal + ref="modal" + hide-footer + size="lg" + modal-id="work-item-detail-modal" + header-class="gl-p-0 gl-pb-2!" + body-class="gl-pb-6!" + @hide="closeModal" + > <gl-alert v-if="error" variant="danger" @dismiss="error = false"> {{ error }} </gl-alert> <work-item-detail + :work-item-parent-id="issueGid" :work-item-id="workItemId" + class="gl-p-5 gl-mt-n3" @deleteWorkItem="deleteWorkItem" - @workItemUpdated="$emit('workItemUpdated')" /> </gl-modal> </template> @@ -114,7 +123,7 @@ export default { <style> /* hide the existing modal header */ -#work-item-detail-modal .modal-header { +#work-item-detail-modal .modal-header * { display: none; } </style> diff --git a/app/assets/javascripts/work_items/components/work_item_links/index.js b/app/assets/javascripts/work_items/components/work_item_links/index.js new file mode 100644 index 00000000000..320a4a213e3 --- /dev/null +++ b/app/assets/javascripts/work_items/components/work_item_links/index.js @@ -0,0 +1,37 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; +import WorkItemLinks from './work_item_links.vue'; + +Vue.use(VueApollo); + +const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), +}); + +export default function initWorkItemLinks() { + if (!window.gon.features.workItemsHierarchy) { + return; + } + + const workItemLinksRoot = document.querySelector('.js-work-item-links-root'); + + if (!workItemLinksRoot) { + return; + } + // eslint-disable-next-line no-new + new Vue({ + el: workItemLinksRoot, + name: 'WorkItemLinksRoot', + apolloProvider, + components: { + workItemLinks: WorkItemLinks, + }, + render: (createElement) => + createElement('work-item-links', { + props: { + issuableId: parseInt(workItemLinksRoot.dataset.issuableId, 10), + }, + }), + }); +} diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue new file mode 100644 index 00000000000..bdfff100333 --- /dev/null +++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue @@ -0,0 +1,165 @@ +<script> +import { GlButton, GlBadge, GlIcon, GlLoadingIcon } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import { convertToGraphQLId } from '~/graphql_shared/utils'; +import { TYPE_WORK_ITEM } from '~/graphql_shared/constants'; +import { + STATE_OPEN, + WIDGET_ICONS, + WORK_ITEM_STATUS_TEXT, + WIDGET_TYPE_HIERARCHY, +} from '../../constants'; +import getWorkItemLinksQuery from '../../graphql/work_item_links.query.graphql'; +import WorkItemLinksForm from './work_item_links_form.vue'; + +export default { + components: { + GlButton, + GlBadge, + GlIcon, + GlLoadingIcon, + WorkItemLinksForm, + }, + props: { + workItemId: { + type: String, + required: false, + default: null, + }, + issuableId: { + type: Number, + required: false, + default: null, + }, + }, + apollo: { + children: { + query: getWorkItemLinksQuery, + variables() { + return { + id: this.issuableGid, + }; + }, + update(data) { + return ( + data.workItem.widgets.find((widget) => widget.type === WIDGET_TYPE_HIERARCHY)?.children + .nodes ?? [] + ); + }, + skip() { + return !this.issuableId; + }, + }, + }, + data() { + return { + isShownAddForm: false, + isOpen: true, + children: [], + }; + }, + computed: { + // Only used for children for now but should be extended later to support parents and siblings + isChildrenEmpty() { + return this.children?.length === 0; + }, + toggleIcon() { + return this.isOpen ? 'chevron-lg-up' : 'chevron-lg-down'; + }, + toggleLabel() { + return this.isOpen + ? s__('WorkItem|Collapse child items') + : s__('WorkItem|Expand child items'); + }, + issuableGid() { + return this.issuableId ? convertToGraphQLId(TYPE_WORK_ITEM, this.issuableId) : null; + }, + isLoading() { + return this.$apollo.queries.children.loading; + }, + }, + methods: { + badgeVariant(state) { + return state === STATE_OPEN ? 'success' : 'info'; + }, + toggle() { + this.isOpen = !this.isOpen; + }, + toggleAddForm() { + this.isShownAddForm = !this.isShownAddForm; + }, + }, + i18n: { + title: s__('WorkItem|Child items'), + emptyStateMessage: s__( + 'WorkItem|No child items are currently assigned. Use child items to prioritize tasks that your team should complete in order to accomplish your goals!', + ), + addChildButtonLabel: s__('WorkItem|Add a child'), + }, + WIDGET_TYPE_TASK_ICON: WIDGET_ICONS.TASK, + WORK_ITEM_STATUS_TEXT, +}; +</script> + +<template> + <div class="gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-bg-gray-10"> + <div + class="gl-p-4 gl-display-flex gl-justify-content-space-between" + :class="{ 'gl-border-b-1 gl-border-b-solid gl-border-b-gray-100': isOpen }" + > + <h5 class="gl-m-0 gl-line-height-32">{{ $options.i18n.title }}</h5> + <div class="gl-border-l-1 gl-border-l-solid gl-border-l-gray-50 gl-pl-4"> + <gl-button + category="tertiary" + :icon="toggleIcon" + :aria-label="toggleLabel" + data-testid="toggle-links" + @click="toggle" + /> + </div> + </div> + <div + v-if="isOpen" + class="gl-bg-gray-10 gl-p-4 gl-rounded-bottom-left-base gl-rounded-bottom-right-base" + data-testid="links-body" + > + <gl-loading-icon v-if="isLoading" color="dark" class="gl-my-3" /> + + <template v-else> + <div v-if="isChildrenEmpty" class="gl-px-8" data-testid="links-empty"> + <p> + {{ $options.i18n.emptyStateMessage }} + </p> + <gl-button + v-if="!isShownAddForm" + category="secondary" + variant="confirm" + data-testid="toggle-add-form" + @click="toggleAddForm" + > + {{ $options.i18n.addChildButtonLabel }} + </gl-button> + <work-item-links-form v-else data-testid="add-links-form" @cancel="toggleAddForm" /> + </div> + <div + v-for="child in children" + :key="child.id" + class="gl-relative gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row gl-overflow-break-word gl-min-w-0 gl-bg-white gl-mb-3 gl-py-3 gl-px-4 gl-border gl-border-gray-100 gl-rounded-base" + data-testid="links-child" + > + <div> + <gl-icon :name="$options.WIDGET_TYPE_TASK_ICON" class="gl-mr-3 gl-text-gray-700" /> + <span class="gl-word-break-all">{{ child.title }}</span> + </div> + <div class="gl-ml-0 gl-sm-ml-auto! gl-mt-3 gl-sm-mt-0"> + <gl-badge :variant="badgeVariant(child.state)"> + <span class="gl-sm-display-block">{{ + $options.WORK_ITEM_STATUS_TEXT[child.state] + }}</span> + </gl-badge> + </div> + </div> + </template> + </div> + </div> +</template> diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_links_form.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_links_form.vue new file mode 100644 index 00000000000..22728f58026 --- /dev/null +++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_links_form.vue @@ -0,0 +1,28 @@ +<script> +import { GlForm, GlFormInput, GlButton } from '@gitlab/ui'; + +export default { + components: { + GlForm, + GlFormInput, + GlButton, + }, + data() { + return { + relatedWorkItem: '', + }; + }, +}; +</script> + +<template> + <gl-form @submit.prevent> + <gl-form-input v-model="relatedWorkItem" class="gl-mb-4" /> + <gl-button type="submit" category="secondary" variant="confirm"> + {{ s__('WorkItem|Add') }} + </gl-button> + <gl-button category="tertiary" class="gl-float-right" @click="$emit('cancel')"> + {{ s__('WorkItem|Cancel') }} + </gl-button> + </gl-form> +</template> diff --git a/app/assets/javascripts/work_items/components/work_item_state.vue b/app/assets/javascripts/work_items/components/work_item_state.vue index 51db4c804eb..87f4a8822b1 100644 --- a/app/assets/javascripts/work_items/components/work_item_state.vue +++ b/app/assets/javascripts/work_items/components/work_item_state.vue @@ -7,8 +7,9 @@ import { STATE_CLOSED, STATE_EVENT_CLOSE, STATE_EVENT_REOPEN, + TRACKING_CATEGORY_SHOW, } from '../constants'; -import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql'; +import { getUpdateWorkItemMutation } from './update_work_item'; import ItemState from './item_state.vue'; export default { @@ -21,6 +22,11 @@ export default { type: Object, required: true, }, + workItemParentId: { + type: String, + required: false, + default: null, + }, }, data() { return { @@ -33,14 +39,14 @@ export default { }, tracking() { return { - category: 'workItems:show', + category: TRACKING_CATEGORY_SHOW, label: 'item_state', property: `type_${this.workItemType}`, }; }, }, methods: { - async updateWorkItemState(newState) { + updateWorkItemState(newState) { const stateEventMap = { [STATE_OPEN]: STATE_EVENT_REOPEN, [STATE_CLOSED]: STATE_EVENT_CLOSE, @@ -48,35 +54,39 @@ export default { const stateEvent = stateEventMap[newState]; - await this.updateWorkItem(stateEvent); + this.updateWorkItem(stateEvent); }, + async updateWorkItem(updatedState) { if (!updatedState) { return; } + const input = { + id: this.workItem.id, + stateEvent: updatedState, + }; + this.updateInProgress = true; try { this.track('updated_state'); - const { - data: { workItemUpdate }, - } = await this.$apollo.mutate({ - mutation: updateWorkItemMutation, - variables: { - input: { - id: this.workItem.id, - stateEvent: updatedState, - }, - }, + const { mutation, variables } = getUpdateWorkItemMutation({ + workItemParentId: this.workItemParentId, + input, }); - if (workItemUpdate?.errors?.length) { - throw new Error(workItemUpdate.errors[0]); - } + const { data } = await this.$apollo.mutate({ + mutation, + variables, + }); - this.$emit('updated'); + const errors = data.workItemUpdate?.errors; + + if (errors?.length) { + throw new Error(errors[0]); + } } catch (error) { this.$emit('error', i18n.updateError); Sentry.captureException(error); diff --git a/app/assets/javascripts/work_items/components/work_item_title.vue b/app/assets/javascripts/work_items/components/work_item_title.vue index d2e6d3c0bbf..b4c13037038 100644 --- a/app/assets/javascripts/work_items/components/work_item_title.vue +++ b/app/assets/javascripts/work_items/components/work_item_title.vue @@ -1,7 +1,8 @@ <script> +import * as Sentry from '@sentry/browser'; import Tracking from '~/tracking'; -import { i18n } from '../constants'; -import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql'; +import { i18n, TRACKING_CATEGORY_SHOW } from '../constants'; +import { getUpdateWorkItemMutation } from './update_work_item'; import ItemTitle from './item_title.vue'; export default { @@ -25,11 +26,16 @@ export default { required: false, default: '', }, + workItemParentId: { + type: String, + required: false, + default: null, + }, }, computed: { tracking() { return { - category: 'workItems:show', + category: TRACKING_CATEGORY_SHOW, label: 'item_title', property: `type_${this.workItemType}`, }; @@ -41,21 +47,37 @@ export default { return; } + const input = { + id: this.workItemId, + title: updatedTitle, + }; + + this.updateInProgress = true; + try { - await this.$apollo.mutate({ - mutation: updateWorkItemMutation, - variables: { - input: { - id: this.workItemId, - title: updatedTitle, - }, - }, - }); this.track('updated_title'); - this.$emit('updated'); - } catch { + + const { mutation, variables } = getUpdateWorkItemMutation({ + workItemParentId: this.workItemParentId, + input, + }); + + const { data } = await this.$apollo.mutate({ + mutation, + variables, + }); + + const errors = data.workItemUpdate?.errors; + + if (errors?.length) { + throw new Error(errors[0]); + } + } catch (error) { this.$emit('error', i18n.updateError); + Sentry.captureException(error); } + + this.updateInProgress = false; }, }, }; diff --git a/app/assets/javascripts/work_items/components/work_item_weight.vue b/app/assets/javascripts/work_items/components/work_item_weight.vue new file mode 100644 index 00000000000..b0f2b3aa14a --- /dev/null +++ b/app/assets/javascripts/work_items/components/work_item_weight.vue @@ -0,0 +1,26 @@ +<script> +import { __ } from '~/locale'; + +export default { + inject: ['hasIssueWeightsFeature'], + props: { + weight: { + type: Number, + required: false, + default: undefined, + }, + }, + computed: { + weightText() { + return this.weight ?? __('None'); + }, + }, +}; +</script> + +<template> + <div v-if="hasIssueWeightsFeature" class="gl-mb-5"> + <span class="gl-display-inline-block gl-font-weight-bold gl-w-15">{{ __('Weight') }}</span> + {{ weightText }} + </div> +</template> diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js index e914500108f..2df4978a319 100644 --- a/app/assets/javascripts/work_items/constants.js +++ b/app/assets/javascripts/work_items/constants.js @@ -6,9 +6,27 @@ export const STATE_CLOSED = 'CLOSED'; export const STATE_EVENT_REOPEN = 'REOPEN'; export const STATE_EVENT_CLOSE = 'CLOSE'; +export const TRACKING_CATEGORY_SHOW = 'workItems:show'; + export const i18n = { fetchError: s__('WorkItem|Something went wrong when fetching the work item. Please try again.'), updateError: s__('WorkItem|Something went wrong while updating the work item. Please try again.'), }; export const DEFAULT_MODAL_TYPE = 'Task'; + +export const WIDGET_TYPE_ASSIGNEE = 'ASSIGNEES'; +export const WIDGET_TYPE_DESCRIPTION = 'DESCRIPTION'; +export const WIDGET_TYPE_WEIGHT = 'WEIGHT'; +export const WIDGET_TYPE_HIERARCHY = 'HIERARCHY'; + +export const WIDGET_TYPE_TASK_ICON = 'task-done'; + +export const WIDGET_ICONS = { + TASK: 'task-done', +}; + +export const WORK_ITEM_STATUS_TEXT = { + CLOSED: s__('WorkItem|Closed'), + OPEN: s__('WorkItem|Open'), +}; diff --git a/app/assets/javascripts/work_items/graphql/local_update_work_item.mutation.graphql b/app/assets/javascripts/work_items/graphql/local_update_work_item.mutation.graphql new file mode 100644 index 00000000000..0d31ecef6f8 --- /dev/null +++ b/app/assets/javascripts/work_items/graphql/local_update_work_item.mutation.graphql @@ -0,0 +1,9 @@ +#import "./work_item.fragment.graphql" + +mutation localUpdateWorkItem($input: LocalWorkItemAssigneesInput) { + localUpdateWorkItem(input: $input) @client { + workItem { + ...WorkItem + } + } +} diff --git a/app/assets/javascripts/work_items/graphql/provider.js b/app/assets/javascripts/work_items/graphql/provider.js index 3c2955ce1e2..09d929faae2 100644 --- a/app/assets/javascripts/work_items/graphql/provider.js +++ b/app/assets/javascripts/work_items/graphql/provider.js @@ -1,11 +1,93 @@ +import produce from 'immer'; import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; +import { WIDGET_TYPE_ASSIGNEE } from '../constants'; +import typeDefs from './typedefs.graphql'; +import workItemQuery from './work_item.query.graphql'; + +export const temporaryConfig = { + typeDefs, + cacheConfig: { + possibleTypes: { + LocalWorkItemWidget: ['LocalWorkItemAssignees'], + }, + typePolicies: { + WorkItem: { + fields: { + mockWidgets: { + read(widgets) { + return ( + widgets || [ + { + __typename: 'LocalWorkItemAssignees', + type: 'ASSIGNEES', + nodes: [ + { + __typename: 'UserCore', + id: 'gid://gitlab/User/1', + avatarUrl: '', + webUrl: '', + // eslint-disable-next-line @gitlab/require-i18n-strings + name: 'John Doe', + username: 'doe_I', + }, + { + __typename: 'UserCore', + id: 'gid://gitlab/User/2', + avatarUrl: '', + webUrl: '', + // eslint-disable-next-line @gitlab/require-i18n-strings + name: 'Marcus Rutherford', + username: 'ruthfull', + }, + ], + }, + { + __typename: 'LocalWorkItemWeight', + type: 'WEIGHT', + weight: 0, + }, + ] + ); + }, + }, + }, + }, + }, + }, +}; + +export const resolvers = { + Mutation: { + localUpdateWorkItem(_, { input }, { cache }) { + const sourceData = cache.readQuery({ + query: workItemQuery, + variables: { id: input.id }, + }); + + const data = produce(sourceData, (draftData) => { + const assigneesWidget = draftData.workItem.mockWidgets.find( + (widget) => widget.type === WIDGET_TYPE_ASSIGNEE, + ); + assigneesWidget.nodes = assigneesWidget.nodes.filter((assignee) => + input.assigneeIds.includes(assignee.id), + ); + }); + + cache.writeQuery({ + query: workItemQuery, + variables: { id: input.id }, + data, + }); + }, + }, +}; export function createApolloProvider() { Vue.use(VueApollo); - const defaultClient = createDefaultClient(); + const defaultClient = createDefaultClient(resolvers, temporaryConfig); return new VueApollo({ defaultClient, diff --git a/app/assets/javascripts/work_items/graphql/typedefs.graphql b/app/assets/javascripts/work_items/graphql/typedefs.graphql new file mode 100644 index 00000000000..bfe2f0fe0ce --- /dev/null +++ b/app/assets/javascripts/work_items/graphql/typedefs.graphql @@ -0,0 +1,36 @@ +enum LocalWidgetType { + ASSIGNEES + WEIGHT +} + +interface LocalWorkItemWidget { + type: LocalWidgetType! +} + +type LocalWorkItemAssignees implements LocalWorkItemWidget { + type: LocalWidgetType! + nodes: [UserCore] +} + +type LocalWorkItemWeight implements LocalWorkItemWidget { + type: LocalWidgetType! + weight: Int +} + +extend type WorkItem { + mockWidgets: [LocalWorkItemWidget] +} + +type LocalWorkItemAssigneesInput { + id: WorkItemID! + assigneeIds: [ID!] +} + +type LocalWorkItemPayload { + workItem: WorkItem! + errors: [String!] +} + +extend type Mutation { + localUpdateWorkItem(input: LocalWorkItemAssigneesInput!): LocalWorkItemPayload +} diff --git a/app/assets/javascripts/work_items/graphql/update_work_item_task.mutation.graphql b/app/assets/javascripts/work_items/graphql/update_work_item_task.mutation.graphql new file mode 100644 index 00000000000..470de060ee3 --- /dev/null +++ b/app/assets/javascripts/work_items/graphql/update_work_item_task.mutation.graphql @@ -0,0 +1,8 @@ +mutation workItemUpdateTask($input: WorkItemUpdateTaskInput!) { + workItemUpdate: workItemUpdateTask(input: $input) { + workItem { + id + descriptionHtml + } + } +} diff --git a/app/assets/javascripts/work_items/graphql/update_work_item_widgets.mutation.graphql b/app/assets/javascripts/work_items/graphql/update_work_item_widgets.mutation.graphql new file mode 100644 index 00000000000..148b340b439 --- /dev/null +++ b/app/assets/javascripts/work_items/graphql/update_work_item_widgets.mutation.graphql @@ -0,0 +1,10 @@ +#import "./work_item.fragment.graphql" + +mutation workItemUpdateWidgets($input: WorkItemUpdateWidgetsInput!) { + workItemUpdateWidgets(input: $input) { + workItem { + ...WorkItem + } + errors + } +} diff --git a/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql b/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql index e25fd102699..04701f6899e 100644 --- a/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql +++ b/app/assets/javascripts/work_items/graphql/work_item.fragment.graphql @@ -11,4 +11,11 @@ fragment WorkItem on WorkItem { deleteWorkItem updateWorkItem } + widgets { + ... on WorkItemWidgetDescription { + type + description + descriptionHtml + } + } } diff --git a/app/assets/javascripts/work_items/graphql/work_item.query.graphql b/app/assets/javascripts/work_items/graphql/work_item.query.graphql index 3b46fed97ec..30bc61f5c59 100644 --- a/app/assets/javascripts/work_items/graphql/work_item.query.graphql +++ b/app/assets/javascripts/work_items/graphql/work_item.query.graphql @@ -3,5 +3,21 @@ query workItem($id: WorkItemID!) { workItem(id: $id) { ...WorkItem + mockWidgets @client { + ... on LocalWorkItemAssignees { + type + nodes { + id + avatarUrl + name + username + webUrl + } + } + ... on LocalWorkItemWeight { + type + weight + } + } } } diff --git a/app/assets/javascripts/work_items/graphql/work_item_links.query.graphql b/app/assets/javascripts/work_items/graphql/work_item_links.query.graphql new file mode 100644 index 00000000000..c2496f53cc8 --- /dev/null +++ b/app/assets/javascripts/work_items/graphql/work_item_links.query.graphql @@ -0,0 +1,28 @@ +query workItemQuery($id: WorkItemID!) { + workItem(id: $id) { + id + workItemType { + id + } + title + widgets { + type + ... on WorkItemWidgetHierarchy { + type + parent { + id + } + children { + nodes { + id + workItemType { + id + } + title + state + } + } + } + } + } +} diff --git a/app/assets/javascripts/work_items/index.js b/app/assets/javascripts/work_items/index.js index e39b0d6a353..33e28831b54 100644 --- a/app/assets/javascripts/work_items/index.js +++ b/app/assets/javascripts/work_items/index.js @@ -1,11 +1,12 @@ import Vue from 'vue'; +import { parseBoolean } from '~/lib/utils/common_utils'; import App from './components/app.vue'; import { createRouter } from './router'; import { createApolloProvider } from './graphql/provider'; export const initWorkItemsRoot = () => { const el = document.querySelector('#js-work-items'); - const { fullPath, issuesListPath } = el.dataset; + const { fullPath, hasIssueWeightsFeature, issuesListPath } = el.dataset; return new Vue({ el, @@ -13,6 +14,7 @@ export const initWorkItemsRoot = () => { apolloProvider: createApolloProvider(), provide: { fullPath, + hasIssueWeightsFeature: parseBoolean(hasIssueWeightsFeature), issuesListPath, }, render(createElement) { diff --git a/app/assets/javascripts/work_items/pages/work_item_root.vue b/app/assets/javascripts/work_items/pages/work_item_root.vue index 6dc3dc3b3c9..e9840889bdb 100644 --- a/app/assets/javascripts/work_items/pages/work_item_root.vue +++ b/app/assets/javascripts/work_items/pages/work_item_root.vue @@ -4,6 +4,7 @@ import { TYPE_WORK_ITEM } from '~/graphql_shared/constants'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import { visitUrl } from '~/lib/utils/url_utility'; import { s__ } from '~/locale'; +import ZenMode from '~/zen_mode'; import WorkItemDetail from '../components/work_item_detail.vue'; import deleteWorkItemMutation from '../graphql/delete_work_item.mutation.graphql'; @@ -29,6 +30,9 @@ export default { return convertToGraphQLId(TYPE_WORK_ITEM, this.id); }, }, + mounted() { + this.ZenMode = new ZenMode(); + }, methods: { deleteWorkItem() { this.$apollo diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index 24549a170bd..092cf643e0f 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -17,7 +17,6 @@ @import './pages/note_form'; @import './pages/notes'; @import './pages/notifications'; -@import './pages/pages'; @import './pages/pipelines'; @import './pages/profile'; @import './pages/profiles/preferences'; diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss index 3885134e276..ceac5da7f80 100644 --- a/app/assets/stylesheets/components/avatar.scss +++ b/app/assets/stylesheets/components/avatar.scss @@ -113,10 +113,6 @@ $avatar-sizes: ( border-radius: 0; border: 0; } - - &.avatar-placeholder { - border: 0; - } } .identicon { diff --git a/app/assets/stylesheets/components/feature_highlight.scss b/app/assets/stylesheets/components/feature_highlight.scss index 54123e74675..4d301cc5617 100644 --- a/app/assets/stylesheets/components/feature_highlight.scss +++ b/app/assets/stylesheets/components/feature_highlight.scss @@ -1,29 +1,3 @@ -.gl-badge.feature-highlight-badge { - background-color: $purple-light; - color: $purple; - - &, - &.sm { - padding: 0.25rem; - } -} - -.gl-order-1 { - order: 1; -} - -.gl-sm-order-init { - @media (min-width: $breakpoint-sm) { - order: initial; - } -} - -.gl-xs-ml-3 { - @media (max-width: $breakpoint-sm) { - @include gl-ml-3; - } -} - .gl-sm-mr-3 { @media (min-width: $breakpoint-sm) { @include gl-mr-3; diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index 7c668666d70..3bb889b6ba0 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -80,11 +80,6 @@ $item-remove-button-space: 42px; .health-label-short { max-width: 0; } - - .bullet-separator { - font-size: 9px; - color: $gray-200; - } } .card-header { @@ -198,7 +193,6 @@ $item-remove-button-space: 42px; } } -.mr-status-wrapper, .mr-ci-status { line-height: 0; } diff --git a/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss b/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss index 2bc6eba3342..f6be241d644 100644 --- a/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss +++ b/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss @@ -1,25 +1,50 @@ +@function encodecolor($string) { + @if type-of($string) == 'color' { + $hex: str-slice(ie-hex-str($string), 4); + $string: unquote('#{$hex}'); + } + $string: '%23' + $string; + @return $string; +} + +@mixin dropzone-background($stroke-color, $stroke-width: 4, $stroke-linecap: 'butt') { + background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='#{encodecolor($stroke-color)}' stroke-width='#{$stroke-width}' stroke-dasharray='6%2c4' stroke-dashoffset='0' stroke-linecap='#{encodecolor($stroke-linecap)}'/%3e%3c/svg%3e"); +} + .upload-dropzone-border { - border: 2px dashed $gray-100; + border: 0; + @include dropzone-background($gray-400, 2, 'round'); + border-radius: 8px; } .upload-dropzone-card { - transition: border $gl-transition-duration-medium $general-hover-transition-curve; + transition: background $gl-transition-duration-medium $general-hover-transition-curve, + border $gl-transition-duration-medium $general-hover-transition-curve; color: $gl-text-color; + &:hover, &:focus, + &:focus-within, &:active { outline: none; - border: 2px dashed $purple; + @include dropzone-background($blue-500); color: $gl-text-color; } + &:focus, + &:focus-within, + &:active { + @include gl-focus; + } + &:hover { border-color: $gray-300; } } .upload-dropzone-overlay { - border: 2px dashed $purple; + background-color: $blue-50; + @include dropzone-background($blue-500); top: 0; left: 0; pointer-events: none; diff --git a/app/assets/stylesheets/errors.scss b/app/assets/stylesheets/errors.scss index 00cc3409fa7..3ef6452b706 100644 --- a/app/assets/stylesheets/errors.scss +++ b/app/assets/stylesheets/errors.scss @@ -9,6 +9,10 @@ @import 'bootstrap/scss/buttons'; @import 'bootstrap/scss/forms'; +@import '@gitlab/ui/src/scss/variables'; +@import '@gitlab/ui/src/scss/utility-mixins/index'; +@import '@gitlab/ui/src/components/base/button/button'; + $body-color: #666; $header-color: #456; diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 8e43a9b1b0d..e977fb92928 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -24,7 +24,6 @@ @import 'framework/kbd'; @import 'framework/header'; @import 'framework/highlight'; -@import 'framework/issue_box'; @import 'framework/lists'; @import 'framework/logo'; @import 'framework/job_log'; diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index 1192c51b9aa..56ec61ffd84 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -6,6 +6,12 @@ width: 20px; height: 20px; } + + // Show active state. + .gl-button.selected { + background-color: $blue-50; + box-shadow: inset 0 0 0 2px $blue-500; + } } .emoji-menu { diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 33522c66024..5fa1923af7c 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -106,15 +106,15 @@ } @mixin btn-blue { - @include btn-color($blue-500, $blue-600, $blue-600, $blue-700, $blue-700, $blue-800, $white); + @include btn-color($blue-500, $blue-600, $blue-600, $blue-700, $blue-700, $blue-800, $white-contrast); } @mixin btn-orange { - @include btn-color($orange-500, $orange-600, $orange-500, $orange-600, $orange-600, $orange-800, $white); + @include btn-color($orange-500, $orange-600, $orange-500, $orange-600, $orange-600, $orange-800, $white-contrast); } @mixin btn-red { - @include btn-color($red-500, $red-600, $red-600, $red-700, $red-700, $red-800, $white); + @include btn-color($red-500, $red-600, $red-600, $red-700, $red-700, $red-800, $white-contrast); } @mixin btn-white { @@ -122,7 +122,7 @@ } @mixin btn-purple { - @include btn-color($purple-700, $purple-800, $purple-800, $purple-900, $purple-900, $purple-950, $white); + @include btn-color($purple-700, $purple-800, $purple-800, $purple-900, $purple-900, $purple-950, $white-contrast); } @mixin btn-with-margin { @@ -175,10 +175,6 @@ @include btn-outline($white, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800); } - &.btn-warning { - @include btn-outline($white, $orange-500, $orange-500, $orange-50, $orange-600, $orange-600, $orange-100, $orange-700, $orange-700); - } - &.btn-primary, &.btn-info { @include btn-outline($white, $blue-500, $blue-500, $blue-100, $blue-700, $blue-500, $blue-200, $blue-600, $blue-800); @@ -190,10 +186,6 @@ @include btn-blue; } - &.btn-warning { - @include btn-orange; - } - &.btn-danger { @include btn-red; } @@ -357,25 +349,6 @@ } } -.btn-link { - padding: 0; - background-color: transparent; - color: $blue-600; - font-weight: normal; - border-radius: 0; - border-color: transparent; - border-width: 0; - - &:hover, - &:active, - &:focus { - color: $blue-800; - text-decoration: underline; - background-color: transparent; - border-color: transparent; - } -} - // The .btn-svg class is available for legacy icon buttons to // preserve a 34px height and have 16x16 icons at the same time. // Once a button is migrated (to the current 32px height) @@ -417,16 +390,6 @@ fieldset[disabled] .btn, cursor: default; } -// This class helps convert `.gl-button` children so that they consistently -// match the style of `.btn` elements which might be around them. Ideally we -// wouldn't need this class. -// -// Remove by upgrading all buttons in a container to use the new `.gl-button` style. -.gl-button-deprecated-adapter .gl-button { - box-shadow: none; - border-width: 1px; -} - copy-code { @include gl-absolute; @include gl-transition-medium; @@ -440,3 +403,22 @@ copy-code { @include gl-opacity-10; } } + +.btn-link { + padding: 0; + background-color: transparent; + color: $blue-600; + font-weight: normal; + border-radius: 0; + border-color: transparent; + border-width: 0; + + &:hover, + &:active, + &:focus { + color: $blue-800; + text-decoration: underline; + background-color: transparent; + border-color: transparent; + } +} diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index e06c71dccf0..036cec15935 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -27,7 +27,8 @@ } .toggle-sidebar-button { - width: $contextual-sidebar-collapsed-width; + width: #{$contextual-sidebar-collapsed-width - 1px}; + padding: 0 21px; .collapse-text { display: none; @@ -81,7 +82,7 @@ @include gl-px-0; @include gl-pb-2; @include gl-pt-0; - background-color: $gray-10; + @include gl-bg-gray-10; box-shadow: 0 $gl-spacing-scale-2 $gl-spacing-scale-5 $t-gray-a-24, 0 0 $gl-spacing-scale-1 $t-gray-a-24; border-style: none; border-radius: $border-radius-default; @@ -128,7 +129,7 @@ @include gl-p-2; @include gl-mb-2; - @include gl-mt-0; + @include gl-mt-1; .avatar-container { @include gl-font-weight-normal; @@ -246,7 +247,8 @@ z-index: 600; width: $contextual-sidebar-width; top: $header-height; - background-color: $gray-50; + background-color: $contextual-sidebar-bg-color; + border-right: 1px solid $contextual-sidebar-border-color; transform: translate3d(0, 0, 0); &.sidebar-collapsed-desktop { @@ -352,7 +354,6 @@ } .sidebar-top-level-items { - @include gl-mt-2; margin-bottom: 60px; .context-header a { @@ -410,11 +411,10 @@ .toggle-sidebar-button, .close-nav-button { @include side-panel-toggle; - background-color: $gray-50; - border-top: 1px solid $border-color; + background-color: $contextual-sidebar-bg-color; position: fixed; bottom: 0; - width: $contextual-sidebar-width; + width: #{$contextual-sidebar-width - 1px}; .collapse-text, .icon-chevron-double-lg-left, diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index 7a77256398e..904d041fdc9 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -456,19 +456,6 @@ table.code { table-layout: fixed; border-radius: 0 0 $border-radius-default $border-radius-default; - .diff-tr:first-of-type.line_expansion > .diff-td, - tr:first-of-type.line_expansion > td { - border-top: 0; - } - - .diff-tr:nth-last-of-type(2).line_expansion > .diff-td, - tr:nth-last-of-type(2).line_expansion, - tr:last-of-type.line_expansion { - > td { - border-bottom: 0; - } - } - .diff-tr.line_holder .diff-td, tr.line_holder td { line-height: $code-line-height; @@ -557,6 +544,10 @@ table.code { left: 0; } } + + img { + max-width: 100%; + } } } @@ -607,10 +598,6 @@ table.code { grid-template-columns: 50px 8px 0 1fr; } - .diff-grid-3-col { - grid-template-columns: 50px 1fr !important; - } - .diff-grid-2-col { grid-template-columns: 100px 1fr !important; @@ -619,10 +606,6 @@ table.code { } } - &.inline-diff-view .diff-grid-3-col { - grid-template-columns: 50px 50px 1fr !important; - } - .diff-grid-comments { display: grid; grid-template-columns: 1fr 1fr; @@ -839,18 +822,6 @@ table.code { } } -.commits-container { - .diff-files-changed { - @include media-breakpoint-up(sm) { - top: $header-height; - - .with-performance-bar & { - top: calc(#{$header-height} + #{$performance-bar-height}); - } - } - } -} - .diff-files-changed { background-color: $body-bg; @@ -861,11 +832,11 @@ table.code { @include media-breakpoint-up(sm) { @include gl-sticky; - top: calc(#{$header-height} + #{$mr-tabs-height}); + top: $header-height; z-index: 200; .with-performance-bar & { - top: calc(#{$header-height} + #{$mr-tabs-height} + #{$performance-bar-height}); + top: calc(#{$header-height} + #{$performance-bar-height}); } &.is-stuck { diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 5c6d9266f7c..43e14a63f9d 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -70,6 +70,15 @@ } } +.dropdown-toggle, +.dropdown-menu-toggle, +.dropdown-menu-close { + &:active, + &:focus { + @include gl-focus; + } +} + // Get search dropdown to line up with other nav dropdowns .search-input-container .dropdown-menu { margin-top: 11px; @@ -206,6 +215,13 @@ text-decoration: none; } + &:active, + &:focus, + &:focus:active, + &.is-focused { + @include gl-focus($inset: true); + } + &.dropdown-menu-user-link { line-height: 16px; padding-top: 10px; @@ -271,7 +287,6 @@ display: block; text-align: left; list-style: none; - padding: 0 1px; > a, button, @@ -839,6 +854,15 @@ color: $red-700; } + .frequent-items-list-item-container .gl-button { + &:active, + &:focus, + &:focus:active, + &.is-focused { + @include gl-focus($inset: true); + } + } + .frequent-items-list-item-container a { display: flex; } diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 50783433c3d..bba995a6de3 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -108,6 +108,11 @@ label { width: $input-short-md-width; } } + + &:focus { + border-color: $gray-400; + @include gl-focus; + } } .select-control { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index f76a0cbbae8..ced62926218 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -52,8 +52,13 @@ display: flex; align-items: center; padding: 2px 8px; - margin: 4px 2px 4px -12px; + margin: 4px 2px 4px -8px; border-radius: $border-radius-default; + + &:active, + &:focus { + @include gl-focus($focus-ring: $focus-ring-dark); + } } .canary-badge { @@ -214,6 +219,11 @@ outline: 0; color: $white; } + + &:active, + &:focus { + @include gl-focus($focus-ring: $focus-ring-dark); + } } .top-nav-toggle, @@ -234,6 +244,8 @@ .navbar-sub-nav { display: flex; + align-items: center; + height: 100%; margin: 0 0 0 6px; .dropdown-chevron { diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss index a80643e695b..1c43212f501 100644 --- a/app/assets/stylesheets/framework/highlight.scss +++ b/app/assets/stylesheets/framework/highlight.scss @@ -11,7 +11,6 @@ border-radius: 0 0 $border-radius-default; font-family: $monospace-font; font-size: $code-font-size; - line-height: 1.5; margin: 0; overflow: auto; overflow-y: hidden; diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index ca0240b6a65..a8e740525e2 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -1,94 +1,55 @@ -.ci-status-icon-success, -.ci-status-icon-passed { - svg { - fill: $green-500; +@mixin icon-styles($primary-color, $svg-color) { + svg, + .gl-icon { + fill: $primary-color; + } + + // For the pipeline mini graph, we pass a custom 'gl-border' so that we can enforce + // a border of 1px instead of the thicker svg borders to adhere to design standards. + // If we implement the component with 'isBorderless' and also pass that border, + // this css is to dynamically apply the correct border color for those specific icons. + &.borderless { + border-color: $primary-color; } &.interactive { &:hover { - background: $green-500; + background: $svg-color; + } - svg { - --svg-status-bg: #{$green-100}; - box-shadow: 0 0 0 1px $green-500; - } + &:hover, + &.active { + box-shadow: 0 0 0 1px $primary-color; } } } +.ci-status-icon-success, +.ci-status-icon-passed { + @include icon-styles($green-500, $green-100); +} + .ci-status-icon-error, .ci-status-icon-failed { - svg { - fill: $red-500; - } - - &.interactive { - &:hover { - background: $red-500; - - svg { - --svg-status-bg: #{$red-100}; - box-shadow: 0 0 0 1px $red-500; - } - } - } + @include icon-styles($red-500, $red-100); } .ci-status-icon-pending, .ci-status-icon-waiting-for-resource, .ci-status-icon-failed-with-warnings, .ci-status-icon-success-with-warnings { - svg { - fill: $orange-500; - } - - &.interactive { - &:hover { - background: $orange-500; - - svg { - --svg-status-bg: #{$orange-100}; - box-shadow: 0 0 0 1px $orange-500; - } - } - } + @include icon-styles($orange-500, $orange-100); } .ci-status-icon-running { - svg { - fill: $blue-500; - } - - &.interactive { - &:hover { - background: $blue-500; - - svg { - --svg-status-bg: #{$blue-100}; - box-shadow: 0 0 0 1px $blue-500; - } - } - } + @include icon-styles($blue-500, $blue-100); } .ci-status-icon-canceled, .ci-status-icon-disabled, .ci-status-icon-scheduled, .ci-status-icon-manual { - svg { - fill: $gray-900; - } - - &.interactive { - &:hover { - background: $gray-900; - - svg { - --svg-status-bg: #{$gray-100}; - box-shadow: 0 0 0 1px $gray-900; - } - } - } + @include icon-styles($gray-900, $gray-100); } .ci-status-icon-notification, @@ -96,20 +57,7 @@ .ci-status-icon-created, .ci-status-icon-skipped, .ci-status-icon-notfound { - svg { - fill: $gray-500; - } - - &.interactive { - &:hover { - background: $gray-500; - - svg { - --svg-status-bg: #{$gray-100}; - box-shadow: 0 0 0 1px $gray-500; - } - } - } + @include icon-styles($gray-500, $gray-100); } .icon-link { diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss deleted file mode 100644 index 8baf70da0c6..00000000000 --- a/app/assets/stylesheets/framework/issue_box.scss +++ /dev/null @@ -1,40 +0,0 @@ -/** - * Issue box for showing Open/Closed state: - * Used for Issue#show page, MergeRequest#show page etc - * - */ - -.status-box { - padding: 0 $gl-btn-padding; - - border-radius: $border-radius-default; - display: block; - float: left; - margin-right: $gl-padding-8; - color: $white; - font-size: $gl-font-size; - line-height: $gl-line-height-24; - - &.status-box-closed, - &.status-box-mr-closed { - background-color: $red-500; - } - - &.status-box-issue-closed, - &.status-box-alert-resolved, - &.status-box-mr-merged { - background-color: $blue-500; - } - - &.status-box-open { - background-color: $green-500; - } - - &.status-box-expired { - background-color: $orange-500; - } - - &.status-box-upcoming { - background: $gl-text-color-secondary; - } -} diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 1caf02937d5..2cea3b96ff7 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -358,8 +358,8 @@ line-height: 1; padding: 0; min-width: 16px; - color: $gray-400; - fill: $gray-400; + color: $gray-500; + fill: $gray-500; svg { @include btn-svg; diff --git a/app/assets/stylesheets/framework/page_title.scss b/app/assets/stylesheets/framework/page_title.scss index c77e2be8e5a..5ed5b1e1445 100644 --- a/app/assets/stylesheets/framework/page_title.scss +++ b/app/assets/stylesheets/framework/page_title.scss @@ -3,8 +3,6 @@ .page-title { margin: $gl-padding 0; - font-size: 1.75em; - font-weight: $gl-font-weight-bold; color: $gl-text-color; } diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 549b61aedae..74aed1bd984 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -273,6 +273,18 @@ @include scrolling-links(); } + .fade-left::after, + .fade-right::after { + content: ''; + pointer-events: none; + z-index: -1; + display: block; + width: 16px; + height: 100%; + position: absolute; + top: 0; + } + .fade-right { @include fade(left, $gray-light); right: -5px; @@ -280,6 +292,11 @@ svg { right: -7px; } + + &::after { + right: 0; + background: linear-gradient(270deg, $white, transparent); + } } .fade-left { @@ -290,6 +307,11 @@ svg { left: -7px; } + + &::after { + left: 0; + background: linear-gradient(90deg, $white, transparent); + } } } @@ -316,7 +338,6 @@ .fade-right, .fade-left { - bottom: $gl-padding; top: auto; } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index dd9581c4692..13201d43fd0 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -24,15 +24,11 @@ &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper { padding-right: $gutter-collapsed-width; } - - .merge-request-tabs-holder.affix { - right: $gutter-collapsed-width; - } } } &.is-merge-request { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { .content-wrapper { padding-right: $gutter-collapsed-width; } @@ -60,7 +56,7 @@ z-index: $zindex-dropdown-menu; &.right-sidebar-merge-requests { - width: 270px; + width: 300px; @include media-breakpoint-up(md) { z-index: auto; @@ -77,17 +73,11 @@ } } - @include media-breakpoint-up(md) { - .content-wrapper { - padding-right: $gutter-width; - } - - &:not(.with-overlay) .merge-request-tabs-holder.affix { - right: $gutter-width; - } - - &.with-overlay .merge-request-tabs-holder.affix { - right: $gutter-collapsed-width; + &:not(.is-merge-request) { + @include media-breakpoint-up(md) { + .content-wrapper { + padding-right: $gutter-width; + } } } } @@ -96,7 +86,7 @@ border-left: 1px solid $gray-100; &.right-sidebar-merge-requests { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { border-left: 0; } } @@ -110,10 +100,6 @@ } } -.with-performance-bar .right-sidebar.affix { - top: calc(#{$header-height} + #{$performance-bar-height}); -} - @mixin maintain-sidebar-dimensions { display: block; width: $gutter-width; @@ -284,6 +270,10 @@ .reviewer-grid { [data-css-area='attention'] { grid-area: attention; + + button.selected svg { + fill: $orange-500; + } } [data-css-area='user'] { diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index 9b38e842635..086b83b13e0 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -49,7 +49,7 @@ } img.avatar { - margin-right: $gl-padding; + margin-right: $gl-padding-12; @include media-breakpoint-down(sm) { width: $gl-spacing-scale-6; diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index b1e44a81267..b5e0dcd875a 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -135,11 +135,13 @@ blockquote, .blockquote { - color: $gl-grayish-blue; font-size: inherit; - padding: 8px 24px; - margin: 16px 0; - border-left: 3px solid $white-dark; + @include gl-text-gray-700; + @include gl-py-3; + @include gl-pl-6; + @include gl-my-3; + @include gl-mx-0; + @include gl-inset-border-l-4-gray-100; &:dir(rtl) { border-left: 0; @@ -147,9 +149,8 @@ } p { - color: $gl-grayish-blue !important; - font-size: inherit; line-height: 1.5; + @include gl-reset-color; &:last-child { margin: 0; @@ -592,6 +593,14 @@ } /** + * Links + * + */ +a:focus-visible { + @include gl-focus($outline: true, $outline-offset: $outline-width); +} + +/** * Headers * */ @@ -602,8 +611,6 @@ body { .page-title { margin: #{2 * $grid-size} 0; line-height: 1.3; - font-size: 1.25em; - font-weight: $gl-font-weight-bold; &.with-button { line-height: 34px; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index bc649b6407d..eeffc4fc21b 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -8,8 +8,8 @@ $gutter-inner-width: 250px; $sidebar-transition-duration: 0.3s; $sidebar-breakpoint: 1024px; $default-transition-duration: 0.15s; -$contextual-sidebar-width: 220px; -$contextual-sidebar-collapsed-width: 48px; +$contextual-sidebar-width: 256px; +$contextual-sidebar-collapsed-width: 56px; $toggle-sidebar-height: 48px; /** @@ -169,7 +169,7 @@ $purple-800: #453894 !default; $purple-900: #2f2a6b !default; $purple-950: #232150 !default; -$gray-10: #fafafa !default; +$gray-10: #f5f5f5 !default; $gray-50: #f0f0f0 !default; $gray-100: #dbdbdb !default; $gray-200: #bfbfbf !default; @@ -357,6 +357,8 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor); /* * UI elements */ +$contextual-sidebar-bg-color: #f5f5f5; +$contextual-sidebar-border-color: #e9e9e9; $border-color: $gray-100; $shadow-color: $t-gray-a-08; $well-expand-item: #e8f2f7 !default; @@ -426,8 +428,6 @@ $gl-padding-12: 12px; $gl-padding: 16px; $gl-padding-24: 24px; $gl-padding-32: 32px; -$gl-padding-50: 50px; -$gl-col-padding: 15px; $gl-input-padding: 10px; $gl-vert-padding: 6px; $gl-padding-top: 10px; @@ -439,7 +439,7 @@ $browser-scrollbar-size: 10px; /* * Misc */ -$header-height: var(--header-height, 40px); +$header-height: var(--header-height, 48px); $header-zindex: 1000; $zindex-dropdown-menu: 300; $suggestion-header-height: 46px; @@ -580,7 +580,7 @@ $sidebar-toggle-height: 60px; $sidebar-toggle-width: 40px; $sidebar-milestone-toggle-bottom-margin: 10px; $sidebar-avatar-size: 32px; -$sidebar-top-item-lr-margin: 4px; +$sidebar-top-item-lr-margin: 8px; $sidebar-top-item-tb-margin: 1px; /* diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss index 433141ae690..fcbd05141b9 100644 --- a/app/assets/stylesheets/highlight/common.scss +++ b/app/assets/stylesheets/highlight/common.scss @@ -29,36 +29,6 @@ } } -@mixin old-diff-expansion($background, $border, $link) { - background-color: $background; - - .diff-td, - td { - border-top: 1px solid $border; - border-bottom: 1px solid $border; - } - - button { - color: $link; - border: 0; - background: transparent; - - &[disabled] { - color: desaturate($link, 100%); - opacity: 0.5; - cursor: default; - } - - &:hover:not([disabled]) { - text-decoration: underline; - } - - &:not(:focus-visible) { - outline: 0; - } - } -} - @mixin dark-diff-expansion-line { &.expansion .diff-td { @@ -156,3 +126,11 @@ @include gl-display-inline-block; } } + +@mixin hljs-override($suffix, $color) { + &.blob-viewer { + .hljs-#{$suffix} { + color: $color; + } + } +} diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss index 0eeebdb2e7a..f4d9909d81f 100644 --- a/app/assets/stylesheets/highlight/themes/dark.scss +++ b/app/assets/stylesheets/highlight/themes/dark.scss @@ -154,10 +154,6 @@ $dark-il: #de935f; color: $dark-line-color; } - .old-line_expansion { - @include old-diff-expansion($dark-main-bg, $dark-border, $dark-na); - } - .diff-line-expand-button { @include diff-expansion($gray-600, $gray-200, $gray-300, $white); } diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss index b8cd97d6504..dfa32d4b773 100644 --- a/app/assets/stylesheets/highlight/themes/monokai.scss +++ b/app/assets/stylesheets/highlight/themes/monokai.scss @@ -96,6 +96,25 @@ $monokai-gh: #75715e; } .code.monokai { + // Highlight.js theme overrides (https://gitlab.com/gitlab-org/gitlab/-/issues/365167) + // We should be able to remove the overrides once the upstream issue is fixed (https://github.com/sourcegraph/sourcegraph/issues/23251) + @include hljs-override('string', $monokai-s); + @include hljs-override('attr', $monokai-na); + @include hljs-override('keyword', $monokai-k); + @include hljs-override('variable', $monokai-nv); + @include hljs-override('variable.language_', $monokai-k); + @include hljs-override('title', $monokai-nf); + @include hljs-override('name', $monokai-k); + @include hljs-override('tag', $monokai-nt); + @include hljs-override('type', $monokai-nc); + @include hljs-override('number', $monokai-mf); + @include hljs-override('literal', $monokai-kc); + @include hljs-override('built_in', $monokai-n); + @include hljs-override('section', $monokai-gh); + @include hljs-override('bullet', $monokai-n); + @include hljs-override('subst', $monokai-p); + @include hljs-override('symbol', $monokai-ni); + // Line numbers .file-line-num { @include line-number-link($monokai-line-num-color); @@ -125,10 +144,6 @@ $monokai-gh: #75715e; color: $monokai-text-color; } - .old-line_expansion { - @include old-diff-expansion($monokai-bg, $monokai-border, $monokai-k); - } - .diff-line-expand-button { @include diff-expansion($gray-600, $gray-200, $gray-300, $white); } diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss index 99a3de23c26..f70c53c9eaa 100644 --- a/app/assets/stylesheets/highlight/themes/none.scss +++ b/app/assets/stylesheets/highlight/themes/none.scss @@ -15,6 +15,14 @@ } .code.none { + // Highlight.js theme overrides (https://gitlab.com/gitlab-org/gitlab/-/issues/365167) + // We should be able to remove the overrides once the upstream issue is fixed (https://github.com/sourcegraph/sourcegraph/issues/23251) + &.blob-viewer { + [class^="hljs-"] { + color: $gl-text-color; + } + } + // Line numbers .file-line-num { @include line-number-link($black-transparent); @@ -44,10 +52,6 @@ color: $gl-text-color; } - .old-line_expansion { - @include old-diff-expansion($gray-light, $white-normal, $gl-text-color); - } - .diff-line-expand-button { @include diff-expansion($gray-100, $gray-700, $gray-200, $gray-800); } diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss index 55d17b8f1d2..73aa6275d17 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss @@ -99,6 +99,25 @@ $solarized-dark-il: #2aa198; } .code.solarized-dark { + // Highlight.js theme overrides (https://gitlab.com/gitlab-org/gitlab/-/issues/365167) + // We should be able to remove the overrides once the upstream issue is fixed (https://github.com/sourcegraph/sourcegraph/issues/23251) + @include hljs-override('string', $solarized-dark-s); + @include hljs-override('attr', $solarized-dark-na); + @include hljs-override('keyword', $solarized-dark-k); + @include hljs-override('variable', $solarized-dark-nv); + @include hljs-override('variable.language_', $solarized-dark-k); + @include hljs-override('title', $solarized-dark-nf); + @include hljs-override('name', $solarized-dark-k); + @include hljs-override('tag', $solarized-dark-nt); + @include hljs-override('type', $solarized-dark-nc); + @include hljs-override('number', $solarized-dark-mf); + @include hljs-override('literal', $solarized-dark-kc); + @include hljs-override('built_in', $solarized-dark-n); + @include hljs-override('section', $solarized-dark-gh); + @include hljs-override('bullet', $solarized-dark-n); + @include hljs-override('subst', $solarized-dark-p); + @include hljs-override('symbol', $solarized-dark-ni); + // Line numbers .file-line-num { @include line-number-link($solarized-dark-line-color); @@ -128,10 +147,6 @@ $solarized-dark-il: #2aa198; color: $solarized-dark-pre-color; } - .old-line_expansion { - @include old-diff-expansion($solarized-dark-line-bg, $solarized-dark-border, $solarized-dark-kd); - } - .diff-line-expand-button { @include diff-expansion(lighten($solarized-dark-pre-bg, 10%), $gray-200, lighten($solarized-dark-pre-bg, 20%), $white); } diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss index 72b961097e4..74448317270 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-light.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss @@ -134,10 +134,6 @@ $solarized-light-il: #2aa198; background-color: $solarized-light-pre-bg; color: $solarized-light-pre-color; } - - .old-line_expansion { - @include old-diff-expansion($solarized-light-line-bg, $solarized-light-border, $solarized-light-kd); - } .diff-line-expand-button { @include diff-expansion($gray-100, $gray-700, $gray-200, $gray-800); diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss index b984c194033..aac8ccde96e 100644 --- a/app/assets/stylesheets/highlight/white_base.scss +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -133,19 +133,6 @@ pre.code, color: $white-code-color; } -.old-line_expansion { - @include old-diff-expansion($gray-light, $border-color, $blue-600); - - &.diff-tr:last-child { - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - - .diff-td { - border-bottom: 0; - } - } -} - .diff-line-expand-button { @include diff-expansion($gray-100, $gray-700, $gray-200, $gray-800); } diff --git a/app/assets/stylesheets/notify_enhanced.scss b/app/assets/stylesheets/notify_enhanced.scss index a366498ea03..b331d997a97 100644 --- a/app/assets/stylesheets/notify_enhanced.scss +++ b/app/assets/stylesheets/notify_enhanced.scss @@ -32,10 +32,6 @@ body { font-size: inherit; } -a { - text-decoration: none; -} - .gl-mb-5 { @include gl-mb-5; } diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss index 3327f8da632..613d27a2f39 100644 --- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss +++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss @@ -52,7 +52,6 @@ width: $ci-action-dropdown-svg-size; height: $ci-action-dropdown-svg-size; position: relative; - top: 1px; vertical-align: initial; } } diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss index d55d6b27576..d40c03b7fd1 100644 --- a/app/assets/stylesheets/page_bundles/build.scss +++ b/app/assets/stylesheets/page_bundles/build.scss @@ -44,13 +44,6 @@ } } - &.affix-top { - position: absolute; - right: 0; - left: 0; - top: 0; - } - .controllers { @include build-controllers(15px, center, false, 0, inline, 0); } @@ -177,12 +170,6 @@ width: 289px; overflow: auto; - svg { - margin-right: 3px; - height: 14px; - width: 14px; - } - a { padding: $gl-padding 10px $gl-padding 40px; width: 270px; diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 6c270852e53..a4a82fdcef3 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -563,24 +563,11 @@ $ide-commit-header-height: 48px; } .ide-commit-options { - label { - font-weight: normal; - - &.is-disabled { - .ide-option-label { - text-decoration: line-through; - } + .is-disabled { + .ide-option-label { + text-decoration: line-through; } } - - .form-text.text-muted { - margin-top: 0; - line-height: 0; - } -} - -.ide-commit-new-branch { - margin-left: 25px; } .ide-sidebar-link { diff --git a/app/assets/stylesheets/page_bundles/issues_show.scss b/app/assets/stylesheets/page_bundles/issues_show.scss index ade649faaae..c664e0a734e 100644 --- a/app/assets/stylesheets/page_bundles/issues_show.scss +++ b/app/assets/stylesheets/page_bundles/issues_show.scss @@ -24,8 +24,9 @@ /* The inside bullet aligns itself to the bottom, which we see when text to the right of * a multi-line list item wraps. We fix this by aligning it to the top, and excluding - * other elements adversely affected by this. Targeting ::marker doesn't seem to work. */ - > *:not(code):not(input):not(.gl-label) { + * other elements. Targeting ::marker doesn't seem to work, instead we exclude custom elements + * or anything with a class */ + > *:not(gl-emoji, code, [class]) { vertical-align: top; } @@ -75,29 +76,6 @@ } } -.description.work-items-enabled { - ul.task-list { - > li.task-list-item { - .js-add-task { - svg { - visibility: hidden; - } - - &:focus svg { - visibility: visible; - } - } - - &:hover, - &:focus-within { - .js-add-task svg { - visibility: visible; - } - } - } - } -} - .is-ghost { opacity: 0.3; pointer-events: none; diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss index f153569f99b..0a2b3175aa9 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -33,12 +33,6 @@ $header-height: 40px; right: 0; } -.jira-connect-user { - position: fixed; - top: 10px; - right: 20px; -} - .jira-connect-app { margin-top: $header-height; height: calc(100% - #{$header-height}); diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index f04cdfba0e4..14873c54cd7 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -315,7 +315,7 @@ $tabs-holder-z-index: 250; } .mr-fast-forward-message { - padding-left: $gl-padding-50; + padding-left: $gl-spacing-scale-9; padding-bottom: $gl-padding; } @@ -610,10 +610,10 @@ $tabs-holder-z-index: 250; .mr-widget-extension { border-top: 1px solid var(--border-color, $border-color); - background-color: var(--gray-50, $gray-50); + background-color: var(--gray-10, $gray-10); &.clickable:hover { - background-color: var(--gray-100, $gray-100); + background-color: var(--gray-50, $gray-50); cursor: pointer; } } @@ -737,9 +737,70 @@ $tabs-holder-z-index: 250; } .merge-request-overview { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { display: grid; - grid-template-columns: 1fr 270px; + grid-template-columns: calc(95% - 285px) auto; grid-gap: 5%; } } + +.container-fluid:not(.container-limited) { + .detail-page-header, + .detail-page-description, + .merge-request-tabs-container { + &.is-merge-request { + @include gl-mx-auto; + max-width: $fixed-layout-width - ($gl-padding * 2); + } + } +} + +.submit-review-dropdown { + &.show .dropdown-menu { + width: calc(100vw - 20px); + max-width: 650px; + + .gl-new-dropdown-inner { + max-height: none !important; + } + + .md-header { + .gl-tab-nav-item { + @include gl-text-gray-900; + @include gl-pb-5; + + &:hover { + @include gl-bg-none; + @include gl-text-gray-900; + + &:not(.gl-tab-nav-item-active) { + @include gl-inset-border-b-2-gray-200; + } + } + } + + .gl-tab-nav-item-active { + @include gl-font-weight-bold; + @include gl-text-gray-900; + @include gl-inset-border-b-2-theme-accent; + + &:active, + &:focus, + &:focus:active { + box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500), + $focus-ring; + @include gl-outline-none; + } + } + } + } + + .gl-new-dropdown-contents { + padding: $gl-spacing-scale-4 !important; + } + + .md-preview-holder { + max-height: 180px; + height: 180px; + } +} diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss index a225a0f0061..4946bbbebe5 100644 --- a/app/assets/stylesheets/page_bundles/pipelines.scss +++ b/app/assets/stylesheets/page_bundles/pipelines.scss @@ -74,11 +74,8 @@ .stage-cell { .stage-container { - align-items: center; - display: inline-flex; - - + .stage-container { - margin-left: 4px; + &:last-child { + margin-right: 0; } // Hack to show a button tooltip inline @@ -94,10 +91,11 @@ &:not(:last-child) { &::after { content: ''; - width: 4px; + border-bottom: 2px solid $gray-200; position: absolute; right: -4px; - border-bottom: 2px solid $gray-200; + top: 11px; + width: 4px; } } } diff --git a/app/assets/stylesheets/page_bundles/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss index c64e159c648..9bbea48d2c0 100644 --- a/app/assets/stylesheets/page_bundles/wiki.scss +++ b/app/assets/stylesheets/page_bundles/wiki.scss @@ -1,5 +1,4 @@ @import 'mixins_and_variables_and_functions'; -@import 'highlight.js/scss/a11y-light'; @import 'components/content_editor'; .title .edit-wiki-header { diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index afe57bb26e6..80b9e378252 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -56,7 +56,7 @@ position: relative; font-family: $monospace-font; $left: 12px; - overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-foss/issues/13987 + .max-width-marker { width: 72ch; color: $commit-max-width-marker-color; @@ -95,6 +95,10 @@ } } +.commits-row + .commits-row { + border-top: 1px solid $white-normal; +} + .text-expander { display: inline-flex; background: $white; diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index e0319952adb..909de9d57f2 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -5,15 +5,6 @@ line-height: 34px; display: flex; - a { - color: $gl-text-color; - - &.link, - &.gl-link { - color: $blue-600; - } - } - .author-link { white-space: nowrap; } @@ -23,6 +14,15 @@ } } +.detail-page-header a { + color: $gl-text-color; +} + +.detail-page-header a.link, +.detail-page-header .title a { + color: $blue-600; +} + .detail-page-header-body { position: relative; display: flex; @@ -58,7 +58,6 @@ .detail-page-description { .title { margin: 0 0 16px; - font-size: 2em; color: $gl-text-color; padding: 0 0 0.3em; border-bottom: 1px solid $white-dark; diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 7ac3ef2221f..96ca9fbcb43 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -6,15 +6,8 @@ .groups-list { @include basic-list; - display: flex; - flex-direction: column; - margin: 0; li { - .title { - font-weight: 600; - } - a { text-decoration: none; @@ -40,8 +33,8 @@ } .save-group-loader { - margin-top: $gl-padding-50; - margin-bottom: $gl-padding-50; + margin-top: $gl-spacing-scale-9; + margin-bottom: $gl-spacing-scale-9; color: $gray-700; } @@ -81,17 +74,13 @@ table.pipeline-project-metrics tr td { } .explore-groups.landing { - .inner-content { - padding: 0; - - p { - margin: 7px 0 0; - max-width: 480px; - padding: 0 $gl-padding; + .inner-content p { + margin: 7px 0 0; + max-width: 480px; + padding: 0 $gl-padding; - @include media-breakpoint-down(sm) { - margin: 0 auto; - } + @include media-breakpoint-down(sm) { + margin: 0 auto; } } @@ -113,13 +102,6 @@ table.pipeline-project-metrics tr td { } .groups-list-tree-container { - .has-no-search-results { - text-align: center; - padding: $gl-padding; - font-style: italic; - color: $well-light-text-color; - } - > .group-list-tree > .group-row.has-children:first-child { border-top: 0; } @@ -135,16 +117,6 @@ table.pipeline-project-metrics tr td { } } - .folder-caret, - .item-type-icon { - display: inline-block; - color: $gl-text-color-secondary; - } - - .folder-caret { - width: $gl-font-size-large; - } - .item-type-icon { margin-top: 2px; width: 20px; @@ -288,10 +260,3 @@ table.pipeline-project-metrics tr td { } } } - -.js-groups-list-holder { - .groups-list-loading { - font-size: 34px; - text-align: center; - } -} diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 086abcf3f86..f3182af3047 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -1,3 +1,14 @@ +.status-box { + padding: 0 $gl-btn-padding; + border-radius: $border-radius-default; + display: block; + float: left; + margin-right: $gl-padding-8; + color: $white; + font-size: $gl-font-size; + line-height: $gl-line-height-24; +} + .issuable-warning-icon { background-color: $orange-50; border-radius: $border-radius-default; @@ -134,8 +145,9 @@ } &.right-sidebar-merge-requests { - @include media-breakpoint-down(sm) { + @include media-breakpoint-down(md) { @include right-sidebar; + z-index: 251; } } @@ -186,7 +198,7 @@ } .block { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { padding: $gl-spacing-scale-5 0; } } @@ -263,10 +275,6 @@ } } - &.affix-top .issuable-sidebar { - height: 100%; - } - &.right-sidebar-expanded { &:not(.right-sidebar-merge-requests) { width: $gutter-width; @@ -280,8 +288,33 @@ padding: 0 20px; &.is-merge-request { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { padding: 0; + + form { + --initial-top: calc(#{$header-height} + #{$mr-tabs-height}); + --top: var(--initial-top); + + @include gl-sticky; + @include gl-overflow-auto; + + top: var(--top); + height: calc(100vh - var(--top)); + padding: 0 15px; + margin-bottom: calc(var(--top) * -1); + + .with-performance-bar & { + --top: calc(var(--initial-top) + #{$performance-bar-height}); + } + + .with-system-header & { + --top: calc(var(--initial-top) + #{$system-header-height}); + } + + .with-performance-bar.with-system-header & { + --top: calc(var(--initial-top) + #{$system-header-height} + #{$performance-bar-height}); + } + } } } } @@ -334,7 +367,7 @@ } &.right-sidebar-merge-requests { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { display: block; } } @@ -617,21 +650,6 @@ } } -.issuable-status-box { - align-self: stretch; - display: flex; - justify-content: center; - align-items: center; - margin-top: 0; - padding: 0 $gl-padding-8; - - @include media-breakpoint-up(sm) { - display: inline-block; - height: auto; - align-self: center; - } -} - .issuable-gutter-toggle { @include media-breakpoint-down(sm) { margin-left: $btn-side-margin; @@ -919,3 +937,58 @@ margin-right: -7px; z-index: 1; } + +.issuable-discussion.incident-timeline-events { + .main-notes-list::before { + content: none; + } + + .timeline-event-note { + p { + margin-bottom: 0; + } + } +} + +/** + * We have a very specific design proposal where we cannot + * use `vertical-line` mixin as it is and have to use + * custom styles, see https://gitlab.com/gitlab-org/gitlab/-/merge_requests/81284#note_904867444 + */ +.timeline-entry-vertical-line { + &::before, + &::after { + content: ''; + border-left: 2px solid $gray-50; + position: absolute; + left: 39px; + height: 80%; + } + + &:first-child::before, + &:last-child::after { + content: none; + } + + &:first-child { + &::after { + top: 50%; + } + } + + &:last-child { + &::before { + bottom: 50%; + } + } + + &:not(:first-child):not(:last-child) { + &::before { + top: -10%; + } + + &::after { + bottom: -10%; + } + } +} diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 82216b8d5c5..bd66319d78f 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -74,21 +74,11 @@ > li:not(.empty-message):not(.no-border) { background-color: $white; - margin-bottom: 5px; display: flex; justify-content: space-between; - padding: $gl-padding; - border-radius: $border-radius-default; - border: 1px solid $gray-50; - - &:last-child { - margin-bottom: 0; - } .prioritized-labels:not(.is-not-draggable) & { - box-shadow: 0 1px 2px $issue-boards-card-shadow; cursor: grab; - border: 0; &:active { cursor: grabbing; @@ -111,11 +101,6 @@ width: 109px; } -.labels-container { - border-radius: $border-radius-default; - padding: $gl-padding $gl-padding-8; -} - .label-actions-list { list-style: none; flex-shrink: 0; diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 0d3ed0e7c71..a3fbedd87a9 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -3,6 +3,7 @@ * */ $tabs-holder-z-index: 250; +$comparison-empty-state-height: 62px; .space-children { @include clearfix; @@ -70,6 +71,10 @@ $tabs-holder-z-index: 250; } } +.compare-commit-empty { + min-height: $comparison-empty-state-height; +} + .commits-empty { text-align: center; @@ -200,11 +205,6 @@ $tabs-holder-z-index: 250; } } -.assign-to-me-link { - padding-left: 12px; - white-space: nowrap; -} - .table-holder { .ci-table { th { @@ -214,14 +214,9 @@ $tabs-holder-z-index: 250; } } -.merge-request-tabs-holder, -.epic-tabs-holder { +.merge-request-tabs-holder { top: $header-height; z-index: $tabs-holder-z-index; - margin-left: -$gl-padding; - margin-right: -$gl-padding; - padding-left: $gl-padding; - padding-right: $gl-padding; background-color: $body-bg; border-bottom: 1px solid $border-color; @@ -251,30 +246,14 @@ $tabs-holder-z-index: 250; } } -.merge-request-tabs-holder.affix .merge-request-tabs-container, -.epic-tabs-holder.affix .epic-tabs-container { - padding-left: $gl-padding; - padding-right: $gl-padding; -} - .with-performance-bar { - .merge-request-tabs-holder, - .epic-tabs-holder { + .merge-request-tabs-holder { top: calc(#{$header-height} + #{$performance-bar-height}); } } -.merge-request-tabs, -.epic-tabs { - display: flex; - flex-wrap: nowrap; - margin-bottom: 0; - padding: 0; -} - .limit-container-width { - .merge-request-tabs-container, - .epic-tabs-container { + .merge-request-tabs-container { max-width: $limited-layout-width; margin-left: auto; margin-right: auto; @@ -287,11 +266,7 @@ $tabs-holder-z-index: 250; } } -.merge-request-tabs-container, -.epic-tabs-container { - display: flex; - justify-content: space-between; - +.merge-request-tabs-container { @include media-breakpoint-down(xs) { .discussion-filter-container { margin-bottom: $gl-padding-4; @@ -318,16 +293,14 @@ $tabs-holder-z-index: 250; // Wrap MR tabs/buttons so you don't have to scroll on desktop @include media-breakpoint-down(md) { - .merge-request-tabs-container, - .epic-tabs-container { + .merge-request-tabs-container { flex-direction: column-reverse; } } @include media-breakpoint-down(lg) { .right-sidebar-expanded { - .merge-request-tabs-container, - .epic-tabs-container { + .merge-request-tabs-container { flex-direction: column-reverse; align-items: flex-start; } @@ -335,8 +308,7 @@ $tabs-holder-z-index: 250; } .limit-container-width:not(.container-limited) { - .merge-request-tabs-holder:not(.affix) .merge-request-tabs-container, - .epic-tabs-holder:not(.affix) .epic-tabs-container { + .merge-request-tabs-holder .merge-request-tabs-container { max-width: $limited-layout-width - ($gl-padding * 2); } } diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 1c408f6d985..645f145328b 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -55,16 +55,6 @@ box-shadow ease-in-out 0.15s; background-color: $white; - &.is-focused { - border-color: $input-focus-border-color; - box-shadow: $input-focus-box-shadow; - - .comment-toolbar, - .nav-links { - border-color: $blue-300; - } - } - &.is-dropzone-hover { border-color: $green-500; box-shadow: 0 0 2px $black-transparent, @@ -75,9 +65,22 @@ border-color: $green-500; } } + + // Disable inner focus + textarea:focus { + @include gl-shadow-none; + } + } + + .comment-warning-wrapper:focus-within { + @include gl-focus; } } +.md-area:focus-within { + @include gl-focus; +} + .md-header .nav-links { display: flex; flex-flow: row wrap; @@ -428,7 +431,11 @@ table { } .comment-warning-wrapper { + transition: border-color ease-in-out 0.15s, + box-shadow ease-in-out 0.15s; + .md-area { border: 0; + box-shadow: none; } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 1949603b416..82e96dee4c6 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -20,7 +20,7 @@ $system-note-svg-size: 16px; } .note-wrapper { - padding: $gl-padding; + padding: $gl-padding $gl-padding-8 $gl-padding $gl-padding; &.outlined { @include outline-comment(); @@ -199,6 +199,7 @@ $system-note-svg-size: 16px; } .note-body { + padding: $gl-padding-4; overflow-x: auto; overflow-y: hidden; @@ -564,7 +565,6 @@ $system-note-svg-size: 16px; } .discussion-header { - min-height: $line-height-base * 2em; box-sizing: content-box; .note-header-info { @@ -579,6 +579,7 @@ $system-note-svg-size: 16px; &.note-wrapper { display: flex; align-items: center; + padding-right: $gl-padding; } } @@ -615,6 +616,7 @@ $system-note-svg-size: 16px; .note-header-info { min-width: 0; + padding-left: $gl-padding-4; &.discussion { padding-bottom: 0; @@ -623,7 +625,7 @@ $system-note-svg-size: 16px; .note-header-info, .note-actions { - padding-bottom: $gl-padding-8; + padding-bottom: $gl-padding-4; } .system-note .note-header-info { diff --git a/app/assets/stylesheets/pages/pages.scss b/app/assets/stylesheets/pages/pages.scss deleted file mode 100644 index 2de33f20595..00000000000 --- a/app/assets/stylesheets/pages/pages.scss +++ /dev/null @@ -1,55 +0,0 @@ -.pages-domain-list { - &-item { - align-items: center; - - .domain-status { - display: inline-flex; - left: $gl-padding; - position: absolute; - } - - .domain-name { - flex-grow: 1; - } - - } - - &.has-verification-status > li { - padding-left: 3 * $gl-padding; - } - -} - -.status-badge { - - display: inline-flex; - margin-bottom: $gl-padding-8; - - // Most of the following settings "stolen" from btn-sm - // Border radius is overwritten for both - .label, - .btn { - padding: $gl-padding-4 $gl-padding-8; - font-size: $gl-font-size; - line-height: $gl-btn-line-height; - border-radius: 0; - display: flex; - align-items: center; - } - - .btn svg { - top: auto; - } - - :first-child { - line-height: $gl-line-height; - } - - :not(:first-child) { - border-left: 0; - } - - :last-child { - border-radius: $border-radius-default; - } -} diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index f76a8030e5b..812cc6ab4e6 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -363,10 +363,6 @@ table.u2f-registrations { color: $gl-text-color-secondary; } -.gitlab-slack-body { - max-width: 420px; -} - .gitlab-slack-slack-logo { transform: scale(200%); // Slack logo SVG is scaled down 50% and has empty space around it } diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss index b583d40de79..518ec181e5e 100644 --- a/app/assets/stylesheets/pages/profiles/preferences.scss +++ b/app/assets/stylesheets/pages/profiles/preferences.scss @@ -1,6 +1,6 @@ .application-theme { - $ui-dark-bg: #2e2e2e; - $ui-light-bg: #dfdfdf; + $ui-gray-bg: #2e2e2e; + $ui-light-gray-bg: #dfdfdf; $ui-dark-mode-bg: #1f1f1f; .preview { @@ -42,13 +42,13 @@ background-color: $theme-light-red-700; } - &.ui-dark { - background-color: $ui-dark-bg; + &.ui-gray { + background-color: $ui-gray-bg; border: solid 1px $border-color; } - &.ui-light { - background-color: $ui-light-bg; + &.ui-light-gray { + background-color: $ui-light-gray-bg; } &.gl-dark { diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss index f79237eee3d..e1f540c0f5f 100644 --- a/app/assets/stylesheets/snippets.scss +++ b/app/assets/stylesheets/snippets.scss @@ -26,6 +26,7 @@ &.gl-snippet-icon-doc-code { background-position: 0 0; } &.gl-snippet-icon-doc-text { background-position: 0 -16px; } &.gl-snippet-icon-download { background-position: 0 -32px; } + &.gl-snippet-icon-copy-to-clipboard { background-position: 0 -48px; } } .blob-viewer { @@ -109,6 +110,7 @@ .file-header-content { max-width: 75%; + align-self: center; .file-title-name { font-weight: $gl-font-weight-bold; @@ -143,6 +145,7 @@ } .btn-group { + button.btn, a.btn { background-color: $white; text-decoration: none; @@ -165,5 +168,9 @@ border-right: $border-style; } } + + button.btn { + padding: 9px 9px 8px; + } } } diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 001431e517b..4cefa60b12a 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -42,10 +42,6 @@ body { text-align: left; background-color: #1f1f1f; } -h1 { - margin-top: 0; - margin-bottom: 0.25rem; -} ul { margin-top: 0; margin-bottom: 1rem; @@ -105,15 +101,6 @@ button::-moz-focus-inner, [type="search"] { outline-offset: -2px; } -h1 { - margin-bottom: 0.25rem; - font-weight: 600; - line-height: 1.2; - color: #fafafa; -} -h1 { - font-size: 2.1875rem; -} .list-unstyled { padding-left: 0; list-style: none; @@ -363,9 +350,6 @@ h1 { white-space: nowrap; border: 0; } -.m-auto { - margin: auto !important; -} .gl-badge { display: inline-flex; align-items: center; @@ -547,10 +531,6 @@ html [type="button"], [role="button"] { cursor: pointer; } -h1 { - margin-top: 20px; - margin-bottom: 10px; -} strong { font-weight: bold; } @@ -634,6 +614,10 @@ body { .dropdown { position: relative; } +.dropdown-menu-toggle:active { + box-shadow: 0 0 0 1px #333, 0 0 0 3px #1f75cb; + outline: none; +} .search-input-container .dropdown-menu { margin-top: 11px; } @@ -684,7 +668,6 @@ body { display: block; text-align: left; list-style: none; - padding: 0 1px; } .dropdown-menu li > a, .dropdown-menu li button { @@ -710,6 +693,12 @@ body { outline: 0; text-decoration: none; } +.dropdown-menu li > a:active, +.dropdown-menu li button:active { + box-shadow: inset 0 0 0 2px #1f75cb, inset 0 0 0 3px #333, + inset 0 0 0 1px #333; + outline: none; +} .dropdown-menu .divider { height: 1px; margin: 0.25rem 0; @@ -755,7 +744,7 @@ input { padding: 0 16px; z-index: 1000; margin-bottom: 0; - min-height: var(--header-height, 40px); + min-height: var(--header-height, 48px); border: 0; position: fixed; top: 0; @@ -771,7 +760,7 @@ input { display: flex; justify-content: space-between; position: relative; - min-height: var(--header-height, 40px); + min-height: var(--header-height, 48px); padding-left: 0; } .navbar-gitlab .header-content .title { @@ -787,16 +776,17 @@ input { .navbar-gitlab .header-content .title img { height: 24px; } -.navbar-gitlab .header-content .title img + .logo-text { - margin-left: 8px; -} .navbar-gitlab .header-content .title a { display: flex; align-items: center; padding: 2px 8px; - margin: 4px 2px 4px -12px; + margin: 4px 2px 4px -8px; border-radius: 4px; } +.navbar-gitlab .header-content .title a:active { + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 3px #1068bf; + outline: none; +} .navbar-gitlab .header-content .title .canary-badge { margin-left: -8px; } @@ -902,6 +892,13 @@ input { height: 32px; font-weight: 600; } +.navbar-sub-nav > li > a:active, +.navbar-sub-nav > li > button:active, +.navbar-nav > li > a:active, +.navbar-nav > li > button:active { + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 3px #1068bf; + outline: none; +} .navbar-sub-nav > li .top-nav-toggle, .navbar-sub-nav > li > button, .navbar-nav > li .top-nav-toggle, @@ -915,6 +912,8 @@ input { } .navbar-sub-nav { display: flex; + align-items: center; + height: 100%; margin: 0 0 0 6px; } .caret-down, @@ -990,7 +989,7 @@ input { .context-header { position: relative; margin-right: 2px; - width: 220px; + width: 256px; } .context-header > a, .context-header > button { @@ -1015,17 +1014,17 @@ input { } @media (min-width: 768px) { .page-with-contextual-sidebar { - padding-left: 48px; + padding-left: 56px; } } @media (min-width: 1200px) { .page-with-contextual-sidebar { - padding-left: 220px; + padding-left: 256px; } } @media (min-width: 768px) { .page-with-icon-sidebar { - padding-left: 48px; + padding-left: 56px; } } .nav-sidebar { @@ -1033,13 +1032,14 @@ input { bottom: 0; left: 0; z-index: 600; - width: 220px; - top: var(--header-height, 40px); - background-color: #303030; + width: 256px; + top: var(--header-height, 48px); + background-color: #f5f5f5; + border-right: 1px solid #e9e9e9; transform: translate3d(0, 0, 0); } .nav-sidebar.sidebar-collapsed-desktop { - width: 48px; + width: 56px; } .nav-sidebar.sidebar-collapsed-desktop .nav-sidebar-inner-scroll { overflow-x: hidden; @@ -1092,7 +1092,7 @@ input { border-radius: 0.25rem; width: auto; line-height: 1rem; - margin: 1px 4px; + margin: 1px 8px; } .nav-sidebar li.active > a { font-weight: 600; @@ -1106,7 +1106,7 @@ input { } @media (max-width: 767.98px) { .nav-sidebar { - left: -220px; + left: -256px; } } .nav-sidebar .nav-icon-container { @@ -1228,7 +1228,7 @@ input { } @media (min-width: 768px) and (max-width: 1199px) { .nav-sidebar:not(.sidebar-expanded-mobile) { - width: 48px; + width: 56px; } .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { overflow-x: hidden; @@ -1263,7 +1263,7 @@ input { } .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { height: 60px; - width: 48px; + width: 56px; } .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { padding: 10px 4px; @@ -1295,7 +1295,8 @@ input { margin-right: 0; } .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { - width: 48px; + width: 55px; + padding: 0 21px; } .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button @@ -1328,10 +1329,10 @@ input { border-radius: 0.25rem; width: auto; line-height: 1rem; - margin: 1px 4px; + margin: 1px 8px; padding: 0.25rem; margin-bottom: 0.25rem; - margin-top: 0; + margin-top: 0.125rem; } .nav-sidebar-inner-scroll > div.context-header a .avatar-container { font-weight: 400; @@ -1350,13 +1351,12 @@ input { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .sidebar-top-level-items { - margin-top: 0.25rem; margin-bottom: 60px; } .sidebar-top-level-items .context-header a { padding: 0.25rem; margin-bottom: 0.25rem; - margin-top: 0; + margin-top: 0.125rem; } .sidebar-top-level-items .context-header a .avatar-container { font-weight: 400; @@ -1402,11 +1402,10 @@ input { color: #999; display: flex; align-items: center; - background-color: #303030; - border-top: 1px solid #404040; + background-color: #f5f5f5; position: fixed; bottom: 0; - width: 220px; + width: 255px; } .toggle-sidebar-button .collapse-text, .toggle-sidebar-button .icon-chevron-double-lg-left, @@ -1420,7 +1419,7 @@ input { } .sidebar-collapsed-desktop .context-header { height: 60px; - width: 48px; + width: 56px; } .sidebar-collapsed-desktop .context-header a { padding: 10px 4px; @@ -1452,7 +1451,8 @@ input { margin-right: 0; } .sidebar-collapsed-desktop .toggle-sidebar-button { - width: 48px; + width: 55px; + padding: 0 21px; } .sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text { display: none; @@ -1788,6 +1788,12 @@ body.gl-dark { --svg-status-bg: #333; --nav-active-bg: rgba(255, 255, 255, 0.08); } +.nav-sidebar, +.toggle-sidebar-button, +.close-nav-button { + background-color: #262626; + border-right: 1px solid #303030; +} .nav-sidebar li a { color: var(--gray-600); } @@ -2044,19 +2050,9 @@ body.gl-dark { .gl-display-none { display: none; } -@media (min-width: 992px) { - .gl-lg-display-none\! { - display: none !important; - } -} .gl-display-flex { display: flex; } -@media (min-width: 992px) { - .gl-lg-display-flex { - display: flex; - } -} @media (min-width: 576px) { .gl-sm-display-block { display: block; @@ -2070,12 +2066,18 @@ body.gl-dark { .gl-display-inline-block\! { display: inline-block !important; } +.gl-align-items-center { + align-items: center; +} .gl-align-items-stretch { align-items: stretch; } .gl-flex-grow-1 { flex-grow: 1; } +.gl-justify-content-end { + justify-content: flex-end; +} .gl-relative { position: relative; } diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index c42b5554d8d..cb3c97f18a3 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -27,10 +27,6 @@ body { text-align: left; background-color: #fff; } -h1 { - margin-top: 0; - margin-bottom: 0.25rem; -} ul { margin-top: 0; margin-bottom: 1rem; @@ -90,15 +86,6 @@ button::-moz-focus-inner, [type="search"] { outline-offset: -2px; } -h1 { - margin-bottom: 0.25rem; - font-weight: 600; - line-height: 1.2; - color: #303030; -} -h1 { - font-size: 2.1875rem; -} .list-unstyled { padding-left: 0; list-style: none; @@ -348,9 +335,6 @@ h1 { white-space: nowrap; border: 0; } -.m-auto { - margin: auto !important; -} .gl-badge { display: inline-flex; align-items: center; @@ -431,7 +415,7 @@ a.gl-badge.badge-warning:active { .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only, .gl-form-input.form-control:disabled, .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only { - background-color: #fafafa; + background-color: #f5f5f5; box-shadow: inset 0 0 0 1px #dbdbdb; } .gl-form-input:disabled, @@ -532,10 +516,6 @@ html [type="button"], [role="button"] { cursor: pointer; } -h1 { - margin-top: 20px; - margin-bottom: 10px; -} strong { font-weight: bold; } @@ -619,6 +599,10 @@ body { .dropdown { position: relative; } +.dropdown-menu-toggle:active { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #428fdc; + outline: none; +} .search-input-container .dropdown-menu { margin-top: 11px; } @@ -669,7 +653,6 @@ body { display: block; text-align: left; list-style: none; - padding: 0 1px; } .dropdown-menu li > a, .dropdown-menu li button { @@ -695,6 +678,12 @@ body { outline: 0; text-decoration: none; } +.dropdown-menu li > a:active, +.dropdown-menu li button:active { + box-shadow: inset 0 0 0 2px #428fdc, inset 0 0 0 3px #fff, + inset 0 0 0 1px #fff; + outline: none; +} .dropdown-menu .divider { height: 1px; margin: 0.25rem 0; @@ -740,7 +729,7 @@ input { padding: 0 16px; z-index: 1000; margin-bottom: 0; - min-height: var(--header-height, 40px); + min-height: var(--header-height, 48px); border: 0; position: fixed; top: 0; @@ -756,7 +745,7 @@ input { display: flex; justify-content: space-between; position: relative; - min-height: var(--header-height, 40px); + min-height: var(--header-height, 48px); padding-left: 0; } .navbar-gitlab .header-content .title { @@ -772,16 +761,17 @@ input { .navbar-gitlab .header-content .title img { height: 24px; } -.navbar-gitlab .header-content .title img + .logo-text { - margin-left: 8px; -} .navbar-gitlab .header-content .title a { display: flex; align-items: center; padding: 2px 8px; - margin: 4px 2px 4px -12px; + margin: 4px 2px 4px -8px; border-radius: 4px; } +.navbar-gitlab .header-content .title a:active { + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px #63a6e9; + outline: none; +} .navbar-gitlab .header-content .title .canary-badge { margin-left: -8px; } @@ -887,6 +877,13 @@ input { height: 32px; font-weight: 600; } +.navbar-sub-nav > li > a:active, +.navbar-sub-nav > li > button:active, +.navbar-nav > li > a:active, +.navbar-nav > li > button:active { + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px #63a6e9; + outline: none; +} .navbar-sub-nav > li .top-nav-toggle, .navbar-sub-nav > li > button, .navbar-nav > li .top-nav-toggle, @@ -900,6 +897,8 @@ input { } .navbar-sub-nav { display: flex; + align-items: center; + height: 100%; margin: 0 0 0 6px; } .caret-down, @@ -975,7 +974,7 @@ input { .context-header { position: relative; margin-right: 2px; - width: 220px; + width: 256px; } .context-header > a, .context-header > button { @@ -1000,17 +999,17 @@ input { } @media (min-width: 768px) { .page-with-contextual-sidebar { - padding-left: 48px; + padding-left: 56px; } } @media (min-width: 1200px) { .page-with-contextual-sidebar { - padding-left: 220px; + padding-left: 256px; } } @media (min-width: 768px) { .page-with-icon-sidebar { - padding-left: 48px; + padding-left: 56px; } } .nav-sidebar { @@ -1018,13 +1017,14 @@ input { bottom: 0; left: 0; z-index: 600; - width: 220px; - top: var(--header-height, 40px); - background-color: #f0f0f0; + width: 256px; + top: var(--header-height, 48px); + background-color: #f5f5f5; + border-right: 1px solid #e9e9e9; transform: translate3d(0, 0, 0); } .nav-sidebar.sidebar-collapsed-desktop { - width: 48px; + width: 56px; } .nav-sidebar.sidebar-collapsed-desktop .nav-sidebar-inner-scroll { overflow-x: hidden; @@ -1077,7 +1077,7 @@ input { border-radius: 0.25rem; width: auto; line-height: 1rem; - margin: 1px 4px; + margin: 1px 8px; } .nav-sidebar li.active > a { font-weight: 600; @@ -1091,7 +1091,7 @@ input { } @media (max-width: 767.98px) { .nav-sidebar { - left: -220px; + left: -256px; } } .nav-sidebar .nav-icon-container { @@ -1213,7 +1213,7 @@ input { } @media (min-width: 768px) and (max-width: 1199px) { .nav-sidebar:not(.sidebar-expanded-mobile) { - width: 48px; + width: 56px; } .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { overflow-x: hidden; @@ -1248,7 +1248,7 @@ input { } .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { height: 60px; - width: 48px; + width: 56px; } .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { padding: 10px 4px; @@ -1280,7 +1280,8 @@ input { margin-right: 0; } .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { - width: 48px; + width: 55px; + padding: 0 21px; } .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button @@ -1313,10 +1314,10 @@ input { border-radius: 0.25rem; width: auto; line-height: 1rem; - margin: 1px 4px; + margin: 1px 8px; padding: 0.25rem; margin-bottom: 0.25rem; - margin-top: 0; + margin-top: 0.125rem; } .nav-sidebar-inner-scroll > div.context-header a .avatar-container { font-weight: 400; @@ -1335,13 +1336,12 @@ input { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .sidebar-top-level-items { - margin-top: 0.25rem; margin-bottom: 60px; } .sidebar-top-level-items .context-header a { padding: 0.25rem; margin-bottom: 0.25rem; - margin-top: 0; + margin-top: 0.125rem; } .sidebar-top-level-items .context-header a .avatar-container { font-weight: 400; @@ -1387,11 +1387,10 @@ input { color: #666; display: flex; align-items: center; - background-color: #f0f0f0; - border-top: 1px solid #dbdbdb; + background-color: #f5f5f5; position: fixed; bottom: 0; - width: 220px; + width: 255px; } .toggle-sidebar-button .collapse-text, .toggle-sidebar-button .icon-chevron-double-lg-left, @@ -1405,7 +1404,7 @@ input { } .sidebar-collapsed-desktop .context-header { height: 60px; - width: 48px; + width: 56px; } .sidebar-collapsed-desktop .context-header a { padding: 10px 4px; @@ -1437,7 +1436,8 @@ input { margin-right: 0; } .sidebar-collapsed-desktop .toggle-sidebar-button { - width: 48px; + width: 55px; + padding: 0 21px; } .sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text { display: none; @@ -1704,19 +1704,9 @@ svg.s16 { .gl-display-none { display: none; } -@media (min-width: 992px) { - .gl-lg-display-none\! { - display: none !important; - } -} .gl-display-flex { display: flex; } -@media (min-width: 992px) { - .gl-lg-display-flex { - display: flex; - } -} @media (min-width: 576px) { .gl-sm-display-block { display: block; @@ -1730,12 +1720,18 @@ svg.s16 { .gl-display-inline-block\! { display: inline-block !important; } +.gl-align-items-center { + align-items: center; +} .gl-align-items-stretch { align-items: stretch; } .gl-flex-grow-1 { flex-grow: 1; } +.gl-justify-content-end { + justify-content: flex-end; +} .gl-relative { position: relative; } diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index 020ed9c040b..3090edfb123 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -297,7 +297,7 @@ fieldset:disabled a.btn { .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only, .gl-form-input.form-control:disabled, .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only { - background-color: #fafafa; + background-color: #f5f5f5; box-shadow: inset 0 0 0 1px #dbdbdb; } .gl-form-input:disabled, @@ -419,7 +419,7 @@ body.navless { } } .navless-container { - margin-top: var(--header-height, 40px); + margin-top: var(--header-height, 48px); padding-top: 32px; } .btn { @@ -506,7 +506,7 @@ label.label-bold { } .navbar-empty { justify-content: center; - height: var(--header-height, 40px); + height: var(--header-height, 48px); background: #fff; border-bottom: 1px solid #dbdbdb; } diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index 6a9e96c3ac5..fe8a5aec1b3 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -209,7 +209,6 @@ body.gl-dark { &.btn-info, &.btn-success, &.btn-danger, - &.btn-warning, &.btn-confirm { &-tertiary { mix-blend-mode: screen; diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss index dbb961fe71f..34bb4925249 100644 --- a/app/assets/stylesheets/themes/dark_mode_overrides.scss +++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss @@ -41,6 +41,13 @@ border-color: $gray-800; } +.nav-sidebar, +.toggle-sidebar-button, +.close-nav-button { + background-color: darken($gray-50, 4%); + border-right: 1px solid $gray-50; +} + .nav-sidebar { li { a { @@ -68,6 +75,11 @@ } } +aside.right-sidebar:not(.right-sidebar-merge-requests) { + background-color: $gray-10; + border-left-color: $gray-50; +} + body.gl-dark { @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-900, $gray-900, $white); diff --git a/app/assets/stylesheets/themes/theme_dark.scss b/app/assets/stylesheets/themes/theme_gray.scss index 4c52cdc30df..75b111f90c7 100644 --- a/app/assets/stylesheets/themes/theme_dark.scss +++ b/app/assets/stylesheets/themes/theme_gray.scss @@ -1,7 +1,7 @@ @import './theme_helper'; body { - &.ui-dark { + &.ui-gray { @include gitlab-theme( $gray-200, $gray-300, diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index 234010074aa..ad352f0022b 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -97,8 +97,7 @@ .notification-dot { will-change: border-color, background-color; - // stylelint-disable-next-line - border-color: $nav-svg-color + 33; + border-color: adjust-color($nav-svg-color, $red: 33, $green: 33, $blue: 33); } &.header-help-dropdown-toggle .notification-dot { diff --git a/app/assets/stylesheets/themes/theme_light.scss b/app/assets/stylesheets/themes/theme_light_gray.scss index 66b2b3c3437..ad19438d79a 100644 --- a/app/assets/stylesheets/themes/theme_light.scss +++ b/app/assets/stylesheets/themes/theme_light_gray.scss @@ -1,7 +1,7 @@ @import './theme_helper'; body { - &.ui-light { + &.ui-light-gray { @include gitlab-theme( $gray-500, $gray-700, @@ -33,6 +33,14 @@ body { &.active > button { color: $white; } + + > a, + > button { + &:active, + &:focus { + @include gl-focus; + } + } } } diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index fd85ff894a7..27fcade548f 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -368,28 +368,49 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709 } /* - * The below style will be moved to @gitlab/ui by - * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1792 + * The styles from here to END-#1825 will be moved to @gitlab/ui by + * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1825 */ -.gl-text-purple-800 { - color: $purple-800; +.gl-lg-mx-12 { + @include media-breakpoint-up(lg) { + margin-left: $gl-spacing-scale-12; + margin-right: $gl-spacing-scale-12; + } } -.gl-bg-theme-indigo-800 { - background-color: $theme-indigo-800; +.gl-lg-ml-12 { + @include media-breakpoint-up(lg) { + margin-left: $gl-spacing-scale-12; + } } -.gl-border-indigo-700 { - border-color: $theme-indigo-700; +.gl-lg-mr-12 { + @include media-breakpoint-up(lg) { + margin-right: $gl-spacing-scale-12; + } } -.gl-border-gray-75 { - border-color: $gl-text-color-quaternary; +.gl-lg-ml-10 { + @include media-breakpoint-up(lg) { + margin-left: $gl-spacing-scale-10; + } } -.gl-min-h-8 { - min-height: $gl-spacing-scale-8; +.gl-lg-mr-10 { + @include media-breakpoint-up(lg) { + margin-right: $gl-spacing-scale-10; + } } -/* End gitlab-ui#1751 */ +.gl-lg-w-30p { + @include gl-media-breakpoint-up(lg) { + width: 30%; + } +} +.gl-lg-w-40p { + @include gl-media-breakpoint-up(lg) { + width: 40%; + } +} +/* END-#1825 */ |
