Update namespace-limit-section component

What does this MR do and why?

The MR adds a few small updates to the namespace-limit-section:

• Clear validation error message on resubmit
• Add min="0" to the input field
• Use unique modal id since the component will be used 3 times within the same page
• Accept modal body as a prop

Screenshots or screen recordings

N/A the component isn't in use yet, more details below on how to test it.

How to set up and validate locally

Apply the following patch:

You can copy then in terminal run `pbpaste | git apply -`

diff --git a/ee/app/assets/javascripts/pages/admin/namespace_limits/components/namespace_limits_app.vue b/ee/app/assets/javascripts/pages/admin/namespace_limits/components/namespace_limits_app.vue
index b1a9dd4b9d9f..5625dd169044 100644
--- a/ee/app/assets/javascripts/pages/admin/namespace_limits/components/namespace_limits_app.vue
+++ b/ee/app/assets/javascripts/pages/admin/namespace_limits/components/namespace_limits_app.vue
@@ -1,30 +1,73 @@
 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
 import { GlLink } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import Api from '~/api';
+import axios from '~/lib/utils/axios_utils';
+import { UPDATE_PLAN_LIMITS_ENDPOINT } from '../constants';
 import ExcludedNamespaces from './excluded_namespaces.vue';
+import NamespaceLimitsSection from './namespace_limits_section.vue';
+
+const i18n = {
+  notificationsLimitTitle: s__('NamespaceLimits|Notifications Limit'),
+  notificationsLimitLabel: s__('NamespaceLimits|Set notifications limit'),
+  notificationsLimitDescription: s__(
+    'NamespaceLimits|Add minimum free storage amount (in GiB) that will be used to show notifications for namespace on free plan. To remove the limit, set the value to 0 and click "Update limit" button.',
+  ),
+  notificationsLimitModalBody: s__(
+    'NamespaceLimits|This will limit the amount of notifications all free namespaces receives except the excluded namespaces, the limit can be removed later.',
+  ),
+};
 
 export default {
   name: 'NamespaceLimitsApp',
   components: {
     GlLink,
     ExcludedNamespaces,
+    NamespaceLimitsSection,
+  },
+  data() {
+    return {
+      notificationsLimitError: '',
+    };
+  },
+  i18n,
+  methods: {
+    async handleNotificationsLimitChange(limit) {
+      // clear any previous errors
+      this.notificationsLimitError = null;
+
+      const endpoint = Api.buildUrl(UPDATE_PLAN_LIMITS_ENDPOINT);
+      const updateNotificationsLimitUrl = `${endpoint}?plan_name=free&notification_limit=${limit}`;
+
+      try {
+        await axios.put(updateNotificationsLimitUrl);
+
+        const toastMessage =
+          limit === '0'
+            ? s__('NamespaceLimits|Notifications limit was successfully removed')
+            : s__('NamespaceLimits|Notifications limit was successfully added');
+
+        this.$toast.show(toastMessage);
+      } catch (error) {
+        this.notificationsLimitError = error?.response?.data?.message || error.message;
+      }
+    },
   },
 };
 </script>
 
 <template>
   <div>
-    <h2>Notifications Limit</h2>
-    <div class="gl-bg-gray-10 gl-p-5 gl-border-1 gl-border-solid gl-border-blue-200">
-      <p>Placeholder for notifications limit component</p>
-      <h5>Changelog</h5>
-      <ul>
-        <li>
-          <gl-link href="https://gitlab.com/gitlab-bot" target="_blank">@admin</gl-link>
-          changed the limit to 150GB at 2023-03-28 15:49:00 UTC
-        </li>
-      </ul>
-    </div>
+    <h2>{{ $options.i18n.notificationsLimitTitle }}</h2>
+    <namespace-limits-section
+      :label="$options.i18n.notificationsLimitLabel"
+      :description="$options.i18n.notificationsLimitDescription"
+      :error-message="notificationsLimitError"
+      :modal-body="$options.i18n.notificationsLimitModalBody"
+      data-testid="notifications-limit-section"
+      @limit-change="handleNotificationsLimitChange"
+    />
     <hr />
     <h2>Enforcement Limit</h2>
     <div class="gl-bg-gray-10 gl-p-5 gl-border-1 gl-border-solid gl-border-blue-200">
diff --git a/ee/app/assets/javascripts/pages/admin/namespace_limits/constants.js b/ee/app/assets/javascripts/pages/admin/namespace_limits/constants.js
index 352964bf3b3b..5ff21b628ad6 100644
--- a/ee/app/assets/javascripts/pages/admin/namespace_limits/constants.js
+++ b/ee/app/assets/javascripts/pages/admin/namespace_limits/constants.js
@@ -1,5 +1,6 @@
 import { s__ } from '~/locale';
 
+export const UPDATE_PLAN_LIMITS_ENDPOINT = '/api/:version/application/plan_limits';
 export const LIST_EXCLUSIONS_ENDPOINT = '/api/:version/namespaces/storage/limit_exclusions';
 
 export const exclusionListFetchError = s__(

Then:

• In bin/rails console run:

    Feature.enable(:namespace_limits_admin_dashboard)
    ::Gitlab::CurrentSettings.update(check_namespace_plan: true)

• Simulate saas and restart your gdk

  $ export GITLAB_SIMULATE_SAAS=1
  $ gdk restart

• Visit /admin/namespace_limits as root

• Update the notifications limit input and observe the behavior

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #385761