Commit cef548fe authored by Kushal Pandya's avatar Kushal Pandya

Remove cookie flag check and old feature code

- Removes `epics_select_dropdown` cookie flag check
- Removes code for older sidebar Epic implementation
parent 70e8b58b
<script>
import { __ } from '~/locale';
import tooltip from '~/vue_shared/directives/tooltip';
import { spriteIcon } from '~/lib/utils/common_utils';
import Store from '../stores/sidebar_store';
import { GlLoadingIcon } from '@gitlab/ui';
export default {
name: 'SidebarItemEpic',
directives: {
tooltip,
},
components: {
GlLoadingIcon,
},
props: {
blockTitle: {
type: String,
required: false,
default: __('Epic'),
},
initialEpic: {
type: Object,
required: false,
default: () => null,
},
},
data() {
return {
store: !this.initialEpic ? new Store() : {},
};
},
computed: {
isLoading() {
return this.initialEpic ? false : this.store.isFetching.epic;
},
epic() {
return this.initialEpic || this.store.epic;
},
epicIcon() {
return spriteIcon('epic');
},
epicUrl() {
return this.epic.url;
},
epicTitle() {
return this.epic.title;
},
hasEpic() {
return this.epicUrl && this.epicTitle;
},
collapsedTitle() {
return this.hasEpic ? this.epicTitle : __('None');
},
tooltipTitle() {
if (!this.hasEpic) {
return __('Epic');
}
let tooltipTitle = this.epicTitle;
if (this.epic.human_readable_end_date || this.epic.human_readable_timestamp) {
tooltipTitle += '<br />';
tooltipTitle += this.epic.human_readable_end_date
? `${this.epic.human_readable_end_date} `
: '';
tooltipTitle += this.epic.human_readable_timestamp
? `(${this.epic.human_readable_timestamp})`
: '';
}
return tooltipTitle;
},
},
};
</script>
<template>
<div>
<div
v-tooltip
:title="tooltipTitle"
class="sidebar-collapsed-icon"
data-container="body"
data-placement="left"
data-html="true"
data-boundary="viewport"
>
<div v-html="epicIcon"></div>
<span v-if="!isLoading" class="collapse-truncated-title">{{ collapsedTitle }}</span>
</div>
<div class="title hide-collapsed">
{{ blockTitle }}
<gl-loading-icon v-if="isLoading" :inline="true" />
</div>
<div v-if="!isLoading" class="value hide-collapsed">
<a v-if="hasEpic" :href="epicUrl" class="bold">{{ epicTitle }}</a>
<span v-else class="no-value">{{ __('None') }}</span>
</div>
</div>
</template>
import Vue from 'vue'; import Vue from 'vue';
import Cookies from 'js-cookie';
import * as CEMountSidebar from '~/sidebar/mount_sidebar'; import * as CEMountSidebar from '~/sidebar/mount_sidebar';
import { parseBoolean } from '~/lib/utils/common_utils'; import { parseBoolean } from '~/lib/utils/common_utils';
import sidebarWeight from './components/weight/sidebar_weight.vue'; import sidebarWeight from './components/weight/sidebar_weight.vue';
import SidebarItemEpic from './components/sidebar_item_epic.vue';
import SidebarItemEpicsSelect from './components/sidebar_item_epics_select.vue'; import SidebarItemEpicsSelect from './components/sidebar_item_epics_select.vue';
import SidebarStore from './stores/sidebar_store'; import SidebarStore from './stores/sidebar_store';
...@@ -28,20 +26,6 @@ const mountWeightComponent = mediator => { ...@@ -28,20 +26,6 @@ const mountWeightComponent = mediator => {
}); });
}; };
const mountEpic = () => {
const el = document.querySelector('#js-vue-sidebar-item-epic');
if (!el) return false;
return new Vue({
el,
components: {
SidebarItemEpic,
},
render: createElement => createElement('sidebar-item-epic', {}),
});
};
const mountEpicsSelect = () => { const mountEpicsSelect = () => {
const el = document.querySelector('#js-vue-sidebar-item-epics-select'); const el = document.querySelector('#js-vue-sidebar-item-epics-select');
...@@ -71,9 +55,5 @@ const mountEpicsSelect = () => { ...@@ -71,9 +55,5 @@ const mountEpicsSelect = () => {
export default function mountSidebar(mediator) { export default function mountSidebar(mediator) {
CEMountSidebar.mountSidebar(mediator); CEMountSidebar.mountSidebar(mediator);
mountWeightComponent(mediator); mountWeightComponent(mediator);
if (parseBoolean(Cookies.get('epics_select_dropdown'))) { mountEpicsSelect();
mountEpicsSelect();
} else {
mountEpic();
}
} }
- return unless @group&.feature_available?(:epics) || @project&.group&.feature_available?(:epics) - return unless @group&.feature_available?(:epics) || @project&.group&.feature_available?(:epics)
- if cookies[:epics_select_dropdown] == 'true' %sidebar-epics-select{ ":sidebar-store" => "issue",
%sidebar-epics-select{ ":sidebar-store" => "issue", ":group-id": "#{@project&.group&.id}",
":group-id": "#{@project&.group&.id}", ":issue-id": "issue.id",
":issue-id": "issue.id", ":epic-issue-id": "(issue.epic && issue.epic.epic_issue_id) || 0",
":epic-issue-id": "(issue.epic && issue.epic.epic_issue_id) || 0", ":can-edit": can_admin_issue? }
":can-edit": can_admin_issue? }
- else
.block.epic
.title
Epic
%span.js-epic-label-loading{ "v-if" => "issue.isFetching && issue.isFetching.epic" }
= icon('spinner spin', class: 'loading-icon')
.value.js-epic-label{ "v-if" => "issue.isFetching && !issue.isFetching.epic" }
%a.bold{ "v-if" => "issue.epic && issue.epic.epic_issue_id", ":href" => "issue.epic.url" }
{{ issue.epic.title }}
.no-value{ "v-if" => "!(issue.epic && issue.epic.epic_issue_id)" }
None
- if issuable_sidebar[:supports_epic] - if issuable_sidebar[:supports_epic]
- if issuable_sidebar[:features_available][:epics] - if issuable_sidebar[:features_available][:epics]
- if cookies[:epics_select_dropdown] == 'true' #js-vue-sidebar-item-epics-select{ data: { can_edit: can_admin_issue?.to_s, group_id: @project.group.id, issue_id: @issuable.id, epic_issue_id: @issuable.epic_issue&.id } }
#js-vue-sidebar-item-epics-select{ data: { can_edit: can_admin_issue?.to_s, group_id: @project.group.id, issue_id: @issuable.id, epic_issue_id: @issuable.epic_issue&.id } }
- else
.block.epic
#js-vue-sidebar-item-epic
.title.hide-collapsed
Epic
= icon('spinner spin')
- else - else
= render 'shared/promotions/promote_epics' = render 'shared/promotions/promote_epics'
...@@ -14,7 +14,6 @@ describe 'Epic in issue sidebar', :js do ...@@ -14,7 +14,6 @@ describe 'Epic in issue sidebar', :js do
context 'projects within a group' do context 'projects within a group' do
before do before do
group.add_owner(user) group.add_owner(user)
set_cookie('epics_select_dropdown', 'true')
visit project_issue_path(project, issue) visit project_issue_path(project, issue)
end end
......
import Vue from 'vue';
import CESidebarStore from '~/sidebar/stores/sidebar_store';
import SidebarStore from 'ee/sidebar/stores/sidebar_store';
import sidebarItemEpic from 'ee/sidebar/components/sidebar_item_epic.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
describe('sidebarItemEpic', () => {
let vm;
let sidebarStore;
beforeEach(() => {
sidebarStore = new SidebarStore({
currentUser: '',
rootPath: '',
editable: false,
});
const SidebarItemEpic = Vue.extend(sidebarItemEpic);
vm = mountComponent(SidebarItemEpic, {
initialEpic: null,
});
});
afterEach(() => {
vm.$destroy();
CESidebarStore.singleton = null;
});
describe('loading', () => {
it('shows loading icon', () => {
expect(vm.$el.querySelector('.fa-spin')).toBeDefined();
});
it('hides collapsed title', () => {
expect(vm.$el.querySelector('.sidebar-collapsed-icon .collapsed-truncated-title')).toBeNull();
});
});
describe('loaded', () => {
const epicTitle = 'epic title';
const url = 'https://gitlab.com/';
beforeEach(done => {
sidebarStore.setEpicData({
epic: {
title: epicTitle,
id: 1,
url,
},
});
Vue.nextTick(done);
});
it('shows epic title', () => {
expect(vm.$el.querySelector('.value').innerText.trim()).toEqual(epicTitle);
});
it('links epic title to epic url', () => {
expect(vm.$el.querySelector('a').href).toEqual(url);
});
it('shows epic title as collapsed title tooltip', () => {
expect(vm.$el.querySelector('.sidebar-collapsed-icon').getAttribute('title')).toBeDefined();
expect(
vm.$el.querySelector('.sidebar-collapsed-icon').getAttribute('data-original-title'),
).toEqual(epicTitle);
});
describe('no epic', () => {
beforeEach(done => {
sidebarStore.epic = {};
Vue.nextTick(done);
});
it('shows none as the epic text', () => {
expect(vm.$el.querySelector('.value').innerText.trim()).toEqual('None');
});
it('shows none as the collapsed title', () => {
expect(vm.$el.querySelector('.collapse-truncated-title').innerText.trim()).toEqual('None');
});
it('hides collapsed title tooltip', () => {
expect(vm.$el.querySelector('.collapse-truncated-title').getAttribute('title')).toBeNull();
});
});
});
});
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