diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-14 03:14:57 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-14 03:14:57 +0300 |
commit | 1d54f384d509d9581730e24a64561e94132e41c1 (patch) | |
tree | b53346e16f2129de0872f9e1cc28bb468fffee04 /app/assets | |
parent | f163fc8ce6d7661ccf0ff9aa4561f6e5a708b71b (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
16 files changed, 199 insertions, 114 deletions
diff --git a/app/assets/javascripts/header_search/components/app.vue b/app/assets/javascripts/header_search/components/app.vue index c22f532d7ac..edc6573a489 100644 --- a/app/assets/javascripts/header_search/components/app.vue +++ b/app/assets/javascripts/header_search/components/app.vue @@ -140,6 +140,7 @@ export default { class="header-search gl-relative" > <gl-search-box-by-type + id="search" v-model="searchText" role="searchbox" class="gl-z-index-1" diff --git a/app/assets/javascripts/integrations/constants.js b/app/assets/javascripts/integrations/constants.js index 74d99d02fc5..177e3d6f9cc 100644 --- a/app/assets/javascripts/integrations/constants.js +++ b/app/assets/javascripts/integrations/constants.js @@ -1,6 +1,5 @@ import { s__, __ } from '~/locale'; -export const TEST_INTEGRATION_EVENT = 'testIntegration'; export const SAVE_INTEGRATION_EVENT = 'saveIntegration'; export const VALIDATE_INTEGRATION_FORM_EVENT = 'validateIntegrationForm'; diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue index a30c84bd4d2..60a6d13ce69 100644 --- a/app/assets/javascripts/integrations/edit/components/integration_form.vue +++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue @@ -1,14 +1,18 @@ <script> import { GlButton, GlModalDirective, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; +import * as Sentry from '@sentry/browser'; import { mapState, mapActions, mapGetters } from 'vuex'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { - TEST_INTEGRATION_EVENT, SAVE_INTEGRATION_EVENT, + VALIDATE_INTEGRATION_FORM_EVENT, + I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE, + I18N_DEFAULT_ERROR_MESSAGE, + I18N_SUCCESSFUL_CONNECTION_MESSAGE, integrationLevels, } from '~/integrations/constants'; import eventHub from '../event_hub'; - +import { testIntegrationSettings } from '../api'; import ActiveCheckbox from './active_checkbox.vue'; import ConfirmationModal from './confirmation_modal.vue'; import DynamicField from './dynamic_field.vue'; @@ -50,18 +54,12 @@ export default { data() { return { integrationActive: false, + testingLoading: false, }; }, computed: { ...mapGetters(['currentKey', 'propsSource', 'isDisabled']), - ...mapState([ - 'defaultState', - 'customState', - 'override', - 'isSaving', - 'isTesting', - 'isResetting', - ]), + ...mapState(['defaultState', 'customState', 'override', 'isSaving', 'isResetting']), isEditable() { return this.propsSource.editable; }, @@ -74,9 +72,18 @@ export default { this.customState.integrationLevel === integrationLevels.GROUP ); }, - showReset() { + showResetButton() { return this.isInstanceOrGroupLevel && this.propsSource.resetPath; }, + showTestButton() { + return this.propsSource.canTest; + }, + disableSaveButton() { + return Boolean(this.isResetting || this.testingLoading); + }, + disableResetButton() { + return Boolean(this.isSaving || this.testingLoading); + }, }, mounted() { // this form element is defined in Haml @@ -86,7 +93,6 @@ export default { ...mapActions([ 'setOverride', 'setIsSaving', - 'setIsTesting', 'setIsResetting', 'fetchResetIntegration', 'requestJiraIssueTypes', @@ -98,17 +104,39 @@ export default { eventHub.$emit(SAVE_INTEGRATION_EVENT, formValid); }, onTestClick() { - this.setIsTesting(true); + this.testingLoading = true; - const formValid = this.form.checkValidity(); - eventHub.$emit(TEST_INTEGRATION_EVENT, formValid); + if (!this.form.checkValidity()) { + eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT); + return; + } + + testIntegrationSettings(this.propsSource.testPath, this.getFormData()) + .then(({ data: { error, message = I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE } }) => { + if (error) { + eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT); + this.$toast.show(message); + return; + } + + this.$toast.show(I18N_SUCCESSFUL_CONNECTION_MESSAGE); + }) + .catch((error) => { + this.$toast.show(I18N_DEFAULT_ERROR_MESSAGE); + Sentry.captureException(error); + }) + .finally(() => { + this.testingLoading = false; + }); }, onResetClick() { this.fetchResetIntegration(); }, onRequestJiraIssueTypes() { - const formData = new FormData(this.form); - this.requestJiraIssueTypes(formData); + this.requestJiraIssueTypes(this.getFormData()); + }, + getFormData() { + return new FormData(this.form); }, onToggleIntegrationState(integrationActive) { this.integrationActive = integrationActive; @@ -183,7 +211,7 @@ export default { category="primary" variant="confirm" :loading="isSaving" - :disabled="isDisabled" + :disabled="disableSaveButton" data-qa-selector="save_changes_button" > {{ __('Save changes') }} @@ -196,7 +224,7 @@ export default { variant="confirm" type="submit" :loading="isSaving" - :disabled="isDisabled" + :disabled="disableSaveButton" data-testid="save-button" data-qa-selector="save_changes_button" @click.prevent="onSaveClick" @@ -205,25 +233,24 @@ export default { </gl-button> <gl-button - v-if="propsSource.canTest" + v-if="showTestButton" category="secondary" variant="confirm" - :loading="isTesting" + :loading="testingLoading" :disabled="isDisabled" - :href="propsSource.testPath" data-testid="test-button" @click.prevent="onTestClick" > {{ __('Test settings') }} </gl-button> - <template v-if="showReset"> + <template v-if="showResetButton"> <gl-button v-gl-modal.confirmResetIntegration category="secondary" variant="confirm" :loading="isResetting" - :disabled="isDisabled" + :disabled="disableResetButton" data-testid="reset-button" > {{ __('Reset') }} diff --git a/app/assets/javascripts/integrations/edit/store/actions.js b/app/assets/javascripts/integrations/edit/store/actions.js index b81ae1b1cb6..6c1bfaa7858 100644 --- a/app/assets/javascripts/integrations/edit/store/actions.js +++ b/app/assets/javascripts/integrations/edit/store/actions.js @@ -11,7 +11,6 @@ import * as types from './mutation_types'; export const setOverride = ({ commit }, override) => commit(types.SET_OVERRIDE, override); export const setIsSaving = ({ commit }, isSaving) => commit(types.SET_IS_SAVING, isSaving); -export const setIsTesting = ({ commit }, isTesting) => commit(types.SET_IS_TESTING, isTesting); export const setIsResetting = ({ commit }, isResetting) => commit(types.SET_IS_RESETTING, isResetting); diff --git a/app/assets/javascripts/integrations/edit/store/getters.js b/app/assets/javascripts/integrations/edit/store/getters.js index 39e14de2d0d..10d370de856 100644 --- a/app/assets/javascripts/integrations/edit/store/getters.js +++ b/app/assets/javascripts/integrations/edit/store/getters.js @@ -1,6 +1,6 @@ export const isInheriting = (state) => (state.defaultState === null ? false : !state.override); -export const isDisabled = (state) => state.isSaving || state.isTesting || state.isResetting; +export const isDisabled = (state) => state.isSaving || state.isResetting; export const propsSource = (state, getters) => getters.isInheriting ? state.defaultState : state.customState; diff --git a/app/assets/javascripts/integrations/edit/store/mutation_types.js b/app/assets/javascripts/integrations/edit/store/mutation_types.js index c681056a515..dd4a79f6fe0 100644 --- a/app/assets/javascripts/integrations/edit/store/mutation_types.js +++ b/app/assets/javascripts/integrations/edit/store/mutation_types.js @@ -1,6 +1,5 @@ export const SET_OVERRIDE = 'SET_OVERRIDE'; export const SET_IS_SAVING = 'SET_IS_SAVING'; -export const SET_IS_TESTING = 'SET_IS_TESTING'; export const SET_IS_RESETTING = 'SET_IS_RESETTING'; export const SET_IS_LOADING_JIRA_ISSUE_TYPES = 'SET_IS_LOADING_JIRA_ISSUE_TYPES'; diff --git a/app/assets/javascripts/integrations/edit/store/mutations.js b/app/assets/javascripts/integrations/edit/store/mutations.js index 279df1b9266..f76081e62f0 100644 --- a/app/assets/javascripts/integrations/edit/store/mutations.js +++ b/app/assets/javascripts/integrations/edit/store/mutations.js @@ -7,9 +7,6 @@ export default { [types.SET_IS_SAVING](state, isSaving) { state.isSaving = isSaving; }, - [types.SET_IS_TESTING](state, isTesting) { - state.isTesting = isTesting; - }, [types.SET_IS_RESETTING](state, isResetting) { state.isResetting = isResetting; }, diff --git a/app/assets/javascripts/integrations/edit/store/state.js b/app/assets/javascripts/integrations/edit/store/state.js index 1c0b274e4ef..3d40d1b90d5 100644 --- a/app/assets/javascripts/integrations/edit/store/state.js +++ b/app/assets/javascripts/integrations/edit/store/state.js @@ -6,7 +6,6 @@ export default ({ defaultState = null, customState = {} } = {}) => { defaultState, customState, isSaving: false, - isTesting: false, isResetting: false, isLoadingJiraIssueTypes: false, loadingJiraIssueTypesErrorMessage: '', diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js index d3c227df1ee..193bc1c4e9b 100644 --- a/app/assets/javascripts/integrations/integration_settings_form.js +++ b/app/assets/javascripts/integrations/integration_settings_form.js @@ -1,15 +1,7 @@ import { delay } from 'lodash'; -import toast from '~/vue_shared/plugins/global_toast'; import initForm from './edit'; import eventHub from './edit/event_hub'; -import { - TEST_INTEGRATION_EVENT, - SAVE_INTEGRATION_EVENT, - VALIDATE_INTEGRATION_FORM_EVENT, - I18N_DEFAULT_ERROR_MESSAGE, - I18N_SUCCESSFUL_CONNECTION_MESSAGE, -} from './constants'; -import { testIntegrationSettings } from './edit/api'; +import { SAVE_INTEGRATION_EVENT, VALIDATE_INTEGRATION_FORM_EVENT } from './constants'; export default class IntegrationSettingsForm { constructor(formSelector) { @@ -29,9 +21,6 @@ export default class IntegrationSettingsForm { document.querySelector('.js-vue-default-integration-settings'), this.formSelector, ); - eventHub.$on(TEST_INTEGRATION_EVENT, (formValid) => { - this.testIntegration(formValid); - }); eventHub.$on(SAVE_INTEGRATION_EVENT, (formValid) => { this.saveIntegration(formValid); }); @@ -53,47 +42,4 @@ export default class IntegrationSettingsForm { this.vue.$store.dispatch('setIsSaving', false); } } - - testIntegration(formValid) { - // Service was marked active so now we check; - // 1) If form contents are valid - // 2) If this service can be tested - // If both conditions are true, we override form submission - // and test the service using provided configuration. - if (formValid) { - this.testSettings(new FormData(this.$form)); - } else { - eventHub.$emit(VALIDATE_INTEGRATION_FORM_EVENT); - this.vue.$store.dispatch('setIsTesting', false); - } - } - - /** - * Get a list of Jira issue types for the currently configured project - * - * @param {string} formData - URL encoded string containing the form data - * - * @return {Promise} - */ - - /** - * Test Integration config - */ - testSettings(formData) { - return testIntegrationSettings(this.testEndPoint, formData) - .then(({ data }) => { - if (data.error) { - toast(`${data.message} ${data.service_response}`); - } else { - this.vue.$store.dispatch('receiveJiraIssueTypesSuccess', data.issuetypes); - toast(I18N_SUCCESSFUL_CONNECTION_MESSAGE); - } - }) - .catch(() => { - toast(I18N_DEFAULT_ERROR_MESSAGE); - }) - .finally(() => { - this.vue.$store.dispatch('setIsTesting', false); - }); - } } diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 0d307d7744b..99e8058b57d 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -14,7 +14,6 @@ import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import { initRails } from '~/lib/utils/rails_ujs'; import * as popovers from '~/popovers'; import * as tooltips from '~/tooltips'; -import { initHeaderSearchApp } from '~/header_search'; import initAlertHandler from './alert_handler'; import { addDismissFlashClickListener } from './flash'; import initTodoToggle from './header'; @@ -100,24 +99,29 @@ function deferredInitialisation() { initFeatureHighlight(); initCopyCodeButton(); - if (gon.features?.newHeaderSearch) { - initHeaderSearchApp(); - } else { - const search = document.querySelector('#search'); - if (search) { - search.addEventListener( - 'focus', - () => { + const search = document.querySelector('#search'); + if (search) { + search.addEventListener( + 'focus', + () => { + if (gon.features?.newHeaderSearch) { + import(/* webpackChunkName: 'globalSearch' */ '~/header_search') + .then(async ({ initHeaderSearchApp }) => { + await initHeaderSearchApp(); + document.querySelector('#search').focus(); + }) + .catch(() => {}); + } else { import(/* webpackChunkName: 'globalSearch' */ './search_autocomplete') .then(({ default: initSearchAutocomplete }) => { const searchDropdown = initSearchAutocomplete(); searchDropdown.onSearchInputFocus(); }) .catch(() => {}); - }, - { once: true }, - ); - } + } + }, + { once: true }, + ); } addSelectOnFocusBehaviour('.js-select-on-focus'); diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue index f07fb9d926a..e3aa29d5f89 100644 --- a/app/assets/javascripts/snippets/components/edit.vue +++ b/app/assets/javascripts/snippets/components/edit.vue @@ -230,7 +230,7 @@ export default { <gl-button category="primary" type="submit" - variant="success" + variant="confirm" :disabled="updatePrevented" data-qa-selector="submit_button" data-testid="snippet-submit-btn" diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue index a5c98a7ad90..9b24c8afe37 100644 --- a/app/assets/javascripts/snippets/components/snippet_header.vue +++ b/app/assets/javascripts/snippets/components/snippet_header.vue @@ -113,7 +113,7 @@ export default { href: this.snippet.project ? joinPaths(this.snippet.project.webUrl, '-/snippets/new') : joinPaths('/', gon.relative_url_root, '/-/snippets/new'), - variant: 'success', + variant: 'confirm', category: 'secondary', }, { diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 03dcbd2b8f9..345c180d164 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -376,6 +376,18 @@ } } } + + li > a.gl-link { + // undo gl-link text items for things in the sidebar - including sub menus + // defined in https://gitlab.com/gitlab-org/gitlab-ui/-/blob/5431e0ca5149d4e02e3d5d617d194ac9609bb82d/src/components/base/link/link.scss + @include gl-text-body; + + &:active, + &:focus, + &:focus:active { + @include gl-text-decoration-none; + } + } } .sidebar-sub-level-items { diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 9914e573247..63305bc592d 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -407,6 +407,34 @@ h1 { .gl-form-input.form-control::placeholder { color: #868686; } +.gl-icon { + fill: currentColor; +} +.gl-icon.s12 { + width: 12px; + height: 12px; +} +.gl-icon.s16 { + width: 16px; + height: 16px; +} +.gl-icon.s32 { + width: 32px; + height: 32px; +} +.gl-link { + font-size: 0.875rem; + color: #428fdc; +} +.gl-link:active { + color: #9dc7f1; +} +.gl-link:active { + text-decoration: underline; + box-shadow: 0 0 0 1px rgba(51, 51, 51, 0.4), + 0 0 0 4px rgba(66, 143, 220, 0.48); + outline: none; +} .gl-button { display: inline-flex; } @@ -439,6 +467,29 @@ h1 { outline: none; background-color: #404040; } +.gl-button.gl-button.btn-default:active .gl-icon, +.gl-button.gl-button.btn-default.active .gl-icon { + color: #fafafa; +} +.gl-button.gl-button.btn-default .gl-icon { + color: #999; +} +.gl-search-box-by-type-search-icon { + margin: 0.5rem; + color: #999; + width: 1rem; + position: absolute; +} +.gl-search-box-by-type { + display: flex; + position: relative; +} +.gl-search-box-by-type-input, +.gl-search-box-by-type-input.gl-form-input { + height: 2rem; + padding-right: 2rem; + padding-left: 1.75rem; +} body, .form-control, .search form { @@ -1334,6 +1385,12 @@ input { font-weight: 400; color: #9dc7f1; } +.sidebar-top-level-items li > a.gl-link { + color: #fafafa; +} +.sidebar-top-level-items li > a.gl-link:active { + text-decoration: none; +} .sidebar-sub-level-items { padding-top: 0; padding-bottom: 0; diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index e6d7185e29c..a57202515ad 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -388,6 +388,34 @@ h1 { .gl-form-input.form-control::placeholder { color: #868686; } +.gl-icon { + fill: currentColor; +} +.gl-icon.s12 { + width: 12px; + height: 12px; +} +.gl-icon.s16 { + width: 16px; + height: 16px; +} +.gl-icon.s32 { + width: 32px; + height: 32px; +} +.gl-link { + font-size: 0.875rem; + color: #1f75cb; +} +.gl-link:active { + color: #0b5cad; +} +.gl-link:active { + text-decoration: underline; + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), + 0 0 0 4px rgba(31, 117, 203, 0.48); + outline: none; +} .gl-button { display: inline-flex; } @@ -420,6 +448,29 @@ h1 { outline: none; background-color: #dbdbdb; } +.gl-button.gl-button.btn-default:active .gl-icon, +.gl-button.gl-button.btn-default.active .gl-icon { + color: #303030; +} +.gl-button.gl-button.btn-default .gl-icon { + color: #666; +} +.gl-search-box-by-type-search-icon { + margin: 0.5rem; + color: #666; + width: 1rem; + position: absolute; +} +.gl-search-box-by-type { + display: flex; + position: relative; +} +.gl-search-box-by-type-input, +.gl-search-box-by-type-input.gl-form-input { + height: 2rem; + padding-right: 2rem; + padding-left: 1.75rem; +} body, .form-control, .search form { @@ -1315,6 +1366,12 @@ input { font-weight: 400; color: #0b5cad; } +.sidebar-top-level-items li > a.gl-link { + color: #303030; +} +.sidebar-top-level-items li > a.gl-link:active { + text-decoration: none; +} .sidebar-sub-level-items { padding-top: 0; padding-bottom: 0; diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index d2cc1f8640f..a8110d15d8e 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -291,18 +291,6 @@ $gl-line-height-42: px-to-rem(42px); @include gl-focus($gl-border-size-1, $gray-900, true); } -// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2476 -.gl-md-max-w-50p { - @include gl-media-breakpoint-up(md) { - max-width: 50%; - } -} - -// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2497 -.gl-z-index-200 { - z-index: 200; -} - // Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1637 .gl-lg-w-25p { @include gl-media-breakpoint-up(lg) { |