Update analytics dashboard list to match MVC design

What does this MR do and why?

This MR updates the Product Analytics dashboard list to match the design as described in #381322 (closed).

This change is hidden behind a default off feature flag.

Screenshots or screen recordings

header	After

How to set up and validate locally

1. You need to setup the product analytics devkit if you haven't already done so. https://gitlab.com/gitlab-org/analytics-section/product-analytics/devkit
2. Enable the feature flag: echo "Feature.enable(:product_analytics_internal_preview)" | rails c.
3. Visit the dashboard page of any project and validate that it renders: http://localhost:3000/gitlab-org/gitlab-shell/-/product_analytics/dashboards/

This will show an empty dashboard if you have no events in clickhouse. To generate events:

1. You can use a browser extension like tapermonkey + this userscript to generate events.
   • Using the userscript above you need to change the host to your devkit's Jitsu URL and use your Jitsu's client key.

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 #381322 (closed)

ee/app/assets/javascripts/product_analytics/dashboards/components/analytics_dashboard_list.vue

 <script>
 import { GlAvatar, GlIcon, GlLabel, GlLink } from '@gitlab/ui';
-import { s__, __ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import jsonList from '../gl_dashboards/analytics_dashboards.json';
+import { I18_DASHBOARD_LIST } from '../constants';
 
 export default {
   name: 'AnalyticsDashboard',
@@ -17,34 +17,24 @@ export default {
       dashboards: jsonList.internalDashboards,
     };
   },
-  computed: {
-    helpPageUrl() {
-      return helpPagePath('user/product_analytics/index', {
-        anchor: 'product-analytics-dashboards',
-      });
-    },
-  },
   methods: {
-    onRowClick(dashboarId) {
+    routeToDashboard(dashboarId) {
       return this.$router.push(dashboarId);
     },
   },
-  i18n: {
-    title: s__('ProductAnalytics|Product analytics dashboards'),
-    description: s__(
-      'ProductAnalytics|Dashboards are created by editing the projects dashboard files.',
-    ),
-    learnMore: __('Learn more.'),
-  },
+  i18n: I18_DASHBOARD_LIST,
+  helpPageUrl: helpPagePath('user/product_analytics/index', {
+    anchor: 'product-analytics-dashboards',
+  }),
 };
 </script>
 
 <template>
   <div>
-    <h2>{{ $options.i18n.title }}</h2>
-    <p>
+    <h2 data-testid="title">{{ $options.i18n.title }}</h2>
+    <p data-testid="description">
       {{ $options.i18n.description }}
-      <gl-link data-testid="help-link" :href="helpPageUrl" target="_blank">{{
+      <gl-link data-testid="help-link" :href="$options.helpPageUrl" target="_blank">{{
         $options.i18n.learnMore
       }}</gl-link>
     </p>
@@ -54,7 +44,7 @@ export default {
         :key="dashboard.id"
         data-testid="dashboard-list-item"
         class="gl-display-flex! gl-px-5! gl-align-items-center gl-hover-cursor-pointer gl-hover-bg-blue-50"
-        @click="onRowClick(dashboard.id)"
+        @click="routeToDashboard(dashboard.id)"
       >
         <div class="gl-float-left gl-mr-4 gl-display-flex gl-align-items-center">
           <gl-icon