Skip to content

G
gitlab-ce
Commit b93d6cac authored by Marvin Karegyeya's avatar Marvin Karegyeya Committed by Olena Horal-Koretska
Browse files
Options

Replace GlDeprecatedDropdown with GlDropdown in error_tracking

parent d91805b8
Show whitespace changes
Inline Side-by-side
Showing with 74 additions and 80 deletions
app/assets/javascripts/error_tracking/components/error_details.vue
View file @ b93d6cac
......@@ -8,9 +8,9 @@ import {
GlBadge,
GlAlert,
GlSprintf,
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlDeprecatedDropdownDivider,
GlDropdown,
GlDropdownItem,
GlDropdownDivider,
GlIcon,
} from '@gitlab/ui';
import { deprecatedCreateFlash as createFlash } from '~/flash';
......@@ -43,9 +43,9 @@ export default {
GlBadge,
GlAlert,
GlSprintf,
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlDeprecatedDropdownDivider,
GlDropdown,
GlDropdownItem,
GlDropdownDivider,
TimeAgoTooltip,
},
directives: {
......@@ -331,38 +331,38 @@ export default {
</gl-button>
</form>
</div>
<gl-deprecated-dropdown
<gl-dropdown
text="Options"
class="error-details-options d-md-none"
right
:disabled="issueUpdateInProgress"
>
<gl-deprecated-dropdown-item
<gl-dropdown-item
data-qa-selector="update_ignore_status_button"
@click="onIgnoreStatusUpdate"
>{{ ignoreBtnLabel }}</gl-deprecated-dropdown-item
>{{ ignoreBtnLabel }}</gl-dropdown-item
>
<gl-deprecated-dropdown-item
<gl-dropdown-item
data-qa-selector="update_resolve_status_button"
@click="onResolveStatusUpdate"
>{{ resolveBtnLabel }}</gl-deprecated-dropdown-item
>{{ resolveBtnLabel }}</gl-dropdown-item
>
<gl-deprecated-dropdown-divider />
<gl-deprecated-dropdown-item
<gl-dropdown-divider />
<gl-dropdown-item
v-if="error.gitlabIssuePath"
data-qa-selector="view_issue_button"
:href="error.gitlabIssuePath"
variant="success"
>{{ __('View issue') }}</gl-deprecated-dropdown-item
>{{ __('View issue') }}</gl-dropdown-item
>
<gl-deprecated-dropdown-item
<gl-dropdown-item
v-if="!error.gitlabIssuePath"
:loading="issueCreationInProgress"
data-qa-selector="create_issue_button"
@click="createIssue"
>{{ __('Create issue') }}</gl-deprecated-dropdown-item
>{{ __('Create issue') }}</gl-dropdown-item
>
</gl-deprecated-dropdown>
</gl-dropdown>
</div>
</div>
<div>
......
app/assets/javascripts/error_tracking/components/error_tracking_list.vue
View file @ b93d6cac
......@@ -8,9 +8,9 @@ import {
GlLoadingIcon,
GlTable,
GlFormInput,
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlDeprecatedDropdownDivider,
GlDropdown,
GlDropdownItem,
GlDropdownDivider,
GlTooltipDirective,
GlPagination,
} from '@gitlab/ui';
......@@ -72,9 +72,9 @@ export default {
components: {
GlEmptyState,
GlButton,
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlDeprecatedDropdownDivider,
GlDropdown,
GlDropdownItem,
GlDropdownDivider,
GlIcon,
GlLink,
GlLoadingIcon,
......@@ -233,30 +233,30 @@ export default {
>
<div class="search-box flex-fill mb-1 mb-md-0">
<div class="filtered-search-box mb-0">
<gl-deprecated-dropdown
<gl-dropdown
:text="__('Recent searches')"
class="filtered-search-history-dropdown-wrapper"
toggle-class="filtered-search-history-dropdown-toggle-button"
toggle-class="filtered-search-history-dropdown-toggle-button gl-shadow-none! gl-border-r-gray-200! gl-border-1! gl-rounded-0!"
:disabled="loading"
>
<div v-if="!$options.hasLocalStorage" class="px-3">
{{ __('This feature requires local storage to be enabled') }}
</div>
<template v-else-if="recentSearches.length > 0">
<gl-deprecated-dropdown-item
<gl-dropdown-item
v-for="searchQuery in recentSearches"
:key="searchQuery"
@click="setSearchText(searchQuery)"
>{{ searchQuery }}
</gl-deprecated-dropdown-item>
<gl-deprecated-dropdown-divider />
<gl-deprecated-dropdown-item ref="clearRecentSearches" @click="clearRecentSearches"
</gl-dropdown-item>
<gl-dropdown-divider />
<gl-dropdown-item ref="clearRecentSearches" @click="clearRecentSearches"
>{{ __('Clear recent searches') }}
</gl-deprecated-dropdown-item>
</gl-dropdown-item>
</template>
<div v-else class="px-3">{{ __("You don't have any recent searches") }}</div>
</gl-deprecated-dropdown>
<div class="filtered-search-input-container flex-fill">
</gl-dropdown>
<div class="filtered-search-input-container gl-flex-fill-1">
<gl-form-input
v-model="errorSearchQuery"
class="pl-2 filtered-search"
......@@ -280,49 +280,44 @@ export default {
</div>
</div>
<gl-deprecated-dropdown
<gl-dropdown
:text="$options.statusFilters[statusFilter]"
class="status-dropdown mx-md-1 mb-1 mb-md-0"
menu-class="dropdown"
:disabled="loading"
right
>
<gl-deprecated-dropdown-item
<gl-dropdown-item
v-for="(label, status) in $options.statusFilters"
:key="status"
@click="filterErrors(status, label)"
>
<span class="d-flex">
<gl-icon
class="flex-shrink-0 append-right-4"
class="gl-new-dropdown-item-check-icon"
:class="{ invisible: !isCurrentStatusFilter(status) }"
name="mobile-issue-close"
/>
{{ label }}
</span>
</gl-deprecated-dropdown-item>
</gl-deprecated-dropdown>
</gl-dropdown-item>
</gl-dropdown>
<gl-deprecated-dropdown
:text="$options.sortFields[sortField]"
left
:disabled="loading"
menu-class="dropdown"
>
<gl-deprecated-dropdown-item
<gl-dropdown :text="$options.sortFields[sortField]" right :disabled="loading">
<gl-dropdown-item
v-for="(label, field) in $options.sortFields"
:key="field"
@click="sortByField(field)"
>
<span class="d-flex">
<gl-icon
class="flex-shrink-0 append-right-4"
class="gl-new-dropdown-item-check-icon"
:class="{ invisible: !isCurrentSortField(field) }"
name="mobile-issue-close"
/>
{{ label }}
</span>
</gl-deprecated-dropdown-item>
</gl-deprecated-dropdown>
</gl-dropdown-item>
</gl-dropdown>
</div>
<div v-if="loading" class="py-3">
......
app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue
View file @ b93d6cac
<script>
import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { getDisplayName } from '../utils';
export default {
components: {
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlDropdown,
GlDropdownItem,
},
props: {
dropdownLabel: {
......@@ -52,22 +52,22 @@ export default {
<div :class="{ 'gl-show-field-errors': isProjectInvalid }">
<label class="label-bold" for="project-dropdown">{{ __('Project') }}</label>
<div class="row">
<gl-deprecated-dropdown
<gl-dropdown
id="project-dropdown"
class="col-8 col-md-9 gl-pr-0"
:disabled="!hasProjects"
menu-class="w-100 mw-100"
toggle-class="dropdown-menu-toggle w-100 gl-field-error-outline"
toggle-class="dropdown-menu-toggle gl-field-error-outline"
:text="dropdownLabel"
>
<gl-deprecated-dropdown-item
<gl-dropdown-item
v-for="project in projects"
:key="`${project.organizationSlug}.${project.slug}`"
class="w-100"
@click="$emit('select-project', project)"
>{{ getDisplayName(project) }}</gl-deprecated-dropdown-item
>{{ getDisplayName(project) }}</gl-dropdown-item
>
</gl-deprecated-dropdown>
</gl-dropdown>
</div>
<p v-if="isProjectInvalid" class="js-project-dropdown-error gl-field-error">
{{ invalidProjectLabel }}
......
changelogs/unreleased/Replace-GlDeprecatedDropdown-with-GlDropdown-in-app-assets-javascripts-er.yml 0 → 100644
View file @ b93d6cac
---
title: Replace-GlDeprecatedDropdown-with-GlDropdown-in-app/assets/javascripts/error_tracking
merge_request: 41420
author: nuwe1
type: other
spec/frontend/error_tracking/components/error_tracking_list_spec.js
View file @ b93d6cac
import { createLocalVue, mount } from '@vue/test-utils';
import Vuex from 'vuex';
import {
GlEmptyState,
GlLoadingIcon,
GlFormInput,
GlPagination,
GlDeprecatedDropdown,
} from '@gitlab/ui';
import { GlEmptyState, GlLoadingIcon, GlFormInput, GlPagination, GlDropdown } from '@gitlab/ui';
import stubChildren from 'helpers/stub_children';
import ErrorTrackingList from '~/error_tracking/components/error_tracking_list.vue';
import ErrorTrackingActions from '~/error_tracking/components/error_tracking_actions.vue';
......@@ -24,19 +18,19 @@ describe('ErrorTrackingList', () => {
const findErrorListTable = () => wrapper.find('table');
const findErrorListRows = () => wrapper.findAll('tbody tr');
const dropdownsArray = () => wrapper.findAll(GlDeprecatedDropdown);
const dropdownsArray = () => wrapper.findAll(GlDropdown);
const findRecentSearchesDropdown = () =>
dropdownsArray()
.at(0)
.find(GlDeprecatedDropdown);
.find(GlDropdown);
const findStatusFilterDropdown = () =>
dropdownsArray()
.at(1)
.find(GlDeprecatedDropdown);
.find(GlDropdown);
const findSortDropdown = () =>
dropdownsArray()
.at(2)
.find(GlDeprecatedDropdown);
.find(GlDropdown);
const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
const findPagination = () => wrapper.find(GlPagination);
const findErrorActions = () => wrapper.find(ErrorTrackingActions);
......@@ -134,8 +128,8 @@ describe('ErrorTrackingList', () => {
mountComponent({
stubs: {
GlTable: false,
GlDeprecatedDropdown: false,
GlDeprecatedDropdownItem: false,
GlDropdown: false,
GlDropdownItem: false,
GlLink: false,
},
});
......@@ -205,8 +199,8 @@ describe('ErrorTrackingList', () => {
mountComponent({
stubs: {
GlTable: false,
GlDeprecatedDropdown: false,
GlDeprecatedDropdownItem: false,
GlDropdown: false,
GlDropdownItem: false,
},
});
});
......@@ -325,8 +319,8 @@ describe('ErrorTrackingList', () => {
beforeEach(() => {
mountComponent({
stubs: {
GlDeprecatedDropdown: false,
GlDeprecatedDropdownItem: false,
GlDropdown: false,
GlDropdownItem: false,
},
});
});
......
spec/frontend/error_tracking_settings/components/project_dropdown_spec.js
View file @ b93d6cac
import { pick, clone } from 'lodash';
import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import ProjectDropdown from '~/error_tracking_settings/components/project_dropdown.vue';
import { defaultProps, projectList, staleProject } from '../mock';
......@@ -43,7 +43,7 @@ describe('error tracking settings project dropdown', () => {
describe('empty project list', () => {
it('renders the dropdown', () => {
expect(wrapper.find('#project-dropdown').exists()).toBeTruthy();
expect(wrapper.find(GlDeprecatedDropdown).exists()).toBeTruthy();
expect(wrapper.find(GlDropdown).exists()).toBeTruthy();
});
it('shows helper text', () => {
......@@ -58,8 +58,8 @@ describe('error tracking settings project dropdown', () => {
});
it('does not contain any dropdown items', () => {
expect(wrapper.find(GlDeprecatedDropdownItem).exists()).toBeFalsy();
expect(wrapper.find(GlDeprecatedDropdown).props('text')).toBe('No projects available');
expect(wrapper.find(GlDropdownItem).exists()).toBeFalsy();
expect(wrapper.find(GlDropdown).props('text')).toBe('No projects available');
});
});
......@@ -72,12 +72,12 @@ describe('error tracking settings project dropdown', () => {
it('renders the dropdown', () => {
expect(wrapper.find('#project-dropdown').exists()).toBeTruthy();
expect(wrapper.find(GlDeprecatedDropdown).exists()).toBeTruthy();
expect(wrapper.find(GlDropdown).exists()).toBeTruthy();
});
it('contains a number of dropdown items', () => {
expect(wrapper.find(GlDeprecatedDropdownItem).exists()).toBeTruthy();
expect(wrapper.findAll(GlDeprecatedDropdownItem).length).toBe(2);
expect(wrapper.find(GlDropdownItem).exists()).toBeTruthy();
expect(wrapper.findAll(GlDropdownItem).length).toBe(2);
});
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7