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