From 1fea3d8fea933d695c168801089300a35b16cd4c Mon Sep 17 00:00:00 2001
From: Miranda Fluharty <mfluharty@gitlab.com>
Date: Fri, 18 Jul 2025 19:50:33 -0600
Subject: [PATCH] Try out auto-save

---
 .../security_attributes/category_form.vue     | 90 +++++++++++++++----
 .../security_attributes/category_list.vue     |  4 +-
 .../configure_attributes.vue                  | 40 ++++++++-
 locale/gitlab.pot                             | 11 ++-
 4 files changed, 121 insertions(+), 24 deletions(-)

diff --git a/ee/app/assets/javascripts/security_configuration/components/security_attributes/category_form.vue b/ee/app/assets/javascripts/security_configuration/components/security_attributes/category_form.vue
index 332ba105ccf27b..b89d83b795564b 100644
--- a/ee/app/assets/javascripts/security_configuration/components/security_attributes/category_form.vue
+++ b/ee/app/assets/javascripts/security_configuration/components/security_attributes/category_form.vue
@@ -1,4 +1,5 @@
 <script>
+import { debounce } from 'lodash';
 import {
   GlBadge,
   GlForm,
@@ -16,7 +17,8 @@ import {
   GlDisclosureDropdownItem,
   GlLink,
 } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_action';
 import CrudComponent from '~/vue_shared/components/crud_component.vue';
 import { defaultCategory } from './constants';
 
@@ -52,6 +54,14 @@ export default {
       default: () => defaultCategory,
     },
   },
