diff options
Diffstat (limited to 'app')
96 files changed, 608 insertions, 458 deletions
diff --git a/app/assets/javascripts/alerts_service_settings/components/alerts_service_form.vue b/app/assets/javascripts/alerts_service_settings/components/alerts_service_form.vue index 5e16f6f3873..1c7a181e3e6 100644 --- a/app/assets/javascripts/alerts_service_settings/components/alerts_service_form.vue +++ b/app/assets/javascripts/alerts_service_settings/components/alerts_service_form.vue @@ -1,5 +1,11 @@ <script> -import { GlButton, GlFormGroup, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui'; +import { + GlDeprecatedButton, + GlFormGroup, + GlFormInput, + GlModal, + GlModalDirective, +} from '@gitlab/ui'; import _ from 'underscore'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ToggleButton from '~/vue_shared/components/toggle_button.vue'; @@ -11,7 +17,7 @@ export default { COPY_TO_CLIPBOARD: __('Copy'), RESET_KEY: __('Reset key'), components: { - GlButton, + GlDeprecatedButton, GlFormGroup, GlFormInput, GlModal, @@ -149,7 +155,9 @@ export default { <clipboard-button :text="authorizationKey" :title="$options.COPY_TO_CLIPBOARD" /> </span> </div> - <gl-button v-gl-modal.authKeyModal class="mt-2">{{ $options.RESET_KEY }}</gl-button> + <gl-deprecated-button v-gl-modal.authKeyModal class="mt-2">{{ + $options.RESET_KEY + }}</gl-deprecated-button> <gl-modal modal-id="authKeyModal" :title="$options.RESET_KEY" diff --git a/app/assets/javascripts/blob/components/blob_edit_content.vue b/app/assets/javascripts/blob/components/blob_edit_content.vue index 83303a373f3..9a30ed93330 100644 --- a/app/assets/javascripts/blob/components/blob_edit_content.vue +++ b/app/assets/javascripts/blob/components/blob_edit_content.vue @@ -5,7 +5,8 @@ export default { props: { value: { type: String, - required: true, + required: false, + default: '', }, fileName: { type: String, @@ -15,7 +16,6 @@ export default { }, data() { return { - content: this.value, editor: null, }; }, @@ -28,14 +28,12 @@ export default { this.editor = initEditorLite({ el: this.$refs.editor, blobPath: this.fileName, - blobContent: this.content, + blobContent: this.value, }); }, methods: { triggerFileChange() { - const val = this.editor.getValue(); - this.content = val; - this.$emit('input', val); + this.$emit('input', this.editor.getValue()); }, }, }; @@ -43,7 +41,7 @@ export default { <template> <div class="file-content code"> <pre id="editor" ref="editor" data-editor-loading @focusout="triggerFileChange">{{ - content + value }}</pre> </div> </template> diff --git a/app/assets/javascripts/blob/components/blob_embeddable.vue b/app/assets/javascripts/blob/components/blob_embeddable.vue index 26bd0208309..00b915ec8bd 100644 --- a/app/assets/javascripts/blob/components/blob_embeddable.vue +++ b/app/assets/javascripts/blob/components/blob_embeddable.vue @@ -1,11 +1,11 @@ <script> -import { GlFormInputGroup, GlButton, GlIcon } from '@gitlab/ui'; +import { GlFormInputGroup, GlDeprecatedButton, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; export default { components: { GlFormInputGroup, - GlButton, + GlDeprecatedButton, GlIcon, }, props: { @@ -33,9 +33,9 @@ export default { select-on-click > <template #append> - <gl-button new-style data-clipboard-target="#embeddable-text"> + <gl-deprecated-button new-style data-clipboard-target="#embeddable-text"> <gl-icon name="copy-to-clipboard" :title="__('Copy')" /> - </gl-button> + </gl-deprecated-button> </template> </gl-form-input-group> </template> 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 6b38b871606..63ae70a37f4 100644 --- a/app/assets/javascripts/blob/components/blob_header_default_actions.vue +++ b/app/assets/javascripts/blob/components/blob_header_default_actions.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlDeprecatedButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui'; import { BTN_COPY_CONTENTS_TITLE, BTN_DOWNLOAD_TITLE, @@ -12,7 +12,7 @@ export default { components: { GlIcon, GlButtonGroup, - GlButton, + GlDeprecatedButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -43,7 +43,7 @@ export default { </script> <template> <gl-button-group> - <gl-button + <gl-deprecated-button v-gl-tooltip.hover :aria-label="$options.BTN_COPY_CONTENTS_TITLE" :title="$options.BTN_COPY_CONTENTS_TITLE" @@ -51,8 +51,8 @@ export default { data-clipboard-target="#blob-code-content" > <gl-icon name="copy-to-clipboard" :size="14" /> - </gl-button> - <gl-button + </gl-deprecated-button> + <gl-deprecated-button v-gl-tooltip.hover :aria-label="$options.BTN_RAW_TITLE" :title="$options.BTN_RAW_TITLE" @@ -60,8 +60,8 @@ export default { target="_blank" > <gl-icon name="doc-code" :size="14" /> - </gl-button> - <gl-button + </gl-deprecated-button> + <gl-deprecated-button v-gl-tooltip.hover :aria-label="$options.BTN_DOWNLOAD_TITLE" :title="$options.BTN_DOWNLOAD_TITLE" @@ -69,6 +69,6 @@ export default { target="_blank" > <gl-icon name="download" :size="14" /> - </gl-button> + </gl-deprecated-button> </gl-button-group> </template> diff --git a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue index 689fa7638f0..7155a1d35b1 100644 --- a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue +++ b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlDeprecatedButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui'; import { RICH_BLOB_VIEWER, RICH_BLOB_VIEWER_TITLE, @@ -11,7 +11,7 @@ export default { components: { GlIcon, GlButtonGroup, - GlButton, + GlDeprecatedButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -46,7 +46,7 @@ export default { </script> <template> <gl-button-group class="js-blob-viewer-switcher ml-2"> - <gl-button + <gl-deprecated-button v-gl-tooltip.hover :aria-label="$options.SIMPLE_BLOB_VIEWER_TITLE" :title="$options.SIMPLE_BLOB_VIEWER_TITLE" @@ -55,8 +55,8 @@ export default { @click="switchToViewer($options.SIMPLE_BLOB_VIEWER)" > <gl-icon name="code" :size="14" /> - </gl-button> - <gl-button + </gl-deprecated-button> + <gl-deprecated-button v-gl-tooltip.hover :aria-label="$options.RICH_BLOB_VIEWER_TITLE" :title="$options.RICH_BLOB_VIEWER_TITLE" @@ -65,6 +65,6 @@ export default { @click="switchToViewer($options.RICH_BLOB_VIEWER)" > <gl-icon name="document" :size="14" /> - </gl-button> + </gl-deprecated-button> </gl-button-group> </template> diff --git a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue index 7418ca9edfc..e191bfd79cb 100644 --- a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue +++ b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue @@ -1,5 +1,5 @@ <script> -import { GlPopover, GlSprintf, GlButton, GlIcon } from '@gitlab/ui'; +import { GlPopover, GlSprintf, GlDeprecatedButton, GlIcon } from '@gitlab/ui'; import { parseBoolean, scrollToElement, setCookie, getCookie } from '~/lib/utils/common_utils'; import { s__ } from '~/locale'; import { glEmojiTag } from '~/emoji'; @@ -27,7 +27,7 @@ export default { GlPopover, GlSprintf, GlIcon, - GlButton, + GlDeprecatedButton, }, mixins: [trackingMixin], props: { @@ -109,9 +109,9 @@ export default { <template #title> <span v-html="suggestTitle"></span> <span class="ml-auto"> - <gl-button :aria-label="__('Close')" class="btn-blank" @click="onDismiss"> + <gl-deprecated-button :aria-label="__('Close')" class="btn-blank" @click="onDismiss"> <gl-icon name="close" aria-hidden="true" /> - </gl-button> + </gl-deprecated-button> </span> </template> diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js index 48f5614cefe..ac02c229a07 100644 --- a/app/assets/javascripts/boards/components/board.js +++ b/app/assets/javascripts/boards/components/board.js @@ -1,7 +1,7 @@ import $ from 'jquery'; import Sortable from 'sortablejs'; import Vue from 'vue'; -import { GlButtonGroup, GlButton, GlLabel, GlTooltip } from '@gitlab/ui'; +import { GlButtonGroup, GlDeprecatedButton, GlLabel, GlTooltip } from '@gitlab/ui'; import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits'; import { s__, __, sprintf } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; @@ -32,7 +32,7 @@ export default Vue.extend({ Icon, GlButtonGroup, IssueCount, - GlButton, + GlDeprecatedButton, GlLabel, GlTooltip, }, diff --git a/app/assets/javascripts/boards/components/board_column.vue b/app/assets/javascripts/boards/components/board_column.vue index 693b1f9d7b1..10c855675db 100644 --- a/app/assets/javascripts/boards/components/board_column.vue +++ b/app/assets/javascripts/boards/components/board_column.vue @@ -1,7 +1,7 @@ <script> import $ from 'jquery'; import Sortable from 'sortablejs'; -import { GlButtonGroup, GlButton, GlLabel, GlTooltip, GlIcon } from '@gitlab/ui'; +import { GlButtonGroup, GlDeprecatedButton, GlLabel, GlTooltip, GlIcon } from '@gitlab/ui'; import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits'; import { s__, __, sprintf } from '~/locale'; import Tooltip from '~/vue_shared/directives/tooltip'; @@ -24,7 +24,7 @@ export default { BoardList, GlButtonGroup, IssueCount, - GlButton, + GlDeprecatedButton, GlLabel, GlTooltip, GlIcon, @@ -333,7 +333,7 @@ export default { v-if="isNewIssueShown || isSettingsShown" class="board-list-button-group pl-2" > - <gl-button + <gl-deprecated-button v-if="isNewIssueShown" ref="newIssueBtn" :class="{ @@ -346,10 +346,10 @@ export default { @click="showNewIssueForm" > <i aria-hidden="true" data-hidden="true" class="fa fa-plus"></i> - </gl-button> + </gl-deprecated-button> <gl-tooltip :target="() => $refs.newIssueBtn">{{ __('New Issue') }}</gl-tooltip> - <gl-button + <gl-deprecated-button v-if="isSettingsShown" ref="settingsBtn" :aria-label="__(`List settings`)" @@ -359,7 +359,7 @@ export default { @click="openSidebarSettings" > <gl-icon name="settings" /> - </gl-button> + </gl-deprecated-button> <gl-tooltip :target="() => $refs.settingsBtn">{{ __('List settings') }}</gl-tooltip> </gl-button-group> </h3> diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue index f9a08f151c5..deebe122109 100644 --- a/app/assets/javascripts/boards/components/board_new_issue.vue +++ b/app/assets/javascripts/boards/components/board_new_issue.vue @@ -1,6 +1,6 @@ <script> import $ from 'jquery'; -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; import { getMilestone } from 'ee_else_ce/boards/boards_util'; import ListIssue from 'ee_else_ce/boards/models/issue'; import eventHub from '../eventhub'; @@ -11,7 +11,7 @@ export default { name: 'BoardNewIssue', components: { ProjectSelect, - GlButton, + GlDeprecatedButton, }, props: { groupId: { @@ -120,17 +120,21 @@ export default { /> <project-select v-if="groupId" :group-id="groupId" :list="list" /> <div class="clearfix prepend-top-10"> - <gl-button + <gl-deprecated-button ref="submit-button" :disabled="disabled" class="float-left" variant="success" type="submit" - >{{ __('Submit issue') }}</gl-button + >{{ __('Submit issue') }}</gl-deprecated-button + > + <gl-deprecated-button + class="float-right" + type="button" + variant="default" + @click="cancel" + >{{ __('Cancel') }}</gl-deprecated-button > - <gl-button class="float-right" type="button" variant="default" @click="cancel">{{ - __('Cancel') - }}</gl-button> </div> </form> </div> 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 0460181558b..32fe841f16e 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 @@ -4,7 +4,7 @@ import { mapActions, mapState } from 'vuex'; import { ADD_CI_VARIABLE_MODAL_ID } from '../constants'; import CiEnvironmentsDropdown from './ci_environments_dropdown.vue'; import { - GlButton, + GlDeprecatedButton, GlModal, GlFormSelect, GlFormGroup, @@ -19,7 +19,7 @@ export default { modalId: ADD_CI_VARIABLE_MODAL_ID, components: { CiEnvironmentsDropdown, - GlButton, + GlDeprecatedButton, GlModal, GlFormSelect, GlFormGroup, @@ -212,22 +212,22 @@ export default { </gl-form-group> </form> <template #modal-footer> - <gl-button @click="hideModal">{{ __('Cancel') }}</gl-button> - <gl-button + <gl-deprecated-button @click="hideModal">{{ __('Cancel') }}</gl-deprecated-button> + <gl-deprecated-button v-if="variableBeingEdited" ref="deleteCiVariable" category="secondary" variant="danger" @click="deleteVarAndClose" - >{{ __('Delete variable') }}</gl-button + >{{ __('Delete variable') }}</gl-deprecated-button > - <gl-button + <gl-deprecated-button ref="updateOrAddVariable" :disabled="!canSubmit" variant="success" @click="updateOrAddVariable" >{{ modalActionText }} - </gl-button> + </gl-deprecated-button> </template> </gl-modal> </template> diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue index c4b1bc18f5a..07b0d55bd4c 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue @@ -1,12 +1,12 @@ <script> -import { GlPopover, GlIcon, GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { GlPopover, GlIcon, GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui'; export default { maxTextLength: 95, components: { GlPopover, GlIcon, - GlButton, + GlDeprecatedButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -41,14 +41,14 @@ export default { <gl-popover :target="target" triggers="hover" placement="top" container="popover-container"> <div class="d-flex justify-content-between position-relative"> <div class="pr-5 w-100 ci-popover-value">{{ displayValue }}</div> - <gl-button + <gl-deprecated-button v-gl-tooltip class="btn-transparent btn-clipboard position-absolute position-top-0 position-right-0" :title="tooltipText" :data-clipboard-text="value" > <gl-icon name="copy-to-clipboard" /> - </gl-button> + </gl-deprecated-button> </div> </gl-popover> </div> diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue index 806fa3e1191..b374d950c1f 100644 --- a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue +++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue @@ -1,5 +1,5 @@ <script> -import { GlTable, GlButton, GlModalDirective, GlIcon } from '@gitlab/ui'; +import { GlTable, GlDeprecatedButton, GlModalDirective, GlIcon } from '@gitlab/ui'; import { s__, __ } from '~/locale'; import { mapState, mapActions } from 'vuex'; import { ADD_CI_VARIABLE_MODAL_ID } from '../constants'; @@ -52,7 +52,7 @@ export default { ], components: { GlTable, - GlButton, + GlDeprecatedButton, GlIcon, CiVariablePopover, }, @@ -147,13 +147,13 @@ export default { </div> </template> <template #cell(actions)="{ item }"> - <gl-button + <gl-deprecated-button ref="edit-ci-variable" v-gl-modal-directive="$options.modalId" @click="editVariable(item)" > <gl-icon :size="$options.iconSize" name="pencil" /> - </gl-button> + </gl-deprecated-button> </template> <template #empty> <p ref="empty-variables" class="text-center empty-variables text-plain"> @@ -165,20 +165,20 @@ export default { class="ci-variable-actions d-flex justify-content-end" :class="{ 'justify-content-center': !tableIsNotEmpty }" > - <gl-button + <gl-deprecated-button v-if="tableIsNotEmpty" ref="secret-value-reveal-button" data-qa-selector="reveal_ci_variable_value" class="append-right-8" @click="toggleValues(!valuesHidden)" - >{{ valuesButtonText }}</gl-button + >{{ valuesButtonText }}</gl-deprecated-button > - <gl-button + <gl-deprecated-button ref="add-ci-variable" v-gl-modal-directive="$options.modalId" data-qa-selector="add_ci_variable" variant="success" - >{{ __('Add Variable') }}</gl-button + >{{ __('Add Variable') }}</gl-deprecated-button > </div> </div> diff --git a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue index e4bc00fc102..95eb427a49c 100644 --- a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue +++ b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue @@ -7,7 +7,7 @@ import { GlSprintf, GlLink, GlToggle, - GlButton, + GlDeprecatedButton, GlDropdown, GlDropdownItem, GlIcon, @@ -25,7 +25,7 @@ export default { GlSprintf, GlLink, GlToggle, - GlButton, + GlDeprecatedButton, GlDropdown, GlDropdownItem, GlIcon, @@ -235,17 +235,17 @@ export default { </div> </div> <div v-if="showButtons" class="mt-3"> - <gl-button + <gl-deprecated-button class="btn-success inline mr-1" :loading="saving" :disabled="saveButtonDisabled" @click="updateApplication" > {{ saveButtonLabel }} - </gl-button> - <gl-button :disabled="saveButtonDisabled" @click="resetStatus"> + </gl-deprecated-button> + <gl-deprecated-button :disabled="saveButtonDisabled" @click="resetStatus"> {{ __('Cancel') }} - </gl-button> + </gl-deprecated-button> </div> </div> </div> diff --git a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue index bdbaf2ed558..b35adae3352 100644 --- a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue +++ b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue @@ -1,7 +1,7 @@ <script> import { escape as esc } from 'lodash'; import SplitButton from '~/vue_shared/components/split_button.vue'; -import { GlModal, GlButton, GlFormInput } from '@gitlab/ui'; +import { GlModal, GlDeprecatedButton, GlFormInput } from '@gitlab/ui'; import { s__, sprintf } from '~/locale'; import csrf from '~/lib/utils/csrf'; @@ -27,7 +27,7 @@ export default { components: { SplitButton, GlModal, - GlButton, + GlDeprecatedButton, GlFormInput, }, props: { @@ -148,19 +148,24 @@ export default { }}</span> </template> <template slot="modal-footer"> - <gl-button variant="secondary" @click="handleCancel">{{ s__('Cancel') }}</gl-button> + <gl-deprecated-button variant="secondary" @click="handleCancel">{{ + s__('Cancel') + }}</gl-deprecated-button> <template v-if="confirmCleanup"> - <gl-button :disabled="!canSubmit" variant="warning" @click="handleSubmit">{{ + <gl-deprecated-button :disabled="!canSubmit" variant="warning" @click="handleSubmit">{{ s__('ClusterIntegration|Remove integration') - }}</gl-button> - <gl-button :disabled="!canSubmit" variant="danger" @click="handleSubmit(true)">{{ - s__('ClusterIntegration|Remove integration and resources') - }}</gl-button> + }}</gl-deprecated-button> + <gl-deprecated-button + :disabled="!canSubmit" + variant="danger" + @click="handleSubmit(true)" + >{{ s__('ClusterIntegration|Remove integration and resources') }}</gl-deprecated-button + > </template> <template v-else> - <gl-button :disabled="!canSubmit" variant="danger" @click="handleSubmit">{{ + <gl-deprecated-button :disabled="!canSubmit" variant="danger" @click="handleSubmit">{{ s__('ClusterIntegration|Remove integration') - }}</gl-button> + }}</gl-deprecated-button> </template> </template> </gl-modal> diff --git a/app/assets/javascripts/code_navigation/components/popover.vue b/app/assets/javascripts/code_navigation/components/popover.vue index f216a4c6e6f..b4d9bc7b181 100644 --- a/app/assets/javascripts/code_navigation/components/popover.vue +++ b/app/assets/javascripts/code_navigation/components/popover.vue @@ -1,9 +1,9 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; export default { components: { - GlButton, + GlDeprecatedButton, }, props: { position: { @@ -77,9 +77,9 @@ export default { </p> </div> <div v-if="definitionPath" class="popover-body"> - <gl-button :href="definitionPath" target="_blank" class="w-100" variant="default"> + <gl-deprecated-button :href="definitionPath" target="_blank" class="w-100" variant="default"> {{ __('Go to definition') }} - </gl-button> + </gl-deprecated-button> </div> </div> </template> diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue index cd9aea85f4d..23a842fab4c 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue +++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui'; import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import PipelinesService from '~/pipelines/services/pipelines_service'; import PipelineStore from '~/pipelines/stores/pipelines_store'; @@ -12,7 +12,7 @@ import CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin'; export default { components: { TablePagination, - GlButton, + GlDeprecatedButton, GlLoadingIcon, }, mixins: [pipelinesMixin, CIPaginationMixin], @@ -171,7 +171,7 @@ export default { <div v-else-if="shouldRenderTable" class="table-holder"> <div v-if="canRenderPipelineButton" class="nav justify-content-end"> - <gl-button + <gl-deprecated-button v-if="canRenderPipelineButton" variant="success" class="js-run-mr-pipeline prepend-top-10 btn-wide-on-xs" @@ -180,7 +180,7 @@ export default { > <gl-loading-icon v-if="state.isRunningMergeRequestPipeline" inline /> {{ s__('Pipelines|Run Pipeline') }} - </gl-button> + </gl-deprecated-button> </div> <pipelines-table-component diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue index 3a2146147cc..34716c214c6 100644 --- a/app/assets/javascripts/diffs/components/compare_versions.vue +++ b/app/assets/javascripts/diffs/components/compare_versions.vue @@ -1,6 +1,6 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; -import { GlTooltipDirective, GlLink, GlButton, GlSprintf } from '@gitlab/ui'; +import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlSprintf } from '@gitlab/ui'; import { __ } from '~/locale'; import { polyfillSticky } from '~/lib/utils/sticky'; import Icon from '~/vue_shared/components/icon.vue'; @@ -14,7 +14,7 @@ export default { CompareVersionsDropdown, Icon, GlLink, - GlButton, + GlDeprecatedButton, GlSprintf, SettingsDropdown, DiffStats, @@ -140,16 +140,20 @@ export default { :added-lines="addedLines" :removed-lines="removedLines" /> - <gl-button + <gl-deprecated-button v-if="commit || startVersion" :href="latestVersionPath" class="append-right-8 js-latest-version" > {{ __('Show latest version') }} - </gl-button> - <gl-button v-show="hasCollapsedFile" class="append-right-8" @click="expandAllFiles"> + </gl-deprecated-button> + <gl-deprecated-button + v-show="hasCollapsedFile" + class="append-right-8" + @click="expandAllFiles" + > {{ __('Expand all') }} - </gl-button> + </gl-deprecated-button> <settings-dropdown /> </div> </div> diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index c51f711fb81..d601c3769a3 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -1,7 +1,7 @@ <script> import { escape as esc } from 'lodash'; import { mapActions, mapGetters } from 'vuex'; -import { GlButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui'; +import { GlDeprecatedButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui'; import { polyfillSticky } from '~/lib/utils/sticky'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import Icon from '~/vue_shared/components/icon.vue'; @@ -16,7 +16,7 @@ import { scrollToElement } from '~/lib/utils/common_utils'; export default { components: { GlLoadingIcon, - GlButton, + GlDeprecatedButton, ClipboardButton, EditButton, Icon, @@ -229,7 +229,7 @@ export default { <div class="btn-group" role="group"> <template v-if="diffFile.blob && diffFile.blob.readable_text"> <span v-gl-tooltip.hover :title="s__('MergeRequests|Toggle comments for this file')"> - <gl-button + <gl-deprecated-button ref="toggleDiscussionsButton" :disabled="!diffHasDiscussions(diffFile)" :class="{ active: diffHasExpandedDiscussions(diffFile) }" @@ -242,7 +242,7 @@ export default { @click="toggleFileDiscussionWrappers(diffFile)" > <icon name="comment" /> - </gl-button> + </gl-deprecated-button> </span> <edit-button @@ -265,7 +265,7 @@ export default { v-html="viewReplacedFileButtonText" > </a> - <gl-button + <gl-deprecated-button v-if="!diffFile.is_fully_expanded" ref="expandDiffToFullFileButton" v-gl-tooltip.hover @@ -279,8 +279,8 @@ export default { <gl-loading-icon v-if="diffFile.isLoadingFullFile" color="dark" inline /> <icon v-else-if="diffFile.isShowingFullFile" name="doc-changes" /> <icon v-else name="doc-expand" /> - </gl-button> - <gl-button + </gl-deprecated-button> + <gl-deprecated-button ref="viewButton" v-gl-tooltip.hover :href="diffFile.view_path" @@ -292,7 +292,7 @@ export default { :title="viewFileButtonText" > <icon name="doc-text" /> - </gl-button> + </gl-deprecated-button> <a v-if="diffFile.external_url" diff --git a/app/assets/javascripts/diffs/components/edit_button.vue b/app/assets/javascripts/diffs/components/edit_button.vue index dcb79cd5e16..91e296f8572 100644 --- a/app/assets/javascripts/diffs/components/edit_button.vue +++ b/app/assets/javascripts/diffs/components/edit_button.vue @@ -1,10 +1,10 @@ <script> -import { GlTooltipDirective, GlButton } from '@gitlab/ui'; +import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; export default { components: { - GlButton, + GlDeprecatedButton, Icon, }, directives: { @@ -37,7 +37,7 @@ export default { </script> <template> - <gl-button + <gl-deprecated-button v-gl-tooltip.top :href="editPath" :title="__('Edit file')" @@ -45,5 +45,5 @@ export default { @click.native="handleEditClick" > <icon name="pencil" /> - </gl-button> + </gl-deprecated-button> </template> diff --git a/app/assets/javascripts/diffs/components/no_changes.vue b/app/assets/javascripts/diffs/components/no_changes.vue index 09cb542c3dc..5fd68471094 100644 --- a/app/assets/javascripts/diffs/components/no_changes.vue +++ b/app/assets/javascripts/diffs/components/no_changes.vue @@ -1,12 +1,12 @@ <script> import { mapGetters } from 'vuex'; import { escape as esc } from 'lodash'; -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; export default { components: { - GlButton, + GlDeprecatedButton, }, props: { changesEmptyStateIllustration: { @@ -43,9 +43,9 @@ export default { <div class="text-content text-center"> <span v-html="emptyStateText"></span> <div class="text-center"> - <gl-button :href="getNoteableData.new_blob_path" variant="success">{{ + <gl-deprecated-button :href="getNoteableData.new_blob_path" variant="success">{{ __('Create commit') - }}</gl-button> + }}</gl-deprecated-button> </div> </div> </div> diff --git a/app/assets/javascripts/diffs/components/settings_dropdown.vue b/app/assets/javascripts/diffs/components/settings_dropdown.vue index 08e991c4791..c45de481a17 100644 --- a/app/assets/javascripts/diffs/components/settings_dropdown.vue +++ b/app/assets/javascripts/diffs/components/settings_dropdown.vue @@ -1,11 +1,11 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; export default { components: { - GlButton, + GlDeprecatedButton, Icon, }, computed: { @@ -37,26 +37,26 @@ export default { <div> <span class="bold d-block mb-1">{{ __('File browser') }}</span> <div class="btn-group d-flex"> - <gl-button + <gl-deprecated-button :class="{ active: !renderTreeList }" class="w-100 js-list-view" @click="setRenderTreeList(false)" > {{ __('List view') }} - </gl-button> - <gl-button + </gl-deprecated-button> + <gl-deprecated-button :class="{ active: renderTreeList }" class="w-100 js-tree-view" @click="setRenderTreeList(true)" > {{ __('Tree view') }} - </gl-button> + </gl-deprecated-button> </div> </div> <div class="mt-2"> <span class="bold d-block mb-1">{{ __('Compare changes') }}</span> <div class="btn-group d-flex js-diff-view-buttons"> - <gl-button + <gl-deprecated-button id="inline-diff-btn" :class="{ active: isInlineView }" class="w-100 js-inline-diff-button" @@ -64,8 +64,8 @@ export default { @click="setInlineDiffViewType" > {{ __('Inline') }} - </gl-button> - <gl-button + </gl-deprecated-button> + <gl-deprecated-button id="parallel-diff-btn" :class="{ active: isParallelView }" class="w-100 js-parallel-diff-button" @@ -73,7 +73,7 @@ export default { @click="setParallelDiffViewType" > {{ __('Side-by-side') }} - </gl-button> + </gl-deprecated-button> </div> </div> <div class="mt-2"> diff --git a/app/assets/javascripts/environments/components/enable_review_app_button.vue b/app/assets/javascripts/environments/components/enable_review_app_button.vue index 8fbbc5189bf..f86072696c2 100644 --- a/app/assets/javascripts/environments/components/enable_review_app_button.vue +++ b/app/assets/javascripts/environments/components/enable_review_app_button.vue @@ -1,11 +1,11 @@ <script> -import { GlButton, GlModal, GlModalDirective, GlLink, GlSprintf } from '@gitlab/ui'; +import { GlDeprecatedButton, GlModal, GlModalDirective, GlLink, GlSprintf } from '@gitlab/ui'; import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; import { s__ } from '~/locale'; export default { components: { - GlButton, + GlDeprecatedButton, GlLink, GlModal, GlSprintf, @@ -44,7 +44,7 @@ export default { </script> <template> <div> - <gl-button + <gl-deprecated-button v-gl-modal="$options.modalInfo.id" variant="info" category="secondary" @@ -52,7 +52,7 @@ export default { class="js-enable-review-app-button" > {{ s__('Environments|Enable review app') }} - </gl-button> + </gl-deprecated-button> <gl-modal :modal-id="$options.modalInfo.id" :title="$options.modalInfo.title" diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue index 7b4b633dc7f..bd6feb14319 100644 --- a/app/assets/javascripts/environments/components/environment_monitoring.vue +++ b/app/assets/javascripts/environments/components/environment_monitoring.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui'; import { __ } from '~/locale'; /** * Renders the Monitoring (Metrics) link in environments table. @@ -9,7 +9,7 @@ import Icon from '~/vue_shared/components/icon.vue'; export default { components: { Icon, - GlButton, + GlDeprecatedButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -28,7 +28,7 @@ export default { }; </script> <template> - <gl-button + <gl-deprecated-button v-gl-tooltip :href="monitoringUrl" :title="title" @@ -38,5 +38,5 @@ export default { variant="default" > <icon name="chart" /> - </gl-button> + </gl-deprecated-button> </template> diff --git a/app/assets/javascripts/environments/components/environment_pin.vue b/app/assets/javascripts/environments/components/environment_pin.vue index 7908928a7ac..3a219e98b08 100644 --- a/app/assets/javascripts/environments/components/environment_pin.vue +++ b/app/assets/javascripts/environments/components/environment_pin.vue @@ -3,7 +3,7 @@ * Renders a prevent auto-stop button. * Used in environments table. */ -import { GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; import { __ } from '~/locale'; import eventHub from '../event_hub'; @@ -11,7 +11,7 @@ import eventHub from '../event_hub'; export default { components: { Icon, - GlButton, + GlDeprecatedButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -31,7 +31,12 @@ export default { }; </script> <template> - <gl-button v-gl-tooltip :title="$options.title" :aria-label="$options.title" @click="onPinClick"> + <gl-deprecated-button + v-gl-tooltip + :title="$options.title" + :aria-label="$options.title" + @click="onPinClick" + > <icon name="thumbtack" /> - </gl-button> + </gl-deprecated-button> </template> diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue index 577e480d210..7a728961b37 100644 --- a/app/assets/javascripts/environments/components/environment_rollback.vue +++ b/app/assets/javascripts/environments/components/environment_rollback.vue @@ -5,7 +5,12 @@ * * Makes a post request when the button is clicked. */ -import { GlTooltipDirective, GlLoadingIcon, GlModalDirective, GlButton } from '@gitlab/ui'; +import { + GlTooltipDirective, + GlLoadingIcon, + GlModalDirective, + GlDeprecatedButton, +} from '@gitlab/ui'; import { s__ } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; import eventHub from '../event_hub'; @@ -14,7 +19,7 @@ export default { components: { Icon, GlLoadingIcon, - GlButton, + GlDeprecatedButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -68,7 +73,7 @@ export default { }; </script> <template> - <gl-button + <gl-deprecated-button v-gl-tooltip v-gl-modal.confirm-rollback-modal :disabled="isLoading" @@ -78,5 +83,5 @@ export default { > <icon v-if="isLastDeployment" name="repeat" /> <icon v-else name="redo" /> <gl-loading-icon v-if="isLoading" /> - </gl-button> + </gl-deprecated-button> </template> diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue index cc1d86d06ed..0cc6f3df2d7 100644 --- a/app/assets/javascripts/environments/components/environments_app.vue +++ b/app/assets/javascripts/environments/components/environments_app.vue @@ -1,5 +1,5 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; import envrionmentsAppMixin from 'ee_else_ce/environments/mixins/environments_app_mixin'; import Flash from '~/flash'; import { s__ } from '~/locale'; @@ -17,7 +17,7 @@ export default { ConfirmRollbackModal, emptyState, EnableReviewAppButton, - GlButton, + GlDeprecatedButton, StopEnvironmentModal, DeleteEnvironmentModal, }, @@ -105,14 +105,14 @@ export default { <div class="nav-controls"> <enable-review-app-button v-if="state.reviewAppDetails.can_setup_review_app" class="mr-2" /> - <gl-button + <gl-deprecated-button v-if="canCreateEnvironment && !isLoading" :href="newEnvironmentPath" category="primary" variant="success" > {{ s__('Environments|New environment') }} - </gl-button> + </gl-deprecated-button> </div> </div> diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue index 6c4f59eb49f..a8103c80da0 100644 --- a/app/assets/javascripts/error_tracking/components/error_details.vue +++ b/app/assets/javascripts/error_tracking/components/error_details.vue @@ -3,7 +3,7 @@ import { mapActions, mapGetters, mapState } from 'vuex'; import dateFormat from 'dateformat'; import createFlash from '~/flash'; import { - GlButton, + GlDeprecatedButton, GlFormInput, GlLink, GlLoadingIcon, @@ -29,7 +29,7 @@ const SENTRY_TIMEOUT = 10000; export default { components: { - GlButton, + GlDeprecatedButton, GlFormInput, GlLink, GlLoadingIcon, @@ -257,22 +257,22 @@ export default { </div> <div class="error-details-actions"> <div class="d-inline-flex bv-d-sm-down-none"> - <gl-button + <gl-deprecated-button :loading="updatingIgnoreStatus" data-qa-selector="update_ignore_status_button" @click="onIgnoreStatusUpdate" > {{ ignoreBtnLabel }} - </gl-button> - <gl-button + </gl-deprecated-button> + <gl-deprecated-button class="btn-outline-info ml-2" :loading="updatingResolveStatus" data-qa-selector="update_resolve_status_button" @click="onResolveStatusUpdate" > {{ resolveBtnLabel }} - </gl-button> - <gl-button + </gl-deprecated-button> + <gl-deprecated-button v-if="error.gitlabIssuePath" class="ml-2" data-qa-selector="view_issue_button" @@ -280,7 +280,7 @@ export default { variant="success" > {{ __('View issue') }} - </gl-button> + </gl-deprecated-button> <form ref="sentryIssueForm" :action="projectIssuesPath" @@ -295,7 +295,7 @@ export default { name="issue[sentry_issue_attributes][sentry_issue_identifier]" /> <gl-form-input :value="csrfToken" class="hidden" name="authenticity_token" /> - <gl-button + <gl-deprecated-button v-if="!error.gitlabIssuePath" class="btn-success" :loading="issueCreationInProgress" @@ -303,7 +303,7 @@ export default { @click="createIssue" > {{ __('Create issue') }} - </gl-button> + </gl-deprecated-button> </form> </div> <gl-dropdown 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 49eb04e331b..0e3fd70b17b 100644 --- a/app/assets/javascripts/error_tracking/components/error_tracking_actions.vue +++ b/app/assets/javascripts/error_tracking/components/error_tracking_actions.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlIcon, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui'; +import { GlDeprecatedButton, GlIcon, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui'; import { __ } from '~/locale'; const IGNORED = 'ignored'; @@ -10,7 +10,7 @@ const statusValidation = [IGNORED, RESOLVED, UNRESOLVED]; export default { components: { - GlButton, + GlDeprecatedButton, GlIcon, GlButtonGroup, }, @@ -45,7 +45,7 @@ export default { <template> <div> <gl-button-group class="flex-column flex-md-row ml-0 ml-md-n4"> - <gl-button + <gl-deprecated-button :key="ignoreBtn.status" :ref="`${ignoreBtn.title.toLowerCase()}Error`" v-gl-tooltip.hover @@ -55,8 +55,8 @@ export default { > <gl-icon class="d-none d-md-inline m-0" :name="ignoreBtn.icon" :size="12" /> <span class="d-md-none">{{ ignoreBtn.title }}</span> - </gl-button> - <gl-button + </gl-deprecated-button> + <gl-deprecated-button :key="resolveBtn.status" :ref="`${resolveBtn.title.toLowerCase()}Error`" v-gl-tooltip.hover @@ -66,15 +66,15 @@ export default { > <gl-icon class="d-none d-md-inline m-0" :name="resolveBtn.icon" :size="12" /> <span class="d-md-none">{{ resolveBtn.title }}</span> - </gl-button> + </gl-deprecated-button> </gl-button-group> - <gl-button + <gl-deprecated-button :href="detailsLink" category="secondary" variant="info" class="d-block d-md-none mb-2 mb-md-0" > {{ __('More details') }} - </gl-button> + </gl-deprecated-button> </div> </template> 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 ea0baaf4569..3d700f4d216 100644 --- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue +++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue @@ -2,7 +2,7 @@ import { mapActions, mapState } from 'vuex'; import { GlEmptyState, - GlButton, + GlDeprecatedButton, GlIcon, GlLink, GlLoadingIcon, @@ -69,7 +69,7 @@ export default { }, components: { GlEmptyState, - GlButton, + GlDeprecatedButton, GlDropdown, GlDropdownItem, GlDropdownDivider, @@ -250,7 +250,7 @@ export default { /> </div> <div class="gl-search-box-by-type-right-icons"> - <gl-button + <gl-deprecated-button v-if="errorSearchQuery.length > 0" v-gl-tooltip.hover :title="__('Clear')" @@ -259,7 +259,7 @@ export default { @click="errorSearchQuery = ''" > <gl-icon name="close" :size="12" /> - </gl-button> + </gl-deprecated-button> </div> </div> </div> diff --git a/app/assets/javascripts/error_tracking_settings/components/app.vue b/app/assets/javascripts/error_tracking_settings/components/app.vue index 786abc8ce49..7ae847e6105 100644 --- a/app/assets/javascripts/error_tracking_settings/components/app.vue +++ b/app/assets/javascripts/error_tracking_settings/components/app.vue @@ -1,11 +1,11 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; import ProjectDropdown from './project_dropdown.vue'; import ErrorTrackingForm from './error_tracking_form.vue'; export default { - components: { ProjectDropdown, ErrorTrackingForm, GlButton }, + components: { ProjectDropdown, ErrorTrackingForm, GlDeprecatedButton }, props: { initialApiHost: { type: String, @@ -92,13 +92,13 @@ export default { @select-project="updateSelectedProject" /> </div> - <gl-button + <gl-deprecated-button :disabled="settingsLoading" class="js-error-tracking-button" variant="success" @click="handleSubmit" > {{ __('Save changes') }} - </gl-button> + </gl-deprecated-button> </div> </template> diff --git a/app/assets/javascripts/grafana_integration/components/grafana_integration.vue b/app/assets/javascripts/grafana_integration/components/grafana_integration.vue index 22cafd50bf3..5295b2197d5 100644 --- a/app/assets/javascripts/grafana_integration/components/grafana_integration.vue +++ b/app/assets/javascripts/grafana_integration/components/grafana_integration.vue @@ -1,11 +1,11 @@ <script> -import { GlButton, GlFormGroup, GlFormInput, GlFormCheckbox } from '@gitlab/ui'; +import { GlDeprecatedButton, GlFormGroup, GlFormInput, GlFormCheckbox } from '@gitlab/ui'; import { mapState, mapActions } from 'vuex'; import Icon from '~/vue_shared/components/icon.vue'; export default { components: { - GlButton, + GlDeprecatedButton, GlFormCheckbox, GlFormGroup, GlFormInput, @@ -58,7 +58,7 @@ export default { <h3 class="js-section-header h4"> {{ s__('GrafanaIntegration|Grafana Authentication') }} </h3> - <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button> + <gl-deprecated-button class="js-settings-toggle">{{ __('Expand') }}</gl-deprecated-button> <p class="js-section-sub-header"> {{ s__('GrafanaIntegration|Embed Grafana charts in GitLab issues.') }} </p> @@ -93,9 +93,9 @@ export default { </a> </p> </gl-form-group> - <gl-button variant="success" @click="updateGrafanaIntegration"> + <gl-deprecated-button variant="success" @click="updateGrafanaIntegration"> {{ __('Save Changes') }} - </gl-button> + </gl-deprecated-button> </form> </div> </section> diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue index 6ed863c9c2e..7ebcacc530f 100644 --- a/app/assets/javascripts/ide/components/ide.vue +++ b/app/assets/javascripts/ide/components/ide.vue @@ -1,7 +1,7 @@ <script> import Vue from 'vue'; import { mapActions, mapGetters, mapState } from 'vuex'; -import { GlButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui'; import { __ } from '~/locale'; import FindFile from '~/vue_shared/components/file_finder/index.vue'; import NewModal from './new_dropdown/modal.vue'; @@ -23,7 +23,7 @@ export default { FindFile, ErrorMessage, CommitEditorHeader, - GlButton, + GlDeprecatedButton, GlLoadingIcon, }, props: { @@ -121,14 +121,14 @@ export default { ) }} </p> - <gl-button + <gl-deprecated-button variant="success" :title="__('New file')" :aria-label="__('New file')" @click="openNewEntryModal({ type: 'blob' })" > {{ __('New file') }} - </gl-button> + </gl-deprecated-button> </template> <gl-loading-icon v-else-if="!currentTree || currentTree.loading" size="md" /> <p v-else> diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue index 156735441ca..bcec83a7aee 100644 --- a/app/assets/javascripts/jobs/components/job_log_controllers.vue +++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue @@ -1,5 +1,5 @@ <script> -import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui'; +import { GlTooltipDirective, GlLink, GlDeprecatedButton } from '@gitlab/ui'; import { polyfillSticky } from '~/lib/utils/sticky'; import Icon from '~/vue_shared/components/icon.vue'; import { numberToHumanSize } from '~/lib/utils/number_utils'; @@ -10,7 +10,7 @@ export default { components: { Icon, GlLink, - GlButton, + GlDeprecatedButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -111,18 +111,18 @@ export default { <!-- scroll buttons --> <div v-gl-tooltip :title="s__('Job|Scroll to top')" class="controllers-buttons"> - <gl-button + <gl-deprecated-button :disabled="isScrollTopDisabled" type="button" class="js-scroll-top btn-scroll btn-transparent btn-blank" @click="handleScrollToTop" > <icon name="scroll_up" /> - </gl-button> + </gl-deprecated-button> </div> <div v-gl-tooltip :title="s__('Job|Scroll to bottom')" class="controllers-buttons"> - <gl-button + <gl-deprecated-button :disabled="isScrollBottomDisabled" class="js-scroll-bottom btn-scroll btn-transparent btn-blank" :class="{ animate: isScrollingDown }" diff --git a/app/assets/javascripts/jobs/components/manual_variables_form.vue b/app/assets/javascripts/jobs/components/manual_variables_form.vue index a23f30d571a..d4aab5c7faf 100644 --- a/app/assets/javascripts/jobs/components/manual_variables_form.vue +++ b/app/assets/javascripts/jobs/components/manual_variables_form.vue @@ -1,14 +1,14 @@ <script> import { uniqueId } from 'lodash'; import { mapActions } from 'vuex'; -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; import { s__, sprintf } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; export default { name: 'ManualVariablesForm', components: { - GlButton, + GlDeprecatedButton, Icon, }, props: { @@ -137,9 +137,12 @@ export default { <div class="table-section section-10"> <div class="table-mobile-header" role="rowheader"></div> <div class="table-mobile-content justify-content-end"> - <gl-button class="btn-transparent btn-blank w-25" @click="deleteVariable(variable.id)"> + <gl-deprecated-button + class="btn-transparent btn-blank w-25" + @click="deleteVariable(variable.id)" + > <icon name="clear" /> - </gl-button> + </gl-deprecated-button> </div> </div> </div> @@ -173,9 +176,9 @@ export default { <p class="text-muted" v-html="helpText"></p> </div> <div class="d-flex justify-content-center"> - <gl-button variant="primary" @click="triggerManualJob(variables)"> + <gl-deprecated-button variant="primary" @click="triggerManualJob(variables)"> {{ action.button_title }} - </gl-button> + </gl-deprecated-button> </div> </div> </template> diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue index f1683bc2195..83ba528cfa2 100644 --- a/app/assets/javascripts/jobs/components/sidebar.vue +++ b/app/assets/javascripts/jobs/components/sidebar.vue @@ -1,7 +1,7 @@ <script> import { isEmpty } from 'lodash'; import { mapActions, mapState } from 'vuex'; -import { GlLink, GlButton } from '@gitlab/ui'; +import { GlLink, GlDeprecatedButton } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import { timeIntervalInWords } from '~/lib/utils/datetime_utility'; @@ -24,7 +24,7 @@ export default { StagesDropdown, JobsContainer, GlLink, - GlButton, + GlDeprecatedButton, }, mixins: [timeagoMixin], props: { @@ -133,14 +133,14 @@ export default { > </div> - <gl-button + <gl-deprecated-button :aria-label="__('Toggle Sidebar')" type="button" class="btn btn-blank gutter-toggle float-right d-block d-md-none js-sidebar-build-toggle" @click="toggleSidebar" > <i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-right"></i> - </gl-button> + </gl-deprecated-button> </div> <div v-if="job.terminal_path || job.new_issue_path" class="block retry-link"> diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue index 5edb8ff555b..7c9b2824a43 100644 --- a/app/assets/javascripts/jobs/components/trigger_block.vue +++ b/app/assets/javascripts/jobs/components/trigger_block.vue @@ -1,12 +1,12 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; import { __ } from '~/locale'; const HIDDEN_VALUE = '••••••'; export default { components: { - GlButton, + GlDeprecatedButton, }, props: { trigger: { @@ -55,11 +55,11 @@ export default { <p class="trigger-variables-btn-container d-flex"> <span class="font-weight-bold">{{ __('Trigger variables:') }}</span> - <gl-button + <gl-deprecated-button v-if="hasValues" class="btn-sm group js-reveal-variables trigger-variables-btn" @click="toggleValues" - >{{ getToggleButtonText }}</gl-button + >{{ getToggleButtonText }}</gl-deprecated-button > </p> diff --git a/app/assets/javascripts/logs/components/log_control_buttons.vue b/app/assets/javascripts/logs/components/log_control_buttons.vue index 170d0474447..3f5de4c22e0 100644 --- a/app/assets/javascripts/logs/components/log_control_buttons.vue +++ b/app/assets/javascripts/logs/components/log_control_buttons.vue @@ -1,11 +1,11 @@ <script> -import { GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; export default { components: { Icon, - GlButton, + GlDeprecatedButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -51,14 +51,14 @@ export default { :title="__('Scroll to top')" aria-labelledby="scroll-to-top" > - <gl-button + <gl-deprecated-button id="scroll-to-top" class="btn-blank js-scroll-to-top" :aria-label="__('Scroll to top')" :disabled="scrollUpButtonDisabled" @click="handleScrollUp()" ><icon name="scroll_up" - /></gl-button> + /></gl-deprecated-button> </div> <div v-if="scrollDownAvailable" @@ -68,7 +68,7 @@ export default { :title="__('Scroll to bottom')" aria-labelledby="scroll-to-bottom" > - <gl-button + <gl-deprecated-button id="scroll-to-bottom" class="btn-blank js-scroll-to-bottom" :aria-label="__('Scroll to bottom')" @@ -76,9 +76,9 @@ export default { :disabled="scrollDownButtonDisabled" @click="handleScrollDown()" ><icon name="scroll_down" - /></gl-button> + /></gl-deprecated-button> </div> - <gl-button + <gl-deprecated-button id="refresh-log" v-gl-tooltip class="ml-1 px-2 js-refresh-log" @@ -87,6 +87,6 @@ export default { @click="handleRefreshClick" > <icon name="retry" /> - </gl-button> + </gl-deprecated-button> </div> </template> diff --git a/app/assets/javascripts/maintenance_mode_settings/components/app.vue b/app/assets/javascripts/maintenance_mode_settings/components/app.vue index 47150c9dc95..7798c443914 100644 --- a/app/assets/javascripts/maintenance_mode_settings/components/app.vue +++ b/app/assets/javascripts/maintenance_mode_settings/components/app.vue @@ -1,5 +1,5 @@ <script> -import { GlToggle, GlFormGroup, GlFormTextarea, GlButton } from '@gitlab/ui'; +import { GlToggle, GlFormGroup, GlFormTextarea, GlDeprecatedButton } from '@gitlab/ui'; export default { name: 'MaintenanceModeSettingsApp', @@ -7,7 +7,7 @@ export default { GlToggle, GlFormGroup, GlFormTextarea, - GlButton, + GlDeprecatedButton, }, data() { return { @@ -38,7 +38,7 @@ export default { /> </gl-form-group> <div class="mt-4"> - <gl-button variant="success">{{ __('Save changes') }}</gl-button> + <gl-deprecated-button variant="success">{{ __('Save changes') }}</gl-deprecated-button> </div> </article> </template> diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue index ca416650f34..0ddd690ce0c 100644 --- a/app/assets/javascripts/monitoring/components/charts/time_series.vue +++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue @@ -1,6 +1,6 @@ <script> import { omit, throttle } from 'lodash'; -import { GlLink, GlButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui'; +import { GlLink, GlDeprecatedButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui'; import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts'; import dateFormat from 'dateformat'; import { s__, __ } from '~/locale'; @@ -41,7 +41,7 @@ export default { GlAreaChart, GlLineChart, GlTooltip, - GlButton, + GlDeprecatedButton, GlChartSeriesLabel, GlLink, Icon, diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index cebe501139c..2229b6d8292 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -3,7 +3,7 @@ import { debounce, pickBy } from 'lodash'; import { mapActions, mapState, mapGetters } from 'vuex'; import VueDraggable from 'vuedraggable'; import { - GlButton, + GlDeprecatedButton, GlDropdown, GlDropdownItem, GlDropdownHeader, @@ -44,7 +44,7 @@ export default { VueDraggable, PanelType, Icon, - GlButton, + GlDeprecatedButton, GlDropdown, GlLoadingIcon, GlDropdownItem, @@ -471,7 +471,7 @@ export default { </gl-form-group> <gl-form-group class="col-sm-2 col-md-2 col-lg-1 refresh-dashboard-button"> - <gl-button + <gl-deprecated-button ref="refreshDashboardBtn" v-gl-tooltip variant="default" @@ -479,7 +479,7 @@ export default { @click="refreshDashboard" > <icon name="repeat" /> - </gl-button> + </gl-deprecated-button> </gl-form-group> <gl-form-group @@ -488,22 +488,22 @@ export default { class="dropdown-buttons col-md d-md-flex col-lg d-lg-flex align-items-end" > <div id="prometheus-graphs-dropdown-buttons"> - <gl-button + <gl-deprecated-button v-if="showRearrangePanelsBtn" :pressed="isRearrangingPanels" variant="default" class="mr-2 mt-1 js-rearrange-button" @click="toggleRearrangingPanels" - >{{ __('Arrange charts') }}</gl-button + >{{ __('Arrange charts') }}</gl-deprecated-button > - <gl-button + <gl-deprecated-button v-if="addingMetricsAvailable" ref="addMetricBtn" v-gl-modal="$options.addMetric.modalId" variant="outline-success" data-qa-selector="add_metric_button" class="mr-2 mt-1" - >{{ $options.addMetric.title }}</gl-button + >{{ $options.addMetric.title }}</gl-deprecated-button > <gl-modal v-if="addingMetricsAvailable" @@ -519,27 +519,29 @@ export default { /> </form> <div slot="modal-footer"> - <gl-button @click="hideAddMetricModal">{{ __('Cancel') }}</gl-button> - <gl-button + <gl-deprecated-button @click="hideAddMetricModal">{{ + __('Cancel') + }}</gl-deprecated-button> + <gl-deprecated-button ref="submitCustomMetricsFormBtn" v-track-event="getAddMetricTrackingOptions()" :disabled="!formIsValid" variant="success" @click="submitCustomMetricsForm" - >{{ __('Save changes') }}</gl-button + >{{ __('Save changes') }}</gl-deprecated-button > </div> </gl-modal> - <gl-button + <gl-deprecated-button v-if="selectedDashboard.can_edit" class="mt-1 js-edit-link" :href="selectedDashboard.project_blob_path" data-qa-selector="edit_dashboard_button" - >{{ __('Edit dashboard') }}</gl-button + >{{ __('Edit dashboard') }}</gl-deprecated-button > - <gl-button + <gl-deprecated-button v-if="externalDashboardUrl.length" class="mt-1 js-external-dashboard-link" variant="primary" @@ -549,7 +551,7 @@ export default { > {{ __('View full dashboard') }} <icon name="external-link" /> - </gl-button> + </gl-deprecated-button> </div> </gl-form-group> </div> diff --git a/app/assets/javascripts/monitoring/components/embeds/embed_group.vue b/app/assets/javascripts/monitoring/components/embeds/embed_group.vue index b8562afe441..b60c87fee82 100644 --- a/app/assets/javascripts/monitoring/components/embeds/embed_group.vue +++ b/app/assets/javascripts/monitoring/components/embeds/embed_group.vue @@ -1,14 +1,14 @@ <script> import { mapState, mapActions, mapGetters } from 'vuex'; import sum from 'lodash/sum'; -import { GlButton, GlCard, GlIcon } from '@gitlab/ui'; +import { GlDeprecatedButton, GlCard, GlIcon } from '@gitlab/ui'; import { n__ } from '~/locale'; import { monitoringDashboard } from '~/monitoring/stores'; import MetricEmbed from './metric_embed.vue'; export default { components: { - GlButton, + GlDeprecatedButton, GlCard, GlIcon, MetricEmbed, @@ -78,7 +78,7 @@ export default { :body-class="bodyClass" > <template #header> - <gl-button + <gl-deprecated-button class="collapsible-card-btn d-flex text-decoration-none" :aria-label="buttonLabel" variant="link" @@ -86,7 +86,7 @@ export default { > <gl-icon class="mr-1" :name="arrowIconName" /> {{ buttonLabel }} - </gl-button> + </gl-deprecated-button> </template> <div class="d-flex flex-wrap"> <metric-embed diff --git a/app/assets/javascripts/mr_tabs_popover/components/popover.vue b/app/assets/javascripts/mr_tabs_popover/components/popover.vue index f8293d2a473..30455709149 100644 --- a/app/assets/javascripts/mr_tabs_popover/components/popover.vue +++ b/app/assets/javascripts/mr_tabs_popover/components/popover.vue @@ -1,12 +1,12 @@ <script> -import { GlPopover, GlButton, GlLink } from '@gitlab/ui'; +import { GlPopover, GlDeprecatedButton, GlLink } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; import axios from '~/lib/utils/axios_utils'; export default { components: { GlPopover, - GlButton, + GlDeprecatedButton, GlLink, Icon, }, @@ -57,13 +57,13 @@ export default { <icon name="external-link" :size="10" /> </gl-link> </p> - <gl-button + <gl-deprecated-button variant="primary" size="sm" data-qa-selector="dismiss_popover_button" @click="onDismiss" > {{ __('Got it') }} - </gl-button> + </gl-deprecated-button> </gl-popover> </template> diff --git a/app/assets/javascripts/notes/components/discussion_filter_note.vue b/app/assets/javascripts/notes/components/discussion_filter_note.vue index 8dc4b43d69a..25ff49fbd0f 100644 --- a/app/assets/javascripts/notes/components/discussion_filter_note.vue +++ b/app/assets/javascripts/notes/components/discussion_filter_note.vue @@ -1,5 +1,5 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; import { __, sprintf } from '~/locale'; @@ -7,7 +7,7 @@ import notesEventHub from '../event_hub'; export default { components: { - GlButton, + GlDeprecatedButton, Icon, }, computed: { @@ -40,12 +40,12 @@ export default { <div class="timeline-content"> <div ref="timelineContent" v-html="timelineContent"></div> <div class="discussion-filter-actions mt-2"> - <gl-button ref="showAllActivity" variant="default" @click="selectFilter(0)"> + <gl-deprecated-button ref="showAllActivity" variant="default" @click="selectFilter(0)"> {{ __('Show all activity') }} - </gl-button> - <gl-button ref="showComments" variant="default" @click="selectFilter(1)"> + </gl-deprecated-button> + <gl-deprecated-button ref="showComments" variant="default" @click="selectFilter(1)"> {{ __('Show comments only') }} - </gl-button> + </gl-deprecated-button> </div> </div> </li> diff --git a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue index 1d1529bfa5b..e5f78b1c7de 100644 --- a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue +++ b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue @@ -1,12 +1,12 @@ <script> -import { GlTooltipDirective, GlButton } from '@gitlab/ui'; +import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; export default { name: 'ResolveWithIssueButton', components: { Icon, - GlButton, + GlDeprecatedButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -22,13 +22,13 @@ export default { <template> <div class="btn-group" role="group"> - <gl-button + <gl-deprecated-button v-gl-tooltip :href="url" :title="s__('MergeRequests|Resolve this thread in a new issue')" class="new-issue-for-discussion discussion-create-issue-btn" > <icon name="issue-new" /> - </gl-button> + </gl-deprecated-button> </div> </template> diff --git a/app/assets/javascripts/notes/components/note_actions/reply_button.vue b/app/assets/javascripts/notes/components/note_actions/reply_button.vue index 20551279aec..30cb7967c34 100644 --- a/app/assets/javascripts/notes/components/note_actions/reply_button.vue +++ b/app/assets/javascripts/notes/components/note_actions/reply_button.vue @@ -1,12 +1,12 @@ <script> -import { GlTooltipDirective, GlButton } from '@gitlab/ui'; +import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; export default { name: 'ReplyButton', components: { Icon, - GlButton, + GlDeprecatedButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -16,7 +16,7 @@ export default { <template> <div class="note-actions-item"> - <gl-button + <gl-deprecated-button ref="button" v-gl-tooltip class="note-action-button" @@ -27,6 +27,6 @@ export default { @click="$emit('startReplying')" > <icon name="comment" class="link-highlight" /> - </gl-button> + </gl-deprecated-button> </div> </template> diff --git a/app/assets/javascripts/operation_settings/components/external_dashboard.vue b/app/assets/javascripts/operation_settings/components/external_dashboard.vue index 3594e30bd69..e9c7d7c5d56 100644 --- a/app/assets/javascripts/operation_settings/components/external_dashboard.vue +++ b/app/assets/javascripts/operation_settings/components/external_dashboard.vue @@ -1,10 +1,10 @@ <script> import { mapState, mapActions } from 'vuex'; -import { GlButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui'; +import { GlDeprecatedButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui'; export default { components: { - GlButton, + GlDeprecatedButton, GlFormGroup, GlFormInput, GlLink, @@ -36,7 +36,7 @@ export default { <h3 class="js-section-header h4"> {{ s__('ExternalMetrics|External Dashboard') }} </h3> - <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button> + <gl-deprecated-button class="js-settings-toggle">{{ __('Expand') }}</gl-deprecated-button> <p class="js-section-sub-header"> {{ s__( @@ -63,9 +63,9 @@ export default { /> <!-- eslint-enable @gitlab/vue-require-i18n-attribute-strings --> </gl-form-group> - <gl-button variant="success" @click="updateExternalDashboardUrl"> + <gl-deprecated-button variant="success" @click="updateExternalDashboardUrl"> {{ __('Save Changes') }} - </gl-button> + </gl-deprecated-button> </form> </div> </section> diff --git a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue index 831a3ca1658..5b7c8141084 100644 --- a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue +++ b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue @@ -1,12 +1,12 @@ <script> import { escape as esc } from 'lodash'; -import { GlModal, GlButton, GlFormInput } from '@gitlab/ui'; +import { GlModal, GlDeprecatedButton, GlFormInput } from '@gitlab/ui'; import { s__, sprintf } from '~/locale'; export default { components: { GlModal, - GlButton, + GlDeprecatedButton, GlFormInput, }, props: { @@ -122,11 +122,15 @@ export default { </form> </template> <template slot="modal-footer"> - <gl-button variant="secondary" @click="onCancel">{{ s__('Cancel') }}</gl-button> - <gl-button :disabled="!canSubmit" variant="warning" @click="onSecondaryAction"> + <gl-deprecated-button variant="secondary" @click="onCancel">{{ + s__('Cancel') + }}</gl-deprecated-button> + <gl-deprecated-button :disabled="!canSubmit" variant="warning" @click="onSecondaryAction"> {{ secondaryAction }} - </gl-button> - <gl-button :disabled="!canSubmit" variant="danger" @click="onSubmit">{{ action }}</gl-button> + </gl-deprecated-button> + <gl-deprecated-button :disabled="!canSubmit" variant="danger" @click="onSubmit">{{ + action + }}</gl-deprecated-button> </template> </gl-modal> </template> diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue index d16f49f981c..74ada6a4d15 100644 --- a/app/assets/javascripts/pipelines/components/empty_state.vue +++ b/app/assets/javascripts/pipelines/components/empty_state.vue @@ -1,10 +1,10 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; export default { name: 'PipelinesEmptyState', components: { - GlButton, + GlDeprecatedButton, }, props: { helpPagePath: { @@ -43,9 +43,13 @@ export default { </p> <div class="text-center"> - <gl-button :href="helpPagePath" variant="primary" class="js-get-started-pipelines"> + <gl-deprecated-button + :href="helpPagePath" + variant="primary" + class="js-get-started-pipelines" + > {{ s__('Pipelines|Get started with Pipelines') }} - </gl-button> + </gl-deprecated-button> </div> </template> diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue index fd59a580961..c5e95036f4f 100644 --- a/app/assets/javascripts/pipelines/components/graph/action_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue @@ -1,5 +1,5 @@ <script> -import { GlTooltipDirective, GlButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlTooltipDirective, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; import { dasherize } from '~/lib/utils/text_utility'; import { __ } from '~/locale'; @@ -19,7 +19,7 @@ import Icon from '~/vue_shared/components/icon.vue'; export default { components: { Icon, - GlButton, + GlDeprecatedButton, GlLoadingIcon, }, directives: { @@ -82,7 +82,7 @@ export default { }; </script> <template> - <gl-button + <gl-deprecated-button :id="`js-ci-action-${link}`" v-gl-tooltip="{ boundary: 'viewport' }" :title="tooltipText" @@ -93,5 +93,5 @@ export default { > <gl-loading-icon v-if="isLoading" class="js-action-icon-loading" /> <icon v-else :name="actionIcon" /> - </gl-button> + </gl-deprecated-button> </template> diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue index d929398b6dc..550b9daa521 100644 --- a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue @@ -1,5 +1,5 @@ <script> -import { GlLoadingIcon, GlTooltipDirective, GlButton } from '@gitlab/ui'; +import { GlLoadingIcon, GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui'; import CiStatus from '~/vue_shared/components/ci_icon.vue'; import { __ } from '~/locale'; @@ -10,7 +10,7 @@ export default { components: { CiStatus, GlLoadingIcon, - GlButton, + GlDeprecatedButton, }, props: { pipeline: { @@ -78,7 +78,7 @@ export default { class="linked-pipeline build" :class="{ 'child-pipeline': childPipeline }" > - <gl-button + <gl-deprecated-button :id="buttonId" v-gl-tooltip :title="tooltipText" @@ -104,6 +104,6 @@ export default { >{{ label }}</span > </div> - </gl-button> + </gl-deprecated-button> </li> </template> diff --git a/app/assets/javascripts/pipelines/components/nav_controls.vue b/app/assets/javascripts/pipelines/components/nav_controls.vue index 5e4147f8805..4f6c9d2bd90 100644 --- a/app/assets/javascripts/pipelines/components/nav_controls.vue +++ b/app/assets/javascripts/pipelines/components/nav_controls.vue @@ -1,12 +1,12 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; import LoadingButton from '../../vue_shared/components/loading_button.vue'; export default { name: 'PipelineNavControls', components: { LoadingButton, - GlButton, + GlDeprecatedButton, }, props: { newPipelinePath: { @@ -42,14 +42,14 @@ export default { </script> <template> <div class="nav-controls"> - <gl-button + <gl-deprecated-button v-if="newPipelinePath" :href="newPipelinePath" variant="success" class="js-run-pipeline" > {{ s__('Pipelines|Run Pipeline') }} - </gl-button> + </gl-deprecated-button> <loading-button v-if="resetCachePath" @@ -59,8 +59,8 @@ export default { @click="onClickResetCache" /> - <gl-button v-if="ciLintPath" :href="ciLintPath" class="js-ci-lint"> + <gl-deprecated-button v-if="ciLintPath" :href="ciLintPath" class="js-ci-lint"> {{ s__('Pipelines|CI Lint') }} - </gl-button> + </gl-deprecated-button> </div> </template> diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue index 9764e32955c..7d4276e8d2e 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui'; +import { GlDeprecatedButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; import flash from '~/flash'; import { s__, __, sprintf } from '~/locale'; @@ -14,7 +14,7 @@ export default { components: { Icon, GlCountdown, - GlButton, + GlDeprecatedButton, GlLoadingIcon, }, props: { @@ -94,7 +94,7 @@ export default { <ul class="dropdown-menu dropdown-menu-right"> <li v-for="action in actions" :key="action.path"> - <gl-button + <gl-deprecated-button :class="{ disabled: isActionDisabled(action) }" :disabled="isActionDisabled(action)" class="js-pipeline-action-link no-btn btn d-flex align-items-center justify-content-between flex-wrap" @@ -105,7 +105,7 @@ export default { <icon name="clock" /> <gl-countdown :end-date-string="action.scheduled_at" /> </span> - </gl-button> + </gl-deprecated-button> </li> </ul> </div> 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 2fa3fa41eed..9739ef76867 100644 --- a/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue +++ b/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlProgressBar } from '@gitlab/ui'; +import { GlDeprecatedButton, GlProgressBar } from '@gitlab/ui'; import { __ } from '~/locale'; import { formatTime, secondsToMilliseconds } from '~/lib/utils/datetime_utility'; import Icon from '~/vue_shared/components/icon.vue'; @@ -7,7 +7,7 @@ import Icon from '~/vue_shared/components/icon.vue'; export default { name: 'TestSummary', components: { - GlButton, + GlDeprecatedButton, GlProgressBar, Icon, }, @@ -62,14 +62,14 @@ export default { <div> <div class="row"> <div class="col-12 d-flex prepend-top-8 align-items-center"> - <gl-button + <gl-deprecated-button v-if="showBack" size="sm" class="append-right-default js-back-button" @click="onBackClick" > <icon name="angle-left" /> - </gl-button> + </gl-deprecated-button> <h4>{{ heading }}</h4> </div> diff --git a/app/assets/javascripts/prometheus_alerts/components/reset_key.vue b/app/assets/javascripts/prometheus_alerts/components/reset_key.vue index 3a03cd409a6..15b6a29e5cf 100644 --- a/app/assets/javascripts/prometheus_alerts/components/reset_key.vue +++ b/app/assets/javascripts/prometheus_alerts/components/reset_key.vue @@ -1,5 +1,11 @@ <script> -import { GlButton, GlFormGroup, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui'; +import { + GlDeprecatedButton, + GlFormGroup, + GlFormInput, + GlModal, + GlModalDirective, +} from '@gitlab/ui'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import axios from '~/lib/utils/axios_utils'; import { __, sprintf } from '~/locale'; @@ -8,7 +14,7 @@ import createFlash from '~/flash'; export default { copyToClipboard: __('Copy'), components: { - GlButton, + GlDeprecatedButton, GlFormGroup, GlFormInput, GlModal, @@ -112,13 +118,13 @@ export default { ) }} </gl-modal> - <gl-button v-gl-modal.authKeyModal class="js-reset-auth-key">{{ + <gl-deprecated-button v-gl-modal.authKeyModal class="js-reset-auth-key">{{ __('Reset key') - }}</gl-button> + }}</gl-deprecated-button> </template> - <gl-button v-else class="js-reset-auth-key" @click="resetKey">{{ + <gl-deprecated-button v-else class="js-reset-auth-key" @click="resetKey">{{ __('Generate key') - }}</gl-button> + }}</gl-deprecated-button> </div> </div> </template> diff --git a/app/assets/javascripts/registry/explorer/pages/details.vue b/app/assets/javascripts/registry/explorer/pages/details.vue index b558ed51a5b..6afd4d1107a 100644 --- a/app/assets/javascripts/registry/explorer/pages/details.vue +++ b/app/assets/javascripts/registry/explorer/pages/details.vue @@ -3,7 +3,7 @@ import { mapState, mapActions, mapGetters } from 'vuex'; import { GlTable, GlFormCheckbox, - GlButton, + GlDeprecatedButton, GlIcon, GlTooltipDirective, GlPagination, @@ -41,7 +41,7 @@ export default { components: { GlTable, GlFormCheckbox, - GlButton, + GlDeprecatedButton, GlIcon, ClipboardButton, GlPagination, @@ -250,7 +250,7 @@ export default { /> </template> <template #head(actions)> - <gl-button + <gl-deprecated-button ref="bulkDeleteButton" v-gl-tooltip :disabled="!selectedItems || selectedItems.length === 0" @@ -261,7 +261,7 @@ export default { @click="deleteMultipleItems()" > <gl-icon name="remove" /> - </gl-button> + </gl-deprecated-button> </template> <template #cell(checkbox)="{index}"> @@ -304,7 +304,7 @@ export default { </span> </template> <template #cell(actions)="{index, item}"> - <gl-button + <gl-deprecated-button ref="singleDeleteButton" :title="s__('ContainerRegistry|Remove tag')" :aria-label="s__('ContainerRegistry|Remove tag')" @@ -314,7 +314,7 @@ export default { @click="deleteSingleItem(index)" > <gl-icon name="remove" /> - </gl-button> + </gl-deprecated-button> </template> <template #empty> diff --git a/app/assets/javascripts/registry/explorer/pages/list.vue b/app/assets/javascripts/registry/explorer/pages/list.vue index 1ed24fbb59f..7204cbd90eb 100644 --- a/app/assets/javascripts/registry/explorer/pages/list.vue +++ b/app/assets/javascripts/registry/explorer/pages/list.vue @@ -4,7 +4,7 @@ import { GlEmptyState, GlPagination, GlTooltipDirective, - GlButton, + GlDeprecatedButton, GlIcon, GlModal, GlSprintf, @@ -30,7 +30,7 @@ export default { ProjectPolicyAlert, ClipboardButton, QuickstartDropdown, - GlButton, + GlDeprecatedButton, GlIcon, GlModal, GlSprintf, @@ -201,7 +201,7 @@ export default { class="d-none d-sm-block" :title="$options.i18n.deleteButtonDisabled" > - <gl-button + <gl-deprecated-button ref="deleteImageButton" v-gl-tooltip :disabled="!listItem.destroy_path" @@ -212,7 +212,7 @@ export default { @click="deleteImage(listItem)" > <gl-icon name="remove" /> - </gl-button> + </gl-deprecated-button> </div> </div> <gl-pagination diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue index cab3c7fff85..afd502109bf 100644 --- a/app/assets/javascripts/registry/settings/components/settings_form.vue +++ b/app/assets/javascripts/registry/settings/components/settings_form.vue @@ -1,6 +1,6 @@ <script> import { mapActions, mapState, mapGetters } from 'vuex'; -import { GlCard, GlButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlCard, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui'; import Tracking from '~/tracking'; import { UPDATE_SETTINGS_ERROR_MESSAGE, @@ -12,7 +12,7 @@ import ExpirationPolicyFields from '../../shared/components/expiration_policy_fi export default { components: { GlCard, - GlButton, + GlDeprecatedButton, GlLoadingIcon, ExpirationPolicyFields, }, @@ -73,15 +73,15 @@ export default { </template> <template #footer> <div class="d-flex justify-content-end"> - <gl-button + <gl-deprecated-button ref="cancel-button" type="reset" class="mr-2 d-block" :disabled="isCancelButtonDisabled" > {{ __('Cancel') }} - </gl-button> - <gl-button + </gl-deprecated-button> + <gl-deprecated-button ref="save-button" type="submit" :disabled="isSubmitButtonDisabled" @@ -90,7 +90,7 @@ export default { > {{ __('Save expiration policy') }} <gl-loading-icon v-if="isLoading" class="ml-2" /> - </gl-button> + </gl-deprecated-button> </div> </template> </gl-card> diff --git a/app/assets/javascripts/releases/components/app_edit.vue b/app/assets/javascripts/releases/components/app_edit.vue index 4fa0e96217a..e90adcd0e25 100644 --- a/app/assets/javascripts/releases/components/app_edit.vue +++ b/app/assets/javascripts/releases/components/app_edit.vue @@ -1,6 +1,6 @@ <script> import { mapState, mapActions } from 'vuex'; -import { GlButton, GlLink, GlFormInput, GlFormGroup } from '@gitlab/ui'; +import { GlDeprecatedButton, GlLink, GlFormInput, GlFormGroup } from '@gitlab/ui'; import { escape as esc } from 'lodash'; import { __, sprintf } from '~/locale'; import MarkdownField from '~/vue_shared/components/markdown/field.vue'; @@ -15,7 +15,7 @@ export default { components: { GlFormInput, GlFormGroup, - GlButton, + GlDeprecatedButton, GlLink, MarkdownField, AssetLinksForm, @@ -163,14 +163,14 @@ export default { <asset-links-form v-if="showAssetLinksForm" /> <div class="d-flex pt-3"> - <gl-button + <gl-deprecated-button class="mr-auto js-submit-button" variant="success" type="submit" :aria-label="__('Save changes')" > {{ __('Save changes') }} - </gl-button> + </gl-deprecated-button> <gl-link :href="cancelPath" class="js-cancel-button btn btn-default"> {{ __('Cancel') }} </gl-link> diff --git a/app/assets/javascripts/releases/components/asset_links_form.vue b/app/assets/javascripts/releases/components/asset_links_form.vue index f4c92477775..7299fd24ec5 100644 --- a/app/assets/javascripts/releases/components/asset_links_form.vue +++ b/app/assets/javascripts/releases/components/asset_links_form.vue @@ -4,7 +4,7 @@ import { GlSprintf, GlLink, GlFormGroup, - GlButton, + GlDeprecatedButton, GlIcon, GlTooltipDirective, GlFormInput, @@ -12,7 +12,7 @@ import { export default { name: 'AssetLinksForm', - components: { GlSprintf, GlLink, GlFormGroup, GlButton, GlIcon, GlFormInput }, + components: { GlSprintf, GlLink, GlFormGroup, GlDeprecatedButton, GlIcon, GlFormInput }, directives: { GlTooltip: GlTooltipDirective }, computed: { ...mapState('detail', ['release', 'releaseAssetsDocsPath']), @@ -106,7 +106,7 @@ export default { /> </gl-form-group> - <gl-button + <gl-deprecated-button v-gl-tooltip class="mb-5 mb-sm-3 flex-grow-0 flex-shrink-0 remove-button" :aria-label="__('Remove asset link')" @@ -115,10 +115,14 @@ export default { > <gl-icon class="m-0" name="remove" /> <span class="d-inline d-sm-none">{{ __('Remove asset link') }}</span> - </gl-button> + </gl-deprecated-button> </div> - <gl-button variant="link" class="align-self-end mb-5 mb-sm-0" @click="onAddAnotherClicked"> + <gl-deprecated-button + variant="link" + class="align-self-end mb-5 mb-sm-0" + @click="onAddAnotherClicked" + > {{ __('Add another link') }} - </gl-button> + </gl-deprecated-button> </div> </template> diff --git a/app/assets/javascripts/releases/components/release_block_milestone_info.vue b/app/assets/javascripts/releases/components/release_block_milestone_info.vue index d9fbd2884b7..01ad0cbf732 100644 --- a/app/assets/javascripts/releases/components/release_block_milestone_info.vue +++ b/app/assets/javascripts/releases/components/release_block_milestone_info.vue @@ -3,7 +3,7 @@ import { GlProgressBar, GlLink, GlBadge, - GlButton, + GlDeprecatedButton, GlTooltipDirective, GlSprintf, } from '@gitlab/ui'; @@ -17,7 +17,7 @@ export default { GlProgressBar, GlLink, GlBadge, - GlButton, + GlDeprecatedButton, GlSprintf, }, directives: { @@ -134,9 +134,13 @@ export default { <span :key="'bullet-' + milestone.id" class="append-right-4">•</span> </template> <template v-if="shouldRenderShowMoreLink(index)"> - <gl-button :key="'more-button-' + milestone.id" variant="link" @click="toggleShowAll"> + <gl-deprecated-button + :key="'more-button-' + milestone.id" + variant="link" + @click="toggleShowAll" + > {{ moreText }} - </gl-button> + </gl-deprecated-button> </template> </template> </div> diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue index 71c3e15ba49..a13f8ac65cf 100644 --- a/app/assets/javascripts/repository/components/last_commit.vue +++ b/app/assets/javascripts/repository/components/last_commit.vue @@ -1,5 +1,5 @@ <script> -import { GlTooltipDirective, GlLink, GlButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui'; import defaultAvatarUrl from 'images/no_avatar.png'; import { sprintf, s__ } from '~/locale'; import Icon from '../../vue_shared/components/icon.vue'; @@ -19,7 +19,7 @@ export default { ClipboardButton, CiIcon, GlLink, - GlButton, + GlDeprecatedButton, GlLoadingIcon, }, directives: { @@ -124,7 +124,7 @@ export default { > {{ commit.title }} </gl-link> - <gl-button + <gl-deprecated-button v-if="commit.description" :class="{ open: showDescription }" :aria-label="__('Show commit description')" @@ -132,7 +132,7 @@ export default { @click="toggleShowDescription" > <icon name="ellipsis_h" :size="10" /> - </gl-button> + </gl-deprecated-button> <div class="committer"> <gl-link v-if="commit.author" diff --git a/app/assets/javascripts/self_monitor/components/self_monitor_form.vue b/app/assets/javascripts/self_monitor/components/self_monitor_form.vue index 1e203d332db..adc7d3c5ebd 100644 --- a/app/assets/javascripts/self_monitor/components/self_monitor_form.vue +++ b/app/assets/javascripts/self_monitor/components/self_monitor_form.vue @@ -1,6 +1,6 @@ <script> import Vue from 'vue'; -import { GlFormGroup, GlButton, GlModal, GlToast, GlToggle } from '@gitlab/ui'; +import { GlFormGroup, GlDeprecatedButton, GlModal, GlToast, GlToggle } from '@gitlab/ui'; import { mapState, mapActions } from 'vuex'; import { __, s__, sprintf } from '~/locale'; import { visitUrl, getBaseURL } from '~/lib/utils/url_utility'; @@ -10,7 +10,7 @@ Vue.use(GlToast); export default { components: { GlFormGroup, - GlButton, + GlDeprecatedButton, GlModal, GlToggle, }, @@ -122,7 +122,7 @@ export default { <h4 class="js-section-header"> {{ s__('SelfMonitoring|Self monitoring') }} </h4> - <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button> + <gl-deprecated-button class="js-settings-toggle">{{ __('Expand') }}</gl-deprecated-button> <p class="js-section-sub-header"> {{ s__('SelfMonitoring|Enable or disable instance self monitoring') }} </p> diff --git a/app/assets/javascripts/serverless/components/missing_prometheus.vue b/app/assets/javascripts/serverless/components/missing_prometheus.vue index 6c19434f202..6c29f7c89ff 100644 --- a/app/assets/javascripts/serverless/components/missing_prometheus.vue +++ b/app/assets/javascripts/serverless/components/missing_prometheus.vue @@ -1,10 +1,10 @@ <script> -import { GlButton, GlLink } from '@gitlab/ui'; +import { GlDeprecatedButton, GlLink } from '@gitlab/ui'; import { s__ } from '../../locale'; export default { components: { - GlButton, + GlDeprecatedButton, GlLink, }, props: { @@ -53,9 +53,9 @@ export default { </p> <div v-if="!missingData" class="text-left"> - <gl-button :href="clustersPath" variant="success"> + <gl-deprecated-button :href="clustersPath" variant="success"> {{ s__('ServerlessDetails|Install Prometheus') }} - </gl-button> + </gl-deprecated-button> </div> </div> </div> diff --git a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue index 624ca18eec9..ae6f451df18 100644 --- a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue +++ b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue @@ -1,23 +1,30 @@ <script> import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue'; import BlobContentEdit from '~/blob/components/blob_edit_content.vue'; +import { GlLoadingIcon } from '@gitlab/ui'; export default { components: { BlobHeaderEdit, BlobContentEdit, + GlLoadingIcon, }, inheritAttrs: false, props: { + value: { + type: String, + required: false, + default: '', + }, fileName: { type: String, required: false, default: '', }, - }, - methods: { - emitFileNameChange(newFileName) { - this.$emit('name-change', newFileName); + isLoading: { + type: Boolean, + required: false, + default: true, }, }, }; @@ -26,8 +33,19 @@ export default { <div class="form-group file-editor"> <label>{{ s__('Snippets|File') }}</label> <div class="file-holder snippet"> - <blob-header-edit :value="fileName" @input="emitFileNameChange" /> - <blob-content-edit v-bind="$attrs" :file-name="fileName" v-on="$listeners" /> + <blob-header-edit :value="fileName" @input="$emit('name-change', $event)" /> + <gl-loading-icon + v-if="isLoading" + :label="__('Loading snippet')" + :size="2" + class="loading-animation prepend-top-20 append-bottom-20" + /> + <blob-content-edit + v-else + :value="value" + :file-name="fileName" + @input="$emit('input', $event)" + /> </div> </div> </template> diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue index 7f8781fcc49..c280096b2bf 100644 --- a/app/assets/javascripts/snippets/components/snippet_header.vue +++ b/app/assets/javascripts/snippets/components/snippet_header.vue @@ -4,7 +4,7 @@ import { GlAvatar, GlIcon, GlSprintf, - GlButton, + GlDeprecatedButton, GlModal, GlAlert, GlLoadingIcon, @@ -22,7 +22,7 @@ export default { GlAvatar, GlIcon, GlSprintf, - GlButton, + GlDeprecatedButton, GlModal, GlAlert, GlLoadingIcon, @@ -189,7 +189,7 @@ export default { <div class="detail-page-header-actions"> <div class="d-none d-sm-block"> <template v-for="(action, index) in personalSnippetActions"> - <gl-button + <gl-deprecated-button v-if="action.condition" :key="index" :variant="action.variant" @@ -198,7 +198,7 @@ export default { @click="action.click ? action.click() : undefined" > {{ action.text }} - </gl-button> + </gl-deprecated-button> </template> </div> <div class="d-block d-sm-none dropdown"> @@ -228,8 +228,8 @@ export default { </gl-sprintf> <template #modal-footer> - <gl-button @click="closeDeleteModal">{{ __('Cancel') }}</gl-button> - <gl-button + <gl-deprecated-button @click="closeDeleteModal">{{ __('Cancel') }}</gl-deprecated-button> + <gl-deprecated-button variant="danger" :disabled="isDeleting" data-qa-selector="delete_snippet_button" @@ -237,7 +237,7 @@ export default { > <gl-loading-icon v-if="isDeleting" inline /> {{ __('Delete snippet') }} - </gl-button> + </gl-deprecated-button> </template> </gl-modal> </div> diff --git a/app/assets/javascripts/static_site_editor/components/edit_area.vue b/app/assets/javascripts/static_site_editor/components/edit_area.vue new file mode 100644 index 00000000000..921d93669c5 --- /dev/null +++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue @@ -0,0 +1,18 @@ +<script> +import { GlFormTextarea } from '@gitlab/ui'; + +export default { + components: { + GlFormTextarea, + }, + props: { + value: { + type: String, + required: true, + }, + }, +}; +</script> +<template> + <gl-form-textarea :value="value" v-on="$listeners" /> +</template> diff --git a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue index 7b8b46cb048..4a0e153eb33 100644 --- a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue +++ b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue @@ -1,3 +1,37 @@ +<script> +import { mapState, mapActions } from 'vuex'; +import { GlSkeletonLoader } from '@gitlab/ui'; + +import EditArea from './edit_area.vue'; + +export default { + components: { + EditArea, + GlSkeletonLoader, + }, + computed: { + ...mapState(['content', 'isContentLoaded', 'isLoadingContent']), + }, + mounted() { + this.loadContent(); + }, + methods: { + ...mapActions(['loadContent']), + }, +}; +</script> <template> - <div></div> + <div class="d-flex justify-content-center h-100"> + <div v-if="isLoadingContent" class="w-50 h-50 mt-2"> + <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> + </div> + <edit-area v-if="isContentLoaded" class="w-75 h-100 shadow-none" :value="content" /> + </div> </template> diff --git a/app/assets/javascripts/static_site_editor/store/state.js b/app/assets/javascripts/static_site_editor/store/state.js index 512967cc3d9..68a7f95760c 100644 --- a/app/assets/javascripts/static_site_editor/store/state.js +++ b/app/assets/javascripts/static_site_editor/store/state.js @@ -1,4 +1,7 @@ const createState = (initialState = {}) => ({ + isLoadingContent: false, + isContentLoaded: false, + content: '', ...initialState, }); diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue index 45798fbc9dc..996e54a1183 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue @@ -1,12 +1,12 @@ <script> -import { GlTooltipDirective, GlButton } from '@gitlab/ui'; +import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui'; import { __ } from '~/locale'; import { RUNNING } from './constants'; export default { name: 'DeploymentActionButton', components: { - GlButton, + GlDeprecatedButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -59,7 +59,7 @@ export default { <template> <span v-gl-tooltip :title="actionInProgressTooltip" class="d-inline-block" tabindex="0"> - <gl-button + <gl-deprecated-button v-gl-tooltip :title="buttonTitle" :loading="isLoading" @@ -70,6 +70,6 @@ export default { <span class="d-inline-flex align-items-baseline"> <slot> </slot> </span> - </gl-button> + </gl-deprecated-button> </span> </template> 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 96603d23374..ba8da46d207 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 @@ -1,11 +1,11 @@ <script> -import { GlButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui'; import { __ } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; export default { components: { - GlButton, + GlDeprecatedButton, GlLoadingIcon, Icon, }, @@ -58,7 +58,7 @@ export default { </div> <template v-else> - <gl-button + <gl-deprecated-button class="btn-blank btn s32 square append-right-default" :aria-label="ariaLabel" :disabled="isLoading" @@ -66,8 +66,8 @@ export default { > <gl-loading-icon v-if="isLoading" /> <icon v-else :name="arrowIconName" class="js-icon" /> - </gl-button> - <gl-button + </gl-deprecated-button> + <gl-deprecated-button variant="link" class="js-title" :disabled="isLoading" @@ -76,7 +76,7 @@ export default { > <template v-if="isCollapsed">{{ title }}</template> <template v-else>{{ __('Collapse') }}</template> - </gl-button> + </gl-deprecated-button> </template> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue index 266c07ead25..dcf02a29f52 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue @@ -1,5 +1,5 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; import { escape as esc } from 'lodash'; import { __, n__, sprintf, s__ } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; @@ -7,7 +7,7 @@ import Icon from '~/vue_shared/components/icon.vue'; export default { components: { Icon, - GlButton, + GlDeprecatedButton, }, props: { isSquashEnabled: { @@ -80,20 +80,20 @@ export default { class="js-mr-widget-commits-count mr-widget-extension clickable d-flex align-items-center px-3 py-2" @click="toggle()" > - <gl-button + <gl-deprecated-button :aria-label="ariaLabel" variant="blank" class="commit-edit-toggle square s24 append-right-default" @click.stop="toggle()" > <icon :name="collapseIcon" :size="16" /> - </gl-button> + </gl-deprecated-button> <span v-if="expanded">{{ __('Collapse') }}</span> <span v-else> <span class="vertical-align-middle" v-html="message"></span> - <gl-button variant="link" class="modify-message-button"> + <gl-deprecated-button variant="link" class="modify-message-button"> {{ modifyLinkMessage }} - </gl-button> + </gl-deprecated-button> </span> </div> <div v-show="expanded"><slot></slot></div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_tour.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_tour.vue index f2d7e86a85e..01a195049ba 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_tour.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_tour.vue @@ -1,6 +1,6 @@ <script> import { s__, sprintf } from '~/locale'; -import { GlPopover, GlButton } from '@gitlab/ui'; +import { GlPopover, GlDeprecatedButton } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; import Cookies from 'js-cookie'; import { parseBoolean } from '~/lib/utils/common_utils'; @@ -29,7 +29,7 @@ export default { ), components: { GlPopover, - GlButton, + GlDeprecatedButton, Icon, }, mixins: [trackingMixin], @@ -111,7 +111,7 @@ export default { <img :src="pipelineSvgPath" /> </div> <p v-html="$options.popoverContent"></p> - <gl-button + <gl-deprecated-button ref="ok" category="primary" class="mt-2 mb-0" @@ -124,8 +124,8 @@ export default { :data-track-label="trackLabel" > {{ __('Show me how') }} - </gl-button> - <gl-button + </gl-deprecated-button> + <gl-deprecated-button ref="no-thanks" category="secondary" class="mt-2 mb-0" @@ -138,6 +138,6 @@ export default { @click="dismissPopover" > {{ __("No thanks, don't show this again") }} - </gl-button> + </gl-deprecated-button> </gl-popover> </template> 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 e34060c3393..360a75c3946 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 @@ -1,6 +1,6 @@ <script> import { isEmpty } from 'lodash'; -import { GlIcon, GlButton } from '@gitlab/ui'; +import { GlIcon, GlDeprecatedButton } from '@gitlab/ui'; import successSvg from 'icons/_icon_status_success.svg'; import warningSvg from 'icons/_icon_status_warning.svg'; import readyToMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/ready_to_merge'; @@ -26,7 +26,7 @@ export default { CommitEdit, CommitMessageDropdown, GlIcon, - GlButton, + GlDeprecatedButton, MergeImmediatelyConfirmationDialog: () => import( 'ee_component/vue_merge_request_widget/components/merge_immediately_confirmation_dialog.vue' @@ -263,7 +263,7 @@ export default { <div class="media-body"> <div class="mr-widget-body-controls media space-children"> <span class="btn-group"> - <gl-button + <gl-deprecated-button size="sm" class="qa-merge-button accept-merge-request" :variant="mergeButtonVariant" @@ -272,7 +272,7 @@ export default { @click="handleMergeButtonClick(isAutoMergeAvailable)" > {{ mergeButtonText }} - </gl-button> + </gl-deprecated-button> <button v-if="shouldShowMergeImmediatelyDropdown" :disabled="isMergeButtonDisabled" 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 e52ad9156d5..118caac84b9 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 @@ -1,6 +1,6 @@ <script> import $ from 'jquery'; -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; import { __, s__ } from '~/locale'; import createFlash from '~/flash'; import StatusIcon from '../mr_widget_status_icon.vue'; @@ -11,7 +11,7 @@ export default { name: 'WorkInProgress', components: { StatusIcon, - GlButton, + GlDeprecatedButton, }, directives: { tooltip, @@ -66,7 +66,7 @@ export default { > </i> </span> - <gl-button + <gl-deprecated-button v-if="mr.removeWIPPath" size="sm" variant="default" @@ -76,7 +76,7 @@ export default { @click="handleRemoveWIP" > {{ s__('mrWidget|Resolve WIP status') }} - </gl-button> + </gl-deprecated-button> </div> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue index 3ff1d9cf48a..d38dd258ce6 100644 --- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue +++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue @@ -12,7 +12,7 @@ * css-class="btn-transparent" * /> */ -import { GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui'; +import { GlDeprecatedButton, GlTooltipDirective, GlIcon } from '@gitlab/ui'; export default { name: 'ClipboardButton', @@ -20,7 +20,7 @@ export default { GlTooltip: GlTooltipDirective, }, components: { - GlButton, + GlDeprecatedButton, GlIcon, }, props: { @@ -65,12 +65,12 @@ export default { </script> <template> - <gl-button + <gl-deprecated-button v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }" :class="cssClass" :title="title" :data-clipboard-text="clipboardText" > <gl-icon name="copy-to-clipboard" /> - </gl-button> + </gl-deprecated-button> </template> diff --git a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue index 7b09337eb15..cdcd5cdef7f 100644 --- a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue +++ b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui'; +import { GlDeprecatedButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import { convertToFixedRange, isEqualTimeRanges, findTimeRange } from '~/lib/utils/datetime_range'; @@ -28,7 +28,7 @@ export default { TooltipOnTruncate, DateTimePickerInput, GlFormGroup, - GlButton, + GlDeprecatedButton, GlDropdown, GlDropdownItem, }, @@ -192,10 +192,10 @@ export default { /> </div> <gl-form-group> - <gl-button @click="closeDropdown">{{ __('Cancel') }}</gl-button> - <gl-button variant="success" :disabled="!isValid" @click="setFixedRange()"> + <gl-deprecated-button @click="closeDropdown">{{ __('Cancel') }}</gl-deprecated-button> + <gl-deprecated-button variant="success" :disabled="!isValid" @click="setFixedRange()"> {{ __('Apply') }} - </gl-button> + </gl-deprecated-button> </gl-form-group> </gl-form-group> <gl-form-group label-for="group-id-dropdown" class="col-md-5 gl-pl-1 gl-pr-1 m-0"> diff --git a/app/assets/javascripts/vue_shared/components/droplab_dropdown_button.vue b/app/assets/javascripts/vue_shared/components/droplab_dropdown_button.vue index 9aca210c1fb..e1f336f5250 100644 --- a/app/assets/javascripts/vue_shared/components/droplab_dropdown_button.vue +++ b/app/assets/javascripts/vue_shared/components/droplab_dropdown_button.vue @@ -1,11 +1,11 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; import Icon from './icon.vue'; export default { components: { Icon, - GlButton, + GlDeprecatedButton, }, props: { size: { @@ -59,9 +59,13 @@ export default { <template> <div class="btn-group droplab-dropdown comment-type-dropdown"> - <gl-button :class="primaryButtonClass" :size="size" @click.prevent="handlePrimaryActionClick"> + <gl-deprecated-button + :class="primaryButtonClass" + :size="size" + @click.prevent="handlePrimaryActionClick" + > {{ selectedActionTitle }} - </gl-button> + </gl-deprecated-button> <button :class="buttonSizeClass" type="button" @@ -74,13 +78,13 @@ export default { <ul :class="dropdownClass" class="dropdown-menu dropdown-open-top"> <template v-for="(action, index) in actions"> <li :key="index" :class="{ 'droplab-item-selected': selectedAction === index }"> - <gl-button class="btn-transparent" @click.prevent="handleActionClick(index)"> + <gl-deprecated-button class="btn-transparent" @click.prevent="handleActionClick(index)"> <i aria-hidden="true" class="fa fa-check icon"> </i> <div class="description"> <strong>{{ action.title }}</strong> <p>{{ action.description }}</p> </div> - </gl-button> + </gl-deprecated-button> </li> <li v-if="index === 0" :key="`${index}-separator`" class="divider droplab-item-ignore"></li> </template> diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue index e2a6e92081f..1f904cd3c6c 100644 --- a/app/assets/javascripts/vue_shared/components/expand_button.vue +++ b/app/assets/javascripts/vue_shared/components/expand_button.vue @@ -1,5 +1,5 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; import { __ } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; @@ -16,7 +16,7 @@ import Icon from '~/vue_shared/components/icon.vue'; export default { name: 'ExpandButton', components: { - GlButton, + GlDeprecatedButton, Icon, }, data() { @@ -41,7 +41,7 @@ export default { </script> <template> <span> - <gl-button + <gl-deprecated-button v-show="isCollapsed" :aria-label="ariaLabel" type="button" @@ -49,10 +49,10 @@ export default { @click="onClick" > <icon :size="12" name="ellipsis_h" /> - </gl-button> + </gl-deprecated-button> <span v-if="isCollapsed"> <slot name="short"></slot> </span> <span v-if="!isCollapsed"> <slot name="expanded"></slot> </span> - <gl-button + <gl-deprecated-button v-show="!isCollapsed" :aria-label="ariaLabel" type="button" @@ -60,6 +60,6 @@ export default { @click="onClick" > <icon :size="12" name="ellipsis_h" /> - </gl-button> + </gl-deprecated-button> </span> </template> diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue index 20bcceeb477..58afcebb7b3 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue @@ -1,6 +1,6 @@ <script> import $ from 'jquery'; -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; import { __ } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; /** @@ -15,7 +15,7 @@ export default { name: 'FilteredSearchDropdown', components: { Icon, - GlButton, + GlDeprecatedButton, }, props: { title: { @@ -141,10 +141,10 @@ export default { <div v-if="shouldRenderCreateButton" class="dropdown-footer"> <slot name="footer" :filter="filter"> - <gl-button + <gl-deprecated-button class="js-dropdown-create-button btn-transparent" @click="$emit('createItem', filter)" - >{{ computedCreateButtonText }}</gl-button + >{{ computedCreateButtonText }}</gl-deprecated-button > </slot> </div> diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue index 876eb7b899c..2665bb4aa92 100644 --- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue +++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue @@ -1,5 +1,5 @@ <script> -import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui'; +import { GlTooltipDirective, GlLink, GlDeprecatedButton } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import CiIconBadge from './ci_badge_link.vue'; import TimeagoTooltip from './time_ago_tooltip.vue'; @@ -18,7 +18,7 @@ export default { TimeagoTooltip, UserAvatarImage, GlLink, - GlButton, + GlDeprecatedButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -108,7 +108,7 @@ export default { <section v-if="$slots.default" class="header-action-buttons"> <slot></slot> </section> - <gl-button + <gl-deprecated-button v-if="hasSidebarButton" id="toggleSidebar" class="d-block d-sm-none @@ -116,6 +116,6 @@ sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header" @click="onClickSidebarButton" > <i class="fa fa-angle-double-left" aria-hidden="true" aria-labelledby="toggleSidebar"> </i> - </gl-button> + </gl-deprecated-button> </header> </template> diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue index c9286e22f82..3508c557289 100644 --- a/app/assets/javascripts/vue_shared/components/loading_button.vue +++ b/app/assets/javascripts/vue_shared/components/loading_button.vue @@ -2,7 +2,7 @@ import { GlLoadingIcon } from '@gitlab/ui'; /* eslint-disable vue/require-default-prop */ /* -This component will be deprecated in favor of gl-button. +This component will be deprecated in favor of gl-deprecated-button. https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-button--loading-button https://gitlab.com/gitlab-org/gitlab/issues/207412 */ diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue index bf25ed96f35..665637f3b9e 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue @@ -1,6 +1,6 @@ <script> import $ from 'jquery'; -import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { GlPopover, GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui'; import ToolbarButton from './toolbar_button.vue'; import Icon from '../icon.vue'; @@ -9,7 +9,7 @@ export default { ToolbarButton, Icon, GlPopover, - GlButton, + GlDeprecatedButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -142,9 +142,9 @@ export default { ) }} </p> - <gl-button variant="primary" size="sm" @click="handleSuggestDismissed"> + <gl-deprecated-button variant="primary" size="sm" @click="handleSuggestDismissed"> {{ __('Got it') }} - </gl-button> + </gl-deprecated-button> </gl-popover> </template> <toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" /> diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue index 8a8cf09194c..af438ce5619 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue @@ -1,9 +1,9 @@ <script> -import { GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; export default { - components: { Icon, GlButton, GlLoadingIcon }, + components: { Icon, GlDeprecatedButton, GlLoadingIcon }, directives: { 'gl-tooltip': GlTooltipDirective }, props: { canApply: { @@ -52,7 +52,7 @@ export default { <gl-loading-icon class="d-flex-center mr-2" /> <span>{{ __('Applying suggestion') }}</span> </div> - <gl-button + <gl-deprecated-button v-else-if="canApply" v-gl-tooltip.viewport="__('This also resolves the discussion')" class="btn-inverted js-apply-btn" @@ -61,6 +61,6 @@ export default { @click="applySuggestion" > {{ __('Apply suggestion') }} - </gl-button> + </gl-deprecated-button> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/modal_copy_button.vue b/app/assets/javascripts/vue_shared/components/modal_copy_button.vue index 271a375ade2..69ba5cb97e2 100644 --- a/app/assets/javascripts/vue_shared/components/modal_copy_button.vue +++ b/app/assets/javascripts/vue_shared/components/modal_copy_button.vue @@ -1,13 +1,13 @@ <script> import $ from 'jquery'; -import { GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui'; import Clipboard from 'clipboard'; import { __ } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; export default { components: { - GlButton, + GlDeprecatedButton, Icon, }, @@ -113,7 +113,7 @@ export default { }; </script> <template> - <gl-button + <gl-deprecated-button v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }" :class="cssClasses" :data-clipboard-target="target" @@ -123,5 +123,5 @@ export default { <slot> <icon name="copy-to-clipboard" /> </slot> - </gl-button> + </gl-deprecated-button> </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 4ad382ed888..ec7d7e94e5c 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 $ from 'jquery'; import { mapGetters, mapActions, mapState } from 'vuex'; -import { GlButton, GlSkeletonLoading, GlTooltipDirective } from '@gitlab/ui'; +import { GlDeprecatedButton, GlSkeletonLoading, GlTooltipDirective } from '@gitlab/ui'; import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history'; import noteHeader from '~/notes/components/note_header.vue'; import Icon from '~/vue_shared/components/icon.vue'; @@ -35,7 +35,7 @@ export default { Icon, noteHeader, TimelineEntryItem, - GlButton, + GlDeprecatedButton, GlSkeletonLoading, }, directives: { @@ -131,7 +131,7 @@ export default { <gl-skeleton-loading /> </pre> <pre v-else class="wrapper mt-2" v-html="descriptionVersion"></pre> - <gl-button + <gl-deprecated-button v-if="canDeleteDescriptionVersion" ref="deleteDescriptionVersionButton" v-gl-tooltip @@ -140,7 +140,7 @@ export default { @click="deleteDescriptionVersion" > <icon name="remove" /> - </gl-button> + </gl-deprecated-button> </div> </div> </div> diff --git a/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue b/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue index a51b2a3ab6d..3d52f4176db 100644 --- a/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue +++ b/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue @@ -1,5 +1,5 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; import { isString } from 'lodash'; import Icon from '~/vue_shared/components/icon.vue'; import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue'; @@ -11,7 +11,7 @@ export default { components: { Icon, ProjectAvatar, - GlButton, + GlDeprecatedButton, }, props: { project: { @@ -45,7 +45,7 @@ export default { }; </script> <template> - <gl-button + <gl-deprecated-button class="d-flex align-items-center btn pt-1 pb-1 border-0 project-list-item" @click="onClick" > @@ -70,5 +70,5 @@ export default { v-html="highlightedProjectName" ></div> </div> - </gl-button> + </gl-deprecated-button> </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 b9c611d2764..55fa1e4ef9c 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 @@ -1,10 +1,10 @@ <script> import { mapGetters } from 'vuex'; -import { GlButton, GlIcon } from '@gitlab/ui'; +import { GlDeprecatedButton, GlIcon } from '@gitlab/ui'; export default { components: { - GlButton, + GlDeprecatedButton, GlIcon, }, computed: { @@ -14,8 +14,8 @@ export default { </script> <template> - <gl-button class="labels-select-dropdown-button w-100 text-left"> + <gl-deprecated-button class="labels-select-dropdown-button w-100 text-left"> <span class="dropdown-toggle-text">{{ dropdownButtonText }}</span> <gl-icon name="chevron-down" class="pull-right" /> - </gl-button> + </gl-deprecated-button> </template> 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 842b2fdbc43..6bb77f6b6f3 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,7 +2,7 @@ import { mapState, mapActions } from 'vuex'; import { GlTooltipDirective, - GlButton, + GlDeprecatedButton, GlIcon, GlFormInput, GlLink, @@ -11,7 +11,7 @@ import { export default { components: { - GlButton, + GlDeprecatedButton, GlIcon, GlFormInput, GlLink, @@ -60,7 +60,7 @@ 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"> - <gl-button + <gl-deprecated-button :aria-label="__('Go back')" variant="link" size="sm" @@ -68,9 +68,9 @@ export default { @click="toggleDropdownContentsCreateView" > <gl-icon name="arrow-left" /> - </gl-button> + </gl-deprecated-button> <span class="flex-grow-1">{{ labelsCreateTitle }}</span> - <gl-button + <gl-deprecated-button :aria-label="__('Close')" variant="link" size="sm" @@ -78,7 +78,7 @@ export default { @click="toggleDropdownContents" > <gl-icon name="close" /> - </gl-button> + </gl-deprecated-button> </div> <div class="dropdown-input"> <gl-form-input @@ -107,7 +107,7 @@ export default { </div> </div> <div class="dropdown-actions clearfix pt-2 px-2"> - <gl-button + <gl-deprecated-button :disabled="disableCreate" variant="primary" class="pull-left d-flex align-items-center" @@ -115,10 +115,13 @@ export default { > <gl-loading-icon v-show="labelCreateInProgress" :inline="true" class="mr-1" /> {{ __('Create') }} - </gl-button> - <gl-button class="pull-right js-btn-cancel-create" @click="toggleDropdownContentsCreateView"> + </gl-deprecated-button> + <gl-deprecated-button + class="pull-right js-btn-cancel-create" + @click="toggleDropdownContentsCreateView" + > {{ __('Cancel') }} - </gl-button> + </gl-deprecated-button> </div> </div> </template> 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 a3494a9e38f..a8e48bfe1a1 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 @@ -1,13 +1,13 @@ <script> import { mapState, mapGetters, mapActions } from 'vuex'; -import { GlLoadingIcon, GlButton, GlIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui'; +import { GlLoadingIcon, GlDeprecatedButton, GlIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui'; import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes'; export default { components: { GlLoadingIcon, - GlButton, + GlDeprecatedButton, GlIcon, GlSearchBoxByType, GlLink, @@ -125,7 +125,7 @@ export default { /> <div class="dropdown-title d-flex align-items-center pt-0 pb-2"> <span class="flex-grow-1">{{ labelsListTitle }}</span> - <gl-button + <gl-deprecated-button :aria-label="__('Close')" variant="link" size="sm" @@ -133,7 +133,7 @@ export default { @click="toggleDropdownContents" > <gl-icon name="close" /> - </gl-button> + </gl-deprecated-button> </div> <div class="dropdown-input"> <gl-search-box-by-type v-model="searchKey" :autofocus="true" /> @@ -160,11 +160,11 @@ export default { <div class="dropdown-footer"> <ul class="list-unstyled"> <li> - <gl-button + <gl-deprecated-button variant="link" class="d-flex w-100 flex-row text-break-word label-item" @click="toggleDropdownContentsCreateView" - >{{ footerCreateLabelTitle }}</gl-button + >{{ footerCreateLabelTitle }}</gl-deprecated-button > </li> <li> 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 57f7962dfe1..081c892e09f 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 @@ -1,10 +1,10 @@ <script> import { mapState, mapActions } from 'vuex'; -import { GlButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui'; export default { components: { - GlButton, + GlDeprecatedButton, GlLoadingIcon, }, props: { @@ -27,12 +27,12 @@ export default { {{ __('Labels') }} <template v-if="allowLabelEdit"> <gl-loading-icon v-show="labelsSelectInProgress" inline /> - <gl-button + <gl-deprecated-button variant="link" class="pull-right js-sidebar-dropdown-toggle" data-qa-selector="labels_edit_button" @click="toggleDropdownContents" - >{{ __('Edit') }}</gl-button + >{{ __('Edit') }}</gl-deprecated-button > </template> </div> diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue index 8eaf8386b99..db378d6f977 100644 --- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue +++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue @@ -1,12 +1,12 @@ <script> -import { GlButton } from '@gitlab/ui'; +import { GlDeprecatedButton } from '@gitlab/ui'; import { sprintf, __ } from '~/locale'; import UserAvatarLink from './user_avatar_link.vue'; export default { components: { UserAvatarLink, - GlButton, + GlDeprecatedButton, }, props: { items: { @@ -82,8 +82,12 @@ export default { :img-size="imgSize" /> <template v-if="hasBreakpoint"> - <gl-button v-if="hasHiddenItems" variant="link" @click="expand"> {{ expandText }} </gl-button> - <gl-button v-else variant="link" @click="collapse"> {{ __('show less') }} </gl-button> + <gl-deprecated-button v-if="hasHiddenItems" variant="link" @click="expand"> + {{ expandText }} + </gl-deprecated-button> + <gl-deprecated-button v-else variant="link" @click="collapse"> + {{ __('show less') }} + </gl-deprecated-button> </template> </div> </template> diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 0daf81628d3..024c1781bf8 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -967,7 +967,7 @@ $ide-commit-header-height: 48px; } .ide-nav-form { - li { + .nav-links li { width: 50%; padding-left: 0; padding-right: 0; diff --git a/app/controllers/projects/grafana_api_controller.rb b/app/controllers/projects/grafana_api_controller.rb index 380a18818ab..c9870f1be2b 100644 --- a/app/controllers/projects/grafana_api_controller.rb +++ b/app/controllers/projects/grafana_api_controller.rb @@ -9,7 +9,7 @@ class Projects::GrafanaApiController < Projects::ApplicationController project, params[:datasource_id], params[:proxy_path], - query_params.to_h + prometheus_params ).execute return continue_polling_response if result.nil? @@ -25,6 +25,15 @@ class Projects::GrafanaApiController < Projects::ApplicationController end def query_params - params.permit(:query, :start, :end, :step) + params.permit(:query, :start_time, :end_time, :step) + end + + def prometheus_params + query_params.to_h + .except(:start_time, :end_time) + .merge( + start: query_params[:start_time], + end: query_params[:end_time] + ) end end diff --git a/app/services/award_emojis/add_service.rb b/app/services/award_emojis/add_service.rb index db465dcaf7e..ceb7a38cead 100644 --- a/app/services/award_emojis/add_service.rb +++ b/app/services/award_emojis/add_service.rb @@ -37,7 +37,8 @@ module AwardEmojis awardable.noteable unless awardable.for_personal_snippet? when MergeRequest, Issue awardable - when Snippet + else + # No todos for all other awardables nil end end diff --git a/app/views/shared/boards/components/_board.html.haml b/app/views/shared/boards/components/_board.html.haml index f3f2c09ea61..ffb406ac35b 100644 --- a/app/views/shared/boards/components/_board.html.haml +++ b/app/views/shared/boards/components/_board.html.haml @@ -58,7 +58,7 @@ = render_if_exists "shared/boards/components/list_weight" %gl-button-group.board-list-button-group.pl-2{ "v-if" => "isNewIssueShown || isSettingsShown" } - %gl-button.issue-count-badge-add-button.no-drag{ type: "button", + %gl-deprecated-button.issue-count-badge-add-button.no-drag{ type: "button", "@click" => "showNewIssueForm", "v-if" => "isNewIssueShown", ":class": "{ 'd-none': !list.isExpanded, 'rounded-right': isNewIssueShown && !isSettingsShown }", diff --git a/app/workers/gitlab/jira_import/stage/start_import_worker.rb b/app/workers/gitlab/jira_import/stage/start_import_worker.rb index ae4864064e4..80f0221c53d 100644 --- a/app/workers/gitlab/jira_import/stage/start_import_worker.rb +++ b/app/workers/gitlab/jira_import/stage/start_import_worker.rb @@ -16,7 +16,7 @@ module Gitlab return unless start_import - Gitlab::Import::SetAsyncJid.set_jid(project) + Gitlab::Import::SetAsyncJid.set_jid(project.import_state) Gitlab::JiraImport::Stage::ImportLabelsWorker.perform_async(project.id) end |