Merge branch '608-button-migration-rename-gl-new-button-gitlab-ui-integration-test' into 'master'

Upgrade @gitlab/ui to v12

See merge request gitlab-org/gitlab!29343

app/assets/javascripts/jira_import/components/jira_import_form.vue

 <script>
-import { GlAvatar, GlNewButton, GlFormGroup, GlFormSelect, GlLabel } from '@gitlab/ui';
+import { GlAvatar, GlButton, GlFormGroup, GlFormSelect, GlLabel } from '@gitlab/ui';
 
 export default {
   name: 'JiraImportForm',
   components: {
     GlAvatar,
-    GlNewButton,
+    GlButton,
     GlFormGroup,
     GlFormSelect,
     GlLabel,
@@ -86,8 +86,8 @@ export default {
       </gl-form-group>
 
       <div class="footer-block row-content-block d-flex justify-content-between">
-        <gl-new-button category="primary" variant="success">{{ __('Next') }}</gl-new-button>
-        <gl-new-button>{{ __('Cancel') }}</gl-new-button>
+        <gl-button category="primary" variant="success">{{ __('Next') }}</gl-button>
+        <gl-button>{{ __('Cancel') }}</gl-button>
       </div>
     </form>
   </div>

app/assets/javascripts/releases/components/app_edit.vue

 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
-import { GlNewButton, GlFormInput, GlFormGroup } from '@gitlab/ui';
+import { GlButton, 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,
-    GlNewButton,
+    GlButton,
     MarkdownField,
     AssetLinksForm,
   },
@@ -167,7 +167,7 @@ export default {
       <asset-links-form v-if="showAssetLinksForm" />
 
       <div class="d-flex pt-3">
-        <gl-new-button
+        <gl-button
           class="mr-auto js-no-auto-disable"
           category="primary"
           variant="success"
@@ -176,10 +176,10 @@ export default {
           :disabled="isSaveChangesDisabled"
         >
           {{ __('Save changes') }}
-        </gl-new-button>
-        <gl-new-button :href="cancelPath" class="js-cancel-button">
+        </gl-button>
+        <gl-button :href="cancelPath" class="js-cancel-button">
           {{ __('Cancel') }}
-        </gl-new-button>
+        </gl-button>
       </div>
     </form>
   </div>

app/assets/javascripts/releases/components/asset_links_form.vue

@@ -4,7 +4,7 @@ import {
   GlSprintf,
   GlLink,
   GlFormGroup,
-  GlNewButton,
+  GlButton,
   GlIcon,
   GlTooltipDirective,
   GlFormInput,
@@ -12,7 +12,7 @@ import {
 
 export default {
   name: 'AssetLinksForm',
-  components: { GlSprintf, GlLink, GlFormGroup, GlNewButton, GlIcon, GlFormInput },
+  components: { GlSprintf, GlLink, GlFormGroup, GlButton, GlIcon, GlFormInput },
   directives: { GlTooltip: GlTooltipDirective },
   computed: {
     ...mapState('detail', ['release', 'releaseAssetsDocsPath']),
@@ -170,7 +170,7 @@ export default {
       </gl-form-group>
 
       <div class="mb-5 mb-sm-3 mt-sm-4 col col-sm-auto">
-        <gl-new-button
+        <gl-button
           v-gl-tooltip
           class="remove-button w-100"
           :aria-label="__('Remove asset link')"
@@ -179,16 +179,16 @@ export default {
         >
           <gl-icon class="mr-1 mr-sm-0 mb-1" :size="16" name="remove" />
           <span class="d-inline d-sm-none">{{ __('Remove asset link') }}</span>
-        </gl-new-button>
+        </gl-button>
       </div>
     </div>
-    <gl-new-button
+    <gl-button
       ref="addAnotherLinkButton"
       variant="link"
       class="align-self-end mb-5 mb-sm-0"
       @click="onAddAnotherClicked"
     >
       {{ __('Add another link') }}
-    </gl-new-button>
+    </gl-button>
   </div>
 </template>

app/assets/javascripts/snippets/components/snippet_header.vue

@@ -9,7 +9,7 @@ import {
   GlLoadingIcon,
   GlDropdown,
   GlDropdownItem,
-  GlNewButton,
+  GlButton,
 } from '@gitlab/ui';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
@@ -28,7 +28,7 @@ export default {
     GlDropdown,
     GlDropdownItem,
     TimeAgoTooltip,
-    GlNewButton,
+    GlButton,
   },
   apollo: {
     canCreateSnippet: {
@@ -186,7 +186,7 @@ export default {
     <div class="detail-page-header-actions">
       <div class="d-none d-sm-flex">
         <template v-for="(action, index) in personalSnippetActions">
-          <gl-new-button
+          <gl-button
             v-if="action.condition"
             :key="index"
             :disabled="action.disabled"
@@ -197,7 +197,7 @@ export default {
             @click="action.click ? action.click() : undefined"
           >
             {{ action.text }}
-          </gl-new-button>
+          </gl-button>
         </template>
       </div>
       <div class="d-block d-sm-none dropdown">
@@ -227,8 +227,8 @@ export default {
       </gl-sprintf>
 
       <template #modal-footer>
-        <gl-new-button @click="closeDeleteModal">{{ __('Cancel') }}</gl-new-button>
-        <gl-new-button
+        <gl-button @click="closeDeleteModal">{{ __('Cancel') }}</gl-button>
+        <gl-button
           variant="danger"
           category="primary"
           :disabled="isDeleting"
@@ -237,7 +237,7 @@ export default {
         >
           <gl-loading-icon v-if="isDeleting" inline />
           {{ __('Delete snippet') }}
-        </gl-new-button>
+        </gl-button>
       </template>
     </gl-modal>
   </div>

app/assets/javascripts/static_site_editor/components/publish_toolbar.vue

 <script>
-import { GlNewButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    GlNewButton,
+    GlButton,
     GlLoadingIcon,
   },
   props: {
@@ -29,16 +29,12 @@ export default {
   <div class="d-flex bg-light border-top justify-content-between align-items-center py-3 px-4">
     <gl-loading-icon :class="{ invisible: !savingChanges }" size="md" />
     <div>
-      <gl-new-button v-if="returnUrl" ref="returnUrlLink" :href="returnUrl">{{
+      <gl-button v-if="returnUrl" ref="returnUrlLink" :href="returnUrl">{{
         s__('StaticSiteEditor|Return to site')
-      }}</gl-new-button>
-      <gl-new-button
-        variant="success"
-        :disabled="!saveable || savingChanges"
-        @click="$emit('submit')"
-      >
+      }}</gl-button>
+      <gl-button variant="success" :disabled="!saveable || savingChanges" @click="$emit('submit')">
         {{ __('Submit Changes') }}
-      </gl-new-button>
+      </gl-button>
     </div>
   </div>
 </template>

app/assets/javascripts/static_site_editor/components/saved_changes_message.vue

 <script>
 import { isString } from 'lodash';
 
-import { GlLink, GlNewButton } from '@gitlab/ui';
+import { GlLink, GlButton } from '@gitlab/ui';
 
 const validateUrlAndLabel = value => isString(value.label) && isString(value.url);
 
 export default {
   components: {
     GlLink,
-    GlNewButton,
+    GlButton,
   },
   props: {
     branch: {
@@ -46,16 +46,12 @@ export default {
         }}
       </p>
       <div class="d-flex justify-content-end">
-        <gl-new-button ref="returnToSiteButton" :href="returnUrl">{{
+        <gl-button ref="returnToSiteButton" :href="returnUrl">{{
           s__('StaticSiteEditor|Return to site')
-        }}</gl-new-button>
-        <gl-new-button
-          ref="mergeRequestButton"
-          class="ml-2"
-          :href="mergeRequest.url"
-          variant="success"
-          >{{ s__('StaticSiteEditor|View merge request') }}</gl-new-button
-        >
+        }}</gl-button>
+        <gl-button ref="mergeRequestButton" class="ml-2" :href="mergeRequest.url" variant="success">
+          {{ s__('StaticSiteEditor|View merge request') }}
+        </gl-button>
       </div>
     </div>
 

app/assets/javascripts/vue_shared/components/clone_dropdown.vue

@@ -3,7 +3,7 @@ import {
   GlNewDropdown,
   GlNewDropdownHeader,
   GlFormInputGroup,
-  GlNewButton,
+  GlButton,
   GlIcon,
   GlTooltipDirective,
 } from '@gitlab/ui';
@@ -15,7 +15,7 @@ export default {
     GlNewDropdown,
     GlNewDropdownHeader,
     GlFormInputGroup,
-    GlNewButton,
+    GlButton,
     GlIcon,
   },
   directives: {
@@ -55,13 +55,13 @@ export default {
         <div class="mx-3">
           <gl-form-input-group :value="sshLink" readonly select-on-click>
             <template #append>
-              <gl-new-button
+              <gl-button
                 v-gl-tooltip.hover
                 :title="$options.copyURLTooltip"
                 :data-clipboard-text="sshLink"
               >
                 <gl-icon name="copy-to-clipboard" :title="$options.copyURLTooltip" />
-              </gl-new-button>
+              </gl-button>
             </template>
           </gl-form-input-group>
         </div>
@@ -73,13 +73,13 @@ export default {
         <div class="mx-3">
           <gl-form-input-group :value="httpLink" readonly select-on-click>
             <template #append>
-              <gl-new-button
+              <gl-button
                 v-gl-tooltip.hover
                 :title="$options.copyURLTooltip"
                 :data-clipboard-text="httpLink"
               >
                 <gl-icon name="copy-to-clipboard" :title="$options.copyURLTooltip" />
-              </gl-new-button>
+              </gl-button>
             </template>
           </gl-form-input-group>
         </div>

ee/app/assets/javascripts/dependencies/components/dependencies_table.vue

 <script>
 import { cloneDeep } from 'lodash';
-import { GlBadge, GlIcon, GlLink, GlNewButton, GlSkeletonLoading, GlTable } from '@gitlab/ui';
+import { GlBadge, GlIcon, GlLink, GlButton, GlSkeletonLoading, GlTable } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import DependenciesTableRow from './dependencies_table_row.vue';
@@ -32,7 +32,7 @@ export default {
     GlBadge,
     GlIcon,
     GlLink,
-    GlNewButton,
+    GlButton,
     GlSkeletonLoading,
     GlTable,
   },
@@ -105,7 +105,7 @@ export default {
       GlTable; they mutate/read the item's _showDetails property, which GlTable
       uses to show/hide the row-details slot -->
     <template #cell(component)="{ item, toggleDetails, detailsShowing }">
-      <gl-new-button
+      <gl-button
         v-if="anyDependencyHasVulnerabilities"
         class="d-none d-md-inline"
         :class="{ invisible: !item.vulnerabilities.length }"
@@ -117,7 +117,7 @@ export default {
           :name="detailsShowing ? 'chevron-up' : 'chevron-down'"
           class="text-secondary-900"
         />
-      </gl-new-button>
+      </gl-button>
       <span class="bold">{{ item.name }}</span
       >&nbsp;{{ item.version }}
     </template>

ee/app/assets/javascripts/roadmap/components/epic_item_details.vue

 <script>
-import { GlNewButton, GlIcon, GlTooltip } from '@gitlab/ui';
+import { GlButton, GlIcon, GlTooltip } from '@gitlab/ui';
 import { __, n__ } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
   components: {
-    GlNewButton,
+    GlButton,
     GlIcon,
     GlTooltip,
   },
@@ -55,14 +55,14 @@ export default {
 
 <template>
   <div class="epic-details-cell d-flex align-items-start p-2" data-qa-selector="epic_details_cell">
-    <gl-new-button
+    <gl-button
       :class="{ invisible: isExpandIconHidden }"
       variant="link"
       :aria-label="expandIconLabel"
       @click="toggleIsEpicExpanded"
     >
       <gl-icon :name="expandIconName" class="text-secondary" aria-hidden="true" />
-    </gl-new-button>
+    </gl-button>
     <div class="overflow-hidden flex-grow-1" :class="[epic.isChildEpic ? 'ml-4 mr-2' : 'mx-2']">
       <a :href="epic.webUrl" :title="epic.title" class="epic-title d-block text-body bold">
         {{ epic.title }}

ee/app/assets/javascripts/security_dashboard/components/csv_export_button.vue

 <script>
-import {
-  GlPopover,
-  GlIcon,
-  GlLink,
-  GlNewButton,
-  GlTooltipDirective,
-  GlLoadingIcon,
-} from '@gitlab/ui';
+import { GlPopover, GlIcon, GlLink, GlButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
@@ -18,7 +11,7 @@ export const STORAGE_KEY = 'vulnerability_csv_export_popover_dismissed';
 export default {
   components: {
     GlIcon,
-    GlNewButton,
+    GlButton,
     GlPopover,
     GlLink,
     GlLoadingIcon,
@@ -70,7 +63,7 @@ export default {
 };
 </script>
 <template>
-  <gl-new-button
+  <gl-button
     ref="csvExportButton"
     v-gl-tooltip.hover
     class="align-self-center"
@@ -104,9 +97,9 @@ export default {
         {{ __('More information and share feedback') }}
         <gl-icon name="external-link" :size="12" class="ml-1" />
       </gl-link>
-      <gl-new-button ref="popoverButton" class="w-100" @click="closePopover">
+      <gl-button ref="popoverButton" class="w-100" @click="closePopover">
         {{ __('Got it!') }}
-      </gl-new-button>
+      </gl-button>
     </gl-popover>
-  </gl-new-button>
+  </gl-button>
 </template>

ee/app/assets/javascripts/security_dashboard/components/first_class_group_security_dashboard_vulnerabilities.vue

 <script>
 import { s__ } from '~/locale';
-import { GlAlert, GlNewButton, GlEmptyState, GlIntersectionObserver } from '@gitlab/ui';
+import { GlAlert, GlButton, GlEmptyState, GlIntersectionObserver } from '@gitlab/ui';
 import VulnerabilityList from 'ee/vulnerabilities/components/vulnerability_list.vue';
 import vulnerabilitiesQuery from '../graphql/group_vulnerabilities.graphql';
 import { VULNERABILITIES_PER_PAGE } from 'ee/vulnerabilities/constants';
@@ -8,7 +8,7 @@ import { VULNERABILITIES_PER_PAGE } from 'ee/vulnerabilities/constants';
 export default {
   components: {
     GlAlert,
-    GlNewButton,
+    GlButton,
     GlEmptyState,
     GlIntersectionObserver,
     VulnerabilityList,
@@ -126,9 +126,9 @@ export default {
       class="text-center"
       @appear="fetchNextPage"
     >
-      <gl-new-button :loading="isLoadingQuery" :disabled="isLoadingQuery" @click="fetchNextPage">{{
+      <gl-button :loading="isLoadingQuery" :disabled="isLoadingQuery" @click="fetchNextPage">{{
         __('Load more vulnerabilities')
-      }}</gl-new-button>
+      }}</gl-button>
     </gl-intersection-observer>
   </div>
 </template>

ee/app/assets/javascripts/security_dashboard/components/first_class_instance_security_dashboard_vulnerabilities.vue

 <script>
-import { GlAlert, GlNewButton, GlEmptyState, GlIntersectionObserver } from '@gitlab/ui';
+import { GlAlert, GlButton, GlEmptyState, GlIntersectionObserver } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import VulnerabilityList from 'ee/vulnerabilities/components/vulnerability_list.vue';
 import vulnerabilitiesQuery from '../graphql/instance_vulnerabilities.graphql';
@@ -8,7 +8,7 @@ import { VULNERABILITIES_PER_PAGE } from 'ee/vulnerabilities/constants';
 export default {
   components: {
     GlAlert,
-    GlNewButton,
+    GlButton,
     GlEmptyState,
     GlIntersectionObserver,
     VulnerabilityList,
@@ -119,9 +119,9 @@ export default {
       class="text-center"
       @appear="fetchNextPage"
     >
-      <gl-new-button :loading="isLoadingQuery" :disabled="isLoadingQuery" @click="fetchNextPage">{{
+      <gl-button :loading="isLoadingQuery" :disabled="isLoadingQuery" @click="fetchNextPage">{{
         __('Load more vulnerabilities')
-      }}</gl-new-button>
+      }}</gl-button>
     </gl-intersection-observer>
   </div>
 </template>

ee/app/assets/javascripts/sidebar/components/status/status.vue

@@ -2,7 +2,7 @@
 import Tracking from '~/tracking';
 import {
   GlIcon,
-  GlNewButton,
+  GlButton,
   GlLoadingIcon,
   GlTooltip,
   GlDropdownItem,
@@ -15,7 +15,7 @@ import { healthStatusTextMap } from '../../constants';
 export default {
   components: {
     GlIcon,
-    GlNewButton,
+    GlButton,
     GlLoadingIcon,
     GlTooltip,
     GlDropdown,
@@ -148,7 +148,7 @@ export default {
         >
           <div class="dropdown-title">
             <span class="health-title">{{ s__('Sidebar|Assign health status') }}</span>
-            <gl-new-button
+            <gl-button
               :aria-label="__('Close')"
               variant="link"
               class="dropdown-title-button dropdown-menu-close"
@@ -159,13 +159,13 @@ export default {
 
           <div class="dropdown-content dropdown-body">
             <gl-dropdown-item @click="handleDropdownClick(null)">
-              <gl-new-button
+              <gl-button
                 variant="link"
                 class="dropdown-item health-dropdown-item"
                 :class="{ 'is-active': isSelected(null) }"
               >
                 {{ s__('Sidebar|No status') }}
-              </gl-new-button>
+              </gl-button>
             </gl-dropdown-item>
 
             <gl-dropdown-divider class="divider health-divider" />
@@ -175,13 +175,13 @@ export default {
               :key="option.key"
               @click="handleDropdownClick(option.key)"
             >
-              <gl-new-button
+              <gl-button
                 variant="link"
                 class="dropdown-item health-dropdown-item"
                 :class="{ 'is-active': isSelected(option.key) }"
               >
                 {{ option.value }}
-              </gl-new-button>
+              </gl-button>
             </gl-dropdown-item>
           </div>
         </gl-dropdown>

ee/app/assets/javascripts/vue_shared/discover/card_security_discover_app.vue

 <script>
-import { GlNewButton, GlTooltipDirective, GlCarousel, GlCarouselSlide } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective, GlCarousel, GlCarouselSlide } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import Tracking from '~/tracking';
 import securityDependencyImageUrl from 'ee_images/promotions/security-dependencies.png';
@@ -11,7 +11,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
-    GlNewButton,
+    GlButton,
     GlCarousel,
     GlCarouselSlide,
   },
@@ -168,7 +168,7 @@ export default {
       <p class="gl-text-gray-900 text-left mb-5" v-html="$options.i18n.discoverPlanCaption"></p>
     </div>
     <div class="discover-buttons d-flex flex-nowrap flex-row justify-content-between mx-auto my-0">
-      <gl-new-button
+      <gl-button
         class="discover-button-upgrade"
         v-bind="discoverButtonProps"
         category="secondary"
@@ -177,8 +177,8 @@ export default {
         :href="linkSecondary"
       >
         {{ $options.i18n.discoverUpgradeLabel }}
-      </gl-new-button>
-      <gl-new-button
+      </gl-button>
+      <gl-button
         class="discover-button-trial"
         v-bind="discoverButtonProps"
         category="primary"
@@ -187,10 +187,10 @@ export default {
         :href="linkMain"
       >
         {{ $options.i18n.discoverTrialLabel }}
-      </gl-new-button>
+      </gl-button>
     </div>
     <div id="tooltipcontainer" class="discover-feedback w-30p position-fixed">
-      <gl-new-button
+      <gl-button
         v-gl-tooltip:tooltipcontainer.left
         :title="$options.i18n.discoverFeedbackLabel"
         icon="slight-smile"

ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue

 <script>
-import { GlDeprecatedButton, GlNewButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlButton, GlLoadingIcon } from '@gitlab/ui';
 import createFlash from '~/flash';
 import EventItem from 'ee/vue_shared/security_reports/components/event_item.vue';
 import { __, s__ } from '~/locale';
@@ -10,7 +10,7 @@ import HistoryCommentEditor from './history_comment_editor.vue';
 export default {
   components: {
     GlDeprecatedButton,
-    GlNewButton,
+    GlButton,
     EventItem,
     HistoryCommentEditor,
     GlLoadingIcon,
@@ -156,7 +156,7 @@ export default {
     <div v-html="comment.note"></div>
 
     <template #right-content>
-      <gl-new-button
+      <gl-button
         ref="confirmDeleteButton"
         variant="danger"
         :disabled="isDeletingComment"
@@ -164,15 +164,15 @@ export default {
       >
         <gl-loading-icon v-if="isDeletingComment" class="mr-1" />
         {{ __('Delete') }}
-      </gl-new-button>
-      <gl-new-button
+      </gl-button>
+      <gl-button
         ref="cancelDeleteButton"
         class="ml-2"
         :disabled="isDeletingComment"
         @click="cancelDeleteConfirmation"
       >
         {{ __('Cancel') }}
-      </gl-new-button>
+      </gl-button>
     </template>
   </event-item>
 

ee/app/assets/javascripts/vulnerabilities/components/history_comment_editor.vue

 <script>
-import { GlFormTextarea, GlNewButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlFormTextarea, GlButton, GlLoadingIcon } from '@gitlab/ui';
 
 export default {
-  components: { GlFormTextarea, GlNewButton, GlLoadingIcon },
+  components: { GlFormTextarea, GlButton, GlLoadingIcon },
   props: {
     initialComment: {
       type: String,
@@ -39,7 +39,7 @@ export default {
       autofocus
     />
     <div class="mt-3">
-      <gl-new-button
+      <gl-button
         ref="saveButton"
         variant="success"
         :disabled="isSaveButtonDisabled"
@@ -47,15 +47,10 @@ export default {
       >
         <gl-loading-icon v-if="isSaving" class="mr-1" />
         {{ __('Save comment') }}
-      </gl-new-button>
-      <gl-new-button
-        ref="cancelButton"
-        class="ml-1"
-        :disabled="isSaving"
-        @click="$emit('onCancel')"
-      >
+      </gl-button>
+      <gl-button ref="cancelButton" class="ml-1" :disabled="isSaving" @click="$emit('onCancel')">
         {{ __('Cancel') }}
-      </gl-new-button>
+      </gl-button>
     </div>
   </div>
 </template>

ee/spec/frontend/dependencies/components/dependencies_table_spec.js

 import { nextTick } from 'vue';
 import { mount, shallowMount } from '@vue/test-utils';
-import { GlBadge, GlNewButton, GlLink, GlSkeletonLoading } from '@gitlab/ui';
+import { GlBadge, GlButton, GlLink, GlSkeletonLoading } from '@gitlab/ui';
 import DependenciesTable from 'ee/dependencies/components/dependencies_table.vue';
 import DependenciesTableRow from 'ee/dependencies/components/dependencies_table_row.vue';
 import DependencyLicenseLinks from 'ee/dependencies/components/dependency_license_links.vue';
@@ -82,7 +82,7 @@ describe('DependenciesTable component', () => {
     };
 
     const findTableRows = () => wrapper.findAll('tbody > tr');
-    const findRowToggleButtons = () => wrapper.findAll(GlNewButton);
+    const findRowToggleButtons = () => wrapper.findAll(GlButton);
     const findDependencyVulnerabilities = () => wrapper.find(DependencyVulnerabilities);
     const normalizeWhitespace = string => string.replace(/\s+/g, ' ');
 

ee/spec/frontend/roadmap/components/epic_item_details_spec.js

-import { GlNewButton, GlIcon, GlTooltip } from '@gitlab/ui';
+import { GlButton, GlIcon, GlTooltip } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import EpicItemDetails from 'ee/roadmap/components/epic_item_details.vue';
 import eventHub from 'ee/roadmap/event_hub';
@@ -27,7 +27,7 @@ const getTitle = wrapper => wrapper.find('.epic-title');
 
 const getGroupName = wrapper => wrapper.find('.epic-group');
 
-const getExpandIconButton = wrapper => wrapper.find(GlNewButton);
+const getExpandIconButton = wrapper => wrapper.find(GlButton);
 
 const getChildEpicsCount = wrapper => wrapper.find({ ref: 'childEpicsCount' });
 

package.json

@@ -40,7 +40,7 @@
     "@babel/preset-env": "^7.8.4",
     "@gitlab/at.js": "1.5.5",
     "@gitlab/svgs": "1.119.0",
-    "@gitlab/ui": "11.2.1",
+    "@gitlab/ui": "12.0.0",
     "@gitlab/visual-review-tools": "1.5.1",
     "@sentry/browser": "^5.10.2",
     "@sourcegraph/code-host-integration": "0.0.36",

spec/frontend/jira_import/components/jira_import_form_spec.js

-import { GlAvatar, GlNewButton, GlFormSelect, GlLabel } from '@gitlab/ui';
+import { GlAvatar, GlButton, GlFormSelect, GlLabel } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import JiraImportForm from '~/jira_import/components/jira_import_form.vue';
 
@@ -44,7 +44,7 @@ describe('JiraImportForm', () => {
 
   it('shows a Next button', () => {
     const nextButton = wrapper
-      .findAll(GlNewButton)
+      .findAll(GlButton)
       .at(0)
       .text();
 
@@ -53,7 +53,7 @@ describe('JiraImportForm', () => {
 
   it('shows a Cancel button', () => {
     const cancelButton = wrapper
-      .findAll(GlNewButton)
+      .findAll(GlButton)
       .at(1)
       .text();
 

spec/frontend/snippets/components/snippet_header_spec.js

 import SnippetHeader from '~/snippets/components/snippet_header.vue';
 import DeleteSnippetMutation from '~/snippets/mutations/deleteSnippet.mutation.graphql';
 import { ApolloMutation } from 'vue-apollo';
-import { GlNewButton, GlModal } from '@gitlab/ui';
+import { GlButton, GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
 describe('Snippet header component', () => {
@@ -89,7 +89,7 @@ describe('Snippet header component', () => {
         updateSnippet: false,
       },
     });
-    expect(wrapper.findAll(GlNewButton).length).toEqual(0);
+    expect(wrapper.findAll(GlButton).length).toEqual(0);
 
     createComponent({
       permissions: {
@@ -97,7 +97,7 @@ describe('Snippet header component', () => {
         updateSnippet: false,
       },
     });
-    expect(wrapper.findAll(GlNewButton).length).toEqual(1);
+    expect(wrapper.findAll(GlButton).length).toEqual(1);
 
     createComponent({
       permissions: {
@@ -105,7 +105,7 @@ describe('Snippet header component', () => {
         updateSnippet: true,
       },
     });
-    expect(wrapper.findAll(GlNewButton).length).toEqual(2);
+    expect(wrapper.findAll(GlButton).length).toEqual(2);
 
     createComponent({
       permissions: {
@@ -117,7 +117,7 @@ describe('Snippet header component', () => {
       canCreateSnippet: true,
     });
     return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.findAll(GlNewButton).length).toEqual(3);
+      expect(wrapper.findAll(GlButton).length).toEqual(3);
     });
   });
 

spec/frontend/static_site_editor/components/publish_toolbar_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlNewButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 
 import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue';
 
@@ -18,7 +18,7 @@ describe('Static Site Editor Toolbar', () => {
   };
 
   const findReturnUrlLink = () => wrapper.find({ ref: 'returnUrlLink' });
-  const findSaveChangesButton = () => wrapper.find(GlNewButton);
+  const findSaveChangesButton = () => wrapper.find(GlButton);
   const findLoadingIndicator = () => wrapper.find(GlLoadingIcon);
 
   beforeEach(() => {

spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap

@@ -42,7 +42,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
           <b-input-group-append-stub
             tag="div"
           >
-            <gl-new-button-stub
+            <gl-button-stub
               category="tertiary"
               data-clipboard-text="ssh://foo.bar"
               icon=""
@@ -55,7 +55,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
                 size="16"
                 title="Copy URL"
               />
-            </gl-new-button-stub>
+            </gl-button-stub>
           </b-input-group-append-stub>
         </b-input-group-stub>
       </div>
@@ -92,7 +92,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
           <b-input-group-append-stub
             tag="div"
           >
-            <gl-new-button-stub
+            <gl-button-stub
               category="tertiary"
               data-clipboard-text="http://foo.bar"
               icon=""
@@ -105,7 +105,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
                 size="16"
                 title="Copy URL"
               />
-            </gl-new-button-stub>
+            </gl-button-stub>
           </b-input-group-append-stub>
         </b-input-group-stub>
       </div>

yarn.lock

@@ -786,10 +786,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.119.0.tgz#ff35c160b1e726f4f1702a4a152712fb669cde4e"
   integrity sha512-bI+kewDLJy1N0//BpUPMx3h5AqG6lfIiV53lxQP9ttn8j/jhyxigZXq1wZ901PI4/ALv9IY1DOSSuLouK4sJsQ==
 
-"@gitlab/ui@11.2.1":
-  version "11.2.1"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-11.2.1.tgz#c031c92204eb2a6036ae3c7482387f66c75524fd"
-  integrity sha512-AhDPYmrBtaW6Qu+inSjoMCWx+Ou3CVIhhGAEjyVsAG7rSOilevVMZui2IlSb6fPtLcXS8F78DTWjp3R1YgxxbQ==
+"@gitlab/ui@12.0.0":
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-12.0.0.tgz#595ebaaf3d4213dcd5a9707384e1c98ea7ba41b6"
+  integrity sha512-5c2zRivIkPgTZi3+kfF8vbP2lTrwTSN1pBP1NaPe74sYw8yEe5ULCjAWKikh3ROUmsRs7+u5A/Wh3j1qaZ2/VA==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"