Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

1 files changed, 56 insertions, 0 deletions

diff --git a/app/assets/javascripts/ensure_data.js b/app/assets/javascripts/ensure_data.js
new file mode 100644
index 00000000000..5b4d1afc9d0
--- /dev/null
+++ b/app/assets/javascripts/ensure_data.js
@@ -0,0 +1,56 @@
+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)}`,
+          },
+        });
+      },
+    };
+  }
+}