diff options
Diffstat (limited to 'app/assets/javascripts/jira_connect')
10 files changed, 72 insertions, 18 deletions
diff --git a/app/assets/javascripts/jira_connect/branches/components/project_dropdown.vue b/app/assets/javascripts/jira_connect/branches/components/project_dropdown.vue index 88005cccd89..9b36642feb7 100644 --- a/app/assets/javascripts/jira_connect/branches/components/project_dropdown.vue +++ b/app/assets/javascripts/jira_connect/branches/components/project_dropdown.vue @@ -7,6 +7,7 @@ import { GlAvatarLabeled, } from '@gitlab/ui'; import { __ } from '~/locale'; +import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants'; import { PROJECTS_PER_PAGE } from '../constants'; import getProjectsQuery from '../graphql/queries/get_projects.query.graphql'; @@ -80,6 +81,7 @@ export default { i18n: { selectProjectText: __('Select a project'), }, + AVATAR_SHAPE_OPTION_RECT, }; </script> @@ -107,7 +109,7 @@ export default { > <gl-avatar-labeled class="gl-text-truncate" - shape="rect" + :shape="$options.AVATAR_SHAPE_OPTION_RECT" :size="32" :src="project.avatarUrl" :label="project.name" diff --git a/app/assets/javascripts/jira_connect/branches/graphql/queries/get_projects.query.graphql b/app/assets/javascripts/jira_connect/branches/graphql/queries/get_projects.query.graphql index 03e8e3e986b..d9fba40688d 100644 --- a/app/assets/javascripts/jira_connect/branches/graphql/queries/get_projects.query.graphql +++ b/app/assets/javascripts/jira_connect/branches/graphql/queries/get_projects.query.graphql @@ -1,4 +1,4 @@ -#import "~/graphql_shared/fragments/pageInfo.fragment.graphql" +#import "~/graphql_shared/fragments/page_info.fragment.graphql" query jiraGetProjects( $search: String! diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item.vue b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item.vue index 005c3bcd0e3..1fc40e5c0d6 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item.vue +++ b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item.vue @@ -43,7 +43,9 @@ export default { message: s__( 'Integrations|You should now see GitLab.com activity inside your Jira Cloud issues. %{linkStart}Learn more%{linkEnd}', ), - linkUrl: helpPagePath('integration/jira_development_panel.html', { anchor: 'usage' }), + linkUrl: helpPagePath('integration/jira_development_panel.html', { + anchor: 'use-the-integration', + }), variant: 'success', }); diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/app.vue b/app/assets/javascripts/jira_connect/subscriptions/components/app.vue index afdb414e82c..51db3e784aa 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/components/app.vue +++ b/app/assets/javascripts/jira_connect/subscriptions/components/app.vue @@ -3,12 +3,15 @@ import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui'; import { isEmpty } from 'lodash'; import { mapState, mapMutations } from 'vuex'; import { retrieveAlert } from '~/jira_connect/subscriptions/utils'; +import AccessorUtilities from '~/lib/utils/accessor'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { I18N_DEFAULT_SIGN_IN_ERROR_MESSAGE } from '../constants'; import { SET_ALERT } from '../store/mutation_types'; import SignInPage from '../pages/sign_in.vue'; import SubscriptionsPage from '../pages/subscriptions.vue'; import UserLink from './user_link.vue'; import CompatibilityAlert from './compatibility_alert.vue'; +import BrowserSupportAlert from './browser_support_alert.vue'; export default { name: 'JiraConnectApp', @@ -18,9 +21,11 @@ export default { GlSprintf, UserLink, CompatibilityAlert, + BrowserSupportAlert, SignInPage, SubscriptionsPage, }, + mixins: [glFeatureFlagMixin()], inject: { usersPath: { default: '', @@ -45,6 +50,16 @@ export default { userSignedIn() { return Boolean(!this.usersPath || this.user); }, + isOauthEnabled() { + return this.glFeatures.jiraConnectOauth; + }, + /** + * Returns false if the GitLab for Jira app doesn't support the user's browser. + * Any web API that the GitLab for Jira app depends on should be checked here. + */ + isBrowserSupported() { + return !this.isOauthEnabled || AccessorUtilities.canUseCrypto(); + }, }, created() { this.setInitialAlert(); @@ -71,14 +86,15 @@ export default { </script> <template> - <div> - <compatibility-alert /> + <browser-support-alert v-if="!isBrowserSupported" class="gl-mb-7" /> + <div v-else data-testid="jira-connect-app"> + <compatibility-alert class="gl-mb-7" /> <gl-alert v-if="shouldShowAlert" - class="gl-mb-7" :variant="alert.variant" :title="alert.title" + class="gl-mb-5" data-testid="jira-connect-persisted-alert" @dismiss="setAlert" > diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/browser_support_alert.vue b/app/assets/javascripts/jira_connect/subscriptions/components/browser_support_alert.vue new file mode 100644 index 00000000000..ea7db5be0c4 --- /dev/null +++ b/app/assets/javascripts/jira_connect/subscriptions/components/browser_support_alert.vue @@ -0,0 +1,30 @@ +<script> +import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import { helpPagePath } from '~/helpers/help_page_helper'; + +export default { + name: 'BrowserSupportAlert', + components: { + GlAlert, + GlSprintf, + GlLink, + }, + i18n: { + title: s__('Integrations|Your browser is not supported'), + body: s__( + 'Integrations|You must use a %{linkStart}supported browser%{linkEnd} to use the GitLab for Jira app.', + ), + }, + DOCS_LINK_URL: helpPagePath('install/requirements', { anchor: 'supported-web-browsers' }), +}; +</script> +<template> + <gl-alert variant="danger" :title="$options.i18n.title" :dismissible="false"> + <gl-sprintf :message="$options.i18n.body"> + <template #link="{ content }"> + <gl-link :href="$options.DOCS_LINK_URL" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </gl-alert> +</template> diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/compatibility_alert.vue b/app/assets/javascripts/jira_connect/subscriptions/components/compatibility_alert.vue index 3cfbd87ac53..c5b56535247 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/components/compatibility_alert.vue +++ b/app/assets/javascripts/jira_connect/subscriptions/components/compatibility_alert.vue @@ -46,16 +46,13 @@ export default { > <gl-alert v-if="shouldShowAlert" - class="gl-mb-7" variant="info" :title="$options.i18n.title" @dismiss="dismissAlert" > <gl-sprintf :message="$options.i18n.body"> <template #link="{ content }"> - <gl-link :href="$options.DOCS_LINK_URL" target="_blank" rel="noopener noreferrer">{{ - content - }}</gl-link> + <gl-link :href="$options.DOCS_LINK_URL" target="_blank">{{ content }}</gl-link> </template> </gl-sprintf> </gl-alert> diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/group_item_name.vue b/app/assets/javascripts/jira_connect/subscriptions/components/group_item_name.vue index e6c172dae9e..509a32460bb 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/components/group_item_name.vue +++ b/app/assets/javascripts/jira_connect/subscriptions/components/group_item_name.vue @@ -1,5 +1,6 @@ <script> import { GlAvatar, GlIcon } from '@gitlab/ui'; +import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants'; export default { components: { @@ -12,6 +13,7 @@ export default { required: true, }, }, + AVATAR_SHAPE_OPTION_RECT, }; </script> @@ -19,7 +21,12 @@ export default { <div class="gl-display-flex gl-align-items-center"> <gl-icon name="folder-o" class="gl-mr-3" /> <div class="gl-display-none gl-flex-shrink-0 gl-sm-display-flex gl-mr-3"> - <gl-avatar :size="32" shape="rect" :entity-name="group.name" :src="group.avatar_url" /> + <gl-avatar + :size="32" + :shape="$options.AVATAR_SHAPE_OPTION_RECT" + :entity-name="group.name" + :src="group.avatar_url" + /> </div> <div> diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_oauth_button.vue b/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_oauth_button.vue index d7ec909cb28..dfed57df7d6 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_oauth_button.vue +++ b/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_oauth_button.vue @@ -24,7 +24,7 @@ export default { canUseCrypto: AccessorUtilities.canUseCrypto(), }; }, - mounted() { + created() { window.addEventListener('message', this.handleWindowMessage); }, beforeDestroy() { diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue b/app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue index 33126040c16..0251728c896 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue +++ b/app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlTable } from '@gitlab/ui'; +import { GlButton, GlTableLite } from '@gitlab/ui'; import { isEmpty } from 'lodash'; import { mapMutations } from 'vuex'; import { removeSubscription } from '~/jira_connect/subscriptions/api'; @@ -12,7 +12,7 @@ import GroupItemName from './group_item_name.vue'; export default { components: { GlButton, - GlTable, + GlTableLite, GroupItemName, TimeagoTooltip, }, @@ -78,7 +78,7 @@ export default { </script> <template> - <gl-table :items="subscriptions" :fields="$options.fields"> + <gl-table-lite :items="subscriptions" :fields="$options.fields"> <template #cell(name)="{ item }"> <group-item-name :group="item.group" /> </template> @@ -95,5 +95,5 @@ export default { >{{ __('Unlink') }}</gl-button > </template> - </gl-table> + </gl-table-lite> </template> diff --git a/app/assets/javascripts/jira_connect/subscriptions/index.js b/app/assets/javascripts/jira_connect/subscriptions/index.js index 320f0f8aa6c..3b584b5fe98 100644 --- a/app/assets/javascripts/jira_connect/subscriptions/index.js +++ b/app/assets/javascripts/jira_connect/subscriptions/index.js @@ -1,4 +1,4 @@ -import '../../webpack'; +import '~/webpack'; import setConfigs from '@gitlab/ui/dist/config'; import Vue from 'vue'; @@ -48,4 +48,4 @@ export function initJiraConnect() { }); } -document.addEventListener('DOMContentLoaded', initJiraConnect); +initJiraConnect(); |