From c5337034cfc44e148faf3c498fbf5451b6081e7b Mon Sep 17 00:00:00 2001
From: Miranda Fluharty <mfluharty@gitlab.com>
Date: Fri, 18 Jul 2025 21:39:22 -0600
Subject: [PATCH] Try out manual save

---
 .../security_attributes/attribute_drawer.vue  |  8 +-
 .../security_attributes/category_form.vue     | 80 +++++++++++++++----
 .../security_attributes/category_list.vue     |  4 +-
 .../configure_attributes.vue                  | 59 +++++++++++++-
 locale/gitlab.pot                             | 25 ++++--
 5 files changed, 146 insertions(+), 30 deletions(-)

diff --git a/ee/app/assets/javascripts/security_configuration/components/security_attributes/attribute_drawer.vue b/ee/app/assets/javascripts/security_configuration/components/security_attributes/attribute_drawer.vue
index c6925d30a87c9e..b1776ec98fe382 100644
--- a/ee/app/assets/javascripts/security_configuration/components/security_attributes/attribute_drawer.vue
+++ b/ee/app/assets/javascripts/security_configuration/components/security_attributes/attribute_drawer.vue
@@ -18,8 +18,8 @@ export default {
   i18n: {
     addAttributeTitle: s__('SecurityAttributes|Add security attribute'),
     editAttributeTitle: s__('SecurityAttributes|Edit security attribute'),
-    updateAttributeButton: s__('SecurityAttributes|Update attribute'),
-    createAttributeButton: s__('SecurityAttributes|Add attribute'),
+    updateAttributeButton: s__('SecurityAttributes|Apply changes'),
+    createAttributeButton: s__('SecurityAttributes|Apply changes'),
     cancelButton: s__('SecurityAttributes|Cancel'),
     deleteButton: s__('SecurityAttributes|Delete'),
   },
@@ -111,7 +111,7 @@ export default {
       <div class="flex-fill gl-align-items-center gl-flex gl-justify-between">
         <div class="gl-display-flex gl-gap-3">
           <gl-button
-            category="primary"
+            category="secondary"
             variant="confirm"
             data-testid="submit-btn"
             @click="$refs.form.onSubmit()"
@@ -125,7 +125,7 @@ export default {
 
         <gl-button
           v-if="!isAddMode"
-          category="primary"
+          category="secondary"
           variant="danger"
           data-testid="delete-btn"
           @click="showDeleteModal = true"
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..22ef450df7c67b 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
@@ -52,6 +52,16 @@ export default {
       default: () => defaultCategory,
     },
   },
+  data() {
+    return {
+      formErrors: {
+        name: null,
+        multipleSelection: null,
+        attributes: null,
+      },
+      hasUnsavedChanges: false,
+    };
+  },
   computed: {
     isNew() {
       return !this.category?.id;
@@ -68,14 +78,30 @@ export default {
     areAttributesEditable() {
       return this.category?.canEditAttributes || this.isNew;
     },
-    categoryName() {
-      return this.category?.name;
+    attributes() {
+      return this.securityAttributes.filter(
+        (attribute) => attribute.categoryId === this.category.id,
+      );
     },
-    categoryDescription() {
-      return this.category?.description;
+  },
+  methods: {
+    isFormValid() {
+      this.formErrors.name = this.category.name.trim() === '' ? __('Name is required') : null;
+      this.formErrors.multipleSelection =
+        this.category.multipleSelection === null ? __('Selection type is required') : null;
+      this.formErrors.attributes =
+        this.attributes.length === 0 ? __('At least one attribute is required') : null;
+      return (
+        !this.formErrors.name && !this.formErrors.multipleSelection && !this.formErrors.attributes
+      );
     },
-    attributes() {
-      return this.category?.id ? this.securityAttributes : [];
+    handleSave() {
+      if (!this.isFormValid()) return;
+      this.$emit('updateCategory', this.category);
+      this.hasUnsavedChanges = false;
+    },
+    handleUnsavedChange() {
+      this.hasUnsavedChanges = true;
     },
   },
   attributesTableFields: [
@@ -141,15 +167,32 @@ 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="handleUnsavedChange"
+          />
+          <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="handleUnsavedChange"
+          />
+          <span v-else>{{ category.description }}</span>
         </gl-form-group>
-        <gl-form-group>
+        <gl-form-group
+          :state="formErrors.multipleSelection === null"
+          :invalid-feedback="formErrors.multipleSelection"
+          @change="handleUnsavedChange"
+        >
           <template #label>
             {{ s__('SecurityAttributes|Selection type') }}
             <gl-icon
@@ -162,7 +205,7 @@ export default {
               name="information-o"
             />
           </template>
-          <gl-form-radio-group v-if="isNew">
+          <gl-form-radio-group v-if="isNew && !category.saved" v-model="category.multipleSelection">
             <gl-form-radio :value="false">
               {{ s__('SecurityAttributes|Single selection') }}
             </gl-form-radio>
@@ -186,6 +229,8 @@ export default {
         </gl-button>
         <gl-form-group
           :description="s__('SecurityAttributes|View the attributes available in this category')"
+          :state="formErrors.attributes === null"
+          :invalid-feedback="formErrors.attributes"
         >
           <template #label>
             {{ __('Attributes') }}
@@ -221,10 +266,15 @@ 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">
-      <gl-button category="primary" variant="confirm">
+    <div
+      v-if="!isLocked"
+      class="gl-border-t gl-sticky gl-bottom-0 gl-flex gl-w-full gl-items-center gl-gap-3 gl-bg-default gl-p-6"
+    >
+      <gl-button category="primary" variant="confirm" @click="handleSave">
         {{ s__('SecurityAttributes|Save changes') }}
       </gl-button>
+      <gl-badge v-if="hasUnsavedChanges" :variant="'danger'">{{ __('Unsaved changes') }}</gl-badge>
+      <gl-badge v-else :variant="'success'">{{ __('All changes saved') }}</gl-badge>
     </div>
   </div>
 </template>
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..4e6c2fc252bb53 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
@@ -1,4 +1,6 @@
 <script>
+import { __ } from '~/locale';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_action';
 import getSecurityAttributesQuery from '../../graphql/client/security_attributes.query.graphql';
 import CategoryList from './category_list.vue';
 import CategoryForm from './category_form.vue';
@@ -19,6 +21,14 @@ export default {
         securityAttributes: { nodes: [] },
       },
       selectedCategory: null,
+      draft: {
+        name: '',
+        description: '',
+        multipleSelection: null,
+        canEditCategory: true,
+        canEditAttributes: true,
+      },
+      draftAttributes: [],
     };
   },
   apollo: {
@@ -37,13 +47,48 @@ export default {
       },
     },
   },
+  computed: {
+    draftCategory() {
+      if (this.draft.saved) return [this.draft];
+      return [];
+    },
+    securityAttributeCategories() {
+      return [...this.draftCategory, ...this.group.securityAttributeCategories.nodes];
+    },
+    securityAttributes() {
+      return [...this.group.securityAttributes.nodes, ...this.draftAttributes];
+    },
+  },
   methods: {
-    selectCategory(category) {
+    createCategory() {
+      this.selectedCategory = {
+        ...defaultCategory,
+      };
+    },
+    async selectCategory(category) {
+      if (this.draft.name && !this.draft.saved) {
+        const confirmed = await confirmAction(
+          __(
+            'Are you sure you want to navigate away and lose any unsaved changes to this category?',
+          ),
+        );
+        if (!confirmed) return;
+        this.draft.name = '';
+        this.draft.description = '';
+        this.draft.multipleSelection = null;
+        this.draftAttributes = [];
+      }
       this.selectedCategory = {
         ...defaultCategory,
         ...category,
       };
     },
+    handleCategoryUpdate(category) {
+      this.draft = {
+        ...category,
+        saved: true,
+      };
+    },
     openDrawer(mode, item) {
       this.$refs.attributeDrawer.open(mode, item);
     },
@@ -56,6 +101,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 +117,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..f45be940c15a02 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -6681,6 +6681,9 @@ msgstr ""
 msgid "All branches"
 msgstr ""
 
+msgid "All changes saved"
+msgstr ""
+
 msgid "All child items must be confidential in order to turn on confidentiality."
 msgstr ""
 
@@ -8807,6 +8810,9 @@ msgstr ""
 msgid "Are you sure you want to merge immediately?"
 msgstr ""
 
+msgid "Are you sure you want to navigate away and lose any unsaved changes to this category?"
+msgstr ""
+
 msgid "Are you sure you want to proceed?"
 msgstr ""
 
@@ -9098,6 +9104,9 @@ msgstr ""
 msgid "At least one approval from a code owner is required to change files matching the respective CODEOWNER rules."
 msgstr ""
 
+msgid "At least one attribute is required"
+msgstr ""
+
 msgid "At least one field of %{one_of_required_fields} must be present"
 msgstr ""
 
@@ -40772,6 +40781,9 @@ msgstr ""
 msgid "Name is already taken."
 msgstr ""
 
+msgid "Name is required"
+msgstr ""
+
 msgid "Name of the Jenkins project."
 msgstr ""
 
@@ -55901,10 +55913,10 @@ msgstr ""
 msgid "SecurityApprovals|Requires approval for decreases in test coverage."
 msgstr ""
 
-msgid "SecurityAttributes|Add attribute"
+msgid "SecurityAttributes|Add security attribute"
 msgstr ""
 
-msgid "SecurityAttributes|Add security attribute"
+msgid "SecurityAttributes|Apply changes"
 msgstr ""
 
 msgid "SecurityAttributes|Cancel"
@@ -55976,9 +55988,6 @@ msgstr ""
 msgid "SecurityAttributes|Single selection"
 msgstr ""
 
-msgid "SecurityAttributes|Update attribute"
-msgstr ""
-
 msgid "SecurityAttributes|Use security attributes to categorize projects by business context, security needs, and more. Categories are shared across your groups, enabling consistent and scalable classification of assets. These attributes can help prioritize security efforts, filter dashboards, and apply consistent governance across projects."
 msgstr ""
 
@@ -58691,6 +58700,9 @@ msgstr ""
 msgid "Selecting a GitLab user will add a link to the GitLab user in the descriptions of issues and comments (e.g. \"By %{link_open}@johnsmith%{link_close}\"). It will also associate and/or assign these issues and comments with the selected user."
 msgstr ""
 
+msgid "Selection type is required"
+msgstr ""
+
 msgid "Self hosted AI Gateway URL is not set. It can be changed in the Gitlab Duo configuration."
 msgstr ""
 
@@ -66788,6 +66800,9 @@ msgstr ""
 msgid "Unresolved"
 msgstr ""
 
+msgid "Unsaved changes"
+msgstr ""
+
 msgid "Unschedule job"
 msgstr ""
 
-- 
GitLab