Skip to content

G
gitlab-ce
Commit 784b3b44 authored by Veethika Mishra's avatar Veethika Mishra Committed by Mark Florian
Browse files
Options

Migrate deprecated dropdowns 

In productivity analytics page.
parent 4a4aa2aa
Show whitespace changes
Inline Side-by-side
Showing with 80 additions and 65 deletions
ee/app/assets/javascripts/analytics/productivity_analytics/components/app.vue
View file @ 784b3b44
......@@ -3,8 +3,8 @@ import { mapState, mapActions, mapGetters } from 'vuex';
import {
GlEmptyState,
GlLoadingIcon,
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlDropdown,
GlDropdownItem,
GlButton,
GlTooltipDirective,
GlIcon,
......@@ -24,8 +24,8 @@ export default {
components: {
GlEmptyState,
GlLoadingIcon,
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlDropdown,
GlDropdownItem,
GlColumnChart,
GlButton,
GlIcon,
......@@ -300,12 +300,12 @@ export default {
>
<strong class="mr-2">{{ __('Sort by') }}</strong>
<div class="d-flex">
<gl-deprecated-dropdown
<gl-dropdown
class="mr-2 flex-grow"
toggle-class="dropdown-menu-toggle"
:text="sortFieldDropdownLabel"
>
<gl-deprecated-dropdown-item
<gl-dropdown-item
v-for="metric in tableSortOptions"
:key="metric.key"
active-class="is-active"
......@@ -322,8 +322,8 @@ export default {
/>
{{ metric.label }}
</span>
</gl-deprecated-dropdown-item>
</gl-deprecated-dropdown>
</gl-dropdown-item>
</gl-dropdown>
<gl-button v-gl-tooltip.hover :title="sortTooltipTitle" @click="toggleSortOrder">
<gl-icon :name="sortIcon" />
</gl-button>
......
ee/app/assets/javascripts/analytics/productivity_analytics/components/metric_chart.vue
View file @ 784b3b44
<script>
import { isEmpty } from 'lodash';
import {
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlLoadingIcon,
GlAlert,
GlIcon,
} from '@gitlab/ui';
import { GlDropdown, GlDropdownItem, GlLoadingIcon, GlAlert, GlIcon } from '@gitlab/ui';
import { s__ } from '~/locale';
import httpStatusCodes from '~/lib/utils/http_status';
export default {
name: 'MetricChart',
components: {
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlDropdown,
GlDropdownItem,
GlLoadingIcon,
GlAlert,
GlIcon,
......@@ -96,14 +90,14 @@ export default {
<template v-else>
<gl-alert v-if="infoMessage" :dismissible="false">{{ infoMessage }}</gl-alert>
<template v-else>
<gl-deprecated-dropdown
<gl-dropdown
v-if="hasMetricTypes"
class="mb-4 metric-dropdown"
toggle-class="dropdown-menu-toggle w-100"
menu-class="w-100 mw-100"
:text="metricDropdownLabel"
>
<gl-deprecated-dropdown-item
<gl-dropdown-item
v-for="metric in metricTypes"
:key="metric.key"
active-class="is-active"
......@@ -122,8 +116,8 @@ export default {
/>
{{ metric.label }}
</span>
</gl-deprecated-dropdown-item>
</gl-deprecated-dropdown>
</gl-dropdown-item>
</gl-dropdown>
<p v-if="description" class="text-muted">{{ description }}</p>
<div ref="chart">
<slot v-if="hasChartData"></slot>
......
ee/app/assets/javascripts/analytics/productivity_analytics/components/mr_table.vue
View file @ 784b3b44
<script>
import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
import MergeRequestTableRow from './mr_table_row.vue';
import Pagination from '~/vue_shared/components/pagination_links.vue';
export default {
components: {
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlDropdown,
GlDropdownItem,
GlIcon,
MergeRequestTableRow,
Pagination,
......@@ -64,13 +64,13 @@ export default {
<div class="d-flex">
<span class="d-none d-md-flex metric-col">{{ __('Time to merge') }}</span>
<gl-deprecated-dropdown
<gl-dropdown
class="w-100 metric-col"
toggle-class="dropdown-menu-toggle w-100"
menu-class="w-100 mw-100"
:text="metricDropdownLabel"
>
<gl-deprecated-dropdown-item
<gl-dropdown-item
v-for="option in columnOptions"
:key="option.key"
active-class="is-active"
......@@ -87,8 +87,8 @@ export default {
/>
{{ option.label }}
</span>
</gl-deprecated-dropdown-item>
</gl-deprecated-dropdown>
</gl-dropdown-item>
</gl-dropdown>
</div>
</div>
</div>
......
ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/metric_chart_spec.js.snap
View file @ 784b3b44
......@@ -22,15 +22,24 @@ exports[`MetricChart component template when isLoading is false and chartData is
<div>
<!---->
<gl-deprecated-dropdown-stub
<gl-dropdown-stub
category="tertiary"
class="mb-4 metric-dropdown"
headertext=""
menu-class="w-100 mw-100"
size="medium"
text="Please select a metric"
toggle-class="dropdown-menu-toggle w-100"
toggleclass="dropdown-menu-toggle w-100"
variant="default"
>
<gl-deprecated-dropdown-item-stub
<gl-dropdown-item-stub
active-class="is-active"
avatarurl=""
class="w-100"
iconcolor=""
iconname=""
iconrightname=""
secondarytext=""
>
<span
class="d-flex"
......@@ -46,10 +55,15 @@ exports[`MetricChart component template when isLoading is false and chartData is
Time from last commit to merge
</span>
</gl-deprecated-dropdown-item-stub>
<gl-deprecated-dropdown-item-stub
</gl-dropdown-item-stub>
<gl-dropdown-item-stub
active-class="is-active"
avatarurl=""
class="w-100"
iconcolor=""
iconname=""
iconrightname=""
secondarytext=""
>
<span
class="d-flex"
......@@ -65,8 +79,8 @@ exports[`MetricChart component template when isLoading is false and chartData is
Time from first comment to last commit
</span>
</gl-deprecated-dropdown-item-stub>
</gl-deprecated-dropdown-stub>
</gl-dropdown-item-stub>
</gl-dropdown-stub>
<!---->
......
ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/mr_table_spec.js.snap
View file @ 784b3b44
......@@ -36,15 +36,24 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
Time to merge
</span>
<gl-deprecated-dropdown-stub
<gl-dropdown-stub
category="tertiary"
class="w-100 metric-col"
headertext=""
menu-class="w-100 mw-100"
size="medium"
text="Time from first comment to last commit"
toggle-class="dropdown-menu-toggle w-100"
toggleclass="dropdown-menu-toggle w-100"
variant="default"
>
<gl-deprecated-dropdown-item-stub
<gl-dropdown-item-stub
active-class="is-active"
avatarurl=""
class="w-100"
iconcolor=""
iconname=""
iconrightname=""
secondarytext=""
>
<span
class="d-flex"
......@@ -58,10 +67,15 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
Time from first commit until first comment
</span>
</gl-deprecated-dropdown-item-stub>
<gl-deprecated-dropdown-item-stub
</gl-dropdown-item-stub>
<gl-dropdown-item-stub
active-class="is-active"
avatarurl=""
class="w-100"
iconcolor=""
iconname=""
iconrightname=""
secondarytext=""
>
<span
class="d-flex"
......@@ -75,10 +89,15 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
Time from first comment to last commit
</span>
</gl-deprecated-dropdown-item-stub>
<gl-deprecated-dropdown-item-stub
</gl-dropdown-item-stub>
<gl-dropdown-item-stub
active-class="is-active"
avatarurl=""
class="w-100"
iconcolor=""
iconname=""
iconrightname=""
secondarytext=""
>
<span
class="d-flex"
......@@ -92,8 +111,8 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
Time from last commit to merge
</span>
</gl-deprecated-dropdown-item-stub>
</gl-deprecated-dropdown-stub>
</gl-dropdown-item-stub>
</gl-dropdown-stub>
</div>
</div>
</div>
......
ee/spec/frontend/analytics/productivity_analytics/components/app_spec.js
View file @ 784b3b44
......@@ -8,13 +8,7 @@ import MergeRequestTable from 'ee/analytics/productivity_analytics/components/mr
import { getStoreConfig } from 'ee/analytics/productivity_analytics/store';
import { chartKeys } from 'ee/analytics/productivity_analytics/constants';
import { TEST_HOST } from 'helpers/test_constants';
import {
GlEmptyState,
GlLoadingIcon,
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlButton,
} from '@gitlab/ui';
import { GlEmptyState, GlLoadingIcon, GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui';
import { GlColumnChart } from '@gitlab/ui/dist/charts';
import UrlSyncMixin from 'ee/analytics/shared/mixins/url_sync_mixin';
import MetricChart from 'ee/analytics/productivity_analytics/components/metric_chart.vue';
......@@ -107,7 +101,7 @@ describe('ProductivityApp component', () => {
const findCommitBasedMetricChart = () => wrapper.find({ ref: 'commitBasedChart' });
const findScatterplotMetricChart = () => wrapper.find({ ref: 'scatterplot' });
const findMrTableSortSection = () => wrapper.find('.js-mr-table-sort');
const findSortFieldDropdown = () => findMrTableSortSection().find(GlDeprecatedDropdown);
const findSortFieldDropdown = () => findMrTableSortSection().find(GlDropdown);
const findSortOrderToggle = () => findMrTableSortSection().find(GlButton);
const findMrTableSection = () => wrapper.find('.js-mr-table');
const findMrTable = () => findMrTableSection().find(MergeRequestTable);
......@@ -459,7 +453,7 @@ describe('ProductivityApp component', () => {
it('should change the sort field', () => {
findSortFieldDropdown()
.findAll(GlDeprecatedDropdownItem)
.findAll(GlDropdownItem)
.at(0)
.vm.$emit('click');
......
ee/spec/frontend/analytics/productivity_analytics/components/metric_chart_spec.js
View file @ 784b3b44
import { shallowMount } from '@vue/test-utils';
import MetricChart from 'ee/analytics/productivity_analytics/components/metric_chart.vue';
import {
GlLoadingIcon,
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlAlert,
GlIcon,
} from '@gitlab/ui';
import { GlLoadingIcon, GlDropdown, GlDropdownItem, GlAlert, GlIcon } from '@gitlab/ui';
import httpStatusCodes from '~/lib/utils/http_status';
describe('MetricChart component', () => {
......@@ -44,8 +38,8 @@ describe('MetricChart component', () => {
const findLoadingIndicator = () => wrapper.find(GlLoadingIcon);
const findInfoMessage = () => wrapper.find(GlAlert);
const findMetricDropdown = () => wrapper.find(GlDeprecatedDropdown);
const findMetricDropdownItems = () => findMetricDropdown().findAll(GlDeprecatedDropdownItem);
const findMetricDropdown = () => wrapper.find(GlDropdown);
const findMetricDropdownItems = () => findMetricDropdown().findAll(GlDropdownItem);
const findChartSlot = () => wrapper.find({ ref: 'chart' });
describe('template', () => {
......
ee/spec/frontend/analytics/productivity_analytics/components/mr_table_spec.js
View file @ 784b3b44
import { shallowMount } from '@vue/test-utils';
import MergeRequestTable from 'ee/analytics/productivity_analytics/components/mr_table.vue';
import MergeRequestTableRow from 'ee/analytics/productivity_analytics/components/mr_table_row.vue';
import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { mockMergeRequests } from '../mock_data';
describe('MergeRequestTable component', () => {
......@@ -27,8 +27,8 @@ describe('MergeRequestTable component', () => {
const findMergeRequestTableRows = () => wrapper.findAll(MergeRequestTableRow);
const findTableHeader = () => wrapper.find('.table-row-header');
const findDropdown = () => wrapper.find(GlDeprecatedDropdown);
const findDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
const findDropdown = () => wrapper.find(GlDropdown);
const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
const findFirstDropdownItem = () => findDropdownItems().at(0);
beforeEach(() => {
......
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