Merge branch 'add-code-analytics-vue-skeleton' into 'master'

Add skeleton for code analytics

See merge request gitlab-org/gitlab!18266

ee/app/assets/javascripts/analytics/code_analytics/components/app.vue

+<script>
+import { GlEmptyState } from '@gitlab/ui';
+import createStore from '../store';
+
+export default {
+  name: 'CodeAnalytics',
+  store: createStore(),
+  components: {
+    GlEmptyState,
+  },
+  props: {
+    emptyStateSvgPath: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-empty-state
+    :title="__('Identify the most frequently changed files in your repository')"
+    :description="
+      __(
+        'Identify areas of the codebase associated with a lot of churn, which can indicate potential code hotspots.',
+      )
+    "
+    :svg-path="emptyStateSvgPath"
+  />
+</template>

ee/app/assets/javascripts/analytics/code_analytics/index.js

+import Vue from 'vue';
+import CodeAnalytics from './components/app.vue';
+
+export default () => {
+  const el = document.querySelector('#js-code-analytics-app');
+  const { emptyStateSvgPath } = el.dataset;
+
+  return new Vue({
+    el,
+    name: 'CodeAnalyticsApp',
+    components: {
+      CodeAnalytics,
+    },
+    render: createElement =>
+      createElement(CodeAnalytics, {
+        props: {
+          emptyStateSvgPath,
+        },
+      }),
+  });
+};

ee/app/assets/javascripts/analytics/code_analytics/store/index.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default () => new Vuex.Store({});

ee/app/assets/javascripts/pages/analytics/code_analytics/index.js

+import initCodeAnalyticsApp from 'ee/analytics/code_analytics/index';
+
+document.addEventListener('DOMContentLoaded', initCodeAnalyticsApp);

ee/app/views/analytics/code_analytics/show.html.haml

+- page_title _("Code Analytics")
+
+#js-code-analytics-app{ data: { "empty-state-svg-path" => image_path("illustrations/monitoring/getting_started.svg")} }

ee/spec/frontend/analytics/code_analytics/components/app_spec.js

+import Vuex from 'vuex';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlEmptyState } from '@gitlab/ui';
+import Component from 'ee/analytics/code_analytics/components/app.vue';
+
+const emptyStateSvgPath = 'path/to/empty/state';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+let wrapper;
+
+const createComponent = () =>
+  shallowMount(Component, {
+    localVue,
+    sync: false,
+    propsData: {
+      emptyStateSvgPath,
+    },
+  });
+
+describe('Code Analytics component', () => {
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('displays the components as required', () => {
+    it('displays an empty state', () => {
+      const emptyState = wrapper.find(GlEmptyState);
+
+      expect(emptyState.exists()).toBe(true);
+      expect(emptyState.props('title')).toBe(
+        'Identify the most frequently changed files in your repository',
+      );
+      expect(emptyState.props('description')).toBe(
+        'Identify areas of the codebase associated with a lot of churn, which can indicate potential code hotspots.',
+      );
+      expect(emptyState.props('svgPath')).toBe(emptyStateSvgPath);
+    });
+  });
+});

locale/gitlab.pot

@@ -4005,6 +4005,9 @@ msgstr ""
 msgid "Code"
 msgstr ""
 
+msgid "Code Analytics"
+msgstr ""
+
 msgid "Code Owners"
 msgstr ""
 
@@ -8530,6 +8533,12 @@ msgstr ""
 msgid "Identifier"
 msgstr ""
 
+msgid "Identify areas of the codebase associated with a lot of churn, which can indicate potential code hotspots."
+msgstr ""
+
+msgid "Identify the most frequently changed files in your repository"
+msgstr ""
+
 msgid "Identities"
 msgstr ""