Merge branch '323357-mlunoe-add-ensure-data-component' into 'master'

Feat(Ensure Data): add component

See merge request gitlab-org/gitlab!57009

app/assets/javascripts/ensure_data.js

+import emptySvg from '@gitlab/svgs/dist/illustrations/security-dashboard-empty-state.svg';
+import { GlEmptyState } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
+import { __ } from '~/locale';
+
+const ERROR_FETCHING_DATA_HEADER = __('Could not get the data properly');
+const ERROR_FETCHING_DATA_DESCRIPTION = __(
+  'Please try and refresh the page. If the problem persists please contact support.',
+);
+
+/**
+ * This function takes a Component and extends it with data from the `parseData` function.
+ * The data will be made available through `props` and `proivde`.
+ * If the `parseData` throws, the `GlEmptyState` will be returned.
+ * @param  {Component} Component a component to render
+ * @param  {Object} options
+ * @param  {Function} options.parseData a function to parse `data`
+ * @param  {Object} options.data an object to pass to `parseData`
+ * @param  {Boolean} options.shouldLog to tell whether to log any thrown error by `parseData` to Sentry
+ * @param  {Object} options.props to override passed `props` data
+ * @param  {Object} options.provide to override passed `provide` data
+ * @param  {*} ...options the remaining options will be passed as properties to `createElement`
+ * @return {Component} a Vue component to render, either the GlEmptyState or the extended Component
+ */
+export default function ensureData(Component, options = {}) {
+  const { parseData, data, shouldLog = false, props, provide, ...rest } = options;
+  try {
+    const parsedData = parseData(data);
+    return {
+      provide: { ...parsedData, ...provide },
+      render(createElement) {
+        return createElement(Component, {
+          props: { ...parsedData, ...props },
+          ...rest,
+        });
+      },
+    };
+  } catch (error) {
+    if (shouldLog) {
+      Sentry.captureException(error);
+    }
+
+    return {
+      functional: true,
+      render(createElement) {
+        return createElement(GlEmptyState, {
+          props: {
+            title: ERROR_FETCHING_DATA_HEADER,
+            description: ERROR_FETCHING_DATA_DESCRIPTION,
+            svgPath: `data:image/svg+xml;utf8,${encodeURIComponent(emptySvg)}`,
+          },
+        });
+      },
+    };
+  }
+}

locale/gitlab.pot

@@ -8707,6 +8707,9 @@ msgstr ""
 msgid "Could not find iteration"
 msgstr ""
 
+msgid "Could not get the data properly"
+msgstr ""
+
 msgid "Could not load the user chart. Please refresh the page to try again."
 msgstr ""
 
@@ -23056,6 +23059,9 @@ msgstr ""
 msgid "Please try again"
 msgstr ""
 
+msgid "Please try and refresh the page. If the problem persists please contact support."
+msgstr ""
+
 msgid "Please type %{phrase_code} to proceed or close this modal to cancel."
 msgstr ""
 

spec/frontend/vue_shared/components/ensure_data_spec.js

+import { GlEmptyState } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
+import { mount } from '@vue/test-utils';
+import ensureData from '~/ensure_data';
+
+const mockData = { message: 'Hello there' };
+const defaultOptions = {
+  parseData: () => mockData,
+  data: mockData,
+};
+
+const MockChildComponent = {
+  inject: ['message'],
+  render(createElement) {
+    return createElement('h1', this.message);
+  },
+};
+
+const MockParentComponent = {
+  components: {
+    MockChildComponent,
+  },
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+    otherProp: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  render(createElement) {
+    return createElement('div', [this.message, createElement(MockChildComponent)]);
+  },
+};
+
+describe('EnsureData', () => {
+  let wrapper;
+
+  function findEmptyState() {
+    return wrapper.findComponent(GlEmptyState);
+  }
+
+  function findChild() {
+    return wrapper.findComponent(MockChildComponent);
+  }
+  function findParent() {
+    return wrapper.findComponent(MockParentComponent);
+  }
+
+  function createComponent(options = defaultOptions) {
+    return mount(ensureData(MockParentComponent, options));
+  }
+
+  beforeEach(() => {
+    Sentry.captureException = jest.fn();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    Sentry.captureException.mockClear();
+  });
+
+  describe('when parseData throws', () => {
+    it('should render GlEmptyState', () => {
+      wrapper = createComponent({
+        parseData: () => {
+          throw new Error();
+        },
+      });
+
+      expect(findParent().exists()).toBe(false);
+      expect(findChild().exists()).toBe(false);
+      expect(findEmptyState().exists()).toBe(true);
+    });
+
+    it('should not log to Sentry when shouldLog=false (default)', () => {
+      wrapper = createComponent({
+        parseData: () => {
+          throw new Error();
+        },
+      });
+
+      expect(Sentry.captureException).not.toHaveBeenCalled();
+    });
+
+    it('should log to Sentry when shouldLog=true', () => {
+      const error = new Error('Error!');
+      wrapper = createComponent({
+        parseData: () => {
+          throw error;
+        },
+        shouldLog: true,
+      });
+
+      expect(Sentry.captureException).toHaveBeenCalledWith(error);
+    });
+  });
+
+  describe('when parseData succeeds', () => {
+    it('should render MockParentComponent and MockChildComponent', () => {
+      wrapper = createComponent();
+
+      expect(findEmptyState().exists()).toBe(false);
+      expect(findParent().exists()).toBe(true);
+      expect(findChild().exists()).toBe(true);
+    });
+
+    it('enables user to provide data to child components', () => {
+      wrapper = createComponent();
+
+      const childComponent = findChild();
+      expect(childComponent.text()).toBe(mockData.message);
+    });
+
+    it('enables user to override provide data', () => {
+      const message = 'Another message';
+      wrapper = createComponent({ ...defaultOptions, provide: { message } });
+
+      const childComponent = findChild();
+      expect(childComponent.text()).toBe(message);
+    });
+
+    it('enables user to pass props to parent component', () => {
+      wrapper = createComponent();
+
+      expect(findParent().props()).toMatchObject(mockData);
+    });
+
+    it('enables user to override props data', () => {
+      const props = { message: 'Another message', otherProp: true };
+      wrapper = createComponent({ ...defaultOptions, props });
+
+      expect(findParent().props()).toMatchObject(props);
+    });
+
+    it('should not log to Sentry when shouldLog=true', () => {
+      wrapper = createComponent({ ...defaultOptions, shouldLog: true });
+
+      expect(Sentry.captureException).not.toHaveBeenCalled();
+    });
+  });
+});