+  data() {
+    return {
+      formErrors: {
+        name: null,
+      },
+      shouldConfirmSelectionType: false,
+    };
+  },
   computed: {
     isNew() {
       return !this.category?.id;
@@ -68,14 +78,40 @@ export default {
     areAttributesEditable() {
       return this.category?.canEditAttributes || this.isNew;
     },
-    categoryName() {
-      return this.category?.name;
-    },
-    categoryDescription() {
-      return this.category?.description;
-    },
     attributes() {
-      return this.category?.id ? this.securityAttributes : [];
+      return this.securityAttributes.filter(
+        (attribute) => attribute.categoryId === this.category.id,
+      );
+    },
+  },
+  methods: {
+    debouncedHandleChange: debounce(async function handleChange() {
+      if (this.category.name?.trim() === '') {
+        this.formErrors.name = __('Name is required.');
+        return;
+      }
+      if (this.shouldConfirmSelectionType) {
+        const confirmed = await confirmAction(
+          sprintf(
+            __(
+              'Are you sure you want to set %{categoryName} to multiple selection? This cannot be undone.',
+            ),
+            { categoryName: this.category.name },
+          ),
+        );
+        if (!confirmed) {
+          // eslint-disable-next-line vue/no-mutating-props
+          this.category.multipleSelection = false;
+          return;
+        }
+      }
+      this.formErrors.name = null;
+      this.$emit('updateCategory', this.category);
+      this.$toast.show(__('Category saved'));
+    }, 1000),
+    handleSelectionTypeChange() {
+      this.shouldConfirmSelectionType = true;
+      this.debouncedHandleChange();
     },
   },
   attributesTableFields: [
@@ -141,13 +177,26 @@ export default {
       <h3 class="gl-heading-3">{{ s__('SecurityAttributes|Category details') }}</h3>
       <p>{{ s__('SecurityAttributes|View category settings and associated attributes.') }}</p>
       <gl-form>
-        <gl-form-group :label="__('Name')">
-          <gl-form-input v-if="isCategoryEditable" :value="categoryName" />
-          <span v-else>{{ categoryName }}</span>
+        <gl-form-group
+          :label="__('Name')"
+          :state="formErrors.name === null"
+          :invalid-feedback="formErrors.name"
+        >
+          <gl-form-input
+            v-if="isCategoryEditable"
+            v-model="category.name"
+            :state="formErrors.name === null"
+            @input="debouncedHandleChange"
+          />
+          <span v-else>{{ category.name }}</span>
         </gl-form-group>
         <gl-form-group :label="__('Description')">
-          <gl-form-textarea v-if="isCategoryEditable" :value="categoryDescription" />
-          <span v-else>{{ categoryDescription }}</span>
+          <gl-form-textarea
+            v-if="isCategoryEditable"
+            v-model="category.description"
+            @input="debouncedHandleChange"
+          />
+          <span v-else>{{ category.description }}</span>
         </gl-form-group>
         <gl-form-group>
           <template #label>
@@ -155,18 +204,22 @@ export default {
             <gl-icon
               v-gl-tooltip="
                 s__(
-                  'SecurityAttributes|You cannot change the selection type after the category is created. To use a different selection type, create a new category.',
+                  'SecurityAttributes|You cannot change the selection type once it has been set to multiple selection. To use single selection, create a new category.',
                 )
               "
               variant="info"
               name="information-o"
             />
           </template>
-          <gl-form-radio-group v-if="isNew">
-            <gl-form-radio :value="false">
+          <gl-form-radio-group
+            v-if="isNew"
+            v-model="category.multipleSelection"
+            @change="handleSelectionTypeChange"
+          >
+            <gl-form-radio :value="false" :disabled="category.multipleSelection">
               {{ s__('SecurityAttributes|Single selection') }}
             </gl-form-radio>
-            <gl-form-radio :value="true">
+            <gl-form-radio :value="true" :disabled="category.multipleSelection">
               {{ s__('SecurityAttributes|Multiple selection') }}
             </gl-form-radio>
           </gl-form-radio-group>
@@ -176,6 +229,7 @@ export default {
         </gl-form-group>
         <gl-button
           v-if="areAttributesEditable"
+          :disabled="!category.id && !category.name"
           category="secondary"
           variant="confirm"
           size="small"
@@ -221,7 +275,7 @@ export default {
         </crud-component>
       </gl-form>
     </div>
-    <div v-if="!isLocked" class="gl-border-t gl-sticky gl-bottom-0 gl-w-full gl-bg-default gl-p-6">
+    <div v-if="false" class="gl-border-t gl-sticky gl-bottom-0 gl-w-full gl-bg-default gl-p-6">
       <gl-button category="primary" variant="confirm">
         {{ s__('SecurityAttributes|Save changes') }}
       </gl-button>
diff --git a/ee/app/assets/javascripts/security_configuration/components/security_attributes/category_list.vue b/ee/app/assets/javascripts/security_configuration/components/security_attributes/category_list.vue
index d4fe985cf9b230..473ba39a037563 100644
--- a/ee/app/assets/javascripts/security_configuration/components/security_attributes/category_list.vue
+++ b/ee/app/assets/javascripts/security_configuration/components/security_attributes/category_list.vue
@@ -27,7 +27,7 @@ export default {
         category="primary"
         variant="confirm"
         size="small"
-        @click="$emit('selectCategory', {})"
+        @click="$emit('createCategory')"
         >{{ s__('SecurityAttributes|Create category') }}</gl-button
       >
     </div>
@@ -47,7 +47,7 @@ export default {
           {{ category.description }}
         </div>
       </div>
-      <gl-badge>{{ category.attributeCount }}</gl-badge>
+      <gl-badge v-if="category.attributeCount">{{ category.attributeCount }}</gl-badge>
     </div>
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/security_configuration/components/security_attributes/configure_attributes.vue b/ee/app/assets/javascripts/security_configuration/components/security_attributes/configure_attributes.vue
index 787c842068c9b7..489cd5b4d18ff8 100644
--- a/ee/app/assets/javascripts/security_configuration/components/security_attributes/configure_attributes.vue
+++ b/ee/app/assets/javascripts/security_configuration/components/security_attributes/configure_attributes.vue
@@ -19,6 +19,14 @@ export default {
         securityAttributes: { nodes: [] },
       },
       selectedCategory: null,
+      draft: {
+        name: '',
+        description: '',
+        multipleSelection: false,
+        canEditCategory: true,
+        canEditAttributes: true,
+      },
+      draftAttributes: [],
     };
   },
   apollo: {
@@ -37,13 +45,33 @@ export default {
       },
     },
   },
+  computed: {
+    draftCategory() {
+      if (this.draft.name) return [this.draft];
+      return [];
+    },
+    securityAttributeCategories() {
+      return [...this.draftCategory, ...this.group.securityAttributeCategories.nodes];
+    },
+    securityAttributes() {
+      return [...this.group.securityAttributes.nodes, ...this.draftAttributes];
+    },
+  },
   methods: {
+    createCategory() {
+      this.selectedCategory = {
+        ...defaultCategory,
+      };
+    },
     selectCategory(category) {
       this.selectedCategory = {
         ...defaultCategory,
         ...category,
       };
     },
+    handleCategoryUpdate(category) {
+      this.draft = category;
+    },
     openDrawer(mode, item) {
       this.$refs.attributeDrawer.open(mode, item);
     },
@@ -56,6 +84,10 @@ export default {
     onSubmit(item) {
       // eslint-disable-next-line no-console
       console.log(item);
+      this.draftAttributes.push({
+        ...item,
+        categoryId: this.selectedCategory.id,
+      });
     },
     onDelete(item) {
       // eslint-disable-next-line no-console
@@ -68,15 +100,17 @@ export default {
   <div class="gl-border-t gl-flex">
     <div class="gl-border-r gl-w-1/4 gl-p-5">
       <category-list
-        :security-attribute-categories="group.securityAttributeCategories.nodes"
+        :security-attribute-categories="securityAttributeCategories"
         :selected-category="selectedCategory"
         @selectCategory="selectCategory"
+        @createCategory="createCategory"
       />
     </div>
     <div class="gl-w-3/4">
       <category-form
-        :security-attributes="group.securityAttributes.nodes"
-        :category="selectedCategory"
+        :security-attributes="securityAttributes"
+        :category="selectedCategory?.id ? selectedCategory : draft"
+        @updateCategory="handleCategoryUpdate"
         @addAttribute="addAttribute"
         @editAttribute="editAttribute"
       />
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index c7967b153a2b2e..2ace873d1c8306 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8870,6 +8870,9 @@ msgstr ""
 msgid "Are you sure you want to revoke this project access token? This action cannot be undone."
 msgstr ""
 
+msgid "Are you sure you want to set %{categoryName} to multiple selection? This cannot be undone."
+msgstr ""
+
 msgid "Are you sure you want to stop this environment?"
 msgstr ""
 
@@ -12593,6 +12596,9 @@ msgstr ""
 msgid "Category"
 msgstr ""
 
+msgid "Category saved"
+msgstr ""
+
 msgid "Cause identified"
 msgstr ""
 
@@ -40772,6 +40778,9 @@ msgstr ""
 msgid "Name is already taken."
 msgstr ""
 
+msgid "Name is required."
+msgstr ""
+
 msgid "Name of the Jenkins project."
 msgstr ""
 
@@ -55988,7 +55997,7 @@ msgstr ""
 msgid "SecurityAttributes|View the attributes available in this category"
 msgstr ""
 
-msgid "SecurityAttributes|You cannot change the selection type after the category is created. To use a different selection type, create a new category."
+msgid "SecurityAttributes|You cannot change the selection type once it has been set to multiple selection. To use single selection, create a new category."
 msgstr ""
 
 msgid "SecurityAttributes|You cannot delete or edit this category. You cannot modify the attributes."
-- 
GitLab