Add plan_limits_section component

What does this MR do and why?

It adds a new component plan_limits_section that will be used in upcoming merge requests in plan_limits_app.

The component allows submitting empty input, which should remove the limit on the backend. However, this iteration doesn't include the changelog for removing the limit since it's not clear yet in what format we can get this information from the backend.

I moved the button to be below the input, since this is how forms looks normally and to add more friction so admins don't click immediately after entering the number, if we don't find it useful we can iterate over it later.

The MR doesn't include a changelog because the changes are not accessible (and when used, it will be behind a feature flag).

Screenshots or screen recordings

screenshot	screen recording
	Screen_Recording_2023-04-18_at_20.45.25

How to set up and validate locally

The component isn't used yet, but here's how we can temporarily test it:

• enable the new feature flag:

    Feature.enable(:namespace_limits_admin_dashboard)

• Visit /admin/namespace_limits

• Apply the following patch (e.g. copy then run pbpaste | git apply -)

Patch inside

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 a4c0c9d98817..ac8178ce52e2 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,18 +1,50 @@
 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
-import { GlLink } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import NamespaceLimitsSection from './namespace_limits_section.vue';
 
+const sampleChangelogEntries = [
+  {
+    user_url: 'https://gitlab.com/gitlab-bot',
+    username: 'admin',
+    limit: '150 GiB',
+    date: '2023-04-05 19:14:00',
+  },
+  {
+    user_url: 'https://gitlab.com/gitlab-bot',
+    username: 'admin',
+    limit: '10 GiB',
+    date: '2023-04-06 19:14:00',
+  },
+];
 export default {
   name: 'NamespaceLimitsApp',
   components: {
-    GlLink,
+    NamespaceLimitsSection,
+  },
+  i18n: {
+    notificationsLimitLabel: s__('NamespaceLimits|Set notifications limit for notifications'),
+    notificationsLimitDescription: s__(
+      'NamespaceLimits|Add minimum free storage amount (in GiB) that will be used to show notifications for namespaces on free plan. To remove the limit, clear the value then click the "Update limit" button.',
+    ),
+  },
+  methods: {
+    onLimitChange(limit = '') {},
   },
+  sampleChangelogEntries,
 };
 </script>
 
 <template>
   <div>
-    <h2>Notifications Limit</h2>
+    <h4>Notifications Limit</h4>
+    <namespace-limits-section
+      :label="$options.i18n.notificationsLimitLabel"
+      :description="$options.i18n.notificationsLimitDescription"
+      :changelog-entries="$options.sampleChangelogEntries"
+      @limit-change="onLimitChange"
+    />
+    <!--
     <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>
@@ -52,5 +84,6 @@ export default {
     <div class="gl-bg-gray-10 gl-p-5 gl-border-1 gl-border-solid gl-border-blue-200">
       <p>Placeholder for excluded namespaces component</p>
     </div>
+      -->
   </div>
 </template>

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 #385759