Commit 337b3630 authored by Simon Knox's avatar Simon Knox

Merge branch 'ag/332941-sync-sub-details-follow' into 'master'

Update Subscription Sync enums and specs

See merge request gitlab-org/gitlab!65431
parents 9dbdde16 aa7aed3e
......@@ -124,7 +124,7 @@ export default {
},
},
methods: {
didDismissSuccessAlert() {
didDismissAlert() {
this.shouldShowNotifications = false;
},
showActivationModal() {
......@@ -136,7 +136,7 @@ export default {
axios
.post(this.subscriptionSyncPath)
.then(() => {
this.subscriptionSyncStatus = subscriptionSyncStatus.SYNC_SUCCESS;
this.subscriptionSyncStatus = subscriptionSyncStatus.SYNC_PENDING;
})
.catch(() => {
this.subscriptionSyncStatus = subscriptionSyncStatus.SYNC_FAILURE;
......@@ -174,7 +174,7 @@ export default {
v-if="shouldShowNotifications"
class="mb-4"
:sync-status="subscriptionSyncStatus"
@success-alert-dismissed="didDismissSuccessAlert"
@info-alert-dismissed="didDismissAlert"
/>
<section class="row gl-mb-5">
<div class="col-md-6 gl-mb-5">
......
......@@ -3,12 +3,12 @@ import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
import {
manualSyncFailureText,
connectivityIssue,
manualSyncSuccessfulTitle,
manualSyncPendingTitle,
subscriptionSyncStatus,
manualSyncSuccessfulText,
manualSyncPendingText,
} from '../constants';
export const SUCCESS_ALERT_DISMISSED_EVENT = 'success-alert-dismissed';
export const INFO_ALERT_DISMISSED_EVENT = 'info-alert-dismissed';
const subscriptionSyncStatusValidator = (value) =>
!value || Object.values(subscriptionSyncStatus).includes(value);
......@@ -16,8 +16,8 @@ const subscriptionSyncStatusValidator = (value) =>
export default {
name: 'SubscriptionSyncNotifications',
i18n: {
manualSyncSuccessfulText,
manualSyncSuccessfulTitle,
manualSyncPendingText,
manualSyncPendingTitle,
manualSyncFailureText,
connectivityIssue,
},
......@@ -35,16 +35,16 @@ export default {
},
},
computed: {
syncDidSuccess() {
return this.syncStatus === subscriptionSyncStatus.SYNC_SUCCESS;
isSyncPending() {
return this.syncStatus === subscriptionSyncStatus.SYNC_PENDING;
},
syncDidFail() {
return this.syncStatus === subscriptionSyncStatus.SYNC_FAILURE;
},
},
methods: {
didDismissSuccessAlert() {
this.$emit(SUCCESS_ALERT_DISMISSED_EVENT);
didDismissInfoAlert() {
this.$emit(INFO_ALERT_DISMISSED_EVENT);
},
},
};
......@@ -53,12 +53,12 @@ export default {
<template>
<div>
<gl-alert
v-if="syncDidSuccess"
v-if="isSyncPending"
variant="info"
:title="$options.i18n.manualSyncSuccessfulTitle"
data-testid="sync-success-alert"
@dismiss="didDismissSuccessAlert"
>{{ $options.i18n.manualSyncSuccessfulText }}</gl-alert
:title="$options.i18n.manualSyncPendingTitle"
data-testid="sync-info-alert"
@dismiss="didDismissInfoAlert"
>{{ $options.i18n.manualSyncPendingText }}</gl-alert
>
<gl-alert
v-else-if="syncDidFail"
......
......@@ -66,10 +66,10 @@ export const subscriptionTable = {
type: s__('SuperSonics|Type'),
};
export const connectivityIssue = s__('SuperSonics|There is a connectivity issue.');
export const manualSyncSuccessfulText = s__(
export const manualSyncPendingText = s__(
'SuperSonics|Your subscription details will sync shortly.',
);
export const manualSyncSuccessfulTitle = s__('SuperSonics|Sync subscription request.');
export const manualSyncPendingTitle = s__('SuperSonics|Sync subscription request.');
export const manualSyncFailureText = s__(
'SuperSonics|You can no longer sync your subscription details with GitLab. Get help for the most common connectivity issues by %{connectivityHelpLinkStart}troubleshooting the activation code%{connectivityHelpLinkEnd}.',
);
......@@ -84,8 +84,9 @@ export const subscriptionActivationForm = {
export const subscriptionSyncStatus = {
SYNC_FAILURE: 'SYNC_FAILURE',
SYNC_SUCCESS: 'SYNC_SUCCESS',
SYNC_PENDING: 'SYNC_PENDING',
};
export const subscriptionTypes = {
CLOUD: 'cloud',
LICENSE_FILE: 'license_file',
......
......@@ -15,7 +15,7 @@ import SubscriptionDetailsCard from 'ee/admin/subscriptions/show/components/subs
import SubscriptionDetailsHistory from 'ee/admin/subscriptions/show/components/subscription_details_history.vue';
import SubscriptionDetailsUserInfo from 'ee/admin/subscriptions/show/components/subscription_details_user_info.vue';
import SubscriptionSyncNotifications, {
SUCCESS_ALERT_DISMISSED_EVENT,
INFO_ALERT_DISMISSED_EVENT,
} from 'ee/admin/subscriptions/show/components/subscription_sync_notifications.vue';
import {
licensedToHeaderText,
......@@ -370,7 +370,7 @@ describe('Subscription Breakdown', () => {
it('shows a success notification', () => {
expect(findSubscriptionSyncNotifications().props('syncStatus')).toBe(
subscriptionSyncStatus.SYNC_SUCCESS,
subscriptionSyncStatus.SYNC_PENDING,
);
});
......@@ -379,7 +379,7 @@ describe('Subscription Breakdown', () => {
});
it('dismisses the success notification', async () => {
findSubscriptionSyncNotifications().vm.$emit(SUCCESS_ALERT_DISMISSED_EVENT);
findSubscriptionSyncNotifications().vm.$emit(INFO_ALERT_DISMISSED_EVENT);
await nextTick();
expect(findSubscriptionSyncNotifications().exists()).toBe(false);
......
import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import SubscriptionSyncNotifications, {
SUCCESS_ALERT_DISMISSED_EVENT,
INFO_ALERT_DISMISSED_EVENT,
} from 'ee/admin/subscriptions/show/components/subscription_sync_notifications.vue';
import {
connectivityIssue,
manualSyncSuccessfulTitle,
manualSyncPendingText,
manualSyncPendingTitle,
subscriptionSyncStatus,
} from 'ee/admin/subscriptions/show/constants';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
......@@ -17,7 +18,7 @@ describe('Subscription Sync Notifications', () => {
const finAllAlerts = () => wrapper.findAllComponents(GlAlert);
const findFailureAlert = () => wrapper.findByTestId('sync-failure-alert');
const findSuccessAlert = () => wrapper.findByTestId('sync-success-alert');
const findInfoAlert = () => wrapper.findByTestId('sync-info-alert');
const findLink = () => wrapper.findComponent(GlLink);
const createComponent = ({ props, stubs } = {}) => {
......@@ -45,21 +46,29 @@ describe('Subscription Sync Notifications', () => {
});
});
describe('sync success notification', () => {
describe('sync info notification', () => {
beforeEach(() => {
createComponent({
props: { syncStatus: subscriptionSyncStatus.SYNC_SUCCESS },
props: { syncStatus: subscriptionSyncStatus.SYNC_PENDING },
});
});
it('displays an alert with success message', () => {
expect(findSuccessAlert().props('title')).toBe(manualSyncSuccessfulTitle);
it('displays an info alert', () => {
expect(findInfoAlert().props('variant')).toBe('info');
});
it('displays an alert with a title', () => {
expect(findInfoAlert().props('title')).toBe(manualSyncPendingTitle);
});
it('displays an alert with a message', () => {
expect(findInfoAlert().text()).toBe(manualSyncPendingText);
});
it('emits an event when dismissed', () => {
findSuccessAlert().vm.$emit('dismiss');
findInfoAlert().vm.$emit('dismiss');
expect(wrapper.emitted(SUCCESS_ALERT_DISMISSED_EVENT)).toEqual([[]]);
expect(wrapper.emitted(INFO_ALERT_DISMISSED_EVENT)).toHaveLength(1);
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment