From 95d8c46463a033c7df05460d81f1c7f30938ab16 Mon Sep 17 00:00:00 2001
From: Rudy Crespo <rcrespo@gitlab.com>
Date: Wed, 10 Apr 2024 17:48:18 +0000
Subject: [PATCH] Access standalone settings pages from Value Stream Analytics
As part of the migration of the new/edit value stream form from the
modal in the Value Stream Analytics page to their own standalone
settings pages, changes the flow of editing/creating value streams at
the group level so that when the "Edit" button or "New Value Stream"
option is selected, users are taken to their respective settings pages.
---
.../group/value_stream_analytics/index.md | 15 ++-
.../create_value_stream_form/constants.js | 2 +-
.../components/value_stream_select.vue | 39 ++++--
.../analytics/cycle_analytics/index.js | 9 +-
.../value_stream_form_content_header.vue | 6 +-
.../cycle_analytics/request_params.rb | 6 +-
.../multiple_value_streams_spec.rb | 92 ++++++++++----
.../analytics/cycle_analytics_spec.rb | 2 +-
.../components/value_stream_select_spec.js | 119 +++++++++++++++++-
.../analytics/cycle_analytics/mock_data.js | 1 +
locale/gitlab.pot | 3 -
qa/qa/ee/page/value_stream_analytics.rb | 2 +-
.../helpers/cycle_analytics_helpers.rb | 4 +-
13 files changed, 245 insertions(+), 55 deletions(-)
diff --git a/doc/user/group/value_stream_analytics/index.md b/doc/user/group/value_stream_analytics/index.md
index 697f83b1fece7..fe32840569765 100644
--- a/doc/user/group/value_stream_analytics/index.md
+++ b/doc/user/group/value_stream_analytics/index.md
@@ -461,6 +461,11 @@ DETAILS:
**Tier:** Premium, Ultimate
**Offering:** GitLab.com, Self-managed, GitLab Dedicated
+> - **New value stream** feature [changed](https://gitlab.com/gitlab-org/gitlab/-/issues/381002) from a dialog to a page in GitLab 16.11 [with a flag](../../../administration/feature_flags.md) named `vsa_standalone_settings_page`. Disabled by default.
+
+FLAG:
+On self-managed GitLab, by default the **New value stream** feature is not available. To make it available, an administrator can enable the [feature flag](../../../administration/feature_flags.md) named `vsa_standalone_settings_page`. On GitLab.com and GitLab Dedicated, this feature is not available. This feature is not ready for production use.
+
### Create a value stream with GitLab default stages
> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/221202) in GitLab 13.3
@@ -479,7 +484,7 @@ create custom stages in addition to those provided in the default template.
1. To add a custom stage, select **Add another stage**.
- Enter a name for the stage.
- Select a **Start event** and a **Stop event**.
-1. Select **Create value stream**.
+1. Select **New value stream**.
NOTE:
If you have recently upgraded to GitLab Premium, it can take up to 30 minutes for data to collect and display.
@@ -494,13 +499,13 @@ When you create a value stream, you can create and add custom stages that align
1. On the left sidebar, select **Search or go to** and find your project or group.
1. Select **Analyze > Value Stream analytics**.
-1. Select **Create value stream**.
+1. Select **New value stream**.
1. For each stage:
- Enter a name for the stage.
- Select a **Start event** and a **Stop event**.
1. To add another stage, select **Add another stage**.
1. To re-order the stages, select the up or down arrows.
-1. Select **Create value stream**.
+1. Select **New value stream**.
#### Label-based stages for custom value streams
@@ -527,6 +532,10 @@ DETAILS:
**Offering:** GitLab.com, Self-managed, GitLab Dedicated
> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/267537) in GitLab 13.10.
+> - **Edit value stream** feature [changed](https://gitlab.com/gitlab-org/gitlab/-/issues/381002) from a dialog to a page in GitLab 16.11 [with a flag](../../../administration/feature_flags.md) named `vsa_standalone_settings_page`. Disabled by default.
+
+FLAG:
+On self-managed GitLab, by default the **Edit value stream** feature is not available. To make it available, an administrator can enable the [feature flag](../../../administration/feature_flags.md) named `vsa_standalone_settings_page`. On GitLab.com and GitLab Dedicated, this feature is not available. This feature is not ready for production use.
After you create a value stream, you can customize it to suit your purposes. To edit a value stream:
diff --git a/ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/constants.js b/ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/constants.js
index 18095de1af39d..15842d3ae9d1b 100644
--- a/ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/constants.js
+++ b/ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/constants.js
@@ -4,7 +4,7 @@ export const NAME_MAX_LENGTH = 100;
export const NAME_MIN_LENGTH = 3;
export const i18n = {
- FORM_TITLE: s__('CreateValueStreamForm|Create value stream'),
+ FORM_TITLE: s__('CreateValueStreamForm|New value stream'),
EDIT_FORM_TITLE: s__('CreateValueStreamForm|Edit value stream'),
EDIT_FORM_ACTION: s__('CreateValueStreamForm|Save value stream'),
FORM_CREATED: s__("CreateValueStreamForm|'%{name}' Value Stream created"),
diff --git a/ee/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_select.vue b/ee/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_select.vue
index ae9ddc29e1422..ef5e78785d3a7 100644
--- a/ee/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_select.vue
+++ b/ee/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_select.vue
@@ -12,6 +12,7 @@ import { mapState, mapActions } from 'vuex';
import { slugifyWithUnderscore } from '~/lib/utils/text_utility';
import { sprintf, __, s__ } from '~/locale';
import Tracking from '~/tracking';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import ValueStreamForm from './value_stream_form.vue';
const i18n = {
@@ -38,7 +39,8 @@ export default {
directives: {
GlModalDirective,
},
- mixins: [Tracking.mixin()],
+ mixins: [Tracking.mixin(), glFeatureFlagsMixin()],
+ inject: ['newValueStreamPath', 'editValueStreamPath'],
props: {
canEdit: {
type: Boolean,
@@ -81,6 +83,20 @@ export default {
name: this.selectedValueStreamName,
});
},
+ isVSAStandaloneSettingsPageEnabled() {
+ return this.glFeatures?.vsaStandaloneSettingsPage;
+ },
+ createValueStreamButtonHref() {
+ return this.isVSAStandaloneSettingsPageEnabled ? this.newValueStreamPath : null;
+ },
+ editValueStreamButtonHref() {
+ if (!this.isVSAStandaloneSettingsPageEnabled || !this.selectedValueStreamId) return null;
+
+ return this.editValueStreamPath.replace(':id', this.selectedValueStreamId);
+ },
+ valueStreamFormModalId() {
+ return !this.isVSAStandaloneSettingsPageEnabled && 'value-stream-form-modal';
+ },
},
methods: {
...mapActions(['setSelectedValueStream', 'deleteValueStream']),
@@ -105,11 +121,17 @@ export default {
});
},
onCreate() {
- this.showForm = true;
+ if (!this.isVSAStandaloneSettingsPageEnabled) {
+ this.showForm = true;
+ }
+
this.isEditing = false;
},
onEdit() {
- this.showForm = true;
+ if (!this.isVSAStandaloneSettingsPageEnabled) {
+ this.showForm = true;
+ }
+
this.isEditing = true;
},
slugify(valueStreamTitle) {
@@ -133,10 +155,11 @@ export default {
<template v-if="canEdit" #footer>
<div class="gl-border-t gl-p-2">
<gl-button
- v-gl-modal-directive="'value-stream-form-modal'"
+ v-gl-modal-directive="valueStreamFormModalId"
class="gl-w-full gl-justify-content-start!"
category="tertiary"
- data-testid="create-value-stream"
+ :href="createValueStreamButtonHref"
+ data-testid="create-value-stream-option"
data-track-action="click_dropdown"
data-track-label="create_value_stream_form_open"
@click="onCreate"
@@ -161,7 +184,8 @@ export default {
</gl-collapsible-listbox>
<gl-button
v-if="isCustomValueStream && canEdit"
- v-gl-modal-directive="'value-stream-form-modal'"
+ v-gl-modal-directive="valueStreamFormModalId"
+ :href="editValueStreamButtonHref"
data-testid="edit-value-stream"
data-track-action="click_button"
data-track-label="edit_value_stream_form_open"
@@ -170,7 +194,8 @@ export default {
>
<gl-button
v-if="!hasValueStreams"
- v-gl-modal-directive="'value-stream-form-modal'"
+ v-gl-modal-directive="valueStreamFormModalId"
+ :href="createValueStreamButtonHref"
data-testid="create-value-stream-button"
data-track-action="click_button"
data-track-label="create_value_stream_form_open"
diff --git a/ee/app/assets/javascripts/analytics/cycle_analytics/index.js b/ee/app/assets/javascripts/analytics/cycle_analytics/index.js
index ce97ae75a1786..11d1d1aa3ba89 100644
--- a/ee/app/assets/javascripts/analytics/cycle_analytics/index.js
+++ b/ee/app/assets/javascripts/analytics/cycle_analytics/index.js
@@ -19,7 +19,13 @@ const apolloProvider = new VueApollo({
export default () => {
const el = document.querySelector('#js-cycle-analytics');
- const { emptyStateSvgPath, noDataSvgPath, noAccessSvgPath, newValueStreamPath } = el.dataset;
+ const {
+ emptyStateSvgPath,
+ noDataSvgPath,
+ noAccessSvgPath,
+ newValueStreamPath,
+ editValueStreamPath,
+ } = el.dataset;
const initialData = buildCycleAnalyticsInitialData(el.dataset);
const store = createStore();
@@ -47,6 +53,7 @@ export default () => {
store,
provide: {
newValueStreamPath,
+ editValueStreamPath,
},
render: (createElement) =>
createElement(CycleAnalytics, {
diff --git a/ee/app/assets/javascripts/analytics/cycle_analytics/vsa_settings/components/value_stream_form_content_header.vue b/ee/app/assets/javascripts/analytics/cycle_analytics/vsa_settings/components/value_stream_form_content_header.vue
index bad04e4d63470..7e7357f00504e 100644
--- a/ee/app/assets/javascripts/analytics/cycle_analytics/vsa_settings/components/value_stream_form_content_header.vue
+++ b/ee/app/assets/javascripts/analytics/cycle_analytics/vsa_settings/components/value_stream_form_content_header.vue
@@ -3,7 +3,7 @@ import { GlButton } from '@gitlab/ui';
import { s__ } from '~/locale';
import { i18n } from 'ee/analytics/cycle_analytics/components/create_value_stream_form/constants';
-const { EDIT_FORM_TITLE, EDIT_FORM_ACTION } = i18n;
+const { FORM_TITLE, EDIT_FORM_TITLE, EDIT_FORM_ACTION } = i18n;
export default {
name: 'ValueStreamFormContentHeader',
@@ -28,7 +28,7 @@ export default {
},
},
i18n: {
- newValueStream: s__('CreateValueStreamForm|New value stream'),
+ newValueStream: FORM_TITLE,
editValueStreamTitle: EDIT_FORM_TITLE,
saveValueStreamAction: EDIT_FORM_ACTION,
viewValueStreamAction: s__('ValueStreamAnalytics|View value stream'),
@@ -56,7 +56,7 @@ export default {
{{ formTitle }}
</h1>
<div
- class="gl-display-flex gl-w-full gl-sm-w-auto gl-sm-flex-direction-row gl-flex-direction-column gl-gap-5"
+ class="gl-display-flex gl-w-full gl-sm-w-auto gl-sm-flex-direction-row gl-flex-direction-column gl-gap-3"
>
<gl-button
v-if="isEditing"
diff --git a/ee/lib/ee/gitlab/analytics/cycle_analytics/request_params.rb b/ee/lib/ee/gitlab/analytics/cycle_analytics/request_params.rb
index 9e02de2d54c77..6f5bb63bd4471 100644
--- a/ee/lib/ee/gitlab/analytics/cycle_analytics/request_params.rb
+++ b/ee/lib/ee/gitlab/analytics/cycle_analytics/request_params.rb
@@ -41,7 +41,11 @@ def resource_paths
paths.merge({
milestones_path: url_helpers.group_milestones_path(group, format: :json),
labels_path: url_helpers.group_labels_path(group, format: :json),
- new_value_stream_path: url_helpers.new_group_analytics_cycle_analytics_value_stream_path(group)
+ new_value_stream_path: url_helpers.new_group_analytics_cycle_analytics_value_stream_path(group),
+ edit_value_stream_path: url_helpers.edit_group_analytics_cycle_analytics_value_stream_path(
+ group,
+ ':id'
+ )
})
end
diff --git a/ee/spec/features/groups/analytics/cycle_analytics/multiple_value_streams_spec.rb b/ee/spec/features/groups/analytics/cycle_analytics/multiple_value_streams_spec.rb
index 2a181877447b9..28c1f2a174c8c 100644
--- a/ee/spec/features/groups/analytics/cycle_analytics/multiple_value_streams_spec.rb
+++ b/ee/spec/features/groups/analytics/cycle_analytics/multiple_value_streams_spec.rb
@@ -38,23 +38,42 @@ def click_action_button(action, index)
find_by_testid("stage-action-#{action}-#{index}").click
end
+ def click_edit_button
+ click_link_or_button _('Edit')
+ wait_for_requests
+ end
+
+ def click_view_value_stream_button
+ click_link _('View value stream')
+ wait_for_requests
+ end
+
def reload_value_stream
- click_button 'Reload page'
+ click_button _('Reload page')
end
- def create_and_select_value_stream(name, with_aggregation = true)
+ def create_and_select_value_stream(name, with_aggregation = true, on_settings_page = true)
create_custom_value_stream(name)
- return unless with_aggregation
+ return unless with_aggregation && !on_settings_page
reload_value_stream
+
select_value_stream(name)
end
- shared_examples 'create a value stream' do |custom_value_stream_name|
+ def expect_successful_save(value_stream_name, expect_redirect)
+ if expect_redirect
+ expect(find_by_testid('dropdown-value-streams')).to have_text(value_stream_name)
+ else
+ expect(page).to have_text(_("'%{name}' Value Stream created") % { name: value_stream_name })
+ end
+ end
+
+ shared_examples 'create a value stream' do |custom_value_stream_name, on_settings_page|
before do
toggle_value_stream_dropdown
- page.find_button(_('New Value Stream')).click
+ find_by_testid('create-value-stream-option').click
end
it 'includes additional form fields' do
@@ -64,7 +83,7 @@ def create_and_select_value_stream(name, with_aggregation = true)
it 'can create a value stream' do
save_value_stream(custom_value_stream_name)
- expect(page).to have_text(_("'%{name}' Value Stream created") % { name: custom_value_stream_name })
+ expect_successful_save(custom_value_stream_name, on_settings_page)
end
it 'can create a value stream with only custom stages' do
@@ -73,7 +92,7 @@ def create_and_select_value_stream(name, with_aggregation = true)
fill_in_custom_stage_fields
save_value_stream(custom_value_stream_name)
- expect(page).to have_text(_("'%{name}' Value Stream created") % { name: custom_value_stream_name })
+ expect_successful_save(custom_value_stream_name, on_settings_page)
end
it 'can create a value stream with a custom stage and hidden defaults' do
@@ -87,7 +106,8 @@ def create_and_select_value_stream(name, with_aggregation = true)
save_value_stream(custom_value_stream_name)
- expect(page).to have_text(_("'%{name}' Value Stream created") % { name: custom_value_stream_name })
+ expect_successful_save(custom_value_stream_name, on_settings_page)
+
expect(path_nav_elem).to have_text("Cool custom stage - name")
end
@@ -108,21 +128,19 @@ def create_and_select_value_stream(name, with_aggregation = true)
fill_in_custom_stage_fields "Stage 2"
save_value_stream(custom_value_stream_name)
- expect(page).to have_text(_("'%{name}' Value Stream created") % { name: custom_value_stream_name })
+ expect_successful_save(custom_value_stream_name, on_settings_page)
end
end
- shared_examples 'update a value stream' do |custom_value_stream_name, with_aggregation|
+ shared_examples 'update a value stream' do |custom_value_stream_name, with_aggregation, on_settings_page|
before do
- select_group(group)
-
- create_and_select_value_stream(custom_value_stream_name, with_aggregation)
+ create_and_select_value_stream(custom_value_stream_name, with_aggregation, on_settings_page)
end
it 'can reorder stages' do
expect(path_nav_stage_names_without_median).to eq(["Overview", "Issue", "Plan", "Code", "Test", "Review", "Staging", "Cool custom stage - name 7"])
- page.find_button(_('Edit')).click
+ click_edit_button
# Re-arrange a few stages
page.all("[data-testid*='stage-action-move-down-']").first.click
page.all("[data-testid*='stage-action-move-up-']").last.click
@@ -130,12 +148,14 @@ def create_and_select_value_stream(name, with_aggregation = true)
click_save_value_stream_button
wait_for_requests
+ click_view_value_stream_button if on_settings_page
+
expect(path_nav_stage_names_without_median).to eq(["Overview", "Plan", "Issue", "Code", "Test", "Review", "Cool custom stage - name 7", "Staging"])
end
context 'updating' do
before do
- page.find_button(_('Edit')).click
+ click_edit_button
end
it 'includes additional form fields' do
@@ -160,9 +180,11 @@ def create_and_select_value_stream(name, with_aggregation = true)
click_save_value_stream_button
wait_for_requests
+ click_view_value_stream_button if on_settings_page
+
expect(path_nav_elem).to have_text("Cool custom stage - name")
- page.find_button(_('Edit')).click
+ click_edit_button
# Delete the custom stages, delete the last one first since the list gets reordered after a deletion
click_action_button('remove', 7)
@@ -175,6 +197,8 @@ def create_and_select_value_stream(name, with_aggregation = true)
click_save_value_stream_button
wait_for_requests
+ click_view_value_stream_button if on_settings_page
+
expect(path_nav_elem).not_to have_text("Cool custom stage - name")
end
@@ -187,17 +211,24 @@ def create_and_select_value_stream(name, with_aggregation = true)
wait_for_requests
expect(page).to have_text(_("'%{name}' Value Stream saved") % { name: custom_value_stream_name })
+
+ click_view_value_stream_button if on_settings_page
+
expect(path_nav_elem).not_to have_text("Staging")
expect(path_nav_elem).not_to have_text("Review")
expect(path_nav_elem).not_to have_text("Test")
- click_button(_('Edit'))
+ click_edit_button
+
click_action_button('restore', 0)
click_save_value_stream_button
wait_for_requests
expect(page).to have_text(_("'%{name}' Value Stream saved") % { name: custom_value_stream_name })
+
+ click_view_value_stream_button if on_settings_page
+
expect(path_nav_elem).to have_text("Test")
end
@@ -239,27 +270,27 @@ def create_and_select_value_stream(name, with_aggregation = true)
end
end
- shared_examples 'create group value streams' do |with_aggregation|
+ shared_examples 'create group value streams' do |with_aggregation, on_settings_page|
name = 'group value stream'
before do
select_group(group)
end
- it_behaves_like 'create a value stream', name
- it_behaves_like 'update a value stream', name, with_aggregation
+ it_behaves_like 'create a value stream', name, on_settings_page
+ it_behaves_like 'update a value stream', name, with_aggregation, on_settings_page
it_behaves_like 'delete a value stream', name
end
- shared_examples 'create sub group value streams' do |with_aggregation|
+ shared_examples 'create sub group value streams' do |with_aggregation, on_settings_page|
name = 'sub group value stream'
before do
select_group(sub_group)
end
- it_behaves_like 'create a value stream', name
- it_behaves_like 'update a value stream', name, with_aggregation
+ it_behaves_like 'create a value stream', name, on_settings_page
+ it_behaves_like 'update a value stream', name, with_aggregation, on_settings_page
it_behaves_like 'delete a value stream', name
end
@@ -305,7 +336,7 @@ def create_and_select_value_stream(name, with_aggregation = true)
end
it 'does not navigate to the new value stream settings page' do
- expect(page).to have_current_path(group_analytics_cycle_analytics_path(group))
+ expect(page).to have_current_path(group_analytics_cycle_analytics_path(group), ignore_query: true)
end
end
end
@@ -342,8 +373,17 @@ def create_and_select_value_stream(name, with_aggregation = true)
create(:cycle_analytics_value_stream, namespace: sub_group, name: 'default')
end
- it_behaves_like 'create group value streams', true
- it_behaves_like 'create sub group value streams', true
+ it_behaves_like 'create group value streams', true, true
+ it_behaves_like 'create sub group value streams', true, true
+
+ context 'when `vsa_standalone_settings_page` feature flag is disabled' do
+ before do
+ stub_feature_flags(vsa_standalone_settings_page: false)
+ end
+
+ it_behaves_like 'create group value streams', true
+ it_behaves_like 'create sub group value streams', true
+ end
end
end
end
diff --git a/ee/spec/features/projects/analytics/cycle_analytics_spec.rb b/ee/spec/features/projects/analytics/cycle_analytics_spec.rb
index 4fc4477f62e41..4ba2ccac63289 100644
--- a/ee/spec/features/projects/analytics/cycle_analytics_spec.rb
+++ b/ee/spec/features/projects/analytics/cycle_analytics_spec.rb
@@ -71,7 +71,7 @@
visit project_cycle_analytics_path(project)
click_button('New value stream')
fill_in('Value Stream name', with: 'foo stream')
- click_button('Create value stream')
+ click_button('New value stream')
# otherwise we get the "Data is collecting and loading"
create_value_stream_aggregation(project_namespace)
refresh
diff --git a/ee/spec/frontend/analytics/cycle_analytics/components/value_stream_select_spec.js b/ee/spec/frontend/analytics/cycle_analytics/components/value_stream_select_spec.js
index 4321457b2c032..af56493feb885 100644
--- a/ee/spec/frontend/analytics/cycle_analytics/components/value_stream_select_spec.js
+++ b/ee/spec/frontend/analytics/cycle_analytics/components/value_stream_select_spec.js
@@ -5,7 +5,13 @@ import Vuex from 'vuex';
import ValueStreamSelect from 'ee/analytics/cycle_analytics/components/value_stream_select.vue';
import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
-import { valueStreams, defaultStageConfig } from '../mock_data';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import {
+ valueStreams,
+ defaultStageConfig,
+ newValueStreamPath,
+ editValueStreamPath,
+} from '../mock_data';
Vue.use(Vuex);
@@ -19,6 +25,7 @@ describe('ValueStreamSelect', () => {
const streamName = 'Cool stream';
const selectedValueStream = valueStreams[0];
const deleteValueStreamError = 'Cannot delete default value stream';
+ const editValueStreamPathWithId = editValueStreamPath.replace(':id', selectedValueStream.id);
const fakeStore = ({ initialState = {} }) =>
new Vuex.Store({
@@ -42,6 +49,7 @@ describe('ValueStreamSelect', () => {
props = {},
data = {},
initialState = {},
+ provide = {},
mountFn = shallowMountExtended,
} = {}) =>
mountFn(ValueStreamSelect, {
@@ -55,16 +63,28 @@ describe('ValueStreamSelect', () => {
canEdit: true,
...props,
},
+ provide: {
+ newValueStreamPath,
+ editValueStreamPath,
+ glFeatures: {
+ vsaStandaloneSettingsPage: true,
+ },
+ ...provide,
+ },
mocks: {
$toast: {
show: mockToastShow,
},
},
+ directives: {
+ GlModalDirective: createMockDirective('gl-modal-directive'),
+ },
});
const findModal = (modal) => wrapper.findByTestId(`${modal}-value-stream-modal`);
const submitModal = (modal) => findModal(modal).vm.$emit('primary', mockEvent);
const findSelectValueStreamDropdown = () => wrapper.findComponent(GlCollapsibleListbox);
+ const findCreateValueStreamOption = () => wrapper.findByTestId('create-value-stream-option');
const findCreateValueStreamButton = () => wrapper.findByTestId('create-value-stream-button');
const findEditValueStreamButton = () => wrapper.findByTestId('edit-value-stream');
const findDeleteValueStreamButton = () => wrapper.findByTestId('delete-value-stream');
@@ -128,9 +148,64 @@ describe('ValueStreamSelect', () => {
expect(findDeleteValueStreamButton().exists()).toBe(true);
});
- it('renders an edit option for custom value streams', () => {
+ it('renders a create option for custom value streams', () => {
+ expect(findCreateValueStreamOption().exists()).toBe(true);
+ expect(findCreateValueStreamOption().text()).toBe('New Value Stream');
+ expect(findCreateValueStreamOption().attributes('href')).toBe(newValueStreamPath);
+ });
+
+ it('renders an edit button for custom value streams', () => {
expect(findEditValueStreamButton().exists()).toBe(true);
expect(findEditValueStreamButton().text()).toBe('Edit');
+ expect(findEditValueStreamButton().attributes('href')).toBe(editValueStreamPathWithId);
+ });
+
+ it('does not bind modal directive to edit button', () => {
+ const binding = getBinding(findEditValueStreamButton().element, 'gl-modal-directive');
+
+ expect(binding.value).toBe(false);
+ });
+
+ it('does not bind modal directive to create option', () => {
+ const binding = getBinding(findCreateValueStreamOption().element, 'gl-modal-directive');
+
+ expect(binding.value).toBe(false);
+ });
+
+ describe('vsaStandaloneSettingsPage = false', () => {
+ beforeEach(() => {
+ wrapper = createComponent({
+ mountFn: mountExtended,
+ initialState: {
+ valueStreams,
+ selectedValueStream: {
+ ...selectedValueStream,
+ isCustom: true,
+ },
+ },
+ provide: { glFeatures: { vsaStandaloneSettingsPage: false } },
+ });
+ });
+
+ it('renders create option without a link', () => {
+ expect(findCreateValueStreamOption().attributes('href')).toBe(undefined);
+ });
+
+ it('binds modal directive to create option', () => {
+ const binding = getBinding(findCreateValueStreamOption().element, 'gl-modal-directive');
+
+ expect(binding.value).toBe('value-stream-form-modal');
+ });
+
+ it('renders edit button without a link', () => {
+ expect(findEditValueStreamButton().attributes('href')).toBe(undefined);
+ });
+
+ it('binds modal directive to edit button', () => {
+ const binding = getBinding(findEditValueStreamButton().element, 'gl-modal-directive');
+
+ expect(binding.value).toBe('value-stream-form-modal');
+ });
});
});
@@ -150,11 +225,15 @@ describe('ValueStreamSelect', () => {
},
});
});
+ it('does not render a create option for custom value streams', () => {
+ expect(findCreateValueStreamOption().exists()).toBe(false);
+ });
+
it('does not render a delete option for custom value streams', () => {
expect(findDeleteValueStreamButton().exists()).toBe(false);
});
- it('does not render an edit option for custom value streams', () => {
+ it('does not render an edit button for custom value streams', () => {
expect(findEditValueStreamButton().exists()).toBe(false);
});
});
@@ -169,7 +248,7 @@ describe('ValueStreamSelect', () => {
expect(findDeleteValueStreamButton().exists()).toBe(false);
});
- it('does not render an edit option for default value streams', () => {
+ it('does not render an edit button for default value streams', () => {
expect(findEditValueStreamButton().exists()).toBe(false);
});
});
@@ -192,7 +271,7 @@ describe('ValueStreamSelect', () => {
expect(findSelectValueStreamDropdown().exists()).toBe(true);
});
- it('does not render an edit option for default value streams', () => {
+ it('does not render an edit button for default value streams', () => {
expect(findEditValueStreamButton().exists()).toBe(false);
});
});
@@ -208,15 +287,43 @@ describe('ValueStreamSelect', () => {
it('displays the create value stream button', () => {
expect(findCreateValueStreamButton().exists()).toBe(true);
+ expect(findCreateValueStreamButton().attributes('href')).toBe(newValueStreamPath);
+ });
+
+ it('does not bind modal directive to create value stream button', () => {
+ const binding = getBinding(findCreateValueStreamButton().element, 'gl-modal-directive');
+
+ expect(binding.value).toBe(false);
});
it('does not display the select value stream dropdown', () => {
expect(findSelectValueStreamDropdown().exists()).toBe(false);
});
- it('does not render an edit option for default value streams', () => {
+ it('does not render an edit button for default value streams', () => {
expect(findEditValueStreamButton().exists()).toBe(false);
});
+
+ describe('vsaStandaloneSettingsPage = false', () => {
+ beforeEach(() => {
+ wrapper = createComponent({
+ initialState: {
+ valueStreams: [],
+ },
+ provide: { glFeatures: { vsaStandaloneSettingsPage: false } },
+ });
+ });
+
+ it('renders create value stream button without a link', () => {
+ expect(findCreateValueStreamButton().attributes('href')).toBe(undefined);
+ });
+
+ it('binds modal directive to create value stream button', () => {
+ const binding = getBinding(findCreateValueStreamButton().element, 'gl-modal-directive');
+
+ expect(binding.value).toBe('value-stream-form-modal');
+ });
+ });
});
describe('Delete value stream modal', () => {
diff --git a/ee/spec/frontend/analytics/cycle_analytics/mock_data.js b/ee/spec/frontend/analytics/cycle_analytics/mock_data.js
index 74c07b30bc548..15379ada6d3b7 100644
--- a/ee/spec/frontend/analytics/cycle_analytics/mock_data.js
+++ b/ee/spec/frontend/analytics/cycle_analytics/mock_data.js
@@ -72,6 +72,7 @@ export const valueStreams = [
export const vsaPath = '/analytics/value_stream_analytics';
export const valueStreamPath = `${vsaPath}?value_stream_id=${valueStreams[0].id}`;
export const newValueStreamPath = `${vsaPath}/value_streams/new`;
+export const editValueStreamPath = `${vsaPath}/value_streams/:id/edit`;
export const groupLabels = apiGroupLabels.map((l) =>
convertObjectPropsToCamelCase({ ...l, title: l.name }),
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index d23bf27b680f9..91e119eaec104 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -15214,9 +15214,6 @@ msgstr ""
msgid "CreateValueStreamForm|Create from no template"
msgstr ""
-msgid "CreateValueStreamForm|Create value stream"
-msgstr ""
-
msgid "CreateValueStreamForm|Default stages"
msgstr ""
diff --git a/qa/qa/ee/page/value_stream_analytics.rb b/qa/qa/ee/page/value_stream_analytics.rb
index e7fc083c108df..ba0476143099c 100644
--- a/qa/qa/ee/page/value_stream_analytics.rb
+++ b/qa/qa/ee/page/value_stream_analytics.rb
@@ -146,7 +146,7 @@ def select_value_stream_type(value = 'default')
def create_value_stream
within_element('value-stream-form-modal') do
# footer buttons are generic UI components from gitlab/ui
- find_button("Create value stream").click
+ find_button("New value stream").click
end
end
diff --git a/spec/support/helpers/cycle_analytics_helpers.rb b/spec/support/helpers/cycle_analytics_helpers.rb
index 0847a57d92e12..82a8fbcb15186 100644
--- a/spec/support/helpers/cycle_analytics_helpers.rb
+++ b/spec/support/helpers/cycle_analytics_helpers.rb
@@ -63,7 +63,7 @@ def add_custom_label_stage_to_form
def save_value_stream(custom_value_stream_name)
fill_in 'create-value-stream-name', with: custom_value_stream_name
- page.find_button(s_('CreateValueStreamForm|Create value stream')).click
+ click_button(_('New value stream'))
wait_for_requests
end
@@ -73,7 +73,7 @@ def click_save_value_stream_button
def create_custom_value_stream(custom_value_stream_name)
toggle_value_stream_dropdown
- page.find_button(_('New Value Stream')).click
+ find_by_testid('create-value-stream-option').click
add_custom_stage_to_form
save_value_stream(custom_value_stream_name)
--
GitLab