Prometheus integration name should not have a modifiable input field

app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue

@@ -32,14 +32,7 @@ import {
 // feature rollout plan - https://gitlab.com/gitlab-org/gitlab/-/issues/262707#note_442529171
 import mockedCustomMapping from './mocks/parsedMapping.json';
 
-export default {
-  placeholders: {
-    prometheus: targetPrometheusUrlPlaceholder,
-    opsgenie: targetOpsgenieUrlPlaceholder,
-  },
-  JSON_VALIDATE_DELAY,
-  typeSet,
-  i18n: {
+export const i18n = {
   integrationFormSteps: {
     step1: {
       label: s__('AlertSettings|1. Select integration type'),
@@ -50,6 +43,7 @@ export default {
     step2: {
       label: s__('AlertSettings|2. Name integration'),
       placeholder: s__('AlertSettings|Enter integration name'),
+      prometheus: s__('AlertSettings|Prometheus'),
     },
     step3: {
       label: s__('AlertSettings|3. Set up webhook'),
@@ -105,7 +99,16 @@ export default {
       ),
     },
   },
+};
+
+export default {
+  placeholders: {
+    prometheus: targetPrometheusUrlPlaceholder,
+    opsgenie: targetOpsgenieUrlPlaceholder,
   },
+  JSON_VALIDATE_DELAY,
+  typeSet,
+  i18n,
   components: {
     ClipboardButton,
     GlButton,
@@ -265,6 +268,9 @@ export default {
         this.integrationTestPayload.json === ''
       );
     },
+    isSelectDisabled() {
+      return this.currentIntegration !== null || !this.canAddIntegration;
+    },
   },
   watch: {
     currentIntegration(val) {
@@ -421,7 +427,8 @@ export default {
     >
       <gl-form-select
         v-model="selectedIntegration"
-        :disabled="currentIntegration !== null || !canAddIntegration"
+        :disabled="isSelectDisabled"
+        :class="{ 'gl-bg-gray-100!': isSelectDisabled }"
         :options="options"
         @change="integrationTypeSelect"
       />
@@ -472,8 +479,13 @@ export default {
         >
           <gl-form-input
             v-model="integrationForm.name"
+            :disabled="isPrometheus"
             type="text"
-            :placeholder="$options.i18n.integrationFormSteps.step2.placeholder"
+            :placeholder="
+              isPrometheus
+                ? $options.i18n.integrationFormSteps.step2.prometheus
+                : $options.i18n.integrationFormSteps.step2.placeholder
+            "
           />
         </gl-form-group>
         <gl-form-group

changelogs/unreleased/287724-disable-name-prometheus.yml

+---
+title: Prometheus integration name should not have a modifiable input field
+merge_request: 48437
+author:
+type: fixed

locale/gitlab.pot

@@ -2619,6 +2619,9 @@ msgstr ""
 msgid "AlertSettings|Proceed with editing"
 msgstr ""
 
+msgid "AlertSettings|Prometheus"
+msgstr ""
+
 msgid "AlertSettings|Prometheus API base URL"
 msgstr ""
 

spec/frontend/alerts_settings/alerts_settings_form_spec.js

@@ -93,16 +93,28 @@ describe('AlertsSettingsFormNew', () => {
       ).toBe(true);
     });
 
-    it('disabled the dropdown and shows help text when multi integrations are not supported', async () => {
+    it('disables the dropdown and shows help text when multi integrations are not supported', async () => {
       createComponent({ props: { canAddIntegration: false } });
       expect(findSelect().attributes('disabled')).toBe('disabled');
       expect(findMultiSupportText().exists()).toBe(true);
     });
+
+    it('disabled the name input when the selected value is prometheus', async () => {
+      createComponent();
+      const options = findSelect().findAll('option');
+      await options.at(2).setSelected();
+
+      expect(
+        findFormFields()
+          .at(0)
+          .attributes('disabled'),
+      ).toBe('disabled');
+    });
   });
 
   describe('submitting integration form', () => {
     it('allows for create-new-integration with the correct form values for HTTP', async () => {
-      createComponent({});
+      createComponent();
 
       const options = findSelect().findAll('option');
       await options.at(1).setSelected();
@@ -128,7 +140,7 @@ describe('AlertsSettingsFormNew', () => {
     });
 
     it('allows for create-new-integration with the correct form values for PROMETHEUS', async () => {
-      createComponent({});
+      createComponent();
 
       const options = findSelect().findAll('option');
       await options.at(2).setSelected();