From 0a79944638a980333fce72b3f1c88b48728fb340 Mon Sep 17 00:00:00 2001
From: Deepika Guliani <dguliani@gitlab.com>
Date: Wed, 17 Dec 2025 14:29:29 +1100
Subject: [PATCH] Add new work item type create edit form

Changelog: added
---
 .../create_edit_work_item_type_form.vue       | 228 ++++++++++++++++++
 .../components/work_item_types_list.vue       |  10 +-
 2 files changed, 237 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/work_items/components/create_edit_work_item_type_form.vue

diff --git a/app/assets/javascripts/work_items/components/create_edit_work_item_type_form.vue b/app/assets/javascripts/work_items/components/create_edit_work_item_type_form.vue
new file mode 100644
index 00000000000000..c66726680694f0
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/create_edit_work_item_type_form.vue
@@ -0,0 +1,228 @@
+<script>
+import { GlModal, GlFormGroup, GlFormInput, GlButton, GlIcon } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+const ICON_OPTIONS = [
+  'work-item-enhancement',
+  'work-item-epic',
+  'work-item-feature-flag',
+  'work-item-feature',
+  'work-item-incident',
+  'work-item-issue',
+  'work-item-keyresult',
+  'work-item-maintenance',
+  'work-item-objective',
+  'work-item-requirement',
+  'work-item-task',
+  'work-item-test-case',
+  'work-item-ticket',
+  'bug',
+];
+
+export default {
+  name: 'CreateEditWorkItemTypeForm',
+  components: {
+    GlModal,
+    GlFormGroup,
+    GlFormInput,
+    GlButton,
+    GlIcon,
+  },
+  props: {
+    isVisible: {
+      type: Boolean,
+      required: true,
+    },
+    isEditMode: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    workItemType: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    fullPath: {
+      type: String,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  emits: ['save', 'cancel', 'close'],
+  data() {
+    return {
+      form: {
+        name: '',
+        pluralization: '',
+        icon: ICON_OPTIONS[0],
+        enableForAllGroups: false,
+      },
+      errors: {},
+      isSubmitting: false,
+      ICON_OPTIONS,
+    };
+  },
+  computed: {
+    modalTitle() {
+      return this.isEditMode ? s__('WorkItem|Edit type name and icon') : s__('WorkItem|New type');
+    },
+    submitButtonText() {
+      return this.isEditMode ? s__('WorkItem|Update') : s__('WorkItem|Save');
+    },
+    isFormValid() {
+      return this.form.name.trim().length > 0 && this.form.pluralization.trim().length > 0;
+    },
+  },
+  methods: {
+    initializeForm() {
+      if (this.isEditMode && this.workItemType) {
+        this.form = {
+          name: this.workItemType.name,
+          pluralization: this.workItemType.pluralization,
+          icon: this.workItemType.icon || ICON_OPTIONS[0],
+          enableForAllGroups: false,
+        };
+      } else {
+        this.form = {
+          name: '',
+          pluralization: '',
+          icon: ICON_OPTIONS[0],
+          enableForAllGroups: false,
+        };
+      }
+      this.errors = {};
+    },
+    validateForm() {
+      const newErrors = {};
+
+      if (!this.form.name.trim()) {
+        newErrors.name = s__('WorkItem|Name is required');
+      }
+
+      if (!this.form.pluralization.trim()) {
+        newErrors.pluralization = s__('WorkItem|Pluralization is required');
+      }
+
+      this.errors = newErrors;
+      return Object.keys(newErrors).length === 0;
+    },
+    async handleSubmit() {
+      if (!this.validateForm()) {
+        return;
+      }
+
+      this.$emit('close');
+    },
+    handleCancel() {
+      this.initializeForm();
+      this.$emit('close');
+    },
+    handleClose() {
+      this.initializeForm();
+      this.$emit('close');
+    },
+    onVisibilityChange(visible) {
+      if (visible) {
+        this.initializeForm();
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    :visible="isVisible"
+    :title="modalTitle"
+    size="sm"
+    modal-id="create-edit-work-item-type-modal"
+    @hidden="handleClose"
+    @change="onVisibilityChange"
+  >
+    <form @submit.prevent="handleSubmit">
+      <div v-if="errors.form" class="gl-mb-4" role="alert">
+        <div class="gl-alert gl-alert-danger">
+          <p class="gl-alert-message">{{ errors.form }}</p>
+        </div>
+      </div>
+
+      <div class="gl-flex gl-gap-3">
+        <gl-form-group
+          :label="s__('WorkItem|Name')"
+          label-for="work-item-type-name"
+          :state="errors.name ? false : null"
+          :invalid-feedback="errors.name"
+          class="gl-mb-4 gl-flex-1"
+        >
+          <gl-form-input
+            id="work-item-type-name"
+            v-model="form.name"
+            :placeholder="s__('WorkItem|Bug')"
+            :state="errors.name ? false : null"
+            data-testid="work-item-type-name-input"
+            autocomplete="off"
+          />
+        </gl-form-group>
+
+        <gl-form-group
+          :label="s__('WorkItem|Pluralization')"
+          label-for="work-item-type-pluralization"
+          :state="errors.pluralization ? false : null"
+          :invalid-feedback="errors.pluralization"
+          class="gl-mb-4 gl-flex-1"
+        >
+          <gl-form-input
+            id="work-item-type-pluralization"
+            v-model="form.pluralization"
+            :placeholder="s__('WorkItem|Bugs')"
+            :state="errors.pluralization ? false : null"
+            data-testid="work-item-type-pluralization-input"
+            autocomplete="off"
+          />
+        </gl-form-group>
+      </div>
+
+      <gl-form-group :label="s__('WorkItem|Icon')" label-for="work-item-type-icon" class="gl-mb-4">
+        <div
+          id="work-item-type-icon"
+          class="gl-flex gl-flex-wrap gl-gap-3"
+          role="group"
+          :aria-label="s__('WorkItem|Icon selection')"
+        >
+          <div
+            v-for="iconOption in ICON_OPTIONS"
+            :key="iconOption"
+            class="gl-flex gl-cursor-pointer gl-items-center gl-rounded-lg gl-p-3 gl-transition-colors"
+            :class="{
+              'gl-bg-blue-500': form.icon === iconOption,
+            }"
+            :aria-pressed="form.icon === iconOption"
+            :data-testid="`icon-option-${iconOption}`"
+            @click="form.icon = iconOption"
+          >
+            <gl-icon :name="iconOption" :size="16" />
+          </div>
+        </div>
+      </gl-form-group>
+    </form>
+
+    <template #modal-footer>
+      <gl-button data-testid="work-item-type-cancel-button" @click="handleCancel">
+        {{ s__('WorkItem|Cancel') }}
+      </gl-button>
+      <gl-button
+        variant="confirm"
+        :loading="isSubmitting || isLoading"
+        data-testid="work-item-type-submit-button"
+        @click="handleSubmit"
+      >
+        {{ submitButtonText }}
+      </gl-button>
+    </template>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/work_items/components/work_item_types_list.vue b/app/assets/javascripts/work_items/components/work_item_types_list.vue
index 6397ce351cf8f1..74f3c725d62535 100644
--- a/app/assets/javascripts/work_items/components/work_item_types_list.vue
+++ b/app/assets/javascripts/work_items/components/work_item_types_list.vue
@@ -3,6 +3,7 @@ import { GlDisclosureDropdown, GlButton, GlLoadingIcon, GlAlert } from '@gitlab/
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import CrudComponent from '~/vue_shared/components/crud_component.vue';
 import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue';
+import CreateEditWorkItemTypeForm from '~/work_items/components/create_edit_work_item_type_form.vue';
 import namespaceWorkItemTypesQuery from '~/work_items/graphql/namespace_work_item_types.query.graphql';
 import { s__, __ } from '~/locale';
 
@@ -15,6 +16,7 @@ export default {
     WorkItemTypeIcon,
     GlLoadingIcon,
     GlAlert,
+    CreateEditWorkItemTypeForm,
   },
   props: {
     fullPath: {
@@ -26,6 +28,7 @@ export default {
     return {
       workItemTypes: [],
       errorMessage: '',
+      isNewWorkItemTypeFormVisible: false,
     };
   },
   apollo: {
@@ -80,9 +83,14 @@ export default {
     <gl-alert v-if="errorMessage" variant="danger" class="gl-mb-5" @dismiss="errorMessage = ''">
       {{ errorMessage }}
     </gl-alert>
+    <create-edit-work-item-type-form
+      :is-visible="isNewWorkItemTypeFormVisible"
+      :full-path="fullPath"
+      @close="isNewWorkItemTypeFormVisible = false"
+    />
     <crud-component :title="s__('WorkItem|Types')" :count="count">
       <template #actions>
-        <gl-button size="small">
+        <gl-button size="small" @click="isNewWorkItemTypeFormVisible = true">
           {{ s__('WorkItem|New type') }}
         </gl-button>
       </template>
-- 
GitLab