Do not set default stages as custom

ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/stage_field_actions.vue

 <script>
-import { GlButton, GlButtonGroup } from '@gitlab/ui';
+import { GlButton, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
 import { STAGE_SORT_DIRECTION } from './constants';
 
 export default {
@@ -8,6 +9,9 @@ export default {
     GlButton,
     GlButtonGroup,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     index: {
       type: Number,
@@ -36,6 +40,9 @@ export default {
     hideActionEvent() {
       return this.canRemove ? 'remove' : 'hide';
     },
+    hideActionTooltip() {
+      return this.canRemove ? __('Remove') : __('Hide');
+    },
     hideActionIcon() {
       return this.canRemove ? 'remove' : 'archive';
     },
@@ -50,19 +57,25 @@ export default {
   <div>
     <gl-button-group class="gl-px-2">
       <gl-button
+        v-gl-tooltip
         :data-testid="`stage-action-move-down-${index}`"
         :disabled="isLastActiveStage"
         icon="arrow-down"
+        :title="__('Move down')"
         @click="$emit('move', { index, direction: $options.STAGE_SORT_DIRECTION.DOWN })"
       />
       <gl-button
+        v-gl-tooltip
         :data-testid="`stage-action-move-up-${index}`"
         :disabled="isFirstActiveStage"
         icon="arrow-up"
+        :title="__('Move up')"
         @click="$emit('move', { index, direction: $options.STAGE_SORT_DIRECTION.UP })"
       />
     </gl-button-group>
     <gl-button
+      v-gl-tooltip
+      :title="hideActionTooltip"
       :data-testid="hideActionTestId"
       :icon="hideActionIcon"
       @click="$emit(hideActionEvent, index)"

ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/utils.js

@@ -151,9 +151,10 @@ export const formatStageDataForSubmission = (stages, isEditing = false) => {
       // The new stage is still `custom` but wont have an id until the form submits and its persisted to the DB
       editProps = id ? { id, custom: true } : { custom: true };
     }
+    // While we work on https://gitlab.com/gitlab-org/gitlab/-/issues/321959 we should not allow editing default
     return custom
       ? convertObjectPropsToSnakeCase({ ...rest, ...editProps, name })
-      : convertObjectPropsToSnakeCase({ ...editProps, name });
+      : convertObjectPropsToSnakeCase({ ...editProps, name, custom: false });
   });
 };
 

ee/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_select.vue

@@ -7,6 +7,7 @@ import {
   GlDropdownDivider,
   GlModal,
   GlModalDirective,
+  GlSprintf,
 } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import { sprintf, __, s__ } from '~/locale';
@@ -16,7 +17,7 @@ import ValueStreamForm from './value_stream_form.vue';
 const i18n = {
   DELETE_NAME: s__('DeleteValueStream|Delete %{name}'),
   DELETE_CONFIRMATION: s__(
-    'DeleteValueStream|Are you sure you want to delete "%{name}" Value Stream?',
+    'DeleteValueStream|Are you sure you want to delete the "%{name}" Value Stream?',
   ),
   DELETED: s__("DeleteValueStream|'%{name}' Value Stream deleted"),
   DELETE: __('Delete'),
@@ -33,6 +34,7 @@ export default {
     GlDropdownItem,
     GlDropdownDivider,
     GlModal,
+    GlSprintf,
     ValueStreamForm,
   },
   directives: {
@@ -77,9 +79,6 @@ export default {
     isCustomValueStream() {
       return this.selectedValueStream?.isCustom || false;
     },
-    deleteSelectedText() {
-      return sprintf(this.$options.i18n.DELETE_NAME, { name: this.selectedValueStreamName });
-    },
     deleteConfirmationText() {
       return sprintf(this.$options.i18n.DELETE_CONFIRMATION, {
         name: this.selectedValueStreamName,
@@ -160,8 +159,11 @@ export default {
         v-gl-modal-directive="'delete-value-stream-modal'"
         variant="danger"
         data-testid="delete-value-stream"
-        >{{ deleteSelectedText }}</gl-dropdown-item
       >
+        <gl-sprintf :message="$options.i18n.DELETE_NAME">
+          <template #name>{{ selectedValueStreamName }}</template>
+        </gl-sprintf>
+      </gl-dropdown-item>
     </gl-dropdown>
     <gl-button
       v-else
@@ -193,7 +195,11 @@ export default {
       <gl-alert v-if="deleteValueStreamError" variant="danger">{{
         deleteValueStreamError
       }}</gl-alert>
-      <p>{{ deleteConfirmationText }}</p>
+      <p>
+        <gl-sprintf :message="$options.i18n.DELETE_CONFIRMATION">
+          <template #name>{{ selectedValueStreamName }}</template>
+        </gl-sprintf>
+      </p>
     </gl-modal>
   </div>
 </template>

ee/spec/frontend/analytics/cycle_analytics/components/create_value_stream_form/utils_spec.js

@@ -189,6 +189,10 @@ describe('formatStageDataForSubmission', () => {
     it('will convert all properties to snake case', () => {
       expect(Object.keys(res)).toEqual(['custom', 'name']);
     });
+
+    it('will set custom to `false`', () => {
+      expect(res.custom).toBe(false);
+    });
   });
 
   describe('with a custom stage', () => {
@@ -221,12 +225,12 @@ describe('formatStageDataForSubmission', () => {
 
   describe('isEditing = true ', () => {
     it('will include the `id` if it has a value', () => {
-      [res] = formatStageDataForSubmission([{ ...fakeStage, id: 10 }], true);
+      [res] = formatStageDataForSubmission([{ ...fakeStage, id: 10, custom: true }], true);
       expect(Object.keys(res).includes('id')).toBe(true);
     });
 
     it('will set custom to `true`', () => {
-      [res] = formatStageDataForSubmission([fakeStage], true);
+      [res] = formatStageDataForSubmission([{ ...fakeStage, custom: true }], true);
       expect(res.custom).toBe(true);
     });
   });

ee/spec/frontend/analytics/cycle_analytics/components/value_stream_select_spec.js

@@ -105,7 +105,6 @@ describe('ValueStreamSelect', () => {
 
       it('renders a delete option for custom value streams', () => {
         expect(findDeleteValueStreamButton().exists()).toBe(true);
-        expect(findDeleteValueStreamButton().text()).toBe(`Delete ${selectedValueStream.name}`);
       });
 
       it('renders an edit option for custom value streams', () => {

locale/gitlab.pot

@@ -9785,7 +9785,7 @@ msgstr ""
 msgid "DeleteValueStream|'%{name}' Value Stream deleted"
 msgstr ""
 
-msgid "DeleteValueStream|Are you sure you want to delete \"%{name}\" Value Stream?"
+msgid "DeleteValueStream|Are you sure you want to delete the \"%{name}\" Value Stream?"
 msgstr ""
 
 msgid "DeleteValueStream|Delete %{name}"
@@ -14922,6 +14922,9 @@ msgstr ""
 msgid "Hi %{username}!"
 msgstr ""
 
+msgid "Hide"
+msgstr ""
+
 msgid "Hide archived projects"
 msgstr ""
 
@@ -19571,6 +19574,9 @@ msgstr ""
 msgid "Move"
 msgstr ""
 
+msgid "Move down"
+msgstr ""
+
 msgid "Move issue"
 msgstr ""
 
@@ -19589,6 +19595,9 @@ msgstr ""
 msgid "Move this issue to another project."
 msgstr ""
 
+msgid "Move up"
+msgstr ""
+
 msgid "MoveIssue|Cannot move issue due to insufficient permissions!"
 msgstr ""