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'; export const ERROR_FETCHING_DATA_HEADER = __('Could not get the data properly'); export 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)}`, }, }); }, }; } }