diff --git a/app/assets/javascripts/helpers/init_simple_app_helper.js b/app/assets/javascripts/helpers/init_simple_app_helper.js index 695fc455f13..f7bef8c563e 100644 --- a/app/assets/javascripts/helpers/init_simple_app_helper.js +++ b/app/assets/javascripts/helpers/init_simple_app_helper.js @@ -1,4 +1,26 @@ import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; + +/** + * @param {boolean|VueApollo} apolloProviderOption + * @returns {undefined | VueApollo} + */ +const getApolloProvider = (apolloProviderOption) => { + if (apolloProviderOption === true) { + Vue.use(VueApollo); + + return new VueApollo({ + defaultClient: createDefaultClient(), + }); + } + + if (apolloProviderOption instanceof VueApollo) { + return apolloProviderOption; + } + + return undefined; +}; /** * Initializes a component as a simple vue app, passing the necessary props. If the element @@ -8,6 +30,8 @@ import Vue from 'vue'; * * @param {string} selector css selector for where to build * @param {Vue.component} component The Vue compoment to be built as the root of the app + * @param {{withApolloProvider: boolean|VueApollo}} options. extra options to be passed to the vue app + * withApolloProvider: if true, instantiates a default apolloProvider. Also accepts and instance of VueApollo * * @example * ```html @@ -15,13 +39,13 @@ import Vue from 'vue'; * ``` * * ```javascript - * initSimpleApp('#mount-here', MyApp) + * initSimpleApp('#mount-here', MyApp, { withApolloProvider: true }) * ``` * * This will mount MyApp as root on '#mount-here'. It will receive {'some': 'object'} as it's * view model prop. */ -export const initSimpleApp = (selector, component) => { +export const initSimpleApp = (selector, component, { withApolloProvider } = {}) => { const element = document.querySelector(selector); if (!element) { @@ -32,6 +56,7 @@ export const initSimpleApp = (selector, component) => { return new Vue({ el: element, + apolloProvider: getApolloProvider(withApolloProvider), render(h) { return h(component, { props }); }, diff --git a/app/assets/javascripts/members/components/avatars/group_avatar.vue b/app/assets/javascripts/members/components/avatars/group_avatar.vue index 3b176bf2b43..83b5855492b 100644 --- a/app/assets/javascripts/members/components/avatars/group_avatar.vue +++ b/app/assets/javascripts/members/components/avatars/group_avatar.vue @@ -1,11 +1,18 @@ diff --git a/app/assets/javascripts/members/components/icons/private_icon.vue b/app/assets/javascripts/members/components/icons/private_icon.vue new file mode 100644 index 00000000000..6168ea955f3 --- /dev/null +++ b/app/assets/javascripts/members/components/icons/private_icon.vue @@ -0,0 +1,19 @@ + + + diff --git a/app/assets/javascripts/members/components/table/member_source.vue b/app/assets/javascripts/members/components/table/member_source.vue index ed1971d020b..f1a1c4cecaa 100644 --- a/app/assets/javascripts/members/components/table/member_source.vue +++ b/app/assets/javascripts/members/components/table/member_source.vue @@ -1,10 +1,12 @@