Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
32643d14
Commit
32643d14
authored
Jan 25, 2022
by
Florie Guibert
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Roadmap setting - Move daterange to sidebar
Behind roadmap_settings feature flag
parent
f1ce3db2
Changes
8
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
298 additions
and
10 deletions
+298
-10
ee/app/assets/javascripts/roadmap/components/roadmap_app.vue
ee/app/assets/javascripts/roadmap/components/roadmap_app.vue
+1
-0
ee/app/assets/javascripts/roadmap/components/roadmap_daterange.vue
...sets/javascripts/roadmap/components/roadmap_daterange.vue
+127
-0
ee/app/assets/javascripts/roadmap/components/roadmap_filters.vue
...assets/javascripts/roadmap/components/roadmap_filters.vue
+5
-1
ee/app/assets/javascripts/roadmap/components/roadmap_settings.vue
...ssets/javascripts/roadmap/components/roadmap_settings.vue
+9
-0
ee/spec/features/groups/group_roadmap_spec.rb
ee/spec/features/groups/group_roadmap_spec.rb
+69
-7
ee/spec/frontend/roadmap/components/roadmap_daterange_spec.js
...pec/frontend/roadmap/components/roadmap_daterange_spec.js
+70
-0
ee/spec/frontend/roadmap/components/roadmap_settings_spec.js
ee/spec/frontend/roadmap/components/roadmap_settings_spec.js
+8
-2
locale/gitlab.pot
locale/gitlab.pot
+9
-0
No files found.
ee/app/assets/javascripts/roadmap/components/roadmap_app.vue
View file @
32643d14
...
...
@@ -115,6 +115,7 @@ export default {
<roadmap-settings
v-if=
"glFeatures.roadmapSettings"
:is-open=
"isSettingsSidebarOpen"
:timeframe-range-type=
"timeframeRangeType"
data-testid=
"roadmap-settings"
@
toggleSettings=
"toggleSettings"
/>
...
...
ee/app/assets/javascripts/roadmap/components/roadmap_daterange.vue
0 → 100644
View file @
32643d14
<
script
>
import
{
GlFormGroup
,
GlFormRadioGroup
,
GlDropdown
,
GlDropdownItem
}
from
'
@gitlab/ui
'
;
import
{
mapState
}
from
'
vuex
'
;
import
{
visitUrl
,
mergeUrlParams
}
from
'
~/lib/utils/url_utility
'
;
import
{
__
,
s__
}
from
'
~/locale
'
;
import
{
PRESET_TYPES
,
DATE_RANGES
}
from
'
../constants
'
;
import
{
getPresetTypeForTimeframeRangeType
}
from
'
../utils/roadmap_utils
'
;
export
default
{
availableDateRanges
:
[
{
text
:
s__
(
'
GroupRoadmap|This quarter
'
),
value
:
DATE_RANGES
.
CURRENT_QUARTER
},
{
text
:
s__
(
'
GroupRoadmap|This year
'
),
value
:
DATE_RANGES
.
CURRENT_YEAR
},
{
text
:
s__
(
'
GroupRoadmap|Within 3 years
'
),
value
:
DATE_RANGES
.
THREE_YEARS
},
],
components
:
{
GlFormGroup
,
GlFormRadioGroup
,
GlDropdown
,
GlDropdownItem
,
},
props
:
{
timeframeRangeType
:
{
type
:
String
,
required
:
true
,
},
},
data
()
{
return
{
selectedDaterange
:
this
.
timeframeRangeType
,
};
},
computed
:
{
...
mapState
([
'
presetType
'
]),
daterangeDropdownText
()
{
switch
(
this
.
selectedDaterange
)
{
case
DATE_RANGES
.
CURRENT_QUARTER
:
return
s__
(
'
GroupRoadmap|This quarter
'
);
case
DATE_RANGES
.
CURRENT_YEAR
:
return
s__
(
'
GroupRoadmap|This year
'
);
case
DATE_RANGES
.
THREE_YEARS
:
return
s__
(
'
GroupRoadmap|Within 3 years
'
);
default
:
return
''
;
}
},
availablePresets
()
{
const
quarters
=
{
text
:
__
(
'
By quarter
'
),
value
:
PRESET_TYPES
.
QUARTERS
};
const
months
=
{
text
:
__
(
'
By month
'
),
value
:
PRESET_TYPES
.
MONTHS
};
const
weeks
=
{
text
:
__
(
'
By week
'
),
value
:
PRESET_TYPES
.
WEEKS
};
if
(
this
.
selectedDaterange
===
DATE_RANGES
.
CURRENT_YEAR
)
{
return
[
months
,
weeks
];
}
else
if
(
this
.
selectedDaterange
===
DATE_RANGES
.
THREE_YEARS
)
{
return
[
quarters
,
months
,
weeks
];
}
return
[];
},
},
methods
:
{
handleDaterangeSelect
(
value
)
{
this
.
selectedDaterange
=
value
;
},
handleDaterangeDropdownOpen
()
{
this
.
initialSelectedDaterange
=
this
.
selectedDaterange
;
},
handleDaterangeDropdownClose
()
{
if
(
this
.
initialSelectedDaterange
!==
this
.
selectedDaterange
)
{
visitUrl
(
mergeUrlParams
(
{
timeframe_range_type
:
this
.
selectedDaterange
,
layout
:
getPresetTypeForTimeframeRangeType
(
this
.
selectedDaterange
),
},
window
.
location
.
href
,
),
);
}
},
handleRoadmapLayoutChange
(
presetType
)
{
visitUrl
(
mergeUrlParams
(
{
timeframe_range_type
:
this
.
selectedDaterange
,
layout
:
presetType
},
window
.
location
.
href
,
),
);
},
},
i18n
:
{
header
:
__
(
'
Date range
'
),
},
};
</
script
>
<
template
>
<div>
<label
for=
"roadmap-daterange"
class=
"gl-display-block"
>
{{
$options
.
i18n
.
header
}}
</label>
<gl-dropdown
id=
"roadmap-daterange"
icon=
"calendar"
class=
"gl-mb-3 roadmap-daterange-dropdown"
toggle-class=
"gl-rounded-base!"
:text=
"daterangeDropdownText"
data-testid=
"daterange-dropdown"
@
show=
"handleDaterangeDropdownOpen"
@
hide=
"handleDaterangeDropdownClose"
>
<gl-dropdown-item
v-for=
"dateRange in $options.availableDateRanges"
:key=
"dateRange.value"
:value=
"dateRange.value"
@
click=
"handleDaterangeSelect(dateRange.value)"
>
{{
dateRange
.
text
}}
</gl-dropdown-item>
</gl-dropdown>
<gl-form-group
v-if=
"availablePresets.length"
>
<gl-form-radio-group
:checked=
"presetType"
stacked
:options=
"availablePresets"
@
change=
"handleRoadmapLayoutChange"
/>
</gl-form-group>
</div>
</
template
>
ee/app/assets/javascripts/roadmap/components/roadmap_filters.vue
View file @
32643d14
...
...
@@ -176,6 +176,7 @@ export default {
class=
"epics-details-filters filtered-search-block gl-display-flex gl-flex-direction-column gl-xl-flex-direction-row gl-pb-3 row-content-block second-block"
>
<gl-dropdown
v-if=
"!glFeatures.roadmapSettings"
icon=
"calendar"
class=
"gl-mr-0 gl-lg-mr-3 mb-sm-2 roadmap-daterange-dropdown"
toggle-class=
"gl-rounded-base!"
...
...
@@ -192,7 +193,10 @@ export default {
>
{{
dateRange
.
text
}}
</gl-dropdown-item
>
</gl-dropdown>
<gl-form-group
v-if=
"availablePresets.length"
class=
"gl-mr-0 gl-lg-mr-3 mb-sm-2"
>
<gl-form-group
v-if=
"availablePresets.length && !glFeatures.roadmapSettings"
class=
"gl-mr-0 gl-lg-mr-3 mb-sm-2"
>
<gl-segmented-control
:checked=
"presetType"
:options=
"availablePresets"
...
...
ee/app/assets/javascripts/roadmap/components/roadmap_settings.vue
View file @
32643d14
<
script
>
import
{
GlDrawer
}
from
'
@gitlab/ui
'
;
import
RoadmapDaterange
from
'
./roadmap_daterange.vue
'
;
export
default
{
components
:
{
GlDrawer
,
RoadmapDaterange
,
},
props
:
{
isOpen
:
{
type
:
Boolean
,
required
:
true
,
},
timeframeRangeType
:
{
type
:
String
,
required
:
true
,
},
},
methods
:
{
getDrawerHeaderHeight
()
{
...
...
@@ -36,5 +42,8 @@ export default {
<template
#title
>
<h2
class=
"gl-my-0 gl-font-size-h2 gl-line-height-24"
>
{{
__
(
'
Roadmap settings
'
)
}}
</h2>
</
template
>
<
template
#default
>
<roadmap-daterange
:timeframe-range-type=
"timeframeRangeType"
/>
</
template
>
</gl-drawer>
</template>
ee/spec/features/groups/group_roadmap_spec.rb
View file @
32643d14
...
...
@@ -46,6 +46,57 @@ RSpec.describe 'group epic roadmap', :js do
sign_in
(
user
)
end
context
'with roadmap_settings feature flag off'
do
let!
(
:epic_with_bug
)
{
create
(
:labeled_epic
,
group:
group
,
start_date:
10
.
days
.
ago
,
end_date:
1
.
day
.
ago
,
labels:
[
bug_label
])
}
let!
(
:epic_with_critical
)
{
create
(
:labeled_epic
,
group:
group
,
start_date:
20
.
days
.
ago
,
end_date:
2
.
days
.
ago
,
labels:
[
critical_label
])
}
let!
(
:closed_epic
)
{
create
(
:epic
,
:closed
,
group:
group
,
start_date:
20
.
days
.
ago
,
end_date:
2
.
days
.
ago
)
}
before
do
stub_feature_flags
(
roadmap_settings:
false
)
visit
group_roadmap_path
(
group
)
wait_for_requests
end
context
'roadmap daterange filtering'
do
def
select_date_range
(
range_type
)
page
.
within
(
'.epics-roadmap-filters'
)
do
page
.
find
(
'[data-testid="daterange-dropdown"] button.dropdown-toggle'
).
click
click_button
(
range_type
)
end
end
it
'renders daterange filtering dropdown with "This quarter" selected by default no layout presets available'
,
:aggregate_failures
do
page
.
within
(
'.epics-roadmap-filters'
)
do
expect
(
page
).
to
have_selector
(
'[data-testid="daterange-dropdown"]'
)
expect
(
page
).
not_to
have_selector
(
'.gl-segmented-control'
)
expect
(
page
.
find
(
'[data-testid="daterange-dropdown"] button.dropdown-toggle'
)).
to
have_content
(
'This quarter'
)
end
end
it
'selecting "This year" as daterange shows `Months` and `Weeks` layout presets'
,
:aggregate_failures
do
select_date_range
(
'This year'
)
page
.
within
(
'.epics-roadmap-filters'
)
do
expect
(
page
).
to
have_selector
(
'.gl-segmented-control'
)
expect
(
page
).
to
have_selector
(
'input[value="MONTHS"]'
)
expect
(
page
).
to
have_selector
(
'input[value="WEEKS"]'
)
end
end
it
'selecting "Within 3 years" as daterange shows `Quarters`, `Months` and `Weeks` layout presets'
,
:aggregate_failures
do
select_date_range
(
'Within 3 years'
)
page
.
within
(
'.epics-roadmap-filters'
)
do
expect
(
page
).
to
have_selector
(
'.gl-segmented-control'
)
expect
(
page
).
to
have_selector
(
'input[value="QUARTERS"]'
)
expect
(
page
).
to
have_selector
(
'input[value="MONTHS"]'
)
expect
(
page
).
to
have_selector
(
'input[value="WEEKS"]'
)
end
end
end
end
context
'when epics exist for the group'
do
available_tokens
=
%w[Author Label Milestone Epic My-Reaction]
...
...
@@ -60,17 +111,28 @@ RSpec.describe 'group epic roadmap', :js do
describe
'roadmap page'
do
context
'roadmap daterange filtering'
do
def
open_settings_sidebar
click_button
'Settings'
expect
(
page
).
to
have_selector
(
'[data-testid="roadmap-settings"]'
)
end
def
select_date_range
(
range_type
)
page
.
within
(
'.epics-roadmap-filters'
)
do
open_settings_sidebar
page
.
within
(
'[data-testid="roadmap-settings"]'
)
do
page
.
find
(
'[data-testid="daterange-dropdown"] button.dropdown-toggle'
).
click
click_button
(
range_type
)
end
open_settings_sidebar
end
it
'renders daterange filtering dropdown with "This quarter" selected by default no layout presets available'
,
:aggregate_failures
do
page
.
within
(
'.epics-roadmap-filters'
)
do
open_settings_sidebar
page
.
within
(
'[data-testid="roadmap-settings"]'
)
do
expect
(
page
).
to
have_selector
(
'[data-testid="daterange-dropdown"]'
)
expect
(
page
).
not_to
have_selector
(
'.gl-
segmented-control
'
)
expect
(
page
).
not_to
have_selector
(
'.gl-
form-checkbox-group
'
)
expect
(
page
.
find
(
'[data-testid="daterange-dropdown"] button.dropdown-toggle'
)).
to
have_content
(
'This quarter'
)
end
end
...
...
@@ -78,8 +140,8 @@ RSpec.describe 'group epic roadmap', :js do
it
'selecting "This year" as daterange shows `Months` and `Weeks` layout presets'
,
:aggregate_failures
do
select_date_range
(
'This year'
)
page
.
within
(
'
.epics-roadmap-filters
'
)
do
expect
(
page
).
to
have_selector
(
'.gl-
segmented-control
'
)
page
.
within
(
'
[data-testid="roadmap-settings"]
'
)
do
expect
(
page
).
to
have_selector
(
'.gl-
form-checkbox-group
'
)
expect
(
page
).
to
have_selector
(
'input[value="MONTHS"]'
)
expect
(
page
).
to
have_selector
(
'input[value="WEEKS"]'
)
end
...
...
@@ -88,8 +150,8 @@ RSpec.describe 'group epic roadmap', :js do
it
'selecting "Within 3 years" as daterange shows `Quarters`, `Months` and `Weeks` layout presets'
,
:aggregate_failures
do
select_date_range
(
'Within 3 years'
)
page
.
within
(
'
.epics-roadmap-filters
'
)
do
expect
(
page
).
to
have_selector
(
'.gl-
segmented-control
'
)
page
.
within
(
'
[data-testid="roadmap-settings"]
'
)
do
expect
(
page
).
to
have_selector
(
'.gl-
form-checkbox-group
'
)
expect
(
page
).
to
have_selector
(
'input[value="QUARTERS"]'
)
expect
(
page
).
to
have_selector
(
'input[value="MONTHS"]'
)
expect
(
page
).
to
have_selector
(
'input[value="WEEKS"]'
)
...
...
ee/spec/frontend/roadmap/components/roadmap_daterange_spec.js
0 → 100644
View file @
32643d14
import
{
GlDropdown
,
GlFormGroup
,
GlFormRadioGroup
}
from
'
@gitlab/ui
'
;
import
{
nextTick
}
from
'
vue
'
;
import
{
shallowMountExtended
}
from
'
helpers/vue_test_utils_helper
'
;
import
createStore
from
'
ee/roadmap/store
'
;
import
RoadmapDaterange
from
'
ee/roadmap/components/roadmap_daterange.vue
'
;
import
{
DATE_RANGES
,
PRESET_TYPES
}
from
'
ee/roadmap/constants
'
;
describe
(
'
RoadmapDaterange
'
,
()
=>
{
let
wrapper
;
const
quarters
=
{
text
:
'
By quarter
'
,
value
:
PRESET_TYPES
.
QUARTERS
};
const
months
=
{
text
:
'
By month
'
,
value
:
PRESET_TYPES
.
MONTHS
};
const
weeks
=
{
text
:
'
By week
'
,
value
:
PRESET_TYPES
.
WEEKS
};
const
createComponent
=
({
timeframeRangeType
=
DATE_RANGES
.
CURRENT_QUARTER
}
=
{})
=>
{
const
store
=
createStore
();
store
.
dispatch
(
'
setInitialData
'
,
{
presetType
:
PRESET_TYPES
.
MONTHS
,
});
wrapper
=
shallowMountExtended
(
RoadmapDaterange
,
{
store
,
propsData
:
{
timeframeRangeType
},
});
};
const
findDropdown
=
()
=>
wrapper
.
findComponent
(
GlDropdown
);
const
findFormGroup
=
()
=>
wrapper
.
findComponent
(
GlFormGroup
);
const
findFormRadioGroup
=
()
=>
wrapper
.
findComponent
(
GlFormRadioGroup
);
beforeEach
(()
=>
{
createComponent
();
});
afterEach
(()
=>
{
wrapper
.
destroy
();
});
describe
(
'
template
'
,
()
=>
{
it
(
'
renders labels
'
,
()
=>
{
expect
(
wrapper
.
find
(
'
label
'
).
exists
()).
toBe
(
true
);
expect
(
wrapper
.
find
(
'
label
'
).
text
()).
toContain
(
'
Date range
'
);
});
it
(
'
renders dropdown
'
,
()
=>
{
expect
(
findDropdown
().
exists
()).
toBe
(
true
);
});
it
.
each
`
timeframeRangeType | hasFormGroup | availablePresets
${
DATE_RANGES
.
CURRENT_QUARTER
}
|
${
false
}
|
${[]}
${
DATE_RANGES
.
CURRENT_YEAR
}
|
${
true
}
|
${[
months
,
weeks
]}
${
DATE_RANGES
.
THREE_YEARS
}
|
${
true
}
|
${[
quarters
,
months
,
weeks
]}
`
(
'
renders radio group depending on timeframeRangeType
'
,
async
({
timeframeRangeType
,
hasFormGroup
,
availablePresets
})
=>
{
createComponent
({
timeframeRangeType
});
await
nextTick
();
expect
(
findFormGroup
().
exists
()).
toBe
(
hasFormGroup
);
if
(
hasFormGroup
)
{
expect
(
findFormRadioGroup
().
props
(
'
options
'
)).
toEqual
(
availablePresets
);
}
},
);
});
});
ee/spec/frontend/roadmap/components/roadmap_settings_spec.js
View file @
32643d14
import
{
GlDrawer
}
from
'
@gitlab/ui
'
;
import
{
shallowMountExtended
}
from
'
helpers/vue_test_utils_helper
'
;
import
RoadmapSettings
from
'
ee/roadmap/components/roadmap_settings.vue
'
;
import
RoadmapDaterange
from
'
ee/roadmap/components/roadmap_daterange.vue
'
;
describe
(
'
RoadmapSettings
'
,
()
=>
{
let
wrapper
;
const
createComponent
=
({
isOpen
=
false
}
=
{})
=>
{
wrapper
=
shallowMountExtended
(
RoadmapSettings
,
{
propsData
:
{
isOpen
},
propsData
:
{
isOpen
,
timeframeRangeType
:
'
CURRENT_QUARTER
'
},
});
};
const
findSettingsDrawer
=
()
=>
wrapper
.
findComponent
(
GlDrawer
);
const
findDaterange
=
()
=>
wrapper
.
findComponent
(
RoadmapDaterange
);
beforeEach
(()
=>
{
createComponent
();
...
...
@@ -22,9 +24,13 @@ describe('RoadmapSettings', () => {
});
describe
(
'
template
'
,
()
=>
{
it
(
'
render drawer and title
'
,
()
=>
{
it
(
'
render
s
drawer and title
'
,
()
=>
{
expect
(
findSettingsDrawer
().
exists
()).
toBe
(
true
);
expect
(
findSettingsDrawer
().
text
()).
toContain
(
'
Roadmap settings
'
);
});
it
(
'
renders roadmap daterange component
'
,
()
=>
{
expect
(
findDaterange
().
exists
()).
toBe
(
true
);
});
});
});
locale/gitlab.pot
View file @
32643d14
...
...
@@ -6228,6 +6228,15 @@ msgstr ""
msgid "By default, all projects and groups will use the global notifications setting."
msgstr ""
msgid "By month"
msgstr ""
msgid "By quarter"
msgstr ""
msgid "By week"
msgstr ""
msgid "ByAuthor|by"
msgstr ""
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment