1 files changed, 19 insertions, 3 deletions
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"
     >