Update namespace limit sections validate input

What does this MR do and why?

It updates NamespaceLimitSection component (added in !116972 (merged)) allowing it to validate the input making sure it's positive number and shows an alert if there's a validation error.

The component is not in use yet, but will be used in !121818 (closed), so the screenshots and instructions will depend on a provided patch.

Screenshots or screen recordings

Before	After

How to set up and validate locally

Apply the following patch

e.g. copy then 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..571d1e55955c 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,13 +1,52 @@
 <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 ExcludedNamespaces from './excluded_namespaces.vue';
+import NamespaceLimitsSection from './namespace_limits_section.vue';
+
+const i18n = {
+  notificatoinsLimitLabel: s__('NamespaceLimits|Set notifications limit'),
+  notificatoinsLimitDescription: 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, clear the value and click "Update limit" button.',
+  ),
+};
+
+// @TODO extract this to ./constants.js
+const UPDATE_NOTIFICATIONS_LIMIT_ENDPOINT =
+  '/api/:version/application/plan_limits?plan_name=free&notification_limit=:limit';
 
 export default {
   name: 'NamespaceLimitsApp',
   components: {
     GlLink,
     ExcludedNamespaces,
+    NamespaceLimitsSection,
+  },
+  data() {
+    return {
+      notificationsLimitError: '',
+    };
+  },
+  i18n,
+  methods: {
+    async handleNotificationsLimitChange(limit) {
+      const endpoint = Api.buildUrl(UPDATE_NOTIFICATIONS_LIMIT_ENDPOINT).replace(':limit', limit);
+
+      try {
+        await axios.put(endpoint);
+
+        const toastMessage = limit
+          ? s__('NamespaceLimits|Notifications limit was successfully added')
+          : s__('NamespaceLimits|Notifications limit was successfully removed');
+
+        this.$toast.show(toastMessage);
+      } catch (error) {
+        this.notificationsLimitError = error;
+      }
+    },
   },
 };
 </script>
@@ -15,16 +54,12 @@ export default {
 <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>
+    <namespace-limits-section
+      :label="$options.i18n.notificatoinsLimitLabel"
+      :description="$options.i18n.notificatoinsLimitDescription"
+      :error-message="notificationsLimitError"
+      @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">

• 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

• From Vue dev tools, choose NamespaceLimitsApp then edit the notificationsLimitError prop

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.