diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-24 15:10:11 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-24 15:10:11 +0000 |
commit | 27622f7417713cbd2057a7f642e9ce128d9fc169 (patch) | |
tree | a3d4f20076d48d61c5bbd92e2ae895bb069fe92a /app/assets/javascripts | |
parent | 4b9bde7848d9538c1635ffe7a5385ba013487b4a (diff) | |
download | gitlab-ce-27622f7417713cbd2057a7f642e9ce128d9fc169.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts')
144 files changed, 514 insertions, 594 deletions
diff --git a/app/assets/javascripts/alert_management/components/alert_management_table.vue b/app/assets/javascripts/alert_management/components/alert_management_table.vue index 92fd85c6217..bad52af2137 100644 --- a/app/assets/javascripts/alert_management/components/alert_management_table.vue +++ b/app/assets/javascripts/alert_management/components/alert_management_table.vue @@ -35,6 +35,7 @@ const tdClass = const thClass = 'gl-hover-bg-blue-50'; const bodyTrClass = 'gl-border-1 gl-border-t-solid gl-border-gray-100 gl-hover-bg-blue-50 gl-hover-cursor-pointer gl-hover-border-b-solid gl-hover-border-blue-200'; +const TH_TEST_ID = { 'data-testid': 'alert-management-severity-sort' }; const initialPaginationState = { currentPage: 1, @@ -61,6 +62,7 @@ export default { key: 'severity', label: s__('AlertManagement|Severity'), thClass: `${thClass} gl-w-eighth`, + thAttr: TH_TEST_ID, tdClass: `${tdClass} rounded-top text-capitalize sortable-cell`, sortable: true, }, @@ -72,7 +74,7 @@ export default { sortable: true, }, { - key: 'title', + key: 'alertLabel', label: s__('AlertManagement|Alert'), thClass: `gl-pointer-events-none`, tdClass, @@ -397,8 +399,14 @@ export default { {{ item.eventCount }} </template> - <template #cell(title)="{ item }"> - <div class="gl-max-w-full text-truncate" :title="item.title">{{ item.title }}</div> + <template #cell(alertLabel)="{ item }"> + <div + class="gl-max-w-full text-truncate" + :title="`${item.iid} - ${item.title}`" + data-testid="idField" + > + #{{ item.iid }} {{ item.title }} + </div> </template> <template #cell(issue)="{ item }"> diff --git a/app/assets/javascripts/badges/components/badge.vue b/app/assets/javascripts/badges/components/badge.vue index 3242993b06a..3dd05f73841 100644 --- a/app/assets/javascripts/badges/components/badge.vue +++ b/app/assets/javascripts/badges/components/badge.vue @@ -1,13 +1,12 @@ <script> -import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui'; export default { // name: 'Badge' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25 // eslint-disable-next-line @gitlab/require-i18n-strings name: 'Badge', components: { - Icon, + GlIcon, GlLoadingIcon, }, directives: { @@ -84,7 +83,7 @@ export default { <div v-show="hasError" class="btn-group"> <div class="btn btn-default btn-sm disabled"> - <icon :size="16" class="gl-ml-3 gl-mr-3" name="doc-image" aria-hidden="true" /> + <gl-icon :size="16" class="gl-ml-3 gl-mr-3" name="doc-image" aria-hidden="true" /> </div> <div class="btn btn-default btn-sm disabled"> <span class="gl-ml-3 gl-mr-3">{{ s__('Badges|No badge image') }}</span> @@ -99,7 +98,7 @@ export default { type="button" @click="reloadImage" > - <icon :size="16" name="retry" /> + <gl-icon :size="16" name="retry" /> </button> </div> </template> diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue index bad14666bb2..3343634ecad 100644 --- a/app/assets/javascripts/badges/components/badge_list_row.vue +++ b/app/assets/javascripts/badges/components/badge_list_row.vue @@ -1,8 +1,7 @@ <script> import { mapActions, mapState } from 'vuex'; -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; import { s__ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import { PROJECT_BADGE } from '../constants'; import Badge from './badge.vue'; @@ -10,7 +9,7 @@ export default { name: 'BadgeListRow', components: { Badge, - Icon, + GlIcon, GlLoadingIcon, }, props: { @@ -58,7 +57,7 @@ export default { type="button" @click="editBadge(badge)" > - <icon :size="16" :aria-label="__('Edit')" name="pencil" /> + <gl-icon :size="16" :aria-label="__('Edit')" name="pencil" /> </button> <button :disabled="badge.isDeleting" @@ -68,7 +67,7 @@ export default { data-target="#delete-badge-modal" @click="updateBadgeInModal(badge)" > - <icon :size="16" :aria-label="__('Delete')" name="remove" /> + <gl-icon :size="16" :aria-label="__('Delete')" name="remove" /> </button> <gl-loading-icon v-show="badge.isDeleting" :inline="true" /> </div> diff --git a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue index 7520cc2401b..8435a52c451 100644 --- a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue +++ b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue @@ -1,8 +1,7 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; import { sprintf, n__ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import DraftsCount from './drafts_count.vue'; import PublishButton from './publish_button.vue'; import PreviewItem from './preview_item.vue'; @@ -10,7 +9,7 @@ import PreviewItem from './preview_item.vue'; export default { components: { GlLoadingIcon, - Icon, + GlIcon, DraftsCount, PublishButton, PreviewItem, @@ -71,7 +70,7 @@ export default { > {{ __('Finish review') }} <drafts-count /> - <icon name="angle-up" /> + <gl-icon name="angle-up" /> </button> <div class="dropdown-menu dropdown-menu-large dropdown-menu-right dropdown-open-top" @@ -87,7 +86,7 @@ export default { class="dropdown-title-button dropdown-menu-close" @click="toggleReviewDropdown" > - <icon name="close" /> + <gl-icon name="close" /> </button> </div> <div class="dropdown-content"> diff --git a/app/assets/javascripts/batch_comments/components/preview_item.vue b/app/assets/javascripts/batch_comments/components/preview_item.vue index 982fb01f49a..c89a6b537ef 100644 --- a/app/assets/javascripts/batch_comments/components/preview_item.vue +++ b/app/assets/javascripts/batch_comments/components/preview_item.vue @@ -1,9 +1,8 @@ <script> import { mapActions, mapGetters } from 'vuex'; -import { GlSprintf } from '@gitlab/ui'; +import { GlSprintf, GlIcon } from '@gitlab/ui'; import { IMAGE_DIFF_POSITION_TYPE } from '~/diffs/constants'; import { sprintf, __ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import resolvedStatusMixin from '../mixins/resolved_status'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { @@ -14,7 +13,7 @@ import { export default { components: { - Icon, + GlIcon, GlSprintf, }, mixins: [resolvedStatusMixin, glFeatureFlagsMixin()], @@ -101,7 +100,7 @@ export default { @click="scrollToDraft(draft)" > <span class="review-preview-item-header"> - <icon class="flex-shrink-0" :name="iconName" /> + <gl-icon class="flex-shrink-0" :name="iconName" /> <span class="bold text-nowrap" :class="{ 'gl-align-items-center': glFeatures.multilineComments }" @@ -138,7 +137,7 @@ export default { v-if="draft.discussion_id && resolvedStatusMessage" class="review-preview-item-footer draft-note-resolution p-0" > - <icon class="gl-mr-3" name="status_success" /> {{ resolvedStatusMessage }} + <gl-icon class="gl-mr-3" name="status_success" /> {{ resolvedStatusMessage }} </span> </button> </template> diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue index d90928f35b6..3184983ff22 100644 --- a/app/assets/javascripts/boards/components/issue_card_inner.vue +++ b/app/assets/javascripts/boards/components/issue_card_inner.vue @@ -1,10 +1,9 @@ <script> import { sortBy } from 'lodash'; import { mapState } from 'vuex'; -import { GlLabel, GlTooltipDirective } from '@gitlab/ui'; +import { GlLabel, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import issueCardInner from 'ee_else_ce/boards/mixins/issue_card_inner'; import { sprintf, __ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import IssueDueDate from './issue_due_date.vue'; @@ -15,7 +14,7 @@ import { isScopedLabel } from '~/lib/utils/common_utils'; export default { components: { GlLabel, - Icon, + GlIcon, UserAvatarLink, TooltipOnTruncate, IssueDueDate, @@ -148,7 +147,7 @@ export default { <div> <div class="d-flex board-card-header" dir="auto"> <h4 class="board-card-title gl-mb-0 gl-mt-0"> - <icon + <gl-icon v-if="issue.blocked" v-gl-tooltip name="issue-block" @@ -156,7 +155,7 @@ export default { class="issue-blocked-icon gl-mr-2" :aria-label="__('Blocked issue')" /> - <icon + <gl-icon v-if="issue.confidential" v-gl-tooltip name="eye-slash" diff --git a/app/assets/javascripts/boards/components/issue_due_date.vue b/app/assets/javascripts/boards/components/issue_due_date.vue index 4add5ee646a..fb45de6e14d 100644 --- a/app/assets/javascripts/boards/components/issue_due_date.vue +++ b/app/assets/javascripts/boards/components/issue_due_date.vue @@ -1,7 +1,6 @@ <script> import dateFormat from 'dateformat'; -import { GlTooltip } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlTooltip, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; import { getDayDifference, @@ -12,7 +11,7 @@ import { export default { components: { - Icon, + GlIcon, GlTooltip, }, props: { @@ -87,7 +86,7 @@ export default { <template> <span> <span ref="issueDueDate" :class="cssClass" class="board-card-info card-number"> - <icon :class="{ 'text-danger': isPastDue }" class="board-card-info-icon" name="calendar" /> + <gl-icon :class="{ 'text-danger': isPastDue }" class="board-card-info-icon" name="calendar" /> <time :class="{ 'text-danger': isPastDue }" datetime="date" class="board-card-info-text">{{ body }}</time> diff --git a/app/assets/javascripts/boards/components/issue_time_estimate.vue b/app/assets/javascripts/boards/components/issue_time_estimate.vue index e8b7689da13..fe56833016e 100644 --- a/app/assets/javascripts/boards/components/issue_time_estimate.vue +++ b/app/assets/javascripts/boards/components/issue_time_estimate.vue @@ -1,12 +1,11 @@ <script> -import { GlTooltip } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlTooltip, GlIcon } from '@gitlab/ui'; import { parseSeconds, stringifyTime } from '~/lib/utils/datetime_utility'; import boardsStore from '../stores/boards_store'; export default { components: { - Icon, + GlIcon, GlTooltip, }, props: { @@ -34,7 +33,7 @@ export default { <template> <span> <span ref="issueTimeEstimate" class="board-card-info card-number"> - <icon name="hourglass" class="board-card-info-icon" /><time class="board-card-info-text">{{ + <gl-icon name="hourglass" class="board-card-info-icon" /><time class="board-card-info-text">{{ timeEstimate }}</time> </span> diff --git a/app/assets/javascripts/boards/components/modal/list.vue b/app/assets/javascripts/boards/components/modal/list.vue index 78e3351a79e..9b8562f2ce5 100644 --- a/app/assets/javascripts/boards/components/modal/list.vue +++ b/app/assets/javascripts/boards/components/modal/list.vue @@ -1,13 +1,13 @@ <script> import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import ModalStore from '../../stores/modal_store'; import IssueCardInner from '../issue_card_inner.vue'; export default { components: { IssueCardInner, - Icon, + GlIcon, }, props: { issueLinkBase: { @@ -135,7 +135,7 @@ export default { @click="toggleIssue($event, issue)" > <issue-card-inner :issue="issue" :issue-link-base="issueLinkBase" :root-path="rootPath" /> - <icon + <gl-icon v-if="issue.selected" :aria-label="'Issue #' + issue.id + ' selected'" name="mobile-issue-close" diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue index f5a12385587..fe10e7fb856 100644 --- a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue +++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue @@ -1,13 +1,12 @@ <script> -import { GlLink } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlLink, GlIcon } from '@gitlab/ui'; import ModalStore from '../../stores/modal_store'; import boardsStore from '../../stores/boards_store'; export default { components: { GlLink, - Icon, + GlIcon, }, data() { return { @@ -29,7 +28,7 @@ export default { <div class="dropdown inline"> <button class="dropdown-menu-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> <span :style="{ backgroundColor: selected.label.color }" class="dropdown-label-box"> </span> - {{ selected.title }} <icon name="chevron-down" class="dropdown-menu-toggle-icon" /> + {{ selected.title }} <gl-icon name="chevron-down" class="dropdown-menu-toggle-icon" /> </button> <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up"> <ul> diff --git a/app/assets/javascripts/boards/components/project_select.vue b/app/assets/javascripts/boards/components/project_select.vue index a737a6e5afc..9c666d4ecbe 100644 --- a/app/assets/javascripts/boards/components/project_select.vue +++ b/app/assets/javascripts/boards/components/project_select.vue @@ -1,8 +1,7 @@ <script> import $ from 'jquery'; import { escape } from 'lodash'; -import { GlLoadingIcon } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; import eventHub from '../eventhub'; import Api from '../../api'; @@ -11,7 +10,7 @@ import { featureAccessLevel } from '~/pages/projects/shared/permissions/constant export default { name: 'BoardProjectSelect', components: { - Icon, + GlIcon, GlLoadingIcon, }, props: { @@ -105,13 +104,13 @@ export default { data-toggle="dropdown" aria-expanded="false" > - {{ selectedProjectName }} <icon name="chevron-down" class="dropdown-menu-toggle-icon" /> + {{ selectedProjectName }} <gl-icon name="chevron-down" class="dropdown-menu-toggle-icon" /> </button> <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width"> <div class="dropdown-title">{{ __('Projects') }}</div> <div class="dropdown-input"> <input class="dropdown-input-field" type="search" :placeholder="__('Search projects')" /> - <icon name="search" class="dropdown-input-search" data-hidden="true" /> + <gl-icon name="search" class="dropdown-input-search" data-hidden="true" /> </div> <div class="dropdown-content"></div> <div class="dropdown-loading"><gl-loading-icon /></div> diff --git a/app/assets/javascripts/confidential_merge_request/components/dropdown.vue b/app/assets/javascripts/confidential_merge_request/components/dropdown.vue index b8163ecfab2..5b4bdca46e4 100644 --- a/app/assets/javascripts/confidential_merge_request/components/dropdown.vue +++ b/app/assets/javascripts/confidential_merge_request/components/dropdown.vue @@ -1,13 +1,12 @@ <script> -import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui'; +import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; export default { components: { GlDeprecatedDropdown, GlDeprecatedDropdownItem, - Icon, + GlIcon, }, props: { projects: { @@ -41,17 +40,17 @@ export default { <gl-deprecated-dropdown toggle-class="d-flex align-items-center w-100" class="w-100"> <template #button-content> <span class="str-truncated-100 mr-2"> - <icon name="lock" /> + <gl-icon name="lock" /> {{ dropdownText }} </span> - <icon name="chevron-down" class="ml-auto" /> + <gl-icon name="chevron-down" class="ml-auto" /> </template> <gl-deprecated-dropdown-item v-for="project in projects" :key="project.id" @click="selectProject(project)" > - <icon + <gl-icon name="mobile-issue-close" :class="{ icon: project.id !== selectedProject.id }" class="js-active-project-check" diff --git a/app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue b/app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue index f5207b47f69..6f8455e4bcf 100644 --- a/app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue +++ b/app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue @@ -1,8 +1,14 @@ <script> -import { GlFormInput, GlLink, GlFormGroup, GlFormRadioGroup, GlLoadingIcon } from '@gitlab/ui'; +import { + GlFormInput, + GlLink, + GlFormGroup, + GlFormRadioGroup, + GlLoadingIcon, + GlIcon, +} from '@gitlab/ui'; import { debounce } from 'lodash'; import { __, s__ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import csrf from '~/lib/utils/csrf'; import axios from '~/lib/utils/axios_utils'; import statusCodes from '~/lib/utils/http_status'; @@ -37,7 +43,7 @@ export default { GlFormGroup, GlFormRadioGroup, GlLoadingIcon, - Icon, + GlIcon, }, props: { formOperation: { @@ -229,7 +235,7 @@ export default { {{ s__('Metrics|Must be a valid PromQL query.') }} <gl-link href="https://prometheus.io/docs/prometheus/latest/querying/basics/" tabindex="-1"> {{ s__('Metrics|Prometheus Query Documentation') }} - <icon name="external-link" :size="12" /> + <gl-icon name="external-link" :size="12" /> </gl-link> </span> </gl-form-group> diff --git a/app/assets/javascripts/cycle_analytics/components/banner.vue b/app/assets/javascripts/cycle_analytics/components/banner.vue index 0db9d2dbcf9..6bad8c1eca0 100644 --- a/app/assets/javascripts/cycle_analytics/components/banner.vue +++ b/app/assets/javascripts/cycle_analytics/components/banner.vue @@ -1,10 +1,10 @@ <script> import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; export default { components: { - Icon, + GlIcon, }, props: { documentationLink: { @@ -32,7 +32,7 @@ export default { type="button" @click="dismissOverviewDialog" > - <icon name="close" /> + <gl-icon name="close" /> </button> <div class="svg-container" v-html="iconCycleAnalyticsSplash"></div> <div class="inner-content"> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue index dc13f409462..33b4e649ab0 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue +++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue @@ -3,14 +3,12 @@ import { GlIcon } from '@gitlab/ui'; import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue'; import limitWarning from './limit_warning_component.vue'; import totalTime from './total_time_component.vue'; -import icon from '../../vue_shared/components/icon.vue'; export default { components: { userAvatarImage, totalTime, limitWarning, - icon, GlIcon, }, props: { @@ -60,7 +58,7 @@ export default { </template> <template v-else> <span v-if="mergeRequest.branch" class="merge-request-branch"> - <icon :size="16" name="fork" /> + <gl-icon :size="16" name="fork" /> <a :href="mergeRequest.branch.url"> {{ mergeRequest.branch.name }} </a> </span> </template> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue index 2a507b7e601..cb1aa4d628f 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue +++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue @@ -1,16 +1,16 @@ <script> +import { GlIcon } from '@gitlab/ui'; import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue'; import iconBranch from '../svg/icon_branch.svg'; import limitWarning from './limit_warning_component.vue'; import totalTime from './total_time_component.vue'; -import icon from '../../vue_shared/components/icon.vue'; export default { components: { userAvatarImage, totalTime, limitWarning, - icon, + GlIcon, }, props: { items: { @@ -44,7 +44,7 @@ export default { <user-avatar-image :img-src="build.author.avatarUrl" /> <h5 class="item-title"> <a :href="build.url" class="pipeline-id"> #{{ build.id }} </a> - <icon :size="16" name="fork" /> + <gl-icon :size="16" name="fork" /> <a :href="build.branch.url" class="ref-name"> {{ build.branch.name }} </a> <span class="icon-branch" v-html="iconBranch"> </span> <a :href="build.commitUrl" class="commit-sha"> {{ build.shortSha }} </a> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue index caff6f9c349..3ed00b54de3 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue +++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue @@ -1,15 +1,15 @@ <script> +import { GlIcon } from '@gitlab/ui'; import iconBuildStatus from '../svg/icon_build_status.svg'; import iconBranch from '../svg/icon_branch.svg'; import limitWarning from './limit_warning_component.vue'; import totalTime from './total_time_component.vue'; -import icon from '../../vue_shared/components/icon.vue'; export default { components: { totalTime, limitWarning, - icon, + GlIcon, }, props: { items: { @@ -46,7 +46,7 @@ export default { <span class="icon-build-status" v-html="iconBuildStatus"> </span> <a :href="build.url" class="item-build-name"> {{ build.name }} </a> · <a :href="build.url" class="pipeline-id"> #{{ build.id }} </a> - <icon :size="16" name="fork" /> + <gl-icon :size="16" name="fork" /> <a :href="build.branch.url" class="ref-name"> {{ build.branch.name }} </a> <span class="icon-branch" v-html="iconBranch"> </span> <a :href="build.commitUrl" class="commit-sha"> {{ build.shortSha }} </a> diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue index a03a7114b40..0ac16e6b6a0 100644 --- a/app/assets/javascripts/deploy_keys/components/app.vue +++ b/app/assets/javascripts/deploy_keys/components/app.vue @@ -1,5 +1,5 @@ <script> -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; import { s__ } from '~/locale'; import { deprecatedCreateFlash as Flash } from '~/flash'; import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue'; @@ -7,14 +7,13 @@ import eventHub from '../eventhub'; import DeployKeysService from '../service'; import DeployKeysStore from '../store'; import KeysPanel from './keys_panel.vue'; -import Icon from '~/vue_shared/components/icon.vue'; export default { components: { KeysPanel, NavigationTabs, GlLoadingIcon, - Icon, + GlIcon, }, props: { endpoint: { @@ -125,8 +124,8 @@ export default { /> <template v-else-if="hasKeys"> <div class="top-area scrolling-tabs-container inner-page-scroll-tabs"> - <div class="fade-left"><icon name="chevron-lg-left" :size="12" /></div> - <div class="fade-right"><icon name="chevron-lg-right" :size="12" /></div> + <div class="fade-left"><gl-icon name="chevron-lg-left" :size="12" /></div> + <div class="fade-right"><gl-icon name="chevron-lg-right" :size="12" /></div> <navigation-tabs :tabs="tabs" scope="deployKeys" @onChangeTab="onChangeTab" /> </div> diff --git a/app/assets/javascripts/deploy_keys/components/key.vue b/app/assets/javascripts/deploy_keys/components/key.vue index 585b091bc51..5b41d23bd27 100644 --- a/app/assets/javascripts/deploy_keys/components/key.vue +++ b/app/assets/javascripts/deploy_keys/components/key.vue @@ -1,7 +1,7 @@ <script> import { head, tail } from 'lodash'; +import { GlIcon } from '@gitlab/ui'; import { s__, sprintf } from '~/locale'; -import icon from '~/vue_shared/components/icon.vue'; import tooltip from '~/vue_shared/directives/tooltip'; import timeagoMixin from '~/vue_shared/mixins/timeago'; @@ -10,7 +10,7 @@ import actionBtn from './action_btn.vue'; export default { components: { actionBtn, - icon, + GlIcon, }, directives: { tooltip, @@ -130,7 +130,7 @@ export default { class="label deploy-project-label" > <span> {{ firstProject.project.full_name }} </span> - <icon :name="firstProject.can_push ? 'lock-open' : 'lock'" /> + <gl-icon :name="firstProject.can_push ? 'lock-open' : 'lock'" /> </a> <a v-if="isExpandable" @@ -151,7 +151,7 @@ export default { class="label deploy-project-label" > <span> {{ deployKeysProject.project.full_name }} </span> - <icon :name="deployKeysProject.can_push ? 'lock-open' : 'lock'" /> + <gl-icon :name="deployKeysProject.can_push ? 'lock-open' : 'lock'" /> </a> </template> <span v-else class="text-secondary">{{ __('None') }}</span> @@ -161,7 +161,7 @@ export default { <div role="rowheader" class="table-mobile-header">{{ __('Created') }}</div> <div class="table-mobile-content text-secondary key-created-at"> <span v-tooltip :title="tooltipTitle(deployKey.created_at)"> - <icon name="calendar" /> <span>{{ timeFormatted(deployKey.created_at) }}</span> + <gl-icon name="calendar" /> <span>{{ timeFormatted(deployKey.created_at) }}</span> </span> </div> </div> @@ -178,7 +178,7 @@ export default { class="btn btn-default text-secondary" data-container="body" > - <icon name="pencil" /> + <gl-icon name="pencil" /> </a> <action-btn v-if="isRemovable" @@ -189,7 +189,7 @@ export default { type="remove" data-container="body" > - <icon name="remove" /> + <gl-icon name="remove" /> </action-btn> <action-btn v-else-if="isEnabled" @@ -200,7 +200,7 @@ export default { type="disable" data-container="body" > - <icon name="cancel" /> + <gl-icon name="cancel" /> </action-btn> </div> </div> diff --git a/app/assets/javascripts/design_management/components/list/item.vue b/app/assets/javascripts/design_management/components/list/item.vue index 292b6e09055..7febda431c9 100644 --- a/app/assets/javascripts/design_management/components/list/item.vue +++ b/app/assets/javascripts/design_management/components/list/item.vue @@ -1,6 +1,5 @@ <script> import { GlLoadingIcon, GlIcon, GlIntersectionObserver } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; import Timeago from '~/vue_shared/components/time_ago_tooltip.vue'; import { n__, __ } from '~/locale'; import { DESIGN_ROUTE_NAME } from '../../router/constants'; @@ -10,7 +9,6 @@ export default { GlLoadingIcon, GlIntersectionObserver, GlIcon, - Icon, Timeago, }, props: { @@ -132,7 +130,7 @@ export default { <div class="card-body p-0 d-flex-center overflow-hidden position-relative"> <div v-if="icon.name" data-testid="designEvent" class="design-event position-absolute"> <span :title="icon.tooltip" :aria-label="icon.tooltip"> - <icon :name="icon.name" :size="18" :class="icon.classes" /> + <gl-icon :name="icon.name" :size="18" :class="icon.classes" /> </span> </div> <gl-intersection-observer @appear="onAppear"> @@ -164,7 +162,7 @@ export default { </span> </div> <div v-if="notesCount" class="ml-auto d-flex align-items-center text-secondary"> - <icon name="comments" class="ml-1" /> + <gl-icon name="comments" class="ml-1" /> <span :aria-label="notesLabel" class="ml-1"> {{ notesCount }} </span> diff --git a/app/assets/javascripts/design_management_legacy/components/list/item.vue b/app/assets/javascripts/design_management_legacy/components/list/item.vue index 13c703b8a88..40040b25e51 100644 --- a/app/assets/javascripts/design_management_legacy/components/list/item.vue +++ b/app/assets/javascripts/design_management_legacy/components/list/item.vue @@ -1,6 +1,5 @@ <script> import { GlLoadingIcon, GlIcon, GlIntersectionObserver } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; import Timeago from '~/vue_shared/components/time_ago_tooltip.vue'; import { n__, __ } from '~/locale'; import { DESIGN_ROUTE_NAME } from '../../router/constants'; @@ -10,7 +9,6 @@ export default { GlLoadingIcon, GlIntersectionObserver, GlIcon, - Icon, Timeago, }, props: { @@ -132,7 +130,7 @@ export default { <div class="card-body p-0 d-flex-center overflow-hidden position-relative"> <div v-if="icon.name" data-testid="designEvent" class="design-event position-absolute"> <span :title="icon.tooltip" :aria-label="icon.tooltip"> - <icon :name="icon.name" :size="18" :class="icon.classes" /> + <gl-icon :name="icon.name" :size="18" :class="icon.classes" /> </span> </div> <gl-intersection-observer @appear="onAppear"> @@ -164,7 +162,7 @@ export default { </span> </div> <div v-if="notesCount" class="ml-auto d-flex align-items-center text-secondary"> - <icon name="comments" class="ml-1" /> + <gl-icon name="comments" class="ml-1" /> <span :aria-label="notesLabel" class="ml-1"> {{ notesCount }} </span> diff --git a/app/assets/javascripts/design_management_legacy/components/toolbar/index.vue b/app/assets/javascripts/design_management_legacy/components/toolbar/index.vue index b998dfc47b8..5729072fe38 100644 --- a/app/assets/javascripts/design_management_legacy/components/toolbar/index.vue +++ b/app/assets/javascripts/design_management_legacy/components/toolbar/index.vue @@ -1,7 +1,6 @@ <script> -import { GlDeprecatedButton } from '@gitlab/ui'; +import { GlDeprecatedButton, GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import Pagination from './pagination.vue'; import DeleteButton from '../delete_button.vue'; @@ -11,7 +10,7 @@ import { DESIGNS_ROUTE_NAME } from '../../router/constants'; export default { components: { - Icon, + GlIcon, Pagination, DeleteButton, GlDeprecatedButton, @@ -104,7 +103,7 @@ export default { :aria-label="s__('DesignManagement|Go back to designs')" class="mr-3 text-plain d-flex justify-content-center align-items-center" > - <icon :size="18" name="close" /> + <gl-icon :size="18" name="close" /> </router-link> <div class="overflow-hidden d-flex align-items-center"> <h2 class="m-0 str-truncated-100 gl-font-base">{{ filename }}</h2> @@ -112,7 +111,7 @@ export default { </div> <pagination :id="id" class="ml-auto flex-shrink-0" /> <gl-deprecated-button :href="image" class="mr-2"> - <icon :size="18" name="download" /> + <gl-icon :size="18" name="download" /> </gl-deprecated-button> <delete-button v-if="isLatestVersion && canDeleteDesign" @@ -120,7 +119,7 @@ export default { button-variant="danger" @deleteSelectedDesigns="$emit('delete')" > - <icon :size="18" name="remove" /> + <gl-icon :size="18" name="remove" /> </delete-button> </header> </template> diff --git a/app/assets/javascripts/design_management_legacy/components/toolbar/pagination_button.vue b/app/assets/javascripts/design_management_legacy/components/toolbar/pagination_button.vue index f00ecefca01..7051aaddd04 100644 --- a/app/assets/javascripts/design_management_legacy/components/toolbar/pagination_button.vue +++ b/app/assets/javascripts/design_management_legacy/components/toolbar/pagination_button.vue @@ -1,10 +1,10 @@ <script> -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import { DESIGN_ROUTE_NAME } from '../../router/constants'; export default { components: { - Icon, + GlIcon, }, props: { design: { @@ -43,6 +43,6 @@ export default { :aria-label="title" class="btn btn-default" > - <icon :name="iconName" /> + <gl-icon :name="iconName" /> </router-link> </template> diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue index 274a4027e62..f8dab10822b 100644 --- a/app/assets/javascripts/diffs/components/commit_item.vue +++ b/app/assets/javascripts/diffs/components/commit_item.vue @@ -5,7 +5,6 @@ import { GlButtonGroup, GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui' import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; -import Icon from '~/vue_shared/components/icon.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; @@ -39,7 +38,6 @@ import { setUrlParams } from '../../lib/utils/url_utility'; export default { components: { UserAvatarLink, - Icon, ClipboardButton, TimeAgoTooltip, CommitPipelineStatus, @@ -156,7 +154,7 @@ export default { type="button" :aria-label="__('Toggle commit description')" > - <icon :size="12" name="ellipsis_h" /> + <gl-icon :size="12" name="ellipsis_h" /> </button> <div class="committer"> diff --git a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue index ed4edabd81c..8263e938e69 100644 --- a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue +++ b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue @@ -1,10 +1,10 @@ <script> -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; export default { components: { - Icon, + GlIcon, TimeAgo, }, props: { @@ -29,7 +29,7 @@ export default { aria-expanded="false" > <span> {{ selectedVersionName }} </span> - <icon :size="12" name="angle-down" class="position-absolute" /> + <gl-icon :size="12" name="angle-down" class="position-absolute" /> </a> <div class="dropdown-menu dropdown-select dropdown-menu-selectable"> <div class="dropdown-content"> diff --git a/app/assets/javascripts/diffs/components/diff_discussions.vue b/app/assets/javascripts/diffs/components/diff_discussions.vue index b6a0724c201..7b55bd2104d 100644 --- a/app/assets/javascripts/diffs/components/diff_discussions.vue +++ b/app/assets/javascripts/diffs/components/diff_discussions.vue @@ -1,12 +1,12 @@ <script> import { mapActions } from 'vuex'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import noteableDiscussion from '../../notes/components/noteable_discussion.vue'; export default { components: { noteableDiscussion, - Icon, + GlIcon, }, props: { discussions: { @@ -70,7 +70,7 @@ export default { class="js-diff-notes-toggle" @click="toggleDiscussion({ discussionId: discussion.id })" > - <icon v-if="discussion.expanded" name="collapse" class="collapse-icon" /> + <gl-icon v-if="discussion.expanded" name="collapse" class="collapse-icon" /> <template v-else> {{ index + 1 }} </template> diff --git a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue index e5e63bdcb43..9f27758ed27 100644 --- a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue +++ b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue @@ -1,8 +1,8 @@ <script> import { mapState, mapActions } from 'vuex'; +import { GlIcon } from '@gitlab/ui'; import { deprecatedCreateFlash as createFlash } from '~/flash'; import { s__ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import { UNFOLD_COUNT, INLINE_DIFF_VIEW_TYPE, PARALLEL_DIFF_VIEW_TYPE } from '../constants'; import * as utils from '../store/utils'; import tooltip from '../../vue_shared/directives/tooltip'; @@ -26,7 +26,7 @@ export default { tooltip, }, components: { - Icon, + GlIcon, }, props: { fileHash: { @@ -237,7 +237,7 @@ export default { :title="__('Expand up')" @click="handleExpandLines(EXPAND_UP)" > - <icon :size="12" name="expand-up" aria-hidden="true" /> + <gl-icon :size="12" name="expand-up" aria-hidden="true" /> </a> <a class="mx-2 cursor-pointer js-unfold-all" @click="handleExpandLines()"> <span>{{ s__('Diffs|Show unchanged lines') }}</span> @@ -251,7 +251,7 @@ export default { :title="__('Expand down')" @click="handleExpandLines(EXPAND_DOWN)" > - <icon :size="12" name="expand-down" aria-hidden="true" /> + <gl-icon :size="12" name="expand-down" aria-hidden="true" /> </a> </div> </td> diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 5727fbaaf68..06803439e56 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -1,9 +1,8 @@ <script> import { escape } from 'lodash'; import { mapActions, mapGetters } from 'vuex'; -import { GlDeprecatedButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui'; +import { GlDeprecatedButton, GlTooltipDirective, GlLoadingIcon, GlIcon } from '@gitlab/ui'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; -import Icon from '~/vue_shared/components/icon.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue'; import { truncateSha } from '~/lib/utils/text_utility'; import { __, s__, sprintf } from '~/locale'; @@ -18,7 +17,7 @@ export default { GlDeprecatedButton, ClipboardButton, EditButton, - Icon, + GlIcon, FileIcon, DiffStats, }, @@ -162,7 +161,7 @@ export default { @click.self="handleToggleFile" > <div class="file-header-content"> - <icon + <gl-icon v-if="collapsible" ref="collapseIcon" :name="collapseIcon" @@ -237,7 +236,7 @@ export default { type="button" @click="toggleFileDiscussionWrappers(diffFile)" > - <icon name="comment" /> + <gl-icon name="comment" /> </gl-deprecated-button> </span> @@ -273,8 +272,8 @@ export default { @click="toggleFullDiff(diffFile.file_path)" > <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-icon v-else-if="diffFile.isShowingFullFile" name="doc-changes" /> + <gl-icon v-else name="doc-expand" /> </gl-deprecated-button> <gl-deprecated-button ref="viewButton" @@ -287,7 +286,7 @@ export default { data-track-property="diff_toggle_view_sha" :title="viewFileButtonText" > - <icon name="doc-text" /> + <gl-icon name="doc-text" /> </gl-deprecated-button> <a @@ -303,7 +302,7 @@ export default { data-track-property="diff_toggle_external" class="btn btn-file-option" > - <icon name="external-link" /> + <gl-icon name="external-link" /> </a> </div> </div> diff --git a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue index be19d8520b5..439319f487c 100644 --- a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue +++ b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue @@ -1,14 +1,13 @@ <script> -import { GlTooltipDirective } from '@gitlab/ui'; +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { n__ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import { truncate } from '~/lib/utils/text_utility'; import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue'; import { COUNT_OF_AVATARS_IN_GUTTER, LENGTH_OF_AVATAR_TOOLTIP } from '../constants'; export default { components: { - Icon, + GlIcon, UserAvatarImage, }, directives: { @@ -68,7 +67,7 @@ export default { class="diff-notes-collapse js-diff-comment-avatar js-diff-comment-button" @click="$emit('toggleLineDiscussions')" > - <icon :size="12" name="collapse" /> + <gl-icon :size="12" name="collapse" /> </button> <template v-else> <user-avatar-image diff --git a/app/assets/javascripts/diffs/components/diff_stats.vue b/app/assets/javascripts/diffs/components/diff_stats.vue index 439d8097e56..05fbbd39fae 100644 --- a/app/assets/javascripts/diffs/components/diff_stats.vue +++ b/app/assets/javascripts/diffs/components/diff_stats.vue @@ -1,10 +1,10 @@ <script> import { isNumber } from 'lodash'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import { n__ } from '~/locale'; export default { - components: { Icon }, + components: { GlIcon }, props: { addedLines: { type: Number, @@ -46,7 +46,7 @@ export default { }" > <div v-if="hasDiffFiles" class="diff-stats-group"> - <icon name="doc-code" class="diff-stats-icon text-secondary" /> + <gl-icon name="doc-code" class="diff-stats-icon text-secondary" /> <span class="text-secondary bold">{{ diffFilesCountText }} {{ filesText }}</span> </div> <div diff --git a/app/assets/javascripts/diffs/components/edit_button.vue b/app/assets/javascripts/diffs/components/edit_button.vue index 21fdb19287d..ff1af5569dc 100644 --- a/app/assets/javascripts/diffs/components/edit_button.vue +++ b/app/assets/javascripts/diffs/components/edit_button.vue @@ -1,12 +1,11 @@ <script> -import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui'; +import { GlTooltipDirective, GlDeprecatedButton, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; export default { components: { GlDeprecatedButton, - Icon, + GlIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -59,7 +58,7 @@ export default { class="rounded-0 js-edit-blob" @click.native="handleEditClick" > - <icon name="pencil" /> + <gl-icon name="pencil" /> </gl-deprecated-button> </span> </template> diff --git a/app/assets/javascripts/diffs/components/image_diff_overlay.vue b/app/assets/javascripts/diffs/components/image_diff_overlay.vue index be7e6789216..3956c2fab49 100644 --- a/app/assets/javascripts/diffs/components/image_diff_overlay.vue +++ b/app/assets/javascripts/diffs/components/image_diff_overlay.vue @@ -2,12 +2,12 @@ import { mapActions, mapGetters } from 'vuex'; import { isArray } from 'lodash'; import imageDiffMixin from 'ee_else_ce/diffs/mixins/image_diff'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; export default { name: 'ImageDiffOverlay', components: { - Icon, + GlIcon, }, mixins: [imageDiffMixin], props: { @@ -112,7 +112,7 @@ export default { type="button" @click="clickedToggle(discussion)" > - <icon v-if="showCommentIcon" name="image-comment-dark" /> + <gl-icon v-if="showCommentIcon" name="image-comment-dark" /> <template v-else> {{ toggleText(discussion, index) }} </template> @@ -127,7 +127,7 @@ export default { class="btn-transparent comment-indicator" type="button" > - <icon name="image-comment-dark" /> + <gl-icon name="image-comment-dark" /> </button> </div> </template> diff --git a/app/assets/javascripts/diffs/components/settings_dropdown.vue b/app/assets/javascripts/diffs/components/settings_dropdown.vue index c45de481a17..80b44f7bb13 100644 --- a/app/assets/javascripts/diffs/components/settings_dropdown.vue +++ b/app/assets/javascripts/diffs/components/settings_dropdown.vue @@ -1,12 +1,11 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; -import { GlDeprecatedButton } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlDeprecatedButton, GlIcon } from '@gitlab/ui'; export default { components: { GlDeprecatedButton, - Icon, + GlIcon, }, computed: { ...mapGetters('diffs', ['isInlineView', 'isParallelView']), @@ -31,7 +30,7 @@ export default { data-toggle="dropdown" data-display="static" > - <icon name="settings" /> <icon name="chevron-down" /> + <gl-icon name="settings" /> <gl-icon name="chevron-down" /> </button> <div class="dropdown-menu dropdown-menu-right p-2 pt-3 pb-3"> <div> diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue index 38fbd8e61d4..64c4715267f 100644 --- a/app/assets/javascripts/diffs/components/tree_list.vue +++ b/app/assets/javascripts/diffs/components/tree_list.vue @@ -1,8 +1,7 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; -import { GlTooltipDirective } from '@gitlab/ui'; +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { s__, sprintf } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import FileTree from '~/vue_shared/components/file_tree.vue'; import DiffFileRow from './diff_file_row.vue'; @@ -11,7 +10,7 @@ export default { GlTooltip: GlTooltipDirective, }, components: { - Icon, + GlIcon, FileTree, }, props: { @@ -66,7 +65,7 @@ export default { <div class="tree-list-holder d-flex flex-column"> <div class="gl-mb-3 position-relative tree-list-search d-flex"> <div class="flex-fill d-flex"> - <icon name="search" class="position-absolute tree-list-icon" /> + <gl-icon name="search" class="position-absolute tree-list-icon" /> <label for="diff-tree-search" class="sr-only">{{ $options.searchPlaceholder }}</label> <input id="diff-tree-search" @@ -83,7 +82,7 @@ export default { class="position-absolute bg-transparent tree-list-icon tree-list-clear-icon border-0 p-0" @click="clearSearch" > - <icon name="close" /> + <gl-icon name="close" /> </button> </div> </div> diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue index d2978422224..241d4cbb428 100644 --- a/app/assets/javascripts/environments/components/environment_actions.vue +++ b/app/assets/javascripts/environments/components/environment_actions.vue @@ -1,8 +1,7 @@ <script> -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; import { __, s__, sprintf } from '~/locale'; import { formatTime } from '~/lib/utils/datetime_utility'; -import Icon from '~/vue_shared/components/icon.vue'; import eventHub from '../event_hub'; import tooltip from '../../vue_shared/directives/tooltip'; @@ -11,7 +10,7 @@ export default { tooltip, }, components: { - Icon, + GlIcon, GlLoadingIcon, }, props: { @@ -80,8 +79,8 @@ export default { data-toggle="dropdown" > <span> - <icon name="play" /> - <icon name="chevron-down" /> + <gl-icon name="play" /> + <gl-icon name="chevron-down" /> <gl-loading-icon v-if="isLoading" /> </span> </button> @@ -97,7 +96,7 @@ export default { > <span class="flex-fill">{{ action.name }}</span> <span v-if="action.scheduledAt" class="text-secondary"> - <icon name="clock" /> + <gl-icon name="clock" /> {{ remainingTime(action) }} </span> </button> diff --git a/app/assets/javascripts/environments/components/environment_delete.vue b/app/assets/javascripts/environments/components/environment_delete.vue index b53c5fa6583..55aaa6d57bd 100644 --- a/app/assets/javascripts/environments/components/environment_delete.vue +++ b/app/assets/javascripts/environments/components/environment_delete.vue @@ -5,15 +5,14 @@ */ import $ from 'jquery'; -import { GlTooltipDirective } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { s__ } from '~/locale'; import eventHub from '../event_hub'; import LoadingButton from '../../vue_shared/components/loading_button.vue'; export default { components: { - Icon, + GlIcon, LoadingButton, }, directives: { @@ -65,6 +64,6 @@ export default { data-target="#delete-environment-modal" @click="onClick" > - <icon name="remove" /> + <gl-icon name="remove" /> </loading-button> </template> diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index fa3d217f148..8850ed19a4b 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -1,13 +1,12 @@ <script> /* eslint-disable @gitlab/vue-require-i18n-strings */ import { isEmpty } from 'lodash'; -import { GlTooltipDirective } from '@gitlab/ui'; +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import CommitComponent from '~/vue_shared/components/commit.vue'; -import Icon from '~/vue_shared/components/icon.vue'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; import eventHub from '../event_hub'; import ActionsComponent from './environment_actions.vue'; @@ -30,7 +29,7 @@ export default { ActionsComponent, CommitComponent, ExternalUrlComponent, - Icon, + GlIcon, MonitoringButtonComponent, PinComponent, DeleteComponent, @@ -535,7 +534,7 @@ export default { </div> <span v-if="shouldRenderDeployBoard" class="deploy-board-icon" @click="toggleDeployBoard"> - <icon :name="deployIconName" /> + <gl-icon :name="deployIconName" /> </span> <span @@ -560,9 +559,9 @@ export default { role="button" @click="onClickFolder" > - <icon :name="folderIconName" class="folder-icon" /> + <gl-icon :name="folderIconName" class="folder-icon" /> - <icon name="folder" class="folder-icon" /> + <gl-icon name="folder" class="folder-icon" /> <span> {{ model.folderName }} </span> diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue index bd6feb14319..612edd8855d 100644 --- a/app/assets/javascripts/environments/components/environment_monitoring.vue +++ b/app/assets/javascripts/environments/components/environment_monitoring.vue @@ -1,14 +1,12 @@ <script> -import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui'; +import { GlDeprecatedButton, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; /** * Renders the Monitoring (Metrics) link in environments table. */ -import Icon from '~/vue_shared/components/icon.vue'; - export default { components: { - Icon, + GlIcon, GlDeprecatedButton, }, directives: { @@ -37,6 +35,6 @@ export default { rel="noopener noreferrer nofollow" variant="default" > - <icon name="chart" /> + <gl-icon name="chart" /> </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 3a219e98b08..d6cf96cc1e4 100644 --- a/app/assets/javascripts/environments/components/environment_pin.vue +++ b/app/assets/javascripts/environments/components/environment_pin.vue @@ -3,14 +3,13 @@ * Renders a prevent auto-stop button. * Used in environments table. */ -import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlDeprecatedButton, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; import eventHub from '../event_hub'; export default { components: { - Icon, + GlIcon, GlDeprecatedButton, }, directives: { @@ -37,6 +36,6 @@ export default { :aria-label="$options.title" @click="onPinClick" > - <icon name="thumbtack" /> + <gl-icon name="thumbtack" /> </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 7a728961b37..4435f726ea1 100644 --- a/app/assets/javascripts/environments/components/environment_rollback.vue +++ b/app/assets/javascripts/environments/components/environment_rollback.vue @@ -10,14 +10,14 @@ import { GlLoadingIcon, GlModalDirective, GlDeprecatedButton, + GlIcon, } from '@gitlab/ui'; import { s__ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import eventHub from '../event_hub'; export default { components: { - Icon, + GlIcon, GlLoadingIcon, GlDeprecatedButton, }, @@ -81,7 +81,7 @@ export default { class="d-none d-md-block text-secondary" @click="onClick" > - <icon v-if="isLastDeployment" name="repeat" /> <icon v-else name="redo" /> + <gl-icon v-if="isLastDeployment" name="repeat" /> <gl-icon v-else name="redo" /> <gl-loading-icon v-if="isLoading" /> </gl-deprecated-button> </template> diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue index 37f94f9f5ab..b5a7be90204 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.vue +++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue @@ -3,13 +3,12 @@ * Renders a terminal button to open a web terminal. * Used in environments table. */ -import { GlTooltipDirective } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; export default { components: { - Icon, + GlIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -42,6 +41,6 @@ export default { :class="{ disabled: disabled }" class="btn terminal-button d-none d-sm-none d-md-block text-secondary" > - <icon name="terminal" /> + <gl-icon name="terminal" /> </a> </template> diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue index 3d1fdc4f168..5dee3ef3ffe 100644 --- a/app/assets/javascripts/error_tracking/components/error_details.vue +++ b/app/assets/javascripts/error_tracking/components/error_details.vue @@ -11,10 +11,10 @@ import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlDeprecatedDropdownDivider, + GlIcon, } from '@gitlab/ui'; import { deprecatedCreateFlash as createFlash } from '~/flash'; import { __, sprintf, n__ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; import Stacktrace from './stacktrace.vue'; import TrackEventDirective from '~/vue_shared/directives/track_event'; @@ -38,7 +38,7 @@ export default { GlLink, GlLoadingIcon, TooltipOnTruncate, - Icon, + GlIcon, Stacktrace, GlBadge, GlAlert, @@ -397,7 +397,7 @@ export default { data-testid="external-url-link" > <span class="text-truncate">{{ error.externalUrl }}</span> - <icon name="external-link" class="ml-1 flex-shrink-0" /> + <gl-icon name="external-link" class="ml-1 flex-shrink-0" /> </gl-link> </li> <li v-if="error.firstReleaseVersion"> diff --git a/app/assets/javascripts/error_tracking/components/stacktrace_entry.vue b/app/assets/javascripts/error_tracking/components/stacktrace_entry.vue index c6825d7af45..f6ff540de02 100644 --- a/app/assets/javascripts/error_tracking/components/stacktrace_entry.vue +++ b/app/assets/javascripts/error_tracking/components/stacktrace_entry.vue @@ -1,14 +1,13 @@ <script> -import { GlTooltip, GlSprintf } from '@gitlab/ui'; +import { GlTooltip, GlSprintf, GlIcon } from '@gitlab/ui'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue'; -import Icon from '~/vue_shared/components/icon.vue'; export default { components: { ClipboardButton, FileIcon, - Icon, + GlIcon, GlSprintf, }, directives: { @@ -80,7 +79,7 @@ export default { <div ref="header" class="file-title file-title-flex-parent"> <div class="file-header-content d-flex align-content-center"> <div v-if="hasCode" class="d-inline-block cursor-pointer" @click="toggle()"> - <icon :name="collapseIcon" :size="16" aria-hidden="true" class="gl-mr-2" /> + <gl-icon :name="collapseIcon" :size="16" aria-hidden="true" class="gl-mr-2" /> </div> <file-icon :file-name="filePath" :size="18" aria-hidden="true" css-classes="gl-mr-2" /> <strong diff --git a/app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue b/app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue index 0de67a8bcc7..f1fb1a44758 100644 --- a/app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue +++ b/app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue @@ -1,11 +1,10 @@ <script> import { mapActions, mapState } from 'vuex'; -import { GlFormInput } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlFormInput, GlIcon } from '@gitlab/ui'; import LoadingButton from '~/vue_shared/components/loading_button.vue'; export default { - components: { GlFormInput, Icon, LoadingButton }, + components: { GlFormInput, GlIcon, LoadingButton }, computed: { ...mapState(['apiHost', 'connectError', 'connectSuccessful', 'isLoadingProjects', 'token']), tokenInputState() { @@ -64,7 +63,7 @@ export default { :loading="isLoadingProjects" @click="fetchProjects" /> - <icon + <gl-icon v-show="connectSuccessful" class="js-error-tracking-connect-success gl-ml-2 text-success align-middle" :aria-label="__('Projects Successfully Retrieved')" diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue index 40add09f25d..19cb09f0dcc 100644 --- a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue +++ b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue @@ -1,13 +1,13 @@ <script> import { debounce } from 'lodash'; import { mapActions } from 'vuex'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import eventHub from '../event_hub'; import frequentItemsMixin from './frequent_items_mixin'; export default { components: { - Icon, + GlIcon, }, mixins: [frequentItemsMixin], data() { @@ -49,6 +49,6 @@ export default { type="search" class="form-control" /> - <icon v-if="!searchQuery" name="search" class="search-icon" /> + <gl-icon v-if="!searchQuery" name="search" class="search-icon" /> </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 59327e36f5f..79494cb173b 100644 --- a/app/assets/javascripts/grafana_integration/components/grafana_integration.vue +++ b/app/assets/javascripts/grafana_integration/components/grafana_integration.vue @@ -1,7 +1,6 @@ <script> -import { GlButton, GlFormGroup, GlFormInput, GlFormCheckbox } from '@gitlab/ui'; +import { GlButton, GlFormGroup, GlFormInput, GlFormCheckbox, GlIcon } from '@gitlab/ui'; import { mapState, mapActions } from 'vuex'; -import Icon from '~/vue_shared/components/icon.vue'; export default { components: { @@ -9,7 +8,7 @@ export default { GlFormCheckbox, GlFormGroup, GlFormInput, - Icon, + GlIcon, }, data() { return { placeholderUrl: 'https://my-url.grafana.net/' }; @@ -89,7 +88,7 @@ export default { rel="noopener noreferrer" > {{ __('More information') }} - <icon name="external-link" class="vertical-align-middle" /> + <gl-icon name="external-link" class="vertical-align-middle" /> </a> </p> </gl-form-group> diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue index ac4c12dda24..5487e25066e 100644 --- a/app/assets/javascripts/groups/components/item_actions.vue +++ b/app/assets/javascripts/groups/components/item_actions.vue @@ -1,12 +1,12 @@ <script> +import { GlIcon } from '@gitlab/ui'; import tooltip from '~/vue_shared/directives/tooltip'; -import icon from '~/vue_shared/components/icon.vue'; import eventHub from '../event_hub'; import { COMMON_STR } from '../constants'; export default { components: { - icon, + GlIcon, }, directives: { tooltip, @@ -56,7 +56,7 @@ export default { class="leave-group btn btn-xs no-expand gl-text-gray-500 gl-ml-5" @click.prevent="onLeaveGroup" > - <icon name="leave" class="position-top-0" /> + <gl-icon name="leave" class="position-top-0" /> </a> <a v-if="group.canEdit" @@ -68,7 +68,7 @@ export default { data-placement="bottom" class="edit-group btn btn-xs no-expand gl-text-gray-500 gl-ml-5" > - <icon name="settings" class="position-top-0 align-middle" /> + <gl-icon name="settings" class="position-top-0 align-middle" /> </a> </div> </template> diff --git a/app/assets/javascripts/groups/components/item_caret.vue b/app/assets/javascripts/groups/components/item_caret.vue index cd3e3de4cb4..e23b0fa7413 100644 --- a/app/assets/javascripts/groups/components/item_caret.vue +++ b/app/assets/javascripts/groups/components/item_caret.vue @@ -1,9 +1,9 @@ <script> -import icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; export default { components: { - icon, + GlIcon, }, props: { isGroupOpen: { @@ -21,5 +21,5 @@ export default { </script> <template> - <span class="folder-caret gl-mr-2"> <icon :size="10" :name="iconClass" /> </span> + <span class="folder-caret gl-mr-2"> <gl-icon :size="10" :name="iconClass" /> </span> </template> diff --git a/app/assets/javascripts/groups/components/item_stats_value.vue b/app/assets/javascripts/groups/components/item_stats_value.vue index 27b1c632643..18efd8c6823 100644 --- a/app/assets/javascripts/groups/components/item_stats_value.vue +++ b/app/assets/javascripts/groups/components/item_stats_value.vue @@ -1,10 +1,10 @@ <script> +import { GlIcon } from '@gitlab/ui'; import tooltip from '~/vue_shared/directives/tooltip'; -import icon from '~/vue_shared/components/icon.vue'; export default { components: { - icon, + GlIcon, }, directives: { tooltip, @@ -57,6 +57,6 @@ export default { :title="title" data-container="body" > - <icon :name="iconName" /> <span v-if="isValuePresent" class="stat-value"> {{ value }} </span> + <gl-icon :name="iconName" /> <span v-if="isValuePresent" class="stat-value"> {{ value }} </span> </span> </template> diff --git a/app/assets/javascripts/groups/components/item_type_icon.vue b/app/assets/javascripts/groups/components/item_type_icon.vue index ae69fbd7bde..c3787c2df21 100644 --- a/app/assets/javascripts/groups/components/item_type_icon.vue +++ b/app/assets/javascripts/groups/components/item_type_icon.vue @@ -1,10 +1,10 @@ <script> -import icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import { ITEM_TYPE } from '../constants'; export default { components: { - icon, + GlIcon, }, props: { itemType: { @@ -29,5 +29,5 @@ export default { </script> <template> - <span class="item-type-icon"> <icon :name="iconClass" /> </span> + <span class="item-type-icon"> <gl-icon :name="iconClass" /> </span> </template> diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue index a65af55fcac..0bfad0befb3 100644 --- a/app/assets/javascripts/ide/components/activity_bar.vue +++ b/app/assets/javascripts/ide/components/activity_bar.vue @@ -1,13 +1,13 @@ <script> import $ from 'jquery'; import { mapActions, mapState } from 'vuex'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import tooltip from '~/vue_shared/directives/tooltip'; import { leftSidebarViews } from '../constants'; export default { components: { - Icon, + GlIcon, }, directives: { tooltip, @@ -48,7 +48,7 @@ export default { class="ide-sidebar-link js-ide-edit-mode" @click.prevent="changedActivityView($event, $options.leftSidebarViews.edit.name)" > - <icon name="code" /> + <gl-icon name="code" /> </button> </li> <li> @@ -65,7 +65,7 @@ export default { class="ide-sidebar-link js-ide-review-mode" @click.prevent="changedActivityView($event, $options.leftSidebarViews.review.name)" > - <icon name="file-modified" /> + <gl-icon name="file-modified" /> </button> </li> <li> @@ -82,7 +82,7 @@ export default { class="ide-sidebar-link js-ide-commit-mode qa-commit-mode-tab" @click.prevent="changedActivityView($event, $options.leftSidebarViews.commit.name)" > - <icon name="commit" /> + <gl-icon name="commit" /> </button> </li> </ul> diff --git a/app/assets/javascripts/ide/components/branches/item.vue b/app/assets/javascripts/ide/components/branches/item.vue index 49744d573da..2fe435b92ab 100644 --- a/app/assets/javascripts/ide/components/branches/item.vue +++ b/app/assets/javascripts/ide/components/branches/item.vue @@ -1,11 +1,11 @@ <script> /* eslint-disable @gitlab/vue-require-i18n-strings */ -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import Timeago from '~/vue_shared/components/time_ago_tooltip.vue'; export default { components: { - Icon, + GlIcon, Timeago, }, props: { @@ -34,7 +34,7 @@ export default { <template> <a :href="branchHref" class="btn-link d-flex align-items-center"> <span class="d-flex gl-mr-3 ide-search-list-current-icon"> - <icon v-if="isActive" :size="18" name="mobile-issue-close" /> + <gl-icon v-if="isActive" :size="18" name="mobile-issue-close" /> </span> <span> <strong> {{ item.name }} </strong> diff --git a/app/assets/javascripts/ide/components/branches/search_list.vue b/app/assets/javascripts/ide/components/branches/search_list.vue index dd2d726d525..c317fadb656 100644 --- a/app/assets/javascripts/ide/components/branches/search_list.vue +++ b/app/assets/javascripts/ide/components/branches/search_list.vue @@ -1,14 +1,13 @@ <script> import { mapActions, mapState } from 'vuex'; import { debounce } from 'lodash'; -import { GlLoadingIcon } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; import Item from './item.vue'; export default { components: { Item, - Icon, + GlIcon, GlLoadingIcon, }, data() { @@ -67,7 +66,7 @@ export default { class="form-control dropdown-input-field" @input="searchBranches" /> - <icon :size="18" name="search" class="ml-3 input-icon" /> + <gl-icon :size="18" name="search" class="ml-3 input-icon" /> </label> <div class="dropdown-content ide-merge-requests-dropdown-content d-flex"> <gl-loading-icon diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue index d1422a506e7..609ce287d3f 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue @@ -1,14 +1,13 @@ <script> import { mapActions } from 'vuex'; -import { GlModal } from '@gitlab/ui'; +import { GlModal, GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import tooltip from '~/vue_shared/directives/tooltip'; import ListItem from './list_item.vue'; export default { components: { - Icon, + GlIcon, ListItem, GlModal, }, @@ -74,7 +73,7 @@ export default { <div class="ide-commit-list-container"> <header class="multi-file-commit-panel-header d-flex mb-0"> <div class="d-flex align-items-center flex-fill"> - <icon v-once :name="iconName" :size="18" class="gl-mr-3" /> + <gl-icon v-once :name="iconName" :size="18" class="gl-mr-3" /> <strong> {{ titleText }} </strong> <div class="d-flex ml-auto"> <button @@ -93,7 +92,7 @@ export default { data-boundary="viewport" @click="openDiscardModal" > - <icon :size="16" name="remove-all" class="ml-auto mr-auto position-top-0" /> + <gl-icon :size="16" name="remove-all" class="ml-auto mr-auto position-top-0" /> </button> </div> </div> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue index 1b257ca11cc..4821b8389ff 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue @@ -1,11 +1,11 @@ <script> -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import tooltip from '~/vue_shared/directives/tooltip'; import { sprintf, n__, __ } from '~/locale'; export default { components: { - Icon, + GlIcon, }, directives: { tooltip, @@ -77,7 +77,7 @@ export default { data-placement="left" class="gl-mb-5" > - <icon v-once :name="iconName" :size="18" /> + <gl-icon v-once :name="iconName" :size="18" /> </div> <div v-tooltip @@ -86,7 +86,7 @@ export default { data-placement="left" class="gl-mb-3" > - <icon :name="additionIconName" :size="18" :class="addedFilesIconClass" /> + <gl-icon :name="additionIconName" :size="18" :class="addedFilesIconClass" /> </div> {{ addedFilesLength }} <div @@ -96,7 +96,7 @@ export default { data-placement="left" class="gl-mt-3 gl-mb-3" > - <icon :name="modifiedIconName" :size="18" :class="modifiedFilesClass" /> + <gl-icon :name="modifiedIconName" :size="18" :class="modifiedFilesClass" /> </div> {{ modifiedFilesLength }} </div> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue index c65169f5d31..a0d6cf3c42d 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue @@ -1,14 +1,14 @@ <script> import { mapActions } from 'vuex'; +import { GlIcon } from '@gitlab/ui'; import tooltip from '~/vue_shared/directives/tooltip'; -import Icon from '~/vue_shared/components/icon.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue'; import { viewerTypes } from '../../constants'; import getCommitIconMap from '../../commit_icon'; export default { components: { - Icon, + GlIcon, FileIcon, }, directives: { @@ -95,7 +95,7 @@ export default { </span> <div class="ml-auto d-flex align-items-center"> <div class="d-flex align-items-center ide-commit-list-changed-icon"> - <icon :name="iconName" :size="16" :class="iconClass" /> + <gl-icon :name="iconName" :size="16" :class="iconClass" /> </div> </div> </div> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue index b37c7280a30..2787b10a48b 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue @@ -1,6 +1,6 @@ <script> +import { GlIcon } from '@gitlab/ui'; import { __, sprintf } from '../../../locale'; -import Icon from '../../../vue_shared/components/icon.vue'; import popover from '../../../vue_shared/directives/popover'; import { MAX_TITLE_LENGTH, MAX_BODY_LENGTH } from '../../constants'; @@ -9,7 +9,7 @@ export default { popover, }, components: { - Icon, + GlIcon, }, props: { text: { @@ -84,7 +84,7 @@ export default { <li> {{ __('Commit Message') }} <span v-popover="$options.popoverOptions" class="form-text text-muted gl-ml-3"> - <icon name="question" /> + <gl-icon name="question" /> </span> </li> </ul> diff --git a/app/assets/javascripts/ide/components/file_row_extra.vue b/app/assets/javascripts/ide/components/file_row_extra.vue index f7cf7a5b251..48ab58e1cb7 100644 --- a/app/assets/javascripts/ide/components/file_row_extra.vue +++ b/app/assets/javascripts/ide/components/file_row_extra.vue @@ -1,8 +1,8 @@ <script> import { mapGetters } from 'vuex'; +import { GlIcon } from '@gitlab/ui'; import { n__ } from '~/locale'; import tooltip from '~/vue_shared/directives/tooltip'; -import Icon from '~/vue_shared/components/icon.vue'; import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue'; import NewDropdown from './new_dropdown/index.vue'; import MrFileIcon from './mr_file_icon.vue'; @@ -13,7 +13,7 @@ export default { tooltip, }, components: { - Icon, + GlIcon, NewDropdown, ChangedFileIcon, MrFileIcon, @@ -69,7 +69,7 @@ export default { <mr-file-icon v-if="file.mrChange" /> <span v-if="showTreeChangesCount" class="ide-tree-changes"> {{ changesCount }} - <icon + <gl-icon v-tooltip :title="folderChangesTooltip" :size="12" diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue index ddc126c3d77..77a7151e275 100644 --- a/app/assets/javascripts/ide/components/ide_status_bar.vue +++ b/app/assets/javascripts/ide/components/ide_status_bar.vue @@ -1,9 +1,9 @@ <script> /* eslint-disable @gitlab/vue-require-i18n-strings */ import { mapActions, mapState, mapGetters } from 'vuex'; +import { GlIcon } from '@gitlab/ui'; import IdeStatusList from './ide_status_list.vue'; import IdeStatusMr from './ide_status_mr.vue'; -import icon from '~/vue_shared/components/icon.vue'; import tooltip from '~/vue_shared/directives/tooltip'; import timeAgoMixin from '~/vue_shared/mixins/timeago'; import CiIcon from '../../vue_shared/components/ci_icon.vue'; @@ -12,7 +12,7 @@ import { rightSidebarViews } from '../constants'; export default { components: { - icon, + GlIcon, userAvatarImage, CiIcon, IdeStatusList, @@ -97,7 +97,7 @@ export default { {{ latestPipeline.details.status.text }} for </span> - <icon name="commit" /> + <gl-icon name="commit" /> <a v-tooltip :title="lastCommit.message" diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue index 975d54c7a4e..de9283c8279 100644 --- a/app/assets/javascripts/ide/components/jobs/detail.vue +++ b/app/assets/javascripts/ide/components/jobs/detail.vue @@ -1,9 +1,9 @@ <script> import { mapActions, mapState } from 'vuex'; import { throttle } from 'lodash'; +import { GlIcon } from '@gitlab/ui'; import { __ } from '../../../locale'; import tooltip from '../../../vue_shared/directives/tooltip'; -import Icon from '../../../vue_shared/components/icon.vue'; import ScrollButton from './detail/scroll_button.vue'; import JobDescription from './detail/description.vue'; @@ -17,7 +17,7 @@ export default { tooltip, }, components: { - Icon, + GlIcon, ScrollButton, JobDescription, }, @@ -76,7 +76,7 @@ export default { <div class="ide-pipeline build-page d-flex flex-column flex-fill"> <header class="ide-job-header d-flex align-items-center"> <button class="btn btn-default btn-sm d-flex" @click="setDetailJob(null)"> - <icon name="chevron-left" /> {{ __('View jobs') }} + <gl-icon name="chevron-left" /> {{ __('View jobs') }} </button> </header> <div class="top-bar d-flex border-left-0 mr-3"> diff --git a/app/assets/javascripts/ide/components/jobs/detail/description.vue b/app/assets/javascripts/ide/components/jobs/detail/description.vue index f1ba102fffe..50ea9423489 100644 --- a/app/assets/javascripts/ide/components/jobs/detail/description.vue +++ b/app/assets/javascripts/ide/components/jobs/detail/description.vue @@ -1,10 +1,10 @@ <script> -import Icon from '../../../../vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import CiIcon from '../../../../vue_shared/components/ci_icon.vue'; export default { components: { - Icon, + GlIcon, CiIcon, }, props: { @@ -27,7 +27,7 @@ export default { <span class="gl-ml-3"> {{ job.name }} <a :href="job.path" target="_blank" class="ide-external-link position-relative"> - {{ jobId }} <icon :size="12" name="external-link" /> + {{ jobId }} <gl-icon :size="12" name="external-link" /> </a> </span> </div> diff --git a/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue index 5674d3ffa80..2c679a3edc7 100644 --- a/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue +++ b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue @@ -1,6 +1,6 @@ <script> +import { GlIcon } from '@gitlab/ui'; import { __ } from '../../../../locale'; -import Icon from '../../../../vue_shared/components/icon.vue'; import tooltip from '../../../../vue_shared/directives/tooltip'; const directions = { @@ -13,7 +13,7 @@ export default { tooltip, }, components: { - Icon, + GlIcon, }, props: { direction: { @@ -58,7 +58,7 @@ export default { type="button" @click="clickedScroll" > - <icon :name="iconName" /> + <gl-icon :name="iconName" /> </button> </div> </template> diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue index 75441e8c1c8..0b643947139 100644 --- a/app/assets/javascripts/ide/components/jobs/stage.vue +++ b/app/assets/javascripts/ide/components/jobs/stage.vue @@ -1,7 +1,6 @@ <script> -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; import tooltip from '../../../vue_shared/directives/tooltip'; -import Icon from '../../../vue_shared/components/icon.vue'; import CiIcon from '../../../vue_shared/components/ci_icon.vue'; import Item from './item.vue'; @@ -10,7 +9,7 @@ export default { tooltip, }, components: { - Icon, + GlIcon, CiIcon, Item, GlLoadingIcon, @@ -78,7 +77,7 @@ export default { <div v-if="!stage.isLoading || stage.jobs.length" class="gl-mr-3 gl-ml-2"> <span class="badge badge-pill"> {{ jobsCount }} </span> </div> - <icon :name="collapseIcon" class="ide-stage-collapse-icon" /> + <gl-icon :name="collapseIcon" class="ide-stage-collapse-icon" /> </div> <div v-show="!stage.isCollapsed" ref="jobList" class="card-body p-0"> <gl-loading-icon v-if="showLoadingIcon" /> diff --git a/app/assets/javascripts/ide/components/merge_requests/item.vue b/app/assets/javascripts/ide/components/merge_requests/item.vue index 8b7b8d5a91c..7aa9a4f864a 100644 --- a/app/assets/javascripts/ide/components/merge_requests/item.vue +++ b/app/assets/javascripts/ide/components/merge_requests/item.vue @@ -1,9 +1,9 @@ <script> -import Icon from '../../../vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; export default { components: { - Icon, + GlIcon, }, props: { item: { @@ -41,7 +41,7 @@ export default { <template> <a :href="mergeRequestHref" class="btn-link d-flex align-items-center"> <span class="d-flex gl-mr-3 ide-search-list-current-icon"> - <icon v-if="isActive" :size="18" name="mobile-issue-close" /> + <gl-icon v-if="isActive" :size="18" name="mobile-issue-close" /> </span> <span> <strong> {{ item.title }} </strong> diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue index af45d88b84a..4b3c6e61e11 100644 --- a/app/assets/javascripts/ide/components/merge_requests/list.vue +++ b/app/assets/javascripts/ide/components/merge_requests/list.vue @@ -1,9 +1,8 @@ <script> import { mapActions, mapState } from 'vuex'; import { debounce } from 'lodash'; -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import Item from './item.vue'; import TokenedInput from '../shared/tokened_input.vue'; @@ -16,7 +15,7 @@ export default { components: { TokenedInput, Item, - Icon, + GlIcon, GlLoadingIcon, }, data() { @@ -85,7 +84,7 @@ export default { @input="searchMergeRequests" @removeToken="setSearchType(null)" /> - <icon :size="18" name="search" class="ml-3 input-icon" /> + <gl-icon :size="18" name="search" class="ml-3 input-icon" /> </label> <div class="dropdown-content ide-merge-requests-dropdown-content d-flex"> <gl-loading-icon @@ -103,7 +102,7 @@ export default { @click.stop="setSearchType(searchType)" > <span class="d-flex gl-mr-3 ide-search-list-current-icon"> - <icon :size="18" name="search" /> + <gl-icon :size="18" name="search" /> </span> <span>{{ searchType.label }}</span> </button> diff --git a/app/assets/javascripts/ide/components/mr_file_icon.vue b/app/assets/javascripts/ide/components/mr_file_icon.vue index 4fab57b6f3e..c8629a869e0 100644 --- a/app/assets/javascripts/ide/components/mr_file_icon.vue +++ b/app/assets/javascripts/ide/components/mr_file_icon.vue @@ -1,10 +1,10 @@ <script> -import icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import tooltip from '~/vue_shared/directives/tooltip'; export default { components: { - icon, + GlIcon, }, directives: { tooltip, @@ -13,7 +13,7 @@ export default { </script> <template> - <icon + <gl-icon v-tooltip :title="__('Part of merge request changes')" :size="12" diff --git a/app/assets/javascripts/ide/components/nav_dropdown_button.vue b/app/assets/javascripts/ide/components/nav_dropdown_button.vue index 8dc22620eca..116d3cec03e 100644 --- a/app/assets/javascripts/ide/components/nav_dropdown_button.vue +++ b/app/assets/javascripts/ide/components/nav_dropdown_button.vue @@ -1,13 +1,13 @@ <script> import { mapState } from 'vuex'; +import { GlIcon } from '@gitlab/ui'; import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue'; -import Icon from '~/vue_shared/components/icon.vue'; const EMPTY_LABEL = '-'; export default { components: { - Icon, + GlIcon, DropdownButton, }, props: { @@ -33,10 +33,10 @@ export default { <dropdown-button> <span class="row flex-nowrap"> <span class="col-auto flex-fill text-truncate"> - <icon :size="16" :aria-label="__('Current Branch')" name="branch" /> {{ branchLabel }} + <gl-icon :size="16" :aria-label="__('Current Branch')" name="branch" /> {{ branchLabel }} </span> <span v-if="showMergeRequests" class="col-5 pl-0 text-truncate"> - <icon :size="16" :aria-label="__('Merge Request')" name="merge-request" /> + <gl-icon :size="16" :aria-label="__('Merge Request')" name="merge-request" /> {{ mergeRequestLabel }} </span> </span> diff --git a/app/assets/javascripts/ide/components/new_dropdown/button.vue b/app/assets/javascripts/ide/components/new_dropdown/button.vue index 5bd6642930c..8ae8f97f237 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/button.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/button.vue @@ -1,5 +1,5 @@ <script> -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import tooltip from '~/vue_shared/directives/tooltip'; export default { @@ -7,7 +7,7 @@ export default { tooltip, }, components: { - Icon, + GlIcon, }, props: { label: { @@ -52,7 +52,7 @@ export default { class="btn-blank" @click.stop.prevent="clicked" > - <icon :name="icon" :class="iconClasses" /> + <gl-icon :name="icon" :class="iconClasses" /> <template v-if="showLabel"> {{ label }} </template> diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue index b656e35f150..692878de5e1 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/index.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue @@ -1,6 +1,6 @@ <script> import { mapActions } from 'vuex'; -import icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import upload from './upload.vue'; import ItemButton from './button.vue'; import { modalTypes } from '../../constants'; @@ -8,7 +8,7 @@ import NewModal from './modal.vue'; export default { components: { - icon, + GlIcon, upload, ItemButton, NewModal, @@ -67,7 +67,7 @@ export default { data-qa-selector="dropdown_button" @click.stop="openDropdown()" > - <icon name="ellipsis_v" /> <icon name="chevron-down" /> + <gl-icon name="ellipsis_v" /> <gl-icon name="chevron-down" /> </button> <ul ref="dropdownMenu" class="dropdown-menu dropdown-menu-right"> <template v-if="type === 'tree'"> diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue index 6038e92f254..386f18318d2 100644 --- a/app/assets/javascripts/ide/components/pipelines/list.vue +++ b/app/assets/javascripts/ide/components/pipelines/list.vue @@ -1,9 +1,8 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; import { escape } from 'lodash'; -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; import { sprintf, __ } from '../../../locale'; -import Icon from '../../../vue_shared/components/icon.vue'; import CiIcon from '../../../vue_shared/components/ci_icon.vue'; import Tabs from '../../../vue_shared/components/tabs/tabs'; import Tab from '../../../vue_shared/components/tabs/tab.vue'; @@ -14,7 +13,7 @@ import IDEServices from '~/ide/services'; export default { components: { - Icon, + GlIcon, CiIcon, Tabs, Tab, @@ -70,7 +69,7 @@ export default { target="_blank" class="ide-external-link position-relative" > - #{{ latestPipeline.id }} <icon :size="12" name="external-link" /> + #{{ latestPipeline.id }} <gl-icon :size="12" name="external-link" /> </a> </span> </header> diff --git a/app/assets/javascripts/ide/components/preview/navigator.vue b/app/assets/javascripts/ide/components/preview/navigator.vue index 0de9dfd8827..60710251fef 100644 --- a/app/assets/javascripts/ide/components/preview/navigator.vue +++ b/app/assets/javascripts/ide/components/preview/navigator.vue @@ -1,11 +1,10 @@ <script> import { listen } from 'codesandbox-api'; -import { GlLoadingIcon } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; export default { components: { - Icon, + GlIcon, GlLoadingIcon, }, props: { @@ -97,7 +96,7 @@ export default { class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent" @click="back" > - <icon :size="24" name="chevron-left" class="m-auto" /> + <gl-icon :size="24" name="chevron-left" class="m-auto" /> </button> <button :aria-label="s__('IDE|Back')" @@ -109,7 +108,7 @@ export default { class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent" @click="forward" > - <icon :size="24" name="chevron-right" class="m-auto" /> + <gl-icon :size="24" name="chevron-right" class="m-auto" /> </button> <button :aria-label="s__('IDE|Refresh preview')" @@ -117,7 +116,7 @@ export default { class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent" @click="refresh" > - <icon :size="18" name="retry" class="m-auto" /> + <gl-icon :size="18" name="retry" class="m-auto" /> </button> <div class="position-relative w-100 gl-ml-2"> <input diff --git a/app/assets/javascripts/ide/components/repo_file_status_icon.vue b/app/assets/javascripts/ide/components/repo_file_status_icon.vue index 9773e835a5c..1402f7aaf39 100644 --- a/app/assets/javascripts/ide/components/repo_file_status_icon.vue +++ b/app/assets/javascripts/ide/components/repo_file_status_icon.vue @@ -1,12 +1,12 @@ <script> +import { GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; -import icon from '~/vue_shared/components/icon.vue'; import tooltip from '~/vue_shared/directives/tooltip'; import '~/lib/utils/datetime_utility'; export default { components: { - icon, + GlIcon, }, directives: { tooltip, @@ -29,6 +29,6 @@ export default { <template> <span v-if="file.file_lock" v-tooltip :title="lockTooltip" data-container="body"> - <icon name="lock" class="file-status-icon" /> + <gl-icon name="lock" class="file-status-icon" /> </span> </template> diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue index 8370833233a..bc6d23adb64 100644 --- a/app/assets/javascripts/ide/components/repo_tab.vue +++ b/app/assets/javascripts/ide/components/repo_tab.vue @@ -1,9 +1,9 @@ <script> import { mapActions } from 'vuex'; +import { GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import FileIcon from '~/vue_shared/components/file_icon.vue'; -import Icon from '~/vue_shared/components/icon.vue'; import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue'; import FileStatusIcon from './repo_file_status_icon.vue'; @@ -11,7 +11,7 @@ export default { components: { FileStatusIcon, FileIcon, - Icon, + GlIcon, ChangedFileIcon, }, props: { @@ -91,7 +91,7 @@ export default { class="multi-file-tab-close" @click.stop.prevent="closeFile(tab)" > - <icon v-if="!showChangedIcon" :size="12" name="close" /> + <gl-icon v-if="!showChangedIcon" :size="12" name="close" /> <changed-file-icon v-else :file="tab" /> </button> </li> diff --git a/app/assets/javascripts/ide/components/shared/tokened_input.vue b/app/assets/javascripts/ide/components/shared/tokened_input.vue index de3e71dad92..e7a4c5487d1 100644 --- a/app/assets/javascripts/ide/components/shared/tokened_input.vue +++ b/app/assets/javascripts/ide/components/shared/tokened_input.vue @@ -1,10 +1,10 @@ <script> +import { GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; export default { components: { - Icon, + GlIcon, }, props: { placeholder: { @@ -81,7 +81,7 @@ export default { > <div class="value-container rounded"> <div class="value">{{ token.label }}</div> - <div class="remove-token inverted"><icon :size="10" name="close" /></div> + <div class="remove-token inverted"><gl-icon :size="10" name="close" /></div> </div> </button> </div> diff --git a/app/assets/javascripts/ide/components/terminal_sync/terminal_sync_status.vue b/app/assets/javascripts/ide/components/terminal_sync/terminal_sync_status.vue index deb13b5615e..c3f722d6052 100644 --- a/app/assets/javascripts/ide/components/terminal_sync/terminal_sync_status.vue +++ b/app/assets/javascripts/ide/components/terminal_sync/terminal_sync_status.vue @@ -1,8 +1,7 @@ <script> import { throttle } from 'lodash'; -import { GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui'; +import { GlTooltipDirective, GlLoadingIcon, GlIcon } from '@gitlab/ui'; import { mapState } from 'vuex'; -import Icon from '~/vue_shared/components/icon.vue'; import { MSG_TERMINAL_SYNC_CONNECTING, MSG_TERMINAL_SYNC_UPLOADING, @@ -11,7 +10,7 @@ import { export default { components: { - Icon, + GlIcon, GlLoadingIcon, }, directives: { @@ -70,7 +69,7 @@ export default { <span>{{ __('Terminal') }}:</span> <span class="square s16 d-flex-center ml-1" :aria-label="status.text"> <gl-loading-icon v-if="isLoading" inline size="sm" class="d-flex-center" /> - <icon v-else-if="status.icon" :name="status.icon" :size="16" /> + <gl-icon v-else-if="status.icon" :name="status.icon" :size="16" /> </span> </div> </template> diff --git a/app/assets/javascripts/issuable_suggestions/components/app.vue b/app/assets/javascripts/issuable_suggestions/components/app.vue index 810ca7ac1bd..8a9a880e7ee 100644 --- a/app/assets/javascripts/issuable_suggestions/components/app.vue +++ b/app/assets/javascripts/issuable_suggestions/components/app.vue @@ -1,14 +1,13 @@ <script> -import { GlTooltipDirective } from '@gitlab/ui'; +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import Suggestion from './item.vue'; import query from '../queries/issues.query.graphql'; export default { components: { Suggestion, - Icon, + GlIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -70,7 +69,7 @@ export default { <div v-show="showSuggestions" class="form-group row issuable-suggestions"> <div v-once class="col-form-label col-sm-2 pt-0"> {{ __('Similar issues') }} - <icon + <gl-icon v-gl-tooltip.bottom :title="$options.helpText" :aria-label="$options.helpText" diff --git a/app/assets/javascripts/issuable_suggestions/components/item.vue b/app/assets/javascripts/issuable_suggestions/components/item.vue index dfadb9d2b24..6e265b1bf42 100644 --- a/app/assets/javascripts/issuable_suggestions/components/item.vue +++ b/app/assets/javascripts/issuable_suggestions/components/item.vue @@ -1,9 +1,8 @@ <script> /* eslint-disable @gitlab/vue-require-i18n-strings */ import { uniqueId } from 'lodash'; -import { GlLink, GlTooltip, GlTooltipDirective } from '@gitlab/ui'; +import { GlLink, GlTooltip, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue'; import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import timeago from '~/vue_shared/mixins/timeago'; @@ -12,7 +11,7 @@ export default { components: { GlTooltip, GlLink, - Icon, + GlIcon, UserAvatarImage, TimeagoTooltip, }, @@ -68,7 +67,7 @@ export default { <template> <div class="suggestion-item"> <div class="d-flex align-items-center"> - <icon + <gl-icon v-if="suggestion.confidential" v-gl-tooltip.bottom :title="__('Confidential')" @@ -84,7 +83,7 @@ export default { </gl-link> </div> <div class="text-secondary suggestion-footer"> - <icon + <gl-icon ref="state" :name="stateIcon" :class="{ @@ -134,7 +133,7 @@ export default { :title="tooltipTitle" class="suggestion-help-hover gl-ml-3 text-tertiary" > - <icon :name="icon" /> {{ count }} + <gl-icon :name="icon" /> {{ count }} </span> </span> </div> diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue index e760706c97e..704c489329a 100644 --- a/app/assets/javascripts/jobs/components/job_app.vue +++ b/app/assets/javascripts/jobs/components/job_app.vue @@ -1,13 +1,12 @@ <script> import { throttle, isEmpty } from 'lodash'; import { mapGetters, mapState, mapActions } from 'vuex'; -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import { isScrolledToBottom } from '~/lib/utils/scroll_utils'; import { polyfillSticky } from '~/lib/utils/sticky'; import CiHeader from '~/vue_shared/components/header_ci_component.vue'; import Callout from '~/vue_shared/components/callout.vue'; -import Icon from '~/vue_shared/components/icon.vue'; import EmptyState from './empty_state.vue'; import EnvironmentsBlock from './environments_block.vue'; import ErasedBlock from './erased_block.vue'; @@ -27,7 +26,7 @@ export default { EmptyState, EnvironmentsBlock, ErasedBlock, - Icon, + GlIcon, Log, LogTopBar, StuckBlock, @@ -266,7 +265,7 @@ export default { :class="{ 'sticky-top border-bottom-0': hasTrace }" data-testid="archived-job" > - <icon name="lock" class="align-text-bottom" /> + <gl-icon name="lock" class="align-text-bottom" /> {{ __('This job is archived. Only the complete pipeline can be retried.') }} </div> <!-- job log --> diff --git a/app/assets/javascripts/jobs/components/job_container_item.vue b/app/assets/javascripts/jobs/components/job_container_item.vue index 7bd299bcfa0..79e6623eca8 100644 --- a/app/assets/javascripts/jobs/components/job_container_item.vue +++ b/app/assets/javascripts/jobs/components/job_container_item.vue @@ -1,15 +1,14 @@ <script> -import { GlLink } from '@gitlab/ui'; +import { GlLink, GlIcon } from '@gitlab/ui'; import tooltip from '~/vue_shared/directives/tooltip'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; -import Icon from '~/vue_shared/components/icon.vue'; import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin'; import { sprintf } from '~/locale'; export default { components: { CiIcon, - Icon, + GlIcon, GlLink, }, directives: { @@ -56,7 +55,7 @@ export default { data-boundary="viewport" class="js-job-link d-flex" > - <icon + <gl-icon v-if="isActive" name="arrow-right" class="js-arrow-right icon-arrow-right position-absolute d-block" @@ -66,7 +65,7 @@ export default { <span class="text-truncate w-100">{{ job.name ? job.name : job.id }}</span> - <icon v-if="job.retried" name="retry" class="js-retry-icon" /> + <gl-icon v-if="job.retried" name="retry" class="js-retry-icon" /> </gl-link> </div> </template> diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue index 4d314eaa106..9f81fb7f089 100644 --- a/app/assets/javascripts/jobs/components/job_log_controllers.vue +++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue @@ -1,14 +1,13 @@ <script> -import { GlTooltipDirective, GlLink, GlDeprecatedButton } from '@gitlab/ui'; +import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlIcon } from '@gitlab/ui'; import { polyfillSticky } from '~/lib/utils/sticky'; -import Icon from '~/vue_shared/components/icon.vue'; import { numberToHumanSize } from '~/lib/utils/number_utils'; import { __, sprintf } from '~/locale'; import scrollDown from '../svg/scroll_down.svg'; export default { components: { - Icon, + GlIcon, GlLink, GlDeprecatedButton, }, @@ -95,7 +94,7 @@ export default { class="controllers-buttons" data-testid="job-raw-link-controller" > - <icon name="doc-text" /> + <gl-icon name="doc-text" /> </gl-link> <gl-link @@ -108,7 +107,7 @@ export default { data-testid="job-log-erase-link" data-method="post" > - <icon name="remove" /> + <gl-icon name="remove" /> </gl-link> <!-- eo links --> @@ -121,7 +120,7 @@ export default { data-testid="job-controller-scroll-top" @click="handleScrollToTop" > - <icon name="scroll_up" /> + <gl-icon name="scroll_up" /> </gl-deprecated-button> </div> diff --git a/app/assets/javascripts/jobs/components/log/line_header.vue b/app/assets/javascripts/jobs/components/log/line_header.vue index 85ccd5996b5..dbd16d55886 100644 --- a/app/assets/javascripts/jobs/components/log/line_header.vue +++ b/app/assets/javascripts/jobs/components/log/line_header.vue @@ -1,11 +1,11 @@ <script> -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import LineNumber from './line_number.vue'; import DurationBadge from './duration_badge.vue'; export default { components: { - Icon, + GlIcon, LineNumber, DurationBadge, }, @@ -47,7 +47,7 @@ export default { role="button" @click="handleOnClick" > - <icon :name="iconName" class="arrow position-absolute" /> + <gl-icon :name="iconName" class="arrow position-absolute" /> <line-number :line-number="line.lineNumber" :path="path" /> <span v-for="(content, i) in line.content" diff --git a/app/assets/javascripts/jobs/components/manual_variables_form.vue b/app/assets/javascripts/jobs/components/manual_variables_form.vue index 9236624a191..122eb5068db 100644 --- a/app/assets/javascripts/jobs/components/manual_variables_form.vue +++ b/app/assets/javascripts/jobs/components/manual_variables_form.vue @@ -1,15 +1,14 @@ <script> import { uniqueId } from 'lodash'; import { mapActions } from 'vuex'; -import { GlDeprecatedButton } from '@gitlab/ui'; +import { GlDeprecatedButton, GlIcon } from '@gitlab/ui'; import { s__, sprintf } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; export default { name: 'ManualVariablesForm', components: { GlDeprecatedButton, - Icon, + GlIcon, }, props: { action: { @@ -141,7 +140,7 @@ export default { class="btn-transparent btn-blank w-25" @click="deleteVariable(variable.id)" > - <icon name="clear" /> + <gl-icon name="clear" /> </gl-deprecated-button> </div> </div> diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue index 517da16dcf8..54e6fc764fa 100644 --- a/app/assets/javascripts/jobs/components/sidebar.vue +++ b/app/assets/javascripts/jobs/components/sidebar.vue @@ -1,11 +1,10 @@ <script> import { isEmpty } from 'lodash'; import { mapActions, mapState } from 'vuex'; -import { GlLink, GlDeprecatedButton } from '@gitlab/ui'; +import { GlLink, GlDeprecatedButton, GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import { timeIntervalInWords } from '~/lib/utils/datetime_utility'; -import Icon from '~/vue_shared/components/icon.vue'; import DetailRow from './sidebar_detail_row.vue'; import ArtifactsBlock from './artifacts_block.vue'; import TriggerBlock from './trigger_block.vue'; @@ -19,7 +18,7 @@ export default { ArtifactsBlock, CommitBlock, DetailRow, - Icon, + GlIcon, TriggerBlock, StagesDropdown, JobsContainer, @@ -157,7 +156,7 @@ export default { class="js-terminal-link btn btn-primary btn-inverted visible-md-block visible-lg-block float-left" target="_blank" > - {{ __('Debug') }} <icon name="external-link" :size="14" /> + {{ __('Debug') }} <gl-icon name="external-link" :size="14" /> </gl-link> </div> diff --git a/app/assets/javascripts/monitoring/components/alert_widget_form.vue b/app/assets/javascripts/monitoring/components/alert_widget_form.vue index 5fa0da53a04..f5d29d63dfd 100644 --- a/app/assets/javascripts/monitoring/components/alert_widget_form.vue +++ b/app/assets/javascripts/monitoring/components/alert_widget_form.vue @@ -11,12 +11,12 @@ import { GlNewDropdownItem as GlDropdownItem, GlModal, GlTooltipDirective, + GlIcon, } from '@gitlab/ui'; import { __, s__ } from '~/locale'; import Translate from '~/vue_shared/translate'; import TrackEventDirective from '~/vue_shared/directives/track_event'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import Icon from '~/vue_shared/components/icon.vue'; import { alertsValidator, queriesValidator } from '../validators'; import { OPERATORS } from '../constants'; @@ -44,7 +44,7 @@ export default { GlDropdownItem, GlModal, GlLink, - Icon, + GlIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -242,7 +242,7 @@ export default { <template #description> <div class="d-flex align-items-center"> {{ __('Single or combined queries') }} - <icon + <gl-icon v-gl-tooltip="$options.alertQueryText.descriptionTooltip" name="question" class="gl-ml-2" diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue index 054111c203e..6bae3fdcc2e 100644 --- a/app/assets/javascripts/monitoring/components/charts/time_series.vue +++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue @@ -1,10 +1,9 @@ <script> import { isEmpty, omit, throttle } from 'lodash'; -import { GlLink, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui'; +import { GlLink, GlTooltip, GlResizeObserverDirective, GlIcon } from '@gitlab/ui'; import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts'; import { s__ } from '~/locale'; import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; -import Icon from '~/vue_shared/components/icon.vue'; import { panelTypes, chartHeight, lineTypes, lineWidths, legendLayoutTypes } from '../../constants'; import { getYAxisOptions, getTimeAxisOptions, getChartGrid, getTooltipFormatter } from './options'; import { annotationsYAxis, generateAnnotationsSeries } from './annotations'; @@ -27,7 +26,7 @@ export default { GlTooltip, GlChartSeriesLabel, GlLink, - Icon, + GlIcon, }, directives: { GlResizeObserverDirective, @@ -407,7 +406,7 @@ export default { {{ __('Deployed') }} </template> <div slot="tooltipContent" class="d-flex align-items-center"> - <icon name="commit" class="mr-2" /> + <gl-icon name="commit" class="mr-2" /> <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link> </div> </template> diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 24aa7b3f504..cbfacd73b5b 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -2,7 +2,7 @@ import { mapActions, mapState, mapGetters } from 'vuex'; import VueDraggable from 'vuedraggable'; import Mousetrap from 'mousetrap'; -import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui'; +import { GlButton, GlModalDirective, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import DashboardHeader from './dashboard_header.vue'; import DashboardPanel from './dashboard_panel.vue'; import { s__ } from '~/locale'; @@ -10,7 +10,6 @@ import { deprecatedCreateFlash as createFlash } from '~/flash'; import { ESC_KEY } from '~/lib/utils/keys'; import { mergeUrlParams, updateHistory } from '~/lib/utils/url_utility'; import invalidUrl from '~/lib/utils/invalid_url'; -import Icon from '~/vue_shared/components/icon.vue'; import GraphGroup from './graph_group.vue'; import EmptyState from './empty_state.vue'; @@ -33,7 +32,7 @@ export default { VueDraggable, DashboardHeader, DashboardPanel, - Icon, + GlIcon, GlButton, GraphGroup, EmptyState, @@ -473,7 +472,7 @@ export default { @click="removePanel(groupData.key, groupData.panels, graphIndex)" > <a class="mx-2 p-2 draggable-remove-link" :aria-label="__('Remove')"> - <icon name="close" /> + <gl-icon name="close" /> </a> </div> diff --git a/app/assets/javascripts/monitoring/components/dashboard_header.vue b/app/assets/javascripts/monitoring/components/dashboard_header.vue index 6a7bf81c643..266f3bb3fd5 100644 --- a/app/assets/javascripts/monitoring/components/dashboard_header.vue +++ b/app/assets/javascripts/monitoring/components/dashboard_header.vue @@ -10,10 +10,10 @@ import { GlSearchBoxByType, GlModalDirective, GlTooltipDirective, + GlIcon, } from '@gitlab/ui'; import { mergeUrlParams, redirectTo } from '~/lib/utils/url_utility'; import invalidUrl from '~/lib/utils/invalid_url'; -import Icon from '~/vue_shared/components/icon.vue'; import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue'; import DashboardsDropdown from './dashboards_dropdown.vue'; @@ -26,7 +26,7 @@ import { timezones } from '../format_date'; export default { components: { - Icon, + GlIcon, GlButton, GlNewDropdown, GlLoadingIcon, @@ -260,7 +260,7 @@ export default { target="_blank" rel="noopener noreferrer" > - {{ __('View full dashboard') }} <icon name="external-link" /> + {{ __('View full dashboard') }} <gl-icon name="external-link" /> </gl-button> </div> diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue index 4a1a1086329..c6fab271376 100644 --- a/app/assets/javascripts/notes/components/discussion_counter.vue +++ b/app/assets/javascripts/notes/components/discussion_counter.vue @@ -1,7 +1,6 @@ <script> import { mapGetters, mapActions } from 'vuex'; -import { GlTooltipDirective } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import discussionNavigation from '../mixins/discussion_navigation'; export default { @@ -9,7 +8,7 @@ export default { GlTooltip: GlTooltipDirective, }, components: { - Icon, + GlIcon, }, mixins: [discussionNavigation], computed: { @@ -60,7 +59,7 @@ export default { :class="{ 'line-resolve-btn is-active': allResolved, 'line-resolve-text': !allResolved }" > <template v-if="allResolved"> - <icon name="check-circle-filled" /> + <gl-icon name="check-circle-filled" /> {{ __('All threads resolved') }} </template> <template v-else> @@ -79,7 +78,7 @@ export default { :title="s__('Resolve all threads in new issue')" class="new-issue-for-discussion btn btn-default discussion-create-issue-btn" > - <icon name="issue-new" /> + <gl-icon name="issue-new" /> </a> </div> <div v-if="isLoggedIn && !allResolved" class="btn-group btn-group-sm" role="group"> @@ -92,7 +91,7 @@ export default { data-track-property="click_next_unresolved_thread_top" @click="jumpToNextDiscussion" > - <icon name="comment-next" /> + <gl-icon name="comment-next" /> </button> </div> <div class="btn-group btn-group-sm" role="group"> @@ -102,7 +101,7 @@ export default { class="btn btn-default toggle-all-discussions-btn" @click="handleExpandDiscussions" > - <icon :name="allExpanded ? 'angle-up' : 'angle-down'" /> + <gl-icon :name="allExpanded ? 'angle-up' : 'angle-down'" /> </button> </div> </div> diff --git a/app/assets/javascripts/notes/components/discussion_filter.vue b/app/assets/javascripts/notes/components/discussion_filter.vue index 6b1e3298f9a..989ce9ff144 100644 --- a/app/assets/javascripts/notes/components/discussion_filter.vue +++ b/app/assets/javascripts/notes/components/discussion_filter.vue @@ -1,8 +1,8 @@ <script> import $ from 'jquery'; import { mapGetters, mapActions } from 'vuex'; +import { GlIcon } from '@gitlab/ui'; import { getLocationHash, doesHashExistInUrl } from '../../lib/utils/url_utility'; -import Icon from '~/vue_shared/components/icon.vue'; import { DISCUSSION_FILTERS_DEFAULT_VALUE, HISTORY_ONLY_FILTER_VALUE, @@ -14,7 +14,7 @@ import notesEventHub from '../event_hub'; export default { components: { - Icon, + GlIcon, }, props: { filters: { @@ -120,7 +120,7 @@ export default { data-toggle="dropdown" aria-expanded="false" > - {{ currentFilter.title }} <icon name="chevron-down" /> + {{ currentFilter.title }} <gl-icon name="chevron-down" /> </button> <div ref="dropdownMenu" diff --git a/app/assets/javascripts/notes/components/discussion_filter_note.vue b/app/assets/javascripts/notes/components/discussion_filter_note.vue index 8dc4b43d69a..cff5586c4f8 100644 --- a/app/assets/javascripts/notes/components/discussion_filter_note.vue +++ b/app/assets/javascripts/notes/components/discussion_filter_note.vue @@ -1,6 +1,5 @@ <script> -import { GlButton } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlButton, GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import notesEventHub from '../event_hub'; @@ -8,7 +7,7 @@ import notesEventHub from '../event_hub'; export default { components: { GlButton, - Icon, + GlIcon, }, computed: { timelineContent() { @@ -35,7 +34,7 @@ export default { <template> <li class="timeline-entry note note-wrapper discussion-filter-note js-discussion-filter-note"> <div class="timeline-icon d-none d-lg-flex"> - <icon name="comment" /> + <gl-icon name="comment" /> </div> <div class="timeline-content"> <div ref="timelineContent" v-html="timelineContent"></div> diff --git a/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue b/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue index b71ce1b6a0a..f94d0060b41 100644 --- a/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue +++ b/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue @@ -1,12 +1,11 @@ <script> -import { GlTooltipDirective } from '@gitlab/ui'; -import icon from '~/vue_shared/components/icon.vue'; +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import discussionNavigation from '../mixins/discussion_navigation'; export default { name: 'JumpToNextDiscussionButton', components: { - icon, + GlIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -33,7 +32,7 @@ export default { data-track-property="click_next_unresolved_thread" @click="jumpToNextRelativeDiscussion(fromDiscussionId)" > - <icon name="comment-next" /> + <gl-icon name="comment-next" /> </button> </div> </template> diff --git a/app/assets/javascripts/notes/components/discussion_locked_widget.vue b/app/assets/javascripts/notes/components/discussion_locked_widget.vue index 8636984c6af..2f215e36d5b 100644 --- a/app/assets/javascripts/notes/components/discussion_locked_widget.vue +++ b/app/assets/javascripts/notes/components/discussion_locked_widget.vue @@ -1,13 +1,12 @@ <script> -import { GlLink } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlLink, GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import Issuable from '~/vue_shared/mixins/issuable'; import issuableStateMixin from '../mixins/issuable_state'; export default { components: { - Icon, + GlIcon, GlLink, }, mixins: [Issuable, issuableStateMixin], @@ -28,7 +27,7 @@ export default { <template> <div class="disabled-comment text-center"> <span class="issuable-note-warning inline"> - <icon :size="16" name="lock" class="icon" /> + <gl-icon :size="16" name="lock" class="icon" /> <span v-if="isProjectArchived"> {{ projectArchivedWarning }} <gl-link :href="archivedProjectDocsPath" target="_blank" class="learn-more"> diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue index a8ae7fb48f0..643145651e5 100644 --- a/app/assets/javascripts/notes/components/note_actions.vue +++ b/app/assets/javascripts/notes/components/note_actions.vue @@ -1,9 +1,8 @@ <script> import { mapGetters } from 'vuex'; -import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; import resolvedStatusMixin from '~/batch_comments/mixins/resolved_status'; -import Icon from '~/vue_shared/components/icon.vue'; import ReplyButton from './note_actions/reply_button.vue'; import eventHub from '~/sidebar/event_hub'; import Api from '~/api'; @@ -12,7 +11,7 @@ import { deprecatedCreateFlash as flash } from '~/flash'; export default { name: 'NoteActions', components: { - Icon, + GlIcon, ReplyButton, GlLoadingIcon, }, @@ -189,7 +188,7 @@ export default { @click="onResolve" > <template v-if="!isResolving"> - <icon :name="isResolved ? 'check-circle-filled' : 'check-circle'" /> + <gl-icon :name="isResolved ? 'check-circle-filled' : 'check-circle'" /> </template> <gl-loading-icon v-else inline /> </button> @@ -203,9 +202,9 @@ export default { title="Add reaction" data-position="right" > - <icon class="link-highlight award-control-icon-neutral" name="slight-smile" /> - <icon class="link-highlight award-control-icon-positive" name="smiley" /> - <icon class="link-highlight award-control-icon-super-positive" name="smiley" /> + <gl-icon class="link-highlight award-control-icon-neutral" name="slight-smile" /> + <gl-icon class="link-highlight award-control-icon-positive" name="smiley" /> + <gl-icon class="link-highlight award-control-icon-super-positive" name="smiley" /> </a> </div> <reply-button @@ -222,7 +221,7 @@ export default { class="note-action-button js-note-edit btn btn-transparent qa-note-edit-button" @click="onEdit" > - <icon name="pencil" class="link-highlight" /> + <gl-icon name="pencil" class="link-highlight" /> </button> </div> <div v-if="showDeleteAction" class="note-actions-item"> @@ -233,7 +232,7 @@ export default { class="note-action-button js-note-delete btn btn-transparent" @click="onDelete" > - <icon name="remove" class="link-highlight" /> + <gl-icon name="remove" class="link-highlight" /> </button> </div> <div v-else-if="shouldShowActionsDropdown" class="dropdown more-actions note-actions-item"> @@ -245,7 +244,7 @@ export default { data-toggle="dropdown" @click="closeTooltip" > - <icon class="icon" name="ellipsis_v" /> + <gl-icon class="icon" name="ellipsis_v" /> </button> <ul class="dropdown-menu more-actions-dropdown dropdown-open-left"> <li v-if="canReportAsAbuse"> 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 30cb7967c34..208293428fa 100644 --- a/app/assets/javascripts/notes/components/note_actions/reply_button.vue +++ b/app/assets/javascripts/notes/components/note_actions/reply_button.vue @@ -1,11 +1,10 @@ <script> -import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlTooltipDirective, GlDeprecatedButton, GlIcon } from '@gitlab/ui'; export default { name: 'ReplyButton', components: { - Icon, + GlIcon, GlDeprecatedButton, }, directives: { @@ -26,7 +25,7 @@ export default { :title="__('Reply to comment')" @click="$emit('startReplying')" > - <icon name="comment" class="link-highlight" /> + <gl-icon name="comment" class="link-highlight" /> </gl-deprecated-button> </div> </template> diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue index b4176c6063b..62ee7f30c57 100644 --- a/app/assets/javascripts/notes/components/noteable_discussion.vue +++ b/app/assets/javascripts/notes/components/noteable_discussion.vue @@ -1,10 +1,9 @@ <script> import { mapActions, mapGetters } from 'vuex'; -import { GlTooltipDirective } from '@gitlab/ui'; +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form'; import { s__, __ } from '~/locale'; import { clearDraft, getDiscussionReplyKey } from '~/lib/utils/autosave'; -import icon from '~/vue_shared/components/icon.vue'; import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; import DraftNote from '~/batch_comments/components/draft_note.vue'; import { deprecatedCreateFlash as Flash } from '../../flash'; @@ -22,7 +21,7 @@ import DiscussionActions from './discussion_actions.vue'; export default { name: 'NoteableDiscussion', components: { - icon, + GlIcon, userAvatarLink, diffDiscussionHeader, noteSignedOutWidget, diff --git a/app/assets/javascripts/notes/components/toggle_replies_widget.vue b/app/assets/javascripts/notes/components/toggle_replies_widget.vue index dd132d4f608..bddac60647d 100644 --- a/app/assets/javascripts/notes/components/toggle_replies_widget.vue +++ b/app/assets/javascripts/notes/components/toggle_replies_widget.vue @@ -1,12 +1,12 @@ <script> import { uniqBy } from 'lodash'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; export default { components: { - Icon, + GlIcon, UserAvatarLink, TimeAgoTooltip, }, @@ -44,7 +44,7 @@ export default { <template> <li :class="className" class="replies-toggle js-toggle-replies"> <template v-if="collapsed"> - <icon name="chevron-right" @click.native="toggle" /> + <gl-icon name="chevron-right" @click.native="toggle" /> <div> <user-avatar-link v-for="author in uniqueAuthors" @@ -71,7 +71,7 @@ export default { class="collapse-replies-btn js-collapse-replies qa-collapse-replies" @click="toggle" > - <icon name="chevron-down" /> {{ s__('Notes|Collapse replies') }} + <gl-icon name="chevron-down" /> {{ s__('Notes|Collapse replies') }} </span> </li> </template> diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue index ef24dbfb6ce..9f05ee5c7c2 100644 --- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue +++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue @@ -1,14 +1,14 @@ <script> +import { GlIcon } from '@gitlab/ui'; import RequestWarning from './request_warning.vue'; import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue'; -import Icon from '~/vue_shared/components/icon.vue'; export default { components: { RequestWarning, GlModal: DeprecatedModal2, - Icon, + GlIcon, }, props: { currentRequest: { @@ -104,7 +104,7 @@ export default { type="button" :aria-label="__('Toggle backtrace')" > - <icon :size="12" name="ellipsis_h" /> + <gl-icon :size="12" name="ellipsis_h" /> </button> </div> <pre v-if="item.backtrace" class="backtrace-row js-toggle-content mt-2">{{ diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue index 12fe0b8a1ea..efa11580c41 100644 --- a/app/assets/javascripts/pipelines/components/graph/action_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue @@ -1,10 +1,9 @@ <script> -import { GlTooltipDirective, GlButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlTooltipDirective, GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; import { dasherize } from '~/lib/utils/text_utility'; import { __ } from '~/locale'; import { deprecatedCreateFlash as createFlash } from '~/flash'; -import Icon from '~/vue_shared/components/icon.vue'; /** * Renders either a cancel, retry or play icon button and handles the post request @@ -18,7 +17,7 @@ import Icon from '~/vue_shared/components/icon.vue'; */ export default { components: { - Icon, + GlIcon, GlButton, GlLoadingIcon, }, @@ -92,6 +91,6 @@ export default { @click="onClickAction" > <gl-loading-icon v-if="isLoading" class="js-action-icon-loading" /> - <icon v-else :name="actionIcon" class="gl-mr-0!" /> + <gl-icon v-else :name="actionIcon" class="gl-mr-0!" /> </gl-button> </template> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue index 2dfc6485d85..adba86d384b 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue @@ -1,5 +1,6 @@ <script> import { isEqual } from 'lodash'; +import { GlIcon } from '@gitlab/ui'; import { __, s__ } from '~/locale'; import { deprecatedCreateFlash as createFlash } from '~/flash'; import PipelinesService from '../../services/pipelines_service'; @@ -9,7 +10,6 @@ import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue'; import NavigationControls from './nav_controls.vue'; import { getParameterByName } from '~/lib/utils/common_utils'; import CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin'; -import Icon from '~/vue_shared/components/icon.vue'; import PipelinesFilteredSearch from './pipelines_filtered_search.vue'; import { validateParams } from '../../utils'; import { ANY_TRIGGER_AUTHOR, RAW_TEXT_WARNING, FILTER_TAG_IDENTIFIER } from '../../constants'; @@ -21,7 +21,7 @@ export default { NavigationTabs, NavigationControls, PipelinesFilteredSearch, - Icon, + GlIcon, }, mixins: [pipelinesMixin, CIPaginationMixin, glFeatureFlagsMixin()], props: { @@ -285,8 +285,8 @@ export default { v-if="shouldRenderTabs || shouldRenderButtons" class="top-area scrolling-tabs-container inner-page-scroll-tabs" > - <div class="fade-left"><icon name="chevron-lg-left" :size="12" /></div> - <div class="fade-right"><icon name="chevron-lg-right" :size="12" /></div> + <div class="fade-left"><gl-icon name="chevron-lg-left" :size="12" /></div> + <div class="fade-right"><gl-icon name="chevron-lg-right" :size="12" /></div> <navigation-tabs v-if="shouldRenderTabs" diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_actions.vue index ee88eac4cd0..97595e5d2ce 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_actions.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_actions.vue @@ -1,10 +1,9 @@ <script> -import { GlTooltipDirective, GlButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlTooltipDirective, GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; import { deprecatedCreateFlash as flash } from '~/flash'; import { s__, __, sprintf } from '~/locale'; import GlCountdown from '~/vue_shared/components/gl_countdown.vue'; -import Icon from '~/vue_shared/components/icon.vue'; import eventHub from '../../event_hub'; export default { @@ -12,7 +11,7 @@ export default { GlTooltip: GlTooltipDirective, }, components: { - Icon, + GlIcon, GlCountdown, GlButton, GlLoadingIcon, @@ -87,7 +86,7 @@ export default { data-toggle="dropdown" :aria-label="__('Run manual or delayed jobs')" > - <icon name="play" class="icon-play" /> + <gl-icon name="play" class="icon-play" /> <i class="fa fa-caret-down" aria-hidden="true"></i> <gl-loading-icon v-if="isLoading" /> </button> @@ -104,7 +103,7 @@ export default { <div class="d-flex justify-content-between flex-wrap"> {{ action.name }} <span v-if="action.scheduled_at"> - <icon name="clock" /> + <gl-icon name="clock" /> <gl-countdown :end-date-string="action.scheduled_at" /> </span> </div> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue index 59c066b2683..4a3d134685e 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_artifacts.vue @@ -1,14 +1,13 @@ <script> /* eslint-disable @gitlab/vue-require-i18n-strings */ -import { GlLink, GlTooltipDirective } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlLink, GlTooltipDirective, GlIcon } from '@gitlab/ui'; export default { directives: { GlTooltip: GlTooltipDirective, }, components: { - Icon, + GlIcon, GlLink, }, props: { @@ -29,7 +28,7 @@ export default { data-toggle="dropdown" :aria-label="__('Artifacts')" > - <icon name="download" /> + <gl-icon name="download" /> <i class="fa fa-caret-down" aria-hidden="true"></i> </button> <ul class="dropdown-menu dropdown-menu-right"> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue b/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue index d992a4b7752..4045f450104 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/stage.vue @@ -13,18 +13,17 @@ */ import $ from 'jquery'; -import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; import { deprecatedCreateFlash as Flash } from '~/flash'; import axios from '~/lib/utils/axios_utils'; import eventHub from '../../event_hub'; -import Icon from '~/vue_shared/components/icon.vue'; import JobItem from '../graph/job_item.vue'; import { PIPELINES_TABLE } from '../../constants'; export default { components: { - Icon, + GlIcon, JobItem, GlLoadingIcon, }, @@ -170,7 +169,7 @@ export default { @click="onClickStage" > <span :aria-label="stage.title" aria-hidden="true" class="no-pointer-events"> - <icon :name="borderlessIcon" /> + <gl-icon :name="borderlessIcon" /> </span> </button> diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue index 478073e44d1..589636c620b 100644 --- a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue +++ b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue @@ -1,14 +1,13 @@ <script> import { mapGetters } from 'vuex'; -import { GlTooltipDirective, GlFriendlyWrap } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlTooltipDirective, GlFriendlyWrap, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue'; export default { name: 'TestsSuiteTable', components: { - Icon, + GlIcon, SmartVirtualList, GlFriendlyWrap, }, @@ -96,7 +95,7 @@ export default { class="add-border ci-status-icon d-flex align-items-center justify-content-end justify-content-md-center" :class="`ci-status-icon-${testCase.status}`" > - <icon :size="24" :name="testCase.icon" /> + <gl-icon :size="24" :name="testCase.icon" /> </div> </div> </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 4a9688e0eab..c08f2c05af2 100644 --- a/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue +++ b/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue @@ -1,7 +1,6 @@ <script> -import { GlDeprecatedButton, GlProgressBar } from '@gitlab/ui'; +import { GlDeprecatedButton, GlProgressBar, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import { formattedTime } from '../../stores/test_reports/utils'; export default { @@ -9,7 +8,7 @@ export default { components: { GlDeprecatedButton, GlProgressBar, - Icon, + GlIcon, }, props: { report: { @@ -75,7 +74,7 @@ export default { class="gl-mr-3 js-back-button" @click="onBackClick" > - <icon name="angle-left" /> + <gl-icon name="angle-left" /> </gl-deprecated-button> <h4>{{ heading }}</h4> diff --git a/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue b/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue index 15e9b8559d4..7db76ed576c 100644 --- a/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue +++ b/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue @@ -1,15 +1,14 @@ <script> import { mapState, mapActions } from 'vuex'; -import { GlLink, GlLoadingIcon } from '@gitlab/ui'; +import { GlLink, GlLoadingIcon, GlIcon } from '@gitlab/ui'; import { sprintf, n__, s__ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import RelatedIssuableItem from '~/vue_shared/components/issue/related_issuable_item.vue'; import { parseIssuableData } from '../../issue_show/utils/parse_data'; export default { name: 'RelatedMergeRequests', components: { - Icon, + GlIcon, GlLink, GlLoadingIcon, RelatedIssuableItem, @@ -85,7 +84,7 @@ export default { <div class="mr-count-badge gl-display-inline-flex"> <div class="mr-count-badge-count"> <svg class="s16 mr-1 text-secondary"> - <icon name="merge-request" class="mr-1 text-secondary" /> + <gl-icon name="merge-request" class="mr-1 text-secondary" /> </svg> <span class="js-items-count">{{ totalCount }}</span> </div> diff --git a/app/assets/javascripts/releases/components/release_block_assets.vue b/app/assets/javascripts/releases/components/release_block_assets.vue index 9583f5737df..8824cbefd7e 100644 --- a/app/assets/javascripts/releases/components/release_block_assets.vue +++ b/app/assets/javascripts/releases/components/release_block_assets.vue @@ -1,7 +1,6 @@ <script> import { GlTooltipDirective, GlLink, GlButton, GlCollapse, GlIcon, GlBadge } from '@gitlab/ui'; import { difference, get } from 'lodash'; -import Icon from '~/vue_shared/components/icon.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { ASSET_LINK_TYPE } from '../constants'; import { __, s__, sprintf } from '~/locale'; @@ -13,7 +12,6 @@ export default { GlButton, GlCollapse, GlIcon, - Icon, GlBadge, }, directives: { @@ -157,7 +155,7 @@ export default { <ul v-if="assets.links.length" class="pl-0 mb-0 gl-mt-3 list-unstyled js-assets-list"> <li v-for="link in assets.links" :key="link.name" class="gl-mb-3"> <gl-link v-gl-tooltip.bottom :title="__('Download asset')" :href="link.directAssetUrl"> - <icon name="package" class="align-middle gl-mr-2 align-text-bottom" /> + <gl-icon name="package" class="align-middle gl-mr-2 align-text-bottom" /> {{ link.name }} <span v-if="link.external" data-testid="external-link-indicator">{{ __('(external source)') @@ -174,9 +172,9 @@ export default { aria-haspopup="true" aria-expanded="false" > - <icon name="doc-code" class="align-top gl-mr-2" /> + <gl-icon name="doc-code" class="align-top gl-mr-2" /> {{ __('Source code') }} - <icon name="chevron-down" /> + <gl-icon name="chevron-down" /> </button> <div class="js-sources-dropdown dropdown-menu"> diff --git a/app/assets/javascripts/releases/components/release_block_footer.vue b/app/assets/javascripts/releases/components/release_block_footer.vue index 26154272d39..3beec466c54 100644 --- a/app/assets/javascripts/releases/components/release_block_footer.vue +++ b/app/assets/javascripts/releases/components/release_block_footer.vue @@ -1,6 +1,5 @@ <script> -import { GlTooltipDirective, GlLink } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import { __, sprintf } from '~/locale'; @@ -8,7 +7,7 @@ import { __, sprintf } from '~/locale'; export default { name: 'ReleaseBlockFooter', components: { - Icon, + GlIcon, GlLink, UserAvatarLink, }, @@ -68,7 +67,7 @@ export default { <template> <div> <div v-if="commit" class="float-left mr-3 d-flex align-items-center js-commit-info"> - <icon ref="commitIcon" name="commit" class="mr-1" /> + <gl-icon ref="commitIcon" name="commit" class="mr-1" /> <div v-gl-tooltip.bottom :title="commit.title"> <gl-link v-if="commitPath" :href="commitPath"> {{ commit.shortId }} @@ -78,7 +77,7 @@ export default { </div> <div v-if="tagName" class="float-left mr-3 d-flex align-items-center js-tag-info"> - <icon name="tag" class="mr-1" /> + <gl-icon name="tag" class="mr-1" /> <div v-gl-tooltip.bottom :title="__('Tag')"> <gl-link v-if="tagPath" :href="tagPath"> {{ tagName }} diff --git a/app/assets/javascripts/releases/components/release_block_header.vue b/app/assets/javascripts/releases/components/release_block_header.vue index 42688e9240b..95292a26bce 100644 --- a/app/assets/javascripts/releases/components/release_block_header.vue +++ b/app/assets/javascripts/releases/components/release_block_header.vue @@ -1,6 +1,5 @@ <script> -import { GlTooltipDirective, GlLink, GlBadge, GlButton } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlTooltipDirective, GlLink, GlBadge, GlButton, GlIcon } from '@gitlab/ui'; import { BACK_URL_PARAM } from '~/releases/constants'; import { setUrlParams } from '~/lib/utils/url_utility'; @@ -9,7 +8,7 @@ export default { components: { GlLink, GlBadge, - Icon, + GlIcon, GlButton, }, directives: { @@ -60,7 +59,7 @@ export default { :title="__('Edit this release')" :href="editLink" > - <icon name="pencil" /> + <gl-icon name="pencil" /> </gl-button> </div> </template> diff --git a/app/assets/javascripts/releases/components/release_block_metadata.vue b/app/assets/javascripts/releases/components/release_block_metadata.vue index 861c2e11798..2247b4c0064 100644 --- a/app/assets/javascripts/releases/components/release_block_metadata.vue +++ b/app/assets/javascripts/releases/components/release_block_metadata.vue @@ -1,7 +1,6 @@ <script> -import { GlTooltipDirective, GlLink } from '@gitlab/ui'; +import { GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import ReleaseBlockAuthor from './release_block_author.vue'; import ReleaseBlockMilestones from './release_block_milestones.vue'; @@ -9,7 +8,7 @@ import ReleaseBlockMilestones from './release_block_milestones.vue'; export default { name: 'ReleaseBlockMetadata', components: { - Icon, + GlIcon, GlLink, ReleaseBlockAuthor, ReleaseBlockMilestones, @@ -58,7 +57,7 @@ export default { <template> <div class="card-subtitle d-flex flex-wrap text-secondary"> <div class="gl-mr-3"> - <icon name="commit" class="align-middle" /> + <gl-icon name="commit" class="align-middle" /> <gl-link v-if="commitUrl" v-gl-tooltip.bottom :title="commit.title" :href="commitUrl"> {{ commit.shortId }} </gl-link> @@ -66,7 +65,7 @@ export default { </div> <div class="gl-mr-3"> - <icon name="tag" class="align-middle" /> + <gl-icon name="tag" class="align-middle" /> <gl-link v-if="tagUrl" v-gl-tooltip.bottom :title="__('Tag')" :href="tagUrl"> {{ release.tagName }} </gl-link> diff --git a/app/assets/javascripts/releases/components/release_block_milestones.vue b/app/assets/javascripts/releases/components/release_block_milestones.vue index 9abd3345b22..1da683764b3 100644 --- a/app/assets/javascripts/releases/components/release_block_milestones.vue +++ b/app/assets/javascripts/releases/components/release_block_milestones.vue @@ -1,13 +1,12 @@ <script> -import { GlTooltipDirective, GlLink } from '@gitlab/ui'; +import { GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui'; import { n__ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; export default { name: 'ReleaseBlockMilestones', components: { GlLink, - Icon, + GlIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -29,7 +28,7 @@ export default { <template> <div> <div class="js-milestone-list-label"> - <icon name="flag" class="align-middle" /> + <gl-icon name="flag" class="align-middle" /> <span class="js-label-text">{{ labelText }}</span> </div> diff --git a/app/assets/javascripts/reports/components/issue_status_icon.vue b/app/assets/javascripts/reports/components/issue_status_icon.vue index d79e3ddd798..bd41b8d23f1 100644 --- a/app/assets/javascripts/reports/components/issue_status_icon.vue +++ b/app/assets/javascripts/reports/components/issue_status_icon.vue @@ -1,11 +1,11 @@ <script> -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import { STATUS_FAILED, STATUS_NEUTRAL, STATUS_SUCCESS } from '../constants'; export default { name: 'IssueStatusIcon', components: { - Icon, + GlIcon, }, props: { status: { @@ -49,6 +49,6 @@ export default { }" class="report-block-list-icon" > - <icon :name="iconName" :size="statusIconSize" :data-qa-selector="`status_${status}_icon`" /> + <gl-icon :name="iconName" :size="statusIconSize" :data-qa-selector="`status_${status}_icon`" /> </div> </template> diff --git a/app/assets/javascripts/repository/components/breadcrumbs.vue b/app/assets/javascripts/repository/components/breadcrumbs.vue index 368fa029d07..74437f286b4 100644 --- a/app/assets/javascripts/repository/components/breadcrumbs.vue +++ b/app/assets/javascripts/repository/components/breadcrumbs.vue @@ -4,10 +4,10 @@ import { GlDeprecatedDropdownDivider, GlDeprecatedDropdownHeader, GlDeprecatedDropdownItem, + GlIcon, } from '@gitlab/ui'; import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility'; import { __ } from '../../locale'; -import Icon from '../../vue_shared/components/icon.vue'; import getRefMixin from '../mixins/get_ref'; import projectShortPathQuery from '../queries/project_short_path.query.graphql'; import projectPathQuery from '../queries/project_path.query.graphql'; @@ -24,7 +24,7 @@ export default { GlDeprecatedDropdownDivider, GlDeprecatedDropdownHeader, GlDeprecatedDropdownItem, - Icon, + GlIcon, }, apollo: { projectShortPath: { @@ -249,8 +249,8 @@ export default { <gl-deprecated-dropdown toggle-class="add-to-tree qa-add-to-tree ml-1"> <template #button-content> <span class="sr-only">{{ __('Add to tree') }}</span> - <icon name="plus" :size="16" class="float-left" /> - <icon name="chevron-down" :size="16" class="float-left" /> + <gl-icon name="plus" :size="16" class="float-left" /> + <gl-icon name="chevron-down" :size="16" class="float-left" /> </template> <template v-for="(item, i) in dropdownItems"> <component :is="getComponent(item.type)" :key="i" v-bind="item.attrs"> diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue index 3337ce6c6df..2e3b5c85d25 100644 --- a/app/assets/javascripts/repository/components/last_commit.vue +++ b/app/assets/javascripts/repository/components/last_commit.vue @@ -1,8 +1,7 @@ <script> -import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlLoadingIcon, GlIcon } from '@gitlab/ui'; import defaultAvatarUrl from 'images/no_avatar.png'; import { sprintf, s__ } from '~/locale'; -import Icon from '../../vue_shared/components/icon.vue'; import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import TimeagoTooltip from '../../vue_shared/components/time_ago_tooltip.vue'; import CiIcon from '../../vue_shared/components/ci_icon.vue'; @@ -13,7 +12,7 @@ import pathLastCommitQuery from '../queries/path_last_commit.query.graphql'; export default { components: { - Icon, + GlIcon, UserAvatarLink, TimeagoTooltip, ClipboardButton, @@ -130,7 +129,7 @@ export default { class="text-expander" @click="toggleShowDescription" > - <icon name="ellipsis_h" :size="10" /> + <gl-icon name="ellipsis_h" :size="10" /> </gl-deprecated-button> <div class="committer"> <gl-link diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue index cb047530c17..d7c692eb372 100644 --- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue +++ b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue @@ -1,9 +1,8 @@ <script> import $ from 'jquery'; import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete'; -import { GlModal, GlTooltipDirective } from '@gitlab/ui'; +import { GlModal, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { deprecatedCreateFlash as createFlash } from '~/flash'; -import Icon from '~/vue_shared/components/icon.vue'; import { __, s__ } from '~/locale'; import Api from '~/api'; import eventHub from './event_hub'; @@ -14,7 +13,7 @@ const emojiMenuClass = 'js-modal-status-emoji-menu'; export default { components: { - Icon, + GlIcon, GlModal, }, directives: { @@ -196,9 +195,9 @@ export default { v-show="noEmoji" class="js-no-emoji-placeholder no-emoji-placeholder position-relative" > - <icon name="slight-smile" class="award-control-icon-neutral" /> - <icon name="smiley" class="award-control-icon-positive" /> - <icon name="smile" class="award-control-icon-super-positive" /> + <gl-icon name="slight-smile" class="award-control-icon-neutral" /> + <gl-icon name="smiley" class="award-control-icon-positive" /> + <gl-icon name="smile" class="award-control-icon-super-positive" /> </span> </button> </span> @@ -223,7 +222,7 @@ export default { class="js-clear-user-status-button clear-user-status btn" @click="clearStatusInputs()" > - <icon name="close" /> + <gl-icon name="close" /> </button> </span> </div> diff --git a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue index c6f7d5e44ad..7c96100943b 100644 --- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue +++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue @@ -1,15 +1,15 @@ <script> import { mapState } from 'vuex'; +import { GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import tooltip from '~/vue_shared/directives/tooltip'; -import Icon from '~/vue_shared/components/icon.vue'; import eventHub from '~/sidebar/event_hub'; import EditForm from './edit_form.vue'; export default { components: { EditForm, - Icon, + GlIcon, }, directives: { tooltip, @@ -81,7 +81,7 @@ export default { data-boundary="viewport" @click="toggleForm" > - <icon :name="confidentialityIcon" aria-hidden="true" /> + <gl-icon :name="confidentialityIcon" aria-hidden="true" /> </div> <div class="title hide-collapsed"> {{ __('Confidentiality') }} @@ -105,11 +105,11 @@ export default { :issuable-type="issuableType" /> <div v-if="!confidential" class="no-value sidebar-item-value" data-testid="not-confidential"> - <icon :size="16" name="eye" aria-hidden="true" class="sidebar-item-icon inline" /> + <gl-icon :size="16" name="eye" aria-hidden="true" class="sidebar-item-icon inline" /> {{ __('Not confidential') }} </div> <div v-else class="value sidebar-item-value hide-collapsed"> - <icon + <gl-icon :size="16" name="eye-slash" aria-hidden="true" diff --git a/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue b/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue index 1b4968fabf6..53ee7f46ad9 100644 --- a/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue +++ b/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue @@ -1,8 +1,8 @@ <script> import { mapGetters } from 'vuex'; +import { GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; import tooltip from '~/vue_shared/directives/tooltip'; -import Icon from '~/vue_shared/components/icon.vue'; import eventHub from '~/sidebar/event_hub'; import editForm from './edit_form.vue'; @@ -22,7 +22,7 @@ export default { }, components: { editForm, - Icon, + GlIcon, }, directives: { @@ -88,7 +88,7 @@ export default { data-boundary="viewport" @click="toggleForm" > - <icon :name="lockStatus.icon" class="sidebar-item-icon is-active" /> + <gl-icon :name="lockStatus.icon" class="sidebar-item-icon is-active" /> </div> <div class="title hide-collapsed"> @@ -116,7 +116,7 @@ export default { /> <div data-testid="lock-status" class="sidebar-item-value" :class="lockStatus.class"> - <icon + <gl-icon :size="16" :name="lockStatus.icon" class="sidebar-item-icon" diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue index 3b92ead8859..0457aad8795 100644 --- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue +++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue @@ -1,7 +1,7 @@ <script> +import { GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; import Tracking from '~/tracking'; -import icon from '~/vue_shared/components/icon.vue'; import toggleButton from '~/vue_shared/components/toggle_button.vue'; import tooltip from '~/vue_shared/directives/tooltip'; import eventHub from '../../event_hub'; @@ -16,7 +16,7 @@ export default { tooltip, }, components: { - icon, + GlIcon, toggleButton, }, mixins: [Tracking.mixin({ label: 'right_sidebar' })], @@ -118,7 +118,7 @@ export default { data-boundary="viewport" @click="onClickCollapsedIcon" > - <icon + <gl-icon :name="notificationIcon" :size="16" aria-hidden="true" diff --git a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue index 65ecd5be05d..bc2319c0f36 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue @@ -1,12 +1,12 @@ <script> +import { GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; -import icon from '~/vue_shared/components/icon.vue'; import tooltip from '~/vue_shared/directives/tooltip'; export default { name: 'TimeTrackingCollapsedState', components: { - icon, + GlIcon, }, directives: { tooltip, @@ -105,7 +105,7 @@ export default { data-placement="left" data-boundary="viewport" > - <icon name="timer" /> + <gl-icon name="timer" /> <div class="time-tracking-collapsed-summary"> <div :class="divClass"> <span :class="spanClass"> {{ text }} </span> diff --git a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue index 5281c03ab3f..51719df313f 100644 --- a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue +++ b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue @@ -1,10 +1,8 @@ <script> -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; import tooltip from '~/vue_shared/directives/tooltip'; -import Icon from '~/vue_shared/components/icon.vue'; - const MARK_TEXT = __('Mark as done'); const TODO_TEXT = __('Add a To-Do'); @@ -13,7 +11,7 @@ export default { tooltip, }, components: { - Icon, + GlIcon, GlLoadingIcon, }, props: { @@ -85,7 +83,7 @@ export default { data-boundary="viewport" @click="handleButtonClick" > - <icon + <gl-icon v-show="collapsedButtonIconVisible" :class="collapsedButtonIconClasses" :name="collapsedButtonIcon" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue index 24cd9d6428d..55fa24fb51a 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue @@ -1,11 +1,10 @@ <script> -import { GlTooltipDirective, GlLink } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui'; export default { components: { GlLink, - Icon, + GlIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -35,7 +34,7 @@ export default { target="_blank" class="d-flex-center pl-1" > - <icon name="question" /> + <gl-icon name="question" /> </gl-link> </div> </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 24174c29d51..b6b5b56e5aa 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,13 +1,12 @@ <script> -import { GlButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; export default { components: { GlButton, GlLoadingIcon, - Icon, + GlIcon, }, props: { title: { @@ -66,7 +65,7 @@ export default { @click="toggleCollapsed" > <gl-loading-icon v-if="isLoading" /> - <icon v-else :name="arrowIconName" class="js-icon" /> + <gl-icon v-else :name="arrowIconName" class="js-icon" /> </button> <gl-button variant="link" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue index 19a222462b3..a2636ce52ad 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue @@ -1,13 +1,12 @@ <script> -import { GlLink } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlLink, GlIcon } from '@gitlab/ui'; import { WARNING, DANGER, WARNING_MESSAGE_CLASS, DANGER_MESSAGE_CLASS } from '../constants'; export default { name: 'MrWidgetAlertMessage', components: { GlLink, - Icon, + GlIcon, }, props: { type: { @@ -40,7 +39,7 @@ export default { <div class="m-3 ml-7" :class="messageClass"> <slot></slot> <gl-link v-if="helpPath" :href="helpPath" target="_blank"> - <icon :size="16" name="question-o" class="align-middle" /> + <gl-icon :size="16" name="question-o" class="align-middle" /> </gl-link> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue index e1659d9a167..472df8e3110 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue @@ -1,8 +1,8 @@ <script> -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; export default { - components: { Icon }, + components: { GlIcon }, props: { name: { type: String, @@ -14,6 +14,6 @@ export default { <template> <div class="circle-icon-container gl-mr-3 align-self-start align-self-lg-center"> - <icon :name="name" :size="24" /> + <gl-icon :name="name" :size="24" /> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue index c38c41f13b6..16ac1e7fbb1 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue @@ -1,10 +1,9 @@ <script> -import { GlTooltipDirective } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; export default { components: { - Icon, + GlIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -36,6 +35,6 @@ export default { data-track-event="open_review_app" data-track-label="review_app" > - {{ display.text }} <icon class="fgray" name="external-link" /> + {{ display.text }} <gl-icon class="fgray" name="external-link" /> </a> </template> 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 d52e6d38ac6..79fa231c216 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,12 +1,11 @@ <script> -import { GlDeprecatedButton } from '@gitlab/ui'; +import { GlDeprecatedButton, GlIcon } from '@gitlab/ui'; import { escape } from 'lodash'; import { __, n__, sprintf, s__ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; export default { components: { - Icon, + GlIcon, GlDeprecatedButton, }, props: { @@ -86,7 +85,7 @@ export default { class="commit-edit-toggle square s24 gl-mr-3" @click.stop="toggle()" > - <icon :name="collapseIcon" :size="16" /> + <gl-icon :name="collapseIcon" :size="16" /> </gl-deprecated-button> <span v-if="expanded">{{ __('Collapse') }}</span> <span v-else> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue index 3cf7dc3c4d1..6608381f348 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue @@ -1,11 +1,11 @@ <script> -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import tooltip from '~/vue_shared/directives/tooltip'; import { __ } from '~/locale'; export default { components: { - Icon, + GlIcon, }, directives: { tooltip, @@ -62,7 +62,7 @@ export default { rel="noopener noreferrer nofollow" data-container="body" > - <icon name="question" /> + <gl-icon name="question" /> </a> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue index 7431b7e9ed4..f28e49df56e 100644 --- a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue +++ b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue @@ -1,12 +1,11 @@ <script> -import { GlTooltipDirective } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import getCommitIconMap from '~/ide/commit_icon'; import { __ } from '~/locale'; export default { components: { - Icon, + GlIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -81,7 +80,7 @@ export default { :class="{ 'ml-auto': isCentered }" class="file-changed-icon d-inline-block" > - <icon v-if="showIcon" :name="changedIcon" :size="size" :class="changedIconClass" /> + <gl-icon v-if="showIcon" :name="changedIcon" :size="size" :class="changedIconClass" /> </span> </template> diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue index 890dbe86c0d..ff665d9cc58 100644 --- a/app/assets/javascripts/vue_shared/components/ci_icon.vue +++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue @@ -1,5 +1,5 @@ <script> -import Icon from './icon.vue'; +import { GlIcon } from '@gitlab/ui'; /** * Renders CI icon based on API response shared between all places where it is used. @@ -28,7 +28,7 @@ const validSizes = [8, 12, 16, 18, 24, 32, 48, 72]; export default { components: { - Icon, + GlIcon, }, props: { status: { @@ -66,5 +66,5 @@ export default { }; </script> <template> - <span :class="cssClass"> <icon :name="icon" :size="size" :class="cssClasses" /> </span> + <span :class="cssClass"> <gl-icon :name="icon" :size="size" :class="cssClasses" /> </span> </template> diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue index 23bea6c28b4..c1c8fb3a6e2 100644 --- a/app/assets/javascripts/vue_shared/components/commit.vue +++ b/app/assets/javascripts/vue_shared/components/commit.vue @@ -1,10 +1,9 @@ <script> import { isString, isEmpty } from 'lodash'; -import { GlTooltipDirective, GlLink } from '@gitlab/ui'; +import { GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; import UserAvatarLink from './user_avatar/user_avatar_link.vue'; -import Icon from './icon.vue'; export default { directives: { @@ -12,14 +11,14 @@ export default { }, components: { UserAvatarLink, - Icon, + GlIcon, GlLink, TooltipOnTruncate, }, props: { /** * Indicates the existence of a tag. - * Used to render the correct icon, if true will render `fa-tag` icon, + * Used to render the correct GlIcon, if true will render `tag` GlIcon, * if false will render a svg sprite fork icon */ tag: { @@ -141,9 +140,9 @@ export default { <div class="branch-commit cgray"> <template v-if="shouldShowRefInfo"> <div class="icon-container"> - <icon v-if="tag" name="tag" /> - <icon v-else-if="mergeRequestRef" name="git-merge" /> - <icon v-else name="branch" /> + <gl-icon v-if="tag" name="tag" /> + <gl-icon v-else-if="mergeRequestRef" name="git-merge" /> + <gl-icon v-else name="branch" /> </div> <gl-link @@ -163,7 +162,7 @@ export default { >{{ commitRef.name }}</gl-link > </template> - <icon name="commit" class="commit-icon js-commit-icon" /> + <gl-icon name="commit" class="commit-icon js-commit-icon" /> <gl-link :href="commitUrl" class="commit-sha mr-0">{{ shortSha }}</gl-link> diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue index 3bf629d4acb..f9d3d76e7f5 100644 --- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue @@ -1,12 +1,11 @@ <script> -import { GlLink } from '@gitlab/ui'; -import Icon from '../../icon.vue'; +import { GlLink, GlIcon } from '@gitlab/ui'; import { numberToHumanSize } from '../../../../lib/utils/number_utils'; export default { components: { GlLink, - Icon, + GlIcon, }, props: { path: { @@ -52,7 +51,7 @@ export default { :download="fileName" target="_blank" > - <icon :size="16" name="download" class="float-left gl-mr-3" /> + <gl-icon :size="16" name="download" class="float-left gl-mr-3" /> {{ __('Download') }} </gl-link> </div> 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 e1f336f5250..4d85726065b 100644 --- a/app/assets/javascripts/vue_shared/components/droplab_dropdown_button.vue +++ b/app/assets/javascripts/vue_shared/components/droplab_dropdown_button.vue @@ -1,10 +1,9 @@ <script> -import { GlDeprecatedButton } from '@gitlab/ui'; -import Icon from './icon.vue'; +import { GlDeprecatedButton, GlIcon } from '@gitlab/ui'; export default { components: { - Icon, + GlIcon, GlDeprecatedButton, }, props: { @@ -73,7 +72,7 @@ export default { data-display="static" data-toggle="dropdown" > - <icon name="chevron-down" :aria-label="__('toggle dropdown')" /> + <gl-icon name="chevron-down" :aria-label="__('toggle dropdown')" /> </button> <ul :class="dropdownClass" class="dropdown-menu dropdown-open-top"> <template v-for="(action, index) in actions"> diff --git a/app/assets/javascripts/vue_shared/components/file_finder/item.vue b/app/assets/javascripts/vue_shared/components/file_finder/item.vue index 79c62cd9938..4c496ba3f9b 100644 --- a/app/assets/javascripts/vue_shared/components/file_finder/item.vue +++ b/app/assets/javascripts/vue_shared/components/file_finder/item.vue @@ -1,6 +1,6 @@ <script> import fuzzaldrinPlus from 'fuzzaldrin-plus'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import FileIcon from '../file_icon.vue'; import ChangedFileIcon from '../changed_file_icon.vue'; @@ -8,7 +8,7 @@ const MAX_PATH_LENGTH = 60; export default { components: { - Icon, + GlIcon, ChangedFileIcon, FileIcon, }, @@ -103,10 +103,10 @@ export default { <span v-if="file.changed || file.tempFile" v-once class="diff-changed-stats"> <span v-if="showDiffStats"> <span class="cgreen bold"> - <icon name="file-addition" class="align-text-top" /> {{ file.addedLines }} + <gl-icon name="file-addition" class="align-text-top" /> {{ file.addedLines }} </span> <span class="cred bold ml-1"> - <icon name="file-deletion" class="align-text-top" /> {{ file.removedLines }} + <gl-icon name="file-deletion" class="align-text-top" /> {{ file.removedLines }} </span> </span> <changed-file-icon v-else :file="file" /> 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 58afcebb7b3..ee2687ace0e 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue @@ -1,8 +1,7 @@ <script> import $ from 'jquery'; -import { GlDeprecatedButton } from '@gitlab/ui'; +import { GlDeprecatedButton, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; /** * Renders a split dropdown with * an input that allows to search through the given @@ -14,7 +13,7 @@ import Icon from '~/vue_shared/components/icon.vue'; export default { name: 'FilteredSearchDropdown', components: { - Icon, + GlIcon, GlDeprecatedButton, }, props: { @@ -117,7 +116,7 @@ export default { aria-expanded="false" :aria-label="__('Expand dropdown')" > - <icon name="angle-down" :size="12" /> + <gl-icon name="angle-down" :size="12" /> </button> <div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-input"> @@ -128,7 +127,7 @@ export default { :placeholder="__('Filter')" class="js-filtered-dropdown-input dropdown-input-field" /> - <icon class="dropdown-input-search" name="search" /> + <gl-icon class="dropdown-input-search" name="search" /> </div> <div class="dropdown-content"> diff --git a/app/assets/javascripts/vue_shared/components/help_popover.vue b/app/assets/javascripts/vue_shared/components/help_popover.vue index a57fa09f753..7154360611f 100644 --- a/app/assets/javascripts/vue_shared/components/help_popover.vue +++ b/app/assets/javascripts/vue_shared/components/help_popover.vue @@ -1,6 +1,6 @@ <script> import $ from 'jquery'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlIcon } from '@gitlab/ui'; import { inserted } from '~/feature_highlight/feature_highlight_helper'; import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover'; @@ -11,7 +11,7 @@ import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover export default { name: 'HelpPopover', components: { - Icon, + GlIcon, }, props: { options: { @@ -44,6 +44,6 @@ export default { </script> <template> <button type="button" class="btn btn-blank btn-transparent btn-help" tabindex="0"> - <icon name="question" /> + <gl-icon name="question" /> </button> </template> diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue b/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue index c125d5439cb..c745ea61f8b 100644 --- a/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue +++ b/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue @@ -1,13 +1,12 @@ <script> -import { GlTooltip } from '@gitlab/ui'; +import { GlTooltip, GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import { timeFor, parsePikadayDate, dateInWords } from '~/lib/utils/datetime_utility'; -import Icon from '~/vue_shared/components/icon.vue'; export default { components: { - Icon, + GlIcon, GlTooltip, }, mixins: [timeagoMixin], @@ -73,7 +72,7 @@ export default { </script> <template> <div ref="milestoneDetails" class="issue-milestone-details"> - <icon :size="16" class="gl-mr-2" name="clock" /> + <gl-icon :size="16" class="gl-mr-2" name="clock" /> <span class="milestone-title d-inline-block">{{ milestone.title }}</span> <gl-tooltip :target="() => $refs.milestoneDetails" placement="bottom" class="js-item-milestone"> <span class="bold">{{ __('Milestone') }}</span> <br /> diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue index f6b8b57f944..3ab906480cb 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/field.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue @@ -2,13 +2,13 @@ import $ from 'jquery'; import '~/behaviors/markdown/render_gfm'; import { unescape } from 'lodash'; +import { GlIcon } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import { stripHtml } from '~/lib/utils/text_utility'; import { deprecatedCreateFlash as Flash } from '~/flash'; import GLForm from '~/gl_form'; import MarkdownHeader from './header.vue'; import MarkdownToolbar from './toolbar.vue'; -import Icon from '../icon.vue'; import GlMentions from '~/vue_shared/components/gl_mentions.vue'; import Suggestions from '~/vue_shared/components/markdown/suggestions.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -19,7 +19,7 @@ export default { GlMentions, MarkdownHeader, MarkdownToolbar, - Icon, + GlIcon, Suggestions, }, mixins: [glFeatureFlagsMixin()], @@ -254,7 +254,7 @@ export default { href="#" :aria-label="__('Leave zen mode')" > - <icon :size="16" name="minimize" /> + <gl-icon :size="16" name="minimize" /> </a> <markdown-toolbar :markdown-docs-path="markdownDocsPath" diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue index 77443d6301e..fe975112b60 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue @@ -1,15 +1,14 @@ <script> import $ from 'jquery'; -import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { GlPopover, GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { getSelectedFragment } from '~/lib/utils/common_utils'; import { CopyAsGFM } from '../../../behaviors/markdown/copy_as_gfm'; import ToolbarButton from './toolbar_button.vue'; -import Icon from '../icon.vue'; export default { components: { ToolbarButton, - Icon, + GlIcon, GlPopover, GlButton, }, @@ -221,7 +220,7 @@ export default { :title="__('Go full screen')" type="button" > - <icon name="maximize" /> + <gl-icon name="maximize" /> </button> </div> </li> 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 4de80e9b4c2..0e11c691141 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,11 +1,10 @@ <script> -import { GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { __ } from '~/locale'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; export default { - components: { Icon, GlDeprecatedButton, GlLoadingIcon }, + components: { GlIcon, GlDeprecatedButton, GlLoadingIcon }, directives: { 'gl-tooltip': GlTooltipDirective }, mixins: [glFeatureFlagsMixin()], props: { @@ -97,7 +96,7 @@ export default { <div class="qa-suggestion-diff-header js-suggestion-diff-header font-weight-bold"> {{ __('Suggested change') }} <a v-if="helpPagePath" :href="helpPagePath" :aria-label="__('Help')" class="js-help-btn"> - <icon name="question-o" css-classes="link-highlight" /> + <gl-icon name="question-o" css-classes="link-highlight" /> </a> </div> <div v-if="isApplied" class="badge badge-success">{{ __('Applied') }}</div> diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue index f37dd9e171c..a23195cfc6e 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue @@ -1,10 +1,9 @@ <script> -import { GlTooltipDirective } from '@gitlab/ui'; -import Icon from '../icon.vue'; +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; export default { components: { - Icon, + GlIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -67,6 +66,6 @@ export default { data-container="body" @click="() => $emit('click')" > - <icon :name="icon" /> + <gl-icon :name="icon" /> </button> </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 69ba5cb97e2..35ba7c665d5 100644 --- a/app/assets/javascripts/vue_shared/components/modal_copy_button.vue +++ b/app/assets/javascripts/vue_shared/components/modal_copy_button.vue @@ -1,14 +1,13 @@ <script> import $ from 'jquery'; -import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui'; +import { GlDeprecatedButton, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import Clipboard from 'clipboard'; import { __ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; export default { components: { GlDeprecatedButton, - Icon, + GlIcon, }, directives: { @@ -121,7 +120,7 @@ export default { :title="title" > <slot> - <icon name="copy-to-clipboard" /> + <gl-icon name="copy-to-clipboard" /> </slot> </gl-deprecated-button> </template> diff --git a/app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue b/app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue index f986b105f20..71b141ede83 100644 --- a/app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue +++ b/app/assets/javascripts/vue_shared/components/notes/noteable_warning.vue @@ -1,8 +1,7 @@ <script> -import { GlLink } from '@gitlab/ui'; +import { GlLink, GlIcon } from '@gitlab/ui'; import { escape } from 'lodash'; import { __, sprintf } from '~/locale'; -import icon from '../icon.vue'; function buildDocsLinkStart(path) { return `<a href="${escape(path)}" target="_blank" rel="noopener noreferrer">`; @@ -16,7 +15,7 @@ const NoteableTypeText = { export default { components: { - icon, + GlIcon, GlLink, }, props: { @@ -89,7 +88,7 @@ export default { </script> <template> <div class="issuable-note-warning"> - <icon v-if="!isLockedAndConfidential" :name="warningIcon" :size="16" class="icon inline" /> + <gl-icon v-if="!isLockedAndConfidential" :name="warningIcon" :size="16" class="icon inline" /> <span v-if="isLockedAndConfidential" ref="lockedAndConfidential"> <span v-html="confidentialAndLockedDiscussionText"></span> 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 fe57d4f29ca..f97f9865355 100644 --- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue @@ -18,10 +18,9 @@ */ import $ from 'jquery'; import { mapGetters, mapActions, mapState } from 'vuex'; -import { GlDeprecatedButton, GlSkeletonLoading, GlTooltipDirective } from '@gitlab/ui'; +import { GlDeprecatedButton, GlSkeletonLoading, GlTooltipDirective, GlIcon } 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'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import TimelineEntryItem from './timeline_entry_item.vue'; import { spriteIcon } from '../../../lib/utils/common_utils'; @@ -32,7 +31,7 @@ const MAX_VISIBLE_COMMIT_LIST_COUNT = 3; export default { name: 'SystemNote', components: { - Icon, + GlIcon, noteHeader, TimelineEntryItem, GlDeprecatedButton, @@ -109,7 +108,7 @@ export default { · <button type="button" class="btn-blank btn-link" @click="toggleDescriptionVersion"> {{ __('Compare with previous version') }} - <icon :name="descriptionVersionToggleIcon" :size="12" class="append-left-5" /> + <gl-icon :name="descriptionVersionToggleIcon" :size="12" class="append-left-5" /> </button> </template> </note-header> @@ -122,7 +121,7 @@ export default { ></div> <div v-if="hasMoreCommits" class="flex-list"> <div class="system-note-commit-list-toggler flex-row" @click="expanded = !expanded"> - <icon :name="toggleIcon" :size="8" class="gl-mr-2" /> + <gl-icon :name="toggleIcon" :size="8" class="gl-mr-2" /> <span>{{ __('Toggle commit list') }}</span> </div> </div> @@ -139,7 +138,7 @@ export default { class="btn-transparent delete-description-history" @click="deleteDescriptionVersion" > - <icon name="remove" /> + <gl-icon name="remove" /> </gl-deprecated-button> </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 e053a9ddaa6..f8595b510de 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,14 +1,13 @@ <script> -import { GlDeprecatedButton } from '@gitlab/ui'; +import { GlDeprecatedButton, GlIcon } 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'; import highlight from '~/lib/utils/highlight'; import { truncateNamespace } from '~/lib/utils/text_utility'; export default { name: 'ProjectListItem', - components: { Icon, ProjectAvatar, GlDeprecatedButton }, + components: { GlIcon, ProjectAvatar, GlDeprecatedButton }, props: { project: { type: Object, @@ -44,7 +43,7 @@ export default { class="d-flex align-items-center btn pt-1 pb-1 border-0 project-list-item" @click="onClick" > - <icon + <gl-icon class="gl-ml-3 gl-mr-3 flex-shrink-0 position-top-0 js-selected-icon" :class="{ 'js-selected visible': selected, 'js-unselected invisible': !selected }" name="mobile-issue-close" diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue index 699e466e848..fa5498c8609 100644 --- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue +++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue @@ -1,6 +1,5 @@ <script> -import { GlPopover, GlSkeletonLoading } from '@gitlab/ui'; -import Icon from '~/vue_shared/components/icon.vue'; +import { GlPopover, GlSkeletonLoading, GlIcon } from '@gitlab/ui'; import UserAvatarImage from '../user_avatar/user_avatar_image.vue'; import { glEmojiTag } from '../../../emoji'; @@ -10,7 +9,7 @@ export default { name: 'UserPopover', maxSkeletonLines: MAX_SKELETON_LINES, components: { - Icon, + GlIcon, GlPopover, GlSkeletonLoading, UserAvatarImage, @@ -74,16 +73,16 @@ export default { </div> <div class="gl-text-gray-500"> <div v-if="user.bio" class="gl-display-flex gl-mb-2"> - <icon name="profile" class="gl-text-gray-400 gl-flex-shrink-0" /> + <gl-icon name="profile" class="gl-text-gray-400 gl-flex-shrink-0" /> <span ref="bio" class="gl-ml-2" v-html="user.bioHtml"></span> </div> <div v-if="user.workInformation" class="gl-display-flex gl-mb-2"> - <icon name="work" class="gl-text-gray-400 gl-flex-shrink-0" /> + <gl-icon name="work" class="gl-text-gray-400 gl-flex-shrink-0" /> <span ref="workInformation" class="gl-ml-2">{{ user.workInformation }}</span> </div> </div> <div v-if="user.location" class="js-location gl-text-gray-500 gl-display-flex"> - <icon name="location" class="gl-text-gray-400 flex-shrink-0" /> + <gl-icon name="location" class="gl-text-gray-400 flex-shrink-0" /> <span class="gl-ml-2">{{ user.location }}</span> </div> <div v-if="statusHtml" class="js-user-status gl-mt-3"> |