import { defaultDataIdFromObject } from '@apollo/client/core'; import produce from 'immer'; import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; import { parseBoolean } from '~/lib/utils/common_utils'; import createStore from '~/vue_shared/components/metric_images/store'; import service from './service'; import AlertDetails from './components/alert_details.vue'; import { PAGE_CONFIG } from './constants'; import sidebarStatusQuery from './graphql/queries/alert_sidebar_status.query.graphql'; import createRouter from './router'; Vue.use(VueApollo); export default (selector) => { const domEl = document.querySelector(selector); const { alertId, projectPath, projectIssuesPath, projectId, page, canUpdate } = domEl.dataset; const iid = alertId; const router = createRouter(); const resolvers = { Mutation: { toggleSidebarStatus: (_, __, { cache }) => { const sourceData = cache.readQuery({ query: sidebarStatusQuery }); const data = produce(sourceData, (draftData) => { draftData.sidebarStatus = !draftData.sidebarStatus; }); cache.writeQuery({ query: sidebarStatusQuery, data }); }, }, }; const apolloProvider = new VueApollo({ defaultClient: createDefaultClient(resolvers, { cacheConfig: { dataIdFromObject: (object) => { // eslint-disable-next-line no-underscore-dangle if (object.__typename === 'AlertManagementAlert') { return object.iid; } return defaultDataIdFromObject(object); }, }, }), }); apolloProvider.clients.defaultClient.cache.writeQuery({ query: sidebarStatusQuery, data: { sidebarStatus: false, }, }); const provide = { projectPath, alertId, page, projectIssuesPath, projectId, iid, statuses: PAGE_CONFIG[page].STATUSES, canUpdate: parseBoolean(canUpdate), }; const opsProperties = {}; const { TRACK_ALERTS_DETAILS_VIEWS_OPTIONS, TRACK_ALERT_STATUS_UPDATE_OPTIONS } = PAGE_CONFIG[ page ]; provide.trackAlertsDetailsViewsOptions = TRACK_ALERTS_DETAILS_VIEWS_OPTIONS; provide.trackAlertStatusUpdateOptions = TRACK_ALERT_STATUS_UPDATE_OPTIONS; opsProperties.store = createStore({}, service); // eslint-disable-next-line no-new new Vue({ el: selector, name: 'AlertDetailsRoot', components: { AlertDetails, }, ...opsProperties, provide, apolloProvider, router, render(createElement) { return createElement('alert-details', {}); }, }); };